refactor(handles): prefix with flow id for handling nested flows #3196

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

@@ -55,6 +55,7 @@ export function EdgeUpdateAnchors({
       onConnectEnd,
       cancelConnection,
       nodes,
+      rfId: flowId,
       panBy,
       updateConnection,
     } = store.getState();
@@ -85,6 +86,7 @@ export function EdgeUpdateAnchors({
       isTarget,
       edgeUpdaterType: handleType,
       lib,
+      flowId,
       cancelConnection,
       panBy,
       isValidConnection,

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

@@ -25,9 +25,9 @@ import { type ReactFlowState } from '../../types';
 export type HandleComponentProps = HandleProps & Omit<HTMLAttributes<HTMLDivElement>, 'id'>;
 
 const selector = (s: ReactFlowState) => ({
-  connectionStartHandle: s.connectionStartHandle,
   connectOnClick: s.connectOnClick,
   noPanClassName: s.noPanClassName,
+  rfId: s.rfId,
 });
 
 const connectingSelector =
@@ -70,7 +70,7 @@ const HandleComponent = forwardRef<HTMLDivElement, HandleComponentProps>(
     const isTarget = type === 'target';
     const store = useStoreApi();
     const nodeId = useNodeId();
-    const { connectOnClick, noPanClassName } = useStore(selector, shallow);
+    const { connectOnClick, noPanClassName, rfId } = useStore(selector, shallow);
     const { connecting, clickConnecting } = useStore(connectingSelector(nodeId, handleId, type), shallow);
 
     if (!nodeId) {
@@ -116,6 +116,7 @@ const HandleComponent = forwardRef<HTMLDivElement, HandleComponentProps>(
           isTarget,
           handleId,
           nodeId,
+          flowId: currentStore.rfId,
           panBy: currentStore.panBy,
           cancelConnection: currentStore.cancelConnection,
           onConnectStart: currentStore.onConnectStart,
@@ -142,6 +143,7 @@ const HandleComponent = forwardRef<HTMLDivElement, HandleComponentProps>(
         connectionMode,
         isValidConnection: isValidConnectionStore,
         lib,
+        rfId: flowId,
       } = store.getState();
 
       if (!nodeId || (!connectionClickStartHandle && !isConnectableStart)) {
@@ -167,6 +169,7 @@ const HandleComponent = forwardRef<HTMLDivElement, HandleComponentProps>(
         fromHandleId: connectionClickStartHandle.handleId || null,
         fromType: connectionClickStartHandle.type,
         isValidConnection: isValidConnectionHandler,
+        flowId,
         doc,
         lib,
       });
@@ -185,7 +188,7 @@ const HandleComponent = forwardRef<HTMLDivElement, HandleComponentProps>(
         data-handleid={handleId}
         data-nodeid={nodeId}
         data-handlepos={position}
-        data-id={`${nodeId}-${handleId}-${type}`}
+        data-id={`${rfId}-${nodeId}-${handleId}-${type}`}
         className={cc([
           'react-flow__handle',
           `react-flow__handle-${position}`,

packages/svelte/src/lib/components/Handle/Handle.svelte

@@ -55,7 +55,8 @@
     connectionLookup,
     onconnect: onConnectAction,
     onconnectstart: onConnectStartAction,
-    onconnectend: onConnectEndAction
+    onconnectend: onConnectEndAction,
+    flowId
   } = store;
 
   function onPointerDown(event: MouseEvent | TouchEvent) {
@@ -72,6 +73,7 @@
         connectionMode: $connectionMode,
         lib: $lib,
         autoPanOnConnect: $autoPanOnConnect,
+        flowId: $flowId,
         isValidConnection: $isValidConnection,
         updateConnection,
         cancelConnection,
@@ -128,7 +130,7 @@
   data-handleid={handleId}
   data-nodeid={nodeId}
   data-handlepos={position}
-  data-id="{nodeId}-{id || null}-{type}"
+  data-id="{flowId}-{nodeId}-{id || null}-{type}"
   class={cc([
     'svelte-flow__handle',
     `svelte-flow__handle-${position}`,

packages/system/src/xyhandle/XYHandle.ts

@@ -27,6 +27,7 @@ export type OnPointerDownParams = {
   isTarget: boolean;
   nodes: NodeBase[];
   lib: string;
+  flowId: string | null;
   edgeUpdaterType?: HandleType;
   updateConnection: UpdateConnection;
   panBy: PanBy;
@@ -48,6 +49,7 @@ export type IsValidParams = {
   isValidConnection?: IsValidConnection;
   doc: Document | ShadowRoot;
   lib: string;
+  flowId: string | null;
 };
 
 export type XYHandleInstance = {
@@ -79,6 +81,7 @@ function onPointerDown(
     nodes,
     lib,
     autoPanOnConnect,
+    flowId,
     panBy,
     cancelConnection,
     onConnectStart,
@@ -169,6 +172,7 @@ function onPointerDown(
       isValidConnection,
       doc,
       lib,
+      flowId,
     });
 
     handleDomNode = result.handleDomNode;
@@ -251,12 +255,13 @@ function isValidHandle(
     fromType,
     doc,
     lib,
+    flowId,
     isValidConnection = alwaysValid,
   }: IsValidParams
 ) {
   const isTarget = fromType === 'target';
   const handleDomNode = doc.querySelector(
-    `.${lib}-flow__handle[data-id="${handle?.nodeId}-${handle?.id}-${handle?.type}"]`
+    `.${lib}-flow__handle[data-id="${flowId}-${handle?.nodeId}-${handle?.id}-${handle?.type}"]`
   );
   const { x, y } = getEventPosition(event);
   const handleBelow = doc.elementFromPoint(x, y);