fix(react): multi handles

packages/react/CHANGELOG.md

@@ -21,7 +21,7 @@ Svelte Flow had a big impact on this release as well. While combing through each
 Before you can try out the new features, you need to do some minor updates:
 
 - **A new npm package name:** Our name changed from `reactflow` to `@xyflow/react` and the main component is no longer a default, but a named import:
-    - v11: `import ReactFlow from 'reactflow';`
+  - v11: `import { ReactFlow } from '@xyflow/react';`
   - v12: `import { ReactFlow } from '@xyflow/react';`
 - **Node attribute “computed”:** All computed node values are now stored in `node.computed`
   - v11: `node.width`, `node.height` ,`node.positionAbsolute`
@@ -29,17 +29,21 @@ Before you can try out the new features, you need to do some minor updates:
 - **Updating nodes:** We are not supporting node updates with object mutations anymore. If you want to update a certain attribute, you need to create a new node.
   - v11:
     ```js
-        setNodes(nds => nds.map((node) => {
+    setNodes((nds) =>
+      nds.map((node) => {
         node.hidden = true;
         return node;
-        }));
+      })
+    );
     ```
   - v12:
     ```js
-        setNodes(nds => nds.map((node) => ({
+    setNodes((nds) =>
+      nds.map((node) => ({
         ...node,
-          hidden: true
-        })));
+        hidden: true,
+      }))
+    );
     ```
 - **NodeProps:** `posX`/`posY` is now called `positionAbsoluteX`/`positionAbsoluteY`
 - **Typescript only:** We simplified types and fixed issues about functions where users could pass a `NodeData` generic. The new way is to define your own node type for the whole app and then only use that one. The big advantage of this is, that you can have multiple node types with different data structures and always be able to distinguish by checking the `node.type` attribute.
@@ -48,7 +52,7 @@ Before you can try out the new features, you need to do some minor updates:
   - affected functions: `useNodes`, `useNodesState`, `useEdgesState`, `applyNodeChange`, `onInit`, `applyEdgeChanges` , `MiniMapProps`
 - **Removal of deprecated functions:**
   - `getTransformForBounds` (new name: `getViewportForBounds`),
-    - `getRectOfNodes` ****(new name: `getNodesBounds`)
+  - `getRectOfNodes` \*\*\*\*(new name: `getNodesBounds`)
   - `project` (new name: `screenToFlowPosition`)
   - `getMarkerEndId`
 
@@ -93,5 +97,4 @@ These changes are not really user-facing, but it could be important for folks wh
 - We removed `connectionNodeId`, `connectionHandleId`, `connectionHandleType` from the store and added `connectionStartHandle.nodeId`, `connectionStartHandle.handleId`, …
 - add `data-id` to edges
 
-
-__With v12 the `reactflow` package was renamed to `@xyflow/react` - you can find the v11 source and the [`reactflow` changelog](https://github.com/xyflow/xyflow/blob/v11/packages/reactflow/CHANGELOG.md) on the v11 branch.__
+**With v12 the `reactflow` package was renamed to `@xyflow/react` - you can find the v11 source and the [`reactflow` changelog](https://github.com/xyflow/xyflow/blob/v11/packages/reactflow/CHANGELOG.md) on the v11 branch.**

packages/react/src/components/EdgeWrapper/index.tsx

@@ -22,8 +22,6 @@ function EdgeWrapper({
   elementsSelectable,
   onClick,
   onDoubleClick,
-  sourceHandleId,
-  targetHandleId,
   onContextMenu,
   onMouseEnter,
   onMouseMove,
@@ -78,8 +76,8 @@ function EdgeWrapper({
           id,
           sourceNode,
           targetNode,
-          sourceHandle: sourceHandleId || null,
-          targetHandle: targetHandleId || null,
+          sourceHandle: edge.sourceHandle || null,
+          targetHandle: edge.targetHandle || null,
           connectionMode: store.connectionMode,
           onError,
         });
@@ -97,7 +95,7 @@ function EdgeWrapper({
           ...(edgePosition || nullPosition),
         };
       },
-      [edge.source, edge.target, edge.selected, edge.zIndex]
+      [edge.source, edge.target, edge.sourceHandle, edge.targetHandle, edge.selected, edge.zIndex]
     ),
     shallow
   );
@@ -228,8 +226,8 @@ function EdgeWrapper({
             targetPosition={targetPosition}
             data={edge.data}
             style={edge.style}
-            sourceHandleId={sourceHandleId}
-            targetHandleId={targetHandleId}
+            sourceHandleId={edge.sourceHandle}
+            targetHandleId={edge.targetHandle}
             markerStart={markerStartUrl}
             markerEnd={markerEndUrl}
             pathOptions={'pathOptions' in edge ? edge.pathOptions : undefined}
@@ -252,8 +250,8 @@ function EdgeWrapper({
             targetPosition={targetPosition}
             setUpdateHover={setUpdateHover}
             setUpdating={setUpdating}
-            sourceHandleId={sourceHandleId}
-            targetHandleId={targetHandleId}
+            sourceHandleId={edge.sourceHandle}
+            targetHandleId={edge.targetHandle}
           />
         )}
       </g>

packages/react/src/types/edges.ts

@@ -69,8 +69,6 @@ export type EdgeWrapperProps = {
   noPanClassName: string;
   onClick?: EdgeMouseHandler;
   onDoubleClick?: EdgeMouseHandler;
-  sourceHandleId?: string | null;
-  targetHandleId?: string | null;
   onEdgeUpdate?: OnEdgeUpdateFunc;
   onContextMenu?: EdgeMouseHandler;
   onMouseEnter?: EdgeMouseHandler;