@peter.prib/renderengine 0.0.0-stage → 0.1.0

package/src/charting/glyphs/HexagonGlyph.js

@@ -0,0 +1,28 @@
+import { Glyph } from './Glyph.js';
+
+/** Material: a hexagon, flat top and bottom, with the spec's two slashes and underscore. */
+export class HexagonGlyph extends Glyph {
+    static key = 'hexagon';
+    static ownsInterior = true;
+
+    parts(ctx) {
+        const { w, h } = ctx;
+        const G = Glyph, st = (k) => this.stroke(ctx, k);
+        const pts = [0, 1, 2, 3, 4, 5].map(i => {
+            const a = (Math.PI / 3) * i;
+            return [Math.cos(a) * w / 2, Math.sin(a) * h / 2];
+        });
+        return G.group([
+            G.path(`M${pts.map(p => p.join(',')).join(' L')}Z`, ctx.color, st()),
+            G.path(
+                `M ${-w * 0.16},${-h * 0.18} L ${-w * 0.06},${h * 0.10}`
+                + ` M ${w * 0.04},${-h * 0.18} L ${w * 0.14},${h * 0.10}`
+                + ` M ${-w * 0.18},${h * 0.26} L ${w * 0.06},${h * 0.26}`,
+                'none', st(0.75)),
+        ]);
+    }
+    outline(ctx) {
+        const { w, h } = ctx;
+        return [0, 1, 2, 3, 4, 5].map(i => [Math.cos((Math.PI / 3) * i) * w / 2, Math.sin((Math.PI / 3) * i) * h / 2]);
+    }
+}

package/src/charting/glyphs/IconGlyph.js

@@ -0,0 +1,22 @@
+import { Glyph } from './Glyph.js';
+
+/** A box with the node's own icon (`iconUrl` or `icon` text) large in the middle. */
+export class IconGlyph extends Glyph {
+    static key = 'icon';
+    static ownsInterior = true;
+
+    parts(ctx) {
+        const { w, h } = ctx;
+        const G = Glyph, st = (k) => this.stroke(ctx, k);
+        const rx = Glyph.cornerRadius(ctx.cornerStyle, w, h);
+        const parts = [G.rect(-w / 2, -h / 2, w, h, ctx.color, st(), { rx })];
+        if (ctx.iconUrl) {
+            const imgSize = Math.min(w, h) * 0.7;
+            parts.push(G.image(ctx.iconUrl, -imgSize / 2, -imgSize / 2, imgSize, imgSize, { 'pointer-events': 'none' }));
+        } else if (ctx.icon) {
+            const iconSize = Math.min(w, h) * 0.6;
+            parts.push(G.text(ctx.icon, 0, 0, { fill: '#fff', textAnchor: 'middle', verticalAlign: 'middle', fontSize: `${iconSize}px`, 'pointer-events': 'none' }));
+        }
+        return G.group(parts);
+    }
+}

package/src/charting/glyphs/ImageGlyph.js

@@ -0,0 +1,16 @@
+import { Glyph } from './Glyph.js';
+
+/** A picture filling the box (`iconUrl`), with a light border showing its bounds. */
+export class ImageGlyph extends Glyph {
+    static key = 'image';
+    static ownsInterior = true;
+
+    parts(ctx) {
+        const { w, h } = ctx;
+        const G = Glyph, st = (k) => this.stroke(ctx, k);
+        return G.group([
+            G.rect(-w / 2, -h / 2, w, h, 'none', { color: '#ccc', width: 1 }),
+            G.image(ctx.iconUrl || '', -w / 2, -h / 2, w, h, { preserveAspectRatio: 'none', 'pointer-events': 'none' }),
+        ]);
+    }
+}

package/src/charting/glyphs/JunctionGlyph.js

