Merge pull request #4574 from bcakmakoglu/feat/get-handle-connections

feat(react,svelte): add `getHandleConnections` helper to `useReactFlow` & `useSvelteFlow`

.changeset/new-schools-watch.md

@@ -0,0 +1,6 @@
+---
+'@xyflow/react': minor
+'@xyflow/svelte': minor
+---
+
+Add `getHandleConnections` helper to `useReactFlow` & `useSvelteFlow`

packages/react/src/hooks/useReactFlow.ts

@@ -230,6 +230,13 @@ export function useReactFlow<NodeType extends Node = Node, EdgeType extends Edge
           options
         );
       },
+      getHandleConnections: ({ type, id, nodeId }) =>
+        Array.from(
+          store
+            .getState()
+            .connectionLookup.get(`${nodeId}-${type}-${id ?? null}`)
+            ?.values() ?? []
+        ),
     };
   }, []);
 

packages/react/src/types/instance.ts

@@ -1,5 +1,5 @@
 /* eslint-disable @typescript-eslint/no-namespace */
-import type { Rect, Viewport } from '@xyflow/system';
+import type { HandleConnection, HandleType, Rect, Viewport } from '@xyflow/system';
 import type { Node, Edge, ViewportHelperFunctions, InternalNode } from '.';
 
 export type ReactFlowJsonObject<NodeType extends Node = Node, EdgeType extends Edge = Edge> = {
@@ -173,6 +173,23 @@ export type GeneralHelpers<NodeType extends Node = Node, EdgeType extends Edge =
     dataUpdate: Partial<EdgeType['data']> | ((edge: EdgeType) => Partial<EdgeType['data']>),
     options?: { replace: boolean }
   ) => void;
+  /**
+   * Gets all connections for a given handle belonging to a specific node.
+   *
+   * @param type - handle type 'source' or 'target'
+   * @param id - the handle id (this is only needed if you have multiple handles of the same type, meaning you have to provide a unique id for each handle)
+   * @param nodeId - the node id the handle belongs to
+   * @returns an array with handle connections
+   */
+  getHandleConnections: ({
+    type,
+    id,
+    nodeId,
+  }: {
+    type: HandleType;
+    nodeId: string;
+    id?: string | null;
+  }) => HandleConnection[];
 };
 
 export type ReactFlowInstance<NodeType extends Node = Node, EdgeType extends Edge = Edge> = GeneralHelpers<

packages/svelte/src/lib/hooks/useSvelteFlow.ts

@@ -14,7 +14,9 @@ import {
   getViewportForBounds,
   getElementsToRemove,
   rendererPointToPoint,
-  evaluateAbsolutePosition
+  evaluateAbsolutePosition,
+  type HandleType,
+  type HandleConnection
 } from '@xyflow/system';
 
 import { useStore } from '$lib/store';
@@ -230,6 +232,23 @@ export function useSvelteFlow(): {
    * @returns the nodes, edges and the viewport as a JSON object
    */
   toObject: () => { nodes: Node[]; edges: Edge[]; viewport: Viewport };
+  /**
+   * Gets all connections for a given handle belonging to a specific node.
+   *
+   * @param type - handle type 'source' or 'target'
+   * @param id - the handle id (this is only needed if you have multiple handles of the same type, meaning you have to provide a unique id for each handle)
+   * @param nodeId - the node id the handle belongs to
+   * @returns an array with handle connections
+   */
+  getHandleConnections: ({
+    type,
+    id,
+    nodeId
+  }: {
+    type: HandleType;
+    nodeId: string;
+    id?: string | null;
+  }) => HandleConnection[];
 } {
   const {
     zoomIn,
@@ -248,6 +267,7 @@ export function useSvelteFlow(): {
     domNode,
     nodeLookup,
     edgeLookup,
+    connectionLookup,
     nodeOrigin
   } = useStore();
 
@@ -523,6 +543,12 @@ export function useSvelteFlow(): {
 
       nodes.update((nds) => nds);
     },
+    getHandleConnections: ({ type, id, nodeId }) =>
+      Array.from(
+        get(connectionLookup)
+          .get(`${nodeId}-${type}-${id ?? null}`)
+          ?.values() ?? []
+      ),
     viewport
   };
 }