@peter.prib/renderengine 0.15.1 → 0.15.3

package/src/charting/diagramModel/DiagramView.js

@@ -1,61 +1,102 @@
-import { DiagramEditorState } from '../DiagramEditorState.js';
-
-/**
- * DiagramView — one diagram (tab) of a DiagramModel: its shapes, lines,
- * diagram-level line style and its own undo history (from DiagramEditorState).
- *
- * A DiagramEditor is bound directly to `templates`/`edges`, so edits land here
- * with nothing to save back, and the history survives the editor being rebuilt.
- */
-export class DiagramView extends DiagramEditorState {
-    /**
-     * @param {Object} options
-     * @param {string} options.id
-     * @param {string} options.title
-     * @param {Map<string, Template>} [options.templates]
-     * @param {Map<string, Edge>} [options.edges]
-     * @param {Object} [options.edgeStyle] - Diagram-level line style defaults
-     * @param {Object} [options.historyOptions] - Passed to CommandHistory (e.g. onChange)
-     * @param {string} [options.documentation]
-     */
-    constructor({ id, title, templates = new Map(), edges = new Map(), edgeStyle = {}, historyOptions = {}, documentation = undefined, arrangement = null }) {
-        super({ historyOptions, arrangement });
-        this.historyOptions = historyOptions;
-        this.id = id;
-        this.title = title;
-        this.documentation = documentation;
-        this.templates = templates;
-        this.edges = edges;
-        this.edgeStyle = edgeStyle;
-    }
-
-    /** The shapes are what stack. */
-    layerItems() {
-        return [...this.templates.values()];
-    }
-
-    /** The diagram as plain JSON: its shapes (by id), lines, line style and documentation. */
-    toJSON() {
-        return {
-            title: this.title,
-            documentation: this.documentation,
-            templates: [...this.templates].map(([id, t]) => ({ id, type: t.constructor.name, name: t.name, data: t.serialize() })),
-            edges: [...this.edges.values()].map(e => JSON.parse(JSON.stringify(e))),
-            edgeStyle: JSON.parse(JSON.stringify(this.edgeStyle ?? {})),
-        };
-    }
-
-    /** An independent copy: shapes, lines, style and documentation are copied; history starts empty (same options). */
-    copy(id, title, historyOptions = this.historyOptions) {
-        return new DiagramView({
-            id,
-            title,
-            templates: new Map([...this.templates].map(([tid, t]) => [tid, new t.constructor(tid, t.name, t.serialize())])),
-            edges: new Map([...this.edges].map(([eid, e]) => [eid, e.clone()])),
-            edgeStyle: { ...this.edgeStyle },
-            documentation: this.documentation,
-            historyOptions,
-            arrangement: this.arrangement.copy(),   // template ids are kept
-        });
-    }
-}
+import { DiagramEditorState } from '../DiagramEditorState.js';
+import { Edge } from '../Edge.js';
+import { Arrangement } from '../arrangement/Arrangement.js';
+import { templateClassFor, templateTypeKey } from '../templates/templateRegistry.js';
+
+/**
+ * DiagramView — one diagram (tab) of a DiagramModel: its shapes, lines,
+ * diagram-level line style and its own undo history (from DiagramEditorState).
+ *
+ * A DiagramEditor is bound directly to `templates`/`edges`, so edits land here
+ * with nothing to save back, and the history survives the editor being rebuilt.
+ */
+export class DiagramView extends DiagramEditorState {
+    /**
+     * @param {Object} options
+     * @param {string} options.id
+     * @param {string} options.title
+     * @param {Map<string, Template>} [options.templates]
+     * @param {Map<string, Edge>} [options.edges]
+     * @param {Object} [options.edgeStyle] - Diagram-level line style defaults
+     * @param {Object} [options.viewSettings] - Diagram appearance: background, watermark, title band
+     * @param {Object} [options.historyOptions] - Passed to CommandHistory (e.g. onChange)
+     * @param {string} [options.documentation]
+     * @param {Arrangement} [options.arrangement]
+     */
+    constructor({ id, title, templates = new Map(), edges = new Map(), edgeStyle = {}, viewSettings = {}, historyOptions = {}, documentation = undefined, arrangement = null }) {
+        super({ historyOptions, arrangement });
+        this.historyOptions = historyOptions;
+        this.id = id;
+        this.title = title;
+        this.documentation = documentation;
+        this.templates = templates;
+        this.edges = edges;
+        this.edgeStyle = edgeStyle;
+        this.viewSettings = viewSettings;
+    }
+
+    /** The shapes are what stack. */
+    layerItems() {
+        return [...this.templates.values()];
+    }
+
+    /** The diagram as plain JSON: its shapes (by id and stable type), lines, line style and documentation. */
+    toJSON() {
+        return {
+            id: this.id,
+            title: this.title,
+            documentation: this.documentation,
+            templates: [...this.templates].map(([id, t]) => ({
+                id,
+                type: templateTypeKey(t),
+                name: t.name,
+                data: t.serialize(),
+            })),
+            edges: [...this.edges.values()].map(e => (typeof e.toJSON === 'function' ? e.toJSON() : JSON.parse(JSON.stringify(e)))),
+            edgeStyle: JSON.parse(JSON.stringify(this.edgeStyle ?? {})),
+            ...(this.viewSettings && Object.keys(this.viewSettings).length ? { viewSettings: JSON.parse(JSON.stringify(this.viewSettings)) } : {}),
+            ...(this.arrangement && { arrangement: this.arrangement.toJSON() }),
+        };
+    }
+
+    /** Reconstruct a DiagramView from plain JSON. */
+    static fromJSON(json, historyOptions = {}) {
+        if (!json) throw new TypeError('DiagramView.fromJSON requires a JSON object');
+        const templates = new Map();
+        for (const t of (json.templates ?? [])) {
+            const Class = templateClassFor(t.type);
+            templates.set(t.id, new Class(t.id, t.name, t.data ?? {}));
+        }
+        const edges = new Map();
+        for (const e of (json.edges ?? [])) {
+            edges.set(e.id, Edge.fromJSON(e));
+        }
+        const arrangement = json.arrangement ? Arrangement.fromJSON(json.arrangement) : null;
+        return new DiagramView({
+            id: json.id,
+            title: json.title,
+            templates,
+            edges,
+            edgeStyle: json.edgeStyle ?? {},
+            viewSettings: json.viewSettings ? JSON.parse(JSON.stringify(json.viewSettings)) : {},
+            documentation: json.documentation,
+            historyOptions,
+            arrangement,
+        });
+    }
+
+    /** An independent copy: shapes, lines, style and documentation are copied; history starts empty (same options). */
+    copy(id, title, historyOptions = this.historyOptions) {
+        return new DiagramView({
+            id,
+            title,
+            templates: new Map([...this.templates].map(([tid, t]) => [tid, new t.constructor(tid, t.name, t.serialize())])),
+            edges: new Map([...this.edges].map(([eid, e]) => [eid, e.clone()])),
+            edgeStyle: { ...this.edgeStyle },
+            viewSettings: { ...(this.viewSettings ?? {}) },
+            documentation: this.documentation,
+            historyOptions,
+            arrangement: this.arrangement?.copy() ?? null,   // template ids are kept
+        });
+    }
+}

