@react-x11/components 0.8.0 → 0.10.0

package/src/html/layout/cache.ts

@@ -0,0 +1,289 @@
+// Text layouts kept from one layout pass to the next, by what they lay out.
+//
+// An edit runs the whole pipeline again — parse, cascade, boxes, layout —
+// because an HTML document is one string and any character of it can change
+// any box. Most of a pass over a long document was the text engine laying
+// every paragraph out again: three quarters of an edit to 600 KB, identical
+// to the last time for all but the paragraph that changed.
+//
+// So a layout is kept with what went into it — the runs' text and styles,
+// the block's style and the options — and a pass that asks for the same
+// again gets the same layout back. Nothing a layout is found by names a box or
+// an element, which is what makes it survive a re-parse: the runs carry no
+// element (hit testing finds a run's element through the document's text
+// index, `LineText.spans`), so a layout says nothing about which parse it
+// was made for.
+//
+// Two generations bound it: a pass may take what the pass before used, and
+// what neither used is dropped. A long document costs one pass's layouts
+// and the layouts an edit replaced, never the history of every edit.
+import type { TextRun } from '../../richtext/index.js';
+import type { TextLayoutLike } from './boxes.js';
+import type { FontsLike } from './inline.js';
+
+export class TextLayoutCache {
+  /** The fonts to lay out with: the engine's, answered from here when a
+   *  layout is already on hand. One object for the cache's life, since the
+   *  measurements keyed on the fonts (a space's advance) are kept per
+   *  object. */
+  readonly fonts: FontsLike;
+  private _now = new Map<number, Kept[]>();
+  private _before = new Map<number, Kept[]>();
+  /** Each layout handed out, and what it was made from (`inputsOf`). */
+  private _inputs = new WeakMap<TextLayoutLike, Kept>();
+
+  constructor(readonly engine: FontsLike) {
+    this.fonts = {
+      layout: (content, style, options) =>
+        this._layout(content, style, options),
+      match: (family, style) => engine.match(family, style),
+    };
+  }
+
+  /** A pass is starting: what the last one used, this one may reuse. */
+  begin(): void {
+    this._before = this._now;
+    this._now = new Map();
+  }
+
+  /**
+   * The layout for these inputs: one this pass has already made or used,
+   * else one the pass before used, else the engine's.
+   *
+   * A layout is filed under a hash of its width and a summary of its text
+   * (`keyOf`), and found by comparing everything it was made from, field by
+   * field, text and all. The first version spelled all of it into one
+   * string key, every field of every run, and that string was the cost: a
+   * pass over a 600 KB document asks for 8,800 layouts of 15,400 runs. The
+   * text alone as the key was still the whole document built, flattened and
+   * hashed a pass, and even a summary spelled as a string was one to build
+   * and hash for every layout; the comparison that finds the layout reads
+   * the text once.
+   */
+  private _layout(
+    content: TextRun[],
+    style: Record<string, unknown>,
+    options: Parameters<FontsLike['layout']>[2],
+  ): TextLayoutLike {
+    const key = keyOf(content, options.maxWidth);
+    const now = this._now.get(key);
+    let kept = now && find(now, content, style, options);
+    if (kept) return kept.layout;
+    kept = find(this._before.get(key), content, style, options) ?? {
+      // copies, so that nothing done to the inputs afterwards can change
+      // what this layout is found by
+      content: content.map((run) => ({ ...run })),
+      style: { ...style },
+      options: { ...options },
+      layout: this.engine.layout(content, style, options),
+    };
+    if (now) now.push(kept);
+    else this._now.set(key, [kept]);
+    this._inputs.set(kept.layout, kept);
+    return kept.layout;
+  }
+
+  /**
+   * What a layout this cache handed out was made from — its runs, the
+   * block's style and the options, copies all — or undefined for one it
+   * did not. A pointer move that changes only a paragraph's ink lays the
+   * same text out again with the new ink from these, where the pass would
+   * have laid out the document (`HtmlViewNode._hoverInPlace`).
+   */
+  inputsOf(layout: TextLayoutLike):
+    | {
+        readonly content: readonly TextRun[];
+        readonly style: Record<string, unknown>;
+        readonly options: Options;
+      }
+    | undefined {
+    return this._inputs.get(layout);
+  }
+}
+
+/** How many characters of a text's start and of its end go into its key. */
+const KEY_EDGE = 16;
+
+/**
+ * What a layout is filed under: a hash of its width, its runs' count, its
+ * text's length, and the text's first and last few characters, small
+ * enough to stay a small integer. Paragraphs that share all of that, or
+ * whose hashes meet, are told apart by `find`; a key of the whole text was
+ * the text copied and hashed for every layout of every pass.
+ */
+function keyOf(content: readonly TextRun[], maxWidth: unknown): number {
+  let length = 0;
+  for (const run of content) length += run.text.length;
+  let h = Math.imul(content.length ^ length, 0x9e3779b1);
+  if (typeof maxWidth === 'number') {
+    h = Math.imul(h ^ Math.round(maxWidth * 64), 0x85ebca6b);
+  }
+  let n = 0;
+  for (let i = 0; i < content.length && n < KEY_EDGE; i += 1) {
+    const text = content[i].text;
+    for (let j = 0; j < text.length && n < KEY_EDGE; j += 1, n += 1) {
+      h = Math.imul(h ^ text.charCodeAt(j), 0x01000193);
+    }
+  }
+  n = 0;
+  for (let i = content.length - 1; i >= 0 && n < KEY_EDGE; i -= 1) {
+    const text = content[i].text;
+    for (let j = text.length - 1; j >= 0 && n < KEY_EDGE; j -= 1, n += 1) {
+      h = Math.imul(h ^ text.charCodeAt(j), 0x01000193);
+    }
+  }
+  return h & 0x3fffffff;
+}
+
+type Options = Parameters<FontsLike['layout']>[2];
+
+/** A layout, and a copy of everything it was made from. */
+interface Kept {
+  content: TextRun[];
+  style: Record<string, unknown>;
+  options: Options;
+  layout: TextLayoutLike;
+}
+
+/** The layout among `kept` made from exactly these inputs. */
+function find(
+  kept: Kept[] | undefined,
+  content: readonly TextRun[],
+  style: Record<string, unknown>,
+  options: Options,
+): Kept | undefined {
+  if (!kept) return undefined;
+  outer: for (const candidate of kept) {
+    if (candidate.content.length !== content.length) continue;
+    if (!sameOptions(candidate.options, options)) continue;
+    if (!sameStyle(candidate.style, style)) continue;
+    for (let i = 0; i < content.length; i += 1) {
+      if (!sameRun(candidate.content[i], content[i])) continue outer;
+    }
+    return candidate;
+  }
+  return undefined;
+}
+
+/**
+ * Every field of a run: two runs are the same run when these are. Checked
+ * against `TextRun` by the compiler, so a field added there cannot be left
+ * out of the list, and `sameRun` compares each of them, which a test holds
+ * it to.
+ */
+export const RUN_FIELDS = [
+  'text',
+  'family',
+  'size',
+  'weight',
+  'style',
+  'color',
+  'letterSpacing',
+  'bg',
+  'bgFill',
+  'underline',
+  'underlineStyle',
+  'underlineOffset',
+  'underlineThickness',
+  'strike',
+  'href',
+  'features',
+  'nowrap',
+  'shapeApart',
+] as const satisfies readonly (keyof TextRun)[];
+
+/** A field of `TextRun` missing from `RUN_FIELDS` names itself here. */
+type Unlisted = Exclude<keyof TextRun, (typeof RUN_FIELDS)[number]>;
+const everyField: [Unlisted] extends [never] ? true : Unlisted = true;
+void everyField;
+
+/**
+ * Whether two runs are the same run: `RUN_FIELDS`, spelled out. A
+ * paragraph's runs are compared on every pass over a long document, and
+ * walking each run's own fields, or the list's, was most of what finding
+ * its layout cost. A field `TextRun` does not name is not the engine's to
+ * read, and two runs that differ only there are the same.
+ */
+function sameRun(a: TextRun, b: TextRun): boolean {
+  return (
+    a.text === b.text &&
+    a.family === b.family &&
+    a.size === b.size &&
+    a.weight === b.weight &&
+    a.style === b.style &&
+    a.color === b.color &&
+    a.letterSpacing === b.letterSpacing &&
+    a.bg === b.bg &&
+    a.bgFill === b.bgFill &&
+    a.underline === b.underline &&
+    a.underlineStyle === b.underlineStyle &&
+    a.underlineOffset === b.underlineOffset &&
+    a.underlineThickness === b.underlineThickness &&
+    a.strike === b.strike &&
+    a.href === b.href &&
+    a.features === b.features &&
+    a.nowrap === b.nowrap &&
+    a.shapeApart === b.shapeApart
+  );
+}
+
+/** Whether two blocks' styles are the same: a block's style is a run's
+ *  fields, which the engine reads as the paragraph's, without the text. */
+function sameStyle(
+  a: Record<string, unknown>,
+  b: Record<string, unknown>,
+): boolean {
+  return (
+    a.family === b.family &&
+    a.size === b.size &&
+    a.weight === b.weight &&
+    a.style === b.style &&
+    a.color === b.color &&
+    a.letterSpacing === b.letterSpacing &&
+    a.bg === b.bg &&
+    a.bgFill === b.bgFill &&
+    a.underline === b.underline &&
+    a.underlineStyle === b.underlineStyle &&
+    a.underlineOffset === b.underlineOffset &&
+    a.underlineThickness === b.underlineThickness &&
+    a.strike === b.strike &&
+    a.href === b.href &&
+    a.features === b.features &&
+    a.nowrap === b.nowrap &&
+    a.shapeApart === b.shapeApart
+  );
+}
+
+/** Every option a layout is made with, held to the engine's by the
+ *  compiler as `RUN_FIELDS` is to `TextRun`. */
+export const OPTION_FIELDS = [
+  'maxWidth',
+  'lineHeight',
+  'align',
+  'direction',
+  'maxLines',
+  'overflow',
+  'overflowWrap',
+  'wrap',
+] as const satisfies readonly (keyof Options)[];
+
+/** An option missing from `OPTION_FIELDS` names itself here. */
+type UnlistedOption = Exclude<keyof Options, (typeof OPTION_FIELDS)[number]>;
+const everyOption: [UnlistedOption] extends [never] ? true : UnlistedOption =
+  true;
+void everyOption;
+
+/** Whether two layouts' options are the same: `OPTION_FIELDS`, spelled
+ *  out. */
+function sameOptions(a: Options, b: Options): boolean {
+  return (
+    a.maxWidth === b.maxWidth &&
+    a.lineHeight === b.lineHeight &&
+    a.align === b.align &&
+    a.direction === b.direction &&
+    a.maxLines === b.maxLines &&
+    a.overflow === b.overflow &&
+    a.overflowWrap === b.overflowWrap &&
+    a.wrap === b.wrap
+  );
+}

