@peter.prib/renderengine 0.0.0-stage → 0.2.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/gauges/ArcTrack.js

@@ -0,0 +1,51 @@
+import { Gauge } from '../Gauge.js';
+import { GaugeTrack } from './GaugeTrack.js';
+
+/**
+ * ArcTrack — a gauge track along a circle's arc: the dial's 270°, a half
+ * circle, a full ring. Angles are degrees clockwise from 3 o'clock (the
+ * screen's own direction), so 135° with a 270° sweep is the dial's
+ * bottom-left to bottom-right, and 180° with 180° is a half circle over the top.
+ */
+export class ArcTrack extends GaugeTrack {
+    /**
+     * @param {Object} options
+     * @param {number} options.cx
+     * @param {number} options.cy
+     * @param {number} options.r - The radius of the track's centre line
+     * @param {number} options.thickness
+     * @param {number} [options.startAngle=135]
+     * @param {number} [options.sweep=270]
+     */
+    constructor({ cx, cy, r, thickness, startAngle = 135, sweep = 270 }) {
+        super(thickness);
+        Object.assign(this, { cx, cy, r, startAngle, sweep });
+    }
+
+    /** The arc's length along its centre line, in pixels. */
+    get length() { return this.r * Math.abs(this.sweep) * Math.PI / 180; }
+
+    /** The angle in degrees at a fraction along. */
+    angleAt(fraction) { return this.startAngle + fraction * this.sweep; }
+
+    point(fraction, offset = 0) {
+        const a = this.angleAt(fraction) * Math.PI / 180;
+        const r = this.r + offset;
+        return { x: this.cx + r * Math.cos(a), y: this.cy + r * Math.sin(a) };
+    }
+
+    draw(renderer, from, to, color, { thickness = this.thickness, cap } = {}) {
+        const rad = Math.PI / 180;
+        const a0 = this.angleAt(Math.min(from, to)) * rad;
+        const a1 = this.angleAt(Math.max(from, to)) * rad;
+        renderer.path(Gauge.arcPath(this.cx, this.cy, this.r, a0, a1), 'none', { color, width: thickness, ...(cap ? { cap } : {}) });
+    }
+
+    get center() { return { x: this.cx, y: this.cy }; }
+
+    /** A label outside the arc leans away from the centre: 'start' on the right, 'end' on the left. */
+    anchorAt(fraction) {
+        const dx = Math.cos(this.angleAt(fraction) * Math.PI / 180);
+        return dx > 0.3 ? 'start' : dx < -0.3 ? 'end' : 'middle';
+    }
+}

package/src/charting/gauges/GaugeAnimation.js

@@ -0,0 +1,51 @@
+import { GaugeValue } from './GaugeValue.js';
+
+/**
+ * GaugeAnimation — eases a gauge from the value it shows to a new one, so a
+ * needle or fill moves instead of jumping.
+ *
+ * Each frame draws the gauge from `GaugeValue.between(from, to, t)`: the
+ * value, the target and each of several values move together; the history
+ * and the previous value are the new ones throughout. The clock is
+ * injectable (`schedule`, `now`) so it runs without a browser in tests.
+ */
+export class GaugeAnimation {
+    /** Ease out (cubic): quick at first, settling on the value. */
+    static ease(t) { return 1 - (1 - t) ** 3; }
+
+    /**
+     * @param {Object} options
+     * @param {GaugeValue} options.from
+     * @param {GaugeValue} options.to
+     * @param {number} [options.duration=400] - Milliseconds
+     * @param {(data: Object) => void} options.draw - Draws one frame from its gauge data
+     * @param {(callback: Function) => *} [options.schedule] - requestAnimationFrame, else a 16ms timer
+     * @param {() => number} [options.now]
+     */
+    constructor({ from, to, duration = 400, draw, schedule = GaugeAnimation.defaultSchedule(), now = () => Date.now() }) {
+        Object.assign(this, { from, to, duration, draw, schedule, now });
+        this.stopped = false;
+    }
+
+    static defaultSchedule() {
+        return typeof globalThis.requestAnimationFrame === 'function'
+            ? (callback) => globalThis.requestAnimationFrame(callback)
+            : (callback) => setTimeout(callback, 16);
+    }
+
+    /** Draw the first frame now and the rest on the clock, ending exactly on `to`. */
+    start() {
+        const started = this.now();
+        const frame = () => {
+            if (this.stopped) return;
+            const t = this.duration > 0 ? Math.min(1, (this.now() - started) / this.duration) : 1;
+            this.draw(GaugeValue.between(this.from, this.to, GaugeAnimation.ease(t)));
+            if (t < 1) this.schedule(frame);
+        };
+        frame();
+        return this;
+    }
+
+    /** No more frames (a newer value has started its own). */
+    stop() { this.stopped = true; }
+}

