@peter.prib/renderengine 0.2.3 → 0.2.4

package/src/workspace/parts/ArchimateCanvasPart.js

@@ -1,345 +1,345 @@
-import { render } from '../dom.js';
-import { EditorShell } from '../EditorShell.js';
-import { EditorPart } from './EditorPart.js';
-import { ArchimateModel } from '../../charting/diagrams/ArchimateModel.js';
-import { ArchimateCanvasEditor, ArchimatePalette, typeTitle } from '../../charting/archimate/index.js';
-import { ArchimateNotation } from '../../archimate.js';
-import { MenuBar } from '../../charting/MenuBar.js';
-import { ToolbarText } from '../../charting/toolbar/index.js';
-import { ViewTabStrip } from '../../charting/ViewTabStrip.js';
-import { FormDialog } from '../../charting/FormDialog.js';
-import { CsvImportDialog } from '../../charting/archimate/CsvImportDialog.js';
-import { pickFile } from '../../charting/toolbar/pickFile.js';
-import { SettingsManager } from '../../charting/SettingsManager.js';
-import { SettingsViewPropertiesDialog } from '../../charting/SettingsViewPropertiesDialog.js';
-import { CanvasTemplateLibrary } from '../../charting/canvas/CanvasTemplateLibrary.js';
-import { CanvasTemplateMenu } from '../../charting/canvas/CanvasTemplateMenu.js';
-import { CanvasPalette } from '../../charting/canvas/CanvasPalette.js';
-import { ARCHIMATE_FILE_FORMATS } from '../../charting/archimate/archimateFileFormats.js';
-import { ModelTree } from '../../charting/modelTree/ModelTree.js';
-import { buildModelTreePanel } from '../../charting/modelTree/ModelTreePanel.js';
-import { buildAnalysisPanel } from '../../charting/modelTree/AnalysisPanel.js';
-import { ArchimateSpecializationRegistry } from '../../archimateSpecializations.js';
-import { HintPanel } from '../../charting/HintPanel.js';
-import { elementMenuItems } from '../../charting/archimate/elementMenuItems.js';
-import { editElementProperties } from '../../charting/archimate/elementProperties.js';
-import { CustomViewpoints } from '../../charting/archimate/CustomViewpoints.js';
-
-const SVG_NS = 'http://www.w3.org/2000/svg';
-
-/**
- * ArchimateCanvasPart — the ArchiMate modeller on the diagram editor's own
- * canvas (phase 4 testbed): the model tree on the left, one tab per view and
- * an ArchimateCanvasEditor over the current view, and a palette of element
- * types grouped by layer on the right. Drop or click a palette type to add an
- * element, or drag one from the tree to show it (with its relationships to
- * what is shown); drag between two elements to add a relationship (its kind
- * picked from those the rules allow); every edit is a step on that view's own
- * undo history. The File menu exports and imports CSV, .archimate and the
- * Exchange Format.
- *
- * Spec (JSON): `elements`, `relationships`, `views`, `name` (as ArchimateModel
- * takes them), `archimateVersion` ('4' or '3.2'), `distinctShapes` (draw each
- * element in its notation shape rather than a box), `viewpoint` (a viewpoint name) and
- * `viewpointMode` ('fade' or 'hide': elements outside it), `analysis` (true adds the
- * analysis of the selected element, under the palette).
- */
-export class ArchimateCanvasPart extends EditorPart {
-    static type = 'archimate-canvas';
-    static viewNoun = 'view';
-
-    constructor(spec = {}) {
-        super(spec);
-        this.version = spec.archimateVersion ?? '4';
-        this.distinctShapes = !!spec.distinctShapes;
-        this.viewpoint = spec.viewpoint ?? 'All';
-        this.viewpointMode = spec.viewpointMode ?? 'fade';
-        this.showDerived = !!spec.showDerived;
-        this.settings = new SettingsManager();
-        // A settings change (Model settings…, a view's properties) redraws the canvas.
-        this._unsubscribeSettings = this.settings.onSettingsChange(() => { if (this.mounted) this.editor?.render(); });
-        // The user's specializations (or the defaults), as the main editor offers them; one already loaded is kept.
-        if (!ArchimateSpecializationRegistry.list().length) ArchimateSpecializationRegistry.loadFrom();
-        this._follow(this.model);
-    }
-
-    /**
-     * Re-render on every change to `model`'s views (the editor is rebuilt with the canvas on each
-     * render), and redraw the tree after every edit (an element renamed, an undo).
-     * @private
-     */
-    _follow(model) {
-        this._unsubscribe?.();
-        this._unsubscribeTree?.();
-        this._unsubscribe = model.onChange(() => { if (this.mounted) this.render(); });
-        this._unsubscribeTree = model.onEdit?.(() => this._treePanel?.refresh?.()) ?? null;
-    }
-
-    fileFormats() {
-        return ARCHIMATE_FILE_FORMATS;
-    }
-
-    /** A new file is an Archi file (.archimate). */
-    saveFormat() {
-        return ARCHIMATE_FILE_FORMATS.find(f => f.featureName === 'Archimate');
-    }
-
-    /** The file label in the toolbar (and a ModelsPart's tab) follows the saved state. */
-    onFileState() {
-        super.onFileState();
-        this.menuBar?.refresh?.();
-    }
-
-    /** New view…, then New canvas… and New canvas from template. */
-    newItems() {
-        return [...super.newItems(), ...this.templateMenu.newCanvasItems()];
-    }
-
-    /** File > Templates: the open canvas saved as a model template or into the library. */
-    ownFileItems() {
-        const saveAs = this.model.currentView ? this.templateMenu.saveAsTemplateItems(this.model.currentViewId) : [];
-        return EditorPart.menuGroup('Templates', saveAs);
-    }
-
-    /** File > Import: an Archi canvas template, and a spreadsheet's rows (CSV with mapping). */
-    ownImportItems() {
-        const importTemplate = this.templateMenu.importItem();
-        return [{ separator: true }, ...(importTemplate ? [{ ...importTemplate, label: 'Archi template…' }] : []), { label: 'CSV with mapping…', action: () => this.importCsvMapped() }];
-    }
-
-    /** Import CSV with mapping…: a spreadsheet's rows into this model (CsvImportDialog), the new elements on the open view. */
-    async importCsvMapped() {
-        const file = await pickFile('.csv,.txt,.tsv', this.document);
-        if (!file) return null;
-        return new CsvImportDialog({ model: this.model, view: this.model.currentView, version: this.version, document: this.document, onDone: () => this.render() }).open(await file.text());
-    }
-
-    /** An imported model: follow it, with a fresh tree, and give it a view if it has none. */
-    modelReplaced(model) {
-        if (!model.views().length) model.createView();
-        this._follow(model);
-    }
-
-    /** The model tree over the current model (kept across renders, so its mode and selection stay). */
-    get modelTree() {
-        if (this.tree?.model !== this.model) {
-            this.tree = new ModelTree(this.model, { mode: 'byLayer' });
-            // A view chosen in the tree opens it; an element chosen there is selected on the canvas.
-            this.tree.onSelectionChange((data) => {
-                if (data.kind === 'view' && data.view.id !== this.model.currentViewId) this.model.switchTo(data.view.id);
-                if (data.kind === 'element') { this.selectElement(data.id); this._showAnalysis?.(data.id); }
-            });
-        }
-        return this.tree;
-    }
-
-    createModel(spec) {
-        return new ArchimateModel({
-            name: spec.name ?? '',
-            elements: spec.elements ?? [],
-            relationships: spec.relationships ?? [],
-            views: spec.views?.length ? spec.views : [{ id: 'view-1', name: 'View 1', elementIds: [] }],
-        });
-    }
-
-    /** A view's properties: name, documentation and its settings (routing, grid, background, ...). */
-    showViewProperties(view) {
-        return new SettingsViewPropertiesDialog({ model: this.model, view, settingsManager: this.settings, document: this.document }).open();
-    }
-
-    /**
-     * Ask which relationship a new connection is, among the kinds the rules
-     * allow between the two elements. Resolves to the kind, or null if cancelled.
-     */
-    chooseKind(kinds, from, to, { reason = 'connect' } = {}) {
-        const nesting = reason === 'nesting';
-        return new Promise((resolve) => {
-            new FormDialog({
-                title: nesting ? `${to.name} nested in ${from.name}` : `New relationship: ${from.name} → ${to.name}`,
-                description: nesting
-                    ? `Add the relationship the nesting stands for (${typeTitle(from.type ?? '?')} → ${typeTitle(to.type ?? '?')}), in the model; the nesting shows it, so no line is drawn.`
-                    : `${typeTitle(from.type ?? '?')} → ${typeTitle(to.type ?? '?')}: ${kinds.length} allowed kind${kinds.length === 1 ? '' : 's'}`,
-                fields: [{
-                    key: 'kind', label: 'Kind', type: 'select', value: kinds[0],
-                    choices: kinds.map(k => [k, ArchimateNotation.relationshipType(k)?.description ? `${typeTitle(k)}: ${ArchimateNotation.relationshipType(k).description}` : typeTitle(k)]),
-                }],
-                submitLabel: 'Add',
-                ...(nesting && { cancelLabel: 'No relationship' }),
-                idPrefix: 'archimate-kind-',
-                document: this.document,
-                onApply: ({ kind }) => resolve(kind),
-                onClose: (applied) => { if (!applied) resolve(null); },
-            }).open();
-        });
-    }
-
-    render() {
-        const model = this.model;
-        const view = model.currentView;
-        const doc = this.document;
-        const canvasId = `archimate-canvas-${this.id}`;
-
-        const canvas = doc.createElementNS(SVG_NS, 'svg');
-        canvas.id = canvasId;
-        canvas.setAttribute('viewBox', '0 0 1000 700');
-        canvas.style.cssText = 'flex: 1; width: 100%; height: 100%; display: block; background: transparent; box-sizing: border-box;';
-        const elements = doc.createElementNS(SVG_NS, 'g');
-        elements.id = 'elements';
-        canvas.appendChild(elements);
-
-        const tabs = new ViewTabStrip({
-            document: doc,
-            onSelect: (id) => model.switchTo(id),
-            menuItems: (id) => this.viewMenu.items(id),
-        }).render(model.views(), model.currentViewId);
-
-        const { toolbar, side, main, aside } = new EditorShell({ document: doc, sideWidth: '260px', aside: true, asideWidth: this.spec.analysis ? '260px' : '210px' }).mount(this.container);
-        Object.assign(aside.style, { padding: '6px', fontSize: '12px' });
-        // With `analysis`, the palette shares the right with the analysis of the selected element.
-        let paletteHost = aside, analysisHost = null;
-        if (this.spec.analysis) {
-            Object.assign(aside.style, { display: 'flex', flexDirection: 'column', overflow: 'hidden' });
-            paletteHost = aside.appendChild(doc.createElement('div'));
-            Object.assign(paletteHost.style, { flex: '1 1 55%', overflowY: 'auto', minHeight: '0' });
-            analysisHost = aside.appendChild(doc.createElement('div'));
-            analysisHost.setAttribute('data-analysis', '');
-            Object.assign(analysisHost.style, { flex: '1 1 45%', overflowY: 'auto', minHeight: '0', borderTop: '1px solid #ddd' });
-        }
-        side.appendChild(this._treePanel = buildModelTreePanel(doc, {
-            modelTree: this.modelTree,
-            treeDivId: `archimate-canvas-tree-${this.id}`,
-            viewMenu: this.viewMenu,
-            templateMenu: this.templateMenu,
-            elementMenu: (element) => this.elementMenu(element),
-            search: true,
-            version: this.version,
-        }));
-        main.style.flexDirection = 'column';
-        render(main, [tabs, { style: { flex: '1', display: 'flex', flexDirection: 'column', minHeight: '0' }, children: [canvas] }], doc);
-
-        const customViewpoints = CustomViewpoints.load();
-        const previous = this.editor;
-        previous?.dispose();
-        this.editor = new ArchimateCanvasEditor({
-            diagramContainerId: canvasId,
-            view,
-            model,
-            nodeOptions: { archimateVersion: this.version, useDistinctShapes: this.distinctShapes, viewpoint: this.viewpoint, viewpointMode: this.viewpointMode, showDerived: this.showDerived },
-            chooseKind: (kinds, from, to, options) => this.chooseKind(kinds, from, to, options),
-            // The view's settings: background, title, watermark, how invalid relationships show.
-            viewSettings: () => this.settings.getEffectiveSettings(this.model.currentView, 'default'),
-            settingsManager: this.settings,
-            // The user's own viewpoints, after the standard ones.
-            customViewpoints,
-            // Canvas templates: placed on a canvas, saved from its shapes (the browser's library).
-            templateMenu: this.templateMenu,
-            // Version and distinct shapes (⚙ Settings) change the palette too.
-            onNodeOptionsChange: ({ archimateVersion, useDistinctShapes, viewpoint, viewpointMode, showDerived }) => {
-                this.showDerived = !!showDerived;
-                this.version = archimateVersion;
-                this.distinctShapes = !!useDistinctShapes;
-                this.viewpoint = viewpoint;
-                this.viewpointMode = viewpointMode;
-                this.render();
-            },
-        });
-        if (previous) {
-            this.editor.showGrid = previous.showGrid;
-            this.editor.gridSize = previous.gridSize;
-        }
-
-        // A canvas's palette is Archi's canvas palette; another view's, ArchiMate's element types.
-        const isCanvas = view.constructor.kind === 'canvas';
-        const Palette = isCanvas ? CanvasPalette : ArchimatePalette;
-        new Palette({
-            version: this.version,
-            viewpoint: this.viewpoint,
-            customViewpoints,
-            document: doc,
-            // A click adds the type (or box) in the middle of the visible canvas.
-            onPick: (key) => {
-                const r = canvas.getBoundingClientRect();
-                const at = this.editor._clientToDiagram(r.left + r.width / 2, r.top + r.height / 2) ?? { x: 400, y: 300 };
-                if (isCanvas) this.editor.addCanvasBox(key, at);
-                else this.editor.addElement(key, at);
-            },
-        }).render(paletteHost);
-
-        // The tree follows the canvas's selection; a canvas shows its hint, or the selected box's.
-        const hints = (this.hintPanel ??= new HintPanel({ document: doc }));
-        const showHint = (templateId) => hints.mount(canvas.parentElement).show(view.constructor.kind === 'canvas' ? (templateId ? view.hintFor(templateId) : view.hint) : null);
-        const showAnalysis = this._showAnalysis = (elementId) => {
-            if (!analysisHost) return;
-            analysisHost.replaceChildren(buildAnalysisPanel(doc, {
-                model, elementId: elementId && model.getElement(elementId) ? elementId : null,
-                onSelectItem: (info) => this.modelTree.select(info.id, info.kind),
-            }));
-        };
-        this.editor.onSelectionChange(({ templateId }) => {
-            const elementId = templateId && this.editor.templates.get(templateId)?.instance?.elementId;
-            if (elementId && this.modelTree.getSelectedId() !== elementId && this.model.getElement(elementId)) this.modelTree.select(elementId, 'element');
-            showHint(templateId);
-            showAnalysis(elementId);
-        });
-        showHint(null);
-        showAnalysis(this.modelTree.getSelectedKind() === 'element' ? this.modelTree.getSelectedId() : null);
-        // The tree's filters dim what they leave out on the canvas too.
-        this._unsubscribeFilter?.();
-        const dim = () => this.editor?.setElementFilter(this.modelTree.matchingElementIds());
-        this._unsubscribeFilter = this.modelTree.onFilterChange(dim);
-        if (this.modelTree.filtering) dim();
-
-        this.menuBar?.dispose();
-        this.menuBar = new MenuBar({
-            container: toolbar,
-            editor: this.editor,
-            items: [this.fileMenu(), this.editMenu(), ...this.editor.menuBarItems(), new ToolbarText(() => this.fileLabel, { marginLeft: 'auto', color: '#555', fontSize: '12px' })],
-        }).render();
-        this.editor.render();
-    }
-
-    /**
-     * A model element's menu in the tree (elementMenuItems): its properties,
-     * the views it is on, adding it to this one, a view generated for it.
-     */
-    elementMenu(element) {
-        const model = this.model;
-        return elementMenuItems(element, {
-            model, view: model.currentView,
-            editProperties: (el) => editElementProperties(el, {
-                history: model.currentView?.history, version: this.version, document: this.document,
-                onSaved: () => this.render(),
-            }),
-            showIn: (view, instanceId) => {
-                if (view.id !== model.currentViewId) model.switchTo(view.id);   // the part redraws for the new view
-                this.editor?.selectTemplate(instanceId);
-            },
-            addToView: (el) => this.editor?.showElement(el.id, this.editor.visibleCentre()),
-        });
-    }
-
-    /** Select the first box of a model element on the current view (nothing if it is not shown). */
-    selectElement(elementId) {
-        const editor = this.editor;
-        if (!editor) return;
-        const box = [...editor.templates.values()].find(t => t.instance?.elementId === elementId);
-        if (box && editor.selectedTemplateId !== box.id) editor.selectTemplate(box.id);
-    }
-
-    /** Canvas templates over the current model: placed on a canvas, saved from its shapes (the browser's library). */
-    get templateMenu() {
-        if (this._templateMenu?.model !== this.model) {
-            this._templateMenu = new CanvasTemplateMenu(this.model, { library: (this.templateLibrary ??= new CanvasTemplateLibrary()), document: () => this.document });
-        }
-        return this._templateMenu;
-    }
-
-    dispose() {
-        this.menuBar?.dispose();
-        this._unsubscribeSettings?.();
-        this._unsubscribeFilter?.();
-        this._unsubscribe();
-        this._unsubscribeTree?.();
-        super.dispose();
-    }
-}
+import { render } from '../dom.js';
+import { EditorShell } from '../EditorShell.js';
+import { EditorPart } from './EditorPart.js';
+import { ArchimateModel } from '../../charting/diagrams/ArchimateModel.js';
+import { ArchimateCanvasEditor, ArchimatePalette, typeTitle } from '../../charting/archimate/index.js';
+import { ArchimateNotation } from '../../archimate.js';
+import { MenuBar } from '../../charting/MenuBar.js';
+import { ToolbarText } from '../../charting/toolbar/index.js';
+import { ViewTabStrip } from '../../charting/ViewTabStrip.js';
+import { FormDialog } from '../../charting/FormDialog.js';
+import { CsvImportDialog } from '../../charting/archimate/CsvImportDialog.js';
+import { pickFile } from '../../charting/toolbar/pickFile.js';
+import { SettingsManager } from '../../charting/SettingsManager.js';
+import { SettingsViewPropertiesDialog } from '../../charting/SettingsViewPropertiesDialog.js';
+import { CanvasTemplateLibrary } from '../../charting/canvas/CanvasTemplateLibrary.js';
+import { CanvasTemplateMenu } from '../../charting/canvas/CanvasTemplateMenu.js';
+import { CanvasPalette } from '../../charting/canvas/CanvasPalette.js';
+import { ARCHIMATE_FILE_FORMATS } from '../../charting/archimate/archimateFileFormats.js';
+import { ModelTree } from '../../charting/modelTree/ModelTree.js';
+import { buildModelTreePanel } from '../../charting/modelTree/ModelTreePanel.js';
+import { buildAnalysisPanel } from '../../charting/modelTree/AnalysisPanel.js';
+import { ArchimateSpecializationRegistry } from '../../archimateSpecializations.js';
+import { HintPanel } from '../../charting/HintPanel.js';
+import { elementMenuItems } from '../../charting/archimate/elementMenuItems.js';
+import { editElementProperties } from '../../charting/archimate/elementProperties.js';
+import { CustomViewpoints } from '../../charting/archimate/CustomViewpoints.js';
+
+const SVG_NS = 'http://www.w3.org/2000/svg';
+
+/**
+ * ArchimateCanvasPart — the ArchiMate modeller on the diagram editor's own
+ * canvas (phase 4 testbed): the model tree on the left, one tab per view and
+ * an ArchimateCanvasEditor over the current view, and a palette of element
+ * types grouped by layer on the right. Drop or click a palette type to add an
+ * element, or drag one from the tree to show it (with its relationships to
+ * what is shown); drag between two elements to add a relationship (its kind
+ * picked from those the rules allow); every edit is a step on that view's own
+ * undo history. The File menu exports and imports CSV, .archimate and the
+ * Exchange Format.
+ *
+ * Spec (JSON): `elements`, `relationships`, `views`, `name` (as ArchimateModel
+ * takes them), `archimateVersion` ('4' or '3.2'), `distinctShapes` (draw each
+ * element in its notation shape rather than a box), `viewpoint` (a viewpoint name) and
+ * `viewpointMode` ('fade' or 'hide': elements outside it), `analysis` (true adds the
+ * analysis of the selected element, under the palette).
+ */
+export class ArchimateCanvasPart extends EditorPart {
+    static type = 'archimate-canvas';
+    static viewNoun = 'view';
+
+    constructor(spec = {}) {
+        super(spec);
+        this.version = spec.archimateVersion ?? '4';
+        this.distinctShapes = !!spec.distinctShapes;
+        this.viewpoint = spec.viewpoint ?? 'All';
+        this.viewpointMode = spec.viewpointMode ?? 'fade';
+        this.showDerived = !!spec.showDerived;
+        this.settings = new SettingsManager();
+        // A settings change (Model settings…, a view's properties) redraws the canvas.
+        this._unsubscribeSettings = this.settings.onSettingsChange(() => { if (this.mounted) this.editor?.render(); });
+        // The user's specializations (or the defaults), as the main editor offers them; one already loaded is kept.
+        if (!ArchimateSpecializationRegistry.list().length) ArchimateSpecializationRegistry.loadFrom();
+        this._follow(this.model);
+    }
+
+    /**
+     * Re-render on every change to `model`'s views (the editor is rebuilt with the canvas on each
+     * render), and redraw the tree after every edit (an element renamed, an undo).
+     * @private
+     */
+    _follow(model) {
+        this._unsubscribe?.();
+        this._unsubscribeTree?.();
+        this._unsubscribe = model.onChange(() => { if (this.mounted) this.render(); });
+        this._unsubscribeTree = model.onEdit?.(() => this._treePanel?.refresh?.()) ?? null;
+    }
+
+    fileFormats() {
+        return ARCHIMATE_FILE_FORMATS;
+    }
+
+    /** A new file is an Archi file (.archimate). */
+    saveFormat() {
+        return ARCHIMATE_FILE_FORMATS.find(f => f.featureName === 'Archimate');
+    }
+
+    /** The file label in the toolbar (and a ModelsPart's tab) follows the saved state. */
+    onFileState() {
+        super.onFileState();
+        this.menuBar?.refresh?.();
+    }
+
+    /** New view…, then New canvas… and New canvas from template. */
+    newItems() {
+        return [...super.newItems(), ...this.templateMenu.newCanvasItems()];
+    }
+
+    /** File > Templates: the open canvas saved as a model template or into the library. */
+    ownFileItems() {
+        const saveAs = this.model.currentView ? this.templateMenu.saveAsTemplateItems(this.model.currentViewId) : [];
+        return EditorPart.menuGroup('Templates', saveAs);
+    }
+
+    /** File > Import: an Archi canvas template, and a spreadsheet's rows (CSV with mapping). */
+    ownImportItems() {
+        const importTemplate = this.templateMenu.importItem();
+        return [{ separator: true }, ...(importTemplate ? [{ ...importTemplate, label: 'Archi template…' }] : []), { label: 'CSV with mapping…', action: () => this.importCsvMapped() }];
+    }
+
+    /** Import CSV with mapping…: a spreadsheet's rows into this model (CsvImportDialog), the new elements on the open view. */
+    async importCsvMapped() {
+        const file = await pickFile('.csv,.txt,.tsv', this.document);
+        if (!file) return null;
+        return new CsvImportDialog({ model: this.model, view: this.model.currentView, version: this.version, document: this.document, onDone: () => this.render() }).open(await file.text());
+    }
+
+    /** An imported model: follow it, with a fresh tree, and give it a view if it has none. */
+    modelReplaced(model) {
+        if (!model.views().length) model.createView();
+        this._follow(model);
+    }
+
+    /** The model tree over the current model (kept across renders, so its mode and selection stay). */
+    get modelTree() {
+        if (this.tree?.model !== this.model) {
+            this.tree = new ModelTree(this.model, { mode: 'byLayer' });
+            // A view chosen in the tree opens it; an element chosen there is selected on the canvas.
+            this.tree.onSelectionChange((data) => {
+                if (data.kind === 'view' && data.view.id !== this.model.currentViewId) this.model.switchTo(data.view.id);
+                if (data.kind === 'element') { this.selectElement(data.id); this._showAnalysis?.(data.id); }
+            });
+        }
+        return this.tree;
+    }
+
+    createModel(spec) {
+        return new ArchimateModel({
+            name: spec.name ?? '',
+            elements: spec.elements ?? [],
+            relationships: spec.relationships ?? [],
+            views: spec.views?.length ? spec.views : [{ id: 'view-1', name: 'View 1', elementIds: [] }],
+        });
+    }
+
+    /** A view's properties: name, documentation and its settings (routing, grid, background, ...). */
+    showViewProperties(view) {
+        return new SettingsViewPropertiesDialog({ model: this.model, view, settingsManager: this.settings, document: this.document }).open();
+    }
+
+    /**
+     * Ask which relationship a new connection is, among the kinds the rules
+     * allow between the two elements. Resolves to the kind, or null if cancelled.
+     */
+    chooseKind(kinds, from, to, { reason = 'connect' } = {}) {
+        const nesting = reason === 'nesting';
+        return new Promise((resolve) => {
+            new FormDialog({
+                title: nesting ? `${to.name} nested in ${from.name}` : `New relationship: ${from.name} → ${to.name}`,
+                description: nesting
+                    ? `Add the relationship the nesting stands for (${typeTitle(from.type ?? '?')} → ${typeTitle(to.type ?? '?')}), in the model; the nesting shows it, so no line is drawn.`
+                    : `${typeTitle(from.type ?? '?')} → ${typeTitle(to.type ?? '?')}: ${kinds.length} allowed kind${kinds.length === 1 ? '' : 's'}`,
+                fields: [{
+                    key: 'kind', label: 'Kind', type: 'select', value: kinds[0],
+                    choices: kinds.map(k => [k, ArchimateNotation.relationshipType(k)?.description ? `${typeTitle(k)}: ${ArchimateNotation.relationshipType(k).description}` : typeTitle(k)]),
+                }],
+                submitLabel: 'Add',
+                ...(nesting && { cancelLabel: 'No relationship' }),
+                idPrefix: 'archimate-kind-',
+                document: this.document,
+                onApply: ({ kind }) => resolve(kind),
+                onClose: (applied) => { if (!applied) resolve(null); },
+            }).open();
+        });
+    }
+
+    render() {
+        const model = this.model;
+        const view = model.currentView;
+        const doc = this.document;
+        const canvasId = `archimate-canvas-${this.id}`;
+
+        const canvas = doc.createElementNS(SVG_NS, 'svg');
+        canvas.id = canvasId;
+        canvas.setAttribute('viewBox', '0 0 1000 700');
+        canvas.style.cssText = 'flex: 1; width: 100%; height: 100%; display: block; background: transparent; box-sizing: border-box;';
+        const elements = doc.createElementNS(SVG_NS, 'g');
+        elements.id = 'elements';
+        canvas.appendChild(elements);
+
+        const tabs = new ViewTabStrip({
+            document: doc,
+            onSelect: (id) => model.switchTo(id),
+            menuItems: (id) => this.viewMenu.items(id),
+        }).render(model.views(), model.currentViewId);
+
+        const { toolbar, side, main, aside } = new EditorShell({ document: doc, sideWidth: '260px', aside: true, asideWidth: this.spec.analysis ? '260px' : '210px' }).mount(this.container);
+        Object.assign(aside.style, { padding: '6px', fontSize: '12px' });
+        // With `analysis`, the palette shares the right with the analysis of the selected element.
+        let paletteHost = aside, analysisHost = null;
+        if (this.spec.analysis) {
+            Object.assign(aside.style, { display: 'flex', flexDirection: 'column', overflow: 'hidden' });
+            paletteHost = aside.appendChild(doc.createElement('div'));
+            Object.assign(paletteHost.style, { flex: '1 1 55%', overflowY: 'auto', minHeight: '0' });
+            analysisHost = aside.appendChild(doc.createElement('div'));
+            analysisHost.setAttribute('data-analysis', '');
+            Object.assign(analysisHost.style, { flex: '1 1 45%', overflowY: 'auto', minHeight: '0', borderTop: '1px solid #ddd' });
+        }
+        side.appendChild(this._treePanel = buildModelTreePanel(doc, {
+            modelTree: this.modelTree,
+            treeDivId: `archimate-canvas-tree-${this.id}`,
+            viewMenu: this.viewMenu,
+            templateMenu: this.templateMenu,
+            elementMenu: (element) => this.elementMenu(element),
+            search: true,
+            version: this.version,
+        }));
+        main.style.flexDirection = 'column';
+        render(main, [tabs, { style: { flex: '1', display: 'flex', flexDirection: 'column', minHeight: '0' }, children: [canvas] }], doc);
+
+        const customViewpoints = CustomViewpoints.load();
+        const previous = this.editor;
+        previous?.dispose();
+        this.editor = new ArchimateCanvasEditor({
+            diagramContainerId: canvasId,
+            view,
+            model,
+            nodeOptions: { archimateVersion: this.version, useDistinctShapes: this.distinctShapes, viewpoint: this.viewpoint, viewpointMode: this.viewpointMode, showDerived: this.showDerived },
+            chooseKind: (kinds, from, to, options) => this.chooseKind(kinds, from, to, options),
+            // The view's settings: background, title, watermark, how invalid relationships show.
+            viewSettings: () => this.settings.getEffectiveSettings(this.model.currentView, 'default'),
+            settingsManager: this.settings,
+            // The user's own viewpoints, after the standard ones.
+            customViewpoints,
+            // Canvas templates: placed on a canvas, saved from its shapes (the browser's library).
+            templateMenu: this.templateMenu,
+            // Version and distinct shapes (⚙ Settings) change the palette too.
+            onNodeOptionsChange: ({ archimateVersion, useDistinctShapes, viewpoint, viewpointMode, showDerived }) => {
+                this.showDerived = !!showDerived;
+                this.version = archimateVersion;
+                this.distinctShapes = !!useDistinctShapes;
+                this.viewpoint = viewpoint;
+                this.viewpointMode = viewpointMode;
+                this.render();
+            },
+        });
+        if (previous) {
+            this.editor.showGrid = previous.showGrid;
+            this.editor.gridSize = previous.gridSize;
+        }
+
+        // A canvas's palette is Archi's canvas palette; another view's, ArchiMate's element types.
+        const isCanvas = view.constructor.kind === 'canvas';
+        const Palette = isCanvas ? CanvasPalette : ArchimatePalette;
+        new Palette({
+            version: this.version,
+            viewpoint: this.viewpoint,
+            customViewpoints,
+            document: doc,
+            // A click adds the type (or box) in the middle of the visible canvas.
+            onPick: (key) => {
+                const r = canvas.getBoundingClientRect();
+                const at = this.editor._clientToDiagram(r.left + r.width / 2, r.top + r.height / 2) ?? { x: 400, y: 300 };
+                if (isCanvas) this.editor.addCanvasBox(key, at);
+                else this.editor.addElement(key, at);
+            },
+        }).render(paletteHost);
+
+        // The tree follows the canvas's selection; a canvas shows its hint, or the selected box's.
+        const hints = (this.hintPanel ??= new HintPanel({ document: doc }));
+        const showHint = (templateId) => hints.mount(canvas.parentElement).show(view.constructor.kind === 'canvas' ? (templateId ? view.hintFor(templateId) : view.hint) : null);
+        const showAnalysis = this._showAnalysis = (elementId) => {
+            if (!analysisHost) return;
+            analysisHost.replaceChildren(buildAnalysisPanel(doc, {
+                model, elementId: elementId && model.getElement(elementId) ? elementId : null,
+                onSelectItem: (info) => this.modelTree.select(info.id, info.kind),
+            }));
+        };
+        this.editor.onSelectionChange(({ templateId }) => {
+            const elementId = templateId && this.editor.templates.get(templateId)?.instance?.elementId;
+            if (elementId && this.modelTree.getSelectedId() !== elementId && this.model.getElement(elementId)) this.modelTree.select(elementId, 'element');
+            showHint(templateId);
+            showAnalysis(elementId);
+        });
+        showHint(null);
+        showAnalysis(this.modelTree.getSelectedKind() === 'element' ? this.modelTree.getSelectedId() : null);
+        // The tree's filters dim what they leave out on the canvas too.
+        this._unsubscribeFilter?.();
+        const dim = () => this.editor?.setElementFilter(this.modelTree.matchingElementIds());
+        this._unsubscribeFilter = this.modelTree.onFilterChange(dim);
+        if (this.modelTree.filtering) dim();
+
+        this.menuBar?.dispose();
+        this.menuBar = new MenuBar({
+            container: toolbar,
+            editor: this.editor,
+            items: [this.fileMenu(), this.editMenu(), ...this.hostMenus(), ...this.editor.menuBarItems(), new ToolbarText(() => this.fileLabel, { marginLeft: 'auto', color: '#555', fontSize: '12px' })],
+        }).render();
+        this.editor.render();
+    }
+
+    /**
+     * A model element's menu in the tree (elementMenuItems): its properties,
+     * the views it is on, adding it to this one, a view generated for it.
+     */
+    elementMenu(element) {
+        const model = this.model;
+        return elementMenuItems(element, {
+            model, view: model.currentView,
+            editProperties: (el) => editElementProperties(el, {
+                history: model.currentView?.history, version: this.version, document: this.document,
+                onSaved: () => this.render(),
+            }),
+            showIn: (view, instanceId) => {
+                if (view.id !== model.currentViewId) model.switchTo(view.id);   // the part redraws for the new view
+                this.editor?.selectTemplate(instanceId);
+            },
+            addToView: (el) => this.editor?.showElement(el.id, this.editor.visibleCentre()),
+        });
+    }
+
+    /** Select the first box of a model element on the current view (nothing if it is not shown). */
+    selectElement(elementId) {
+        const editor = this.editor;
+        if (!editor) return;
+        const box = [...editor.templates.values()].find(t => t.instance?.elementId === elementId);
+        if (box && editor.selectedTemplateId !== box.id) editor.selectTemplate(box.id);
+    }
+
+    /** Canvas templates over the current model: placed on a canvas, saved from its shapes (the browser's library). */
+    get templateMenu() {
+        if (this._templateMenu?.model !== this.model) {
+            this._templateMenu = new CanvasTemplateMenu(this.model, { library: (this.templateLibrary ??= new CanvasTemplateLibrary()), document: () => this.document });
+        }
+        return this._templateMenu;
+    }
+
+    dispose() {
+        this.menuBar?.dispose();
+        this._unsubscribeSettings?.();
+        this._unsubscribeFilter?.();
+        this._unsubscribe();
+        this._unsubscribeTree?.();
+        super.dispose();
+    }
+}