preliminarly RGB support in canvas renderer

src/renderer/BaseRenderLayer.ts

@@ -9,7 +9,7 @@ import { DIM_OPACITY, INVERTED_DEFAULT_COLOR, IGlyphIdentifier } from './atlas/T
 import BaseCharAtlas from './atlas/BaseCharAtlas';
 import { acquireCharAtlas } from './atlas/CharAtlasCache';
 import { is256Color } from './atlas/CharAtlasUtils';
-import { CellData } from '../BufferLine';
+import { CellData, AttributeData } from '../BufferLine';
 
 export abstract class BaseRenderLayer implements IRenderLayer {
   private _canvas: HTMLCanvasElement;
@@ -258,9 +258,14 @@ export abstract class BaseRenderLayer implements IRenderLayer {
    * This is used to validate whether a cached image can be used.
    * @param bold Whether the text is bold.
    */
-  protected drawChars(terminal: ITerminal, chars: string, code: number, width: number, x: number, y: number, fg: number, bg: number, bold: boolean, dim: boolean, italic: boolean): void {
+  protected drawChars(terminal: ITerminal, chars: string, code: number, width: number, x: number, y: number, fg: number, bg: number, bold: boolean, dim: boolean, italic: boolean, cell: CellData): void {
     const drawInBrightColor = terminal.options.drawBoldTextInBrightColors && bold && fg < 8 && fg !== INVERTED_DEFAULT_COLOR;
 
+    if (cell.isFgRGB()) {
+      this._drawUncachedChars(terminal, chars, width, fg, x, y, bold && terminal.options.enableBold, dim, italic, cell);
+      return;
+    }
+
     fg += drawInBrightColor ? 8 : 0;
     this._currentGlyphIdentifier.chars = chars;
     this._currentGlyphIdentifier.code = code;
@@ -292,7 +297,7 @@ export abstract class BaseRenderLayer implements IRenderLayer {
    * @param x The column to draw at.
    * @param y The row to draw at.
    */
-  private _drawUncachedChars(terminal: ITerminal, chars: string, width: number, fg: number, x: number, y: number, bold: boolean, dim: boolean, italic: boolean): void {
+  private _drawUncachedChars(terminal: ITerminal, chars: string, width: number, fg: number, x: number, y: number, bold: boolean, dim: boolean, italic: boolean, cell?: CellData): void {
     this._ctx.save();
     this._ctx.font = this._getFont(terminal, bold, italic);
     this._ctx.textBaseline = 'middle';
@@ -302,6 +307,9 @@ export abstract class BaseRenderLayer implements IRenderLayer {
     } else if (is256Color(fg)) {
       // 256 color support
       this._ctx.fillStyle = this._colors.ansi[fg].css;
+      if (cell && cell.isFgRGB()) {
+        this._ctx.fillStyle = `rgb(${AttributeData.toColorRGB(cell.getFgColor()).join(',')})`;
+      }
     } else {
       this._ctx.fillStyle = this._colors.foreground.css;
     }

src/renderer/TextRenderLayer.ts

@@ -10,7 +10,7 @@ import { INVERTED_DEFAULT_COLOR, DEFAULT_COLOR } from './atlas/Types';
 import { GridCache } from './GridCache';
 import { BaseRenderLayer } from './BaseRenderLayer';
 import { is256Color } from './atlas/CharAtlasUtils';
-import { CellData } from '../BufferLine';
+import { CellData, AttributeData } from '../BufferLine';
 
 /**
  * This CharData looks like a null character, which will forc a clear and render
@@ -126,7 +126,7 @@ export class TextRenderLayer extends BaseRenderLayer {
           // get removed, and `a` would not re-render because it thinks it's
           // already in the correct state.
           // this._state.cache[x][y] = OVERLAP_OWNED_CHAR_DATA;
-          if (lastCharX < line.length - 1 && line.loadCell(lastCharX + 1, this._cell).code === NULL_CELL_CODE) {
+          if (lastCharX < line.length - 1 && line.getCodePoint(lastCharX + 1) === NULL_CELL_CODE) {
             width = 2;
             // this._clearChar(x + 1, y);
             // The overlapping char's char data will force a clear and render when the
@@ -189,7 +189,12 @@ export class TextRenderLayer extends BaseRenderLayer {
       if (bg === INVERTED_DEFAULT_COLOR) {
         nextFillStyle = this._colors.foreground.css;
       } else if (is256Color(bg)) {
-        nextFillStyle = this._colors.ansi[bg].css;
+        if (this._cell.isBgRGB()) {
+          console.log(`rgb(${AttributeData.toColorRGB(this._cell.getBgColor()).join(',')})`);
+          nextFillStyle = `rgb(${AttributeData.toColorRGB(this._cell.getBgColor()).join(',')})`;
+        } else {
+          nextFillStyle = this._colors.ansi[bg].css;
+        }
       }
 
       if (prevFillStyle === null) {
@@ -245,7 +250,8 @@ export class TextRenderLayer extends BaseRenderLayer {
         terminal, chars, code,
         width, x, y,
         fg, bg,
-        !!(flags & FLAGS.BOLD), !!(flags & FLAGS.DIM), !!(flags & FLAGS.ITALIC)
+        !!(flags & FLAGS.BOLD), !!(flags & FLAGS.DIM), !!(flags & FLAGS.ITALIC),
+        this._cell
       );
     });
   }