fix(connectionLine): sourceHandle with connectionMode = loose

example/src/CustomNode/ColorSelectorNode.tsx

@@ -11,7 +11,7 @@ const onConnect = (params: Connection | Edge) => console.log('handle onConnect',
 const ColorSelectorNode: FC<NodeProps> = ({ data, isConnectable }) => {
   return (
     <>
-      <Handle type="target" position={Position.Left} style={targetHandleStyle} onConnect={onConnect} />
+      <Handle type="source" position={Position.Left} style={targetHandleStyle} onConnect={onConnect} />
       <div>
         Custom Color Picker Node: <strong>{data.color}</strong>
       </div>

example/src/CustomNode/index.tsx

@@ -7,11 +7,13 @@ import ReactFlow, {
   addEdge,
   MiniMap,
   Controls,
+  updateEdge,
   Node,
   FlowElement,
   OnLoadParams,
   Elements,
   Position,
+  ConnectionMode,
   SnapGrid,
   Connection,
   Edge,
@@ -79,6 +81,7 @@ const CustomNodeFlow = () => {
         data: { label: 'Output A' },
         position: { x: 550, y: 25 },
         targetPosition: Position.Left,
+
       },
       {
         id: '4',
@@ -86,6 +89,7 @@ const CustomNodeFlow = () => {
         data: { label: 'Output B' },
         position: { x: 550, y: 100 },
         targetPosition: Position.Left,
+
       },
 
       { id: 'e1-2', source: '1', target: '2', animated: true, style: { stroke: '#fff' } },
@@ -97,7 +101,8 @@ const CustomNodeFlow = () => {
   const onElementsRemove = (elementsToRemove: Elements) => setElements((els) => removeElements(elementsToRemove, els));
   const onConnect = (params: Connection | Edge) =>
     setElements((els) => addEdge({ ...params, animated: true, style: { stroke: '#fff' } }, els));
-
+  const onEdgeUpdate = (oldEdge: Edge, newConnection: Connection) =>
+    setElements((els) => updateEdge(oldEdge, newConnection, els));
   return (
     <ReactFlow
       elements={elements}
@@ -112,6 +117,9 @@ const CustomNodeFlow = () => {
       snapToGrid={true}
       snapGrid={snapGrid}
       defaultZoom={1.5}
+      onEdgeUpdate={onEdgeUpdate}
+      connectionMode={ConnectionMode.Loose}
+
     >
       <MiniMap
         nodeStrokeColor={(n: Node): string => {

src/components/ConnectionLine/index.tsx

@@ -53,9 +53,22 @@ export default ({
     return null;
   }
 
-  const sourceHandle = handleId
-    ? sourceNode.__rf.handleBounds[connectionHandleType].find((d: HandleElement) => d.id === handleId)
-    : sourceNode.__rf.handleBounds[connectionHandleType][0];
+  const getSourceHandle = (handleId: ElementId | null, sourceNode: Node) => {
+    const handleBound = sourceNode.__rf.handleBounds[connectionHandleType];
+    if (handleBound) {
+      if (handleId) {
+        return sourceNode.__rf.handleBounds[connectionHandleType].find((d: HandleElement) => d.id === handleId);
+      }
+      return sourceNode.__rf.handleBounds[connectionHandleType][0]
+    }
+    const handleType = connectionHandleType === 'source' ? 'target' : 'source';
+    if (handleId) {
+      return sourceNode.__rf.handleBounds[handleType].find((d: HandleElement) => d.id === handleId);
+    }
+    return sourceNode.__rf.handleBounds[handleType][0]
+  }
+
+  const sourceHandle = getSourceHandle(handleId, sourceNode);
   const sourceHandleX = sourceHandle ? sourceHandle.x + sourceHandle.width / 2 : sourceNode.__rf.width / 2;
   const sourceHandleY = sourceHandle ? sourceHandle.y + sourceHandle.height / 2 : sourceNode.__rf.height;
   const sourceX = sourceNode.__rf.position.x + sourceHandleX;
@@ -68,6 +81,7 @@ export default ({
   const targetPosition = isRightOrLeft ? Position.Left : Position.Top;
 
   if (CustomConnectionLineComponent) {
+
     return (
       <g className="react-flow__connection">
         <CustomConnectionLineComponent