UNPKG

@inst/vscode-bin-darwin

Version:

BINARY ONLY - VSCode binary deployment for macOS

223 lines (197 loc) 7.71 kB
/** * Copyright (c) 2017 The xterm.js authors. All rights reserved. * @license MIT */ import { ITerminal, ITheme } from '../Interfaces'; import { IColorSet } from '../renderer/Interfaces'; import { isFirefox } from '../utils/Browser'; export const CHAR_ATLAS_CELL_SPACING = 1; interface ICharAtlasConfig { fontSize: number; fontFamily: string; scaledCharWidth: number; scaledCharHeight: number; colors: IColorSet; } interface ICharAtlasCacheEntry { bitmap: HTMLCanvasElement | Promise<ImageBitmap>; config: ICharAtlasConfig; ownedBy: ITerminal[]; } let charAtlasCache: ICharAtlasCacheEntry[] = []; /** * Acquires a char atlas, either generating a new one or returning an existing * one that is in use by another terminal. * @param terminal The terminal. * @param colors The colors to use. */ export function acquireCharAtlas(terminal: ITerminal, colors: IColorSet, scaledCharWidth: number, scaledCharHeight: number): HTMLCanvasElement | Promise<ImageBitmap> { const newConfig = generateConfig(scaledCharWidth, scaledCharHeight, terminal, colors); // Check to see if the terminal already owns this config for (let i = 0; i < charAtlasCache.length; i++) { const entry = charAtlasCache[i]; const ownedByIndex = entry.ownedBy.indexOf(terminal); if (ownedByIndex >= 0) { if (configEquals(entry.config, newConfig)) { return entry.bitmap; } else { // The configs differ, release the terminal from the entry if (entry.ownedBy.length === 1) { charAtlasCache.splice(i, 1); } else { entry.ownedBy.splice(ownedByIndex, 1); } break; } } } // Try match a char atlas from the cache for (let i = 0; i < charAtlasCache.length; i++) { const entry = charAtlasCache[i]; if (configEquals(entry.config, newConfig)) { // Add the terminal to the cache entry and return entry.ownedBy.push(terminal); return entry.bitmap; } } const newEntry: ICharAtlasCacheEntry = { bitmap: generator.generate(scaledCharWidth, scaledCharHeight, terminal.options.fontSize, terminal.options.fontFamily, colors.background, colors.foreground, colors.ansi), config: newConfig, ownedBy: [terminal] }; charAtlasCache.push(newEntry); return newEntry.bitmap; } function generateConfig(scaledCharWidth: number, scaledCharHeight: number, terminal: ITerminal, colors: IColorSet): ICharAtlasConfig { const clonedColors = { foreground: colors.foreground, background: colors.background, cursor: null, cursorAccent: null, selection: null, ansi: colors.ansi.slice(0, 16) }; return { scaledCharWidth, scaledCharHeight, fontFamily: terminal.options.fontFamily, fontSize: terminal.options.fontSize, colors: clonedColors }; } function configEquals(a: ICharAtlasConfig, b: ICharAtlasConfig): boolean { for (let i = 0; i < a.colors.ansi.length; i++) { if (a.colors.ansi[i] !== b.colors.ansi[i]) { return false; } } return a.fontFamily === b.fontFamily && a.fontSize === b.fontSize && a.scaledCharWidth === b.scaledCharWidth && a.scaledCharHeight === b.scaledCharHeight && a.colors.foreground === b.colors.foreground && a.colors.background === b.colors.background; } let generator: CharAtlasGenerator; /** * Initializes the char atlas generator. * @param document The document. */ export function initialize(document: Document): void { if (!generator) { generator = new CharAtlasGenerator(document); } } class CharAtlasGenerator { private _canvas: HTMLCanvasElement; private _ctx: CanvasRenderingContext2D; constructor(private _document: Document) { this._canvas = this._document.createElement('canvas'); this._ctx = this._canvas.getContext('2d', {alpha: false}); this._ctx.scale(window.devicePixelRatio, window.devicePixelRatio); } public generate(scaledCharWidth: number, scaledCharHeight: number, fontSize: number, fontFamily: string, background: string, foreground: string, ansiColors: string[]): HTMLCanvasElement | Promise<ImageBitmap> { const cellWidth = scaledCharWidth + CHAR_ATLAS_CELL_SPACING; const cellHeight = scaledCharHeight + CHAR_ATLAS_CELL_SPACING; this._canvas.width = 255 * cellWidth; this._canvas.height = (/*default+default bold*/2 + /*0-15*/16) * cellHeight; this._ctx.fillStyle = background; this._ctx.fillRect(0, 0, this._canvas.width, this._canvas.height); this._ctx.save(); this._ctx.fillStyle = foreground; this._ctx.font = `${fontSize * window.devicePixelRatio}px ${fontFamily}`; this._ctx.textBaseline = 'top'; // Default color for (let i = 0; i < 256; i++) { this._ctx.save(); this._ctx.beginPath(); this._ctx.rect(i * cellWidth, 0, cellWidth, cellHeight); this._ctx.clip(); this._ctx.fillText(String.fromCharCode(i), i * cellWidth, 0); this._ctx.restore(); } // Default color bold this._ctx.save(); this._ctx.font = `bold ${this._ctx.font}`; for (let i = 0; i < 256; i++) { this._ctx.save(); this._ctx.beginPath(); this._ctx.rect(i * cellWidth, cellHeight, cellWidth, cellHeight); this._ctx.clip(); this._ctx.fillText(String.fromCharCode(i), i * cellWidth, cellHeight); this._ctx.restore(); } this._ctx.restore(); // Colors 0-15 this._ctx.font = `${fontSize * window.devicePixelRatio}px ${fontFamily}`; for (let colorIndex = 0; colorIndex < 16; colorIndex++) { // colors 8-15 are bold if (colorIndex === 8) { this._ctx.font = `bold ${this._ctx.font}`; } const y = (colorIndex + 2) * cellHeight; // Draw ascii characters for (let i = 0; i < 256; i++) { this._ctx.save(); this._ctx.beginPath(); this._ctx.rect(i * cellWidth, y, cellWidth, cellHeight); this._ctx.clip(); this._ctx.fillStyle = ansiColors[colorIndex]; this._ctx.fillText(String.fromCharCode(i), i * cellWidth, y); this._ctx.restore(); } } this._ctx.restore(); // Support is patchy for createImageBitmap at the moment, pass a canvas back // if support is lacking as drawImage works there too. Firefox is also // included here as ImageBitmap appears both buggy and has horrible // performance (tested on v55). if (!('createImageBitmap' in window) || isFirefox) { // Regenerate canvas and context as they are now owned by the char atlas const result = this._canvas; this._canvas = this._document.createElement('canvas'); this._ctx = this._canvas.getContext('2d'); this._ctx.scale(window.devicePixelRatio, window.devicePixelRatio); return result; } const charAtlasImageData = this._ctx.getImageData(0, 0, this._canvas.width, this._canvas.height); // Remove the background color from the image so characters may overlap const r = parseInt(background.substr(1, 2), 16); const g = parseInt(background.substr(3, 2), 16); const b = parseInt(background.substr(5, 2), 16); this._clearColor(charAtlasImageData, r, g, b); const promise = window.createImageBitmap(charAtlasImageData); // Clear the rect while the promise is in progress this._ctx.clearRect(0, 0, this._canvas.width, this._canvas.height); return promise; } private _clearColor(imageData: ImageData, r: number, g: number, b: number): void { for (let offset = 0; offset < imageData.data.length; offset += 4) { if (imageData.data[offset] === r && imageData.data[offset + 1] === g && imageData.data[offset + 2] === b) { imageData.data[offset + 3] = 0; } } } }