Update size when letter spacing changes

addons/xterm-addon-webgl/src/WebglRenderer.ts

@@ -25,7 +25,6 @@ import { ICharacterJoinerService, ICoreBrowserService } from 'browser/services/S
 import { CharData, ICellData } from 'common/Types';
 import { AttributeData } from 'common/buffer/AttributeData';
 import { ICoreService, IDecorationService } from 'common/services/Services';
-import { color, rgba as rgbaNs } from 'common/Color';
 
 export class WebglRenderer extends Disposable implements IRenderer {
   private _renderLayers: IRenderLayer[];

addons/xterm-addon-webgl/typings/xterm-addon-webgl.d.ts

@@ -12,6 +12,16 @@ declare module 'xterm-addon-webgl' {
   export class WebglAddon implements ITerminalAddon {
     public textureAtlas?: HTMLCanvasElement;
 
+    /**
+     * An event that is fired when the renderer loses its canvas context.
+     */
+     public get onContextLoss(): IEvent<void>;
+
+    /**
+     * An event that is fired when the texture atlas of the renderer changes.
+     */
+    public get onChangeTextureAtlas(): IEvent<HTMLCanvasElement>;
+
     constructor(preserveDrawingBuffer?: boolean);
 
     /**
@@ -29,10 +39,5 @@ declare module 'xterm-addon-webgl' {
      * Clears the terminal's texture atlas and triggers a redraw.
      */
     public clearTextureAtlas(): void;
-
-    /**
-     * Fired when the WebglRenderer loses context
-     */
-    public get onContextLoss(): IEvent<void>;
   }
 }

demo/client.ts

@@ -400,20 +400,18 @@ function initOptions(term: TerminalType): void {
     const input = <HTMLInputElement>document.getElementById(`opt-${o}`);
     addDomListener(input, 'change', () => {
       console.log('change', o, input.value);
-      if (o === 'cols' || o === 'rows') {
-        updateTerminalSize();
-      } else if (o === 'lineHeight') {
+      if (o === 'lineHeight') {
         term.options.lineHeight = parseFloat(input.value);
-        updateTerminalSize();
       } else if (o === 'scrollSensitivity') {
         term.options.scrollSensitivity = parseFloat(input.value);
-        updateTerminalSize();
       } else if (o === 'scrollback') {
         term.options.scrollback = parseInt(input.value);
         setTimeout(() => updateTerminalSize(), 5);
       } else {
         term.options[o] = parseInt(input.value);
       }
+      if (['cols', 'rows', 'letterSpacing', 'lineHeight'].includes(o)) {
+        updateTerminalSize();
     });
   });
   Object.keys(stringOptions).forEach(o => {
@@ -505,10 +503,7 @@ function initAddons(term: TerminalType): void {
         addon.instance = new addon.ctor();
         term.loadAddon(addon.instance);
         if (name === 'webgl') {
-          setTimeout(() => {
-            document.body.appendChild((addon.instance as WebglAddon).textureAtlas);
-            (addon.instance as WebglAddon).onChangeTextureAtlas(e => document.body.appendChild(e));
-          }, 0);
+          (addon.instance as WebglAddon).onChangeTextureAtlas(e => document.body.appendChild(e));
         } else if (name === 'unicode11') {
           term.unicode.activeVersion = '11';
         } else if (name === 'search') {