@react-x11/components 0.13.0 → 0.14.0

package/dist/html/node.js

@@ -43,9 +43,11 @@ import { attr, HtmlSource, imageUrlOf, isElement, tagOf } from './dom.js';
 import { Cascade, HOVER_FOLLOWED, HOVER_PSEUDO_NONE, HOVER_PSEUDO_OTHER, HOVER_UNTOUCHED, } from './css/cascade.js';
 import { mediaMatches, parseStylesheet } from './css/parse.js';
 import { uaStylesheet } from './css/ua.js';
-import { BOX_RAISES, buildBoxes, CONTENT_IMAGES, CLEARED_FROM, CUT_BLOCKS, GENERATED_FROM, INLINE_OFFSETS, LINE_BOX_RAISES, SHIFTED_LINES, TEXT_SHIFTS, } from './layout/boxes.js';
-import { layoutDocument, retranslate, transformed } from './layout/block.js';
+import { BOX_RAISES, buildBoxes, CONTENT_IMAGES, CLEARED_FROM, COLUMN_LINES, COLUMN_PIECES, COLUMN_ROWS, CUT_BLOCKS, GENERATED_FROM, INLINE_OFFSETS, LINE_BOX_RAISES, SHIFTED_LINES, TEXT_SHIFTS, columned, } from './layout/boxes.js';
+import { layoutDocument, placedMatrix, retranslate } from './layout/block.js';
+import { invert, mapPoint, mapRect, transformed } from './css/transform.js';
 import { TextLayoutCache } from './layout/cache.js';
+import { weightAxes } from './layout/axes.js';
 import { shapingSafe } from './layout/shaping.js';
 import { SurfaceCache, newSurface } from './surfaces.js';
 import { faceExtentOf, inlineDecoration, runFor } from './layout/inline.js';
@@ -53,7 +55,7 @@ import { faceExtentOf, inlineDecoration, runFor } from './layout/inline.js';
 // a layout is built once, on the first selection that needs it.
 import { documentOffsetOf, layoutOffsetOf, layoutOffsets as layoutOffsetsOf, } from './layout/inline.js';
 import { lineBands as bandsFor } from '../richtext/runs.js';
-import { clipsOverflow, computePaintBounds, containingBlockOf, FIXED_BOXES, fixedToViewport, forgetDecoratedAncestors, hasRect, hoistNegative, holds, holdsAbsolute, paintDocument, queryChildIndex, selectionRows, stackLayers, } from './paint.js';
+import { clipsOverflow, computePaintBounds, containingBlockOf, FIXED_BOXES, fixedToViewport, forgetDecoratedAncestors, hasRect, hoistNegative, holds, holdsAbsolute, inClip, inClipPath, onLine, ownBounds, paintDocument, pathClips, queryChildIndex, selectionRows, stackLayers, stacksLayers, } from './paint.js';
 import { controlRectsOf, measureControl } from './controls.js';
 import { ResourceStore } from './resources.js';
 import { WebFonts } from './fonts.js';
