Ensure underscore is within cell bounds

Fixes xtermjs#3423
Tyriar · Aug 19, 2021 · 53dbcba · 53dbcba
1 parent 5697086
commit 53dbcba
Show file tree

Hide file tree

Showing 2 changed files with 38 additions and 2 deletions.
diff --git a/addons/xterm-addon-webgl/src/atlas/WebglCharAtlas.ts b/addons/xterm-addon-webgl/src/atlas/WebglCharAtlas.ts
@@ -402,6 +402,22 @@ export class WebglCharAtlas implements IDisposable {
       this._tmpCtx.fillText(chars, padding, padding + this._config.scaledCharHeight);
     }
 
+    // If this charcater is underscore and beyond the cell bounds, shift it up until it is visible,
+    // try for a maximum of 5 pixels.
+    if (chars === '_' && !this._config.allowTransparency) {
+      let isBeyondCellBounds = clearColor(this._tmpCtx.getImageData(padding, padding, this._config.scaledCellWidth, this._config.scaledCellHeight), backgroundColor);
+      if (isBeyondCellBounds) {
+        for (let offset = 1; offset <= 5; offset++) {
+          this._tmpCtx.clearRect(0, 0, this._tmpCanvas.width, this._tmpCanvas.height);
+          this._tmpCtx.fillText(chars, padding, padding + this._config.scaledCharHeight - offset);
+          isBeyondCellBounds = clearColor(this._tmpCtx.getImageData(padding, padding, this._config.scaledCellWidth, this._config.scaledCellHeight), backgroundColor);
+          if (!isBeyondCellBounds) {
+            break;
+          }
+        }
+      }
+    }
+
     // Draw underline and strikethrough
     if (underline || strikethrough) {
       const lineWidth = Math.max(1, Math.floor(this._config.fontSize / 10));

diff --git a/src/browser/renderer/atlas/DynamicCharAtlas.ts b/src/browser/renderer/atlas/DynamicCharAtlas.ts
@@ -266,18 +266,38 @@ export class DynamicCharAtlas extends BaseCharAtlas {
     }
     // Draw the character
     this._tmpCtx.fillText(glyph.chars, 0, this._config.scaledCharHeight);
-    this._tmpCtx.restore();
 
     // clear the background from the character to avoid issues with drawing over the previous
     // character if it extends past it's bounds
-    const imageData = this._tmpCtx.getImageData(
+    let imageData = this._tmpCtx.getImageData(
       0, 0, this._config.scaledCharWidth, this._config.scaledCharHeight
     );
     let isEmpty = false;
     if (!this._config.allowTransparency) {
       isEmpty = clearColor(imageData, backgroundColor);
     }
 
+    // If this charcater is underscore and empty, shift it up until it is visible, try for a maximum
+    // of 5 pixels.
+    if (isEmpty && glyph.chars === '_' && !this._config.allowTransparency) {
+      for (let offset = 1; offset <= 5; offset++) {
+        // Draw the character
+        this._tmpCtx.fillText(glyph.chars, 0, this._config.scaledCharHeight - offset);
+
+        // clear the background from the character to avoid issues with drawing over the previous
+        // character if it extends past it's bounds
+        imageData = this._tmpCtx.getImageData(
+          0, 0, this._config.scaledCharWidth, this._config.scaledCharHeight
+        );
+        isEmpty = clearColor(imageData, backgroundColor);
+        if (!isEmpty) {
+          break;
+        }
+      }
+    }
+
+    this._tmpCtx.restore();
+
     // copy the data from imageData to _cacheCanvas
     const x = this._toCoordinateX(index);
     const y = this._toCoordinateY(index);