@peter.prib/renderengine 0.0.0-stage → 0.2.0

package/src/charting/SettingsViewPropertiesDialog.js

@@ -0,0 +1,58 @@
+import { ViewPropertiesDialog } from './ViewPropertiesDialog.js';
+import { inheritableFields, readInheritableFields } from './SettingsCascade.js';
+import { MODEL_SETTINGS_PROPERTIES } from './SettingsManager.js';
+
+const byKey = (keys) => MODEL_SETTINGS_PROPERTIES.filter(p => keys.includes(p.key));
+/** Diagram settings a view may override (routing, grid, how invalid relationships show). */
+const DIAGRAM = byKey(['edgeRouting', 'gridSize', 'showGrid', 'invalidRelationships']);
+/** Watermark settings a view may override. */
+const WATERMARK = byKey(['watermark', 'watermarkRotation', 'watermarkRepeat', 'watermarkOpacity']);
+const TITLE_POSITIONS = [['none', 'None'], ['top', 'Top'], ['bottom', 'Bottom']];
+
+/**
+ * SettingsViewPropertiesDialog — a view's properties plus its level of the
+ * settings cascade (SettingsManager): routing and grid under Diagram;
+ * background, title band and watermark under Appearance. A cascading setting
+ * may inherit, showing the value and the level it would come from; settings
+ * only a view has (background, title band) are set outright. Used by the
+ * ArchiMate editor.
+ */
+export class SettingsViewPropertiesDialog extends ViewPropertiesDialog {
+    /**
+     * @param {Object} options - As ViewPropertiesDialog, plus:
+     * @param {SettingsManager} options.settingsManager
+     * @param {string} [options.modelId] - Settings key of the model level
+     */
+    constructor({ settingsManager, modelId = 'default', ...rest }) {
+        super(rest);
+        this.settings = settingsManager;
+        this.modelId = modelId;
+    }
+
+    sections() {
+        const own = this.settings.getViewSettings(this.view);
+        const inherited = this.settings.cascade(this.view, this.modelId).inheritedBy('view');
+        return [
+            { type: 'heading', label: 'Diagram' },
+            ...inheritableFields(DIAGRAM, own, inherited),
+            { type: 'heading', label: 'Appearance' },
+            { key: 'background', label: 'Background', type: 'color', value: own.background || '#ffffff' },
+            { key: 'backgroundImage', label: 'Background image', type: 'text', value: own.backgroundImage ?? '', placeholder: 'URL (optional)' },
+            // The band's text is the "title" setting; it is not the view's name.
+            { key: 'bandTitle', label: 'Title band', type: 'text', value: own.title ?? '', placeholder: 'Text shown above or below the diagram' },
+            { key: 'titlePosition', label: 'Title position', type: 'select', value: own.titlePosition ?? 'none', choices: TITLE_POSITIONS },
+            ...inheritableFields(WATERMARK, own, inherited),
+        ];
+    }
+
+    applySections(values) {
+        this.settings.saveViewSettings(this.view, {
+            // undefined inherits from the model level (SettingsCascade).
+            ...readInheritableFields([...DIAGRAM, ...WATERMARK], values),
+            background: values.background,
+            backgroundImage: values.backgroundImage?.trim() ?? '',
+            title: values.bandTitle?.trim() ?? '',
+            titlePosition: values.titlePosition || 'none',
+        });
+    }
+}

package/src/charting/ShapePaths.js

