@react-x11/components 0.14.0 → 0.16.0

package/dist/html/node.js

@@ -40,10 +40,10 @@ import { registerElement, registeredElements } from 'react-x11/host';
 import { Node } from 'react-x11/node';
 import { codePointAtOffset, codeUnitOffsets } from '../internal/text.js';
 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 { Cascade, HOVER_FOLLOWED, HOVER_PSEUDO_NONE, HOVER_PSEUDO_OTHER, HOVER_UNTOUCHED, NO_FOCUS, } 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, 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 { BOX_RAISES, buildBoxes, CONTENT_IMAGES, CLEARED_FROM, COLUMN_LINES, COLUMN_PIECES, COLUMN_ROWS, CUT_BLOCKS, GENERATED_FROM, INLINE_OFFSETS, LINE_BOX_RAISES, SHAPE_STYLES, 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';
@@ -56,7 +56,7 @@ import { faceExtentOf, inlineDecoration, runFor } from './layout/inline.js';
 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, inClip, inClipPath, onLine, ownBounds, paintDocument, pathClips, queryChildIndex, selectionRows, stackLayers, stacksLayers, } from './paint.js';
-import { controlRectsOf, measureControl } from './controls.js';
+import { controlRectsOf, measureControl, styledField } from './controls.js';
 import { ResourceStore } from './resources.js';
 import { WebFonts } from './fonts.js';
 import { resolveUrl, UrlResolver } from './url.js';
@@ -156,6 +156,8 @@ export class HtmlViewNode extends Node {
      *  the text carries surrogate pairs. null until checked. */
     _pointsAreUnits = null;
     _hovered = [];
+    /** Which element's widget holds the focus (`setFocus`). */
+    _focus = NO_FOCUS;
     /** Where the pointer last moved to, in logical window pixels, while it
      *  is over the element (`defaultMouseMove`). */
     _pointerAt = null;
@@ -249,6 +251,12 @@ export class HtmlViewNode extends Node {
                 controlBorder: look.controlBorder * s,
                 controlRadius: look.controlRadius * s,
                 controlFontSize: (look.controlFontSize ?? look.fontSize) * s,
+                ...(look.focusRingWidth !== undefined && {
+                    focusRingWidth: look.focusRingWidth * s,
+                }),
+                ...(look.focusRingOffset !== undefined && {
+                    focusRingOffset: look.focusRingOffset * s,
+                }),
             };
         this._deviceLookFor = look;
         this._deviceLookAt = s;
@@ -538,6 +546,7 @@ export class HtmlViewNode extends Node {
             hovered: new Set(this._hovered),
             active: EMPTY_SET,
         });
