Merge pull request #3386 from Tyriar/webgl_line

Support underline and strikethrough in WebGL renderer
xtermjs · Jul 9, 2021 · e746cd5 · e746cd5
2 parents c8e7edf + 1f01909
commit e746cd5
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 2 deletions.
diff --git a/addons/xterm-addon-webgl/src/atlas/WebglCharAtlas.ts b/addons/xterm-addon-webgl/src/atlas/WebglCharAtlas.ts
@@ -338,6 +338,8 @@ export class WebglCharAtlas implements IDisposable {
     const inverse = !!this._workAttributeData.isInverse();
     const dim = !!this._workAttributeData.isDim();
     const italic = !!this._workAttributeData.isItalic();
+    const underline = !!this._workAttributeData.isUnderline();
+    const strikethrough = !!this._workAttributeData.isStrikethrough();
     let fgColor = this._workAttributeData.getFgColor();
     let fgColorMode = this._workAttributeData.getFgColorMode();
     let bgColor = this._workAttributeData.getBgColor();
@@ -390,6 +392,26 @@ export class WebglCharAtlas implements IDisposable {
 
     // Draw the character
     this._tmpCtx.fillText(chars, padding, padding + this._config.scaledCharHeight);
+
+    // Draw underline and strikethrough
+    if (underline || strikethrough) {
+      const lineWidth = Math.max(1, Math.floor(this._config.fontSize / 10));
+      const yOffset = this._tmpCtx.lineWidth % 2 === 1 ? 0.5 : 0; // When the width is odd, draw at 0.5 position
+      this._tmpCtx.lineWidth = lineWidth;
+      this._tmpCtx.strokeStyle = this._tmpCtx.fillStyle;
+      this._tmpCtx.beginPath();
+      if (underline) {
+        this._tmpCtx.moveTo(padding, padding + this._config.scaledCharHeight - yOffset);
+        this._tmpCtx.lineTo(padding + this._config.scaledCharWidth, padding + this._config.scaledCharHeight - yOffset);
+      }
+      if (strikethrough) {
+        this._tmpCtx.moveTo(padding, padding + Math.floor(this._config.scaledCharHeight / 2) - yOffset);
+        this._tmpCtx.lineTo(padding + this._config.scaledCharWidth, padding + Math.floor(this._config.scaledCharHeight / 2) - yOffset);
+      }
+      this._tmpCtx.stroke();
+      this._tmpCtx.closePath();
+    }
+
     this._tmpCtx.restore();
 
     // clear the background from the character to avoid issues with drawing over the previous

diff --git a/src/common/InputHandler.ts b/src/common/InputHandler.ts
@@ -2360,12 +2360,12 @@ export class InputHandler extends Disposable implements IInputHandler {
    * | 1         | Bold. (also see `options.drawBoldTextInBrightColors`)    | #Y      |
    * | 2         | Faint, decreased intensity.                              | #Y      |
    * | 3         | Italic.                                                  | #Y      |
-   * | 4         | Underlined (see below for style support).                | #P[Support in DOM and Canvas renderers, not WebGL] |
+   * | 4         | Underlined (see below for style support).                | #Y      |
    * | 5         | Slowly blinking.                                         | #N      |
    * | 6         | Rapidly blinking.                                        | #N      |
    * | 7         | Inverse. Flips foreground and background color.          | #Y      |
    * | 8         | Invisible (hidden).                                      | #Y      |
-   * | 9         | Crossed-out characters (strikethrough).                  | #P[Support in DOM and Canvas renderers, not WebGL] |
+   * | 9         | Crossed-out characters (strikethrough).                  | #Y      |
    * | 21        | Doubly underlined.                                       | #P[Currently outputs a single underline.] |
    * | 22        | Normal (neither bold nor faint).                         | #Y      |
    * | 23        | No italic.                                               | #Y      |