package/src/charting/diagramModel/index.js

@@ -1,10 +1,11 @@
-export { DiagramModel } from './DiagramModel.js';
-export { DiagramView } from './DiagramView.js';
-export { ViewSetModel } from './ViewSetModel.js';
-export { ModelSearch, SEARCH_FIELDS } from './ModelSearch.js';
-export { DiagramModelSearch } from './DiagramModelSearch.js';
-export { ReplaceTextCommand } from './ReplaceTextCommand.js';
-export { ModelComparison } from './ModelComparison.js';
-export { ComparedKind } from './ComparedKind.js';
-export { ViewsCompared } from './ViewsCompared.js';
-export { MergeModelCommand } from './MergeModelCommand.js';
+export { DiagramModel } from './DiagramModel.js';
+export { DiagramView } from './DiagramView.js';
+export { ViewSetModel } from './ViewSetModel.js';
+export { ModelSearch, SEARCH_FIELDS } from './ModelSearch.js';
+export { DiagramModelSearch } from './DiagramModelSearch.js';
+export { ReplaceTextCommand } from './ReplaceTextCommand.js';
+export { ModelComparison } from './ModelComparison.js';
+export { ComparedKind } from './ComparedKind.js';
+export { ViewsCompared } from './ViewsCompared.js';
+export { MergeModelCommand } from './MergeModelCommand.js';
+export { DiagramJsonFileFormat } from './DiagramJsonFileFormat.js';

