Fix node dragging bug when scrolling during drag

When dragging a node and scrolling with the mouse wheel (normal or
shift+scroll), the node would stay at its original position instead
of following the cursor. This was caused by using delta-based
positioning from a fixed reference point that didn't account for
scroll offset changes.

Solution: Use absolute canvas coordinate conversion (screenToCanvasCoords)
on every mouse move, similar to how arrow connector dragging works. This
function always reads the current scroll position, so nodes correctly
track the cursor even when the viewport moves.

Changes:
- Added screenToCanvasCoords function to Flowchart component
- Pass screenToCanvasCoords to Node components as prop
- Updated Node drag logic to store offset from mouse to node center
- Use screenToCanvasCoords in handleMouseDown, handleGlobalMouseMove,
  and handleGlobalMouseUp to calculate positions using current scroll state

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <[email protected]>

Author: lucbrinkman

components/Flowchart.tsx

@@ -562,6 +562,34 @@ export default function Flowchart({
     }
   }, [isDragging]);
 
+  // Screen to canvas coordinate conversion - used by nodes and edges for dragging
+  const screenToCanvasCoords = useCallback(
+    (screenX: number, screenY: number) => {
+      if (!containerRef.current || !scrollContainerRef.current)
+        return { x: 0, y: 0 };
+      const scrollContainer = scrollContainerRef.current;
+      const scrollRect = scrollContainer.getBoundingClientRect();
+      const zoomFactor = zoom / 100;
+
+      // Convert screen coords to position within scrollable area, then to canvas coords
+      const canvasX =
+        (scrollContainer.scrollLeft +
+          screenX -
+          scrollRect.left -
+          CANVAS_PADDING) /
+        zoomFactor;
+      const canvasY =
+        (scrollContainer.scrollTop +
+          screenY -
+          scrollRect.top -
+          CANVAS_PADDING) /
+        zoomFactor;
+
+      return { x: canvasX, y: canvasY };
+    },
+    [zoom]
+  );
+
   return (
     <div
       ref={scrollContainerRefCallback}
@@ -839,31 +867,18 @@ export default function Flowchart({
                     : undefined
                 }
                 showAddArrows={shouldShowAddArrows}
+                screenToCanvasCoords={screenToCanvasCoords}
                 onAddArrow={
                   shouldShowAddArrows
                     ? (direction, mousePos) => {
                         const bounds = nodeBounds.get(node.id);
                         // Convert screen coordinates to canvas coordinates if mousePos provided
                         let canvasPos: { x: number; y: number } | undefined;
-                        if (mousePos && scrollContainerRef.current) {
-                          const scrollContainer = scrollContainerRef.current;
-                          const scrollRect =
-                            scrollContainer.getBoundingClientRect();
-                          const zoomFactor = zoom / 100;
-                          canvasPos = {
-                            x:
-                              (scrollContainer.scrollLeft +
-                                mousePos.clientX -
-                                scrollRect.left -
-                                CANVAS_PADDING) /
-                              zoomFactor,
-                            y:
-                              (scrollContainer.scrollTop +
-                                mousePos.clientY -
-                                scrollRect.top -
-                                CANVAS_PADDING) /
-                              zoomFactor,
-                          };
+                        if (mousePos) {
+                          canvasPos = screenToCanvasCoords(
+                            mousePos.clientX,
+                            mousePos.clientY
+                          );
                         }
                         onAddArrow(
                           node.id,

components/Node.tsx

@@ -60,6 +60,10 @@ interface NodeProps {
   onSliderChange?: (value: number) => void;
   onSliderChangeComplete?: () => void;
   showAddArrows?: boolean;
+  screenToCanvasCoords: (
+    screenX: number,
+    screenY: number
+  ) => { x: number; y: number };
   onAddArrow?: (
     direction: "top" | "bottom" | "left" | "right",
     mousePos?: { clientX: number; clientY: number }
@@ -98,6 +102,7 @@ const Node = forwardRef<HTMLDivElement, NodeProps>(
       onSliderChange,
       onSliderChangeComplete,
       showAddArrows,
+      screenToCanvasCoords,
       onAddArrow,
     },
     ref
@@ -108,8 +113,10 @@ const Node = forwardRef<HTMLDivElement, NodeProps>(
     const [isDragging, setIsDragging] = useState(false);
     const [shiftHeld, setShiftHeld] = useState(false); // Track if Shift is held during drag
     const dragStartRef = useRef<{
-      mouseX: number;
-      mouseY: number;
+      // Offset from mouse position to node center in canvas coordinates
+      nodeOffsetX: number;
+      nodeOffsetY: number;
+      // Original node position for calculating deltas
       nodeX: number;
       nodeY: number;
     } | null>(null);
@@ -339,9 +346,14 @@ const Node = forwardRef<HTMLDivElement, NodeProps>(
       onDragStateChange(true, false, e.clientX, e.clientY);
       didDragRef.current = false;
       lastUpdateTimeRef.current = Date.now(); // Reset timer for throttling
+
+      // Convert mouse position to canvas coordinates
+      const canvasPos = screenToCanvasCoords(e.clientX, e.clientY);
+
+      // Store offset from mouse to node center in canvas coordinates
       dragStartRef.current = {
-        mouseX: e.clientX,
-        mouseY: e.clientY,
+        nodeOffsetX: x - canvasPos.x,
+        nodeOffsetY: y - canvasPos.y,
         nodeX: x,
         nodeY: y,
       };
@@ -372,24 +384,22 @@ const Node = forwardRef<HTMLDivElement, NodeProps>(
         }
         onDragStateChange(true, e.shiftKey, e.clientX, e.clientY);
 
-        // Calculate raw delta in screen space
-        const rawDeltaX = e.clientX - dragStartRef.current.mouseX;
-        const rawDeltaY = e.clientY - dragStartRef.current.mouseY;
+        // Convert current mouse position to canvas coordinates
+        const canvasPos = screenToCanvasCoords(e.clientX, e.clientY);
+
+        // Calculate new node position by adding the stored offset
+        let newX = canvasPos.x + dragStartRef.current.nodeOffsetX;
+        let newY = canvasPos.y + dragStartRef.current.nodeOffsetY;
+
+        // Calculate raw delta to check if we've moved enough to count as dragging
+        const rawDeltaX = newX - dragStartRef.current.nodeX;
+        const rawDeltaY = newY - dragStartRef.current.nodeY;
 
         // Mark that we've dragged (moved more than a few pixels)
         if (Math.abs(rawDeltaX) > 3 || Math.abs(rawDeltaY) > 3) {
           didDragRef.current = true;
         }
 
-        // Convert to canvas coordinates
-        const zoomFactor = zoom / 100;
-        const canvasDeltaX = rawDeltaX / zoomFactor;
-        const canvasDeltaY = rawDeltaY / zoomFactor;
-
-        // Calculate new position in canvas coordinates
-        let newX = dragStartRef.current.nodeX + canvasDeltaX;
-        let newY = dragStartRef.current.nodeY + canvasDeltaY;
-
         // Apply snap to grid unless Shift is held
         // Simple, predictable: what you see during drag = final position
         if (!e.shiftKey) {
@@ -412,9 +422,7 @@ const Node = forwardRef<HTMLDivElement, NodeProps>(
           lastUpdateTimeRef.current = now;
 
           // Trigger bounds recalculation so arrows update (use snapped position)
-          const snappedCanvasDeltaX = newX - dragStartRef.current.nodeX;
-          const snappedCanvasDeltaY = newY - dragStartRef.current.nodeY;
-          onDragMove(node.index, snappedCanvasDeltaX, snappedCanvasDeltaY);
+          onDragMove(node.index, snappedDeltaX, snappedDeltaY);
         }
       };
 
@@ -424,15 +432,11 @@ const Node = forwardRef<HTMLDivElement, NodeProps>(
         if (!dragStartRef.current) return;
 
         // Calculate final position (same logic as mousemove for consistency)
-        const rawDeltaX = e.clientX - dragStartRef.current.mouseX;
-        const rawDeltaY = e.clientY - dragStartRef.current.mouseY;
+        const canvasPos = screenToCanvasCoords(e.clientX, e.clientY);
 
-        const zoomFactor = zoom / 100;
-        const canvasDeltaX = rawDeltaX / zoomFactor;
-        const canvasDeltaY = rawDeltaY / zoomFactor;
-
-        let newX = dragStartRef.current.nodeX + canvasDeltaX;
-        let newY = dragStartRef.current.nodeY + canvasDeltaY;
+        // Calculate new node position by adding the stored offset
+        let newX = canvasPos.x + dragStartRef.current.nodeOffsetX;
+        let newY = canvasPos.y + dragStartRef.current.nodeOffsetY;
 
         // Apply snap to grid unless Shift was held
         if (!e.shiftKey) {
@@ -463,7 +467,17 @@ const Node = forwardRef<HTMLDivElement, NodeProps>(
         window.removeEventListener("mousemove", handleGlobalMouseMove);
         window.removeEventListener("mouseup", handleGlobalMouseUp);
       };
-    }, [isDragging, zoom, onDragMove, onDragEnd, node.id, node.index]);
+    }, [
+      isDragging,
+      zoom,
+      onDragMove,
+      onDragEnd,
+      onDragStateChange,
+      node.id,
+      node.index,
+      screenToCanvasCoords,
+      shiftHeld,
+    ]);
 
     // Format text (replace | with line breaks)
     const formattedText = text.replace(/\|/g, "\n");