@peter.prib/renderengine 0.0.0-stage → 0.2.0

package/src/charting/diagrams/Tooltip.js

@@ -0,0 +1,62 @@
+/**
+ * Tooltip — small DOM helper for graph-diagram hover tooltips.
+ *
+ * The tooltip logic used to live inside RenderEngine._addTooltipListeners;
+ * it is collected here so diagram classes can manage their own tooltips
+ * without going through the engine façade.
+ */
+export class Tooltip {
+    constructor(container) {
+        this.container = container;
+        this.el = null;
+    }
+
+    _ensure() {
+        if (this.el) return;
+        this.el = document.createElement('div');
+        this.el.style.cssText = `
+            position: fixed;
+            display: none;
+            background-color: rgba(0, 0, 0, 0.8);
+            color: white;
+            padding: 8px 12px;
+            border-radius: 5px;
+            font-family: sans-serif;
+            font-size: 12px;
+            line-height: 1.45;
+            pointer-events: none;
+            z-index: 10000;
+            white-space: pre-line;
+            max-width: 520px;
+            min-width: 80px;
+            word-wrap: break-word;
+            overflow-wrap: break-word;
+            box-shadow: 0 4px 16px rgba(0,0,0,0.25);
+        `;
+        document.body.appendChild(this.el);
+    }
+
+    show(text, clientX, clientY) {
+        this._ensure();
+        this.el.style.display = 'block';
+        this.el.textContent = text;
+        // Position relative to the viewport so parent containers can never clip
+        // the tooltip, and nudge away from the cursor / screen edges.
+        const pad = 12;
+        let left = clientX + pad;
+        let top = clientY + pad;
+        const rect = this.el.getBoundingClientRect();
+        if (left + rect.width > window.innerWidth - pad) {
+            left = Math.max(pad, clientX - rect.width - pad);
+        }
+        if (top + rect.height > window.innerHeight - pad) {
+            top = Math.max(pad, clientY - rect.height - pad);
+        }
+        this.el.style.left = `${left}px`;
+        this.el.style.top = `${top}px`;
+    }
+
+    hide() {
+        if (this.el) this.el.style.display = 'none';
+    }
+}

package/src/charting/diagrams/ViewConnectionInstance.js

