@xterm/xterm 5.4.0-beta.1

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

@@ -0,0 +1,137 @@
+import { ISelectionRenderModel } from 'browser/renderer/shared/Types';
+import { ICoreBrowserService, IThemeService } from 'browser/services/Services';
+import { ReadonlyColorSet } from 'browser/Types';
+import { Attributes, BgFlags, FgFlags } from 'common/buffer/Constants';
+import { IDecorationService } from 'common/services/Services';
+import { ICellData } from 'common/Types';
+import { Terminal } from '@xterm/xterm';
+
+// Work variables to avoid garbage collection
+let $fg = 0;
+let $bg = 0;
+let $hasFg = false;
+let $hasBg = false;
+let $isSelected = false;
+let $colors: ReadonlyColorSet | undefined;
+
+export class CellColorResolver {
+  /**
+   * The shared result of the {@link resolve} call. This is only safe to use immediately after as
+   * any other calls will share object.
+   */
+  public readonly result: { fg: number, bg: number, ext: number } = {
+    fg: 0,
+    bg: 0,
+    ext: 0
+  };
+
+  constructor(
+    private readonly _terminal: Terminal,
+    private readonly _selectionRenderModel: ISelectionRenderModel,
+    private readonly _decorationService: IDecorationService,
+    private readonly _coreBrowserService: ICoreBrowserService,
+    private readonly _themeService: IThemeService
+  ) {
+  }
+
+  /**
+   * Resolves colors for the cell, putting the result into the shared {@link result}. This resolves
+   * overrides, inverse and selection for the cell which can then be used to feed into the renderer.
+   */
+  public resolve(cell: ICellData, x: number, y: number): void {
+    this.result.bg = cell.bg;
+    this.result.fg = cell.fg;
+    this.result.ext = cell.bg & BgFlags.HAS_EXTENDED ? cell.extended.ext : 0;
+    // Get any foreground/background overrides, this happens on the model to avoid spreading
+    // override logic throughout the different sub-renderers
+
+    // Reset overrides work variables
+    $bg = 0;
+    $fg = 0;
+    $hasBg = false;
+    $hasFg = false;
+    $isSelected = false;
+    $colors = this._themeService.colors;
+
+    // Apply decorations on the bottom layer
+    this._decorationService.forEachDecorationAtCell(x, y, 'bottom', d => {
+      if (d.backgroundColorRGB) {
+        $bg = d.backgroundColorRGB.rgba >> 8 & 0xFFFFFF;
+        $hasBg = true;
+      }
+      if (d.foregroundColorRGB) {
+        $fg = d.foregroundColorRGB.rgba >> 8 & 0xFFFFFF;
+        $hasFg = true;
+      }
+    });
+
+    // Apply the selection color if needed
+    $isSelected = this._selectionRenderModel.isCellSelected(this._terminal, x, y);
+    if ($isSelected) {
+      $bg = (this._coreBrowserService.isFocused ? $colors.selectionBackgroundOpaque : $colors.selectionInactiveBackgroundOpaque).rgba >> 8 & 0xFFFFFF;
+      $hasBg = true;
+      if ($colors.selectionForeground) {
+        $fg = $colors.selectionForeground.rgba >> 8 & 0xFFFFFF;
+        $hasFg = true;
+      }
+    }
+
+    // Apply decorations on the top layer
+    this._decorationService.forEachDecorationAtCell(x, y, 'top', d => {
+      if (d.backgroundColorRGB) {
+        $bg = d.backgroundColorRGB.rgba >> 8 & 0xFFFFFF;
+        $hasBg = true;
+      }
+      if (d.foregroundColorRGB) {
+        $fg = d.foregroundColorRGB.rgba >> 8 & 0xFFFFFF;
+        $hasFg = true;
+      }
+    });
+
+    // Convert any overrides from rgba to the fg/bg packed format. This resolves the inverse flag
+    // ahead of time in order to use the correct cache key
+    if ($hasBg) {
+      if ($isSelected) {
+        // Non-RGB attributes from model + force non-dim + override + force RGB color mode
+        $bg = (cell.bg & ~Attributes.RGB_MASK & ~BgFlags.DIM) | $bg | Attributes.CM_RGB;
+      } else {
+        // Non-RGB attributes from model + override + force RGB color mode
+        $bg = (cell.bg & ~Attributes.RGB_MASK) | $bg | Attributes.CM_RGB;
+      }
+    }
+    if ($hasFg) {
+      // Non-RGB attributes from model + force disable inverse + override + force RGB color mode
+      $fg = (cell.fg & ~Attributes.RGB_MASK & ~FgFlags.INVERSE) | $fg | Attributes.CM_RGB;
+    }
+
+    // Handle case where inverse was specified by only one of bg override or fg override was set,
+    // resolving the other inverse color and setting the inverse flag if needed.
+    if (this.result.fg & FgFlags.INVERSE) {
+      if ($hasBg && !$hasFg) {
+        // Resolve bg color type (default color has a different meaning in fg vs bg)
+        if ((this.result.bg & Attributes.CM_MASK) === Attributes.CM_DEFAULT) {
+          $fg = (this.result.fg & ~(Attributes.RGB_MASK | FgFlags.INVERSE | Attributes.CM_MASK)) | (($colors.background.rgba >> 8 & 0xFFFFFF) & Attributes.RGB_MASK) | Attributes.CM_RGB;
+        } else {
+          $fg = (this.result.fg & ~(Attributes.RGB_MASK | FgFlags.INVERSE | Attributes.CM_MASK)) | this.result.bg & (Attributes.RGB_MASK | Attributes.CM_MASK);
+        }
+        $hasFg = true;
+      }
+      if (!$hasBg && $hasFg) {
+        // Resolve bg color type (default color has a different meaning in fg vs bg)
+        if ((this.result.fg & Attributes.CM_MASK) === Attributes.CM_DEFAULT) {
+          $bg = (this.result.bg & ~(Attributes.RGB_MASK | Attributes.CM_MASK)) | (($colors.foreground.rgba >> 8 & 0xFFFFFF) & Attributes.RGB_MASK) | Attributes.CM_RGB;
+        } else {
+          $bg = (this.result.bg & ~(Attributes.RGB_MASK | Attributes.CM_MASK)) | this.result.fg & (Attributes.RGB_MASK | Attributes.CM_MASK);
+        }
+        $hasBg = true;
+      }
+    }
+
+    // Release object
+    $colors = undefined;
+
+    // Use the override if it exists
+    this.result.bg = $hasBg ? $bg : this.result.bg;
+    this.result.fg = $hasFg ? $fg : this.result.fg;
+  }
+}

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

