@peter.prib/renderengine 0.2.6 → 0.2.7

package/src/workspace/parts/EditorPart.js

@@ -1,407 +1,461 @@
-import { Part } from '../Part.js';
-import { ViewMenu } from '../../charting/ViewMenu.js';
-import { ToolbarMenu } from '../../charting/toolbar/index.js';
-import { modelFileMenuItems } from '../../charting/ModelFileFormat.js';
-import { ModelFile } from './ModelFile.js';
-import { reportHtml, reportFileName } from '../../charting/report/reportHtml.js';
-import { downloadBlob } from '../../exportImage.js';
-import { FindReplaceDialog } from '../../charting/FindReplaceDialog.js';
-import { FormDialog } from '../../charting/FormDialog.js';
-import { NAME_TRANSFORMS } from '../../charting/diagramModel/nameTransforms.js';
-
-/**
- * EditorPart — base for workbench parts that edit a model of several views
- * (a ViewSetModel): the template editor's DiagramEditorPart and
- * ArchimateEditorPart.
- *
- * Owns what they share: the model (made by the subclass from the part's JSON
- * spec), the view menu (new, duplicate, rename, delete) over it, a File menu
- * that starts with those items and offers the part's file formats (export,
- * and import, which replaces the model), and disposing the editor with the
- * part. Subclasses build their editor in render() and supply
- * `createModel(spec)`, and `fileFormats()` when they read and write files.
- *
- * With file formats the part also opens and saves a file (ModelFile): Open…,
- * Save and Save As… (Ctrl+O, Ctrl+S, Ctrl+Shift+S), writing back to the file
- * it opened or last saved where the browser allows; it knows when the model
- * has changed since (`model.isDirty()`), shows it (`fileLabel`, the page
- * title) and asks before the page is left with changes unsaved.
- *
- * Hosted by a ModelsPart (`ctx.models`: several models open at once, a tab
- * each), its File menu also offers New model, Open… in a new tab and Close
- * model, an import opens in a new tab rather than replacing this model, a
- * Tools menu compares and merges models (ModelsPart#toolItems), and its tab
- * follows its file's name and saved state.
- */
-export class EditorPart extends Part {
-    /** What a view is called in this part's menus ('view', 'diagram'). */
-    static viewNoun = 'view';
-
-    constructor(spec = {}) {
-        super(spec);
-        if (new.target === EditorPart) throw new TypeError('EditorPart is abstract — subclass it');
-        this._model = this.createModel(spec);
-        /** The editor this part hosts; set by render(). */
-        this.editor = null;
-        /** The file the model is open from, and saved to (ModelFile). */
-        this.file = new ModelFile(this);
-        this._followEdits(this._model);
-    }
-
-    /** Install the file keys and the leave-page guard once mounted. */
-    mount(host, ctx) {
-        const first = !this.mounted;
-        super.mount(host, ctx);
-        if (!first || !this.fileFormats().length) return;
-        const win = this.document.defaultView;
-        this.listen(this.document, 'keydown', (e) => this.file.onKey(e));
-        this.listen(win, 'beforeunload', (e) => {
-            if (!this.model.isDirty?.()) return;
-            e.preventDefault();
-            e.returnValue = '';
-        });
-        this.file.showState();
-    }
-
-    /** What the part's title shows: the file's name, and • when there are unsaved changes. */
-    get fileLabel() {
-        return this.file.label;
-    }
-
-    /**
-     * Show the saved state on every edit of `model`, from now on as saved and
-     * with nothing to undo (making it, or opening it, is no edit). @private
-     */
-    _followEdits(model) {
-        this._unsubscribeEdits?.();
-        model.history?.clear?.();
-        model.markSaved?.();
-        this._unsubscribeEdits = model.onEdit?.(() => this.file.showState()) ?? null;
-    }
-
-    /** The model this part edits, built from its spec. @abstract */
-    createModel(spec) {
-        throw new Error(`${this.constructor.name} must implement createModel()`);
-    }
-
-    /** The model being edited (a subclass whose editor can replace it reads it from there). */
-    get model() {
-        return this._model;
-    }
-
-    /** The page this part is mounted in. */
-    get document() {
-        return this.container?.ownerDocument ?? globalThis.document;
-    }
-
-    /**
-     * View menu items over the current model. A subclass that can show a
-     * view's properties (`showViewProperties(view)`, the name included) gets
-     * "Properties…" in place of "Rename…".
-     */
-    get viewMenu() {
-        if (this._viewMenu?.model !== this.model) {
-            this._viewMenu = new ViewMenu(this.model, {
-                document: () => this.document,
-                noun: this.constructor.viewNoun,
-                editProperties: typeof this.showViewProperties === 'function' ? (view) => this.showViewProperties(view) : null,
-            });
-        }
-        return this._viewMenu;
-    }
-
-    /** File menu (fileMenuItems). */
-    fileMenu() {
-        return new ToolbarMenu('File', () => this.fileMenuItems());
-    }
-
-    /** The menus beside File and Edit that work across models: Tools, with a ModelsPart. None without. */
-    hostMenus() {
-        return this.modelsHost ? [new ToolbarMenu('Tools', () => this.modelsHost.toolItems(this))] : [];
-    }
-
-    /** Edit menu: undo and redo (the editor's), then Find and replace… over the whole model. */
-    editMenu() {
-        return new ToolbarMenu('Edit', () => this.editMenuItems());
-    }
-
-    editMenuItems() {
-        const history = this.editor?.history;
-        return [
-            { label: 'Undo', disabled: !history?.canUndo || undefined, action: () => this.editor.undo() },
-            { label: 'Redo', disabled: !history?.canRedo || undefined, action: () => this.editor.redo() },
-            ...(typeof this.model.search === 'function' ? [
-                { separator: true },
-                { label: 'Find and replace…', action: () => this.findAndReplace() },
-                { label: 'Transform names…', action: () => this.askTransformNames() },
-                ...(this.model.search().propertyNames().length ? [{ label: 'Rename property…', action: () => this.askRenameProperty() }] : []),
-            ] : []),
-        ];
-    }
-
-    /** Run a model-wide edit (null: nothing to do; a rename, a merge) as one undo step, then redraw. */
-    runModelEdit(command) {
-        if (!command) return null;
-        (this.editor?.history ?? this.model.history).execute(command);
-        if (this.mounted) this.render();
-        return command;
-    }
-
-    /**
-     * Transform names…: Title Case, Sentence case, split camelCase and the
-     * rest (nameTransforms.js) on every name, or on those containing some
-     * text. One undo step.
-     */
-    askTransformNames() {
-        return new FormDialog({
-            title: 'Transform names',
-            fields: [
-                { key: 'transform', label: 'Make them', type: 'select', value: 'title', choices: NAME_TRANSFORMS.map(([k, label]) => [k, label]) },
-                { key: 'text', label: 'Only names containing', type: 'text', value: '', placeholder: 'every name' },
-            ],
-            submitLabel: 'Transform',
-            idPrefix: 'transform-names-',
-            document: this.document,
-            validate: ({ transform, text }) => (this.model.search().transformCommand(transform, text) ? null : 'No name would change'),
-            onApply: ({ transform, text }) => this.transformNames(transform, text),
-        }).open();
-    }
-
-    /** Transform names (ModelSearch#transformCommand), one undo step. */
-    transformNames(transform, text = '') {
-        return this.runModelEdit(this.model.search().transformCommand(transform, text));
-    }
-
-    /** Rename property…: a property's name, everywhere in the model. One undo step. */
-    askRenameProperty() {
-        const names = this.model.search().propertyNames();
-        return new FormDialog({
-            title: 'Rename property',
-            fields: [
-                { key: 'from', label: 'Property', type: 'select', value: names[0], choices: names.map(n => [n, n]) },
-                { key: 'to', label: 'New name', type: 'text', value: '' },
-            ],
-            submitLabel: 'Rename',
-            idPrefix: 'rename-property-',
-            document: this.document,
-            validate: ({ from, to }) => (to?.trim() ? (to.trim() === from ? 'That is its name' : null) : 'Give its new name'),
-            onApply: ({ from, to }) => this.renameProperty(from, to.trim()),
-        }).open();
-    }
-
-    /** Rename a property everywhere (ModelSearch#renamePropertyCommand), one undo step. */
-    renameProperty(from, to) {
-        return this.runModelEdit(this.model.search().renamePropertyCommand(from, to));
-    }
-
-    /**
-     * Find and replace over the model (FindReplaceDialog on `model.search()`):
-     * a replace is one undo step on the model's history, and choosing a
-     * match shows it (revealMatch). The last search is kept between opens.
-     */
-    findAndReplace() {
-        this._findReplace ??= new FindReplaceDialog({
-            model: () => this.model,
-            history: () => this.editor?.history ?? this.model.currentView.history,
-            onReveal: (match) => this.revealMatch(match),
-            onReplaced: () => { if (this.mounted) this.render(); },
-            document: () => this.document,
-        });
-        return this._findReplace.open();
-    }
-
-    /** Show a match: its view, and on it the item (the editor's revealFinding). */
-    revealMatch(match) {
-        if (match.viewId && match.viewId !== this.model.currentViewId) this.model.switchTo(match.viewId);   // the part redraws for it
-        if (match.kind === 'model' || match.kind === 'view') return;
-        this.editor?.revealFinding?.({ kind: match.kind, ids: [match.id] });
-    }
-
-    /** What File offers to make: a new view here; a subclass adds its own kinds (a canvas, ...). */
-    newItems() {
-        return [this.viewMenu.newViewItem()];
-    }
-
-    /** The ModelsPart this part is a tab of (several models open at once), or null. */
-    get modelsHost() {
-        return this.ctx?.models ?? null;
-    }
-
-    /** With a ModelsPart: New model, Open… in a new tab (when it opens files) and Close model. */
-    modelItems() {
-        const host = this.modelsHost;
-        if (!host) return [];
-        return [
-            { label: 'New model', action: () => host.newModel() },
-            ...(this.fileFormats().length ? [{ label: 'Open… in a new tab', action: () => host.openInNewTab(this) }] : []),
-            { label: 'Close model', action: () => host.closeModel(this.id) },
-        ];
-    }
-
-    /** The file or its saved state changed: a ModelsPart's tab follows it. */
-    onFileState() {
-        this.modelsHost?.fileStateChanged?.(this);
-    }
-
-    /**
-     * The File menu, grouped: **New** ▸ (a view, a subclass's kinds, a model),
-     * Open…, Save, Save As… (and, with a ModelsPart, Open… in a new tab, Close
-     * model), **Import** ▸ and **Export** ▸ (each file format, a subclass's own,
-     * the HTML report and the pictures), a subclass's own groups, and **This
-     * view** ▸ (its properties, duplicate, delete). A group of one is that item.
-     */
-    fileMenuItems() {
-        const models = Object.fromEntries(this.modelItems().map(i => [i.label, i]));
-        const [open, ...saving] = this.fileFormats().length ? this.file.menuItems() : [];
-        const some = (...items) => items.filter(Boolean);
-        return EditorPart.tidyMenu([
-            ...EditorPart.menuGroup('New', some(...this.newItems(), models['New model'])),
-            { separator: true },
-            ...some(open, models['Open… in a new tab'], ...saving, models['Close model']),
-            { separator: true },
-            ...EditorPart.menuGroup('Import', this.importItems(), { prefix: true }),
-            ...EditorPart.menuGroup('Export', this.exportItems(), { prefix: true }),
-            ...this.ownFileItems(),
-            { separator: true },
-            ...EditorPart.menuGroup(`This ${this.constructor.viewNoun}`, this.viewMenu.items(this.model.currentViewId)),
-        ]);
-    }
-
-    /**
-     * File > Import's items: each format that imports, then the subclass's own
-     * (ownImportItems). An imported model opens in a new tab with a ModelsPart
-     * (onImported), else replaces this one.
-     */
-    importItems() {
-        return EditorPart.tidyMenu([
-            ...modelFileMenuItems(this.fileFormats(), {
-                model: () => this.model, only: 'import',
-                onImport: (model) => this.onImported(model),
-                document: () => this.document,
-            }),
-            ...this.ownImportItems(),
-        ]);
-    }
-
-    /** A model imported from a file: in a new tab with a ModelsPart, else in place of this one. Returns the part showing it. */
-    onImported(model) {
-        if (this.modelsHost) return this.modelsHost.openModel(model);
-        this.replaceModel(model);
-        this.file.forget();
-        return this;
-    }
-
-    /** File > Export's items: each format, the subclass's own (ownExportItems), then the HTML report and the pictures. */
-    exportItems() {
-        return EditorPart.tidyMenu([
-            ...modelFileMenuItems(this.fileFormats(), { model: () => this.model, only: 'export', document: () => this.document }),
-            ...this.ownExportItems(),
-            { separator: true },
-            // In Export, "Export HTML report" is "HTML report", "Export image (PNG)" "Image (PNG)".
-            ...[...this.reportItems(), ...(this.editor?.imageMenuItems?.() ?? [])]
-                .map(i => ({ ...i, label: i.label.replace(/^Export (.)/, (_, c) => c.toUpperCase()) })),
-        ]);
-    }
-
-    /** A subclass's own File > Import items. None here. */
-    ownImportItems() {
-        return [];
-    }
-
-    /** A subclass's own File > Export items. None here. */
-    ownExportItems() {
-        return [];
-    }
-
-    /**
-     * Items as a submenu named `label`; none is nothing, and one is that item
-     * itself (with `prefix`, named as the group says it: "Export HTML report").
-     */
-    static menuGroup(label, items, { prefix = false } = {}) {
-        const real = EditorPart.tidyMenu(items);
-        if (!real.length) return [];
-        if (real.length > 1) return [{ label, items: real }];
-        const [only] = real;
-        if (!prefix) return [only];
-        // "Image (PNG)" reads "Export image (PNG)"; an acronym (HTML, CSV) or ".archimate" stays as it is.
-        const word = /^[A-Z][a-z]/.test(only.label) ? only.label.charAt(0).toLowerCase() + only.label.slice(1) : only.label;
-        return [{ ...only, label: `${label} ${word}` }];
-    }
-
-    /** Separators only between items: none first, last or twice in a row. */
-    static tidyMenu(items) {
-        const out = [];
-        for (const item of items) {
-            if (item.separator && (!out.length || out.at(-1).separator)) continue;
-            out.push(item);
-        }
-        while (out.at(-1)?.separator) out.pop();
-        return out;
-    }
-
-    /** Export HTML report, when the model has a report (ViewSetModel#report). */
-    reportItems() {
-        return typeof this.model.report === 'function' ? [{ label: 'Export HTML report', action: () => this.exportReport() }] : [];
-    }
-
-    /**
-     * The model's report as one HTML file (reportHtml), each view's picture
-     * in it: downloaded as `<model>-report.html`. Returns the HTML.
-     */
-    exportReport() {
-        const report = this.model.report({ pictures: this.viewPictures() });
-        const html = reportHtml(report.data());
-        downloadBlob(new (this.document.defaultView ?? globalThis).Blob([html], { type: 'text/html' }), reportFileName(report.title));
-        return html;
-    }
-
-    /**
-     * Every view's picture (DiagramEditor#viewPicture), by view id: each view
-     * is shown in turn, then the one that was. None when the editor draws no pictures.
-     */
-    viewPictures() {
-        const model = this.model;
-        if (typeof this.editor?.viewPicture !== 'function') return {};
-        const start = model.currentViewId;
-        const pictures = {};
-        try {
-            for (const view of model.views()) {
-                if (model.currentViewId !== view.id) model.switchTo(view.id);   // the part redraws for it
-                const picture = this.editor?.viewPicture?.();
-                if (picture) pictures[view.id] = picture;
-            }
-        } finally {
-            if (model.currentViewId !== start) model.switchTo(start);
-        }
-        return pictures;
-    }
-
-    /** A subclass's own File items or groups, after Import and Export (templates, ...). None here. */
-    ownFileItems() {
-        return [];
-    }
-
-    /** The file formats (ModelFileFormat) this part's model is exported to and imported from: none here. */
-    fileFormats() {
-        return [];
-    }
-
-    /** Edit another model (an imported one) in place of this one, and show it. */
-    replaceModel(model) {
-        this._model = model;
-        this._followEdits(model);
-        this.modelReplaced(model);
-        if (this.mounted) this.render();
-    }
-
-    /** After `replaceModel`: a subclass moves what follows the model (change listeners, ...) onto the new one. */
-    modelReplaced(model) {}
-
-    dispose() {
-        this._unsubscribeEdits?.();
-        this.file.restoreTitle();
-        this.editor?.dispose?.();
-        this.editor = null;
-        super.dispose();
-    }
-}
+import { Part } from '../Part.js';
+import { ViewMenu } from '../../charting/ViewMenu.js';
+import { ToolbarMenu } from '../../charting/toolbar/index.js';
+import { modelFileMenuItems } from '../../charting/ModelFileFormat.js';
+import { ModelFile } from './ModelFile.js';
+import { reportHtml, reportFileName } from '../../charting/report/reportHtml.js';
+import { downloadBlob } from '../../exportImage.js';
+import { FindReplaceDialog } from '../../charting/FindReplaceDialog.js';
+import { FormDialog } from '../../charting/FormDialog.js';
+import { NAME_TRANSFORMS } from '../../charting/diagramModel/nameTransforms.js';
+import { OpenViewList } from '../../charting/diagramModel/OpenViewList.js';
+import { ViewTabStrip } from '../../charting/ViewTabStrip.js';
+import { PopupMenu } from '../../charting/PopupMenu.js';
+import { PanelLayout } from '../PanelLayout.js';
+
+/**
+ * EditorPart — base for workbench parts that edit a model of several views
+ * (a ViewSetModel): the template editor's DiagramEditorPart and
+ * ArchimateEditorPart.
+ *
+ * Owns what they share: the model (made by the subclass from the part's JSON
+ * spec), the view menu (new, duplicate, rename, delete) over it, a File menu
+ * that starts with those items and offers the part's file formats (export,
+ * and import, which replaces the model), and disposing the editor with the
+ * part. Subclasses build their editor in render() and supply
+ * `createModel(spec)`, and `fileFormats()` when they read and write files.
+ *
+ * With file formats the part also opens and saves a file (ModelFile): Open…,
+ * Save and Save As… (Ctrl+O, Ctrl+S, Ctrl+Shift+S), writing back to the file
+ * it opened or last saved where the browser allows; it knows when the model
+ * has changed since (`model.isDirty()`), shows it (`fileLabel`, the page
+ * title) and asks before the page is left with changes unsaved.
+ *
+ * Hosted by a ModelsPart (`ctx.models`: several models open at once, a tab
+ * each), its File menu also offers New model, Open… in a new tab and Close
+ * model, an import opens in a new tab rather than replacing this model, a
+ * Tools menu compares and merges models (ModelsPart#toolItems), and its tab
+ * follows its file's name and saved state.
+ *
+ * Its tabs are the views open (OpenViewList), as a browser's are: a model
+ * opens (or is imported) with its first view only, a view chosen in the tree
+ * opens a tab, × closes the tab but keeps the view, and + makes a new one
+ * (viewTabs). Its side panels can be resized and folded (`layout`, a
+ * PanelLayout the editor shell reads), kept as they were across renders.
+ */
+export class EditorPart extends Part {
+    /** What a view is called in this part's menus ('view', 'diagram'). */
+    static viewNoun = 'view';
+
+    constructor(spec = {}) {
+        super(spec);
+        if (new.target === EditorPart) throw new TypeError('EditorPart is abstract — subclass it');
+        this._model = this.createModel(spec);
+        /** The editor this part hosts; set by render(). */
+        this.editor = null;
+        /** The file the model is open from, and saved to (ModelFile). */
+        this.file = new ModelFile(this);
+        /** The views with a tab, in order (spec `openViews`: their ids). */
+        this.openViews = new OpenViewList(this._model, spec.openViews ?? null);
+        /** The side panels' widths, and which are folded (spec `layout`), for the editor shell. */
+        this.layout = new PanelLayout(spec.layout ?? {});
+        /** Its id among the models kept in this browser (ModelsPart with `keep`), or null. */
+        this.keepId = spec.keepId ?? null;
+        this._followEdits(this._model);
+    }
+
+    /**
+     * The model as a kept entry (ModelLibrary): in its file's format, else the
+     * part's save format, with its name and file name; null without a format.
+     */
+    keepEntry() {
+        return this.file.keepEntry();
+    }
+
+    /**
+     * The tab strip: the open views (OpenViewList), each closable while
+     * another is open (the view stays in the model), a right-click menu per
+     * tab (the view menu), and + for something new (newItems: the one there
+     * is, else a menu of them).
+     * @param {{orientation?: 'horizontal'|'vertical'}} [options]
+     */
+    viewTabs({ orientation = 'horizontal' } = {}) {
+        const open = this.openViews;
+        return new ViewTabStrip({
+            orientation,
+            document: this.document,
+            onSelect: (id) => open.open(id),
+            onClose: (id) => { if (open.close(id) && this.mounted) this.render(); },
+            canClose: (id) => open.canClose(id),
+            onAdd: (e) => {
+                const items = this.newItems().filter(i => !i.separator);
+                if (items.length === 1) items[0].action();
+                else PopupMenu.show(e?.clientX ?? 0, e?.clientY ?? 0, items, this.document);
+            },
+            menuItems: (id) => this.viewMenu.items(id),
+        }).render(open.sync(), this.model.currentViewId);
+    }
+
+    /** Install the file keys and the leave-page guard once mounted. */
+    mount(host, ctx) {
+        const first = !this.mounted;
+        super.mount(host, ctx);
+        if (!first || !this.fileFormats().length) return;
+        this.file.listen();
+        this.file.showState();
+    }
+
+    /** What the part's title shows: the file's name, and • when there are unsaved changes. */
+    get fileLabel() {
+        return this.file.label;
+    }
+
+    /**
+     * Show the saved state on every edit of `model`, from now on as saved and
+     * with nothing to undo (making it, or opening it, is no edit). @private
+     */
+    _followEdits(model) {
+        this._unsubscribeEdits?.();
+        model.history?.clear?.();
+        model.markSaved?.();
+        this._unsubscribeEdits = model.onEdit?.(() => {
+            this.file.showState();
+            this.modelsHost?.modelEdited?.(this);   // kept in this browser, a moment after
+        }) ?? null;
+    }
+
+    /** The model this part edits, built from its spec. @abstract */
+    createModel(spec) {
+        throw new Error(`${this.constructor.name} must implement createModel()`);
+    }
+
+    /** The model being edited (a subclass whose editor can replace it reads it from there). */
+    get model() {
+        return this._model;
+    }
+
+    /** The page this part is mounted in. */
+    get document() {
+        return this.container?.ownerDocument ?? globalThis.document;
+    }
+
+    /**
+     * View menu items over the current model. A subclass that can show a
+     * view's properties (`showViewProperties(view)`, the name included) gets
+     * "Properties…" in place of "Rename…".
+     */
+    get viewMenu() {
+        if (this._viewMenu?.model !== this.model) {
+            this._viewMenu = new ViewMenu(this.model, {
+                document: () => this.document,
+                noun: this.constructor.viewNoun,
+                editProperties: typeof this.showViewProperties === 'function' ? (view) => this.showViewProperties(view) : null,
+            });
+        }
+        return this._viewMenu;
+    }
+
+    /** File menu (fileMenuItems). */
+    fileMenu() {
+        return new ToolbarMenu('File', () => this.fileMenuItems());
+    }
+
+    /** The menus beside File and Edit that work across models: Tools, with a ModelsPart. None without. */
+    hostMenus() {
+        return this.modelsHost ? [new ToolbarMenu('Tools', () => this.modelsHost.toolItems(this))] : [];
+    }
+
+    /** Edit menu: undo and redo (the editor's), then Find and replace… over the whole model. */
+    editMenu() {
+        return new ToolbarMenu('Edit', () => this.editMenuItems());
+    }
+
+    editMenuItems() {
+        const history = this.editor?.history;
+        return [
+            { label: 'Undo', disabled: !history?.canUndo || undefined, action: () => this.editor.undo() },
+            { label: 'Redo', disabled: !history?.canRedo || undefined, action: () => this.editor.redo() },
+            ...(typeof this.model.search === 'function' ? [
+                { separator: true },
+                { label: 'Find and replace…', action: () => this.findAndReplace() },
+                { label: 'Transform names…', action: () => this.askTransformNames() },
+                ...(this.model.search().propertyNames().length ? [{ label: 'Rename property…', action: () => this.askRenameProperty() }] : []),
+            ] : []),
+        ];
+    }
+
+    /** Run a model-wide edit (null: nothing to do; a rename, a merge) as one undo step, then redraw. */
+    runModelEdit(command) {
+        if (!command) return null;
+        (this.editor?.history ?? this.model.history).execute(command);
+        if (this.mounted) this.render();
+        return command;
+    }
+
+    /**
+     * Transform names…: Title Case, Sentence case, split camelCase and the
+     * rest (nameTransforms.js) on every name, or on those containing some
+     * text. One undo step.
+     */
+    askTransformNames() {
+        return new FormDialog({
+            title: 'Transform names',
+            fields: [
+                { key: 'transform', label: 'Make them', type: 'select', value: 'title', choices: NAME_TRANSFORMS.map(([k, label]) => [k, label]) },
+                { key: 'text', label: 'Only names containing', type: 'text', value: '', placeholder: 'every name' },
+            ],
+            submitLabel: 'Transform',
+            idPrefix: 'transform-names-',
+            document: this.document,
+            validate: ({ transform, text }) => (this.model.search().transformCommand(transform, text) ? null : 'No name would change'),
+            onApply: ({ transform, text }) => this.transformNames(transform, text),
+        }).open();
+    }
+
+    /** Transform names (ModelSearch#transformCommand), one undo step. */
+    transformNames(transform, text = '') {
+        return this.runModelEdit(this.model.search().transformCommand(transform, text));
+    }
+
+    /** Rename property…: a property's name, everywhere in the model. One undo step. */
+    askRenameProperty() {
+        const names = this.model.search().propertyNames();
+        return new FormDialog({
+            title: 'Rename property',
+            fields: [
+                { key: 'from', label: 'Property', type: 'select', value: names[0], choices: names.map(n => [n, n]) },
+                { key: 'to', label: 'New name', type: 'text', value: '' },
+            ],
+            submitLabel: 'Rename',
+            idPrefix: 'rename-property-',
+            document: this.document,
+            validate: ({ from, to }) => (to?.trim() ? (to.trim() === from ? 'That is its name' : null) : 'Give its new name'),
+            onApply: ({ from, to }) => this.renameProperty(from, to.trim()),
+        }).open();
+    }
+
+    /** Rename a property everywhere (ModelSearch#renamePropertyCommand), one undo step. */
+    renameProperty(from, to) {
+        return this.runModelEdit(this.model.search().renamePropertyCommand(from, to));
+    }
+
+    /**
+     * Find and replace over the model (FindReplaceDialog on `model.search()`):
+     * a replace is one undo step on the model's history, and choosing a
+     * match shows it (revealMatch). The last search is kept between opens.
+     */
+    findAndReplace() {
+        this._findReplace ??= new FindReplaceDialog({
+            model: () => this.model,
+            history: () => this.editor?.history ?? this.model.currentView.history,
+            onReveal: (match) => this.revealMatch(match),
+            onReplaced: () => { if (this.mounted) this.render(); },
+            document: () => this.document,
+        });
+        return this._findReplace.open();
+    }
+
+    /** Show a match: its view, and on it the item (the editor's revealFinding). */
+    revealMatch(match) {
+        if (match.viewId && match.viewId !== this.model.currentViewId) this.model.switchTo(match.viewId);   // the part redraws for it
+        if (match.kind === 'model' || match.kind === 'view') return;
+        this.editor?.revealFinding?.({ kind: match.kind, ids: [match.id] });
+    }
+
+    /** What File offers to make: a new view here; a subclass adds its own kinds (a canvas, ...). */
+    newItems() {
+        return [this.viewMenu.newViewItem()];
+    }
+
+    /** The ModelsPart this part is a tab of (several models open at once), or null. */
+    get modelsHost() {
+        return this.ctx?.models ?? null;
+    }
+
+    /** With a ModelsPart: New model, Open… in a new tab (when it opens files) and Close model. */
+    modelItems() {
+        const host = this.modelsHost;
+        if (!host) return [];
+        return [
+            { label: 'New model', action: () => host.newModel() },
+            ...(this.fileFormats().length ? [{ label: 'Open… in a new tab', action: () => host.openInNewTab(this) }] : []),
+            ...(this.fileFormats().length ? [{ label: 'Duplicate model', action: () => host.duplicate(this) }] : []),
+            { label: 'Close model', action: () => host.closeModel(this.id) },
+        ];
+    }
+
+    /** The file or its saved state changed: a ModelsPart's tab follows it. */
+    onFileState() {
+        this.modelsHost?.fileStateChanged?.(this);
+    }
+
+    /**
+     * The File menu, grouped: **New** ▸ (a view, a subclass's kinds, a model),
+     * Open…, Save, Save As… (and, with a ModelsPart, Open… in a new tab, Close
+     * model), **Import** ▸ and **Export** ▸ (each file format, a subclass's own,
+     * the HTML report and the pictures), a subclass's own groups, and **This
+     * view** ▸ (its properties, duplicate, delete). A group of one is that item.
+     */
+    fileMenuItems() {
+        const models = Object.fromEntries(this.modelItems().map(i => [i.label, i]));
+        const [open, ...saving] = this.fileFormats().length ? this.file.menuItems() : [];
+        const some = (...items) => items.filter(Boolean);
+        return EditorPart.tidyMenu([
+            ...EditorPart.menuGroup('New', some(...this.newItems(), models['New model'], ...(this.modelsHost?.baseItems?.() ?? []))),
+            { separator: true },
+            ...some(open, models['Open… in a new tab'], ...saving, models['Duplicate model'], models['Close model']),
+            ...EditorPart.menuGroup('This browser', this.modelsHost?.keepItems?.(this) ?? []),
+            { separator: true },
+            ...EditorPart.menuGroup('Import', this.importItems(), { prefix: true }),
+            ...EditorPart.menuGroup('Export', this.exportItems(), { prefix: true }),
+            ...this.ownFileItems(),
+            { separator: true },
+            ...EditorPart.menuGroup(`This ${this.constructor.viewNoun}`, this.viewMenu.items(this.model.currentViewId)),
+        ]);
+    }
+
+    /**
+     * File > Import's items: each format that imports, then the subclass's own
+     * (ownImportItems). An imported model opens in a new tab with a ModelsPart
+     * (onImported), else replaces this one.
+     */
+    importItems() {
+        return EditorPart.tidyMenu([
+            ...modelFileMenuItems(this.fileFormats(), {
+                model: () => this.model, only: 'import',
+                onImport: (model) => this.onImported(model),
+                document: () => this.document,
+            }),
+            ...this.ownImportItems(),
+        ]);
+    }
+
+    /** A model imported from a file: in a new tab with a ModelsPart, else in place of this one. Returns the part showing it. */
+    onImported(model) {
+        if (this.modelsHost) return this.modelsHost.openModel(model);
+        this.replaceModel(model);
+        this.file.forget();
+        return this;
+    }
+
+    /** File > Export's items: each format, the subclass's own (ownExportItems), then the HTML report and the pictures. */
+    exportItems() {
+        return EditorPart.tidyMenu([
+            ...modelFileMenuItems(this.fileFormats(), { model: () => this.model, only: 'export', document: () => this.document }),
+            ...this.ownExportItems(),
+            { separator: true },
+            // In Export, "Export HTML report" is "HTML report", "Export image (PNG)" "Image (PNG)".
+            ...[...this.reportItems(), ...(this.editor?.imageMenuItems?.() ?? [])]
+                .map(i => ({ ...i, label: i.label.replace(/^Export (.)/, (_, c) => c.toUpperCase()) })),
+        ]);
+    }
+
+    /** A subclass's own File > Import items. None here. */
+    ownImportItems() {
+        return [];
+    }
+
+    /** A subclass's own File > Export items. None here. */
+    ownExportItems() {
+        return [];
+    }
+
+    /**
+     * Items as a submenu named `label`; none is nothing, and one is that item
+     * itself (with `prefix`, named as the group says it: "Export HTML report").
+     */
+    static menuGroup(label, items, { prefix = false } = {}) {
+        const real = EditorPart.tidyMenu(items);
+        if (!real.length) return [];
+        if (real.length > 1) return [{ label, items: real }];
+        const [only] = real;
+        if (!prefix) return [only];
+        // "Image (PNG)" reads "Export image (PNG)"; an acronym (HTML, CSV) or ".archimate" stays as it is.
+        const word = /^[A-Z][a-z]/.test(only.label) ? only.label.charAt(0).toLowerCase() + only.label.slice(1) : only.label;
+        return [{ ...only, label: `${label} ${word}` }];
+    }
+
+    /** Separators only between items: none first, last or twice in a row. */
+    static tidyMenu(items) {
+        const out = [];
+        for (const item of items) {
+            if (item.separator && (!out.length || out.at(-1).separator)) continue;
+            out.push(item);
+        }
+        while (out.at(-1)?.separator) out.pop();
+        return out;
+    }
+
+    /** Export HTML report, when the model has a report (ViewSetModel#report). */
+    reportItems() {
+        return typeof this.model.report === 'function' ? [{ label: 'Export HTML report', action: () => this.exportReport() }] : [];
+    }
+
+    /**
+     * The model's report as one HTML file (reportHtml), each view's picture
+     * in it: downloaded as `<model>-report.html`. Returns the HTML.
+     */
+    exportReport() {
+        const report = this.model.report({ pictures: this.viewPictures() });
+        const html = reportHtml(report.data());
+        downloadBlob(new (this.document.defaultView ?? globalThis).Blob([html], { type: 'text/html' }), reportFileName(report.title));
+        return html;
+    }
+
+    /**
+     * Every view's picture (DiagramEditor#viewPicture), by view id: each view
+     * is shown in turn, then the one that was. None when the editor draws no pictures.
+     */
+    viewPictures() {
+        const model = this.model;
+        if (typeof this.editor?.viewPicture !== 'function') return {};
+        const start = model.currentViewId;
+        const pictures = {};
+        // Going through every view to draw it opens none of them as a tab.
+        return this.openViews.while(() => this._eachViewPicture(model, start, pictures));
+    }
+
+    /** @private */
+    _eachViewPicture(model, start, pictures) {
+        try {
+            for (const view of model.views()) {
+                if (model.currentViewId !== view.id) model.switchTo(view.id);   // the part redraws for it
+                const picture = this.editor?.viewPicture?.();
+                if (picture) pictures[view.id] = picture;
+            }
+        } finally {
+            if (model.currentViewId !== start) model.switchTo(start);
+        }
+        return pictures;
+    }
+
+    /** A subclass's own File items or groups, after Import and Export (templates, ...). None here. */
+    ownFileItems() {
+        return [];
+    }
+
+    /** The file formats (ModelFileFormat) this part's model is exported to and imported from: none here. */
+    fileFormats() {
+        return [];
+    }
+
+    /** Edit another model (an imported one) in place of this one, and show it. */
+    replaceModel(model) {
+        this._model = model;
+        this.openViews = new OpenViewList(model);
+        this._followEdits(model);
+        this.modelReplaced(model);
+        if (this.mounted) this.render();
+    }
+
+    /** After `replaceModel`: a subclass moves what follows the model (change listeners, ...) onto the new one. */
+    modelReplaced(model) {}
+
+    dispose() {
+        this._unsubscribeEdits?.();
+        this.file.restoreTitle();
+        this.editor?.dispose?.();
+        this.editor = null;
+        super.dispose();
+    }
+}