@@ -0,0 +1,102 @@
+/**
+ * ViewConnectionInstance — a line drawn on one view between two of its boxes
+ * with no model relationship behind it: Archi's plain connection (a note to an
+ * element, say) or a canvas connection. Like a note, it belongs to its view.
+ *
+ * Its look is Archi's connection `type`, a bit mask: the line (solid, dashed,
+ * dotted) and an arrow at either end (filled, hollow or open).
+ */
+export class ViewConnectionInstance {
+    /** Archi's connection type bits (IDiagramModelConnection). */
+    static TYPE = Object.freeze({
+        ARROW_FILL_TARGET: 1, LINE_DASHED: 2, LINE_DOTTED: 4, ARROW_FILL_SOURCE: 8,
+        ARROW_HOLLOW_TARGET: 16, ARROW_HOLLOW_SOURCE: 32, ARROW_LINE_TARGET: 64, ARROW_LINE_SOURCE: 128,
+    });
+
+    /**
+     * @param {Object} spec
+     * @param {string} spec.id
+     * @param {string} spec.sourceInstanceId - the box it starts at (an instance on the view)
+     * @param {string} spec.targetInstanceId - the box it ends at
+     * @param {Array<{x:number,y:number}>} [spec.waypoints] - bend points on the view
+     * @param {number} [spec.type] - Archi's type bits (line style and arrows)
+     * @param {string} [spec.label]
+     * @param {Object} [spec.appearance] - strokeColor, strokeWidth, textColor, ...
+     * @param {string} [spec.archiType] - Archi's class, kept for export ('diagram-model-connection', 'canvas-model-connection')
+     */
+    constructor({ id, sourceInstanceId, targetInstanceId, waypoints = [], type = 0, label = '', appearance = {}, archiType = 'diagram-model-connection' }) {
+        if (!id || !sourceInstanceId || !targetInstanceId) throw new TypeError('ViewConnectionInstance needs an id and both ends');
+        this.id = id;
+        this.sourceInstanceId = sourceInstanceId;
+        this.targetInstanceId = targetInstanceId;
+        this.waypoints = waypoints.map(wp => ({ x: wp.x, y: wp.y }));
+        this.type = type;
+        this.label = label;
+        this.appearance = { ...appearance };
+        this.archiType = archiType;
+        /** What an Archi file said about this line that the model does not use; null when not imported. */
+        this.archi = null;
+        this.visible = true;
+    }
+
+    /** The line style its type bits give. */
+    get lineStyle() {
+        const { LINE_DASHED, LINE_DOTTED } = ViewConnectionInstance.TYPE;
+        if (this.type & LINE_DOTTED) return 'dotted';
+        if (this.type & LINE_DASHED) return 'dashed';
+        return 'solid';
+    }
+
+    /** The renderer's marker for one end ('target' or 'source'), or 'none'. */
+    arrowhead(end) {
+        const T = ViewConnectionInstance.TYPE;
+        const [fill, hollow, line] = end === 'target'
+            ? [T.ARROW_FILL_TARGET, T.ARROW_HOLLOW_TARGET, T.ARROW_LINE_TARGET]
+            : [T.ARROW_FILL_SOURCE, T.ARROW_HOLLOW_SOURCE, T.ARROW_LINE_SOURCE];
+        if (this.type & fill) return 'arrow';
+        if (this.type & hollow) return 'triangle-hollow';
+        if (this.type & line) return 'open-arrow';
+        return 'none';
+    }
+
+    /** Whether an end is on the view: one of its boxes, or one of its groups. */
+    static endOn(view, id) {
+        return !!view.getElementInstance(id) || !!view.folderLayout?.[id];
+    }
+
+    /** The edge handed to the renderer, if both its ends are on the view. */
+    project(view) {
+        if (!this.visible || !ViewConnectionInstance.endOn(view, this.sourceInstanceId) || !ViewConnectionInstance.endOn(view, this.targetInstanceId)) return undefined;
+        return {
+            id: this.id,
+            source: this.sourceInstanceId,
+            target: this.targetInstanceId,
+            kind: 'connection',
+            viewConnection: true,
+            label: this.label || undefined,
+            waypoints: this.waypoints.map(wp => ({ ...wp })),
+            lineStyle: this.lineStyle,
+            arrowhead: this.arrowhead('target'),
+            arrowheadStart: this.arrowhead('source'),
+            color: this.appearance.strokeColor || '#000000',
+            ...(this.appearance.strokeWidth !== undefined && { width: this.appearance.strokeWidth }),
+        };
+    }
+
+    toJSON() {
+        return {
+            id: this.id, sourceInstanceId: this.sourceInstanceId, targetInstanceId: this.targetInstanceId,
+            waypoints: this.waypoints.map(wp => ({ ...wp })), type: this.type, label: this.label,
+            appearance: Object.keys(this.appearance).length ? { ...this.appearance } : undefined,
+            archiType: this.archiType, visible: this.visible,
+            archi: this.archi ? JSON.parse(JSON.stringify(this.archi)) : undefined,
+        };
+    }
+
+    static fromJSON(data) {
+        const inst = new ViewConnectionInstance(data);
+        inst.visible = data.visible !== false;
+        inst.archi = data.archi ? JSON.parse(JSON.stringify(data.archi)) : null;
+        return inst;
+    }
+}

package/src/charting/diagrams/ViewObjectInstance.js

@@ -0,0 +1,56 @@
+import { ElementInstance, structuredCopy } from './ElementInstance.js';
+
+/**
+ * ViewObjectInstance — something drawn on one view that is not a model
+ * element: a note or an image (Archi's DiagramModelNote / DiagramModelImage).
+ * It carries its own content instead of pointing into the model, so it never
+ * shows in the model tree and goes when the view does.
+ */
+export class ViewObjectInstance extends ElementInstance {
+    /**
+     * @param {Object} content - What it draws: `id`, `name`, `shape` ('note'|'image'), and
+     *   shape fields such as `label`, `iconUrl`, `href`, `width`, `height`
+     * @param {number} x
+     * @param {number} y
+     */
+    constructor(content, x, y) {
+        if (!content?.id) throw new TypeError('ViewObjectInstance content needs an id');
+        super(content.id, x, y);
+        const { x: _x, y: _y, ...own } = content;
+        this.content = own;
+    }
+
+    /** Its own content: there is no model element behind it. */
+    resolve() {
+        return this.content;
+    }
+
+    /** A view object belongs to its view: the element filter does not apply. */
+    shownIn() {
+        return true;
+    }
+
+    project(model) {
+        return { ...super.project(model), viewObject: true };
+    }
+
+    toJSON() {
+        return { ...super.toJSON(), content: { ...this.content } };
+    }
+
+    static fromJSON(data) {
+        const inst = new ViewObjectInstance(data.content, data.x, data.y);
+        inst.labelOverride = data.labelOverride ?? null;
+        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;
+    }
+}
+
+/** An element or view-object instance from its JSON form. */
+export function instanceFromJSON(data) {
+    return data?.content ? ViewObjectInstance.fromJSON(data) : ElementInstance.fromJSON(data);
+}

