feat(react, svelte) added getIncomers & getOutgoers to use...Flow()

packages/react/src/hooks/useReactFlow.ts

@@ -1,5 +1,13 @@
 import { useCallback, useMemo } from 'react';
-import { getElementsToRemove, getOverlappingArea, isRectObject, nodeToRect, type Rect } from '@xyflow/system';
+import {
+  getElementsToRemove,
+  getIncomersBase,
+  getOutgoersBase,
+  getOverlappingArea,
+  isRectObject,
+  nodeToRect,
+  type Rect,
+} from '@xyflow/system';
 
 import useViewportHelper from './useViewportHelper';
 import { useStoreApi } from '../hooks/useStore';
@@ -224,7 +232,7 @@ export default function useReactFlow<NodeData = any, EdgeData = any>(): ReactFlo
   );
 
   const getConnectedEdges = useCallback<Instance.getConnectedEdges>((node) => {
-    const edges = store.getState().edges;
+    const { edges } = store.getState();
 
     const nodeIds = new Set();
     if (typeof node === 'string') {
@@ -238,6 +246,26 @@ export default function useReactFlow<NodeData = any, EdgeData = any>(): ReactFlo
     return edges.filter((edge) => nodeIds.has(edge.source) || nodeIds.has(edge.target));
   }, []);
 
+  const getIncomers = useCallback<Instance.getIncomers>((node) => {
+    const { nodes, edges } = store.getState();
+
+    if (typeof node === 'string') {
+      return getIncomersBase({ id: node }, nodes, edges);
+    }
+
+    return getIncomersBase(node, nodes, edges);
+  }, []);
+
+  const getOutgoers = useCallback<Instance.getOutgoers>((node) => {
+    const { nodes, edges } = store.getState();
+
+    if (typeof node == 'string') {
+      return getOutgoersBase({ id: node }, nodes, edges);
+    }
+
+    return getOutgoersBase(node, nodes, edges);
+  }, []);
+
   return useMemo(() => {
     return {
       ...viewportHelper,
@@ -254,6 +282,8 @@ export default function useReactFlow<NodeData = any, EdgeData = any>(): ReactFlo
       getIntersectingNodes,
       isNodeIntersecting,
       getConnectedEdges,
+      getIncomers,
+      getOutgoers,
     };
   }, [
     viewportHelper,
@@ -270,5 +300,7 @@ export default function useReactFlow<NodeData = any, EdgeData = any>(): ReactFlo
     getIntersectingNodes,
     isNodeIntersecting,
     getConnectedEdges,
+    getIncomers,
+    getOutgoers,
   ]);
 }

packages/react/src/types/instance.ts

@@ -40,6 +40,8 @@ export namespace Instance {
     partially?: boolean
   ) => boolean;
   export type getConnectedEdges = (id: string | (Partial<Node> & { id: Node['id'] })[]) => Edge[];
+  export type getIncomers = (node: string | (Partial<Node> & { id: Node['id'] })) => Node[];
+  export type getOutgoers = (node: string | (Partial<Node> & { id: Node['id'] })) => Node[];
 }
 
 export type ReactFlowInstance<NodeData = any, EdgeData = any> = {

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

@@ -1,5 +1,7 @@
 import { get, type Writable } from 'svelte/store';
 import {
+  getIncomersBase,
+  getOutgoersBase,
   pointToRendererPoint,
   type Project,
   type SetCenterOptions,
@@ -27,6 +29,8 @@ export function useSvelteFlow(): {
   nodes: SvelteFlowStore['nodes'];
   edges: SvelteFlowStore['edges'];
   getConnectedEdges: (id: string | (Partial<Node> & { id: Node['id'] })[]) => Edge[];
+  getIncomers: (node: string | (Partial<Node> & { id: Node['id'] })) => Node[];
+  getOutgoers: (node: string | (Partial<Node> & { id: Node['id'] })) => Node[];
 } {
   const {
     zoomIn,
@@ -101,6 +105,26 @@ export function useSvelteFlow(): {
 
       return _edges.filter((edge) => nodeIds.has(edge.source) || nodeIds.has(edge.target));
     },
+    getIncomers: (node) => {
+      const _edges = get(edges);
+      const _nodes = get(nodes);
+
+      if (typeof node === 'string') {
+        return getIncomersBase({ id: node }, _nodes, _edges);
+      }
+
+      return getIncomersBase(node, _nodes, _edges);
+    },
+    getOutgoers: (node) => {
+      const _edges = get(edges);
+      const _nodes = get(nodes);
+
+      if (typeof node == 'string') {
+        return getOutgoersBase({ id: node }, _nodes, _edges);
+      }
+
+      return getOutgoersBase(node, _nodes, _edges);
+    },
     viewport: viewport
   };
 }

packages/system/src/utils/graph.ts

@@ -35,11 +35,11 @@ export const isNodeBase = <NodeType extends NodeBase = NodeBase, EdgeType extend
 ): element is NodeType => 'id' in element && !('source' in element) && !('target' in element);
 
 export const getOutgoersBase = <NodeType extends NodeBase = NodeBase, EdgeType extends EdgeBase = EdgeBase>(
-  node: NodeType,
+  node: Partial<NodeType> & { id: string },
   nodes: NodeType[],
   edges: EdgeType[]
 ): NodeType[] => {
-  if (!isNodeBase(node)) {
+  if (!node.id) {
     return [];
   }
 
@@ -54,11 +54,11 @@ export const getOutgoersBase = <NodeType extends NodeBase = NodeBase, EdgeType e
 };
 
 export const getIncomersBase = <NodeType extends NodeBase = NodeBase, EdgeType extends EdgeBase = EdgeBase>(
-  node: NodeType,
+  node: Partial<NodeType> & { id: string },
   nodes: NodeType[],
   edges: EdgeType[]
 ): NodeType[] => {
-  if (!isNodeBase(node)) {
+  if (!node.id) {
     return [];
   }
   const incomersIds = new Set();