@xterm/xterm 5.6.0-beta.14 → 5.6.0-beta.141

package/src/browser/decorations/OverviewRulerRenderer.ts

@@ -4,10 +4,14 @@
  *--------------------------------------------------------------------------------------------*/
 
 import { ColorZoneStore, IColorZone, IColorZoneStore } from 'browser/decorations/ColorZoneStore';
-import { ICoreBrowserService, IRenderService } from 'browser/services/Services';
-import { Disposable, toDisposable } from 'common/Lifecycle';
+import { ICoreBrowserService, IRenderService, IThemeService } from 'browser/services/Services';
+import { Disposable, toDisposable } from 'vs/base/common/lifecycle';
 import { IBufferService, IDecorationService, IOptionsService } from 'common/services/Services';
 
+const enum Constants {
+  OVERVIEW_RULER_BORDER_WIDTH = 1
+}
+
 // Helper objects to avoid excessive calculation and garbage collection during rendering. These are
 // static values for each render and can be accessed using the decoration position as the key.
 const drawHeight = {
@@ -34,7 +38,7 @@ export class OverviewRulerRenderer extends Disposable {
   private readonly _ctx: CanvasRenderingContext2D;
   private readonly _colorZoneStore: IColorZoneStore = new ColorZoneStore();
   private get _width(): number {
-    return this._optionsService.options.overviewRulerWidth || 0;
+    return this._optionsService.options.overviewRuler?.width || 0;
   }
   private _animationFrame: number | undefined;
 
@@ -51,6 +55,7 @@ export class OverviewRulerRenderer extends Disposable {
     @IDecorationService private readonly _decorationService: IDecorationService,
     @IRenderService private readonly _renderService: IRenderService,
     @IOptionsService private readonly _optionsService: IOptionsService,
+    @IThemeService private readonly _themeService: IThemeService,
     @ICoreBrowserService private readonly _coreBrowserService: ICoreBrowserService
   ) {
     super();
@@ -58,68 +63,47 @@ export class OverviewRulerRenderer extends Disposable {
     this._canvas.classList.add('xterm-decoration-overview-ruler');
     this._refreshCanvasDimensions();
     this._viewportElement.parentElement?.insertBefore(this._canvas, this._viewportElement);
+    this._register(toDisposable(() => this._canvas?.remove()));
+
     const ctx = this._canvas.getContext('2d');
     if (!ctx) {
       throw new Error('Ctx cannot be null');
     } else {
       this._ctx = ctx;
     }
-    this._registerDecorationListeners();
-    this._registerBufferChangeListeners();
-    this._registerDimensionChangeListeners();
-    this.register(toDisposable(() => {
-      this._canvas?.remove();
-    }));
-  }
 
-  /**
-   * On decoration add or remove, redraw
-   */
-  private _registerDecorationListeners(): void {
-    this.register(this._decorationService.onDecorationRegistered(() => this._queueRefresh(undefined, true)));
-    this.register(this._decorationService.onDecorationRemoved(() => this._queueRefresh(undefined, true)));
-  }
+    this._register(this._decorationService.onDecorationRegistered(() => this._queueRefresh(undefined, true)));
+    this._register(this._decorationService.onDecorationRemoved(() => this._queueRefresh(undefined, true)));
 
-  /**
-   * On buffer change, redraw
-   * and hide the canvas if the alt buffer is active
-   */
-  private _registerBufferChangeListeners(): void {
-    this.register(this._renderService.onRenderedViewportChange(() => this._queueRefresh()));
-    this.register(this._bufferService.buffers.onBufferActivate(() => {
+    this._register(this._renderService.onRenderedViewportChange(() => this._queueRefresh()));
+    this._register(this._bufferService.buffers.onBufferActivate(() => {
       this._canvas!.style.display = this._bufferService.buffer === this._bufferService.buffers.alt ? 'none' : 'block';
     }));
-    this.register(this._bufferService.onScroll(() => {
+    this._register(this._bufferService.onScroll(() => {
       if (this._lastKnownBufferLength !== this._bufferService.buffers.normal.lines.length) {
         this._refreshDrawHeightConstants();
         this._refreshColorZonePadding();
       }
     }));
-  }
-  /**
-   * On dimension change, update canvas dimensions
-   * and then redraw
-   */
-  private _registerDimensionChangeListeners(): void {
-    // container height changed
-    this.register(this._renderService.onRender((): void => {
+
+    // Container height changed
+    this._register(this._renderService.onRender((): void => {
       if (!this._containerHeight || this._containerHeight !== this._screenElement.clientHeight) {
         this._queueRefresh(true);
         this._containerHeight = this._screenElement.clientHeight;
       }
     }));
-    // overview ruler width changed
-    this.register(this._optionsService.onSpecificOptionChange('overviewRulerWidth', () => this._queueRefresh(true)));
-    // device pixel ratio changed
-    this.register(this._coreBrowserService.onDprChange(() => this._queueRefresh(true)));
-    // set the canvas dimensions
+
+    this._register(this._coreBrowserService.onDprChange(() => this._queueRefresh(true)));
+    this._register(this._optionsService.onSpecificOptionChange('overviewRuler', () => this._queueRefresh(true)));
+    this._register(this._themeService.onChangeColors(() => this._queueRefresh()));
     this._queueRefresh(true);
   }
 
   private _refreshDrawConstants(): void {
     // width
-    const outerWidth = Math.floor(this._canvas.width / 3);
-    const innerWidth = Math.ceil(this._canvas.width / 3);
+    const outerWidth = Math.floor((this._canvas.width - Constants.OVERVIEW_RULER_BORDER_WIDTH) / 3);
+    const innerWidth = Math.ceil((this._canvas.width - Constants.OVERVIEW_RULER_BORDER_WIDTH) / 3);
     drawWidth.full = this._canvas.width;
     drawWidth.left = outerWidth;
     drawWidth.center = innerWidth;
@@ -127,10 +111,10 @@ export class OverviewRulerRenderer extends Disposable {
     // height
     this._refreshDrawHeightConstants();
     // x
-    drawX.full = 0;
-    drawX.left = 0;
-    drawX.center = drawWidth.left;
-    drawX.right = drawWidth.left + drawWidth.center;
+    drawX.full = Constants.OVERVIEW_RULER_BORDER_WIDTH;
+    drawX.left = Constants.OVERVIEW_RULER_BORDER_WIDTH;
+    drawX.center = Constants.OVERVIEW_RULER_BORDER_WIDTH + drawWidth.left;
+    drawX.right = Constants.OVERVIEW_RULER_BORDER_WIDTH + drawWidth.left + drawWidth.center;
   }
 
   private _refreshDrawHeightConstants(): void {
@@ -173,6 +157,7 @@ export class OverviewRulerRenderer extends Disposable {
       this._colorZoneStore.addDecoration(decoration);
     }
     this._ctx.lineWidth = 1;
+    this._renderRulerOutline();
     const zones = this._colorZoneStore.zones;
     for (const zone of zones) {
       if (zone.position !== 'full') {
@@ -188,6 +173,17 @@ export class OverviewRulerRenderer extends Disposable {
     this._shouldUpdateAnchor = false;
   }
 
+  private _renderRulerOutline(): void {
+    this._ctx.fillStyle = this._themeService.colors.overviewRulerBorder.css;
+    this._ctx.fillRect(0, 0, Constants.OVERVIEW_RULER_BORDER_WIDTH, this._canvas.height);
+    if (this._optionsService.rawOptions.overviewRuler.showTopBorder) {
+      this._ctx.fillRect(Constants.OVERVIEW_RULER_BORDER_WIDTH, 0, this._canvas.width - Constants.OVERVIEW_RULER_BORDER_WIDTH, Constants.OVERVIEW_RULER_BORDER_WIDTH);
+    }
+    if (this._optionsService.rawOptions.overviewRuler.showBottomBorder) {
+      this._ctx.fillRect(Constants.OVERVIEW_RULER_BORDER_WIDTH, this._canvas.height - Constants.OVERVIEW_RULER_BORDER_WIDTH, this._canvas.width - Constants.OVERVIEW_RULER_BORDER_WIDTH, this._canvas.height);
+    }
+  }
+
   private _renderColorZone(zone: IColorZone): void {
     this._ctx.fillStyle = zone.color;
     this._ctx.fillRect(

package/src/browser/input/CompositionHelper.ts

@@ -93,7 +93,8 @@ export class CompositionHelper {
    */
   public keydown(ev: KeyboardEvent): boolean {
     if (this._isComposing || this._isSendingComposition) {
-      if (ev.keyCode === 229) {
+      if (ev.keyCode === 20 || ev.keyCode === 229) {
+        // 20 is CapsLock, 229 is Enter
         // Continue composing if the keyCode is the "composition character"
         return false;
       }

package/src/browser/input/MoveToCell.ts

@@ -199,7 +199,9 @@ function bufferLine(
   let currentRow = startRow;
   let bufferStr = '';
 
-  while (currentCol !== endCol || currentRow !== endRow) {
+  while ((currentCol !== endCol || currentRow !== endRow) &&
+         currentRow >= 0 &&
+         currentRow < bufferService.buffer.lines.length) {
     currentCol += forward ? 1 : -1;
 
     if (forward && currentCol > bufferService.cols - 1) {

package/src/browser/public/Terminal.ts

@@ -4,16 +4,16 @@
  */
 
 import * as Strings from 'browser/LocalizableStrings';
-import { Terminal as TerminalCore } from 'browser/Terminal';
+import { CoreBrowserTerminal as TerminalCore } from 'browser/CoreBrowserTerminal';
 import { IBufferRange, ITerminal } from 'browser/Types';
-import { IEvent } from 'common/EventEmitter';
-import { Disposable } from 'common/Lifecycle';
+import { Disposable } from 'vs/base/common/lifecycle';
 import { ITerminalOptions } from 'common/Types';
 import { AddonManager } from 'common/public/AddonManager';
 import { BufferNamespaceApi } from 'common/public/BufferNamespaceApi';
 import { ParserApi } from 'common/public/ParserApi';
 import { UnicodeApi } from 'common/public/UnicodeApi';
 import { IBufferNamespace as IBufferNamespaceApi, IDecoration, IDecorationOptions, IDisposable, ILinkProvider, ILocalizableStrings, IMarker, IModes, IParser, ITerminalAddon, Terminal as ITerminalApi, ITerminalInitOnlyOptions, IUnicodeHandling } from '@xterm/xterm';
+import type { Event } from 'vs/base/common/event';
 
 /**
  * The set of options that only have an effect when set in the Terminal constructor.
@@ -32,8 +32,8 @@ export class Terminal extends Disposable implements ITerminalApi {
   constructor(options?: ITerminalOptions & ITerminalInitOnlyOptions) {
     super();
 
-    this._core = this.register(new TerminalCore(options));
-    this._addonManager = this.register(new AddonManager());
+    this._core = this._register(new TerminalCore(options));
+    this._addonManager = this._register(new AddonManager());
 
     this._publicOptions = { ... this._core.options };
     const getter = (propName: string): any => {
@@ -68,18 +68,18 @@ export class Terminal extends Disposable implements ITerminalApi {
     }
   }
 
-  public get onBell(): IEvent<void> { return this._core.onBell; }
-  public get onBinary(): IEvent<string> { return this._core.onBinary; }
-  public get onCursorMove(): IEvent<void> { return this._core.onCursorMove; }
-  public get onData(): IEvent<string> { return this._core.onData; }
-  public get onKey(): IEvent<{ key: string, domEvent: KeyboardEvent }> { return this._core.onKey; }
-  public get onLineFeed(): IEvent<void> { return this._core.onLineFeed; }
-  public get onRender(): IEvent<{ start: number, end: number }> { return this._core.onRender; }
-  public get onResize(): IEvent<{ cols: number, rows: number }> { return this._core.onResize; }
-  public get onScroll(): IEvent<number> { return this._core.onScroll; }
-  public get onSelectionChange(): IEvent<void> { return this._core.onSelectionChange; }
-  public get onTitleChange(): IEvent<string> { return this._core.onTitleChange; }
-  public get onWriteParsed(): IEvent<void> { return this._core.onWriteParsed; }
+  public get onBell(): Event<void> { return this._core.onBell; }
+  public get onBinary(): Event<string> { return this._core.onBinary; }
+  public get onCursorMove(): Event<void> { return this._core.onCursorMove; }
+  public get onData(): Event<string> { return this._core.onData; }
+  public get onKey(): Event<{ key: string, domEvent: KeyboardEvent }> { return this._core.onKey; }
+  public get onLineFeed(): Event<void> { return this._core.onLineFeed; }
+  public get onRender(): Event<{ start: number, end: number }> { return this._core.onRender; }
+  public get onResize(): Event<{ cols: number, rows: number }> { return this._core.onResize; }
+  public get onScroll(): Event<number> { return this._core.onScroll; }
+  public get onSelectionChange(): Event<void> { return this._core.onSelectionChange; }
+  public get onTitleChange(): Event<string> { return this._core.onTitleChange; }
+  public get onWriteParsed(): Event<void> { return this._core.onWriteParsed; }
 
   public get element(): HTMLElement | undefined { return this._core.element; }
   public get parser(): IParser {
@@ -97,7 +97,7 @@ export class Terminal extends Disposable implements ITerminalApi {
   public get cols(): number { return this._core.cols; }
   public get buffer(): IBufferNamespaceApi {
     if (!this._buffer) {
-      this._buffer = this.register(new BufferNamespaceApi(this._core));
+      this._buffer = this._register(new BufferNamespaceApi(this._core));
     }
     return this._buffer;
   }
@@ -123,6 +123,7 @@ export class Terminal extends Disposable implements ITerminalApi {
       originMode: m.origin,
       reverseWraparoundMode: m.reverseWraparound,
       sendFocusMode: m.sendFocus,
+      synchronizedOutputMode: m.synchronizedOutput,
       wraparoundMode: m.wraparound
     };
   }
@@ -247,7 +248,13 @@ export class Terminal extends Disposable implements ITerminalApi {
     this._addonManager.loadAddon(this, addon);
   }
   public static get strings(): ILocalizableStrings {
-    return Strings;
+    // A wrapper is required here because esbuild prevents setting an `export let`
+    return {
+      get promptLabel(): string { return Strings.promptLabel.get(); },
+      set promptLabel(value: string) { Strings.promptLabel.set(value); },
+      get tooMuchOutput(): string { return Strings.tooMuchOutput.get(); },
+      set tooMuchOutput(value: string) { Strings.tooMuchOutput.set(value); }
+    };
   }
 
   private _verifyIntegers(...values: number[]): void {

package/src/browser/renderer/dom/DomRenderer.ts

@@ -12,9 +12,9 @@ import { IRenderDimensions, IRenderer, IRequestRedrawEvent, ISelectionRenderMode
 import { ICharSizeService, ICoreBrowserService, IThemeService } from 'browser/services/Services';
 import { ILinkifier2, ILinkifierEvent, ITerminal, ReadonlyColorSet } from 'browser/Types';
 import { color } from 'common/Color';
-import { EventEmitter } from 'common/EventEmitter';
-import { Disposable, toDisposable } from 'common/Lifecycle';
-import { IBufferService, IInstantiationService, IOptionsService } from 'common/services/Services';
+import { Disposable, toDisposable } from 'vs/base/common/lifecycle';
+import { IBufferService, ICoreService, IInstantiationService, IOptionsService } from 'common/services/Services';
+import { Emitter } from 'vs/base/common/event';
 
 
 const TERMINAL_CLASS_PREFIX = 'xterm-dom-renderer-owner-';
@@ -27,9 +27,9 @@ const SELECTION_CLASS = 'xterm-selection';
 let nextTerminalId = 1;
 
 /**
- * A fallback renderer for when canvas is slow. This is not meant to be
- * particularly fast or feature complete, more just stable and usable for when
- * canvas is not an option.
+ * The standard renderer and fallback for when the webgl addon is slow. This is not meant to be
+ * particularly fast and will even lack some features such as custom glyphs, hoever this is more
+ * reliable as webgl may not work on some machines.
  */
 export class DomRenderer extends Disposable implements IRenderer {
   private _rowFactory: DomRendererRowFactory;
@@ -45,7 +45,7 @@ export class DomRenderer extends Disposable implements IRenderer {
 
   public dimensions: IRenderDimensions;
 
-  public readonly onRequestRedraw = this.register(new EventEmitter<IRequestRedrawEvent>()).event;
+  public readonly onRequestRedraw = this._register(new Emitter<IRequestRedrawEvent>()).event;
 
   constructor(
     private readonly _terminal: ITerminal,
@@ -59,6 +59,7 @@ export class DomRenderer extends Disposable implements IRenderer {
     @ICharSizeService private readonly _charSizeService: ICharSizeService,
     @IOptionsService private readonly _optionsService: IOptionsService,
     @IBufferService private readonly _bufferService: IBufferService,
+    @ICoreService private readonly _coreService: ICoreService,
     @ICoreBrowserService private readonly _coreBrowserService: ICoreBrowserService,
     @IThemeService private readonly _themeService: IThemeService
   ) {
@@ -74,9 +75,9 @@ export class DomRenderer extends Disposable implements IRenderer {
 
     this.dimensions = createRenderDimensions();
     this._updateDimensions();
-    this.register(this._optionsService.onOptionChange(() => this._handleOptionsChanged()));
+    this._register(this._optionsService.onOptionChange(() => this._handleOptionsChanged()));
 
-    this.register(this._themeService.onChangeColors(e => this._injectCss(e)));
+    this._register(this._themeService.onChangeColors(e => this._injectCss(e)));
     this._injectCss(this._themeService.colors);
 
     this._rowFactory = instantiationService.createInstance(DomRendererRowFactory, document);
@@ -85,10 +86,10 @@ export class DomRenderer extends Disposable implements IRenderer {
     this._screenElement.appendChild(this._rowContainer);
     this._screenElement.appendChild(this._selectionContainer);
 
-    this.register(this._linkifier2.onShowLinkUnderline(e => this._handleLinkHover(e)));
-    this.register(this._linkifier2.onHideLinkUnderline(e => this._handleLinkLeave(e)));
+    this._register(this._linkifier2.onShowLinkUnderline(e => this._handleLinkHover(e)));
+    this._register(this._linkifier2.onHideLinkUnderline(e => this._handleLinkLeave(e)));
 
-    this.register(toDisposable(() => {
+    this._register(toDisposable(() => {
       this._element.classList.remove(TERMINAL_CLASS_PREFIX + this._terminalClass);
 
       // Outside influences such as React unmounts may manipulate the DOM before our disposal.
@@ -161,6 +162,10 @@ export class DomRenderer extends Disposable implements IRenderer {
     // Base CSS
     let styles =
       `${this._terminalSelector} .${ROW_CONTAINER_CLASS} {` +
+      // Disabling pointer events circumvents a browser behavior that prevents `click` events from
+      // being delivered if the target element is replaced during the click. This happened due to
+      // refresh() being called during the mousedown handler to start a selection.
+      ` pointer-events: none;` +
       ` color: ${colors.foreground.css};` +
       ` font-family: ${this._optionsService.rawOptions.fontFamily};` +
       ` font-size: ${this._optionsService.rawOptions.fontSize}px;` +
@@ -437,8 +442,8 @@ export class DomRenderer extends Disposable implements IRenderer {
     const buffer = this._bufferService.buffer;
     const cursorAbsoluteY = buffer.ybase + buffer.y;
     const cursorX = Math.min(buffer.x, this._bufferService.cols - 1);
-    const cursorBlink = this._optionsService.rawOptions.cursorBlink;
-    const cursorStyle = this._optionsService.rawOptions.cursorStyle;
+    const cursorBlink = this._coreService.decPrivateModes.cursorBlink ?? this._optionsService.rawOptions.cursorBlink;
+    const cursorStyle = this._coreService.decPrivateModes.cursorStyle ?? this._optionsService.rawOptions.cursorStyle;
     const cursorInactiveStyle = this._optionsService.rawOptions.cursorInactiveStyle;
 
     for (let y = start; y <= end; y++) {

package/src/browser/renderer/dom/DomRendererRowFactory.ts

@@ -84,6 +84,7 @@ export class DomRendererRowFactory {
     let charElement: HTMLSpanElement | undefined;
     let cellAmount = 0;
     let text = '';
+    let i = 0;
     let oldBg = 0;
     let oldFg = 0;
     let oldExt = 0;
@@ -91,6 +92,7 @@ export class DomRendererRowFactory {
     let oldSpacing = 0;
     let oldIsInSelection: boolean = false;
     let spacing = 0;
+    let skipJoinedCheckUntilX = 0;
     const classes: string[] = [];
 
     const hasHover = linkStart !== -1 && linkEnd !== -1;
@@ -106,29 +108,46 @@ export class DomRendererRowFactory {
 
       // If true, indicates that the current character(s) to draw were joined.
       let 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.
+      let isValidJoinRange = (x >= skipJoinedCheckUntilX);
+
       let 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.
       let cell = this._workCell;
-      if (joinedRanges.length > 0 && x === joinedRanges[0][0]) {
-        isJoined = true;
+      if (joinedRanges.length > 0 && x === joinedRanges[0][0] && isValidJoinRange) {
         const range = joinedRanges.shift()!;
+        // 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._isCellInSelection(range[0], row);
+        for (i = range[0] + 1; i < range[1]; i++) {
+          isValidJoinRange &&= (firstSelectionState === this._isCellInSelection(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(
+            this._workCell,
+            lineData.translateToString(true, range[0], range[1]),
+            range[1] - range[0]
+          );
 
-        // 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(
-          this._workCell,
-          lineData.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;
+          // Skip over the cells occupied by this range in the loop
+          lastCharX = range[1] - 1;
 
-        // Recalculate width
-        width = cell.getWidth();
+          // Recalculate width
+          width = cell.getWidth();
+        }
       }
 
       const isInSelection = this._isCellInSelection(x, row);
@@ -178,6 +197,7 @@ export class DomRendererRowFactory {
           && !isCursorCell
           && !isJoined
           && !isDecorated
+          && isValidJoinRange
         ) {
           // no span alterations, thus only account chars skipping all code below
           if (cell.isInvisible()) {
@@ -435,7 +455,7 @@ export class DomRendererRowFactory {
       }
 
       // exclude conditions for cell merging - never merge these
-      if (!isCursorCell && !isJoined && !isDecorated) {
+      if (!isCursorCell && !isJoined && !isDecorated && isValidJoinRange) {
         cellAmount++;
       } else {
         charElement.textContent = text;

package/src/browser/renderer/shared/Constants.ts

@@ -3,12 +3,4 @@
  * @license MIT
  */
 
-import { isFirefox, isLegacyEdge } from 'common/Platform';
-
 export const INVERTED_DEFAULT_COLOR = 257;
-
-export const DIM_OPACITY = 0.5;
-// The text baseline is set conditionally by browser. Using 'ideographic' for Firefox or Legacy Edge
-// would result in truncated text (Issue 3353). Using 'bottom' for Chrome would result in slightly
-// unaligned Powerline fonts (PR 3356#issuecomment-850928179).
-export const TEXT_BASELINE: CanvasTextBaseline = isFirefox || isLegacyEdge ? 'bottom' : 'ideographic';

package/src/browser/renderer/shared/Types.ts

@@ -0,0 +1,84 @@
+/**
+ * Copyright (c) 2017 The xterm.js authors. All rights reserved.
+ * @license MIT
+ */
+
+import { Terminal } from '@xterm/xterm';
+import { ITerminal } from 'browser/Types';
+import { IDisposable } from 'common/Types';
+import type { Event } from 'vs/base/common/event';
+
+export interface IDimensions {
+  width: number;
+  height: number;
+}
+
+export interface IOffset {
+  top: number;
+  left: number;
+}
+
+export interface IRenderDimensions {
+  /**
+   * Dimensions measured in CSS pixels (ie. device pixels / device pixel ratio).
+   */
+  css: {
+    canvas: IDimensions;
+    cell: IDimensions;
+  };
+  /**
+   * Dimensions measured in actual pixels as rendered to the device.
+   */
+  device: {
+    canvas: IDimensions;
+    cell: IDimensions;
+    char: IDimensions & IOffset;
+  };
+}
+
+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: Event<IRequestRedrawEvent>;
+
+  dispose(): void;
+  handleDevicePixelRatioChange(): void;
+  handleResize(cols: number, rows: number): void;
+  handleCharSizeChanged(): void;
+  handleBlur(): void;
+  handleFocus(): void;
+  handleSelectionChanged(start: [number, number] | undefined, end: [number, number] | undefined, columnSelectMode: boolean): void;
+  handleCursorMove(): void;
+  clear(): void;
+  renderRows(start: number, end: number): void;
+  clearTextureAtlas?(): void;
+}
+
+export interface ISelectionRenderModel {
+  readonly hasSelection: boolean;
+  readonly columnSelectMode: boolean;
+  readonly viewportStartRow: number;
+  readonly viewportEndRow: number;
+  readonly viewportCappedStartRow: number;
+  readonly viewportCappedEndRow: number;
+  readonly startCol: number;
+  readonly endCol: number;
+  readonly selectionStart: [number, number] | undefined;
+  readonly selectionEnd: [number, number] | undefined;
+  clear(): void;
+  update(terminal: ITerminal, start: [number, number] | undefined, end: [number, number] | undefined, columnSelectMode?: boolean): void;
+  isCellSelected(terminal: Terminal, x: number, y: number): boolean;
+}

package/src/browser/services/CharSizeService.ts

@@ -4,9 +4,9 @@
  */
 
 import { IOptionsService } from 'common/services/Services';
-import { EventEmitter } from 'common/EventEmitter';
 import { ICharSizeService } from 'browser/services/Services';
-import { Disposable } from 'common/Lifecycle';
+import { Disposable } from 'vs/base/common/lifecycle';
+import { Emitter } from 'vs/base/common/event';
 
 export class CharSizeService extends Disposable implements ICharSizeService {
   public serviceBrand: undefined;
@@ -17,7 +17,7 @@ export class CharSizeService extends Disposable implements ICharSizeService {
 
   public get hasValidSize(): boolean { return this.width > 0 && this.height > 0; }
 
-  private readonly _onCharSizeChange = this.register(new EventEmitter<void>());
+  private readonly _onCharSizeChange = this._register(new Emitter<void>());
   public readonly onCharSizeChange = this._onCharSizeChange.event;
 
   constructor(
@@ -27,11 +27,11 @@ export class CharSizeService extends Disposable implements ICharSizeService {
   ) {
     super();
     try {
-      this._measureStrategy = this.register(new TextMetricsMeasureStrategy(this._optionsService));
+      this._measureStrategy = this._register(new TextMetricsMeasureStrategy(this._optionsService));
     } catch {
-      this._measureStrategy = this.register(new DomMeasureStrategy(document, parentElement, this._optionsService));
+      this._measureStrategy = this._register(new DomMeasureStrategy(document, parentElement, this._optionsService));
     }
-    this.register(this._optionsService.onMultipleOptionChange(['fontFamily', 'fontSize'], () => this.measure()));
+    this._register(this._optionsService.onMultipleOptionChange(['fontFamily', 'fontSize'], () => this.measure()));
   }
 
   public measure(): void {