package/src/charting/diagrams/commands/AddEdgeCommand.js

@@ -0,0 +1,34 @@
+import { EdgeCommand } from './GraphCommand.js';
+
+/**
+ * AddEdgeCommand — adds an edge to the current diagram. Execute and redo
+ * report it through `onAdd` (the diagram's `onEdgeAdd`), undo through
+ * `onEdgeRemove(edge)`, so a host can keep its own record in step. A host may
+ * give the edge an `id` in `onAdd`; the command then finds it by that id after
+ * a re-render.
+ */
+export class AddEdgeCommand extends EdgeCommand {
+    constructor(edge, { diagram, label = 'Add edge', onAdd } = {}) {
+        super(label, edge, diagram);
+        this._onAdd = onAdd;
+    }
+
+    execute() {
+        const edges = this.diagram?._chartState?.edges;
+        if (!edges) return;
+        const edge = this.edge;
+        if (!edges.includes(edge)) edges.push(edge);
+        this._redraw();
+        this._onAdd?.(edge);
+    }
+
+    undo() {
+        const edges = this.diagram?._chartState?.edges;
+        if (!edges) return;
+        const edge = this.edge;
+        const i = edges.indexOf(edge);
+        if (i >= 0) edges.splice(i, 1);
+        this._redraw();
+        this.options.onEdgeRemove?.(edge);
+    }
+}

package/src/charting/diagrams/commands/AddNodeCommand.js

@@ -0,0 +1,28 @@
+import { Command } from '../../CommandHistory.js';
+
+export class AddNodeCommand extends Command {
+    constructor(node, { diagram, label = 'Add node', onAdd } = {}) {
+        super(label);
+        this._nodeRef = node;
+        this._diagram = diagram;
+        this._onAdd = onAdd;
+    }
+
+    execute() {
+        const nodes = this._diagram?._chartState?.nodes;
+        if (!nodes) return;
+        if (!nodes.includes(this._nodeRef)) {
+            nodes.push(this._nodeRef);
+        }
+        this._diagram?._rerenderGraph?.();
+        this._onAdd?.(this._nodeRef);
+    }
+
+    undo() {
+        const nodes = this._diagram?._chartState?.nodes;
+        if (!nodes) return;
+        const i = nodes.indexOf(this._nodeRef);
+        if (i >= 0) nodes.splice(i, 1);
+        this._diagram?._rerenderGraph?.();
+    }
+}

package/src/charting/diagrams/commands/AddWaypointCommand.js

@@ -0,0 +1,27 @@
+import { WaypointCommand } from './GraphCommand.js';
+
+export class AddWaypointCommand extends WaypointCommand {
+    constructor(edge, point, { diagram, label = 'Add waypoint', index = -1 } = {}) {
+        super(label, edge, diagram);
+        this.point = { ...point };
+        this._index = index;
+    }
+
+    execute() {
+        const edge = this.edge;
+        if (!edge) return;
+        if (!edge.waypoints) edge.waypoints = [];
+        const idx = this._index >= 0 ? this._index : edge.waypoints.length;
+        edge.waypoints.splice(idx, 0, { ...this.point });
+        this._actualIndex = idx;
+        this._changed(edge);
+    }
+
+    undo() {
+        const edge = this.edge;
+        if (!edge?.waypoints) return;
+        const idx = this._actualIndex ?? this._index;
+        if (idx >= 0) edge.waypoints.splice(idx, 1);
+        this._changed(edge);
+    }
+}

package/src/charting/diagrams/commands/CreateFolderCommand.js

