From 309487a020d6ac1d0cbb30d8bd2ef2648092ed2c Mon Sep 17 00:00:00 2001
From: Daniel Imms <2193314+Tyriar@users.noreply.github.com>
Date: Sat, 30 Jul 2022 11:07:33 -0700
Subject: [PATCH] Fix character offset to respect texture padding in webgl

Fixes #3974
---
 addons/xterm-addon-webgl/src/atlas/WebglCharAtlas.ts | 12 ++++++------
 demo/client.ts                                       |  8 ++++----
 2 files changed, 10 insertions(+), 10 deletions(-)

diff --git a/addons/xterm-addon-webgl/src/atlas/WebglCharAtlas.ts b/addons/xterm-addon-webgl/src/atlas/WebglCharAtlas.ts
index e5f0fe6c..a7237c48 100644
--- a/addons/xterm-addon-webgl/src/atlas/WebglCharAtlas.ts
+++ b/addons/xterm-addon-webgl/src/atlas/WebglCharAtlas.ts
@@ -401,12 +401,12 @@ export class WebglCharAtlas implements IDisposable {
       `${fontStyle} ${fontWeight} ${this._config.fontSize * this._config.devicePixelRatio}px ${this._config.fontFamily}`;
     this._tmpCtx.textBaseline = TEXT_BASELINE;
 
-    const powerLineGlyph = chars.length === 1 && isPowerlineGlyph(chars.charCodeAt(0));
+    const powerlineGlyph = chars.length === 1 && isPowerlineGlyph(chars.charCodeAt(0));
     const foregroundColor = this._getForegroundColor(bg, bgColorMode, bgColor, fg, fgColorMode, fgColor, inverse, dim, bold, excludeFromContrastRatioDemands(chars.charCodeAt(0)));
     this._tmpCtx.fillStyle = foregroundColor.css;
 
     // For powerline glyphs left/top padding is excluded (https://github.com/microsoft/vscode/issues/120129)
-    const padding = powerLineGlyph ? 0 : TMP_CANVAS_GLYPH_PADDING * 2;
+    const padding = powerlineGlyph ? 0 : TMP_CANVAS_GLYPH_PADDING * 2;
 
     // Draw custom characters if applicable
     let drawSuccess = false;
@@ -577,7 +577,7 @@ export class WebglCharAtlas implements IDisposable {
       return NULL_RASTERIZED_GLYPH;
     }
 
-    const rasterizedGlyph = this._findGlyphBoundingBox(imageData, this._workBoundingBox, allowedWidth, powerLineGlyph, drawSuccess);
+    const rasterizedGlyph = this._findGlyphBoundingBox(imageData, this._workBoundingBox, allowedWidth, powerlineGlyph, padding);
     const clippedImageData = this._clipImageData(imageData, this._workBoundingBox);
 
     // Check if there is enough room in the current row and go to next if needed
@@ -610,7 +610,7 @@ export class WebglCharAtlas implements IDisposable {
    * @param imageData The image data to read.
    * @param boundingBox An IBoundingBox to put the clipped bounding box values.
    */
-  private _findGlyphBoundingBox(imageData: ImageData, boundingBox: IBoundingBox, allowedWidth: number, restrictedGlyph: boolean, customGlyph: boolean): IRasterizedGlyph {
+  private _findGlyphBoundingBox(imageData: ImageData, boundingBox: IBoundingBox, allowedWidth: number, restrictedGlyph: boolean, padding: number): IRasterizedGlyph {
     boundingBox.top = 0;
     const height = restrictedGlyph ? this._config.scaledCellHeight : this._tmpCanvas.height;
     const width = restrictedGlyph ? this._config.scaledCharWidth : allowedWidth;
@@ -685,8 +685,8 @@ export class WebglCharAtlas implements IDisposable {
         y: (boundingBox.bottom - boundingBox.top + 1) / TEXTURE_HEIGHT
       },
       offset: {
-        x: -boundingBox.left + (restrictedGlyph ? 0 : TMP_CANVAS_GLYPH_PADDING) + (customGlyph ? Math.floor(this._config.letterSpacing / 2) : 0),
-        y: -boundingBox.top + (restrictedGlyph ? 0 : TMP_CANVAS_GLYPH_PADDING) + (customGlyph ? this._config.lineHeight === 1 ? 0 : Math.round((this._config.scaledCellHeight - this._config.scaledCharHeight) / 2) : 0)
+        x: -boundingBox.left + padding + (restrictedGlyph ? Math.floor(this._config.letterSpacing / 2) : 0),
+        y: -boundingBox.top + padding + (restrictedGlyph ? this._config.lineHeight === 1 ? 0 : Math.round((this._config.scaledCellHeight - this._config.scaledCharHeight) / 2) : 0)
       }
     };
   }
diff --git a/demo/client.ts b/demo/client.ts
index 1c01a38a..dd3b4325 100644
--- a/demo/client.ts
+++ b/demo/client.ts
@@ -688,7 +688,7 @@ function powerlineSymbolTest() {
     ` 3 \ue0b1 \x1b[33;44m\ue0b0\x1b[39m` +
     ` 4 \ue0b1 \x1b[34;45m\ue0b0\x1b[39m` +
     ` 5 \ue0b1 \x1b[35;46m\ue0b0\x1b[39m` +
-    ` 6 \ue0b1 \x1b[36;47m\ue0b0\x1b[39m` +
+    ` 6 \ue0b1 \x1b[36;47m\ue0b0\x1b[30m` +
     ` 7 \ue0b1 \x1b[37;49m\ue0b0\x1b[0m`
   );
   term.writeln('');
@@ -701,7 +701,7 @@ function powerlineSymbolTest() {
     ` 3 \ue0b3 \x1b[7;33;44m\ue0b2\x1b[27;39m` +
     ` 4 \ue0b3 \x1b[7;34;45m\ue0b2\x1b[27;39m` +
     ` 5 \ue0b3 \x1b[7;35;46m\ue0b2\x1b[27;39m` +
-    ` 6 \ue0b3 \x1b[7;36;47m\ue0b2\x1b[27;39m` +
+    ` 6 \ue0b3 \x1b[7;36;47m\ue0b2\x1b[27;30m` +
     ` 7 \ue0b3 \x1b[7;37;49m\ue0b2\x1b[0m`
   );
   term.writeln('');
@@ -714,7 +714,7 @@ function powerlineSymbolTest() {
     ` 3 \ue0b5 \x1b[33;44m\ue0b4\x1b[39m` +
     ` 4 \ue0b5 \x1b[34;45m\ue0b4\x1b[39m` +
     ` 5 \ue0b5 \x1b[35;46m\ue0b4\x1b[39m` +
-    ` 6 \ue0b5 \x1b[36;47m\ue0b4\x1b[39m` +
+    ` 6 \ue0b5 \x1b[36;47m\ue0b4\x1b[30m` +
     ` 7 \ue0b5 \x1b[37;49m\ue0b4\x1b[0m`
   );
   term.writeln('');
@@ -727,7 +727,7 @@ function powerlineSymbolTest() {
     ` 3 \ue0b7 \x1b[7;33;44m\ue0b6\x1b[27;39m` +
     ` 4 \ue0b7 \x1b[7;34;45m\ue0b6\x1b[27;39m` +
     ` 5 \ue0b7 \x1b[7;35;46m\ue0b6\x1b[27;39m` +
-    ` 6 \ue0b7 \x1b[7;36;47m\ue0b6\x1b[27;39m` +
+    ` 6 \ue0b7 \x1b[7;36;47m\ue0b6\x1b[27;30m` +
     ` 7 \ue0b7 \x1b[7;37;49m\ue0b6\x1b[0m`
   );
   term.writeln('');