@react-x11/components 0.14.0 → 0.16.0

package/src/html/node.ts

@@ -56,10 +56,18 @@ import {
   HOVER_PSEUDO_NONE,
   HOVER_PSEUDO_OTHER,
   HOVER_UNTOUCHED,
+  NO_FOCUS,
+} from './css/cascade.js';
+import type {
+  FocusState,
+  HoverTouch,
+  KeptStyles,
+  MetricFace,
+  PointerState,
 } from './css/cascade.js';
-import type { HoverTouch, KeptStyles, MetricFace } from './css/cascade.js';
 import { mediaMatches, parseStylesheet } from './css/parse.js';
 import type { MediaCondition, Stylesheet } from './css/parse.js';
+import type { ShapeStyles } from './css/shapes.js';
 import { uaStylesheet } from './css/ua.js';
 import type { ComputedStyle, RootLook } from './css/style.js';
 import {
@@ -74,6 +82,7 @@ import {
   GENERATED_FROM,
   INLINE_OFFSETS,
   LINE_BOX_RAISES,
+  SHAPE_STYLES,
   SHIFTED_LINES,
   TEXT_SHIFTS,
   columned,
@@ -127,7 +136,7 @@ import {
   stacksLayers,
 } from './paint.js';
 import type { PaintContext } from './paint.js';
-import { controlRectsOf, measureControl } from './controls.js';
+import { controlRectsOf, measureControl, styledField } from './controls.js';
 import type { BareField, ControlRect } from './controls.js';
 import { ResourceStore } from './resources.js';
 import type { ResourceRequest, ResourceResult } from './resources.js';
@@ -288,6 +297,8 @@ export class HtmlViewNode extends Node {
    *  the text carries surrogate pairs. null until checked. */
   private _pointsAreUnits: boolean | null = null;
   private _hovered: Element[] = [];
+  /** Which element's widget holds the focus (`setFocus`). */
+  private _focus: FocusState = NO_FOCUS;
   /** Where the pointer last moved to, in logical window pixels, while it
    *  is over the element (`defaultMouseMove`). */
   private _pointerAt: { x: number; y: number } | null = null;
@@ -400,6 +411,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;
@@ -709,6 +726,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);
   }
 
@@ -1029,6 +1047,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),
         });
@@ -1537,37 +1559,120 @@ export class HtmlViewNode extends Node {
    * with the styles of every element the move did not reach kept.
    */
   private _restyleHover(was: readonly Element[], now: readonly Element[]) {
+    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)) return;
+      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(): Element | null {
+    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: Element | null, visible = true): boolean {
+    const was = this._focus;
+    if (was.element === element && (!element || was.visible === visible)) {
+      return false;
+    }
+    const within = new Set<Element>();
+    for (
+      let at: Element | null = element;
+      at;
+      at = isElement(at.parent) ? at.parent : null
+    ) {
+      within.add(at);
+    }
+    const now: FocusState = 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`).
+   */
+  private _hoverReach(
+    was: readonly Element[],
+    now: readonly Element[],
+  ): Set<Element> | null {
+    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.
    */
-  private _hoverReach(
+  private _stateReach(
     was: readonly Element[],
     now: readonly Element[],
-  ): Set<Element> | null {
-    const cascade = this._cascade;
-    if (!cascade || !cascade.hoverLocal) return null;
+    also: Element | null,
+    touches: (el: Element) => HoverTouch,
+    anchors: (el: Element, into: Map<Element, HoverTouch>) => void,
+  ): Set<Element> {
     const before = new Set(was);
     const after = new Set(now);
     const roots = new Map<Element, HoverTouch>();
-    const flipped = (el: Element, other: Set<Element>): void => {
-      if (other.has(el)) return;
-      const touch = cascade.hoverTouches(el);
+    const flipped = (el: Element, other: Set<Element> | null): void => {
+      if (other?.has(el)) return;
+      const touch = touches(el);
       if (touch > (roots.get(el) ?? HOVER_UNTOUCHED)) roots.set(el, touch);
     };
     for (const el of was) flipped(el, after);
@@ -1576,10 +1681,14 @@ export class HtmlViewNode extends Node {
     // side is where a `:has()` is looked for from
     const deepest = (chain: readonly Element[], other: Set<Element>) => {
       const el = chain[0];
-      if (el && !other.has(el)) cascade.hoverAnchors(el, roots);
+      if (el && !other.has(el)) 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
@@ -1624,8 +1733,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.
@@ -1635,10 +1746,16 @@ 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.
    */
   private _hoverInPlace(
     reach: ReadonlySet<Element>,
-    was: readonly Element[],
+    before: PointerState,
+    beforeFocus: FocusState,
+    pseudoRules: 0 | 1 | 2,
   ): boolean {
     const cascade = this._cascade;
     const tree = this._tree;
@@ -1647,17 +1764,15 @@ export class HtmlViewNode extends Node {
     if (this._stale !== Stale.Nothing || this._laidOutWidth < 0) return false;
     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<Element, boolean>();
     const flipped = (el: Element): boolean => {
       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;
@@ -1675,6 +1790,8 @@ export class HtmlViewNode extends Node {
     let reaches = false;
     let reorders = false;
     const moving = new Set<Element>();
+    /** Whether a control's box was restyled: its widget is told. */
+    let widgets = false;
     const styleOf = (el: Element): ComputedStyle | null => {
       const kept = tree.styles.get(el);
       if (!kept) return null;
@@ -1711,7 +1828,39 @@ export class HtmlViewNode extends Node {
       styleOf(el);
       if (refused) return false;
     }
-    if (!changed.size && pseudoRules === HOVER_PSEUDO_NONE) return true;
+    // 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: [Box, ShapeStyles | null][] = [];
+    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 = (): Rect[] => {
+      const inks: Rect[] = [];
+      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
@@ -1786,11 +1935,20 @@ export class HtmlViewNode extends Node {
         if (!style) 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)) return false;
+        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);
       } else if (above) {
@@ -1830,7 +1988,10 @@ export class HtmlViewNode extends Node {
         }
       }
     }
-    if (!restyled.length) return true;
+    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
@@ -1883,6 +2044,7 @@ 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
@@ -1906,7 +2068,7 @@ export class HtmlViewNode extends Node {
         relayout = true;
       }
     }
-    if (moved.length) this._reportControls();
+    if (moved.length || widgets) this._reportControls();
     if (relayout) {
       this._invalidate(Stale.Layout);
       return true;
@@ -1923,14 +2085,7 @@ export class HtmlViewNode extends Node {
    *  of: made on the first move over a tree, which is one walk of it. */
   private _firstBoxes: { tree: BoxTree; of: Map<Element, Box> } | null = 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.
-   */
-  private _blocksOf(tree: BoxTree, changed: Iterable<Element>): Box[] {
+  private _firstBoxesOf(tree: BoxTree): Map<Element, Box> {
     let index = this._firstBoxes;
     if (index?.tree !== tree) {
       const of = new Map<Element, Box>();
@@ -1944,9 +2099,21 @@ 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.
+   */
+  private _blocksOf(tree: BoxTree, changed: Iterable<Element>): Box[] {
+    const first = this._firstBoxesOf(tree);
     const blocks = new Set<Box>();
     for (const el of changed) {
-      let box: Box | null = index.of.get(el) ?? null;
+      let box: Box | null = first.get(el) ?? null;
       while (
         box?.parent &&
         (box.kind === 'inline' || box.kind === 'text' || box.kind === 'break')