@react-x11/components 0.13.0 → 0.14.1

package/dist/html/svg.js

@@ -15,7 +15,9 @@
 import { parseDocument } from 'htmlparser2';
 import { Element, Text } from 'domhandler';
 import * as ntk from 'react-x11/ntk';
-import { isSvgRoot } from './dom.js';
+import { isSvgRoot, rawTextOf } from './dom.js';
+import { Cascade } from './css/cascade.js';
+import { parseMediaQuery, parseStylesheet } from './css/parse.js';
 import { inkColor, isTransparent, parseColor } from './css/values.js';
 export { isSvgRoot };
 function svgAttr(el, name) {
@@ -56,21 +58,6 @@ function absoluteLength(value, fontSize) {
         return null;
     return px >= 0 ? px : null;
 }
-/**
- * The `width`/`height` of an inline `<svg>` as CSS: they are presentation
- * attributes for the properties of the same names (SVG 2, 5.1.1), so
- * `height="50%"` is a percentage of the containing block like a style's.
- * A bare number is pixels; null for what CSS would not parse.
- */
-export function svgSizeHint(value) {
-    const v = value.trim();
-    if (/^[+-]?(?:\d+\.?\d*|\.\d+)(?:e[+-]?\d+)?%$/i.test(v))
-        return v;
-    const m = LENGTH.exec(v);
-    if (!m)
-        return null;
-    return m[2] ? v : `${parseFloat(m[1])}px`;
-}
 function viewBoxParts(el) {
     const parts = (svgAttr(el, 'viewBox') ?? '')
         .trim()
@@ -137,15 +124,32 @@ export class SvgDrawing {
     _seen = -1;
     _seenLast = null;
     _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. */
+    _seenPaint = '';
     /** Whether a length in the tree is a percentage of the viewport; null
      *  until the tree is first read. */
     _percent = null;
+    /** Whether a `<use>` in the tree is one `SvgView` cannot draw as it
+     *  stands (`needsExpanding`). */
+    _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. */
+    _missingAt = undefined;
     _failed = false;
     /** An SVG image's own document, rather than an element of this one. */
     _standalone;
     /** The background an image's root gives its canvas; undefined until it
      *  is first read. */
     _canvas = undefined;
+    /** An SVG image's own style sheets, its `<style>` elements': read at its
+     *  first draw, and none for most images. */
+    _sheets = null;
+    /** A cascade over them for each colour scheme and scale the image is
+     *  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) {
         this._root = root;
         this.intrinsics = intrinsics;
@@ -155,9 +159,14 @@ 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. `shapes` is what the rules give the elements inside it,
+     * the same way, where they give any.
      */
-    draw(ctx, x, y, w, h, scale, color) {
+    draw(ctx, x, y, w, h, scale, color, fill = null, stroke = null, shapes = null) {
         if (this._failed || !(w > 0 && h > 0))
             return;
         // the mock backend has no path API, and SvgView draws paths
@@ -189,9 +198,11 @@ 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, shapes)
+            : this._viewFor(w / scale, h / scale, paint, shapes);
         if (!view)
             return;
         ctx.save();
@@ -232,15 +243,92 @@ export class SvgDrawing {
             ctx.restore();
         }
     }
-    _viewFor(width, height) {
+    /**
+     * Draw an SVG image — an `<img>`'s, a background's, a list marker's — as
+     * `draw` does, painted as its own style sheets say. An image is a
+     * document of its own: no rule of the page's reaches into it, and its
+     * `color` is not the page's. What its `<style>` elements say is given
+     * its elements as the page's rules are given a drawing inline, and its
+     * root its `color`, `fill` and `stroke`, which an inline root has from
+     * its box. `scheme` is the colour scheme of the element that embeds it:
+     * what `prefers-color-scheme` answers inside it, as Chrome has it.
+     */
+    drawImage(ctx, x, y, w, h, scale, scheme = 'light') {
+        if (this._failed || !(w > 0 && h > 0))
+            return;
+        const own = this._ownPaint(w, h, scale, scheme);
+        this.draw(ctx, x, y, w, h, scale, own?.color, own?.fill ?? null, own?.stroke ?? null, own?.shapes ?? null);
+    }
+    /** What an image's own style sheets give it, drawn `w` by `h` device
+     *  pixels, or null where it has none. */
+    _ownPaint(w, h, scale, scheme) {
+        const sheets = (this._sheets ??= ownSheets(this._root));
+        if (!sheets.length)
+            return null;
+        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);
+            entry = { cascade, own: new Map() };
+            this._cascades.set(made, entry);
+        }
+        const { cascade, own } = entry;
+        // An image's viewport is the rectangle it is drawn in, which is what a
+        // `@media (min-width)` in it, or a `vw`, is of: the answer is kept by
+        // that size only where a sheet asks.
+        const sized = cascade.breakpoints.length > 0 ||
+            cascade.readsViewportWidth ||
+            cascade.readsViewportHeight;
+        const key = sized ? `${w}x${h}` : '';
+        const kept = own.get(key);
+        if (kept !== undefined)
+            return kept;
+        cascade.viewportWidth = w;
+        cascade.viewportHeight = h;
+        let paint = null;
+        try {
+            const root = this._root;
+            const style = cascade.styleFor(root, cascade.initial, false);
+            const ink = (value) => value === null || value === 'currentColor' || value === 'none'
+                ? value
+                : inkColor(value, style.color);
+            paint = {
+                color: style.color,
+                fill: ink(style.fill),
+                stroke: ink(style.stroke),
+                shapes: cascade.shapeStyles(root, style),
+            };
+        }
+        catch {
+            // a sheet this cannot read leaves the image as its attributes draw it
+        }
+        // a background drawn at many sizes keeps a few of them
+        if (own.size >= 8)
+            own.clear();
+        own.set(key, paint);
+        return paint;
+    }
+    _viewFor(width, height, 
+    /** The root's `fill` and `stroke` as declarations, or none. */
+    paint = '', shapes = 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)
+        // 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);
-        const viewport = this._percent ? `${width}x${height}` : '';
-        if (this._view && !grown && viewport === this._seenViewport) {
+            this._uses = needsExpanding(root);
+        }
+        const sized = this._percent || this._uses;
+        const viewport = sized ? `${width}x${height}` : '';
+        const painted = shapes ? `${paint}|${shapes.key}` : paint;
+        if (this._view &&
+            !grown &&
+            viewport === this._seenViewport &&
+            painted === this._seenPaint) {
             return this._view;
         }
         const View = svgViewClass();
@@ -250,13 +338,17 @@ 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 || shapes || root.name.includes(':')
+                ? copyTree(root, sized ? [width, height] : null, missing, shapes)
+                : root;
+            view.setSvgDom(paint ? withPaint(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 = painted;
             return view;
         }
         catch {
@@ -265,6 +357,16 @@ 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 withPaint(root, paint) {
+    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
@@ -288,6 +390,59 @@ function canvasBackground(root) {
     }
     return found;
 }
+/**
+ * The style sheets an SVG image's `<style>` elements hold, in order. One
+ * that names a type other than CSS's holds none (SVG 2, 6.3), and one with
+ * a `media` query holds its rules under it. Its text is its text and CDATA
+ * sections, as an XML parse leaves them, and not its comments.
+ */
+function ownSheets(root) {
+    const sheets = [];
+    const layers = new Map();
+    let order = 0;
+    const stack = [root];
+    for (let el = stack.pop(); el; el = stack.pop()) {
+        for (let i = el.children.length - 1; i >= 0; i -= 1) {
+            const child = el.children[i];
+            // an XML parse gives a `<style>` a type of its own, as HTML's does
+            if (child.type === 'tag' || child.type === 'style') {
+                stack.push(child);
+            }
+        }
+        if (el === root || localName(el.name) !== 'style')
+            continue;
+        const type = (el.attribs.type ?? '').trim().toLowerCase();
+        if (type && type !== 'text/css')
+            continue;
+        const media = el.attribs.media?.trim();
+        const sheet = parseStylesheet(rawTextOf(el), order, layers, null, media ? [parseMediaQuery(media)] : null);
+        order += sheet.rules.length + 1;
+        sheets.push(sheet);
+    }
+    return sheets;
+}
+/**
+ * The look an SVG image's own document starts from: CSS's initial values,
+ * black at `medium`, since nothing of the page's is inherited into an
+ * image — only the colour scheme, which its `prefers-color-scheme` answers.
+ */
+function imageLook(scheme, scale) {
+    return {
+        color: '#000000',
+        fontFamily: 'sans-serif',
+        fontSize: 16 * scale,
+        monoFamily: 'monospace',
+        linkColor: '#0000ee',
+        borderColor: '#000000',
+        mutedColor: '#808080',
+        background: 'transparent',
+        colorScheme: scheme,
+        surface: '#ffffff',
+        controlPadY: 0,
+        controlBorder: 0,
+        controlRadius: 0,
+    };
+}
 /** Drawings of inline `<svg>` elements, per element: the element is the
  *  document's, and outlives the box trees built over it. */
 const INLINE = new WeakMap();
@@ -349,22 +504,248 @@ 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();
+    const walk = (el) => {
+        for (const child of el.children) {
+            if (child.type !== 'tag')
+                continue;
+            const tag = child;
+            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) {
+    let ids = null;
+    const walk = (el) => {
+        for (const child of el.children) {
+            if (child.type !== 'tag')
+                continue;
+            const tag = child;
+            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) {
+    let top = 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) {
+    let last = 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, id) {
+    const stack = [...top.children].reverse();
+    for (let node = stack.pop(); node; node = stack.pop()) {
+        if (node.type !== 'tag')
+            continue;
+        const el = node;
+        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, of) {
+    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, x, y, width, height, preserve) {
+    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.
+ *
+ * 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
+ * presentation attributes and over what that attribute says, which the
+ * 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.
  */
-function copyTree(root, viewport) {
+function copyTree(root, viewport, missing, 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;
     const diagonal = viewport
         ? Math.sqrt((viewport[0] ** 2 + viewport[1] ** 2) / 2)
         : 0;
-    const copy = (el, resolve) => {
+    let ids = null;
+    const expand = (use, resolve, depth, hidden) => {
+        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 = {};
+        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;
+        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 = [];
+        if (symbol)
+            copyInto(children, target, within, depth + 1, hidden);
+        else if (shown(target, hidden)) {
+            children.push(copy(target, within, depth + 1, hidden));
+        }
+        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)
+            return true;
+        const own = shapes.of.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) => {
+        for (const child of el.children) {
+            if (child.type === 'tag') {
+                if (shown(child, hidden)) {
+                    children.push(copy(child, resolve, depth, hidden));
+                }
+            }
+            else if (child.type === 'text')
+                children.push(new Text(child.data));
+        }
+    };
+    const copy = (el, resolve, depth = 0, 
+    /** Whether the element inherits a `visibility` of `hidden`. */
+    hidden = false) => {
+        const own = shapes?.of.get(el);
+        hidden = hiddenIn(own, hidden);
+        if (localName(el.name) === 'use') {
+            const group = expand(el, resolve, depth, hidden);
+            if (group)
+                return group;
+        }
         const here = resolve && !OWN_UNITS.has(localName(el.name));
         const attribs = { ...el.attribs };
+        if (own)
+            restyle(attribs, own);
         if (here && viewport && el !== root) {
             for (const name in attribs) {
                 const axis = PERCENT_OF[name];
@@ -379,16 +760,80 @@ function copyTree(root, viewport) {
             }
         }
         const children = [];
-        for (const child of el.children) {
-            if (child.type === 'tag')
-                children.push(copy(child, here));
-            else if (child.type === 'text')
-                children.push(new Text(child.data));
-        }
+        copyInto(children, el, here, depth, hidden);
         return new Element(strip(el.name), attribs, children);
     };
     return copy(root, true);
 }
+/** What `display: none` takes nothing from: `SvgView` draws none of them
+ *  where they stand, and what refers to one still finds it (SVG 2, 5.3). */
+const UNDRAWN = new Set([
+    'defs',
+    'symbol',
+    'lineargradient',
+    'radialgradient',
+    'stop',
+    'clippath',
+    'mask',
+    'pattern',
+    'marker',
+    'style',
+]);
+/** What `visibility: hidden` leaves undrawn: the elements with something
+ *  of their own to draw, and a `<use>`, since what it draws inherits the
+ *  property from it. */
+const HIDEABLE = new Set([
+    'path',
+    'rect',
+    'circle',
+    'ellipse',
+    'line',
+    'polyline',
+    'polygon',
+    'text',
+    'image',
+    'use',
+]);
+/** Whether an element is hidden, given whether what it is in is. */
+function hiddenIn(own, hidden) {
+    const visibility = own?.visibility;
+    return visibility === undefined || visibility === 'inherit'
+        ? hidden
+        : visibility === 'hidden';
+}
+/**
+ * An element's attributes with what the rules give it: each property at
+ * the end of its `style`, where `SvgView` reads it over the attribute of
+ * its name — but `opacity`, which it reads from the attribute alone. One
+ * the rules put back to what the element inherits is taken out of both.
+ */
+function restyle(attribs, own) {
+    let style = attribs.style ?? '';
+    let added = '';
+    for (const prop in own) {
+        const value = own[prop];
+        if (prop === 'display' || prop === 'visibility')
+            continue;
+        if (value === 'inherit') {
+            delete attribs[prop];
+            if (style) {
+                style = style
+                    .split(';')
+                    .filter((d) => d.slice(0, d.indexOf(':')).trim() !== prop)
+                    .join(';');
+            }
+        }
+        else if (prop === 'opacity')
+            attribs.opacity = value;
+        else
+            added += `${prop}:${value};`;
+    }
+    style = style && added ? `${style};${added}` : style || added;
+    if (style)
+        attribs.style = style;
+    else
+        delete attribs.style;
+}
 /**
  * An SVG image's bytes as a drawing, or null for bytes that are not SVG —
  * which is how a PNG or a JPEG goes on to the image decoder. Nothing names