Merge branch 'xyflow' into feat/ssr

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';
@@ -164,6 +172,8 @@ export default function useReactFlow<NodeData = any, EdgeData = any>(): ReactFlo
         }
       }
     }
+
+    return { deletedNodes: matchingNodes, deletedEdges: matchingEdges };
   }, []);
 
   const getNodeRect = useCallback(
@@ -223,6 +233,41 @@ export default function useReactFlow<NodeData = any, EdgeData = any>(): ReactFlo
     []
   );
 
+  const getConnectedEdges = useCallback<Instance.getConnectedEdges>((node) => {
+    const { edges } = store.getState();
+
+    const nodeIds = new Set();
+    if (typeof node === 'string') {
+      nodeIds.add(node);
+    } else if (node.length >= 1) {
+      node.forEach((n) => {
+        nodeIds.add(n.id);
+      });
+    }
+
+    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,
@@ -238,6 +283,9 @@ export default function useReactFlow<NodeData = any, EdgeData = any>(): ReactFlo
       deleteElements,
       getIntersectingNodes,
       isNodeIntersecting,
+      getConnectedEdges,
+      getIncomers,
+      getOutgoers,
     };
   }, [
     viewportHelper,
@@ -253,5 +301,8 @@ export default function useReactFlow<NodeData = any, EdgeData = any>(): ReactFlo
     deleteElements,
     getIntersectingNodes,
     isNodeIntersecting,
+    getConnectedEdges,
+    getIncomers,
+    getOutgoers,
   ]);
 }

packages/react/src/hooks/useViewportHelper.ts

@@ -1,5 +1,11 @@
 import { useMemo } from 'react';
-import { pointToRendererPoint, getTransformForBounds, fitView, type XYPosition } from '@xyflow/system';
+import {
+  pointToRendererPoint,
+  getTransformForBounds,
+  fitView,
+  type XYPosition,
+  rendererPointToPoint,
+} from '@xyflow/system';
 
 import { useStoreApi, useStore } from '../hooks/useStore';
 import type { ViewportHelperFunctions, ReactFlowState } from '../types';
@@ -85,6 +91,36 @@ const useViewportHelper = (): ViewportHelperFunctions => {
         const { transform, snapToGrid, snapGrid } = store.getState();
         return pointToRendererPoint(position, transform, snapToGrid, snapGrid);
       },
+      screenToFlowCoordinate: (position: XYPosition) => {
+        const { transform, snapToGrid, snapGrid, domNode } = store.getState();
+        if (domNode) {
+          const { x: domX, y: domY } = domNode.getBoundingClientRect();
+
+          const correctedPosition = {
+            x: position.x - domX,
+            y: position.y - domY,
+          };
+
+          return pointToRendererPoint(correctedPosition, transform, snapToGrid, snapGrid || [1, 1]);
+        }
+
+        return { x: 0, y: 0 };
+      },
+      flowToScreenCoordinate: (position: XYPosition) => {
+        const { transform, domNode } = store.getState();
+        if (domNode) {
+          const { x: domX, y: domY } = domNode.getBoundingClientRect();
+
+          const rendererPosition = rendererPointToPoint(position, transform);
+
+          return {
+            x: rendererPosition.x + domX,
+            y: rendererPosition.y + domY,
+          };
+        }
+
+        return { x: 0, y: 0 };
+      },
       viewportInitialized: panZoomInitialized,
     };
   }, [panZoomInitialized]);

packages/react/src/types/general.ts

@@ -55,5 +55,7 @@ export type ViewportHelperFunctions = {
   setCenter: SetCenter;
   fitBounds: FitBounds;
   project: Project;
+  screenToFlowCoordinate: Project;
+  flowToScreenCoordinate: Project;
   viewportInitialized: boolean;
 };

packages/react/src/types/instance.ts

@@ -28,7 +28,10 @@ export namespace Instance {
   export type GetEdge<EdgeData> = (id: string) => Edge<EdgeData> | undefined;
   export type AddEdges<EdgeData> = (payload: Edge<EdgeData>[] | Edge<EdgeData>) => void;
   export type ToObject<NodeData = any, EdgeData = any> = () => ReactFlowJsonObject<NodeData, EdgeData>;
-  export type DeleteElements = ({ nodes, edges }: DeleteElementsOptions) => void;
+  export type DeleteElements = ({ nodes, edges }: DeleteElementsOptions) => {
+    deletedNodes: Node[];
+    deletedEdges: Edge[];
+  };
   export type GetIntersectingNodes<NodeData> = (
     node: (Partial<Node<NodeData>> & { id: Node['id'] }) | Rect,
     partially?: boolean,
@@ -39,6 +42,9 @@ export namespace Instance {
     area: Rect,
     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> = {