improvement(edges): drag edge over block

[aadamgough]

Summary

Connect edge when you drag over block.

Type of Change

• Bug fix
• New feature
• Breaking change
• Documentation
• Other: ___________

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	Review	Updated (UTC)
docs	Skipped		Dec 27, 2025 1:02am

[greptile-apps]

Greptile Summary

This PR implements the ability to connect workflow edges by dragging from one block and dropping onto another, improving the user experience when creating connections between blocks.

Key Changes:

• Added connectionSourceRef to store source node and handle information when a connection drag begins
• Modified onConnectStart to capture and store the source node ID and handle ID for later use
• Implemented findNodeAtPosition helper to detect which node (if any) exists at a given flow coordinate, excluding subflow containers
• Rewrote onConnectEnd to detect drop-on-block interactions and automatically create connections to the target block's 'target' handle
• Properly handles edge cases: validates source exists, checks target is different from source, and cleans up ref after connection attempt

Technical Implementation:
The feature leverages ReactFlow's connection lifecycle (onConnectStart → onConnectEnd) and transforms cursor coordinates to flow coordinates using screenToFlowPosition. It reuses the existing onConnect function to ensure all validation rules (container boundaries, trigger blocks, annotation blocks) are respected.

Confidence Score: 5/5

• This PR is safe to merge with minimal risk
• The implementation is clean, well-structured, and follows established patterns in the codebase. The change adds a new drop-on-block connection feature with proper validation, uses existing helper functions, and includes comprehensive documentation. All edge cases are handled (null checks, same-node prevention, subflow exclusion). The code follows TypeScript best practices with proper typing and uses useCallback for memoization.
• No files require special attention

Important Files Changed

Filename	Overview
apps/sim/app/workspace/[workspaceId]/w/[workflowId]/workflow.tsx	Added drop-on-block edge connection feature with proper source tracking and position detection

Sequence Diagram

sequenceDiagram
    participant User
    participant ReactFlow
    participant onConnectStart
    participant connectionSourceRef
    participant onConnectEnd
    participant findNodeAtPosition
    participant onConnect

    User->>ReactFlow: Start dragging edge from handle
    ReactFlow->>onConnectStart: Trigger with event & params
    onConnectStart->>connectionSourceRef: Store nodeId & handleId
    onConnectStart->>onConnectStart: Set error connection flag if handleId === 'error'
    
    User->>ReactFlow: Drag edge over canvas
    Note over User,ReactFlow: User drags connection line
    
    User->>ReactFlow: Release edge over a block
    ReactFlow->>onConnectEnd: Trigger with MouseEvent/TouchEvent
    onConnectEnd->>onConnectEnd: Reset error connection flag
    onConnectEnd->>connectionSourceRef: Retrieve stored source info
    
    alt Source exists
        onConnectEnd->>onConnectEnd: Get cursor position (clientX, clientY)
        onConnectEnd->>ReactFlow: screenToFlowPosition(cursor)
        ReactFlow-->>onConnectEnd: Return flow coordinates
        onConnectEnd->>findNodeAtPosition: Find node at flow position
        findNodeAtPosition->>findNodeAtPosition: Loop through nodes, check bounds
        findNodeAtPosition->>findNodeAtPosition: Skip subflowNode types
        findNodeAtPosition-->>onConnectEnd: Return target node or undefined
        
        alt Valid target found & different from source
            onConnectEnd->>onConnect: Create connection with target handle='target'
            onConnect->>onConnect: Validate connection rules
            onConnect->>onConnect: Add edge to workflow
        else No valid target
            Note over onConnectEnd: Connection cancelled
        end
    end
    
    onConnectEnd->>connectionSourceRef: Clear stored source (set to null)

Loading