@peter.prib/renderengine 0.0.0-stage → 0.2.0

package/src/charting/DiagramEditorCommand.js

@@ -0,0 +1,110 @@
+/**
+ * DiagramEditorCommand — Base class for all diagram editing operations.
+ * Implements the Command pattern with undo/redo support.
+ *
+ * Subclasses must implement:
+ *   execute() — apply the change to the diagram state
+ *   undo() — revert the change
+ */
+export class DiagramEditorCommand {
+    constructor(label = 'Edit') {
+        this.label = label;  // User-visible description for undo/redo menu
+    }
+
+    /**
+     * Execute the command. Must be implemented by subclasses.
+     * @throws Error if not overridden
+     */
+    execute() {
+        throw new Error('Command.execute() must be implemented by subclass');
+    }
+
+    /**
+     * Undo the command. Must be implemented by subclasses.
+     * @throws Error if not overridden
+     */
+    undo() {
+        throw new Error('Command.undo() must be implemented by subclass');
+    }
+}
+
+/**
+ * CommandHistory — Manages undo/redo stack.
+ * Executes commands and tracks history for undo/redo.
+ */
+export class CommandHistory {
+    constructor() {
+        this.undoStack = [];
+        this.redoStack = [];
+    }
+
+    /**
+     * Execute a command and add it to undo history.
+     * @param {DiagramEditorCommand} command
+     */
+    execute(command) {
+        command.execute();
+        this.undoStack.push(command);
+        this.redoStack = [];  // Clear redo stack when new command is executed
+    }
+
+    /**
+     * Undo the last command.
+     * @returns {boolean} true if undo was successful, false if stack empty
+     */
+    undo() {
+        if (this.undoStack.length === 0) return false;
+        const command = this.undoStack.pop();
+        command.undo();
+        this.redoStack.push(command);
+        return true;
+    }
+
+    /**
+     * Redo the last undone command.
+     * @returns {boolean} true if redo was successful, false if stack empty
+     */
+    redo() {
+        if (this.redoStack.length === 0) return false;
+        const command = this.redoStack.pop();
+        command.execute();
+        this.undoStack.push(command);
+        return true;
+    }
+
+    /**
+     * Check if undo is available.
+     */
+    canUndo() {
+        return this.undoStack.length > 0;
+    }
+
+    /**
+     * Check if redo is available.
+     */
+    canRedo() {
+        return this.redoStack.length > 0;
+    }
+
+    /**
+     * Get the label of the command that would be undone.
+     */
+    getUndoLabel() {
+        return this.undoStack.length > 0 ? this.undoStack[this.undoStack.length - 1].label : null;
+    }
+
+    /**
+     * Get the label of the command that would be redone.
+     */
+    getRedoLabel() {
+        return this.redoStack.length > 0 ? this.redoStack[this.redoStack.length - 1].label : null;
+    }
+
+    /**
+     * Clear all undo/redo history.
+     */
+    clear() {
+        this.undoStack = [];
+        this.redoStack = [];
+    }
+}

package/src/charting/DiagramEditorCommands.js

