Add cursor to ITheme

src/renderer/BaseRenderLayer.ts

@@ -1,6 +1,6 @@
 import { IRenderLayer, IColorSet } from './Interfaces';
 import { ITerminal, ITerminalOptions } from '../Interfaces';
-import { acquireCharAtlas } from '../utils/CharAtlas';
+import { acquireCharAtlas } from './CharAtlas';
 
 export const INVERTED_DEFAULT_COLOR = -1;
 
@@ -94,6 +94,15 @@ export abstract class BaseRenderLayer implements IRenderLayer {
     this._ctx.clearRect(startCol * this.scaledCharWidth, startRow * this.scaledCharHeight, colWidth * this.scaledCharWidth, colHeight * this.scaledCharHeight);
   }
 
+  protected drawCharTrueColor(terminal: ITerminal, char: string, code: number, x: number, y: number, color: string): void {
+    this._ctx.save();
+    this._ctx.font = `${terminal.options.fontSize * window.devicePixelRatio}px ${terminal.options.fontFamily}`;
+    this._ctx.textBaseline = 'top';
+    this._ctx.fillStyle = color;
+    this._ctx.fillText(char, x * this.scaledCharWidth, y * this.scaledCharHeight);
+    this._ctx.restore();
+  }
+
   protected drawChar(terminal: ITerminal, char: string, code: number, x: number, y: number, fg: number, underline: boolean = false): void {
     let colorIndex = 0;
     if (fg < 256) {
@@ -105,13 +114,13 @@ export abstract class BaseRenderLayer implements IRenderLayer {
           code * this.scaledCharWidth, colorIndex * this.scaledCharHeight, this.scaledCharWidth, this.scaledCharHeight,
           x * this.scaledCharWidth, y * this.scaledCharHeight, this.scaledCharWidth, this.scaledCharHeight);
     } else {
-      this._drawUncachedChar(terminal, char, fg, x, y, this.scaledCharWidth, this.scaledCharHeight);
+      this._drawUncachedChar(terminal, char, fg, x, y);
     }
     // This draws the atlas (for debugging purposes)
     // this._ctx.drawImage(BaseRenderLayer._charAtlas, 0, 0);
   }
 
-  private _drawUncachedChar(terminal: ITerminal, char: string, fg: number, x: number, y: number, scaledCharWidth: number, scaledCharHeight: number): void {
+  private _drawUncachedChar(terminal: ITerminal, char: string, fg: number, x: number, y: number): void {
     this._ctx.save();
     this._ctx.font = `${terminal.options.fontSize * window.devicePixelRatio}px ${terminal.options.fontFamily}`;
     this._ctx.textBaseline = 'top';
@@ -125,7 +134,7 @@ export abstract class BaseRenderLayer implements IRenderLayer {
       this._ctx.fillStyle = this.colors.foreground;
     }
 
-    this._ctx.fillText(char, x * scaledCharWidth, y * scaledCharHeight);
+    this._ctx.fillText(char, x * this.scaledCharWidth, y * this.scaledCharHeight);
     this._ctx.restore();
   }
 }

src/renderer/CharAtlas.ts

