feat(workflow): creates connection on edge dragged over node

Author: antlio

components/workflow/workflow-canvas.tsx

@@ -101,6 +101,7 @@ export function WorkflowCanvas() {
     useReactFlow();
 
   const connectingNodeId = useRef<string | null>(null);
+  const connectingHandleType = useRef<"source" | "target" | null>(null);
   const justCreatedNodeFromConnection = useRef(false);
   const viewportInitialized = useRef(false);
   const [isCanvasReady, setIsCanvasReady] = useState(false);
@@ -227,6 +228,18 @@ export function WorkflowCanvas() {
     []
   );
 
+  const nodeHasHandle = useCallback(
+    (nodeId: string, handleType: "source" | "target") => {
+      const node = nodes.find((node) => node.id === nodeId);
+
+      if (!node) return false;
+      if (handleType === "target") return node.type !== "trigger";
+
+      return node.type !== "add";
+    },
+    [nodes]
+  );
+
   const isValidConnection = useCallback(
     (connection: XYFlowConnection | XYFlowEdge) => {
       // Ensure we have both source and target
@@ -272,6 +285,7 @@ export function WorkflowCanvas() {
   const onConnectStart = useCallback(
     (_event: MouseEvent | TouchEvent, params: OnConnectStartParams) => {
       connectingNodeId.current = params.nodeId;
+      connectingHandleType.current = params.handleType;
     },
     []
   );
@@ -327,10 +341,36 @@ export function WorkflowCanvas() {
         return;
       }
 
-      const isNode = target.closest(".react-flow__node");
+      const nodeElement = target.closest(".react-flow__node");
       const isHandle = target.closest(".react-flow__handle");
 
-      if (!(isNode || isHandle)) {
+      // Create connection on edge dragged over node release
+      if (nodeElement && !isHandle && connectingHandleType.current) {
+        const targetNodeId = nodeElement.getAttribute("data-id");
+        const fromSource = connectingHandleType.current === "source";
+        const requiredHandle = fromSource ? "target" : "source";
+        const sourceId = fromSource ? connectingNodeId.current! : targetNodeId!;
+        const targetId = fromSource ? targetNodeId! : connectingNodeId.current!;
+
+        if (
+          targetNodeId &&
+          targetNodeId !== connectingNodeId.current &&
+          nodeHasHandle(targetNodeId, requiredHandle)
+        ) {
+          onConnect({
+            source: sourceId,
+            target: targetId,
+            sourceHandle: null,
+            targetHandle: null,
+          });
+        }
+
+        connectingNodeId.current = null;
+        connectingHandleType.current = null;
+        return;
+      }
+
+      if (!nodeElement && !isHandle) {
         const { adjustedX, adjustedY } = calculateMenuPosition(
           event,
           clientX,
@@ -404,12 +444,15 @@ export function WorkflowCanvas() {
       }
 
       connectingNodeId.current = null;
+      connectingHandleType.current = null;
     },
     [
       getClientPosition,
       calculateMenuPosition,
       screenToFlowPosition,
       addNode,
+      nodeHasHandle,
+      onConnect,
       edges,
       setEdges,
       setNodes,