From 53dbcbafb2b7e39dc29631f892a5df09390ea131 Mon Sep 17 00:00:00 2001
From: Daniel Imms <2193314+Tyriar@users.noreply.github.com>
Date: Thu, 19 Aug 2021 07:05:42 -0700
Subject: [PATCH] Ensure underscore is within cell bounds

Fixes #3423
---
 .../src/atlas/WebglCharAtlas.ts               | 16 +++++++++++++
 .../renderer/atlas/DynamicCharAtlas.ts        | 24 +++++++++++++++++--
 2 files changed, 38 insertions(+), 2 deletions(-)

diff --git a/addons/xterm-addon-webgl/src/atlas/WebglCharAtlas.ts b/addons/xterm-addon-webgl/src/atlas/WebglCharAtlas.ts
index 340e83c9ff..33a819fb0b 100644
--- 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
index 883ebe7857..a723787850 100644
--- a/src/browser/renderer/atlas/DynamicCharAtlas.ts
+++ b/src/browser/renderer/atlas/DynamicCharAtlas.ts
@@ -266,11 +266,10 @@ 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;
@@ -278,6 +277,27 @@ export class DynamicCharAtlas extends BaseCharAtlas {
       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);