@peter.prib/renderengine 0.0.0-stage → 0.2.0

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

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