@peter.prib/renderengine 0.0.0-stage → 0.1.0

package/src/charting/edgeStyle/index.js

@@ -0,0 +1,4 @@
+export { EDGE_STYLE_PROPERTIES, LINE_ONLY_PROPERTIES, LINE_STYLE_DASH } from './EdgeStyleSchema.js';
+export { EdgeStyleCascade } from './EdgeStyleCascade.js';
+export { SetStyleCommand } from './SetStyleCommand.js';
+export { EdgeStyleDialog } from './EdgeStyleDialog.js';

package/src/charting/emphasis/EmphasisRule.js

@@ -0,0 +1,42 @@
+/**
+ * How strongly a shape or line is drawn, weakest last: drawn see-through
+ * (dimmed: not matching a highlight; faded: outside the viewpoint), or not
+ * drawn at all (hidden). Each level's opacity; hidden has none.
+ */
+export const EMPHASIS_OPACITY = Object.freeze({ dimmed: 0.3, faded: 0.2 });
+
+/** The levels from weakest effect to strongest; the strongest any rule gives wins. */
+export const EMPHASIS_LEVELS = Object.freeze([null, 'dimmed', 'faded', 'hidden']);
+
+/** The stronger of two levels. */
+export const strongerEmphasis = (a, b) => (EMPHASIS_LEVELS.indexOf(b) > EMPHASIS_LEVELS.indexOf(a) ? b : a);
+
+/**
+ * EmphasisRule — one reason the editor draws some shapes or lines more faintly
+ * or not at all (a highlight, a viewpoint, ...). The editor asks each of its
+ * rules (`DiagramEditor#emphasisRules()`) and draws an item at the strongest
+ * level any gives; a line whose shape is hidden is hidden too. A rule only
+ * changes how an item is drawn: the item stays in the view, and its rule can
+ * be cleared.
+ */
+export class EmphasisRule {
+    /**
+     * How a shape is drawn under this rule.
+     * @param {Template} template
+     * @param {DiagramEditor} editor
+     * @returns {null|'dimmed'|'faded'|'hidden'} null: as usual
+     */
+    template(template, editor) {
+        return null;
+    }
+
+    /**
+     * How a line is drawn under this rule (its hidden ends are the editor's business).
+     * @param {Edge} edge
+     * @param {DiagramEditor} editor
+     * @returns {null|'dimmed'|'faded'|'hidden'}
+     */
+    edge(edge, editor) {
+        return null;
+    }
+}

package/src/charting/emphasis/HighlightRule.js

@@ -0,0 +1,24 @@
+import { EmphasisRule } from './EmphasisRule.js';
+
+/**
+ * HighlightRule — shapes whose name contains some text (any case) are drawn
+ * as usual and every other shape dimmed, so the matches stand out. Lines are
+ * left as they are. `matches(template)` is what a subclass changes to match
+ * on something else.
+ */
+export class HighlightRule extends EmphasisRule {
+    /** @param {string} text */
+    constructor(text) {
+        super();
+        this.text = String(text ?? '').trim();
+    }
+
+    /** Whether a shape matches: its name contains the text, ignoring case. */
+    matches(template) {
+        return String(template.name ?? '').toLowerCase().includes(this.text.toLowerCase());
+    }
+
+    template(template) {
+        return !this.text || this.matches(template) ? null : 'dimmed';
+    }
+}

package/src/charting/glyphs/ArrowGlyph.js

@@ -0,0 +1,21 @@
+import { Glyph } from './Glyph.js';
+
+/** Process: a flat-backed arrow pointing right. */
+export class ArrowGlyph extends Glyph {
+    static key = 'arrow';
+    static ownsInterior = true;
+
+    parts(ctx) {
+        const { w, h } = ctx;
+        const G = Glyph, st = (k) => this.stroke(ctx, k);
+        const sh = h * 0.27, hx = w * 0.08; // shaft half-height, where the head starts
+        const d = `M ${-w / 2},${-sh} L ${hx},${-sh} L ${hx},${-h / 2} L ${w / 2},0`
+            + ` L ${hx},${h / 2} L ${hx},${sh} L ${-w / 2},${sh} Z`;
+        return G.path(d, ctx.color, st());
+    }
+    outline(ctx) {
+        const { w, h } = ctx;
+        const sh = h * 0.27, hx = w * 0.08;
+        return [[-w / 2, -sh], [hx, -sh], [hx, -h / 2], [w / 2, 0], [hx, h / 2], [hx, sh], [-w / 2, sh]];
+    }
+}

