Support 256 color

src/renderer/BackgroundRenderLayer.ts

@@ -1,7 +1,7 @@
 import { IDataRenderLayer } from './Interfaces';
 import { IBuffer, ICharMeasure, ITerminal } from '../Interfaces';
 import { CHAR_DATA_ATTR_INDEX } from '../Buffer';
-import { TANGO_COLORS } from './Color';
+import { COLORS } from './Color';
 import { GridCache } from './GridCache';
 import { FLAGS } from './Types';
 
@@ -49,11 +49,11 @@ export class BackgroundRenderLayer implements IDataRenderLayer {
         }
 
         const cellState = this._state.cache[x][y];
-        const needsRefresh = (bg < 16 && cellState !== bg) || cellState !== null;
+        const needsRefresh = (bg < 256 && cellState !== bg) || cellState !== null;
         if (needsRefresh) {
-          if (bg < 16) {
+          if (bg < 256) {
             this._ctx.save();
-            this._ctx.fillStyle = TANGO_COLORS[bg];
+            this._ctx.fillStyle = COLORS[bg];
             this._ctx.fillRect(x * scaledCharWidth, y * scaledCharHeight, scaledCharWidth, scaledCharHeight);
             this._ctx.restore();
             this._state.cache[x][y] = bg;

src/renderer/Color.ts

@@ -21,3 +21,34 @@ export const TANGO_COLORS = [
   '#34e2e2',
   '#eeeeec'
 ];
+
+export const COLORS: string[] = (function(): string[] {
+  let colors = TANGO_COLORS.slice();
+  let r = [0x00, 0x5f, 0x87, 0xaf, 0xd7, 0xff];
+  let i;
+
+  // 16-231
+  i = 0;
+  for (; i < 216; i++) {
+    out(r[(i / 36) % 6 | 0], r[(i / 6) % 6 | 0], r[i % 6]);
+  }
+
+  // 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;
+  }
+
+  return colors;
+})();

src/renderer/ForegroundRenderLayer.ts

@@ -1,7 +1,7 @@
 import { IDataRenderLayer } from './Interfaces';
 import { IBuffer, ICharMeasure, ITerminal } from '../Interfaces';
 import { CHAR_DATA_ATTR_INDEX, CHAR_DATA_CODE_INDEX, CHAR_DATA_CHAR_INDEX, CHAR_DATA_WIDTH_INDEX } from '../Buffer';
-import { TANGO_COLORS } from './Color';
+import { COLORS } from './Color';
 import { FLAGS } from './Types';
 import { GridCache } from './GridCache';
 import { CharData } from '../Types';
@@ -104,13 +104,13 @@ export class ForegroundRenderLayer implements IDataRenderLayer {
           colorIndex = fg + 1;
         }
 
-        if (code < 256) {
+        if (code < 256 && (colorIndex > 0 || fg > 255)) {
           // ImageBitmap's draw about twice as fast as from a canvas
           this._ctx.drawImage(this._charAtlas, code * scaledCharWidth, colorIndex * scaledCharHeight, scaledCharWidth, scaledCharHeight, x * scaledCharWidth, y * scaledCharHeight, scaledCharWidth, scaledCharHeight);
         } else {
           // TODO: Evaluate how long it takes to convert from a number
           const width: number = charData[CHAR_DATA_WIDTH_INDEX];
-          this._drawUnicodeChar(char, width, fg, x, y, scaledCharWidth, scaledCharHeight);
+          this._drawUncachedChar(char, width, fg, x, y, scaledCharWidth, scaledCharHeight);
         }
       }
     }
@@ -119,13 +119,14 @@ export class ForegroundRenderLayer implements IDataRenderLayer {
     // this._ctx.drawImage(this._charAtlas, 0, 0);
   }
 
-  private _drawUnicodeChar(char: string, width: number, fg: number, x: number, y: number, scaledCharWidth: number, scaledCharHeight: number): void {
+  private _drawUncachedChar(char: string, width: number, fg: number, x: number, y: number, scaledCharWidth: number, scaledCharHeight: number): void {
     this._ctx.save();
     this._ctx.font = `${16 * window.devicePixelRatio}px courier`;
     this._ctx.textBaseline = 'top';
 
-    if (fg < 16) {
-      this._ctx.fillStyle = TANGO_COLORS[fg];
+    // 256 color support
+    if (fg < 256) {
+      this._ctx.fillStyle = COLORS[fg];
     } else {
       this._ctx.fillStyle = '#ffffff';
     }
@@ -174,7 +175,7 @@ class CharAtlasGenerator {
       this._ctx.clearRect(0, y, this._canvas.width, scaledCharHeight);
       // Draw ascii characters
       for (let i = 0; i < 256; i++) {
-        this._ctx.fillStyle = TANGO_COLORS[colorIndex];
+        this._ctx.fillStyle = COLORS[colorIndex];
         this._ctx.fillText(String.fromCharCode(i), i * scaledCharWidth, y);
       }
     }