@@ -0,0 +1,237 @@
+import { Command } from './CommandHistory.js';
+import { reorderedZ } from './zOrder.js';
+
+/**
+ * Standard commands for diagram editors (move, z-index ordering).
+ * Used by DiagramEditor subclasses for common interactions.
+ */
+
+export class MoveElementCommand extends Command {
+    constructor(editor, elementId, deltaX, deltaY) {
+        super('Move');
+        this.editor = editor;
+        this.elementId = elementId;
+        this.deltaX = deltaX;
+        this.deltaY = deltaY;
+    }
+
+    execute() {
+        const template = this.editor.getTemplate(this.elementId);
+        if (template) {
+            template.x = (template.x || 0) + this.deltaX;
+            template.y = (template.y || 0) + this.deltaY;
+        }
+    }
+
+    undo() {
+        const template = this.editor.getTemplate(this.elementId);
+        if (template) {
+            template.x = (template.x || 0) - this.deltaX;
+            template.y = (template.y || 0) - this.deltaY;
+        }
+    }
+}
+
+/**
+ * ReorderCommand — change one item's place in the stacking order, as one undo
+ * step. `target` is anything with `layerItems()` returning its items
+ * (`{id, zIndex}`): DiagramEditor (its templates) or a DiagramEditorState view
+ * (DiagramView's templates, ArchimateView's element instances). Every item's previous zIndex is restored on undo, since
+ * the reorder renumbers the whole stack (see zOrder.js).
+ */
+export class ReorderCommand extends Command {
+    /** @type {'front'|'back'|'raise'|'lower'} set by each subclass */
+    static op = null;
+
+    constructor(target, itemId, label) {
+        super(label);
+        this.target = target;
+        this.itemId = itemId;
+        this.before = null;
+    }
+
+    execute() {
+        // A locked item stays where it is in the stack too; a pinned one stays behind.
+        const arrangement = this.target.arrangement;
+        if (arrangement?.isLocked(this.itemId)) return;
+        const items = this.target.layerItems();
+        const next = reorderedZ(items, this.itemId, this.constructor.op, { pinned: (id) => !!arrangement?.isPinnedToBack(id) });
+        if (!next) return;
+        this.before = new Map(items.map(item => [item.id, item.zIndex]));
+        for (const item of items) item.zIndex = next.get(item.id);
+    }
+
+    undo() {
+        if (!this.before) return;
+        for (const item of this.target.layerItems()) {
+            if (this.before.has(item.id)) item.zIndex = this.before.get(item.id);
+        }
+    }
+}
+
+export class BringToFrontCommand extends ReorderCommand {
+    static op = 'front';
+    constructor(target, itemId) { super(target, itemId, 'Bring to Front'); }
+}
+
+export class SendToBackCommand extends ReorderCommand {
+    static op = 'back';
+    constructor(target, itemId) { super(target, itemId, 'Send to Back'); }
+}
+
+export class RaiseCommand extends ReorderCommand {
+    static op = 'raise';
+    constructor(target, itemId) { super(target, itemId, 'Raise'); }
+}
+
+export class LowerCommand extends ReorderCommand {
+    static op = 'lower';
+    constructor(target, itemId) { super(target, itemId, 'Lower'); }
+}
+
+export class EditPropertyCommand extends Command {
+    constructor(editor, templateId, propertyName, oldValue, newValue) {
+        super(`Edit ${propertyName}`);
+        this.editor = editor;
+        this.templateId = templateId;
+        this.propertyName = propertyName;
+        this.oldValue = oldValue;
+        this.newValue = newValue;
+    }
+
+    execute() {
+        const template = this.editor.getTemplate(this.templateId);
+        if (template) {
+            template[this.propertyName] = this.newValue;
+        }
+    }
+
+    undo() {
+        const template = this.editor.getTemplate(this.templateId);
+        if (template) {
+            template[this.propertyName] = this.oldValue;
+        }
+    }
+}
+
+export class CreateTemplateCommand extends Command {
+    constructor(editor, template) {
+        super(`Create ${template.name}`);
+        this.editor = editor;
+        this.template = template;
+    }
+
+    execute() {
+        this.editor.addTemplate(this.template);
+    }
+
+    undo() {
+        this.editor.removeTemplate(this.template.id);
+    }
+}
+
+/** DeleteTemplateCommand — remove one template; undo puts the same template back. */
+export class DeleteTemplateCommand extends Command {
+    constructor(editor, templateId) {
+        super('Delete');
+        this.editor = editor;
+        this.templateId = templateId;
+        this.template = null;
+    }
+
+    execute() {
+        this.template = this.editor.getTemplate(this.templateId) ?? null;
+        if (this.template) {
+            this.label = `Delete ${this.template.name}`;
+            this.editor.removeTemplate(this.templateId);
+        }
+    }
+
+    undo() {
+        if (this.template) this.editor.addTemplate(this.template);
+    }
+}
+
+export class ResizeCommand extends Command {
+    constructor(editor, elementId, deltaWidth, deltaHeight) {
+        super('Resize');
+        this.editor = editor;
+        this.elementId = elementId;
+        this.deltaWidth = deltaWidth;
+        this.deltaHeight = deltaHeight;
+    }
+
+    execute() {
+        const template = this.editor.getTemplate(this.elementId);
+        if (template) {
+            template.width = Math.max(30, (template.width || 120) + this.deltaWidth);
+            template.height = Math.max(30, (template.height || 60) + this.deltaHeight);
+        }
+    }
+
+    undo() {
+        const template = this.editor.getTemplate(this.elementId);
+        if (template) {
+            template.width = Math.max(30, (template.width || 120) - this.deltaWidth);
+            template.height = Math.max(30, (template.height || 60) - this.deltaHeight);
+        }
+    }
+}
+
+export class RotateCommand extends Command {
+    constructor(editor, elementId, deltaRotation) {
+        super('Rotate');
+        this.editor = editor;
+        this.elementId = elementId;
+        this.deltaRotation = deltaRotation;
+    }
+
+    execute() {
+        const template = this.editor.getTemplate(this.elementId);
+        if (template) {
+            template.rotation = ((template.rotation || 0) + this.deltaRotation) % 360;
+        }
+    }
+
+    undo() {
+        const template = this.editor.getTemplate(this.elementId);
+        if (template) {
+            template.rotation = ((template.rotation || 0) - this.deltaRotation) % 360;
+        }
+    }
+}
+
+/**
+ * SetPropertiesCommand — apply a patch of property values to any object (a
+ * template, a line, a style level) as one undo step. An `undefined` value
+ * removes the key; undo restores exactly what was there, absent keys included.
+ */
+export class SetPropertiesCommand extends Command {
+    constructor(target, patch, label = 'Edit properties') {
+        super(label);
+        this.target = target;
+        this.patch = { ...patch };
+        // A target whose properties are computed (an ArchiMate template shows its
+        // layer colour until given one) reports what it holds itself, so undo
+        // restores "unset" rather than freezing the computed value.
+        const own = typeof target.ownProperty === 'function' ? (k) => target.ownProperty(k) : (k) => target[k];
+        this.before = Object.fromEntries(Object.keys(patch).map(k => [k, own(k)]));
+    }
+
+    execute() {
+        SetPropertiesCommand._assign(this.target, this.patch);
+    }
+
+    undo() {
+        SetPropertiesCommand._assign(this.target, this.before);
+    }
+
+    static _assign(target, values) {
+        for (const [k, v] of Object.entries(values)) {
+            // undefined means "unset": an own field is removed; an accessor
+            // (state kept elsewhere, e.g. on an ArchiMate instance) is told.
+            if (v === undefined && Object.prototype.hasOwnProperty.call(target, k)) delete target[k];
+            else target[k] = v;
+        }
+    }
+}

