@xterm/xterm 5.4.0-beta.1

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

@@ -0,0 +1,526 @@
+/**
+ * Copyright (c) 2018, 2023 The xterm.js authors. All rights reserved.
+ * @license MIT
+ */
+
+import { IBufferLine, ICellData, IColor } from 'common/Types';
+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 { ICharacterJoinerService, ICoreBrowserService, IThemeService } from 'browser/services/Services';
+import { JoinedCellData } from 'browser/services/CharacterJoinerService';
+import { excludeFromContrastRatioDemands } from 'browser/renderer/shared/RendererUtils';
+import { AttributeData } from 'common/buffer/AttributeData';
+import { WidthCache } from 'browser/renderer/dom/WidthCache';
+import { IColorContrastCache } from 'browser/Types';
+
+
+export const enum RowCss {
+  BOLD_CLASS = 'xterm-bold',
+  DIM_CLASS = 'xterm-dim',
+  ITALIC_CLASS = 'xterm-italic',
+  UNDERLINE_CLASS = 'xterm-underline',
+  OVERLINE_CLASS = 'xterm-overline',
+  STRIKETHROUGH_CLASS = 'xterm-strikethrough',
+  CURSOR_CLASS = 'xterm-cursor',
+  CURSOR_BLINK_CLASS = 'xterm-cursor-blink',
+  CURSOR_STYLE_BLOCK_CLASS = 'xterm-cursor-block',
+  CURSOR_STYLE_OUTLINE_CLASS = 'xterm-cursor-outline',
+  CURSOR_STYLE_BAR_CLASS = 'xterm-cursor-bar',
+  CURSOR_STYLE_UNDERLINE_CLASS = 'xterm-cursor-underline'
+}
+
+
+export class DomRendererRowFactory {
+  private _workCell: CellData = new CellData();
+
+  private _selectionStart: [number, number] | undefined;
+  private _selectionEnd: [number, number] | undefined;
+  private _columnSelectMode: boolean = false;
+
+  public defaultSpacing = 0;
+
+  constructor(
+    private readonly _document: Document,
+    @ICharacterJoinerService private readonly _characterJoinerService: ICharacterJoinerService,
+    @IOptionsService private readonly _optionsService: IOptionsService,
+    @ICoreBrowserService private readonly _coreBrowserService: ICoreBrowserService,
+    @ICoreService private readonly _coreService: ICoreService,
+    @IDecorationService private readonly _decorationService: IDecorationService,
+    @IThemeService private readonly _themeService: IThemeService
+  ) {}
+
+  public handleSelectionChanged(start: [number, number] | undefined, end: [number, number] | undefined, columnSelectMode: boolean): void {
+    this._selectionStart = start;
+    this._selectionEnd = end;
+    this._columnSelectMode = columnSelectMode;
+  }
+
+  public createRow(
+    lineData: IBufferLine,
+    row: number,
+    isCursorRow: boolean,
+    cursorStyle: string | undefined,
+    cursorInactiveStyle: string | undefined,
+    cursorX: number,
+    cursorBlink: boolean,
+    cellWidth: number,
+    widthCache: WidthCache,
+    linkStart: number,
+    linkEnd: number
+  ): HTMLSpanElement[] {
+
+    const elements: HTMLSpanElement[] = [];
+    const joinedRanges = this._characterJoinerService.getJoinedCharacters(row);
+    const colors = this._themeService.colors;
+
+    let lineLength = lineData.getNoBgTrimmedLength();
+    if (isCursorRow && lineLength < cursorX + 1) {
+      lineLength = cursorX + 1;
+    }
+
+    let charElement: HTMLSpanElement | undefined;
+    let cellAmount = 0;
+    let text = '';
+    let oldBg = 0;
+    let oldFg = 0;
+    let oldExt = 0;
+    let oldLinkHover: number | boolean = false;
+    let oldSpacing = 0;
+    let oldIsInSelection: boolean = false;
+    let spacing = 0;
+    const classes: string[] = [];
+
+    const hasHover = linkStart !== -1 && linkEnd !== -1;
+
+    for (let x = 0; x < lineLength; x++) {
+      lineData.loadCell(x, this._workCell);
+      let width = this._workCell.getWidth();
+
+      // The character to the left is a wide character, drawing is owned by the char at x-1
+      if (width === 0) {
+        continue;
+      }
+
+      // If true, indicates that the current character(s) to draw were joined.
+      let isJoined = false;
+      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;
+        const range = joinedRanges.shift()!;
+
+        // 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;
+
+        // Recalculate width
+        width = cell.getWidth();
+      }
+
+      const isInSelection = this._isCellInSelection(x, row);
+      const isCursorCell = isCursorRow && x === cursorX;
+      const isLinkHover = hasHover && x >= linkStart && x <= linkEnd;
+
+      let isDecorated = false;
+      this._decorationService.forEachDecorationAtCell(x, row, undefined, d => {
+        isDecorated = true;
+      });
+
+      // get chars to render for this cell
+      let chars = cell.getChars() || WHITESPACE_CELL_CHAR;
+      if (chars === ' ' && (cell.isUnderline() || cell.isOverline())) {
+        chars = '\xa0';
+      }
+
+      // lookup char render width and calc spacing
+      spacing = width * cellWidth - widthCache.get(chars, cell.isBold(), cell.isItalic());
+
+      if (!charElement) {
+        charElement = this._document.createElement('span');
+      } else {
+        /**
+         * chars can only be merged on existing span if:
+         * - existing span only contains mergeable chars (cellAmount != 0)
+         * - bg did not change (or both are in selection)
+         * - fg did not change (or both are in selection and selection fg is set)
+         * - ext did not change
+         * - underline from hover state did not change
+         * - cell content renders to same letter-spacing
+         * - cell is not cursor
+         */
+        if (
+          cellAmount
+          && (
+            (isInSelection && oldIsInSelection)
+            || (!isInSelection && !oldIsInSelection && cell.bg === oldBg)
+          )
+          && (
+            (isInSelection && oldIsInSelection && colors.selectionForeground)
+            || cell.fg === oldFg
+          )
+          && cell.extended.ext === oldExt
+          && isLinkHover === oldLinkHover
+          && spacing === oldSpacing
+          && !isCursorCell
+          && !isJoined
+          && !isDecorated
+        ) {
+          // no span alterations, thus only account chars skipping all code below
+          if (cell.isInvisible()) {
+            text += WHITESPACE_CELL_CHAR;
+          } else {
+            text += chars;
+          }
+          cellAmount++;
+          continue;
+        } else {
+          /**
+           * cannot merge:
+           * - apply left-over text to old span
+           * - create new span, reset state holders cellAmount & text
+           */
+          if (cellAmount) {
+            charElement.textContent = text;
+          }
+          charElement = this._document.createElement('span');
+          cellAmount = 0;
+          text = '';
+        }
+      }
+      // preserve conditions for next merger eval round
+      oldBg = cell.bg;
+      oldFg = cell.fg;
+      oldExt = cell.extended.ext;
+      oldLinkHover = isLinkHover;
+      oldSpacing = spacing;
+      oldIsInSelection = isInSelection;
+
+      if (isJoined) {
+        // The DOM renderer colors the background of the cursor but for ligatures all cells are
+        // joined. The workaround here is to show a cursor around the whole ligature so it shows up,
+        // the cursor looks the same when on any character of the ligature though
+        if (cursorX >= x && cursorX <= lastCharX) {
+          cursorX = x;
+        }
+      }
+
+      if (!this._coreService.isCursorHidden && isCursorCell && this._coreService.isCursorInitialized) {
+        classes.push(RowCss.CURSOR_CLASS);
+        if (this._coreBrowserService.isFocused) {
+          if (cursorBlink) {
+            classes.push(RowCss.CURSOR_BLINK_CLASS);
+          }
+          classes.push(
+            cursorStyle === 'bar'
+              ? RowCss.CURSOR_STYLE_BAR_CLASS
+              : cursorStyle === 'underline'
+                ? RowCss.CURSOR_STYLE_UNDERLINE_CLASS
+                : RowCss.CURSOR_STYLE_BLOCK_CLASS
+          );
+        } else {
+          if (cursorInactiveStyle) {
+            switch (cursorInactiveStyle) {
+              case 'outline':
+                classes.push(RowCss.CURSOR_STYLE_OUTLINE_CLASS);
+                break;
+              case 'block':
+                classes.push(RowCss.CURSOR_STYLE_BLOCK_CLASS);
+                break;
+              case 'bar':
+                classes.push(RowCss.CURSOR_STYLE_BAR_CLASS);
+                break;
+              case 'underline':
+                classes.push(RowCss.CURSOR_STYLE_UNDERLINE_CLASS);
+                break;
+              default:
+                break;
+            }
+          }
+        }
+      }
+
+      if (cell.isBold()) {
+        classes.push(RowCss.BOLD_CLASS);
+      }
+
+      if (cell.isItalic()) {
+        classes.push(RowCss.ITALIC_CLASS);
+      }
+
+      if (cell.isDim()) {
+        classes.push(RowCss.DIM_CLASS);
+      }
+
+      if (cell.isInvisible()) {
+        text = WHITESPACE_CELL_CHAR;
+      } else {
+        text = cell.getChars() || WHITESPACE_CELL_CHAR;
+      }
+
+      if (cell.isUnderline()) {
+        classes.push(`${RowCss.UNDERLINE_CLASS}-${cell.extended.underlineStyle}`);
+        if (text === ' ') {
+          text = '\xa0'; // = &nbsp;
+        }
+        if (!cell.isUnderlineColorDefault()) {
+          if (cell.isUnderlineColorRGB()) {
+            charElement.style.textDecorationColor = `rgb(${AttributeData.toColorRGB(cell.getUnderlineColor()).join(',')})`;
+          } else {
+            let fg = cell.getUnderlineColor();
+            if (this._optionsService.rawOptions.drawBoldTextInBrightColors && cell.isBold() && fg < 8) {
+              fg += 8;
+            }
+            charElement.style.textDecorationColor = colors.ansi[fg].css;
+          }
+        }
+      }
+
+      if (cell.isOverline()) {
+        classes.push(RowCss.OVERLINE_CLASS);
+        if (text === ' ') {
+          text = '\xa0'; // = &nbsp;
+        }
+      }
+
+      if (cell.isStrikethrough()) {
+        classes.push(RowCss.STRIKETHROUGH_CLASS);
+      }
+
+      // apply link hover underline late, effectively overrides any previous text-decoration
+      // settings
+      if (isLinkHover) {
+        charElement.style.textDecoration = 'underline';
+      }
+
+      let fg = cell.getFgColor();
+      let fgColorMode = cell.getFgColorMode();
+      let bg = cell.getBgColor();
+      let bgColorMode = cell.getBgColorMode();
+      const isInverse = !!cell.isInverse();
+      if (isInverse) {
+        const temp = fg;
+        fg = bg;
+        bg = temp;
+        const temp2 = fgColorMode;
+        fgColorMode = bgColorMode;
+        bgColorMode = temp2;
+      }
+
+      // Apply any decoration foreground/background overrides, this must happen after inverse has
+      // been applied
+      let bgOverride: IColor | undefined;
+      let fgOverride: IColor | undefined;
+      let isTop = false;
+      this._decorationService.forEachDecorationAtCell(x, row, undefined, d => {
+        if (d.options.layer !== 'top' && isTop) {
+          return;
+        }
+        if (d.backgroundColorRGB) {
+          bgColorMode = Attributes.CM_RGB;
+          bg = d.backgroundColorRGB.rgba >> 8 & 0xFFFFFF;
+          bgOverride = d.backgroundColorRGB;
+        }
+        if (d.foregroundColorRGB) {
+          fgColorMode = Attributes.CM_RGB;
+          fg = d.foregroundColorRGB.rgba >> 8 & 0xFFFFFF;
+          fgOverride = d.foregroundColorRGB;
+        }
+        isTop = d.options.layer === 'top';
+      });
+
+      // Apply selection
+      if (!isTop && isInSelection) {
+        // If in the selection, force the element to be above the selection to improve contrast and
+        // support opaque selections. The applies background is not actually needed here as
+        // selection is drawn in a seperate container, the main purpose of this to ensuring minimum
+        // contrast ratio
+        bgOverride = this._coreBrowserService.isFocused ? colors.selectionBackgroundOpaque : colors.selectionInactiveBackgroundOpaque;
+        bg = bgOverride.rgba >> 8 & 0xFFFFFF;
+        bgColorMode = Attributes.CM_RGB;
+        // Since an opaque selection is being rendered, the selection pretends to be a decoration to
+        // ensure text is drawn above the selection.
+        isTop = true;
+        // Apply selection foreground if applicable
+        if (colors.selectionForeground) {
+          fgColorMode = Attributes.CM_RGB;
+          fg = colors.selectionForeground.rgba >> 8 & 0xFFFFFF;
+          fgOverride = colors.selectionForeground;
+        }
+      }
+
+      // If it's a top decoration, render above the selection
+      if (isTop) {
+        classes.push('xterm-decoration-top');
+      }
+
+      // Background
+      let resolvedBg: IColor;
+      switch (bgColorMode) {
+        case Attributes.CM_P16:
+        case Attributes.CM_P256:
+          resolvedBg = colors.ansi[bg];
+          classes.push(`xterm-bg-${bg}`);
+          break;
+        case Attributes.CM_RGB:
+          resolvedBg = rgba.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:
+        default:
+          if (isInverse) {
+            resolvedBg = colors.foreground;
+            classes.push(`xterm-bg-${INVERTED_DEFAULT_COLOR}`);
+          } else {
+            resolvedBg = colors.background;
+          }
+      }
+
+      // If there is no background override by now it's the original color, so apply dim if needed
+      if (!bgOverride) {
+        if (cell.isDim()) {
+          bgOverride = color.multiplyOpacity(resolvedBg, 0.5);
+        }
+      }
+
+      // Foreground
+      switch (fgColorMode) {
+        case Attributes.CM_P16:
+        case Attributes.CM_P256:
+          if (cell.isBold() && fg < 8 && this._optionsService.rawOptions.drawBoldTextInBrightColors) {
+            fg += 8;
+          }
+          if (!this._applyMinimumContrast(charElement, resolvedBg, colors.ansi[fg], cell, bgOverride, undefined)) {
+            classes.push(`xterm-fg-${fg}`);
+          }
+          break;
+        case Attributes.CM_RGB:
+          const color = rgba.toColor(
+            (fg >> 16) & 0xFF,
+            (fg >>  8) & 0xFF,
+            (fg      ) & 0xFF
+          );
+          if (!this._applyMinimumContrast(charElement, resolvedBg, color, cell, bgOverride, fgOverride)) {
+            this._addStyle(charElement, `color:#${padStart(fg.toString(16), '0', 6)}`);
+          }
+          break;
+        case Attributes.CM_DEFAULT:
+        default:
+          if (!this._applyMinimumContrast(charElement, resolvedBg, colors.foreground, cell, bgOverride, fgOverride)) {
+            if (isInverse) {
+              classes.push(`xterm-fg-${INVERTED_DEFAULT_COLOR}`);
+            }
+          }
+      }
+
+      // apply CSS classes
+      // slightly faster than using classList by omitting
+      // checks for doubled entries (code above should not have doublets)
+      if (classes.length) {
+        charElement.className = classes.join(' ');
+        classes.length = 0;
+      }
+
+      // exclude conditions for cell merging - never merge these
+      if (!isCursorCell && !isJoined && !isDecorated) {
+        cellAmount++;
+      } else {
+        charElement.textContent = text;
+      }
+      // apply letter-spacing rule
+      if (spacing !== this.defaultSpacing) {
+        charElement.style.letterSpacing = `${spacing}px`;
+      }
+
+      elements.push(charElement);
+      x = lastCharX;
+    }
+
+    // postfix text of last merged span
+    if (charElement && cellAmount) {
+      charElement.textContent = text;
+    }
+
+    return elements;
+  }
+
+  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())) {
+      return false;
+    }
+
+    // Try get from cache first, only use the cache when there are no decoration overrides
+    const cache = this._getContrastCache(cell);
+    let adjustedColor: IColor | undefined | null = undefined;
+    if (!bgOverride && !fgOverride) {
+      adjustedColor = cache.getColor(bg.rgba, fg.rgba);
+    }
+
+    // Calculate and store in cache
+    if (adjustedColor === undefined) {
+      // Dim cells only require half the contrast, otherwise they wouldn't be distinguishable from
+      // non-dim cells
+      const ratio = this._optionsService.rawOptions.minimumContrastRatio / (cell.isDim() ? 2 : 1);
+      adjustedColor = color.ensureContrastRatio(bgOverride || bg, fgOverride || fg, ratio);
+      cache.setColor((bgOverride || bg).rgba, (fgOverride || fg).rgba, adjustedColor ?? null);
+    }
+
+    if (adjustedColor) {
+      this._addStyle(element, `color:${adjustedColor.css}`);
+      return true;
+    }
+
+    return false;
+  }
+
+  private _getContrastCache(cell: ICellData): IColorContrastCache {
+    if (cell.isDim()) {
+      return this._themeService.colors.halfContrastCache;
+    }
+    return this._themeService.colors.contrastCache;
+  }
+
+  private _addStyle(element: HTMLElement, style: string): void {
+    element.setAttribute('style', `${element.getAttribute('style') || ''}${style};`);
+  }
+
+  private _isCellInSelection(x: number, y: number): boolean {
+    const start = this._selectionStart;
+    const end = this._selectionEnd;
+    if (!start || !end) {
+      return false;
+    }
+    if (this._columnSelectMode) {
+      if (start[0] <= end[0]) {
+        return x >= start[0] && y >= start[1] &&
+          x < end[0] && y <= end[1];
+      }
+      return x < start[0] && y >= start[1] &&
+        x >= end[0] && y <= end[1];
+    }
+    return (y > start[1] && y < end[1]) ||
+        (start[1] === end[1] && y === start[1] && x >= start[0] && x < end[0]) ||
+        (start[1] < end[1] && y === end[1] && x < end[0]) ||
+        (start[1] < end[1] && y === start[1] && x >= start[0]);
+  }
+}
+
+function padStart(text: string, padChar: string, length: number): string {
+  while (text.length < length) {
+    text = padChar + text;
+  }
+  return text;
+}

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