@@ -0,0 +1,27 @@
+/** Command to create a new folder */
+export class CreateFolderCommand {
+    constructor(folder, { diagram = null, onAdd = null } = {}) {
+        this.folder = folder;
+        this.diagram = diagram;
+        this.onAdd = onAdd;
+    }
+
+    execute() {
+        if (this.diagram?.engine?.getArchimateModel) {
+            const model = this.diagram.engine.getArchimateModel?.();
+            if (model && model._folders) {
+                model._folders.set(this.folder.id, { ...this.folder });
+            }
+        }
+        this.onAdd?.(this.folder);
+    }
+
+    undo() {
+        if (this.diagram?.engine?.getArchimateModel) {
+            const model = this.diagram.engine.getArchimateModel?.();
+            if (model && model._folders) {
+                model._folders.delete(this.folder.id);
+            }
+        }
+    }
+}

package/src/charting/diagrams/commands/DeleteEdgeCommand.js

@@ -0,0 +1,30 @@
+import { Command } from '../../CommandHistory.js';
+
+export class DeleteEdgeCommand extends Command {
+    constructor(edge, { diagram, label = 'Delete edge', suppressRender = false, onDelete } = {}) {
+        super(label);
+        /** @type {object} The actual edge object reference in the diagram. */
+        this._edgeRef = edge;
+        this._diagram = diagram;
+        this._suppressRender = suppressRender;
+        this._onDelete = onDelete;
+    }
+
+    execute() {
+        const edges = this._diagram?._chartState?.edges;
+        if (!edges) return;
+        const i = edges.indexOf(this._edgeRef);
+        if (i >= 0) {
+            this._removed = edges.splice(i, 1)[0];
+        }
+        if (!this._suppressRender) this._diagram?._rerenderGraph?.();
+        this._onDelete?.(this._removed ?? this._edgeRef);
+    }
+
+    undo() {
+        const edges = this._diagram?._chartState?.edges;
+        if (!edges || !this._removed) return;
+        edges.push(this._removed);
+        if (!this._suppressRender) this._diagram?._rerenderGraph?.();
+    }
+}

package/src/charting/diagrams/commands/DeleteFolderCommand.js

@@ -0,0 +1,47 @@
+/** Command to delete a folder (moves children to parent) */
+export class DeleteFolderCommand {
+    constructor(folderId, { diagram = null, onDelete = null } = {}) {
+        this.folderId = folderId;
+        this.folder = null; // Saved during execute
+        this.diagram = diagram;
+        this.onDelete = onDelete;
+    }
+
+    execute() {
+        if (this.diagram?.engine?.getArchimateModel) {
+            const model = this.diagram.engine.getArchimateModel?.();
+            if (model && model._folders) {
+                this.folder = model._folders.get(this.folderId);
+                if (this.folder) {
+                    // Move children to parent folder
+                    const parentId = this.folder.parentId;
+                    const allFolders = model.allFolders?.() || [];
+                    for (const folder of allFolders) {
+                        if (folder.parentId === this.folderId) {
+                            folder.parentId = parentId || undefined;
+                        }
+                    }
+                    model._folders.delete(this.folderId);
+                }
+            }
+        }
+        this.onDelete?.(this.folderId);
+    }
+
+    undo() {
+        if (this.folder && this.diagram?.engine?.getArchimateModel) {
+            const model = this.diagram.engine.getArchimateModel?.();
+            if (model && model._folders) {
+                model._folders.set(this.folderId, { ...this.folder });
+                // Restore children's parent references
+                const allFolders = model.allFolders?.() || [];
+                for (const folder of allFolders) {
+                    if (folder.parentId === (this.folder.parentId || undefined) && folder.id !== this.folderId) {
+                        // Find folders that were moved to parent - can't reliably restore without tracking
+                        // This is a limitation of not tracking the exact moves
+                    }
+                }
+            }
+        }
+    }
+}

package/src/charting/diagrams/commands/DeleteNodeCommand.js