package/src/html/layout/collapse.ts

@@ -0,0 +1,317 @@
+// The collapsing border model (CSS 2.1 17.6.2).
+//
+// Where borders collapse, a table's cells share the borders between them:
+// every edge of the grid carries one border, chosen from everything that
+// meets there — the cells on either side, their rows and row groups, the
+// columns and column groups, and at the outside the table — and drawn
+// centred on the edge. So the choice is made per segment of the grid, not
+// per box, and it is made here once per box tree: it reads styles and the
+// grid, and neither changes with the width.
+//
+// Layout sees the result as ordinary border widths. A cell's border on a
+// side is half the border drawn along it, and the table's is half of the
+// borders around the outside (17.6.2), so the table algorithm sizes and
+// places cells exactly as before; the table then paints the segments
+// (`paintCollapsedBorders`) and nothing paints the boxes' own.
+import type { BorderStyle, ComputedStyle } from '../css/style.js';
+import { inkColor } from '../css/values.js';
+import type { Box } from './boxes.js';
+import { tableGrid } from './grid.js';
+import type { Cell } from './grid.js';
+
+/** The border drawn along one segment of the grid. */
+export interface CollapsedBorder {
+  width: number;
+  style: BorderStyle;
+  color: string;
+  /** How it won, for painting the winners last where segments cross. */
+  rank: number;
+}
+
+export interface Edges {
+  top: number;
+  right: number;
+  bottom: number;
+  left: number;
+}
+
+export interface CollapsedTable {
+  rows: number;
+  columns: number;
+  /** The border along each row line, per column: `(rows + 1) × columns`,
+   *  line by line. Null where there is none, or where the line runs
+   *  through a cell that spans it. */
+  horizontal: (CollapsedBorder | null)[];
+  /** The border along each column line, per row: `rows × (columns + 1)`,
+   *  row by row. */
+  vertical: (CollapsedBorder | null)[];
+  /** What each cell's border widths are, as layout sees them. */
+  cells: Map<Box, Edges>;
+  /** The table's own border widths. */
+  table: Edges;
+  /** Where each grid line was laid out, from the table's border-box
+   *  corner: `columns + 1` and `rows + 1` of them. Set by the table
+   *  layout, empty until it runs. */
+  lineX: number[];
+  lineY: number[];
+}
+
+/**
+ * Give a table, or a cell of one, the border widths the collapsing model
+ * leaves it, when its table's borders collapse. A table has no padding
+ * there (17.6.2).
+ */
+export function collapseEdges(box: Box): void {
+  const table = box.kind === 'table' ? box : tableOf(box);
+  if (!table || table.style.borderCollapse !== 'collapse') return;
+  const grid = (table.collapsed ??= collapseTable(table));
+  const edges = box === table ? grid.table : grid.cells.get(box);
+  if (!edges) return;
+  box.borderTop = edges.top;
+  box.borderRight = edges.right;
+  box.borderBottom = edges.bottom;
+  box.borderLeft = edges.left;
+  box.bordersCollapsed = true;
+  if (box === table) {
+    box.padTop = 0;
+    box.padRight = 0;
+    box.padBottom = 0;
+    box.padLeft = 0;
+  }
+}
+
+function tableOf(cell: Box): Box | null {
+  const row = cell.parent;
+  const up = row?.parent;
+  if (up?.kind === 'table') return up;
+  const table = up?.parent;
+  return table?.kind === 'table' ? table : null;
+}
+
+/** Whose border it is, in the order a tie between two of the same width
+ *  and style is settled (17.6.2.1). */
+const enum Origin {
+  Table = 0,
+  ColumnGroup = 1,
+  Column = 2,
+  RowGroup = 3,
+  Row = 4,
+  Cell = 5,
+}
+
+const STYLE_RANK: Record<BorderStyle, number> = {
+  none: 0,
+  hidden: 0,
+  inset: 1,
+  groove: 2,
+  outset: 3,
+  ridge: 4,
+  dotted: 5,
+  dashed: 6,
+  solid: 7,
+  double: 8,
+};
+
+type Side = 'Top' | 'Right' | 'Bottom' | 'Left';
+
+/** Each side's three properties, named once rather than spelled out per
+ *  segment: a table is resolved on every build, a hundred segments each. */
+const KEYS = {
+  Top: ['borderTopStyle', 'borderTopWidth', 'borderTopColor'],
+  Right: ['borderRightStyle', 'borderRightWidth', 'borderRightColor'],
+  Bottom: ['borderBottomStyle', 'borderBottomWidth', 'borderBottomColor'],
+  Left: ['borderLeftStyle', 'borderLeftWidth', 'borderLeftColor'],
+} as const;
+
+/** A side of a box's style as a candidate for a segment. */
+interface Candidate {
+  style: ComputedStyle;
+  side: Side;
+  origin: Origin;
+}
+
+/**
+ * The border one segment carries (17.6.2.1): `hidden` anywhere suppresses
+ * it; otherwise `none` takes no part, the widest wins, then the style by
+ * `double`, `solid`, `dashed`, `dotted`, `ridge`, `outset`, `groove`,
+ * `inset`, then the box by cell, row, row group, column, column group,
+ * table — and between two of one kind, the one offered first, which the
+ * callers make the one to the left or above.
+ */
+function resolve(candidates: Candidate[]): CollapsedBorder | null {
+  let best: Candidate | null = null;
+  let bestWidth = 0;
+  let bestStyle = 0;
+  for (const c of candidates) {
+    const [styleKey, widthKey] = KEYS[c.side];
+    const style = c.style[styleKey];
+    if (style === 'hidden') return null;
+    if (style === 'none') continue;
+    const width = c.style[widthKey];
+    const rank = STYLE_RANK[style];
+    if (
+      best &&
+      (width < bestWidth ||
+        (width === bestWidth &&
+          (rank < bestStyle ||
+            (rank === bestStyle && c.origin <= best.origin))))
+    ) {
+      continue;
+    }
+    best = c;
+    bestWidth = width;
+    bestStyle = rank;
+  }
+  if (!best || !(bestWidth > 0)) return null;
+  const [styleKey, , colorKey] = KEYS[best.side];
+  const color = best.style[colorKey];
+  return {
+    width: bestWidth,
+    style: best.style[styleKey],
+    color: inkColor(color, best.style.color),
+    rank: (bestWidth * 16 + bestStyle) * 8 + best.origin,
+  };
+}
+
+/** Resolve every segment of a table's grid. */
+export function collapseTable(table: Box): CollapsedTable {
+  const {
+    rows,
+    groups,
+    cells,
+    columnCount,
+    columnBoxes: column,
+    columnGroups: group,
+  } = tableGrid(table);
+  const R = rows.length;
+  const C = columnCount;
+  const owner: (Cell | null)[] = new Array<Cell | null>(R * C).fill(null);
+  for (const cell of cells) {
+    const lastRow = Math.min(R, cell.row + cell.rowSpan);
+    const lastColumn = Math.min(C, cell.column + cell.colSpan);
+    for (let r = cell.row; r < lastRow; r += 1) {
+      for (let c = cell.column; c < lastColumn; c += 1) owner[r * C + c] = cell;
+    }
+  }
+  const at = (r: number, c: number): Cell | null =>
+    r < 0 || r >= R || c < 0 || c >= C ? null : owner[r * C + c];
+
+  const candidates: Candidate[] = [];
+  const offer = (box: Box | null, side: Side, origin: Origin): void => {
+    if (box) candidates.push({ style: box.style, side, origin });
+  };
+
+  // along each row line: the cell above and the cell below, their rows and
+  // row groups where the line is their edge, and at the top and the bottom
+  // of the table the columns, the column groups and the table
+  const horizontal: (CollapsedBorder | null)[] =
+    new Array<CollapsedBorder | null>((R + 1) * C).fill(null);
+  for (let line = 0; line <= R; line += 1) {
+    for (let c = 0; c < C; c += 1) {
+      const above = at(line - 1, c);
+      const below = at(line, c);
+      if (above && above === below) continue;
+      candidates.length = 0;
+      if (above && above.row + above.rowSpan === line) {
+        offer(above.box, 'Bottom', Origin.Cell);
+      }
+      if (below && below.row === line) offer(below.box, 'Top', Origin.Cell);
+      if (line > 0) offer(rows[line - 1], 'Bottom', Origin.Row);
+      if (line < R) offer(rows[line], 'Top', Origin.Row);
+      if (line > 0 && groups[line - 1] !== groups[line]) {
+        offer(groups[line - 1], 'Bottom', Origin.RowGroup);
+      }
+      if (line < R && (line === 0 || groups[line - 1] !== groups[line])) {
+        offer(groups[line], 'Top', Origin.RowGroup);
+      }
+      if (line === 0 || line === R) {
+        const side = line === 0 ? 'Top' : 'Bottom';
+        offer(column[c], side, Origin.Column);
+        offer(group[c], side, Origin.ColumnGroup);
+        offer(table, side, Origin.Table);
+      }
+      horizontal[line * C + c] = resolve(candidates);
+    }
+  }
+
+  // along each column line, the same turned on its side
+  const vertical: (CollapsedBorder | null)[] =
+    new Array<CollapsedBorder | null>(R * (C + 1)).fill(null);
+  for (let r = 0; r < R; r += 1) {
+    for (let line = 0; line <= C; line += 1) {
+      const left = at(r, line - 1);
+      const right = at(r, line);
+      if (left && left === right) continue;
+      candidates.length = 0;
+      if (left && left.column + left.colSpan === line) {
+        offer(left.box, 'Right', Origin.Cell);
+      }
+      if (right && right.column === line) {
+        offer(right.box, 'Left', Origin.Cell);
+      }
+      if (line > 0) offer(column[line - 1], 'Right', Origin.Column);
+      if (line < C) offer(column[line], 'Left', Origin.Column);
+      if (line > 0 && (line === C || group[line - 1] !== group[line])) {
+        offer(group[line - 1], 'Right', Origin.ColumnGroup);
+      }
+      if (line < C && (line === 0 || group[line - 1] !== group[line])) {
+        offer(group[line], 'Left', Origin.ColumnGroup);
+      }
+      if (line === 0 || line === C) {
+        const side = line === 0 ? 'Left' : 'Right';
+        offer(rows[r], side, Origin.Row);
+        offer(groups[r], side, Origin.RowGroup);
+        offer(table, side, Origin.Table);
+      }
+      vertical[r * (C + 1) + line] = resolve(candidates);
+    }
+  }
+
+  const widthOf = (b: CollapsedBorder | null): number => (b ? b.width : 0);
+  const cellEdges = new Map<Box, Edges>();
+  for (const cell of cells) {
+    const lastRow = Math.min(R, cell.row + cell.rowSpan);
+    const lastColumn = Math.min(C, cell.column + cell.colSpan);
+    const edges: Edges = { top: 0, right: 0, bottom: 0, left: 0 };
+    for (let c = cell.column; c < lastColumn; c += 1) {
+      const top = widthOf(horizontal[cell.row * C + c]);
+      const bottom = widthOf(horizontal[lastRow * C + c]);
+      edges.top = Math.max(edges.top, top / 2);
+      edges.bottom = Math.max(edges.bottom, bottom / 2);
+    }
+    for (let r = cell.row; r < lastRow; r += 1) {
+      const left = widthOf(vertical[r * (C + 1) + cell.column]);
+      const right = widthOf(vertical[r * (C + 1) + lastColumn]);
+      edges.left = Math.max(edges.left, left / 2);
+      edges.right = Math.max(edges.right, right / 2);
+    }
+    cellEdges.set(cell.box, edges);
+  }
+
+  // The table's own: half the widest of its outer borders along each side
+  // (CSS Tables 3, 3.9.1), as browsers have it. CSS 2.1 (17.6.2) took the
+  // first row's at the sides and let a later row's wider one spill into
+  // the margin, where the table's background did not reach under it.
+  const edges: Edges = { top: 0, right: 0, bottom: 0, left: 0 };
+  if (R && C) {
+    for (let r = 0; r < R; r += 1) {
+      const row = r * (C + 1);
+      edges.left = Math.max(edges.left, widthOf(vertical[row]) / 2);
+      edges.right = Math.max(edges.right, widthOf(vertical[row + C]) / 2);
+    }
+    for (let c = 0; c < C; c += 1) {
+      edges.top = Math.max(edges.top, widthOf(horizontal[c]) / 2);
+      edges.bottom = Math.max(edges.bottom, widthOf(horizontal[R * C + c]) / 2);
+    }
+  }
+  return {
+    rows: R,
+    columns: C,
+    horizontal,
+    vertical,
+    cells: cellEdges,
+    table: edges,
+    lineX: [],
+    lineY: [],
+  };
+}