@@ -0,0 +1,96 @@
+/**
+ * Copyright (c) 2017 The xterm.js authors. All rights reserved.
+ * @license MIT
+ */
+
+import { TextureAtlas } from 'browser/renderer/shared/TextureAtlas';
+import { ITerminalOptions, Terminal } from '@xterm/xterm';
+import { ITerminal, ReadonlyColorSet } from 'browser/Types';
+import { ICharAtlasConfig, ITextureAtlas } from 'browser/renderer/shared/Types';
+import { generateConfig, configEquals } from 'browser/renderer/shared/CharAtlasUtils';
+
+interface ITextureAtlasCacheEntry {
+  atlas: ITextureAtlas;
+  config: ICharAtlasConfig;
+  // N.B. This implementation potentially holds onto copies of the terminal forever, so
+  // this may cause memory leaks.
+  ownedBy: Terminal[];
+}
+
+const charAtlasCache: ITextureAtlasCacheEntry[] = [];
+
+/**
+ * Acquires a char atlas, either generating a new one or returning an existing
+ * one that is in use by another terminal.
+ */
+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, options, colors, devicePixelRatio);
+
+  // Check to see if the terminal already owns this config
+  for (let i = 0; i < charAtlasCache.length; i++) {
+    const entry = charAtlasCache[i];
+    const ownedByIndex = entry.ownedBy.indexOf(terminal);
+    if (ownedByIndex >= 0) {
+      if (configEquals(entry.config, newConfig)) {
+        return entry.atlas;
+      }
+      // The configs differ, release the terminal from the entry
+      if (entry.ownedBy.length === 1) {
+        entry.atlas.dispose();
+        charAtlasCache.splice(i, 1);
+      } else {
+        entry.ownedBy.splice(ownedByIndex, 1);
+      }
+      break;
+    }
+  }
+
+  // Try match a char atlas from the cache
+  for (let i = 0; i < charAtlasCache.length; i++) {
+    const entry = charAtlasCache[i];
+    if (configEquals(entry.config, newConfig)) {
+      // Add the terminal to the cache entry and return
+      entry.ownedBy.push(terminal);
+      return entry.atlas;
+    }
+  }
+
+  const core: ITerminal = (terminal as any)._core;
+  const newEntry: ITextureAtlasCacheEntry = {
+    atlas: new TextureAtlas(document, newConfig, core.unicodeService),
+    config: newConfig,
+    ownedBy: [terminal]
+  };
+  charAtlasCache.push(newEntry);
+  return newEntry.atlas;
+}
+
+/**
+ * Removes a terminal reference from the cache, allowing its memory to be freed.
+ * @param terminal The terminal to remove.
+ */
+export function removeTerminalFromCache(terminal: Terminal): void {
+  for (let i = 0; i < charAtlasCache.length; i++) {
+    const index = charAtlasCache[i].ownedBy.indexOf(terminal);
+    if (index !== -1) {
+      if (charAtlasCache[i].ownedBy.length === 1) {
+        // Remove the cache entry if it's the only terminal
+        charAtlasCache[i].atlas.dispose();
+        charAtlasCache.splice(i, 1);
+      } else {
+        // Remove the reference from the cache entry
+        charAtlasCache[i].ownedBy.splice(index, 1);
+      }
+      break;
+    }
+  }
+}

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