@@ -0,0 +1,27 @@
+/**
+ * ShapePaths — pure geometry-to-SVG-path helpers used by several chart types.
+ */
+export class ShapePaths {
+    /**
+     * Build an SVG path for an annular pie/doughnut slice.
+     * @param {number} cx center x
+     * @param {number} cy center y
+     * @param {number} rOuter outer radius
+     * @param {number} rInner inner radius (0 for a pie wedge)
+     * @param {number} startAngle radians
+     * @param {number} endAngle radians
+     * @returns {string}
+     */
+    static donutSlicePath(cx, cy, rOuter, rInner, startAngle, endAngle) {
+        const largeArc = (endAngle - startAngle) > Math.PI ? 1 : 0;
+        const outerStart = { x: cx + rOuter * Math.cos(startAngle), y: cy + rOuter * Math.sin(startAngle) };
+        const outerEnd   = { x: cx + rOuter * Math.cos(endAngle),   y: cy + rOuter * Math.sin(endAngle) };
+        if (rInner <= 0) {
+            return `M${cx},${cy} L${outerStart.x},${outerStart.y} A${rOuter},${rOuter} 0 ${largeArc} 1 ${outerEnd.x},${outerEnd.y} Z`;
+        }
+        const innerStart = { x: cx + rInner * Math.cos(endAngle),   y: cy + rInner * Math.sin(endAngle) };
+        const innerEnd   = { x: cx + rInner * Math.cos(startAngle), y: cy + rInner * Math.sin(startAngle) };
+        return `M${outerStart.x},${outerStart.y} A${rOuter},${rOuter} 0 ${largeArc} 1 ${outerEnd.x},${outerEnd.y} `
+             + `L${innerStart.x},${innerStart.y} A${rInner},${rInner} 0 ${largeArc} 0 ${innerEnd.x},${innerEnd.y} Z`;
+    }
+}

package/src/charting/Statistics.js

