Variants to Canvas.

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

@@ -11,7 +11,7 @@ import { AttributeData } from 'common/buffer/AttributeData';
 import { NULL_CELL_CODE, Content, UnderlineStyle } from 'common/buffer/Constants';
 import { IColorSet, ReadonlyColorSet } from 'browser/Types';
 import { CellData } from 'common/buffer/CellData';
-import { IOptionsService, IBufferService, IDecorationService } from 'common/services/Services';
+import { IOptionsService, IBufferService, IDecorationService, IUnicodeService } from 'common/services/Services';
 import { ICharacterJoinerService, ICoreBrowserService, IThemeService } from 'browser/services/Services';
 import { JoinedCellData } from 'browser/services/CharacterJoinerService';
 import { color, css } from 'common/Color';
@@ -41,7 +41,8 @@ export class TextRenderLayer extends BaseRenderLayer {
     private readonly _characterJoinerService: ICharacterJoinerService,
     decorationService: IDecorationService,
     coreBrowserService: ICoreBrowserService,
-    themeService: IThemeService
+    themeService: IThemeService,
+    private readonly _unicodeService: IUnicodeService
   ) {
     super(terminal, container, 'text', zIndex, alpha, themeService, bufferService, optionsService, decorationService, coreBrowserService);
     this._state = new GridCache<CharData>();
@@ -74,13 +75,20 @@ export class TextRenderLayer extends BaseRenderLayer {
     callback: (
       cell: ICellData,
       x: number,
-      y: number
+      y: number,
+      variantOffset: number
     ) => void
   ): void {
+    const fontSize = this._optionsService.rawOptions.fontSize;
+    const drp = this._coreBrowserService.dpr;
+    const lineWidth = Math.max(1, Math.floor(fontSize * drp / 15));
+    const deviceCellWidth = this._charAtlas?.getDeviceCellWidth();
+    let variantOffset: number = -1;
     for (let y = firstRow; y <= lastRow; y++) {
       const row = y + this._bufferService.buffer.ydisp;
       const line = this._bufferService.buffer.lines.get(row);
       const joinedRanges = this._characterJoinerService.getJoinedCharacters(row);
+      variantOffset = 0;
       for (let x = 0; x < this._bufferService.cols; x++) {
         line!.loadCell(x, this._workCell);
         let cell = this._workCell;
@@ -92,9 +100,20 @@ export class TextRenderLayer extends BaseRenderLayer {
         // The character to the left is a wide character, drawing is owned by
         // the char at x-1
         if (cell.getWidth() === 0) {
+          if (cell.extended.underlineStyle !== UnderlineStyle.DOTTED) {
+            variantOffset = 0;
+          }
           continue;
         }
 
+        const code = cell.getCode();
+        let chWidth: number;
+        if (typeof code === 'number') {
+          chWidth = this._unicodeService.wcwidth(code);
+        } else {
+          chWidth = this._unicodeService.getStringCellWidth(code);
+        }
+
         // exit early for NULL and SP
         // NOTE: commented out due to #4120 (needs a more clever patch to keep things performant)
         // const code = cell.getCode();
@@ -148,9 +167,18 @@ export class TextRenderLayer extends BaseRenderLayer {
         callback(
           cell,
           x,
-          y
+          y,
+          variantOffset
         );
 
+        if (cell.extended.underlineStyle === UnderlineStyle.DOTTED) {
+          if (code !== NULL_CELL_CODE) {
+            variantOffset = ((deviceCellWidth! * chWidth) - ((lineWidth * 2) - variantOffset)) % (lineWidth * 2);
+          }
+        } else {
+          variantOffset = 0;
+        }
+
         x = lastCharX;
       }
     }
@@ -235,7 +263,7 @@ export class TextRenderLayer extends BaseRenderLayer {
   }
 
   private _drawForeground(firstRow: number, lastRow: number): void {
-    this._forEachCell(firstRow, lastRow, (cell, x, y) => this._drawChars(cell, x, y));
+    this._forEachCell(firstRow, lastRow, (cell, x, y, variantOffset) => this._drawChars(cell, x, y, variantOffset ?? 0));
   }
 
   public handleGridChanged(firstRow: number, lastRow: number): void {