package/src/charting/diagrams/AddGroupToViewCommand.js

@@ -0,0 +1,35 @@
+import { Command } from '../CommandHistory.js';
+
+/**
+ * AddGroupToViewCommand — add a view-specific group to a view: its layout entry
+ * is stored in view.folderLayout. Undo removes it.
+ */
+export class AddGroupToViewCommand extends Command {
+    /**
+     * @param {ArchimateView} view
+     * @param {Object} [options]
+     * @param {string} [options.id]
+     * @param {string} [options.name]
+     * @param {number} [options.x]
+     * @param {number} [options.y]
+     * @param {number} [options.width]
+     * @param {number} [options.height]
+     * @param {number} [options.zIndex]
+     * @param {Object} [options.appearance]
+     * @param {string} [options.parentId]
+     */
+    constructor(view, { id = `group-${Date.now().toString(36)}`, name = 'Group', x = 100, y = 100, width = 400, height = 140, zIndex = 0, appearance = {}, parentId = undefined } = {}) {
+        super('Add group to view');
+        this.view = view;
+        this.groupId = id;
+        this.entry = { x, y, width, height, name, zIndex, appearance, parentId };
+    }
+
+    execute() {
+        this.view.folderLayout[this.groupId] = { ...this.entry };
+    }
+
+    undo() {
+        delete this.view.folderLayout[this.groupId];
+    }
+}

package/src/charting/diagrams/ArchimateModel.js

@@ -17,6 +17,8 @@ import { DIAGRAM_BOX_KINDS } from '../canvas/diagramBoxKinds.js';
 import { RemoveLineCommand } from './RemoveLineCommand.js';
 import { CompositeCommand } from '../CommandHistory.js';
 import { AddToViewCommand, DeleteElementCommand, AddRelationshipToViewCommand, RemoveRelationshipFromViewCommand } from './ArchimateCommands.js';
+import { AddGroupToViewCommand } from './AddGroupToViewCommand.js';
+import { RemoveGroupFromViewCommand } from './RemoveGroupFromViewCommand.js';
 
 /**
  * Canonical, id-indexed home for ArchiMate model data (elements, relationships, views).
@@ -1171,27 +1173,65 @@ export class ArchimateView extends DiagramEditorState {
     }
 
     /**
-     * The folders drawn on this view as groups: those with bounds in its
-     * `folderLayout`, bounds applied, each after its parent. `parentId` is the
-     * nearest ancestor that is also drawn here (a group inside an undrawn
-     * folder sits on the view itself).
+     * The folders drawn on this view as groups: both model repository folders
+     * and view-specific groups with bounds in `folderLayout`, bounds applied,
+     * each after its parent. `parentId` is the nearest ancestor also drawn here.
      */
     get placedFolders() {
-        const placed = this.model.allFolders().filter(f => this.folderLayout[f.id]);
-        const drawn = new Set(placed.map(f => f.id));
-        return placed.map(folder => ({
-            ...folder,
-            ...this.folderLayout[folder.id],
-            parentId: this._nearestPlaced(folder.parentId, drawn),
-        }));
+        const drawn = new Set(Object.keys(this.folderLayout));
+        const modelFolders = this.model.allFolders();
+        const modelFolderIds = new Set(modelFolders.map(f => f.id));
+
+        const result = [];
+        for (const folder of modelFolders.filter(f => this.folderLayout[f.id])) {
+            result.push({
+                ...folder,
+                ...this.folderLayout[folder.id],
+                name: this.folderLayout[folder.id].name ?? folder.name,
+                parentId: this._nearestPlaced(folder.parentId, drawn),
+            });
+        }
+        for (const [id, layout] of Object.entries(this.folderLayout)) {
+            if (!modelFolderIds.has(id)) {
+                result.push({
+                    id,
+                    name: layout.name || 'Group',
+                    ...layout,
+                    parentId: layout.parentId && drawn.has(layout.parentId) ? layout.parentId : undefined,
+                });
+            }
+        }
+        return result;
     }
 
