@peter.prib/renderengine 0.12.0 → 0.13.0

package/src/charting/archimate/deleteFromModel.js

@@ -0,0 +1,57 @@
+import { FormDialog } from '../FormDialog.js';
+import { typeTitle } from './archimateNames.js';
+
+/** At most this many views or relationships are named; the rest are counted. */
+const LISTED = 10;
+
+/**
+ * What deleting elements from the model takes with it, in words, for the
+ * confirmation: the views they are on (and how many boxes), and the
+ * relationships that go too (ArchimateModel#usage).
+ * @param {ArchimateModel} model
+ * @param {Array<string>} elementIds
+ * @returns {string}
+ */
+export function deleteFromModelMessage(model, elementIds) {
+    const elements = elementIds.map(id => model.getElement(id)).filter(Boolean);
+    const name = (el) => `"${el.name || el.id}"`;
+    const { views, relationships } = model.usage(elementIds);
+    const list = (items) => [...items.slice(0, LISTED).map(s => `  • ${s}`), ...(items.length > LISTED ? [`  • and ${items.length - LISTED} more`] : [])];
+    const end = (id) => { const c = model.getElement(id) ?? model.getRelationship(id); return c ? `${c.name || typeTitle(c.type ?? c.kind ?? '') || c.id}` : id; };
+    const lines = [
+        elements.length === 1 ? `${name(elements[0])} (${typeTitle(elements[0].type ?? '')}) goes from the model.` : `These ${elements.length} elements go from the model: ${elements.map(name).join(', ')}.`,
+        '',
+        views.length
+            ? `Used in ${views.length} view${views.length === 1 ? '' : 's'}, where ${elements.length === 1 ? 'its' : 'their'} boxes go:`
+            : 'Used in no view.',
+        ...list(views.map(({ view, boxes }) => `${view.name || view.id}${boxes > 1 ? ` (${boxes} boxes)` : ''}`)),
+        '',
+        relationships.length
+            ? `${relationships.length} relationship${relationships.length === 1 ? '' : 's'} go${relationships.length === 1 ? 'es' : ''} too:`
+            : 'No relationships.',
+        ...list(relationships.map(r => `${end(r.source)} → ${end(r.target)} (${typeTitle(r.kind ?? r.type ?? '') || 'relationship'}${r.name ? `: ${r.name}` : ''})`)),
+        '',
+        'Undo puts them all back.',
+    ];
+    return lines.join('\n');
+}
+
+/**
+ * Ask before deleting elements from the model: a dialog saying where they are
+ * used and what goes with them; **Delete from model** runs `onConfirm()`.
+ * @returns {FormDialog|null} null when none of the ids is an element
+ */
+export function askDeleteFromModel(model, elementIds, { onConfirm, document: doc = globalThis.document } = {}) {
+    const ids = elementIds.filter(id => model.getElement(id));
+    if (!ids.length) return null;
+    const dialog = new FormDialog({
+        title: ids.length === 1 ? 'Delete from model' : `Delete ${ids.length} elements from model`,
+        description: deleteFromModelMessage(model, ids),
+        fields: [],
+        submitLabel: 'Delete from model',
+        document: doc,
+        onApply: () => onConfirm(ids),
+    });
+    dialog.open();
+    return dialog;
+}

package/src/charting/archimate/elementMenuItems.js

@@ -11,9 +11,10 @@
  * @param {(element) => void} host.editProperties
  * @param {(view, instanceId) => void} host.showIn - Open `view` with that box selected
  * @param {(element) => void} [host.addToView] - Show it on `view` (offered when it is not there)
+ * @param {(element) => void} [host.deleteFromModel] - Delete it from the model, after saying where it is used
  * @returns {Array<Object>} menu items
  */
