@peter.prib/renderengine 0.0.0-stage → 0.2.0

package/src/charting/InteractionManager.js

@@ -0,0 +1,725 @@
+import { ContextMenu } from './diagrams/ContextMenu.js';
+import { Tooltip } from './diagrams/Tooltip.js';
+import { SvgZoom } from './diagrams/SvgZoom.js';
+import { OrbitControls } from './OrbitControls.js';
+import { CompositeCommand } from './CommandHistory.js';
+import {
+    MoveNodeCommand, ResizeNodeCommand, NODE_SIZE_KEYS, nodeSize,
+    AddEdgeCommand, DeleteWaypointCommand, MoveWaypointCommand, UpdateEdgeSideCommand,
+} from './diagrams/commands/index.js';
+
+/**
+ * InteractionManager — owns all DOM event-listener wiring for a RenderEngine.
+ *
+ * Moving listener registration here shrinks the RenderEngine constructor and
+ * keeps interaction concerns in one place. State that other RenderEngine
+ * methods rely on (e.g. `_svgZoom`, `_orbitControls`) is still stored on the
+ * engine instance so existing call sites continue to work.
+ */
+export class InteractionManager {
+    constructor(engine) {
+        this._engine = engine;
+    }
+
+    attach() {
+        if (!this._engine.container) return;
+        this._addDragListeners();
+        this._addMarqueeListeners();
+        this._addTooltipListeners();
+        this._addZoomListeners();
+        this._addClickListeners();
+        this._addContextMenuListeners();
+        this._addOrbit3DListeners();
+        this._addEdgeCreationListeners();
+        this._addResizeListeners();
+        this._addKeyboardListeners();
+    }
+
+    _addDragListeners() {
+        const engine = this._engine;
+        if (!engine.container) return;
+
+        const DRAG_THRESHOLD = 4;
+        let selectedNode = null;
+        /** The rest of the dragged node's group: [{id, from}]. */
+        let companions = [];
+        let selectedWaypoint = null;
+        let selectedEndpoint = null;
+        let offset = { x: 0, y: 0 };
+        let downScreenPos = null;
+        let dragStarted = false;
+        let dragStartState = null;
+
+        const getMousePosition = (event) => engine._clientToSvgPoint(event.clientX, event.clientY);
+
+        const onMouseDown = (event) => {
+            const pos = getMousePosition(event);
+            const hitShape = engine.hitTest(event.clientX, event.clientY);
+            if (!engine._graphDiagram?._graph || !hitShape || !hitShape.draggable) return;
+
+            if (hitShape.isEndpoint) {
+                selectedEndpoint = { edge: hitShape.edge, type: hitShape.endpointType };
+                dragStartState = { sourceSide: hitShape.edge.sourceSide, targetSide: hitShape.edge.targetSide };
+                downScreenPos = { x: event.clientX, y: event.clientY };
+                dragStarted = false;
+                return;
+            }
+
+            if (hitShape.isWaypoint) {
+                const wp = hitShape.edge.waypoints[hitShape.waypointIndex];
+                selectedWaypoint = { edge: hitShape.edge, index: hitShape.waypointIndex };
+                dragStartState = { x: wp.x, y: wp.y };
+                downScreenPos = { x: event.clientX, y: event.clientY };
+                dragStarted = false;
+                offset.x = pos.x - wp.x;
+                offset.y = pos.y - wp.y;
+                return;
+            }
+
+            const nodeId = hitShape.nodeId;
+            const graphNode = engine._graphDiagram?._graph.nodes?.find(n => n.id === nodeId);
+            // A locked node stays where it is.
+            if (graphNode?.locked) return;
+            selectedNode = { id: nodeId, el: engine._graphDiagram?._graph.nodeEls.find(el => el.getAttribute('nodeId') === nodeId) };
+            // The rest of its group comes along, from where each one is now.
+            const posOf = (id) => engine._graphDiagram?._graph.pos.get(id);
+            const graph = engine._graphDiagram;
+            // A node of the selection drags the rest of it; another node drops the selection.
+            const selection = graph?.selectedNodeIds ?? new Set();
+            if (!selection.has(nodeId) && selection.size && !(event.ctrlKey || event.metaKey)) graph.selectNodes([]);
+            const together = selection.has(nodeId) ? [...selection] : [nodeId];
+            const nodeOf = (id) => graph?._graph.nodes?.find(n => n.id === id);
+            if (together.some(id => nodeOf(id)?.locked)) { selectedNode = null; return; }
+            const ids = new Set(together.flatMap(id => [id, ...(nodeOf(id)?.moveWith ?? [])]));
+            companions = [...ids].filter(id => id !== nodeId && posOf(id)).map(id => ({ id, from: { ...posOf(id) } }));
+            downScreenPos = { x: event.clientX, y: event.clientY };
+            dragStarted = false;
+            if (selectedNode) {
+                const p = engine._graphDiagram?._graph.pos.get(nodeId);
+                dragStartState = p ? { x: p.x, y: p.y } : null;
+                offset.x = pos.x - p.x;
+                offset.y = pos.y - p.y;
+            }
+        };
+
+        const onMouseMove = (event) => {
+            if (selectedEndpoint) {
+                if (!dragStarted) {
+                    const dx = event.clientX - downScreenPos.x, dy = event.clientY - downScreenPos.y;
+                    if (Math.hypot(dx, dy) < DRAG_THRESHOLD) return;
+                    dragStarted = true;
+                }
+                event.preventDefault();
+                const pos = getMousePosition(event);
+                const edge = selectedEndpoint.edge;
+                const nodeId = selectedEndpoint.type === 'source' ? edge.source : edge.target;
+                const nodePos = engine._graphDiagram?._graph.pos.get(nodeId);
+
+                if (nodePos) {
+                    // Determine which side (top/right/bottom/left) the drag point is closest to
+                    const dx = pos.x - nodePos.x;
+                    const dy = pos.y - nodePos.y;
+                    const absDx = Math.abs(dx);
+                    const absDy = Math.abs(dy);
+
+                    let newSide;
+                    if (absDx > absDy) {
+                        newSide = dx > 0 ? 'right' : 'left';
+                    } else {
+                        newSide = dy > 0 ? 'bottom' : 'top';
+                    }
+
+                    if (selectedEndpoint.type === 'source') {
+                        edge.sourceSide = newSide;
+                    } else {
+                        edge.targetSide = newSide;
+                    }
+                    engine._graphDiagram?._rerenderGraph();
+                    engine._graphDiagram?._updateGraphLayout();
+                }
+                return;
+            }
+
+            if (selectedWaypoint) {
+                if (!dragStarted) {
+                    const dx = event.clientX - downScreenPos.x, dy = event.clientY - downScreenPos.y;
+                    if (Math.hypot(dx, dy) < DRAG_THRESHOLD) return;
+                    dragStarted = true;
+                }
+                event.preventDefault();
+                const pos = getMousePosition(event);
+                const wp = selectedWaypoint.edge.waypoints[selectedWaypoint.index];
+                wp.x = pos.x - offset.x;
+                wp.y = pos.y - offset.y;
+                engine._graphDiagram?._rerenderGraph();
+                engine._graphDiagram?._updateGraphLayout();
+                return;
+            }
+
+            if (!selectedNode) return;
+            if (!dragStarted) {
+                const dx = event.clientX - downScreenPos.x, dy = event.clientY - downScreenPos.y;
+                if (Math.hypot(dx, dy) < DRAG_THRESHOLD) return;
+                dragStarted = true;
+                engine._graphDiagram?._graphFixedPos.add(selectedNode.id);
+                if (selectedNode.el && selectedNode.el.parentElement) {
+                    selectedNode.el.parentElement.appendChild(selectedNode.el);
+                }
+            }
+            event.preventDefault();
+            const pos = getMousePosition(event);
+            const p = engine._graphDiagram?._graph.pos.get(selectedNode.id);
+            const rawX = pos.x - offset.x, rawY = pos.y - offset.y;
+            const gridSize = engine._chartState?.options?.gridSize ?? 0;
+            const GraphDiagram = engine._graphDiagram?.constructor;
+            p.x = GraphDiagram?.snapToGrid ? GraphDiagram.snapToGrid(rawX, gridSize) : rawX;
+            p.y = GraphDiagram?.snapToGrid ? GraphDiagram.snapToGrid(rawY, gridSize) : rawY;
+            if (dragStartState) {
+                for (const c of companions) {
+                    const q = engine._graphDiagram?._graph.pos.get(c.id);
+                    if (q) { q.x = c.from.x + (p.x - dragStartState.x); q.y = c.from.y + (p.y - dragStartState.y); }
+                }
+            }
+
+            // Highlight folder under cursor
+            const folders = engine._chartState?.folders || [];
+            if (folders.length > 0) {
+                const foldersHit = folders.filter(f =>
+                    p.x > f.x && p.x < f.x + (f.width || 200) &&
+                    p.y > f.y && p.y < f.y + (f.height || 150)
+                );
+                engine._graphDiagram._dragOverFolderId = foldersHit.length > 0 ? foldersHit[0].id : null;
+            }
+
+            engine._graphDiagram?._rerenderGraph();
+            engine._graphDiagram?._updateGraphLayout();
+        };
+
+        const onMouseUp = () => {
+            if (selectedEndpoint && dragStarted) {
+                const edge = selectedEndpoint.edge;
+                const type = selectedEndpoint.type;
+                const currentSide = type === 'source' ? edge.sourceSide : edge.targetSide;
+                const oldSide = type === 'source' ? dragStartState.sourceSide : dragStartState.targetSide;
+
+                if (currentSide !== oldSide) {
+                    // The drag already moved the side; the command needs where it started.
+                    engine._graphDiagram?.history?.execute(new UpdateEdgeSideCommand(
+                        edge, type, currentSide, { diagram: engine._graphDiagram, oldSide }
+                    ));
+                }
+            }
+            selectedEndpoint = null;
+
+            if (selectedWaypoint && dragStarted) {
+                const wp = selectedWaypoint.edge.waypoints[selectedWaypoint.index];
+                const end = { x: wp.x, y: wp.y };
+                if (dragStartState && (end.x !== dragStartState.x || end.y !== dragStartState.y)) {
+                    engine._graphDiagram?.history?.execute(new MoveWaypointCommand(
+                        selectedWaypoint.edge, selectedWaypoint.index, dragStartState, end, { diagram: engine._graphDiagram }
+                    ));
+                }
+            }
+            selectedWaypoint = null;
+
+            if (selectedNode && dragStarted) {
+                engine._graphDiagram?._graphFixedPos?.delete(selectedNode.id);
+                const finalPos = engine._graphDiagram?._graph?.pos?.get(selectedNode.id);
+                if (dragStartState && finalPos && (finalPos.x !== dragStartState.x || finalPos.y !== dragStartState.y)) {
+                    const diagram = engine._graphDiagram;
+                    const move = new MoveNodeCommand(selectedNode.id, dragStartState, { x: finalPos.x, y: finalPos.y }, { diagram });
+                    // With its group: one undo step for them all.
+                    const moves = companions.map(c => {
+                        const to = diagram?._graph?.pos?.get(c.id);
+                        return new MoveNodeCommand(c.id, c.from, { x: to.x, y: to.y }, { diagram });
+                    });
+                    diagram?.history?.execute(moves.length ? new CompositeCommand(diagram.selectedNodeIds.has(selectedNode.id) ? 'Move selection' : 'Move group', [move, ...moves]) : move);
+                }
+
+                // Check if node was dropped onto a folder
+                const folders = engine._chartState?.folders || [];
+                if (finalPos && folders.length > 0) {
+                    const foldersHit = folders.filter(f =>
+                        finalPos.x > f.x && finalPos.x < f.x + (f.width || 200) &&
+                        finalPos.y > f.y && finalPos.y < f.y + (f.height || 150)
+                    );
+                    if (foldersHit.length > 0) {
+                        const targetFolder = foldersHit[0];
+                        const elementFolderMap = engine._chartState?.options?.elementFolderMap;
+                        if (elementFolderMap) {
+                            const oldFolder = elementFolderMap.get(selectedNode.id);
+                            if (oldFolder !== targetFolder.id) {
+                                elementFolderMap.set(selectedNode.id, targetFolder.id);
+                                engine._graphDiagram?._rerenderGraph();
+                            }
+                        }
+                    }
+                }
+
+            }
+            selectedNode = null;
+            companions = [];
+            dragStartState = null;
+            downScreenPos = null;
+            dragStarted = false;
+        };
+
+        const onDblClick = (event) => {
+            if (!engine._graphDiagram?._graph) return;
+            const hit = engine.hitTest(event.clientX, event.clientY);
+
+            if (hit?.isWaypoint) {
+                if (!engine._graphDiagram?._graph.editable) return;
+                event.preventDefault();
+                const { edge, waypointIndex } = hit;
+                // Keep edge selected so endpoints remain visible after waypoint deletion
+                engine._graphDiagram._selectedEdge = edge;
+                engine._graphDiagram?.history?.execute(new DeleteWaypointCommand(edge, waypointIndex, { diagram: engine._graphDiagram }));
+                return;
+            }
+
+            const { onNodeDoubleClick, onEdgeDoubleClick, onCanvasDoubleClick } = engine._chartState?.options || {};
+
+            if (hit?.draggable && hit.nodeId != null) {
+                const node = engine._graphDiagram?._graph.nodes.find(n => n.id === hit.nodeId);
+                if (node && onNodeDoubleClick) { event.preventDefault(); onNodeDoubleClick(node); }
+                return;
+            }
+
+            if (hit?.isEdge) {
+                if (onEdgeDoubleClick) { event.preventDefault(); onEdgeDoubleClick(hit.edge); }
+                return;
+            }
+
+            if (!hit && onCanvasDoubleClick) {
+                event.preventDefault();
+                onCanvasDoubleClick(engine._clientToSvgPoint(event.clientX, event.clientY));
+            }
+        };
+
+        engine.container.addEventListener('mousedown', onMouseDown);
+        engine.container.addEventListener('mousemove', onMouseMove);
+        engine.container.addEventListener('mouseup', onMouseUp);
+        engine.container.addEventListener('mouseleave', onMouseUp);
+        engine.container.addEventListener('dblclick', onDblClick);
+    }
+
+    _addContextMenuListeners() {
+        const engine = this._engine;
+        if (!engine.container) return;
+
+        const contextMenu = new ContextMenu(engine.container);
+        engine.container.addEventListener('click', () => contextMenu.remove());
+
+        engine._buildAndShowContextMenu = (event, menuItems, subject) => {
+            contextMenu.show(event, menuItems, subject, engine._clientToSvgPoint.bind(engine), engine);
+        };
+
+        const onContextMenu = (event) => {
+            contextMenu.remove();
+            if (!engine._graphDiagram?._graph) return;
+
+            const hitShape = engine.hitTest(event.clientX, event.clientY);
+
+            if (hitShape && hitShape.draggable && hitShape.nodeId != null) {
+                event.preventDefault();
+                engine._graphDiagram?._showNodeContextMenu(event, hitShape.nodeId);
+            } else if (engine._graphDiagram?._graph.editable && hitShape && hitShape.isEdge) {
+                event.preventDefault();
+                engine._graphDiagram?._showEdgeContextMenu(event, hitShape.edge);
+            } else if ((engine._graphDiagram?._graph.editable || engine._graphDiagram?._graph.canvasContextMenuItems) && !(hitShape && hitShape.legendItem)) {
+                event.preventDefault();
+                engine._graphDiagram?._showCanvasContextMenu(event);
+            }
+        };
+
+        engine.container.addEventListener('contextmenu', onContextMenu);
+    }
+
+    _addEdgeCreationListeners() {
+        const engine = this._engine;
+        if (!engine.renderer || !engine.renderer.svg) return;
+
+        const HANDLE_OFFSET = -3;
+        const HANDLE_R = 8;
+        const DRAG_THRESHOLD = 4;
+
+        let handleEl = null;
+        let hoveredNodeId = null;
+        let pendingSource = null;
+        let downScreenPos = null;
+        let rubberBandEl = null;
+        let lastHoverTarget = null;
+
+        const ensureHandle = () => {
+            if (handleEl) return;
+            handleEl = document.createElement('div');
+            handleEl.style.cssText = `
+                position: absolute;
+                width: ${HANDLE_R * 2}px;
+                height: ${HANDLE_R * 2}px;
+                border-radius: 50%;
+                background: #4f8ef7;
+                border: 2px solid #fff;
+                box-shadow: 0 0 2px rgba(0,0,0,0.4);
+                cursor: crosshair;
+                z-index: 998;
+                display: none;
+            `;
+            handleEl.addEventListener('mousedown', onHandleMouseDown);
+            engine.container.appendChild(handleEl);
+        };
+
+        const positionHandleForNode = (nodeId) => {
+            const node = engine._graphDiagram?._graph.nodes.find(n => n.id === nodeId);
+            const p = engine._graphDiagram?._graph.pos.get(nodeId);
+            const CTM = engine.renderer.svg.getScreenCTM();
+            if (!node || !p || !CTM) return;
+            const size = engine._nodeSize(node, engine._graphDiagram?._graph.nodeRadius, engine._graphDiagram?._graph.sizeDomain, engine._graphDiagram?._graph.sizeOptions);
+            const svgX = p.x + size.w / 2 + HANDLE_OFFSET;
+            const svgY = p.y + size.h / 2 + HANDLE_OFFSET;
+            const screenX = svgX * CTM.a + CTM.e;
+            const screenY = svgY * CTM.d + CTM.f;
+            const containerRect = engine.container.getBoundingClientRect();
+            handleEl.style.left = `${screenX - containerRect.left - HANDLE_R}px`;
+            handleEl.style.top = `${screenY - containerRect.top - HANDLE_R}px`;
+        };
+
+        const clearHoverTarget = () => {
+            if (lastHoverTarget) { engine.leaveState(lastHoverTarget, 'hover'); lastHoverTarget = null; }
+        };
+
+        const onHandleMouseDown = (event) => {
+            event.stopPropagation();
+            event.preventDefault();
+            if (!engine._graphDiagram?._graph?.editable || !hoveredNodeId) return;
+            downScreenPos = { x: event.clientX, y: event.clientY };
+            pendingSource = { nodeId: hoveredNodeId };
+            const sourcePos = engine._graphDiagram?._graph.pos.get(pendingSource.nodeId);
+            rubberBandEl = engine.renderer.path(`M${sourcePos.x},${sourcePos.y} L${sourcePos.x},${sourcePos.y}`, 'none', { color: '#4f8ef7', width: 1.5 });
+            rubberBandEl.setAttribute('stroke-dasharray', '4 3');
+            rubberBandEl.style.pointerEvents = 'none';
+        };
+
+        const onMouseMove = (event) => {
+            if (!engine._graphDiagram?._graph?.editable) {
+                if (handleEl) handleEl.style.display = 'none';
+                return;
+            }
+
+            if (pendingSource) {
+                const svgPt = engine._clientToSvgPoint(event.clientX, event.clientY);
+                const sourcePos = engine._graphDiagram?._graph.pos.get(pendingSource.nodeId);
+                if (rubberBandEl && sourcePos) rubberBandEl.setAttribute('d', `M${sourcePos.x},${sourcePos.y} L${svgPt.x},${svgPt.y}`);
+
+                const hit = engine.hitTest(event.clientX, event.clientY);
+                const validTarget = (hit?.draggable && hit.nodeId != null && hit.nodeId !== pendingSource.nodeId) ? hit : null;
+                if (lastHoverTarget && lastHoverTarget !== validTarget) clearHoverTarget();
+                if (validTarget && !lastHoverTarget) { engine.enterState(validTarget, 'hover'); lastHoverTarget = validTarget; }
+                return;
+            }
+
+            if (event.target === handleEl) return;
+
+            const hit = engine.hitTest(event.clientX, event.clientY);
+            if (hit?.draggable && hit.nodeId != null) {
+                hoveredNodeId = hit.nodeId;
+                ensureHandle();
+                positionHandleForNode(hoveredNodeId);
+                handleEl.style.display = 'block';
+            } else {
+                hoveredNodeId = null;
+                if (handleEl) handleEl.style.display = 'none';
+            }
+        };
+
+        const onMouseUp = (event) => {
+            if (!pendingSource) return;
+            const dx = event.clientX - downScreenPos.x, dy = event.clientY - downScreenPos.y;
+            if (Math.hypot(dx, dy) >= DRAG_THRESHOLD) {
+                const hit = engine.hitTest(event.clientX, event.clientY);
+                if (hit?.draggable && hit.nodeId != null && hit.nodeId !== pendingSource.nodeId) {
+                    const newEdge = { source: pendingSource.nodeId, target: hit.nodeId };
+                    const Validator = engine.constructor.ArchimateValidator;
+                    const Notation = engine.constructor.ArchimateNotation;
+                    const archimateVersion = engine._archimateOptions?.archimateVersion || '4';
+                    if (Validator && Notation && engine._archimateOptions) {
+                        const sourceNode = engine._chartState.nodes.find(n => n.id === newEdge.source);
+                        const targetNode = engine._chartState.nodes.find(n => n.id === newEdge.target);
+                        const allowed = Validator.allowedKinds(sourceNode, targetNode, archimateVersion);
+                        if (allowed.length) {
+                            newEdge.kind = allowed[0];
+                            const style = Notation.relationshipType(newEdge.kind);
+                            newEdge.lineStyle = style.lineStyle;
+                            newEdge.arrowhead = style.arrowhead || 'none';
+                            newEdge.arrowheadStart = style.arrowheadStart;
+                        }
+                    }
+                    engine._graphDiagram?.history?.execute(new AddEdgeCommand(
+                        newEdge,
+                        { diagram: engine._graphDiagram, onAdd: engine._chartState?.options?.onEdgeAdd }
+                    ));
+                }
+            }
+            clearHoverTarget();
+            rubberBandEl?.remove();
+            rubberBandEl = null;
+            pendingSource = null;
+            downScreenPos = null;
+            hoveredNodeId = null;
+            if (handleEl) handleEl.style.display = 'none';
+        };
+
+        engine.container.addEventListener('mousemove', onMouseMove);
+        engine.container.addEventListener('mouseup', onMouseUp);
+        engine.container.addEventListener('mouseleave', onMouseUp);
+    }
+
+    _addResizeListeners() {
+        const engine = this._engine;
+        if (!engine.renderer || !engine.renderer.svg) return;
+
+        const HANDLE_SIZE = 10;
+        const DRAG_THRESHOLD = 3;
+
+        let handleEl = null;
+        let hoveredNodeId = null;
+        let resizing = null;
+        let downScreenPos = null;
+        let resizeStartState = null;
+
+        const isResizable = (node) => node?.resizable ?? engine._graphDiagram?._graph?.resizableDefault ?? false;
+        const cornerFor = (node) => engine._nodeResizeCorner(node, engine._graphDiagram?._graph?.resizeCornerByShape, engine._graphDiagram?._graph?.resizeCorner || 'top-right');
+
+        const ensureHandle = () => {
+            if (handleEl) return;
+            handleEl = document.createElement('div');
+            handleEl.style.cssText = `
+                position: absolute;
+                width: ${HANDLE_SIZE}px;
+                height: ${HANDLE_SIZE}px;
+                background: #fff;
+                border: 2px solid #4f8ef7;
+                box-shadow: 0 0 2px rgba(0,0,0,0.4);
+                z-index: 998;
+                display: none;
+            `;
+            handleEl.addEventListener('mousedown', onHandleMouseDown);
+            engine.container.appendChild(handleEl);
+        };
+
+        const positionHandle = (nodeId) => {
+            const node = engine._graphDiagram?._graph.nodes.find(n => n.id === nodeId);
+            const p = engine._graphDiagram?._graph.pos.get(nodeId);
+            const CTM = engine.renderer.svg.getScreenCTM();
+            if (!node || !p || !CTM) return;
+            const size = engine._nodeSize(node, engine._graphDiagram?._graph.nodeRadius, engine._graphDiagram?._graph.sizeDomain, engine._graphDiagram?._graph.sizeOptions);
+            const corner = cornerFor(node);
+            const cp = engine._cornerPoint(p, size, corner);
+            const screenX = cp.x * CTM.a + CTM.e, screenY = cp.y * CTM.d + CTM.f;
+            const containerRect = engine.container.getBoundingClientRect();
+            handleEl.style.left = `${screenX - containerRect.left - HANDLE_SIZE / 2}px`;
+            handleEl.style.top = `${screenY - containerRect.top - HANDLE_SIZE / 2}px`;
+            handleEl.style.cursor = (corner === 'top-right' || corner === 'bottom-left') ? 'nesw-resize' : 'nwse-resize';
+        };
+
+        const onHandleMouseDown = (event) => {
+            event.stopPropagation();
+            event.preventDefault();
+            if (!hoveredNodeId) return;
+            const node = engine._graphDiagram?._graph.nodes.find(n => n.id === hoveredNodeId);
+            if (!node || !isResizable(node)) return;
+            downScreenPos = { x: event.clientX, y: event.clientY };
+            resizeStartState = nodeSize(node);
+            resizing = { nodeId: hoveredNodeId, corner: cornerFor(node) };
+        };
+
+        const onMouseMove = (event) => {
+            if (!engine._graphDiagram?._graph) { if (handleEl) handleEl.style.display = 'none'; return; }
+
+            if (resizing) {
+                event.preventDefault();
+                const node = engine._graphDiagram?._graph.nodes.find(n => n.id === resizing.nodeId);
+                const p = engine._graphDiagram?._graph.pos.get(resizing.nodeId);
+                if (!node || !p) return;
+                const mouseSvg = engine._clientToSvgPoint(event.clientX, event.clientY);
+                Object.assign(node, engine._resizedNodeValue(node, resizing.corner, p, mouseSvg));
+                engine._graphDiagram?._rerenderGraph();
+                if (handleEl) { positionHandle(resizing.nodeId); handleEl.style.display = 'block'; }
+                return;
+            }
+
+            if (event.target === handleEl) return;
+            const hit = engine.hitTest(event.clientX, event.clientY);
+            const node = hit?.draggable && hit.nodeId != null ? engine._graphDiagram?._graph.nodes.find(n => n.id === hit.nodeId) : null;
+            if (node && isResizable(node)) {
+                hoveredNodeId = node.id;
+                ensureHandle();
+                positionHandle(hoveredNodeId);
+                handleEl.style.display = 'block';
+            } else {
+                hoveredNodeId = null;
+                if (handleEl) handleEl.style.display = 'none';
+            }
+        };
+
+        const onMouseUp = (event) => {
+            if (resizing) {
+                const dx = event.clientX - downScreenPos.x, dy = event.clientY - downScreenPos.y;
+                const node = engine._graphDiagram?._graph.nodes.find(n => n.id === resizing.nodeId);
+                if (Math.hypot(dx, dy) >= DRAG_THRESHOLD) {
+                    const end = nodeSize(node);
+                    if (resizeStartState && NODE_SIZE_KEYS.some(key => end[key] !== resizeStartState[key])) {
+                        engine._graphDiagram?.history?.execute(new ResizeNodeCommand(
+                            resizing.nodeId, resizeStartState, end, { diagram: engine._graphDiagram }
+                        ));
+                    }
+                }
+            }
+            resizing = null;
+            resizeStartState = null;
+            downScreenPos = null;
+        };
+
+        engine.container.addEventListener('mousemove', onMouseMove);
+        engine.container.addEventListener('mouseup', onMouseUp);
+        engine.container.addEventListener('mouseleave', onMouseUp);
+    }
+
+    _addTooltipListeners() {
+        const engine = this._engine;
+        if (!engine.container) return;
+
+        const tooltip = new Tooltip(engine.container);
+
+        const onMouseMove = (event) => {
+            const hitShape = engine.hitTest(event.clientX, event.clientY);
+            if (hitShape && hitShape.tooltip) {
+                tooltip.show(hitShape.tooltip, event.clientX, event.clientY);
+            } else {
+                tooltip.hide();
+            }
+        };
+
+        const onMouseOut = () => tooltip.hide();
+
+        engine.container.addEventListener('mousemove', onMouseMove);
+        engine.container.addEventListener('mouseout', onMouseOut);
+    }
+
+    _addClickListeners() {
+        const engine = this._engine;
+        if (!engine.container) return;
+
+        const onClick = (event) => {
+            const hitShape = engine.hitTest(event.clientX, event.clientY);
+            engine._activeChart?.onClick?.(event, hitShape);
+            engine._activeDiagram?.onClick?.(event, hitShape);
+        };
+
+        engine.container.addEventListener('click', onClick);
+    }
+
+    _addZoomListeners() {
+        const engine = this._engine;
+        if (!engine.renderer || !engine.renderer.svg) return;
+        if (!engine.renderer.supportsSceneGraph) return;
+
+        engine._svgZoom = new SvgZoom(engine.container, engine.renderer.svg, {
+            clientToSvgPoint: (clientX, clientY) => engine._clientToSvgPoint(clientX, clientY),
+            hitTest: (clientX, clientY) => engine.hitTest(clientX, clientY),
+            is3D: () => engine._chart3D,
+        });
+        engine._initialViewBox = engine._svgZoom.initialViewBox;
+    }
+
+    _addOrbit3DListeners() {
+        const engine = this._engine;
+        if (!engine.container) return;
+        engine._orbitControls = new OrbitControls(
+            engine.container,
+            () => engine._camera3D,
+            () => engine._chart3DRedraw?.(),
+            () => engine.resetView(),
+            () => engine._chart3D,
+        );
+    }
+
+    /**
+     * A left drag on empty space draws a selection box; on release the nodes
+     * wholly inside it are selected (added with Ctrl or Cmd). A press without
+     * a drag clears the selection. (The right button pans: SvgZoom.)
+     */
+    _addMarqueeListeners() {
+        const engine = this._engine;
+        const container = engine.container;
+        const doc = container.ownerDocument;
+        const onDown = (event) => {
+            if (event.button !== 0 || event.altKey || !engine._graphDiagram?._graph?.editable) return;
+            const hit = engine.hitTest(event.clientX, event.clientY);
+            if (hit?.draggable || hit?.edge || event.target.closest?.('[nodeId], [edgeId], path[stroke-width]')?.getAttribute?.('edgeId')) return;
+            if (event.target.closest?.('[nodeId]')) return;
+            event.preventDefault();
+            const start = { x: event.clientX, y: event.clientY };
+            const extend = event.ctrlKey || event.metaKey;
+            let box = null;
+            const rect = (e) => ({ left: Math.min(start.x, e.clientX), top: Math.min(start.y, e.clientY), right: Math.max(start.x, e.clientX), bottom: Math.max(start.y, e.clientY) });
+            const onMove = (e) => {
+                if (!box && Math.hypot(e.clientX - start.x, e.clientY - start.y) < 4) return;
+                if (!box) {
+                    box = doc.createElement('div');
+                    box.className = 'marquee';
+                    Object.assign(box.style, { position: 'fixed', border: '1px dashed #0066cc', background: 'rgba(0, 102, 204, 0.08)', pointerEvents: 'none', zIndex: '1000' });
+                    doc.body.appendChild(box);
+                }
+                const r = rect(e);
+                Object.assign(box.style, { left: `${r.left}px`, top: `${r.top}px`, width: `${r.right - r.left}px`, height: `${r.bottom - r.top}px` });
+            };
+            const onUp = (e) => {
+                doc.removeEventListener('mousemove', onMove);
+                doc.removeEventListener('mouseup', onUp);
+                const graph = engine._graphDiagram;
+                if (!graph?._graph) return;
+                if (!box) { if (!extend) graph.selectNodes([]); return; }
+                box.remove();
+                const r = rect(e);
+                const inside = graph._graph.nodeEls.filter(el => {
+                    if (!el || el.getAttribute('visibility') === 'hidden') return false;
+                    const b = el.getBoundingClientRect();
+                    return b.width && b.left >= r.left && b.right <= r.right && b.top >= r.top && b.bottom <= r.bottom;
+                }).map(el => el.getAttribute('nodeId'));
+                graph.selectNodes(inside, { extend });
+            };
+            doc.addEventListener('mousemove', onMove);
+            doc.addEventListener('mouseup', onUp);
+        };
+        container.addEventListener('mousedown', onDown);
+    }
+
+    _addKeyboardListeners() {
+        const engine = this._engine;
+        if (!engine.container) return;
+
+        const onKeyDown = (event) => {
+            const graph = engine._graphDiagram;
+            if (!graph?.history || graph.hostOwnsHistory) return;
+            if (!graph._graph?.editable) return;
+
+            const isUndo = (event.ctrlKey || event.metaKey) && event.key.toLowerCase() === 'z' && !event.shiftKey;
+            const isRedo = (event.ctrlKey || event.metaKey) && (event.key.toLowerCase() === 'y' || (event.key.toLowerCase() === 'z' && event.shiftKey));
+
+            if (isUndo) {
+                event.preventDefault();
+                graph.history.undo();
+                return;
+            }
+            if (isRedo) {
+                event.preventDefault();
+                graph.history.redo();
+            }
+        };
+
+        engine.container.tabIndex = engine.container.tabIndex ?? 0;
+        engine.container.addEventListener('keydown', onKeyDown);
+    }
+}