@@ -0,0 +1,35 @@
+import { Command, CompositeCommand } from '../../CommandHistory.js';
+import { DeleteEdgeCommand } from './DeleteEdgeCommand.js';
+
+export class DeleteNodeCommand extends CompositeCommand {
+    constructor(node, edges, { diagram, label = 'Delete node' } = {}) {
+        super(label);
+        this.node = { ...node };
+        this._diagram = diagram;
+        this._addNodeSubcommand();
+        for (const edge of edges) {
+            this.add(new DeleteEdgeCommand(edge, { diagram, suppressRender: true }));
+        }
+    }
+
+    _addNodeSubcommand() {
+        const node = this.node;
+        const diagram = this._diagram;
+        this.add(new (class extends Command {
+            constructor() { super('delete node'); }
+            execute() {
+                const nodes = diagram?._chartState?.nodes;
+                if (!nodes) return;
+                const i = nodes.findIndex(n => n.id === node.id);
+                if (i >= 0) nodes.splice(i, 1);
+                diagram?._rerenderGraph?.();
+            }
+            undo() {
+                const nodes = diagram?._chartState?.nodes;
+                if (!nodes || nodes.some(n => n.id === node.id)) return;
+                nodes.push({ ...node });
+                diagram?._rerenderGraph?.();
+            }
+        })());
+    }
+}

package/src/charting/diagrams/commands/DeleteWaypointCommand.js

@@ -0,0 +1,24 @@
+import { WaypointCommand } from './GraphCommand.js';
+
+export class DeleteWaypointCommand extends WaypointCommand {
+    constructor(edge, index, { diagram, label = 'Delete waypoint' } = {}) {
+        super(label, edge, diagram);
+        this.index = index;
+        this._removed = null;
+    }
+
+    execute() {
+        const edge = this.edge;
+        if (!edge?.waypoints) return;
+        this._removed = edge.waypoints.splice(this.index, 1)[0];
+        this._changed(edge);
+    }
+
+    undo() {
+        const edge = this.edge;
+        if (!edge || this._removed == null) return;
+        if (!edge.waypoints) edge.waypoints = [];
+        edge.waypoints.splice(this.index, 0, this._removed);
+        this._changed(edge);
+    }
+}

package/src/charting/diagrams/commands/GraphCommand.js

@@ -0,0 +1,65 @@
+import { Command } from '../../CommandHistory.js';
+
+/**
+ * GraphCommand — base for edits to a graph diagram's nodes and edges.
+ *
+ * A host that re-renders (ArchiMate rebuilds the diagram from its view) hands
+ * the engine one history that outlives each GraphDiagram, so a command may be
+ * undone after the diagram it was recorded on is gone. Commands therefore act
+ * on the diagram on screen now, finding nodes and edges by id.
+ */
+export class GraphCommand extends Command {
+    constructor(label, diagram) {
+        super(label);
+        this._diagram = diagram;
+    }
+
+    /** The diagram on screen now (the one recorded on, if never re-rendered). */
+    get diagram() {
+        return this._diagram?.engine?._graphDiagram ?? this._diagram;
+    }
+
+    /** The current diagram's options, where the host's change hooks live. */
+    get options() {
+        return this.diagram?._chartState?.options ?? {};
+    }
+
+    _node(id) {
+        return this.diagram?._chartState?.nodes?.find(n => n.id === id);
+    }
+
+    /** The current diagram's copy of `ref` (matched by id); `ref` itself when it has no id. */
+    _edge(ref) {
+        if (ref?.id == null) return ref;
+        return this.diagram?._chartState?.edges?.find(e => e.id === ref.id) ?? ref;
+    }
+
+    _redraw() {
+        this.diagram?._rerenderGraph?.();
+    }
+}
+
+/** EdgeCommand — base for edits to one edge, found on the current diagram. */
+export class EdgeCommand extends GraphCommand {
+    constructor(label, edge, diagram) {
+        super(label, diagram);
+        this._edgeRef = edge;
+    }
+
+    get edge() {
+        return this._edge(this._edgeRef);
+    }
+}
+
+/**
+ * WaypointCommand — base for edits to one edge's bend points. Every apply,
+ * including undo and redo, reports the edge's new route through
+ * `onEdgeWaypointsChange(edge, waypoints)`, so a host's copy never drifts.
+ */
+export class WaypointCommand extends EdgeCommand {
+
+    _changed(edge) {
+        this._redraw();
+        this.options.onEdgeWaypointsChange?.(edge, edge.waypoints ?? []);
+    }
+}

package/src/charting/diagrams/commands/InvertEdgeCommand.js