@@ -0,0 +1,75 @@
+/**
+ * Copyright (c) 2017 The xterm.js authors. All rights reserved.
+ * @license MIT
+ */
+
+import { ICharAtlasConfig } from './Types';
+import { Attributes } from 'common/buffer/Constants';
+import { ITerminalOptions } from '@xterm/xterm';
+import { IColorSet, ReadonlyColorSet } from 'browser/Types';
+import { NULL_COLOR } from 'common/Color';
+
+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,
+    background: colors.background,
+    cursor: NULL_COLOR,
+    cursorAccent: NULL_COLOR,
+    selectionForeground: NULL_COLOR,
+    selectionBackgroundTransparent: NULL_COLOR,
+    selectionBackgroundOpaque: NULL_COLOR,
+    selectionInactiveBackgroundTransparent: NULL_COLOR,
+    selectionInactiveBackgroundOpaque: NULL_COLOR,
+    // For the static char atlas, we only use the first 16 colors, but we need all 256 for the
+    // dynamic character atlas.
+    ansi: colors.ansi.slice(),
+    contrastCache: colors.contrastCache,
+    halfContrastCache: colors.halfContrastCache
+  };
+  return {
+    customGlyphs: options.customGlyphs,
+    devicePixelRatio,
+    letterSpacing: options.letterSpacing,
+    lineHeight: options.lineHeight,
+    deviceCellWidth: deviceCellWidth,
+    deviceCellHeight: deviceCellHeight,
+    deviceCharWidth: deviceCharWidth,
+    deviceCharHeight: deviceCharHeight,
+    fontFamily: options.fontFamily,
+    fontSize: options.fontSize,
+    fontWeight: options.fontWeight,
+    fontWeightBold: options.fontWeightBold,
+    allowTransparency: options.allowTransparency,
+    drawBoldTextInBrightColors: options.drawBoldTextInBrightColors,
+    minimumContrastRatio: options.minimumContrastRatio,
+    colors: clonedColors
+  };
+}
+
+export function configEquals(a: ICharAtlasConfig, b: ICharAtlasConfig): boolean {
+  for (let i = 0; i < a.colors.ansi.length; i++) {
+    if (a.colors.ansi[i].rgba !== b.colors.ansi[i].rgba) {
+      return false;
+    }
+  }
+  return a.devicePixelRatio === b.devicePixelRatio &&
+      a.customGlyphs === b.customGlyphs &&
+      a.lineHeight === b.lineHeight &&
+      a.letterSpacing === b.letterSpacing &&
+      a.fontFamily === b.fontFamily &&
+      a.fontSize === b.fontSize &&
+      a.fontWeight === b.fontWeight &&
+      a.fontWeightBold === b.fontWeightBold &&
+      a.allowTransparency === b.allowTransparency &&
+      a.deviceCharWidth === b.deviceCharWidth &&
+      a.deviceCharHeight === b.deviceCharHeight &&
+      a.drawBoldTextInBrightColors === b.drawBoldTextInBrightColors &&
+      a.minimumContrastRatio === b.minimumContrastRatio &&
+      a.colors.foreground.rgba === b.colors.foreground.rgba &&
+      a.colors.background.rgba === b.colors.background.rgba;
+}
+
+export function is256Color(colorCode: number): boolean {
+  return (colorCode & Attributes.CM_MASK) === Attributes.CM_P16 || (colorCode & Attributes.CM_MASK) === Attributes.CM_P256;
+}

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