@@ -0,0 +1,17 @@
+import { sampleArc } from '../templates/outline.js';
+import { Glyph } from './Glyph.js';
+
+/** (And) Junction: a small solid dot. */
+export class JunctionGlyph extends Glyph {
+    static key = 'junction';
+    static ownsInterior = true;
+
+    parts(ctx) {
+        const G = Glyph, st = (k) => this.stroke(ctx, k);
+        return G.circle(0, 0, ctx.circleR * 0.4, ctx.strokeColor, st(0.75));
+    }
+    outline(ctx) {
+        const r = ctx.circleR * 0.4;
+        return sampleArc(0, 0, r, r, 0, Math.PI * 2, 24).slice(0, -1);
+    }
+}

package/src/charting/glyphs/LollipopGlyph.js

@@ -0,0 +1,22 @@
+import { Glyph } from './Glyph.js';
+
+/** Interface: a stub line into a small circle. */
+export class LollipopGlyph extends Glyph {
+    static key = 'lollipop';
+    static ownsInterior = true;
+
+    parts(ctx) {
+        const { w, h } = ctx;
+        const G = Glyph, st = (k) => this.stroke(ctx, k);
+        const cr = Math.min(w, h) * 0.28;
+        return G.group([
+            G.path(`M ${-w / 2},0 L ${w / 2 - cr * 2},0`, 'none', st(1.25)),
+            G.circle(w / 2 - cr, 0, cr, ctx.color, st()),
+        ]);
+    }
+    /** The stub and circle: full width, the circle's height. */
+    outline(ctx) {
+        const cr = Math.min(ctx.w, ctx.h) * 0.28;
+        return [[-ctx.w / 2, -cr], [ctx.w / 2, -cr], [ctx.w / 2, cr], [-ctx.w / 2, cr]];
+    }
+}

package/src/charting/glyphs/MagnifierGlyph.js

@@ -0,0 +1,17 @@
+import { Glyph } from './Glyph.js';
+
+/** Assessment: a magnifying glass. */
+export class MagnifierGlyph extends Glyph {
+    static key = 'magnifier';
+    static ownsInterior = true;
+
+    parts(ctx) {
+        const { w, h } = ctx;
+        const G = Glyph, st = (k) => this.stroke(ctx, k);
+        const gr = Math.min(w, h) * 0.30, cx = w * 0.10, cy = -h * 0.12;
+        return G.group([
+            G.circle(cx, cy, gr, ctx.color, st()),
+            G.path(`M ${cx - gr * 0.72},${cy + gr * 0.72} L ${-w * 0.40},${h * 0.44}`, 'none', st(1.25)),
+        ]);
+    }
+}

package/src/charting/glyphs/NoteGlyph.js

