merge(connectionLine): wbkd/react-flow:main

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="source" position={Position.Left} style={targetHandleStyle} onConnect={onConnect} />
+      <Handle type="target" position={Position.Left} style={targetHandleStyle} onConnect={onConnect} />
       <div>
         Custom Color Picker Node: <strong>{data.color}</strong>
       </div>

example/src/CustomNode/index.tsx

@@ -7,13 +7,11 @@ import ReactFlow, {
   addEdge,
   MiniMap,
   Controls,
-  updateEdge,
   Node,
   FlowElement,
   OnLoadParams,
   Elements,
   Position,
-  ConnectionMode,
   SnapGrid,
   Connection,
   Edge,
@@ -81,7 +79,6 @@ const CustomNodeFlow = () => {
         data: { label: 'Output A' },
         position: { x: 550, y: 25 },
         targetPosition: Position.Left,
-
       },
       {
         id: '4',
@@ -89,7 +86,6 @@ 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' } },
@@ -101,8 +97,7 @@ 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}
@@ -117,9 +112,6 @@ const CustomNodeFlow = () => {
       snapToGrid={true}
       snapGrid={snapGrid}
       defaultZoom={1.5}
-      onEdgeUpdate={onEdgeUpdate}
-      connectionMode={ConnectionMode.Loose}
-
     >
       <MiniMap
         nodeStrokeColor={(n: Node): string => {
@@ -140,4 +132,4 @@ const CustomNodeFlow = () => {
   );
 };
 
-export default CustomNodeFlow;
+export default CustomNodeFlow;