+        this._cascade.setFocus(this._focus);
         this._mediaBand = this._cascade.mediaBand(width);
     }
     /**
@@ -828,6 +837,10 @@ export class HtmlViewNode extends Node {
                 scale: this._scale,
                 imageSize: (el) => this._resources.imageSize(imageUrlOf(el) ?? ''),
                 urlSize: (url) => this._resources.imageSize(url),
+                faceAscent: (style) => {
+                    const fonts = this._fonts();
+                    return fonts ? faceExtentOf(fonts, style).ascent : undefined;
+                },
                 controlSize: (el, kind, style) => measureControl(el, kind, style, this._fonts(), look),
             });
             this._tree = build();
@@ -1309,37 +1322,97 @@ export class HtmlViewNode extends Node {
      * with the styles of every element the move did not reach kept.
      */
     _restyleHover(was, now) {
+        const cascade = this._cascade;
         const reach = this._hoverReach(was, now);
-        if (reach !== null) {
+        if (reach !== null && cascade) {
             if (!reach.size)
                 return;
-            if (this._hoverInPlace(reach, was))
+            const before = { hovered: new Set(was), active: EMPTY_SET };
+            if (this._hoverInPlace(reach, before, this._focus, cascade.hoverPseudo)) {
                 return;
+            }
         }
         this._invalidate(Stale.Boxes, reach);
     }
+    /** The element whose widget holds the focus, or null (`setFocus`). */
+    get focusedElement() {
+        return this._focus.element;
+    }
+    /**
+     * The focus moved: `element`'s widget took it, or, given null, no widget
+     * of this document holds it now — it went to something else in the
+     * window, or nowhere. `visible` is whether it shows, `:focus-visible`,
+     * which it always does in a text field. Restyles what `:focus` and its
+     * kin reach as a hover does (`_restyleHover`), and returns whether the
+     * cascade's answer could have changed.
+     *
+     * No element of a document takes the focus: a control's widget, mounted
+     * beside it, does, and says so here. Only a text field's does, so far —
+     * the widgets core draws as components keep their own focus to
+     * themselves.
+     */
+    setFocus(element, visible = true) {
+        const was = this._focus;
+        if (was.element === element && (!element || was.visible === visible)) {
+            return false;
+        }
+        const within = new Set();
+        for (let at = element; at; at = isElement(at.parent) ? at.parent : null) {
+            within.add(at);
+        }
+        const now = element ? { element, visible, within } : NO_FOCUS;
+        this._focus = now;
+        const cascade = this._cascade;
+        cascade?.setFocus(now);
+        if (!cascade || !cascade.focusSensitive)
+            return false;
+        const reach = cascade.focusLocal
+            ? this._stateReach([...was.within], [...now.within], 
+            // one element, whose ring came or went
+            was.element === element ? element : null, (el) => cascade.focusTouches(el), (el, into) => cascade.focusAnchors(el, into))
+            : null;
+        if (reach !== null) {
+            if (!reach.size)
+                return true;
+            const pointer = { hovered: new Set(this._hovered), active: EMPTY_SET };
+            if (this._hoverInPlace(reach, pointer, was, cascade.focusPseudo)) {
+                return true;
+            }
+        }
+        this._invalidate(Stale.Boxes, reach);
+        return true;
+    }
     /**
      * The elements whose styles a move of the hovered chain can change, or
      * null where that cannot be said (`Cascade.hoverLocal`).
+     */
+    _hoverReach(was, now) {
+        const cascade = this._cascade;
+        if (!cascade || !cascade.hoverLocal)
+            return null;
+        return this._stateReach(was, now, null, (el) => cascade.hoverTouches(el), (el, into) => cascade.hoverAnchors(el, into));
+    }
+    /**
+     * The elements whose styles a move of the hovered chain can change, or
+     * of the focus's chain.
      *
      * Only an element whose hover state flipped and that a compound testing
      * the pointer could match can change (`Cascade.hoverTouches`), with its
      * subtree, and its later siblings' where a sibling combinator is in play;
      * and the elements a `:has()` testing the pointer may flip, which are
      * around the ones that changed. A move between two paragraphs under
-     * `a:hover` reaches nothing.
+     * `a:hover` reaches nothing. The focus's the same way, its chain the
+     * focused element and every element around it, and `also` one whose
+     * state flipped though it is in both — the ring coming or going.
      */
-    _hoverReach(was, now) {
-        const cascade = this._cascade;
-        if (!cascade || !cascade.hoverLocal)
-            return null;
+    _stateReach(was, now, also, touches, anchors) {
         const before = new Set(was);
         const after = new Set(now);
         const roots = new Map();
         const flipped = (el, other) => {
-            if (other.has(el))
+            if (other?.has(el))
                 return;
-            const touch = cascade.hoverTouches(el);
+            const touch = touches(el);
             if (touch > (roots.get(el) ?? HOVER_UNTOUCHED))
                 roots.set(el, touch);
         };
@@ -1352,10 +1425,14 @@ export class HtmlViewNode extends Node {
         const deepest = (chain, other) => {
             const el = chain[0];
             if (el && !other.has(el))
-                cascade.hoverAnchors(el, roots);
+                anchors(el, roots);
         };
         deepest(was, after);
         deepest(now, before);
+        if (also) {
+            flipped(also, null);
+            anchors(also, roots);
+        }
         // the roots' subtrees, which inherit from them and a descendant
         // combinator reaches, and their later siblings' too where a sibling
         // combinator follows the compound that tests the pointer
@@ -1402,8 +1479,10 @@ export class HtmlViewNode extends Node {
      *  - The boxes take their new styles: an element's own, the text in it,
      *    the anonymous boxes the fix-up made around what is in it, and its
      *    `::before` and `::after`, styled again by their own rules. A box
-     *    whose style is derived some other way — a marker, a first letter, a
-     *    control — is not one to restyle here.
+     *    whose style is derived some other way — a marker, a first letter —
+     *    is not one to restyle here. A control's is, and its widget is told
+     *    (`_reportControls`), unless the page took to drawing the field or
+     *    stopped.
      *  - Each layout of their text is made again from the runs it was made
      *    from (`TextLayoutCache.inputsOf`) with the new ink (`runFor`), where
      *    its geometry comes out the same.
@@ -1413,8 +1492,12 @@ export class HtmlViewNode extends Node {
      * costs what it changed, in a document of any length. True where it was
      * restyled here, or had nothing to restyle; false where the boxes have to
      * be built again.
+     *
+     * A focus change is answered the same way (`setFocus`): `before` and
+     * `beforeFocus` are the states the change was from, and `pseudoRules`
+     * which pseudo-elements' rules test the state that changed.
      */
-    _hoverInPlace(reach, was) {
+    _hoverInPlace(reach, before, beforeFocus, pseudoRules) {
         const cascade = this._cascade;
         const tree = this._tree;
         const layouts = this._layouts;
@@ -1425,17 +1508,15 @@ export class HtmlViewNode extends Node {
         if (reach.size > HOVER_RESTYLE_LIMIT)
             return false;
         // a first line's, a first letter's and a marker's styles are layout's
-        const pseudoRules = cascade.hoverPseudo;
         if (pseudoRules === HOVER_PSEUDO_OTHER)
             return false;
-        // whether the rules that test the pointer answer differently for an
-        // element than they did before the move
-        const before = { hovered: new Set(was), active: EMPTY_SET };
+        // whether the rules that test the pointer or the focus answer
+        // differently for an element than they did before the change
         const flips = new Map();
         const flipped = (el) => {
             let flip = flips.get(el);
             if (flip === undefined) {
-                flip = cascade.pointerChanged(el, before);
+                flip = cascade.pointerChanged(el, before, beforeFocus);
                 flips.set(el, flip);
             }
             return flip;
@@ -1452,6 +1533,8 @@ export class HtmlViewNode extends Node {
         let reaches = false;
         let reorders = false;
         const moving = new Set();
+        /** Whether a control's box was restyled: its widget is told. */
+        let widgets = false;
         const styleOf = (el) => {
             const kept = tree.styles.get(el);
             if (!kept)
@@ -1497,8 +1580,45 @@ export class HtmlViewNode extends Node {
             if (refused)
                 return false;
         }
-        if (!changed.size && pseudoRules === HOVER_PSEUDO_NONE)
+        // The drawings the move reached. What the rules give the shapes in one
+        // is no box's style (`BoxTree.shapeStyler`), so it is asked for again:
+        // of a drawing whose own style changed — its colour, a custom property
+        // — and of each where a rule that reaches into a drawing tests the
+        // pointer, `a:hover svg path`. One with another answer is painted
+        // again; one never painted has none yet, and asks when it is.
+        const redrawn = [];
+        if (tree.shapeStyler) {
+            for (const el of reach) {
+                if (tagOf(el) !== 'svg')
+                    continue;
+                const style = fresh.get(el);
+                if (!style)
+                    continue;
+                if (!changed.has(el) && !cascade.shapesFollowPointer)
+                    continue;
+                const box = this._firstBoxesOf(tree).get(el);
+                const was = box && SHAPE_STYLES.get(box);
+                if (!box || was === undefined)
+                    continue;
+                const shapes = cascade.shapeStyles(el, style, tree.shapeCopies);
+                if (shapes?.key !== was?.key)
+                    redrawn.push([box, shapes]);
+            }
+        }
+        const redraw = () => {
+            const inks = [];
+            for (const [box, shapes] of redrawn) {
+                SHAPE_STYLES.set(box, shapes);
+                const ink = inkOf(box);
+                if (ink)
+                    inks.push(ink);
+            }
+            return inks;
+        };
+        if (!changed.size && pseudoRules === HOVER_PSEUDO_NONE) {
+            this._repaintInk(redraw());
             return true;
+        }
         for (const el of changed.keys()) {
             const tag = tagOf(el);
             // their backgrounds are the canvas's
@@ -1585,13 +1705,22 @@ export class HtmlViewNode extends Node {
                     continue;
                 const kept = tree.styles.get(el).style;
                 // a style derived from the element's, or drawn from it somewhere
-                // else — a widget mounted beside the document takes its look from
-                // it. An image, a drawing or a rule is drawn here, from its box,
-                // like any.
+                // else. A widget mounted beside the document takes its look from
+                // it, and is told again once it is restyled — unless the page took
+                // to drawing the field, or stopped, which is another size of box.
+                // An image, a drawing or a rule is drawn here, from its box, like
+                // any.
                 if (box.style !== kept)
                     return false;
-                if (box.marker || WIDGETS.has(box.replaced))
+                if (box.marker)
                     return false;
+                if (WIDGETS.has(box.replaced)) {
+                    const kind = box.replaced;
+                    if (styledField(kind, kept) !== styledField(kind, style)) {
+                        return false;
+                    }
+                    widgets = true;
+                }
                 if (moving.has(el) && !movable(box, kept, style))
                     return false;
                 ink = !quiet.has(el);
@@ -1643,8 +1772,10 @@ export class HtmlViewNode extends Node {
                 }
             }
         }
-        if (!restyled.length)
+        if (!restyled.length) {
+            this._repaintInk(redraw());
             return true;
+        }
         // the text: each layout holding a run of a restyled box's, made again
         // with its new ink, where it comes out the same shape
         const relaid = new Map();
@@ -1702,6 +1833,8 @@ export class HtmlViewNode extends Node {
         for (const [el, style] of changed) {
             tree.styles.set(el, { style, inFlex: tree.styles.get(el).inFlex });
         }
+        for (const ink of redraw())
+            inks.push(ink);
         // A box that moved moves what is in it, as layout moved it the first
         // time (`applyRelativeOffsets`), and a later layout moves it the same
         // way; where it reached the document's end, before or after, the
@@ -1727,7 +1860,7 @@ export class HtmlViewNode extends Node {
                 relayout = true;
             }
         }
-        if (moved.length)
+        if (moved.length || widgets)
             this._reportControls();
         if (relayout) {
             this._invalidate(Stale.Layout);
@@ -1744,14 +1877,7 @@ export class HtmlViewNode extends Node {
     /** An element's first box in document order, for the tree it was asked
      *  of: made on the first move over a tree, which is one walk of it. */
     _firstBoxes = null;
-    /**
-     * The blocks a restyle of `changed` has to look in: for each element, the
-     * box its text is set in the lines of — the nearest box around its first
-     * that is not an inline one — which holds every box that takes its style
-     * from it, the pieces a block in it broke it into among them
-     * (`breakAround`). One that is inside another is left to it.
-     */
-    _blocksOf(tree, changed) {
+    _firstBoxesOf(tree) {
         let index = this._firstBoxes;
         if (index?.tree !== tree) {
             const of = new Map();
@@ -1766,9 +1892,20 @@ export class HtmlViewNode extends Node {
             }
             index = this._firstBoxes = { tree, of };
         }
+        return index.of;
+    }
+    /**
+     * The blocks a restyle of `changed` has to look in: for each element, the
+     * box its text is set in the lines of — the nearest box around its first
+     * that is not an inline one — which holds every box that takes its style
+     * from it, the pieces a block in it broke it into among them
+     * (`breakAround`). One that is inside another is left to it.
+     */
+    _blocksOf(tree, changed) {
+        const first = this._firstBoxesOf(tree);
         const blocks = new Set();
         for (const el of changed) {
-            let box = index.of.get(el) ?? null;
+            let box = first.get(el) ?? null;
             while (box?.parent &&
                 (box.kind === 'inline' || box.kind === 'text' || box.kind === 'break')) {
                 box = box.parent;