Add node dragging, animated flow dots, and canvas cleanup to graph editor

- Drag nodes to reposition with dead-zone, edge re-routing, and minimap sync
- Animated flow dots trace upstream chains to running nodes
- Manual positions persist across re-renders, cleared on relayout
- Fix canvas event listener leak on re-render by calling destroy()

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
2026-03-13 15:21:14 +03:00
parent bd7a315c2c
commit 6d85385dbb
3 changed files with 284 additions and 4 deletions
@@ -245,6 +245,15 @@
cursor: pointer;
}
.graph-node.dragging {
cursor: grabbing;
opacity: 0.85;
}
.graph-node.dragging .graph-node-overlay {
display: none !important;
}
.graph-node-body {
fill: var(--card-bg);
stroke: var(--border-color);
@@ -393,11 +402,13 @@
.graph-edge-flow {
fill: none;
stroke-width: 0;
pointer-events: none;
}
.graph-edge-flow circle {
r: 3;
opacity: 0.8;
opacity: 0.85;
filter: drop-shadow(0 0 2px currentColor);
}
/* ── Drag connection preview ── */