Support true color... mostly

addons/xterm-addon-webgl/src/RectangleRenderer.ts

@@ -11,6 +11,7 @@ import { Terminal } from 'xterm';
 import { IColorSet, IColor } from 'browser/Types';
 import { IRenderDimensions } from 'browser/renderer/Types';
 import { RENDER_MODEL_BG_OFFSET, RENDER_MODEL_FG_OFFSET, RENDER_MODEL_INDICIES_PER_CELL } from './RenderModel';
+import { AttributeData } from 'common/buffer/AttributeData';
 
 const enum VertexAttribLocations {
   POSITION = 0,
@@ -274,26 +275,31 @@ export class RectangleRenderer {
   }
 
   private _updateRectangle(vertices: IVertices, offset: number, fg: number, bg: number, startX: number, endX: number, y: number): void {
-    let color: IColor | null = null;
+    let rgba: number | undefined;
+    const colorMode = bg & Attributes.CM_MASK;
     if (fg & FgFlags.INVERSE) {
       // Inverted color
-      color = this._colors.foreground;
+      rgba = this._colors.foreground.rgba;
     } else if ((bg & Attributes.CM_MASK) === Attributes.CM_P16 || (bg & Attributes.CM_MASK) === Attributes.CM_P256) {
       // 256 palette
-      color = this._colors.ansi[bg & Attributes.PCOLOR_MASK];
+      rgba = this._colors.ansi[bg & Attributes.PCOLOR_MASK].rgba;
+    } else if (colorMode === Attributes.CM_RGB) {
+      // True color
+      // TODO: Use a switch instead?
+      rgba = (bg & Attributes.RGB_MASK) << 8;
     } else {
-      // TODO: Support true color
       // Default color
-      color = this._colors.background;
+      rgba = this._colors.background.rgba;
     }
     if (vertices.attributes.length < offset + 4) {
       vertices.attributes = expandFloat32Array(vertices.attributes, this._terminal.rows * this._terminal.cols * INDICES_PER_RECTANGLE);
     }
     const x1 = startX * this._dimensions.scaledCellWidth;
     const y1 = y * this._dimensions.scaledCellHeight;
-    const r = ((color.rgba >> 24) & 0xFF) / 255;
-    const g = ((color.rgba >> 16) & 0xFF) / 255;
-    const b = ((color.rgba >> 8 ) & 0xFF) / 255;
+    const r = ((rgba >> 24) & 0xFF) / 255;
+    const g = ((rgba >> 16) & 0xFF) / 255;
+    const b = ((rgba >> 8 ) & 0xFF) / 255;
+    console.log(r, g, b);
 
     this._addRectangle(vertices.attributes, offset, x1, y1, (endX - startX) * this._dimensions.scaledCellWidth, this._dimensions.scaledCellHeight, r, g, b, 1);
   }

addons/xterm-addon-webgl/src/atlas/WebglCharAtlas.ts

@@ -11,6 +11,7 @@ import { is256Color } from './CharAtlasUtils';
 import { throwIfFalsy } from '../WebglUtils';
 import { IColor } from 'browser/Types';
 import { IDisposable } from 'xterm';
+import { AttributeData } from 'common/buffer/AttributeData';
 
 // In practice we're probably never going to exhaust a texture this large. For debugging purposes,
 // however, it can be useful to set this to a really tiny value, to verify that LRU eviction works.
@@ -186,18 +187,33 @@ export class WebglCharAtlas implements IDisposable {
       return this._config.colors.foreground;
     } else if (is256Color(bg)) {
       return this._getColorFromAnsiIndex(bg & Attributes.PCOLOR_MASK);
+    } else if ((bg & Attributes.CM_MASK) === Attributes.CM_RGB) {
+      // TODO: Use a switch for the color mode?
+      // True color
+      const rgb = bg & Attributes.RGB_MASK;
+      const arr = AttributeData.toColorRGB(rgb);
+      // TODO: This object creation is slow
+      return {
+        rgba: rgb << 255,
+        css: `#${toPaddedHex(arr[0])}${toPaddedHex(arr[1])}${toPaddedHex(arr[2])}`
+      };
     }
-    // TODO: Support true color
     return this._config.colors.background;
   }
 
-  private _getForegroundColor(fg: number): IColor {
+  private _getForegroundColor(fg: number): { css: string } {
+    // TODO: Just return the string value
     if (fg & FgFlags.INVERSE) {
       return this._config.colors.background;
     } else if (is256Color(fg)) {
       return this._getColorFromAnsiIndex(fg & Attributes.PCOLOR_MASK);
+    } else if ((fg & Attributes.CM_MASK) === Attributes.CM_RGB) {
+      // TODO: Use a switch for the color mode?
+      // TODO: True color
+      const rgb = fg & Attributes.RGB_MASK;
+      const arr = AttributeData.toColorRGB(rgb);
+      return { css: `#${toPaddedHex(arr[0])}${toPaddedHex(arr[1])}${toPaddedHex(arr[2])}` };
     }
-    // TODO: Support true color
     return this._config.colors.foreground;
   }
 
@@ -411,3 +427,8 @@ function clearColor(imageData: ImageData, color: IColor): boolean {
   }
   return isEmpty;
 }
+
+function toPaddedHex(c: number): string {
+  const s = c.toString(16);
+  return s.length < 2 ? '0' + s : s;
+}