@react-x11/components 0.14.1 → 0.16.0

package/src/html/resources.ts

@@ -182,7 +182,7 @@ export class ResourceStore {
       if (!synchronous) this._changed('image');
       return;
     }
-    const svg = svgFromBytes(result.bytes);
+    const svg = svgFromBytes(result.bytes, fragmentOf(url));
     if (svg) {
       entry.image = svg;
       entry.size = svg.intrinsics;
@@ -323,3 +323,15 @@ function decodeImage(bytes: Uint8Array): ImageLike | Promise<ImageLike> | null {
     return null;
   }
 }
+
+/** A URL's fragment, decoded, or '' where it has none. */
+function fragmentOf(url: string): string {
+  const hash = url.indexOf('#');
+  if (hash < 0) return '';
+  const fragment = url.slice(hash + 1);
+  try {
+    return decodeURIComponent(fragment);
+  } catch {
+    return fragment;
+  }
+}

package/src/html/svg.ts

@@ -20,6 +20,7 @@ import { isSvgRoot, rawTextOf } from './dom.js';
 import { Cascade } from './css/cascade.js';
 import { parseMediaQuery, parseStylesheet } from './css/parse.js';
 import type { Stylesheet } from './css/parse.js';
+import { useHref } from './css/shapes.js';
 import type { ShapeStyle, ShapeStyles } from './css/shapes.js';
 import type { RootLook } from './css/style.js';
 import { inkColor, isTransparent, parseColor } from './css/values.js';
@@ -121,6 +122,36 @@ export function svgIntrinsics(el: Element, fontSize = 16): IntrinsicSize {
   return { width, height, ratio };
 }
 
