From 011026a8d15fac5546d10c2fbe033516b7a09492 Mon Sep 17 00:00:00 2001
From: Daniel Imms <2193314+Tyriar@users.noreply.github.com>
Date: Wed, 18 Aug 2021 08:29:07 -0700
Subject: [PATCH] Get webgl glyphs scaling to cell size, invalidate on option
 change

---
 addons/xterm-addon-webgl/src/atlas/CharAtlasUtils.ts | 5 +++++
 addons/xterm-addon-webgl/src/atlas/Types.d.ts        | 2 ++
 addons/xterm-addon-webgl/src/atlas/WebglCharAtlas.ts | 6 +++---
 src/browser/renderer/CustomGlyphs.ts                 | 5 -----
 4 files changed, 10 insertions(+), 8 deletions(-)

diff --git a/addons/xterm-addon-webgl/src/atlas/CharAtlasUtils.ts b/addons/xterm-addon-webgl/src/atlas/CharAtlasUtils.ts
index e91c5fd1..6a478338 100644
--- a/addons/xterm-addon-webgl/src/atlas/CharAtlasUtils.ts
+++ b/addons/xterm-addon-webgl/src/atlas/CharAtlasUtils.ts
@@ -30,6 +30,8 @@ export function generateConfig(scaledCellWidth: number, scaledCellHeight: number
   return {
     customBlockAndBoxCharacters: terminal.getOption('customBlockAndBoxCharacters'),
     devicePixelRatio: window.devicePixelRatio,
+    letterSpacing: terminal.getOption('letterSpacing'),
+    lineHeight: terminal.getOption('lineHeight'),
     scaledCellWidth,
     scaledCellHeight,
     scaledCharWidth,
@@ -52,6 +54,9 @@ export function configEquals(a: ICharAtlasConfig, b: ICharAtlasConfig): boolean
     }
   }
   return a.devicePixelRatio === b.devicePixelRatio &&
+      a.customBlockAndBoxCharacters === b.customBlockAndBoxCharacters &&
+      a.lineHeight === b.lineHeight &&
+      a.letterSpacing === b.letterSpacing &&
       a.fontFamily === b.fontFamily &&
       a.fontSize === b.fontSize &&
       a.fontWeight === b.fontWeight &&
diff --git a/addons/xterm-addon-webgl/src/atlas/Types.d.ts b/addons/xterm-addon-webgl/src/atlas/Types.d.ts
index 37384306..acbe3c71 100644
--- a/addons/xterm-addon-webgl/src/atlas/Types.d.ts
+++ b/addons/xterm-addon-webgl/src/atlas/Types.d.ts
@@ -19,6 +19,8 @@ export interface IGlyphIdentifier {
 export interface ICharAtlasConfig {
   customBlockAndBoxCharacters: boolean;
   devicePixelRatio: number;
+  letterSpacing: number;
+  lineHeight: number;
   fontSize: number;
   fontFamily: string;
   fontWeight: FontWeight;
diff --git a/addons/xterm-addon-webgl/src/atlas/WebglCharAtlas.ts b/addons/xterm-addon-webgl/src/atlas/WebglCharAtlas.ts
index e1f69555..6da70522 100644
--- a/addons/xterm-addon-webgl/src/atlas/WebglCharAtlas.ts
+++ b/addons/xterm-addon-webgl/src/atlas/WebglCharAtlas.ts
@@ -84,8 +84,8 @@ export class WebglCharAtlas implements IDisposable {
     this._cacheCtx = throwIfFalsy(this.cacheCanvas.getContext('2d', { alpha: true }));
 
     this._tmpCanvas = document.createElement('canvas');
-    this._tmpCanvas.width = this._config.scaledCharWidth * 4 + TMP_CANVAS_GLYPH_PADDING * 2;
-    this._tmpCanvas.height = this._config.scaledCharHeight + TMP_CANVAS_GLYPH_PADDING * 2;
+    this._tmpCanvas.width = this._config.scaledCellWidth * 4 + TMP_CANVAS_GLYPH_PADDING * 2;
+    this._tmpCanvas.height = this._config.scaledCellHeight + TMP_CANVAS_GLYPH_PADDING * 2;
     this._tmpCtx = throwIfFalsy(this._tmpCanvas.getContext('2d', { alpha: this._config.allowTransparency }));
   }
 
@@ -321,7 +321,7 @@ export class WebglCharAtlas implements IDisposable {
     // Allow 1 cell width per character, with a minimum of 2 (CJK), plus some padding. This is used
     // to draw the glyph to the canvas as well as to restrict the bounding box search to ensure
     // giant ligatures (eg. =====>) don't impact overall performance.
-    const allowedWidth = this._config.scaledCharWidth * Math.max(chars.length, 2) + TMP_CANVAS_GLYPH_PADDING * 2;
+    let allowedWidth = this._config.scaledCharWidth * Math.max(chars.length, 2) + TMP_CANVAS_GLYPH_PADDING * 2;
     if (this._tmpCanvas.width < allowedWidth) {
       this._tmpCanvas.width = allowedWidth;
     }
diff --git a/src/browser/renderer/CustomGlyphs.ts b/src/browser/renderer/CustomGlyphs.ts
index 55dafc6b..7457441b 100644
--- a/src/browser/renderer/CustomGlyphs.ts
+++ b/src/browser/renderer/CustomGlyphs.ts
@@ -404,15 +404,10 @@ function drawPatternChar(
         imageData.data[(y * width + x) * 4 + 3] = charDefinition[y][x] * (a ?? 255);
       }
     }
-    console.log('put', imageData);
     tmpCtx.putImageData(imageData, 0, 0);
-    // TODO: This will break for different colored patterns
-    // TODO: This could happen multiple times
     pattern = throwIfFalsy(ctx.createPattern(tmpCanvas, null));
     patternSet.set(fillStyle, pattern);
   }
-
-  console.log('fill style', pattern);
   ctx.fillStyle = pattern;
   ctx.fillRect(xOffset, yOffset, scaledCellWidth, scaledCellHeight);
 }