@react-x11/components 0.14.1 → 0.16.0

package/dist/html/svg.js

@@ -18,6 +18,7 @@ import * as ntk from 'react-x11/ntk';
 import { isSvgRoot, rawTextOf } from './dom.js';
 import { Cascade } from './css/cascade.js';
 import { parseMediaQuery, parseStylesheet } from './css/parse.js';
+import { useHref } from './css/shapes.js';
 import { inkColor, isTransparent, parseColor } from './css/values.js';
 export { isSvgRoot };
 function svgAttr(el, name) {
@@ -102,10 +103,93 @@ export function svgIntrinsics(el, fontSize = 16) {
     }
     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, width, height, scale) {
+    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];
+}
 function svgViewClass() {
     const ctor = ntk.SvgView;
     return typeof ctor === 'function' ? ctor : null;
 }
+const LENT = new WeakMap();
+/**
+ * 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) {
+    const known = LENT.get(ctx);
+    if (known)
+        return known;
+    const bound = new WeakMap();
+    const save = () => {
+        ctx.save();
+        lent.open += 1;
+    };
+    const restore = () => {
+        if (lent.open === 0)
+            return;
+        lent.open -= 1;
+        ctx.restore();
+    };
+    const 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 = 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 = { Min: 0, Mid: 0.5, Max: 1 };
 /**
@@ -117,12 +201,14 @@ export class SvgDrawing {
     intrinsics;
     _root;
     _view = 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. */
     _seen = -1;
-    _seenLast = null;
+    _seenEnds = [];
     _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. */
@@ -150,10 +236,14 @@ export class SvgDrawing {
      *  drawn at, and what each gave it: by the viewport it was asked at where
      *  a sheet reads the viewport, and under one key where none does. */
     _cascades = new Map();
-    constructor(root, intrinsics, 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. */
+    _target;
+    constructor(root, intrinsics, standalone = false, target = null) {
         this._root = root;
         this.intrinsics = intrinsics;
         this._standalone = standalone;
+        this._target = target;
     }
     /**
      * Draw into a rectangle — the box's content box, in device pixels —
@@ -198,21 +288,45 @@ 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);
             ctx.clip();
             const opts = color ? { color } : undefined;
             if (!box) {
-                view.draw(ctx, x, y, view.naturalWidth * scale, view.naturalHeight * scale, opts);
+                view.draw(lent.ctx, x, y, view.naturalWidth * scale * kx, view.naturalHeight * scale * ky, opts);
             }
             else {
                 const fit = (svgAttr(root, 'preserveAspectRatio') ?? '')
@@ -221,7 +335,7 @@ export class SvgDrawing {
                 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'];
@@ -230,7 +344,7 @@ export class SvgDrawing {
                     const s = fit[1] === 'slice' ? Math.max(sx, sy) : Math.min(sx, sy);
                     const dw = box[2] * s;
                     const dh = box[3] * s;
-                    view.draw(ctx, x + (w - dw) * AT[align[1]], y + (h - dh) * AT[align[2]], dw, dh, opts);
+                    view.draw(lent.ctx, x + (w - dw) * AT[align[1]], y + (h - dh) * AT[align[2]], dw, dh, opts);
                 }
             }
         }
@@ -240,6 +354,12 @@ export class SvgDrawing {
             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();
         }
     }
@@ -268,7 +388,7 @@ export class SvgDrawing {
         const made = `${scheme}|${scale}`;
         let entry = this._cascades.get(made);
         if (!entry) {
-            const cascade = new Cascade(sheets, imageLook(scheme, scale), w, h, scale, null, null, null, null, this._root);
+            const cascade = new Cascade(sheets, imageLook(scheme, scale), w, h, scale, null, null, null, null, this._root, this._target);
             entry = { cascade, own: new Map() };
             this._cascades.set(made, entry);
         }
@@ -313,11 +433,13 @@ export class SvgDrawing {
     paint = '', shapes = 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
-        const arrived = this._missingAt !== undefined &&
-            lastNode(documentOf(root)) !== this._missingAt;
-        const grown = count !== this._seen || last !== this._seenLast || arrived;
+        // 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) ||
+            this._seenEnds.some(moved);
+        const grown = count !== this._seen || arrived;
         if (grown || this._percent === null) {
             this._percent = hasPercent(root);
             this._uses = needsExpanding(root);
@@ -338,15 +460,20 @@ export class SvgDrawing {
         }
         try {
             const view = this._view ?? new View(null);
-            const missing = { any: false };
+            const 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;
@@ -504,12 +631,6 @@ function hasPercent(root) {
     };
     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) {
-    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) {
     const ids = new Map();
@@ -530,10 +651,10 @@ function idsUnder(root) {
 /**
  * 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) {
     let ids = null;
@@ -543,13 +664,14 @@ function needsExpanding(root) {
                 continue;
             const tag = child;
             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;
                     }
                 }
@@ -575,6 +697,17 @@ function lastNode(top) {
         last = last.lastChild;
     return last;
 }
+function endOf(top) {
+    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) {
+    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, id) {
     const stack = [...top.children].reverse();
@@ -630,6 +763,43 @@ const USE_PLACEMENT = new Set([
     'width',
     '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) {
+    let kept = null;
+    for (const name in symbol.attribs) {
+        if (SYMBOL_PAINTS.has(name))
+            (kept ??= {})[name] = symbol.attribs[name];
+    }
+    return kept;
+}
 /**
  * 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
@@ -639,8 +809,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
@@ -648,9 +819,12 @@ 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, viewport, missing, shapes = null) {
+function copyTree(root, viewport, reached, shapes = null) {
     const colon = root.name.indexOf(':');
     const prefix = colon < 0 ? null : `${root.name.slice(0, colon)}:`;
     const strip = (name) => prefix && name.startsWith(prefix) ? name.slice(prefix.length) : name;
@@ -658,29 +832,36 @@ function copyTree(root, viewport, missing, shapes = null) {
         ? Math.sqrt((viewport[0] ** 2 + viewport[1] ** 2) / 2)
         : 0;
     let ids = null;
-    const expand = (use, resolve, depth, hidden) => {
-        const id = useTarget(use);
+    const expand = (use, resolve, depth, hidden, 
+    /** What the rules give the `<use>`. */
+    own) => {
+        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)
+        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 = {};
         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;
@@ -703,29 +884,47 @@ function copyTree(root, viewport, missing, shapes = null) {
         // a length in a symbol with a `viewBox` is of that, and left as it is
         const within = resolve && !box;
         const children = [];
-        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, hidden) => {
-        if (!shapes)
+    const shown = (el, hidden, styles) => {
+        if (!styles)
             return true;
-        const own = shapes.of.get(el);
+        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));
     };