@@ -0,0 +1,134 @@
+/**
+ * Statistics — pure, DOM-free helpers for statistical chart types.
+ *
+ * These used to live as private methods on RenderEngine. Moving them to a
+ * shared module lets HistogramChart, BoxPlotChart, DensityChart, ViolinChart,
+ * QQPlotChart, and LagPlotChart stay self-contained and testable without the
+ * full engine instance.
+ */
+export class Statistics {
+    /** Computes evenly-spaced bin edges/counts for a raw numeric sample. */
+    static histogramBins(values, binCount) {
+        const min = Math.min(...values);
+        const max = Math.max(...values);
+        const range = (max - min) || 1;
+        const n = Math.max(1, binCount);
+        const width = range / n;
+        const bins = Array.from({ length: n }, (_, i) => ({ from: min + i * width, to: min + (i + 1) * width, count: 0 }));
+        for (const v of values) {
+            let idx = Math.floor((v - min) / width);
+            if (idx >= n) idx = n - 1;
+            if (idx < 0) idx = 0;
+            bins[idx].count++;
+        }
+        return bins;
+    }
+
+    /**
+     * Inverse standard-normal CDF (probit function) via Peter Acklam's
+     * rational approximation.
+     */
+    static normalQuantile(p) {
+        if (p <= 0) return -Infinity;
+        if (p >= 1) return Infinity;
+        const a = [-3.969683028665376e+01, 2.209460984245205e+02, -2.759285104469687e+02, 1.383577518672690e+02, -3.066479806614716e+01, 2.506628277459239e+00];
+        const b = [-5.447609879822406e+01, 1.615858368580409e+02, -1.556989798598866e+02, 6.680131188771972e+01, -1.328068155288572e+01];
+        const c = [-7.784894002430293e-03, -3.223964580411365e-01, -2.400758277161838e+00, -2.549732539343734e+00, 4.374664141464968e+00, 2.938163982698783e+00];
+        const d = [7.784695709041462e-03, 3.224671290700398e-01, 2.445134137142996e+00, 3.754408661907416e+00];
+        const pLow = 0.02425, pHigh = 1 - pLow;
+
+        if (p < pLow) {
+            const q = Math.sqrt(-2 * Math.log(p));
+            return (((((c[0] * q + c[1]) * q + c[2]) * q + c[3]) * q + c[4]) * q + c[5])
+                 / ((((d[0] * q + d[1]) * q + d[2]) * q + d[3]) * q + 1);
+        }
+        if (p <= pHigh) {
+            const q = p - 0.5, r = q * q;
+            return (((((a[0] * r + a[1]) * r + a[2]) * r + a[3]) * r + a[4]) * r + a[5]) * q
+                 / (((((b[0] * r + b[1]) * r + b[2]) * r + b[3]) * r + b[4]) * r + 1);
+        }
+        const q = Math.sqrt(-2 * Math.log(1 - p));
+        return -(((((c[0] * q + c[1]) * q + c[2]) * q + c[3]) * q + c[4]) * q + c[5])
+              / ((((d[0] * q + d[1]) * q + d[2]) * q + d[3]) * q + 1);
+    }
+
+    /** Pairs each sorted sample value with a theoretical normal quantile. */
+    static qqPoints(values) {
+        const n = values.length;
+        if (n === 0) return [];
+        const sorted = [...values].sort((a, b) => a - b);
+        return sorted.map((sample, i) => ({ theoretical: Statistics.normalQuantile((i + 0.5) / n), sample }));
+    }
+
+    /** `[{x: values[i-lag], y: values[i]}]` for i = lag..length-1. */
+    static lagPairs(values, lag = 1) {
+        if (lag < 1 || values.length <= lag) return [];
+        const pairs = [];
+        for (let i = lag; i < values.length; i++) pairs.push({ x: values[i - lag], y: values[i] });
+        return pairs;
+    }
+
+    /** Linear-interpolation quantile (R-7 / PERCENTILE.INC) over a sorted array. */
+    static quantile(sorted, p) {
+        if (sorted.length === 0) return 0;
+        if (sorted.length === 1) return sorted[0];
+        const idx = p * (sorted.length - 1);
+        const lo = Math.floor(idx), hi = Math.ceil(idx);
+        if (lo === hi) return sorted[lo];
+        return sorted[lo] + (sorted[hi] - sorted[lo]) * (idx - lo);
+    }
+
+    /** Computes box-and-whisker summary stats for a raw numeric sample. */
+    static boxPlotStats(values) {
+        const sorted = [...values].sort((a, b) => a - b);
+        const q1 = Statistics.quantile(sorted, 0.25);
+        const median = Statistics.quantile(sorted, 0.5);
+        const q3 = Statistics.quantile(sorted, 0.75);
+        const iqr = q3 - q1;
+        const lowFence = q1 - 1.5 * iqr;
+        const highFence = q3 + 1.5 * iqr;
+        const within = sorted.filter(v => v >= lowFence && v <= highFence);
+        const outliers = sorted.filter(v => v < lowFence || v > highFence);
+        return {
+            min: within.length ? within[0] : sorted[0],
+            q1, median, q3,
+            max: within.length ? within[within.length - 1] : sorted[sorted.length - 1],
+            outliers,
+        };
+    }
+
+    /** Population standard deviation. */
+    static stdev(values) {
+        const n = values.length;
+        if (n < 2) return 0;
+        const mean = values.reduce((s, v) => s + v, 0) / n;
+        const variance = values.reduce((s, v) => s + (v - mean) ** 2, 0) / n;
+        return Math.sqrt(variance);
+    }
+
+    /**
+     * Gaussian-kernel density estimate — a smoothed distribution curve from
+     * a raw numeric sample. `bandwidth` defaults via Silverman's rule of thumb.
+     * @returns {Array<{x: number, density: number}>}
+     */
+    static kernelDensityEstimate(values, options = {}) {
+        const n = values.length;
+        const dataMin = Math.min(...values), dataMax = Math.max(...values);
+        const fallbackBandwidth = (dataMax - dataMin) * 0.1 || 1;
+        const silverman = n >= 2 ? 1.06 * Statistics.stdev(values) * Math.pow(n, -1 / 5) : 0;
+        const bandwidth = options.bandwidth ?? (silverman || fallbackBandwidth);
+        const sampleCount = options.sampleCount ?? 60;
+        const min = options.min ?? (dataMin - 3 * bandwidth);
+        const max = options.max ?? (dataMax + 3 * bandwidth);
+        const step = (max - min) / Math.max(1, sampleCount - 1);
+        const gaussian = (u) => Math.exp(-0.5 * u * u) / Math.sqrt(2 * Math.PI);
+
+        const points = [];
+        for (let i = 0; i < sampleCount; i++) {
+            const x = min + i * step;
+            const density = n === 0 ? 0 : values.reduce((s, v) => s + gaussian((x - v) / bandwidth), 0) / (n * bandwidth);
+            points.push({ x, density });
+        }
+        return points;
+    }
+}

