@peter.prib/renderengine 0.0.0-stage → 0.2.0

package/src/charting/diagrams/ArchimateCommands.js

@@ -0,0 +1,141 @@
+import { Command } from '../CommandHistory.js';
+
+/**
+ * AddToViewCommand — put one element instance on a view, as one undo step.
+ * Given a new model `element` too, the element is created with it (and goes
+ * with it on undo). The view's element filter is widened to the element if
+ * it was not already in it.
+ */
+export class AddToViewCommand extends Command {
+    /**
+     * @param {ArchimateView} view
+     * @param {ElementInstance} instance
+     * @param {Object} [options]
+     * @param {Object} [options.element] - A new model element the instance shows
+     */
+    constructor(view, instance, { element = null, label = 'Add to View' } = {}) {
+        super(label);
+        this.view = view;
+        this.instance = instance;
+        this.element = element;
+        this._createdElement = false;
+        this._widenedFilter = false;
+    }
+
+    execute() {
+        const { view, instance, element } = this;
+        this._createdElement = !!element && !view.model.getElement(element.id);
+        if (this._createdElement) view.model.addElement(element);
+        this._widenedFilter = !!view.elementIds && !instance.shownIn(view);
+        // Mutate rather than replace: other holders keep a reference to this array.
+        if (this._widenedFilter) view.elementIds.push(instance.elementId);
+        view.addElementInstance(instance);
+    }
+
+    undo() {
+        const { view, instance } = this;
+        view.removeElementInstance(instance.id);
+        if (this._widenedFilter) {
+            const at = view.elementIds.indexOf(instance.elementId);
+            if (at >= 0) view.elementIds.splice(at, 1);
+        }
+        if (this._createdElement) view.model.removeElement(this.element.id);
+    }
+}
+
+/**
+ * AddRelationshipToViewCommand — show one relationship instance on a view,
+ * as one undo step. Given a new model `relationship` too, it is created with
+ * it (and goes with it on undo).
+ */
+export class AddRelationshipToViewCommand extends Command {
+    /**
+     * @param {ArchimateView} view
+     * @param {RelationshipInstance} instance
+     * @param {Object} [options]
+     * @param {Object} [options.relationship] - A new model relationship the instance shows
+     */
+    constructor(view, instance, { relationship = null, label = 'Add Relationship to View' } = {}) {
+        super(label);
+        this.view = view;
+        this.instance = instance;
+        this.relationship = relationship;
+        this._createdRelationship = false;
+    }
+
+    execute() {
+        const { view, relationship } = this;
+        this._createdRelationship = !!relationship && !view.model.getRelationship(relationship.id);
+        if (this._createdRelationship) view.model.addRelationship(relationship);
+        view.addRelationshipInstance(this.instance);
+    }
+
+    undo() {
+        this.view.removeRelationshipInstance(this.instance.id);
+        if (this._createdRelationship) this.view.model.removeRelationship(this.relationship.id);
+    }
+}
+
+/**
+ * AddRelationshipCommand — a new relationship in the model, drawn on no view
+ * (one a nesting expresses, as Archi adds them). Undo removes it.
+ */
+export class AddRelationshipCommand extends Command {
+    constructor(model, relationship, label = `Add ${relationship.kind ?? 'relationship'}`) {
+        super(label);
+        this.model = model;
+        this.relationship = relationship;
+    }
+
+    execute() {
+        this.model.addRelationship(this.relationship);
+    }
+
+    undo() {
+        this.model.removeRelationship(this.relationship.id);
+    }
+}
+
+/**
+ * RemoveRelationshipFromViewCommand — take one relationship instance off a
+ * view (the model relationship stays). Undo puts the same instance back.
+ */
+export class RemoveRelationshipFromViewCommand extends Command {
+    constructor(view, instanceId) {
+        super('Remove Relationship from View');
+        this.view = view;
+        this.instanceId = instanceId;
+        this.removed = null;
+    }
+
+    execute() {
+        this.removed = this.view.getRelationshipInstance(this.instanceId) ?? null;
+        if (this.removed) this.view.removeRelationshipInstance(this.instanceId);
+    }
+
+    undo() {
+        if (this.removed) this.view.addRelationshipInstance(this.removed);
+    }
+}
+
+/**
+ * DeleteElementCommand — take one element instance off a view (the model
+ * element stays). Undo puts the same instance back, id and all.
+ */
+export class DeleteElementCommand extends Command {
+    constructor(view, instanceId) {
+        super('Delete Element');
+        this.view = view;
+        this.instanceId = instanceId;
+        this.removed = null;
+    }
+
+    execute() {
+        this.removed = this.view.getElementInstance(this.instanceId) ?? null;
+        if (this.removed) this.view.removeElementInstance(this.instanceId);
+    }
+
+    undo() {
+        if (this.removed) this.view.addElementInstance(this.removed);
+    }
+}