package/src/charting/DiagramEditorEdgeCommands.js

@@ -0,0 +1,142 @@
+/**
+ * Edge-related commands for DiagramEditor undo/redo support.
+ */
+import { Command } from './CommandHistory.js';
+
+export class AddEdgeCommand extends Command {
+    constructor(editor, edge) {
+        super('Add edge');
+        this.editor = editor;
+        this.edge = edge;
+    }
+
+    execute() {
+        if (!this.editor.getEdge(this.edge.id)) {
+            this.editor.addEdge(this.edge);
+        }
+    }
+
+    undo() {
+        this.editor.removeEdge(this.edge.id);
+    }
+}
+
+export class DeleteEdgeCommand extends Command {
+    constructor(editor, edgeId) {
+        super('Delete edge');
+        this.editor = editor;
+        this.edgeId = edgeId;
+        this.edge = null;
+    }
+
+    execute() {
+        this.edge = this.editor.getEdge(this.edgeId);
+        this.editor.removeEdge(this.edgeId);
+    }
+
+    undo() {
+        if (this.edge) {
+            this.editor.addEdge(this.edge);
+        }
+    }
+}
+
+/** Move one end of an edge to a different template; waypoints and style are kept. */
+export class ReconnectEdgeCommand extends Command {
+    /**
+     * @param {'source'|'target'} end
+     */
+    constructor(editor, edgeId, end, newTemplateId) {
+        super('Reconnect edge');
+        if (end !== 'source' && end !== 'target') throw new TypeError(`end must be 'source' or 'target', got ${end}`);
+        this.editor = editor;
+        this.edgeId = edgeId;
+        this.key = end === 'source' ? 'sourceId' : 'targetId';
+        this.sideKey = end === 'source' ? 'sourceSide' : 'targetSide';
+        this.newTemplateId = newTemplateId;
+        const edge = editor.getEdge(edgeId);
+        this.oldTemplateId = edge?.[this.key];
+        this.oldSide = edge?.[this.sideKey];
+    }
+
+    execute() {
+        const edge = this.editor.getEdge(this.edgeId);
+        if (!edge) return;
+        edge[this.key] = this.newTemplateId;
+        // A side pinned on the old shape says nothing about the new one.
+        edge[this.sideKey] = 'auto';
+    }
+
+    undo() {
+        const edge = this.editor.getEdge(this.edgeId);
+        if (!edge) return;
+        edge[this.key] = this.oldTemplateId;
+        edge[this.sideKey] = this.oldSide;
+    }
+}
+
+export class MoveWaypointCommand extends Command {
+    constructor(editor, edgeId, waypointIndex, oldX, oldY, newX, newY) {
+        super('Move waypoint');
+        this.editor = editor;
+        this.edgeId = edgeId;
+        this.waypointIndex = waypointIndex;
+        this.oldPos = { x: oldX, y: oldY };
+        this.newPos = { x: newX, y: newY };
+    }
+
+    execute() {
+        this.editor.getEdge(this.edgeId)?.moveWaypoint(this.waypointIndex, this.newPos.x, this.newPos.y);
+    }
+
+    undo() {
+        this.editor.getEdge(this.edgeId)?.moveWaypoint(this.waypointIndex, this.oldPos.x, this.oldPos.y);
+    }
+}
+
+export class AddWaypointCommand extends Command {
+    constructor(editor, edgeId, x, y, index) {
+        super('Add waypoint');
+        this.editor = editor;
+        this.edgeId = edgeId;
+        this.x = x;
+        this.y = y;
+        this.index = index;
+    }
+
+    execute() {
+        this.editor.getEdge(this.edgeId)?.addWaypoint(this.x, this.y, this.index);
+    }
+
+    undo() {
+        const edge = this.editor.getEdge(this.edgeId);
+        if (edge && this.index >= 0 && this.index < edge.waypoints.length) {
+            edge.removeWaypoint(this.index);
+        }
+    }
+}
+
+export class DeleteWaypointCommand extends Command {
+    constructor(editor, edgeId, waypointIndex) {
+        super('Delete waypoint');
+        this.editor = editor;
+        this.edgeId = edgeId;
+        this.waypointIndex = waypointIndex;
+        this.waypoint = null;
+    }
+
+    execute() {
+        const edge = this.editor.getEdge(this.edgeId);
+        if (edge && this.waypointIndex >= 0 && this.waypointIndex < edge.waypoints.length) {
+            this.waypoint = { ...edge.waypoints[this.waypointIndex] };
+            edge.removeWaypoint(this.waypointIndex);
+        }
+    }
+
+    undo() {
+        const edge = this.editor.getEdge(this.edgeId);
+        if (edge && this.waypoint) {
+            edge.addWaypoint(this.waypoint.x, this.waypoint.y, this.waypointIndex);
+        }
+    }
+}