-    /** The group on this view an element is drawn in: its folder, or that folder's nearest drawn ancestor. */
+    /** The group on this view an element is drawn in: its explicit view parent group, or its model folder's nearest drawn ancestor. */
     placedFolderOf(elementId) {
-        const drawn = new Set(this.model.allFolders().filter(f => this.folderLayout[f.id]).map(f => f.id));
+        const inst = this.elementInstancesFor(elementId)[0];
+        if (inst?.archi?.parent && this.folderLayout[inst.archi.parent]) {
+            return inst.archi.parent;
+        }
+        if (inst?.parentId && this.folderLayout[inst.parentId]) {
+            return inst.parentId;
+        }
+        const drawn = new Set(Object.keys(this.folderLayout));
         return this._nearestPlaced(this.model.getElementFolder(elementId), drawn);
     }
 
+    /** Add a view-specific group to this view. One undo step (AddGroupToViewCommand). */
+    addGroup(spec = {}) {
+        const id = spec.id || `group-${Date.now().toString(36)}-${Math.random().toString(36).slice(2, 6)}`;
+        const cmd = new AddGroupToViewCommand(this, { id, ...spec });
+        this.history.execute(cmd);
+        return this.folderLayout[id];
+    }
+
+    /** Remove a group (view-specific or placed model folder) from this view. One undo step (RemoveGroupFromViewCommand). */
+    removeGroup(groupId) {
+        if (!this.folderLayout[groupId]) return false;
+        this.history.execute(new RemoveGroupFromViewCommand(this, groupId));
+        return true;
+    }
+
     /** @private */
     _nearestPlaced(folderId, drawn) {
         for (let id = folderId; id; id = this.model.getFolder(id)?.parentId) {

package/src/charting/diagrams/GraphDiagram3D.js

@@ -149,4 +149,19 @@ export class GraphDiagram3D extends Diagram3D {
         }
         return pos;
     }
+
+    /**
+     * Asynchronous 3D force layout simulation, offloading to GPU when backend provided.
+     * @param {Array<{id: string, x?: number, y?: number, z?: number}>} nodes
+     * @param {Array<{source: string, target: string}>} edges
+     * @param {object} [options]
+     * @param {import('../../compute/ComputeBackend.js').ComputeBackend} [options.backend]
+     * @returns {Promise<Map<string, {x: number, y: number, z: number, vx: number, vy: number, vz: number}>>}
+     */
+    static async layoutForce3DAsync(nodes, edges, options = {}) {
+        if (options.backend) {
+            return options.backend.layoutForce3DAsync(nodes, edges, options);
+        }
+        return GraphDiagram3D.layoutForce3D(nodes, edges, options);
+    }
 }

package/src/charting/diagrams/NestInstanceCommand.js