@@ -0,0 +1,14 @@
+/**
+ * Copyright (c) 2017 The xterm.js authors. All rights reserved.
+ * @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/CursorBlinkStateManager.ts

@@ -0,0 +1,146 @@
+/**
+ * Copyright (c) 2017 The xterm.js authors. All rights reserved.
+ * @license MIT
+ */
+
+import { ICoreBrowserService } from 'browser/services/Services';
+
+/**
+ * The time between cursor blinks.
+ */
+const BLINK_INTERVAL = 600;
+
+export class CursorBlinkStateManager {
+  public isCursorVisible: boolean;
+
+  private _animationFrame: number | undefined;
+  private _blinkStartTimeout: number | undefined;
+  private _blinkInterval: number | undefined;
+
+  /**
+   * The time at which the animation frame was restarted, this is used on the
+   * next render to restart the timers so they don't need to restart the timers
+   * multiple times over a short period.
+   */
+  private _animationTimeRestarted: number | undefined;
+
+  constructor(
+    private _renderCallback: () => void,
+    private _coreBrowserService: ICoreBrowserService
+  ) {
+    this.isCursorVisible = true;
+    if (this._coreBrowserService.isFocused) {
+      this._restartInterval();
+    }
+  }
+
+  public get isPaused(): boolean { return !(this._blinkStartTimeout || this._blinkInterval); }
+
+  public dispose(): void {
+    if (this._blinkInterval) {
+      this._coreBrowserService.window.clearInterval(this._blinkInterval);
+      this._blinkInterval = undefined;
+    }
+    if (this._blinkStartTimeout) {
+      this._coreBrowserService.window.clearTimeout(this._blinkStartTimeout);
+      this._blinkStartTimeout = undefined;
+    }
+    if (this._animationFrame) {
+      this._coreBrowserService.window.cancelAnimationFrame(this._animationFrame);
+      this._animationFrame = undefined;
+    }
+  }
+
+  public restartBlinkAnimation(): void {
+    if (this.isPaused) {
+      return;
+    }
+    // Save a timestamp so that the restart can be done on the next interval
+    this._animationTimeRestarted = Date.now();
+    // Force a cursor render to ensure it's visible and in the correct position
+    this.isCursorVisible = true;
+    if (!this._animationFrame) {
+      this._animationFrame = this._coreBrowserService.window.requestAnimationFrame(() => {
+        this._renderCallback();
+        this._animationFrame = undefined;
+      });
+    }
+  }
+
+  private _restartInterval(timeToStart: number = BLINK_INTERVAL): void {
+    // Clear any existing interval
+    if (this._blinkInterval) {
+      this._coreBrowserService.window.clearInterval(this._blinkInterval);
+      this._blinkInterval = undefined;
+    }
+
+    // Setup the initial timeout which will hide the cursor, this is done before
+    // the regular interval is setup in order to support restarting the blink
+    // animation in a lightweight way (without thrashing clearInterval and
+    // setInterval).
+    this._blinkStartTimeout = this._coreBrowserService.window.setTimeout(() => {
+      // Check if another animation restart was requested while this was being
+      // started
+      if (this._animationTimeRestarted) {
+        const time = BLINK_INTERVAL - (Date.now() - this._animationTimeRestarted);
+        this._animationTimeRestarted = undefined;
+        if (time > 0) {
+          this._restartInterval(time);
+          return;
+        }
+      }
+
+      // Hide the cursor
+      this.isCursorVisible = false;
+      this._animationFrame = this._coreBrowserService.window.requestAnimationFrame(() => {
+        this._renderCallback();
+        this._animationFrame = undefined;
+      });
+
+      // Setup the blink interval
+      this._blinkInterval = this._coreBrowserService.window.setInterval(() => {
+        // Adjust the animation time if it was restarted
+        if (this._animationTimeRestarted) {
+          // calc time diff
+          // Make restart interval do a setTimeout initially?
+          const time = BLINK_INTERVAL - (Date.now() - this._animationTimeRestarted);
+          this._animationTimeRestarted = undefined;
+          this._restartInterval(time);
+          return;
+        }
+
+        // Invert visibility and render
+        this.isCursorVisible = !this.isCursorVisible;
+        this._animationFrame = this._coreBrowserService.window.requestAnimationFrame(() => {
+          this._renderCallback();
+          this._animationFrame = undefined;
+        });
+      }, BLINK_INTERVAL);
+    }, timeToStart);
+  }
+
+  public pause(): void {
+    this.isCursorVisible = true;
+    if (this._blinkInterval) {
+      this._coreBrowserService.window.clearInterval(this._blinkInterval);
+      this._blinkInterval = undefined;
+    }
+    if (this._blinkStartTimeout) {
+      this._coreBrowserService.window.clearTimeout(this._blinkStartTimeout);
+      this._blinkStartTimeout = undefined;
+    }
+    if (this._animationFrame) {
+      this._coreBrowserService.window.cancelAnimationFrame(this._animationFrame);
+      this._animationFrame = undefined;
+    }
+  }
+
+  public resume(): void {
+    // Clear out any existing timers just in case
+    this.pause();
+
+    this._animationTimeRestarted = undefined;
+    this._restartInterval();
+    this.restartBlinkAnimation();
+  }
+}