@@ -0,0 +1,24 @@
+import { Command } from '../../CommandHistory.js';
+
+export class InvertEdgeCommand extends Command {
+    constructor(edge, { diagram, label = 'Invert edge', onInvert } = {}) {
+        super(label);
+        this._edgeRef = edge;
+        this._diagram = diagram;
+        this._onInvert = onInvert;
+    }
+
+    execute() { this._swap(); }
+    undo() { this._swap(); }
+
+    _swap() {
+        const edge = this._edgeRef;
+        if (!edge) return;
+        const oldSource = edge.source;
+        const oldTarget = edge.target;
+        edge.source = oldTarget;
+        edge.target = oldSource;
+        this._diagram?._rerenderGraph?.();
+        this._onInvert?.(edge, oldSource, oldTarget);
+    }
+}

package/src/charting/diagrams/commands/MoveNodeCommand.js

@@ -0,0 +1,44 @@
+import { GraphCommand } from './GraphCommand.js';
+
+/**
+ * MoveNodeCommand — repositions one node and coalesces with the previous
+ * drag of the same node so a long drag doesn't create dozens of history entries.
+ * Every apply, including undo and redo, reports the position through
+ * `onNodeMove(nodeId, {x, y})`.
+ */
+export class MoveNodeCommand extends GraphCommand {
+    constructor(nodeId, from, to, { diagram, label = 'Move node' } = {}) {
+        super(label, diagram);
+        this.nodeId = nodeId;
+        this.from = { ...from };
+        this.to = { ...to };
+    }
+
+    execute() {
+        this._apply(this.to);
+    }
+
+    undo() {
+        this._apply(this.from);
+    }
+
+    _apply(pos) {
+        const node = this._node(this.nodeId);
+        if (!node) return;
+        node.x = pos.x;
+        node.y = pos.y;
+        // Also update the live simulation/drag position map so _rerenderGraph
+        // doesn't copy stale dragged positions back onto the node.
+        const p = this.diagram?._graph?.pos?.get(this.nodeId);
+        if (p) { p.x = pos.x; p.y = pos.y; }
+        this._redraw();
+        this.options.onNodeMove?.(this.nodeId, { x: pos.x, y: pos.y });
+    }
+
+    merge(other) {
+        if (other instanceof MoveNodeCommand && other.nodeId === this.nodeId) {
+            return new MoveNodeCommand(this.nodeId, this.from, other.to, { diagram: this._diagram, label: this.label });
+        }
+        return undefined;
+    }
+}

package/src/charting/diagrams/commands/MoveWaypointCommand.js

@@ -0,0 +1,27 @@
+import { WaypointCommand } from './GraphCommand.js';
+
+export class MoveWaypointCommand extends WaypointCommand {
+    constructor(edge, index, from, to, { diagram, label = 'Move waypoint' } = {}) {
+        super(label, edge, diagram);
+        this.index = index;
+        this.from = { ...from };
+        this.to = { ...to };
+    }
+
+    execute() { this._apply(this.to); }
+    undo() { this._apply(this.from); }
+
+    _apply(pos) {
+        const edge = this.edge;
+        if (!edge?.waypoints || !edge.waypoints[this.index]) return;
+        edge.waypoints[this.index] = { ...pos };
+        this._changed(edge);
+    }
+
+    merge(other) {
+        if (other instanceof MoveWaypointCommand && other._edgeRef === this._edgeRef && other.index === this.index) {
+            return new MoveWaypointCommand(this._edgeRef, this.index, this.from, other.to, { diagram: this._diagram, label: this.label });
+        }
+        return undefined;
+    }
+}

package/src/charting/diagrams/commands/RenameEdgeCommand.js

@@ -0,0 +1,23 @@
+import { Command } from '../../CommandHistory.js';
+
+export class RenameEdgeCommand extends Command {
+    constructor(edge, from, to, { diagram, label = 'Rename edge', onRename } = {}) {
+        super(label);
+        this._edgeRef = edge;
+        this.from = from;
+        this.to = to;
+        this._diagram = diagram;
+        this._onRename = onRename;
+    }
+
+    execute() { this._apply(this.to); }
+    undo() { this._apply(this.from); }
+
+    _apply(name) {
+        const edge = this._edgeRef;
+        if (!edge) return;
+        edge.label = name;
+        this._diagram?._rerenderGraph?.();
+        this._onRename?.(edge, name);
+    }
+}