package/src/charting/gauges/GaugeBands.js

@@ -0,0 +1,48 @@
+import { ColorPalette } from '../ColorPalette.js';
+
+/**
+ * GaugeBands — ranges along a gauge's scale ("poor", "ok", "good"), each with
+ * its colour and label.
+ *
+ * Given as `[{ to, color?, label? }]` in order: each band runs from where the
+ * one before it ended (the scale's min for the first) to its `to` (`max` is
+ * read the same, as the bullet graph has always taken it). Every gauge draws
+ * its bands from here, and a value takes the colour of the band it falls in.
+ */
+export class GaugeBands {
+    /** Band colours used when a band has none of its own: bad, warning, good. */
+    static COLORS = ['#ff6b6b', '#ffd93d', '#6bcb77'];
+
+    /** How far a band's colour is mixed toward white when drawn behind a value. */
+    static TINT = 0.65;
+
+    /**
+     * @param {Array<{to?:number, max?:number, color?:string, label?:string}>} bands
+     * @param {import('./GaugeScale.js').GaugeScale} scale
+     * @param {Object} [options]
+     * @param {string[]} [options.colors] - Colours for bands without their own
+     */
+    constructor(bands = [], scale, { colors = GaugeBands.COLORS } = {}) {
+        this.scale = scale;
+        let from = scale.min;
+        this.list = (bands ?? []).map((band, index) => {
+            const to = scale.clamp(band.to ?? band.max ?? scale.max);
+            const entry = { from, to, color: band.color ?? colors[index % colors.length], label: band.label ?? null, index };
+            from = to;
+            return entry;
+        });
+    }
+
+    get length() { return this.list.length; }
+
+    /** The band a value falls in (the last one at a shared edge), or null. */
+    at(value) {
+        const v = this.scale.clamp(value);
+        return this.list.find(b => v >= b.from && v < b.to) ?? this.list.findLast(b => v >= b.from && v <= b.to) ?? null;
+    }
+
+    /** A band's colour as drawn behind the value: lighter, so the value shows on it. */
+    static tint(color) {
+        return /^#[0-9a-f]{6}$/i.test(color) ? ColorPalette.interpolate(color, '#ffffff', GaugeBands.TINT) : color;
+    }
+}

package/src/charting/gauges/GaugeScale.js