package/src/charting/glyphs/BatteryGlyph.js

@@ -0,0 +1,18 @@
+import { Glyph } from './Glyph.js';
+
+/** Resource: a rounded box with a terminal nub and charge bars. */
+export class BatteryGlyph extends Glyph {
+    static key = 'battery';
+    static ownsInterior = true;
+
+    parts(ctx) {
+        const { w, h } = ctx;
+        const G = Glyph, st = (k) => this.stroke(ctx, k);
+        const nub = h * 0.25, barX = -w * 0.28;
+        return G.group([
+            G.rect(-w / 2, -h / 2, w * 0.88, h, ctx.color, st(), { rx: h * 0.15 }),
+            G.rect(w * 0.38, -nub / 2, w * 0.12, nub, ctx.color, st()),
+            G.path(`M${barX},${-h * 0.3} L${barX},${h * 0.3} M${barX + w * 0.14},${-h * 0.3} L${barX + w * 0.14},${h * 0.3} M${barX + w * 0.28},${-h * 0.3} L${barX + w * 0.28},${h * 0.3}`, 'none', st()),
+        ]);
+    }
+}

package/src/charting/glyphs/ChevronGlyph.js

@@ -0,0 +1,18 @@
+import { Glyph } from './Glyph.js';
+
+/** Function: a chevron pointing up, notched at the bottom. */
+export class ChevronGlyph extends Glyph {
+    static key = 'chevron';
+    static ownsInterior = true;
+
+    parts(ctx) {
+        const { w, h } = ctx;
+        const G = Glyph, st = (k) => this.stroke(ctx, k);
+        const d = `M ${-w / 2},${h / 2} L ${-w / 2},${-h * 0.22} L 0,${-h / 2} L ${w / 2},${-h * 0.22} L ${w / 2},${h / 2} L 0,${h * 0.22} Z`;
+        return G.path(d, ctx.color, st());
+    }
+    outline(ctx) {
+        const { w, h } = ctx;
+        return [[-w / 2, h / 2], [-w / 2, -h * 0.22], [0, -h / 2], [w / 2, -h * 0.22], [w / 2, h / 2], [0, h * 0.22]];
+    }
+}

package/src/charting/glyphs/CircleGlyph.js

@@ -0,0 +1,15 @@
+import { sampleArc } from '../templates/outline.js';
+import { Glyph } from './Glyph.js';
+
+/** A circle fitted to the smaller side: the plain graph node, and the fallback for unknown keys. */
+export class CircleGlyph extends Glyph {
+    static key = 'circle';
+
+    parts(ctx) {
+        const G = Glyph, st = (k) => this.stroke(ctx, k);
+        return G.circle(0, 0, ctx.circleR, ctx.color, st());
+    }
+    outline(ctx) {
+        return sampleArc(0, 0, ctx.circleR, ctx.circleR, 0, Math.PI * 2, 48).slice(0, -1);
+    }
+}

package/src/charting/glyphs/CloudGlyph.js

@@ -0,0 +1,19 @@
+import { Glyph } from './Glyph.js';
+
+/** Meaning: a rounded base and three bumps, fill only so the overlaps read as one silhouette. */
+export class CloudGlyph extends Glyph {
+    static key = 'cloud';
+    static ownsInterior = true;
+
+    parts(ctx) {
+        const { w, h } = ctx;
+        const G = Glyph, st = (k) => this.stroke(ctx, k);
+        const baseH = h * 0.5, baseY = h / 2 - baseH;
+        return G.group([
+            G.rect(-w * 0.42, baseY, w * 0.84, baseH, ctx.color, null, { rx: baseH / 2 }),
+            G.circle(-w * 0.24, baseY + baseH * 0.1, h * 0.3, ctx.color, null),
+            G.circle(0, baseY - h * 0.08, h * 0.36, ctx.color, null),
+            G.circle(w * 0.24, baseY + baseH * 0.1, h * 0.28, ctx.color, null),
+        ]);
+    }
+}

package/src/charting/glyphs/ComponentGlyph.js

