@peter.prib/renderengine 0.0.0-stage → 0.2.0

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));
+}

package/src/charting/glyphs/index.js

@@ -0,0 +1,109 @@
+import { RectGlyph } from './RectGlyph.js';
+import { NoteGlyph } from './NoteGlyph.js';
+import { ImageGlyph } from './ImageGlyph.js';
+import { IconGlyph } from './IconGlyph.js';
+import { DiamondGlyph } from './DiamondGlyph.js';
+import { PersonGlyph } from './PersonGlyph.js';
+import { PillGlyph } from './PillGlyph.js';
+import { ArrowGlyph } from './ArrowGlyph.js';
+import { ChevronGlyph } from './ChevronGlyph.js';
+import { FlagGlyph } from './FlagGlyph.js';
+import { HalfCircleGlyph } from './HalfCircleGlyph.js';
+import { DoubleCircleGlyph } from './DoubleCircleGlyph.js';
+import { LollipopGlyph } from './LollipopGlyph.js';
+import { CylinderGlyph } from './CylinderGlyph.js';
+import { CubeGlyph } from './CubeGlyph.js';
+import { TargetGlyph } from './TargetGlyph.js';
+import { StickFigureGlyph } from './StickFigureGlyph.js';
+import { JunctionGlyph } from './JunctionGlyph.js';
+import { OrJunctionGlyph } from './OrJunctionGlyph.js';
+import { HexagonGlyph } from './HexagonGlyph.js';
+import { ObjectBoxGlyph } from './ObjectBoxGlyph.js';
+import { ContractBoxGlyph } from './ContractBoxGlyph.js';
+import { ProductBoxGlyph } from './ProductBoxGlyph.js';
+import { WavyBoxGlyph } from './WavyBoxGlyph.js';
+import { SystemSoftwareBoxGlyph } from './SystemSoftwareBoxGlyph.js';
+import { GroupingBoxGlyph } from './GroupingBoxGlyph.js';
+import { TabbedBoxGlyph } from './TabbedBoxGlyph.js';
+import { RoundedBoxGlyph } from './RoundedBoxGlyph.js';
+import { ComponentGlyph } from './ComponentGlyph.js';
+import { FactoryGlyph } from './FactoryGlyph.js';
+import { DeviceGlyph } from './DeviceGlyph.js';
+import { StepsGlyph } from './StepsGlyph.js';
+import { WheelGlyph } from './WheelGlyph.js';
+import { MagnifierGlyph } from './MagnifierGlyph.js';
+import { StackGlyph } from './StackGlyph.js';
+import { GapCircleGlyph } from './GapCircleGlyph.js';
+import { PrincipleGlyph } from './PrincipleGlyph.js';
+import { ConstraintGlyph } from './ConstraintGlyph.js';
+import { DoubleArrowGlyph } from './DoubleArrowGlyph.js';
+import { DashedDoubleArrowGlyph } from './DashedDoubleArrowGlyph.js';
+import { PinGlyph } from './PinGlyph.js';
+import { CloudGlyph } from './CloudGlyph.js';
+import { DocumentGlyph } from './DocumentGlyph.js';
+import { ParallelogramGlyph } from './ParallelogramGlyph.js';
+import { EllipseGlyph } from './EllipseGlyph.js';
+import { GearGlyph } from './GearGlyph.js';
+import { BatteryGlyph } from './BatteryGlyph.js';
+import { CircleGlyph } from './CircleGlyph.js';
+
+export { Glyph } from './Glyph.js';
+export { drawGlyph } from './drawGlyph.js';
+export { RectGlyph, NoteGlyph, ImageGlyph, IconGlyph, DiamondGlyph, PersonGlyph, PillGlyph, ArrowGlyph, ChevronGlyph, FlagGlyph, HalfCircleGlyph, DoubleCircleGlyph, LollipopGlyph, CylinderGlyph, CubeGlyph, TargetGlyph, StickFigureGlyph, JunctionGlyph, OrJunctionGlyph, HexagonGlyph, ObjectBoxGlyph, ContractBoxGlyph, ProductBoxGlyph, WavyBoxGlyph, SystemSoftwareBoxGlyph, GroupingBoxGlyph, TabbedBoxGlyph, RoundedBoxGlyph, ComponentGlyph, FactoryGlyph, DeviceGlyph, StepsGlyph, WheelGlyph, MagnifierGlyph, StackGlyph, GapCircleGlyph, PrincipleGlyph, ConstraintGlyph, DoubleArrowGlyph, DashedDoubleArrowGlyph, PinGlyph, CloudGlyph, DocumentGlyph, ParallelogramGlyph, EllipseGlyph, GearGlyph, BatteryGlyph, CircleGlyph };
+
+/** One instance per notation shape, by key ('pill', 'cube', ...). */
+export const GLYPHS = new Map([
+    [RectGlyph.key, new RectGlyph()],
+    [NoteGlyph.key, new NoteGlyph()],
+    [ImageGlyph.key, new ImageGlyph()],
+    [IconGlyph.key, new IconGlyph()],
+    [DiamondGlyph.key, new DiamondGlyph()],
+    [PersonGlyph.key, new PersonGlyph()],
+    [PillGlyph.key, new PillGlyph()],
+    [ArrowGlyph.key, new ArrowGlyph()],
+    [ChevronGlyph.key, new ChevronGlyph()],
+    [FlagGlyph.key, new FlagGlyph()],
+    [HalfCircleGlyph.key, new HalfCircleGlyph()],
+    [DoubleCircleGlyph.key, new DoubleCircleGlyph()],
+    [LollipopGlyph.key, new LollipopGlyph()],
+    [CylinderGlyph.key, new CylinderGlyph()],
+    [CubeGlyph.key, new CubeGlyph()],
+    [TargetGlyph.key, new TargetGlyph()],
+    [StickFigureGlyph.key, new StickFigureGlyph()],
+    [JunctionGlyph.key, new JunctionGlyph()],
+    [OrJunctionGlyph.key, new OrJunctionGlyph()],
+    [HexagonGlyph.key, new HexagonGlyph()],
+    [ObjectBoxGlyph.key, new ObjectBoxGlyph()],
+    [ContractBoxGlyph.key, new ContractBoxGlyph()],
+    [ProductBoxGlyph.key, new ProductBoxGlyph()],
+    [WavyBoxGlyph.key, new WavyBoxGlyph()],
+    [SystemSoftwareBoxGlyph.key, new SystemSoftwareBoxGlyph()],
+    [GroupingBoxGlyph.key, new GroupingBoxGlyph()],
+    [TabbedBoxGlyph.key, new TabbedBoxGlyph()],
+    [RoundedBoxGlyph.key, new RoundedBoxGlyph()],
+    [ComponentGlyph.key, new ComponentGlyph()],
+    [FactoryGlyph.key, new FactoryGlyph()],
+    [DeviceGlyph.key, new DeviceGlyph()],
+    [StepsGlyph.key, new StepsGlyph()],
+    [WheelGlyph.key, new WheelGlyph()],
+    [MagnifierGlyph.key, new MagnifierGlyph()],
+    [StackGlyph.key, new StackGlyph()],
+    [GapCircleGlyph.key, new GapCircleGlyph()],
+    [PrincipleGlyph.key, new PrincipleGlyph()],
+    [ConstraintGlyph.key, new ConstraintGlyph()],
+    [DoubleArrowGlyph.key, new DoubleArrowGlyph()],
+    [DashedDoubleArrowGlyph.key, new DashedDoubleArrowGlyph()],
+    [PinGlyph.key, new PinGlyph()],
+    [CloudGlyph.key, new CloudGlyph()],
+    [DocumentGlyph.key, new DocumentGlyph()],
+    [ParallelogramGlyph.key, new ParallelogramGlyph()],
+    [EllipseGlyph.key, new EllipseGlyph()],
+    [GearGlyph.key, new GearGlyph()],
+    [BatteryGlyph.key, new BatteryGlyph()],
+    [CircleGlyph.key, new CircleGlyph()],
+]);
+
+/** The glyph for a shape key; unknown keys draw as a circle (the plain graph node). */
+export function glyphFor(key) {
+    return GLYPHS.get(key) ?? GLYPHS.get('circle');
+}