@peter.prib/renderengine 0.2.6 → 0.2.7

package/src/workspace/parts/DataModelPart.js

@@ -3,8 +3,15 @@ import { el } from '../dom.js';
 import { MenuBar } from '../../charting/MenuBar.js';
 import { ToolbarSelect, ToolbarMenu, ToolbarText } from '../../charting/toolbar/index.js';
 import { FormDialog } from '../../charting/FormDialog.js';
+import { ModelCheckDialog } from '../../charting/ModelCheckDialog.js';
 import { DataModelNotation } from '../../datamodel.js';
-import { DataModel, DataModelPerspective, DataModelContext } from '../../charting/datamodel/index.js';
+import {
+    DataModel, DataModelPerspective, DataModelContext, DataModelFileFormat, ServiceDomain, ServiceLandscape, BianLandscapeReader,
+    BianSemanticApiReader, DataType, EnumerationType, StructuredType,
+} from '../../charting/datamodel/index.js';
+import { pickFile } from '../../charting/toolbar/pickFile.js';
+import { ModelFile } from './ModelFile.js';
+import { EditorPart } from './EditorPart.js';
 import { downloadPng, downloadSvg } from '../../exportImage.js';
 
 /**
@@ -13,12 +20,21 @@ import { downloadPng, downloadSvg } from '../../exportImage.js';
  * how they map; seen through a perspective (whose concepts, under whose names)
  * read in a context (what they mean here, the rules that hold, where and
  * when), in a notation (Chen, Crow's Foot, UML). Its toolbar switches each
- * of them, Level offering Mapping (the levels side by side, joined where they
- * map), and its Model menu makes, changes and removes perspectives and
- * contexts. Boxes and notes stay where they were dragged. Export ▸ saves the
+ * of them, Level offering the views that are no level (DataModel.OTHER_VIEWS:
+ * Mapping, the levels side by side joined where they map; Service landscape,
+ * the service domains in their business areas and domains, a double-click
+ * seeing the model through one), and its Model menu makes, changes and removes
+ * perspectives and contexts and reads service domains from a BIAN landscape. Boxes and notes stay where they were dragged. Export ▸ saves the
  * picture (PNG, SVG). The drawing, its sizing and redrawing on resize are
  * ChartPart's.
  *
+ * It is saved as a file (DataModelFileFormat, `.datamodel.json`) as an
+ * editor's model is (ModelFile): File ▸ Open…, Save, Save As… (Ctrl+O, Ctrl+S),
+ * • while changed since, and asking before the page is left with changes
+ * unsaved. Hosted by a ModelsPart (`editorType: 'data-model'`) it is one of
+ * several models open, a tab each, and with that part's `keep` it is kept in
+ * this browser and backed up (File ▸ This browser), as the modeller's are.
+ *
  * Spec: `{ id, type: 'data-model', title?, levels?, mappings?, mappingLayout?,
  * perspectives?, contexts?, perspective?, context?, level?, notation?, options? }`
  * — the model as DataModel takes it (or `entities`/`relationships` in the older
@@ -32,8 +48,11 @@ export class DataModelPart extends ChartPart {
     constructor(spec = {}) {
         const { perspective = null, context = null, level = 'logical', notation = 'crowsfoot', options = {} } = spec;
         super({ ...spec, chartType: 'dataModel', options: { editable: true, resizable: true, ...options, level, notation } });
-        /** The levels, their mappings, perspectives and contexts. */
-        this.model = new DataModel(spec);
+        /** The file it is open from and saved to. */
+        this.file = new ModelFile(this);
+        /** Its id among the models kept in this browser, or null. */
+        this.keepId = spec.keepId ?? null;
+        this._adoptModel(new DataModel(spec));
         /** The ids chosen, or null. */
         this.perspectiveId = perspective;
         this.contextId = context ?? this.model.perspective(perspective)?.context ?? null;
@@ -41,9 +60,114 @@ export class DataModelPart extends ChartPart {
         this._drawnLevel = level;
     }
 