-    const copyInto = (children, el, resolve, depth, hidden) => {
+    const copyInto = (children, el, resolve, depth, hidden, styles) => {
         for (const child of el.children) {
             if (child.type === 'tag') {
-                if (shown(child, hidden)) {
-                    children.push(copy(child, resolve, depth, hidden));
+                if (shown(child, hidden, styles)) {
+                    children.push(copy(child, resolve, depth, hidden, styles));
                 }
             }
             else if (child.type === 'text')
@@ -734,11 +933,14 @@ function copyTree(root, viewport, missing, shapes = null) {
     };
     const copy = (el, resolve, depth = 0, 
     /** Whether the element inherits a `visibility` of `hidden`. */
-    hidden = false) => {
-        const own = shapes?.of.get(el);
+    hidden = false, 
+    /** What the rules give the elements of the tree it is in: the
+     *  drawing's, or a `<use>`'s copy's. */
+    styles = shapes?.of ?? null) => {
+        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;
         }
@@ -760,7 +962,7 @@ function copyTree(root, viewport, missing, shapes = null) {
             }
         }
         const children = [];
-        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);
@@ -839,7 +1041,7 @@ function restyle(attribs, own) {
  * 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) {
+export function svgFromBytes(bytes, fragment = '') {
     let i = bytes[0] === 0xef && bytes[1] === 0xbb && bytes[2] === 0xbf ? 3 : 0;
     while (bytes[i] === 0x20 ||
         bytes[i] === 0x09 ||
@@ -855,7 +1057,10 @@ export function svgFromBytes(bytes) {
     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;