Use variants for underline dotted.

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

@@ -13,7 +13,7 @@ import { ICoreBrowserService, IThemeService } from 'browser/services/Services';
 import { ReadonlyColorSet } from 'browser/Types';
 import { CellData } from 'common/buffer/CellData';
 import { WHITESPACE_CELL_CODE } from 'common/buffer/Constants';
-import { IBufferService, IDecorationService, IOptionsService } from 'common/services/Services';
+import { IBufferService, IDecorationService, IOptionsService, IUnicodeService } from 'common/services/Services';
 import { ICellData, IDisposable } from 'common/Types';
 import { Terminal } from 'xterm';
 import { IRenderLayer } from './Types';
@@ -55,10 +55,11 @@ export abstract class BaseRenderLayer extends Disposable implements IRenderLayer
     protected readonly _bufferService: IBufferService,
     protected readonly _optionsService: IOptionsService,
     protected readonly _decorationService: IDecorationService,
-    protected readonly _coreBrowserService: ICoreBrowserService
+    protected readonly _coreBrowserService: ICoreBrowserService,
+    unicodeService: IUnicodeService
   ) {
     super();
-    this._cellColorResolver = new CellColorResolver(this._terminal, this._selectionModel, this._decorationService, this._coreBrowserService, this._themeService);
+    this._cellColorResolver = new CellColorResolver(this._terminal, this._selectionModel, this._decorationService, this._coreBrowserService, this._themeService, unicodeService);
     this._canvas = document.createElement('canvas');
     this._canvas.classList.add(`xterm-${id}-layer`);
     this._canvas.style.zIndex = zIndex.toString();
@@ -367,7 +368,7 @@ export abstract class BaseRenderLayer extends Disposable implements IRenderLayer
    */
   protected _drawChars(cell: ICellData, x: number, y: number): void {
     const chars = cell.getChars();
-    this._cellColorResolver.resolve(cell, x, this._bufferService.buffer.ydisp + y);
+    this._cellColorResolver.resolve(cell, x, this._bufferService.buffer.ydisp + y, this._deviceCellWidth);
 
     if (!this._charAtlas) {
       return;

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

@@ -8,7 +8,7 @@ import { ITerminal } from 'browser/Types';
 import { EventEmitter, forwardEvent } from 'common/EventEmitter';
 import { Disposable, toDisposable } from 'common/Lifecycle';
 import { setTraceLogger } from 'common/services/LogService';
-import { IBufferService, IDecorationService, ILogService } from 'common/services/Services';
+import { IBufferService, IDecorationService, ILogService, IUnicodeService } from 'common/services/Services';
 import { ITerminalAddon, Terminal } from 'xterm';
 import { CanvasRenderer } from './CanvasRenderer';
 
@@ -47,12 +47,14 @@ export class CanvasAddon extends Disposable implements ITerminalAddon {
     const decorationService: IDecorationService = unsafeCore._decorationService;
     const logService: ILogService = unsafeCore._logService;
     const themeService: IThemeService = unsafeCore._themeService;
+    const unicodeService: IUnicodeService = unsafeCore.unicodeService;
 
     // Set trace logger just in case it hasn't been yet which could happen when the addon is
     // bundled separately to the core module
     setTraceLogger(logService);
 
-    this._renderer = new CanvasRenderer(terminal, screenElement, linkifier, bufferService, charSizeService, optionsService, characterJoinerService, coreService, coreBrowserService, decorationService, themeService);
+    this._renderer = new CanvasRenderer(terminal, screenElement, linkifier, bufferService, charSizeService, optionsService, characterJoinerService, coreService, coreBrowserService, decorationService, themeService, unicodeService);
+
     this.register(forwardEvent(this._renderer.onChangeTextureAtlas, this._onChangeTextureAtlas));
     this.register(forwardEvent(this._renderer.onAddTextureAtlasCanvas, this._onAddTextureAtlasCanvas));
     renderService.setRenderer(this._renderer);

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

@@ -11,7 +11,7 @@ import { IRenderDimensions, IRenderer, IRequestRedrawEvent } from 'browser/rende
 import { ICharSizeService, ICharacterJoinerService, ICoreBrowserService, IThemeService } from 'browser/services/Services';
 import { EventEmitter, forwardEvent } from 'common/EventEmitter';
 import { Disposable, toDisposable } from 'common/Lifecycle';
-import { IBufferService, ICoreService, IDecorationService, IOptionsService } from 'common/services/Services';
+import { IBufferService, ICoreService, IDecorationService, IOptionsService, IUnicodeService } from 'common/services/Services';
 import { Terminal } from 'xterm';
 import { CursorRenderLayer } from './CursorRenderLayer';
 import { LinkRenderLayer } from './LinkRenderLayer';
@@ -43,15 +43,16 @@ export class CanvasRenderer extends Disposable implements IRenderer {
     coreService: ICoreService,
     private readonly _coreBrowserService: ICoreBrowserService,
     decorationService: IDecorationService,
-    private readonly _themeService: IThemeService
+    private readonly _themeService: IThemeService,
+    unicodeService: IUnicodeService
   ) {
     super();
     const allowTransparency = this._optionsService.rawOptions.allowTransparency;
     this._renderLayers = [
-      new TextRenderLayer(this._terminal, this._screenElement, 0, allowTransparency, this._bufferService, this._optionsService, characterJoinerService, decorationService, this._coreBrowserService, _themeService),
-      new SelectionRenderLayer(this._terminal, this._screenElement, 1, this._bufferService, this._coreBrowserService, decorationService, this._optionsService, _themeService),
-      new LinkRenderLayer(this._terminal, this._screenElement, 2, linkifier2, this._bufferService, this._optionsService, decorationService, this._coreBrowserService, _themeService),
-      new CursorRenderLayer(this._terminal, this._screenElement, 3, this._onRequestRedraw, this._bufferService, this._optionsService, coreService, this._coreBrowserService, decorationService, _themeService)
+      new TextRenderLayer(this._terminal, this._screenElement, 0, allowTransparency, this._bufferService, this._optionsService, characterJoinerService, decorationService, this._coreBrowserService, _themeService, unicodeService),
+      new SelectionRenderLayer(this._terminal, this._screenElement, 1, this._bufferService, this._coreBrowserService, decorationService, this._optionsService, _themeService, unicodeService),
+      new LinkRenderLayer(this._terminal, this._screenElement, 2, linkifier2, this._bufferService, this._optionsService, decorationService, this._coreBrowserService, _themeService, unicodeService),
+      new CursorRenderLayer(this._terminal, this._screenElement, 3, this._onRequestRedraw, this._bufferService, this._optionsService, coreService, this._coreBrowserService, decorationService, _themeService, unicodeService)
     ];
     for (const layer of this._renderLayers) {
       forwardEvent(layer.onAddTextureAtlasCanvas, this._onAddTextureAtlasCanvas);

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

@@ -11,7 +11,7 @@ import { toDisposable } from 'common/Lifecycle';
 import { isFirefox } from 'common/Platform';
 import { ICellData } from 'common/Types';
 import { CellData } from 'common/buffer/CellData';
-import { IBufferService, ICoreService, IDecorationService, IOptionsService } from 'common/services/Services';
+import { IBufferService, ICoreService, IDecorationService, IOptionsService, IUnicodeService } from 'common/services/Services';
 import { Terminal } from 'xterm';
 import { BaseRenderLayer } from './BaseRenderLayer';
 
@@ -39,9 +39,10 @@ export class CursorRenderLayer extends BaseRenderLayer {
     private readonly _coreService: ICoreService,
     coreBrowserService: ICoreBrowserService,
     decorationService: IDecorationService,
-    themeService: IThemeService
+    themeService: IThemeService,
+    unicodeService: IUnicodeService
   ) {
-    super(terminal, container, 'cursor', zIndex, true, themeService, bufferService, optionsService, decorationService, coreBrowserService);
+    super(terminal, container, 'cursor', zIndex, true, themeService, bufferService, optionsService, decorationService, coreBrowserService, unicodeService);
     this._state = {
       x: 0,
       y: 0,

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

@@ -8,7 +8,7 @@ import { is256Color } from 'browser/renderer/shared/CharAtlasUtils';
 import { INVERTED_DEFAULT_COLOR } from 'browser/renderer/shared/Constants';
 import { IRenderDimensions } from 'browser/renderer/shared/Types';
 import { ICoreBrowserService, IThemeService } from 'browser/services/Services';
-import { IBufferService, IDecorationService, IOptionsService } from 'common/services/Services';
+import { IBufferService, IDecorationService, IOptionsService, IUnicodeService } from 'common/services/Services';
 import { Terminal } from 'xterm';
 import { BaseRenderLayer } from './BaseRenderLayer';
 
@@ -24,9 +24,10 @@ export class LinkRenderLayer extends BaseRenderLayer {
     optionsService: IOptionsService,
     decorationService: IDecorationService,
     coreBrowserService: ICoreBrowserService,
-    themeService: IThemeService
+    themeService: IThemeService,
+    unicodeService: IUnicodeService
   ) {
-    super(terminal, container, 'link', zIndex, true, themeService, bufferService, optionsService, decorationService, coreBrowserService);
+    super(terminal, container, 'link', zIndex, true, themeService, bufferService, optionsService, decorationService, coreBrowserService, unicodeService);
 
     this.register(linkifier2.onShowLinkUnderline(e => this._handleShowLinkUnderline(e)));
     this.register(linkifier2.onHideLinkUnderline(e => this._handleHideLinkUnderline(e)));

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

@@ -5,7 +5,7 @@
 
 import { IRenderDimensions } from 'browser/renderer/shared/Types';
 import { BaseRenderLayer } from './BaseRenderLayer';
-import { IBufferService, IDecorationService, IOptionsService } from 'common/services/Services';
+import { IBufferService, IDecorationService, IOptionsService, IUnicodeService } from 'common/services/Services';
 import { ICoreBrowserService, IThemeService } from 'browser/services/Services';
 import { Terminal } from 'xterm';
 
@@ -27,9 +27,10 @@ export class SelectionRenderLayer extends BaseRenderLayer {
     coreBrowserService: ICoreBrowserService,
     decorationService: IDecorationService,
     optionsService: IOptionsService,
-    themeService: IThemeService
+    themeService: IThemeService,
+    unicodeService: IUnicodeService
   ) {
-    super(terminal, container, 'selection', zIndex, true, themeService, bufferService, optionsService, decorationService, coreBrowserService);
+    super(terminal, container, 'selection', zIndex, true, themeService, bufferService, optionsService, decorationService, coreBrowserService, unicodeService);
     this._clearState();
   }
 

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

@@ -10,7 +10,7 @@ import { CharData, ICellData } from 'common/Types';
 import { AttributeData } from 'common/buffer/AttributeData';
 import { CellData } from 'common/buffer/CellData';
 import { Content, NULL_CELL_CODE } from 'common/buffer/Constants';
-import { IBufferService, IDecorationService, IOptionsService } from 'common/services/Services';
+import { IBufferService, IDecorationService, IOptionsService, IUnicodeService } from 'common/services/Services';
 import { Terminal } from 'xterm';
 import { BaseRenderLayer } from './BaseRenderLayer';
 import { GridCache } from './GridCache';
@@ -39,9 +39,10 @@ export class TextRenderLayer extends BaseRenderLayer {
     private readonly _characterJoinerService: ICharacterJoinerService,
     decorationService: IDecorationService,
     coreBrowserService: ICoreBrowserService,
-    themeService: IThemeService
+    themeService: IThemeService,
+    unicodeService: IUnicodeService
   ) {
-    super(terminal, container, 'text', zIndex, alpha, themeService, bufferService, optionsService, decorationService, coreBrowserService);
+    super(terminal, container, 'text', zIndex, alpha, themeService, bufferService, optionsService, decorationService, coreBrowserService, unicodeService);
     this._state = new GridCache<CharData>();
     this.register(optionsService.onSpecificOptionChange('allowTransparency', value => this._setTransparency(value)));
   }

addons/xterm-addon-image/src/ImageStorage.ts

@@ -53,6 +53,18 @@ class ExtendedAttrsImage implements IExtendedAttrsImage {
     this._ext |= value & (Attributes.CM_MASK | Attributes.RGB_MASK);
   }
 
+  public get underlineVarinatOffset(): number {
+    const val = (this._ext & ExtFlags.VARIANT_OFFSET) >> 29;
+    if (val < 0) {
+      return val ^ 4294967288;
+    }
+    return val;
+  }
+  public set underlineVarinatOffset(value: number) {
+    this._ext &= ~ExtFlags.VARIANT_OFFSET;
+    this._ext |= (value << 29) & ExtFlags.VARIANT_OFFSET;
+  }
+
   private _urlId: number = 0;
   public get urlId(): number {
     return this._urlId;

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

@@ -8,7 +8,7 @@ import { ITerminal } from 'browser/Types';
 import { EventEmitter, forwardEvent } from 'common/EventEmitter';
 import { Disposable, toDisposable } from 'common/Lifecycle';
 import { getSafariVersion, isSafari } from 'common/Platform';
-import { ICoreService, IDecorationService, ILogService, IOptionsService } from 'common/services/Services';
+import { ICoreService, IDecorationService, ILogService, IOptionsService, IUnicodeService } from 'common/services/Services';
 import { ITerminalAddon, Terminal } from 'xterm';
 import { WebglRenderer } from './WebglRenderer';
 import { setTraceLogger } from 'common/services/LogService';
@@ -54,6 +54,7 @@ export class WebglAddon extends Disposable implements ITerminalAddon {
     const decorationService: IDecorationService = unsafeCore._decorationService;
     const logService: ILogService = unsafeCore._logService;
     const themeService: IThemeService = unsafeCore._themeService;
+    const unicodeService: IUnicodeService = unsafeCore.unicodeService;
 
     // Set trace logger just in case it hasn't been yet which could happen when the addon is
     // bundled separately to the core module
@@ -68,6 +69,7 @@ export class WebglAddon extends Disposable implements ITerminalAddon {
       decorationService,
       optionsService,
       themeService,
+      unicodeService,
       this._preserveDrawingBuffer
     ));
     this.register(forwardEvent(this._renderer.onContextLoss, this._onContextLoss));

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

@@ -19,7 +19,7 @@ import { AttributeData } from 'common/buffer/AttributeData';
 import { CellData } from 'common/buffer/CellData';
 import { Attributes, Content, NULL_CELL_CHAR, NULL_CELL_CODE } from 'common/buffer/Constants';
 import { traceCall } from 'common/services/LogService';
-import { ICoreService, IDecorationService, IOptionsService } from 'common/services/Services';
+import { ICoreService, IDecorationService, IOptionsService, IUnicodeService } from 'common/services/Services';
 import { IDisposable, Terminal } from 'xterm';
 import { GlyphRenderer } from './GlyphRenderer';
 import { RectangleRenderer } from './RectangleRenderer';
@@ -70,13 +70,14 @@ export class WebglRenderer extends Disposable implements IRenderer {
     private readonly _decorationService: IDecorationService,
     private readonly _optionsService: IOptionsService,
     private readonly _themeService: IThemeService,
+    private readonly _unicodeService: IUnicodeService,
     preserveDrawingBuffer?: boolean
   ) {
     super();
 
     this.register(this._themeService.onChangeColors(() => this._handleColorChange()));
 
-    this._cellColorResolver = new CellColorResolver(this._terminal, this._model.selection, this._decorationService, this._coreBrowserService, this._themeService);
+    this._cellColorResolver = new CellColorResolver(this._terminal, this._model.selection, this._decorationService, this._coreBrowserService, this._themeService, this._unicodeService);
 
     this._core = (this._terminal as any)._core;
 
@@ -446,10 +447,11 @@ export class WebglRenderer extends Disposable implements IRenderer {
 
         chars = cell.getChars();
         code = cell.getCode();
+
         i = ((y * terminal.cols) + x) * RENDER_MODEL_INDICIES_PER_CELL;
 
         // Load colors/resolve overrides into work colors
-        this._cellColorResolver.resolve(cell, x, row);
+        this._cellColorResolver.resolve(cell, x, row, this.dimensions.device.cell.width);
 
         // Override colors for cursor cell
         if (isCursorVisible && row === cursorY) {

src/browser/renderer/shared/CellColorResolver.ts

@@ -1,8 +1,9 @@
+import { computeVarinatOffset } from 'browser/renderer/shared/RendererUtils';
 import { ISelectionRenderModel } from 'browser/renderer/shared/Types';
 import { ICoreBrowserService, IThemeService } from 'browser/services/Services';
 import { ReadonlyColorSet } from 'browser/Types';
-import { Attributes, BgFlags, FgFlags } from 'common/buffer/Constants';
-import { IDecorationService } from 'common/services/Services';
+import { Attributes, BgFlags, ExtFlags, FgFlags, NULL_CELL_CODE, UnderlineStyle } from 'common/buffer/Constants';
+import { IDecorationService, IUnicodeService } from 'common/services/Services';
 import { ICellData } from 'common/Types';
 import { Terminal } from 'xterm';
 
@@ -13,6 +14,8 @@ let $hasFg = false;
 let $hasBg = false;
 let $isSelected = false;
 let $colors: ReadonlyColorSet | undefined;
+let $y = -1;
+let $variantOffset = 0;
 
 export class CellColorResolver {
   /**
@@ -30,15 +33,16 @@ export class CellColorResolver {
     private readonly _selectionRenderModel: ISelectionRenderModel,
     private readonly _decorationService: IDecorationService,
     private readonly _coreBrowserService: ICoreBrowserService,
-    private readonly _themeService: IThemeService
+    private readonly _themeService: IThemeService,
+    private readonly _unicodeService: IUnicodeService
   ) {
   }
 
   /**
    * Resolves colors for the cell, putting the result into the shared {@link result}. This resolves
    * overrides, inverse and selection for the cell which can then be used to feed into the renderer.
    */
-  public resolve(cell: ICellData, x: number, y: number): void {
+  public resolve(cell: ICellData, x: number, y: number, deviceCellWidth: number): void {
     this.result.bg = cell.bg;
     this.result.fg = cell.fg;
     this.result.ext = cell.bg & BgFlags.HAS_EXTENDED ? cell.extended.ext : 0;
@@ -53,6 +57,16 @@ export class CellColorResolver {
     $isSelected = false;
     $colors = this._themeService.colors;
 
+    if ($y !== y) {
+      $variantOffset = 0;
+    }
+    $y = y;
+
+    const code = cell.getCode();
+    if (code === NULL_CELL_CODE && cell.extended.underlineStyle !== UnderlineStyle.DOTTED) {
+      $variantOffset = 0;
+    }
+
     // Apply decorations on the bottom layer
     this._decorationService.forEachDecorationAtCell(x, y, 'bottom', d => {
       if (d.backgroundColorRGB) {
@@ -133,5 +147,27 @@ export class CellColorResolver {
     // Use the override if it exists
     this.result.bg = $hasBg ? $bg : this.result.bg;
     this.result.fg = $hasFg ? $fg : this.result.fg;
+
+    // Reset overrides variantOffset
+    this.result.ext &= ~ExtFlags.VARIANT_OFFSET;
+    this.result.ext |= ($variantOffset << 29) & ExtFlags.VARIANT_OFFSET;
+
+    // Compute next varinatOffset
+    if (cell.extended.underlineStyle === UnderlineStyle.DOTTED) {
+      if (code !== NULL_CELL_CODE) {
+        const fontSize = this._terminal.options.fontSize;
+        const drp = this._coreBrowserService.dpr;
+        const lineWidth = Math.max(1, Math.floor(fontSize! * drp / 15));
+        let chWidth: number;
+        if (typeof code === 'number') {
+          chWidth = this._unicodeService.wcwidth(code);
+        } else {
+          chWidth = this._unicodeService.getStringCellWidth(code);
+        }
+        $variantOffset = computeVarinatOffset(deviceCellWidth * chWidth, lineWidth, $variantOffset);
+      }
+    } else {
+      $variantOffset = 0;
+    }
   }
 }