Get webgl glyphs scaling to cell size, invalidate on option change

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 &&

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;

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;
     }

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);
 }