package/src/charting/DiagramEditorState.js

@@ -0,0 +1,98 @@
+/**
+ * DiagramEditorState — what every diagram view shares: an undo history (its
+ * model's, once a ViewSetModel adopts it: one per model) and the stacking
+ * order of what it draws. Subclasses hold the items and say
+ * which of them stack: DiagramView (templates) and ArchimateView (element
+ * instances).
+ *
+ * This is the "edit model" layer in GEF terms: the model (elements,
+ * relationships) is separate; positions, z-order and edit history live here.
+ */
+import { CommandHistory } from './CommandHistory.js';
+import { Arrangement, GroupCommand, UngroupCommand, LockCommand, BackgroundCommand } from './arrangement/index.js';
+import { pinnedBehind } from './zOrder.js';
+import { BringToFrontCommand, SendToBackCommand, RaiseCommand, LowerCommand } from './DiagramEditorCommands.js';
+
+export class DiagramEditorState {
+    /**
+     * @param {Object} [options]
+     * @param {Object} [options.historyOptions] - Passed to CommandHistory (e.g. onChange)
+     */
+    constructor({ historyOptions = {}, arrangement = null } = {}) {
+        if (new.target === DiagramEditorState) {
+            throw new TypeError('DiagramEditorState is abstract — subclass it');
+        }
+        /** Undo/redo for edits to this view (moves, ordering, adds, deletes, ...). */
+        this.history = new CommandHistory(historyOptions);
+        /** Which items move as one (groups) and which are fixed in place (locks). */
+        this.arrangement = arrangement instanceof Arrangement ? arrangement : Arrangement.fromJSON(arrangement);
+    }
+
+    // Grouping and locking: one undoable step each.
+
+    /** Group items so they move as one (an item already in a group brings its group). */
+    group(itemIds, options) {
+        const cmd = new GroupCommand(this.arrangement, itemIds, options);
+        this.history.execute(cmd);
+        return cmd.groupId;
+    }
+
+    /** Dissolve the group an item is in. */
+    ungroup(itemId) {
+        this.history.execute(new UngroupCommand(this.arrangement, itemId));
+    }
+
+    /** Fix items (or their groups) in place, or free them. */
+    setLocked(itemIds, locked) {
+        this.history.execute(new LockCommand(this.arrangement, itemIds, locked));
+    }
+
+    /** Items whose stacking order the ordering commands manage (`{id, zIndex}`). */
+    layerItems() {
+        throw new Error(`${this.constructor.name} must implement layerItems()`);
+    }
+
+    /**
+     * Make items this view's background: one locked BackgroundGroup, stacked
+     * behind everything else. For a view being built (a canvas made from a
+     * template): not an undo step.
+     * @param {Iterable<string>} itemIds
+     * @param {{name?: string, locked?: boolean}} [options]
+     * @returns {string|null} the group's id (null for no items)
+     */
+    arrangeAsBackground(itemIds, options = {}) {
+        const ids = [...itemIds];
+        if (!ids.length) return null;
+        const cmd = new BackgroundCommand(this.arrangement, ids, options);
+        cmd.apply();
+        const items = this.layerItems();
+        const z = pinnedBehind(items, (id) => this.arrangement.isPinnedToBack(id));
+        for (const item of items) item.zIndex = z.get(item.id);
+        return cmd.groupId;
+    }
+
+    /** Whether nothing is drawn on this view. */
+    isEmpty() {
+        return this.layerItems().length === 0;
+    }
+
+    // One undoable step each, via the shared ReorderCommand family (zOrder.js).
+
+    bringToFront(id) {
+        this.history.execute(new BringToFrontCommand(this, id));
+    }
+
+    sendToBack(id) {
+        this.history.execute(new SendToBackCommand(this, id));
+    }
+
+    /** Swap with the item drawn directly above. */
+    raise(id) {
+        this.history.execute(new RaiseCommand(this, id));
+    }
+
+    /** Swap with the item drawn directly below. */
+    lower(id) {
+        this.history.execute(new LowerCommand(this, id));
+    }
+}