@@ -545,8 +547,16 @@ export class HtmlViewNode extends Node {
      * next restyle whether the sheets read the same (`_sameSheets`). A sheet
      * that imports itself, or one of the sheets importing it, is read once.
      */
-    _placeImports(sheet, encoding, element, layers, seen, place, depth = 0, chain = new Set()) {
-        for (const url of sheet.imports) {
+    _placeImports(sheet, encoding, element, layers, seen, place, depth = 0, chain = new Set(), 
+    /** The media queries `sheet` is itself under, where it was imported
+     *  under some. */
+    under = null) {
+        for (let i = 0; i < sheet.imports.length; i += 1) {
+            const url = sheet.imports[i];
+            // what it imports is under its import's media queries, and under
+            // the ones the sheet importing it is under
+            const conditions = sheet.importConditions[i];
+            const media = conditions ? [...(under ?? []), conditions] : under;
             this._resources.request({ url, kind: 'stylesheet', element });
             const fetched = this._resources.stylesheet(url, [encoding]);
             const base = this._resources.sheetBase(url);
@@ -554,9 +564,9 @@ export class HtmlViewNode extends Node {
             const key = base ?? url;
             if (!fetched || depth >= MAX_IMPORT_DEPTH || chain.has(key))
                 continue;
-            const imported = parseStylesheet(fetched.text, 0, layers, base);
+            const imported = parseStylesheet(fetched.text, 0, layers, base, media);
             chain.add(key);
-            this._placeImports(imported, fetched.encoding, element, layers, seen, place, depth + 1, chain);
+            this._placeImports(imported, fetched.encoding, element, layers, seen, place, depth + 1, chain, media);
             chain.delete(key);
             place(imported, element);
         }
@@ -671,11 +681,22 @@ export class HtmlViewNode extends Node {
         const height = root?.abs?.height;
         return height && height > 0 ? height : 600;
     }
+    /** The engine this document lays text out with, and the one it is over:
+     *  one object while the engine is, since caches are kept by it. */
+    _engine = null;
     _fonts() {
         const fonts = this.app?.fonts;
+        if (!fonts)
+            return null;
         // a face the engine cannot shape from costs its characters, not the
         // document (`shaping.ts`)
-        return fonts ? shapingSafe(fonts) : null;
+        const safe = shapingSafe(fonts);
+        if (this._engine?.over !== safe) {
+            // and a variable face of the document's is set at the weight its
+            // rule has for a style's (`axes.ts`)
+            this._engine = { over: safe, fonts: weightAxes(safe, this._webFonts) };
+        }
+        return this._engine.fonts;
     }
     /** The text layouts the last pass made, for this one to reuse. */
     _layouts = null;
@@ -869,7 +890,7 @@ export class HtmlViewNode extends Node {
         // The boxes are device pixels; each rect becomes the style of a widget
         // mounted beside this element, and a style is logical.
         const s = this._scale;
-        const rects = controlRectsOf(tree).map((r) => s === 1
+        const rects = controlRectsOf(tree, s).map((r) => s === 1
             ? r
             : {
                 ...r,
@@ -878,6 +899,14 @@ export class HtmlViewNode extends Node {
                 width: r.width / s,
                 height: r.height / s,
                 fontSize: r.fontSize / s,
+                ...(r.clip && {
+                    clip: {
+                        x: r.clip.x / s,
+                        y: r.clip.y / s,
+                        width: r.clip.width / s,
+                        height: r.clip.height / s,
+                    },
+                }),
                 ...(r.bare && {
                     bare: {
                         ...r.bare,
@@ -1184,6 +1213,9 @@ export class HtmlViewNode extends Node {
                 rect = { x: caret.x, y: caret.y, width: 0, height: caret.height };
             }
         }
+        // where it is drawn: the rectangle around it, turned and scaled as the
+        // boxes it is in are, and itself (`getBoundingClientRect`, CSSOM View)
+        rect = throughTransforms(rect, box);
         const s = this._scale;
         return {
             x: rect.x / s,
@@ -2114,12 +2146,18 @@ function sameRects(a, b) {
             p.fontFamily !== q.fontFamily ||
             p.fontSize !== q.fontSize ||
             p.opacity !== q.opacity ||
+            !sameClip(p.clip, q.clip) ||
             !sameBare(p.bare, q.bare)) {
             return false;
         }
     }
     return true;
 }
+function sameClip(a, b) {
+    if (!a || !b)
+        return a === b;
+    return (a.x === b.x && a.y === b.y && a.width === b.width && a.height === b.height);
+}
 function sameBare(a, b) {
     if (!a || !b)
         return a === b;
@@ -2166,7 +2204,13 @@ function nearestText(box, x, y) {
             if (distance >= bestDistance)
                 continue;
             bestDistance = distance;
-            const local = text.layout.indexAt(x - text.drawX, y - text.drawY);
+            // in the row that is this line's, where the layout's other lines are
+            // in another column and a point past this one is not over them
+            let row = y - text.drawY;
+            if (columned.any && COLUMN_ROWS.has(text)) {
+                row = Math.max(natural.y, Math.min(row, natural.y + natural.height - 0.01));
+            }
+            const local = text.layout.indexAt(x - text.drawX, row);
             const offsets = layoutOffsetsOf(text.layout);
             const units = offsets.length
                 ? offsets[Math.max(0, Math.min(local, offsets.length - 1))]
@@ -2179,13 +2223,38 @@ function nearestText(box, x, y) {
             axisDistance(x, node.boundsX, node.boundsWidth);
         if (boundsDistance >= bestDistance)
             return;
+        // in a box painted through a matrix, the point taken back through it
+        // (`deepestAt`): the text is where it was laid out
+        const matrix = placedMatrix(node);
+        if (!matrix) {
+            visitIn(node);
+            return;
+        }
+        const back = invert(matrix);
+        if (!back)
+            return;
+        const px = x;
+        const py = y;
+        [x, y] = mapPoint(back, px, py);
+        try {
+            visitIn(node);
+        }
+        finally {
+            x = px;
+            y = py;
+        }
+    };
+    const visitIn = (node) => {
         const lines = node.lines;
         if (lines?.length) {
             // The line nearest in y, by binary search; then outward both ways
             // while vertical distance alone could still beat the best.
             let lo = 0;
             let hi = lines.length;
-            while (lo < hi) {
+            // the lines columns took apart are in no order down the page: each
+            // is tried
+            const apart = columned.any && COLUMN_LINES.has(lines);
+            while (!apart && lo < hi) {
                 const mid = (lo + hi) >> 1;
                 if (lines[mid].y > y)
                     hi = mid;
@@ -2198,8 +2267,11 @@ function nearestText(box, x, y) {
                 tryLine(lines[i]);
             }
             for (let i = lo; i < lines.length; i += 1) {
-                if (axisDistance(y, lines[i].y, lines[i].height) * 4 >= bestDistance)
+                if (axisDistance(y, lines[i].y, lines[i].height) * 4 >= bestDistance) {
+                    if (apart)
+                        continue;
                     break;
+                }
                 tryLine(lines[i]);
             }
         }
@@ -2287,7 +2359,13 @@ function caretAt(box, units) {
                     const offsets = layoutOffsetsOf(text.layout);
                     const layoutUnits = layoutOffsetOf(text, units);
                     const caret = text.layout.caretPosition(codePointAtOffset(offsets, layoutUnits));
-                    found = { x: text.drawX + caret.x, y: line.y, height: line.height };
+                    const at = throughTransforms({
+                        x: text.drawX + caret.x,
+                        y: line.y,
+                        width: 0,
+                        height: line.height,
+                    }, node);
+                    found = { x: at.x, y: at.y, height: at.height };
                     return;
                 }
             }
@@ -2303,6 +2381,21 @@ function caretAt(box, units) {
     visit(box);
     return found;
 }
+/**
+ * A rectangle in a box's own coordinates — the ones it and what it holds
+ * were laid out in — as the rectangle around where it is drawn: through
+ * the matrix of each box from `from` up that is painted through one
+ * (`placedMatrix`). The rectangle itself, in a document that transforms
+ * nothing but by moving it.
+ */
+function throughTransforms(rect, from) {
+    for (let at = from; at; at = at.parent) {
+        const matrix = placedMatrix(at);
+        if (matrix)
+            rect = mapRect(matrix, rect.x, rect.y, rect.width, rect.height);
+    }
+    return rect;
+}
 /** Every band a document range covers, in window coordinates. The subtree
  *  text ranges prune the walk to the boxes the range actually crosses, so a
  *  drag's small range costs its own paragraphs; only Ctrl+A pays for all. */
@@ -2451,6 +2544,19 @@ ink = false) {
                         height: rows.height,
                     });
                 }
+                // The spaces a piece of a line ends on, where the line goes on
+                // after them: the engine stripped them from the piece it laid out
+                // as a line, and they are the text's all the same, in the elements
+                // that hold its end — a link whose text ends in a space, before
+                // the next link, is that space wider than its letters
+                if (text.trail && b >= text.textEnd && !rtlLine(natural)) {
+                    out.push({
+                        x: dx + natural.x + natural.width + text.drawX - moved,
+                        y: dy + rows.y,
+                        width: text.trail,
+                        height: rows.height,
+                    });
+                }
                 // the spaces `pre-wrap` keeps that the line ends on, which have no
                 // run: the engine hung them past the line (`LineText.hung`)
                 for (const space of text.hung ?? []) {
@@ -2468,6 +2574,11 @@ ink = false) {
         }
     }
 }
+/** Whether a laid-out line's last run reads right to left, its end at its
+ *  left. */
+function rtlLine(natural) {
+    return natural.runs[natural.runs.length - 1]?.run?.direction === 'rtl';
+}
 /** Whether a line's text is where the line ends: its last, with nothing
  *  placed after it — an inline-block or an image past its content. */
 function endsLine(line, text, natural) {
@@ -2485,6 +2596,7 @@ function collectBands(box, from, to, dx, dy, out, ink = false) {
         return;
     if (box.subtreeTextEnd <= from || box.subtreeTextStart >= to)
         return;
+    const first = out.length;
     if (box.lines)
         lineBands(box.lines, from, to, dx, dy, out, false, ink);
     // Atomics are ordinary children, reached below.
@@ -2493,6 +2605,15 @@ function collectBands(box, from, to, dx, dy, out, ink = false) {
             continue;
         collectBands(child, from, to, dx, dy, out, ink);
     }
+    // where a box painted through a matrix draws them
+    const matrix = out.length > first ? placedMatrix(box) : null;
+    if (!matrix)
+        return;
+    for (let i = first; i < out.length; i += 1) {
+        const band = out[i];
+        const to = mapRect(matrix, band.x - dx, band.y - dy, band.width, band.height);
+        out[i] = { ...band, ...to, x: to.x + dx, y: to.y + dy };
+    }
 }
 /** The layers of a hit test, in the order CSS paints them within a
  *  context (`deepestAt`). */
@@ -2526,7 +2647,17 @@ fixedShift = null) {
     // are painted in `z-index` order and then the document's (`byZIndex`),
     // the negative ones under the flow: the Zen Garden's `›` has
     // `z-index: 3` over the bar the "View All Designs" link fills after it.
-    const take = (el, key, text) => {
+    // Nor is a box the pointer passes through under it: one that is not
+    // visible, which is no target for the pointer in any browser (CSS 2.1
+    // 11.2 has it invisible, and a hit test finds what is seen), or one with
+    // `pointer-events: none` (CSS UI 4, 5.2). Both are inherited, and what is
+    // in such a box may say otherwise, so the walk goes on through it. A
+    // site's closed menu is laid out over its page, hidden: GitHub's covered
+    // its repository's tabs, and the pointer over a tab was over the menu.
+    const take = (el, style, key, text) => {
+        if (style.visibility !== 'visible' || style.pointerEvents === 'none') {
+            return;
+        }
         if (compareKeys(key, foundKey) < 0)
             return;
         found = el;
@@ -2568,14 +2699,79 @@ fixedShift = null) {
             atViewport = false;
         }
     };
+    // A box painted through a matrix (`placedMatrix`) is under the point
+    // where the matrix puts it: inside the rectangle around what it draws
+    // there, the point is taken back through the matrix, into the
+    // coordinates the box and all it holds were laid out in, and the walk
+    // goes on with that. An icon turned a quarter is pressed where it is
+    // drawn; a box flattened to nothing is nowhere.
     const enterAt = (child, context, clipped) => {
+        const matrix = placedMatrix(child);
+        if (!matrix) {
+            enterIn(child, context, clipped, null);
+            return;
+        }
+        if (x < child.boundsX ||
+            x >= child.boundsX + child.boundsWidth ||
+            y < child.boundsY ||
+            y >= child.boundsY + child.boundsHeight) {
+            return;
+        }
+        const back = invert(matrix);
+        if (!back)
+            return;
+        const px = x;
+        const py = y;
+        [x, y] = mapPoint(back, px, py);
+        try {
+            enterIn(child, context, clipped, ownBounds(child));
+        }
+        finally {
+            x = px;
+            y = py;
+        }
+    };
+    const enterIn = (child, context, clipped, 
+    /** What the box draws in its own coordinates, where those are not the
+     *  ones its bounds are in: a box painted through a matrix. */
+    bounds) => {
         const style = child.style;
+        // What a `clip-path` cuts away of a box it cuts away of all the box
+        // holds, whatever that is positioned from (CSS Masking 1, 5.1), and
+        // nothing not drawn is under a pointer: a label a page hides for a
+        // screen reader alone under `clip-path: inset(50%)` took the hover and
+        // the press of what was drawn where it lay.
+        if (pathClips(child) && !inClipPath(child, x, y))
+            return;
+        // `clip` is not that rule as paint has it. It shows the part of an
+        // absolute box it names (CSS 2.1 11.1.2), and past that part nothing is
+        // drawn of the box, nor of what is painted with it. A stacking context
+        // paints all it holds, inside its clip. A box that is none leaves its
+        // positioned boxes to the context around it, which cuts each to the
+        // clips its containing block is under (`clipsFor`): this one for all
+        // but a fixed box, which is under none and is drawn past it. So past
+        // its clip the first is left, and the second is walked as a box that
+        // clips its overflow is past its edge — whether or not the point is in
+        // its own rectangle, which a clip may show only a part of. Both were
+        // walked as if they showed whole: a label hidden for a screen reader
+        // alone under `clip: rect(0, 0, 0, 0)` took the hover and the press of
+        // the link drawn where it lay.
+        let cut = !inClip(child, x, y);
+        if (cut && stacksLayers(child))
+            return;
         if (style.position !== 'static' ||
             (child.parent?.kind === 'flex' && typeof style.zIndex === 'number')) {
             // a flex item with a `z-index` is layered unpositioned (`layered`)
             const z = style.zIndex === 'auto' ? 0 : style.zIndex;
             context = [...context, z < 0 ? HIT_NEGATIVE : HIT_POSITIONED, z];
         }
+        else if (transformed(style) &&
+            child.kind !== 'inline' &&
+            child.parent &&
+            !onLine(child.parent, child)) {
+            // a transformed box is painted with the positioned ones (`layered`)
+            context = [...context, HIT_POSITIONED, 0];
+        }
         else if (style.float !== 'none')
             context = [...context, HIT_FLOAT];
         if (clipped.length !== 0 && child.outOfFlow) {
@@ -2584,33 +2780,45 @@ fixedShift = null) {
                 ? clipped.filter((clip) => holds(clip, containing))
                 : [];
         }
-        const inside = x >= child.x &&
-            x < child.x + child.width &&
-            y >= child.y &&
-            y < child.y + child.height;
+        // in one of its pieces, where columns broke it: its rect takes in the
+        // columns between them, which are other boxes'
+        const pieces = columned.any ? COLUMN_PIECES.get(child) : undefined;
+        const inside = pieces
+            ? pieces.some((piece) => x >= piece.x &&
+                x < piece.x + piece.width &&
+                y >= piece.y &&
+                y < piece.y + piece.height)
+            : x >= child.x &&
+                x < child.x + child.width &&
+                y >= child.y &&
+                y < child.y + child.height;
         const own = inside && hasRect(child);
         if (!own) {
-            const reach = child.boundsY;
-            const known = Number.isFinite(reach) &&
-                (child.boundsWidth > 0 || child.boundsHeight > 0);
+            const left = bounds ? bounds.x : child.boundsX;
+            const reach = bounds ? bounds.y : child.boundsY;
+            const across = bounds ? bounds.width : child.boundsWidth;
+            const down = bounds ? bounds.height : child.boundsHeight;
+            const known = Number.isFinite(reach) && (across > 0 || down > 0);
             if (!known) {
                 if (!inside)
                     return;
             }
-            else if (x < child.boundsX ||
-                x >= child.boundsX + child.boundsWidth ||
+            else if (x < left ||
+                x >= left + across ||
                 y < reach ||
-                y >= reach + child.boundsHeight) {
+                y >= reach + down) {
                 return;
             }
-            if (clipsOverflow(child)) {
-                if (!holdsAbsolute(child))
-                    return;
-                clipped = [...clipped, child];
-            }
+            if (clipsOverflow(child))
+                cut = true;
+        }
+        if (cut) {
+            if (!holdsAbsolute(child))
+                return;
+            clipped = [...clipped, child];
         }
         if (own && child.el && clipped.length === 0) {
-            take(child.el, [...context, HIT_BLOCK], false);
+            take(child.el, style, [...context, HIT_BLOCK], false);
         }
         visit(child, context, clipped);
     };
@@ -2652,8 +2860,9 @@ fixedShift = null) {
                             const left = text.drawX + natural.x + run.x;
                             if (x >= left && x < left + run.width) {
                                 const owner = ownerOf(tree.textBoxes, text.spans.documentAt(run.start));
-                                if (owner)
-                                    take(owner, [...context, HIT_INLINE], true);
+                                const style = owner && tree.styles.get(owner)?.style;
+                                if (style)
+                                    take(owner, style, [...context, HIT_INLINE], true);
                             }
                         }
                     }
@@ -2717,6 +2926,9 @@ const PAINT_ONLY = new Set([
     'color',
     'textFillColor',
     'cursor',
+    'pointerEvents',
+    'fill',
+    'stroke',
     'backgroundColor',
     'borderTopColor',
     'borderRightColor',
@@ -2733,6 +2945,8 @@ const PAINT_ONLY = new Set([
     'underlineThickness',
     'underlineOffset',
     'lineThrough',
+    'lineThroughStyle',
+    'lineThroughThickness',
 ]);
 /** The fields of a run its ink is: what `runFor` takes from `PAINT_ONLY`. */
 const INK_FIELDS = [
@@ -2742,6 +2956,8 @@ const INK_FIELDS = [
     'underlineOffset',
     'underlineThickness',
     'strike',
+    'strikeStyle',
+    'strikeThickness',
 ];
 /** The fields of a run its shape is, which ink never changes. */
 const FACE_FIELDS = [
@@ -2776,10 +2992,19 @@ const INK_REACH = new Set([
     'outlineWidth',
     'outlineOffset',
 ]);
+/** What transforms a box: it moves, turns or scales where it is, and
+ *  nothing around it does (CSS Transforms 1, 3). */
+const TRANSFORM_FIELDS = new Set([
+    'translate',
+    'rotate',
+    'scale',
+    'transform',
+    'transformOrigin',
+]);
 /**
  * How two styles of one element differ, for a restyle in place: null where
  * they do not, a `HoverChange` where every difference is ink, how far ink
- * reaches, a `z-index` that stays a stacking context's, or a translation —
+ * reaches, a `z-index` that stays a stacking context's, or a transform —
  * none of which moves anything but the box and what it holds (CSS
  * Transforms 1: a transform does not affect layout) — and false where
  * anything else differs.
@@ -2819,7 +3044,7 @@ function hoverChange(was, now) {
             change.order = true;
             continue;
         }
-        if (key === 'transformTranslate' || key === 'translate') {
+        if (TRANSFORM_FIELDS.has(key)) {
             change.move = true;
             continue;
         }
@@ -2867,12 +3092,14 @@ function inkOf(box) {
         return null;
     if (!(at.boundsWidth > 0 && at.boundsHeight > 0))
         return null;
-    return {
+    // its bounds are in the coordinates of the box it is in, which a box
+    // around it painted through a matrix draws somewhere else
+    return throughTransforms({
         x: at.boundsX,
         y: at.boundsY,
         width: at.boundsWidth,
         height: at.boundsHeight,
-    };
+    }, at.parent);
 }
 /** Structural equality for a computed value: a number, a string, or the
  *  plain objects and arrays a length or a shadow list is. */