@johnmorrisdotca/kyogijo-stadiums 0.0.0-stage → 0.4.0

package/dist/scene.js

@@ -0,0 +1,420 @@
+// A drawing as data. The drawing is still written once, by the code that writes the SVG; the scene reads that markup (a tree that gives the same text back,
+// see scene.xml.ts), works out what a browser would paint for each shape in light or dark (the stylesheet that is in the drawing, the custom properties,
+// the inheritance), and lists the shapes in paint order with their transforms and clips. There is no second drawing of anything.
+import { drawKyogijo } from "./draw.js";
+import { evaluate, inlineStyle, lengthOf, matched, parseStylesheet, substitute } from "./scene.css.js";
+import { IDENTITY, multiply, parseTransform, pathCommands } from "./scene.path.js";
+import { decode, elements, parseSvg, textOf } from "./scene.xml.js";
+import { KYOGIJO_STYLE } from "./style.js";
+const START = { fill: "#000000", stroke: "none", strokeWidth: 1, lineJoin: "miter", lineCap: "butt", dash: undefined, fillRule: "nonzero", fillOpacity: 1, strokeOpacity: 1, fontSize: 16, fontWeight: 400, fontFamily: "sans-serif", anchor: "start", letterSpacing: 0, paintOrder: undefined };
+/** The properties an element may carry as an attribute as well as in CSS. */
+const PRESENTATION = ["fill", "stroke", "stroke-width", "stroke-linejoin", "stroke-linecap", "stroke-dasharray", "fill-rule", "fill-opacity", "stroke-opacity", "font-size", "font-weight", "font-family", "text-anchor", "letter-spacing", "paint-order", "opacity", "filter", "stop-color", "stop-opacity", "display", "visibility"];
+const unit = (value, fallback) => {
+    const n = Number(value);
+    return value !== undefined && Number.isFinite(n) ? Math.min(1, Math.max(0, n)) : fallback;
+};
+function decodedAttrs(node) {
+    const out = {};
+    for (const [key, value] of Object.entries(node.attrs))
+        out[key] = decode(value);
+    return out;
+}
+/** The context of a node inside its parent's. */
+function contextOf(parent, node, sheet) {
+    const attrs = decodedAttrs(node);
+    const css = { name: node.name, attrs, parent: parent.css };
+    const declarations = [];
+    for (const name of PRESENTATION)
+        if (attrs[name] !== undefined)
+            declarations.push([name, attrs[name]]);
+    declarations.push(...matched(sheet, css), ...inlineStyle(attrs.style));
+    let vars = parent.vars;
+    if (declarations.some(([name]) => name.startsWith("--"))) {
+        const own = { ...vars };
+        for (const [name, value] of declarations)
+            if (name.startsWith("--"))
+                own[name] = value;
+        vars = own;
+    }
+    const inherited = { ...parent.inherited };
+    const own = { opacity: 1, filter: undefined, stopColor: undefined, stopOpacity: 1, hidden: false };
+    // The font size first: a length in em is of the node's own.
+    const sized = [...declarations.filter(([name]) => name === "font-size"), ...declarations.filter(([name]) => name !== "font-size" && !name.startsWith("--"))];
+    for (const [name, raw] of sized) {
+        const value = substitute(raw, vars);
+        if (value === undefined)
+            continue;
+        const v = value.trim();
+        switch (name) {
+            case "font-size":
+                inherited.fontSize = lengthOf(v, parent.inherited.fontSize) ?? inherited.fontSize;
+                break;
+            case "fill":
+                inherited.fill = v;
+                break;
+            case "stroke":
+                inherited.stroke = v;
+                break;
+            case "stroke-width":
+                inherited.strokeWidth = lengthOf(v, inherited.fontSize) ?? inherited.strokeWidth;
+                break;
+            case "stroke-linejoin":
+                if (v === "miter" || v === "round" || v === "bevel")
+                    inherited.lineJoin = v;
+                break;
+            case "stroke-linecap":
+                if (v === "butt" || v === "round" || v === "square")
+                    inherited.lineCap = v;
+                break;
+            case "stroke-dasharray": {
+                if (v === "none")
+                    inherited.dash = undefined;
+                else {
+                    const list = evaluate(v, inherited.fontSize).split(/[\s,]+/).filter((part) => part !== "").map(Number);
+                    inherited.dash = list.length > 0 && list.every((n) => Number.isFinite(n) && n >= 0) && list.some((n) => n > 0) ? list : undefined;
+                }
+                break;
+            }
+            case "fill-rule":
+                if (v === "nonzero" || v === "evenodd")
+                    inherited.fillRule = v;
+                break;
+            case "fill-opacity":
+                inherited.fillOpacity = unit(v, inherited.fillOpacity);
+                break;
+            case "stroke-opacity":
+                inherited.strokeOpacity = unit(v, inherited.strokeOpacity);
+                break;
+            case "font-weight":
+                inherited.fontWeight = v === "bold" ? 700 : v === "normal" ? 400 : Number.isFinite(Number(v)) ? Number(v) : inherited.fontWeight;
+                break;
+            case "font-family":
+                inherited.fontFamily = v;
+                break;
+            case "text-anchor":
+                if (v === "start" || v === "middle" || v === "end")
+                    inherited.anchor = v;
+                break;
+            case "letter-spacing":
+                inherited.letterSpacing = v === "normal" ? 0 : (lengthOf(v, inherited.fontSize) ?? 0);
+                break;
+            case "paint-order":
+                inherited.paintOrder = v.startsWith("stroke") ? "stroke" : undefined;
+                break;
+            case "opacity":
+                own.opacity = unit(v, 1);
+                break;
+            case "filter":
+                own.filter = v === "none" ? undefined : v;
+                break;
+            case "stop-color":
+                own.stopColor = v;
+                break;
+            case "stop-opacity":
+                own.stopOpacity = unit(v, 1);
+                break;
+            case "display":
+                if (v === "none")
+                    own.hidden = true;
+                break;
+            case "visibility":
+                if (v === "hidden" || v === "collapse")
+                    own.hidden = true;
+                break;
+            default:
+        }
+    }
+    const data = { ...parent.data };
+    for (const [key, value] of Object.entries(attrs))
+        if (key.startsWith("data-"))
+            data[key.slice(5)] = value;
+    const matrix = attrs.transform === undefined ? parent.matrix : multiply(parent.matrix, parseTransform(attrs.transform));
+    const surface = parent.surface || (attrs.class ?? "").split(/\s+/).includes("ky-surface-group");
+    return { ctx: { css, vars, inherited, opacity: parent.opacity * own.opacity, matrix, clips: parent.clips, data, surface, filter: own.filter === undefined ? parent.filter : [parent.filter, own.filter].filter((f) => f !== undefined).join(" ") }, own };
+}
+const SKIPPED = new Set(["defs", "title", "desc", "style", "metadata", "clipPath", "linearGradient", "radialGradient", "pattern", "marker", "mask", "symbol", "filter"]);
+const SHAPES = new Set(["rect", "circle", "ellipse", "line", "polygon", "polyline", "path"]);
+const n = (node, name, fallback = 0) => {
+    const v = Number(node[name]);
+    return node[name] !== undefined && Number.isFinite(v) ? v : fallback;
+};
+function* walkAll(node) {
+    yield node;
+    for (const child of elements(node))
+        yield* walkAll(child);
+}
+const isShape = (item) => item.kind !== "text" && item.kind !== "image";
+const urlId = (value) => /^url\(\s*['"]?#([^'")\s]+)['"]?\s*\)/.exec(value)?.[1];
+/**
+ * A drawing the package wrote, as a scene. `theme` works the colours out for light or dark: without it, the drawing's own `data-theme`, else light.
+ * A drawing made with `style: "none"` is read with the package's own stylesheet (`KYOGIJO_STYLE`); `css` adds a page's rules after the drawing's.
+ * @example
+ * ```ts
+ * import { drawKyogijo } from "@johnmorrisdotca/kyogijo-stadiums";
+ * import { sceneFromSvg } from "@johnmorrisdotca/kyogijo-stadiums/scene";
+ * const scene = sceneFromSvg(drawKyogijo({ sport: "nhl", id: "rink" }), { theme: "dark" });
+ * console.log(scene.theme, scene.items[0].kind, scene.items[0].style.fill);
+ * // dark rect #1a2025
+ * ```
+ */
+export function sceneFromSvg(svg, options = {}) {
+    const root = parseSvg(svg);
+    if (root.name !== "svg")
+        throw new Error(`An <svg> is expected, not <${root.name}>`);
+    const rootAttrs = decodedAttrs(root);
+    const theme = options.theme ?? (rootAttrs["data-theme"] === "dark" ? "dark" : "light");
+    const own = [];
+    const find = (node) => {
+        if (node.name === "style")
+            own.push(textOf(node));
+        for (const child of elements(node))
+            find(child);
+    };
+    find(root);
+    const sheet = parseStylesheet(own.length > 0 ? own.join("\n") : KYOGIJO_STYLE, theme);
+    if (options.css !== undefined)
+        parseStylesheet(options.css, theme, sheet);
+    const html = { name: "html", attrs: { "data-theme": theme } };
+    const top = { css: html, vars: {}, inherited: START, opacity: 1, matrix: IDENTITY, clips: [], data: {}, surface: false, filter: undefined };
+    // Everything with an id that a shape may refer to, with the chain of nodes above it (for the context it is computed in).
+    const definitions = new Map();
+    const index = (node, chain) => {
+        const id = node.attrs.id;
+        if (id !== undefined && (node.name === "clipPath" || node.name === "linearGradient" || node.name === "pattern"))
+            definitions.set(decode(id), { node, chain });
+        for (const child of elements(node))
+            index(child, [...chain, node]);
+    };
+    index(root, []);
+    const contexts = new Map();
+    const contextAt = (chain, node) => {
+        const cached = contexts.get(node);
+        if (cached !== undefined)
+            return cached;
+        let parent = top;
+        for (const above of chain) {
+            let known = contexts.get(above);
+            if (known === undefined) {
+                known = contextOf(parent, above, sheet);
+                contexts.set(above, known);
+            }
+            parent = known.ctx;
+        }
+        const made = contextOf(parent, node, sheet);
+        contexts.set(node, made);
+        return made;
+    };
+    const clips = [];
+    const clipIndex = new Map();
+    const gradients = [];
+    const gradientDone = new Set();
+    const patterns = [];
+    const patternDone = new Set();
+    const paintOf = (value) => {
+        const id = urlId(value);
+        if (id === undefined)
+            return value;
+        const def = definitions.get(id);
+        if (def === undefined)
+            return "none";
+        if (def.node.name === "linearGradient") {
+            if (!gradientDone.has(id)) {
+                gradientDone.add(id);
+                const a = decodedAttrs(def.node);
+                const stops = elements(def.node)
+                    .filter((stop) => stop.name === "stop")
+                    .map((stop) => {
+                    const s = contextAt([...def.chain, def.node], stop);
+                    const offset = decodedAttrs(stop).offset ?? "0";
+                    return { offset: unit(offset.endsWith("%") ? String(Number(offset.slice(0, -1)) / 100) : offset, 0), color: s.own.stopColor ?? "#000000", opacity: s.own.stopOpacity };
+                });
+                gradients.push({ id, x1: n(a, "x1"), y1: n(a, "y1"), x2: n(a, "x2", 1), y2: n(a, "y2"), stops });
+            }
+            return { gradient: id };
+        }
+        if (def.node.name === "pattern") {
+            if (!patternDone.has(id)) {
+                patternDone.add(id);
+                const a = decodedAttrs(def.node);
+                const at = contextAt(def.chain, def.node).ctx;
+                const found = [];
+                for (const child of elements(def.node))
+                    collect(child, { ...at, matrix: IDENTITY, clips: [] }, found);
+                patterns.push({ id, width: n(a, "width"), height: n(a, "height"), shapes: found.filter(isShape) });
+            }
+            return { pattern: id };
+        }
+        return "none";
+    };
+    /** Clip index for a `clip-path` attribute on a node whose frame is `matrix`. */
+    const clipFor = (value, matrix) => {
+        const id = value === undefined ? undefined : urlId(value);
+        if (id === undefined)
+            return undefined;
+        const def = definitions.get(id);
+        if (def === undefined || def.node.name !== "clipPath")
+            return undefined;
+        const key = `${id}|${matrix.join(",")}`;
+        const known = clipIndex.get(key);
+        if (known !== undefined)
+            return known;
+        const at = contextAt(def.chain, def.node).ctx;
+        const found = [];
+        for (const child of elements(def.node))
+            collect(child, { ...at, matrix: IDENTITY, clips: [] }, found);
+        clips.push({ id, matrix, shapes: found.filter(isShape) });
+        clipIndex.set(key, clips.length - 1);
+        return clips.length - 1;
+    };
+    const styleOf = (ctx) => ({
+        fill: paintOf(ctx.inherited.fill),
+        stroke: paintOf(ctx.inherited.stroke),
+        strokeWidth: ctx.inherited.strokeWidth,
+        opacity: ctx.opacity,
+        fillOpacity: ctx.inherited.fillOpacity,
+        strokeOpacity: ctx.inherited.strokeOpacity,
+        lineJoin: ctx.inherited.lineJoin,
+        lineCap: ctx.inherited.lineCap,
+        ...(ctx.inherited.dash === undefined ? {} : { dash: ctx.inherited.dash }),
+        fillRule: ctx.inherited.fillRule,
+        ...(ctx.inherited.paintOrder === undefined ? {} : { paintOrder: ctx.inherited.paintOrder }),
+        ...(ctx.filter === undefined ? {} : { filter: ctx.filter }),
+    });
+    const baseOf = (node, attrs, ctx) => {
+        const title = elements(node).find((child) => child.name === "title");
+        return {
+            class: attrs.class ?? "",
+            ...(attrs.id === undefined ? {} : { id: attrs.id }),
+            ...(Object.keys(ctx.data).length === 0 ? {} : { data: ctx.data }),
+            ...(title === undefined ? {} : { label: textOf(title) }),
+            matrix: ctx.matrix,
+            clips: ctx.clips,
+            ...(ctx.surface ? { surface: true } : {}),
+            style: styleOf(ctx),
+        };
+    };
+    /** Shapes (and text and images when `out` takes them) of a node and below, in paint order. */
+    function collect(node, parent, out) {
+        if (SKIPPED.has(node.name))
+            return;
+        const { ctx: made, own } = contextOf(parent, node, sheet);
+        if (own.hidden)
+            return;
+        let ctx = made;
+        const attrs = decodedAttrs(node);
+        const clip = clipFor(attrs["clip-path"], ctx.matrix);
+        if (clip !== undefined)
+            ctx = { ...ctx, clips: [...ctx.clips, clip] };
+        if (SHAPES.has(node.name)) {
+            const base = baseOf(node, attrs, ctx);
+            switch (node.name) {
+                case "rect":
+                    out.push({ ...base, kind: "rect", x: n(attrs, "x"), y: n(attrs, "y"), width: n(attrs, "width"), height: n(attrs, "height"), rx: n(attrs, "rx", n(attrs, "ry")) });
+                    break;
+                case "circle":
+                    out.push({ ...base, kind: "circle", cx: n(attrs, "cx"), cy: n(attrs, "cy"), r: n(attrs, "r") });
+                    break;
+                case "ellipse":
+                    out.push({ ...base, kind: "ellipse", cx: n(attrs, "cx"), cy: n(attrs, "cy"), rx: n(attrs, "rx"), ry: n(attrs, "ry") });
+                    break;
+                case "line":
+                    out.push({ ...base, kind: "line", x1: n(attrs, "x1"), y1: n(attrs, "y1"), x2: n(attrs, "x2"), y2: n(attrs, "y2") });
+                    break;
+                case "polygon":
+                case "polyline": {
+                    const v = (attrs.points ?? "").split(/[\s,]+/).filter((p) => p !== "").map(Number);
+                    const points = [];
+                    for (let i = 0; i + 1 < v.length; i += 2)
+                        points.push([v[i], v[i + 1]]);
+                    out.push({ ...base, kind: node.name, points });
+                    break;
+                }
+                default:
+                    out.push({ ...base, kind: "path", d: attrs.d ?? "", commands: pathCommands(attrs.d ?? "") });
+            }
+            return;
+        }
+        if (node.name === "text") {
+            // A run of text is one item; a `<tspan>` that sets a place (x or y, dx or dy) is another, at that place, with the style it has.
+            let x = n(attrs, "x");
+            let y = n(attrs, "y");
+            let run = "";
+            const flush = (at, from, source) => {
+                if (run === "")
+                    return;
+                const i = at.inherited;
+                out.push({ ...baseOf(source, from, at), kind: "text", x, y, text: run, fontSize: i.fontSize, fontWeight: i.fontWeight, fontFamily: i.fontFamily, anchor: i.anchor, letterSpacing: i.letterSpacing });
+                run = "";
+            };
+            const words = (from, at, fromAttrs) => {
+                for (const child of from.children) {
+                    if (typeof child === "string")
+                        run += decode(child);
+                    else if (child.name === "tspan") {
+                        flush(at, fromAttrs, from);
+                        const sub = contextOf(at, child, sheet);
+                        const subAttrs = decodedAttrs(child);
+                        x = subAttrs.x === undefined ? x + n(subAttrs, "dx") : n(subAttrs, "x") + n(subAttrs, "dx");
+                        y = subAttrs.y === undefined ? y + n(subAttrs, "dy") : n(subAttrs, "y") + n(subAttrs, "dy");
+                        words(child, sub.ctx, subAttrs);
+                        flush(sub.ctx, { ...fromAttrs, ...subAttrs, class: [fromAttrs.class, subAttrs.class].filter((c) => c !== undefined && c !== "").join(" ") }, child);
+                    }
+                }
+            };
+            words(node, ctx, attrs);
+            flush(ctx, attrs, node);
+            return;
+        }
+        if (node.name === "image") {
+            const item = { ...baseOf(node, attrs, ctx), kind: "image", href: attrs.href ?? attrs["xlink:href"] ?? "", x: n(attrs, "x"), y: n(attrs, "y"), width: n(attrs, "width"), height: n(attrs, "height"), ...(attrs.preserveAspectRatio === undefined ? {} : { preserveAspectRatio: attrs.preserveAspectRatio }) };
+            out.push(item);
+            return;
+        }
+        for (const child of elements(node))
+            collect(child, ctx, out);
+    }
+    const items = [];
+    const rootContext = contextOf(top, root, sheet);
+    contexts.set(root, rootContext);
+    // The root's own `data-*` (the sport, the size, the version) are the scene's; a shape's are those of the groups it is in.
+    for (const child of elements(root))
+        collect(child, { ...rootContext.ctx, data: {} }, items);
+    const box = (rootAttrs.viewBox ?? "0 0 0 0").split(/[\s,]+/).map(Number);
+    const title = elements(root).find((child) => child.name === "title");
+    const desc = elements(root).find((child) => child.name === "desc");
+    const group = [...walkAll(root)].find((node) => (node.attrs.class ?? "").split(/\s+/).includes("ky-surface-group"));
+    const turn = group?.attrs.transform === undefined ? undefined : parseTransform(decode(group.attrs.transform));
+    const label = (rootAttrs["aria-labelledby"] ?? "").split(/\s+/)[0] ?? "";
+    return {
+        theme,
+        ...(rootAttrs["data-sport"] === undefined ? {} : { sport: rootAttrs["data-sport"] }),
+        id: label.replace(/-t$/, "") || "ky",
+        title: title === undefined ? "" : textOf(title),
+        description: desc === undefined ? "" : textOf(desc),
+        orientation: rootAttrs["data-orientation"] === "portrait" ? "portrait" : "landscape",
+        ...(turn === undefined ? {} : { turn }),
+        viewBox: { x: box[0] ?? 0, y: box[1] ?? 0, w: box[2] ?? 0, h: box[3] ?? 0 },
+        items,
+        clips,
+        gradients,
+        patterns,
+    };
+}
+const isScene = (source) => typeof source === "object" && "items" in source && "viewBox" in source;
+/**
+ * A drawing as plain data: the options of `drawKyogijo` (or the SVG of a chart or a replay frame, or a scene already made) as the shapes it is painted
+ * with, in order, each with its colours worked out for light or dark.
+ * @example
+ * ```ts
+ * import { sceneOf } from "@johnmorrisdotca/kyogijo-stadiums/scene";
+ * const scene = sceneOf({ sport: "nhl", id: "rink" });
+ * console.log(scene.viewBox, scene.items.length > 30, scene.items[0].kind);
+ * // { x: -8, y: -8, w: 216, h: 101 } true rect
+ * ```
+ */
+export function sceneOf(source, options = {}) {
+    if (typeof source !== "string" && isScene(source))
+        return source;
+    const svg = typeof source === "string" ? source : drawKyogijo(source);
+    return sceneFromSvg(svg, options);
+}