package/src/charting/TemplateCatalog.js

@@ -0,0 +1,59 @@
+/**
+ * TemplateCatalog — registry of template types that can be added to a diagram.
+ * Each entry describes a template type and how to create instances.
+ */
+export class TemplateCatalog {
+    constructor() {
+        this.entries = new Map();  // type -> { name, icon, factory, properties }
+    }
+
+    /**
+     * Register a template type.
+     * @param {string} type - Unique type identifier
+     * @param {Object} spec - Template specification
+     * @param {string} spec.name - Display name
+     * @param {string} spec.icon - Icon/emoji (e.g., "📦")
+     * @param {Function} spec.factory - Factory function: (id, x, y) => Template instance
+     * @param {Object} spec.properties - Default properties for this type
+     */
+    register(type, spec) {
+        if (!spec.factory) {
+            throw new Error(`TemplateCatalog.register: factory required for type '${type}'`);
+        }
+        this.entries.set(type, {
+            type,
+            name: spec.name || type,
+            icon: spec.icon || '■',
+            factory: spec.factory,
+            properties: spec.properties || {},
+        });
+    }
+
+    /**
+     * Get a template type entry.
+     */
+    get(type) {
+        return this.entries.get(type);
+    }
+
+    /**
+     * Get all entries.
+     */
+    getAll() {
+        return Array.from(this.entries.values());
+    }
+
+    /**
+     * Create a template instance of given type.
+     * @param {string} type
+     * @param {string} id - Instance id
+     * @param {number} x - X position
+     * @param {number} y - Y position
+     * @returns {Template|null}
+     */
+    create(type, id, x, y) {
+        const entry = this.get(type);
+        if (!entry) return null;
+        return entry.factory(id, x, y);
+    }
+}

package/src/charting/TemplateLibrary.js

