Merge branch 'master' into tyriar/dim_bg

addons/xterm-addon-canvas/package.json

@@ -1,6 +1,6 @@
 {
   "name": "xterm-addon-canvas",
-  "version": "0.12.0",
+  "version": "0.1.0",
   "author": {
     "name": "The xterm.js authors",
     "url": "https://xtermjs.org/"

addons/xterm-addon-canvas/src/BaseRenderLayer.ts

@@ -30,9 +30,9 @@ export abstract class BaseRenderLayer implements IRenderLayer {
   private _scaledCharLeft: number = 0;
   private _scaledCharTop: number = 0;
 
-  private _selectionStart: [number, number] | undefined;
-  private _selectionEnd: [number, number] | undefined;
-  private _columnSelectMode: boolean = false;
+  protected _selectionStart: [number, number] | undefined;
+  protected _selectionEnd: [number, number] | undefined;
+  protected _columnSelectMode: boolean = false;
 
   protected _charAtlas: BaseCharAtlas | undefined;
 
@@ -49,6 +49,8 @@ export abstract class BaseRenderLayer implements IRenderLayer {
     italic: false
   };
 
+  public get canvas(): HTMLCanvasElement { return this._canvas; }
+
   constructor(
     private _container: HTMLElement,
     id: string,

addons/xterm-addon-canvas/src/CanvasAddon.ts

@@ -3,10 +3,10 @@
  * @license MIT
  */
 
-import { IRenderService } from 'browser/services/Services';
+import { ICharacterJoinerService, ICharSizeService, ICoreBrowserService, IRenderService } from 'browser/services/Services';
 import { IColorSet } from 'browser/Types';
 import { CanvasRenderer } from './CanvasRenderer';
-import { IBufferService, IInstantiationService } from 'common/services/Services';
+import { IBufferService, ICoreService, IDecorationService, IOptionsService } from 'common/services/Services';
 import { ITerminalAddon, Terminal } from 'xterm';
 
 export class CanvasAddon implements ITerminalAddon {
@@ -18,13 +18,18 @@ export class CanvasAddon implements ITerminalAddon {
       throw new Error('Cannot activate CanvasAddon before Terminal.open');
     }
     this._terminal = terminal;
-    const instantiationService: IInstantiationService = (terminal as any)._core._instantiationService;
-    const bufferService: IBufferService = (terminal as any)._core._renderService;
+    const bufferService: IBufferService = (terminal as any)._core._bufferService;
     const renderService: IRenderService = (terminal as any)._core._renderService;
+    const characterJoinerService: ICharacterJoinerService = (terminal as any)._core._characterJoinerService;
+    const charSizeService: ICharSizeService = (terminal as any)._core._charSizeService;
+    const coreService: ICoreService = (terminal as any)._core.coreService;
+    const coreBrowserService: ICoreBrowserService = (terminal as any)._core._coreBrowserService;
+    const decorationService: IDecorationService = (terminal as any)._core._decorationService;
+    const optionsService: IOptionsService = (terminal as any)._core.optionsService;
     const colors: IColorSet = (terminal as any)._core._colorManager.colors;
     const screenElement: HTMLElement = (terminal as any)._core.screenElement;
     const linkifier = (terminal as any)._core.linkifier2;
-    this._renderer = instantiationService.createInstance(CanvasRenderer, colors, screenElement, linkifier);
+    this._renderer = new CanvasRenderer(colors, screenElement, linkifier, bufferService, charSizeService, optionsService, characterJoinerService, coreService, coreBrowserService, decorationService);
     renderService.setRenderer(this._renderer);
     renderService.onResize(bufferService.cols, bufferService.rows);
   }

addons/xterm-addon-canvas/src/CanvasRenderer.ts

@@ -11,10 +11,11 @@ import { IRenderLayer } from './Types';
 import { LinkRenderLayer } from './LinkRenderLayer';
 import { Disposable } from 'common/Lifecycle';
 import { IColorSet, ILinkifier2 } from 'browser/Types';
-import { ICharSizeService } from 'browser/services/Services';
-import { IBufferService, IOptionsService, IInstantiationService } from 'common/services/Services';
+import { ICharacterJoinerService, ICharSizeService, ICoreBrowserService } from 'browser/services/Services';
+import { IBufferService, IOptionsService, IInstantiationService, IDecorationService, ICoreService } from 'common/services/Services';
 import { removeTerminalFromCache } from './atlas/CharAtlasCache';
 import { EventEmitter, IEvent } from 'common/EventEmitter';
+import { observeDevicePixelDimensions } from 'browser/renderer/DevicePixelObserver';
 
 let nextRendererId = 1;
 
@@ -33,18 +34,21 @@ export class CanvasRenderer extends Disposable implements IRenderer {
     private _colors: IColorSet,
     private readonly _screenElement: HTMLElement,
     linkifier2: ILinkifier2,
-    @IInstantiationService instantiationService: IInstantiationService,
-    @IBufferService private readonly _bufferService: IBufferService,
-    @ICharSizeService private readonly _charSizeService: ICharSizeService,
-    @IOptionsService private readonly _optionsService: IOptionsService
+    private readonly _bufferService: IBufferService,
+    private readonly _charSizeService: ICharSizeService,
+    private readonly _optionsService: IOptionsService,
+    characterJoinerService: ICharacterJoinerService,
+    coreService: ICoreService,
+    coreBrowserService: ICoreBrowserService,
+    decorationService: IDecorationService
   ) {
     super();
     const allowTransparency = this._optionsService.rawOptions.allowTransparency;
     this._renderLayers = [
-      instantiationService.createInstance(TextRenderLayer, this._screenElement, 0, this._colors, allowTransparency, this._id),
-      instantiationService.createInstance(SelectionRenderLayer, this._screenElement, 1, this._colors, this._id),
-      instantiationService.createInstance(LinkRenderLayer, this._screenElement, 2, this._colors, this._id, linkifier2),
-      instantiationService.createInstance(CursorRenderLayer, this._screenElement, 3, this._colors, this._id, this._onRequestRedraw)
+      new TextRenderLayer(this._screenElement, 0, this._colors, allowTransparency, this._id, this._bufferService, this._optionsService, characterJoinerService, decorationService),
+      new SelectionRenderLayer(this._screenElement, 1, this._colors, this._id, this._bufferService, this._optionsService, decorationService),
+      new LinkRenderLayer(this._screenElement, 2, this._colors, this._id, linkifier2, this._bufferService, this._optionsService, decorationService),
+      new CursorRenderLayer(this._screenElement, 3, this._colors, this._id, this._onRequestRedraw, this._bufferService, this._optionsService, coreService, coreBrowserService, decorationService)
     ];
     this.dimensions = {
       scaledCharWidth: 0,
@@ -62,6 +66,9 @@ export class CanvasRenderer extends Disposable implements IRenderer {
     };
     this._devicePixelRatio = window.devicePixelRatio;
     this._updateDimensions();
+
+    this.register(observeDevicePixelDimensions(this._renderLayers[0].canvas, (w, h) => this._setCanvasDevicePixelDimensions(w, h)));
+
     this.onOptionsChanged();
   }
 
@@ -167,53 +174,32 @@ export class CanvasRenderer extends Disposable implements IRenderer {
       return;
     }
 
-    // Calculate the scaled character width. Width is floored as it must be
-    // drawn to an integer grid in order for the CharAtlas "stamps" to not be
-    // blurry. When text is drawn to the grid not using the CharAtlas, it is
-    // clipped to ensure there is no overlap with the next cell.
+    // See the WebGL renderer for an explanation of this section.
     this.dimensions.scaledCharWidth = Math.floor(this._charSizeService.width * window.devicePixelRatio);
-
-    // Calculate the scaled character height. Height is ceiled in case
-    // devicePixelRatio is a floating point number in order to ensure there is
-    // enough space to draw the character to the cell.
     this.dimensions.scaledCharHeight = Math.ceil(this._charSizeService.height * window.devicePixelRatio);
-
-    // Calculate the scaled cell height, if lineHeight is not 1 then the value
-    // will be floored because since lineHeight can never be lower then 1, there
-    // is a guarentee that the scaled line height will always be larger than
-    // scaled char height.
     this.dimensions.scaledCellHeight = Math.floor(this.dimensions.scaledCharHeight * this._optionsService.rawOptions.lineHeight);
-
-    // Calculate the y coordinate within a cell that text should draw from in
-    // order to draw in the center of a cell.
     this.dimensions.scaledCharTop = this._optionsService.rawOptions.lineHeight === 1 ? 0 : Math.round((this.dimensions.scaledCellHeight - this.dimensions.scaledCharHeight) / 2);
-
-    // Calculate the scaled cell width, taking the letterSpacing into account.
     this.dimensions.scaledCellWidth = this.dimensions.scaledCharWidth + Math.round(this._optionsService.rawOptions.letterSpacing);
-
-    // Calculate the x coordinate with a cell that text should draw from in
-    // order to draw in the center of a cell.
     this.dimensions.scaledCharLeft = Math.floor(this._optionsService.rawOptions.letterSpacing / 2);
-
-    // Recalculate the canvas dimensions; scaled* define the actual number of
-    // pixel in the canvas
     this.dimensions.scaledCanvasHeight = this._bufferService.rows * this.dimensions.scaledCellHeight;
     this.dimensions.scaledCanvasWidth = this._bufferService.cols * this.dimensions.scaledCellWidth;
-
-    // The the size of the canvas on the page. It's very important that this
-    // rounds to nearest integer and not ceils as browsers often set
-    // window.devicePixelRatio as something like 1.100000023841858, when it's
-    // actually 1.1. Ceiling causes blurriness as the backing canvas image is 1
-    // pixel too large for the canvas element size.
     this.dimensions.canvasHeight = Math.round(this.dimensions.scaledCanvasHeight / window.devicePixelRatio);
     this.dimensions.canvasWidth = Math.round(this.dimensions.scaledCanvasWidth / window.devicePixelRatio);
-
-    // Get the _actual_ dimensions of an individual cell. This needs to be
-    // derived from the canvasWidth/Height calculated above which takes into
-    // account window.devicePixelRatio. ICharSizeService.width/height by itself
-    // is insufficient when the page is not at 100% zoom level as it's measured
-    // in CSS pixels, but the actual char size on the canvas can differ.
     this.dimensions.actualCellHeight = this.dimensions.canvasHeight / this._bufferService.rows;
     this.dimensions.actualCellWidth = this.dimensions.canvasWidth / this._bufferService.cols;
   }
+
+  private _setCanvasDevicePixelDimensions(width: number, height: number): void {
+    this.dimensions.scaledCanvasHeight = height;
+    this.dimensions.scaledCanvasWidth = width;
+    // Resize all render layers
+    for (const l of this._renderLayers) {
+      l.resize(this.dimensions);
+    }
+    this._requestRedrawViewport();
+  }
+
+  private _requestRedrawViewport(): void {
+    this._onRequestRedraw.fire({ start: 0, end: this._bufferService.rows - 1 });
+  }
 }

addons/xterm-addon-canvas/src/CursorRenderLayer.ts

@@ -37,11 +37,11 @@ export class CursorRenderLayer extends BaseRenderLayer {
     colors: IColorSet,
     rendererId: number,
     private _onRequestRedraw: IEventEmitter<IRequestRedrawEvent>,
-    @IBufferService bufferService: IBufferService,
-    @IOptionsService optionsService: IOptionsService,
-    @ICoreService private readonly _coreService: ICoreService,
-    @ICoreBrowserService private readonly _coreBrowserService: ICoreBrowserService,
-    @IDecorationService decorationService: IDecorationService
+    bufferService: IBufferService,
+    optionsService: IOptionsService,
+    private readonly _coreService: ICoreService,
+    private readonly _coreBrowserService: ICoreBrowserService,
+    decorationService: IDecorationService
   ) {
     super(container, 'cursor', zIndex, true, colors, rendererId, bufferService, optionsService, decorationService);
     this._state = {

addons/xterm-addon-canvas/src/LinkRenderLayer.ts

@@ -19,9 +19,9 @@ export class LinkRenderLayer extends BaseRenderLayer {
     colors: IColorSet,
     rendererId: number,
     linkifier2: ILinkifier2,
-    @IBufferService bufferService: IBufferService,
-    @IOptionsService optionsService: IOptionsService,
-    @IDecorationService decorationService: IDecorationService
+    bufferService: IBufferService,
+    optionsService: IOptionsService,
+    decorationService: IDecorationService
   ) {
     super(container, 'link', zIndex, true, colors, rendererId, bufferService, optionsService, decorationService);
 

addons/xterm-addon-canvas/src/SelectionRenderLayer.ts

@@ -23,9 +23,9 @@ export class SelectionRenderLayer extends BaseRenderLayer {
     zIndex: number,
     colors: IColorSet,
     rendererId: number,
-    @IBufferService bufferService: IBufferService,
-    @IOptionsService optionsService: IOptionsService,
-    @IDecorationService decorationService: IDecorationService
+    bufferService: IBufferService,
+    optionsService: IOptionsService,
+    decorationService: IDecorationService
   ) {
     super(container, 'selection', zIndex, true, colors, rendererId, bufferService, optionsService, decorationService);
     this._clearState();
@@ -42,8 +42,11 @@ export class SelectionRenderLayer extends BaseRenderLayer {
 
   public resize(dim: IRenderDimensions): void {
     super.resize(dim);
-    // Resizing the canvas discards the contents of the canvas so clear state
-    this._clearState();
+    // On resize use the base render layer's cached selection values since resize clears _state
+    // inside reset.
+    if (this._selectionStart && this._selectionEnd) {
+      this.onSelectionChanged(this._selectionStart, this._selectionEnd, this._columnSelectMode);
+    }
   }
 
   public reset(): void {

addons/xterm-addon-canvas/src/TextRenderLayer.ts

@@ -36,10 +36,10 @@ export class TextRenderLayer extends BaseRenderLayer {
     colors: IColorSet,
     alpha: boolean,
     rendererId: number,
-    @IBufferService bufferService: IBufferService,
-    @IOptionsService optionsService: IOptionsService,
-    @ICharacterJoinerService private readonly _characterJoinerService: ICharacterJoinerService,
-    @IDecorationService decorationService: IDecorationService
+    bufferService: IBufferService,
+    optionsService: IOptionsService,
+    private readonly _characterJoinerService: ICharacterJoinerService,
+    decorationService: IDecorationService
   ) {
     super(container, 'text', zIndex, alpha, colors, rendererId, bufferService, optionsService, decorationService);
     this._state = new GridCache<CharData>();

addons/xterm-addon-canvas/src/Types.d.ts

@@ -57,6 +57,8 @@ export interface IRenderer extends IDisposable {
 }
 
 export interface IRenderLayer extends IDisposable {
+  readonly canvas: HTMLCanvasElement;
+
   /**
    * Called when the terminal loses focus.
    */

addons/xterm-addon-canvas/src/tsconfig.json

@@ -21,7 +21,6 @@
     },
     "strict": true,
     "downlevelIteration": true,
-    "experimentalDecorators": true,
     "types": [
       "../../../node_modules/@types/mocha"
     ]

addons/xterm-addon-ligatures/bin/download-fonts.js

@@ -22,10 +22,13 @@ const fontsFolder = path.join(__dirname, '../fonts');
 async function download() {
   await mkdirp(fontsFolder);
 
-  await downloadFiraCode();
-  await downloadIosevka();
-
-  console.log('Loaded all fonts for testing')
+  try {
+    await downloadFiraCode();
+    await downloadIosevka();
+    console.log('Loaded all fonts for testing')
+  } catch (e) {
+    console.warn('Fonts failed to download, ligature tests will not work', e);
+  }
 }
 
 async function downloadFiraCode() {

addons/xterm-addon-ligatures/src/font.ts

@@ -65,6 +65,22 @@ export default async function load(fontFamily: string, cacheSize: number): Promi
         console.error(err.name, err.message);
       }
     }
+    // Latest proposal https://bugs.chromium.org/p/chromium/issues/detail?id=1312603
+    else if (typeof process !== 'object' && 'queryLocalFonts' in window) {
+      const fonts: Record<string, IFontMetadata[]> = {};
+      try {
+        const fontsIterator = await (window as any).queryLocalFonts();
+        for (const metadata of fontsIterator) {
+          if (!fonts.hasOwnProperty(metadata.family)) {
+            fonts[metadata.family] = [];
+          }
+          fonts[metadata.family].push(metadata);
+        }
+        fontsPromise = Promise.resolve(fonts);
+      } catch (err: any) {
+        console.error(err.name, err.message);
+      }
+    }
     // Node environment or no font access API
     else {
       try {
@@ -90,7 +106,9 @@ export default async function load(fontFamily: string, cacheSize: number): Promi
     if (fonts.hasOwnProperty(family) && fonts[family].length > 0) {
       const font = fonts[family][0];
       if ('blob' in font) {
-        return loadBuffer(await (await font.blob()).arrayBuffer(), { cacheSize });
+        const bytes = await font.blob();
+        const buffer = await bytes.arrayBuffer();
+        return loadBuffer(buffer, { cacheSize });
       }
       return await loadFile(font.path, { cacheSize });
     }

addons/xterm-addon-ligatures/src/index.ts

@@ -54,7 +54,7 @@ export function enableLigatures(term: Terminal): void {
 
             // Only refresh things if we actually found a font
             if (f) {
-              term.refresh(0, term.options.rows! - 1);
+              term.refresh(0, term.rows - 1);
             }
           }
         })

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

@@ -11,11 +11,12 @@ import { WebglCharAtlas } from './atlas/WebglCharAtlas';
 import { RectangleRenderer } from './RectangleRenderer';
 import { IWebGL2RenderingContext } from './Types';
 import { RenderModel, COMBINED_CHAR_BIT_MASK, RENDER_MODEL_BG_OFFSET, RENDER_MODEL_FG_OFFSET, RENDER_MODEL_INDICIES_PER_CELL } from './RenderModel';
-import { Disposable } from 'common/Lifecycle';
+import { Disposable, toDisposable } from 'common/Lifecycle';
 import { Attributes, BgFlags, Content, FgFlags, NULL_CELL_CHAR, NULL_CELL_CODE } from 'common/buffer/Constants';
 import { Terminal, IEvent } from 'xterm';
 import { IRenderLayer } from './renderLayer/Types';
 import { IRenderDimensions, IRenderer, IRequestRedrawEvent } from 'browser/renderer/Types';
+import { observeDevicePixelDimensions } from 'browser/renderer/DevicePixelObserver';
 import { ITerminal, IColorSet } from 'browser/Types';
 import { EventEmitter } from 'common/EventEmitter';
 import { CellData } from 'common/buffer/CellData';
@@ -96,6 +97,7 @@ export class WebglRenderer extends Disposable implements IRenderer {
     }
 
     this.register(addDisposableDomListener(this._canvas, 'webglcontextlost', (e) => { this._onContextLoss.fire(e); }));
+    this.register(observeDevicePixelDimensions(this._canvas, (w, h) => this._setCanvasDevicePixelDimensions(w, h)));
 
     this._core.screenElement!.appendChild(this._canvas);
 
@@ -518,67 +520,63 @@ export class WebglRenderer extends Disposable implements IRenderer {
       return;
     }
 
-    // Calculate the scaled character width. Width is floored as it must be
-    // drawn to an integer grid in order for the CharAtlas "stamps" to not be
-    // blurry. When text is drawn to the grid not using the CharAtlas, it is
-    // clipped to ensure there is no overlap with the next cell.
-
-    // NOTE: ceil fixes sometime, floor does others :s
-
+    // Calculate the scaled character width. Width is floored as it must be drawn to an integer grid
+    // in order for the char atlas glyphs to not be blurry.
     this.dimensions.scaledCharWidth = Math.floor((this._core as any)._charSizeService.width * this._devicePixelRatio);
 
-    // Calculate the scaled character height. Height is ceiled in case
-    // devicePixelRatio is a floating point number in order to ensure there is
-    // enough space to draw the character to the cell.
+    // Calculate the scaled character height. Height is ceiled in case devicePixelRatio is a
+    // floating point number in order to ensure there is enough space to draw the character to the
+    // cell.
     this.dimensions.scaledCharHeight = Math.ceil((this._core as any)._charSizeService.height * this._devicePixelRatio);
 
-    // Calculate the scaled cell height, if lineHeight is not 1 then the value
-    // will be floored because since lineHeight can never be lower then 1, there
-    // is a guarentee that the scaled line height will always be larger than
-    // scaled char height.
+    // Calculate the scaled cell height, if lineHeight is _not_ 1, the resulting value will be
+    // floored since lineHeight can never be lower then 1, this guarentees the scaled cell height
+    // will always be larger than scaled char height.
     this.dimensions.scaledCellHeight = Math.floor(this.dimensions.scaledCharHeight * this._terminal.options.lineHeight!);
 
-    // Calculate the y coordinate within a cell that text should draw from in
-    // order to draw in the center of a cell.
+    // Calculate the y offset within a cell that glyph should draw at in order for it to be centered
+    // correctly within the cell.
     this.dimensions.scaledCharTop = this._terminal.options.lineHeight === 1 ? 0 : Math.round((this.dimensions.scaledCellHeight - this.dimensions.scaledCharHeight) / 2);
 
     // Calculate the scaled cell width, taking the letterSpacing into account.
     this.dimensions.scaledCellWidth = this.dimensions.scaledCharWidth + Math.round(this._terminal.options.letterSpacing!);
 
-    // Calculate the x coordinate with a cell that text should draw from in
-    // order to draw in the center of a cell.
+    // Calculate the x offset with a cell that text should draw from in order for it to be centered
+    // correctly within the cell.
     this.dimensions.scaledCharLeft = Math.floor(this._terminal.options.letterSpacing! / 2);
 
-    // Recalculate the canvas dimensions; scaled* define the actual number of
-    // pixel in the canvas
+    // Recalculate the canvas dimensions, the scaled dimensions define the actual number of pixel in
+    // the canvas
     this.dimensions.scaledCanvasHeight = this._terminal.rows * this.dimensions.scaledCellHeight;
     this.dimensions.scaledCanvasWidth = this._terminal.cols * this.dimensions.scaledCellWidth;
 
-    // The the size of the canvas on the page. It's very important that this
-    // rounds to nearest integer and not ceils as browsers often set
-    // window.devicePixelRatio as something like 1.100000023841858, when it's
-    // actually 1.1. Ceiling causes blurriness as the backing canvas image is 1
-    // pixel too large for the canvas element size.
+    // The the size of the canvas on the page. It's important that this rounds to nearest integer
+    // and not ceils as browsers often have floating point precision issues where
+    // `window.devicePixelRatio` ends up being something like `1.100000023841858` for example, when
+    // it's actually 1.1. Ceiling may causes blurriness as the backing canvas image is 1 pixel too
+    // large for the canvas element size.
     this.dimensions.canvasHeight = Math.round(this.dimensions.scaledCanvasHeight / this._devicePixelRatio);
     this.dimensions.canvasWidth = Math.round(this.dimensions.scaledCanvasWidth / this._devicePixelRatio);
 
-    // this.dimensions.scaledCanvasHeight = this.dimensions.canvasHeight * devicePixelRatio;
-    // this.dimensions.scaledCanvasWidth = this.dimensions.canvasWidth * devicePixelRatio;
-
-    // Get the _actual_ dimensions of an individual cell. This needs to be
-    // derived from the canvasWidth/Height calculated above which takes into
-    // account window.devicePixelRatio. CharMeasure.width/height by itself is
-    // insufficient when the page is not at 100% zoom level as CharMeasure is
-    // measured in CSS pixels, but the actual char size on the canvas can
-    // differ.
-    // this.dimensions.actualCellHeight = this.dimensions.canvasHeight / this._terminal.rows;
-    // this.dimensions.actualCellWidth = this.dimensions.canvasWidth / this._terminal.cols;
-
-    // This fixes 110% and 125%, not 150% or 175% though
+    // Get the CSS dimensions of an individual cell. This needs to be derived from the calculated
+    // device pixel canvas value above. CharMeasure.width/height by itself is insufficient when the
+    // page is not at 100% zoom level as CharMeasure is measured in CSS pixels, but the actual char
+    // size on the canvas can differ.
     this.dimensions.actualCellHeight = this.dimensions.scaledCellHeight / this._devicePixelRatio;
     this.dimensions.actualCellWidth = this.dimensions.scaledCellWidth / this._devicePixelRatio;
   }
 
+  private _setCanvasDevicePixelDimensions(width: number, height: number): void {
+    if (this.dimensions.scaledCanvasWidth === width && this.dimensions.scaledCanvasHeight === height) {
+      return;
+    }
+    this.dimensions.scaledCanvasWidth = width;
+    this.dimensions.scaledCanvasHeight = height;
+    this._canvas.width = width;
+    this._canvas.height = height;
+    this._requestRedrawViewport();
+  }
+
   private _requestRedrawViewport(): void {
     this._onRequestRedraw.fire({ start: 0, end: this._terminal.rows - 1 });
   }

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

@@ -416,15 +416,15 @@ export class WebglCharAtlas implements IDisposable {
       this._tmpCtx.fillText(chars, padding, padding + this._config.scaledCharHeight);
     }
 
-    // If this charcater is underscore and beyond the cell bounds, shift it up until it is visible,
-    // try for a maximum of 5 pixels.
+    // If this charcater is underscore and beyond the cell bounds, shift it up until it is visible
+    // even on the bottom row, try for a maximum of 5 pixels.
     if (chars === '_' && !this._config.allowTransparency) {
-      let isBeyondCellBounds = clearColor(this._tmpCtx.getImageData(padding, padding, this._config.scaledCellWidth, this._config.scaledCellHeight), backgroundColor, foregroundColor, this._config.allowTransparency);
+      let isBeyondCellBounds = clearColor(this._tmpCtx.getImageData(padding, padding, this._config.scaledCellWidth, this._config.scaledCellHeight), backgroundColor, foregroundColor);
       if (isBeyondCellBounds) {
         for (let offset = 1; offset <= 5; offset++) {
           this._tmpCtx.clearRect(0, 0, this._tmpCanvas.width, this._tmpCanvas.height);
           this._tmpCtx.fillText(chars, padding, padding + this._config.scaledCharHeight - offset);
-          isBeyondCellBounds = clearColor(this._tmpCtx.getImageData(padding, padding, this._config.scaledCellWidth, this._config.scaledCellHeight), backgroundColor, foregroundColor, this._config.allowTransparency);
+          isBeyondCellBounds = clearColor(this._tmpCtx.getImageData(padding, padding, this._config.scaledCellWidth, this._config.scaledCellHeight), backgroundColor, foregroundColor);
           if (!isBeyondCellBounds) {
             break;
           }
@@ -460,7 +460,12 @@ export class WebglCharAtlas implements IDisposable {
     );
 
     // Clear out the background color and determine if the glyph is empty.
-    const isEmpty = clearColor(imageData, backgroundColor, foregroundColor, this._config.allowTransparency);
+    let isEmpty: boolean;
+    if (!this._config.allowTransparency) {
+      isEmpty = clearColor(imageData, backgroundColor, foregroundColor);
+    } else {
+      isEmpty = checkCompletelyTransparent(imageData);
+    }
 
     // Handle empty glyphs
     if (isEmpty) {
@@ -604,7 +609,7 @@ export class WebglCharAtlas implements IDisposable {
  * transparent.
  * @returns True if the result is "empty", meaning all pixels are fully transparent.
  */
-function clearColor(imageData: ImageData, bg: IColor, fg: IColor, allowTransparency: boolean): boolean {
+function clearColor(imageData: ImageData, bg: IColor, fg: IColor): boolean {
   // Get color channels
   const r = bg.rgba >>> 24;
   const g = bg.rgba >>> 16 & 0xFF;
@@ -624,15 +629,14 @@ function clearColor(imageData: ImageData, bg: IColor, fg: IColor, allowTranspare
   // Set alpha channel of relevent pixels to 0
   let isEmpty = true;
   for (let offset = 0; offset < imageData.data.length; offset += 4) {
+    // Check exact match
     if (imageData.data[offset] === r &&
         imageData.data[offset + 1] === g &&
         imageData.data[offset + 2] === b) {
       imageData.data[offset + 3] = 0;
     } else {
-      // Check the threshold only when transparency is not allowed only as overlapping isn't an
-      // issue for transparency glyphs.
-      if (!allowTransparency &&
-          (Math.abs(imageData.data[offset] - r) +
+      // Check the threshold based difference
+      if ((Math.abs(imageData.data[offset] - r) +
           Math.abs(imageData.data[offset + 1] - g) +
           Math.abs(imageData.data[offset + 2] - b)) < threshold) {
         imageData.data[offset + 3] = 0;
@@ -645,6 +649,15 @@ function clearColor(imageData: ImageData, bg: IColor, fg: IColor, allowTranspare
   return isEmpty;
 }
 
+function checkCompletelyTransparent(imageData: ImageData): boolean {
+  for (let offset = 0; offset < imageData.data.length; offset += 4) {
+    if (imageData.data[offset + 3] > 0) {
+      return false;
+    }
+  }
+  return true;
+}
+
 function toPaddedHex(c: number): string {
   const s = c.toString(16);
   return s.length < 2 ? '0' + s : s;

addons/xterm-addon-webgl/src/renderLayer/CursorRenderLayer.ts

@@ -54,6 +54,12 @@ export class CursorRenderLayer extends BaseRenderLayer {
     this.onOptionsChanged(terminal);
   }
 
+  public override dispose(): void {
+    this._cursorBlinkStateManager?.dispose();
+    this._cursorBlinkStateManager = undefined;
+    super.dispose();
+  }
+
   public resize(terminal: Terminal, dim: IRenderDimensions): void {
     super.resize(terminal, dim);
     // Resizing the canvas discards the contents of the canvas so clear state

bin/publish.js

@@ -98,9 +98,13 @@ function getNextBetaVersion(packageJson) {
     process.exit(1);
   }
   const tag = 'beta';
-  // const stableVersion = packageJson.version.split('.');
-  // const nextStableVersion = `${stableVersion[0]}.${parseInt(stableVersion[1]) + 1}.0`;
-  const nextStableVersion = `5.0.0`;
+  let nextStableVersion;
+  if (packageJson.name === 'xterm') {
+    nextStableVersion = `5.0.0`;
+  } else {
+    const stableVersion = packageJson.version.split('.');
+    nextStableVersion = `${stableVersion[0]}.${parseInt(stableVersion[1]) + 1}.0`;
+  }
   const publishedVersions = getPublishedVersions(packageJson, nextStableVersion, tag);
   if (publishedVersions.length === 0) {
     return `${nextStableVersion}-${tag}.1`;

package.json

@@ -79,8 +79,8 @@
     "playwright": "^1.22.1",
     "source-map-loader": "^3.0.0",
     "source-map-support": "^0.5.20",
-    "ts-loader": "^9.1.2",
-    "typescript": "^4.4.4",
+    "ts-loader": "^9.3.1",
+    "typescript": "4.7",
     "utf8": "^3.0.0",
     "webpack": "^5.61.0",
     "webpack-cli": "^4.9.1",

src/browser/Linkifier2.ts

@@ -38,6 +38,11 @@ export class Linkifier2 extends Disposable implements ILinkifier2 {
     this.register(getDisposeArrayDisposable(this._linkCacheDisposables));
   }
 
+  public dispose(): void {
+    super.dispose();
+    this._lastMouseEvent = undefined;
+  }
+
   public registerLinkProvider(linkProvider: ILinkProvider): IDisposable {
     this._linkProviders.push(linkProvider);
     return {

src/browser/Terminal.ts

@@ -81,6 +81,7 @@ export class Terminal extends CoreTerminal implements ITerminal {
   // browser services
   private _decorationService: DecorationService;
   private _charSizeService: ICharSizeService | undefined;
+  private _coreBrowserService: ICoreBrowserService | undefined;
   private _mouseService: IMouseService | undefined;
   private _renderService: IRenderService | undefined;
   private _characterJoinerService: ICharacterJoinerService | undefined;
@@ -494,8 +495,8 @@ export class Terminal extends CoreTerminal implements ITerminal {
     this.register(addDisposableDomListener(this.textarea, 'blur', () => this._onTextAreaBlur()));
     this._helperContainer.appendChild(this.textarea);
 
-    const coreBrowserService = this._instantiationService.createInstance(CoreBrowserService, this.textarea);
-    this._instantiationService.setService(ICoreBrowserService, coreBrowserService);
+    this._coreBrowserService = this._instantiationService.createInstance(CoreBrowserService, this.textarea);
+    this._instantiationService.setService(ICoreBrowserService, this._coreBrowserService);
 
     this._charSizeService = this._instantiationService.createInstance(CharSizeService, this._document, this._helperContainer);
     this._instantiationService.setService(ICharSizeService, this._charSizeService);
@@ -586,11 +587,11 @@ export class Terminal extends CoreTerminal implements ITerminal {
     }
 
     if (this.options.overviewRulerWidth) {
-      this._overviewRulerRenderer = this._instantiationService.createInstance(OverviewRulerRenderer, this._viewportElement, this.screenElement);
+      this._overviewRulerRenderer = this.register(this._instantiationService.createInstance(OverviewRulerRenderer, this._viewportElement, this.screenElement));
     }
     this.optionsService.onOptionChange(() => {
       if (!this._overviewRulerRenderer && this.options.overviewRulerWidth && this._viewportElement && this.screenElement) {
-        this._overviewRulerRenderer = this._instantiationService.createInstance(OverviewRulerRenderer, this._viewportElement, this.screenElement);
+        this._overviewRulerRenderer = this.register(this._instantiationService.createInstance(OverviewRulerRenderer, this._viewportElement, this.screenElement));
       }
     });
     // Measure the character size