@xterm/addon-webgl 0.19.0-beta.8 → 0.19.0-beta.81

package/package.json

@@ -1,11 +1,12 @@
 {
   "name": "@xterm/addon-webgl",
-  "version": "0.19.0-beta.8",
+  "version": "0.19.0-beta.81",
   "author": {
     "name": "The xterm.js authors",
     "url": "https://xtermjs.org/"
   },
   "main": "lib/addon-webgl.js",
+  "module": "lib/addon-webgl.mjs",
   "types": "typings/addon-webgl.d.ts",
   "repository": "https://github.com/xtermjs/xterm.js/tree/master/addons/addon-webgl",
   "license": "MIT",
@@ -20,9 +21,10 @@
     "prepackage": "npm run build",
     "package": "../../node_modules/.bin/webpack",
     "prepublishOnly": "npm run package",
-    "start-server-only": "node ../../demo/start-server-only"
+    "start": "node ../../demo/start"
   },
   "peerDependencies": {
-    "@xterm/xterm": "^5.0.0"
-  }
+    "@xterm/xterm": "^5.6.0-beta.81"
+  },
+  "commit": "cc788312620ba33466c44ec7035c0f75c7894b0d"
 }

package/src/GlyphRenderer.ts

@@ -7,7 +7,7 @@ import { allowRescaling, throwIfFalsy } from 'browser/renderer/shared/RendererUt
 import { TextureAtlas } from 'browser/renderer/shared/TextureAtlas';
 import { IRasterizedGlyph, IRenderDimensions, ITextureAtlas } from 'browser/renderer/shared/Types';
 import { NULL_CELL_CODE } from 'common/buffer/Constants';
-import { Disposable, toDisposable } from 'common/Lifecycle';
+import { Disposable, toDisposable } from 'vs/base/common/lifecycle';
 import { Terminal } from '@xterm/xterm';
 import { IRenderModel, IWebGL2RenderingContext, IWebGLVertexArrayObject } from './Types';
 import { createProgram, GLTexture, PROJECTION_MATRIX } from './WebglUtils';
@@ -127,7 +127,7 @@ export class GlyphRenderer extends Disposable {
     }
 
     this._program = throwIfFalsy(createProgram(gl, vertexShaderSource, createFragmentShaderSource(TextureAtlas.maxAtlasPages)));
-    this.register(toDisposable(() => gl.deleteProgram(this._program)));
+    this._register(toDisposable(() => gl.deleteProgram(this._program)));
 
     // Uniform locations
     this._projectionLocation = throwIfFalsy(gl.getUniformLocation(this._program, 'u_projection'));
@@ -141,7 +141,7 @@ export class GlyphRenderer extends Disposable {
     // Setup a_unitquad, this defines the 4 vertices of a rectangle
     const unitQuadVertices = new Float32Array([0, 0, 1, 0, 0, 1, 1, 1]);
     const unitQuadVerticesBuffer = gl.createBuffer();
-    this.register(toDisposable(() => gl.deleteBuffer(unitQuadVerticesBuffer)));
+    this._register(toDisposable(() => gl.deleteBuffer(unitQuadVerticesBuffer)));
     gl.bindBuffer(gl.ARRAY_BUFFER, unitQuadVerticesBuffer);
     gl.bufferData(gl.ARRAY_BUFFER, unitQuadVertices, gl.STATIC_DRAW);
     gl.enableVertexAttribArray(VertexAttribLocations.UNIT_QUAD);
@@ -152,13 +152,13 @@ export class GlyphRenderer extends Disposable {
     // triangle strip
     const unitQuadElementIndices = new Uint8Array([0, 1, 2, 3]);
     const elementIndicesBuffer = gl.createBuffer();
-    this.register(toDisposable(() => gl.deleteBuffer(elementIndicesBuffer)));
+    this._register(toDisposable(() => gl.deleteBuffer(elementIndicesBuffer)));
     gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, elementIndicesBuffer);
     gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, unitQuadElementIndices, gl.STATIC_DRAW);
 
     // Setup attributes
     this._attributesBuffer = throwIfFalsy(gl.createBuffer());