@@ -0,0 +1,87 @@
+/**
+ * GaugeScale — the range a gauge measures and how its numbers read.
+ *
+ * One scale per gauge: it turns a value into a 0-1 fraction of the way along
+ * the track, gives the tick values, and formats the value and tick labels.
+ * Every gauge draws from it, so `min`, `max` and `format` mean the same on
+ * all of them.
+ */
+export class GaugeScale {
+    /**
+     * @param {Object} [options]
+     * @param {number} [options.min=0]
+     * @param {number} [options.max=100]
+     * @param {Function|Object} [options.format] - `(value) => string`, or
+     *   `{ decimals, prefix, suffix, grouping, compact }`. Without one, a
+     *   0-100 scale reads as a percentage ("75.0%"), any other as its number.
+     * @param {string} [options.units] - The suffix when no format is given ("ms", "°C")
+     */
+    constructor({ min = 0, max = 100, format = null, units = null } = {}) {
+        this.min = Number(min);
+        this.max = Number(max);
+        this.format = format ?? { decimals: 1, suffix: units != null ? ` ${units}` : (this.isPercent ? '%' : '') };
+    }
+
+    /** True for the plain 0-100 scale a percentage gauge has. */
+    get isPercent() { return this.min === 0 && this.max === 100; }
+
+    get span() { return (this.max - this.min) || 1; }
+
+    /** The value held to the scale's range. */
+    clamp(value) {
+        const v = Number(value);
+        if (!Number.isFinite(v)) return this.min;
+        return Math.min(Math.max(v, Math.min(this.min, this.max)), Math.max(this.min, this.max));
+    }
+
+    /** How far along the scale a value is, 0-1 (held to the range). */
+    fraction(value) { return (this.clamp(value) - this.min) / this.span; }
+
+    /** The value at a fraction of the way along. */
+    valueAt(fraction) { return this.min + fraction * this.span; }
+
+    /** `count` equal steps: count + 1 values from min to max. */
+    ticks(count = 5) {
+        const n = Math.max(1, Math.round(count));
+        return Array.from({ length: n + 1 }, (_, i) => this.valueAt(i / n));
+    }
+
+    /** A value as the gauge shows it. */
+    label(value) { return GaugeScale.formatNumber(value, this.format); }
+
+    /**
+     * A tick's label: the value's prefix and suffix, with only the decimals a
+     * step of `span / count` needs ("0", "25", ... not "0.0%", "25.0%").
+     */
+    tickLabel(value, count = 5) {
+        if (typeof this.format === 'function') return this.format(value);
+        const step = this.span / Math.max(1, Math.round(count));
+        // The fewest decimals that show the step exactly (0.25 needs 2), at most 6.
+        let decimals = 0;
+        while (decimals < 6 && Math.abs(step * 10 ** decimals - Math.round(step * 10 ** decimals)) > 1e-9) decimals++;
+        return GaugeScale.formatNumber(value, { ...this.format, decimals });
+    }
+
+    /**
+     * Format a number: a function format is called; an object one gives
+     * decimals (null: as it is), prefix, suffix, grouping (1,234) and compact (1.2K).
+     */
+    static formatNumber(value, format = {}) {
+        if (typeof format === 'function') return format(value);
+        const { decimals = null, prefix = '', suffix = '', grouping = false, compact = false } = format ?? {};
+        const v = Number(value);
+        if (!Number.isFinite(v)) return `${prefix}${value}${suffix}`;
+        let text;
+        if (compact || grouping) {
+            const digits = decimals ?? (compact ? 1 : undefined);
+            text = new Intl.NumberFormat('en', {
+                notation: compact ? 'compact' : 'standard',
+                useGrouping: true,
+                ...(digits != null ? { minimumFractionDigits: compact ? 0 : digits, maximumFractionDigits: digits } : {}),
+            }).format(v);
+        } else {
+            text = decimals == null ? String(v) : v.toFixed(decimals);
+        }
+        return `${prefix}${text}${suffix}`;
+    }
+}

package/src/charting/gauges/GaugeTrack.js

@@ -0,0 +1,44 @@
+/**
+ * GaugeTrack — the path a gauge's value moves along, as fractions 0-1.
+ *
+ * A subclass is one geometry (a straight bar, an arc). The gauge asks it for
+ * points and draws segments on it, so bands, the value, ticks and a target
+ * marker are drawn the same way on every gauge whatever its shape.
+ *
+ * A track has a `length` (pixels along it) as well as its `thickness`.
+ * Offsets are across the track from its centre line: positive is outward
+ * (below a horizontal bar, right of a vertical one, away from an arc's centre).
+ */
+export class GaugeTrack {
+    /** @param {number} thickness - The track's width across */
+    constructor(thickness) {
+        if (new.target === GaugeTrack) throw new TypeError('GaugeTrack is abstract — subclass it');
+        this.thickness = thickness;
+    }
+
+    /** The point at a fraction along, `offset` across. @returns {{x:number, y:number}} */
+    point(fraction, offset = 0) { throw new Error(`${this.constructor.name} must implement point()`); }
+
+    /**
+     * Draw the track from one fraction to another, in a colour.
+     * @param {Object} renderer
+     * @param {number} from - 0-1
+     * @param {number} to - 0-1
+     * @param {string} color
+     * @param {Object} [options] - `thickness` (this track's by default), `cap` ('round' ends)
+     */
+    draw(renderer, from, to, color, options = {}) { throw new Error(`${this.constructor.name} must implement draw()`); }
+
+    /** Where a label sits in the middle of the gauge. @returns {{x:number, y:number}} */
+    get center() { throw new Error(`${this.constructor.name} must implement center`); }
+
+    /** A straight line across the track at a fraction, between two offsets (a tick, a target). */
+    line(renderer, fraction, fromOffset, toOffset, stroke) {
+        const a = this.point(fraction, fromOffset);
+        const b = this.point(fraction, toOffset);
+        renderer.path(`M${a.x},${a.y} L${b.x},${b.y}`, 'none', stroke);
+    }
+
+    /** How a label at a point outside the track is anchored ('start', 'middle' or 'end'). */
+    anchorAt(fraction) { return 'middle'; }
+}

