@react-x11/components 0.9.0 → 0.11.0

package/src/html/layout/floats.ts

@@ -25,10 +25,20 @@ export interface Band {
   right: number;
 }
 
+/**
+ * How much narrower than a float its room may be and still hold it: the
+ * error of adding up widths, which are fractions of a pixel. Ten floats of
+ * `0.87em` in a box `8.7em` wide came to more than the box by 1e-14 px,
+ * and the tenth went under the other nine.
+ */
+const FIT_SLACK = 1e-6;
+
 export class FloatContext {
   private _boxes: FloatBox[] = [];
   private _lowestLeft = -Infinity;
   private _lowestRight = -Infinity;
+  /** The top of the float placed last, which no later one goes above. */
+  private _lastTop = -Infinity;
   /** The BFC's own content edges, which is what a band is clipped to. */
   readonly left: number;
   readonly right: number;
@@ -42,27 +52,44 @@ export class FloatContext {
     return this._boxes.length === 0;
   }
 
+  /** How many floats are placed: a mark for `clearanceSince`. */
+  get count(): number {
+    return this._boxes.length;
+  }
+
   add(box: FloatBox): void {
     this._boxes.push(box);
+    if (box.top > this._lastTop) this._lastTop = box.top;
     if (box.side === 'left')
       this._lowestLeft = Math.max(this._lowestLeft, box.bottom);
     else this._lowestRight = Math.max(this._lowestRight, box.bottom);
   }
 
   /**
-   * The band left for a line of `height` starting at `y`.
+   * The band left for a line of `height` starting at `y`, between `left`
+   * and `right` — the formatting context's own edges unless a narrower
+   * containing block is asking.
    *
    * A float intersects a line when their vertical ranges overlap at all —
    * not when the line's top is inside the float — which is why this takes a
    * height rather than just a position. Getting that wrong lets the last
    * line of a wrapped paragraph slide under a floated image by a pixel.
+   *
+   * `solid` leaves out a float of no width: a block with a formatting
+   * context of its own may not overlap a float's margin box (CSS 2.1 9.5),
+   * and one with no area has nothing to overlap, wherever it is.
    */
-  bandAt(y: number, height: number): Band {
-    let left = this.left;
-    let right = this.right;
+  bandAt(
+    y: number,
+    height: number,
+    left = this.left,
+    right = this.right,
+    solid = false,
+  ): Band {
     const bottom = y + Math.max(1, height);
     for (const box of this._boxes) {
       if (box.bottom <= y || box.top >= bottom) continue;
+      if (solid && box.right <= box.left) continue;
       if (box.side === 'left') left = Math.max(left, box.right);
       else right = Math.min(right, box.left);
     }
@@ -78,6 +105,21 @@ export class FloatContext {
     return false;
   }
 
+  /**
+   * Where a line at `y`, `height` tall, next has more room: the nearest
+   * bottom edge of a float beside it. Null when no float is, so nothing
+   * below can widen the line.
+   */
+  nextEdgeBelow(y: number, height: number): number | null {
+    const bottom = y + Math.max(1, height);
+    let next: number | null = null;
+    for (const box of this._boxes) {
+      if (box.bottom <= y || box.top >= bottom) continue;
+      if (next === null || box.bottom < next) next = box.bottom;
+    }
+    return next;
+  }
+
   /**
    * The lowest `y` a box with this `clear` may start at. `-Infinity` when
    * nothing is in the way, so a caller takes `Math.max(y, clearance)`.
@@ -95,6 +137,22 @@ export class FloatContext {
     }
   }
 
+  /** `clearance`, of the floats placed since `mark` alone. */
+  clearanceSince(
+    clear: 'none' | 'left' | 'right' | 'both',
+    mark: number,
+  ): number {
+    if (clear === 'none') return -Infinity;
+    let lowest = -Infinity;
+    for (let i = mark; i < this._boxes.length; i += 1) {
+      const float = this._boxes[i];
+      if (clear === 'both' || clear === float.side) {
+        lowest = Math.max(lowest, float.bottom);
+      }
+    }
+    return lowest;
+  }
+
   /** How far down the floats reach — what a container that establishes a
    *  BFC has to grow to, so it does not end above its own floats. */
   get bottom(): number {
@@ -102,24 +160,80 @@ export class FloatContext {
   }
 
   /**
-   * The first `y` at or below `from` where a box `width` wide fits on `side`.
-   * A float that does not fit beside the ones already placed goes under
-   * them, which is the rule that makes two 60%-wide floats stack.
+   * The first `y` at or below `from` where a box `width` wide fits on `side`
+   * between `left` and `right`, its containing block's content edges. A
+   * float that does not fit beside the ones already placed goes under them,
+   * which is the rule that makes two 60%-wide floats stack; one wider than
+   * its containing block goes where nothing is beside it.
+   *
+   * No higher than the float placed before it, either (CSS 2.1 9.5.1, rule
+   * 5): a float that fits in a gap an earlier one went under does not go
+   * back up into it. That also makes every float already placed start at or
+   * above the one being placed, so the band only widens below its top and a
+   * band one pixel tall there is the band over its whole height. And it is
+   * what keeps a row of floats cheap: from the top of the one before, the
+   * floats of the rows above are no candidates at all, where a thousand
+   * floated thumbnails walked the bottoms of every row above theirs.
    */
-  placeAt(from: number, width: number, side: 'left' | 'right'): number {
-    let y = from;
-    // Candidate positions are `from` and the bottom of every float below it;
-    // there is no other height at which the band can get wider.
-    const candidates = [from];
+  placeAt(
+    from: number,
+    width: number,
+    side: 'left' | 'right',
+    left = this.left,
+    right = this.right,
+  ): number {
+    if (from < this._lastTop) from = this._lastTop;
+    // where it fits at once, as most do, nothing below is looked at
+    if (this._fits(from, width, side, left, right)) return from;
+    // Candidate positions are the bottom of every float below `from`; there
+    // is no other height at which the band can get wider.
+    const candidates: number[] = [];
     for (const box of this._boxes) {
       if (box.bottom > from) candidates.push(box.bottom);
     }
     candidates.sort((a, b) => a - b);
+    let y = from;
     for (const candidate of candidates) {
-      const band = this.bandAt(candidate, 1);
-      if (band.right - band.left >= width) return candidate;
+      // a row of floats ends at one height, asked about once
+      if (candidate === y) continue;
+      if (this._fits(candidate, width, side, left, right)) return candidate;
       y = candidate;
     }
     return y;
   }
+
+  /**
+   * Whether a float `width` wide fits at `y` (CSS 2.1 9.5.1): past the
+   * floats on its own side, and short of every float on the other (rule
+   * 3), which lets it stand out of its containing block where no float of
+   * its own side is beside it, and within the containing block where one
+   * is (rule 7). Held to the containing block always, a float wider than
+   * its block went below every float beside it, where it fitted beside
+   * them in the formatting context.
+   */
+  private _fits(
+    y: number,
+    width: number,
+    side: 'left' | 'right',
+    left: number,
+    right: number,
+  ): boolean {
+    const start = side === 'left';
+    let near = start ? left : right;
+    let far = start ? Infinity : -Infinity;
+    let beside = false;
+    for (const box of this._boxes) {
+      if (box.bottom <= y || box.top >= y + 1) continue;
+      if (box.side === side) {
+        beside = true;
+        near = start ? Math.max(near, box.right) : Math.min(near, box.left);
+      } else {
+        far = start ? Math.min(far, box.left) : Math.max(far, box.right);
+      }
+    }
+    if (beside) far = start ? Math.min(far, right) : Math.max(far, left);
+    return start
+      ? near + width <= far + FIT_SLACK
+      : near - width >= far - FIT_SLACK;
+  }
 }

package/src/html/layout/grid-lines.ts

@@ -0,0 +1,141 @@
+// A grid's lines by number and by name (CSS Grid 1, 8.3): what a grid
+// item's placement properties come to as line indices. Shared by the
+// placement of the grid's items (`css-grid.ts`) and by the grid area an
+// absolutely positioned box takes for its containing block (`block.ts`),
+// which must read a name as the placement does.
+import type { GridAreas, GridLine } from '../css/style.js';
+
+/** One axis of a grid: how many tracks its explicit grid has, and which of
+ *  its lines — from 0, before the first track — carry each name. */
+export interface GridLines {
+  tracks: number;
+  named: Map<string, number[]>;
+}
+
+/**
+ * An axis's lines from the names its track list gives them, and those
+ * `grid-template-areas` gives the edges of its areas: `a-start` and
+ * `a-end` (7.3.2). `names[i]` is the line before track `i`.
+ */
+export function gridLines(
+  tracks: number,
+  names: readonly (readonly string[])[],
+  areas: GridAreas | null,
+  axis: 'rows' | 'columns',
+): GridLines {
+  const named = new Map<string, number[]>();
+  const add = (name: string, line: number) => {
+    const list = named.get(name);
+    if (!list) named.set(name, [line]);
+    else if (!list.includes(line)) list.push(line);
+  };
+  names.forEach((group, line) => {
+    for (const name of group) add(name, line);
+  });
+  if (areas) {
+    for (const [name, area] of areas.areas) {
+      add(`${name}-start`, area[axis][0]);
+      add(`${name}-end`, area[axis][1]);
+    }
+  }
+  for (const list of named.values()) list.sort((a, b) => a - b);
+  return { tracks, named };
+}
+
+/**
+ * The `n`th line named `name` from the start of the explicit grid, or from
+ * its end where `n` is negative: where there are not so many, the implicit
+ * lines past that end all count as having the name (8.3).
+ */
+export function namedLine(lines: GridLines, name: string, n: number): number {
+  const list = lines.named.get(name) ?? [];
+  if (n > 0) {
+    return n <= list.length ? list[n - 1] : lines.tracks + (n - list.length);
+  }
+  const k = -n;
+  return k <= list.length ? list[list.length - k] : -(k - list.length);
+}
+
+/**
+ * The line a placement property names, or null for `auto` and a span. A
+ * name alone is the edge of the area of that name, the first line called
+ * `<name>-start` or `<name>-end`, and else the first line called `<name>`.
+ */
+export function lineOf(
+  lines: GridLines,
+  line: GridLine,
+  side: 'start' | 'end',
+): number | null {
+  if (!line || 'span' in line) return null;
+  if ('line' in line) {
+    if (line.name !== undefined) return namedLine(lines, line.name, line.line);
+    return line.line > 0 ? line.line - 1 : lines.tracks + 1 + line.line;
+  }
+  const edge = lines.named.get(`${line.name}-${side}`);
+  if (edge?.length) return edge[0];
+  return namedLine(lines, line.name, 1);
+}
+
+/**
+ * Where a span of a name ends, counting `count` lines of that name on from
+ * `from` (forward) or back from it: the implicit lines past the grid's
+ * ends all count as having the name.
+ */
+export function spanToName(
+  lines: GridLines,
+  name: string,
+  count: number,
+  from: number,
+  forward: boolean,
+): number {
+  const list = lines.named.get(name) ?? [];
+  if (forward) {
+    const after = list.filter((l) => l > from);
+    if (count <= after.length) return after[count - 1];
+    return Math.max(from, lines.tracks) + (count - after.length);
+  }
+  const before = list.filter((l) => l < from);
+  if (count <= before.length) return before[before.length - count];
+  return Math.min(from, 0) - (count - before.length);
+}
+
+/**
+ * An item's start line and how many tracks it spans on one axis (8.3.1):
+ * the start null where the auto placement is to find it. Two lines the
+ * wrong way round are swapped, and one line twice spans a track; a span of
+ * a name with nothing to count it from spans one.
+ */
+export function placement(
+  start: GridLine,
+  end: GridLine,
+  lines: GridLines,
+): [number | null, number] {
+  let from = lineOf(lines, start, 'start');
+  let to = lineOf(lines, end, 'end');
+  const spanOf = (l: GridLine) => (l && 'span' in l ? l : null);
+  if (from !== null && to !== null) {
+    if (to < from) [from, to] = [to, from];
+    if (to === from) to = from + 1;
+  } else if (from !== null) {
+    const s = spanOf(end);
+    to =
+      s?.name !== undefined
+        ? spanToName(lines, s.name, s.span, from, true)
+        : from + (s?.span ?? 1);
+  } else if (to !== null) {
+    const s = spanOf(start);
+    from =
+      s?.name !== undefined
+        ? spanToName(lines, s.name, s.span, to, false)
+        : to - (s?.span ?? 1);
+  } else {
+    const s = spanOf(start) ?? spanOf(end);
+    return [null, s && s.name === undefined ? s.span : 1];
+  }
+  // the grid here has no tracks before its first line
+  if (from < 0) {
+    to = Math.max(1, to + -from);
+    from = 0;
+  }
+  return [from, Math.max(1, to - from)];
+}

package/src/html/layout/grid.ts

@@ -0,0 +1,181 @@
+// A table's grid: which rows it has, and which slot of them each cell
+// takes. Shared by the table layout, which sizes the columns, and the
+// collapsing border model, which resolves the borders along every edge of
+// the grid — the two have to agree on where a cell is.
+import type { Box } from './boxes.js';
+
+export interface Cell {
+  box: Box;
+  row: number;
+  column: number;
+  colSpan: number;
+  rowSpan: number;
+}
+
+/** A table's rows in order, with the row group each is in, and its
+ *  captions. */
+export interface TableRows {
+  rows: Box[];
+  /** Per row, the row group it is in, or null for a row of the table's
+   *  own. */
+  groups: (Box | null)[];
+  captions: Box[];
+}
+
+/**
+ * A table's rows in the order they are drawn: a header group's first,
+ * wherever it stands, and a footer group's last (CSS 2.1 17.2) — HTML 4
+ * put `<tfoot>` before `<tbody>`, and a document that did would draw its
+ * totals mid-table. Only the first of each is set apart; any other is a
+ * body group.
+ */
+export function rowsOf(table: Box): TableRows {
+  const rows: Box[] = [];
+  const groups: (Box | null)[] = [];
+  const captions: Box[] = [];
+  let header: Box | null = null;
+  let footer: Box | null = null;
+  for (const child of table.children) {
+    if (child.kind !== 'table-row-group') continue;
+    const display = child.style.display;
+    if (display === 'table-header-group') header ??= child;
+    else if (display === 'table-footer-group') footer ??= child;
+  }
+  const take = (group: Box): void => {
+    for (const row of group.children) {
+      if (row.kind !== 'table-row') continue;
+      rows.push(row);
+      groups.push(group);
+    }
+  };
+  if (header) take(header);
+  for (const child of table.children) {
+    if (child.kind === 'table-caption') captions.push(child);
+    else if (child.kind === 'table-row-group') {
+      if (child !== header && child !== footer) take(child);
+    } else if (child.kind === 'table-row') {
+      rows.push(child);
+      groups.push(null);
+    }
+  }
+  if (footer) take(footer);
+  return { rows, groups, captions };
+}
+
+/** A table's rows, as `rowsOf` gives them, and its grid. */
+export interface TableGrid extends TableRows {
+  cells: Cell[];
+  columnCount: number;
+  /** Per column, the column box it is in, or null. */
+  columnBoxes: (Box | null)[];
+  /** Per column, the column group it is in, or null. */
+  columnGroups: (Box | null)[];
+}
+
+const GRIDS = new WeakMap<Box, TableGrid>();
+
+/**
+ * A table's rows and grid, worked out once per box tree: they come from the
+ * markup alone — a restyle builds the boxes again — while the layout asks
+ * on every pass, at every width a resize goes through, and the collapsing
+ * border model asks too.
+ */
+export function tableGrid(table: Box): TableGrid {
+  let grid = GRIDS.get(table);
+  if (!grid) {
+    const rows = rowsOf(table);
+    const cells = gridOf(rows.rows);
+    const { column, group } = columnsOf(table, cells.columnCount);
+    if (table.style.direction === 'rtl') {
+      // A table right to left has its first column at the right (CSS 2.1
+      // 17.2). The grid is turned round once, here, so the layout, the
+      // collapsing borders and the column backgrounds, which all read it
+      // from the left, agree about where a cell is.
+      const count = cells.columnCount;
+      for (const cell of cells.cells) {
+        cell.column = count - cell.column - cell.colSpan;
+      }
+      column.reverse();
+      group.reverse();
+    }
+    grid = {
+      ...rows,
+      ...cells,
+      columnBoxes: column,
+      columnGroups: group,
+    };
+    GRIDS.set(table, grid);
+  }
+  return grid;
+}
+
+/**
+ * Assign every cell a row and a column, honouring `colspan` and `rowspan`.
+ * The occupancy grid is what makes a `rowspan` in an earlier row push a
+ * later row's cells to the right, which is the bug every naive table
+ * renderer ships with.
+ */
+export function gridOf(rows: Box[]): { cells: Cell[]; columnCount: number } {
+  const cells: Cell[] = [];
+  const occupied: boolean[][] = [];
+  let columnCount = 0;
+
+  const mark = (r: number, c: number): void => {
+    (occupied[r] ??= [])[c] = true;
+  };
+  const taken = (r: number, c: number): boolean => occupied[r]?.[c] === true;
+
+  for (let r = 0; r < rows.length; r += 1) {
+    let c = 0;
+    for (const box of rows[r].children) {
+      if (box.kind !== 'table-cell') continue;
+      while (taken(r, c)) c += 1;
+      const colSpan = Math.max(1, spanAttr(box, 'colspan'));
+      const rowSpan = Math.max(1, spanAttr(box, 'rowspan'));
+      cells.push({ box, row: r, column: c, colSpan, rowSpan });
+      for (let dr = 0; dr < rowSpan; dr += 1) {
+        for (let dc = 0; dc < colSpan; dc += 1) mark(r + dr, c + dc);
+      }
+      c += colSpan;
+      columnCount = Math.max(columnCount, c);
+    }
+  }
+  return { cells, columnCount };
+}
+
+export function spanAttr(box: Box, name: string): number {
+  const raw = box.el?.attribs?.[name];
+  if (!raw) return 1;
+  const n = parseInt(raw, 10);
+  return Number.isFinite(n) && n > 0 ? Math.min(n, 1000) : 1;
+}
+
+/** Which column box and column group each column of the grid is in. */
+function columnsOf(
+  table: Box,
+  count: number,
+): { column: (Box | null)[]; group: (Box | null)[] } {
+  const column: (Box | null)[] = new Array<Box | null>(count).fill(null);
+  const group: (Box | null)[] = new Array<Box | null>(count).fill(null);
+  let at = 0;
+  const place = (box: Box | null, owner: Box | null, span: number): void => {
+    for (let i = 0; i < span && at < count; i += 1, at += 1) {
+      column[at] = box;
+      group[at] = owner;
+    }
+  };
+  for (const child of table.children) {
+    if (at >= count) break;
+    const display = child.style.display;
+    if (display === 'table-column') {
+      place(child, null, spanAttr(child, 'span'));
+    } else if (display === 'table-column-group') {
+      const columns = child.children.filter(
+        (c) => c.style.display === 'table-column',
+      );
+      if (!columns.length) place(null, child, spanAttr(child, 'span'));
+      for (const c of columns) place(c, child, spanAttr(c, 'span'));
+    }
+  }
+  return { column, group };
+}