@react-x11/components 0.13.0 → 0.14.0

package/src/html/svg.ts

@@ -14,7 +14,7 @@
 // as `preserveAspectRatio` says, and clipped to it.
 import { parseDocument } from 'htmlparser2';
 import { Element, Text } from 'domhandler';
-import type { ChildNode } from 'domhandler';
+import type { ChildNode, ParentNode } from 'domhandler';
 import * as ntk from 'react-x11/ntk';
 import { isSvgRoot } from './dom.js';
 import { inkColor, isTransparent, parseColor } from './css/values.js';
@@ -183,9 +183,18 @@ export class SvgDrawing {
   private _seen = -1;
   private _seenLast: ChildNode | null = null;
   private _seenViewport = '';
+  /** The `fill` and `stroke` the view's tree was last given its root's. */
+  private _seenPaint = '';
   /** Whether a length in the tree is a percentage of the viewport; null
    *  until the tree is first read. */
   private _percent: boolean | null = null;
+  /** Whether a `<use>` in the tree is one `SvgView` cannot draw as it
+   *  stands (`needsExpanding`). */
+  private _uses = false;
+  /** The document's last node when a `<use>` was last looked up and its
+   *  element not found: a streamed document may bring it yet, and has
+   *  when its last node is another. Undefined where none was missing. */
+  private _missingAt: ChildNode | null | undefined = undefined;
   private _failed = false;
   /** An SVG image's own document, rather than an element of this one. */
   private readonly _standalone: boolean;
@@ -203,7 +212,11 @@ export class SvgDrawing {
    * Draw into a rectangle — the box's content box, in device pixels —
    * clipped to it. The `viewBox`, where there is one, is fitted to it as
    * `preserveAspectRatio` says; without one a user unit is a CSS pixel,
-   * which is `scale` device pixels. `color` is `currentColor`.
+   * which is `scale` device pixels. `color` is `currentColor`, and `fill`
+   * and `stroke` the root's own where the document's styles set them (SVG
+   * 2, 13.2): they are properties, which a style sheet's rule sets over
+   * the presentation attribute, and what is in the drawing inherits them
+   * from its root.
    */
   draw(
     ctx: ClipContext,
@@ -213,6 +226,8 @@ export class SvgDrawing {
     h: number,
     scale: number,
     color?: string,
+    fill: string | null = null,
+    stroke: string | null = null,
   ): void {
     if (this._failed || !(w > 0 && h > 0)) return;
     // the mock backend has no path API, and SvgView draws paths
@@ -242,9 +257,12 @@ export class SvgDrawing {
     }
     const box = viewBoxOf(root);
     // the viewport in user units, which a percentage is of
+    const paint =
+      (fill === null ? '' : `fill:${fill};`) +
+      (stroke === null ? '' : `stroke:${stroke};`);
     const view = box
-      ? this._viewFor(box[2], box[3])
-      : this._viewFor(w / scale, h / scale);
+      ? this._viewFor(box[2], box[3], paint)
+      : this._viewFor(w / scale, h / scale, paint);
     if (!view) return;
     ctx.save();
     try {
@@ -294,14 +312,32 @@ export class SvgDrawing {
     }
   }
 
-  private _viewFor(width: number, height: number): SvgViewLike | null {
+  private _viewFor(
+    width: number,
+    height: number,
+    /** The root's `fill` and `stroke` as declarations, or none. */
+    paint = '',
+  ): SvgViewLike | null {
     const root = this._root;
     const count = root.children.length;
     const last = root.lastChild;
-    const grown = count !== this._seen || last !== this._seenLast;
-    if (grown || this._percent === null) this._percent = hasPercent(root);
-    const viewport = this._percent ? `${width}x${height}` : '';
-    if (this._view && !grown && viewport === this._seenViewport) {
+    // more of the document has arrived since a `<use>` found nothing
+    const arrived =
+      this._missingAt !== undefined &&
+      lastNode(documentOf(root)) !== this._missingAt;
+    const grown = count !== this._seen || last !== this._seenLast || arrived;
+    if (grown || this._percent === null) {
+      this._percent = hasPercent(root);
+      this._uses = needsExpanding(root);
+    }
+    const sized = this._percent || this._uses;
+    const viewport = sized ? `${width}x${height}` : '';
+    if (
+      this._view &&
+      !grown &&
+      viewport === this._seenViewport &&
+      paint === this._seenPaint
+    ) {
       return this._view;
     }
     const View = svgViewClass();
@@ -311,15 +347,18 @@ export class SvgDrawing {
     }
     try {
       const view = this._view ?? new View(null);
-      view.setSvgDom(
-        this._percent || root.name.includes(':')
-          ? copyTree(root, this._percent ? [width, height] : null)
-          : root,
-      );
+      const missing = { any: false };
+      const tree =
+        sized || root.name.includes(':')
+          ? copyTree(root, sized ? [width, height] : null, missing)
+          : root;
+      view.setSvgDom(paint ? painted(tree, paint) : tree);
+      this._missingAt = missing.any ? lastNode(documentOf(root)) : undefined;
       this._view = view;
       this._seen = count;
       this._seenLast = last;
       this._seenViewport = viewport;
+      this._seenPaint = paint;
       return view;
     } catch {
       this._failed = true;
@@ -328,6 +367,21 @@ export class SvgDrawing {
   }
 }
 
+/**
+ * A drawing's root with its `fill` and `stroke` the document's: a copy of
+ * the root, its children the same ones, with the declarations at the end of
+ * its `style` — where `SvgView` reads a root's paint, over its presentation
+ * attributes, for what is under it to inherit.
+ */
+function painted(root: Element, paint: string): Element {
+  const style = root.attribs.style;
+  return new Element(
+    root.name,
+    { ...root.attribs, style: style ? `${style};${paint}` : paint },
+    root.children,
+  );
+}
+
 /**
  * The colour an SVG image's root element sets as its background, in its
  * `style` attribute — the one place an image can say it, since
@@ -413,13 +467,154 @@ function hasPercent(root: Element): boolean {
   return walk(root);
 }
 
+/** The element a `<use>` refers to by a fragment, its id: one in another
+ *  document is none here, where nothing is fetched for a drawing. */
+function useTarget(el: Element): string | null {
+  const href = el.attribs.href ?? el.attribs['xlink:href'] ?? '';
+  return href.length > 1 && href.startsWith('#') ? href.slice(1) : null;
+}
+
+/** The elements under a root by their ids, the first of each. */
+function idsUnder(root: Element): Map<string, Element> {
+  const ids = new Map<string, Element>();
+  const walk = (el: Element): void => {
+    for (const child of el.children) {
+      if (child.type !== 'tag') continue;
+      const tag = child as Element;
+      const id = tag.attribs.id;
+      if (id && !ids.has(id)) ids.set(id, tag);
+      walk(tag);
+    }
+  };
+  walk(root);
+  return ids;
+}
+
+/**
+ * Whether a `<use>` under the root is one `SvgView` cannot draw as it
+ * stands: it looks a reference up among the root's own elements, and draws
+ * a `<symbol>` as its children where they are. So one to an element
+ * outside the root — an icon sprite's, a hidden `<svg>` of symbols at the
+ * top of the page — and one to a symbol with a `viewBox` of its own are
+ * drawn from a copy (`copyTree`).
+ */
+function needsExpanding(root: Element): boolean {
+  let ids: Map<string, Element> | null = null;
+  const walk = (el: Element): boolean => {
+    for (const child of el.children) {
+      if (child.type !== 'tag') continue;
+      const tag = child as Element;
+      if (localName(tag.name) === 'use') {
+        const id = useTarget(tag);
+        if (id !== null) {
+          ids ??= idsUnder(root);
+          const target = ids.get(id);
+          if (!target) return true;
+          if (localName(target.name) === 'symbol' && viewBoxOf(target)) {
+            return true;
+          }
+        }
+      }
+      if (walk(tag)) return true;
+    }
+    return false;
+  };
+  return walk(root);
+}
+
+function documentOf(el: Element): ParentNode {
+  let top: ParentNode = el;
+  while (top.parent) top = top.parent;
+  return top;
+}
+
+/** The last node of a document, in its order: what a document that is
+ *  still arriving has another of once more of it has. */
+function lastNode(top: ParentNode): ChildNode | null {
+  let last: ChildNode | null = top.lastChild;
+  while (last && 'lastChild' in last && last.lastChild) last = last.lastChild;
+  return last;
+}
+
+/** The first element of a document with an id, in its order. */
+function elementById(top: ParentNode, id: string): Element | null {
+  const stack: ChildNode[] = [...top.children].reverse();
+  for (let node = stack.pop(); node; node = stack.pop()) {
+    if (node.type !== 'tag') continue;
+    const el = node as Element;
+    if (el.attribs.id === id) return el;
+    for (let i = el.children.length - 1; i >= 0; i -= 1) {
+      stack.push(el.children[i]);
+    }
+  }
+  return null;
+}
+
+/** How deep a `<use>` may be of a `<use>`: one that reaches itself stops. */
+const USE_DEPTH = 8;
+
+/** A `<use>`'s `width` or `height`, in user units: a number, or a
+ *  percentage of the viewport's; null for none, and for `auto`. */
+function useLength(value: string | undefined, of: number): number | null {
+  if (value === undefined) return null;
+  const n = parseFloat(value);
+  if (!Number.isFinite(n) || n < 0) return null;
+  return value.trim().endsWith('%') ? (n / 100) * of : n;
+}
+
+/** The transform that fits a `viewBox` into a viewport at `x`, `y`, as
+ *  `preserveAspectRatio` says (SVG 2, 8.2). */
+function fitTransform(
+  box: [number, number, number, number],
+  x: number,
+  y: number,
+  width: number,
+  height: number,
+  preserve: string | undefined,
+): string {
+  const fit = (preserve ?? '').trim().split(/\s+/);
+  if (fit[0] === 'defer') fit.shift();
+  let sx = width / box[2];
+  let sy = height / box[3];
+  if (fit[0] !== 'none') {
+    const align = ALIGN.exec(fit[0] ?? '') ?? ['xMidYMid', 'Mid', 'Mid'];
+    const scale = fit[1] === 'slice' ? Math.max(sx, sy) : Math.min(sx, sy);
+    x += (width - box[2] * scale) * AT[align[1]];
+    y += (height - box[3] * scale) * AT[align[2]];
+    sx = scale;
+    sy = scale;
+  }
+  return `translate(${x - box[0] * sx},${y - box[1] * sy}) scale(${sx},${sy})`;
+}
+
+/** What a `<use>` says of where its element goes, and not of how it looks:
+ *  the rest is the group's the element is drawn in. */
+const USE_PLACEMENT = new Set([
+  'href',
+  'xlink:href',
+  'x',
+  'y',
+  'width',
+  'height',
+]);
+
 /**
  * The tree `SvgView` reads, where the document's own will not do: with
  * local names — `SvgView` knows `rect`, not `svg:rect`, and a prefix is
  * dropped only where it is bound to SVG — and with its percentages resolved
- * against a viewport of `[width, height]` user units, where one is given.
+ * against a viewport of `[width, height]` user units, where one is given;
+ * and with each `<use>` that `SvgView` cannot draw (`needsExpanding`) as a
+ * group of what it refers to (SVG 2, 5.5): the element, from wherever in
+ * the document it is, or a symbol's children, its `viewBox` fitted to the
+ * viewport the `<use>` gives it — its `width` and `height`, and all of the
+ * drawing's where it has none. `missing.any` is set where one refers to an
+ * element the document does not have.
  */
-function copyTree(root: Element, viewport: [number, number] | null): Element {
+function copyTree(
+  root: Element,
+  viewport: [number, number] | null,
+  missing?: { any: boolean },
+): Element {
   const colon = root.name.indexOf(':');
   const prefix = colon < 0 ? null : `${root.name.slice(0, colon)}:`;
   const strip = (name: string): string =>
@@ -427,7 +622,69 @@ function copyTree(root: Element, viewport: [number, number] | null): Element {
   const diagonal = viewport
     ? Math.sqrt((viewport[0] ** 2 + viewport[1] ** 2) / 2)
     : 0;
-  const copy = (el: Element, resolve: boolean): Element => {
+  let ids: Map<string, Element> | null = null;
+  const expand = (
+    use: Element,
+    resolve: boolean,
+    depth: number,
+  ): Element | null => {
+    const id = useTarget(use);
+    if (id === null || depth >= USE_DEPTH) return null;
+    ids ??= idsUnder(root);
+    const inside = ids.get(id);
+    const target = inside ?? elementById(documentOf(root), id);
+    if (!target) {
+      if (missing) missing.any = true;
+      return null;
+    }
+    const symbol = localName(target.name) === 'symbol';
+    const box = symbol ? viewBoxOf(target) : null;
+    // one of the root's own with no viewport to fit: `SvgView` draws it
+    if (inside && !box) return null;
+    const attribs: Record<string, string> = {};
+    for (const name in use.attribs) {
+      if (!USE_PLACEMENT.has(name)) attribs[name] = use.attribs[name];
+    }
+    const x = parseFloat(use.attribs.x ?? '') || 0;
+    const y = parseFloat(use.attribs.y ?? '') || 0;
+    let placed = '';
+    if (box && viewport) {
+      const width =
+        useLength(use.attribs.width, viewport[0]) ??
+        useLength(target.attribs.width, viewport[0]) ??
+        viewport[0];
+      const height =
+        useLength(use.attribs.height, viewport[1]) ??
+        useLength(target.attribs.height, viewport[1]) ??
+        viewport[1];
+      placed = fitTransform(
+        box,
+        x,
+        y,
+        width,
+        height,
+        svgAttr(target, 'preserveAspectRatio'),
+      );
+    } else if (x || y) placed = `translate(${x},${y})`;
+    const transform = `${attribs.transform ?? ''} ${placed}`.trim();
+    if (transform) attribs.transform = transform;
+    // a length in a symbol with a `viewBox` is of that, and left as it is
+    const within = resolve && !box;
+    const children: ChildNode[] = [];
+    if (symbol) {
+      for (const child of target.children) {
+        if (child.type === 'tag') {
+          children.push(copy(child as Element, within, depth + 1));
+        }
+      }
+    } else children.push(copy(target, within, depth + 1));
+    return new Element('g', attribs, children);
+  };
+  const copy = (el: Element, resolve: boolean, depth = 0): Element => {
+    if (localName(el.name) === 'use') {
+      const group = expand(el, resolve, depth);
+      if (group) return group;
+    }
     const here = resolve && !OWN_UNITS.has(localName(el.name));
     const attribs = { ...el.attribs };
     if (here && viewport && el !== root) {
@@ -444,8 +701,9 @@ function copyTree(root: Element, viewport: [number, number] | null): Element {
     }
     const children: ChildNode[] = [];
     for (const child of el.children) {
-      if (child.type === 'tag') children.push(copy(child as Element, here));
-      else if (child.type === 'text') children.push(new Text(child.data));
+      if (child.type === 'tag') {
+        children.push(copy(child as Element, here, depth));
+      } else if (child.type === 'text') children.push(new Text(child.data));
     }
     return new Element(strip(el.name), attribs, children);
   };

package/src/html/widgets.ts

@@ -25,11 +25,11 @@ import type {} from 'react-x11/jsx-runtime';
 
 import { cancelLater, later } from '../internal/timers.js';
 import { hx } from './hx.js';
-import { attr, tagOf } from './dom.js';
+import { attr, isElement, tagOf } from './dom.js';
 import type { Document, Element } from './dom.js';
 import type { HtmlViewNode } from './node.js';
 import type { RootLook } from './css/style.js';
-import { buttonLabel, optionsOf, selectedOption } from './controls.js';
+import { between, buttonLabel, optionsOf, selectedOption } from './controls.js';
 import type { BareField, ControlRect } from './controls.js';
 import {
   FormState,
@@ -433,12 +433,28 @@ function renderControl(
   const readOnly = attr(el, 'readonly') !== undefined;
   // a field whose box the document draws takes its content box
   const at = rect.bare ?? rect;
+  const left = Math.round(at.x);
+  const top = Math.round(at.y);
+  const width = Math.round(at.width);
+  const height = Math.round(at.height);
+  // What the widget shows through: its own rectangle, or where the
+  // document cuts the element, what the cut leaves of it — out to where a
+  // focus ring reaches, which a clip around the element cuts as it cuts
+  // the element, and one that leaves the box whole does not.
+  const port = rect.clip
+    ? between(rect.clip, {
+        x: left - RING_REACH,
+        y: top - RING_REACH,
+        width: width + 2 * RING_REACH,
+        height: height + 2 * RING_REACH,
+      })
+    : { x: left, y: top, width, height };
   const frame: Style = {
     position: 'absolute',
-    left: Math.round(at.x),
-    top: Math.round(at.y),
-    width: Math.round(at.width),
-    height: Math.round(at.height),
+    left: left - port.x,
+    top: top - port.y,
+    width,
+    height,
     // The face and the size the box was measured in, the element's: the
     // palette's from the UA sheet, or the page's where it set its own. A
     // field inherits them, and so does a `<Button>`'s or a `<Select>`'s
@@ -452,6 +468,7 @@ function renderControl(
     ...(rect.opacity !== undefined && { opacity: rect.opacity }),
   };
   const field = rect.bare ? bareField(rect.bare) : fieldChrome(look);
+  const order = tabOrder(el);
   // A button or a select whose font the page set is the drawn control: a
   // native bezel sets its title at AppKit's size, whatever it is handed,
   // in a bezel only as tall as that title, where the box was measured for
@@ -474,6 +491,7 @@ function renderControl(
       widget = h(Checkbox, {
         checked: attr(el, 'checked') !== undefined,
         disabled,
+        ...order,
         // the element's whole box takes the press, as it does in a browser:
         // a page that sizes one over its label, invisible, means the label
         style: { width: '100%', height: '100%' },
@@ -482,6 +500,9 @@ function renderControl(
       break;
     case 'radio': {
       const value = attr(el, 'value') ?? 'on';
+      // No `tabindex` reaches a radio: core's `<Radio>` takes no props for
+      // the node it draws, as the other widgets do, and the group's box is
+      // not the one that takes the focus.
       widget = h(
         RadioGroup,
         {
@@ -496,6 +517,7 @@ function renderControl(
       widget = h(Button, {
         label: buttonLabel(el),
         disabled,
+        ...order,
         ...(ownFont && { native: false }),
         style: { width: '100%', height: '100%' },
         onPress: () => ctx.press(el),
@@ -506,7 +528,11 @@ function renderControl(
       widget = h(Select, {
         options: options.map((o) => ({ value: o.value, label: o.label })),
         value: selectedOption(el) ?? undefined,
+        // a `<select>` with nothing selected has no options, and shows
+        // none: core's "Select…" is an application's prompt, not a page's
+        placeholder: '',
         disabled,
+        ...order,
         style: rect.bare
           ? [BARE_TRIGGER, { width: '100%', height: '100%' }]
           : { width: '100%', height: '100%' },
@@ -547,6 +573,7 @@ function renderControl(
       widget = hx('textarea', {
         defaultValue: forms.value(el),
         maxLength: maxLength(el),
+        ...order,
         style: [field, { width: '100%', height: '100%' }],
         onChange: readOnly ? undefined : (ev) => typed(ev.value),
       });
@@ -557,6 +584,7 @@ function renderControl(
         defaultValue: forms.value(el),
         placeholder: attr(el, 'placeholder'),
         maxLength: maxLength(el),
+        ...order,
         // Core's word for a password field: nothing in it reaches a
         // selection, PRIMARY included.
         sensitive: type === 'password',
@@ -578,18 +606,76 @@ function renderControl(
     default:
       return null;
   }
+  // Two boxes, always: the one the widget shows through, and in it the
+  // element's. A widget the document comes to cut, or stops cutting, is
+  // the same widget in the same place in the tree, and keeps its focus
+  // and its caret.
   return hx(
     'box',
     {
       key,
-      ref: ctx.widgets.refOf(el),
-      style: frame,
       selectable: false,
+      style: {
+        position: 'absolute',
+        left: port.x,
+        top: port.y,
+        width: port.width,
+        height: port.height,
+        // cut to it, and nothing itself: a press beside the widget is the
+        // document's
+        ...(rect.clip && { overflow: 'hidden', pointerEvents: 'box-none' }),
+      },
     },
-    widget,
+    hx(
+      'box',
+      {
+        ref: ctx.widgets.refOf(el),
+        style: frame,
+        selectable: false,
+        // a control the page keeps from assistive technology is kept from
+        // it here: core leaves the node, and the widget in it, out of the
+        // accessibility tree
+        ...(ariaHidden(el) && { 'aria-hidden': true }),
+      },
+      widget,
+    ),
   );
 }
 
+/**
+ * What an element's `tabindex` says of its widget's place in the Tab order
+ * (HTML 6.6.3): a negative one is focusable — by a press, by its label, by
+ * `autofocus` — and not reached by Tab, which is core's `tabIndex={-1}`
+ * too. Radix lays a native `<select tabindex="-1" aria-hidden="true">`
+ * beside the picker it draws, cut to nothing: it was a stop the eye could
+ * not find, and Space on it opened an empty menu.
+ *
+ * Nothing else is handed over. Zero is where a control already is, and a
+ * positive one would put a page's control ahead of the application's own,
+ * whose window it is: the order between a document and what is around it
+ * is not the document's to set.
+ */
+function tabOrder(el: Element): { tabIndex: -1 } | undefined {
+  // the rules for parsing integers (HTML 2.3.4.1): white space, a sign,
+  // digits, and whatever follows them ignored
+  const m = /^[ \t\n\f\r]*([+-]?\d+)/.exec(attr(el, 'tabindex') ?? '');
+  return m && Number(m[1]) < 0 ? { tabIndex: -1 } : undefined;
+}
+
+/** Whether an element is hidden from assistive technology: `aria-hidden`
+ *  is true on it or on an element around it (WAI-ARIA 1.2, 6.6). */
+function ariaHidden(el: Element): boolean {
+  for (let at: Element | null = el; at;) {
+    if (attr(at, 'aria-hidden')?.trim().toLowerCase() === 'true') return true;
+    const parent: Element['parent'] = at.parent;
+    at = isElement(parent) ? parent : null;
+  }
+  return false;
+}
+
+/** How far past its box a widget's focus ring is drawn, and then some. */
+const RING_REACH = 8;
+
 /** A field's `maxlength`, which the widget enforces as it is typed into. */
 function maxLength(el: Element): number | undefined {
   const raw = attr(el, 'maxlength')?.trim();