@wendongfly/zihi 1.1.0 → 1.1.2

package/dist/lib/xterm/src/browser/renderer/dom/DomRendererRowFactory.ts

@@ -8,10 +8,10 @@ import { INVERTED_DEFAULT_COLOR } from 'browser/renderer/shared/Constants';
 import { WHITESPACE_CELL_CHAR, Attributes } from 'common/buffer/Constants';
 import { CellData } from 'common/buffer/CellData';
 import { ICoreService, IDecorationService, IOptionsService } from 'common/services/Services';
-import { color, rgba } from 'common/Color';
+import { channels, color } from 'common/Color';
 import { ICharacterJoinerService, ICoreBrowserService, IThemeService } from 'browser/services/Services';
 import { JoinedCellData } from 'browser/services/CharacterJoinerService';
-import { excludeFromContrastRatioDemands } from 'browser/renderer/shared/RendererUtils';
+import { treatGlyphAsBackgroundColor } from 'browser/renderer/shared/RendererUtils';
 import { AttributeData } from 'common/buffer/AttributeData';
 import { WidthCache } from 'browser/renderer/dom/WidthCache';
 import { IColorContrastCache } from 'browser/Types';
@@ -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,9 +197,14 @@ export class DomRendererRowFactory {
           && !isCursorCell
           && !isJoined
           && !isDecorated
+          && isValidJoinRange
         ) {
           // no span alterations, thus only account chars skipping all code below
-          text += chars;
+          if (cell.isInvisible()) {
+            text += WHITESPACE_CELL_CHAR;
+          } else {
+            text += chars;
+          }
           cellAmount++;
           continue;
         } else {
@@ -214,7 +238,7 @@ export class DomRendererRowFactory {
         }
       }
 
