Expose texture atlas change event and use in demo

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

@@ -7,13 +7,16 @@ import { Terminal, ITerminalAddon, IEvent } from 'xterm';
 import { WebglRenderer } from './WebglRenderer';
 import { ICharacterJoinerService, ICoreBrowserService, IRenderService } from 'browser/services/Services';
 import { IColorSet } from 'browser/Types';
-import { EventEmitter } from 'common/EventEmitter';
+import { EventEmitter, forwardEvent } from 'common/EventEmitter';
 import { isSafari } from 'common/Platform';
 import { ICoreService, IDecorationService } from 'common/services/Services';
 
 export class WebglAddon implements ITerminalAddon {
   private _terminal?: Terminal;
   private _renderer?: WebglRenderer;
+
+  private _onChangeTextureAtlas = new EventEmitter<HTMLElement>();
+  public get onChangeTextureAtlas(): IEvent<HTMLElement> { return this._onChangeTextureAtlas.event; }
   private _onContextLoss = new EventEmitter<void>();
   public get onContextLoss(): IEvent<void> { return this._onContextLoss.event; }
 
@@ -36,7 +39,8 @@ export class WebglAddon implements ITerminalAddon {
     const decorationService: IDecorationService = (terminal as any)._core._decorationService;
     const colors: IColorSet = (terminal as any)._core._colorManager.colors;
     this._renderer = new WebglRenderer(terminal, colors, characterJoinerService, coreBrowserService, coreService, decorationService, this._preserveDrawingBuffer);
-    this._renderer.onContextLoss(() => this._onContextLoss.fire());
+    forwardEvent(this._renderer.onContextLoss, this._onContextLoss);
+    forwardEvent(this._renderer.onChangeTextureAtlas, this._onChangeTextureAtlas);
     renderService.setRenderer(this._renderer);
   }
 

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

@@ -46,6 +46,8 @@ export class WebglRenderer extends Disposable implements IRenderer {
   private _core: ITerminal;
   private _isAttached: boolean;
 
+  private _onChangeTextureAtlas = new EventEmitter<HTMLCanvasElement>();
+  public get onChangeTextureAtlas(): IEvent<HTMLCanvasElement> { return this._onChangeTextureAtlas.event; }
   private _onRequestRedraw = new EventEmitter<IRequestRedrawEvent>();
   public get onRequestRedraw(): IEvent<IRequestRedrawEvent> { return this._onRequestRedraw.event; }
 
@@ -240,7 +242,10 @@ export class WebglRenderer extends Disposable implements IRenderer {
     if (!('getRasterizedGlyph' in atlas)) {
       throw new Error('The webgl renderer only works with the webgl char atlas');
     }
-    this._charAtlas = atlas as WebglCharAtlas;
+    if (this._charAtlas !== atlas) {
+      this._onChangeTextureAtlas.fire(atlas.cacheCanvas);
+    }
+    this._charAtlas = atlas;
     this._charAtlas.warmUp();
     this._glyphRenderer.setAtlas(this._charAtlas);
   }

demo/client.ts

@@ -240,6 +240,7 @@ function createTerminal(): void {
   typedTerm.loadAddon(addons.webgl.instance);
   setTimeout(() => {
     document.body.appendChild(addons.webgl.instance.textureAtlas);
+    addons.webgl.instance.onChangeTextureAtlas(e => document.body.appendChild(e));
   }, 0);
   term.focus();
 
@@ -506,6 +507,7 @@ function initAddons(term: TerminalType): void {
         if (name === 'webgl') {
           setTimeout(() => {
             document.body.appendChild((addon.instance as WebglAddon).textureAtlas);
+            (addon.instance as WebglAddon).onChangeTextureAtlas(e => document.body.appendChild(e));
           }, 0);
         } else if (name === 'unicode11') {
           term.unicode.activeVersion = '11';