@@ -23,7 +23,8 @@ export class NestInstanceCommand extends Command {
     execute() {
         const { instance, parent } = this;
         const { parent: _was, ...rest } = instance.archi ?? {};
-        instance.archi = parent ? { ...rest, parent: parent.visualId } : (Object.keys(rest).length ? rest : null);
+        const parentId = parent ? (parent.visualId ?? parent.id) : null;
+        instance.archi = parentId ? { ...rest, parent: parentId } : (Object.keys(rest).length ? rest : null);
         if (parent && (instance.zIndex ?? 0) <= (parent.zIndex ?? 0)) instance.zIndex = (parent.zIndex ?? 0) + 1;
     }
 

package/src/charting/graph/GraphSource.js

@@ -0,0 +1,72 @@
+/**
+ * GraphSource — what a graph walker reads, whatever the graph is.
+ *
+ * `NavigatorModel` (step-by-step exploration, `findPaths`, `traceImpact`) asks a graph four questions:
+ *
+ * - `getElement(id)` — the element, `{ id, name, type, ... }`, or null;
+ * - `relationshipsFor(id)` — `{ incoming, outgoing }`, each relationship `{ id, source, target, kind }`;
+ * - `viewsContaining(id)` — the views that draw it (none, for a graph that has no views);
+ * - `layerOf(element)` — the band it belongs to, for grouping and colour.
+ *
+ * Why an interface. Traversal is the same for any graph; only these reads differ. So there is one walker,
+ * and each kind of graph answers the four questions: `ArchimateModel` answers them already (its layers
+ * from `treeLayerOf`), and `DocumentGraph` answers them for a graph document — `{ nodes, edges }`, the
+ * shape sqlengine stores graphs in and decisionengine scores — so a portfolio, a dependency graph or any
+ * stored graph is explored the way an ArchiMate model is, without a second walker.
+ *
+ * A subclass implements the four reads; this base says what is missing rather than failing obscurely.
+ */
+export class GraphSource {
+    getElement() { throw new Error(`${this.constructor.name} must implement getElement(id)`); }
+    relationshipsFor() { throw new Error(`${this.constructor.name} must implement relationshipsFor(id)`); }
+    viewsContaining() { return []; }
+    layerOf(element) { return element?.type ?? 'other'; }
+}
+
+/**
+ * DocumentGraph — a graph document (`{ nodes: [{ id, labels, props }], edges: [{ id?, from, to, type, props }] }`)
+ * as a GraphSource. A node's type is its first label and its name `props.name` (else its id); an edge's
+ * kind is its `type`, its id its own or one made from its ends. Its layer is its type, so a portfolio's
+ * capabilities, epics and objectives band apart. Indexed once, read many.
+ */
+export class DocumentGraph extends GraphSource {
+    /** True for something shaped like a graph document. */
+    static isDocument(doc) {
+        return Boolean(doc) && Array.isArray(doc.nodes) && (doc.edges === undefined || Array.isArray(doc.edges));
+    }
+
+    constructor(doc) {
+        super();
+        if (!DocumentGraph.isDocument(doc)) throw new Error('A graph document has a nodes list (and an edges list)');
+        this.elements = new Map();
+        for (const node of doc.nodes) {
+            if (node?.id == null) continue;
+            this.elements.set(node.id, Object.freeze({
+                id: node.id, name: node.props?.name ?? String(node.id), type: node.labels?.[0] ?? 'Node',
+                labels: node.labels ?? [], props: node.props ?? {},
+            }));
+        }
+        this.incoming = new Map();
+        this.outgoing = new Map();
+        (doc.edges ?? []).forEach((edge, i) => {
+            if (!this.elements.has(edge?.from) || !this.elements.has(edge?.to)) return;
+            const relationship = Object.freeze({
+                id: edge.id ?? `${edge.from}-${edge.type}-${edge.to}-${i}`, source: edge.from, target: edge.to,
+                kind: edge.type, name: edge.props?.name ?? edge.type, props: edge.props ?? {},
+            });
+            push(this.outgoing, edge.from, relationship);
+            push(this.incoming, edge.to, relationship);
+        });
+    }
+
+    getElement(id) { return this.elements.get(id) ?? null; }
+
+    relationshipsFor(id) {
+        return { incoming: this.incoming.get(id) ?? [], outgoing: this.outgoing.get(id) ?? [] };
+    }
+}
+
+function push(map, key, value) {
+    if (!map.has(key)) map.set(key, []);
+    map.get(key).push(value);
+}

package/src/charting/modelTree/NavigatorModel.js

@@ -1,7 +1,11 @@
 import { treeLayerOf } from './ModelTreePanel.js';
+import { DocumentGraph } from '../graph/GraphSource.js';
 
 /**
- * NavigatorModel — pure, DOM-free graph traversal and navigation engine for an ArchiMate model.
+ * NavigatorModel — pure, DOM-free graph traversal and navigation engine for any graph: an ArchiMate
+ * model, or any GraphSource (`DocumentGraph` for a `{ nodes, edges }` graph document — see
+ * `NavigatorModel.forGraph`). It reads the graph only through `getElement`, `relationshipsFor`,
+ * `viewsContaining` and `layerOf` (see `GraphSource` for why).
  *
  * Allows exploring relationships step-by-step from any focused root element to arbitrary depth,
  * with cycle detection, navigation history (back/forward), direction filters, path-finding
@@ -9,12 +13,17 @@ import { treeLayerOf } from './ModelTreePanel.js';
  */
 export class NavigatorModel {
     /**
-     * @param {ArchimateModel} model
+     * @param {ArchimateModel|import('../graph/GraphSource.js').GraphSource} model
      * @param {Object} [options]
      * @param {string} [options.rootId] - Initial focused element id
      * @param {'both'|'outgoing'|'incoming'} [options.direction='both']
      * @param {Iterable<string>} [options.allowedKinds] - Optional relationship kinds to include
      */
+    /** A navigator over a graph document (`{ nodes, edges }`): the same walker, through a DocumentGraph. */
+    static forGraph(doc, options) {
+        return new NavigatorModel(new DocumentGraph(doc), options);
+    }
+
     constructor(model, { rootId = null, direction = 'both', allowedKinds = null } = {}) {
         this.model = model;
         this.direction = direction;
@@ -39,6 +48,11 @@ export class NavigatorModel {
         return () => this._listeners.delete(listener);
     }
 
+    /** An element's layer: the graph's own answer, or ArchiMate's (an ArchimateModel has none of its own). */
+    layerOf(element) {
+        return typeof this.model.layerOf === 'function' ? this.model.layerOf(element) : treeLayerOf(element);
+    }
+
     _notify() {
         for (const listener of this._listeners) {
             try {
@@ -209,7 +223,7 @@ export class NavigatorModel {
                 direction: dir,
                 relationship: rel,
                 element: otherElement,
-                layer: treeLayerOf(otherElement),
+                layer: this.layerOf(otherElement),
                 cycle,
                 expanded,
                 children,
@@ -227,8 +241,8 @@ export class NavigatorModel {
         return {
             pathKey,
             element,
-            layer: treeLayerOf(element),
-            views: this.model.viewsContaining(element.id),
+            layer: this.layerOf(element),
+            views: typeof this.model.viewsContaining === 'function' ? this.model.viewsContaining(element.id) : [],
             incoming: incomingBranches,
             outgoing: outgoingBranches,
         };
@@ -355,7 +369,7 @@ export class NavigatorModel {
         const depths = new Map([[elementId, 0]]);
         const elementsMap = new Map();
         const relsMap = new Map();
-        const layers = new Set([treeLayerOf(root)]);
+        const layers = new Set([this.layerOf(root)]);
 
         const queue = [{ id: elementId, depth: 0 }];
 
@@ -376,7 +390,7 @@ export class NavigatorModel {
                     if (!depths.has(target.id)) {
                         depths.set(target.id, nextDepth);
                         elementsMap.set(target.id, target);
-                        layers.add(treeLayerOf(target));
+                        layers.add(this.layerOf(target));
                         queue.push({ id: target.id, depth: nextDepth });
                     }
                 }
@@ -392,7 +406,7 @@ export class NavigatorModel {
                     if (!depths.has(source.id)) {
                         depths.set(source.id, nextDepth);
                         elementsMap.set(source.id, source);
-                        layers.add(treeLayerOf(source));
+                        layers.add(this.layerOf(source));
                         queue.push({ id: source.id, depth: nextDepth });
                     }
                 }