feat(react): add onDelete handler

examples/react/src/examples/Edges/index.tsx

@@ -196,6 +196,7 @@ const EdgesFlow = () => {
       onEdgeMouseEnter={onEdgeMouseEnter}
       onEdgeMouseMove={onEdgeMouseMove}
       onEdgeMouseLeave={onEdgeMouseLeave}
+      onDelete={console.log}
     >
       <MiniMap />
       <Controls />

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);

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}

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 };

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;

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>> };

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