+    // ===== A model saved as a file, kept, backed up =====
+
+    /** Its file formats: the data model's own. */
+    fileFormats() {
+        return [DataModelFileFormat.instance ??= new DataModelFileFormat()];
+    }
+
+    saveFormat() {
+        return this.fileFormats()[0];
+    }
+
+    /** The ModelsPart it is a tab of, or null. */
+    get modelsHost() {
+        return this.ctx?.models ?? null;
+    }
+
+    /** The page it is in. */
+    get document() {
+        return this.container?.ownerDocument ?? globalThis.document;
+    }
+
+    /** What its tab and the page title show: the file's name (or the model's), and • while changed. */
+    get fileLabel() {
+        return this.file.label;
+    }
+
+    /** The model as kept in this browser (ModelFile#keepEntry). */
+    keepEntry() {
+        return this.file.keepEntry();
+    }
+
+    /** Edit another model (one opened, imported or kept), from scratch: nothing chosen, nothing changed. */
+    replaceModel(model) {
+        this._adoptModel(model);
+        this.perspectiveId = null;
+        this.contextId = null;
+        if (this.mounted) this.render();
+    }
+
+    /** A model opened from a file in a host's new tab (as EditorPart does). */
+    onImported(model) {
+        return EditorPart.prototype.onImported.call(this, model);
+    }
+
+    /** The file or its saved state changed: a ModelsPart's tab follows it. */
+    onFileState() {
+        this.modelsHost?.fileStateChanged?.(this);
+    }
+
+    /** Edit `model`: every change of it shows (• and the title) and is kept. @private */
+    _adoptModel(model) {
+        this._unsubscribeEdits?.();
+        this.model = model;
+        model.markSaved();
+        this._unsubscribeEdits = model.onEdit(() => {
+            this.file.showState();
+            this.modelsHost?.modelEdited?.(this);
+        });
+    }
+
+    mount(host, ctx) {
+        const first = !this.mounted;
+        super.mount(host, ctx);
+        if (first) {
+            this.file.listen();
+            this.file.showState();
+        }
+    }
+
+    /**
+     * File ▸: Open…, Save, Save As…, then with a ModelsPart New model and Close
+     * model, and This browser ▸ (keeping and backups).
+     */
+    fileItems() {
+        const host = this.modelsHost;
+        return EditorPart.tidyMenu([
+            ...this.file.menuItems(),
+            ...(host ? [
+                { separator: true },
+                ...EditorPart.menuGroup('New', [{ label: 'New model', action: () => host.newModel() }, ...(host.baseItems?.() ?? [])]),
+                { label: 'Duplicate model', action: () => host.duplicate(this) },
+                { label: 'Close model', action: () => host.closeModel(this.id) },
+                ...EditorPart.menuGroup('This browser', host.keepItems?.(this) ?? []),
+            ] : []),
+        ]);
+    }
+
+    /** Edit ▸: undo and redo (a merge is one step). */
+    editItems() {
+        const history = this.model.history;
+        return [
+            { label: history.canUndo ? `Undo ${history.undoLabel}` : 'Undo', disabled: !history.canUndo || undefined, action: () => { history.undo(); this._redraw(); } },
+            { label: history.canRedo ? `Redo ${history.redoLabel}` : 'Redo', disabled: !history.canRedo || undefined, action: () => { history.redo(); this._redraw(); } },
+        ];
+    }
+
+    /** Run a model-wide edit (a merge) as one undo step, then redraw. */
+    runModelEdit(command) {
+        if (!command) return null;
+        this.model.history.execute(command);
+        this._changed();
+        this._redraw();
+        return command;
+    }
+
     /** The entities at the level shown (the concepts in the mapping view). */
     get entities() {
-        return this.model.level(this.level === DataModel.MAPPING ? 'conceptual' : this.level).entities;
+        return this.model.level(DataModel.otherView(this.level) ? 'conceptual' : this.level).entities;
     }
     get level() { return this.chartOptions.level; }
     get notation() { return this.chartOptions.notation; }
