Simplify color generation code

src/renderer/BaseRenderLayer.ts

@@ -6,6 +6,7 @@ export abstract class BaseRenderLayer implements IRenderLayer {
   protected _canvas: HTMLCanvasElement;
   protected _ctx: CanvasRenderingContext2D;
 
+  // TODO: This will apply to all terminals, should it be per-terminal?
   protected static _charAtlas: ImageBitmap;
   private static _charAtlasCharWidth: number;
   private static _charAtlasCharHeight: number;
@@ -29,7 +30,7 @@ export abstract class BaseRenderLayer implements IRenderLayer {
     this._canvas.height = canvasHeight * window.devicePixelRatio;
     this._canvas.style.width = `${canvasWidth}px`;
     this._canvas.style.height = `${canvasHeight}px`;
-    // Only update the char atlas if the char size changed
+
     if (charSizeChanged) {
       // Only update the char atlas if an update for the right dimensions is not
       // already in progress

src/renderer/Color.ts

@@ -1,6 +1,25 @@
 // TODO: Ideally colors would be exposed through some theme manager since colors
 // are moving to JS.
 
+export enum COLOR_CODES {
+  BLACK = 0,
+  RED = 1,
+  GREEN = 2,
+  YELLOW = 3,
+  BLUE = 4,
+  MAGENTA = 5,
+  CYAN = 6,
+  WHITE = 7,
+  BRIGHT_BLACK = 8,
+  BRIGHT_RED = 9,
+  BRIGHT_GREEN = 10,
+  BRIGHT_YELLOW = 11,
+  BRIGHT_BLUE = 12,
+  BRIGHT_MAGENTA = 13,
+  BRIGHT_CYAN = 14,
+  BRIGHT_WHITE = 15
+}
+
 const TANGO_COLORS = [
   // dark:
   '#2e3436',
@@ -22,33 +41,30 @@ const TANGO_COLORS = [
   '#eeeeec'
 ];
 
-export const COLORS: string[] = (function(): string[] {
-  let colors = TANGO_COLORS.slice();
-  let r = [0x00, 0x5f, 0x87, 0xaf, 0xd7, 0xff];
-  let i;
+export const COLORS: string[] = generate256Colors(TANGO_COLORS);
 
-  // 16-231
-  i = 0;
-  for (; i < 216; i++) {
-    out(r[(i / 36) % 6 | 0], r[(i / 6) % 6 | 0], r[i % 6]);
+function generate256Colors(first16Colors: string[]): string[] {
+  let colors = first16Colors.slice();
+
+  // Generate colors (16-231)
+  let v = [0x00, 0x5f, 0x87, 0xaf, 0xd7, 0xff];
+  for (let i = 0; i < 216; i++) {
+    const r = toPaddedHex(v[(i / 36) % 6 | 0]);
+    const g = toPaddedHex(v[(i / 6) % 6 | 0]);
+    const b = toPaddedHex(v[i % 6]);
+    colors.push(`#${r}${g}${b}`);
   }
 
-  // 232-255 (grey)
-  i = 0;
-  let c: number;
-  for (; i < 24; i++) {
-    c = 8 + i * 10;
-    out(c, c, c);
-  }
-
-  function out(r: number, g: number, b: number): void {
-    colors.push('#' + hex(r) + hex(g) + hex(b));
-  }
-
-  function hex(c: number): string {
-    let s = c.toString(16);
-    return s.length < 2 ? '0' + s : s;
+  // Generate greys (232-255)
+  for (let i = 0; i < 24; i++) {
+    const c = toPaddedHex(8 + i * 10);
+    colors.push(`#${c}${c}${c}`);
   }
 
   return colors;
-})();
+}
+
+function toPaddedHex(c: number): string {
+  let s = c.toString(16);
+  return s.length < 2 ? '0' + s : s;
+}

src/renderer/CursorRenderLayer.ts

@@ -1,7 +1,7 @@
 import { IDataRenderLayer } from './Interfaces';
 import { IBuffer, ICharMeasure, ITerminal } from '../Interfaces';
 import { CHAR_DATA_CODE_INDEX, CHAR_DATA_CHAR_INDEX } from '../Buffer';
-import { COLORS } from './Color';
+import { COLORS, COLOR_CODES } from './Color';
 import { GridCache } from './GridCache';
 import { FLAGS } from './Types';
 import { BaseRenderLayer } from './BaseRenderLayer';
@@ -17,6 +17,7 @@ export class CursorRenderLayer extends BaseRenderLayer implements IDataRenderLay
   public render(terminal: ITerminal, startRow: number, endRow: number): void {
     // TODO: Track blur/focus somehow, support unfocused cursor
 
+    // TODO: scaledCharWidth should probably be on Base as a per-terminal thing
     const scaledCharWidth = Math.ceil(terminal.charMeasure.width) * window.devicePixelRatio;
     const scaledCharHeight = Math.ceil(terminal.charMeasure.height) * window.devicePixelRatio;
 
@@ -44,12 +45,12 @@ export class CursorRenderLayer extends BaseRenderLayer implements IDataRenderLay
     }
 
     this._ctx.save();
-    this._ctx.fillStyle = COLORS[7];
+    this._ctx.fillStyle = COLORS[COLOR_CODES.WHITE];
     this._ctx.fillRect(terminal.buffer.x * scaledCharWidth, viewportRelativeCursorY * scaledCharHeight, scaledCharWidth, scaledCharHeight);
     this._ctx.restore();
 
     const charData = terminal.buffer.lines.get(viewportRelativeCursorY)[terminal.buffer.x];
-    this.drawChar(charData[CHAR_DATA_CHAR_INDEX], <number>charData[CHAR_DATA_CODE_INDEX], 0, terminal.buffer.x, viewportRelativeCursorY, scaledCharWidth, scaledCharHeight);
+    this.drawChar(charData[CHAR_DATA_CHAR_INDEX], <number>charData[CHAR_DATA_CODE_INDEX], COLOR_CODES.BLACK, terminal.buffer.x, viewportRelativeCursorY, scaledCharWidth, scaledCharHeight);
 
     this._state = [terminal.buffer.x, viewportRelativeCursorY];
   }