Expose texture atlas as API and use in demo

Part of #2623

Author: Tyriar

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

@@ -10,6 +10,7 @@ import { IColorSet } from 'browser/Types';
 
 export class WebglAddon implements ITerminalAddon {
   private _terminal?: Terminal;
+  private _renderer?: WebglRenderer;
 
   constructor(
     private _preserveDrawingBuffer?: boolean
@@ -22,7 +23,8 @@ export class WebglAddon implements ITerminalAddon {
     this._terminal = terminal;
     const renderService: IRenderService =  (<any>terminal)._core._renderService;
     const colors: IColorSet = (<any>terminal)._core._colorManager.colors;
-    renderService.setRenderer(new WebglRenderer(terminal, colors, this._preserveDrawingBuffer));
+    this._renderer = new WebglRenderer(terminal, colors, this._preserveDrawingBuffer);
+    renderService.setRenderer(this._renderer);
   }
 
   public dispose(): void {
@@ -32,5 +34,10 @@ export class WebglAddon implements ITerminalAddon {
     const renderService: IRenderService = (<any>this._terminal)._core._renderService;
     renderService.setRenderer((<any>this._terminal)._core._createRenderer());
     renderService.onResize(this._terminal.cols, this._terminal.rows);
+    this._renderer = undefined;
+  }
+
+  public get textureAtlas(): HTMLCanvasElement | undefined {
+    return this._renderer?.textureAtlas;
   }
 }

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

@@ -100,6 +100,10 @@ export class WebglRenderer extends Disposable implements IRenderer {
     super.dispose();
   }
 
+  public get textureAtlas(): HTMLCanvasElement | undefined {
+    return this._charAtlas?.cacheCanvas;
+  }
+
   public setColors(colors: IColorSet): void {
     this._colors = colors;
     // Clear layers and force a full render

addons/xterm-addon-webgl/src/atlas/WebglCharAtlas.ts

@@ -86,9 +86,6 @@ export class WebglCharAtlas implements IDisposable {
     this._tmpCanvas.width = this._config.scaledCharWidth * 2 + TMP_CANVAS_GLYPH_PADDING * 2;
     this._tmpCanvas.height = this._config.scaledCharHeight + TMP_CANVAS_GLYPH_PADDING * 2;
     this._tmpCtx = throwIfFalsy(this._tmpCanvas.getContext('2d', {alpha: this._config.allowTransparency}));
-
-    // This is useful for debugging
-    document.body.appendChild(this.cacheCanvas);
   }
 
   public dispose(): void {

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

@@ -10,6 +10,8 @@ declare module 'xterm-addon-webgl' {
    * An xterm.js addon that provides search functionality.
    */
   export class WebglAddon implements ITerminalAddon {
+    public textureAtlas?: HTMLCanvasElement;
+
     constructor(preserveDrawingBuffer?: boolean);
 
     /**

demo/client.ts

@@ -343,7 +343,15 @@ function initAddons(term: TerminalType): void {
       if (checkbox.checked) {
         addon.instance = new addon.ctor();
         term.loadAddon(addon.instance);
+        if (name === 'webgl') {
+          setTimeout(() => {
+            document.body.appendChild((addon.instance as WebglAddon).textureAtlas);
+          }, 0);
+        }
       } else {
+        if (name === 'webgl') {
+          document.body.removeChild((addon.instance as WebglAddon).textureAtlas);
+        }
         addon.instance!.dispose();
         addon.instance = undefined;
       }