@xterm/xterm 5.6.0-beta.91 → 5.6.0-beta.93

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@xterm/xterm",
   "description": "Full xterm terminal, in your browser",
-  "version": "5.6.0-beta.91",
+  "version": "5.6.0-beta.93",
   "main": "lib/xterm.js",
   "module": "lib/xterm.mjs",
   "style": "css/xterm.css",
@@ -107,5 +107,5 @@
     "ws": "^8.2.3",
     "xterm-benchmark": "^0.3.1"
   },
-  "commit": "ef4a3fd933c003df868b70d963d73486973f084b"
+  "commit": "0692d486f40ac8cc74d57444cb0525d987dc011c"
 }

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

@@ -3,31 +3,11 @@
  * @license MIT
  */
 
-import { FontWeight, Terminal } from '@xterm/xterm';
-import { IColorSet, ITerminal } from 'browser/Types';
+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 ICharAtlasConfig {
-  customGlyphs: boolean;
-  devicePixelRatio: number;
-  deviceMaxTextureSize: number;
-  letterSpacing: number;
-  lineHeight: number;
-  fontSize: number;
-  fontFamily: string;
-  fontWeight: FontWeight;
-  fontWeightBold: FontWeight;
-  deviceCellWidth: number;
-  deviceCellHeight: number;
-  deviceCharWidth: number;
-  deviceCharHeight: number;
-  allowTransparency: boolean;
-  drawBoldTextInBrightColors: boolean;
-  minimumContrastRatio: number;
-  colors: IColorSet;
-}
-
 export interface IDimensions {
   width: number;
   height: number;
@@ -87,76 +67,6 @@ export interface IRenderer extends IDisposable {
   clearTextureAtlas?(): void;
 }
 
-export interface ITextureAtlas extends IDisposable {
-  readonly pages: { canvas: HTMLCanvasElement, version: number }[];
-
-  onAddTextureAtlasCanvas: Event<HTMLCanvasElement>;
-  onRemoveTextureAtlasCanvas: Event<HTMLCanvasElement>;
-
-  /**
-   * Warm up the texture atlas, adding common glyphs to avoid slowing early frame.
-   */
-  warmUp(): void;
-
-  /**
-   * Call when a frame is being drawn, this will return true if the atlas was cleared to make room
-   * for a new set of glyphs.
-   */
-  beginFrame(): boolean;
-
-  /**
-   * Clear all glyphs from the texture atlas.
-   */
-  clearTexture(): void;
-  getRasterizedGlyph(code: number, bg: number, fg: number, ext: number, restrictToCellHeight: boolean, domContainer: HTMLElement | undefined): IRasterizedGlyph;
-  getRasterizedGlyphCombinedChar(chars: string, bg: number, fg: number, ext: number, restrictToCellHeight: boolean, domContainer: HTMLElement | undefined): IRasterizedGlyph;
-}
-
-/**
- * Represents a rasterized glyph within a texture atlas. Some numbers are
- * tracked in CSS pixels as well in order to reduce calculations during the
- * render loop.
- */
-export interface IRasterizedGlyph {
-  /**
-   * The x and y offset between the glyph's top/left and the top/left of a cell
-   * in pixels.
-   */
-  offset: IVector;
-  /**
-   * The index of the texture page that the glyph is on.
-   */
-  texturePage: number;
-  /**
-   * the x and y position of the glyph in the texture in pixels.
-   */
-  texturePosition: IVector;
-  /**
-   * the x and y position of the glyph in the texture in clip space coordinates.
-   */
-  texturePositionClipSpace: IVector;
-  /**
-   * The width and height of the glyph in the texture in pixels.
-   */
-  size: IVector;
-  /**
-   * The width and height of the glyph in the texture in clip space coordinates.
-   */
-  sizeClipSpace: IVector;
-}
-
-export interface IVector {
-  x: number;
-  y: number;
-}
-
-export interface IBoundingBox {
-  top: number;
-  left: number;
-  right: number;
-  bottom: number;
-}
-
 export interface ISelectionRenderModel {
   readonly hasSelection: boolean;
   readonly columnSelectMode: boolean;

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

@@ -1,236 +0,0 @@
-import { ISelectionRenderModel } from 'browser/renderer/shared/Types';
-import { ICoreBrowserService, IThemeService } from 'browser/services/Services';
-import { ReadonlyColorSet } from 'browser/Types';
-import { Attributes, BgFlags, ExtFlags, FgFlags, NULL_CELL_CODE, UnderlineStyle } from 'common/buffer/Constants';
-import { IDecorationService, IOptionsService } from 'common/services/Services';
-import { ICellData } from 'common/Types';
-import { Terminal } from '@xterm/xterm';
-import { rgba } from 'common/Color';
-import { treatGlyphAsBackgroundColor } from 'browser/renderer/shared/RendererUtils';
-
-// 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;
-let $variantOffset = 0;
-
-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 _optionService: IOptionsService,
-    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, deviceCellWidth: 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;
-    $variantOffset = 0;
-
-    const code = cell.getCode();
-    if (code !== NULL_CELL_CODE && cell.extended.underlineStyle === UnderlineStyle.DOTTED) {
-      const lineWidth = Math.max(1, Math.floor(this._optionService.rawOptions.fontSize * this._coreBrowserService.dpr / 15));
-      $variantOffset = x * deviceCellWidth % (Math.round(lineWidth) * 2);
-    }
-
-    // Apply decorations on the bottom layer
-    this._decorationService.forEachDecorationAtCell(x, y, 'bottom', d => {
-      if (d.backgroundColorRGB) {
-        $bg = d.backgroundColorRGB.rgba >> 8 & Attributes.RGB_MASK;
-        $hasBg = true;
-      }
-      if (d.foregroundColorRGB) {
-        $fg = d.foregroundColorRGB.rgba >> 8 & Attributes.RGB_MASK;
-        $hasFg = true;
-      }
-    });
-
-    // Apply the selection color if needed
-    $isSelected = this._selectionRenderModel.isCellSelected(this._terminal, x, y);
-    if ($isSelected) {
-      // If the cell has a bg color, retain the color by blending it with the selection color
-      if (
-        (this.result.fg & FgFlags.INVERSE) ||
-        (this.result.bg & Attributes.CM_MASK) !== Attributes.CM_DEFAULT
-      ) {
-        // Resolve the standard bg color
-        if (this.result.fg & FgFlags.INVERSE) {
-          switch (this.result.fg & Attributes.CM_MASK) {
-            case Attributes.CM_P16:
-            case Attributes.CM_P256:
-              $bg = this._themeService.colors.ansi[this.result.fg & Attributes.PCOLOR_MASK].rgba;
-              break;
-            case Attributes.CM_RGB:
-              $bg = ((this.result.fg & Attributes.RGB_MASK) << 8) | 0xFF;
-              break;
-            case Attributes.CM_DEFAULT:
-            default:
-              $bg = this._themeService.colors.foreground.rgba;
-          }
-        } else {
-          switch (this.result.bg & Attributes.CM_MASK) {
-            case Attributes.CM_P16:
-            case Attributes.CM_P256:
-              $bg = this._themeService.colors.ansi[this.result.bg & Attributes.PCOLOR_MASK].rgba;
-              break;
-            case Attributes.CM_RGB:
-              $bg = ((this.result.bg & Attributes.RGB_MASK) << 8) | 0xFF;
-              break;
-            // No need to consider default bg color here as it's not possible
-          }
-        }
-        // Blend with selection bg color
-        $bg = rgba.blend(
-          $bg,
-          ((this._coreBrowserService.isFocused ? $colors.selectionBackgroundOpaque : $colors.selectionInactiveBackgroundOpaque).rgba & 0xFFFFFF00) | 0x80
-        ) >> 8 & Attributes.RGB_MASK;
-      } else {
-        $bg = (this._coreBrowserService.isFocused ? $colors.selectionBackgroundOpaque : $colors.selectionInactiveBackgroundOpaque).rgba >> 8 & Attributes.RGB_MASK;
-      }
-      $hasBg = true;
-
-      // Apply explicit selection foreground if present
-      if ($colors.selectionForeground) {
-        $fg = $colors.selectionForeground.rgba >> 8 & Attributes.RGB_MASK;
-        $hasFg = true;
-      }
-
-      // Overwrite fg as bg if it's a special decorative glyph (eg. powerline)
-      if (treatGlyphAsBackgroundColor(cell.getCode())) {
-        // Inverse default background should be treated as transparent
-        if (
-          (this.result.fg & FgFlags.INVERSE) &&
-          (this.result.bg & Attributes.CM_MASK) === Attributes.CM_DEFAULT
-        ) {
-          $fg = (this._coreBrowserService.isFocused ? $colors.selectionBackgroundOpaque : $colors.selectionInactiveBackgroundOpaque).rgba >> 8 & Attributes.RGB_MASK;
-        } else {
-
-          if (this.result.fg & FgFlags.INVERSE) {
-            switch (this.result.bg & Attributes.CM_MASK) {
-              case Attributes.CM_P16:
-              case Attributes.CM_P256:
-                $fg = this._themeService.colors.ansi[this.result.bg & Attributes.PCOLOR_MASK].rgba;
-                break;
-              case Attributes.CM_RGB:
-                $fg = ((this.result.bg & Attributes.RGB_MASK) << 8) | 0xFF;
-                break;
-              // No need to consider default bg color here as it's not possible
-            }
-          } else {
-            switch (this.result.fg & Attributes.CM_MASK) {
-              case Attributes.CM_P16:
-              case Attributes.CM_P256:
-                $fg = this._themeService.colors.ansi[this.result.fg & Attributes.PCOLOR_MASK].rgba;
-                break;
-              case Attributes.CM_RGB:
-                $fg = ((this.result.fg & Attributes.RGB_MASK) << 8) | 0xFF;
-                break;
-              case Attributes.CM_DEFAULT:
-              default:
-                $fg = this._themeService.colors.foreground.rgba;
-            }
-          }
-
-          $fg = rgba.blend(
-            $fg,
-            ((this._coreBrowserService.isFocused ? $colors.selectionBackgroundOpaque : $colors.selectionInactiveBackgroundOpaque).rgba & 0xFFFFFF00) | 0x80
-          ) >> 8 & Attributes.RGB_MASK;
-        }
-        $hasFg = true;
-      }
-    }
-
-    // Apply decorations on the top layer
-    this._decorationService.forEachDecorationAtCell(x, y, 'top', d => {
-      if (d.backgroundColorRGB) {
-        $bg = d.backgroundColorRGB.rgba >> 8 & Attributes.RGB_MASK;
-        $hasBg = true;
-      }
-      if (d.foregroundColorRGB) {
-        $fg = d.foregroundColorRGB.rgba >> 8 & Attributes.RGB_MASK;
-        $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 & Attributes.RGB_MASK) & 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 & Attributes.RGB_MASK) & 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;
-
-    // Reset overrides variantOffset
-    this.result.ext &= ~ExtFlags.VARIANT_OFFSET;
-    this.result.ext |= ($variantOffset << 29) & ExtFlags.VARIANT_OFFSET;
-  }
-}

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

@@ -1,97 +0,0 @@
-/**
- * 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,
-  deviceMaxTextureSize: number
-): ITextureAtlas {
-  const newConfig = generateConfig(deviceCellWidth, deviceCellHeight, deviceCharWidth, deviceCharHeight, options, colors, devicePixelRatio, deviceMaxTextureSize);
-
-  // 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

@@ -1,80 +0,0 @@
-/**
- * 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, deviceMaxTextureSize: 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,
-    overviewRulerBorder: NULL_COLOR,
-    scrollbarSliderBackground: NULL_COLOR,
-    scrollbarSliderHoverBackground: NULL_COLOR,
-    scrollbarSliderActiveBackground: 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,
-    deviceMaxTextureSize,
-    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;
-}