Merge pull request #4304 from Tyriar/4259

Simplify options API

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

@@ -122,7 +122,7 @@ export abstract class BaseRenderLayer extends Disposable implements IRenderLayer
       return;
     }
     this._charAtlasDisposable?.dispose();
-    this._charAtlas = acquireTextureAtlas(this._terminal, colorSet, this._deviceCellWidth, this._deviceCellHeight, this._deviceCharWidth, this._deviceCharHeight, this._coreBrowserService.dpr);
+    this._charAtlas = acquireTextureAtlas(this._terminal, this._optionsService.rawOptions, colorSet, this._deviceCellWidth, this._deviceCellHeight, this._deviceCharWidth, this._deviceCharHeight, this._coreBrowserService.dpr);
     this._charAtlasDisposable = forwardEvent(this._charAtlas.onAddTextureAtlasCanvas, this._onAddTextureAtlasCanvas);
     this._charAtlas.warmUp();
     for (let i = 0; i < this._charAtlas.pages.length; i++) {

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

@@ -67,7 +67,7 @@ export class WebglRenderer extends Disposable implements IRenderer {
     private readonly _coreBrowserService: ICoreBrowserService,
     coreService: ICoreService,
     private readonly _decorationService: IDecorationService,
-    optionsService: IOptionsService,
+    private readonly _optionsService: IOptionsService,
     private readonly _themeService: IThemeService,
     preserveDrawingBuffer?: boolean
   ) {
@@ -80,13 +80,13 @@ export class WebglRenderer extends Disposable implements IRenderer {
     this._core = (this._terminal as any)._core;
 
     this._renderLayers = [
-      new LinkRenderLayer(this._core.screenElement!, 2, this._terminal, this._core.linkifier2, this._coreBrowserService, this._themeService),
-      new CursorRenderLayer(_terminal, this._core.screenElement!, 3, this._onRequestRedraw, this._coreBrowserService, coreService, this._themeService, optionsService)
+      new LinkRenderLayer(this._core.screenElement!, 2, this._terminal, this._core.linkifier2, this._coreBrowserService, _optionsService, this._themeService),
+      new CursorRenderLayer(_terminal, this._core.screenElement!, 3, this._onRequestRedraw, this._coreBrowserService, coreService, _optionsService, this._themeService)
     ];
     this.dimensions = createRenderDimensions();
     this._devicePixelRatio = this._coreBrowserService.dpr;
     this._updateDimensions();
-    this.register(optionsService.onOptionChange(() => this._handleOptionsChanged()));
+    this.register(_optionsService.onOptionChange(() => this._handleOptionsChanged()));
 
     this._canvas = document.createElement('canvas');
 
@@ -259,6 +259,7 @@ export class WebglRenderer extends Disposable implements IRenderer {
 
     const atlas = acquireTextureAtlas(
       this._terminal,
+      this._optionsService.rawOptions,
       this._themeService.colors,
       this.dimensions.device.cell.width,
       this.dimensions.device.cell.height,
@@ -469,18 +470,18 @@ export class WebglRenderer extends Disposable implements IRenderer {
     // Calculate the device cell height, if lineHeight is _not_ 1, the resulting value will be
     // floored since lineHeight can never be lower then 1, this guarentees the device cell height
     // will always be larger than device char height.
-    this.dimensions.device.cell.height = Math.floor(this.dimensions.device.char.height * this._terminal.options.lineHeight);
+    this.dimensions.device.cell.height = Math.floor(this.dimensions.device.char.height * this._optionsService.rawOptions.lineHeight);
 
     // 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.device.char.top = this._terminal.options.lineHeight === 1 ? 0 : Math.round((this.dimensions.device.cell.height - this.dimensions.device.char.height) / 2);
+    this.dimensions.device.char.top = this._optionsService.rawOptions.lineHeight === 1 ? 0 : Math.round((this.dimensions.device.cell.height - this.dimensions.device.char.height) / 2);
 
     // Calculate the device cell width, taking the letterSpacing into account.
-    this.dimensions.device.cell.width = this.dimensions.device.char.width + Math.round(this._terminal.options.letterSpacing);
+    this.dimensions.device.cell.width = this.dimensions.device.char.width + Math.round(this._optionsService.rawOptions.letterSpacing);
 
     // 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.device.char.left = Math.floor(this._terminal.options.letterSpacing / 2);
+    this.dimensions.device.char.left = Math.floor(this._optionsService.rawOptions.letterSpacing / 2);
 
     // Recalculate the canvas dimensions, the device dimensions define the actual number of pixel in
     // the canvas

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

@@ -13,6 +13,7 @@ import { IRenderDimensions, ITextureAtlas } from 'browser/renderer/shared/Types'
 import { CellData } from 'common/buffer/CellData';
 import { throwIfFalsy } from 'browser/renderer/shared/RendererUtils';
 import { Disposable, toDisposable } from 'common/Lifecycle';
+import { IOptionsService } from 'common/services/Services';
 
 export abstract class BaseRenderLayer extends Disposable implements IRenderLayer {
   private _canvas: HTMLCanvasElement;
@@ -33,6 +34,7 @@ export abstract class BaseRenderLayer extends Disposable implements IRenderLayer
     zIndex: number,
     private _alpha: boolean,
     protected readonly _coreBrowserService: ICoreBrowserService,
+    protected readonly _optionsService: IOptionsService,
     protected readonly _themeService: IThemeService
   ) {
     super();
@@ -93,7 +95,7 @@ export abstract class BaseRenderLayer extends Disposable implements IRenderLayer
     if (this._deviceCharWidth <= 0 && this._deviceCharHeight <= 0) {
       return;
     }
-    this._charAtlas = acquireTextureAtlas(terminal, colorSet, this._deviceCellWidth, this._deviceCellHeight, this._deviceCharWidth, this._deviceCharHeight, this._coreBrowserService.dpr);
+    this._charAtlas = acquireTextureAtlas(terminal, this._optionsService.rawOptions, colorSet, this._deviceCellWidth, this._deviceCellHeight, this._deviceCharWidth, this._deviceCharHeight, this._coreBrowserService.dpr);
     this._charAtlas.warmUp();
   }
 

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

@@ -39,10 +39,10 @@ export class CursorRenderLayer extends BaseRenderLayer {
     private _onRequestRefreshRowsEvent: IEventEmitter<IRequestRedrawEvent>,
     coreBrowserService: ICoreBrowserService,
     private readonly _coreService: ICoreService,
-    themeService: IThemeService,
-    optionsService: IOptionsService
+    optionsService: IOptionsService,
+    themeService: IThemeService
   ) {
-    super(terminal, container, 'cursor', zIndex, true, coreBrowserService, themeService);
+    super(terminal, container, 'cursor', zIndex, true, coreBrowserService, optionsService, themeService);
     this._state = {
       x: 0,
       y: 0,
@@ -213,7 +213,7 @@ export class CursorRenderLayer extends BaseRenderLayer {
   private _renderBarCursor(terminal: Terminal, x: number, y: number, cell: ICellData): void {
     this._ctx.save();
     this._ctx.fillStyle = this._themeService.colors.cursor.css;
-    this._fillLeftLineAtCell(x, y, terminal.options.cursorWidth);
+    this._fillLeftLineAtCell(x, y, this._optionsService.rawOptions.cursorWidth);
     this._ctx.restore();
   }
 

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

@@ -8,6 +8,7 @@ import { INVERTED_DEFAULT_COLOR } from 'browser/renderer/shared/Constants';
 import { IRenderDimensions } from 'browser/renderer/shared/Types';
 import { ICoreBrowserService, IThemeService } from 'browser/services/Services';
 import { ILinkifier2, ILinkifierEvent } from 'browser/Types';
+import { IOptionsService } from 'common/services/Services';
 import { Terminal } from 'xterm';
 import { BaseRenderLayer } from './BaseRenderLayer';
 
@@ -20,9 +21,10 @@ export class LinkRenderLayer extends BaseRenderLayer {
     terminal: Terminal,
     linkifier2: ILinkifier2,
     coreBrowserService: ICoreBrowserService,
+    optionsService: IOptionsService,
     themeService: IThemeService
   ) {
-    super(terminal, container, 'link', zIndex, true, coreBrowserService, themeService);
+    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)));

src/browser/renderer/shared/CharAtlasCache.ts

@@ -4,7 +4,7 @@
  */
 
 import { TextureAtlas } from 'browser/renderer/shared/TextureAtlas';
-import { Terminal } from 'xterm';
+import { ITerminalOptions, Terminal } from 'xterm';
 import { ITerminal, ReadonlyColorSet } from 'browser/Types';
 import { ICharAtlasConfig, ITextureAtlas } from 'browser/renderer/shared/Types';
 import { generateConfig, configEquals } from 'browser/renderer/shared/CharAtlasUtils';
@@ -22,19 +22,18 @@ const charAtlasCache: ITextureAtlasCacheEntry[] = [];
 /**
  * Acquires a char atlas, either generating a new one or returning an existing
  * one that is in use by another terminal.
- * @param terminal The terminal.
- * @param colors The colors to use.
  */
 export function acquireTextureAtlas(
   terminal: Terminal,
+  options: Required<ITerminalOptions>,
   colors: ReadonlyColorSet,
   deviceCellWidth: number,
   deviceCellHeight: number,
   deviceCharWidth: number,
   deviceCharHeight: number,
   devicePixelRatio: number
 ): ITextureAtlas {
-  const newConfig = generateConfig(deviceCellWidth, deviceCellHeight, deviceCharWidth, deviceCharHeight, terminal, colors, devicePixelRatio);
+  const newConfig = generateConfig(deviceCellWidth, deviceCellHeight, deviceCharWidth, deviceCharHeight, options, colors, devicePixelRatio);
 
   // Check to see if the terminal already owns this config
   for (let i = 0; i < charAtlasCache.length; i++) {

src/browser/renderer/shared/CharAtlasUtils.ts

@@ -5,11 +5,11 @@
 
 import { ICharAtlasConfig } from './Types';
 import { Attributes } from 'common/buffer/Constants';
-import { Terminal } from 'xterm';
+import { ITerminalOptions } from 'xterm';
 import { IColorSet, ReadonlyColorSet } from 'browser/Types';
 import { NULL_COLOR } from 'common/Color';
 
-export function generateConfig(deviceCellWidth: number, deviceCellHeight: number, deviceCharWidth: number, deviceCharHeight: number, terminal: Terminal, colors: ReadonlyColorSet, devicePixelRatio: number): ICharAtlasConfig {
+export function generateConfig(deviceCellWidth: number, deviceCellHeight: number, deviceCharWidth: number, deviceCharHeight: number, options: Required<ITerminalOptions>, colors: ReadonlyColorSet, devicePixelRatio: number): ICharAtlasConfig {
   // null out some fields that don't matter
   const clonedColors: IColorSet = {
     foreground: colors.foreground,
@@ -27,21 +27,21 @@ export function generateConfig(deviceCellWidth: number, deviceCellHeight: number
     contrastCache: colors.contrastCache
   };
   return {
-    customGlyphs: terminal.options.customGlyphs,
+    customGlyphs: options.customGlyphs,
     devicePixelRatio,
-    letterSpacing: terminal.options.letterSpacing,
-    lineHeight: terminal.options.lineHeight,
+    letterSpacing: options.letterSpacing,
+    lineHeight: options.lineHeight,
     deviceCellWidth: deviceCellWidth,
     deviceCellHeight: deviceCellHeight,
     deviceCharWidth: deviceCharWidth,
     deviceCharHeight: deviceCharHeight,
-    fontFamily: terminal.options.fontFamily,
-    fontSize: terminal.options.fontSize,
-    fontWeight: terminal.options.fontWeight,
-    fontWeightBold: terminal.options.fontWeightBold,
-    allowTransparency: terminal.options.allowTransparency,
-    drawBoldTextInBrightColors: terminal.options.drawBoldTextInBrightColors,
-    minimumContrastRatio: terminal.options.minimumContrastRatio,
+    fontFamily: options.fontFamily,
+    fontSize: options.fontSize,
+    fontWeight: options.fontWeight,
+    fontWeightBold: options.fontWeightBold,
+    allowTransparency: options.allowTransparency,
+    drawBoldTextInBrightColors: options.drawBoldTextInBrightColors,
+    minimumContrastRatio: options.minimumContrastRatio,
     colors: clonedColors
   };
 }

typings/xterm-headless.d.ts

@@ -537,11 +537,6 @@ declare module 'xterm-headless' {
      * ```typescript
      * console.log(terminal.options.fontSize);
      * ```
-     */
-    get options(): Required<ITerminalOptions>;
-
-    /**
-     * Gets or sets the terminal options. This supports setting multiple options.
      *
      * @example Set a single option
      * ```typescript
@@ -552,11 +547,11 @@ declare module 'xterm-headless' {
      * ```typescript
      * terminal.options = {
      *   fontSize: 12,
-     *   fontFamily: 'Arial',
+     *   fontFamily: 'Courier New',
      * };
      * ```
      */
-    set options(options: ITerminalOptions);
+    options: ITerminalOptions;
 
     /**
      * Natural language strings that can be localized.

typings/xterm.d.ts

@@ -710,29 +710,24 @@ declare module 'xterm' {
      * Gets or sets the terminal options. This supports setting multiple options.
      *
      * @example Get a single option
-     * ```typescript
+     * ```ts
      * console.log(terminal.options.fontSize);
      * ```
-     */
-    get options(): Required<ITerminalOptions>;
-
-    /**
-     * Gets or sets the terminal options. This supports setting multiple options.
      *
      * @example Set a single option
-     * ```typescript
+     * ```ts
      * terminal.options.fontSize = 12;
      * ```
      *
      * @example Set multiple options
-     * ```typescript
+     * ```ts
      * terminal.options = {
      *   fontSize: 12,
-     *   fontFamily: 'Arial',
+     *   fontFamily: 'Courier New'
      * };
      * ```
      */
-    set options(options: ITerminalOptions);
+    options: ITerminalOptions;
 
     /**
      * Natural language strings that can be localized.