Files
Guilhem 7a5e487878 feat(frontend): add drag-and-drop node movement in flow editor (#8076)
* feat: add drag-and-drop node movement in flow editor

Replace the 2-step click-based move with drag-and-drop: grab a node's
Move icon, drag it near an insert point, see a visual drop indicator,
and drop to move. Click-based move is preserved as fallback.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

* fix: hide insert buttons on edges during drag-and-drop

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

* feat: unify drop zone and legacy move target styles

Use consistent dot indicator for both drag-and-drop and click-based
move targets. Use text-accent theming, hide insert buttons during drag.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

* feat: render real SvelteFlow graph in drag ghost for subflows

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

* fix: center drag ghost on the dragged node instead of the whole subflow

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

* feat: pass isSubflow prop through drag system and improve move UX

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

* feat: fade entire subflow during legacy move and drag-and-drop

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

* style: use text-secondary for move and drop target indicators

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

* feat: improve drag-and-drop visual feedback with proximity cues

Ghost opacity reacts to drop zone proximity (dims when far, brightens
when near). Add move icon badge near cursor that highlights on valid
drop target. Switch hit detection from circular radius to axis-aligned
bounding box matching the node gap dimensions.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

* refactor: unify DragGhost to always use MiniFlowGraph

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

* feat: scale drag ghost using flow viewport zoom instead of fixed width

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

* refactor: register drop zone positions from BaseEdge instead of recomputing from node data

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

* feat: hide node UI clutter during drag and polish drag ghost

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

* fix: fade all deeply nested nodes when dragging a subflow

Previously only immediate children of a dragged subflow would fade —
deeply nested nodes (e.g. steps inside a forloop inside a branchall)
stayed at full opacity. Store the full set of dragged node IDs on
DragManager and check set membership instead of single-parent comparison.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

* refactor: rename DragManager to MoveManager and eliminate moving prop drilling

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

* refactor: unify subflow node computation for both move modes

Extract getSubflowNodeIds() to moveManager.svelte.ts and populate
draggedNodeIds via a single $effect in DragCoordinator for both legacy
click-to-move and drag-and-drop. Consumers (MapItem, NodeWrapper) now
only check draggedNodeIds set membership instead of dual-checking.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

* refactor: clean up drag-and-drop code review issues

Fix toggle risk in DragCoordinator by using forceSetMoving instead of
the toggle-based setMoving. Remove dead code (DragInfo unused fields,
parentSubflowId, GHOST_ZOOM_FACTOR, debug log), extract duplicated
expressions to $derived variables, and add missing type annotations.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

* fix: clear click-to-move when drag starts to prevent dual mode activation

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

* refactor: centralize draggedNodeIds cleanup in $effect

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

* fix: adjust insertion index when moving node forward in same array

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

* refactor: address PR review feedback for node move feature

- Snapshot drag ghost once at drag start using untrack() to avoid
  recomputing on every nodes/edges change during drag
- Rename setMoving/forceSetMoving to toggleMoving/setMoving for clarity
- Add capture: true to DragCoordinator's Escape handler for consistency
- Rename MOVE_BTN_OFFSET to DRAG_HANDLE_OFFSET with descriptive comment
- Move misplaced import to top of moveManager.svelte.ts
- Replace (n.data as any).offset with typed nodeOffset() helper

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

* fix: register asset/AI node types in MiniFlowGraph for drag ghost

MiniFlowGraph was missing asset, assetsOverflowed, aiTool, and
newAiTool node types, so these nodes rendered as invisible elements
that inflated the drag ghost bounding box. Register them so the
ghost renders all node types correctly.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

* fix: resolve relative positions to absolute for xyflow child nodes in drag ghost

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

* fix: use initialViewport instead of fitView so drag ghost matches flow zoom

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

* style: format BaseEdge.svelte

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

* fix: fade asset and AI tool nodes when their parent is being moved

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

* fix: include child nodes of edge-matched nodes in subflow ID collection

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

* fix: hide +Tool button when moving nodes

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

* fix: address PR review feedback (listener cleanup, set iteration, dead code)

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

* style: position cancel move button on top of node instead of above it

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

* refactor: compute draggedNodeIds eagerly via callback instead of reactive effect

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

* refactor: remove redundant parentModuleId from NodeWrapper

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

* refactor: address PR review comments for drag ghost and move manager

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

---------

Co-authored-by: Claude Opus 4.6 <noreply@anthropic.com>
2026-03-02 10:06:23 +00:00
..
2025-11-29 01:23:47 +00:00