-    this.register(toDisposable(() => gl.deleteBuffer(this._attributesBuffer)));
+    this._register(toDisposable(() => gl.deleteBuffer(this._attributesBuffer)));
     gl.bindBuffer(gl.ARRAY_BUFFER, this._attributesBuffer);
     gl.enableVertexAttribArray(VertexAttribLocations.OFFSET);
     gl.vertexAttribPointer(VertexAttribLocations.OFFSET, 2, gl.FLOAT, false, BYTES_PER_CELL, 0);
@@ -193,7 +193,7 @@ export class GlyphRenderer extends Disposable {
     this._atlasTextures = [];
     for (let i = 0; i < TextureAtlas.maxAtlasPages; i++) {
       const glTexture = new GLTexture(throwIfFalsy(gl.createTexture()));
-      this.register(toDisposable(() => gl.deleteTexture(glTexture.texture)));
+      this._register(toDisposable(() => gl.deleteTexture(glTexture.texture)));
       gl.activeTexture(gl.TEXTURE0 + i);
       gl.bindTexture(gl.TEXTURE_2D, glTexture.texture);
       gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);

package/src/RectangleRenderer.ts

@@ -8,7 +8,7 @@ import { IRenderDimensions } from 'browser/renderer/shared/Types';
 import { IThemeService } from 'browser/services/Services';
 import { ReadonlyColorSet } from 'browser/Types';
 import { Attributes, FgFlags } from 'common/buffer/Constants';
-import { Disposable, toDisposable } from 'common/Lifecycle';
+import { Disposable, toDisposable } from 'vs/base/common/lifecycle';
 import { IColor } from 'common/Types';
 import { Terminal } from '@xterm/xterm';
 import { RENDER_MODEL_BG_OFFSET, RENDER_MODEL_FG_OFFSET, RENDER_MODEL_INDICIES_PER_CELL } from './RenderModel';
@@ -96,7 +96,7 @@ export class RectangleRenderer extends Disposable {
     const gl = this._gl;
 
     this._program = throwIfFalsy(createProgram(gl, vertexShaderSource, fragmentShaderSource));
-    this.register(toDisposable(() => gl.deleteProgram(this._program)));
+    this._register(toDisposable(() => gl.deleteProgram(this._program)));
 
     // Uniform locations
     this._projectionLocation = throwIfFalsy(gl.getUniformLocation(this._program, 'u_projection'));
@@ -108,7 +108,7 @@ export class RectangleRenderer extends Disposable {
     // Setup a_unitquad, this defines the 4 vertices of a rectangle
     const unitQuadVertices = new Float32Array([0, 0, 1, 0, 0, 1, 1, 1]);
     const unitQuadVerticesBuffer = gl.createBuffer();
-    this.register(toDisposable(() => gl.deleteBuffer(unitQuadVerticesBuffer)));
+    this._register(toDisposable(() => gl.deleteBuffer(unitQuadVerticesBuffer)));
     gl.bindBuffer(gl.ARRAY_BUFFER, unitQuadVerticesBuffer);
     gl.bufferData(gl.ARRAY_BUFFER, unitQuadVertices, gl.STATIC_DRAW);
     gl.enableVertexAttribArray(VertexAttribLocations.UNIT_QUAD);
@@ -119,13 +119,13 @@ export class RectangleRenderer extends Disposable {
     // triangle strip
     const unitQuadElementIndices = new Uint8Array([0, 1, 2, 3]);
     const elementIndicesBuffer = gl.createBuffer();
-    this.register(toDisposable(() => gl.deleteBuffer(elementIndicesBuffer)));
+    this._register(toDisposable(() => gl.deleteBuffer(elementIndicesBuffer)));
     gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, elementIndicesBuffer);
     gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, unitQuadElementIndices, gl.STATIC_DRAW);
 
     // Setup attributes
     this._attributesBuffer = throwIfFalsy(gl.createBuffer());
-    this.register(toDisposable(() => gl.deleteBuffer(this._attributesBuffer)));
+    this._register(toDisposable(() => gl.deleteBuffer(this._attributesBuffer)));
     gl.bindBuffer(gl.ARRAY_BUFFER, this._attributesBuffer);
     gl.enableVertexAttribArray(VertexAttribLocations.POSITION);
     gl.vertexAttribPointer(VertexAttribLocations.POSITION, 2, gl.FLOAT, false, BYTES_PER_RECTANGLE, 0);
@@ -138,7 +138,7 @@ export class RectangleRenderer extends Disposable {
     gl.vertexAttribDivisor(VertexAttribLocations.COLOR, 1);
 
     this._updateCachedColors(_themeService.colors);
-    this.register(this._themeService.onChangeColors(e => {
+    this._register(this._themeService.onChangeColors(e => {
       this._updateCachedColors(e);
       this._updateViewportRectangle();
     }));

package/src/WebglAddon.ts

@@ -7,25 +7,25 @@ import type { ITerminalAddon, Terminal } from '@xterm/xterm';
 import type { WebglAddon as IWebglApi } from '@xterm/addon-webgl';
 import { ICharacterJoinerService, ICharSizeService, ICoreBrowserService, IRenderService, IThemeService } from 'browser/services/Services';
 import { ITerminal } from 'browser/Types';
-import { EventEmitter, forwardEvent } from 'common/EventEmitter';
-import { Disposable, toDisposable } from 'common/Lifecycle';
+import { Disposable, toDisposable } from 'vs/base/common/lifecycle';
 import { getSafariVersion, isSafari } from 'common/Platform';
 import { ICoreService, IDecorationService, ILogService, IOptionsService } from 'common/services/Services';
 import { IWebGL2RenderingContext } from './Types';
 import { WebglRenderer } from './WebglRenderer';
 import { setTraceLogger } from 'common/services/LogService';
+import { Emitter, Event } from 'vs/base/common/event';
 
 export class WebglAddon extends Disposable implements ITerminalAddon , IWebglApi {
   private _terminal?: Terminal;
   private _renderer?: WebglRenderer;
 
-  private readonly _onChangeTextureAtlas = this.register(new EventEmitter<HTMLCanvasElement>());
+  private readonly _onChangeTextureAtlas = this._register(new Emitter<HTMLCanvasElement>());
   public readonly onChangeTextureAtlas = this._onChangeTextureAtlas.event;
-  private readonly _onAddTextureAtlasCanvas = this.register(new EventEmitter<HTMLCanvasElement>());
+  private readonly _onAddTextureAtlasCanvas = this._register(new Emitter<HTMLCanvasElement>());
   public readonly onAddTextureAtlasCanvas = this._onAddTextureAtlasCanvas.event;
-  private readonly _onRemoveTextureAtlasCanvas = this.register(new EventEmitter<HTMLCanvasElement>());
+  private readonly _onRemoveTextureAtlasCanvas = this._register(new Emitter<HTMLCanvasElement>());
   public readonly onRemoveTextureAtlasCanvas = this._onRemoveTextureAtlasCanvas.event;
-  private readonly _onContextLoss = this.register(new EventEmitter<void>());
+  private readonly _onContextLoss = this._register(new Emitter<void>());
   public readonly onContextLoss = this._onContextLoss.event;
 
   constructor(
@@ -49,7 +49,7 @@ export class WebglAddon extends Disposable implements ITerminalAddon , IWebglApi
   public activate(terminal: Terminal): void {
     const core = (terminal as any)._core as ITerminal;
     if (!terminal.element) {
-      this.register(core.onWillOpen(() => this.activate(terminal)));
+      this._register(core.onWillOpen(() => this.activate(terminal)));
       return;
     }
 
@@ -70,7 +70,7 @@ export class WebglAddon extends Disposable implements ITerminalAddon , IWebglApi
     // bundled separately to the core module
     setTraceLogger(logService);
 
-    this._renderer = this.register(new WebglRenderer(
+    this._renderer = this._register(new WebglRenderer(
       terminal,
       characterJoinerService,
       charSizeService,
@@ -81,13 +81,16 @@ export class WebglAddon extends Disposable implements ITerminalAddon , IWebglApi
       themeService,
       this._preserveDrawingBuffer
     ));
-    this.register(forwardEvent(this._renderer.onContextLoss, this._onContextLoss));
-    this.register(forwardEvent(this._renderer.onChangeTextureAtlas, this._onChangeTextureAtlas));
-    this.register(forwardEvent(this._renderer.onAddTextureAtlasCanvas, this._onAddTextureAtlasCanvas));
-    this.register(forwardEvent(this._renderer.onRemoveTextureAtlasCanvas, this._onRemoveTextureAtlasCanvas));
+    this._register(Event.forward(this._renderer.onContextLoss, this._onContextLoss));
+    this._register(Event.forward(this._renderer.onChangeTextureAtlas, this._onChangeTextureAtlas));
+    this._register(Event.forward(this._renderer.onAddTextureAtlasCanvas, this._onAddTextureAtlasCanvas));
+    this._register(Event.forward(this._renderer.onRemoveTextureAtlasCanvas, this._onRemoveTextureAtlasCanvas));
     renderService.setRenderer(this._renderer);
 
-    this.register(toDisposable(() => {
+    this._register(toDisposable(() => {
+      if ((this._terminal as any)._core._store._isDisposed) {
+        return;
+      }
       const renderService: IRenderService = (this._terminal as any)._core._renderService;
       renderService.setRenderer((this._terminal as any)._core._createRenderer());
       renderService.handleResize(terminal.cols, terminal.rows);

package/src/WebglRenderer.ts

@@ -3,7 +3,6 @@
  * @license MIT
  */
 
-import { addDisposableDomListener } from 'browser/Lifecycle';
 import { ITerminal } from 'browser/Types';
 import { CellColorResolver } from 'browser/renderer/shared/CellColorResolver';
 import { acquireTextureAtlas, removeTerminalFromCache } from 'browser/renderer/shared/CharAtlasCache';
@@ -12,8 +11,6 @@ import { observeDevicePixelDimensions } from 'browser/renderer/shared/DevicePixe
 import { createRenderDimensions } from 'browser/renderer/shared/RendererUtils';
 import { IRenderDimensions, IRenderer, IRequestRedrawEvent, ITextureAtlas } from 'browser/renderer/shared/Types';
 import { ICharSizeService, ICharacterJoinerService, ICoreBrowserService, IThemeService } from 'browser/services/Services';
-import { EventEmitter, forwardEvent } from 'common/EventEmitter';
-import { Disposable, MutableDisposable, getDisposeArrayDisposable, toDisposable } from 'common/Lifecycle';
 import { CharData, IBufferLine, ICellData } from 'common/Types';
 import { AttributeData } from 'common/buffer/AttributeData';
 import { CellData } from 'common/buffer/CellData';
@@ -26,14 +23,17 @@ import { COMBINED_CHAR_BIT_MASK, RENDER_MODEL_BG_OFFSET, RENDER_MODEL_EXT_OFFSET
 import { IWebGL2RenderingContext } from './Types';
 import { LinkRenderLayer } from './renderLayer/LinkRenderLayer';
 import { IRenderLayer } from './renderLayer/Types';
+import { Emitter, Event } from 'vs/base/common/event';
+import { addDisposableListener } from 'vs/base/browser/dom';
+import { combinedDisposable, Disposable, MutableDisposable, toDisposable } from 'vs/base/common/lifecycle';
 
 export class WebglRenderer extends Disposable implements IRenderer {
   private _renderLayers: IRenderLayer[];
   private _cursorBlinkStateManager: MutableDisposable<CursorBlinkStateManager> = new MutableDisposable();
-  private _charAtlasDisposable = this.register(new MutableDisposable());
+  private _charAtlasDisposable = this._register(new MutableDisposable());
   private _charAtlas: ITextureAtlas | undefined;
   private _devicePixelRatio: number;
-  private _observerDisposable = this.register(new MutableDisposable());
+  private _observerDisposable = this._register(new MutableDisposable());
 
   private _model: RenderModel = new RenderModel();
   private _workCell: ICellData = new CellData();
@@ -42,8 +42,8 @@ export class WebglRenderer extends Disposable implements IRenderer {
 
   private _canvas: HTMLCanvasElement;
   private _gl: IWebGL2RenderingContext;
-  private _rectangleRenderer: MutableDisposable<RectangleRenderer> = this.register(new MutableDisposable());
-  private _glyphRenderer: MutableDisposable<GlyphRenderer> = this.register(new MutableDisposable());
+  private _rectangleRenderer: MutableDisposable<RectangleRenderer> = this._register(new MutableDisposable());
+  private _glyphRenderer: MutableDisposable<GlyphRenderer> = this._register(new MutableDisposable());
 
   public readonly dimensions: IRenderDimensions;
 
@@ -51,15 +51,15 @@ export class WebglRenderer extends Disposable implements IRenderer {
   private _isAttached: boolean;
   private _contextRestorationTimeout: number | undefined;
 
-  private readonly _onChangeTextureAtlas = this.register(new EventEmitter<HTMLCanvasElement>());
+  private readonly _onChangeTextureAtlas = this._register(new Emitter<HTMLCanvasElement>());
   public readonly onChangeTextureAtlas = this._onChangeTextureAtlas.event;
-  private readonly _onAddTextureAtlasCanvas = this.register(new EventEmitter<HTMLCanvasElement>());
+  private readonly _onAddTextureAtlasCanvas = this._register(new Emitter<HTMLCanvasElement>());
   public readonly onAddTextureAtlasCanvas = this._onAddTextureAtlasCanvas.event;
-  private readonly _onRemoveTextureAtlasCanvas = this.register(new EventEmitter<HTMLCanvasElement>());
+  private readonly _onRemoveTextureAtlasCanvas = this._register(new Emitter<HTMLCanvasElement>());
   public readonly onRemoveTextureAtlasCanvas = this._onRemoveTextureAtlasCanvas.event;
-  private readonly _onRequestRedraw = this.register(new EventEmitter<IRequestRedrawEvent>());
+  private readonly _onRequestRedraw = this._register(new Emitter<IRequestRedrawEvent>());
   public readonly onRequestRedraw = this._onRequestRedraw.event;
-  private readonly _onContextLoss = this.register(new EventEmitter<void>());
+  private readonly _onContextLoss = this._register(new Emitter<void>());
   public readonly onContextLoss = this._onContextLoss.event;
 
   constructor(
@@ -75,7 +75,7 @@ export class WebglRenderer extends Disposable implements IRenderer {
   ) {
     super();
 
-    this.register(this._themeService.onChangeColors(() => this._handleColorChange()));
+    this._register(this._themeService.onChangeColors(() => this._handleColorChange()));
 
     this._cellColorResolver = new CellColorResolver(this._terminal, this._optionsService, this._model.selection, this._decorationService, this._coreBrowserService, this._themeService);
 
@@ -88,7 +88,7 @@ export class WebglRenderer extends Disposable implements IRenderer {
     this._devicePixelRatio = this._coreBrowserService.dpr;
     this._updateDimensions();
     this._updateCursorBlink();
-    this.register(_optionsService.onOptionChange(() => this._handleOptionsChanged()));
+    this._register(_optionsService.onOptionChange(() => this._handleOptionsChanged()));
 
     this._canvas = this._coreBrowserService.mainDocument.createElement('canvas');
 
@@ -102,7 +102,7 @@ export class WebglRenderer extends Disposable implements IRenderer {
       throw new Error('WebGL2 not supported ' + this._gl);
     }
 
-    this.register(addDisposableDomListener(this._canvas, 'webglcontextlost', (e) => {
+    this._register(addDisposableListener(this._canvas, 'webglcontextlost', (e) => {
       console.log('webglcontextlost event received');
       // Prevent the default behavior in order to enable WebGL context restoration.
       e.preventDefault();
@@ -114,7 +114,7 @@ export class WebglRenderer extends Disposable implements IRenderer {
         this._onContextLoss.fire(e);
       }, 3000 /* ms */);
     }));
-    this.register(addDisposableDomListener(this._canvas, 'webglcontextrestored', (e) => {
+    this._register(addDisposableListener(this._canvas, 'webglcontextrestored', (e) => {
       console.warn('webglcontextrestored event received');
       clearTimeout(this._contextRestorationTimeout);
       this._contextRestorationTimeout = undefined;
@@ -126,7 +126,7 @@ export class WebglRenderer extends Disposable implements IRenderer {
     }));
 
     this._observerDisposable.value = observeDevicePixelDimensions(this._canvas, this._coreBrowserService.window, (w, h) => this._setCanvasDevicePixelDimensions(w, h));
-    this.register(this._coreBrowserService.onWindowChange(w => {
+    this._register(this._coreBrowserService.onWindowChange(w => {
       this._observerDisposable.value = observeDevicePixelDimensions(this._canvas, w, (w, h) => this._setCanvasDevicePixelDimensions(w, h));
     }));
 
@@ -136,7 +136,7 @@ export class WebglRenderer extends Disposable implements IRenderer {
 
     this._isAttached = this._coreBrowserService.window.document.body.contains(this._core.screenElement!);
 
-    this.register(toDisposable(() => {
+    this._register(toDisposable(() => {
       for (const l of this._renderLayers) {
         l.dispose();
       }
@@ -276,10 +276,10 @@ export class WebglRenderer extends Disposable implements IRenderer {
     );
     if (this._charAtlas !== atlas) {
       this._onChangeTextureAtlas.fire(atlas.pages[0].canvas);
-      this._charAtlasDisposable.value = getDisposeArrayDisposable([
-        forwardEvent(atlas.onAddTextureAtlasCanvas, this._onAddTextureAtlasCanvas),
-        forwardEvent(atlas.onRemoveTextureAtlasCanvas, this._onRemoveTextureAtlasCanvas)
-      ]);
+      this._charAtlasDisposable.value = combinedDisposable(
+        Event.forward(atlas.onAddTextureAtlasCanvas, this._onAddTextureAtlasCanvas),
+        Event.forward(atlas.onRemoveTextureAtlasCanvas, this._onRemoveTextureAtlasCanvas)
+      );
     }
     this._charAtlas = atlas;
     this._charAtlas.warmUp();
@@ -314,14 +314,6 @@ export class WebglRenderer extends Disposable implements IRenderer {
     this._updateCursorBlink();
   }
 
-  public registerCharacterJoiner(handler: (text: string) => [number, number][]): number {
-    return -1;
-  }
-
-  public deregisterCharacterJoiner(joinerId: number): boolean {
-    return false;
-  }
-
   public renderRows(start: number, end: number): void {
     if (!this._isAttached) {
       if (this._coreBrowserService.window.document.body.contains(this._core.screenElement!) && this._charSizeService.width && this._charSizeService.height) {
@@ -362,7 +354,7 @@ export class WebglRenderer extends Disposable implements IRenderer {
   }
 
   private _updateCursorBlink(): void {
-    if (this._terminal.options.cursorBlink) {
+    if (this._coreService.decPrivateModes.cursorBlink ?? this._terminal.options.cursorBlink) {
       this._cursorBlinkStateManager.value = new CursorBlinkStateManager(() => {
         this._requestRedrawCursor();
       }, this._coreBrowserService);
@@ -385,8 +377,11 @@ export class WebglRenderer extends Disposable implements IRenderer {
     let line: IBufferLine;
     let joinedRanges: [number, number][];
     let isJoined: boolean;
+    let skipJoinedCheckUntilX: number = 0;
+    let isValidJoinRange: boolean = true;
     let lastCharX: number;
     let range: [number, number];
+    let isCursorRow: boolean;
     let chars: string;
     let code: number;
     let width: number;
@@ -395,6 +390,7 @@ export class WebglRenderer extends Disposable implements IRenderer {
     let j: number;
     start = clamp(start, terminal.rows - 1, 0);
     end = clamp(end, terminal.rows - 1, 0);
+    const cursorStyle = this._coreService.decPrivateModes.cursorStyle ?? terminal.options.cursorStyle ?? 'block';
 
     const cursorY = this._terminal.buffer.active.baseY + this._terminal.buffer.active.cursorY;
     const viewportRelativeCursorY = cursorY - terminal.buffer.ydisp;
@@ -412,6 +408,8 @@ export class WebglRenderer extends Disposable implements IRenderer {
       row = y + terminal.buffer.ydisp;
       line = terminal.buffer.lines.get(row)!;
       this._model.lineLengths[y] = 0;
+      isCursorRow = cursorY === row;
+      skipJoinedCheckUntilX = 0;
       joinedRanges = this._characterJoinerService.getJoinedCharacters(row);
       for (x = 0; x < terminal.cols; x++) {
         lastBg = this._cellColorResolver.result.bg;
@@ -423,25 +421,43 @@ export class WebglRenderer extends Disposable implements IRenderer {
 
         // If true, indicates that the current character(s) to draw were joined.
         isJoined = false;
+
+        // Indicates whether this cell is part of a joined range that should be ignored as it cannot
+        // be rendered entirely, like the selection state differs across the range.
+        isValidJoinRange = (x >= skipJoinedCheckUntilX);
+
         lastCharX = x;
 
         // Process any joined character ranges as needed. Because of how the
         // ranges are produced, we know that they are valid for the characters
         // and attributes of our input.
-        if (joinedRanges.length > 0 && x === joinedRanges[0][0]) {
-          isJoined = true;
+        if (joinedRanges.length > 0 && x === joinedRanges[0][0] && isValidJoinRange) {
           range = joinedRanges.shift()!;
 
-          // We already know the exact start and end column of the joined range,
-          // so we get the string and width representing it directly.
-          cell = new JoinedCellData(
-            cell,
-            line!.translateToString(true, range[0], range[1]),
-            range[1] - range[0]
-          );
-
-          // Skip over the cells occupied by this range in the loop
-          lastCharX = range[1] - 1;
+          // If the ligature's selection state is not consistent, don't join it. This helps the
+          // selection render correctly regardless whether they should be joined.
+          const firstSelectionState = this._model.selection.isCellSelected(this._terminal, range[0], row);
+          for (i = range[0] + 1; i < range[1]; i++) {
+            isValidJoinRange &&= (firstSelectionState === this._model.selection.isCellSelected(this._terminal, i, row));
+          }
+          // Similarly, if the cursor is in the ligature, don't join it.
+          isValidJoinRange &&= !isCursorRow || cursorX < range[0] || cursorX >= range[1];
+          if (!isValidJoinRange) {
+            skipJoinedCheckUntilX = range[1];
+          } else {
+            isJoined = true;
+
+            // We already know the exact start and end column of the joined range,
+            // so we get the string and width representing it directly.
+            cell = new JoinedCellData(
+              cell,
+              line!.translateToString(true, range[0], range[1]),
+              range[1] - range[0]
+            );
+
+            // Skip over the cells occupied by this range in the loop
+            lastCharX = range[1] - 1;
+          }
         }
 
         chars = cell.getChars();
@@ -458,8 +474,7 @@ export class WebglRenderer extends Disposable implements IRenderer {
               x: cursorX,
               y: viewportRelativeCursorY,
               width: cell.getWidth(),
-              style: this._coreBrowserService.isFocused ?
-                (terminal.options.cursorStyle || 'block') : terminal.options.cursorInactiveStyle,
+              style: this._coreBrowserService.isFocused ? cursorStyle : terminal.options.cursorInactiveStyle,
               cursorWidth: terminal.options.cursorWidth,
               dpr: this._devicePixelRatio
             };
@@ -467,9 +482,10 @@ export class WebglRenderer extends Disposable implements IRenderer {
           }
           if (x >= cursorX && x <= lastCursorX &&
               ((this._coreBrowserService.isFocused &&
-              (terminal.options.cursorStyle || 'block') === 'block') ||
+              cursorStyle === 'block') ||
               (this._coreBrowserService.isFocused === false &&
-              terminal.options.cursorInactiveStyle === 'block'))) {
+              terminal.options.cursorInactiveStyle === 'block'))
+          ) {
             this._cellColorResolver.result.fg =
               Attributes.CM_RGB | (this._themeService.colors.cursorAccent.rgba >> 8 & Attributes.RGB_MASK);
             this._cellColorResolver.result.bg =
@@ -510,14 +526,17 @@ export class WebglRenderer extends Disposable implements IRenderer {
           cell = this._workCell;
 
           // Null out non-first cells
-          for (x++; x < lastCharX; x++) {
+          for (x++; x <= lastCharX; x++) {
             j = ((y * terminal.cols) + x) * RENDER_MODEL_INDICIES_PER_CELL;
             this._glyphRenderer.value!.updateCell(x, y, NULL_CELL_CODE, 0, 0, 0, NULL_CELL_CHAR, 0, 0);
             this._model.cells[j] = NULL_CELL_CODE;
+            // Don't re-resolve the cell color since multi-colored ligature backgrounds are not
+            // supported
             this._model.cells[j + RENDER_MODEL_BG_OFFSET] = this._cellColorResolver.result.bg;
             this._model.cells[j + RENDER_MODEL_FG_OFFSET] = this._cellColorResolver.result.fg;
             this._model.cells[j + RENDER_MODEL_EXT_OFFSET] = this._cellColorResolver.result.ext;
           }
+          x--; // Go back to the previous update cell for next iteration
         }
       }
     }

package/src/renderLayer/BaseRenderLayer.ts

@@ -9,7 +9,7 @@ import { TEXT_BASELINE } from 'browser/renderer/shared/Constants';
 import { throwIfFalsy } from 'browser/renderer/shared/RendererUtils';
 import { IRenderDimensions, ITextureAtlas } from 'browser/renderer/shared/Types';
 import { ICoreBrowserService, IThemeService } from 'browser/services/Services';
-import { Disposable, toDisposable } from 'common/Lifecycle';
+import { Disposable, toDisposable } from 'vs/base/common/lifecycle';
 import { CellData } from 'common/buffer/CellData';
 import { IOptionsService } from 'common/services/Services';
 import { Terminal } from '@xterm/xterm';
@@ -43,11 +43,11 @@ export abstract class BaseRenderLayer extends Disposable implements IRenderLayer
     this._canvas.style.zIndex = zIndex.toString();
     this._initCanvas();
     this._container.appendChild(this._canvas);
-    this.register(this._themeService.onChangeColors(e => {
+    this._register(this._themeService.onChangeColors(e => {
       this._refreshCharAtlas(terminal, e);
       this.reset(terminal);
     }));
-    this.register(toDisposable(() => {
+    this._register(toDisposable(() => {
       this._canvas.remove();
     }));
   }

package/src/renderLayer/LinkRenderLayer.ts

@@ -26,8 +26,8 @@ export class LinkRenderLayer extends BaseRenderLayer {
   ) {
     super(terminal, container, 'link', zIndex, true, coreBrowserService, optionsService, themeService);
 
-    this.register(linkifier2.onShowLinkUnderline(e => this._handleShowLinkUnderline(e)));
-    this.register(linkifier2.onHideLinkUnderline(e => this._handleHideLinkUnderline(e)));
+    this._register(linkifier2.onShowLinkUnderline(e => this._handleShowLinkUnderline(e)));
+    this._register(linkifier2.onHideLinkUnderline(e => this._handleHideLinkUnderline(e)));
   }
 
   public resize(terminal: Terminal, dim: IRenderDimensions): void {

package/typings/addon-webgl.d.ts

@@ -7,7 +7,7 @@ import { Terminal, ITerminalAddon, IEvent } from '@xterm/xterm';
 
 declare module '@xterm/addon-webgl' {
   /**
-   * An xterm.js addon that provides search functionality.
+   * An xterm.js addon that provides hardware-accelerated rendering functionality via WebGL.
    */
   export class WebglAddon implements ITerminalAddon {
     public textureAtlas?: HTMLCanvasElement;
@@ -27,6 +27,11 @@ declare module '@xterm/addon-webgl' {
      */
     public readonly onAddTextureAtlasCanvas: IEvent<HTMLCanvasElement>;
 
+    /**
+     * An event that is fired when the a page is removed from the texture atlas.
+     */
+    public readonly onRemoveTextureAtlasCanvas: IEvent<HTMLCanvasElement>;
+
     constructor(preserveDrawingBuffer?: boolean);
 
     /**