@@ -0,0 +1,33 @@
+import { Glyph } from './Glyph.js';
+
+/**
+ * A sticky note: a body with a folded bottom-right corner (a view annotation,
+ * not an element), yellow unless the note has a fill of its own (ctx.ownFill);
+ * the fold a shade darker.
+ */
+export class NoteGlyph extends Glyph {
+    static DEFAULT_FILL = '#fff9c4';
+    static DEFAULT_FOLD = '#e8df9e';
+
+    static key = 'note';
+    static ownsInterior = true;
+
+    parts(ctx) {
+        const { w, h } = ctx;
+        const G = Glyph, st = (k) => this.stroke(ctx, k);
+        const fold = Math.min(w, h) * 0.22;
+        const noteFill = ctx.ownFill || NoteGlyph.DEFAULT_FILL;
+        const noteStroke = { color: '#b8ad76', width: 1.2 };
+        const outline = `M ${-w / 2},${-h / 2} L ${w / 2},${-h / 2} L ${w / 2},${h / 2 - fold} L ${w / 2 - fold},${h / 2} L ${-w / 2},${h / 2} Z`;
+        const flap = `M ${w / 2 - fold},${h / 2} L ${w / 2},${h / 2 - fold} L ${w / 2},${h / 2} Z`;
+        return G.group([G.path(outline, noteFill, noteStroke), G.path(flap, ctx.ownFill ? NoteGlyph.shade(noteFill) : NoteGlyph.DEFAULT_FOLD, noteStroke)]);
+    }
+
+    /** A colour a shade darker (the fold); one it cannot read (none, a name) as it is. */
+    static shade(colour, factor = 0.88) {
+        const m = String(colour).match(/^#([0-9a-f]{3}|[0-9a-f]{6})$/i);
+        if (!m) return colour;
+        const hex = m[1].length === 3 ? [...m[1]].map(c => c + c).join('') : m[1];
+        return '#' + [0, 2, 4].map(i => Math.round(parseInt(hex.slice(i, i + 2), 16) * factor).toString(16).padStart(2, '0')).join('');
+    }
+}

package/src/charting/glyphs/ObjectBoxGlyph.js

@@ -0,0 +1,21 @@
+import { Glyph } from './Glyph.js';
+
+/** Business/Data Object: a box with one bar under its top. */
+export class ObjectBoxGlyph extends Glyph {
+    static key = 'object-box';
+    static ownsInterior = true;
+
+    parts(ctx) {
+        const { w, h } = ctx;
+        const G = Glyph, st = (k) => this.stroke(ctx, k);
+        return G.group([
+            G.rect(-w / 2, -h / 2, w, h, ctx.color, st()),
+            G.path(this.bars(h).map(y => `M ${-w / 2},${y} L ${w / 2},${y}`).join(' '), 'none', st()),
+        ]);
+    }
+
+    /** Heights of the bars across the box. */
+    bars(h) {
+        return [-h * 0.22];
+    }
+}

package/src/charting/glyphs/OrJunctionGlyph.js

@@ -0,0 +1,17 @@
+import { sampleArc } from '../templates/outline.js';
+import { Glyph } from './Glyph.js';
+
+/** (Or) Junction: the same dot, hollow. */
+export class OrJunctionGlyph extends Glyph {
+    static key = 'junction-or';
+    static ownsInterior = true;
+
+    parts(ctx) {
+        const G = Glyph, st = (k) => this.stroke(ctx, k);
+        return G.circle(0, 0, ctx.circleR * 0.4, '#ffffff', st());
+    }
+    outline(ctx) {
+        const r = ctx.circleR * 0.4;
+        return sampleArc(0, 0, r, r, 0, Math.PI * 2, 24).slice(0, -1);
+    }
+}

package/src/charting/glyphs/ParallelogramGlyph.js

@@ -0,0 +1,20 @@
+import { Glyph } from './Glyph.js';
+
+/** Requirement: a skewed box. */
+export class ParallelogramGlyph extends Glyph {
+    static key = 'parallelogram';
+    static ownsInterior = true;
+
+    parts(ctx) {
+        const { w, h } = ctx;
+        const G = Glyph, st = (k) => this.stroke(ctx, k);
+        const skew = w * 0.15;
+        const d = `M ${-w / 2 + skew},${-h / 2} L ${w / 2},${-h / 2} L ${w / 2 - skew},${h / 2} L ${-w / 2},${h / 2} Z`;
+        return G.path(d, ctx.color, st());
+    }
+    outline(ctx) {
+        const { w, h } = ctx;
+        const skew = w * 0.15;
+        return [[-w / 2 + skew, -h / 2], [w / 2, -h / 2], [w / 2 - skew, h / 2], [-w / 2, h / 2]];
+    }
+}

package/src/charting/glyphs/PersonGlyph.js

@@ -0,0 +1,23 @@
+import { Glyph } from './Glyph.js';
+
+/** A disc with a white head-and-shoulders silhouette. */
+export class PersonGlyph extends Glyph {
+    static key = 'person';
+    static ownsInterior = true;
+
+    parts(ctx) {
+        const G = Glyph, st = (k) => this.stroke(ctx, k);
+        const r = ctx.circleR;
+        const headR = r * 0.30;
+        const headY = -(r * 0.28);
+        const neckY = headY + headR + r * 0.05;
+        const bodyW = r * 0.55;
+        const bodyH = r * 0.88;
+        const bodyPath = `M ${-bodyW},${bodyH} Q ${-bodyW},${neckY} 0,${neckY} Q ${bodyW},${neckY} ${bodyW},${bodyH} Z`;
+        return G.group([
+            G.circle(0, 0, r, ctx.color, st()),
+            G.circle(0, headY, headR, '#fff', null, { opacity: 0.92 }),
+            G.path(bodyPath, '#fff', null, { opacity: 0.92 }),
+        ]);
+    }
+}

package/src/charting/glyphs/PillGlyph.js

@@ -0,0 +1,23 @@
+import { sampleArc } from '../templates/outline.js';
+import { Glyph } from './Glyph.js';
+
+/** Service: a fully rounded "stadium" box. */
+export class PillGlyph extends Glyph {
+    static key = 'pill';
+    static ownsInterior = true;
+
+    parts(ctx) {
+        const { w, h } = ctx;
+        const G = Glyph, st = (k) => this.stroke(ctx, k);
+        return G.rect(-w / 2, -h / 2, w, h, ctx.color, st(), { rx: h / 2 });
+    }
+    /** Two semicircular caps joined by straight sides. */
+    outline(ctx) {
+        const { w, h } = ctx;
+        const r = Math.min(h / 2, w / 2), cx = w / 2 - r;
+        return [
+            ...sampleArc(cx, 0, r, r, -Math.PI / 2, Math.PI / 2, 16),
+            ...sampleArc(-cx, 0, r, r, Math.PI / 2, Math.PI * 1.5, 16),
+        ];
+    }
+}

package/src/charting/glyphs/PinGlyph.js

@@ -0,0 +1,18 @@
+import { Glyph } from './Glyph.js';
+
+/** Location: a map pin. */
+export class PinGlyph extends Glyph {
+    static key = 'pin';
+    static ownsInterior = true;
+
+    parts(ctx) {
+        const { w, h } = ctx;
+        const G = Glyph, st = (k) => this.stroke(ctx, k);
+        const hr = Math.min(w, h) * 0.36, cy = -h / 2 + hr;
+        return G.path(
+            `M 0,${h / 2} C ${-hr * 0.78},${cy + hr * 1.05} ${-hr},${cy + hr * 0.55} ${-hr},${cy}`
+            + ` A ${hr} ${hr} 0 1 1 ${hr},${cy}`
+            + ` C ${hr},${cy + hr * 0.55} ${hr * 0.78},${cy + hr * 1.05} 0,${h / 2} Z`,
+            ctx.color, st());
+    }
+}

package/src/charting/glyphs/PrincipleGlyph.js

@@ -0,0 +1,23 @@
+import { Glyph } from './Glyph.js';
+
+/** Principle: a rounded square with an exclamation mark. */
+export class PrincipleGlyph extends Glyph {
+    static key = 'principle';
+    static ownsInterior = true;
+
+    parts(ctx) {
+        const { w, h } = ctx;
+        const G = Glyph, st = (k) => this.stroke(ctx, k);
+        const s = Math.min(w, h) * 0.7;
+        return G.group([
+            G.rect(-s / 2, -s / 2, s, s, ctx.color, st(), { rx: s * 0.15 }),
+            G.path(`M0,${-s * 0.30} L0,${s * 0.06}`, 'none', { color: ctx.strokeColor, width: s * 0.17 }),
+            G.circle(0, s * 0.27, s * 0.095, ctx.strokeColor, null),
+        ]);
+    }
+    /** The square it draws, smaller than its box. */
+    outline(ctx) {
+        const s = Math.min(ctx.w, ctx.h) * 0.7;
+        return [[-s / 2, -s / 2], [s / 2, -s / 2], [s / 2, s / 2], [-s / 2, s / 2]];
+    }
+}

package/src/charting/glyphs/ProductBoxGlyph.js

@@ -0,0 +1,16 @@
+import { Glyph } from './Glyph.js';
+
+/** Product: a box with a short bar, top-left only. */
+export class ProductBoxGlyph extends Glyph {
+    static key = 'product-box';
+    static ownsInterior = true;
+
+    parts(ctx) {
+        const { w, h } = ctx;
+        const G = Glyph, st = (k) => this.stroke(ctx, k);
+        return G.group([
+            G.rect(-w / 2, -h / 2, w, h, ctx.color, st()),
+            G.path(`M ${-w / 2},${-h * 0.22} L ${-w * 0.1},${-h * 0.22} L ${-w * 0.1},${-h / 2}`, 'none', st()),
+        ]);
+    }
+}

package/src/charting/glyphs/RectGlyph.js

@@ -0,0 +1,15 @@
+import { Glyph } from './Glyph.js';
+
+/** A box; `cornerStyle` picks sharp, rounded or chamfered (ArchiMate Motivation) corners. */
+export class RectGlyph extends Glyph {
+    static key = 'rect';
+
+    parts(ctx) {
+        const { w, h } = ctx;
+        const G = Glyph, st = (k) => this.stroke(ctx, k);
+        if (ctx.cornerStyle === 'chamfered') return G.path(Glyph.chamferedRectPath(w, h), ctx.color, st());
+        // undefined (plain graphDiagram) -> a small rx 3; 'sharp' is a real 0; 'rounded' (ArchiMate
+        // behavior) is quite round, capped so a small box doesn't turn circular.
+        return G.rect(-w / 2, -h / 2, w, h, ctx.color, st(), { rx: Glyph.cornerRadius(ctx.cornerStyle, w, h) });
+    }
+}

package/src/charting/glyphs/RoundedBoxGlyph.js

@@ -0,0 +1,13 @@
+import { Glyph } from './Glyph.js';
+
+/** Work Package: a plain rounded box. */
+export class RoundedBoxGlyph extends Glyph {
+    static key = 'rounded-box';
+    static ownsInterior = true;
+
+    parts(ctx) {
+        const { w, h } = ctx;
+        const G = Glyph, st = (k) => this.stroke(ctx, k);
+        return G.rect(-w / 2, -h / 2, w, h, ctx.color, st(), { rx: Math.min(w, h) * 0.22 });
+    }
+}

package/src/charting/glyphs/StackGlyph.js

@@ -0,0 +1,14 @@
+import { Glyph } from './Glyph.js';
+
+/** Plateau: three stacked bars. */
+export class StackGlyph extends Glyph {
+    static key = 'stack';
+    static ownsInterior = true;
+
+    parts(ctx) {
+        const { w, h } = ctx;
+        const G = Glyph, st = (k) => this.stroke(ctx, k);
+        const barH = h * 0.15, gap = h * 0.25, bw = w * 0.86;
+        return G.group([-gap, 0, gap].map(dy => G.rect(-bw / 2, dy - barH / 2, bw, barH, ctx.strokeColor, null)));
+    }
+}

package/src/charting/glyphs/StepsGlyph.js

@@ -0,0 +1,20 @@
+import { Glyph } from './Glyph.js';
+
+/** Capability: an ascending staircase of squares. */
+export class StepsGlyph extends Glyph {
+    static key = 'steps';
+    static ownsInterior = true;
+
+    parts(ctx) {
+        const { w, h } = ctx;
+        const G = Glyph, st = (k) => this.stroke(ctx, k);
+        const cols = 3, cellW = w / cols, cellH = h / cols;
+        const parts = [];
+        for (let col = 0; col < cols; col++) {
+            for (let row = cols - 1 - col; row < cols; row++) {
+                parts.push(G.rect(-w / 2 + col * cellW, -h / 2 + row * cellH, cellW, cellH, ctx.color, st(0.75)));
+            }
+        }
+        return G.group(parts);
+    }
+}

package/src/charting/glyphs/StickFigureGlyph.js

@@ -0,0 +1,32 @@
+import { Glyph } from './Glyph.js';
+
+/** Business Actor: the spec's stick figure. */
+export class StickFigureGlyph extends Glyph {
+    static key = 'stick-figure';
+    static ownsInterior = true;
+
+    parts(ctx) {
+        const { w, h } = ctx;
+        const G = Glyph, st = (k) => this.stroke(ctx, k);
+        const s = Math.min(w, h);
+        const headR = s * 0.17;
+        const headCy = -s / 2 + headR;
+        const neckY = headCy + headR;
+        const hipY = neckY + s * 0.26;
+        const footY = s / 2;
+        const armY = neckY + s * 0.07;
+        return G.group([
+            G.circle(0, headCy, headR, ctx.color, st()),
+            G.path(
+                `M0,${neckY} L0,${hipY}`
+                + ` M${-s * 0.30},${armY} L${s * 0.30},${armY}`
+                + ` M0,${hipY} L${-s * 0.26},${footY} M0,${hipY} L${s * 0.26},${footY}`,
+                'none', st(1.4)),
+        ]);
+    }
+    /** The figure's own extent: arm span by head-to-feet. */
+    outline(ctx) {
+        const s = Math.min(ctx.w, ctx.h);
+        return [[-s * 0.30, -s / 2], [s * 0.30, -s / 2], [s * 0.30, s / 2], [-s * 0.30, s / 2]];
+    }
+}

package/src/charting/glyphs/SystemSoftwareBoxGlyph.js

@@ -0,0 +1,16 @@
+import { Glyph } from './Glyph.js';
+
+/** System Software: a box with a circle on it. */
+export class SystemSoftwareBoxGlyph extends Glyph {
+    static key = 'system-software-box';
+    static ownsInterior = true;
+
+    parts(ctx) {
+        const { w, h } = ctx;
+        const G = Glyph, st = (k) => this.stroke(ctx, k);
+        return G.group([
+            G.rect(-w / 2, -h / 2, w, h, ctx.color, st()),
+            G.circle(w * 0.22, -h * 0.08, Math.min(w, h) * 0.26, ctx.color, st()),
+        ]);
+    }
+}

package/src/charting/glyphs/TabbedBoxGlyph.js

@@ -0,0 +1,37 @@
+import { Glyph } from './Glyph.js';
+
+/** How tall the tab is, and its share of the width (capped), as Archi draws a group. */
+export const TAB_HEIGHT = 18;
+const TAB_SHARE = 0.5, TAB_MAX = 160;
+
+/**
+ * Archi's group: a box with a name tab on its top-left corner. The tab is
+ * part of the outline, so lines end at it; `ctx.size` is the whole shape,
+ * tab included.
+ */
+export class TabbedBoxGlyph extends Glyph {
+    static key = 'tabbed-box';
+    static ownsInterior = true;
+
+    /** The tab's width for a shape `w` wide. */
+    static tabWidth(w) {
+        return Math.min(w * TAB_SHARE, TAB_MAX);
+    }
+
+    parts(ctx) {
+        const { w, h } = ctx;
+        const tab = TabbedBoxGlyph.tabWidth(w);
+        const st = this.stroke(ctx);
+        return Glyph.group([
+            Glyph.rect(-w / 2, -h / 2, tab, TAB_HEIGHT, ctx.color, st),
+            Glyph.rect(-w / 2, -h / 2 + TAB_HEIGHT, w, h - TAB_HEIGHT, ctx.color, st),
+        ]);
+    }
+
+    outline(ctx) {
+        const { w, h } = ctx;
+        const tab = TabbedBoxGlyph.tabWidth(w);
+        const top = -h / 2, body = top + TAB_HEIGHT;
+        return [[-w / 2, top], [-w / 2 + tab, top], [-w / 2 + tab, body], [w / 2, body], [w / 2, h / 2], [-w / 2, h / 2]];
+    }
+}

package/src/charting/glyphs/TargetGlyph.js

@@ -0,0 +1,23 @@
+import { sampleArc } from '../templates/outline.js';
+import { Glyph } from './Glyph.js';
+
+/** Goal/Outcome/Course of Action: a bullseye. */
+export class TargetGlyph extends Glyph {
+    static key = 'target';
+    static ownsInterior = true;
+
+    parts(ctx) {
+        const G = Glyph, st = (k) => this.stroke(ctx, k);
+        const rr = ctx.circleR * 0.92;
+        return G.group([
+            G.circle(0, 0, rr, ctx.color, st()),
+            G.circle(0, 0, rr * 0.62, 'none', st()),
+            G.circle(0, 0, rr * 0.26, ctx.strokeColor, null),
+        ]);
+    }
+    /** The bullseye's outer ring. */
+    outline(ctx) {
+        const r = ctx.circleR * 0.92;
+        return sampleArc(0, 0, r, r, 0, Math.PI * 2, 48).slice(0, -1);
+    }
+}

package/src/charting/glyphs/WavyBoxGlyph.js

@@ -0,0 +1,17 @@
+import { Glyph } from './Glyph.js';
+
+/** Representation/Deliverable: a box with a wavy bottom edge. */
+export class WavyBoxGlyph extends Glyph {
+    static key = 'wavy-box';
+    static ownsInterior = true;
+
+    parts(ctx) {
+        const { w, h } = ctx;
+        const G = Glyph, st = (k) => this.stroke(ctx, k);
+        const y0 = h * 0.30, amp = h * 0.22;
+        return G.path(
+            `M ${-w / 2},${-h / 2} L ${w / 2},${-h / 2} L ${w / 2},${y0}`
+            + ` Q ${w * 0.25},${y0 + amp} 0,${y0} Q ${-w * 0.25},${y0 - amp} ${-w / 2},${y0} Z`,
+            ctx.color, st());
+    }
+}

package/src/charting/glyphs/WheelGlyph.js

@@ -0,0 +1,28 @@
+import { sampleArc } from '../templates/outline.js';
+import { Glyph } from './Glyph.js';
+
+/** Driver: a steering wheel (rim, spokes, hub). */
+export class WheelGlyph extends Glyph {
+    static key = 'wheel';
+    static ownsInterior = true;
+
+    parts(ctx) {
+        const G = Glyph, st = (k) => this.stroke(ctx, k);
+        const gr = ctx.circleR * 0.9, spokes = 8;
+        let spokePaths = '';
+        for (let i = 0; i < spokes; i++) {
+            const a = (i / spokes) * Math.PI * 2;
+            spokePaths += `M0,0 L${Math.cos(a) * gr * 0.85},${Math.sin(a) * gr * 0.85} `;
+        }
+        return G.group([
+            G.circle(0, 0, gr * 0.9, 'none', { color: ctx.strokeColor, width: gr * 0.2 }),
+            G.path(spokePaths, 'none', st(1.25)),
+            G.circle(0, 0, gr * 0.26, ctx.strokeColor, null),
+        ]);
+    }
+    /** The rim's outer edge. */
+    outline(ctx) {
+        const r = ctx.circleR * 0.9;
+        return sampleArc(0, 0, r, r, 0, Math.PI * 2, 48).slice(0, -1);
+    }
+}

package/src/charting/glyphs/drawGlyph.js

@@ -0,0 +1,28 @@
+/**
+ * Replay a glyph's descriptor tree (see Glyph) through a renderer's
+ * primitives. A group is created before its children, as hand-written
+ * drawing code does, so the renderer's element map keeps the same order.
+ * @returns {Element} the drawn element (a group for a group descriptor)
+ */
+export function drawGlyph(renderer, part) {
+    const el = part.type === 'group' ? drawGroup(renderer, part) : drawOne(renderer, part);
+    for (const [name, value] of Object.entries(part.attrs ?? {})) el.setAttribute(name, value);
+    return el;
+}
+
+function drawGroup(renderer, part) {
+    const group = renderer.group();
+    for (const child of part.children) group.appendChild(drawGlyph(renderer, child));
+    return group;
+}
+
+function drawOne(renderer, part) {
+    switch (part.type) {
+        case 'rect': return renderer.rect(part.x, part.y, part.w, part.h, part.fill, part.stroke, part.extra);
+        case 'circle': return renderer.circle(part.cx, part.cy, part.r, part.fill, part.stroke);
+        case 'path': return renderer.path(part.d, part.fill, part.stroke);
+        case 'image': return renderer.image(part.href, part.x, part.y, part.w, part.h, part.options);
+        case 'text': return renderer.text(part.text, part.x, part.y, part.options);
+        default: throw new TypeError(`Unknown glyph part "${part.type}"`);
+    }
+}

package/src/charting/glyphs/glyphSvg.js

@@ -0,0 +1,55 @@
+import { svgEl } from '../templates/svg.js';
+
+/**
+ * The SVG tag, attributes and text for one glyph part, by the same rules the
+ * SVG renderer applies to its primitives (an unset fill is `none`; a stroke
+ * gives `stroke` and `stroke-width`), so a glyph drawn by the editor's
+ * templates looks like the one the graph engine draws. Pure: no DOM.
+ * @returns {{tag: string, attrs: Object, text?: string, children?: Array}}
+ */
+export function glyphElement(part) {
+    const stroke = (s) => (s ? { stroke: s.color || 'none', 'stroke-width': s.width || 1 } : {});
+    const withAttrs = (attrs) => ({ ...attrs, ...(part.attrs ?? {}) });
+    switch (part.type) {
+        case 'group':
+            return { tag: 'g', attrs: withAttrs({}), children: part.children.map(glyphElement) };
+        case 'rect':
+            return { tag: 'rect', attrs: withAttrs({ x: part.x, y: part.y, width: part.w, height: part.h, fill: part.fill || 'none', ...(part.extra ?? {}), ...stroke(part.stroke) }) };
+        case 'circle':
+            return { tag: 'circle', attrs: withAttrs({ cx: part.cx, cy: part.cy, r: part.r, fill: part.fill || 'none', ...stroke(part.stroke) }) };
+        case 'path':
+            return { tag: 'path', attrs: withAttrs({ d: part.d, fill: part.fill || 'none', ...stroke(part.stroke) }) };
+        case 'image': {
+            const o = part.options ?? {};
+            return {
+                tag: 'image',
+                attrs: { href: part.href, x: part.x, y: part.y, width: part.w, height: part.h, preserveAspectRatio: o.preserveAspectRatio || 'xMidYMid meet', 'pointer-events': o['pointer-events'] },
+            };
+        }
+        case 'text': {
+            const o = part.options ?? {};
+            return {
+                tag: 'text',
+                text: part.text,
+                attrs: {
+                    x: part.x, y: part.y, fill: o.fill || 'black', 'font-family': o.fontFamily || 'sans-serif',
+                    'font-size': o.fontSize || '12px', 'text-anchor': o.textAnchor || 'start',
+                    'dominant-baseline': o.verticalAlign === 'middle' ? 'middle' : null, 'pointer-events': o['pointer-events'],
+                },
+            };
+        }
+        default:
+            throw new TypeError(`Unknown glyph part "${part.type}"`);
+    }
+}
+
+/** Build a glyph's parts as SVG elements (a group stays a <g>). */
+export function glyphToSvg(part, doc = document) {
+    const build = ({ tag, attrs, text, children }) => {
+        const el = svgEl(tag, attrs, doc);
+        if (text !== undefined) el.textContent = text;
+        for (const child of children ?? []) el.appendChild(build(child));
+        return el;
+    };
+    return build(glyphElement(part));
+}