Underline style and color rendering

addons/xterm-addon-canvas/src/BaseRenderLayer.ts

@@ -191,14 +191,77 @@ export abstract class BaseRenderLayer implements IRenderLayer {
    * @param x The column to fill.
    * @param y The row to fill.
    */
-  protected _fillBottomLineAtCells(x: number, y: number, width: number = 1): void {
+  protected _fillBottomLineAtCells(x: number, y: number, width: number = 1, pixelOffset: number = 0): void {
     this._ctx.fillRect(
       x * this._scaledCellWidth,
-      (y + 1) * this._scaledCellHeight - window.devicePixelRatio - 1 /* Ensure it's drawn within the cell */,
+      (y + 1) * this._scaledCellHeight + pixelOffset - window.devicePixelRatio - 1 /* Ensure it's drawn within the cell */,
       width * this._scaledCellWidth,
       window.devicePixelRatio);
   }
 
+  protected _curlyUnderlineAtCell(x: number, y: number, width: number = 1): void {
+    this._ctx.save();
+    this._ctx.beginPath();
+    this._ctx.strokeStyle = this._ctx.fillStyle;
+    this._ctx.lineWidth = window.devicePixelRatio;
+    for (let xOffset = 0; xOffset < width; xOffset++) {
+      const xLeft = (x + xOffset) * this._scaledCellWidth;
+      const xMid = (x + xOffset + 0.5) * this._scaledCellWidth;
+      const xRight = (x + xOffset + 1) * this._scaledCellWidth;
+      const yMid = (y + 1) * this._scaledCellHeight - window.devicePixelRatio - 1;
+      const yMidBot = yMid - window.devicePixelRatio;
+      const yMidTop = yMid + window.devicePixelRatio;
+      this._ctx.moveTo(xLeft, yMid);
+      this._ctx.bezierCurveTo(
+        xLeft, yMidBot,
+        xMid, yMidBot,
+        xMid, yMid
+      );
+      this._ctx.bezierCurveTo(
+        xMid, yMidTop,
+        xRight, yMidTop,
+        xRight, yMid
+      );
+    }
+    this._ctx.stroke();
+    this._ctx.restore();
+  }
+
+  protected _dottedUnderlineAtCell(x: number, y: number, width: number = 1): void {
+    this._ctx.save();
+    this._ctx.beginPath();
+    this._ctx.strokeStyle = this._ctx.fillStyle;
+    this._ctx.lineWidth = window.devicePixelRatio;
+    this._ctx.setLineDash([window.devicePixelRatio * 2, window.devicePixelRatio]);
+    const xLeft = x * this._scaledCellWidth;
+    const yMid = (y + 1) * this._scaledCellHeight - window.devicePixelRatio - 1;
+    this._ctx.moveTo(xLeft, yMid);
+    for (let xOffset = 0; xOffset < width; xOffset++) {
+      // const xLeft = x * this._scaledCellWidth;
+      const xRight = (x + width + xOffset) * this._scaledCellWidth;
+      this._ctx.lineTo(xRight, yMid);
+    }
+    this._ctx.stroke();
+    this._ctx.closePath();
+    this._ctx.restore();
+  }
+
+  protected _dashedUnderlineAtCell(x: number, y: number, width: number = 1): void {
+    this._ctx.save();
+    this._ctx.beginPath();
+    this._ctx.strokeStyle = this._ctx.fillStyle;
+    this._ctx.lineWidth = window.devicePixelRatio;
+    this._ctx.setLineDash([window.devicePixelRatio * 4, window.devicePixelRatio * 3]);
+    const xLeft = x * this._scaledCellWidth;
+    const xRight = (x + width) * this._scaledCellWidth;
+    const yMid = (y + 1) * this._scaledCellHeight - window.devicePixelRatio - 1;
+    this._ctx.moveTo(xLeft, yMid);
+    this._ctx.lineTo(xRight, yMid);
+    this._ctx.stroke();
+    this._ctx.closePath();
+    this._ctx.restore();
+  }
+
   /**
    * Fills a 1px line (2px on HDPI) at the left of the cell. This uses the
    * existing fillStyle on the context.

addons/xterm-addon-canvas/src/TextRenderLayer.ts

@@ -8,7 +8,7 @@ import { CharData, ICellData } from 'common/Types';
 import { GridCache } from './GridCache';
 import { BaseRenderLayer } from './BaseRenderLayer';
 import { AttributeData } from 'common/buffer/AttributeData';
-import { NULL_CELL_CODE, Content } from 'common/buffer/Constants';
+import { NULL_CELL_CODE, Content, UnderlineStyle } from 'common/buffer/Constants';
 import { IColorSet } from 'browser/Types';
 import { CellData } from 'common/buffer/CellData';
 import { IOptionsService, IBufferService, IDecorationService } from 'common/services/Services';
@@ -269,7 +269,36 @@ export class TextRenderLayer extends BaseRenderLayer {
           this._fillMiddleLineAtCells(x, y, cell.getWidth());
         }
         if (cell.isUnderline()) {
-          this._fillBottomLineAtCells(x, y, cell.getWidth());
+          if (!cell.isUnderlineColorDefault()) {
+            if (cell.isUnderlineColorRGB()) {
+              this._ctx.fillStyle = `rgb(${AttributeData.toColorRGB(cell.getUnderlineColor()).join(',')})`;
+            } else {
+              let fg = cell.getUnderlineColor();
+              if (this._optionsService.rawOptions.drawBoldTextInBrightColors && cell.isBold() && fg < 8) {
+                fg += 8;
+              }
+              this._ctx.fillStyle = this._colors.ansi[fg].css;
+            }
+          }
+          switch (cell.extended.underlineStyle) {
+            case UnderlineStyle.DOUBLE:
+              this._fillBottomLineAtCells(x, y, cell.getWidth(), -window.devicePixelRatio);
+              this._fillBottomLineAtCells(x, y, cell.getWidth(), window.devicePixelRatio);
+              break;
+            case UnderlineStyle.CURLY:
+              this._curlyUnderlineAtCell(x, y, cell.getWidth());
+              break;
+            case UnderlineStyle.DOTTED:
+              this._dottedUnderlineAtCell(x, y, cell.getWidth());
+              break;
+            case UnderlineStyle.DASHED:
+              this._dashedUnderlineAtCell(x, y, cell.getWidth());
+              break;
+            case UnderlineStyle.SINGLE:
+            default:
+              this._fillBottomLineAtCells(x, y, cell.getWidth());
+              break;
+          }
         }
         this._ctx.restore();
       }

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

@@ -169,11 +169,11 @@ export class GlyphRenderer  extends Disposable {
     return this._atlas ? this._atlas.beginFrame() : true;
   }
 
-  public updateCell(x: number, y: number, code: number, bg: number, fg: number, chars: string, lastBg: number): void {
-    this._updateCell(this._vertices.attributes, x, y, code, bg, fg, chars, lastBg);
+  public updateCell(x: number, y: number, code: number, bg: number, fg: number, ext: number, chars: string, lastBg: number): void {
+    this._updateCell(this._vertices.attributes, x, y, code, bg, fg, ext, chars, lastBg);
   }
 
-  private _updateCell(array: Float32Array, x: number, y: number, code: number | undefined, bg: number, fg: number, chars: string, lastBg: number): void {
+  private _updateCell(array: Float32Array, x: number, y: number, code: number | undefined, bg: number, fg: number, ext: number, chars: string, lastBg: number): void {
     const terminal = this._terminal;
 
     const i = (y * terminal.cols + x) * INDICES_PER_CELL;
@@ -185,16 +185,16 @@ export class GlyphRenderer  extends Disposable {
       return;
     }
 
-    let rasterizedGlyph: IRasterizedGlyph;
     if (!this._atlas) {
       return;
     }
 
     // Get the glyph
+    let rasterizedGlyph: IRasterizedGlyph;
     if (chars && chars.length > 1) {
-      rasterizedGlyph = this._atlas.getRasterizedGlyphCombinedChar(chars, bg, fg);
+      rasterizedGlyph = this._atlas.getRasterizedGlyphCombinedChar(chars, bg, fg, ext);
     } else {
-      rasterizedGlyph = this._atlas.getRasterizedGlyph(code, bg, fg);
+      rasterizedGlyph = this._atlas.getRasterizedGlyph(code, bg, fg, ext);
     }
 
     // Fill empty if no glyph was found

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

@@ -6,9 +6,10 @@
 import { IRenderModel, ISelectionRenderModel } from './Types';
 import { fill } from 'common/TypedArrayUtils';
 
-export const RENDER_MODEL_INDICIES_PER_CELL = 3;
+export const RENDER_MODEL_INDICIES_PER_CELL = 4;
 export const RENDER_MODEL_BG_OFFSET = 1;
 export const RENDER_MODEL_FG_OFFSET = 2;
+export const RENDER_MODEL_EXT_OFFSET = 3;
 
 export const COMBINED_CHAR_BIT_MASK = 0x80000000;
 

addons/xterm-addon-webgl/src/Types.d.ts

@@ -4,7 +4,7 @@
  */
 
 export interface IRasterizedGlyphSet {
-  [bg: number]: { [fg: number]: IRasterizedGlyph } | undefined;
+  [bg: number]: { [fg: number]: { [ext: number]: IRasterizedGlyph } } | undefined;
 }
 
 /**

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

@@ -10,7 +10,7 @@ import { acquireCharAtlas, removeTerminalFromCache } from './atlas/CharAtlasCach
 import { WebglCharAtlas } from './atlas/WebglCharAtlas';
 import { RectangleRenderer } from './RectangleRenderer';
 import { IWebGL2RenderingContext } from './Types';
-import { RenderModel, COMBINED_CHAR_BIT_MASK, RENDER_MODEL_BG_OFFSET, RENDER_MODEL_FG_OFFSET, RENDER_MODEL_INDICIES_PER_CELL } from './RenderModel';
+import { RenderModel, COMBINED_CHAR_BIT_MASK, RENDER_MODEL_BG_OFFSET, RENDER_MODEL_FG_OFFSET, RENDER_MODEL_EXT_OFFSET, RENDER_MODEL_INDICIES_PER_CELL } from './RenderModel';
 import { Disposable, toDisposable } from 'common/Lifecycle';
 import { Attributes, BgFlags, Content, FgFlags, NULL_CELL_CHAR, NULL_CELL_CODE } from 'common/buffer/Constants';
 import { Terminal, IEvent } from 'xterm';
@@ -34,7 +34,7 @@ export class WebglRenderer extends Disposable implements IRenderer {
 
   private _model: RenderModel = new RenderModel();
   private _workCell: CellData = new CellData();
-  private _workColors: { fg: number, bg: number } = { fg: 0, bg: 0 };
+  private _workColors: { fg: number, bg: number, ext: number } = { fg: 0, bg: 0, ext: 0 };
 
   private _canvas: HTMLCanvasElement;
   private _gl: IWebGL2RenderingContext;
@@ -353,7 +353,8 @@ export class WebglRenderer extends Disposable implements IRenderer {
         // Nothing has changed, no updates needed
         if (this._model.cells[i] === code &&
             this._model.cells[i + RENDER_MODEL_BG_OFFSET] === this._workColors.bg &&
-            this._model.cells[i + RENDER_MODEL_FG_OFFSET] === this._workColors.fg) {
+            this._model.cells[i + RENDER_MODEL_FG_OFFSET] === this._workColors.fg &&
+            this._model.cells[i + RENDER_MODEL_EXT_OFFSET] === this._workColors.ext) {
           continue;
         }
 
@@ -366,8 +367,9 @@ export class WebglRenderer extends Disposable implements IRenderer {
         this._model.cells[i] = code;
         this._model.cells[i + RENDER_MODEL_BG_OFFSET] = this._workColors.bg;
         this._model.cells[i + RENDER_MODEL_FG_OFFSET] = this._workColors.fg;
+        this._model.cells[i + RENDER_MODEL_EXT_OFFSET] = this._workColors.ext;
 
-        this._glyphRenderer.updateCell(x, y, code, this._workColors.bg, this._workColors.fg, chars, lastBg);
+        this._glyphRenderer.updateCell(x, y, code, this._workColors.bg, this._workColors.fg, this._workColors.ext, chars, lastBg);
 
         if (isJoined) {
           // Restore work cell
@@ -376,10 +378,11 @@ export class WebglRenderer extends Disposable implements IRenderer {
           // Null out non-first cells
           for (x++; x < lastCharX; x++) {
             const j = ((y * terminal.cols) + x) * RENDER_MODEL_INDICIES_PER_CELL;
-            this._glyphRenderer.updateCell(x, y, NULL_CELL_CODE, 0, 0, NULL_CELL_CHAR, 0);
+            this._glyphRenderer.updateCell(x, y, NULL_CELL_CODE, 0, 0, 0, NULL_CELL_CHAR, 0);
             this._model.cells[j] = NULL_CELL_CODE;
             this._model.cells[j + RENDER_MODEL_BG_OFFSET] = this._workColors.bg;
             this._model.cells[j + RENDER_MODEL_FG_OFFSET] = this._workColors.fg;
+            this._model.cells[j + RENDER_MODEL_EXT_OFFSET] = this._workColors.ext;
           }
         }
       }
@@ -394,7 +397,7 @@ export class WebglRenderer extends Disposable implements IRenderer {
   private _loadColorsForCell(x: number, y: number): void {
     this._workColors.bg = this._workCell.bg;
     this._workColors.fg = this._workCell.fg;
-
+    this._workColors.ext = this._workCell.bg & BgFlags.HAS_EXTENDED ? this._workCell.extended.ext : 0;
     // Get any foreground/background overrides, this happens on the model to avoid spreading
     // override logic throughout the different sub-renderers
     let bgOverride: number | undefined;