improvement(workflow): use DOM hit-testing for edge drop-on-block det…

…ection (#3851)
simstudioai · waleedlatif1 · Mar 31, 2026 · Mar 30, 2026 · Mar 30, 2026 · Mar 30, 2026
commit 4ae5b1b6209b3f3b9a6cb6fc2c0df4156f6c22bb
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/workflow.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/workflow.tsx
@@ -263,7 +263,7 @@ const WorkflowContent = React.memo(
     const params = useParams()
     const router = useRouter()
     const reactFlowInstance = useReactFlow()
-    const { screenToFlowPosition, getNodes, setNodes, getIntersectingNodes } = reactFlowInstance
+    const { screenToFlowPosition, getNodes, setNodes } = reactFlowInstance
     const { fitViewToBounds, getViewportCenter } = useCanvasViewport(reactFlowInstance, {
       embedded,
     })
@@ -2849,38 +2849,29 @@ const WorkflowContent = React.memo(
     )
 
     /**
-     * Finds the best node at a given flow position for drop-on-block connection.
-     * Skips subflow containers as they have their own connection logic.
+     * Finds the node under the cursor using DOM hit-testing for pixel-perfect
+     * detection that matches exactly what the user sees on screen.
+     * Uses the same approach as ReactFlow's internal handle detection.
      */
-    const findNodeAtPosition = useCallback(
-      (position: { x: number; y: number }) => {
-        const cursorRect = {
-          x: position.x - 1,
-          y: position.y - 1,
-          width: 2,
-          height: 2,
-        }
+    const findNodeAtScreenPosition = useCallback(
+      (clientX: number, clientY: number) => {
+        const elements = document.elementsFromPoint(clientX, clientY)
+        const nodes = getNodes()
 
-        const intersecting = getIntersectingNodes(cursorRect, true).filter(
-          (node) => node.type !== 'subflowNode'
-        )
+        for (const el of elements) {
+          const nodeEl = el.closest('.react-flow__node') as HTMLElement | null
+          if (!nodeEl) continue
 
-        if (intersecting.length === 0) return undefined
-        if (intersecting.length === 1) return intersecting[0]
+          const nodeId = nodeEl.getAttribute('data-id')
+          if (!nodeId) continue
 
-        return intersecting.reduce((closest, node) => {
-          const getDistance = (n: Node) => {
-            const absPos = getNodeAbsolutePosition(n.id)
-            const dims = getBlockDimensions(n.id)
-            const centerX = absPos.x + dims.width / 2
-            const centerY = absPos.y + dims.height / 2
-            return Math.hypot(position.x - centerX, position.y - centerY)
-          }
+          const node = nodes.find((n) => n.id === nodeId)
+          if (node && node.type !== 'subflowNode') return node
+        }
 
-          return getDistance(node) < getDistance(closest) ? node : closest
-        })
+        return undefined
       },
-      [getIntersectingNodes, getNodeAbsolutePosition, getBlockDimensions]
+      [getNodes]
     )
 
     /**
@@ -3005,15 +2996,9 @@ const WorkflowContent = React.memo(
           return
         }
 
-        // Get cursor position in flow coordinates
+        // Find node under cursor using DOM hit-testing
         const clientPos = 'changedTouches' in event ? event.changedTouches[0] : event
-        const flowPosition = screenToFlowPosition({
-          x: clientPos.clientX,
-          y: clientPos.clientY,
-        })
-
-        // Find node under cursor
-        const targetNode = findNodeAtPosition(flowPosition)
+        const targetNode = findNodeAtScreenPosition(clientPos.clientX, clientPos.clientY)
 
         // Create connection if valid target found (handle-to-body case)
         if (targetNode && targetNode.id !== source.nodeId) {
@@ -3027,7 +3012,7 @@ const WorkflowContent = React.memo(
 
         connectionSourceRef.current = null
       },
-      [screenToFlowPosition, findNodeAtPosition, onConnect]
+      [findNodeAtScreenPosition, onConnect]
     )
 
     /** Handles node drag to detect container intersections and update highlighting. */