@peter.prib/renderengine 0.2.2 → 0.2.4

package/src/workspace/parts/DiagramEditorPart.js

@@ -1,135 +1,135 @@
-import { render } from '../dom.js';
-import { EditorShell } from '../EditorShell.js';
-import { EditorPart } from './EditorPart.js';
-import { DiagramEditor } from '../../charting/DiagramEditor.js';
-import { MenuBar } from '../../charting/MenuBar.js';
-import { DiagramModel } from '../../charting/diagramModel/index.js';
-import { ViewTabStrip } from '../../charting/ViewTabStrip.js';
-import { LocalJsonStore } from '../../charting/storage/LocalJsonStore.js';
-import { EdgeStyleCascade } from '../../charting/edgeStyle/index.js';
-import { DiagramViewPropertiesDialog } from '../../charting/DiagramViewPropertiesDialog.js';
-
-const SVG_NS = 'http://www.w3.org/2000/svg';
-
-/**
- * DiagramEditorPart — a complete diagram editor as a workspace part: menu bar,
- * palette, one tab per diagram and the canvas, over a DiagramModel.
- *
- * Spec (JSON): `templateType` (palette category), `tabOrientation`
- * ('horizontal'|'vertical'), `diagramTitle` (first diagram), `toolStyleKey`
- * (localStorage key for the tool-level line style; `null` keeps it in memory).
- *
- * Line styles cascade line → diagram (`view.edgeStyle`) → model
- * (`model.edgeStyle`) → tool. Each diagram keeps its own undo history, so undo
- * survives switching tabs. The diagrams' menu (new, duplicate, rename, delete)
- * comes from EditorPart. Like ChartPart it needs the engine, so it is not in
- * BUILTIN_PARTS: register it explicitly.
- */
-export class DiagramEditorPart extends EditorPart {
-    static type = 'diagram-editor';
-    static viewNoun = 'diagram';
-
-    constructor(spec = {}) {
-        super(spec);
-        this.tabOrientation = spec.tabOrientation ?? 'horizontal';
-        // The editor is rebuilt with the canvas on every render, which follows every model change.
-        this._unsubscribe = this.model.onChange(() => { if (this.mounted) this.render(); });
-    }
-
-    createModel(spec) {
-        const store = spec.toolStyleKey === null ? null
-            : new LocalJsonStore(spec.toolStyleKey ?? 'renderengine.diagramEditor.toolEdgeStyle');
-        this.toolEdgeStyle = store?.load({}) ?? {};
-        const model = new DiagramModel({
-            name: spec.name ?? '',
-            templateType: spec.templateType ?? 'generic',
-            // Tool-level style edits go through the diagram's undo history; persist whenever it moves.
-            historyOptions: { onChange: () => store?.save(this.toolEdgeStyle) },
-        });
-        model.createView(spec.diagramTitle ?? 'Diagram 1');
-        return model;
-    }
-
-    render() {
-        const model = this.model;
-        const view = model.currentView;
-        const doc = this.document;
-        const canvasId = `diagram-canvas-${this.id}`;
-
-        const canvas = doc.createElementNS(SVG_NS, 'svg');
-        canvas.id = canvasId;
-        canvas.setAttribute('viewBox', '0 0 800 600');
-        canvas.style.cssText = 'flex: 1; width: 100%; height: 100%; display: block; background: #fff; border: 2px solid #333; box-sizing: border-box;';
-        const elements = doc.createElementNS(SVG_NS, 'g');
-        elements.id = 'elements';
-        canvas.appendChild(elements);
-
-        const tabs = new ViewTabStrip({
-            orientation: this.tabOrientation,
-            document: doc,
-            onSelect: (id) => model.switchTo(id),
-            menuItems: (id) => this.viewMenu.items(id),
-        }).render(model.views(), model.currentViewId);
-
-        // The shared workbench layout: toolbar, palette at the side, tabs + canvas in the main area.
-        const { toolbar: menuBarEl, side: palette, main } = new EditorShell({ document: doc, sideWidth: '200px' }).mount(this.container);
-        palette.classList.add('ws-diagram-palette');
-        Object.assign(palette.style, { padding: '8px', fontSize: '12px', display: 'flex', flexDirection: 'column', overflowY: 'hidden' });
-        main.style.flexDirection = this.tabOrientation === 'vertical' ? 'row' : 'column';
-        render(main, [tabs, { style: { flex: '1', display: 'flex', flexDirection: 'column', minHeight: '0' }, children: [canvas] }], doc);
-
-        // The editor is bound to the view's own maps and history: nothing to save back on switch.
-        const previous = this.editor;
-        previous?.dispose();
-        this.editor = new DiagramEditor({
-            diagramContainerId: canvasId,
-            model,
-            templateType: model.templateType,
-            onTemplateTypeChange: (type) => model.setTemplateType(type),
-            templates: view.templates,
-            edges: view.edges,
-            history: view.history,
-            arrangement: view.arrangement,
-            edgeStyleLevels: this.edgeStyleLevels(view),
-        });
-        if (previous) {
-            this.editor.showGrid = previous.showGrid;
-            this.editor.gridSize = previous.gridSize;
-        }
-        this.editor.initPaletteForDiagramType(palette, model.templateType);
-        this.menuBar?.dispose();
-        this.menuBar = new MenuBar({
-            container: menuBarEl,
-            editor: this.editor,
-            items: [this.fileMenu(), this.editMenu(), ...this.editor.menuBarItems()],
-        }).render();
-        this.editor.render();
-    }
-
-    /** A diagram's line-style levels, most specific first: the diagram, the model, the tool. */
-    edgeStyleLevels(view) {
-        return [
-            { key: 'view', label: 'Diagram', style: view.edgeStyle },
-            { key: 'model', label: 'Model', style: this.model.edgeStyle },
-            { key: 'tool', label: 'Tool', style: this.toolEdgeStyle },
-        ];
-    }
-
-    /** A diagram's properties: name, documentation and its line-style defaults. */
-    showViewProperties(view) {
-        return new DiagramViewPropertiesDialog({
-            model: this.model,
-            view,
-            document: this.document,
-            cascade: new EdgeStyleCascade(this.edgeStyleLevels(view)),
-            // The editor shows the current diagram; a style change there needs a redraw.
-            onStyleChange: () => { if (view === this.model.currentView) this.editor?.render(); },
-        }).open();
-    }
-
-    dispose() {
-        this.menuBar?.dispose();
-        this._unsubscribe();
-        super.dispose();
-    }
-}
+import { render } from '../dom.js';
+import { EditorShell } from '../EditorShell.js';
+import { EditorPart } from './EditorPart.js';
+import { DiagramEditor } from '../../charting/DiagramEditor.js';
+import { MenuBar } from '../../charting/MenuBar.js';
+import { DiagramModel } from '../../charting/diagramModel/index.js';
+import { ViewTabStrip } from '../../charting/ViewTabStrip.js';
+import { LocalJsonStore } from '../../charting/storage/LocalJsonStore.js';
+import { EdgeStyleCascade } from '../../charting/edgeStyle/index.js';
+import { DiagramViewPropertiesDialog } from '../../charting/DiagramViewPropertiesDialog.js';
+
+const SVG_NS = 'http://www.w3.org/2000/svg';
+
+/**
+ * DiagramEditorPart — a complete diagram editor as a workspace part: menu bar,
+ * palette, one tab per diagram and the canvas, over a DiagramModel.
+ *
+ * Spec (JSON): `templateType` (palette category), `tabOrientation`
+ * ('horizontal'|'vertical'), `diagramTitle` (first diagram), `toolStyleKey`
+ * (localStorage key for the tool-level line style; `null` keeps it in memory).
+ *
+ * Line styles cascade line → diagram (`view.edgeStyle`) → model
+ * (`model.edgeStyle`) → tool. Each diagram keeps its own undo history, so undo
+ * survives switching tabs. The diagrams' menu (new, duplicate, rename, delete)
+ * comes from EditorPart. Like ChartPart it needs the engine, so it is not in
+ * BUILTIN_PARTS: register it explicitly.
+ */
+export class DiagramEditorPart extends EditorPart {
+    static type = 'diagram-editor';
+    static viewNoun = 'diagram';
+
+    constructor(spec = {}) {
+        super(spec);
+        this.tabOrientation = spec.tabOrientation ?? 'horizontal';
+        // The editor is rebuilt with the canvas on every render, which follows every model change.
+        this._unsubscribe = this.model.onChange(() => { if (this.mounted) this.render(); });
+    }
+
+    createModel(spec) {
+        const store = spec.toolStyleKey === null ? null
+            : new LocalJsonStore(spec.toolStyleKey ?? 'renderengine.diagramEditor.toolEdgeStyle');
+        this.toolEdgeStyle = store?.load({}) ?? {};
+        const model = new DiagramModel({
+            name: spec.name ?? '',
+            templateType: spec.templateType ?? 'generic',
+            // Tool-level style edits go through the diagram's undo history; persist whenever it moves.
+            historyOptions: { onChange: () => store?.save(this.toolEdgeStyle) },
+        });
+        model.createView(spec.diagramTitle ?? 'Diagram 1');
+        return model;
+    }
+
+    render() {
+        const model = this.model;
+        const view = model.currentView;
+        const doc = this.document;
+        const canvasId = `diagram-canvas-${this.id}`;
+
+        const canvas = doc.createElementNS(SVG_NS, 'svg');
+        canvas.id = canvasId;
+        canvas.setAttribute('viewBox', '0 0 800 600');
+        canvas.style.cssText = 'flex: 1; width: 100%; height: 100%; display: block; background: #fff; border: 2px solid #333; box-sizing: border-box;';
+        const elements = doc.createElementNS(SVG_NS, 'g');
+        elements.id = 'elements';
+        canvas.appendChild(elements);
+
+        const tabs = new ViewTabStrip({
+            orientation: this.tabOrientation,
+            document: doc,
+            onSelect: (id) => model.switchTo(id),
+            menuItems: (id) => this.viewMenu.items(id),
+        }).render(model.views(), model.currentViewId);
+
+        // The shared workbench layout: toolbar, palette at the side, tabs + canvas in the main area.
+        const { toolbar: menuBarEl, side: palette, main } = new EditorShell({ document: doc, sideWidth: '200px' }).mount(this.container);
+        palette.classList.add('ws-diagram-palette');
+        Object.assign(palette.style, { padding: '8px', fontSize: '12px', display: 'flex', flexDirection: 'column', overflowY: 'hidden' });
+        main.style.flexDirection = this.tabOrientation === 'vertical' ? 'row' : 'column';
+        render(main, [tabs, { style: { flex: '1', display: 'flex', flexDirection: 'column', minHeight: '0' }, children: [canvas] }], doc);
+
+        // The editor is bound to the view's own maps and history: nothing to save back on switch.
+        const previous = this.editor;
+        previous?.dispose();
+        this.editor = new DiagramEditor({
+            diagramContainerId: canvasId,
+            model,
+            templateType: model.templateType,
+            onTemplateTypeChange: (type) => model.setTemplateType(type),
+            templates: view.templates,
+            edges: view.edges,
+            history: view.history,
+            arrangement: view.arrangement,
+            edgeStyleLevels: this.edgeStyleLevels(view),
+        });
+        if (previous) {
+            this.editor.showGrid = previous.showGrid;
+            this.editor.gridSize = previous.gridSize;
+        }
+        this.editor.initPaletteForDiagramType(palette, model.templateType);
+        this.menuBar?.dispose();
+        this.menuBar = new MenuBar({
+            container: menuBarEl,
+            editor: this.editor,
+            items: [this.fileMenu(), this.editMenu(), ...this.hostMenus(), ...this.editor.menuBarItems()],
+        }).render();
+        this.editor.render();
+    }
+
+    /** A diagram's line-style levels, most specific first: the diagram, the model, the tool. */
+    edgeStyleLevels(view) {
+        return [
+            { key: 'view', label: 'Diagram', style: view.edgeStyle },
+            { key: 'model', label: 'Model', style: this.model.edgeStyle },
+            { key: 'tool', label: 'Tool', style: this.toolEdgeStyle },
+        ];
+    }
+
+    /** A diagram's properties: name, documentation and its line-style defaults. */
+    showViewProperties(view) {
+        return new DiagramViewPropertiesDialog({
+            model: this.model,
+            view,
+            document: this.document,
+            cascade: new EdgeStyleCascade(this.edgeStyleLevels(view)),
+            // The editor shows the current diagram; a style change there needs a redraw.
+            onStyleChange: () => { if (view === this.model.currentView) this.editor?.render(); },
+        }).open();
+    }
+
+    dispose() {
+        this.menuBar?.dispose();
+        this._unsubscribe();
+        super.dispose();
+    }
+}