package/dist/scene.path.d.ts

@@ -0,0 +1,40 @@
+import type { Matrix, PathCommand, SceneShape } from "./scene.types.ts";
+export declare const IDENTITY: Matrix;
+/** The matrix that does `b` first and then `a`'s frame: the transform of a child inside a parent. */
+export declare const multiply: (a: Matrix, b: Matrix) => Matrix;
+/** The matrix that undoes `m`, or the identity when `m` flattens the plane. */
+export declare function invert(m: Matrix): Matrix;
+export declare const isIdentity: (m: Matrix) => boolean;
+/** A point moved by a matrix. */
+export declare const apply: (m: Matrix, x: number, y: number) => [number, number];
+/** A `transform` attribute (`matrix`, `translate`, `scale`, `rotate`, in any run) as one matrix. */
+export declare function parseTransform(text: string | undefined): Matrix;
+/**
+ * Path data as absolute segments: `M`, `L`, `C`, `Q` and `Z`. Relative commands, `H`, `V`, `S` and `T` are worked out, and an arc is cubic curves.
+ * @example
+ * ```ts
+ * import { pathCommands } from "@johnmorrisdotca/kyogijo-stadiums/scene";
+ * console.log(pathCommands("M0 0h10v5H0Z").map((c) => c.join(" ")));
+ * // [ 'M 0 0', 'L 10 0', 'L 10 5', 'L 0 5', 'Z' ]
+ * ```
+ */
+export declare function pathCommands(d: string): PathCommand[];
+/** The segments of a shape in its own frame: a rectangle, circle, ellipse, line, polygon, polyline or path as path commands. */
+export declare function shapeCommands(shape: SceneShape): PathCommand[];
+/** A run of points, and whether it was closed. */
+export interface Ring {
+    points: [number, number][];
+    closed: boolean;
+}
+/**
+ * Segments as runs of points, curves cut into straight pieces no further than `tolerance` (in the same units) from the curve. `matrix` moves every
+ * point first.
+ */
+export declare function flatten(commands: readonly PathCommand[], matrix?: Matrix, tolerance?: number): Ring[];
+/** The box round a shape's outline (not its stroke) after `matrix`, or undefined for a shape with no points. */
+export declare function boundsOf(shape: SceneShape, matrix?: Matrix): {
+    x: number;
+    y: number;
+    w: number;
+    h: number;
+} | undefined;