Move renderer into browser

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

@@ -4,16 +4,12 @@
  */
 
 import { IRenderLayer } from './Types';
-import { ICellData } from 'common/Types';
-import { DEFAULT_COLOR, WHITESPACE_CELL_CHAR, WHITESPACE_CELL_CODE } from 'common/buffer/Constants';
 import { IGlyphIdentifier } from '../atlas/Types';
-import { DIM_OPACITY, INVERTED_DEFAULT_COLOR } from 'browser/renderer/atlas/Constants';
 import { acquireCharAtlas } from '../atlas/CharAtlasCache';
 import { Terminal } from 'xterm';
 import { IColorSet } from 'browser/Types';
 import { IRenderDimensions } from 'browser/renderer/Types';
 import { CellData } from 'common/buffer/CellData';
-import { AttributeData } from 'common/buffer/AttributeData';
 import { WebglCharAtlas } from 'atlas/WebglCharAtlas';
 import { throwIfFalsy } from '../WebglUtils';
 

src/Terminal.ts

@@ -38,7 +38,6 @@ import { SoundService } from 'browser/services/SoundService';
 import { MouseZoneManager } from 'browser/MouseZoneManager';
 import { AccessibilityManager } from './AccessibilityManager';
 import { ITheme, IMarker, IDisposable, ISelectionPosition } from 'xterm';
-import { removeTerminalFromCache } from './renderer/atlas/CharAtlasCache';
 import { DomRenderer } from './renderer/dom/DomRenderer';
 import { IKeyboardEvent, KeyboardResultType, ICharset, IBufferLine, IAttributeData } from 'common/Types';
 import { evaluateKeyboardEvent } from 'common/input/Keyboard';
@@ -271,8 +270,8 @@ export class Terminal extends Disposable implements ITerminal, IDisposable, IInp
       this._windowsMode.dispose();
       this._windowsMode = undefined;
     }
+    this._renderService.dispose();
     this._customKeyEventHandler = null;