@@ -0,0 +1,160 @@
+/**
+ * Copyright (c) 2023 The xterm.js authors. All rights reserved.
+ * @license MIT
+ */
+
+import { IDisposable } from 'common/Types';
+import { FontWeight } from 'common/services/Services';
+
+
+export const enum WidthCacheSettings {
+  /** sentinel for unset values in flat cache */
+  FLAT_UNSET = -9999,
+  /** size of flat cache, size-1 equals highest codepoint handled by flat */
+  FLAT_SIZE = 256,
+  /** char repeat for measuring */
+  REPEAT = 32
+}
+
+
+const enum FontVariant {
+  REGULAR = 0,
+  BOLD = 1,
+  ITALIC = 2,
+  BOLD_ITALIC = 3
+}
+
+
+export class WidthCache implements IDisposable {
+  // flat cache for regular variant up to CacheSettings.FLAT_SIZE
+  // NOTE: ~4x faster access than holey (serving >>80% of terminal content)
+  //       It has a small memory footprint (only 1MB for full BMP caching),
+  //       still the sweet spot is not reached before touching 32k different codepoints,
+  //       thus we store the remaining <<20% of terminal data in a holey structure.
+  protected _flat = new Float32Array(WidthCacheSettings.FLAT_SIZE);
+
+  // holey cache for bold, italic and bold&italic for any string
+  // FIXME: can grow really big over time (~8.5 MB for full BMP caching),
+  //        so a shared API across terminals is needed
+  protected _holey: Map<string, number> | undefined;
+
+  private _font = '';
+  private _fontSize = 0;
+  private _weight: FontWeight = 'normal';
+  private _weightBold: FontWeight = 'bold';
+  private _container: HTMLDivElement;
+  private _measureElements: HTMLSpanElement[] = [];
+
+  constructor(_document: Document, _helperContainer: HTMLElement) {
+    this._container = _document.createElement('div');
+    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';
+
+    // NOTE: must be in order of FontVariant
+    this._measureElements = [regular, bold, italic, boldItalic];
+    this._container.appendChild(regular);
+    this._container.appendChild(bold);
+    this._container.appendChild(italic);
+    this._container.appendChild(boldItalic);
+
+    _helperContainer.appendChild(this._container);
+
+    this.clear();
+  }
+
+  public dispose(): void {
+    this._container.remove();           // remove elements from DOM
+    this._measureElements.length = 0;   // release element refs
+    this._holey = undefined;            // free cache memory via GC
+  }
+
+  /**
+   * Clear the width cache.
+   */
+  public clear(): void {
+    this._flat.fill(WidthCacheSettings.FLAT_UNSET);
+    // .clear() has some overhead, re-assign instead (>3 times faster)
+    this._holey = new Map<string, number>();
+  }
+
+  /**
+   * Set the font for measuring.
+   * Must be called for any changes on font settings.
+   * Also clears the cache.
+   */
+  public setFont(font: string, fontSize: number, weight: FontWeight, weightBold: FontWeight): void {
+    // skip if nothing changed
+    if (font === this._font
+      && fontSize === this._fontSize
+      && weight === this._weight
+      && weightBold === this._weightBold
+    ) {
+      return;
+    }
+
+    this._font = font;
+    this._fontSize = fontSize;
+    this._weight = weight;
+    this._weightBold = weightBold;
+
+    this._container.style.fontFamily = this._font;
+    this._container.style.fontSize = `${this._fontSize}px`;
+    this._measureElements[FontVariant.REGULAR].style.fontWeight = `${weight}`;
+    this._measureElements[FontVariant.BOLD].style.fontWeight = `${weightBold}`;
+    this._measureElements[FontVariant.ITALIC].style.fontWeight = `${weight}`;
+    this._measureElements[FontVariant.BOLD_ITALIC].style.fontWeight = `${weightBold}`;
+
+    this.clear();
+  }
+
+  /**
+   * Get the render width for cell content `c` with current font settings.
+   * `variant` denotes the font variant to be used.
+   */
+  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));
+    }
+    let key = c;
+    if (bold) key += 'B';
+    if (italic) key += 'I';
+    let width = this._holey!.get(key);
+    if (width === undefined) {
+      let variant = 0;
+      if (bold) variant |= FontVariant.BOLD;
+      if (italic) variant |= FontVariant.ITALIC;
+      width = this._measure(c, variant);
+      this._holey!.set(key, width);
+    }
+    return width;
+  }
+
+  protected _measure(c: string, variant: FontVariant): number {
+    const el = this._measureElements[variant];
+    el.textContent = c.repeat(WidthCacheSettings.REPEAT);
+    return el.offsetWidth / WidthCacheSettings.REPEAT;
+  }
+}