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

[waleedlatif1]

Summary

• Replace getIntersectingNodes with document.elementsFromPoint() for detecting which block an edge is dropped on
• Fixes edge drops not registering on bottom-left/bottom-right corners of blocks
• Uses the same DOM hit-testing approach as ReactFlow's internal handle detection

Type of Change

• Bug fix

Testing

Tested manually

Checklist

• Code follows project style guidelines
• Self-reviewed my changes
• Tests added/updated and passing
• No new warnings introduced
• I confirm that I have read and agree to the terms outlined in the Contributor License Agreement (CLA)

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

1 Skipped Deployment

Project	Deployment	Actions	Updated (UTC)
docs	Skipped		Mar 30, 2026 11:11pm

[cursor]

PR Summary

Low Risk
Low risk UI behavior change limited to connection drag-end hit detection, but it could subtly change which node is targeted in overlapping/stacked node scenarios.

Overview
Improves edge drop-on-block behavior by switching connection drag-end target detection from ReactFlow intersection queries to DOM-based hit testing via document.elementsFromPoint, matching ReactFlow’s own handle detection.

This removes reliance on flow-coordinate rectangle intersection logic (and its corner/precision issues) and updates onConnectEnd to select the node under the cursor directly, while still skipping subflowNode containers.

^{Written by Cursor Bugbot for commit 7036307. Configure here.}

[greptile-apps]

Greptile Summary

This PR fixes a bug where dropping an edge onto the bottom-left or bottom-right corners of a workflow block would fail to register a connection. The fix replaces the geometry-based getIntersectingNodes approach with DOM hit-testing via document.elementsFromPoint(), mirroring the same technique ReactFlow uses internally for handle detection.

Key changes:

• findNodeAtPosition (flow-coordinates, bounding-box intersection) is replaced by findNodeAtScreenPosition (screen-coordinates, DOM pixel-hit-testing)
• getIntersectingNodes and screenToFlowPosition are no longer needed and are removed from destructuring and dependency arrays
• The "find closest node by centroid distance" tiebreaker logic is removed; elementsFromPoint naturally returns elements in paint-order (topmost first), making that logic unnecessary
• subflowNode filtering is preserved — the loop continues past any subflow container element and returns the first non-subflow node found

Confidence Score: 5/5

• Safe to merge — the change is a focused bug fix with no new dependencies, correct touch-event handling, and the same subflowNode guard as before.
• No P0 or P1 issues found. The new implementation is simpler and more correct than the old one: elementsFromPoint performs pixel-perfect hit testing that respects CSS transforms and z-ordering natively, which is exactly what was needed to fix corner-detection. Dependency arrays are clean, the touch-event code path is preserved, and subflowNode filtering is maintained. The only removed logic (centroid-distance tiebreaker) is safely superseded by the paint-order guarantee of elementsFromPoint.
• No files require special attention.

Important Files Changed

Filename	Overview
apps/sim/app/workspace/[workspaceId]/w/[workflowId]/workflow.tsx	Replaces getIntersectingNodes (geometry-based) with document.elementsFromPoint() (DOM hit-testing) for edge-drop target detection; removes dependency on screenToFlowPosition and simplifies the node-finding logic significantly.

Sequence Diagram

sequenceDiagram
    participant User
    participant ReactFlow
    participant onConnectEnd
    participant findNodeAtScreenPosition
    participant DOM

    User->>ReactFlow: Drag and drop edge
    ReactFlow->>onConnectEnd: fires onConnectEnd(event)
    onConnectEnd->>onConnectEnd: Check connectionCompletedRef<br/>(skip if handle-to-handle already handled)
    onConnectEnd->>onConnectEnd: Extract clientX/clientY from event<br/>(handles MouseEvent & TouchEvent)
    onConnectEnd->>findNodeAtScreenPosition: findNodeAtScreenPosition(clientX, clientY)
    findNodeAtScreenPosition->>DOM: document.elementsFromPoint(clientX, clientY)
    DOM-->>findNodeAtScreenPosition: elements[] (topmost → bottommost)
    loop for each element
        findNodeAtScreenPosition->>DOM: el.closest('.react-flow__node')
        DOM-->>findNodeAtScreenPosition: nodeEl (HTMLElement | null)
        findNodeAtScreenPosition->>findNodeAtScreenPosition: nodeEl.getAttribute('data-id')
        findNodeAtScreenPosition->>findNodeAtScreenPosition: nodes.find(n => n.id === nodeId)
        alt node found and not subflowNode
            findNodeAtScreenPosition-->>onConnectEnd: return node
        else skip
            findNodeAtScreenPosition->>findNodeAtScreenPosition: continue
        end
    end
    findNodeAtScreenPosition-->>onConnectEnd: undefined (no valid node found)
    onConnectEnd->>onConnectEnd: targetNode.id !== source.nodeId?
    onConnectEnd->>ReactFlow: onConnect({ source, sourceHandle, target, targetHandle })

Loading

_{Reviews (1): Last reviewed commit: "improvement(workflow): use DOM hit-testi..." | Re-trigger Greptile}