Move the canvas renderer into an addon

.eslintrc.json

@@ -14,6 +14,7 @@
       "test/benchmark/tsconfig.json",
       "addons/xterm-addon-attach/src/tsconfig.json",
       "addons/xterm-addon-attach/test/tsconfig.json",
+      "addons/xterm-addon-canvas/src/tsconfig.json",
       "addons/xterm-addon-fit/src/tsconfig.json",
       "addons/xterm-addon-fit/test/tsconfig.json",
       "addons/xterm-addon-ligatures/src/tsconfig.json",

addons/xterm-addon-attach/test/AttachAddon.api.ts

@@ -28,7 +28,7 @@ describe('AttachAddon', () => {
   beforeEach(async () => await page.goto(APP));
 
   it('string', async function(): Promise<any> {
-    await openTerminal(page, { rendererType: 'dom' });
+    await openTerminal(page);
     const port = 8080;
     const server = new WebSocket.Server({ port });
     server.on('connection', socket => socket.send('foo'));
@@ -38,7 +38,7 @@ describe('AttachAddon', () => {
   });
 
   it('utf8', async function(): Promise<any> {
-    await openTerminal(page, { rendererType: 'dom' });
+    await openTerminal(page);
     const port = 8080;
     const server = new WebSocket.Server({ port });
     const data = new Uint8Array([102, 111, 111]);

addons/xterm-addon-canvas/.gitignore

@@ -0,0 +1,2 @@
+lib
+node_modules

addons/xterm-addon-canvas/.npmignore

@@ -0,0 +1,29 @@
+# Blacklist - exclude everything except npm defaults such as LICENSE, etc
+*
+!*/
+
+# Whitelist - lib/
+!lib/**/*.d.ts
+
+!lib/**/*.js
+!lib/**/*.js.map
+
+!lib/**/*.css
+
+# Whitelist - src/
+!src/**/*.ts
+!src/**/*.d.ts
+
+!src/**/*.js
+!src/**/*.js.map
+
+!src/**/*.css
+
+# Blacklist - src/ test files
+src/**/*.test.ts
+src/**/*.test.d.ts
+src/**/*.test.js
+src/**/*.test.js.map
+
+# Whitelist - typings/
+!typings/*.d.ts

addons/xterm-addon-canvas/LICENSE

@@ -0,0 +1,19 @@
+Copyright (c) 2017, The xterm.js authors (https://github.com/xtermjs/xterm.js)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.

addons/xterm-addon-canvas/README.md

@@ -0,0 +1,23 @@
+## xterm-addon-canvas
+
+An addon for [xterm.js](https://github.com/xtermjs/xterm.js) that enables a canvas-based renderer using a 2d context to draw. This addon requires xterm.js v5+.
+
+
+### Install
+
+```bash
+npm install --save xterm-addon-canvas
+```
+
+### Usage
+
+```ts
+import { Terminal } from 'xterm';
+import { CanvasAddon } from 'xterm-addon-canvas';
+
+const terminal = new Terminal();
+terminal.open(element);
+terminal.loadAddon(new CanvasAddon());
+```
+
+See the full [API](https://github.com/xtermjs/xterm.js/blob/master/addons/xterm-addon-canvas/typings/xterm-addon-canvas.d.ts) for more advanced usage.

addons/xterm-addon-canvas/package.json

@@ -0,0 +1,27 @@
+{
+  "name": "xterm-addon-canvas",
+  "version": "0.12.0",
+  "author": {
+    "name": "The xterm.js authors",
+    "url": "https://xtermjs.org/"
+  },
+  "main": "lib/xterm-addon-canvas.js",
+  "types": "typings/xterm-addon-canvas.d.ts",
+  "repository": "https://github.com/xtermjs/xterm.js",
+  "license": "MIT",
+  "keywords": [
+    "terminal",
+    "canvas",
+    "xterm",
+    "xterm.js"
+  ],
+  "scripts": {
+    "build": "../../node_modules/.bin/tsc -p .",
+    "prepackage": "npm run build",
+    "package": "../../node_modules/.bin/webpack",
+    "prepublishOnly": "npm run package"
+  },
+  "peerDependencies": {
+    "xterm": "^4.0.0"
+  }
+}

src/browser/renderer/BaseRenderLayer.ts → addons/xterm-addon-canvas/src/BaseRenderLayer.ts

@@ -3,13 +3,14 @@
  * @license MIT
  */
 
-import { IRenderDimensions, IRenderLayer } from 'browser/renderer/Types';
+import { IRenderDimensions } from 'browser/renderer/Types';
+import { IRenderLayer } from './Types';
 import { ICellData, IColor } from 'common/Types';
 import { DEFAULT_COLOR, WHITESPACE_CELL_CHAR, WHITESPACE_CELL_CODE, Attributes } from 'common/buffer/Constants';
-import { IGlyphIdentifier } from 'browser/renderer/atlas/Types';
-import { DIM_OPACITY, INVERTED_DEFAULT_COLOR, TEXT_BASELINE } from 'browser/renderer/atlas/Constants';
-import { BaseCharAtlas } from 'browser/renderer/atlas/BaseCharAtlas';
-import { acquireCharAtlas } from 'browser/renderer/atlas/CharAtlasCache';
+import { IGlyphIdentifier } from './atlas/Types';
+import { DIM_OPACITY, INVERTED_DEFAULT_COLOR, TEXT_BASELINE } from 'browser/renderer/Constants';
+import { BaseCharAtlas } from './atlas/BaseCharAtlas';
+import { acquireCharAtlas } from './atlas/CharAtlasCache';
 import { AttributeData } from 'common/buffer/AttributeData';
 import { IColorSet } from 'browser/Types';
 import { CellData } from 'common/buffer/CellData';

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

@@ -0,0 +1,42 @@
+/**
+ * Copyright (c) 2022 The xterm.js authors. All rights reserved.
+ * @license MIT
+ */
+
+import { IRenderService } from 'browser/services/Services';
+import { IColorSet } from 'browser/Types';
+import { CanvasRenderer } from './CanvasRenderer';
+import { IBufferService, IInstantiationService } from 'common/services/Services';
+import { ITerminalAddon, Terminal } from 'xterm';
+
+export class CanvasAddon implements ITerminalAddon {
+  private _terminal?: Terminal;
+  private _renderer?: CanvasRenderer;
+
+  public activate(terminal: Terminal): void {
+    if (!terminal.element) {
+      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 renderService: IRenderService = (terminal as any)._core._renderService;
+    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);
+    renderService.setRenderer(this._renderer);
+    renderService.onResize(bufferService.cols, bufferService.rows);
+  }
+
+  public dispose(): void {
+    if (!this._terminal) {
+      throw new Error('Cannot dispose CanvasAddon because it is activated');
+    }
+    const renderService: IRenderService = (this._terminal as any)._core._renderService;
+    renderService.setRenderer((this._terminal as any)._core._createRenderer());
+    renderService.onResize(this._terminal.cols, this._terminal.rows);
+    this._renderer?.dispose();
+    this._renderer = undefined;
+  }
+}

src/browser/renderer/Renderer.ts → addons/xterm-addon-canvas/src/CanvasRenderer.ts

@@ -3,21 +3,22 @@
  * @license MIT
  */
 
-import { TextRenderLayer } from 'browser/renderer/TextRenderLayer';
-import { SelectionRenderLayer } from 'browser/renderer/SelectionRenderLayer';
-import { CursorRenderLayer } from 'browser/renderer/CursorRenderLayer';
-import { IRenderLayer, IRenderer, IRenderDimensions, IRequestRedrawEvent } from 'browser/renderer/Types';
-import { LinkRenderLayer } from 'browser/renderer/LinkRenderLayer';
+import { TextRenderLayer } from './TextRenderLayer';
+import { SelectionRenderLayer } from './SelectionRenderLayer';
+import { CursorRenderLayer } from './CursorRenderLayer';
+import { IRenderer, IRenderDimensions, IRequestRedrawEvent } from 'browser/renderer/Types';
+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 { removeTerminalFromCache } from 'browser/renderer/atlas/CharAtlasCache';
+import { removeTerminalFromCache } from './atlas/CharAtlasCache';
 import { EventEmitter, IEvent } from 'common/EventEmitter';
 
 let nextRendererId = 1;
 
-export class Renderer extends Disposable implements IRenderer {
+export class CanvasRenderer extends Disposable implements IRenderer {
   private _id = nextRendererId++;
 
   private _renderLayers: IRenderLayer[];

src/browser/renderer/CursorRenderLayer.ts → addons/xterm-addon-canvas/src/CursorRenderLayer.ts

@@ -4,7 +4,7 @@
  */
 
 import { IRenderDimensions, IRequestRedrawEvent } from 'browser/renderer/Types';
-import { BaseRenderLayer } from 'browser/renderer/BaseRenderLayer';
+import { BaseRenderLayer } from './BaseRenderLayer';
 import { ICellData } from 'common/Types';
 import { CellData } from 'common/buffer/CellData';
 import { IColorSet } from 'browser/Types';

src/browser/renderer/GridCache.test.ts → addons/xterm-addon-canvas/src/GridCache.test.ts

@@ -4,7 +4,7 @@
  */
 
 import { assert } from 'chai';
-import { GridCache } from 'browser/renderer/GridCache';
+import { GridCache } from './GridCache';
 
 describe('GridCache', () => {
   let grid: GridCache<number>;

src/browser/renderer/LinkRenderLayer.ts → addons/xterm-addon-canvas/src/LinkRenderLayer.ts

@@ -5,8 +5,8 @@
 
 import { IRenderDimensions } from 'browser/renderer/Types';
 import { BaseRenderLayer } from './BaseRenderLayer';
-import { INVERTED_DEFAULT_COLOR } from 'browser/renderer/atlas/Constants';
-import { is256Color } from 'browser/renderer/atlas/CharAtlasUtils';
+import { INVERTED_DEFAULT_COLOR } from 'browser/renderer/Constants';
+import { is256Color } from './atlas/CharAtlasUtils';
 import { IColorSet, ILinkifierEvent, ILinkifier2 } from 'browser/Types';
 import { IBufferService, IDecorationService, IOptionsService } from 'common/services/Services';
 

src/browser/renderer/SelectionRenderLayer.ts → addons/xterm-addon-canvas/src/SelectionRenderLayer.ts

@@ -4,7 +4,7 @@
  */
 
 import { IRenderDimensions } from 'browser/renderer/Types';
-import { BaseRenderLayer } from 'browser/renderer/BaseRenderLayer';
+import { BaseRenderLayer } from './BaseRenderLayer';
 import { IColorSet } from 'browser/Types';
 import { IBufferService, IDecorationService, IOptionsService } from 'common/services/Services';
 

src/browser/renderer/TextRenderLayer.ts → addons/xterm-addon-canvas/src/TextRenderLayer.ts

@@ -5,8 +5,8 @@
 
 import { IRenderDimensions } from 'browser/renderer/Types';
 import { CharData, ICellData } from 'common/Types';
-import { GridCache } from 'browser/renderer/GridCache';
-import { BaseRenderLayer } from 'browser/renderer/BaseRenderLayer';
+import { GridCache } from './GridCache';
+import { BaseRenderLayer } from './BaseRenderLayer';
 import { AttributeData } from 'common/buffer/AttributeData';
 import { NULL_CELL_CODE, Content } from 'common/buffer/Constants';
 import { IColorSet } from 'browser/Types';

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

@@ -0,0 +1,110 @@
+/**
+ * Copyright (c) 2019 The xterm.js authors. All rights reserved.
+ * @license MIT
+ */
+
+import { IDisposable } from 'common/Types';
+import { IColorSet } from 'browser/Types';
+import { IEvent } from 'common/EventEmitter';
+
+// TODO: Use core interfaces
+export interface IRenderDimensions {
+  scaledCharWidth: number;
+  scaledCharHeight: number;
+  scaledCellWidth: number;
+  scaledCellHeight: number;
+  scaledCharLeft: number;
+  scaledCharTop: number;
+  scaledCanvasWidth: number;
+  scaledCanvasHeight: number;
+  canvasWidth: number;
+  canvasHeight: number;
+  actualCellWidth: number;
+  actualCellHeight: number;
+}
+
+export interface IRequestRedrawEvent {
+  start: number;
+  end: number;
+}
+
+/**
+ * Note that IRenderer implementations should emit the refresh event after
+ * rendering rows to the screen.
+ */
+export interface IRenderer extends IDisposable {
+  readonly dimensions: IRenderDimensions;
+
+  /**
+   * Fires when the renderer is requesting to be redrawn on the next animation
+   * frame but is _not_ a result of content changing (eg. selection changes).
+   */
+  readonly onRequestRedraw: IEvent<IRequestRedrawEvent>;
+
+  dispose(): void;
+  setColors(colors: IColorSet): void;
+  onDevicePixelRatioChange(): void;
+  onResize(cols: number, rows: number): void;
+  onCharSizeChanged(): void;
+  onBlur(): void;
+  onFocus(): void;
+  onSelectionChanged(start: [number, number] | undefined, end: [number, number] | undefined, columnSelectMode: boolean): void;
+  onCursorMove(): void;
+  onOptionsChanged(): void;
+  clear(): void;
+  renderRows(start: number, end: number): void;
+  clearTextureAtlas?(): void;
+}
+
+export interface IRenderLayer extends IDisposable {
+  /**
+   * Called when the terminal loses focus.
+   */
+  onBlur(): void;
+
+  /**
+   * * Called when the terminal gets focus.
+   */
+  onFocus(): void;
+
+  /**
+   * Called when the cursor is moved.
+   */
+  onCursorMove(): void;
+
+  /**
+   * Called when options change.
+   */
+  onOptionsChanged(): void;
+
+  /**
+   * Called when the theme changes.
+   */
+  setColors(colorSet: IColorSet): void;
+
+  /**
+   * Called when the data in the grid has changed (or needs to be rendered
+   * again).
+   */
+  onGridChanged(startRow: number, endRow: number): void;
+
+  /**
+   * Calls when the selection changes.
+   */
+  onSelectionChanged(start: [number, number] | undefined, end: [number, number] | undefined, columnSelectMode: boolean): void;
+
+  /**
+   * Resize the render layer.
+   */
+  resize(dim: IRenderDimensions): void;
+
+  /**
+   * Clear the state of the render layer.
+   */
+  reset(): void;
+
+  /**
+   * Clears the texture atlas.
+   */
+  clearTextureAtlas(): void;
+}

src/browser/renderer/atlas/BaseCharAtlas.ts → addons/xterm-addon-canvas/src/atlas/BaseCharAtlas.ts

@@ -3,7 +3,7 @@
  * @license MIT
  */
 
-import { IGlyphIdentifier } from 'browser/renderer/atlas/Types';
+import { IGlyphIdentifier } from './Types';
 import { IDisposable } from 'common/Types';
 
 export abstract class BaseCharAtlas implements IDisposable {