@@ -0,0 +1,141 @@
+import { ITerminal, ITheme } from '../Interfaces';
+import { IColorSet } from '../renderer/Interfaces';
+
+interface ICharAtlasConfig {
+  fontSize: number;
+  fontFamily: string;
+  scaledCharWidth: number;
+  scaledCharHeight: number;
+  colors: IColorSet;
+}
+
+interface ICharAtlasCacheEntry {
+  bitmap: Promise<ImageBitmap>;
+  config: ICharAtlasConfig;
+  ownedBy: ITerminal[];
+}
+
+let charAtlasCache: ICharAtlasCacheEntry[] = [];
+
+export function acquireCharAtlas(terminal: ITerminal, colors: IColorSet): Promise<ImageBitmap> {
+  const scaledCharWidth = terminal.charMeasure.width * window.devicePixelRatio;
+  const scaledCharHeight = terminal.charMeasure.height * window.devicePixelRatio;
+  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.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: null,
+    cursor: 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;
+}
+
+class CharAtlasGenerator {
+  private _canvas: HTMLCanvasElement;
+  private _ctx: CanvasRenderingContext2D;
+
+  constructor() {
+    this._canvas = document.createElement('canvas');
+    this._ctx = this._canvas.getContext('2d');
+    this._ctx.scale(window.devicePixelRatio, window.devicePixelRatio);
+  }
+
+  public generate(scaledCharWidth: number, scaledCharHeight: number, fontSize: number, fontFamily: string, foreground: string, ansiColors: string[]): Promise<ImageBitmap> {
+    this._canvas.width = 255 * scaledCharWidth;
+    this._canvas.height = (/*default*/1 + /*0-15*/16) * scaledCharHeight;
+
+    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.fillText(String.fromCharCode(i), i * scaledCharWidth, 0);
+    }
+
+    // Colors 0-15
+    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 + 1) * scaledCharHeight;
+      // Clear rectangle as some fonts seem to draw over the bottom boundary
+      this._ctx.clearRect(0, y, this._canvas.width, scaledCharHeight);
+      // Draw ascii characters
+      for (let i = 0; i < 256; i++) {
+        this._ctx.fillStyle = ansiColors[colorIndex];
+        this._ctx.fillText(String.fromCharCode(i), i * scaledCharWidth, y);
+      }
+    }
+    this._ctx.restore();
+
+    const charAtlasImageData = this._ctx.getImageData(0, 0, this._canvas.width, this._canvas.height);
+    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;
+  }
+}
+
+const generator = new CharAtlasGenerator();

src/renderer/ColorManager.ts

@@ -77,6 +77,7 @@ export class ColorManager {
     this.colors = {
       foreground: '#ffffff',
       background: '#000000',
+      cursor: '#ffffff',
       ansi: generate256Colors(DEFAULT_ANSI_COLORS)
     };
   }
@@ -84,6 +85,7 @@ export class ColorManager {
   public setTheme(theme: ITheme): void {
     if (theme.foreground) this.colors.foreground = theme.foreground;
     if (theme.background) this.colors.background = theme.background;
+    if (theme.cursor) this.colors.cursor = theme.cursor;
     if (theme.black) this.colors.ansi[0] = theme.black;
     if (theme.red) this.colors.ansi[1] = theme.red;
     if (theme.green) this.colors.ansi[2] = theme.green;

src/renderer/CursorRenderLayer.ts

@@ -139,21 +139,29 @@ export class CursorRenderLayer extends BaseRenderLayer {
   }
 
   private _renderBarCursor(terminal: ITerminal, x: number, y: number, charData: CharData): void {
+    this._ctx.save();
+    this._ctx.fillStyle = this.colors.cursor;
     this.drawLeftLineAtCell(x, y);
+    this._ctx.restore();
   }
 
   private _renderBlockCursor(terminal: ITerminal, x: number, y: number, charData: CharData): void {
+    this._ctx.save();
+    this._ctx.fillStyle = this.colors.cursor;
     this.fillCells(x, y, 1, 1);
-    this.drawChar(terminal, charData[CHAR_DATA_CHAR_INDEX], <number>charData[CHAR_DATA_CODE_INDEX], x, y, COLOR_CODES.BLACK);
+    this._ctx.restore();
+    this.drawCharTrueColor(terminal, charData[CHAR_DATA_CHAR_INDEX], <number>charData[CHAR_DATA_CODE_INDEX], x, y, this.colors.background);
   }
 
   private _renderUnderlineCursor(terminal: ITerminal, x: number, y: number, charData: CharData): void {
+    this._ctx.save();
+    this._ctx.fillStyle = this.colors.cursor;
     this.drawBottomLineAtCell(x, y);
+    this._ctx.restore();
   }
 
   private _renderBlurCursor(terminal: ITerminal, x: number, y: number, charData: CharData): void {
-    // TODO: Support cursor colors
-    this.drawSquareAtCell(x, y, this.colors.foreground);
+    this.drawSquareAtCell(x, y, this.colors.cursor);
   }
 }
 

src/renderer/Interfaces.ts

@@ -52,5 +52,6 @@ export interface IRenderLayer {
 export interface IColorSet {
   foreground: string;
   background: string;
+  cursor: string;
   ansi: string[];
 }