+/**
+ * An image's size, in device pixels, where nothing sets it: CSS Images 3's
+ * default sizing algorithm (5.3.3), against a default object size of
+ * `width` by `height` device pixels — a background's positioning area, a
+ * list marker's square. Its own size where it has one; the dimension it
+ * lacks from its ratio, or else from the default; and one with a ratio
+ * alone as large as fits in the default. An SVG may be any of these, and a
+ * raster image is the first. `scale` is device pixels per CSS pixel, which
+ * the image's own size is in.
+ */
+export function concreteSize(
+  size: IntrinsicSize,
+  width: number,
+  height: number,
+  scale: number,
+): [number, number] {
+  const { ratio } = size;
+  const w = size.width === null ? null : size.width * scale;
+  const h = size.height === null ? null : size.height * scale;
+  if (w !== null && h !== null) return [w, h];
+  if (w !== null) return [w, ratio > 0 ? w / ratio : height];
+  if (h !== null) return [ratio > 0 ? h * ratio : width, h];
+  if (ratio > 0) {
+    return width / height > ratio
+      ? [height * ratio, height]
+      : [width, width / ratio];
+  }
+  return [width, height];
+}
+
 /** The slice of ntk's `SvgView` this draws with. */
 interface SvgViewLike {
   naturalWidth: number;
@@ -155,6 +186,66 @@ interface ClipContext {
   fillRect?(x: number, y: number, w: number, h: number): void;
 }
 
+/** A context as a drawing it is lent to sees it (`lend`). */
+interface Lent {
+  readonly ctx: ClipContext;
+  /** The saves the drawing has made on it and not restored. */
+  open: number;
+}
+
+const LENT = new WeakMap<object, Lent>();
+
+/**
+ * The context a drawing is lent: the same context, keeping count of the
+ * saves the drawing makes on it, so that whatever it leaves saved can be
+ * restored after it, and making none of the restores it makes past them.
+ *
+ * `SvgView` saves the context as it starts to draw, and around an element
+ * with a `transform`, and restores in no `finally`: an element it throws
+ * on — a colour it cannot read, `fill="var(--c)"` — leaves those saves
+ * open. The restore after the drawing then took the last of them for its
+ * own save, and the clip to the drawing's box was left on the window's
+ * context: everything a later paint drew, in that frame and every frame
+ * after, was cut to a sixteen-pixel icon. nextjs.org's blog drew its
+ * heading, the icon beside it, and nothing more.
+ */
+function lend(ctx: ClipContext): Lent {
+  const known = LENT.get(ctx);
+  if (known) return known;
+  const bound = new WeakMap<object, unknown>();
+  const save = () => {
+    ctx.save();
+    lent.open += 1;
+  };
+  const restore = () => {
+    if (lent.open === 0) return;
+    lent.open -= 1;
+    ctx.restore();
+  };
+  const lent: Lent = {
+    open: 0,
+    ctx: new Proxy(ctx, {
+      get(target, key) {
+        if (key === 'save') return save;
+        if (key === 'restore') return restore;
+        // on the context itself: an accessor, a method and a private field
+        // all see the context they belong to
+        const value: unknown = Reflect.get(target, key);
+        if (typeof value !== 'function') return value;
+        let method = bound.get(value);
+        if (!method) {
+          method = value.bind(target);
+          bound.set(value, method);
+        }
+        return method;
+      },
+      set: (target, key, value) => Reflect.set(target, key, value),
+    }),
+  };
+  LENT.set(ctx, lent);
+  return lent;
+}
+
 const ALIGN = /^x(Min|Mid|Max)Y(Min|Mid|Max)$/;
 const AT: Record<string, number> = { Min: 0, Mid: 0.5, Max: 1 };
 
@@ -167,12 +258,14 @@ export class SvgDrawing {
   readonly intrinsics: IntrinsicSize;
   private readonly _root: Element;
   private _view: SvgViewLike | null = null;
-  /** What the view was last handed the tree for: the root's child count
-   *  and last child — a streamed document grows an inline drawing after its
-   *  first paint — and, for a drawing with percentages in it, the viewport
-   *  they were resolved against. */
+  /** What the view was last handed the tree for: the root's child count,
+   *  and where the root and each element outside it a `<use>` drew ended —
+   *  a streamed document grows an inline drawing after its first paint,
+   *  and a sprite's symbol after the first icon drawn from it — and, for a
+   *  drawing with percentages in it, the viewport they were resolved
+   *  against. */
   private _seen = -1;
-  private _seenLast: ChildNode | null = null;
+  private _seenEnds: End[] = [];
   private _seenViewport = '';
   /** The `fill` and `stroke` the view's tree was last given its root's,
    *  and what the document's rules gave the elements in it. */
@@ -204,10 +297,20 @@ export class SvgDrawing {
     { cascade: Cascade; own: Map<string, ImagePaint | null> }
   >();
 
-  constructor(root: Element, intrinsics: IntrinsicSize, standalone = false) {
+  /** The element an SVG image's URL names by its fragment, its own
+   *  `:target`: a sprite sheet shows the icon `image.svg#icon` names. */
+  private readonly _target: Element | null;
+
+  constructor(
+    root: Element,
+    intrinsics: IntrinsicSize,
+    standalone = false,
+    target: Element | null = null,
+  ) {
     this._root = root;
     this.intrinsics = intrinsics;
     this._standalone = standalone;
+    this._target = target;
   }
 
   /**
@@ -261,14 +364,38 @@ export class SvgDrawing {
     }
     const box = viewBoxOf(root);
     // the viewport in user units, which a percentage is of
+    let vw = w / scale;
+    let vh = h / scale;
+    // An image with no `viewBox` is laid out at its own size, along an
+    // axis it has one on, and stretched to the rectangle along it, as a
+    // raster image is: Blink gives it a `viewBox` of its own size that
+    // `preserveAspectRatio: none` fits. Drawn at its own size, an icon of
+    // `width="24" height="24"` shown 48 wide was a quarter of its box.
+    let kx = 1;
+    let ky = 1;
+    if (!box && this._standalone) {
+      const own = this.intrinsics;
+      if (own.width !== null && own.width > 0) {
+        kx = vw / own.width;
+        vw = own.width;
+      }
+      if (own.height !== null && own.height > 0) {
+        ky = vh / own.height;
+        vh = own.height;
+      }
+    }
     const paint =
       (fill === null ? '' : `fill:${fill};`) +
       (stroke === null ? '' : `stroke:${stroke};`);
     const view = box
       ? this._viewFor(box[2], box[3], paint, shapes)
-      : this._viewFor(w / scale, h / scale, paint, shapes);
+      : this._viewFor(vw, vh, paint, shapes);
     if (!view) return;
     ctx.save();
+    // the view draws on the context lent, which counts its saves
+    const lent = lend(ctx);
+    const outer = lent.open;
+    lent.open = 0;
     try {
       ctx.beginPath();
       ctx.rect(x, y, w, h);
@@ -276,11 +403,11 @@ export class SvgDrawing {
       const opts = color ? { color } : undefined;
       if (!box) {
         view.draw(
-          ctx,
+          lent.ctx,
           x,
           y,
-          view.naturalWidth * scale,
-          view.naturalHeight * scale,
+          view.naturalWidth * scale * kx,
+          view.naturalHeight * scale * ky,
           opts,
         );
       } else {
@@ -289,7 +416,7 @@ export class SvgDrawing {
           .split(/\s+/);
         if (fit[0] === 'defer') fit.shift();
         if (fit[0] === 'none') {
-          view.draw(ctx, x, y, w, h, opts);
+          view.draw(lent.ctx, x, y, w, h, opts);
         } else {
           const align = ALIGN.exec(fit[0] ?? '') ?? ['xMidYMid', 'Mid', 'Mid'];
           const sx = w / box[2];
@@ -298,7 +425,7 @@ export class SvgDrawing {
           const dw = box[2] * s;
           const dh = box[3] * s;
           view.draw(
-            ctx,
+            lent.ctx,
             x + (w - dw) * AT[align[1]],
             y + (h - dh) * AT[align[2]],
             dw,
@@ -312,6 +439,11 @@ export class SvgDrawing {
       // out of paint on every frame, where nothing could catch it
       this._failed = true;
     } finally {
+      // what the drawing saved and did not restore, before this one's own
+      // save — which the restore after it would otherwise have taken, and
+      // this one's clip been left on the window's context (`lend`)
+      for (; lent.open > 0; lent.open -= 1) ctx.restore();
+      lent.open = outer;
       ctx.restore();
     }
   }
@@ -375,6 +507,7 @@ export class SvgDrawing {
         null,
         null,
         this._root,
+        this._target,
       );
       entry = { cascade, own: new Map() };
       this._cascades.set(made, entry);
@@ -424,12 +557,14 @@ export class SvgDrawing {
   ): SvgViewLike | null {
     const root = this._root;
     const count = root.children.length;
-    const last = root.lastChild;
-    // more of the document has arrived since a `<use>` found nothing
+    // more of the document has arrived since a `<use>` found nothing, or
+    // more of what the tree was read from: the drawing, a group in it, or
+    // a symbol outside it that a chunk ended halfway through
     const arrived =
-      this._missingAt !== undefined &&
-      lastNode(documentOf(root)) !== this._missingAt;
-    const grown = count !== this._seen || last !== this._seenLast || arrived;
+      (this._missingAt !== undefined &&
+        lastNode(documentOf(root)) !== this._missingAt) ||
+      this._seenEnds.some(moved);
+    const grown = count !== this._seen || arrived;
     if (grown || this._percent === null) {
       this._percent = hasPercent(root);
       this._uses = needsExpanding(root);
@@ -452,16 +587,20 @@ export class SvgDrawing {
     }
     try {
       const view = this._view ?? new View(null);
-      const missing = { any: false };
+      const reached: Reached = { missing: false, outside: new Set() };
       const tree =
         sized || shapes || root.name.includes(':')
-          ? copyTree(root, sized ? [width, height] : null, missing, shapes)
+          ? copyTree(root, sized ? [width, height] : null, reached, shapes)
           : root;
       view.setSvgDom(paint ? withPaint(tree, paint) : tree);
-      this._missingAt = missing.any ? lastNode(documentOf(root)) : undefined;
+      this._missingAt = reached.missing
+        ? lastNode(documentOf(root))
+        : undefined;
+      const ends = [endOf(root)];
+      for (const el of reached.outside) ends.push(endOf(el));
       this._view = view;
       this._seen = count;
-      this._seenLast = last;
+      this._seenEnds = ends;
       this._seenViewport = viewport;
       this._seenPaint = painted;
       return view;
@@ -641,13 +780,6 @@ 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>();
@@ -667,10 +799,10 @@ function idsUnder(root: Element): Map<string, Element> {
 /**
  * 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`).
+ * a `<symbol>` as its children where they are, with the `<use>`'s paint.
+ * 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` or a paint of its own are drawn from a copy (`copyTree`).
  */
 function needsExpanding(root: Element): boolean {
   let ids: Map<string, Element> | null = null;
@@ -679,12 +811,15 @@ function needsExpanding(root: Element): boolean {
       if (child.type !== 'tag') continue;
       const tag = child as Element;
       if (localName(tag.name) === 'use') {
-        const id = useTarget(tag);
+        const id = useHref(tag);
         if (id !== null) {
           ids ??= idsUnder(root);
           const target = ids.get(id);
           if (!target) return true;
-          if (localName(target.name) === 'symbol' && viewBoxOf(target)) {
+          if (
+            localName(target.name) === 'symbol' &&
+            (viewBoxOf(target) || symbolOwn(target))
+          ) {
             return true;
           }
         }
@@ -710,6 +845,29 @@ function lastNode(top: ParentNode): ChildNode | null {
   return last;
 }
 
+/** Where a part of a document ends: its last node, and the length of that
+ *  node's text where it is text, since a chunk's text goes on the end of
+ *  the text before it (domhandler's `ontext`) and leaves the node as it
+ *  was. What a document that is still arriving appends to the part moves
+ *  it, and what it appends after the part does not. */
+interface End {
+  top: ParentNode;
+  last: ChildNode | null;
+  text: number;
+}
+
+function endOf(top: ParentNode): End {
+  const last = lastNode(top);
+  return { top, last, text: last?.type === 'text' ? last.data.length : -1 };
+}
+
+/** Whether more of a part has arrived since its `End` was taken. */
+function moved(end: End): boolean {
+  const last = lastNode(end.top);
+  if (last !== end.last) return true;
+  return last?.type === 'text' && last.data.length !== end.text;
+}
+
 /** 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();
@@ -772,6 +930,51 @@ const USE_PLACEMENT = new Set([
   'height',
 ]);
 
+/** A `<symbol>`'s attributes that paint what is in it: its presentation
+ *  attributes and its `style` (SVG 2, 6.3). Not where it goes, the viewport
+ *  it makes or a name, which a symbol's copy is no group to have. */
+const SYMBOL_PAINTS = new Set([
+  'style',
+  'fill',
+  'fill-opacity',
+  'fill-rule',
+  'stroke',
+  'stroke-width',
+  'stroke-linecap',
+  'stroke-linejoin',
+  'stroke-miterlimit',
+  'stroke-dasharray',
+  'stroke-dashoffset',
+  'stroke-opacity',
+  'color',
+  'opacity',
+  'visibility',
+  'display',
+  'font-family',
+  'font-size',
+  'font-style',
+  'font-weight',
+  'text-anchor',
+]);
+
+/** A `<symbol>`'s own attributes that paint what is in it, or null where
+ *  it has none: Chrome draws a sprite's `<symbol fill="…">` in that fill,
+ *  where `SvgView` draws a symbol's children alone. */
+function symbolOwn(symbol: Element): Record<string, string> | null {
+  let kept: Record<string, string> | null = null;
+  for (const name in symbol.attribs) {
+    if (SYMBOL_PAINTS.has(name)) (kept ??= {})[name] = symbol.attribs[name];
+  }
+  return kept;
+}
+
+/** What a copy of a drawing reached outside its root: whether a `<use>`
+ *  in it found nothing, and the elements one was drawn from. */
+interface Reached {
+  missing: boolean;
+  outside: Set<Element>;
+}
+
 /**
  * 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
@@ -781,8 +984,9 @@ const USE_PLACEMENT = new Set([
  * 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.
+ * drawing's where it has none. `reached` is told where one refers to an
+ * element the document does not have, and of each element outside the root
+ * that one was drawn from.
  *
  * And with what the document's rules give each element (`shapes`), where
  * `SvgView` reads an element's own: at the end of its `style`, over its
@@ -790,12 +994,15 @@ const USE_PLACEMENT = new Set([
  * cascade that made them has weighed already. An element a rule gives
  * `display: none` is left out, with what is in it, and a shape one hides
  * — `visibility` is inherited, and a shape in a hidden group may be shown
- * again — is left out alone.
+ * again — is left out alone. What a `<use>` draws has what the rules give
+ * its copy (`ShapeStyles.used`), which may not be what they give the
+ * element where it stands, so where they give anything, every `<use>` is
+ * drawn from a copy here.
  */
 function copyTree(
   root: Element,
   viewport: [number, number] | null,
-  missing?: { any: boolean },
+  reached?: Reached,
   shapes: ShapeStyles | null = null,
 ): Element {
   const colon = root.name.indexOf(':');
@@ -811,25 +1018,31 @@ function copyTree(
     resolve: boolean,
     depth: number,
     hidden: boolean,
+    /** What the rules give the `<use>`. */
+    own: ShapeStyle | undefined,
   ): Element | null => {
-    const id = useTarget(use);
+    const id = useHref(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;
+      if (reached) reached.missing = true;
       return null;
     }
+    if (!inside) reached?.outside.add(target);
     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 kept = symbol ? symbolOwn(target) : null;
+    // one of the root's own that `SvgView` draws as it is: with no
+    // viewport to fit, no paint of a symbol's own, and no rule's styles
+    if (inside && !box && !kept && !shapes) return null;
+    // what the rules give the copy, element by element
+    const styles = shapes?.used?.get(use) ?? null;
     const attribs: Record<string, string> = {};
     for (const name in use.attribs) {
       if (!USE_PLACEMENT.has(name)) attribs[name] = use.attribs[name];
     }
-    const own = shapes?.of.get(use);
     if (own) restyle(attribs, own);
     const x = parseFloat(use.attribs.x ?? '') || 0;
     const y = parseFloat(use.attribs.y ?? '') || 0;
@@ -857,17 +1070,38 @@ function copyTree(
     // 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) copyInto(children, target, within, depth + 1, hidden);
-    else if (shown(target, hidden)) {
-      children.push(copy(target, within, depth + 1, hidden));
+    if (symbol) {
+      // The symbol is the top of the copy, and paints what is in it: its
+      // attributes, and what the rules give it there. `SvgView` draws a
+      // symbol's children alone, so they go in a group that is it. Where
+      // it stands a symbol is drawn by nobody, so `display: none` takes
+      // nothing from it there (`UNDRAWN`); at the top of a copy it takes
+      // the copy, as Chrome has it.
+      const mine = styles?.get(target);
+      const inner = hiddenIn(mine, hidden);
+      if (mine?.display !== 'none') {
+        copyInto(children, target, within, depth + 1, inner, styles);
+      }
+      if (kept || mine) {
+        const paints = { ...kept };
+        if (mine) restyle(paints, mine);
+        const group = new Element('g', paints, children.splice(0));
+        children.push(group);
+      }
+    } else if (shown(target, hidden, styles)) {
+      children.push(copy(target, within, depth + 1, hidden, styles));
     }
     return new Element('g', attribs, children);
   };
   /** Whether an element is drawn at all, in a group that is hidden or
    *  not: one no rule gives `display: none`, and no shape a rule hides. */
-  const shown = (el: Element, hidden: boolean): boolean => {
-    if (!shapes) return true;
-    const own = shapes.of.get(el);
+  const shown = (
+    el: Element,
+    hidden: boolean,
+    styles: ReadonlyMap<Element, ShapeStyle> | null,
+  ): boolean => {
+    if (!styles) return true;
+    const own = styles.get(el);
     const name = localName(el.name);
     if (own?.display === 'none' && !UNDRAWN.has(name)) return false;
     return !(hiddenIn(own, hidden) && HIDEABLE.has(name));
@@ -878,11 +1112,12 @@ function copyTree(
     resolve: boolean,
     depth: number,
     hidden: boolean,
+    styles: ReadonlyMap<Element, ShapeStyle> | null,
   ): void => {
     for (const child of el.children) {
       if (child.type === 'tag') {
-        if (shown(child as Element, hidden)) {
-          children.push(copy(child as Element, resolve, depth, hidden));
+        if (shown(child as Element, hidden, styles)) {
+          children.push(copy(child as Element, resolve, depth, hidden, styles));
         }
       } else if (child.type === 'text') children.push(new Text(child.data));
     }
@@ -893,11 +1128,14 @@ function copyTree(
     depth = 0,
     /** Whether the element inherits a `visibility` of `hidden`. */
     hidden = false,
+    /** What the rules give the elements of the tree it is in: the
+     *  drawing's, or a `<use>`'s copy's. */
+    styles: ReadonlyMap<Element, ShapeStyle> | null = shapes?.of ?? null,
   ): Element => {
-    const own = shapes?.of.get(el);
+    const own = styles?.get(el);
     hidden = hiddenIn(own, hidden);
     if (localName(el.name) === 'use') {
-      const group = expand(el, resolve, depth, hidden);
+      const group = expand(el, resolve, depth, hidden, own);
       if (group) return group;
     }
     const here = resolve && !OWN_UNITS.has(localName(el.name));
@@ -916,7 +1154,7 @@ function copyTree(
       }
     }
     const children: ChildNode[] = [];
-    copyInto(children, el, here, depth, hidden);
+    copyInto(children, el, here, depth, hidden, styles);
     return new Element(strip(el.name), attribs, children);
   };
   return copy(root, true);
@@ -994,7 +1232,10 @@ function restyle(attribs: Record<string, string>, own: ShapeStyle): void {
  * which is how a PNG or a JPEG goes on to the image decoder. Nothing names
  * the type, so it is sniffed: markup, with an `<svg>` root.
  */
-export function svgFromBytes(bytes: Uint8Array): SvgDrawing | null {
+export function svgFromBytes(
+  bytes: Uint8Array,
+  fragment = '',
+): SvgDrawing | null {
   let i = bytes[0] === 0xef && bytes[1] === 0xbb && bytes[2] === 0xbf ? 3 : 0;
   while (
     bytes[i] === 0x20 ||
@@ -1010,7 +1251,9 @@ export function svgFromBytes(bytes: Uint8Array): SvgDrawing | null {
   try {
     const doc = parseDocument(text, { xmlMode: true });
     const root = findRoot(doc.children);
-    return root ? new SvgDrawing(root, svgIntrinsics(root), true) : null;
+    if (!root) return null;
+    const target = fragment ? elementById(doc, fragment) : null;
+    return new SvgDrawing(root, svgIntrinsics(root), true, target);
   } catch {
     return null;
   }