-      if (!this._coreService.isCursorHidden && isCursorCell) {
+      if (!this._coreService.isCursorHidden && isCursorCell && this._coreService.isCursorInitialized) {
         classes.push(RowCss.CURSOR_CLASS);
         if (this._coreBrowserService.isFocused) {
           if (cursorBlink) {
@@ -372,7 +396,7 @@ export class DomRendererRowFactory {
           classes.push(`xterm-bg-${bg}`);
           break;
         case Attributes.CM_RGB:
-          resolvedBg = rgba.toColor(bg >> 16, bg >> 8 & 0xFF, bg & 0xFF);
+          resolvedBg = channels.toColor(bg >> 16, bg >> 8 & 0xFF, bg & 0xFF);
           this._addStyle(charElement, `background-color:#${padStart((bg >>> 0).toString(16), '0', 6)}`);
           break;
         case Attributes.CM_DEFAULT:
@@ -404,7 +428,7 @@ export class DomRendererRowFactory {
           }
           break;
         case Attributes.CM_RGB:
-          const color = rgba.toColor(
+          const color = channels.toColor(
             (fg >> 16) & 0xFF,
             (fg >>  8) & 0xFF,
             (fg      ) & 0xFF
@@ -415,7 +439,7 @@ export class DomRendererRowFactory {
           break;
         case Attributes.CM_DEFAULT:
         default:
-          if (!this._applyMinimumContrast(charElement, resolvedBg, colors.foreground, cell, bgOverride, undefined)) {
+          if (!this._applyMinimumContrast(charElement, resolvedBg, colors.foreground, cell, bgOverride, fgOverride)) {
             if (isInverse) {
               classes.push(`xterm-fg-${INVERTED_DEFAULT_COLOR}`);
             }
@@ -431,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;
@@ -454,7 +478,7 @@ export class DomRendererRowFactory {
   }
 
   private _applyMinimumContrast(element: HTMLElement, bg: IColor, fg: IColor, cell: ICellData, bgOverride: IColor | undefined, fgOverride: IColor | undefined): boolean {
-    if (this._optionsService.rawOptions.minimumContrastRatio === 1 || excludeFromContrastRatioDemands(cell.getCode())) {
+    if (this._optionsService.rawOptions.minimumContrastRatio === 1 || treatGlyphAsBackgroundColor(cell.getCode())) {
       return false;
     }
 

package/dist/lib/xterm/src/browser/renderer/dom/WidthCache.ts

@@ -45,25 +45,28 @@ export class WidthCache implements IDisposable {
   private _container: HTMLDivElement;
   private _measureElements: HTMLSpanElement[] = [];
 
-  constructor(_document: Document) {
+  constructor(_document: Document, _helperContainer: HTMLElement) {
     this._container = _document.createElement('div');
-    this._container.style.position = 'absolute';
-    this._container.style.top = '-50000px';
-    this._container.style.width = '50000px';
+    this._container.classList.add('xterm-width-cache-measure-container');
+    this._container.setAttribute('aria-hidden', 'true');
     // SP should stack in spans
     this._container.style.whiteSpace = 'pre';
     // avoid undercuts in non-monospace fonts from kerning
     this._container.style.fontKerning = 'none';
 
     const regular = _document.createElement('span');
+    regular.classList.add('xterm-char-measure-element');
 
     const bold = _document.createElement('span');
+    bold.classList.add('xterm-char-measure-element');
     bold.style.fontWeight = 'bold';
 
     const italic = _document.createElement('span');
+    italic.classList.add('xterm-char-measure-element');
     italic.style.fontStyle = 'italic';
 
     const boldItalic = _document.createElement('span');
+    boldItalic.classList.add('xterm-char-measure-element');
     boldItalic.style.fontWeight = 'bold';
     boldItalic.style.fontStyle = 'italic';
 
@@ -74,7 +77,7 @@ export class WidthCache implements IDisposable {
     this._container.appendChild(italic);
     this._container.appendChild(boldItalic);
 
-    _document.body.appendChild(this._container);
+    _helperContainer.appendChild(this._container);
 
     this.clear();
   }
@@ -131,9 +134,14 @@ export class WidthCache implements IDisposable {
   public get(c: string, bold: boolean | number, italic: boolean | number): number {
     let cp = 0;
     if (!bold && !italic && c.length === 1 && (cp = c.charCodeAt(0)) < WidthCacheSettings.FLAT_SIZE) {
-      return this._flat[cp] !== WidthCacheSettings.FLAT_UNSET
-        ? this._flat[cp]
-        : (this._flat[cp] = this._measure(c, 0));
+      if (this._flat[cp] !== WidthCacheSettings.FLAT_UNSET) {
+        return this._flat[cp];
+      }
+      const width = this._measure(c, 0);
+      if (width > 0) {
+        this._flat[cp] = width;
+      }
+      return width;
     }
     let key = c;
     if (bold) key += 'B';
@@ -144,7 +152,9 @@ export class WidthCache implements IDisposable {
       if (bold) variant |= FontVariant.BOLD;
       if (italic) variant |= FontVariant.ITALIC;
       width = this._measure(c, variant);
-      this._holey!.set(key, width);
+      if (width > 0) {
+        this._holey!.set(key, width);
+      }
     }
     return width;
   }

package/dist/lib/xterm/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/dist/lib/xterm/src/browser/renderer/shared/RendererUtils.ts

@@ -23,11 +23,44 @@ export function isRestrictedPowerlineGlyph(codepoint: number): boolean {
   return 0xE0B0 <= codepoint && codepoint <= 0xE0B7;
 }
 
+function isNerdFontGlyph(codepoint: number): boolean {
+  return 0xE000 <= codepoint && codepoint <= 0xF8FF;
+}
+
 function isBoxOrBlockGlyph(codepoint: number): boolean {
   return 0x2500 <= codepoint && codepoint <= 0x259F;
 }
 
-export function excludeFromContrastRatioDemands(codepoint: number): boolean {
+export function isEmoji(codepoint: number): boolean {
+  return (
+    codepoint >= 0x1F600 && codepoint <= 0x1F64F || // Emoticons
+    codepoint >= 0x1F300 && codepoint <= 0x1F5FF || // Misc Symbols and Pictographs
+    codepoint >= 0x1F680 && codepoint <= 0x1F6FF || // Transport and Map
+    codepoint >= 0x2600  && codepoint <= 0x26FF  || // Misc symbols
+    codepoint >= 0x2700  && codepoint <= 0x27BF  || // Dingbats
+    codepoint >= 0xFE00  && codepoint <= 0xFE0F  || // Variation Selectors
+    codepoint >= 0x1F900 && codepoint <= 0x1F9FF || // Supplemental Symbols and Pictographs
+    codepoint >= 0x1F1E6 && codepoint <= 0x1F1FF
+  );
+}
+
+export function allowRescaling(codepoint: number | undefined, width: number, glyphSizeX: number, deviceCellWidth: number): boolean {
+  return (
+    // Is single cell width
+    width === 1 &&
+    // Glyph exceeds cell bounds, add 50% to avoid hurting readability by rescaling glyphs that
+    // barely overlap
+    glyphSizeX > Math.ceil(deviceCellWidth * 1.5) &&
+    // Never rescale ascii
+    codepoint !== undefined && codepoint > 0xFF &&
+    // Never rescale emoji
+    !isEmoji(codepoint) &&
+    // Never rescale powerline or nerd fonts
+    !isPowerlineGlyph(codepoint) && !isNerdFontGlyph(codepoint)
+  );
+}
+
+export function treatGlyphAsBackgroundColor(codepoint: number): boolean {
   return isPowerlineGlyph(codepoint) || isBoxOrBlockGlyph(codepoint);
 }
 
@@ -56,3 +89,7 @@ function createDimension(): IDimensions {
     height: 0
   };
 }
+
+export function computeNextVariantOffset(cellWidth: number, lineWidth: number, currentOffset: number = 0): number {
+  return (cellWidth - (Math.round(lineWidth) * 2 - currentOffset)) % (Math.round(lineWidth) * 2);
+}

package/dist/lib/xterm/src/browser/renderer/shared/SelectionRenderModel.ts

@@ -3,8 +3,9 @@
  * @license MIT
  */
 
+import { ITerminal } from 'browser/Types';
 import { ISelectionRenderModel } from 'browser/renderer/shared/Types';
-import { Terminal } from 'xterm';
+import { Terminal } from '@xterm/xterm';
 
 class SelectionRenderModel implements ISelectionRenderModel {
   public hasSelection!: boolean;
@@ -35,7 +36,7 @@ class SelectionRenderModel implements ISelectionRenderModel {
     this.selectionEnd = undefined;
   }
 
-  public update(terminal: Terminal, start: [number, number] | undefined, end: [number, number] | undefined, columnSelectMode: boolean = false): void {
+  public update(terminal: ITerminal, start: [number, number] | undefined, end: [number, number] | undefined, columnSelectMode: boolean = false): void {
     this.selectionStart = start;
     this.selectionEnd = end;
     // Selection does not exist
@@ -45,8 +46,9 @@ class SelectionRenderModel implements ISelectionRenderModel {
     }
 
     // Translate from buffer position to viewport position
-    const viewportStartRow = start[1] - terminal.buffer.active.viewportY;
-    const viewportEndRow = end[1] - terminal.buffer.active.viewportY;
+    const viewportY = terminal.buffers.active.ydisp;
+    const viewportStartRow = start[1] - viewportY;
+    const viewportEndRow = end[1] - viewportY;
     const viewportCappedStartRow = Math.max(viewportStartRow, 0);
     const viewportCappedEndRow = Math.min(viewportEndRow, terminal.rows - 1);
 

package/dist/lib/xterm/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/dist/lib/xterm/src/browser/selection/Types.ts

@@ -0,0 +1,15 @@
+/**
+ * Copyright (c) 2017 The xterm.js authors. All rights reserved.
+ * @license MIT
+ */
+
+export interface ISelectionRedrawRequestEvent {
+  start: [number, number] | undefined;
+  end: [number, number] | undefined;
+  columnSelectMode: boolean;
+}
+
+export interface ISelectionRequestScrollLinesEvent {
+  amount: number;
+  suppressScrollEvent: boolean;
+}

package/dist/lib/xterm/src/browser/services/CharSizeService.ts

@@ -4,15 +4,9 @@
  */
 
 import { IOptionsService } from 'common/services/Services';
-import { EventEmitter } from 'common/EventEmitter';
 import { ICharSizeService } from 'browser/services/Services';
-import { Disposable } from 'common/Lifecycle';
-
-
-const enum MeasureSettings {
-  REPEAT = 32
-}
-
+import { Disposable } from 'vs/base/common/lifecycle';
+import { Emitter } from 'vs/base/common/event';
 
 export class CharSizeService extends Disposable implements ICharSizeService {
   public serviceBrand: undefined;
@@ -23,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(
@@ -32,8 +26,12 @@ export class CharSizeService extends Disposable implements ICharSizeService {
     @IOptionsService private readonly _optionsService: IOptionsService
   ) {
     super();
-    this._measureStrategy = new DomMeasureStrategy(document, parentElement, this._optionsService);
-    this.register(this._optionsService.onMultipleOptionChange(['fontFamily', 'fontSize'], () => this.measure()));
+    try {
+      this._measureStrategy = this._register(new TextMetricsMeasureStrategy(this._optionsService));
+    } catch {
+      this._measureStrategy = this._register(new DomMeasureStrategy(document, parentElement, this._optionsService));
+    }
+    this._register(this._optionsService.onMultipleOptionChange(['fontFamily', 'fontSize'], () => this.measure()));
   }
 
   public measure(): void {
@@ -47,12 +45,7 @@ export class CharSizeService extends Disposable implements ICharSizeService {
 }
 
 interface IMeasureStrategy {
-  measure(): IReadonlyMeasureResult;
-}
-
-interface IReadonlyMeasureResult {
-  readonly width: number;
-  readonly height: number;
+  measure(): Readonly<IMeasureResult>;
 }
 
 interface IMeasureResult {
@@ -60,10 +53,26 @@ interface IMeasureResult {
   height: number;
 }
 
-// TODO: For supporting browsers we should also provide a CanvasCharDimensionsProvider that uses
-// ctx.measureText
-class DomMeasureStrategy implements IMeasureStrategy {
-  private _result: IMeasureResult = { width: 0, height: 0 };
+const enum DomMeasureStrategyConstants {
+  REPEAT = 32
+}
+
+abstract class BaseMeasureStategy extends Disposable implements IMeasureStrategy {
+  protected _result: IMeasureResult = { width: 0, height: 0 };
+
+  protected _validateAndSet(width: number | undefined, height: number | undefined): void {
+    // If values are 0 then the element is likely currently display:none, in which case we should
+    // retain the previous value.
+    if (width !== undefined && width > 0 && height !== undefined && height > 0) {
+      this._result.width = width;
+      this._result.height = height;
+    }
+  }
+
+  public abstract measure(): Readonly<IMeasureResult>;
+}
+
+class DomMeasureStrategy extends BaseMeasureStategy {
   private _measureElement: HTMLElement;
 
   constructor(
@@ -71,32 +80,48 @@ class DomMeasureStrategy implements IMeasureStrategy {
     private _parentElement: HTMLElement,
     private _optionsService: IOptionsService
   ) {
+    super();
     this._measureElement = this._document.createElement('span');
     this._measureElement.classList.add('xterm-char-measure-element');
-    this._measureElement.textContent = 'W'.repeat(MeasureSettings.REPEAT);
+    this._measureElement.textContent = 'W'.repeat(DomMeasureStrategyConstants.REPEAT);
     this._measureElement.setAttribute('aria-hidden', 'true');
     this._measureElement.style.whiteSpace = 'pre';
     this._measureElement.style.fontKerning = 'none';
     this._parentElement.appendChild(this._measureElement);
   }
 
-  public measure(): IReadonlyMeasureResult {
+  public measure(): Readonly<IMeasureResult> {
     this._measureElement.style.fontFamily = this._optionsService.rawOptions.fontFamily;
     this._measureElement.style.fontSize = `${this._optionsService.rawOptions.fontSize}px`;
 
     // Note that this triggers a synchronous layout
-    const geometry = {
-      height: Number(this._measureElement.offsetHeight),
-      width: Number(this._measureElement.offsetWidth)
-    };
+    this._validateAndSet(Number(this._measureElement.offsetWidth) / DomMeasureStrategyConstants.REPEAT, Number(this._measureElement.offsetHeight));
 
-    // If values are 0 then the element is likely currently display:none, in which case we should
-    // retain the previous value.
-    if (geometry.width !== 0 && geometry.height !== 0) {
-      this._result.width = geometry.width / MeasureSettings.REPEAT;
-      this._result.height = Math.ceil(geometry.height);
+    return this._result;
+  }
+}
+
+class TextMetricsMeasureStrategy extends BaseMeasureStategy {
+  private _canvas: OffscreenCanvas;
+  private _ctx: OffscreenCanvasRenderingContext2D;
+
+  constructor(
+    private _optionsService: IOptionsService
+  ) {
+    super();
+    // This will throw if any required API is not supported
+    this._canvas = new OffscreenCanvas(100, 100);
+    this._ctx = this._canvas.getContext('2d')!;
+    const a = this._ctx.measureText('W');
+    if (!('width' in a && 'fontBoundingBoxAscent' in a && 'fontBoundingBoxDescent' in a)) {
+      throw new Error('Required font metrics not supported');
     }
+  }
 
+  public measure(): Readonly<IMeasureResult> {
+    this._ctx.font = `${this._optionsService.rawOptions.fontSize}px ${this._optionsService.rawOptions.fontFamily}`;
+    const metrics = this._ctx.measureText('W');
+    this._validateAndSet(metrics.width, metrics.fontBoundingBoxAscent + metrics.fontBoundingBoxDescent);
     return this._result;
   }
 }