@peter.prib/renderengine 0.15.0 → 0.15.2

package/src/charting/archimate/ArchimateCanvasEditor.js

@@ -1034,15 +1034,28 @@ export class ArchimateCanvasEditor extends DiagramEditor {
         return element ? treeLayerOf(element) : 'other';
     }
 
-    /** An element's box holds any box but a group; on a canvas, a block holds boxes. */
+    /** An element's box holds any box; a group holds any box or nested group; on a canvas, a block holds boxes. */
     canHold(parentId, childId) {
+        if (!parentId || !childId || parentId === childId) return false;
         const parent = this.templates.get(parentId), child = this.templates.get(childId);
-        if (!parent?.instance || !child?.instance || parent instanceof ViewGroupTemplate || child instanceof ViewGroupTemplate) return false;
+        if (!parent || !child) return false;
+        if (child instanceof ViewGroupTemplate && parent instanceof ViewGroupTemplate) {
+            return !this.isAncestor(childId, parentId);
+        }
+        if (parent instanceof ViewGroupTemplate) {
+            return !this.isAncestor(childId, parentId);
+        }
+        if (child instanceof ViewGroupTemplate) return false;
+        if (!parent.instance || !child.instance) return false;
         return !!this._elementOf(parentId) || parent.instance.content?.archiVisualType === 'canvas-model-block';
     }
 
-    /** An element dropped on another nests there when a relationship a nesting stands for (NESTING_KINDS) is allowed between them. */
+    /** An element dropped on another nests there when a relationship a nesting stands for (NESTING_KINDS) is allowed between them, or when dropped into a group. */
     nestsOnDrop(parentId, childId) {
+        const parent = this.templates.get(parentId);
+        if (parent instanceof ViewGroupTemplate) {
+            return this.canHold(parentId, childId);
+        }
         if (!this._elementOf(parentId) || !this._elementOf(childId)) return false;
         return this.allowedKinds(parentId, childId).some(kind => NESTING_KINDS.includes(kind));
     }