@@ -0,0 +1,103 @@
+import { LocalJsonStore } from './storage/LocalJsonStore.js';
+
+/**
+ * TemplateLibrary — view templates kept across models: a tool's own library,
+ * beside each model's templates. What every such library does: keep entries,
+ * offer built-in ones, give ids, and tell listeners after a change. A kind of
+ * view subclasses it for its own entries and imports (CanvasTemplateLibrary).
+ *
+ * An entry is plain JSON: `{ id, name, description, thumbnail, view }`, where
+ * `view` is the view's JSON form and `thumbnail` a `data:` URL or null.
+ *
+ * Entries are kept in a store (LocalJsonStore under the class's STORAGE_KEY by
+ * default, so the library lives in the browser); pass another store with
+ * `load(fallback)` and `save(value)` to keep them elsewhere. Built-in entries
+ * (`defaults`, the class's DEFAULTS unless given others) come first, are marked
+ * `builtIn`, are not stored, and cannot be renamed or removed.
+ */
+export class TemplateLibrary {
+    /** The storage key the default store uses; a subclass names its own. */
+    static STORAGE_KEY = 'renderengine.templates';
+
+    /** Built-in entries; a subclass names its own. */
+    static DEFAULTS = Object.freeze([]);
+
+    /**
+     * @param {Object} [options]
+     * @param {{load: Function, save: Function}} [options.store] - Where entries are kept
+     * @param {Array<Object>} [options.defaults] - Built-in entries
+     */
+    constructor({ store = new LocalJsonStore(this.constructor.STORAGE_KEY), defaults = this.constructor.DEFAULTS } = {}) {
+        this.store = store;
+        this.defaults = defaults.map(entry => ({ ...entry, builtIn: true }));
+        const saved = store.load([]);
+        this._entries = Array.isArray(saved) ? saved.filter(e => e && e.id && e.view) : [];
+        this._listeners = new Set();
+    }
+
+    /** Every entry: the built-in ones, then those added, in the order added. @returns {Array<Object>} */
+    list() {
+        return [...this.defaults, ...this._entries];
+    }
+
+    /** The entry with `id`, or null. */
+    get(id) {
+        return this.list().find(e => e.id === id) ?? null;
+    }
+
+    /**
+     * Keep a template.
+     * @param {Object} entry
+     * @param {Object} entry.view - The view's JSON form
+     * @param {string} [entry.name] - Defaults to the view's name
+     * @param {string} [entry.description]
+     * @param {string|null} [entry.thumbnail] - A `data:` URL
+     * @returns {Object} the entry as kept, with its id
+     */
+    add({ view, name = view?.name ?? 'Template', description = '', thumbnail = null }) {
+        if (!view) throw new Error('A template needs a view');
+        const entry = { id: this._newId(), name, description, thumbnail, view: JSON.parse(JSON.stringify(view)) };
+        this._entries.push(entry);
+        this._changed();
+        return entry;
+    }
+
+    /** Rename or re-describe an entry (not a built-in one). @returns {boolean} whether it was changed */
+    update(id, { name, description } = {}) {
+        const entry = this._entries.find(e => e.id === id);
+        if (!entry) return false;
+        if (name !== undefined) entry.name = name;
+        if (description !== undefined) entry.description = description;
+        this._changed();
+        return true;
+    }
+
+    /** Forget an entry (not a built-in one). @returns {boolean} whether it was removed */
+    remove(id) {
+        const before = this._entries.length;
+        this._entries = this._entries.filter(e => e.id !== id);
+        if (this._entries.length === before) return false;
+        this._changed();
+        return true;
+    }
+
+    /** Call `fn(entries)` after every change. @returns {Function} stops it */
+    onChange(fn) {
+        this._listeners.add(fn);
+        return () => this._listeners.delete(fn);
+    }
+
+    /** @private */
+    _newId() {
+        const taken = new Set(this.list().map(e => e.id));
+        let n = this._entries.length + 1;
+        while (taken.has(`template-${n}`)) n++;
+        return `template-${n}`;
+    }
+
+    /** @protected */
+    _changed() {
+        this.store.save(this._entries);
+        for (const fn of this._listeners) fn(this.list());
+    }
+}

package/src/charting/TextStyle.js