-    removeTerminalFromCache(this);
     this.write = () => {};
     if (this.element && this.element.parentNode) {
       this.element.parentNode.removeChild(this.element);
@@ -692,7 +691,7 @@ export class Terminal extends Disposable implements ITerminal, IDisposable, IInp
 
   private _createRenderer(): IRenderer {
     switch (this.options.rendererType) {
-      case 'canvas': return new Renderer(this._colorManager.colors, this, this._bufferService, this._charSizeService);
+      case 'canvas': return new Renderer(this._colorManager.colors, this, this._bufferService, this._charSizeService, this.optionsService);
       case 'dom': return new DomRenderer(this, this._colorManager.colors, this._charSizeService, this.optionsService);
       default: throw new Error(`Unrecognized rendererType "${this.options.rendererType}"`);
     }

src/browser/Types.d.ts

@@ -24,6 +24,15 @@ export interface IColorSet {
   ansi: IColor[];
 }
 
+export interface IPartialColorSet {
+  foreground: IColor;
+  background: IColor;
+  cursor?: IColor;
+  cursorAccent?: IColor;
+  selection?: IColor;
+  ansi: IColor[];
+}
+
 export interface IViewport extends IDisposable {
   scrollBarWidth: number;
   syncScrollArea(): void;

src/renderer/BaseRenderLayer.ts → src/browser/renderer/BaseRenderLayer.ts

@@ -3,30 +3,30 @@
  * @license MIT
  */
 
-import { IRenderLayer } from './Types';
-import { IRenderDimensions } from 'browser/renderer/Types';
-import { ITerminal } from '../Types';
+import { IRenderDimensions, IRenderLayer } from 'browser/renderer/Types';
 import { ICellData } from 'common/Types';
 import { DEFAULT_COLOR, WHITESPACE_CELL_CHAR, WHITESPACE_CELL_CODE } from 'common/buffer/Constants';
-import { IGlyphIdentifier } from './atlas/Types';
+import { IGlyphIdentifier } from 'browser/renderer/atlas/Types';
 import { DIM_OPACITY, INVERTED_DEFAULT_COLOR } from 'browser/renderer/atlas/Constants';
-import { BaseCharAtlas } from './atlas/BaseCharAtlas';
-import { acquireCharAtlas } from './atlas/CharAtlasCache';
+import { BaseCharAtlas } from 'browser/renderer/atlas/BaseCharAtlas';
+import { acquireCharAtlas } from 'browser/renderer/atlas/CharAtlasCache';
 import { AttributeData } from 'common/buffer/AttributeData';
 import { IColorSet } from 'browser/Types';
 import { CellData } from 'common/buffer/CellData';
+import { IBufferService, IOptionsService } from 'common/services/Services';
+import { throwIfFalsy } from 'browser/renderer/RendererUtils';
 
 export abstract class BaseRenderLayer implements IRenderLayer {
   private _canvas: HTMLCanvasElement;
-  protected _ctx: CanvasRenderingContext2D;
+  protected _ctx!: CanvasRenderingContext2D;
   private _scaledCharWidth: number = 0;
   private _scaledCharHeight: number = 0;
   private _scaledCellWidth: number = 0;
   private _scaledCellHeight: number = 0;
   private _scaledCharLeft: number = 0;
   private _scaledCharTop: number = 0;
 
-  protected _charAtlas: BaseCharAtlas;
+  protected _charAtlas: BaseCharAtlas | undefined;
 
   /**
    * An object that's reused when drawing glyphs in order to reduce GC.
@@ -46,7 +46,10 @@ export abstract class BaseRenderLayer implements IRenderLayer {
     id: string,
     zIndex: number,
     private _alpha: boolean,
-    protected _colors: IColorSet
+    protected _colors: IColorSet,
+    private _rendererId: number,
+    protected readonly _bufferService: IBufferService,
+    protected readonly _optionsService: IOptionsService
   ) {
     this._canvas = document.createElement('canvas');
     this._canvas.classList.add(`xterm-${id}-layer`);
@@ -63,25 +66,25 @@ export abstract class BaseRenderLayer implements IRenderLayer {
   }
 
   private _initCanvas(): void {
-    this._ctx = this._canvas.getContext('2d', {alpha: this._alpha});
+    this._ctx = throwIfFalsy(this._canvas.getContext('2d', {alpha: this._alpha}));
     // Draw the background if this is an opaque layer
     if (!this._alpha) {
       this._clearAll();
     }
   }
 
-  public onOptionsChanged(terminal: ITerminal): void {}
-  public onBlur(terminal: ITerminal): void {}
-  public onFocus(terminal: ITerminal): void {}
-  public onCursorMove(terminal: ITerminal): void {}
-  public onGridChanged(terminal: ITerminal, startRow: number, endRow: number): void {}
-  public onSelectionChanged(terminal: ITerminal, start: [number, number], end: [number, number], columnSelectMode: boolean = false): void {}
+  public onOptionsChanged(): void {}
+  public onBlur(): void {}
+  public onFocus(): void {}
+  public onCursorMove(): void {}
+  public onGridChanged(startRow: number, endRow: number): void {}
+  public onSelectionChanged(start: [number, number], end: [number, number], columnSelectMode: boolean = false): void {}
 
-  public setColors(terminal: ITerminal, colorSet: IColorSet): void {
-    this._refreshCharAtlas(terminal, colorSet);
+  public setColors(colorSet: IColorSet): void {
+    this._refreshCharAtlas(colorSet);
   }
 
-  protected _setTransparency(terminal: ITerminal, alpha: boolean): void {
+  protected _setTransparency(alpha: boolean): void {
     // Do nothing when alpha doesn't change
     if (alpha === this._alpha) {
       return;
@@ -96,24 +99,23 @@ export abstract class BaseRenderLayer implements IRenderLayer {
     this._container.replaceChild(this._canvas, oldCanvas);
 
     // Regenerate char atlas and force a full redraw
-    this._refreshCharAtlas(terminal, this._colors);
-    this.onGridChanged(terminal, 0, terminal.rows - 1);
+    this._refreshCharAtlas(this._colors);
+    this.onGridChanged(0, this._bufferService.rows - 1);
   }
 
   /**
    * Refreshes the char atlas, aquiring a new one if necessary.
-   * @param terminal The terminal.
    * @param colorSet The color set to use for the char atlas.
    */
-  private _refreshCharAtlas(terminal: ITerminal, colorSet: IColorSet): void {
+  private _refreshCharAtlas(colorSet: IColorSet): void {
     if (this._scaledCharWidth <= 0 && this._scaledCharHeight <= 0) {
       return;
     }
-    this._charAtlas = acquireCharAtlas(terminal, colorSet, this._scaledCharWidth, this._scaledCharHeight);
+    this._charAtlas = acquireCharAtlas(this._optionsService.options, this._rendererId, colorSet, this._scaledCharWidth, this._scaledCharHeight);
     this._charAtlas.warmUp();
   }
 
-  public resize(terminal: ITerminal, dim: IRenderDimensions): void {
+  public resize(dim: IRenderDimensions): void {
     this._scaledCellWidth = dim.scaledCellWidth;
     this._scaledCellHeight = dim.scaledCellHeight;
     this._scaledCharWidth = dim.scaledCharWidth;
@@ -130,10 +132,10 @@ export abstract class BaseRenderLayer implements IRenderLayer {
       this._clearAll();
     }
 
-    this._refreshCharAtlas(terminal, this._colors);
+    this._refreshCharAtlas(this._colors);
   }
 
-  public abstract reset(terminal: ITerminal): void;
+  public abstract reset(): void;
 
   /**
    * Fills 1+ cells completely. This uses the existing fillStyle on the context.
@@ -233,16 +235,15 @@ export abstract class BaseRenderLayer implements IRenderLayer {
    * Draws a truecolor character at the cell. The character will be clipped to
    * ensure that it fits with the cell, including the cell to the right if it's
    * a wide character. This uses the existing fillStyle on the context.
-   * @param terminal The terminal.
    * @param cell The cell data for the character to draw.
    * @param x The column to draw at.
    * @param y The row to draw at.
    * @param color The color of the character.
    */
-  protected _fillCharTrueColor(terminal: ITerminal, cell: CellData, x: number, y: number): void {
-    this._ctx.font = this._getFont(terminal, false, false);
+  protected _fillCharTrueColor(cell: CellData, x: number, y: number): void {
+    this._ctx.font = this._getFont(false, false);
     this._ctx.textBaseline = 'middle';
-    this._clipRow(terminal, y);
+    this._clipRow(y);
     this._ctx.fillText(
         cell.getChars(),
         x * this._scaledCellWidth + this._scaledCharLeft,
@@ -252,7 +253,6 @@ export abstract class BaseRenderLayer implements IRenderLayer {
   /**
    * Draws one or more characters at a cell. If possible this will draw using
    * the character atlas to reduce draw time.
-   * @param terminal The terminal.
    * @param chars The character or characters.
    * @param code The character code.
    * @param width The width of the characters.
@@ -263,14 +263,14 @@ export abstract class BaseRenderLayer implements IRenderLayer {
    * This is used to validate whether a cached image can be used.
    * @param bold Whether the text is bold.
    */
-  protected _drawChars(terminal: ITerminal, cell: ICellData, x: number, y: number): void {
+  protected _drawChars(cell: ICellData, x: number, y: number): void {
 
     // skip cache right away if we draw in RGB
     // Note: to avoid bad runtime JoinedCellData will be skipped
     //       in the cache handler itself (atlasDidDraw == false) and
     //       fall through to uncached later down below
     if (cell.isFgRGB() || cell.isBgRGB()) {
-      this._drawUncachedChars(terminal, cell, x, y);
+      this._drawUncachedChars(cell, x, y);
       return;
     }
 
@@ -284,7 +284,7 @@ export abstract class BaseRenderLayer implements IRenderLayer {
       fg = (cell.isFgDefault()) ? DEFAULT_COLOR : cell.getFgColor();
     }
 
-    const drawInBrightColor = terminal.options.drawBoldTextInBrightColors && cell.isBold() && fg < 8 && fg !== INVERTED_DEFAULT_COLOR;
+    const drawInBrightColor = this._optionsService.options.drawBoldTextInBrightColors && cell.isBold() && fg < 8 && fg !== INVERTED_DEFAULT_COLOR;
 
     fg += drawInBrightColor ? 8 : 0;
     this._currentGlyphIdentifier.chars = cell.getChars() || WHITESPACE_CELL_CHAR;
@@ -302,24 +302,23 @@ export abstract class BaseRenderLayer implements IRenderLayer {
     );
 
     if (!atlasDidDraw) {
-      this._drawUncachedChars(terminal, cell, x, y);
+      this._drawUncachedChars(cell, x, y);
     }
   }
 
   /**
    * Draws one or more characters at one or more cells. The character(s) will be
    * clipped to ensure that they fit with the cell(s), including the cell to the
    * right if the last character is a wide character.
-   * @param terminal The terminal.
    * @param chars The character.
    * @param width The width of the character.
    * @param fg The foreground color, in the format stored within the attributes.
    * @param x The column to draw at.
    * @param y The row to draw at.
    */
-  private _drawUncachedChars(terminal: ITerminal, cell: ICellData, x: number, y: number): void {
+  private _drawUncachedChars(cell: ICellData, x: number, y: number): void {
     this._ctx.save();
-    this._ctx.font = this._getFont(terminal, !!cell.isBold(), !!cell.isItalic());
+    this._ctx.font = this._getFont(!!cell.isBold(), !!cell.isItalic());
     this._ctx.textBaseline = 'middle';
 
     if (cell.isInverse()) {
@@ -337,14 +336,14 @@ export abstract class BaseRenderLayer implements IRenderLayer {
         this._ctx.fillStyle = `rgb(${AttributeData.toColorRGB(cell.getFgColor()).join(',')})`;
       } else {
         let fg = cell.getFgColor();
-        if (terminal.options.drawBoldTextInBrightColors && cell.isBold() && fg < 8) {
+        if (this._optionsService.options.drawBoldTextInBrightColors && cell.isBold() && fg < 8) {
           fg += 8;
         }
         this._ctx.fillStyle = this._colors.ansi[fg].css;
       }
     }
 
-    this._clipRow(terminal, y);
+    this._clipRow(y);
 
     // Apply alpha to dim the character
     if (cell.isDim()) {
@@ -360,29 +359,27 @@ export abstract class BaseRenderLayer implements IRenderLayer {
 
   /**
    * Clips a row to ensure no pixels will be drawn outside the cells in the row.
-   * @param terminal The terminal.
    * @param y The row to clip.
    */
-  private _clipRow(terminal: ITerminal, y: number): void {
+  private _clipRow(y: number): void {
     this._ctx.beginPath();
     this._ctx.rect(
         0,
         y * this._scaledCellHeight,
-        terminal.cols * this._scaledCellWidth,
+        this._bufferService.cols * this._scaledCellWidth,
         this._scaledCellHeight);
     this._ctx.clip();
   }
 
   /**
    * Gets the current font.
-   * @param terminal The terminal.
    * @param isBold If we should use the bold fontWeight.
    */
-  protected _getFont(terminal: ITerminal, isBold: boolean, isItalic: boolean): string {
-    const fontWeight = isBold ? terminal.options.fontWeightBold : terminal.options.fontWeight;
+  protected _getFont(isBold: boolean, isItalic: boolean): string {
+    const fontWeight = isBold ? this._optionsService.options.fontWeightBold : this._optionsService.options.fontWeight;
     const fontStyle = isItalic ? 'italic' : '';
 
-    return `${fontStyle} ${fontWeight} ${terminal.options.fontSize * window.devicePixelRatio}px ${terminal.options.fontFamily}`;
+    return `${fontStyle} ${fontWeight} ${this._optionsService.options.fontSize * window.devicePixelRatio}px ${this._optionsService.options.fontFamily}`;
   }
 }
 

src/renderer/LinkRenderLayer.ts → src/browser/renderer/LinkRenderLayer.ts

@@ -3,29 +3,37 @@
  * @license MIT
  */
 
-import { ITerminal, ILinkifierAccessor } from '../Types';
 import { IRenderDimensions } from 'browser/renderer/Types';
 import { BaseRenderLayer } from './BaseRenderLayer';
 import { INVERTED_DEFAULT_COLOR } from 'browser/renderer/atlas/Constants';
-import { is256Color } from './atlas/CharAtlasUtils';
-import { IColorSet, ILinkifierEvent } from 'browser/Types';
+import { is256Color } from 'browser/renderer/atlas/CharAtlasUtils';
+import { IColorSet, ILinkifierEvent, ILinkifier } from 'browser/Types';
+import { IBufferService, IOptionsService } from 'common/services/Services';
 
 export class LinkRenderLayer extends BaseRenderLayer {
-  private _state: ILinkifierEvent = null;
+  private _state: ILinkifierEvent | undefined;
 
-  constructor(container: HTMLElement, zIndex: number, colors: IColorSet, terminal: ILinkifierAccessor) {
-    super(container, 'link', zIndex, true, colors);
-    terminal.linkifier.onLinkHover(e => this._onLinkHover(e));
-    terminal.linkifier.onLinkLeave(e => this._onLinkLeave(e));
+  constructor(
+    container: HTMLElement,
+    zIndex: number,
+    colors: IColorSet,
+    rendererId: number,
+    linkifier: ILinkifier,
+    readonly bufferService: IBufferService,
+    readonly optionsService: IOptionsService
+  ) {
+    super(container, 'link', zIndex, true, colors, rendererId, bufferService, optionsService);
+    linkifier.onLinkHover(e => this._onLinkHover(e));
+    linkifier.onLinkLeave(e => this._onLinkLeave(e));
   }
 
-  public resize(terminal: ITerminal, dim: IRenderDimensions): void {
-    super.resize(terminal, dim);
+  public resize(dim: IRenderDimensions): void {
+    super.resize(dim);
     // Resizing the canvas discards the contents of the canvas so clear state
-    this._state = null;
+    this._state = undefined;
   }
 
-  public reset(terminal: ITerminal): void {
+  public reset(): void {
     this._clearCurrentLink();
   }
 
@@ -37,14 +45,14 @@ export class LinkRenderLayer extends BaseRenderLayer {
         this._clearCells(0, this._state.y1 + 1, this._state.cols, middleRowCount);
       }
       this._clearCells(0, this._state.y2, this._state.x2, 1);
-      this._state = null;
+      this._state = undefined;
     }
   }
 
   private _onLinkHover(e: ILinkifierEvent): void {
     if (e.fg === INVERTED_DEFAULT_COLOR) {
       this._ctx.fillStyle = this._colors.background.css;
-    } else if (is256Color(e.fg)) {
+    } else if (e.fg && is256Color(e.fg)) {
       // 256 color support
       this._ctx.fillStyle = this._colors.ansi[e.fg].css;
     } else {