@@ -1050,13 +1063,16 @@ export class ArchimateCanvasEditor extends DiagramEditor {
     nestCommand(childId, parentId) {
         const child = this.templates.get(childId)?.instance;
         if (!child) return null;
-        return new NestInstanceCommand(child, parentId ? this.templates.get(parentId)?.instance ?? null : null);
+        const parentTemplate = parentId ? this.templates.get(parentId) : null;
+        const parentTarget = parentTemplate?.instance ?? (parentTemplate instanceof ViewGroupTemplate ? parentTemplate : null);
+        return new NestInstanceCommand(child, parentTarget);
     }
 
-    /** After nesting an element in another: offer the relationship the nesting stands for (nestingKinds). */
+    /** After nesting an element in another: offer the relationship the nesting stands for (nestingKinds). Groups have no relationship. */
     nested(changes) {
         let chain = Promise.resolve();
         for (const { childId, parentId } of changes) {
+            if (this.templates.get(parentId) instanceof ViewGroupTemplate) continue;
             chain = chain.then(() => this.offerNestingRelationship(parentId, childId));   // taken out: nothing to offer
         }
         return chain;

package/src/charting/archimate/ViewGroupTemplate.js

@@ -47,8 +47,11 @@ export class ViewGroupTemplate extends GlyphTemplate {
         return this.view.model.getFolder(this.id);
     }
 
-    get name() { return this.folder?.name ?? 'Group'; }
-    set name(value) { if (this.folder) this.folder.name = value || 'Group'; }
+    get name() { return this.folder?.name ?? this.layout?.name ?? 'Group'; }
+    set name(value) {
+        if (this.folder) this.folder.name = value || 'Group';
+        if (this.layout) this.layout.name = value || 'Group';
+    }
 
     // The layout keeps the top-left corner; a template is placed by its centre.
     get x() { return this.layout.x + this.width / 2; }

package/src/charting/diagramModel/DiagramJsonFileFormat.js

@@ -0,0 +1,32 @@
+import { ModelFileFormat } from '../ModelFileFormat.js';
+import { DiagramModel } from './DiagramModel.js';
+
+/**
+ * DiagramJsonFileFormat — a diagram model as a file (`.diagram.json` or `.json`):
+ * its name, palette category, line style defaults, views with templates, edges,
+ * waypoints and arrangements (DiagramModel#toJSON), read back by DiagramModel.fromJSON.
+ */
+export class DiagramJsonFileFormat extends ModelFileFormat {
+    get label() { return '.diagram.json'; }
+    get accept() { return '.diagram.json,.json'; }
+    get fileName() { return 'diagrams.diagram.json'; }
+    get featureName() { return 'DiagramJson'; }
+
+    /** JSON with a diagram model's shape: templateType and views array, or views array of diagrams. */
+    recognizes(text) {
+        try {
+            const json = JSON.parse(text);
+            return !!json && typeof json === 'object' && (Array.isArray(json.views) || typeof json.templateType === 'string');
+        } catch {
+            return false;
+        }
+    }
+
+    export(model) {
+        return { data: JSON.stringify(model.toJSON(), null, 2), mimeType: 'application/json' };
+    }
+
+    import(text) {
+        return DiagramModel.fromJSON(JSON.parse(text));
+    }
+}

package/src/charting/diagramModel/DiagramModel.js

@@ -36,4 +36,43 @@ export class DiagramModel extends ViewSetModel {
     setTemplateType(templateType) {
         this.templateType = templateType;
     }
+
+    /** The diagram model as plain JSON: its name, templateType, line style defaults, active view and views. */
+    toJSON() {
+        return {
+            version: 1,
+            name: this.name,
+            templateType: this.templateType,
+            edgeStyle: JSON.parse(JSON.stringify(this.edgeStyle ?? {})),
+            currentViewId: this.currentViewId,
+            views: this.views().map(v => v.toJSON()),
+        };
+    }
+
+    /** Reconstruct a DiagramModel from plain JSON. */
+    static fromJSON(json, historyOptions = {}) {
+        if (!json) throw new TypeError('DiagramModel.fromJSON requires a JSON object');
+        const model = new DiagramModel({
+            name: json.name ?? '',
+            templateType: json.templateType ?? 'generic',
+            edgeStyle: json.edgeStyle ?? {},
+            historyOptions,
+        });
+        const views = (json.views ?? []).map(vData => DiagramView.fromJSON(vData, model.historyOptions));
+        for (const view of views) {
+            model._insertView(model._adopt(view), { current: view.id === json.currentViewId });
+        }
+        if (json.currentViewId && model._views.has(json.currentViewId)) {
+            model.currentViewId = json.currentViewId;
+        } else if (model._views.size > 0 && !model.currentViewId) {
+            model.currentViewId = model._views.keys().next().value;
+        }
+        const maxNum = Math.max(0, ...model.views().map(v => {
+            const m = String(v.id).match(/\d+$/);
+            return m ? parseInt(m[0], 10) : 0;
+        }));
+        model._nextId = maxNum + 1;
+        model.markSaved();
+        return model;
+    }
 }

package/src/charting/diagramModel/DiagramView.js

@@ -1,61 +1,97 @@
-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.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 = {}, 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 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.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 ?? {},
+            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 },
+            documentation: this.documentation,
+            historyOptions,
+            arrangement: this.arrangement.copy(),   // 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/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/templates/templateRegistry.js

@@ -0,0 +1,70 @@
+import {
+    RectangleTemplate, RoundedRectangleTemplate, StadiumTemplate, PredefinedProcessTemplate,
+    ClassTemplate, ComponentTemplate, SwimlaneTemplate, CircleTemplate, FinalStateTemplate,
+    EllipseTemplate, DiamondTemplate, TriangleTemplate, PentagonTemplate, HexagonTemplate,
+    OctagonTemplate, StarTemplate, ParallelogramTemplate, TrapezoidTemplate, ManualInputTemplate,
+    CylinderTemplate, DocumentTemplate, NoteTemplate, CloudTemplate, ActorTemplate,
+    PackageTemplate, BoxTemplate, DataStoreTemplate, LifelineTemplate,
+} from './index.js';
+
+export const TEMPLATE_CLASSES = Object.freeze({
+    'rectangle': RectangleTemplate,
+    'rounded-rectangle': RoundedRectangleTemplate,
+    'stadium': StadiumTemplate,
+    'predefined-process': PredefinedProcessTemplate,
+    'class': ClassTemplate,
+    'component': ComponentTemplate,
+    'swimlane': SwimlaneTemplate,
+    'circle': CircleTemplate,
+    'final-state': FinalStateTemplate,
+    'ellipse': EllipseTemplate,
+    'diamond': DiamondTemplate,
+    'triangle': TriangleTemplate,
+    'pentagon': PentagonTemplate,
+    'hexagon': HexagonTemplate,
+    'octagon': OctagonTemplate,
+    'star': StarTemplate,
+    'parallelogram': ParallelogramTemplate,
+    'trapezoid': TrapezoidTemplate,
+    'manual-input': ManualInputTemplate,
+    'cylinder': CylinderTemplate,
+    'document': DocumentTemplate,
+    'note': NoteTemplate,
+    'cloud': CloudTemplate,
+    'actor': ActorTemplate,
+    'package': PackageTemplate,
+    'box': BoxTemplate,
+    'data-store': DataStoreTemplate,
+    'lifeline': LifelineTemplate,
+});
+
+const CLASS_TO_KEY = new Map(Object.entries(TEMPLATE_CLASSES).map(([k, c]) => [c, k]));
+
+// Assign static templateType to each class
+for (const [type, cls] of Object.entries(TEMPLATE_CLASSES)) {
+    cls.templateType = type;
+}
+
+/** Returns the stable serialized type key for a template instance or template class. */
+export function templateTypeKey(templateOrClass) {
+    if (!templateOrClass) return 'rectangle';
+    const c = typeof templateOrClass === 'function' ? templateOrClass : templateOrClass.constructor;
+    if (CLASS_TO_KEY.has(c)) return CLASS_TO_KEY.get(c);
+    if (Object.hasOwn(c, 'templateType')) return c.templateType;
+    const name = c.name || '';
+    const withoutSuffix = name.replace(/Template$/, '');
+    const kebab = withoutSuffix.replace(/([a-z0-9])([A-Z])/g, '$1-$2').toLowerCase();
+    return TEMPLATE_CLASSES[kebab] ? kebab : 'rectangle';
+}
+
+/** Resolves a template class by its stable type key or class name, defaulting to RectangleTemplate. */
+export function templateClassFor(key) {
+    if (!key) return RectangleTemplate;
+    if (TEMPLATE_CLASSES[key]) return TEMPLATE_CLASSES[key];
+    const lower = String(key).toLowerCase();
+    if (TEMPLATE_CLASSES[lower]) return TEMPLATE_CLASSES[lower];
+    for (const [k, c] of Object.entries(TEMPLATE_CLASSES)) {
+        if (c.name === key || c.name?.toLowerCase() === lower) return c;
+    }
+    return RectangleTemplate;
+}

package/src/index.js

@@ -157,7 +157,8 @@ import { ArchimateElementTemplate, ArchimateEdge, ArchimateCanvasEditor, Archima
 import { RelationshipInstance } from './charting/diagrams/RelationshipInstance.js';
 import { DiagramEditor } from './charting/DiagramEditor.js';
 import { DiagramEditorState } from './charting/DiagramEditorState.js';
-import { Template, PolygonTemplate, RegularPolygonTemplate, RectangleTemplate, RoundedRectangleTemplate, StadiumTemplate, PredefinedProcessTemplate, ClassTemplate, ComponentTemplate, SwimlaneTemplate, CircleTemplate, FinalStateTemplate, EllipseTemplate, DiamondTemplate, TriangleTemplate, PentagonTemplate, HexagonTemplate, OctagonTemplate, StarTemplate, ParallelogramTemplate, TrapezoidTemplate, ManualInputTemplate, CylinderTemplate, DocumentTemplate, NoteTemplate, CloudTemplate, ActorTemplate, PackageTemplate, BoxTemplate, DataStoreTemplate, LifelineTemplate } from './charting/templates/index.js';
+import { Template, PolygonTemplate, RegularPolygonTemplate, RectangleTemplate, RoundedRectangleTemplate, StadiumTemplate, PredefinedProcessTemplate, ClassTemplate, ComponentTemplate, SwimlaneTemplate, CircleTemplate, FinalStateTemplate, EllipseTemplate, DiamondTemplate, TriangleTemplate, PentagonTemplate, HexagonTemplate, OctagonTemplate, StarTemplate, ParallelogramTemplate, TrapezoidTemplate, ManualInputTemplate, CylinderTemplate, DocumentTemplate, NoteTemplate, CloudTemplate, ActorTemplate, PackageTemplate, BoxTemplate, DataStoreTemplate, LifelineTemplate } from './charting/templates/index.js';
+import { TEMPLATE_CLASSES, templateTypeKey, templateClassFor } from './charting/templates/templateRegistry.js';
 import { TemplateCatalog } from './charting/TemplateCatalog.js';
 import { DIAGRAM_TYPES, getTemplatesForDiagramType, getAllDiagramTypes, getDiagramTypesByGroup } from './charting/DiagramTypeRegistry.js';
 import { EdgeMarker, ArrowMarker, DiamondMarker, CircleMarker, CrowsFootMarker, HollowDiamondMarker, HollowTriangleMarker, OpenArrowMarker, HalfArrowMarker, EDGE_MARKERS, getEdgeMarker } from './charting/edgeMarkers/index.js';
@@ -166,7 +167,7 @@ import { MoveElementCommand, BringToFrontCommand, SendToBackCommand, RaiseComman
 import { Edge } from './charting/Edge.js';
 import { AddEdgeCommand, DeleteEdgeCommand, ReconnectEdgeCommand, MoveWaypointCommand, AddWaypointCommand, DeleteWaypointCommand } from './charting/DiagramEditorEdgeCommands.js';
 import { EDGE_STYLE_PROPERTIES, LINE_ONLY_PROPERTIES, LINE_STYLE_DASH, EdgeStyleCascade, SetStyleCommand, EdgeStyleDialog } from './charting/edgeStyle/index.js';
-import { DiagramModel, DiagramView, ViewSetModel } from './charting/diagramModel/index.js';
+import { DiagramModel, DiagramView, ViewSetModel, DiagramJsonFileFormat } from './charting/diagramModel/index.js';
 import { ViewMenu } from './charting/ViewMenu.js';
 import { CanvasTemplateLibrary } from './charting/canvas/CanvasTemplateLibrary.js';
 import { CanvasTemplateMenu } from './charting/canvas/CanvasTemplateMenu.js';
@@ -267,7 +268,7 @@ export {
   TREE_MODE_CATALOG, treeModeRegistry, getTreeModeCatalogEntry,
   AXIS_KIND, ENCODING_CHANNEL, COORD_SYSTEM, COLOR_MODE, CAMERA_MODE,
   Command, CompositeCommand, CommandHistory,
-  DiagramEditor, DiagramEditorState, Template, PolygonTemplate, RegularPolygonTemplate, RectangleTemplate, RoundedRectangleTemplate, StadiumTemplate, PredefinedProcessTemplate, ClassTemplate, ComponentTemplate, SwimlaneTemplate, CircleTemplate, FinalStateTemplate, EllipseTemplate, DiamondTemplate, TriangleTemplate, PentagonTemplate, HexagonTemplate, OctagonTemplate, StarTemplate, ParallelogramTemplate, TrapezoidTemplate, ManualInputTemplate, CylinderTemplate, DocumentTemplate, NoteTemplate, CloudTemplate, ActorTemplate, PackageTemplate, BoxTemplate, DataStoreTemplate, LifelineTemplate, TemplateCatalog, Palette, PropertiesPanel, MenuBar, MoveElementCommand, BringToFrontCommand, SendToBackCommand, RaiseCommand, LowerCommand, CreateTemplateCommand, EditPropertyCommand, ResizeCommand, RotateCommand, SetPropertiesCommand, ReorderCommand, NestElementCommand, DIAGRAM_TYPES, getTemplatesForDiagramType, getAllDiagramTypes, getDiagramTypesByGroup, EdgeMarker, ArrowMarker, DiamondMarker, CircleMarker, CrowsFootMarker, HollowDiamondMarker, HollowTriangleMarker, OpenArrowMarker, HalfArrowMarker, EDGE_MARKERS, getEdgeMarker, Edge, AddEdgeCommand, DeleteEdgeCommand, ReconnectEdgeCommand, EDGE_STYLE_PROPERTIES, LINE_ONLY_PROPERTIES, LINE_STYLE_DASH, EdgeStyleCascade, SetStyleCommand, EdgeStyleDialog, DiagramModel, DiagramView, ViewSetModel, ViewMenu, ViewPropertiesDialog, SettingsViewPropertiesDialog, DiagramViewPropertiesDialog, inheritableFields, readInheritableFields, LocalJsonStore, PopupMenu, ViewTabStrip, EditorShell, Dialog, FormDialog, ToolbarItem, ToolbarButton, ToolbarMenu, ToolbarSelect, ToolbarCheckbox, ToolbarText, ToolbarSeparator, pickFile, reorderedZ, stackingOrder, MoveWaypointCommand, AddWaypointCommand, DeleteWaypointCommand,
+  DiagramEditor, DiagramEditorState, Template, PolygonTemplate, RegularPolygonTemplate, RectangleTemplate, RoundedRectangleTemplate, StadiumTemplate, PredefinedProcessTemplate, ClassTemplate, ComponentTemplate, SwimlaneTemplate, CircleTemplate, FinalStateTemplate, EllipseTemplate, DiamondTemplate, TriangleTemplate, PentagonTemplate, HexagonTemplate, OctagonTemplate, StarTemplate, ParallelogramTemplate, TrapezoidTemplate, ManualInputTemplate, CylinderTemplate, DocumentTemplate, NoteTemplate, CloudTemplate, ActorTemplate, PackageTemplate, BoxTemplate, DataStoreTemplate, LifelineTemplate, TEMPLATE_CLASSES, templateTypeKey, templateClassFor, TemplateCatalog, Palette, PropertiesPanel, MenuBar, MoveElementCommand, BringToFrontCommand, SendToBackCommand, RaiseCommand, LowerCommand, CreateTemplateCommand, EditPropertyCommand, ResizeCommand, RotateCommand, SetPropertiesCommand, ReorderCommand, NestElementCommand, DIAGRAM_TYPES, getTemplatesForDiagramType, getAllDiagramTypes, getDiagramTypesByGroup, EdgeMarker, ArrowMarker, DiamondMarker, CircleMarker, CrowsFootMarker, HollowDiamondMarker, HollowTriangleMarker, OpenArrowMarker, HalfArrowMarker, EDGE_MARKERS, getEdgeMarker, Edge, AddEdgeCommand, DeleteEdgeCommand, ReconnectEdgeCommand, EDGE_STYLE_PROPERTIES, LINE_ONLY_PROPERTIES, LINE_STYLE_DASH, EdgeStyleCascade, SetStyleCommand, EdgeStyleDialog, DiagramModel, DiagramView, ViewSetModel, DiagramJsonFileFormat, ViewMenu, ViewPropertiesDialog, SettingsViewPropertiesDialog, DiagramViewPropertiesDialog, inheritableFields, readInheritableFields, LocalJsonStore, PopupMenu, ViewTabStrip, EditorShell, Dialog, FormDialog, ToolbarItem, ToolbarButton, ToolbarMenu, ToolbarSelect, ToolbarCheckbox, ToolbarText, ToolbarSeparator, pickFile, reorderedZ, stackingOrder, MoveWaypointCommand, AddWaypointCommand, DeleteWaypointCommand,
   ebnfAstToDiagram, parseEbnf,
   createDataWindow, GraphDataWindow,
   ArchimateNotation, ArchimateLayer, ArchimateElementType, ArchimateRelationshipType,

package/src/workspace/index.js

@@ -56,6 +56,9 @@ export {
     LIGHT_THEME, DARK_THEME, MIDNIGHT_THEME, SEPIA_THEME,
 } from './themes.js';
 export { ChartPart } from './parts/ChartPart.js';
+// Chart views in one part (they use ChartPart, so they sit with it, outside BUILTIN_PARTS).
+export { ViewsPart } from './parts/ViewsPart.js';
+export { DecisionWorkbenchPart } from './parts/DecisionWorkbenchPart.js';
 export { DataModelPart } from './parts/DataModelPart.js';
 export { RequirementsPart } from './parts/RequirementsPart.js';
 export { ModelHosted } from './parts/ModelHosted.js';

package/src/workspace/parts/ArchimateEditorPart.js

@@ -11,8 +11,8 @@ const DEFAULT_FEATURES = Object.freeze({
 });
 
 /**
- * ArchimateEditorPart — the ArchiMate modeller as a workbench part: toolbar,
- * model tree, one tab per open view and the canvas, filling its pane.
+ * ArchimateEditorPart — legacy GraphDiagram-based ArchiMate editor part.
+ * @deprecated Use ArchimateCanvasPart for ArchiMate editing.
  *
  * Spec (JSON): `elements`, `relationships`, `views` (as ArchimateModel takes
  * them), `features` (toolbar controls, see DEFAULT_FEATURES), `analysis`