package/src/charting/diagrams/ArchimateDiagram.js

@@ -0,0 +1,263 @@
+import { Diagram } from '../Diagram.js';
+import { ArchimateNotation, ArchimateViewpoints } from '../../archimate.js';
+import { ITIconNotation } from '../../itIcons.js';
+import { ArchimateValidator } from './ArchimateValidator.js';
+import { ArchimateSpecializationRegistry } from '../../archimateSpecializations.js';
+
+/**
+ * ArchimateDiagram — builds ArchiMate-notation nodes/edges and renders them
+ * through the shared GraphDiagram engine.
+ */
+export class ArchimateDiagram extends Diagram {
+    static diagramType = 'archimate';
+
+    constructor(renderer, elements, relationships, options = {}, engine = null) {
+        super(renderer, { elements, relationships }, options);
+        this.engine = engine;
+    }
+
+    render() {
+        const { elements, relationships } = this.data;
+        const options = this.options;
+        const {
+            layerColors, relationshipStyles, defaultIcons, iconChoiceIndex = 0, elementWidth = 120, elementHeight = 55,
+            archimateVersion = '4', useDistinctShapes = false, iconSet = 'glyph',
+            validate = true, invalidRelationships = 'highlight', onValidationWarning, annotations = [], viewpoint = null,
+            viewpointMode = 'fade', customViewpoints = [], ...rest
+        } = options;
+        const nodeOpts = {
+            layerColors, defaultIcons, iconChoiceIndex, elementWidth, elementHeight,
+            archimateVersion, useDistinctShapes, iconSet,
+        };
+        const nodes = elements.map(element => ArchimateDiagram.buildNode(element, nodeOpts));
+
+        // Viewpoint filtering: hide or fade element types that do not belong to
+        // the active viewpoint. Annotations are never affected.
+        const effectiveViewpoint = viewpoint && viewpoint !== 'All' ? viewpoint : null;
+        const allowedTypes = effectiveViewpoint
+            ? new Set(ArchimateViewpoints.allowedElementTypes(viewpoint, archimateVersion, customViewpoints))
+            : null;
+        let visibleNodes = nodes;
+        let visibleEdges = relationships;
+        if (effectiveViewpoint) {
+            const isAllowed = (type) => allowedTypes.has(type);
+            const allowedNodeIds = new Set();
+            for (const node of nodes) {
+                if (isAllowed(node.type)) allowedNodeIds.add(node.id);
+            }
+            visibleNodes = [];
+            for (const node of nodes) {
+                const allowed = allowedNodeIds.has(node.id);
+                if (allowed) {
+                    visibleNodes.push(node);
+                } else if (viewpointMode === 'fade') {
+                    node.opacity = 0.2;
+                    visibleNodes.push(node);
+                }
+                // viewpointMode === 'hide' drops the node entirely.
+            }
+            visibleEdges = [];
+            for (const rel of relationships) {
+                const sourceAllowed = allowedNodeIds.has(rel.source);
+                const targetAllowed = allowedNodeIds.has(rel.target);
+                if (sourceAllowed && targetAllowed) {
+                    visibleEdges.push(rel);
+                } else if (viewpointMode === 'fade' && (sourceAllowed || targetAllowed)) {
+                    rel.opacity = 0.2;
+                    visibleEdges.push(rel);
+                }
+                // In hide mode, drop edges touching a hidden node.
+            }
+        }
+
+        // Annotations are diagram-only sticky-note comments, not part of the
+        // ArchiMate model. They are appended as plain graphDiagram nodes so they
+        // get drag/resize/delete/properties for free; mutating them in place
+        // keeps the caller's annotations array in sync across rerenders.
+        for (const annotation of annotations) {
+            if (!annotation.id) annotation.id = `note_${Math.random().toString(36).slice(2, 9)}`;
+            annotation.shape = 'note';
+            annotation.labelPosition = annotation.labelPosition || 'inside';
+            annotation.resizable = annotation.resizable !== false;
+            visibleNodes.push(annotation);
+        }
+
+        // Validate the model before building edges so warnings can be attached
+        // to the edges that GraphDiagram will actually draw.
+        // 'off' checks nothing; 'tooltip' warns on hover only; 'highlight' also draws the line red and dashed.
+        const warnings = validate && invalidRelationships !== 'off'
+            // A plain line on a view (viewConnection) is no ArchiMate relationship: nothing to check.
+            ? ArchimateValidator.validateModel(elements, relationships.filter(r => !r.viewConnection), archimateVersion, viewpoint, customViewpoints)
+            : [];
+        const warningByEdge = new Map();
+        for (const w of warnings) {
+            if (w.type === 'relationship' && w.relationship) {
+                warningByEdge.set(w.relationship, w);
+            }
+            if (typeof onValidationWarning === 'function') {
+                onValidationWarning(w);
+            }
+        }
+
+        // Build edges in place on the caller's relationships array so drag-to-
+        // create and property-edits persist back into the source array across
+        // rerenders (e.g. after switching ArchiMate version or applying a style).
+        for (let i = 0; i < visibleEdges.length; i++) {
+            ArchimateDiagram.buildEdge(visibleEdges[i], { relationshipStyles, warningByEdge, highlight: invalidRelationships === 'highlight' });
+        }
+
+        // ArchiMate tools draw relationships over elements (a line into a nested element stays visible).
+        this.engine.graphDiagram(visibleNodes, visibleEdges, { edgeColor: '#666666', edgesOnTop: true, ...rest });
+
+        // Expose warnings on the engine so callers can read them back after render.
+        if (this.engine) {
+            this.engine._archimateWarnings = warnings;
+        }
+
+        // Diagram-wide ArchiMate settings survive a rerender so live icon-choice
+        // changes can be applied later (see RenderEngine._archimateSetIconChoiceIndex).
+        this.engine._archimateOptions = {
+            layerColors, defaultIcons, iconChoiceIndex, relationshipStyles, elementWidth, elementHeight,
+            archimateVersion, useDistinctShapes, iconSet, viewpoint,
+            viewpointMode, customViewpoints,
+        };
+    }
+
+    static elementLayer(element, version) {
+        // An explicit `element.layer` always wins, then a known official or IT
+        // extension type, then the prefix heuristic for custom names.
+        if (element?.layer) return element.layer;
+        const itType = typeof element?.type === 'string' ? ITIconNotation.elementType(element.type) : undefined;
+        if (itType?.layer?.name) return itType.layer.name;
+        return ArchimateNotation.elementLayer(element, version);
+    }
+
+    static layerColor(layer, layerColors, ownColor) {
+        return layerColors?.[layer] || ownColor || ArchimateNotation.layer(layer)?.color || ArchimateNotation.layer('other').color;
+    }
+
+    static defaultIcon(element, layer, defaultIcons, iconChoiceIndex = 0, version) {
+        if (defaultIcons?.[layer]) return defaultIcons[layer];
+        const type = typeof element?.type === 'string'
+            ? ArchimateDiagram.resolveElementType(element.type, version)
+            : undefined;
+        if (type) {
+            // IT extension types carry a single icon, not a choice list.
+            if (!type.iconChoices) return type.icon;
+            const choices = type.iconChoices;
+            return choices[iconChoiceIndex] ?? choices[0];
+        }
+        return ArchimateNotation.layer(layer)?.defaultIcon || ArchimateNotation.layer('other').defaultIcon;
+    }
+
+    static relationshipStyle(kind, relationshipStyles) {
+        return relationshipStyles?.[kind] || ArchimateNotation.relationshipType(kind);
+    }
+
+    /** Live diagram-wide setting: which choice in each element type's own
+     *  `iconChoices` is used as the DEFAULT icon for a node that doesn't carry
+     *  its own explicit `icon`/`iconUrl`. Changing it re-derives the icon for
+     *  every node that hasn't been individually customised, leaving any node
+     *  whose icon was deliberately picked untouched. No-op if this isn't (or
+     *  is no longer) an ArchiMate diagram. */
+    static setIconChoiceIndex(engine, newIndex) {
+        const opts = engine?._archimateOptions;
+        if (!opts || !engine._chartState?.nodes) return;
+        const oldIndex = opts.iconChoiceIndex ?? 0;
+        for (const node of engine._chartState.nodes) {
+            if (node.iconUrl) continue;
+            const layer = ArchimateDiagram.elementLayer(node, opts.archimateVersion);
+            const wasAuto = node.icon === ArchimateDiagram.defaultIcon(node, layer, opts.defaultIcons, oldIndex, opts.archimateVersion);
+            if (wasAuto) node.icon = ArchimateDiagram.defaultIcon(node, layer, opts.defaultIcons, newIndex, opts.archimateVersion);
+        }
+        opts.iconChoiceIndex = newIndex;
+        engine._graphDiagram?._rerenderGraph();
+    }
+
+    static cornerStyle(element, layer, version) {
+        if (element?.cornerStyle) return element.cornerStyle;
+        if (layer === 'motivation') return 'chamfered';
+        const type = typeof element?.type === 'string'
+            ? ArchimateDiagram.resolveElementType(element.type, version)
+            : undefined;
+        const aspect = element?.aspect || type?.aspect;
+        return aspect === 'behavior' ? 'rounded' : 'sharp';
+    }
+
+    /** Resolve an element `type` to either an official ArchiMate type or an
+     *  IT/infrastructure extension type. Returns the matching descriptor object
+     *  (which has the same `layer`/`aspect`/`icon`/`notationShape`/`description`
+     *  shape in both cases) or undefined. */
+    static resolveElementType(typeName, archimateVersion = '4') {
+        if (typeof typeName !== 'string') return undefined;
+        return ArchimateNotation.elementType(typeName, archimateVersion)
+            || ITIconNotation.elementType(typeName);
+    }
+
+    static buildNode(element, {
+        layerColors, defaultIcons, iconChoiceIndex = 0, elementWidth = 120, elementHeight = 55,
+        archimateVersion = '4', useDistinctShapes = false, iconSet = 'glyph',
+    } = {}) {
+        const resolved = archimateVersion === '4' ? ArchimateNotation.migrateElementToV4(element) : element;
+        ArchimateSpecializationRegistry.applyToNode(resolved);
+        const layer = ArchimateDiagram.elementLayer(resolved, archimateVersion);
+        const type = ArchimateDiagram.resolveElementType(resolved.type, archimateVersion);
+        const useDistinctShape = resolved.useDistinctShape ?? useDistinctShapes;
+        const notationShape = useDistinctShape ? type?.notationShape : undefined;
+        const glyphBadges = (resolved.iconSet ?? iconSet) !== 'emoji';
+
+        // CRITICAL: Use diagramInstanceId (not elementId) as the node's unique ID
+        // This allows multiple instances of the same element to render as separate visual nodes
+        const nodeId = resolved.diagramInstanceId || resolved.id;
+        // A view-only box (note, image, canvas or sketch box) has no ArchiMate type: no type
+        // icon, and a plain white fill unless it sets one (a note keeps its own default).
+        const viewBox = resolved.viewObject && resolved.shape !== 'note';
+
+        return {
+            ...resolved,
+            id: nodeId,  // Override to use diagramInstanceId for uniqueness
+            layer,
+            shape: resolved.shape || notationShape || 'rect',
+            color: resolved.color || (viewBox ? '#ffffff' : ArchimateDiagram.layerColor(layer, layerColors, type?.ownColor)),
+            width: resolved.width ?? elementWidth,
+            height: resolved.height ?? elementHeight,
+            strokeColor: resolved.strokeColor || '#000000',
+            strokeWidth: resolved.strokeWidth ?? 1.2,
+            // The ArchiMate notation draws a Grouping with a dashed outline.
+            ...(type?.name === 'grouping' && { strokeDasharray: resolved.strokeDasharray ?? '6 3' }),
+            labelPosition: resolved.labelPosition || (notationShape ? 'below' : 'inside'),
+            iconPosition: resolved.iconPosition || 'corner',
+            cornerStyle: ArchimateDiagram.cornerStyle(resolved, layer, archimateVersion),
+            iconShape: resolved.viewObject ? undefined : resolved.iconShape || ((resolved.icon || resolved.iconUrl) && glyphBadges ? undefined : (notationShape || !glyphBadges ? undefined : type?.notationShape)),
+            icon: resolved.viewObject ? resolved.icon : resolved.icon || (resolved.iconUrl || notationShape || (glyphBadges && type?.notationShape)
+                ? undefined
+                : ArchimateDiagram.defaultIcon(resolved, layer, defaultIcons, iconChoiceIndex, archimateVersion)),
+        };
+    }
+
+    static buildEdge(relationship, { relationshipStyles, warningByEdge, highlight = true } = {}) {
+        const style = ArchimateDiagram.relationshipStyle(relationship.kind, relationshipStyles);
+        // Mutate the caller's original relationship object rather than returning
+        // a shallow copy, so edits made via the context-menu Properties dialog
+        // persist back into the source array (engine._chartState.relationships).
+        relationship.lineStyle = relationship.lineStyle || style.lineStyle;
+        relationship.arrowhead = relationship.arrowhead || style.arrowhead || 'none';
+        relationship.arrowheadStart = relationship.arrowheadStart || style.arrowheadStart;
+
+        const warning = warningByEdge?.get(relationship);
+        if (warning) {
+            relationship._archimateWarning = warning.message;
+            if (highlight) {
+                relationship.color = relationship.color || '#e74c3c';
+                relationship.dasharray = relationship.dasharray || '4 3';
+            }
+            const existingTooltip = relationship.tooltip || '';
+            const warningTooltip = `⚠️ ${warning.message}`;
+            relationship.tooltip = existingTooltip
+                ? `${existingTooltip}\n${warningTooltip}`
+                : warningTooltip;
+        }
+
+        return relationship;
+    }
+}