@peter.prib/renderengine 0.12.0 → 0.14.0

package/src/charting/archimate/ArchimateCanvasEditor.js

@@ -1,1012 +1,1108 @@
-import { ViewLineEdge } from './ViewLineEdge.js';
-import { typeTitle, ARCHIMATE_TYPE_MIME } from './archimateNames.js';
-import { RemoveLineCommand } from '../diagrams/RemoveLineCommand.js';
-import { canvasBoxMenuItems } from '../canvas/canvasBoxMenuItems.js';
-import { hintMenuItems } from '../canvas/hintMenuItems.js';
-import { CANVAS_BOX_MIME } from '../canvas/CanvasPalette.js';
-import { MODEL_ELEMENT_MIME } from '../modelTree/ModelTreePanel.js';
-import { showGlobalSettingsDialog } from '../SettingsDialog.js';
-import { specializationCatalogDialog } from './specializationCatalogDialog.js';
-import { CustomViewpoints } from './CustomViewpoints.js';
-import { ShowElementCommand } from '../diagrams/ShowElementCommand.js';
-import { DiagramEditor } from '../DiagramEditor.js';
-import { CompositeCommand } from '../CommandHistory.js';
-import { ElementInstance } from '../diagrams/ElementInstance.js';
-import { RelationshipInstance } from '../diagrams/RelationshipInstance.js';
-import { ViewObjectInstance } from '../diagrams/ViewObjectInstance.js';
-import { PlaceItemsCommand } from '../diagrams/PlaceItemsCommand.js';
-import { AddRelationshipToViewCommand, AddRelationshipCommand, RemoveRelationshipFromViewCommand, DeleteElementCommand, AddToViewCommand } from '../diagrams/ArchimateCommands.js';
-import { NestInstanceCommand } from '../diagrams/NestInstanceCommand.js';
-import { NESTING_KINDS, nestingRelationships, hiddenByNesting } from '../diagrams/nesting.js';
-import { treeLayerOf } from '../modelTree/treeLayers.js';
-import { parseDate } from '../diagrams/roadmap.js';
-import { ArchimateValidator } from '../diagrams/ArchimateValidator.js';
-import { GraphDiagram } from '../diagrams/GraphDiagram.js';
-import { ArchimateElementTemplate } from './ArchimateElementTemplate.js';
-import { ArchimateEdge } from './ArchimateEdge.js';
-import { ViewpointRule } from './ViewpointRule.js';
-import { DerivedEdge } from './DerivedEdge.js';
-import { ViewGroupTemplate } from './ViewGroupTemplate.js';
-import { RemoveGroupFromViewCommand } from '../diagrams/RemoveGroupFromViewCommand.js';
-import { DerivedRelationships } from '../diagrams/DerivedRelationships.js';
-import { ElementFilterRule } from './ElementFilterRule.js';
-import { ArchimateViewpoints, ArchimateNotation } from '../../archimate.js';
-import { PropertyListEditor } from '../PropertyListEditor.js';
-import { FormDialog } from '../FormDialog.js';
-import { duplicateSearchFields, duplicateSearchOptions, validateDuplicateSearch } from '../duplicateSearchForm.js';
-import { DuplicatesDialog } from '../DuplicatesDialog.js';
-import { MergeCompareDialog } from '../MergeCompareDialog.js';
-import { elementPropertyFields, elementEditCommand, conceptEditCommand, manyElementsFields, manyElementsEditCommands } from './elementProperties.js';
-
-/**
- * Which allowed relationship kind a new connection takes when nobody is asked:
- * the dependency and dynamic kinds people usually mean first, the structural
- * whole/part kinds last.
- */
-export const KIND_PREFERENCE = Object.freeze([
-    'assignment', 'realization', 'serving', 'access', 'influence', 'triggering', 'flow',
-    'specialization', 'aggregation', 'composition', 'association',
-]);
-
-// Kept in a module of their own (archimateNames.js), so the palette needs no import of this editor.
-export { typeTitle, ARCHIMATE_TYPE_MIME };
-
-/**
- * ArchimateCanvasEditor — the diagram editor's canvas over one ArchiMate
- * view: its element instances as ArchimateElementTemplates, its relationship
- * instances as ArchimateEdges, and its own undo history. Everything the base
- * editor does (move, resize, restack, bend points, sides, styles, zoom,
- * snapping) edits the view directly; the editor's maps are rebuilt from the
- * view on every render, so undo of a view edit shows straight away.
- *
- * What stands for something else in ArchiMate is done through the view and
- * model instead of the maps:
- * - dropping a palette type adds a new model element and shows it;
- * - connecting two elements adds a relationship, its kind the first the
- *   ArchiMate rules allow between them (association if none);
- * - deleting removes from the view (with the element's lines); the model
- *   keeps its elements and relationships.
- * Each is one step on the view's history.
- */
-export class ArchimateCanvasEditor extends DiagramEditor {
-    /**
-     * @param {Object} options - DiagramEditor options, plus:
-     * @param {ArchimateView} options.view
-     * @param {ArchimateModel} options.model
-     * @param {Object} [options.nodeOptions] - ArchimateDiagram.buildNode options (archimateVersion, useDistinctShapes, ...),
-     *   and the viewpoint: `viewpoint` (a name; 'All' or none for every type), `viewpointMode` ('fade' or 'hide')
-     * @param {(kinds: string[], from: Object, to: Object) => Promise<string|null>|string|null} [options.chooseKind]
-     *   Asks which relationship kind a new connection is, given the kinds allowed between the two
-     *   elements (null cancels). Without it the first of KIND_PREFERENCE that is allowed is used.
-     * @param {(nodeOptions: Object) => void} [options.onNodeOptionsChange] - The ⚙ Settings menu changed
-     *   the version or distinct shapes (the host may need to redraw more than the canvas, e.g. a palette)
-     * @param {(element: Object) => ({text: string, color?: string}|null)} [options.elementStatus] - A host's
-     *   live status for an element (a component's lifecycle state), drawn on its boxes
-     * @param {(element: Object) => Array<Object>} [options.elementMenuExtras] - A host's menu items for an
-     *   element (its transitions), at the end of a box's right-click menu
-     */
-    constructor({ view, model, nodeOptions = {}, chooseKind = null, onNodeOptionsChange = null, templateMenu = null, customViewpoints = [], settingsManager = null, elementStatus = null, elementMenuExtras = null, ...options }) {
-        super({ ...options, templates: new Map(), edges: new Map(), history: view.history, arrangement: view.arrangement });
-        this.view = view;
-        this.model = model;
-        this.nodeOptions = nodeOptions;
-        this.chooseKind = chooseKind;
-        this.onNodeOptionsChange = onNodeOptionsChange;
-        /** Viewpoints of the user's own, offered with the standard ones. */
-        this.customViewpoints = customViewpoints;
-        /** The settings the ⚙ Settings menu's Model settings… edits (a SettingsManager), if any. */
-        this.settingsManager = settingsManager;
-        /** Canvas templates (a CanvasTemplateMenu): placed on the canvas, saved from its shapes. */
-        this.templateMenu = templateMenu;
-        /** A host's live status per element, drawn on its boxes, and its menu items per element. */
-        this.elementStatus = elementStatus;
-        this.elementMenuExtras = elementMenuExtras;
-        this.addDropHandler({
-            accepts: (dt) => Array.from(dt.types).includes(ARCHIMATE_TYPE_MIME),
-            drop: (dt, point) => this.addElement(dt.getData(ARCHIMATE_TYPE_MIME), point),
-        });
-        // An element from the model tree: shown here, with its relationships to what is already shown.
-        this.addDropHandler({
-            accepts: (dt) => Array.from(dt.types).includes(MODEL_ELEMENT_MIME),
-            drop: (dt, point) => this.showElement(dt.getData(MODEL_ELEMENT_MIME), point),
-        });
-        // A picture file dropped (or pasted): an image box where it fell (pasted: in the middle).
-        if (typeof document !== 'undefined') this.enableImageDrop((dataURL, point) => this.addImage(dataURL, point));
-        // A canvas palette tile: the box, where it was dropped (an image asks for its picture).
-        this.addDropHandler({
-            accepts: (dt) => Array.from(dt.types).includes(CANVAS_BOX_MIME),
-            drop: (dt, point) => this.addCanvasBox(dt.getData(CANVAS_BOX_MIME), point),
-        });
-    }
-
-    get version() {
-        return this.nodeOptions.archimateVersion ?? '4';
-    }
-
-    /**
-     * An element's own items (a view of it and what it relates to; its
-     * relationships to what is shown, when some are not), a canvas box's hint,
-     * and the shape's selection (or the shape and its group) as a template.
-     */
-    shapeMenuExtras(elementId) {
-        const ids = this.selectedIds.has(elementId) ? this.getSelectedIds() : [elementId];
-        const items = this.templateMenu?.saveAsTemplateItems(this.view.id, { itemIds: [...this.arrangement.movers(ids)] }) ?? [];
-        const element = this._elementOf(elementId);
-        const missing = element ? this.missingRelationshipsOf(elementId) : [];
-        // Two or more elements chosen: merge them into one (choose the one kept).
-        const merging = this.elementIdsOf(ids);
-        return [
-            ...(merging.length > 1 ? [{ label: `Merge ${merging.length} elements…`, action: () => this.askMerge(merging) }] : []),
-            ...(element ? [{ label: 'Generate View For This', action: () => this.model.generateView([element.id]) }] : []),
-            ...(missing.length ? [{ label: `Add Missing Relationships (${missing.length})`, action: () => this.addMissingRelationships(elementId) }] : []),
-            ...hintMenuItems(this.view, elementId, { onChange: () => this.render() }),
-            ...(items.length ? [{ label: 'Save as template', items }] : []),
-            ...(element && this.elementMenuExtras ? this.elementMenuExtras(element) ?? [] : []),
-        ];
-    }
-
-    /** The model's relationships between this box's element and what is shown that the view does not draw from this box. */
-    missingRelationshipsOf(instanceId) {
-        const instance = this.view.getElementInstance(instanceId);
-        if (!instance) return [];
-        return this.view.missingRelationshipInstances(instance.elementId)
-            .filter(line => line.sourceInstanceId === instanceId || line.targetInstanceId === instanceId);
-    }
-
-    /** Draw them all, as one undo step. */
-    addMissingRelationships(instanceId) {
-        const missing = this.missingRelationshipsOf(instanceId);
-        if (!missing.length) return null;
-        const cmd = new CompositeCommand(`Add ${missing.length} relationship${missing.length === 1 ? '' : 's'}`,
-            missing.map(line => new AddRelationshipToViewCommand(this.view, line)));
-        this._executeCommand(cmd);
-        return cmd;
-    }
-
-    /** The view's boxes (a canvas's palette; a note or picture elsewhere) at the point clicked, and on a canvas a template placed there. */
-    canvasMenuItems(at) {
-        const boxes = canvasBoxMenuItems(this.view, at, { onAdded: (box) => { this.render(); this.selectTemplate(box.id); } });
-        const items = this.templateMenu?.placeTemplateItems(this.view.id, at) ?? [];
-        // Elements from text: not on a canvas, whose boxes are not elements.
-        const fromText = this.view.constructor.kind === 'canvas' ? [] : super.canvasMenuItems(at);
-        return [...boxes, ...fromText, ...(items.length ? [{ label: 'Place template', items }] : []), ...hintMenuItems(this.view, null, { onChange: () => this.render() })];
-    }
-
-    /** The View menu, and Generate roadmap… (elements with dates on a time line). */
-    viewMenuItems() {
-        const repeated = this.view?.repeatedBoxes?.() ?? [];
-        return [
-            ...super.viewMenuItems(),
-            { label: `Remove repeated boxes${repeated.length ? ` (${repeated.length})` : ''}`, disabled: !repeated.length || undefined, action: () => this.removeRepeatedBoxes() },
-            { label: 'Generate roadmap…', action: () => this.askRoadmap() },
-        ];
-    }
-
-    /** The model's own: Find likely duplicates…. */
-    modelMenuItems() {
-        return [...super.modelMenuItems(), { label: 'Find likely duplicates…', action: () => this.askDuplicates() }];
-    }
-
-    /**
-     * Take off this view the boxes that only repeat another box of their
-     * element (ArchimateView#repeatedBoxes: same label, same lines), with
-     * their lines, as one undo step. Returns the command, or null with none.
-     */
-    removeRepeatedBoxes() {
-        const ids = this.view.repeatedBoxes();
-        if (!ids.length) return null;
-        const cmd = this.deleteTemplatesCommand(ids);
-        cmd.label = `Remove ${ids.length} repeated box${ids.length === 1 ? '' : 'es'}`;
-        this._executeCommand(cmd);
-        return cmd;
-    }
-
-    /**
-     * Where Find likely duplicates… can look: the whole model, the elements on
-     * the view in front, the elements selected (two or more). [key, label, element ids or null].
-     */
-    duplicateScopes() {
-        const onView = this.elementIdsOf([...(this.view?.elementInstances?.keys() ?? [])]);
-        const selected = this.elementIdsOf(this.getSelectedIds());
-        return [
-            ['model', 'The whole model', null],
-            ...(onView.length > 1 ? [['view', `This view (${this.view.name || this.view.id})`, onView]] : []),
-            ...(selected.length > 1 ? [['selection', `The ${selected.length} elements selected`, selected]] : []),
-        ];
-    }
-
-    /**
-     * Find likely duplicates…: where to look (duplicateScopes), how to compare
-     * (names, documentation or a property's value; exactly or by their words)
-     * and what noise to leave out (duplicateSearchFields), then the groups
-     * found, each with Merge… (showDuplicates).
-     */
-    askDuplicates() {
-        const names = [...new Set(this.model.elements().flatMap(e => (e.properties ?? []).map(p => p.name ?? p.key)).filter(Boolean))].sort();
-        const specializations = [...new Set(this.model.elements().map(e => e.specialization).filter(Boolean))].sort();
-        const scopes = this.duplicateScopes();
-        return new FormDialog({
-            title: 'Find likely duplicates',
-            description: 'Elements are compared by their words: case, punctuation, word order and the noise words do not count.',
-            fields: duplicateSearchFields({ scope: { label: 'Look in', choices: scopes.map(([key, label]) => [key, label]) }, properties: names, specializations }),
-            submitLabel: 'Find',
-            idPrefix: 'duplicates-',
-            document: this.document ?? globalThis.document,
-            validate: validateDuplicateSearch,
-            onApply: (values) => {
-                const { options, scope } = duplicateSearchOptions(values);
-                this.showDuplicates(options, { within: scopes.find(([key]) => key === scope)?.[2] ?? null });
-            },
-        }).open();
-    }
-
-    /**
-     * The elements that look like one thing twice (the model check's likely
-     * duplicates, compared as `options` say: DUPLICATE_OPTIONS; `within`: only
-     * among these element ids), each group with Merge….
-     */
-    showDuplicates(options = {}, { within = null } = {}) {
-        const find = () => this.model.checker(this.checkerOptions()).possibleDuplicates(options, { within });
-        const groups = find();
-        new DuplicatesDialog({
-            groups,
-            refind: find,
-            merge: async (group) => !!(await this.askMerge(group.ids)),
-            onReveal: (group) => this.revealFinding(group),
-            empty: 'No elements look like the same thing twice.',
-            document: this.document ?? globalThis.document,
-        }).open();
-        return groups;
-    }
-
-    /** The model elements of some boxes, each once (a box that is not an element is left out). */
-    elementIdsOf(instanceIds) {
-        return [...new Set(instanceIds.map(id => this._elementOf(id)?.id).filter(Boolean))];
-    }
-
-    /**
-     * Generate roadmap…: which elements (the selection's, or every element in
-     * the model with both dates), the properties their dates are in, and how
-     * months are named; the roadmap view comes to the front (ArchimateModel#generateRoadmap).
-     */
-    askRoadmap() {
-        const selected = this.getSelectedIds().map(id => this._elementOf(id)?.id).filter(Boolean);
-        const names = [...new Set(this.model.elements().flatMap(e => (e.properties ?? []).map(p => p.name ?? p.key)).filter(Boolean))].sort();
-        return new FormDialog({
-            title: 'Generate roadmap',
-            description: 'A view with each element a bar from its start date to its end date, under the months.',
-            fields: [
-                { key: 'from', label: 'Elements', type: 'select', value: selected.length ? 'selection' : 'model', choices: [...(selected.length ? [['selection', `The ${selected.length} selected`]] : []), ['model', 'Every element with both dates']] },
-                { key: 'start', label: 'Start date property', type: 'text', value: 'Start Date', suggestions: names },
-                { key: 'end', label: 'End date property', type: 'text', value: 'End Date', suggestions: names },
-                { key: 'months', label: 'Month names', type: 'select', value: 'short', choices: [['short', 'Short (Jan)'], ['full', 'Full (January)']] },
-                { key: 'name', label: 'View name', type: 'text', value: 'Roadmap' },
-            ],
-            submitLabel: 'Generate',
-            idPrefix: 'roadmap-',
-            document: this.document ?? globalThis.document,
-            validate: (v) => (this.roadmapFor(v).view === null ? `No element has both "${v.start}" and "${v.end}" as dates` : null),
-            onApply: (v) => this.generateRoadmap(v),
-        }).open();
-    }
-
-    /** What a roadmap of these dialog values would hold: `{view: null}` when nothing would be on it (a dry run). @private */
-    roadmapFor({ from, start, end }) {
-        const ids = from === 'selection' ? this.getSelectedIds().map(id => this._elementOf(id)?.id).filter(Boolean) : this.model.elements().map(e => e.id);
-        const date = (e, key) => parseDate((e.properties ?? []).find(p => (p.name ?? p.key) === key)?.value);
-        const any = ids.map(id => this.model.getElement(id)).some(e => e && date(e, start) && date(e, end) && date(e, end) >= date(e, start));
-        return { ids, view: any ? true : null };
-    }
-
-    /** Generate the roadmap of Generate roadmap…'s values. @returns {{view, skipped}} */
-    generateRoadmap({ from = 'model', start = 'Start Date', end = 'End Date', months = 'short', name = 'Roadmap' } = {}) {
-        const { ids } = this.roadmapFor({ from, start, end });
-        return this.model.generateRoadmap(ids, { startProperty: start, endProperty: end, monthNames: months, name });
-    }
-
-    /** An element's box keeps room for its type badge, and Archi's height. */
-    textFit(template) {
-        return this._elementOf(template.id) ? { padding: 44, min: { width: 80, height: 55 } } : super.textFit(template);
-    }
-
-    /** Text becomes elements of any type of this version (the viewpoint's, when it limits them). */
-    shapeTypes() {
-        const viewpoint = this.nodeOptions.viewpoint;
-        const allowed = viewpoint && viewpoint !== 'All' ? ArchimateViewpoints.allowedElementTypes(viewpoint, this.version, this.customViewpoints) : null;
-        return ArchimateNotation.elementTypeNames(this.version)
-            .filter(t => !allowed || allowed.includes(t))
-            .map(t => [t, typeTitle(t)]);
-    }
-
-    /**
-     * New model elements from text, each with its box here: one undo step.
-     * A documentation column becomes the element's documentation.
-     */
-    createShapesCommand(items) {
-        const ids = this.model.elements().map(e => e.id);
-        const steps = [], createdIds = [];
-        for (const item of items) {
-            const id = GraphDiagram.generateNodeId(`${item.type}-${item.name}`, ids);
-            ids.push(id);
-            const instance = new ElementInstance(id, item.x, item.y);
-            createdIds.push(instance.id);
-            steps.push(new AddToViewCommand(this.view, instance, { element: { id, name: item.name, type: item.type, ...(item.documentation && { documentation: item.documentation }) } }));
-        }
-        const cmd = new CompositeCommand(`Add ${steps.length} element${steps.length === 1 ? '' : 's'} from text`, steps);
-        cmd.createdIds = createdIds;
-        return cmd;
-    }
-
-    /** What elements can be coloured by: their layer, type, specialization, and each property any of them has. */
-    colourKeys(templates = [...this.templates.values()]) {
-        const properties = new Set();
-        for (const t of templates) for (const p of this._elementOf(t.id)?.properties ?? []) if (p.name ?? p.key) properties.add(p.name ?? p.key);
-        return [
-            ['layer', 'Layer'], ['type', 'Type'], ['specialization', 'Specialization'],
-            ...[...properties].sort().map(name => [`property:${name}`, `Property "${name}"`]),
-        ];
-    }
-
-    /** An element's value for a colourKeys key (notes and pictures have none). */
-    colourValue(template, key) {
-        const element = this._elementOf(template.id);
-        if (!element) return undefined;
-        if (key === 'layer') return typeTitle(treeLayerOf(element));
-        if (key === 'type') return typeTitle(element.type ?? '');
-        if (key === 'specialization') return element.specialization;
-        if (key.startsWith('property:')) {
-            const p = (element.properties ?? []).find(q => (q.name ?? q.key) === key.slice(9));
-            return p?.value === undefined || p?.value === null ? undefined : String(p.value);
-        }
-        return super.colourValue(template, key);
-    }
-
-    /** The kind legend: each element type on the view, in the colour of its first box. */
-    kindLegendEntries() {
-        const types = new Map();
-        for (const t of this.templates.values()) {
-            const element = this._elementOf(t.id);
-            if (!element || types.has(element.type)) continue;
-            types.set(element.type, t.fillColor);
-        }
-        return [...types].map(([type, fillColor]) => ({ label: typeTitle(type), fillColor }));
-    }
-
-    /** A legend is notes (stickies on a canvas) on the view: one PlaceItemsCommand. */
-    legendCommand(entries, title) {
-        if (!entries.length) return null;
-        const kind = this.view.constructor.BOX_KINDS.find(k => k.key === 'note') ?? this.view.constructor.BOX_KINDS.find(k => k.key === 'sticky');
-        if (!kind) return null;
-        const { x, y } = this.legendPosition();
-        const stamp = Date.now().toString(36);
-        const box = (i, name, fillColor) => {
-            const inst = new ViewObjectInstance(kind.content(`legend-${stamp}-${i}`, { name }), x + 60 + i * 130, y + 20);
-            inst.size = { width: 120, height: 40 };
-            inst.appearance = { ...kind.appearance, fillColor };
-            return inst;
-        };
-        const boxes = [box(0, title, '#ffffff'), ...entries.map((e, i) => box(i + 1, e.label, e.fillColor))];
-        return new PlaceItemsCommand(this.view, { elementInstances: boxes }, { label: `Add legend: ${title}` });
-    }
-
-    /** Likely duplicates can be merged (Merge…: choose the one to keep). */
-    findingActions(finding) {
-        return finding.code === 'possible-duplicate' ? [{ label: 'Merge…', action: () => this.askMerge(finding.ids) }] : [];
-    }
-
-    /**
-     * What differs among some elements, for the merge to choose: their
-     * documentation (when two or more have some, and it differs), each property
-     * with different values, and the specialization.
-     * @returns {{documentation: Array<[string, string]>, properties: Map<string, Array<[string, string]>>, specializations: string[]}}
-     *   each choice [value, label]
-     */
-    mergeChoices(elements) {
-        const name = (e) => e.name || e.id;
-        const documented = elements.filter(e => (e.documentation ?? '').trim());
-        const texts = [...new Set(documented.map(e => e.documentation.trim()))];
-        const properties = new Map();
-        for (const e of elements) {
-            for (const p of e.properties ?? []) {
-                const key = p.name ?? p.key;
-                if (!properties.has(key)) properties.set(key, new Map());
-                const values = properties.get(key);
-                values.set(String(p.value ?? ''), [...(values.get(String(p.value ?? '')) ?? []), name(e)]);
-            }
-        }
-        const specializations = [...new Set(elements.map(e => e.specialization).filter(Boolean))];
-        return {
-            documentation: texts.length > 1 ? texts.map(t => [t, `${documented.filter(e => e.documentation.trim() === t).map(name).join(', ')}: ${t.length > 50 ? `${t.slice(0, 50)}…` : t}`]) : [],
-            properties: new Map([...properties].filter(([, values]) => values.size > 1)
-                .map(([key, values]) => [key, [...values].map(([value, from]) => [value, `${value || '(empty)'} (${from.join(', ')})`])])),
-            specializations: specializations.length > 1 ? specializations : [],
-        };
-    }
-
-    /**
-     * Some elements side by side, for a merge (MergeCompareDialog's rows): their
-     * names, types, specializations, documentation, each property, their
-     * relationships (kind, direction, the element at the other end) and the
-     * views they are on.
-     */
-    mergeComparison(elements) {
-        const nameOf = (id) => this.model.getElement(id)?.name || id;
-        const valueOf = (e, key) => (e.properties ?? []).filter(p => (p.name ?? p.key) === key).map(p => p.value ?? '').join(', ');
-        const keys = [...new Set(elements.flatMap(e => (e.properties ?? []).map(p => p.name ?? p.key)).filter(Boolean))];
-        const lines = (e) => {
-            const { incoming, outgoing } = this.model.relationshipsFor(e.id);
-            return [
-                ...outgoing.map(r => `${r.kind} → ${nameOf(r.target)}`),
-                ...incoming.map(r => `${r.kind} ← ${nameOf(r.source)}`),
-            ].sort().join('\n');
-        };
-        const views = (e) => this.model.views().filter(v => v.elementInstancesFor?.(e.id).length).map(v => v.name || v.id).join('\n');
-        return [
-            { label: 'Name', values: elements.map(e => e.name ?? '') },
-            { label: 'Type', values: elements.map(e => e.type ?? '') },
-            ...(elements.some(e => e.specialization) ? [{ label: 'Specialization', values: elements.map(e => e.specialization ?? '') }] : []),
-            { label: 'Documentation', values: elements.map(e => (e.documentation ?? '').trim()) },
-            ...keys.map(key => ({ label: `${key} (property)`, values: elements.map(e => valueOf(e, key)) })),
-            { label: 'Relationships', values: elements.map(lines) },
-            { label: 'Views', values: elements.map(views) },
-        ];
-    }
-
-    /**
-     * Merge some elements into one, one undo step (ArchimateModel#mergeCommand).
-     * Their relationships always come together. When they differ in anything
-     * but the views they are on, they are shown side by side
-     * (MergeCompareDialog) to choose which is kept and, where they differ, the
-     * documentation (one, or all joined), each property's value, the
-     * specialization; OK merges, Cancel leaves them. Alike, the first is kept
-     * without asking. Resolves to the merge's command, or null.
-     */
-    async askMerge(elementIds) {
-        const elements = elementIds.map(id => this.model.getElement(id)).filter(Boolean);
-        if (elements.length < 2) return null;
-        const used = (e) => {
-            const views = this.model.views().filter(v => v.elementInstancesFor?.(e.id).length).length;
-            const { incoming, outgoing } = this.model.relationshipsFor(e.id);
-            return `${views} view${views === 1 ? '' : 's'}, ${incoming.length + outgoing.length} relationship${incoming.length + outgoing.length === 1 ? '' : 's'}`;
-        };
-        const ids = elements.map(e => e.id);
-        const rows = this.mergeComparison(elements);
-        const compare = new MergeCompareDialog({
-            title: `Merge ${elements.length} elements`,
-            description: 'The one kept takes the others\' relationships, their boxes on every view, and the properties it lacks; the others go. Where they differ (marked ≠), choose.',
-            columns: elements.map(e => `${e.name || e.id} (${used(e)})`),
-            rows,
-            document: this.document ?? globalThis.document,
-        });
-        // Views apart (their boxes all come to the kept one), nothing to choose: the first is kept.
-        if (!rows.some(row => row.label !== 'Views' && MergeCompareDialog.differs(row))) return this.mergeElements(ids[0], ids.slice(1));
-        const { documentation, properties, specializations } = this.mergeChoices(elements);
-        const JOINED = '\u0000joined';
-        const propertyKeys = [...properties.keys()];
-        compare.fields = [
-            { key: 'keep', label: 'Keep', type: 'select', value: ids[0], choices: elements.map(e => [e.id, `${e.name || e.id} (${used(e)})`]) },
-            ...(documentation.length ? [{ key: 'documentation', label: 'Documentation', type: 'select', value: JOINED, choices: [[JOINED, 'All of them, joined'], ...documentation] }] : []),
-            ...(specializations.length ? [{ key: 'specialization', label: 'Specialization', type: 'select', value: specializations[0], choices: specializations.map(s => [s, s]) }] : []),
-            ...propertyKeys.map((key, i) => ({ key: `property-${i}`, label: key, type: 'select', value: properties.get(key)[0][0], choices: properties.get(key) })),
-        ];
-        const values = await compare.ask();
-        if (!values) return null;
-        const { keep } = values;
-        const joined = () => [...new Set(elements.map(e => (e.documentation ?? '').trim()).filter(Boolean))].join('\n\n');
-        return this.mergeElements(keep, ids.filter(id => id !== keep), {
-            ...(documentation.length && { documentation: values.documentation === JOINED ? joined() : values.documentation }),
-            ...(specializations.length && { specialization: values.specialization }),
-            properties: Object.fromEntries(propertyKeys.map((key, i) => [key, values[`property-${i}`]])),
-        });
-    }
-
-    /** Merge elements into one (`keepId`), one undo step; the canvas and tree redraw. `choices`: MergeElementsCommand's. */
-    mergeElements(keepId, otherIds, choices = {}) {
-        const cmd = this.model.mergeCommand(keepId, otherIds, choices);
-        this._executeCommand(cmd);
-        return cmd;
-    }
-
-    /** The checks use this editor's ArchiMate version. */
-    checkerOptions() {
-        return { version: this.version };
-    }
-
-    /** An element is shown by selecting its first occurrence on this view. */
-    revealFinding(finding) {
-        if (finding.kind !== 'element') return super.revealFinding(finding);
-        const instance = this.view.elementInstancesFor(finding.ids[0])[0];
-        if (instance && this.templates.has(instance.id)) {
-            this.selectTemplate(instance.id);
-            this.render();
-        }
-    }
-
-    /**
-     * Bring the editor's templates and lines in line with the view, reusing
-     * the template or line of each instance still there.
-     */
-    syncFromView() {
-        const { view, model } = this;
-        const templates = new Map();
-        for (const inst of view.elementInstances.values()) {
-            if (!inst.shownIn(view) || !inst.resolve(model)) continue;
-            const existing = this.templates.get(inst.id);
-            templates.set(inst.id, existing?.instance === inst ? existing
-                : new ArchimateElementTemplate(inst, model, { nodeOptions: this.nodeOptions }));
-        }
-        for (const t of templates.values()) {
-            t.nodeOptions = this.nodeOptions;
-            // Asked afresh at every sync: a host's status is live, not part of the model.
-            t.status = this.elementStatus ? this.elementStatus(t.instance.resolve(model)) ?? null : null;
-        }
-        // The view's groups (Archi groups: model folders with bounds on this view).
-        for (const folder of view.placedFolders) {
-            const existing = this.templates.get(folder.id);
-            templates.set(folder.id, existing instanceof ViewGroupTemplate && existing.view === view ? existing : new ViewGroupTemplate(folder.id, view));
-        }
-        const edges = new Map();
-        // A line a nesting stands for, to a box nested in its source (at any depth), is not drawn unless asked (Archi's way).
-        const nestedOut = (edge) => !this.nodeOptions.showNestedLines
-            && hiddenByNesting(view, edge.relationship, templates.get(edge.sourceId).instance, templates.get(edge.targetId).instance);
-        for (const inst of view.relationshipInstances.values()) {
-            const existing = this.edges.get(inst.id);
-            const edge = existing?.instance === inst ? existing : new ArchimateEdge(inst, view);
-            if (edge.relationship && templates.has(edge.sourceId) && templates.has(edge.targetId) && !nestedOut(edge)) edges.set(inst.id, edge);
-        }
-        // Plain lines (a canvas's connections, a line from a note).
-        for (const line of view.viewConnections.values()) {
-            const existing = this.edges.get(line.id);
-            const edge = existing?.line === line ? existing : new ViewLineEdge(line);
-            if (line.visible !== false && templates.has(edge.sourceId) && templates.has(edge.targetId)) edges.set(line.id, edge);
-        }
-        // Derived relationships (⚙ Settings → Show derived): drawn between elements both on the view.
-        if (this.nodeOptions.showDerived) {
-            const shown = (elementId) => view.elementInstancesFor(elementId).find(inst => templates.has(inst.id))?.id;
-            for (const derived of DerivedRelationships.compute(model, { maxHops: 2 }).derived) {
-                const from = shown(derived.source), to = shown(derived.target);
-                if (from && to) edges.set(derived.id, new DerivedEdge(derived, from, to));
-            }
-        }
-        this.templates.clear();
-        for (const [id, t] of templates) this.templates.set(id, t);
-        this.edges.clear();
-        for (const [id, e] of edges) this.edges.set(id, e);
-    }
-
-    render() {
-        if (this.disposed) return;
-        this.syncFromView();
-        super.render();
-    }
-
-    /** ⚙ Settings: the notation (version, distinct shapes), then the base editor's grid and line styles. */
-    settingsMenuItems() {
-        const set = (patch) => {
-            this.nodeOptions = { ...this.nodeOptions, ...patch };
-            if (this.onNodeOptionsChange) this.onNodeOptionsChange(this.nodeOptions);
-            else this.render();
-        };
-        const distinct = !!this.nodeOptions.useDistinctShapes;
-        const viewpoint = this.nodeOptions.viewpoint ?? 'All';
-        const mode = this.nodeOptions.viewpointMode ?? 'fade';
-        return [
-            {
-                label: `Version: ArchiMate ${this.version}`,
-                items: ['4', '3.2'].map(v => ({ label: `ArchiMate ${v}`, checked: v === this.version, action: () => set({ archimateVersion: v }) })),
-            },
-            { label: `Distinct shapes: ${distinct ? 'on' : 'off'}`, action: () => set({ useDistinctShapes: !distinct }) },
-            { label: `Show derived: ${this.nodeOptions.showDerived ? 'on' : 'off'}`, action: () => set({ showDerived: !this.nodeOptions.showDerived }) },
-            { label: `Lines to nested boxes: ${this.nodeOptions.showNestedLines ? 'shown' : 'hidden'}`, action: () => set({ showNestedLines: !this.nodeOptions.showNestedLines }) },
-            {
-                label: `Viewpoint: ${viewpoint}`,
-                items: ArchimateViewpoints.all(this.customViewpoints).map(vp => ({ label: vp.name, checked: vp.name === viewpoint, action: () => set({ viewpoint: vp.name }) })),
-            },
-            {
-                label: `Outside the viewpoint: ${mode === 'hide' ? 'hidden' : 'faded'}`,
-                items: [['fade', 'Faded'], ['hide', 'Hidden']].map(([m, text]) => ({ label: text, checked: m === mode, action: () => set({ viewpointMode: m }) })),
-            },
-            { separator: true },
-            { separator: true },
-            { label: 'Specializations…', action: () => this.editSpecializations() },
-            { label: 'Viewpoints…', action: () => this.editViewpoints() },
-            ...super.settingsMenuItems(),
-            ...(this.settingsManager ? [{ separator: true }, { label: 'Model settings…', action: () => showGlobalSettingsDialog(this.document ?? globalThis.document, this.settingsManager, 'default') }] : []),
-        ];
-    }
-
-    /**
-     * What the ArchiMate rules say against a relationship's line, or null
-     * (ArchimateValidator, for this ArchiMate version). Off when the view's
-     * `invalidRelationships` setting is 'off'; with 'tooltip' it is the tooltip, not drawn red.
-     */
-    edgeWarning(edge) {
-        const relationship = edge.relationship;
-        const mode = this.viewSettings().invalidRelationships ?? 'highlight';
-        if (!relationship || mode === 'off') return null;
-        const from = this.model.getElement(relationship.source), to = this.model.getElement(relationship.target);
-        if (!from || !to) return null;
-        const result = ArchimateValidator.validateRelationship(from, to, relationship.kind, this.version);
-        return result.valid ? null : { message: result.message, highlight: mode === 'highlight' };
-    }
-
-    /** Edit the specialization catalog; elements given one redraw with it. */
-    editSpecializations() {
-        return specializationCatalogDialog({ version: this.version, document: this.document ?? globalThis.document, onChange: () => this._notationChanged() }).open();
-    }
-
-    /** Edit the user's own viewpoints; they are offered (and applied) from then on. */
-    editViewpoints() {
-        return CustomViewpoints.dialog({
-            version: this.version, document: this.document ?? globalThis.document,
-            onChange: (viewpoints) => { this.customViewpoints = viewpoints; this._viewpointRule = null; this._notationChanged(); },
-        }).open();
-    }
-
-    /** The notation's catalogs changed: the host redraws (its palette too), or this editor does. @private */
-    _notationChanged() {
-        if (this.onNodeOptionsChange) this.onNodeOptionsChange(this.nodeOptions);
-        else this.render();
-    }
-
-    /**
-     * The base editor's rules (a highlight), then the active filter's result
-     * (ElementFilterRule) and the viewpoint (ViewpointRule, from the notation options).
-     */
-    emphasisRules() {
-        const { viewpoint, viewpointMode } = this.nodeOptions;
-        const key = `${viewpoint}|${viewpointMode}|${this.version}`;
-        if (this._viewpointRule?.key !== key) {
-            this._viewpointRule = { key, rule: new ViewpointRule({ viewpoint, mode: viewpointMode, version: this.version, customViewpoints: this.customViewpoints }) };
-        }
-        return [...super.emphasisRules(), ...(this.elementFilter ? [this.elementFilter] : []), ...(this._viewpointRule.rule.viewpoint ? [this._viewpointRule.rule] : [])];
-    }
-
-    /** Dim every model element but these (a filter's result); null clears it. Redraws. */
-    setElementFilter(elementIds) {
-        this.elementFilter = elementIds ? new ElementFilterRule(elementIds) : null;
-        this.render();
-    }
-
-    /**
-     * The Element section of a shape's properties: the model element's own
-     * name, type, specialization, icon, documentation and typed properties (the same on every view;
-     * the dialog's Name above labels this occurrence only). None for a note,
-     * image or canvas box.
-     */
-    conceptFields(template) {
-        const element = this._elementOf(template.id);
-        if (!element) return [];
-        return [
-            { type: 'heading', label: 'Element (on every view)' },
-            ...elementPropertyFields(element, { version: this.version, document: this.document ?? globalThis.document }),
-        ];
-    }
-
-    /** The element's changes as one EditViewItemCommand (null when nothing changed). */
-    conceptCommand(template, values) {
-        const element = this._elementOf(template.id);
-        return element ? elementEditCommand(element, values, { instance: template.instance }) : null;
-    }
-
-    /**
-     * With several shapes selected, the Elements section: their type, their
-     * specialization when they share a type, and one property to set on all.
-     * Only when every selected shape is an element.
-     */
-    manyConceptFields(templates) {
-        const elements = this._elementsOf(templates);
-        return elements ? manyElementsFields(elements, { version: this.version }) : [];
-    }
-
-    /** The elements' changes as one step (null when nothing changed). */
-    manyConceptCommand(templates, values) {
-        const elements = this._elementsOf(templates);
-        const instances = new Map(templates.map(t => [this._elementOf(t.id), t.instance]));
-        const commands = elements ? manyElementsEditCommands(elements, values, { instanceOf: (e) => instances.get(e) }) : [];
-        return commands.length ? new CompositeCommand(`Edit ${commands.length} elements`, commands) : null;
-    }
-
-    /** The model elements the shapes show, each once; null unless every shape shows one. @private */
-    _elementsOf(templates) {
-        const elements = templates.map(t => this._elementOf(t.id));
-        return elements.every(Boolean) ? [...new Set(elements)] : null;
-    }
-
-    /**
-     * The Relationship section of a line's properties: its kind (among those
-     * the ArchiMate rules allow between its ends, and its own), documentation
-     * and typed properties. None for a plain line or a derived one.
-     */
-    edgeConceptFields(edge) {
-        const relationship = edge.relationship;
-        if (!relationship || edge.editable === false) return [];
-        const kinds = [...new Set([relationship.kind, ...this.allowedKinds(edge.sourceId, edge.targetId)].filter(Boolean))];
-        return [
-            { type: 'heading', label: 'Relationship (on every view)' },
-            { key: 'relationship.kind', label: 'Kind', type: 'select', value: relationship.kind, choices: kinds.map(k => [k, typeTitle(k)]) },
-            { key: 'relationship.documentation', label: 'Documentation', type: 'textarea', rows: 3, value: relationship.documentation ?? '' },
-            { type: 'heading', label: 'Properties' },
-            PropertyListEditor.field(relationship.properties, { key: 'relationship.properties', document: this.document ?? globalThis.document }),
-        ];
-    }
-
-    /** The relationship's changes as one EditViewItemCommand (null when nothing changed). */
-    edgeConceptCommand(edge, values) {
-        return edge.relationship ? conceptEditCommand(edge.relationship, values, { prefix: 'relationship', instance: edge.instance }) : null;
-    }
-
-    /** A new element of `type` at `point` (snapped), created in the model and shown here. One undo step. */
-    addElement(type, point) {
-        const name = typeTitle(type);
-        const id = GraphDiagram.generateNodeId(name, this.model.elements().map(e => e.id));
-        const at = this._snapToGrid(point);
-        const instance = new ElementInstance(id, at.x, at.y);
-        this._executeCommand(new AddToViewCommand(this.view, instance, { element: { id, name, type }, label: `Add ${name}` }));
-        return instance;
-    }
-
-    /**
-     * Show an element the model has at `point` (snapped), with its
-     * relationships to the elements already on the view (ShowElementCommand).
-     * One undo step. Null for an element the model lacks.
-     */
-    showElement(elementId, point) {
-        if (!this.model.getElement(elementId)) return null;
-        const at = this._snapToGrid(point);
-        const instance = new ElementInstance(elementId, at.x, at.y);
-        this._executeCommand(new ShowElementCommand(this.view, instance, { label: `Show ${this.model.getElement(elementId).name || elementId}` }));
-        this.selectTemplate(instance.id);
-        return instance;
-    }
-
-    /**
-     * A picture as an image box on this view at `point` (snapped), one undo
-     * step, selected. Null when this kind of view has no image box.
-     * @param {string} dataURL - The picture
-     */
-    addImage(dataURL, point) {
-        if (!this.view.constructor.BOX_KINDS?.some(k => k.key === 'image')) return null;
-        const box = this.view.addBox('image', this._snapToGrid(point), { iconUrl: dataURL });
-        this.render();
-        this.selectTemplate(box.id);
-        return box;
-    }
-
-    /**
-     * Add a box of a canvas palette kind ('block', 'sticky', 'image') at `point`
-     * (snapped), as the canvas menu would. One undo step.
-     */
-    addCanvasBox(kindKey, point) {
-        const item = canvasBoxMenuItems(this.view, this._snapToGrid(point), {
-            onAdded: (box) => { this.render(); this.selectTemplate(box.id); },
-        }).find((_, i) => this.view.constructor.BOX_KINDS[i].key === kindKey);
-        return item?.action();
-    }
-
-    /** The relationship kinds the ArchiMate rules allow from one instance's element to another's (association always). */
-    allowedKinds(sourceId, targetId) {
-        const from = this._elementOf(sourceId), to = this._elementOf(targetId);
-        if (!from || !to) return [];
-        const kinds = ArchimateValidator.allowedKinds(from, to, this.version);
-        return kinds.includes('association') ? kinds : [...kinds, 'association'];
-    }
-
-    /**
-     * Connect two elements: the kind is asked for (`chooseKind`) among those
-     * allowed, or taken from KIND_PREFERENCE. One undo step once chosen.
-     * @returns {Command|null|Promise<Command|null>}
-     */
-    connect(sourceId, targetId) {
-        if (sourceId === targetId) return null;
-        // A box or note at either end: a plain line (the view's rule), one undo step.
-        if (!this.view.linesAreRelationships(sourceId, targetId)) {
-            if (!this.templates.has(sourceId) || !this.templates.has(targetId)) return null;
-            const line = this.view.connect(sourceId, targetId);
-            this.render();
-            return line;
-        }
-        const kinds = this.allowedKinds(sourceId, targetId);
-        if (!kinds.length) return null;
-        const run = (kind) => (kind && kinds.includes(kind) ? this._connectAs(sourceId, targetId, kind) : null);
-        if (!this.chooseKind) return run(KIND_PREFERENCE.find(k => kinds.includes(k)) ?? kinds[0]);
-        const chosen = this.chooseKind(kinds, this._elementOf(sourceId), this._elementOf(targetId));
-        return chosen && typeof chosen.then === 'function' ? chosen.then(run) : run(chosen);
-    }
-
-    /** @private */
-    _connectAs(sourceId, targetId, kind) {
-        const cmd = this.connectCommand(sourceId, targetId, kind);
-        if (cmd) this._executeCommand(cmd);
-        return cmd;
-    }
-
-    /** The model element an instance on this canvas shows (notes and images have none). @private */
-    /** A box of a model element links to the element's page in a report. */
-    reportRef(template) {
-        const element = this._elementOf(template.id);
-        return element ? { kind: 'element', id: element.id } : null;
-    }
-
-    _elementOf(instanceId) {
-        const inst = this.templates.get(instanceId)?.instance;
-        return inst ? this.model.getElement(inst.elementId) : undefined;
-    }
-
-    /** A new relationship of `kind` between two elements' instances, created in the model and shown here. */
-    connectCommand(sourceId, targetId, kind = KIND_PREFERENCE.find(k => this.allowedKinds(sourceId, targetId).includes(k))) {
-        const source = this.templates.get(sourceId)?.instance;
-        const target = this.templates.get(targetId)?.instance;
-        const from = this._elementOf(sourceId);
-        const to = this._elementOf(targetId);
-        // Notes and images are not model elements: they take no relationships.
-        if (!from || !to || !kind) return null;
-        const id = GraphDiagram.generateNodeId(`${from.id}-${kind}-${to.id}`, this.model.relationships().map(r => r.id));
-        const instance = new RelationshipInstance(id, null, source.id, target.id);
-        return new AddRelationshipToViewCommand(this.view, instance, {
-            relationship: { id, source: from.id, target: to.id, kind },
-            label: `Add ${kind}`,
-        });
-    }
-
-    /**
-     * Deleting takes a box off the view (its lines go with it, see the base's
-     * deleteTemplatesCommand); the model keeps its element. A group goes off the
-     * view and what it held stays; the model keeps its folder.
-     */
-    /** Copies are ArchiMate views' items: they paste into ArchiMate views (any model), not the template editor. */
-    static clipboardKind = 'archimate';
-
-    /**
-     * A copy of these boxes: the view's JSON of them (ArchimateView#toJSON),
-     * with the lines and relationships between them and the elements they show.
-     * Groups are not copied (they are model folders).
-     */
-    copyPayload(ids) {
-        const boxes = ids.filter(id => this.view.getElementInstance(id));
-        return boxes.length ? this.view.toJSON({ itemIds: boxes }) : null;
-    }
-
-    /** Paste: new boxes for the same elements (added to the model when it lacks them), one undo step. */
-    pasteCommand(payload, options) {
-        return this.view.pasteCommand(payload, options);
-    }
-
-    /** Deleting is off the view: the model keeps what it showed. */
-    deleteLabel(templateIds) {
-        return `${super.deleteLabel(templateIds)} from view`;
-    }
-
-    removeTemplateCommand(templateId) {
-        return this.templates.get(templateId) instanceof ViewGroupTemplate
-            ? new RemoveGroupFromViewCommand(this.view, templateId)
-            : new DeleteElementCommand(this.view, templateId);
-    }
-
-    /**
-     * What moves with a shape: for a group, the elements drawn in it (its folder's),
-     * the notes and pictures Archi drew in it, and the groups inside it; for a box (a canvas block), the boxes Archi drew inside it.
-     */
-    containedIn(templateId) {
-        const template = this.templates.get(templateId);
-        const view = this.view;
-        if (template instanceof ViewGroupTemplate) {
-            const inner = [];
-            for (const t of this.templates.values()) {
-                if (t instanceof ViewGroupTemplate) {
-                    if (t.id !== templateId && view.placedFolders.find(f => f.id === t.id)?.parentId === templateId) inner.push(t.id);
-                } else if (t.instance?.archi?.parent === templateId
-                    || (t.instance?.elementId && view.placedFolderOf(t.instance.elementId) === templateId)) {
-                    inner.push(t.id);
-                }
-            }
-            return inner;
-        }
-        const visualId = template?.instance?.visualId;
-        if (!visualId) return [];
-        return [...this.templates.values()].filter(t => t.instance?.nestedIn === visualId).map(t => t.id);
-    }
-
-    // ===== Nesting =====
-
-    /** The box this one is drawn inside: an element's box, or a canvas block (a group holds by folder, not here). */
-    parentOf(templateId) {
-        const visualId = this.templates.get(templateId)?.instance?.nestedIn;
-        if (!visualId) return null;
-        const parent = [...this.templates.values()].find(t => t.instance?.visualId === visualId);
-        return parent?.id ?? null;
-    }
-
-    /**
-     * An element's parts on this view: the elements it is composed of or
-     * aggregates (its composition and aggregation relationships' targets),
-     * each by its first box here.
-     */
-    partsOf(templateId) {
-        const element = this._elementOf(templateId);
-        if (!element) return [];
-        const parts = this.model.relationships()
-            .filter(r => r.source === element.id && r.target !== element.id && (r.kind === 'composition' || r.kind === 'aggregation'))
-            .map(r => this.view.elementInstancesFor(r.target)[0]?.id)
-            .filter(id => id && this.templates.has(id) && this.canHold(templateId, id));
-        return [...new Set(parts)];
-    }
-
-    /** The "by kind" layout puts an element's box in its layer's row (notes and images in their own). */
-    layoutCategory(template) {
-        const element = this._elementOf(template.id);
-        return element ? treeLayerOf(element) : 'other';
-    }
-
-    /** An element's box holds any box but a group; on a canvas, a block holds boxes. */
-    canHold(parentId, childId) {
-        const parent = this.templates.get(parentId), child = this.templates.get(childId);
-        if (!parent?.instance || !child?.instance || parent instanceof ViewGroupTemplate || child instanceof ViewGroupTemplate) return false;
-        return !!this._elementOf(parentId) || parent.instance.content?.archiVisualType === 'canvas-model-block';
-    }
-
-    /** An element dropped on another nests there when a relationship a nesting stands for (NESTING_KINDS) is allowed between them. */
-    nestsOnDrop(parentId, childId) {
-        if (!this._elementOf(parentId) || !this._elementOf(childId)) return false;
-        return this.allowedKinds(parentId, childId).some(kind => NESTING_KINDS.includes(kind));
-    }
-
-    nestCommand(childId, parentId) {
-        const child = this.templates.get(childId)?.instance;
-        if (!child) return null;
-        return new NestInstanceCommand(child, parentId ? this.templates.get(parentId)?.instance ?? null : null);
-    }
-
-    /** After nesting an element in another: offer the relationship the nesting stands for (nestingKinds). */
-    nested(changes) {
-        let chain = Promise.resolve();
-        for (const { childId, parentId } of changes) {
-            chain = chain.then(() => this.offerNestingRelationship(parentId, childId));   // taken out: nothing to offer
-        }
-        return chain;
-    }
-
-    /**
-     * The kinds a nesting can stand for, from parent to child, as Archi offers
-     * them: those of NESTING_KINDS the rules allow. None when the two already
-     * have such a relationship.
-     */
-    nestingKinds(parentId, childId) {
-        const from = this._elementOf(parentId), to = this._elementOf(childId);
-        if (!from || !to || from === to) return [];
-        if (nestingRelationships(this.model, from.id, to.id).length) return [];
-        const allowed = this.allowedKinds(parentId, childId);
-        return NESTING_KINDS.filter(k => allowed.includes(k));
-    }
-
-    /**
-     * Ask which relationship a nesting stands for (`chooseKind`, with the
-     * reason 'nesting'; none chosen adds none) and add it to the model, drawn
-     * on no view: the nesting shows it. One undo step. Without `chooseKind`, nothing is added.
-     * @returns {Promise<Command|null>}
-     */
-    async offerNestingRelationship(parentId, childId) {
-        const kinds = this.nestingKinds(parentId, childId);
-        if (!kinds.length || !this.chooseKind) return null;
-        const from = this._elementOf(parentId), to = this._elementOf(childId);
-        const kind = await this.chooseKind(kinds, from, to, { reason: 'nesting' });
-        if (!kind || !kinds.includes(kind)) return null;
-        const cmd = this.nestingRelationshipCommand(parentId, childId, kind);
-        this._executeCommand(cmd);
-        return cmd;
-    }
-
-    /** The relationship of `kind` a nesting stands for, from parent to child, in the model only. */
-    nestingRelationshipCommand(parentId, childId, kind) {
-        const from = this._elementOf(parentId), to = this._elementOf(childId);
-        const id = GraphDiagram.generateNodeId(`${from.id}-${kind}-${to.id}`, this.model.relationships().map(r => r.id));
-        return new AddRelationshipCommand(this.model, { id, source: from.id, target: to.id, kind }, `Add ${kind} (nested)`);
-    }
-
-    /** Deleting a line takes it off the view: a plain line goes; a relationship stays in the model. */
-    deleteEdgeCommand(edgeId) {
-        return this.view.viewConnections.has(edgeId)
-            ? new RemoveLineCommand(this.view, edgeId)
-            : new RemoveRelationshipFromViewCommand(this.view, edgeId);
-    }
-}
+import { ViewLineEdge } from './ViewLineEdge.js';
+import { typeTitle, ARCHIMATE_TYPE_MIME } from './archimateNames.js';
+import { RemoveLineCommand } from '../diagrams/RemoveLineCommand.js';
+import { canvasBoxMenuItems } from '../canvas/canvasBoxMenuItems.js';
+import { hintMenuItems } from '../canvas/hintMenuItems.js';
+import { CANVAS_BOX_MIME } from '../canvas/CanvasPalette.js';
+import { MODEL_ELEMENT_MIME } from '../modelTree/ModelTreePanel.js';
+import { showGlobalSettingsDialog } from '../SettingsDialog.js';
+import { specializationCatalogDialog } from './specializationCatalogDialog.js';
+import { CustomViewpoints } from './CustomViewpoints.js';
+import { askDeleteFromModel } from './deleteFromModel.js';
+import { KERNEL_FUNCTIONS } from '../../kernelExpr.js';
+import { CHANGE_COLOURS, elementChange, relationshipChange, hasChangeMakers, propertyParams, expressionValues, resultBands, sequentialColours } from './heatMaps.js';
+import { ShowElementCommand } from '../diagrams/ShowElementCommand.js';
+import { DiagramEditor } from '../DiagramEditor.js';
+import { CompositeCommand } from '../CommandHistory.js';
+import { GroupCommand } from '../arrangement/index.js';
+import { ElementInstance } from '../diagrams/ElementInstance.js';
+import { RelationshipInstance } from '../diagrams/RelationshipInstance.js';
+import { ViewObjectInstance } from '../diagrams/ViewObjectInstance.js';
+import { PlaceItemsCommand } from '../diagrams/PlaceItemsCommand.js';
+import { AddRelationshipToViewCommand, AddRelationshipCommand, RemoveRelationshipFromViewCommand, DeleteElementCommand, AddToViewCommand } from '../diagrams/ArchimateCommands.js';
+import { NestInstanceCommand } from '../diagrams/NestInstanceCommand.js';
+import { NESTING_KINDS, nestingRelationships, hiddenByNesting } from '../diagrams/nesting.js';
+import { treeLayerOf } from '../modelTree/treeLayers.js';
+import { parseDate } from '../diagrams/roadmap.js';
+import { ArchimateValidator } from '../diagrams/ArchimateValidator.js';
+import { GraphDiagram } from '../diagrams/GraphDiagram.js';
+import { ArchimateElementTemplate } from './ArchimateElementTemplate.js';
+import { ArchimateEdge } from './ArchimateEdge.js';
+import { ViewpointRule } from './ViewpointRule.js';
+import { DerivedEdge } from './DerivedEdge.js';
+import { ViewGroupTemplate } from './ViewGroupTemplate.js';
+import { RemoveGroupFromViewCommand } from '../diagrams/RemoveGroupFromViewCommand.js';
+import { DerivedRelationships } from '../diagrams/DerivedRelationships.js';
+import { ElementFilterRule } from './ElementFilterRule.js';
+import { ArchimateViewpoints, ArchimateNotation } from '../../archimate.js';
+import { PropertyListEditor } from '../PropertyListEditor.js';
+import { FormDialog } from '../FormDialog.js';
+import { duplicateSearchFields, duplicateSearchOptions, validateDuplicateSearch } from '../duplicateSearchForm.js';
+import { DuplicatesDialog } from '../DuplicatesDialog.js';
+import { MergeCompareDialog } from '../MergeCompareDialog.js';
+import { elementPropertyFields, elementEditCommand, conceptEditCommand, manyElementsFields, manyElementsEditCommands } from './elementProperties.js';
+
+/**
+ * Which allowed relationship kind a new connection takes when nobody is asked:
+ * the dependency and dynamic kinds people usually mean first, the structural
+ * whole/part kinds last.
+ */
+export const KIND_PREFERENCE = Object.freeze([
+    'assignment', 'realization', 'serving', 'access', 'influence', 'triggering', 'flow',
+    'specialization', 'aggregation', 'composition', 'association',
+]);
+
+// Kept in a module of their own (archimateNames.js), so the palette needs no import of this editor.
+export { typeTitle, ARCHIMATE_TYPE_MIME };
+
+/**
+ * ArchimateCanvasEditor — the diagram editor's canvas over one ArchiMate
+ * view: its element instances as ArchimateElementTemplates, its relationship
+ * instances as ArchimateEdges, and its own undo history. Everything the base
+ * editor does (move, resize, restack, bend points, sides, styles, zoom,
+ * snapping) edits the view directly; the editor's maps are rebuilt from the
+ * view on every render, so undo of a view edit shows straight away.
+ *
+ * What stands for something else in ArchiMate is done through the view and
+ * model instead of the maps:
+ * - dropping a palette type adds a new model element and shows it;
+ * - connecting two elements adds a relationship, its kind the first the
+ *   ArchiMate rules allow between them (association if none);
+ * - deleting removes from the view (with the element's lines); the model
+ *   keeps its elements and relationships.
+ * Each is one step on the view's history.
+ */
+export class ArchimateCanvasEditor extends DiagramEditor {
+    /**
+     * @param {Object} options - DiagramEditor options, plus:
+     * @param {ArchimateView} options.view
+     * @param {ArchimateModel} options.model
+     * @param {Object} [options.nodeOptions] - ArchimateDiagram.buildNode options (archimateVersion, useDistinctShapes, ...),
+     *   and the viewpoint: `viewpoint` (a name; 'All' or none for every type), `viewpointMode` ('fade' or 'hide')
+     * @param {(kinds: string[], from: Object, to: Object) => Promise<string|null>|string|null} [options.chooseKind]
+     *   Asks which relationship kind a new connection is, given the kinds allowed between the two
+     *   elements (null cancels). Without it the first of KIND_PREFERENCE that is allowed is used.
+     * @param {(nodeOptions: Object) => void} [options.onNodeOptionsChange] - The ⚙ Settings menu changed
+     *   the version or distinct shapes (the host may need to redraw more than the canvas, e.g. a palette)
+     * @param {(element: Object) => ({text: string, color?: string}|null)} [options.elementStatus] - A host's
+     *   live status for an element (a component's lifecycle state), drawn on its boxes
+     * @param {(element: Object) => Array<Object>} [options.elementMenuExtras] - A host's menu items for an
+     *   element (its transitions), at the end of a box's right-click menu
+     */
+    constructor({ view, model, nodeOptions = {}, chooseKind = null, onNodeOptionsChange = null, templateMenu = null, customViewpoints = [], settingsManager = null, elementStatus = null, elementMenuExtras = null, ...options }) {
+        super({ ...options, templates: new Map(), edges: new Map(), history: view.history, arrangement: view.arrangement });
+        this.view = view;
+        this.model = model;
+        this.nodeOptions = nodeOptions;
+        this.chooseKind = chooseKind;
+        this.onNodeOptionsChange = onNodeOptionsChange;
+        /** Viewpoints of the user's own, offered with the standard ones. */
+        this.customViewpoints = customViewpoints;
+        /** The settings the ⚙ Settings menu's Model settings… edits (a SettingsManager), if any. */
+        this.settingsManager = settingsManager;
+        /** Canvas templates (a CanvasTemplateMenu): placed on the canvas, saved from its shapes. */
+        this.templateMenu = templateMenu;
+        /** A host's live status per element, drawn on its boxes, and its menu items per element. */
+        this.elementStatus = elementStatus;
+        this.elementMenuExtras = elementMenuExtras;
+        this.addDropHandler({
+            accepts: (dt) => Array.from(dt.types).includes(ARCHIMATE_TYPE_MIME),
+            drop: (dt, point) => this.addElement(dt.getData(ARCHIMATE_TYPE_MIME), point),
+        });
+        // An element from the model tree: shown here, with its relationships to what is already shown.
+        this.addDropHandler({
+            accepts: (dt) => Array.from(dt.types).includes(MODEL_ELEMENT_MIME),
+            drop: (dt, point) => this.showElement(dt.getData(MODEL_ELEMENT_MIME), point),
+        });
+        // A picture file dropped (or pasted): an image box where it fell (pasted: in the middle).
+        if (typeof document !== 'undefined') this.enableImageDrop((dataURL, point) => this.addImage(dataURL, point));
+        // A canvas palette tile: the box, where it was dropped (an image asks for its picture).
+        this.addDropHandler({
+            accepts: (dt) => Array.from(dt.types).includes(CANVAS_BOX_MIME),
+            drop: (dt, point) => this.addCanvasBox(dt.getData(CANVAS_BOX_MIME), point),
+        });
+    }
+
+    get version() {
+        return this.nodeOptions.archimateVersion ?? '4';
+    }
+
+    /**
+     * An element's own items (a view of it and what it relates to; its
+     * relationships to what is shown, when some are not), a canvas box's hint,
+     * and the shape's selection (or the shape and its group) as a template.
+     */
+    shapeMenuExtras(elementId) {
+        const ids = this.selectedIds.has(elementId) ? this.getSelectedIds() : [elementId];
+        const items = this.templateMenu?.saveAsTemplateItems(this.view.id, { itemIds: [...this.arrangement.movers(ids)] }) ?? [];
+        const element = this._elementOf(elementId);
+        const missing = element ? this.missingRelationshipsOf(elementId) : [];
+        // Two or more elements chosen: merge them into one (choose the one kept).
+        const merging = this.elementIdsOf(ids);
+        return [
+            ...(merging.length > 1 ? [{ label: `Merge ${merging.length} elements…`, action: () => this.askMerge(merging) }] : []),
+            ...(element ? [{ label: 'Generate View For This', action: () => this.model.generateView([element.id]) }] : []),
+            ...(missing.length ? [{ label: `Add Missing Relationships (${missing.length})`, action: () => this.addMissingRelationships(elementId) }] : []),
+            ...hintMenuItems(this.view, elementId, { onChange: () => this.render() }),
+            ...(items.length ? [{ label: 'Save as template', items }] : []),
+            ...(merging.length ? [{ label: '🗑 Delete from model…', danger: true, action: () => this.askDeleteFromModel(merging) }] : []),
+            // The host's own items end the menu.
+            ...(element && this.elementMenuExtras ? this.elementMenuExtras(element) ?? [] : []),
+        ];
+    }
+
+    /** Delete elements from the model, once the dialog saying where they are used is confirmed (askDeleteFromModel). */
+    askDeleteFromModel(elementIds) {
+        return askDeleteFromModel(this.model, elementIds, {
+            document: this.document ?? globalThis.document,
+            onConfirm: (ids) => this.deleteFromModel(ids),
+        });
+    }
+
+    /** Take elements out of the model, with their relationships and every box and line of them, as one undo step. */
+    deleteFromModel(elementIds) {
+        const cmd = this.model.deleteFromModelCommand(elementIds);
+        if (!cmd.elementIds.length) return null;
+        this.clearSelection();
+        this._executeCommand(cmd);
+        return cmd;
+    }
+
+    /** The model's relationships between this box's element and what is shown that the view does not draw from this box. */
+    missingRelationshipsOf(instanceId) {
+        const instance = this.view.getElementInstance(instanceId);
+        if (!instance) return [];
+        return this.view.missingRelationshipInstances(instance.elementId)
+            .filter(line => line.sourceInstanceId === instanceId || line.targetInstanceId === instanceId);
+    }
+
+    /** Draw them all, as one undo step. */
+    addMissingRelationships(instanceId) {
+        const missing = this.missingRelationshipsOf(instanceId);
+        if (!missing.length) return null;
+        const cmd = new CompositeCommand(`Add ${missing.length} relationship${missing.length === 1 ? '' : 's'}`,
+            missing.map(line => new AddRelationshipToViewCommand(this.view, line)));
+        this._executeCommand(cmd);
+        return cmd;
+    }
+
+    /** The view's boxes (a canvas's palette; a note or picture elsewhere) at the point clicked, and on a canvas a template placed there. */
+    canvasMenuItems(at) {
+        const boxes = canvasBoxMenuItems(this.view, at, { onAdded: (box) => { this.render(); this.selectTemplate(box.id); } });
+        const items = this.templateMenu?.placeTemplateItems(this.view.id, at) ?? [];
+        // Elements from text: not on a canvas, whose boxes are not elements.
+        const fromText = this.view.constructor.kind === 'canvas' ? [] : super.canvasMenuItems(at);
+        return [...boxes, ...fromText, ...(items.length ? [{ label: 'Place template', items }] : []), ...hintMenuItems(this.view, null, { onChange: () => this.render() })];
+    }
+
+    /** The View menu, and Generate roadmap… (elements with dates on a time line). */
+    viewMenuItems() {
+        const repeated = this.view?.repeatedBoxes?.() ?? [];
+        return [
+            ...super.viewMenuItems(),
+            { label: `Remove repeated boxes${repeated.length ? ` (${repeated.length})` : ''}`, disabled: !repeated.length || undefined, action: () => this.removeRepeatedBoxes() },
+            { label: 'Generate roadmap…', action: () => this.askRoadmap() },
+        ];
+    }
+
+    /** The model's own: Find likely duplicates…. */
+    modelMenuItems() {
+        return [...super.modelMenuItems(), { label: 'Find likely duplicates…', action: () => this.askDuplicates() }];
+    }
+
+    /**
+     * Take off this view the boxes that only repeat another box of their
+     * element (ArchimateView#repeatedBoxes: same label, same lines), with
+     * their lines, as one undo step. Returns the command, or null with none.
+     */
+    removeRepeatedBoxes() {
+        const ids = this.view.repeatedBoxes();
+        if (!ids.length) return null;
+        const cmd = this.deleteTemplatesCommand(ids);
+        cmd.label = `Remove ${ids.length} repeated box${ids.length === 1 ? '' : 'es'}`;
+        this._executeCommand(cmd);
+        return cmd;
+    }
+
+    /**
+     * Where Find likely duplicates… can look: the whole model, the elements on
+     * the view in front, the elements selected (two or more). [key, label, element ids or null].
+     */
+    duplicateScopes() {
+        const onView = this.elementIdsOf([...(this.view?.elementInstances?.keys() ?? [])]);
+        const selected = this.elementIdsOf(this.getSelectedIds());
+        return [
+            ['model', 'The whole model', null],
+            ...(onView.length > 1 ? [['view', `This view (${this.view.name || this.view.id})`, onView]] : []),
+            ...(selected.length > 1 ? [['selection', `The ${selected.length} elements selected`, selected]] : []),
+        ];
+    }
+
+    /**
+     * Find likely duplicates…: where to look (duplicateScopes), how to compare
+     * (names, documentation or a property's value; exactly or by their words)
+     * and what noise to leave out (duplicateSearchFields), then the groups
+     * found, each with Merge… (showDuplicates).
+     */
+    askDuplicates() {
+        const names = [...new Set(this.model.elements().flatMap(e => (e.properties ?? []).map(p => p.name ?? p.key)).filter(Boolean))].sort();
+        const specializations = [...new Set(this.model.elements().map(e => e.specialization).filter(Boolean))].sort();
+        const scopes = this.duplicateScopes();
+        return new FormDialog({
+            title: 'Find likely duplicates',
+            description: 'Elements are compared by their words: case, punctuation, word order and the noise words do not count.',
+            fields: duplicateSearchFields({ scope: { label: 'Look in', choices: scopes.map(([key, label]) => [key, label]) }, properties: names, specializations }),
+            submitLabel: 'Find',
+            idPrefix: 'duplicates-',
+            document: this.document ?? globalThis.document,
+            validate: validateDuplicateSearch,
+            onApply: (values) => {
+                const { options, scope } = duplicateSearchOptions(values);
+                this.showDuplicates(options, { within: scopes.find(([key]) => key === scope)?.[2] ?? null });
+            },
+        }).open();
+    }
+
+    /**
+     * The elements that look like one thing twice (the model check's likely
+     * duplicates, compared as `options` say: DUPLICATE_OPTIONS; `within`: only
+     * among these element ids), each group with Merge….
+     */
+    showDuplicates(options = {}, { within = null } = {}) {
+        const find = () => this.model.checker(this.checkerOptions()).possibleDuplicates(options, { within });
+        const groups = find();
+        new DuplicatesDialog({
+            groups,
+            refind: find,
+            merge: async (group) => !!(await this.askMerge(group.ids)),
+            onReveal: (group) => this.revealFinding(group),
+            empty: 'No elements look like the same thing twice.',
+            document: this.document ?? globalThis.document,
+        }).open();
+        return groups;
+    }
+
+    /** The model elements of some boxes, each once (a box that is not an element is left out). */
+    elementIdsOf(instanceIds) {
+        return [...new Set(instanceIds.map(id => this._elementOf(id)?.id).filter(Boolean))];
+    }
+
+    /**
+     * Generate roadmap…: which elements (the selection's, or every element in
+     * the model with both dates), the properties their dates are in, and how
+     * months are named; the roadmap view comes to the front (ArchimateModel#generateRoadmap).
+     */
+    askRoadmap() {
+        const selected = this.getSelectedIds().map(id => this._elementOf(id)?.id).filter(Boolean);
+        const names = [...new Set(this.model.elements().flatMap(e => (e.properties ?? []).map(p => p.name ?? p.key)).filter(Boolean))].sort();
+        return new FormDialog({
+            title: 'Generate roadmap',
+            description: 'A view with each element a bar from its start date to its end date, under the months.',
+            fields: [
+                { key: 'from', label: 'Elements', type: 'select', value: selected.length ? 'selection' : 'model', choices: [...(selected.length ? [['selection', `The ${selected.length} selected`]] : []), ['model', 'Every element with both dates']] },
+                { key: 'start', label: 'Start date property', type: 'text', value: 'Start Date', suggestions: names },
+                { key: 'end', label: 'End date property', type: 'text', value: 'End Date', suggestions: names },
+                { key: 'months', label: 'Month names', type: 'select', value: 'short', choices: [['short', 'Short (Jan)'], ['full', 'Full (January)']] },
+                { key: 'name', label: 'View name', type: 'text', value: 'Roadmap' },
+            ],
+            submitLabel: 'Generate',
+            idPrefix: 'roadmap-',
+            document: this.document ?? globalThis.document,
+            validate: (v) => (this.roadmapFor(v).view === null ? `No element has both "${v.start}" and "${v.end}" as dates` : null),
+            onApply: (v) => this.generateRoadmap(v),
+        }).open();
+    }
+
+    /** What a roadmap of these dialog values would hold: `{view: null}` when nothing would be on it (a dry run). @private */
+    roadmapFor({ from, start, end }) {
+        const ids = from === 'selection' ? this.getSelectedIds().map(id => this._elementOf(id)?.id).filter(Boolean) : this.model.elements().map(e => e.id);
+        const date = (e, key) => parseDate((e.properties ?? []).find(p => (p.name ?? p.key) === key)?.value);
+        const any = ids.map(id => this.model.getElement(id)).some(e => e && date(e, start) && date(e, end) && date(e, end) >= date(e, start));
+        return { ids, view: any ? true : null };
+    }
+
+    /** Generate the roadmap of Generate roadmap…'s values. @returns {{view, skipped}} */
+    generateRoadmap({ from = 'model', start = 'Start Date', end = 'End Date', months = 'short', name = 'Roadmap' } = {}) {
+        const { ids } = this.roadmapFor({ from, start, end });
+        return this.model.generateRoadmap(ids, { startProperty: start, endProperty: end, monthNames: months, name });
+    }
+
+    /** An element's box keeps room for its type badge, and Archi's height. */
+    textFit(template) {
+        return this._elementOf(template.id) ? { padding: 44, min: { width: 80, height: 55 } } : super.textFit(template);
+    }
+
+    /** Text becomes elements of any type of this version (the viewpoint's, when it limits them). */
+    shapeTypes() {
+        const viewpoint = this.nodeOptions.viewpoint;
+        const allowed = viewpoint && viewpoint !== 'All' ? ArchimateViewpoints.allowedElementTypes(viewpoint, this.version, this.customViewpoints) : null;
+        return ArchimateNotation.elementTypeNames(this.version)
+            .filter(t => !allowed || allowed.includes(t))
+            .map(t => [t, typeTitle(t)]);
+    }
+
+    /**
+     * New model elements from text, each with its box here: one undo step.
+     * A documentation column becomes the element's documentation.
+     */
+    createShapesCommand(items) {
+        const ids = this.model.elements().map(e => e.id);
+        const steps = [], createdIds = [];
+        for (const item of items) {
+            const id = GraphDiagram.generateNodeId(`${item.type}-${item.name}`, ids);
+            ids.push(id);
+            const instance = new ElementInstance(id, item.x, item.y);
+            createdIds.push(instance.id);
+            steps.push(new AddToViewCommand(this.view, instance, { element: { id, name: item.name, type: item.type, ...(item.documentation && { documentation: item.documentation }) } }));
+        }
+        const cmd = new CompositeCommand(`Add ${steps.length} element${steps.length === 1 ? '' : 's'} from text`, steps);
+        cmd.createdIds = createdIds;
+        return cmd;
+    }
+
+    /**
+     * What elements can be coloured by: their layer, type, specialization, each
+     * property any of them has, the change deliverables and work packages make
+     * to them (when the model has any), and a formula over their properties.
+     */
+    colourKeys(templates = [...this.templates.values()]) {
+        const properties = new Set();
+        for (const t of templates) for (const p of this._elementOf(t.id)?.properties ?? []) if (p.name ?? p.key) properties.add(p.name ?? p.key);
+        return [
+            ['layer', 'Layer'], ['type', 'Type'], ['specialization', 'Specialization'],
+            ...[...properties].sort().map(name => [`property:${name}`, `Property "${name}"`]),
+            ...(this.model && hasChangeMakers(this.model) ? [['change', 'Change (create, update, delete)']] : []),
+            ...(properties.size ? [['expression', 'A formula over properties…']] : []),
+        ];
+    }
+
+    /** By change, a relationship to a deliverable or work package is drawn in the colour of the change it says. */
+    colourEdgeValue(edge, key) {
+        if (key !== 'change' || !edge.relationship) return super.colourEdgeValue(edge, key);
+        return relationshipChange(this.model, edge.relationship) ?? undefined;
+    }
+
+    /** A formula's key (`expression:<formula>`) is called by its formula. */
+    colourKeyLabel(key) {
+        return key.startsWith('expression:') ? key.slice(11) : super.colourKeyLabel(key);
+    }
+
+    /** The change heat map's own colours; a formula's results, light to dark in order; else the palette. */
+    colourDefaults(key, values) {
+        if (key === 'change') return values.map(v => CHANGE_COLOURS[v]);
+        if (key.startsWith('expression:')) return sequentialColours(values.length);
+        return super.colourDefaults(key, values);
+    }
+
+    /**
+     * A formula's values: each element's result (expressionValues), as its own
+     * value when there are few, else in bands, smallest first (resultBands).
+     */
+    colourValues(key, templates = [...this.templates.values()].filter(t => t.visible !== false)) {
+        if (!key.startsWith('expression:')) return super.colourValues(key, templates);
+        const boxes = templates.map(t => [t, this._elementOf(t.id)]).filter(([, e]) => e);
+        const results = expressionValues([...new Set(boxes.map(([, e]) => e))], key.slice(11));
+        const { labels, labelOf } = resultBands(results.values());
+        const values = new Map(labels.map(l => [l, []]));
+        for (const [t, e] of boxes) if (results.has(e.id)) values.get(labelOf(results.get(e.id))).push(t);
+        return values;
+    }
+
+    /** A formula over properties asks for the formula first. @protected */
+    askColours(key) {
+        if (key !== 'expression') return super.askColours(key);
+        const elements = [...new Set([...this.templates.values()].map(t => this._elementOf(t.id)).filter(Boolean))];
+        const names = [...propertyParams(elements)].map(([id, name]) => (id === name ? id : `${id} (${name})`));
+        new FormDialog({
+            title: 'Colour by a formula',
+            description: `A number from each element's properties, e.g. Cost * Risk, or Cost > 10000 ? 1 : 0. Properties: ${names.join(', ')}. `
+                + `Arithmetic, comparisons, a ? b : c, and ${Object.keys(KERNEL_FUNCTIONS).join(', ')}. `
+                + 'An element without a number for a property the formula uses is left as it is.',
+            fields: [{ key: 'formula', label: 'Formula', type: 'text', value: this._lastFormula ?? '' }],
+            submitLabel: 'Next',
+            idPrefix: 'colour-formula-',
+            document: this.document ?? globalThis.document,
+            validate: ({ formula }) => {
+                try { expressionValues(elements, formula); return null; } catch (e) { return e.message; }
+            },
+            onApply: ({ formula }) => {
+                this._lastFormula = formula;
+                super.askColours(`expression:${formula}`);
+            },
+        }).open();
+    }
+
+    /** An element's value for a colourKeys key (notes and pictures have none). */
+    colourValue(template, key) {
+        const element = this._elementOf(template.id);
+        if (!element) return undefined;
+        if (key === 'layer') return typeTitle(treeLayerOf(element));
+        if (key === 'type') return typeTitle(element.type ?? '');
+        if (key === 'specialization') return element.specialization;
+        if (key === 'change') return elementChange(this.model, element.id) ?? undefined;
+        if (key.startsWith('property:')) {
+            const p = (element.properties ?? []).find(q => (q.name ?? q.key) === key.slice(9));
+            return p?.value === undefined || p?.value === null ? undefined : String(p.value);
+        }
+        return super.colourValue(template, key);
+    }
+
+    /** The kind legend: each element type on the view, in the colour of its first box. */
+    kindLegendEntries() {
+        const types = new Map();
+        for (const t of this.templates.values()) {
+            const element = this._elementOf(t.id);
+            if (!element || types.has(element.type)) continue;
+            types.set(element.type, t.fillColor);
+        }
+        return [...types].map(([type, fillColor]) => ({ label: typeTitle(type), fillColor }));
+    }
+
+    /**
+     * A legend is notes (stickies on a canvas) on the view: a frame holding a
+     * note per entry (DiagramEditor.legendLayout), grouped, as one undo step.
+     * Placed in order, so the frame stacks behind its entries.
+     */
+    legendCommand(entries, title) {
+        if (!entries.length) return null;
+        const kind = this.view.constructor.BOX_KINDS.find(k => k.key === 'note') ?? this.view.constructor.BOX_KINDS.find(k => k.key === 'sticky');
+        if (!kind) return null;
+        const { frame, items } = DiagramEditor.legendLayout(entries.length, this.legendPosition());
+        const stamp = Date.now().toString(36);
+        const box = (i, name, { x, y, width, height }, appearance) => {
+            const inst = new ViewObjectInstance(kind.content(`legend-${stamp}-${i}`, { name }), x, y);
+            inst.size = { width, height };
+            inst.appearance = { ...kind.appearance, ...appearance };
+            return inst;
+        };
+        const boxes = [
+            box(0, title, frame, { fillColor: '#ffffff', ...DiagramEditor.LEGEND_TITLE_STYLE }),
+            ...entries.map((e, i) => box(i + 1, e.label, items[i], { fillColor: e.fillColor })),
+        ];
+        return new CompositeCommand(`Add legend: ${title}`, [
+            new PlaceItemsCommand(this.view, { elementInstances: boxes }, { label: `Add legend: ${title}` }),
+            new GroupCommand(this.arrangement, boxes.map(b => b.id), { name: title }),
+        ]);
+    }
+
+    /** Likely duplicates can be merged (Merge…: choose the one to keep). */
+    findingActions(finding) {
+        return finding.code === 'possible-duplicate' ? [{ label: 'Merge…', action: () => this.askMerge(finding.ids) }] : [];
+    }
+
+    /**
+     * What differs among some elements, for the merge to choose: their
+     * documentation (when two or more have some, and it differs), each property
+     * with different values, and the specialization.
+     * @returns {{documentation: Array<[string, string]>, properties: Map<string, Array<[string, string]>>, specializations: string[]}}
+     *   each choice [value, label]
+     */
+    mergeChoices(elements) {
+        const name = (e) => e.name || e.id;
+        const documented = elements.filter(e => (e.documentation ?? '').trim());
+        const texts = [...new Set(documented.map(e => e.documentation.trim()))];
+        const properties = new Map();
+        for (const e of elements) {
+            for (const p of e.properties ?? []) {
+                const key = p.name ?? p.key;
+                if (!properties.has(key)) properties.set(key, new Map());
+                const values = properties.get(key);
+                values.set(String(p.value ?? ''), [...(values.get(String(p.value ?? '')) ?? []), name(e)]);
+            }
+        }
+        const specializations = [...new Set(elements.map(e => e.specialization).filter(Boolean))];
+        return {
+            documentation: texts.length > 1 ? texts.map(t => [t, `${documented.filter(e => e.documentation.trim() === t).map(name).join(', ')}: ${t.length > 50 ? `${t.slice(0, 50)}…` : t}`]) : [],
+            properties: new Map([...properties].filter(([, values]) => values.size > 1)
+                .map(([key, values]) => [key, [...values].map(([value, from]) => [value, `${value || '(empty)'} (${from.join(', ')})`])])),
+            specializations: specializations.length > 1 ? specializations : [],
+        };
+    }
+
+    /**
+     * Some elements side by side, for a merge (MergeCompareDialog's rows): their
+     * names, types, specializations, documentation, each property, their
+     * relationships (kind, direction, the element at the other end) and the
+     * views they are on.
+     */
+    mergeComparison(elements) {
+        const nameOf = (id) => this.model.getElement(id)?.name || id;
+        const valueOf = (e, key) => (e.properties ?? []).filter(p => (p.name ?? p.key) === key).map(p => p.value ?? '').join(', ');
+        const keys = [...new Set(elements.flatMap(e => (e.properties ?? []).map(p => p.name ?? p.key)).filter(Boolean))];
+        const lines = (e) => {
+            const { incoming, outgoing } = this.model.relationshipsFor(e.id);
+            return [
+                ...outgoing.map(r => `${r.kind} → ${nameOf(r.target)}`),
+                ...incoming.map(r => `${r.kind} ← ${nameOf(r.source)}`),
+            ].sort().join('\n');
+        };
+        const views = (e) => this.model.views().filter(v => v.elementInstancesFor?.(e.id).length).map(v => v.name || v.id).join('\n');
+        return [
+            { label: 'Name', values: elements.map(e => e.name ?? '') },
+            { label: 'Type', values: elements.map(e => e.type ?? '') },
+            ...(elements.some(e => e.specialization) ? [{ label: 'Specialization', values: elements.map(e => e.specialization ?? '') }] : []),
+            { label: 'Documentation', values: elements.map(e => (e.documentation ?? '').trim()) },
+            ...keys.map(key => ({ label: `${key} (property)`, values: elements.map(e => valueOf(e, key)) })),
+            { label: 'Relationships', values: elements.map(lines) },
+            { label: 'Views', values: elements.map(views) },
+        ];
+    }
+
+    /**
+     * Merge some elements into one, one undo step (ArchimateModel#mergeCommand).
+     * Their relationships always come together. When they differ in anything
+     * but the views they are on, they are shown side by side
+     * (MergeCompareDialog) to choose which is kept and, where they differ, the
+     * documentation (one, or all joined), each property's value, the
+     * specialization; OK merges, Cancel leaves them. Alike, the first is kept
+     * without asking. Resolves to the merge's command, or null.
+     */
+    async askMerge(elementIds) {
+        const elements = elementIds.map(id => this.model.getElement(id)).filter(Boolean);
+        if (elements.length < 2) return null;
+        const used = (e) => {
+            const views = this.model.views().filter(v => v.elementInstancesFor?.(e.id).length).length;
+            const { incoming, outgoing } = this.model.relationshipsFor(e.id);
+            return `${views} view${views === 1 ? '' : 's'}, ${incoming.length + outgoing.length} relationship${incoming.length + outgoing.length === 1 ? '' : 's'}`;
+        };
+        const ids = elements.map(e => e.id);
+        const rows = this.mergeComparison(elements);
+        const compare = new MergeCompareDialog({
+            title: `Merge ${elements.length} elements`,
+            description: 'The one kept takes the others\' relationships, their boxes on every view, and the properties it lacks; the others go. Where they differ (marked ≠), choose.',
+            columns: elements.map(e => `${e.name || e.id} (${used(e)})`),
+            rows,
+            document: this.document ?? globalThis.document,
+        });
+        // Views apart (their boxes all come to the kept one), nothing to choose: the first is kept.
+        if (!rows.some(row => row.label !== 'Views' && MergeCompareDialog.differs(row))) return this.mergeElements(ids[0], ids.slice(1));
+        const { documentation, properties, specializations } = this.mergeChoices(elements);
+        const JOINED = '\u0000joined';
+        const propertyKeys = [...properties.keys()];
+        compare.fields = [
+            { key: 'keep', label: 'Keep', type: 'select', value: ids[0], choices: elements.map(e => [e.id, `${e.name || e.id} (${used(e)})`]) },
+            ...(documentation.length ? [{ key: 'documentation', label: 'Documentation', type: 'select', value: JOINED, choices: [[JOINED, 'All of them, joined'], ...documentation] }] : []),
+            ...(specializations.length ? [{ key: 'specialization', label: 'Specialization', type: 'select', value: specializations[0], choices: specializations.map(s => [s, s]) }] : []),
+            ...propertyKeys.map((key, i) => ({ key: `property-${i}`, label: key, type: 'select', value: properties.get(key)[0][0], choices: properties.get(key) })),
+        ];
+        const values = await compare.ask();
+        if (!values) return null;
+        const { keep } = values;
+        const joined = () => [...new Set(elements.map(e => (e.documentation ?? '').trim()).filter(Boolean))].join('\n\n');
+        return this.mergeElements(keep, ids.filter(id => id !== keep), {
+            ...(documentation.length && { documentation: values.documentation === JOINED ? joined() : values.documentation }),
+            ...(specializations.length && { specialization: values.specialization }),
+            properties: Object.fromEntries(propertyKeys.map((key, i) => [key, values[`property-${i}`]])),
+        });
+    }
+
+    /** Merge elements into one (`keepId`), one undo step; the canvas and tree redraw. `choices`: MergeElementsCommand's. */
+    mergeElements(keepId, otherIds, choices = {}) {
+        const cmd = this.model.mergeCommand(keepId, otherIds, choices);
+        this._executeCommand(cmd);
+        return cmd;
+    }
+
+    /** The checks use this editor's ArchiMate version. */
+    checkerOptions() {
+        return { version: this.version };
+    }
+
+    /** An element is shown by selecting its first occurrence on this view. */
+    revealFinding(finding) {
+        if (finding.kind !== 'element') return super.revealFinding(finding);
+        const instance = this.view.elementInstancesFor(finding.ids[0])[0];
+        if (instance && this.templates.has(instance.id)) {
+            this.selectTemplate(instance.id);
+            this.render();
+        }
+    }
+
+    /**
+     * Bring the editor's templates and lines in line with the view, reusing
+     * the template or line of each instance still there.
+     */
+    syncFromView() {
+        const { view, model } = this;
+        const templates = new Map();
+        for (const inst of view.elementInstances.values()) {
+            if (!inst.shownIn(view) || !inst.resolve(model)) continue;
+            const existing = this.templates.get(inst.id);
+            templates.set(inst.id, existing?.instance === inst ? existing
+                : new ArchimateElementTemplate(inst, model, { nodeOptions: this.nodeOptions }));
+        }
+        for (const t of templates.values()) {
+            t.nodeOptions = this.nodeOptions;
+            // Asked afresh at every sync: a host's status is live, not part of the model.
+            t.status = this.elementStatus ? this.elementStatus(t.instance.resolve(model)) ?? null : null;
+        }
+        // The view's groups (Archi groups: model folders with bounds on this view).
+        for (const folder of view.placedFolders) {
+            const existing = this.templates.get(folder.id);
+            templates.set(folder.id, existing instanceof ViewGroupTemplate && existing.view === view ? existing : new ViewGroupTemplate(folder.id, view));
+        }
+        const edges = new Map();
+        // A line a nesting stands for, to a box nested in its source (at any depth), is not drawn unless asked (Archi's way).
+        const nestedOut = (edge) => !this.nodeOptions.showNestedLines
+            && hiddenByNesting(view, edge.relationship, templates.get(edge.sourceId).instance, templates.get(edge.targetId).instance);
+        for (const inst of view.relationshipInstances.values()) {
+            const existing = this.edges.get(inst.id);
+            const edge = existing?.instance === inst ? existing : new ArchimateEdge(inst, view);
+            if (edge.relationship && templates.has(edge.sourceId) && templates.has(edge.targetId) && !nestedOut(edge)) edges.set(inst.id, edge);
+        }
+        // Plain lines (a canvas's connections, a line from a note).
+        for (const line of view.viewConnections.values()) {
+            const existing = this.edges.get(line.id);
+            const edge = existing?.line === line ? existing : new ViewLineEdge(line);
+            if (line.visible !== false && templates.has(edge.sourceId) && templates.has(edge.targetId)) edges.set(line.id, edge);
+        }
+        // Derived relationships (⚙ Settings → Show derived): drawn between elements both on the view.
+        if (this.nodeOptions.showDerived) {
+            const shown = (elementId) => view.elementInstancesFor(elementId).find(inst => templates.has(inst.id))?.id;
+            for (const derived of DerivedRelationships.compute(model, { maxHops: 2 }).derived) {
+                const from = shown(derived.source), to = shown(derived.target);
+                if (from && to) edges.set(derived.id, new DerivedEdge(derived, from, to));
+            }
+        }
+        this.templates.clear();
+        for (const [id, t] of templates) this.templates.set(id, t);
+        this.edges.clear();
+        for (const [id, e] of edges) this.edges.set(id, e);
+    }
+
+    render() {
+        if (this.disposed) return;
+        this.syncFromView();
+        super.render();
+    }
+
+    /** ⚙ Settings: the notation (version, distinct shapes), then the base editor's grid and line styles. */
+    settingsMenuItems() {
+        const set = (patch) => {
+            this.nodeOptions = { ...this.nodeOptions, ...patch };
+            if (this.onNodeOptionsChange) this.onNodeOptionsChange(this.nodeOptions);
+            else this.render();
+        };
+        const distinct = !!this.nodeOptions.useDistinctShapes;
+        const viewpoint = this.nodeOptions.viewpoint ?? 'All';
+        const mode = this.nodeOptions.viewpointMode ?? 'fade';
+        return [
+            {
+                label: `Version: ArchiMate ${this.version}`,
+                items: ['4', '3.2'].map(v => ({ label: `ArchiMate ${v}`, checked: v === this.version, action: () => set({ archimateVersion: v }) })),
+            },
+            { label: `Distinct shapes: ${distinct ? 'on' : 'off'}`, action: () => set({ useDistinctShapes: !distinct }) },
+            { label: `Show derived: ${this.nodeOptions.showDerived ? 'on' : 'off'}`, action: () => set({ showDerived: !this.nodeOptions.showDerived }) },
+            { label: `Lines to nested boxes: ${this.nodeOptions.showNestedLines ? 'shown' : 'hidden'}`, action: () => set({ showNestedLines: !this.nodeOptions.showNestedLines }) },
+            {
+                label: `Viewpoint: ${viewpoint}`,
+                items: ArchimateViewpoints.all(this.customViewpoints).map(vp => ({ label: vp.name, checked: vp.name === viewpoint, action: () => set({ viewpoint: vp.name }) })),
+            },
+            {
+                label: `Outside the viewpoint: ${mode === 'hide' ? 'hidden' : 'faded'}`,
+                items: [['fade', 'Faded'], ['hide', 'Hidden']].map(([m, text]) => ({ label: text, checked: m === mode, action: () => set({ viewpointMode: m }) })),
+            },
+            { separator: true },
+            { separator: true },
+            { label: 'Specializations…', action: () => this.editSpecializations() },
+            { label: 'Viewpoints…', action: () => this.editViewpoints() },
+            ...super.settingsMenuItems(),
+            ...(this.settingsManager ? [{ separator: true }, { label: 'Model settings…', action: () => showGlobalSettingsDialog(this.document ?? globalThis.document, this.settingsManager, 'default') }] : []),
+        ];
+    }
+
+    /**
+     * What the ArchiMate rules say against a relationship's line, or null
+     * (ArchimateValidator, for this ArchiMate version). Off when the view's
+     * `invalidRelationships` setting is 'off'; with 'tooltip' it is the tooltip, not drawn red.
+     */
+    edgeWarning(edge) {
+        const relationship = edge.relationship;
+        const mode = this.viewSettings().invalidRelationships ?? 'highlight';
+        if (!relationship || mode === 'off') return null;
+        const from = this.model.getElement(relationship.source), to = this.model.getElement(relationship.target);
+        if (!from || !to) return null;
+        const result = ArchimateValidator.validateRelationship(from, to, relationship.kind, this.version);
+        return result.valid ? null : { message: result.message, highlight: mode === 'highlight' };
+    }
+
+    /** Edit the specialization catalog; elements given one redraw with it. */
+    editSpecializations() {
+        return specializationCatalogDialog({ version: this.version, document: this.document ?? globalThis.document, onChange: () => this._notationChanged() }).open();
+    }
+
+    /** Edit the user's own viewpoints; they are offered (and applied) from then on. */
+    editViewpoints() {
+        return CustomViewpoints.dialog({
+            version: this.version, document: this.document ?? globalThis.document,
+            onChange: (viewpoints) => { this.customViewpoints = viewpoints; this._viewpointRule = null; this._notationChanged(); },
+        }).open();
+    }
+
+    /** The notation's catalogs changed: the host redraws (its palette too), or this editor does. @private */
+    _notationChanged() {
+        if (this.onNodeOptionsChange) this.onNodeOptionsChange(this.nodeOptions);
+        else this.render();
+    }
+
+    /**
+     * The base editor's rules (a highlight), then the active filter's result
+     * (ElementFilterRule) and the viewpoint (ViewpointRule, from the notation options).
+     */
+    emphasisRules() {
+        const { viewpoint, viewpointMode } = this.nodeOptions;
+        const key = `${viewpoint}|${viewpointMode}|${this.version}`;
+        if (this._viewpointRule?.key !== key) {
+            this._viewpointRule = { key, rule: new ViewpointRule({ viewpoint, mode: viewpointMode, version: this.version, customViewpoints: this.customViewpoints }) };
+        }
+        return [...super.emphasisRules(), ...(this.elementFilter ? [this.elementFilter] : []), ...(this._viewpointRule.rule.viewpoint ? [this._viewpointRule.rule] : [])];
+    }
+
+    /** Dim every model element but these (a filter's result); null clears it. Redraws. */
+    setElementFilter(elementIds) {
+        this.elementFilter = elementIds ? new ElementFilterRule(elementIds) : null;
+        this.render();
+    }
+
+    /**
+     * The Element section of a shape's properties: the model element's own
+     * name, type, specialization, icon, documentation and typed properties (the same on every view;
+     * the dialog's Name above labels this occurrence only). None for a note,
+     * image or canvas box.
+     */
+    conceptFields(template) {
+        const element = this._elementOf(template.id);
+        if (!element) return [];
+        return [
+            { type: 'heading', label: 'Element (on every view)' },
+            ...elementPropertyFields(element, { version: this.version, document: this.document ?? globalThis.document }),
+        ];
+    }
+
+    /** The element's changes as one EditViewItemCommand (null when nothing changed). */
+    conceptCommand(template, values) {
+        const element = this._elementOf(template.id);
+        return element ? elementEditCommand(element, values, { instance: template.instance }) : null;
+    }
+
+    /**
+     * With several shapes selected, the Elements section: their type, their
+     * specialization when they share a type, and one property to set on all.
+     * Only when every selected shape is an element.
+     */
+    manyConceptFields(templates) {
+        const elements = this._elementsOf(templates);
+        return elements ? manyElementsFields(elements, { version: this.version }) : [];
+    }
+
+    /** The elements' changes as one step (null when nothing changed). */
+    manyConceptCommand(templates, values) {
+        const elements = this._elementsOf(templates);
+        const instances = new Map(templates.map(t => [this._elementOf(t.id), t.instance]));
+        const commands = elements ? manyElementsEditCommands(elements, values, { instanceOf: (e) => instances.get(e) }) : [];
+        return commands.length ? new CompositeCommand(`Edit ${commands.length} elements`, commands) : null;
+    }
+
+    /** The model elements the shapes show, each once; null unless every shape shows one. @private */
+    _elementsOf(templates) {
+        const elements = templates.map(t => this._elementOf(t.id));
+        return elements.every(Boolean) ? [...new Set(elements)] : null;
+    }
+
+    /**
+     * The Relationship section of a line's properties: its kind (among those
+     * the ArchiMate rules allow between its ends, and its own), documentation
+     * and typed properties. None for a plain line or a derived one.
+     */
+    edgeConceptFields(edge) {
+        const relationship = edge.relationship;
+        if (!relationship || edge.editable === false) return [];
+        const kinds = [...new Set([relationship.kind, ...this.allowedKinds(edge.sourceId, edge.targetId)].filter(Boolean))];
+        return [
+            { type: 'heading', label: 'Relationship (on every view)' },
+            { key: 'relationship.kind', label: 'Kind', type: 'select', value: relationship.kind, choices: kinds.map(k => [k, typeTitle(k)]) },
+            { key: 'relationship.documentation', label: 'Documentation', type: 'textarea', rows: 3, value: relationship.documentation ?? '' },
+            { type: 'heading', label: 'Properties' },
+            PropertyListEditor.field(relationship.properties, { key: 'relationship.properties', document: this.document ?? globalThis.document }),
+        ];
+    }
+
+    /** The relationship's changes as one EditViewItemCommand (null when nothing changed). */
+    edgeConceptCommand(edge, values) {
+        return edge.relationship ? conceptEditCommand(edge.relationship, values, { prefix: 'relationship', instance: edge.instance }) : null;
+    }
+
+    /** A new element of `type` at `point` (snapped), created in the model and shown here. One undo step. */
+    addElement(type, point) {
+        const name = typeTitle(type);
+        const id = GraphDiagram.generateNodeId(name, this.model.elements().map(e => e.id));
+        const at = this._snapToGrid(point);
+        const instance = new ElementInstance(id, at.x, at.y);
+        this._executeCommand(new AddToViewCommand(this.view, instance, { element: { id, name, type }, label: `Add ${name}` }));
+        return instance;
+    }
+
+    /**
+     * Show an element the model has at `point` (snapped), with its
+     * relationships to the elements already on the view (ShowElementCommand).
+     * One undo step. Null for an element the model lacks.
+     */
+    showElement(elementId, point) {
+        if (!this.model.getElement(elementId)) return null;
+        const at = this._snapToGrid(point);
+        const instance = new ElementInstance(elementId, at.x, at.y);
+        this._executeCommand(new ShowElementCommand(this.view, instance, { label: `Show ${this.model.getElement(elementId).name || elementId}` }));
+        this.selectTemplate(instance.id);
+        return instance;
+    }
+
+    /**
+     * A picture as an image box on this view at `point` (snapped), one undo
+     * step, selected. Null when this kind of view has no image box.
+     * @param {string} dataURL - The picture
+     */
+    addImage(dataURL, point) {
+        if (!this.view.constructor.BOX_KINDS?.some(k => k.key === 'image')) return null;
+        const box = this.view.addBox('image', this._snapToGrid(point), { iconUrl: dataURL });
+        this.render();
+        this.selectTemplate(box.id);
+        return box;
+    }
+
+    /**
+     * Add a box of a canvas palette kind ('block', 'sticky', 'image') at `point`
+     * (snapped), as the canvas menu would. One undo step.
+     */
+    addCanvasBox(kindKey, point) {
+        const item = canvasBoxMenuItems(this.view, this._snapToGrid(point), {
+            onAdded: (box) => { this.render(); this.selectTemplate(box.id); },
+        }).find((_, i) => this.view.constructor.BOX_KINDS[i].key === kindKey);
+        return item?.action();
+    }
+
+    /** The relationship kinds the ArchiMate rules allow from one instance's element to another's (association always). */
+    allowedKinds(sourceId, targetId) {
+        const from = this._elementOf(sourceId), to = this._elementOf(targetId);
+        if (!from || !to) return [];
+        const kinds = ArchimateValidator.allowedKinds(from, to, this.version);
+        return kinds.includes('association') ? kinds : [...kinds, 'association'];
+    }
+
+    /**
+     * Connect two elements: the kind is asked for (`chooseKind`) among those
+     * allowed, or taken from KIND_PREFERENCE. One undo step once chosen.
+     * @returns {Command|null|Promise<Command|null>}
+     */
+    connect(sourceId, targetId) {
+        if (sourceId === targetId) return null;
+        // A box or note at either end: a plain line (the view's rule), one undo step.
+        if (!this.view.linesAreRelationships(sourceId, targetId)) {
+            if (!this.templates.has(sourceId) || !this.templates.has(targetId)) return null;
+            const line = this.view.connect(sourceId, targetId);
+            this.render();
+            return line;
+        }
+        const kinds = this.allowedKinds(sourceId, targetId);
+        if (!kinds.length) return null;
+        const run = (kind) => (kind && kinds.includes(kind) ? this._connectAs(sourceId, targetId, kind) : null);
+        if (!this.chooseKind) return run(KIND_PREFERENCE.find(k => kinds.includes(k)) ?? kinds[0]);
+        const chosen = this.chooseKind(kinds, this._elementOf(sourceId), this._elementOf(targetId));
+        return chosen && typeof chosen.then === 'function' ? chosen.then(run) : run(chosen);
+    }
+
+    /** @private */
+    _connectAs(sourceId, targetId, kind) {
+        const cmd = this.connectCommand(sourceId, targetId, kind);
+        if (cmd) this._executeCommand(cmd);
+        return cmd;
+    }
+
+    /** The model element an instance on this canvas shows (notes and images have none). @private */
+    /** A box of a model element links to the element's page in a report. */
+    reportRef(template) {
+        const element = this._elementOf(template.id);
+        return element ? { kind: 'element', id: element.id } : null;
+    }
+
+    _elementOf(instanceId) {
+        const inst = this.templates.get(instanceId)?.instance;
+        return inst ? this.model.getElement(inst.elementId) : undefined;
+    }
+
+    /** A new relationship of `kind` between two elements' instances, created in the model and shown here. */
+    connectCommand(sourceId, targetId, kind = KIND_PREFERENCE.find(k => this.allowedKinds(sourceId, targetId).includes(k))) {
+        const source = this.templates.get(sourceId)?.instance;
+        const target = this.templates.get(targetId)?.instance;
+        const from = this._elementOf(sourceId);
+        const to = this._elementOf(targetId);
+        // Notes and images are not model elements: they take no relationships.
+        if (!from || !to || !kind) return null;
+        const id = GraphDiagram.generateNodeId(`${from.id}-${kind}-${to.id}`, this.model.relationships().map(r => r.id));
+        const instance = new RelationshipInstance(id, null, source.id, target.id);
+        return new AddRelationshipToViewCommand(this.view, instance, {
+            relationship: { id, source: from.id, target: to.id, kind },
+            label: `Add ${kind}`,
+        });
+    }
+
+    /**
+     * Deleting takes a box off the view (its lines go with it, see the base's
+     * deleteTemplatesCommand); the model keeps its element. A group goes off the
+     * view and what it held stays; the model keeps its folder.
+     */
+    /** Copies are ArchiMate views' items: they paste into ArchiMate views (any model), not the template editor. */
+    static clipboardKind = 'archimate';
+
+    /**
+     * A copy of these boxes: the view's JSON of them (ArchimateView#toJSON),
+     * with the lines and relationships between them and the elements they show.
+     * Groups are not copied (they are model folders).
+     */
+    copyPayload(ids) {
+        const boxes = ids.filter(id => this.view.getElementInstance(id));
+        return boxes.length ? this.view.toJSON({ itemIds: boxes }) : null;
+    }
+
+    /** Paste: new boxes for the same elements (added to the model when it lacks them), one undo step. */
+    pasteCommand(payload, options) {
+        return this.view.pasteCommand(payload, options);
+    }
+
+    /** Deleting is off the view: the model keeps what it showed. */
+    deleteLabel(templateIds) {
+        return `${super.deleteLabel(templateIds)} from view`;
+    }
+
+    removeTemplateCommand(templateId) {
+        return this.templates.get(templateId) instanceof ViewGroupTemplate
+            ? new RemoveGroupFromViewCommand(this.view, templateId)
+            : new DeleteElementCommand(this.view, templateId);
+    }
+
+    /**
+     * What moves with a shape: for a group, the elements drawn in it (its folder's),
+     * the notes and pictures Archi drew in it, and the groups inside it; for a box (a canvas block), the boxes Archi drew inside it.
+     */
+    containedIn(templateId) {
+        const template = this.templates.get(templateId);
+        const view = this.view;
+        if (template instanceof ViewGroupTemplate) {
+            const inner = [];
+            for (const t of this.templates.values()) {
+                if (t instanceof ViewGroupTemplate) {
+                    if (t.id !== templateId && view.placedFolders.find(f => f.id === t.id)?.parentId === templateId) inner.push(t.id);
+                } else if (t.instance?.archi?.parent === templateId
+                    || (t.instance?.elementId && view.placedFolderOf(t.instance.elementId) === templateId)) {
+                    inner.push(t.id);
+                }
+            }
+            return inner;
+        }
+        const visualId = template?.instance?.visualId;
+        if (!visualId) return [];
+        return [...this.templates.values()].filter(t => t.instance?.nestedIn === visualId).map(t => t.id);
+    }
+
+    // ===== Nesting =====
+
+    /** The box this one is drawn inside: an element's box, or a canvas block (a group holds by folder, not here). */
+    parentOf(templateId) {
+        const visualId = this.templates.get(templateId)?.instance?.nestedIn;
+        if (!visualId) return null;
+        const parent = [...this.templates.values()].find(t => t.instance?.visualId === visualId);
+        return parent?.id ?? null;
+    }
+
+    /**
+     * An element's parts on this view: the elements it is composed of or
+     * aggregates (its composition and aggregation relationships' targets),
+     * each by its first box here.
+     */
+    partsOf(templateId) {
+        const element = this._elementOf(templateId);
+        if (!element) return [];
+        const parts = this.model.relationships()
+            .filter(r => r.source === element.id && r.target !== element.id && (r.kind === 'composition' || r.kind === 'aggregation'))
+            .map(r => this.view.elementInstancesFor(r.target)[0]?.id)
+            .filter(id => id && this.templates.has(id) && this.canHold(templateId, id));
+        return [...new Set(parts)];
+    }
+
+    /** The "by kind" layout puts an element's box in its layer's row (notes and images in their own). */
+    layoutCategory(template) {
+        const element = this._elementOf(template.id);
+        return element ? treeLayerOf(element) : 'other';
+    }
+
+    /** An element's box holds any box but a group; on a canvas, a block holds boxes. */
+    canHold(parentId, childId) {
+        const parent = this.templates.get(parentId), child = this.templates.get(childId);
+        if (!parent?.instance || !child?.instance || parent instanceof ViewGroupTemplate || child instanceof ViewGroupTemplate) return false;
+        return !!this._elementOf(parentId) || parent.instance.content?.archiVisualType === 'canvas-model-block';
+    }
+
+    /** An element dropped on another nests there when a relationship a nesting stands for (NESTING_KINDS) is allowed between them. */
+    nestsOnDrop(parentId, childId) {
+        if (!this._elementOf(parentId) || !this._elementOf(childId)) return false;
+        return this.allowedKinds(parentId, childId).some(kind => NESTING_KINDS.includes(kind));
+    }
+
+    nestCommand(childId, parentId) {
+        const child = this.templates.get(childId)?.instance;
+        if (!child) return null;
+        return new NestInstanceCommand(child, parentId ? this.templates.get(parentId)?.instance ?? null : null);
+    }
+
+    /** After nesting an element in another: offer the relationship the nesting stands for (nestingKinds). */
+    nested(changes) {
+        let chain = Promise.resolve();
+        for (const { childId, parentId } of changes) {
+            chain = chain.then(() => this.offerNestingRelationship(parentId, childId));   // taken out: nothing to offer
+        }
+        return chain;
+    }
+
+    /**
+     * The kinds a nesting can stand for, from parent to child, as Archi offers
+     * them: those of NESTING_KINDS the rules allow. None when the two already
+     * have such a relationship.
+     */
+    nestingKinds(parentId, childId) {
+        const from = this._elementOf(parentId), to = this._elementOf(childId);
+        if (!from || !to || from === to) return [];
+        if (nestingRelationships(this.model, from.id, to.id).length) return [];
+        const allowed = this.allowedKinds(parentId, childId);
+        return NESTING_KINDS.filter(k => allowed.includes(k));
+    }
+
+    /**
+     * Ask which relationship a nesting stands for (`chooseKind`, with the
+     * reason 'nesting'; none chosen adds none) and add it to the model, drawn
+     * on no view: the nesting shows it. One undo step. Without `chooseKind`, nothing is added.
+     * @returns {Promise<Command|null>}
+     */
+    async offerNestingRelationship(parentId, childId) {
+        const kinds = this.nestingKinds(parentId, childId);
+        if (!kinds.length || !this.chooseKind) return null;
+        const from = this._elementOf(parentId), to = this._elementOf(childId);
+        const kind = await this.chooseKind(kinds, from, to, { reason: 'nesting' });
+        if (!kind || !kinds.includes(kind)) return null;
+        const cmd = this.nestingRelationshipCommand(parentId, childId, kind);
+        this._executeCommand(cmd);
+        return cmd;
+    }
+
+    /** The relationship of `kind` a nesting stands for, from parent to child, in the model only. */
+    nestingRelationshipCommand(parentId, childId, kind) {
+        const from = this._elementOf(parentId), to = this._elementOf(childId);
+        const id = GraphDiagram.generateNodeId(`${from.id}-${kind}-${to.id}`, this.model.relationships().map(r => r.id));
+        return new AddRelationshipCommand(this.model, { id, source: from.id, target: to.id, kind }, `Add ${kind} (nested)`);
+    }
+
+    /** Deleting a line takes it off the view: a plain line goes; a relationship stays in the model. */
+    deleteEdgeCommand(edgeId) {
+        return this.view.viewConnections.has(edgeId)
+            ? new RemoveLineCommand(this.view, edgeId)
+            : new RemoveRelationshipFromViewCommand(this.view, edgeId);
+    }
+}