package/src/charting/DiagramRegistry.js

@@ -0,0 +1,86 @@
+import { Diagram } from './Diagram.js';
+
+/**
+ * DiagramRegistry — object-oriented catalog of supported diagram types.
+ *
+ * Wraps diagram classes (subclasses of Diagram) with register/lookup/list
+ * helpers, mirroring ChartRegistry but for the diagram renderer family.
+ */
+export class DiagramRegistry {
+    constructor(entries = []) {
+        this._entries = [];
+        this._index = new Map();
+        for (const entry of entries) this.register(entry);
+    }
+
+    /** Number of registered diagram types. */
+    get size() {
+        return this._entries.length;
+    }
+
+    /**
+     * Register a diagram type.
+     * @param {{key: string, method: string, DiagramClass: typeof Diagram}} entry
+     */
+    register(entry) {
+        if (!entry || typeof entry.key !== 'string') {
+            throw new TypeError('DiagramRegistry entry must have a string key');
+        }
+        if (typeof entry.method !== 'string') {
+            throw new TypeError('DiagramRegistry entry must have a string method');
+        }
+        if (!entry.DiagramClass || !(entry.DiagramClass.prototype instanceof Diagram)) {
+            throw new TypeError(`${entry.DiagramClass?.name ?? entry.DiagramClass} must extend Diagram`);
+        }
+        if (entry.DiagramClass.diagramType !== entry.key) {
+            throw new TypeError(`DiagramClass.diagramType (${entry.DiagramClass.diagramType}) must match entry.key (${entry.key})`);
+        }
+
+        if (this._index.has(entry.key)) {
+            const i = this._entries.findIndex(e => e.key === entry.key);
+            this._entries[i] = entry;
+        } else {
+            this._entries.push(entry);
+        }
+        this._index.set(entry.key, entry);
+        return this;
+    }
+
+    /** Remove a diagram type by key. */
+    unregister(key) {
+        const i = this._entries.findIndex(e => e.key === key);
+        if (i >= 0) this._entries.splice(i, 1);
+        this._index.delete(key);
+        return this;
+    }
+
+    /** Look up one entry by key. */
+    get(key) {
+        return this._index.get(key);
+    }
+
+    /** All entries, in registration order. */
+    list() {
+        return this._entries.slice();
+    }
+
+    /** All entry keys. */
+    keys() {
+        return this._entries.map(e => e.key);
+    }
+
+    /** All RenderEngine method names used by the registered entries. */
+    methods() {
+        return this._entries.map(e => e.method);
+    }
+
+    /** All registered Diagram classes. */
+    classes() {
+        return this._entries.map(e => e.DiagramClass);
+    }
+
+    /** Whether a key is registered. */
+    has(key) {
+        return this._index.has(key);
+    }
+}