@@ -0,0 +1,168 @@
+/**
+ * TextStyle — how a shape's text is set: font, size, bold, italic, underline,
+ * and where it sits in the shape (alignment across, position down). One
+ * definition for every editor that lets text be styled (the template editor's
+ * shapes, the ArchiMate canvas shapes, the ArchiMate properties dialog), so the
+ * choices, how a size is written, the dialog fields and the drawing agree.
+ *
+ * A style is plain data, in the names a view instance's `appearance` uses:
+ * `{ fontFamily?, fontSize?, fontWeight?: 'bold', fontStyle?: 'italic',
+ *    textDecoration?: 'underline', textAlign?: 'left'|'center'|'right', textPosition?: 'top'|'middle'|'bottom' }`.
+ * A size is kept as written; a bare number is points ("10" → "10pt"), as Archi keeps it.
+ * The graph renderer calls the position `verticalAlign` (fromNode / toNode convert).
+ */
+
+/** Fonts offered (any other may be typed). */
+export const FONT_FAMILY_CHOICES = Object.freeze(['Segoe UI', 'Arial', 'Helvetica', 'Verdana', 'Tahoma', 'Calibri', 'Times New Roman', 'Georgia', 'Courier New']);
+
+/** Sizes offered, in points. */
+export const FONT_SIZE_CHOICES = Object.freeze(['8pt', '9pt', '10pt', '11pt', '12pt', '14pt', '16pt', '18pt', '20pt', '24pt', '28pt', '36pt']);
+
+/** Where text sits across a shape, and down it. */
+export const TEXT_ALIGN_CHOICES = Object.freeze(['left', 'center', 'right']);
+export const TEXT_POSITION_CHOICES = Object.freeze(['top', 'middle', 'bottom']);
+
+/** The style keys. */
+export const TEXT_STYLE_KEYS = Object.freeze(['fontFamily', 'fontSize', 'fontWeight', 'fontStyle', 'textDecoration', 'textAlign', 'textPosition']);
+
+/** A style key's name on a graph-renderer node, where it differs. */
+const NODE_NAMES = Object.freeze({ textPosition: 'verticalAlign' });
+
+const isUnset = (v) => v === undefined || v === null || v === '';
+
+export class TextStyle {
+    /**
+     * A size as stored: a bare number is points.
+     * @param {string|number} size
+     * @returns {string|undefined}
+     */
+    static normaliseSize(size) {
+        if (isUnset(size)) return undefined;
+        const text = String(size).trim();
+        return /^\d+(\.\d+)?$/.test(text) ? `${text}pt` : text;
+    }
+
+    /**
+     * A size in pixels, for drawing: points are 4/3 of a pixel, a bare number or
+     * "px" is pixels as given. Undefined when there is no usable size.
+     */
+    static pixels(size) {
+        if (isUnset(size)) return undefined;
+        const value = parseFloat(size);
+        if (!(value > 0)) return undefined;
+        return String(size).trim().endsWith('pt') ? value * 4 / 3 : value;
+    }
+
+    /**
+     * FormDialog fields for a style: font, size, bold, italic, underline (unless
+     * `underline: false`), alignment and position (unless `placement: false`).
+     * Their keys are prefixed with `prefix`.
+     * @param {Object} style - The current style
+     * @param {Object} [options]
+     * @param {boolean} [options.underline] - Offer underline (default true)
+     * @param {boolean} [options.placement] - Offer alignment and position (default true)
+     * @param {string} [options.prefix] - Key prefix (default 'text-')
+     */
+    static fields(style = {}, { underline = true, placement = true, prefix = 'text-' } = {}) {
+        const choices = (list) => list.map(v => [v, v === 'center' ? 'centre' : v]);
+        return [
+            { key: `${prefix}fontFamily`, label: 'Font', type: 'text', value: style.fontFamily ?? '', suggestions: [...FONT_FAMILY_CHOICES], placeholder: 'default' },
+            { key: `${prefix}fontSize`, label: 'Text size', type: 'text', value: style.fontSize ?? '', suggestions: [...FONT_SIZE_CHOICES], placeholder: 'default' },
+            { key: `${prefix}bold`, label: 'Bold', type: 'checkbox', value: style.fontWeight === 'bold' },
+            { key: `${prefix}italic`, label: 'Italic', type: 'checkbox', value: style.fontStyle === 'italic' },
+            ...(underline ? [{ key: `${prefix}underline`, label: 'Underline', type: 'checkbox', value: style.textDecoration === 'underline' }] : []),
+            ...(placement ? [
+                { key: `${prefix}textAlign`, label: 'Alignment', type: 'select', value: style.textAlign ?? '', choices: choices(TEXT_ALIGN_CHOICES), allowEmpty: true },
+                { key: `${prefix}textPosition`, label: 'Position', type: 'select', value: style.textPosition ?? '', choices: choices(TEXT_POSITION_CHOICES), allowEmpty: true },
+            ] : []),
+        ];
+    }
+
+    /**
+     * The style a dialog's values describe (fields made by `fields()`); an
+     * unset value is undefined. Fields not offered are left out.
+     */
+    static fromValues(values, { prefix = 'text-' } = {}) {
+        const has = (key) => `${prefix}${key}` in values;
+        const v = (key) => values[`${prefix}${key}`];
+        const text = (key) => String(v(key) ?? '').trim() || undefined;
+        return {
+            ...(has('fontFamily') && { fontFamily: text('fontFamily') }),
+            ...(has('fontSize') && { fontSize: TextStyle.normaliseSize(v('fontSize')) }),
+            ...(has('bold') && { fontWeight: v('bold') ? 'bold' : undefined }),
+            ...(has('italic') && { fontStyle: v('italic') ? 'italic' : undefined }),
+            ...(has('underline') && { textDecoration: v('underline') ? 'underline' : undefined }),
+            ...(has('textAlign') && { textAlign: text('textAlign') }),
+            ...(has('textPosition') && { textPosition: text('textPosition') }),
+        };
+    }
+
+    /** The style a graph-renderer node is drawn with (its own names read back; the size normalised). */
+    static fromNode(node = {}) {
+        return Object.fromEntries(TEXT_STYLE_KEYS
+            .map(key => [key, node[NODE_NAMES[key] ?? key]])
+            .map(([key, value]) => [key, key === 'fontSize' ? TextStyle.normaliseSize(value) : (isUnset(value) ? undefined : value)])
+            .filter(([, value]) => value !== undefined));
+    }
+
+    /** A style in a graph-renderer node's names (unset values as undefined, to clear them). */
+    static toNode(style = {}) {
+        return Object.fromEntries(Object.entries(style).map(([key, value]) => [NODE_NAMES[key] ?? key, value]));
+    }
+
+    /** The keys of `next` whose value differs from `current`'s (unset counts as one value). */
+    static changes(current = {}, next = {}) {
+        return Object.fromEntries(Object.entries(next).filter(([k, value]) => {
+            const was = current[k];
+            return !((isUnset(was) && isUnset(value)) || was === value);
+        }));
+    }
+
+    /**
+     * SVG text attributes for a style; `defaultPixels` when it has no size.
+     * (Alignment and position place the text; see `placement`.)
+     * @returns {Object} attributes (unset ones left out)
+     */
+    static svgAttributes(style = {}, { defaultPixels = 12 } = {}) {
+        return {
+            'font-size': TextStyle.pixels(style.fontSize) ?? defaultPixels,
+            ...(style.fontFamily && { 'font-family': style.fontFamily }),
+            ...(style.fontWeight && { 'font-weight': style.fontWeight }),
+            ...(style.fontStyle && { 'font-style': style.fontStyle }),
+            ...(style.textDecoration && { 'text-decoration': style.textDecoration }),
+        };
+    }
+
+    /**
+     * Where a block of text lines goes in a box, from the style's alignment and
+     * position (or `defaults` where the style sets none): the x and SVG
+     * text-anchor of every line, and the baseline of the first (each next line
+     * is `lineHeight` lower).
+     * @param {Object} style
+     * @param {{left, top, right, bottom}} box - Where the text may go
+     * @param {number} lineCount
+     * @param {Object} [options]
+     * @param {number} [options.pixels] - The text's size
+     * @param {number} [options.lineHeight] - Defaults to 1.2 × pixels
+     * @param {number} [options.pad] - Space from the box's sides
+     * @param {{textAlign?, textPosition?}} [options.defaults] - Default 'left', 'top'
+     * @returns {{x: number, textAnchor: 'start'|'middle'|'end', baseline: number}}
+     */
+    static block(style, box, lineCount, { pixels = 12, lineHeight = Math.round(pixels * 1.2), pad = 6, defaults = {} } = {}) {
+        const align = style.textAlign ?? defaults.textAlign ?? 'left';
+        const position = style.textPosition ?? defaults.textPosition ?? 'top';
+        const across = align === 'right' ? { x: box.right - pad, textAnchor: 'end' }
+            : align === 'center' ? { x: (box.left + box.right) / 2, textAnchor: 'middle' }
+                : { x: box.left + pad, textAnchor: 'start' };
+        const height = box.bottom - box.top;
+        const baseline = position === 'bottom' ? box.bottom - pad - (lineCount - 1) * lineHeight
+            : position === 'middle' ? box.top + (height - lineCount * lineHeight) / 2 + pixels
+                : box.top + pad + pixels;
+        return { ...across, baseline };
+    }
+
+    /** Whether the style places its text (sets alignment or position). */
+    static placesText(style = {}) {
+        return !isUnset(style.textAlign) || !isUnset(style.textPosition);
+    }
+}