-export function elementMenuItems(element, { model, view = null, editProperties, showIn, addToView = null }) {
+export function elementMenuItems(element, { model, view = null, editProperties, showIn, addToView = null, deleteFromModel = null }) {
     const placed = model.views()
         .map(v => ({ view: v, instance: v.elementInstancesFor?.(element.id)?.[0] }))
         .filter(({ instance }) => instance);
@@ -28,5 +29,6 @@ export function elementMenuItems(element, { model, view = null, editProperties,
             : { label: 'Show in View (on none)', disabled: true, action: () => {} },
         ...(addToView && view && !onThisView ? [{ label: `Add to "${view.name || 'this view'}"`, action: () => addToView(element) }] : []),
         { label: 'Generate View For This', action: () => model.generateView([element.id]) },
+        ...(deleteFromModel ? [{ separator: true }, { label: '🗑 Delete from model…', danger: true, action: () => deleteFromModel(element) }] : []),
     ];
 }

package/src/charting/archimate/heatMaps.js

@@ -0,0 +1,169 @@
+import { compileFormula } from '../../kernelExpr.js';
+
+/**
+ * Heat maps an ArchiMate view can be coloured by beyond its elements' own
+ * fields (ArchimateCanvasEditor#colourKeys): what change a deliverable or work
+ * package makes to each element, and a formula over the elements' numeric
+ * properties. Pure: no editor, no DOM.
+ */
+
+/** The change heat map's colours. */
+export const CHANGE_COLOURS = Object.freeze({ Create: '#FDD835', Update: '#1E88E5', Delete: '#D81B60' });
+
+/** Element types that make changes: their relationships to an element say what they do to it. */
+export const CHANGE_MAKERS = Object.freeze(['deliverable', 'work-package']);
+
+/** The words for each change, synonyms included (verbs as base forms; their -s, -ed, -ing forms match too). */
+export const CHANGE_WORDS = Object.freeze({
+    Delete: ['delete', 'remove', 'retire', 'decommission', 'drop', 'sunset', 'terminate', 'eliminate', 'discontinue', 'deprecate', 'withdraw', 'phase out', 'shut down', 'switch off'],
+    Create: ['create', 'add', 'new', 'introduce', 'build', 'built', 'establish', 'implement', 'insert', 'provision', 'set up', 'launch', 'develop', 'onboard'],
+    Update: ['update', 'change', 'modify', 'amend', 'enhance', 'upgrade', 'improve', 'revise', 'extend', 'migrate', 'refactor', 'replace', 'rework', 'adapt', 'alter', 'patch'],
+});
+
+/** Which change wins when an element is given more than one: the one with most consequence. */
+const PRECEDENCE = ['Delete', 'Create', 'Update'];
+
+const escape = (s) => s.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+
+/**
+ * A word and its inflections: retire → retires, retired, retiring; drop →
+ * dropped, dropping; modify → modifies, modified, modifying.
+ */
+function forms(word) {
+    const [verb, ...rest] = word.split(' ');
+    const tail = rest.length ? `\\s+${rest.map(escape).join('\\s+')}` : '';
+    const stem = verb.endsWith('e') ? verb.slice(0, -1) : verb;
+    const doubled = /[^aeiou][aeiou][bdgmnpt]$/.test(verb) ? `|${escape(verb)}${verb.at(-1)}(?:ed|ing)` : '';
+    const y = /[^aeiou]y$/.test(verb) ? `|${escape(verb.slice(0, -1))}i(?:es|ed)` : '';
+    return `(?:${escape(verb)}(?:s|es|d|ed)?|${escape(stem)}(?:ed|ing|es)${doubled}${y})${tail}`;
+}
+
+const PATTERNS = Object.fromEntries(Object.entries(CHANGE_WORDS)
+    .map(([change, words]) => [change, new RegExp(`\\b(?:${words.map(forms).join('|')})\\b`, 'i')]));
+
+/**
+ * The change a piece of text names ('Create', 'Update' or 'Delete'), or null.
+ * Where it names more than one, the one with most consequence (delete, then
+ * create, then update).
+ */
+export function changeAction(text) {
+    if (!text) return null;
+    return PRECEDENCE.find(change => PATTERNS[change].test(String(text))) ?? null;
+}
+
+/**
+ * The change one relationship says a deliverable or work package makes: its
+ * name, or, when it has none, the name of the deliverable or work package at
+ * one of its ends (`toward`: the end that is not the element changed, when
+ * known). Null when neither end makes changes, or nothing is said.
+ * @returns {'Create'|'Update'|'Delete'|null}
+ */
+export function relationshipChange(model, rel, toward = null) {
+    const ends = toward ? [toward] : [rel.source, rel.target];
+    const maker = ends.map(id => model.getElement(id)).find(e => e && CHANGE_MAKERS.includes(e.type));
+    if (!maker) return null;
+    return changeAction((rel.name ?? '').trim() ? rel.name : maker.name);
+}
+
+/**
+ * What change the deliverables and work packages related to an element make
+ * to it: for each relationship between them (either way), relationshipChange.
+ * Where they differ, the one with most consequence. Null when none says.
+ * @param {ArchimateModel} model
+ * @param {string} elementId
+ * @returns {'Create'|'Update'|'Delete'|null}
+ */
+export function elementChange(model, elementId) {
+    const found = new Set();
+    for (const rel of model.relationships()) {
+        const other = rel.source === elementId ? rel.target : rel.target === elementId ? rel.source : null;
+        const change = other && relationshipChange(model, rel, other);
+        if (change) found.add(change);
+    }
+    return PRECEDENCE.find(change => found.has(change)) ?? null;
+}
+
+/** Whether a model has anything that makes changes (a deliverable or work package). */
+export function hasChangeMakers(model) {
+    return model.elements().some(e => CHANGE_MAKERS.includes(e.type));
+}
+
+/**
+ * The names a formula can use for the properties: each property name as an
+ * identifier (anything not a letter, digit or _ becomes _; a leading digit gets
+ * a _ before it), mapped to the property it stands for.
+ * @param {Array<Object>} elements
+ * @returns {Map<string, string>} identifier -> property name
+ */
+export function propertyParams(elements) {
+    const params = new Map();
+    for (const e of elements) {
+        for (const p of e.properties ?? []) {
+            const name = p.name ?? p.key;
+            if (!name) continue;
+            let id = String(name).replace(/[^A-Za-z0-9_]/g, '_');
+            if (/^\d/.test(id)) id = `_${id}`;
+            if (!params.has(id)) params.set(id, name);
+        }
+    }
+    return params;
+}
+
+/**
+ * A formula's result for each element (by id): the formula over the
+ * element's numeric properties, by their propertyParams names. An element
+ * missing a property the formula uses, or whose value is not a number, or
+ * whose result is not a finite number, has none.
+ * Throws the formula's own error when it does not parse (an unknown name, say).
+ * @returns {Map<string, number>}
+ */
+export function expressionValues(elements, formula) {
+    const params = propertyParams(elements);
+    const names = [...params.keys()];
+    if (!names.length) throw new Error('No element here has a property to use');
+    const fn = compileFormula(formula, names);
+    const used = names.filter(n => new RegExp(`\\b${n}\\b`).test(formula));
+    const results = new Map();
+    for (const e of elements) {
+        const valueOf = (id) => {
+            const p = (e.properties ?? []).find(q => (q.name ?? q.key) === params.get(id));
+            const n = p === undefined || p.value === null || p.value === '' ? NaN : Number(p.value);
+            return n;
+        };
+        if (used.some(id => !Number.isFinite(valueOf(id)))) continue;
+        const result = fn(...names.map(id => { const v = valueOf(id); return Number.isFinite(v) ? v : 0; }));
+        if (Number.isFinite(result)) results.set(e.id, result);
+    }
+    return results;
+}
+
+/** A number as a label: integers as they are, others to at most 3 decimals. */
+const show = (n) => (Number.isInteger(n) ? String(n) : String(Number(n.toFixed(3))));
+
+/**
+ * Labels for a formula's results: each distinct result its own, in order,
+ * when there are at most `distinct` of them; else `bands` equal-width bands
+ * from the smallest to the largest ("10 – 20"), the last taking in the largest;
+ * a band no result falls in is left out.
+ * @param {Iterable<number>} numbers
+ * @returns {{labels: string[], labelOf: (n: number) => string}}
+ */
+export function resultBands(numbers, { distinct = 8, bands = 5 } = {}) {
+    const values = [...new Set(numbers)].sort((a, b) => a - b);
+    if (values.length <= distinct) return { labels: values.map(show), labelOf: show };
+    const lo = values[0], hi = values.at(-1), width = (hi - lo) / bands;
+    const all = Array.from({ length: bands }, (_, i) => `${show(lo + i * width)} – ${show(i === bands - 1 ? hi : lo + (i + 1) * width)}`);
+    const labelOf = (n) => all[Math.min(bands - 1, Math.floor((n - lo) / width))];
+    const used = new Set(values.map(labelOf));
+    return { labels: all.filter(l => used.has(l)), labelOf };
+}
+
+/** `count` colours from light to dark (a sequential scale, light yellow to dark red), for ordered values. */
+export function sequentialColours(count) {
+    const from = [255, 247, 188], to = [189, 0, 38];
+    const hex = (c) => Math.round(c).toString(16).padStart(2, '0');
+    return Array.from({ length: count }, (_, i) => {
+        const t = count === 1 ? 1 : i / (count - 1);
+        return `#${from.map((f, k) => hex(f + (to[k] - f) * t)).join('')}`;
+    });
+}

package/src/charting/archimate/index.js

@@ -15,3 +15,4 @@ export { ViewGroupTemplate, GROUP_FILL } from './ViewGroupTemplate.js';
 export { CustomViewpoints, CUSTOM_VIEWPOINTS_STORE } from './CustomViewpoints.js';
 export { specializationCatalogDialog } from './specializationCatalogDialog.js';
 export { elementTypeChoices } from './elementTypeChoices.js';
+export { askDeleteFromModel, deleteFromModelMessage } from './deleteFromModel.js';

package/src/charting/charts/BarChart.js

@@ -17,7 +17,7 @@ export class BarChart extends BarChartBase {
     _computeMaxValue() {
         const data = this.data;
         const rawMax = Math.max(...data.map(d => d.value)) || 1;
-        return this._drawYAxis(rawMax);
+        return this._drawYAxis(rawMax, Math.min(0, ...data.map(d => d.value)));
     }
 
     _beforeBars(maxValue) {
@@ -39,12 +39,12 @@ export class BarChart extends BarChartBase {
             }
 
             const color = colors ? this._palette.colorAt(i) : barColor;
-            const barHeight = (d.value / maxValue) * height;
+            const bar = this._barSpan(d.value);
             const barX = x + i * (bandWidth + margin);
-            const barY = y + height - barHeight;
 
-            this._datum(this.renderer.rect(barX, barY, bandWidth, barHeight, color, null, { bar: true, dataIndex: i, tooltip: `${d.label}: ${d.value}` }), { label: d.label });
-            this.renderer.text(String(d.value), barX + bandWidth / 2, barY - 5, { textAnchor, fontSize: '10px', fill: '#333' });
+            this._datum(this.renderer.rect(barX, bar.top, bandWidth, bar.height, color, null, { bar: true, dataIndex: i, tooltip: `${d.label}: ${d.value}` }), { label: d.label });
+            // The value just past the bar's end: above a bar going up, below one going down.
+            this.renderer.text(String(d.value), barX + bandWidth / 2, d.value < 0 ? bar.end + 12 : bar.end - 5, { textAnchor, fontSize: '10px', fill: '#333' });
             if (i % labelStep === 0) this.renderer.text(d.label, barX + bandWidth / 2, y + height + 20, { textAnchor });
         });
     }

package/src/charting/charts/BarChartBase.js

@@ -38,9 +38,27 @@ export class BarChartBase extends Chart {
         this.renderer.path(`M${x},${y} L${x},${y + height} L${x + width},${y + height}`, 'none', { color: 'black', width: 1 });
     }
 
-    /** Draw a Y axis and return the nice-rounded max value. */
-    _drawYAxis(rawMax) {
-        return new Axis().drawYAxis(this.renderer, this._plotBox, rawMax);
+    /**
+     * Draw a Y axis and return the nice-rounded max value. With a negative `rawMin` the axis goes
+     * below zero, with a zero line; `_barSpan` then draws each bar from zero, up or down.
+     */
+    _drawYAxis(rawMax, rawMin = 0) {
+        this._domain = new Axis().drawYRange(this.renderer, this._plotBox, rawMin, rawMax);
+        return this._domain.max;
+    }
+
+    /**
+     * Where a bar of `value` goes on the axis `_drawYAxis` drew: from the zero line up to it, or
+     * down to it when negative.
+     * @returns {{top: number, height: number, end: number}} `end` is the bar's far end from zero
+     */
+    _barSpan(value) {
+        const { y, height } = this._plotBox;
+        const { min, max } = this._domain;
+        const yOf = (v) => y + height - ((v - min) / (max - min)) * height;
+        const zero = yOf(0);
+        const end = yOf(value);
+        return { top: Math.min(zero, end), height: Math.abs(end - zero), end };
     }
 
     _render() {

package/src/charting/charts/GroupedBarChart.js

@@ -10,18 +10,17 @@ import { TableChart } from './TableChart.js';
  *   Array<{name: string, values: Array<{label: string, value: number}>}>
  *
  * Each category (`label`) gets a cluster of bars side-by-side, one per series. A value a series does
- * not have (missing, or null) is a gap in its cluster — no bar — never a bar of zero.
+ * not have (missing, or null) is a gap in its cluster — no bar — never a bar of zero. A negative value
+ * is drawn down from a zero line, the axis taking in the smallest value too.
  */
 export class GroupedBarChart extends BarChartBase {
     static chartType = 'groupedBar';
 
     _computeMaxValue() {
         const series = this.data;
-        const rawMax = Math.max(
-            ...series.flatMap(s => s.values.map(v => v.value).filter(v => v != null)),
-            1,
-        );
-        return this._drawYAxis(rawMax);
+        const values = series.flatMap(s => s.values.map(v => v.value).filter(v => v != null));
+        const rawMax = Math.max(...values, 1);
+        return this._drawYAxis(rawMax, Math.min(0, ...values));
     }
 
     _renderBars(maxValue) {
@@ -63,12 +62,11 @@ export class GroupedBarChart extends BarChartBase {
             series.forEach((seriesData, seriesIndex) => {
                 const value = valueBySeriesLabel[seriesIndex].get(label);
                 if (value == null) return;
-                const barHeight = (value / maxValue) * height;
+                const bar = this._barSpan(value);
                 const barX = clusterX + seriesIndex * barWidth + barGap / 2;
-                const barY = y + height - barHeight;
                 const color = this._palette.colorAt(seriesIndex);
 
-                this._datum(this.renderer.rect(barX, barY, finalBarWidth, barHeight, color, null, {
+                this._datum(this.renderer.rect(barX, bar.top, finalBarWidth, bar.height, color, null, {
                     tooltip: `${seriesData.name} — ${label}: ${value}`,
                 }), { label, series: seriesData.name });
             });

package/src/charting/charts/TableChart.js

@@ -46,14 +46,30 @@ export class TableChart extends Chart {
         return top + (1 + shown + more) * TableChart.ROW_H + bottom;
     }
 
-    /** A cell's text: a number exactly (to at most 4 decimals), null/undefined as `nullText`. */
-    static cellText(value, nullText = '—') {
+    /**
+     * A cell's text: a number exactly (to at most 4 decimals), null/undefined as `nullText`. With a
+     * `format` (`formatFor`'s), a number is written by it instead.
+     */
+    static cellText(value, nullText = '—', format = null) {
         if (value == null) return nullText;
+        if (typeof value === 'number' && format) return String(typeof format === 'function' ? format(value) : format.format(value));
         if (typeof value === 'number') return Number.isInteger(value) ? String(value) : String(Number(value.toFixed(4)));
         if (value instanceof Date) return value.toISOString().slice(0, 10);
         return String(value);
     }
 
+    /**
+     * The number format for one column or measure, from a view's `format` option: a function
+     * (number → text) or an `Intl.NumberFormat` for every number, or an object naming either per
+     * column (`{ Amount: new Intl.NumberFormat('en-AU', { style: 'currency', currency: 'AUD' }) }`),
+     * where a column it does not name keeps the plain text. Null when there is none.
+     */
+    static formatFor(format, name) {
+        if (!format) return null;
+        if (typeof format === 'function' || format instanceof Intl.NumberFormat) return format;
+        return format[name] ?? null;
+    }
+
     _render() {
         const data = this.data ?? [];
         const box = ChartBox.fromRenderer(this.renderer, TableChart.margins(this.options.title));

package/src/charting/diagrams/ArchimateModel.js

@@ -8,6 +8,7 @@ import { ArchimateModelChecker } from './ArchimateModelChecker.js';
 import { ArchimateModelReport } from './ArchimateModelReport.js';
 import { ArchimateModelSearch } from './ArchimateModelSearch.js';
 import { MergeElementsCommand } from './MergeElementsCommand.js';
+import { DeleteFromModelCommand } from './DeleteFromModelCommand.js';
 import { ElementsCompared, RelationshipsCompared } from './ConceptsCompared.js';
 import { ArchimateViewsCompared } from './ArchimateViewsCompared.js';
 import { roadmapPlan, parseDate } from './roadmap.js';
@@ -244,6 +245,38 @@ export class ArchimateModel extends ViewSetModel {
         return new MergeElementsCommand(this, keepId, otherIds, choices);
     }
 
+    /**
+     * Where elements are used, so deleting them from the model can say what goes
+     * with them: the views drawing them (with how many boxes on each), and the
+     * relationships that go too — each one ending on one of them, and each one
+     * ending on such a relationship, and so on.
+     * @param {Array<string>} elementIds
+     * @returns {{views: Array<{view: ArchimateView, boxes: number}>, relationships: Array<Object>}}
+     */
+    usage(elementIds) {
+        const gone = new Set(elementIds);
+        const relationships = [];
+        for (let grew = true; grew;) {
+            grew = false;
+            for (const rel of this.relationships()) {
+                if (!gone.has(rel.id) && (gone.has(rel.source) || gone.has(rel.target))) {
+                    gone.add(rel.id);
+                    relationships.push(rel);
+                    grew = true;
+                }
+            }
+        }
+        const views = this.views()
+            .map(view => ({ view, boxes: [...(view.elementInstances?.values() ?? [])].filter(i => elementIds.includes(i.elementId)).length }))
+            .filter(v => v.boxes > 0);
+        return { views, relationships };
+    }
+
+    /** Take elements out of the model, with their relationships and everything drawing them (not yet executed). */
+    deleteFromModelCommand(elementIds) {
+        return new DeleteFromModelCommand(this, elementIds);
+    }
+
     /** Two models are compared on, and merged by, their elements, relationships and views (in the order brought). */
     comparedKinds() {
         return [new ElementsCompared(), new RelationshipsCompared(), new ArchimateViewsCompared()];

package/src/charting/diagrams/DeleteFromModelCommand.js

@@ -0,0 +1,81 @@
+import { Command } from '../CommandHistory.js';
+
+/**
+ * DeleteFromModelCommand — elements taken out of the model (Archi's "Delete
+ * from Model"), not just off one view: their relationships go too (and any
+ * relationship ending on one of those), and with them every box and line
+ * drawing them on every view, and every view's own line (a connection) to
+ * one of those boxes. Undo puts everything back as it was, ids and all.
+ *
+ * What goes is ArchimateModel#usage's: say it before asking.
+ */
+export class DeleteFromModelCommand extends Command {
+    /**
+     * @param {ArchimateModel} model
+     * @param {Array<string>} elementIds
+     */
+    constructor(model, elementIds) {
+        const ids = elementIds.filter(id => model.getElement(id));
+        const first = model.getElement(ids[0]);
+        super(ids.length === 1 ? `Delete "${first?.name || ids[0]}" from model` : `Delete ${ids.length} elements from model`);
+        this.model = model;
+        this.elementIds = ids;
+        this._before = null;
+    }
+
+    execute() {
+        const { model } = this;
+        if (!this.elementIds.length) return;
+        this._before = this._snapshot();
+        const { relationships } = model.usage(this.elementIds);
+        const goneElements = new Set(this.elementIds);
+        const goneRelationships = new Set(relationships.map(r => r.id));
+        for (const view of model.views()) {
+            if (Array.isArray(view.elementIds)) view.elementIds = view.elementIds.filter(id => !goneElements.has(id));
+            const goneBoxes = new Set();
+            for (const inst of [...(view.elementInstances?.values() ?? [])]) {
+                if (goneElements.has(inst.elementId)) { goneBoxes.add(inst.id); view.elementInstances.delete(inst.id); }
+            }
+            for (const inst of [...(view.relationshipInstances?.values() ?? [])]) {
+                if (goneRelationships.has(inst.relationshipId)) view.relationshipInstances.delete(inst.id);
+            }
+            for (const line of [...(view.viewConnections?.values() ?? [])]) {
+                if (goneBoxes.has(line.sourceInstanceId) || goneBoxes.has(line.targetInstanceId)) view.viewConnections.delete(line.id);
+            }
+        }
+        for (const id of goneRelationships) model.removeRelationship(id);
+        for (const id of goneElements) model.removeElement(id);
+    }
+
+    undo() {
+        if (!this._before) return;
+        const { model } = this;
+        const b = this._before;
+        model._elements = new Map(b.elements);
+        model._elementFolder = new Map(b.folders);
+        model._relationships = new Map(b.relationships);
+        for (const v of b.views) {
+            v.view.elementIds = v.elementIds;
+            if (v.instances) v.view.elementInstances = new Map(v.instances);
+            if (v.lines) v.view.relationshipInstances = new Map(v.lines);
+            if (v.connections) v.view.viewConnections = new Map(v.connections);
+        }
+    }
+
+    /** Everything the delete changes, to put back (the objects themselves, so ids and state are kept). @private */
+    _snapshot() {
+        const { model } = this;
+        return {
+            elements: [...model._elements],
+            folders: [...model._elementFolder],
+            relationships: [...model._relationships],
+            views: model.views().map(view => ({
+                view,
+                elementIds: Array.isArray(view.elementIds) ? [...view.elementIds] : view.elementIds,
+                instances: view.elementInstances ? [...view.elementInstances] : null,
+                lines: view.relationshipInstances ? [...view.relationshipInstances] : null,
+                connections: view.viewConnections ? [...view.viewConnections] : null,
+            })),
+        };
+    }
+}

package/src/charting/diagrams/EdgeGeometry.js

@@ -91,6 +91,22 @@ export class EdgeGeometry {
         return denom > 0 ? 1 / denom : Math.max(hw, hh);
     }
 
+    /** Pure. Where two boxes ({left, top, right, bottom}) face each other
+     *  across a gap with their x ranges (or y ranges) overlapping, the
+     *  shortest line between them runs straight across, at the middle of the
+     *  overlap: `{axis: 'v', at: x, forward}` (a vertical line, `forward` when
+     *  `a` is above `b`) or `{axis: 'h', at: y, forward}` (`a` left of `b`).
+     *  Null when they overlap neither way, or each other. */
+    static acrossOverlap(a, b) {
+        const left = Math.max(a.left, b.left), right = Math.min(a.right, b.right);
+        const top = Math.max(a.top, b.top), bottom = Math.min(a.bottom, b.bottom);
+        const apartV = a.bottom <= b.top || b.bottom <= a.top;
+        const apartH = a.right <= b.left || b.right <= a.left;
+        if (left < right && apartV) return { axis: 'v', at: (left + right) / 2, forward: a.bottom <= b.top };
+        if (top < bottom && apartH) return { axis: 'h', at: (top + bottom) / 2, forward: a.right <= b.left };
+        return null;
+    }
+
     /** Pure. Anchor for one end of an edge. A node that knows its own outline
      *  supplies `info.boundaryPoint(dx, dy) → {x, y}` (DiagramEditor templates
      *  do, rotation included), and the anchor is where the ray toward the other

package/src/charting/edgeStyle/EdgeStyleSchema.js

@@ -20,8 +20,12 @@ export const EDGE_STYLE_PROPERTIES = Object.freeze([
         choices: [['straight', 'Straight'], ['orthogonal', 'Orthogonal'], ['curved', 'Curved'], ['polyline', 'Around shapes']],
     },
     {
-        key: 'attach', label: 'Attach to', type: 'select', default: 'floating',
-        choices: [['floating', 'Outline, aimed at the other end'], ['sides', 'Middle of the facing side']],
+        key: 'attach', label: 'Attach to', type: 'select', default: 'shortest',
+        choices: [
+            ['shortest', 'Shortest: straight across where the shapes overlap, else aimed at the other end'],
+            ['floating', 'Outline, aimed at the other end'],
+            ['sides', 'Middle of the facing side'],
+        ],
     },
     {
         key: 'lineStyle', label: 'Line', type: 'select', default: 'solid',

package/src/charting/pivot/PivotGridChart.js

@@ -110,7 +110,7 @@ export class PivotGridChart extends TableViewChart {
                 const lit = view.cellFill(node, c, cuts);
                 if (lit) this.renderer.rect(x0 + i * colW + 1, top + 1, colW - 2, ROW_H - 2, lit, null);
                 const row = view.cell(node, c.node);
-                const text = row === null ? '' : TableChart.cellText(row[c.measure], nullText);
+                const text = row === null ? '' : view.valueText(c.measure, row[c.measure], nullText);
                 const shown = this._cell(text, end, x0 + i * colW, top, colW, { fill: row?.[c.measure] == null ? '#999' : '#222', ...weight });
                 // A cell with a value opens its menu (drill-through) where the host gives one.
                 if (row !== null && view.cellHasMenu()) {

package/src/charting/pivot/PivotView.js

@@ -53,6 +53,8 @@ export class PivotView {
      * @param {Array<{measure?, below?, atLeast?, fill, label?}>} [options.trafficLights] the host's rules:
      *   the first whose measure (any, when absent) and range match colours a detail cell
      * @param {function} [options.copy] writes text to the clipboard (navigator.clipboard by default)
+     * @param {function|Intl.NumberFormat|object} [options.format] how numbers show, for every measure or per
+     *   measure (`TableChart.formatFor`): cells, totals and the traffic lights' cut-offs. A copy keeps the raw numbers.
      */
     constructor(rows, options = {}) {
         this.onChange = options.onChange ?? null;
@@ -63,6 +65,7 @@ export class PivotView {
         this.members = options.members ?? null;
         this.menus = options.menus ?? {};
         this.copy = options.copy ?? PivotView.clipboard;
+        this.format = options.format ?? null;
         this._listeners = new Set();
         this.lightRules = options.trafficLights ?? null;
         /** Traffic lights showing: null (off), 'rules' (the host's), 'thirds-high' or 'thirds-low' (by thirds, higher or lower is better). */
@@ -608,18 +611,24 @@ export class PivotView {
         return PivotView.LIGHTS[good];
     }
 
+    /** A measure's value as the grid shows it, in the measure's `format` when there is one. */
+    valueText(measure, value, nullText = '—') {
+        return TableChart.cellText(value, nullText, TableChart.formatFor(this.format, measure));
+    }
+
     /** The traffic lights in words, for a line under the grid; null when off. */
     lightsLegend() {
         if (!this.lights) return null;
         const tail = ' (detail cells; totals not coloured)';
         if (this.lights === 'rules') {
             const said = this.lightRules.map(r => r.label ?? [
-                r.measure, r.atLeast !== undefined ? '≥ ' + r.atLeast : null, r.below !== undefined ? '< ' + r.below : null,
+                r.measure, r.atLeast !== undefined ? '≥ ' + this.valueText(r.measure, r.atLeast) : null,
+                r.below !== undefined ? '< ' + this.valueText(r.measure, r.below) : null,
             ].filter(Boolean).join(' '));
             return 'Traffic lights: ' + said.join('; ') + tail;
         }
         const better = this.lights === 'thirds-high' ? 'higher' : 'lower';
-        const cuts = [...this.thirds()].map(([m, [a, b]]) => m + ' ' + TableChart.cellText(a) + ' / ' + TableChart.cellText(b)).join('; ');
+        const cuts = [...this.thirds()].map(([m, [a, b]]) => m + ' ' + this.valueText(m, a) + ' / ' + this.valueText(m, b)).join('; ');
         return 'Traffic lights by thirds, ' + better + ' is better — cut at ' + (cuts || 'no values') + tail;
     }
 

package/src/charting/table/TableView.js

@@ -1,4 +1,5 @@
 import { ChartChooser } from '../ChartChooser.js';
+import { TableChart } from '../charts/TableChart.js';
 
 /**
  * TableView — the state of an interactive table over result rows, kept apart from drawing so all of
@@ -52,8 +53,10 @@ export class TableView {
      * @param {function} [options.copy] writes text to the clipboard (navigator.clipboard by default)
      * @param {ChartChooser} [options.chooser]
      * @param {function} [options.highlight] row → true for a row drawn highlighted (a host's selection)
+     * @param {function|Intl.NumberFormat|object} [options.format] how numbers show, for every column or per
+     *   column (`TableChart.formatFor`). A copy keeps the raw numbers.
      */
-    constructor(rows, { columns = null, complete = true, pageSize = 50, onChange = null, menus = {}, copy = null, chooser = null, highlight = null } = {}) {
+    constructor(rows, { columns = null, complete = true, pageSize = 50, onChange = null, menus = {}, copy = null, chooser = null, highlight = null, format = null } = {}) {
         this.rows = rows;
         this.columns = ChartChooser.describe(rows, columns);
         this.complete = complete;
@@ -63,6 +66,7 @@ export class TableView {
         this.copy = copy ?? TableView.clipboard;
         this.chooser = chooser ?? new ChartChooser();
         this.highlight = highlight;
+        this.format = format;
         /** The sort keys, most significant first: `{ column, direction: 'asc' | 'desc' }`. */
         this.sorts = [];
         this.filters = [];           // { column, op, value }
@@ -70,6 +74,11 @@ export class TableView {
         this.page = 0;
     }
 
+    /** A column's value as the table shows it, in the column's `format` when there is one. */
+    valueText(column, value, nullText = '—') {
+        return TableChart.cellText(value, nullText, TableChart.formatFor(this.format, column));
+    }
+
     static clipboard(text) {
         return globalThis.navigator?.clipboard?.writeText(text);
     }