From b659443507bf6072cd87c184264dba5437d9de4a Mon Sep 17 00:00:00 2001
From: moklick <info@moritzklack.com>
Date: Thu, 16 Nov 2023 13:32:22 +0100
Subject: [PATCH] feat(react): add onDelete handler

---
 examples/react/src/examples/Edges/index.tsx          | 1 +
 packages/react/src/components/StoreUpdater/index.tsx | 3 +++
 packages/react/src/container/ReactFlow/index.tsx     | 2 ++
 packages/react/src/hooks/useReactFlow.ts             | 3 +++
 packages/react/src/types/component-props.ts          | 2 ++
 packages/react/src/types/general.ts                  | 1 +
 packages/react/src/types/store.ts                    | 2 ++
 7 files changed, 14 insertions(+)

diff --git a/examples/react/src/examples/Edges/index.tsx b/examples/react/src/examples/Edges/index.tsx
index b5b84fc6..d6870621 100644
--- a/examples/react/src/examples/Edges/index.tsx
+++ b/examples/react/src/examples/Edges/index.tsx
@@ -196,6 +196,7 @@ const EdgesFlow = () => {
       onEdgeMouseEnter={onEdgeMouseEnter}
       onEdgeMouseMove={onEdgeMouseMove}
       onEdgeMouseLeave={onEdgeMouseLeave}
+      onDelete={console.log}
     >
       <MiniMap />
       <Controls />
diff --git a/packages/react/src/components/StoreUpdater/index.tsx b/packages/react/src/components/StoreUpdater/index.tsx
index 05a8aa50..65f1bb3c 100644
--- a/packages/react/src/components/StoreUpdater/index.tsx
+++ b/packages/react/src/components/StoreUpdater/index.tsx
@@ -43,6 +43,7 @@ type StoreUpdaterProps = Pick<
   | 'fitViewOptions'
   | 'onNodesDelete'
   | 'onEdgesDelete'
+  | 'onDelete'
   | 'onNodeDragStart'
   | 'onNodeDrag'
   | 'onNodeDragStop'
@@ -128,6 +129,7 @@ const StoreUpdater = ({
   fitViewOptions,
   onNodesDelete,
   onEdgesDelete,
+  onDelete,
   onNodeDrag,
   onNodeDragStart,
   onNodeDragStop,
@@ -192,6 +194,7 @@ const StoreUpdater = ({
   useDirectStoreUpdater('fitViewOnInitOptions', fitViewOptions, store.setState);
   useDirectStoreUpdater('onNodesDelete', onNodesDelete, store.setState);
   useDirectStoreUpdater('onEdgesDelete', onEdgesDelete, store.setState);
+  useDirectStoreUpdater('onDelete', onDelete, store.setState);
   useDirectStoreUpdater('onNodeDrag', onNodeDrag, store.setState);
   useDirectStoreUpdater('onNodeDragStart', onNodeDragStart, store.setState);
   useDirectStoreUpdater('onNodeDragStop', onNodeDragStop, store.setState);
diff --git a/packages/react/src/container/ReactFlow/index.tsx b/packages/react/src/container/ReactFlow/index.tsx
index f39650a4..d7995a53 100644
--- a/packages/react/src/container/ReactFlow/index.tsx
+++ b/packages/react/src/container/ReactFlow/index.tsx
@@ -82,6 +82,7 @@ const ReactFlow = forwardRef<ReactFlowRefType, ReactFlowProps>(
       onNodeDragStop,
       onNodesDelete,
       onEdgesDelete,
+      onDelete,
       onSelectionChange,
       onSelectionDragStart,
       onSelectionDrag,
@@ -281,6 +282,7 @@ const ReactFlow = forwardRef<ReactFlowRefType, ReactFlowProps>(
             fitViewOptions={fitViewOptions}
             onNodesDelete={onNodesDelete}
             onEdgesDelete={onEdgesDelete}
+            onDelete={onDelete}
             onNodeDragStart={onNodeDragStart}
             onNodeDrag={onNodeDrag}
             onNodeDragStop={onNodeDragStop}
diff --git a/packages/react/src/hooks/useReactFlow.ts b/packages/react/src/hooks/useReactFlow.ts
index e72c3a4f..257dd0f2 100644
--- a/packages/react/src/hooks/useReactFlow.ts
+++ b/packages/react/src/hooks/useReactFlow.ts
@@ -127,6 +127,7 @@ export default function useReactFlow<NodeData = any, EdgeData = any>(): ReactFlo
       onEdgesDelete,
       onNodesChange,
       onEdgesChange,
+      onDelete,
     } = store.getState();
     const { matchingNodes, matchingEdges } = getElementsToRemove<Node, Edge>({
       nodesToRemove: nodesDeleted || [],
@@ -171,6 +172,8 @@ export default function useReactFlow<NodeData = any, EdgeData = any>(): ReactFlo
           onNodesChange(nodeChanges);
         }
       }
+
+      onDelete?.({ nodes: matchingNodes, edges: matchingEdges });
     }
 
     return { deletedNodes: matchingNodes, deletedEdges: matchingEdges };
diff --git a/packages/react/src/types/component-props.ts b/packages/react/src/types/component-props.ts
index 2ce0fc70..583b3d86 100644
--- a/packages/react/src/types/component-props.ts
+++ b/packages/react/src/types/component-props.ts
@@ -34,6 +34,7 @@ import type {
   FitViewOptions,
   OnNodesDelete,
   OnEdgesDelete,
+  OnDelete,
   OnNodesChange,
   OnEdgesChange,
   NodeDragHandler,
@@ -70,6 +71,7 @@ export type ReactFlowProps = Omit<HTMLAttributes<HTMLDivElement>, 'onError'> & {
   onEdgesChange?: OnEdgesChange;
   onNodesDelete?: OnNodesDelete;
   onEdgesDelete?: OnEdgesDelete;
+  onDelete?: OnDelete;
   onSelectionDragStart?: SelectionDragHandler;
   onSelectionDrag?: SelectionDragHandler;
   onSelectionDragStop?: SelectionDragHandler;
diff --git a/packages/react/src/types/general.ts b/packages/react/src/types/general.ts
index 225e159c..b2e7098a 100644
--- a/packages/react/src/types/general.ts
+++ b/packages/react/src/types/general.ts
@@ -21,6 +21,7 @@ export type OnEdgesChange = (changes: EdgeChange[]) => void;
 
 export type OnNodesDelete = (nodes: Node[]) => void;
 export type OnEdgesDelete = (edges: Edge[]) => void;
+export type OnDelete = (params: { nodes: Node[]; edges: Edge[] }) => void;
 
 export type NodeTypes = { [key: string]: ComponentType<NodeProps> };
 export type NodeTypesWrapped = { [key: string]: MemoExoticComponent<ComponentType<WrapNodeProps>> };
diff --git a/packages/react/src/types/store.ts b/packages/react/src/types/store.ts
index 02a7d162..c473cbd5 100644
--- a/packages/react/src/types/store.ts
+++ b/packages/react/src/types/store.ts
@@ -38,6 +38,7 @@ import type {
   OnEdgesDelete,
   OnSelectionChangeFunc,
   UnselectNodesAndEdgesParams,
+  OnDelete,
 } from '.';
 
 export type ReactFlowStore = {
@@ -118,6 +119,7 @@ export type ReactFlowStore = {
 
   onNodesDelete?: OnNodesDelete;
   onEdgesDelete?: OnEdgesDelete;
+  onDelete?: OnDelete;
   onError?: OnError;
 
   // event handlers