@peter.prib/renderengine 0.0.0-stage → 0.2.0

package/src/charting/diagrams/EditViewItemCommand.js

@@ -0,0 +1,128 @@
+import { Command } from '../CommandHistory.js';
+import { TextStyle, TEXT_STYLE_KEYS } from '../TextStyle.js';
+
+/**
+ * Where an edit to a drawn item lands. The properties dialog edits the item
+ * the renderer draws (a projection, made afresh on every render), so its
+ * changes must be put back where they live: the model's concept (an element
+ * or relationship, the same on every view), the view's instance (how this
+ * view draws it), or, for a note, image or plain line, the item itself.
+ */
+
+/** Drawn-node keys that are this view's appearance, by the instance's name for them. */
+export const NODE_APPEARANCE_KEYS = Object.freeze({
+    color: 'fillColor', strokeColor: 'strokeColor', textColor: 'textColor',
+});
+/** Drawn-edge keys that are this view's appearance. */
+export const EDGE_APPEARANCE_KEYS = Object.freeze({ color: 'strokeColor' });
+/** Drawn-node keys that belong to the concept (the model element, or a note's own content). */
+export const NODE_CONCEPT_KEYS = Object.freeze(['name', 'type', 'layer', 'specialization', 'icon', 'useDistinctShape', 'documentation', 'properties']);
+/** Drawn-edge keys that belong to the relationship (or the plain line). */
+export const EDGE_CONCEPT_KEYS = Object.freeze(['label', 'kind', 'weight', 'tooltip', 'documentation', 'properties']);
+
+/** Empty, null and undefined all mean "not set". */
+const isUnset = (v) => v === undefined || v === null || v === '';
+const same = (a, b) => (isUnset(a) && isUnset(b)) || JSON.stringify(a) === JSON.stringify(b);
+
+/**
+ * What changed between a drawn item before and after an edit, sorted by where it lives.
+ * @param {'node'|'edge'} kind
+ * @param {Object} before - The drawn item as it was
+ * @param {Object} after - The drawn item as edited
+ * @returns {{ concept: Object, appearance: Object, labelOverride?: string|null }}
+ *   new values; `undefined` removes one
+ */
+export function viewItemChanges(kind, before, after) {
+    const changes = { concept: {}, appearance: {} };
+    const value = (v) => (isUnset(v) ? undefined : v);
+    const edited = { ...after };
+    // The dialog calls an element's documentation its description.
+    if (kind === 'node' && 'description' in after) {
+        edited.documentation = after.description;
+        before = { ...before, documentation: before.description ?? before.documentation };
+    }
+    for (const key of kind === 'edge' ? EDGE_CONCEPT_KEYS : NODE_CONCEPT_KEYS) {
+        if (key in edited && !same(before[key], edited[key])) changes.concept[key] = value(edited[key]);
+    }
+    const appearanceKeys = kind === 'edge' ? EDGE_APPEARANCE_KEYS : NODE_APPEARANCE_KEYS;
+    for (const [key, name] of Object.entries(appearanceKeys)) {
+        if (!(key in edited)) continue;
+        if (!same(before[key], edited[key])) changes.appearance[name] = value(edited[key]);
+    }
+    // The text style, in the instance's names (TextStyle reads the node's).
+    if (kind === 'node') Object.assign(changes.appearance, TextStyle.changes(TextStyle.fromNode(before), _fullStyle(TextStyle.fromNode(edited))));
+    // A node's label is this view's (the instance's override of the name).
+    if (kind === 'node' && 'label' in edited && !same(before.label, edited.label)) {
+        changes.labelOverride = value(edited.label) ?? null;
+    }
+    return changes;
+}
+
+/** A style with every key present (unset ones undefined), so a removed value counts as a change. @private */
+function _fullStyle(style) {
+    return Object.fromEntries(TEXT_STYLE_KEYS.map(k => [k, style[k]]));
+}
+
+/** Whether `changes` changes anything. */
+export function hasViewItemChanges(changes) {
+    return Object.keys(changes.concept).length > 0 || Object.keys(changes.appearance).length > 0 || 'labelOverride' in changes;
+}
+
+/**
+ * EditViewItemCommand — one properties edit to one drawn item, as one undo
+ * step: the concept's fields (an element or relationship in the model, or a
+ * note's, image's or plain line's own), the instance's appearance on this
+ * view, and its label override.
+ */
+export class EditViewItemCommand extends Command {
+    /**
+     * @param {Object} targets
+     * @param {Object} targets.concept - The object holding the concept's fields
+     * @param {Object} targets.instance - The instance (its `appearance`, and `labelOverride`)
+     * @param {Object} changes - As viewItemChanges returns them
+     * @param {string} [label]
+     */
+    constructor({ concept, instance }, changes, label = 'Edit properties') {
+        super(label);
+        this.concept = concept;
+        this.instance = instance;
+        this.changes = changes;
+        this._before = null;
+    }
+
+    execute() {
+        const { concept, instance, changes } = this;
+        this._before = {
+            concept: EditViewItemCommand._take(concept, Object.keys(changes.concept)),
+            ...(instance && { appearance: EditViewItemCommand._take(instance.appearance ?? {}, Object.keys(changes.appearance)) }),
+            ...(instance && 'labelOverride' in changes && { labelOverride: instance.labelOverride ?? null }),
+        };
+        EditViewItemCommand._put(concept, changes.concept);
+        // Without an instance (an edit from the model tree) only the concept changes.
+        if (!instance) return;
+        instance.appearance = instance.appearance ?? {};
+        EditViewItemCommand._put(instance.appearance, changes.appearance);
+        if ('labelOverride' in changes) instance.labelOverride = changes.labelOverride;
+    }
+
+    undo() {
+        const { concept, instance } = this;
+        EditViewItemCommand._put(concept, this._before.concept);
+        if (!instance) return;
+        EditViewItemCommand._put(instance.appearance, this._before.appearance);
+        if ('labelOverride' in this._before) instance.labelOverride = this._before.labelOverride;
+    }
+
+    /** @private */
+    static _take(target, keys) {
+        return Object.fromEntries(keys.map(k => [k, target[k] === undefined ? undefined : JSON.parse(JSON.stringify(target[k]))]));
+    }
+
+    /** @private */
+    static _put(target, values) {
+        for (const [key, v] of Object.entries(values)) {
+            if (v === undefined) delete target[key];
+            else target[key] = v;
+        }
+    }
+}