@@ -0,0 +1,18 @@
+import { Glyph } from './Glyph.js';
+
+/** Component: a box with two connector tabs on its left edge. */
+export class ComponentGlyph extends Glyph {
+    static key = 'component';
+    static ownsInterior = true;
+
+    parts(ctx) {
+        const { w, h } = ctx;
+        const G = Glyph, st = (k) => this.stroke(ctx, k);
+        const tabW = w * 0.12, tabH = h * 0.16;
+        return G.group([
+            G.rect(-w / 2 + tabW * 0.6, -h / 2, w - tabW * 0.6, h, ctx.color, st()),
+            G.rect(-w / 2, -h * 0.28, tabW, tabH, ctx.color, st()),
+            G.rect(-w / 2, h * 0.08, tabW, tabH, ctx.color, st()),
+        ]);
+    }
+}

package/src/charting/glyphs/ConstraintGlyph.js

@@ -0,0 +1,24 @@
+import { Glyph } from './Glyph.js';
+
+/** Constraint: a parallelogram with an internal divider. */
+export class ConstraintGlyph extends Glyph {
+    static key = 'constraint';
+    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`;
+        const lx0 = -w / 2 + skew * 1.6;
+        return G.group([
+            G.path(d, ctx.color, st()),
+            G.path(`M ${lx0},${-h / 2} L ${lx0 - skew * 0.5},${h / 2}`, 'none', st(0.75)),
+        ]);
+    }
+    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/ContractBoxGlyph.js

@@ -0,0 +1,10 @@
+import { ObjectBoxGlyph } from './ObjectBoxGlyph.js';
+
+/** Contract: an object box with two bars. */
+export class ContractBoxGlyph extends ObjectBoxGlyph {
+    static key = 'contract-box';
+
+    bars(h) {
+        return [-h * 0.22, -h * 0.02];
+    }
+}

package/src/charting/glyphs/CubeGlyph.js

@@ -0,0 +1,19 @@
+import { Glyph } from './Glyph.js';
+
+/** Node: a 3-face isometric box (front, top, side). */
+export class CubeGlyph extends Glyph {
+    static key = 'cube';
+    static ownsInterior = true;
+
+    parts(ctx) {
+        const { w, h } = ctx;
+        const G = Glyph, st = (k) => this.stroke(ctx, k);
+        const depth = Math.min(w, h) * 0.32;
+        const fx0 = -w / 2, fx1 = w / 2 - depth, fy0 = -h / 2 + depth, fy1 = h / 2;
+        return G.group([
+            G.rect(fx0, fy0, fx1 - fx0, fy1 - fy0, ctx.color, st()),
+            G.path(`M ${fx0},${fy0} L ${fx0 + depth},${fy0 - depth} L ${fx1 + depth},${fy0 - depth} L ${fx1},${fy0} Z`, ctx.color, st()),
+            G.path(`M ${fx1},${fy0} L ${fx1 + depth},${fy0 - depth} L ${fx1 + depth},${fy1 - depth} L ${fx1},${fy1} Z`, ctx.color, st()),
+        ]);
+    }
+}

package/src/charting/glyphs/CylinderGlyph.js

@@ -0,0 +1,19 @@
+import { Glyph } from './Glyph.js';
+
+/** Role/Stakeholder: a horizontal drum. */
+export class CylinderGlyph extends Glyph {
+    static key = 'cylinder';
+    static ownsInterior = true;
+
+    parts(ctx) {
+        const { w, h } = ctx;
+        const G = Glyph, st = (k) => this.stroke(ctx, k);
+        const capRx = Math.min(w * 0.17, h * 0.5);
+        const cx = w / 2 - capRx;
+        return G.group([
+            G.path(`M ${-w / 2},${-h / 2} L ${cx},${-h / 2} A ${capRx} ${h / 2} 0 0 1 ${cx},${h / 2} L ${-w / 2},${h / 2} Z`, ctx.color, st()),
+            // The cap's far side, so it reads as a tube rather than a pill.
+            G.path(`M ${cx},${-h / 2} A ${capRx} ${h / 2} 0 0 0 ${cx},${h / 2}`, 'none', st()),
+        ]);
+    }
+}

package/src/charting/glyphs/DashedDoubleArrowGlyph.js

@@ -0,0 +1,11 @@
+import { Glyph } from './Glyph.js';
+import { DoubleArrowGlyph } from './DoubleArrowGlyph.js';
+
+/** Path: a dashed two-headed arrow. */
+export class DashedDoubleArrowGlyph extends DoubleArrowGlyph {
+    static key = 'double-arrow-dashed';
+
+    shaft(w, headW, stroke) {
+        return Glyph.path(`M ${-w / 2 + headW * 0.6},0 L ${w / 2 - headW * 0.6},0`, 'none', stroke, { 'stroke-dasharray': '3 3' });
+    }
+}

package/src/charting/glyphs/DeviceGlyph.js

@@ -0,0 +1,17 @@
+import { Glyph } from './Glyph.js';
+
+/** Device: a monitor on a small stand. */
+export class DeviceGlyph extends Glyph {
+    static key = 'device';
+    static ownsInterior = true;
+
+    parts(ctx) {
+        const { w, h } = ctx;
+        const G = Glyph, st = (k) => this.stroke(ctx, k);
+        const screenH = h * 0.60, standH = h * 0.26, standTop = -h / 2 + screenH;
+        return G.group([
+            G.rect(-w / 2, -h / 2, w, screenH, ctx.color, st(), { rx: h * 0.10 }),
+            G.path(`M ${-w * 0.12},${standTop} L ${w * 0.12},${standTop} L ${w * 0.34},${standTop + standH} L ${-w * 0.34},${standTop + standH} Z`, ctx.color, st()),
+        ]);
+    }
+}

package/src/charting/glyphs/DiamondGlyph.js

@@ -0,0 +1,17 @@
+import { Glyph } from './Glyph.js';
+
+/** A diamond fitted to the smaller side. */
+export class DiamondGlyph extends Glyph {
+    static key = 'diamond';
+
+    parts(ctx) {
+        const G = Glyph, st = (k) => this.stroke(ctx, k);
+        const r = ctx.circleR;
+        const diamondPoints = `0,${-r} ${r},0 0,${r} ${-r},0`;
+        return G.path(`M${diamondPoints}Z`, ctx.color, st());
+    }
+    outline(ctx) {
+        const r = ctx.circleR;
+        return [[0, -r], [r, 0], [0, r], [-r, 0]];
+    }
+}

package/src/charting/glyphs/DocumentGlyph.js

@@ -0,0 +1,17 @@
+import { Glyph } from './Glyph.js';
+
+/** Artifact: a page with a folded top-right corner. */
+export class DocumentGlyph extends Glyph {
+    static key = 'document';
+    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.20;
+        return G.group([
+            G.path(`M ${-w / 2},${-h / 2} L ${w / 2 - fold},${-h / 2} L ${w / 2},${-h / 2 + fold} L ${w / 2},${h / 2} L ${-w / 2},${h / 2} Z`, ctx.color, st()),
+            G.path(`M ${w / 2 - fold},${-h / 2} L ${w / 2 - fold},${-h / 2 + fold} L ${w / 2},${-h / 2 + fold}`, 'none', st(0.75)),
+        ]);
+    }
+}

package/src/charting/glyphs/DoubleArrowGlyph.js

@@ -0,0 +1,23 @@
+import { Glyph } from './Glyph.js';
+
+/** Communication/Distribution network: a two-headed arrow. */
+export class DoubleArrowGlyph extends Glyph {
+    static key = 'double-arrow';
+    static ownsInterior = true;
+
+    parts(ctx) {
+        const { w, h } = ctx;
+        const G = Glyph, st = (k) => this.stroke(ctx, k);
+        const headW = w * 0.17, headH = h * 0.42;
+        return G.group([this.shaft(w, headW, st(1.25)), G.path(DoubleArrowGlyph.heads(w, headW, headH), 'none', st(1.25))]);
+    }
+
+    shaft(w, headW, stroke) {
+        return Glyph.path(`M ${-w / 2},0 L ${w / 2},0`, 'none', stroke);
+    }
+
+    static heads(w, headW, headH) {
+        return `M ${-w / 2 + headW},${-headH / 2} L ${-w / 2},0 L ${-w / 2 + headW},${headH / 2}`
+            + ` M ${w / 2 - headW},${-headH / 2} L ${w / 2},0 L ${w / 2 - headW},${headH / 2}`;
+    }
+}

package/src/charting/glyphs/DoubleCircleGlyph.js

@@ -0,0 +1,24 @@
+import { Glyph } from './Glyph.js';
+
+/** Collaboration: two overlapping circles. */
+export class DoubleCircleGlyph extends Glyph {
+    static key = 'double-circle';
+    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.44, off = cr * 0.55;
+        return G.group([
+            G.circle(-off, 0, cr, ctx.color, st()),
+            G.circle(off, 0, cr, ctx.color, st()),
+            // Re-stroke the back circle so the intersection lens reads.
+            G.circle(-off, 0, cr, 'none', st()),
+        ]);
+    }
+    /** Around both circles. */
+    outline(ctx) {
+        const cr = Math.min(ctx.w, ctx.h) * 0.44, off = cr * 0.55;
+        return [[-off - cr, -cr], [off + cr, -cr], [off + cr, cr], [-off - cr, cr]];
+    }
+}

package/src/charting/glyphs/EllipseGlyph.js

@@ -0,0 +1,18 @@
+import { sampleArc } from '../templates/outline.js';
+import { Glyph } from './Glyph.js';
+
+/** Value: an oval. */
+export class EllipseGlyph extends Glyph {
+    static key = 'ellipse';
+    static ownsInterior = true;
+
+    parts(ctx) {
+        const { w, h } = ctx;
+        const G = Glyph, st = (k) => this.stroke(ctx, k);
+        const d = `M ${-w / 2},0 A ${w / 2} ${h / 2} 0 1 0 ${w / 2},0 A ${w / 2} ${h / 2} 0 1 0 ${-w / 2},0 Z`;
+        return G.path(d, ctx.color, st());
+    }
+    outline(ctx) {
+        return sampleArc(0, 0, ctx.w / 2, ctx.h / 2, 0, Math.PI * 2, 48).slice(0, -1);
+    }
+}

package/src/charting/glyphs/FactoryGlyph.js

@@ -0,0 +1,20 @@
+import { Glyph } from './Glyph.js';
+
+/** Facility: a building with a zigzag roofline. */
+export class FactoryGlyph extends Glyph {
+    static key = 'factory';
+    static ownsInterior = true;
+
+    parts(ctx) {
+        const { w, h } = ctx;
+        const G = Glyph, st = (k) => this.stroke(ctx, k);
+        const eaves = -h * 0.02, peaks = 3, tw = w / peaks;
+        let d = `M ${-w / 2},${h / 2} L ${-w / 2},${eaves}`;
+        for (let i = 0; i < peaks; i++) {
+            const xEnd = -w / 2 + tw * (i + 1);
+            d += ` L ${xEnd},${-h / 2} L ${xEnd},${eaves}`;
+        }
+        d += ` L ${w / 2},${h / 2} Z`;
+        return G.path(d, ctx.color, st());
+    }
+}

package/src/charting/glyphs/FlagGlyph.js

@@ -0,0 +1,16 @@
+import { Glyph } from './Glyph.js';
+
+/** Event: a notched-left, rounded-right pennant. */
+export class FlagGlyph extends Glyph {
+    static key = 'flag';
+    static ownsInterior = true;
+
+    parts(ctx) {
+        const { w, h } = ctx;
+        const G = Glyph, st = (k) => this.stroke(ctx, k);
+        const capX = Math.max(-w / 2, w / 2 - h / 2); // cap is a true semicircle
+        const notchX = -w / 2 + w * 0.18;
+        const d = `M ${-w / 2},${-h / 2} L ${capX},${-h / 2} A ${h / 2} ${h / 2} 0 0 1 ${capX},${h / 2} L ${-w / 2},${h / 2} L ${notchX},0 Z`;
+        return G.path(d, ctx.color, st());
+    }
+}

package/src/charting/glyphs/GapCircleGlyph.js

@@ -0,0 +1,17 @@
+import { Glyph } from './Glyph.js';
+
+/** Gap: a circle crossed by two horizontal lines. */
+export class GapCircleGlyph extends Glyph {
+    static key = 'gap-circle';
+    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.3;
+        return G.group([
+            G.path(`M ${-w / 2},${-h * 0.12} L ${w / 2},${-h * 0.12} M ${-w / 2},${h * 0.12} L ${w / 2},${h * 0.12}`, 'none', st()),
+            G.circle(0, 0, gr, ctx.color, st()),
+        ]);
+    }
+}

package/src/charting/glyphs/GearGlyph.js

@@ -0,0 +1,37 @@
+import { Glyph } from './Glyph.js';
+
+/** Equipment: two overlapping cogs. */
+export class GearGlyph extends Glyph {
+    static key = 'gear';
+    static ownsInterior = true;
+
+    parts(ctx) {
+        const { w, h } = ctx;
+        const G = Glyph, st = (k) => this.stroke(ctx, k);
+        const makeTeeth = (cx, cy, gr, toothCount) => {
+            const toothLen = gr * 0.38, toothW = gr * 0.44;
+            let teeth = '';
+            for (let i = 0; i < toothCount; i++) {
+                const angle = (i / toothCount) * Math.PI * 2;
+                const dx = Math.cos(angle), dy = Math.sin(angle), px = -dy, py = dx;
+                const tcx = cx + dx * (gr + toothLen / 2), tcy = cy + dy * (gr + toothLen / 2);
+                const x1 = tcx - dx * toothLen / 2 - px * toothW / 2, y1 = tcy - dy * toothLen / 2 - py * toothW / 2;
+                const x2 = tcx - dx * toothLen / 2 + px * toothW / 2, y2 = tcy - dy * toothLen / 2 + py * toothW / 2;
+                const x3 = tcx + dx * toothLen / 2 + px * toothW / 2, y3 = tcy + dy * toothLen / 2 + py * toothW / 2;
+                const x4 = tcx + dx * toothLen / 2 - px * toothW / 2, y4 = tcy + dy * toothLen / 2 - py * toothW / 2;
+                teeth += `M${x1},${y1} L${x2},${y2} L${x3},${y3} L${x4},${y4} Z `;
+            }
+            return teeth;
+        };
+        const bigR = Math.min(w, h) * 0.28, smallR = bigR * 0.60;
+        const bigCx = -w * 0.17, bigCy = h * 0.16, smallCx = w * 0.23, smallCy = -h * 0.21;
+        return G.group([
+            G.path(makeTeeth(bigCx, bigCy, bigR, 8), ctx.color, st(0.5)),
+            G.circle(bigCx, bigCy, bigR, ctx.color, st()),
+            G.path(makeTeeth(smallCx, smallCy, smallR, 6), ctx.color, st(0.5)),
+            G.circle(smallCx, smallCy, smallR, ctx.color, st()),
+            G.circle(bigCx, bigCy, bigR * 0.35, '#fff', null),
+            G.circle(smallCx, smallCy, smallR * 0.35, '#fff', null),
+        ]);
+    }
+}

package/src/charting/glyphs/Glyph.js

@@ -0,0 +1,98 @@
+/**
+ * Glyph — one notation shape (ArchiMate's pill, cube, chevron, ... and the
+ * plain graph shapes), described once as renderer-neutral parts so the graph
+ * engine and the editor's templates draw exactly the same thing.
+ *
+ * `parts(ctx)` returns a descriptor tree centred on (0, 0):
+ *   { type: 'rect', x, y, w, h, fill, stroke, extra?, attrs? }
+ *   { type: 'circle', cx, cy, r, fill, stroke, attrs? }
+ *   { type: 'path', d, fill, stroke, attrs? }
+ *   { type: 'image', href, x, y, w, h, options? }
+ *   { type: 'text', text, x, y, options? }
+ *   { type: 'group', children: [...], attrs? }
+ * `stroke` is `{color, width}` or null; `extra`/`options` are the renderer's own
+ * extra arguments (e.g. `{rx}`); `attrs` are SVG attributes set afterwards
+ * (e.g. `stroke-dasharray`). drawGlyph() replays a tree through a renderer.
+ *
+ * Context: `w`, `h` (box size), `R` (half the larger side), `circleR` (half the
+ * smaller side), `color` (fill), `strokeColor`, `strokeWidth`, `cornerStyle`,
+ * `icon`, `iconUrl`.
+ */
+export class Glyph {
+    /** Shape name a node or element type asks for ('pill', 'cube', ...). */
+    static key = null;
+    /** True when the shape is busy enough that no centred icon or initials go on top of it. */
+    static ownsInterior = false;
+
+    /** @returns {Object} descriptor tree, centred on (0, 0) */
+    parts(ctx) {
+        throw new Error(`${this.constructor.name} must implement parts()`);
+    }
+
+    /**
+     * The visible outline as a closed polygon centred on (0, 0), for attaching
+     * lines exactly (curves sampled). The box by default; a shape whose edge
+     * is clearly not its box overrides it.
+     * @returns {Array<[number, number]>}
+     */
+    outline(ctx) {
+        const { w, h } = ctx;
+        return [[-w / 2, -h / 2], [w / 2, -h / 2], [w / 2, h / 2], [-w / 2, h / 2]];
+    }
+
+    /** The outline stroke, its width scaled by `scale` (omitted = as given). */
+    stroke(ctx, scale) {
+        return { color: ctx.strokeColor, width: scale === undefined ? ctx.strokeWidth : ctx.strokeWidth * scale };
+    }
+
+    /**
+     * Drawing context for a node: `size` ({w, h}) when it has its own box,
+     * otherwise a square of side 2R.
+     */
+    static context({ R, size, color, cornerStyle, strokeColor = '#fff', strokeWidth = 2, iconUrl = null, icon = null, ownFill = null }) {
+        return {
+            R,
+            w: size?.w ?? R * 2,
+            h: size?.h ?? R * 2,
+            circleR: size ? Math.min(size.w, size.h) / 2 : R,
+            // ownFill: a fill set on the item itself (null: it takes its kind's), for a glyph with a look of its own (a note).
+            color, cornerStyle, strokeColor, strokeWidth, iconUrl, icon, ownFill,
+        };
+    }
+
+    static rect(x, y, w, h, fill, stroke, extra, attrs) {
+        return { type: 'rect', x, y, w, h, fill, stroke, extra, attrs };
+    }
+
+    static circle(cx, cy, r, fill, stroke, attrs) {
+        return { type: 'circle', cx, cy, r, fill, stroke, attrs };
+    }
+
+    static path(d, fill, stroke, attrs) {
+        return { type: 'path', d, fill, stroke, attrs };
+    }
+
+    static image(href, x, y, w, h, options) {
+        return { type: 'image', href, x, y, w, h, options };
+    }
+
+    static text(text, x, y, options) {
+        return { type: 'text', text, x, y, options };
+    }
+
+    static group(children, attrs) {
+        return { type: 'group', children, attrs };
+    }
+
+    /** Box corner radius: 'sharp' 0, 'rounded' (ArchiMate behavior) quite round, otherwise a small 3. */
+    static cornerRadius(cornerStyle, w, h) {
+        return cornerStyle === 'sharp' ? 0 : cornerStyle === 'rounded' ? Math.min(w, h) * 0.28 : 3;
+    }
+
+    /** SVG path for a w x h box centred on the origin with all four corners cut at 45° (ArchiMate Motivation). */
+    static chamferedRectPath(w, h, chamfer) {
+        const hw = w / 2, hh = h / 2;
+        const c = Math.min(chamfer ?? Math.min(w, h) * 0.18, hw, hh);
+        return `M${-hw + c},${-hh} L${hw - c},${-hh} L${hw},${-hh + c} L${hw},${hh - c} L${hw - c},${hh} L${-hw + c},${hh} L${-hw},${hh - c} L${-hw},${-hh + c} Z`;
+    }
+}

package/src/charting/glyphs/GroupingBoxGlyph.js

@@ -0,0 +1,13 @@
+import { Glyph } from './Glyph.js';
+
+/** Grouping: a box with a dashed outline. */
+export class GroupingBoxGlyph extends Glyph {
+    static key = 'grouping-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(), undefined, { 'stroke-dasharray': '6 4' });
+    }
+}

package/src/charting/glyphs/HalfCircleGlyph.js

@@ -0,0 +1,22 @@
+import { Glyph } from './Glyph.js';
+
+/** Interaction: two facing half-discs. */
+export class HalfCircleGlyph extends Glyph {
+    static key = 'half-circle';
+    static ownsInterior = true;
+
+    parts(ctx) {
+        const { w, h } = ctx;
+        const G = Glyph, st = (k) => this.stroke(ctx, k);
+        const hr = Math.min(w, h) / 2 * 0.92, gap = hr * 0.20;
+        return G.group([
+            G.path(`M ${-gap},${-hr} A ${hr} ${hr} 0 0 0 ${-gap},${hr} Z`, ctx.color, st()),
+            G.path(`M ${gap},${-hr} A ${hr} ${hr} 0 0 1 ${gap},${hr} Z`, ctx.color, st()),
+        ]);
+    }
+    /** Around both half-discs. */
+    outline(ctx) {
+        const hr = Math.min(ctx.w, ctx.h) / 2 * 0.92, gap = hr * 0.20;
+        return [[-gap - hr, -hr], [gap + hr, -hr], [gap + hr, hr], [-gap - hr, hr]];
+    }
+}