package/src/workspace/parts/EditorPart.js

@@ -29,7 +29,9 @@ import { NAME_TRANSFORMS } from '../../charting/diagramModel/nameTransforms.js';
  *
  * 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, and its tab follows its file's name and saved state.
+ * 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'). */
@@ -113,6 +115,11 @@ export class EditorPart extends Part {
         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());
@@ -132,8 +139,8 @@ export class EditorPart extends Part {
         ];
     }
 
-    /** Run a model-wide edit (null: nothing to do) as one undo step, then redraw. @protected */
-    _runModelEdit(command) {
+    /** 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();
@@ -162,7 +169,7 @@ export class EditorPart extends Part {
 
     /** Transform names (ModelSearch#transformCommand), one undo step. */
     transformNames(transform, text = '') {
-        return this._runModelEdit(this.model.search().transformCommand(transform, text));
+        return this.runModelEdit(this.model.search().transformCommand(transform, text));
     }
 
     /** Rename property…: a property's name, everywhere in the model. One undo step. */
@@ -184,7 +191,7 @@ export class EditorPart extends Part {
 
     /** Rename a property everywhere (ModelSearch#renamePropertyCommand), one undo step. */
     renameProperty(from, to) {
-        return this._runModelEdit(this.model.search().renamePropertyCommand(from, to));
+        return this.runModelEdit(this.model.search().renamePropertyCommand(from, to));
     }
 
     /**
@@ -260,18 +267,30 @@ export class EditorPart extends Part {
         ]);
     }
 
-    /** File > Import's items: each format that imports (it replaces the model), then the subclass's own (ownImportItems). */
+    /**
+     * 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.replaceModel(model); this.file.forget(); },
+                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([

package/src/workspace/parts/ModelsPart.js

@@ -1,6 +1,7 @@
 import { Part } from '../Part.js';
 import { WorkArea } from '../workArea.js';
 import { el } from '../dom.js';
+import { ModelCompareDialog, ModelMergeDialog } from '../../charting/ModelComparisonDialog.js';
 
 /**
  * ModelsPart — several models open at once (as Archi's model tree holds
@@ -10,7 +11,10 @@ import { el } from '../dom.js';
  * them as between any two editors.
  *
  * The editor parts it hosts find it as `ctx.models` and offer, in their File
- * menu, New model, Open… in a new tab and Close model. A tab shows its file's
+ * menu, New model, Open… in a new tab and Close model; a model imported from
+ * a file opens in a tab of its own. Their Tools menu works across the open
+ * models (toolItems): compare one with another, and merge from another into
+ * it (ModelComparison). A tab shows its file's
  * name and • while it has unsaved changes; closing one with unsaved changes
  * asks first; the page title follows the model in front. The last model
  * closed leaves a new, empty one.
@@ -74,6 +78,59 @@ export class ModelsPart extends Part {
         return part;
     }
 
+    /**
+     * Open a model made elsewhere (one imported from a file) in a new tab,
+     * as it is: nothing to undo, not yet saved to a file. Returns the part.
+     */
+    openModel(model) {
+        const part = this.newModel();
+        part.replaceModel(model);
+        this.work.focus(part.id);
+        this.fileStateChanged(part);
+        return part;
+    }
+
+    /**
+     * The Tools menu's items for one open model (`part`): Compare with and
+     * Merge from, each a submenu of the other open models.
+     */
+    toolItems(part) {
+        const others = this.models().filter(m => m !== part);
+        const each = (act) => (others.length
+            ? others.map(other => ({ label: this.labelOf(other), action: () => act(part, other) }))
+            : [{ label: 'Open another model first', disabled: true }]);
+        return [
+            { label: 'Compare with', items: each((a, b) => this.compare(a, b)) },
+            { label: 'Merge from', items: each((a, b) => this.merge(a, b)) },
+        ];
+    }
+
+    /** How `part`'s model differs from `other`'s, shown (ModelCompareDialog); its Merge… goes on to merge. */
+    compare(part, other) {
+        return new ModelCompareDialog({
+            ...this._comparing(part, other),
+            onMerge: () => this.merge(part, other),
+        }).open();
+    }
+
+    /** Choose what to bring from `other`'s model into `part`'s, then bring it: one undo step there. */
+    merge(part, other) {
+        return new ModelMergeDialog({
+            ...this._comparing(part, other),
+            onMerge: (command) => part.runModelEdit(command),
+        }).open();
+    }
+
+    /** @private */
+    _comparing(part, other) {
+        return {
+            comparison: part.model.compareWith(other.model),
+            mineName: part.model.name || this.labelOf(part),
+            theirsName: other.model.name || this.labelOf(other),
+            document: this.container?.ownerDocument ?? globalThis.document,
+        };
+    }
+
     /**
      * Ask for a file (as `from`'s Open… does) and open it in a new tab,
      * leaving `from`'s model as it is. Returns the new part, or null.