package/src/charting/ViewFit.js

@@ -0,0 +1,55 @@
+/**
+ * ViewFit — how to show a drawing's bounds whole in a viewport: centred, with
+ * a margin, in the viewport's shape. One calculation for every way a view is
+ * zoomed: a viewBox (the graph engine's SvgZoom) or a scale and pan (the
+ * template editor's transform).
+ */
+export class ViewFit {
+    /**
+     * The viewBox that shows `bounds` whole.
+     * @param {{x, y, width, height}} bounds - Drawing coordinates
+     * @param {{width, height}} viewport - The drawing's size on screen (none: the bounds' own shape)
+     * @param {number} [margin] - Space around, in drawing units
+     * @returns {{x, y, width, height}}
+     */
+    static viewBox(bounds, viewport, margin = 20) {
+        const width = Math.max(1, bounds.width + margin * 2);
+        const height = Math.max(1, bounds.height + margin * 2);
+        const aspect = viewport.width > 0 && viewport.height > 0 ? viewport.width / viewport.height : width / height;
+        const fitted = width / height > aspect ? { width, height: width / aspect } : { width: height * aspect, height };
+        return {
+            x: bounds.x + bounds.width / 2 - fitted.width / 2,
+            y: bounds.y + bounds.height / 2 - fitted.height / 2,
+            ...fitted,
+        };
+    }
+
+    /**
+     * The scale and pan that show `bounds` whole in the visible area:
+     * shown = drawing * scale + pan.
+     * @param {{x, y, width, height}} bounds
+     * @param {{x?, y?, width, height}} viewport - The visible area, in the units the pan is in (origin 0, 0 unless given)
+     * @param {number} [margin] - Drawing units
+     * @param {{minScale?: number, maxScale?: number}} [limits]
+     * @returns {{scale: number, panX: number, panY: number}}
+     */
+    static transform(bounds, viewport, margin = 20, { minScale = 0.1, maxScale = 5 } = {}) {
+        if (!(viewport.width > 0 && viewport.height > 0)) return { scale: 1, panX: 0, panY: 0 };
+        const box = ViewFit.viewBox(bounds, viewport, margin);
+        const scale = Math.min(maxScale, Math.max(minScale, viewport.width / box.width));
+        const cx = bounds.x + bounds.width / 2, cy = bounds.y + bounds.height / 2;
+        const { x = 0, y = 0 } = viewport;
+        return { scale, panX: x + viewport.width / 2 - cx * scale, panY: y + viewport.height / 2 - cy * scale };
+    }
+
+    /** The box around boxes ({left, top, right, bottom} or {x, y, width, height}); null for none. */
+    static union(boxes) {
+        const edges = boxes.filter(Boolean).map(b => ('left' in b
+            ? b
+            : { left: b.x, top: b.y, right: b.x + b.width, bottom: b.y + b.height }));
+        if (!edges.length) return null;
+        const left = Math.min(...edges.map(e => e.left)), top = Math.min(...edges.map(e => e.top));
+        const right = Math.max(...edges.map(e => e.right)), bottom = Math.max(...edges.map(e => e.bottom));
+        return { x: left, y: top, width: right - left, height: bottom - top };
+    }
+}