package/src/charting/diagrams/ElementInstance.js

@@ -0,0 +1,157 @@
+import { LabelHelper } from './LabelHelper.js';
+
+/**
+ * ElementInstance — A projection of a model element into a specific view.
+ * Represents a single occurrence of an element in a diagram, with its own position,
+ * label override, and visibility state. Multiple instances can exist for the same
+ * model element within a single view.
+ */
+export class ElementInstance {
+    static #nextId = 0;
+
+    /**
+     * Create a new element instance.
+     * @param {string} elementId - Reference to the model element (immutable)
+     * @param {number} x - X position in the view
+     * @param {number} y - Y position in the view
+     * @param {string} [labelOverride] - Optional display name override
+     */
+    constructor(elementId, x, y, labelOverride = null) {
+        if (!elementId) {
+            throw new Error('ElementInstance requires elementId');
+        }
+        this.elementId = elementId;
+        this.x = x;
+        this.y = y;
+        this.labelOverride = labelOverride;
+        this.visible = true;
+        this.zIndex = 0;  // Stacking order (0 = default, higher = on top)
+        /** Size set on this view ({width, height} or {radius}); empty = the element's own. */
+        this.size = {};
+        /** Paint and text set on this view (fillColor, strokeColor, strokeWidth, textColor, fontFamily,
+         *  fontSize, fontWeight, fontStyle, textAlign, textPosition); empty = the element's own. */
+        this.appearance = {};
+        /** What an Archi file said about this item that the model does not use (attributes,
+         *  child elements, features, its original style), written back on export; null when not imported. */
+        this.archi = null;
+
+        // Generate stable, position-independent instance ID
+        this.id = `${elementId}_${ElementInstance.#nextId++}`;
+    }
+
+    /** Its id in an Archi file: Archi's own when it was imported, else one made from the instance id. */
+    get visualId() {
+        return this.archi?.id ?? `diag-${this.id}`;
+    }
+
+    /** The visual id (`visualId`) of the box it is drawn inside on its view (Archi's nesting), or null. */
+    get nestedIn() {
+        return this.archi?.parent ?? null;
+    }
+
+    /**
+     * Reset the instance ID counter (for testing).
+     */
+    static resetIdCounter() {
+        ElementInstance.#nextId = 0;
+    }
+
+    /**
+     * What this instance draws: the model element it shows.
+     * @param {ArchimateModel} model
+     * @returns {Object|undefined}
+     */
+    resolve(model) {
+        return model.getElement(this.elementId);
+    }
+
+    /** Whether the view's element filter (`elementIds`) lets this instance show. */
+    shownIn(view) {
+        return view.includesElement(this.elementId);
+    }
+
+    /**
+     * The item handed to the renderer: what it draws, placed and sized for this
+     * view, under this instance's id. Undefined if there is nothing to draw.
+     * @param {ArchimateModel} model
+     * @returns {Object|undefined}
+     */
+    project(model) {
+        const base = this.resolve(model);
+        if (!base) return undefined;
+        return {
+            ...base,
+            id: this.id,  // the renderer tracks each instance separately
+            elementId: base.id,
+            x: this.x,
+            y: this.y,
+            name: this.getDisplayName(model),
+            visible: this.visible,
+            diagramInstanceId: this.id,
+            zIndex: this.zIndex,
+            ...this.size,
+            // View paint over the element's: the renderer's names for fill and line.
+            ...(this.appearance.fillColor && { color: this.appearance.fillColor }),
+            ...(this.appearance.strokeColor && { strokeColor: this.appearance.strokeColor }),
+            ...(this.appearance.strokeWidth !== undefined && { strokeWidth: this.appearance.strokeWidth }),
+            ...(this.appearance.textColor && { textColor: this.appearance.textColor }),
+            // Text: the renderer's names (textPosition is its verticalAlign).
+            ...(this.appearance.fontFamily && { fontFamily: this.appearance.fontFamily }),
+            ...(this.appearance.fontSize && { fontSize: this.appearance.fontSize }),
+            ...(this.appearance.fontWeight && { fontWeight: this.appearance.fontWeight }),
+            ...(this.appearance.fontStyle && { fontStyle: this.appearance.fontStyle }),
+            ...(this.appearance.textAlign && { textAlign: this.appearance.textAlign }),
+            ...(this.appearance.textPosition && { verticalAlign: this.appearance.textPosition }),
+        };
+    }
+
+    /**
+     * Get the display name for this instance.
+     * Uses labelOverride if set, otherwise what it draws.
+     * @param {ArchimateModel} model
+     * @returns {string}
+     */
+    getDisplayName(model) {
+        const base = this.resolve(model);
+        // A label (the instance's own, else the element's) may be an expression: ${field} or {field} of the element.
+        const label = this.labelOverride || base?.label;
+        if (!label) return base?.name ?? '';
+        return typeof label === 'string' ? LabelHelper.resolveNodeLabel({ ...base, label }) : String(label);
+    }
+
+    /**
+     * Serialize to plain object (for JSON, storage, export).
+     * @returns {Object}
+     */
+    toJSON() {
+        return {
+            elementId: this.elementId,
+            x: this.x,
+            y: this.y,
+            labelOverride: this.labelOverride,
+            visible: this.visible,
+            zIndex: this.zIndex,
+            size: Object.keys(this.size).length ? { ...this.size } : undefined,
+            appearance: Object.keys(this.appearance).length ? { ...this.appearance } : undefined,
+            archi: this.archi ? structuredCopy(this.archi) : undefined,
+        };
+    }
+
+    /**
+     * Create an instance from plain object.
+     * @param {Object} data
+     * @returns {ElementInstance}
+     */
+    static fromJSON(data) {
+        const inst = new ElementInstance(data.elementId, data.x, data.y, data.labelOverride);
+        inst.visible = data.visible !== false;
+        inst.zIndex = data.zIndex || 0;
+        inst.size = { ...(data.size ?? {}) };
+        inst.appearance = { ...(data.appearance ?? {}) };
+        inst.archi = data.archi ? structuredCopy(data.archi) : null;
+        return inst;
+    }
+}
+
+/** A deep copy of plain JSON data. */
+export const structuredCopy = (value) => JSON.parse(JSON.stringify(value));