@react-x11/components 0.1.0 → 0.2.0

package/dist/html/layout/boxes.js

@@ -0,0 +1,725 @@
+import { attr, childrenOf, isElement, isText, NON_RENDERED, tagOf, } from '../dom.js';
+/**
+ * One box. Fields are assigned rather than passed so the shape stays
+ * monomorphic — every box has every field, which is what keeps the property
+ * access in the layout and paint loops a fixed offset rather than a
+ * megamorphic lookup.
+ */
+export class Box {
+    kind;
+    el;
+    style;
+    parent = null;
+    children = [];
+    /** Border-box, in document coordinates, after layout. */
+    x = 0;
+    y = 0;
+    width = 0;
+    height = 0;
+    /** Resolved edges — border + padding, per side. */
+    borderTop = 0;
+    borderRight = 0;
+    borderBottom = 0;
+    borderLeft = 0;
+    padTop = 0;
+    padRight = 0;
+    padBottom = 0;
+    padLeft = 0;
+    marginTop = 0;
+    marginRight = 0;
+    marginBottom = 0;
+    marginLeft = 0;
+    /** Text, for a `text` box: already whitespace-processed and transformed. */
+    text = '';
+    /** This box's slice of the document text index. */
+    textStart = 0;
+    textEnd = 0;
+    /** Lines, for a box that established an inline formatting context. */
+    lines = null;
+    /** Intrinsic size, for a replaced box that knows one. */
+    intrinsicWidth = 0;
+    intrinsicHeight = 0;
+    /**
+     * Cached min-/max-content widths, for a table cell. -1 until measured.
+     *
+     * Intrinsic widths are width-independent by definition, so measuring them
+     * per layout pass was this engine breaking its own phase rule — a resize
+     * re-probed every cell twice and cost as much as the first layout. The
+     * cache lives on the box because the box's lifetime is exactly the
+     * invalidation rule: any DOM or style change rebuilds the tree, and a new
+     * box starts unmeasured.
+     */
+    intrinsicMinContent = -1;
+    intrinsicMaxContent = -1;
+    /** What a replaced box is: the resource seam and the control host both
+     *  key on this rather than re-reading the tag. */
+    replaced = 'none';
+    /** The marker text of a `list-item`, if it generated one, and where it
+     *  was laid out. The marker is not a box: it is not in the flow, nothing
+     *  can select it (CSS spells that `::marker`, and no author styles it
+     *  here), and giving it one would put a bullet in every copied list. */
+    markerText = '';
+    markerLayout = null;
+    markerX = 0;
+    markerY = 0;
+    /**
+     * The bounds of everything this box and its descendants draw, in document
+     * coordinates — **ink** bounds, not the border box, because `overflow:
+     * visible` lets a child draw outside its parent and a box-rect test would
+     * then cull something still on screen. Filled by `computePaintBounds`
+     * after layout; the paint pass culls against it.
+     */
+    boundsX = 0;
+    boundsY = 0;
+    boundsWidth = 0;
+    boundsHeight = 0;
+    /**
+     * The viewport query over a wide child list, built by `computePaintBounds`
+     * past a size threshold: the paintable in-flow children sorted by ink top,
+     * with each entry's document-order position and a running maximum of ink
+     * bottoms. What it buys is the promise this component makes about tall
+     * documents — the cost of a paint is the viewport's, not the document's —
+     * because without it every expose walked all N children of a flat
+     * document to reject N−20 of them.
+     */
+    paintIndex = null;
+    /** Out-of-flow children in paint order (z-index, then document order),
+     *  precomputed so a paint does not filter and sort per box per frame. */
+    positionedPaint = null;
+    /** The tallest line box under this box — the slack a binary search over
+     *  the y-sorted lines needs, since a line's bottom is not monotone. */
+    maxLineHeight = 0;
+    /**
+     * The document range this box's *subtree* covers, in code units. `[0, 0)`
+     * for a subtree with no text. Assigned once per build; the selection
+     * walks prune on it, which is what keeps "which pixels does this range
+     * cover" from touching the ninety-nine paragraphs a selection is not in.
+     */
+    subtreeTextStart = 0;
+    subtreeTextEnd = 0;
+    /** Set on a box whose `position` takes it out of flow, so the block pass
+     *  can skip it and the positioned pass can find it. */
+    outOfFlow = false;
+    /** Set on a float, for the same reason. */
+    isFloat = false;
+    constructor(kind, el, style) {
+        this.kind = kind;
+        this.el = el;
+        this.style = style;
+    }
+    append(child) {
+        child.parent = this;
+        this.children.push(child);
+    }
+    /** Content-box left edge, in document coordinates. */
+    get contentX() {
+        return this.x + this.borderLeft + this.padLeft;
+    }
+    get contentY() {
+        return this.y + this.borderTop + this.padTop;
+    }
+    get contentWidth() {
+        return Math.max(0, this.width -
+            this.borderLeft -
+            this.borderRight -
+            this.padLeft -
+            this.padRight);
+    }
+    get contentHeight() {
+        return Math.max(0, this.height -
+            this.borderTop -
+            this.borderBottom -
+            this.padTop -
+            this.padBottom);
+    }
+    /** Border + padding across, which is what a `border-box` width already
+     *  contains and a `content-box` width does not. */
+    get horizontalExtra() {
+        return this.borderLeft + this.borderRight + this.padLeft + this.padRight;
+    }
+    get verticalExtra() {
+        return this.borderTop + this.borderBottom + this.padTop + this.padBottom;
+    }
+}
+/** Build the box tree for a document. */
+export function buildBoxes(root, options) {
+    const builder = new Builder(options);
+    return builder.run(root);
+}
+/**
+ * How deep the box tree may go. Everything downstream of the builder — the
+ * fix-up pass, layout, paint, the accessor walks — recurses on box depth, so
+ * this is the one bound that keeps a degenerately nested document (fuzzer
+ * output, a runaway template) from a stack overflow five phases later.
+ * Blink's parser flattens at 512 for the same reason; content past the cap
+ * is dropped, which beats the alternative of crashing the application.
+ */
+const MAX_DEPTH = 512;
+class Builder {
+    _options;
+    _text = '';
+    _textBoxes = [];
+    _controls = [];
+    _links = [];
+    /** Counter stack for `<ol>` numbering, one entry per open list. */
+    _counters = [];
+    _depth = 0;
+    constructor(options) {
+        this._options = options;
+    }
+    run(root) {
+        const cascade = this._options.cascade;
+        const rootStyle = cascade.rootStyle(hasBody(root));
+        const rootBox = new Box('block', null, rootStyle);
+        // The DOM's `<html>`/`<body>` are ordinary elements with ordinary styles;
+        // the box above them exists only to be the initial containing block, so
+        // it carries no margins of its own and cannot collapse with anything.
+        this._children(root, rootBox, rootStyle, false);
+        fixUp(rootBox);
+        assignSubtreeRanges(rootBox);
+        return {
+            root: rootBox,
+            text: this._text,
+            textBoxes: this._textBoxes,
+            controls: this._controls,
+            links: this._links,
+        };
+    }
+    /** Build boxes for a parent's children into `into`. */
+    _children(node, into, parentStyle, inFlex, owner = null) {
+        for (const child of childrenOf(node)) {
+            if (isText(child)) {
+                this._textNode(child.data, into, parentStyle, owner);
+                continue;
+            }
+            if (!isElement(child))
+                continue;
+            this._element(child, into, parentStyle, inFlex);
+        }
+    }
+    _element(el, into, parentStyle, inFlex) {
+        const tag = tagOf(el);
+        if (NON_RENDERED.has(tag))
+            return;
+        const style = this._options.cascade.styleFor(el, parentStyle, inFlex);
+        if (style.display === 'none')
+            return;
+        // `<br>` is a line break rather than a box, and it is the one element
+        // whose *absence* of a box still has to reach the inline layout.
+        if (tag === 'br') {
+            const box = new Box('break', el, style);
+            into.append(box);
+            this._push('\n', box);
+            return;
+        }
+        const replaced = replacedKind(el, tag);
+        if (replaced !== 'none') {
+            this._replaced(el, tag, replaced, style, into);
+            return;
+        }
+        if (this._depth >= MAX_DEPTH)
+            return;
+        const kind = boxKindFor(style.display);
+        const box = new Box(kind, el, style);
+        into.append(box);
+        if (style.position === 'absolute' || style.position === 'fixed')
+            box.outOfFlow = true;
+        else if (style.float !== 'none')
+            box.isFloat = true;
+        if (attr(el, 'href') && (tag === 'a' || tag === 'area'))
+            this._links.push(box);
+        if (style.display === 'list-item') {
+            box.markerText = markerFor(el, style, this._counters);
+        }
+        const opensCounter = tag === 'ol' || tag === 'ul';
+        if (opensCounter) {
+            const start = Number(attr(el, 'start') ?? '1');
+            this._counters.push(Number.isFinite(start) ? start : 1);
+        }
+        const childInFlex = style.display === 'flex' || style.display === 'inline-flex';
+        this._depth += 1;
+        this._children(el, box, style, childInFlex, el);
+        this._depth -= 1;
+        if (opensCounter)
+            this._counters.pop();
+    }
+    _replaced(el, tag, replaced, style, into) {
+        const box = new Box('replaced', el, style);
+        box.replaced = replaced;
+        into.append(box);
+        if (style.position === 'absolute' || style.position === 'fixed')
+            box.outOfFlow = true;
+        else if (style.float !== 'none')
+            box.isFloat = true;
+        if (replaced === 'image') {
+            const loaded = this._options.imageSize(el);
+            if (loaded) {
+                box.intrinsicWidth = loaded.width;
+                box.intrinsicHeight = loaded.height;
+            }
+            else {
+                // An image that has not arrived still needs a box, or the document
+                // reflows under the reader when it does. The attributes are the
+                // author telling us the size in advance; without them the box is a
+                // small placeholder rather than nothing.
+                box.intrinsicWidth = numberAttr(el, 'width') ?? 0;
+                box.intrinsicHeight = numberAttr(el, 'height') ?? 0;
+            }
+            // The alt text joins the document text, so a document read with the
+            // images blocked still copies as prose.
+            const alt = attr(el, 'alt');
+            if (alt)
+                this._push(alt, box);
+            return;
+        }
+        if (replaced === 'hr')
+            return;
+        const size = this._options.controlSize(el, replaced, style);
+        box.intrinsicWidth = size.width;
+        box.intrinsicHeight = size.height;
+        this._controls.push(box);
+        // A control's value is the widget's, not the document's: putting it in
+        // the selection index would make Ctrl+A copy the contents of every text
+        // field, which no document viewer does.
+    }
+    /** A text node, whitespace-processed per the inherited `white-space`. */
+    _textNode(data, into, style, owner) {
+        const ws = style.whiteSpace;
+        let text;
+        if (ws === 'pre' || ws === 'pre-wrap') {
+            text = data;
+        }
+        else if (ws === 'pre-line') {
+            text = data.replace(/[ \t]+/g, ' ').replace(/ *\n */g, '\n');
+        }
+        else {
+            text = data.replace(/[\t\n\r\f ]+/g, ' ');
+            // A run of whitespace against the start of a block collapses away
+            // entirely; between two inline boxes it collapses to one space, which
+            // the replace above already did.
+            if (text === ' ' && !hasInlineContent(into))
+                return;
+        }
+        if (!text)
+            return;
+        text = transformText(text, style.textTransform);
+        // The owning element rides on the text box, and from there onto the
+        // `TextRun`: hit testing inside a paragraph has no rectangle to test —
+        // an inline box is the runs on its lines — so the run is what has to
+        // know whose text it is.
+        const box = new Box('text', owner, style);
+        box.text = text;
+        into.append(box);
+        this._push(text, box);
+    }
+    /** Give a box its slice of the document text index. */
+    _push(text, box) {
+        box.textStart = this._text.length;
+        this._text += text;
+        box.textEnd = this._text.length;
+        if (box.kind === 'text')
+            this._textBoxes.push(box);
+    }
+}
+/** Whether the parsed document has a `<body>`. htmlparser2 does not
+ *  synthesise one — it parses what it was given — so a fragment has none,
+ *  and the root box stands in for it. */
+function hasBody(root) {
+    for (const child of childrenOf(root)) {
+        if (!isElement(child))
+            continue;
+        const tag = tagOf(child);
+        if (tag === 'body')
+            return true;
+        if (tag === 'html' && hasBody(child))
+            return true;
+    }
+    return false;
+}
+function numberAttr(el, name) {
+    const raw = attr(el, name);
+    if (!raw)
+        return null;
+    const n = parseFloat(raw);
+    return Number.isFinite(n) ? n : null;
+}
+function hasInlineContent(box) {
+    for (let i = box.children.length - 1; i >= 0; i -= 1) {
+        const kind = box.children[i].kind;
+        if (kind === 'text' || kind === 'inline' || kind === 'replaced')
+            return true;
+        if (kind === 'block' || kind === 'flex' || kind === 'table')
+            return false;
+    }
+    return false;
+}
+function transformText(text, transform) {
+    switch (transform) {
+        case 'uppercase':
+            return text.toUpperCase();
+        case 'lowercase':
+            return text.toLowerCase();
+        case 'capitalize':
+            return text.replace(/(^|\s)(\S)/g, (_, sp, c) => sp + c.toUpperCase());
+        default:
+            return text;
+    }
+}
+function boxKindFor(display) {
+    switch (display) {
+        case 'inline':
+            return 'inline';
+        case 'flex':
+        case 'inline-flex':
+            return 'flex';
+        case 'table':
+        case 'inline-table':
+            return 'table';
+        case 'table-row-group':
+        case 'table-header-group':
+        case 'table-footer-group':
+            return 'table-row-group';
+        case 'table-row':
+            return 'table-row';
+        case 'table-cell':
+            return 'table-cell';
+        case 'table-caption':
+            return 'table-caption';
+        case 'table-column':
+        case 'table-column-group':
+            // A column box paints nothing and lays out nothing; the table reads
+            // its style for the column width and skips the box.
+            return 'block';
+        default:
+            // `inline-block` and `list-item` are block *containers* that happen to
+            // be inline-level or to carry a marker; both lay out inside like a
+            // block, and the difference is what the parent does with them.
+            return 'block';
+    }
+}
+function replacedKind(el, tag) {
+    switch (tag) {
+        case 'img':
+            return 'image';
+        case 'hr':
+            return 'hr';
+        case 'textarea':
+            return 'textarea';
+        case 'select':
+            return 'select';
+        case 'button':
+            return 'button';
+        case 'input': {
+            const type = (attr(el, 'type') ?? 'text').toLowerCase();
+            if (type === 'checkbox')
+                return 'checkbox';
+            if (type === 'radio')
+                return 'radio';
+            if (type === 'button' || type === 'submit' || type === 'reset')
+                return 'button';
+            if (type === 'hidden')
+                return 'none';
+            return 'input';
+        }
+        default:
+            return 'none';
+    }
+}
+const ROMAN = [
+    [1000, 'm'],
+    [900, 'cm'],
+    [500, 'd'],
+    [400, 'cd'],
+    [100, 'c'],
+    [90, 'xc'],
+    [50, 'l'],
+    [40, 'xl'],
+    [10, 'x'],
+    [9, 'ix'],
+    [5, 'v'],
+    [4, 'iv'],
+    [1, 'i'],
+];
+/**
+ * The marker a `list-item` draws. The counter is the *builder's*, not the
+ * element's, because `value` on an `<li>` restarts it and a nested list has
+ * its own — both of which are lost if the number is derived from the index
+ * of the child in its parent.
+ */
+function markerFor(el, style, counters) {
+    const type = style.listStyleType;
+    if (type === 'none')
+        return '';
+    const depth = counters.length;
+    if (depth) {
+        const value = numberAttr(el, 'value');
+        if (value !== null)
+            counters[depth - 1] = value;
+    }
+    const n = depth ? counters[depth - 1]++ : 1;
+    switch (type) {
+        case 'decimal':
+            return `${n}.`;
+        case 'decimal-leading-zero':
+            return `${n < 10 ? '0' : ''}${n}.`;
+        case 'lower-alpha':
+        case 'lower-latin':
+            return `${alpha(n).toLowerCase()}.`;
+        case 'upper-alpha':
+        case 'upper-latin':
+            return `${alpha(n)}.`;
+        case 'lower-roman':
+            return `${roman(n)}.`;
+        case 'upper-roman':
+            return `${roman(n).toUpperCase()}.`;
+        case 'circle':
+            return '◦';
+        case 'square':
+            return '▪';
+        case 'disc':
+        default:
+            return '•';
+    }
+}
+function alpha(n) {
+    let out = '';
+    let v = Math.max(1, n);
+    while (v > 0) {
+        const rem = (v - 1) % 26;
+        out = String.fromCharCode(65 + rem) + out;
+        v = Math.floor((v - 1) / 26);
+    }
+    return out;
+}
+function roman(n) {
+    let v = Math.max(1, Math.min(3999, n));
+    let out = '';
+    for (const [value, sym] of ROMAN) {
+        while (v >= value) {
+            out += sym;
+            v -= value;
+        }
+    }
+    return out;
+}
+/**
+ * Give every box the document range its subtree covers. Runs after `fixUp`,
+ * because fix-up reparents children into anonymous boxes and the ranges have
+ * to describe the tree the walks will actually traverse. Document order
+ * makes each subtree's range contiguous, so min/max over the children is
+ * exact rather than an approximation.
+ */
+function assignSubtreeRanges(box) {
+    let start = box.textEnd > box.textStart ? box.textStart : Infinity;
+    let end = box.textEnd > box.textStart ? box.textEnd : -Infinity;
+    for (const child of box.children) {
+        const range = assignSubtreeRanges(child);
+        if (range.end > range.start) {
+            start = Math.min(start, range.start);
+            end = Math.max(end, range.end);
+        }
+    }
+    if (end <= start) {
+        box.subtreeTextStart = 0;
+        box.subtreeTextEnd = 0;
+        return { start: 0, end: 0 };
+    }
+    box.subtreeTextStart = start;
+    box.subtreeTextEnd = end;
+    return { start, end };
+}
+// --- anonymous boxes --------------------------------------------------------
+/**
+ * The fix-up pass: CSS's anonymous box rules, applied bottom-up.
+ *
+ * Two of them, and both are the difference between a document that lays out
+ * and one that silently drops content:
+ *
+ *  - **A block container with a mix of block-level and inline-level children
+ *    wraps each run of inline children in an anonymous block.** Without it
+ *    `<div>text<p>para</p></div>` has to decide whether the div is a block
+ *    context or an inline one, and either answer loses something.
+ *  - **A table's structure is completed.** Real documents write `<table>`
+ *    straight to `<tr>`, and CSS says the missing row group is generated
+ *    rather than the rows being dropped.
+ */
+function fixUp(box) {
+    for (const child of box.children)
+        fixUp(child);
+    if (box.kind === 'table') {
+        fixUpTable(box);
+        return;
+    }
+    if (box.kind === 'table-row-group') {
+        wrapOrphans(box, 'table-row', (k) => k === 'table-row');
+        return;
+    }
+    if (box.kind === 'table-row') {
+        wrapOrphans(box, 'table-cell', (k) => k === 'table-cell');
+        return;
+    }
+    if (!box.children.length)
+        return;
+    let hasBlockLevel = false;
+    let hasInlineLevel = false;
+    for (const child of box.children) {
+        if (child.outOfFlow)
+            continue;
+        if (isBlockLevel(child))
+            hasBlockLevel = true;
+        else
+            hasInlineLevel = true;
+    }
+    // A flex container has no inline formatting context at all: every run of
+    // inline-level content becomes an anonymous flex *item*, whether or not a
+    // block-level sibling forced the question. `<div style="display:flex">some
+    // text</div>` is the case the mixed-content rule alone drops on the floor —
+    // all-inline children, so no wrapping, so the flex pass finds bare text
+    // boxes it cannot lay out and renders nothing.
+    const wrapAllInline = box.kind === 'flex';
+    if (!wrapAllInline && (!hasBlockLevel || !hasInlineLevel))
+        return;
+    if (wrapAllInline && !hasInlineLevel)
+        return;
+    const next = [];
+    let run = null;
+    for (const child of box.children) {
+        // A float or an absolutely positioned box sits in whichever context it
+        // finds itself; it does not force an anonymous block on its own.
+        if (isBlockLevel(child) && !child.outOfFlow && !child.isFloat) {
+            if (run) {
+                next.push(anonymousBlock(box, run));
+                run = null;
+            }
+            next.push(child);
+            continue;
+        }
+        // Whitespace between two blocks is not content and must not generate a
+        // line box — `<div><p>a</p> <p>b</p></div>` has no blank line in it.
+        if (!run && child.kind === 'text' && !child.text.trim())
+            continue;
+        (run ??= []).push(child);
+    }
+    if (run) {
+        if (run.every((c) => c.kind === 'text' && !c.text.trim())) {
+            // trailing whitespace after the last block: same rule
+        }
+        else {
+            next.push(anonymousBlock(box, run));
+        }
+    }
+    box.children = next;
+}
+function anonymousBlock(parent, run) {
+    const box = new Box('block', null, parent.style);
+    box.parent = parent;
+    for (const child of run) {
+        child.parent = box;
+        box.children.push(child);
+    }
+    return box;
+}
+function isBlockLevel(box) {
+    switch (box.kind) {
+        case 'block':
+        case 'flex':
+        case 'table':
+        case 'table-row':
+        case 'table-row-group':
+        case 'table-cell':
+        case 'table-caption':
+            // An `inline-block` or `inline-flex` is a block *container* with an
+            // inline-level outer role, so it belongs to the inline run around it.
+            return !isInlineLevelDisplay(box.style.display);
+        default:
+            return false;
+    }
+}
+function isInlineLevelDisplay(display) {
+    return (display === 'inline-block' ||
+        display === 'inline-flex' ||
+        display === 'inline-table');
+}
+/** Wrap children that are not of `expect` in an anonymous box that is. */
+function wrapOrphans(box, kind, accept) {
+    let needed = false;
+    for (const child of box.children) {
+        if (!accept(child.kind) && !isDroppableWhitespace(child)) {
+            needed = true;
+            break;
+        }
+    }
+    if (!needed)
+        return;
+    const next = [];
+    let run = null;
+    for (const child of box.children) {
+        if (accept(child.kind)) {
+            if (run) {
+                next.push(anonymousOf(box, kind, run));
+                run = null;
+            }
+            next.push(child);
+            continue;
+        }
+        if (isDroppableWhitespace(child))
+            continue;
+        (run ??= []).push(child);
+    }
+    if (run)
+        next.push(anonymousOf(box, kind, run));
+    box.children = next;
+}
+function anonymousOf(parent, kind, run) {
+    const box = new Box(kind, null, parent.style);
+    box.parent = parent;
+    for (const child of run) {
+        child.parent = box;
+        box.children.push(child);
+    }
+    return box;
+}
+function isDroppableWhitespace(box) {
+    return box.kind === 'text' && !box.text.trim();
+}
+function fixUpTable(table) {
+    const groups = [];
+    const captions = [];
+    let looseRows = null;
+    for (const child of table.children) {
+        if (child.kind === 'table-row-group') {
+            if (looseRows) {
+                groups.push(anonymousOf(table, 'table-row-group', looseRows));
+                looseRows = null;
+            }
+            groups.push(child);
+        }
+        else if (child.kind === 'table-caption') {
+            captions.push(child);
+        }
+        else if (isDroppableWhitespace(child)) {
+            continue;
+        }
+        else {
+            // A `<tr>`, or anything else that ended up here: rows go into an
+            // anonymous group, and anything that is not a row becomes a cell in
+            // one, which is how a browser rescues `<table>text</table>`.
+            const row = child.kind === 'table-row'
+                ? child
+                : anonymousOf(table, 'table-row', [child]);
+            (looseRows ??= []).push(row);
+        }
+    }
+    if (looseRows)
+        groups.push(anonymousOf(table, 'table-row-group', looseRows));
+    for (const group of groups) {
+        wrapOrphans(group, 'table-row', (k) => k === 'table-row');
+        for (const row of group.children) {
+            wrapOrphans(row, 'table-cell', (k) => k === 'table-cell');
+        }
+    }
+    table.children = [...captions, ...groups];
+    for (const child of table.children)
+        child.parent = table;
+}
+//# sourceMappingURL=boxes.js.map