package/src/charting/gauges/GaugeValue.js

@@ -0,0 +1,61 @@
+/**
+ * GaugeValue — what a gauge's data says: the value, and what it is compared
+ * with.
+ *
+ * Data is a plain number, or `{ value, target?, previous?, history?, values? }`;
+ * options of the same names win over the data's. `values` is for gauges that
+ * show several (one ring each): numbers, or `{ value, label?, color?, min?, max? }`;
+ * an array as the data is read as `values`.
+ */
+export class GaugeValue {
+    constructor({ value = 0, target = null, previous = null, history = [], values = [] } = {}) {
+        this.value = Number(value) || 0;
+        this.target = target == null ? null : Number(target);
+        this.history = (history ?? []).map(Number).filter(Number.isFinite);
+        // The value before this one: given, or the one before the last in the history.
+        this.previous = previous != null ? Number(previous) : (this.history.length > 1 ? this.history.at(-2) : null);
+        this.values = (values ?? []).map(v => (typeof v === 'object' && v !== null ? { ...v, value: Number(v.value) || 0 } : { value: Number(v) || 0 }));
+    }
+
+    /** The change from the previous value, or null without one. */
+    get change() { return this.previous == null ? null : this.value - this.previous; }
+
+    /** The change as a fraction of the previous value (0.1 is up 10%), or null. */
+    get changeRatio() { return this.previous ? this.change / Math.abs(this.previous) : null; }
+
+    /** As gauge data again (`{ value, target, previous, history, values }`). */
+    toData() {
+        const { value, target, previous, history, values } = this;
+        return { value, target, previous, history: [...history], values: values.map(v => ({ ...v })) };
+    }
+
+    /**
+     * The data part of the way (t, 0-1) from one value to another: the value,
+     * the target and each of several values in between (one that is new
+     * starts from the first value); the rest as `to` has them.
+     */
+    static between(from, to, t) {
+        const mix = (a, b) => (a == null || b == null ? b : a + (b - a) * t);
+        const data = to.toData();
+        data.value = mix(from.value, to.value);
+        data.target = mix(from.target, to.target);
+        data.values = to.values.map((v, i) => ({ ...v, value: mix(from.values[i]?.value ?? from.value, v.value) }));
+        return data;
+    }
+
+    static from(data, options = {}) {
+        const given = Array.isArray(data) ? { values: data } : (typeof data === 'object' && data !== null ? data : { value: data });
+        const pick = (key) => options[key] ?? given[key];
+        const values = pick('values') ?? [];
+        const history = pick('history') ?? [];
+        // Without a value: the first of several, else the last of the history.
+        const first = values.length ? (typeof values[0] === 'object' ? values[0].value : values[0]) : history.at(-1);
+        return new GaugeValue({
+            value: given.value ?? first ?? 0,
+            target: pick('target'),
+            previous: pick('previous'),
+            history,
+            values,
+        });
+    }
+}

package/src/charting/gauges/HorizontalTrack.js

@@ -0,0 +1,14 @@
+import { LinearTrack } from './LinearTrack.js';
+
+/** A track left to right. */
+export class HorizontalTrack extends LinearTrack {
+    point(fraction, offset = 0) {
+        return { x: this.x + fraction * this.length, y: this.y + this.thickness / 2 + offset };
+    }
+
+    rectangle(from, to, thickness) {
+        return { x: this.x + from * this.length, y: this.y + (this.thickness - thickness) / 2, width: (to - from) * this.length, height: thickness };
+    }
+
+    get center() { return this.point(0.5); }
+}

