From a22229eb14a01e909c2c5f7fa9d8653d738f0ad9 Mon Sep 17 00:00:00 2001
From: chang_su <chang_su@hunliji.com>
Date: Tue, 25 Oct 2022 16:17:16 +0800
Subject: [PATCH] chore: update deleteElements param

---
 .../vite-app/src/examples/UseReactFlow/index.tsx   | 14 ++++++--------
 packages/core/src/hooks/useGlobalKeyHandler.ts     |  6 +++---
 packages/core/src/hooks/useReactFlow.ts            |  4 +++-
 packages/core/src/types/instance.ts                |  6 +++++-
 4 files changed, 17 insertions(+), 13 deletions(-)

diff --git a/examples/vite-app/src/examples/UseReactFlow/index.tsx b/examples/vite-app/src/examples/UseReactFlow/index.tsx
index eb83a88e..6fca9627 100644
--- a/examples/vite-app/src/examples/UseReactFlow/index.tsx
+++ b/examples/vite-app/src/examples/UseReactFlow/index.tsx
@@ -113,18 +113,17 @@ const UseZoomPanHelperFlow = () => {
     console.log('edges', getEdges());
   }, [getNodes, getEdges]);
 
-  const deleteSelectedElements1 = useCallback(() => {
-    const selectedNodes = nodes.filter(node => node.selected).map(node => node.id);
-    const selectedEdges = edges.filter(edge => edge.selected).map(edge => edge.id);
-    deleteElements(selectedNodes, selectedEdges);
+  const deleteSelectedElements = useCallback(() => {
+    const selectedNodes = nodes.filter(node => node.selected);
+    const selectedEdges = edges.filter(edge => edge.selected);
+    deleteElements({ nodes: selectedNodes, edges: selectedEdges });
   }, [deleteElements, nodes, edges])
 
   const deleteSomeElements = useCallback(() => {
-    deleteElements(['2'],['e1-3'])
+    deleteElements({ nodes: [{ id: '2' }], edges: [{ id: 'e1-3' }] })
   }, [])
 
   useEffect(() => {
-    // called twice in strict mode of development mode
     addEdges({ id: 'e3-4', source: '3', target: '4' });
   }, [addEdges]);
 
@@ -150,8 +149,7 @@ const UseZoomPanHelperFlow = () => {
         <button onClick={onAddNode}>add node</button>
         <button onClick={onResetNodes}>reset nodes</button>
         <button onClick={logNodes}>useNodes</button>
-        <button onClick={deleteSelectedElements1}>deleteSelectedElements1</button>
-        <button onClick={deleteSelectedElements2}>deleteSelectedElements2</button>
+        <button onClick={deleteSelectedElements}>deleteSelectedElements</button>
         <button onClick={deleteSomeElements}>deleteSomeElements</button>
       </div>
       <Background />
diff --git a/packages/core/src/hooks/useGlobalKeyHandler.ts b/packages/core/src/hooks/useGlobalKeyHandler.ts
index 2827d9cb..f2b206e7 100644
--- a/packages/core/src/hooks/useGlobalKeyHandler.ts
+++ b/packages/core/src/hooks/useGlobalKeyHandler.ts
@@ -20,9 +20,9 @@ export default ({ deleteKeyCode, multiSelectionKeyCode }: HookParams): void => {
     if (deleteKeyPressed) {
       const { nodeInternals, edges } = store.getState();
       const nodes = Array.from(nodeInternals.values());
-      const nodeIds = nodes.filter((node) => node.selected).map((node) => node.id);
-      const edgeIds = edges.filter((edge) => edge.selected).map((edge) => edge.id);
-      deleteElements(nodeIds, edgeIds);
+      const selectedNodes = nodes.filter((node) => node.selected);
+      const selectedEdges = edges.filter((edge) => edge.selected);
+      deleteElements({nodes: selectedNodes, edges: selectedEdges});
       store.setState({ nodesSelectionActive: false });
     }
   }, [deleteKeyPressed]);
diff --git a/packages/core/src/hooks/useReactFlow.ts b/packages/core/src/hooks/useReactFlow.ts
index 32f4ee86..77415b9b 100644
--- a/packages/core/src/hooks/useReactFlow.ts
+++ b/packages/core/src/hooks/useReactFlow.ts
@@ -114,7 +114,7 @@ export default function useReactFlow<NodeData = any, EdgeData = any>(): ReactFlo
     };
   }, []);
 
-  const deleteElements = useCallback<Instance.DeleteElements>((nodeIds, edgeIds) => {
+  const deleteElements = useCallback<Instance.DeleteElements>(({ nodes: nodesDeleted, edges: edgesDeleted }) => {
     const {
       nodeInternals,
       edges,
@@ -126,6 +126,8 @@ export default function useReactFlow<NodeData = any, EdgeData = any>(): ReactFlo
       onEdgesChange,
     } = store.getState();
     const nodes = Array.from(nodeInternals.values());
+    const nodeIds = (nodesDeleted || []).map((node) => node.id);
+    const edgeIds = (edgesDeleted || []).map((edge) => edge.id);
     const nodesToRemove = nodes.reduce<Node[]>((res, node) => {
       const parentHit = !nodeIds.includes(node.id) && node.parentNode && res.find((n) => n.id === node.parentNode);
       const deletable = typeof node.deletable === 'boolean' ? node.deletable : true;
diff --git a/packages/core/src/types/instance.ts b/packages/core/src/types/instance.ts
index 8548c9f3..0c7200d2 100644
--- a/packages/core/src/types/instance.ts
+++ b/packages/core/src/types/instance.ts
@@ -8,6 +8,10 @@ export type ReactFlowJsonObject<NodeData = any, EdgeData = any> = {
   viewport: Viewport;
 };
 
+export type DeleteElementsOptions = {
+  nodes?: (Partial<Node> & { id: Node['id'] })[],
+  edges?: (Partial<Edge> & { id: Edge['id'] })[]
+};
 export namespace Instance {
   export type GetNodes<NodeData> = () => Node<NodeData>[];
   export type SetNodes<NodeData> = (
@@ -22,7 +26,7 @@ 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 = (nodeIds: string[], edgeIds: string[]) => void
+  export type DeleteElements = ({ nodes, edges }: DeleteElementsOptions) => void;
 }
 
 export type ReactFlowInstance<NodeData = any, EdgeData = any> = {