@@ -80,7 +204,18 @@ export class DataModelPart extends ChartPart {
 
     /** What is drawn: the perspective's view of the level (or the mapping) in the context (DataModel#view), in the notation. */
     drawOptions() {
-        return { ...this.chartOptions, ...this.model.view({ perspective: this.perspectiveId, context: this.contextId, level: this.level }) };
+        return {
+            ...this.chartOptions,
+            ...this.model.view({ perspective: this.perspectiveId, context: this.contextId, level: this.level }),
+            ...(this.level === DataModel.LANDSCAPE && { onNodeDoubleClick: (node) => this.openServiceDomain(ServiceLandscape.serviceDomainOf(node.id)) }),
+        };
+    }
+
+    /** See the model through a service domain (an id), at the logical level, where its business objects are. */
+    openServiceDomain(id) {
+        if (!this.model.perspective(id)) return;
+        this.chartOptions.level = 'logical';
+        this.setPerspective(id);
     }
 
     render() {
@@ -98,10 +233,14 @@ export class DataModelPart extends ChartPart {
      */
     menuBarItems() {
         const { perspectives, contexts } = this.model;
+        const host = this.modelsHost;
         return [
+            new ToolbarMenu('File', () => this.fileItems()),
+            new ToolbarMenu('Edit', () => this.editItems()),
+            ...(host ? [new ToolbarMenu('Tools', () => host.toolItems(this))] : []),
             new ToolbarMenu('Model', () => this.modelItems()),
             ...(perspectives.length ? [new ToolbarSelect('Perspective',
-                () => [['', 'Whole schema'], ...this.model.perspectives.map(p => [p.id, p.name, p.description])],
+                () => [['', 'Whole schema'], ...this.model.perspectives.map(p => [p.id, p.constructor === DataModelPerspective ? p.name : `${p.name} (${p.constructor.kindLabel.toLowerCase()})`, p.description])],
                 () => this.perspectiveId ?? '', (v) => this.setPerspective(v))] : []),
             ...(contexts.length ? [
                 new ToolbarSelect('Context',
@@ -111,7 +250,7 @@ export class DataModelPart extends ChartPart {
             ] : []),
             new ToolbarSelect('Level', () => [
                 ...DataModelNotation.levels().map(l => [l.name, l.label, l.description]),
-                [DataModel.MAPPING, 'Mapping', 'The levels side by side, joined where one realises another'],
+                ...DataModel.OTHER_VIEWS.filter(v => v.offered(this.model) || v.name === this.level).map(v => [v.name, v.label, v.description]),
             ], () => this.level, (v) => this.setLevel(v)),
             new ToolbarSelect('Notation', () => DataModelNotation.notations().map(n => [n.name, n.label]), () => this.notation, (v) => this.setNotation(v)),
             new ToolbarMenu('Export', () => this.exportItems()),
@@ -122,19 +261,170 @@ export class DataModelPart extends ChartPart {
     modelItems() {
         return [
             { label: 'New perspective…', action: () => this.editPerspective(null) },
+            { label: 'New service domain…', action: () => this.editPerspective(null, ServiceDomain) },
+            { label: 'Read service domains from a BIAN landscape…', action: () => this.readLandscape() },
+            { label: 'Read a BIAN service domain (semantic API)…', action: () => this.readSemanticApi() },
             { label: 'Edit perspective…', disabled: !this.perspective || undefined, action: () => this.editPerspective(this.perspective) },
             { label: 'Delete perspective', disabled: !this.perspective || undefined, action: () => this.removePerspective(this.perspectiveId) },
             { separator: true },
+            ...EditorPart.menuGroup('Data types', this.dataTypeItems()),
+            { separator: true },
             { label: 'New context…', action: () => this.editContext(null) },
             { label: 'Edit context…', disabled: !this.context || undefined, action: () => this.editContext(this.context) },
             { label: 'Delete context', disabled: !this.context || undefined, action: () => this.removeContext(this.contextId) },
+            { separator: true },
+            { label: 'Check model…', action: () => this.checkModel() },
         ];
     }
 
+    /**
+     * Service domains from BIAN's published service landscape (an ArchiMate
+     * model: an Archi file or the Exchange Format; BianLandscapeReader), as one
+     * undo step (DataModel#serviceDomainsCommand); then the landscape is shown.
+     * @param {Object} [options] - As readInto's, and `reader` (a BianLandscapeReader)
+     * @returns {Promise<Command|null>}
+     */
+    readLandscape({ reader = new BianLandscapeReader(), ...options } = {}) {
+        let found = 0;
+        return this.readInto({
+            ...options, accept: '.archimate,.xml', what: 'the landscape',
+            command: (bytes, name) => {
+                const specs = reader.read(BianLandscapeReader.parse(bytes));
+                found = specs.length;
+                return this.model.serviceDomainsCommand(specs, `"${name}"`);
+            },
+            nothing: (name) => (found
+                ? `"${name}" brings nothing new: its ${found} service domain${found === 1 ? ' is' : 's are'} here as ${found === 1 ? 'it is' : 'they are'}.`
+                : `"${name}" has no service domains (Capabilities with none inside them).`),
+            then: () => { this.chartOptions.level = DataModel.LANDSCAPE; this.perspectiveId = null; },
+        });
+    }
+
+    /**
+     * A service domain from one of BIAN's semantic APIs (an OpenAPI file, YAML
+     * or JSON; BianSemanticApiReader): its control record and behaviour
+     * qualifiers as logical entities, the schemas they use as data types, and
+     * the service domain, as one undo step (DataModel#bringCommand); then the
+     * model is seen through it at the logical level. An entity the model has
+     * by name stays as it is and is used.
+     * @param {Object} [options] - As readInto's, and `depth` (BianSemanticApiReader's)
+     * @returns {Promise<Command|null>}
+     */
+    readSemanticApi({ depth = 1, ...options } = {}) {
+        let read = null;
+        return this.readInto({
+            ...options, accept: '.yaml,.yml,.json', what: 'the semantic API',
+            command: (bytes, name) => {
+                const reader = new BianSemanticApiReader({ depth, entityNames: this.model.level('logical').entities.map(e => e.name) });
+                read = reader.read(BianSemanticApiReader.parse(new TextDecoder().decode(bytes)));
+                const [sd] = read.serviceDomains;
+                return this.model.bringCommand(read, `Read ${sd.name} from "${name}"`);
+            },
+            nothing: (name) => `"${name}" brings nothing the model does not have.`,
+            then: () => {
+                // The service domain is the one here of its id or name (bringCommand keeps it), else the new one.
+                const [sd] = read.serviceDomains;
+                const here = this.model.perspective(sd.id) ?? this.model.perspectives.find(p => p.name.toLowerCase() === sd.name.toLowerCase());
+                this.chartOptions.level = 'logical';
+                this.perspectiveId = here?.id ?? sd.id;
+            },
+        });
+    }
+
+    /**
+     * Ask for a file, make a command from its bytes, and run it as one undo
+     * step; a file that cannot be read, or brings nothing, is reported.
+     * @param {Object} how
+     * @param {string} how.accept - The file chooser's filter
+     * @param {string} how.what - What is read, for the report ('the landscape')
+     * @param {(bytes: Uint8Array, name: string) => Command|null} how.command
+     * @param {(name: string) => string} how.nothing - The report when the command is null
+     * @param {() => void} [how.then] - What to show once it is run (before the redraw)
+     * @param {(accept: string) => Promise<File|null>} [how.chooseFile]
+     * @param {(message: string) => void} [how.report]
+     * @returns {Promise<Command|null>}
+     */
+    async readInto({ accept, what, command: make, nothing, then = () => {}, chooseFile = null, report = null }) {
+        const doc = this.container?.ownerDocument ?? globalThis.document;
+        const tell = report ?? ((message) => (doc.defaultView ?? globalThis).alert(message));
+        const file = await (chooseFile ?? ((filter) => pickFile(filter, doc)))(accept);
+        if (!file) return null;
+        let command;
+        try {
+            command = make(new Uint8Array(await file.arrayBuffer()), file.name);
+        } catch (err) {
+            tell(`Could not read ${what}: ${err.message}`);
+            return null;
+        }
+        if (!command) {
+            tell(nothing(file.name));
+            return null;
+        }
+        then();
+        this.runModelEdit(command);
+        return command;
+    }
+
+    /** Model ▸ Data types ▸: a new one of each kind, then each to change or remove. */
+    dataTypeItems() {
+        const types = this.model.dataTypes;
+        return [
+            ...[EnumerationType, StructuredType, DataType].map(Kind => ({ label: `New ${Kind.kindLabel.toLowerCase()}…`, action: () => this.editDataType(null, Kind) })),
+            ...(types.length ? [
+                { separator: true },
+                { label: 'Show data types', action: () => this.setLevel(DataModel.DATA_TYPES) },
+                { label: 'Edit', items: types.map(t => ({ label: `${t.name} (${t.constructor.kindLabel.toLowerCase()})…`, action: () => this.editDataType(t) })) },
+                { label: 'Delete', items: types.map(t => ({ label: t.name, action: () => this.removeDataType(t.id) })) },
+            ] : []),
+        ];
+    }
+
+    /** A dialog making a data type of a kind (none given) or changing one (its kind's fields); applied, the data types are shown. */
+    editDataType(type, Kind = type?.constructor ?? DataType) {
+        const title = type ? `${Kind.kindLabel}: ${type.name}` : `New ${Kind.kindLabel.toLowerCase()}`;
+        return this._dialog(title, Kind.fields(this.model, type), (values) => {
+            const spec = Kind.specFrom(values, this.model, type);
+            if (type) this.model.updateDataType(type.id, spec); else this.model.addDataType(spec);
+            this.chartOptions.level = DataModel.DATA_TYPES;
+            this._changed();
+            this._redraw();
+        });
+    }
+
+    removeDataType(id) {
+        this.model.removeDataType(id);
+        if (this.level === DataModel.DATA_TYPES && !this.model.dataTypes.length) this.chartOptions.level = 'logical';
+        this._changed();
+        this._redraw();
+    }
+
+    /** Check the model (DataModelChecker) and list the findings; choosing one shows it (revealFinding). Returns the findings. */
+    checkModel() {
+        const findings = this.model.checker().run();
+        new ModelCheckDialog({ findings, onReveal: (finding) => this.revealFinding(finding), document: this.document }).open();
+        return findings;
+    }
+
+    /** Show what a finding names: an entity's level, a service domain seen through at the logical level, the mapping or data types view. */
+    revealFinding(finding) {
+        if (finding.kind === 'perspective') {
+            this.chartOptions.level = 'logical';
+            this.setPerspective(finding.ids[0]);
+        } else if (finding.kind === 'mapping') {
+            this.setLevel(DataModel.MAPPING);
+        } else if (finding.kind === 'data-type') {
+            this.setLevel(DataModel.DATA_TYPES);
+        } else if (finding.level) {
+            this.setLevel(finding.level);
+        }
+        this.menuBar?.render?.();
+    }
+
     /** A dialog making a perspective (none given) or changing one (DataModelPerspective.fields); applied, it is the one seen through. */
-    editPerspective(perspective) {
-        return this._dialog(perspective ? `Perspective: ${perspective.name}` : 'New perspective', DataModelPerspective.fields(this.model, perspective), (values) => {
-            const spec = DataModelPerspective.specFrom(values, this.model);
+    editPerspective(perspective, Kind = perspective?.constructor ?? DataModelPerspective) {
+        const title = perspective ? `${Kind.kindLabel}: ${perspective.name}` : `New ${Kind.kindLabel.toLowerCase()}`;
+        return this._dialog(title, Kind.fields(this.model, perspective), (values) => {
+            const spec = Kind.specFrom(values, this.model, perspective);
             const saved = perspective ? this.model.updatePerspective(perspective.id, spec) : this.model.addPerspective(spec);
             this._changed();
             this.setPerspective(saved.id);
@@ -179,9 +469,9 @@ export class DataModelPart extends ChartPart {
         this.menuBar?.render?.();
     }
 
-    /** Export ▸: the picture, as PNG or SVG, named after the part. */
+    /** Export ▸: the picture, as PNG or SVG, named after the model. */
     exportItems() {
-        const name = this.title || 'data-model';
+        const name = this.model.name || this.title || 'data-model';
         return [
             { label: 'Image (PNG)', action: () => downloadPng(this.canvasHost, { name }) },
             { label: 'Image (SVG)', action: () => downloadSvg(this.canvasHost, { name }) },
@@ -198,26 +488,46 @@ export class DataModelPart extends ChartPart {
      * time): on the level shown, or in the mapping view's own layout. Then draw.
      */
     _draw() {
+        if (this._keepPlaces()) this.model.edited();   // a box or note moved is a change, kept and saved
+        this._drawnLevel = this.level;
+        super._draw();
+    }
+
+    /**
+     * Keep where the drawing on screen has its boxes and notes: on the level
+     * it shows, or in the mapping view's layout. Returns whether any moved. @private
+     */
+    _keepPlaces() {
         const pos = this.engine?._graph?.pos;
-        if (pos && this._drawnLevel) {
-            if (this._drawnLevel === DataModel.MAPPING) {
-                for (const [id, p] of pos) if (id.includes(':')) this.model.mappingLayout[id] = { x: p.x, y: p.y };
-            } else {
-                for (const entity of this.model.level(this._drawnLevel).entities) {
-                    const p = pos.get(entity.id);
-                    if (p) { entity.x = p.x; entity.y = p.y; }
-                }
-                for (const rule of this.model.contexts.flatMap(c => c.constraints)) {
-                    const p = pos.get(rule.id);
-                    if (p) this.model.placeNote(this._drawnLevel, rule, p);
-                }
+        if (!pos || !this._drawnLevel) return false;
+        let moved = false;
+        const place = (p, before, put) => {
+            if (!p || (before && before.x === p.x && before.y === p.y)) return;
+            put({ x: p.x, y: p.y });
+            moved = true;
+        };
+        const other = DataModel.otherView(this._drawnLevel);
+        if (other && !other.keepsPlaces) return false;   // laid out by its structure, anew each time
+        if (other) {
+            for (const [id, p] of pos) {
+                if (id.includes(':')) place(p, this.model.mappingLayout[id], (at) => { this.model.mappingLayout[id] = at; });
             }
+            return moved;
         }
-        this._drawnLevel = this.level;
-        super._draw();
+        for (const entity of this.model.level(this._drawnLevel).entities) {
+            place(pos.get(entity.id), entity, (at) => Object.assign(entity, at));
+        }
+        for (const rule of this.model.contexts.flatMap(c => c.constraints)) {
+            const p = pos.get(rule.id);
+            const before = this.model.notePlace(this._drawnLevel, rule);
+            place(p, Number.isFinite(before.x) ? before : null, (at) => this.model.placeNote(this._drawnLevel, rule, at));
+        }
+        return moved;
     }
 
     dispose() {
+        this._unsubscribeEdits?.();
+        this.file.restoreTitle();
         this.menuBar?.dispose?.();
         super.dispose();
     }

package/src/workspace/parts/DiagramEditorPart.js

@@ -4,7 +4,6 @@ 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';
@@ -64,15 +63,10 @@ export class DiagramEditorPart extends EditorPart {
         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);
+        const tabs = this.viewTabs({ orientation: this.tabOrientation });
 
         // 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);
+        const { toolbar: menuBarEl, side: palette, main } = new EditorShell({ document: doc, sideWidth: '200px', layout: this.layout, labels: { side: 'Palette' } }).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';