package/src/charting/gauges/LinearTrack.js

@@ -0,0 +1,29 @@
+import { GaugeTrack } from './GaugeTrack.js';
+
+/**
+ * LinearTrack — a straight gauge track: a box `length` long and `thickness`
+ * across, its segments drawn as rectangles. A subclass gives the direction.
+ */
+export class LinearTrack extends GaugeTrack {
+    /**
+     * @param {Object} options
+     * @param {number} options.x - The box's left
+     * @param {number} options.y - The box's top
+     * @param {number} options.length
+     * @param {number} options.thickness
+     * @param {number} [options.radius=0] - Corner radius of the drawn segments
+     */
+    constructor({ x, y, length, thickness, radius = 0 }) {
+        super(thickness);
+        if (new.target === LinearTrack) throw new TypeError('LinearTrack is abstract — use HorizontalTrack or VerticalTrack');
+        Object.assign(this, { x, y, length, radius });
+    }
+
+    /** The rectangle covering from one fraction to another, `thickness` across and centred. */
+    rectangle(from, to, thickness) { throw new Error(`${this.constructor.name} must implement rectangle()`); }
+
+    draw(renderer, from, to, color, { thickness = this.thickness } = {}) {
+        const r = this.rectangle(Math.min(from, to), Math.max(from, to), thickness);
+        renderer.rect(r.x, r.y, r.width, r.height, color, null, this.radius ? { rx: this.radius, ry: this.radius } : {});
+    }
+}

package/src/charting/gauges/Sparkline.js

@@ -0,0 +1,42 @@
+/**
+ * Sparkline — a small line of a series' recent values, fitted to a box:
+ * the first value at the left, the last at the right, the lowest at the
+ * bottom and the highest at the top.
+ */
+export class Sparkline {
+    /**
+     * @param {number[]} values - At least two to draw a line
+     * @param {{x:number, y:number, width:number, height:number}} box
+     */
+    constructor(values, box) {
+        this.values = values.map(Number).filter(Number.isFinite);
+        this.box = box;
+    }
+
+    /** Each value's point in the box (none for fewer than two values). */
+    get points() {
+        const { values, box } = this;
+        if (values.length < 2) return [];
+        const lo = Math.min(...values);
+        const hi = Math.max(...values);
+        const span = (hi - lo) || 1;
+        // A flat series sits across the middle.
+        const flat = hi === lo;
+        return values.map((v, i) => ({
+            x: box.x + (i / (values.length - 1)) * box.width,
+            y: flat ? box.y + box.height / 2 : box.y + box.height - ((v - lo) / span) * box.height,
+        }));
+    }
+
+    /** The line as a path `d` (empty for fewer than two values). */
+    get d() { return this.points.map((p, i) => `${i ? 'L' : 'M'}${p.x},${p.y}`).join(' '); }
+
+    /** Draw the line and a dot on its last value. */
+    draw(renderer, { color = '#5352ed', width = 1.5 } = {}) {
+        const points = this.points;
+        if (!points.length) return;
+        renderer.path(this.d, 'none', { color, width });
+        const last = points.at(-1);
+        renderer.circle(last.x, last.y, 2.5, color);
+    }
+}

package/src/charting/gauges/VerticalTrack.js

@@ -0,0 +1,17 @@
+import { LinearTrack } from './LinearTrack.js';
+
+/** A track bottom to top. */
+export class VerticalTrack extends LinearTrack {
+    point(fraction, offset = 0) {
+        return { x: this.x + this.thickness / 2 + offset, y: this.y + this.length - fraction * this.length };
+    }
+
+    rectangle(from, to, thickness) {
+        return { x: this.x + (this.thickness - thickness) / 2, y: this.y + this.length - to * this.length, width: thickness, height: (to - from) * this.length };
+    }
+
+    get center() { return this.point(0.5); }
+
+    /** Labels beside a vertical track start at their point. */
+    anchorAt() { return 'start'; }
+}

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