feat(deletion): add onBeforeDelete handler

examples/react/src/examples/Overview/index.tsx

@@ -15,6 +15,8 @@ import {
   Background,
   MiniMap,
   ConnectionMode,
+  OnBeforeDelete,
+  OnDelete,
 } from '@xyflow/react';
 
 const onNodeDragStart = (_: ReactMouseEvent, node: Node, nodes: Node[]) => console.log('drag start', node, nodes);
@@ -45,8 +47,11 @@ const onEdgeMouseEnter = (_: ReactMouseEvent, edge: Edge) => console.log('edge m
 const onEdgeMouseMove = (_: ReactMouseEvent, edge: Edge) => console.log('edge mouse move', edge);
 const onEdgeMouseLeave = (_: ReactMouseEvent, edge: Edge) => console.log('edge mouse leave', edge);
 const onEdgeDoubleClick = (_: ReactMouseEvent, edge: Edge) => console.log('edge double click', edge);
-const onNodesDelete = (nodes: Node[]) => console.log('nodes delete', nodes);
+const onBeforeDelete: OnBeforeDelete = ({ nodes, edges }) => {
-const onEdgesDelete = (edges: Edge[]) => console.log('edges delete', edges);
+  console.log('on before delete', nodes, edges);
+  return true;
+};
+const onDelete: OnDelete = ({ nodes, edges }) => console.log('on delete', nodes, edges);
 const onPaneMouseMove = (e: ReactMouseEvent) => console.log('pane move', e.clientX, e.clientY);
 
 const initialNodes: Node[] = [
@@ -226,8 +231,8 @@ const OverviewFlow = () => {
       fitViewOptions={{ padding: 0.1 /*nodes: [{ id: '1' }]*/ }}
       attributionPosition="top-right"
       maxZoom={Infinity}
-      onNodesDelete={onNodesDelete}
+      onBeforeDelete={onBeforeDelete}
-      onEdgesDelete={onEdgesDelete}
+      onDelete={onDelete}
       onPaneMouseMove={onPaneMouseMove}
     >
       <MiniMap nodeBorderRadius={2} />

examples/react/src/examples/Validation/index.tsx

@@ -16,6 +16,7 @@ import {
   updateEdge,
   Edge,
   IsValidConnection,
+  OnBeforeDelete,
 } from '@xyflow/react';
 
 import ConnectionStatus from './ConnectionStatus';
@@ -85,6 +86,10 @@ const ValidationFlow = () => {
     [setEdges]
   );
 
+  const onBeforeDelete: OnBeforeDelete = useCallback(() => {
+    return true;
+  }, []);
+
   return (
     <ReactFlow
       nodes={nodes}
@@ -99,6 +104,7 @@ const ValidationFlow = () => {
       onConnectEnd={onConnectEnd}
       onEdgeUpdate={onEdgeUpdate}
       isValidConnection={isValidConnection}
+      onBeforeDelete={onBeforeDelete}
       fitView
     >
       <ConnectionStatus />

examples/svelte/src/routes/examples/overview/+page.svelte

@@ -177,6 +177,10 @@
 	}}
 	on:selectionclick={(event) => console.log('on selection click', event)}
 	on:selectioncontextmenu={(event) => console.log('on selection contextmenu', event)}
+	onbeforedelete={({ nodes, edges }) => {
+		console.log('on before delete', nodes, edges);
+		return true;
+	}}
 	autoPanOnConnect
 	autoPanOnNodeDrag
 	connectionMode={ConnectionMode.Strict}

packages/react/src/components/StoreUpdater/index.tsx

@@ -64,6 +64,7 @@ const reactFlowFieldsToTrack = [
   'isValidConnection',
   'selectNodesOnDrag',
   'nodeDragThreshold',
+  'onBeforeDelete',
 ] as const;
 
 type ReactFlowFieldsToTrack = (typeof reactFlowFieldsToTrack)[number];

packages/react/src/container/ReactFlow/index.tsx

@@ -70,6 +70,7 @@ const ReactFlow = forwardRef<ReactFlowRefType, ReactFlowProps>(
       onSelectionContextMenu,
       onSelectionStart,
       onSelectionEnd,
+      onBeforeDelete,
       connectionMode,
       connectionLineType = ConnectionLineType.Bezier,
       connectionLineStyle,
@@ -284,6 +285,7 @@ const ReactFlow = forwardRef<ReactFlowRefType, ReactFlowProps>(
             isValidConnection={isValidConnection}
             selectNodesOnDrag={selectNodesOnDrag}
             nodeDragThreshold={nodeDragThreshold}
+            onBeforeDelete={onBeforeDelete}
           />
           <SelectionListener onSelectionChange={onSelectionChange} />
           {children}

packages/react/src/hooks/useGlobalKeyHandler.ts

@@ -30,8 +30,8 @@ export default ({
 
   useEffect(() => {
     if (deleteKeyPressed) {
-      const { edges, nodes } = store.getState();
+      const { edges, nodes, onBeforeDelete } = store.getState();
-      deleteElements({ nodes: nodes.filter(selected), edges: edges.filter(selected) });
+      deleteElements({ nodes: nodes.filter(selected), edges: edges.filter(selected), onBeforeDelete });
       store.setState({ nodesSelectionActive: false });
     }
   }, [deleteKeyPressed]);

packages/react/src/hooks/useReactFlow.ts

@@ -12,7 +12,6 @@ import type {
   EdgeResetChange,
   NodeRemoveChange,
   EdgeRemoveChange,
-  NodeChange,
   Node,
   Edge,
 } from '../types';
@@ -118,67 +117,65 @@ export default function useReactFlow<NodeType extends Node = Node, EdgeType exte
     };
   }, []);
 
-  const deleteElements = useCallback<Instance.DeleteElements>(({ nodes: nodesDeleted, edges: edgesDeleted }) => {
+  const deleteElements = useCallback<Instance.DeleteElements>(
-    const {
+    ({ nodes: nodesToRemove = [], edges: edgesToRemove = [], onBeforeDelete }) => {
-      nodes,
+      const {
-      edges,
+        nodes,
-      hasDefaultNodes,
+        edges,
-      hasDefaultEdges,
+        hasDefaultNodes,
-      onNodesDelete,
+        hasDefaultEdges,
-      onEdgesDelete,
+        onNodesDelete,
-      onNodesChange,
+        onEdgesDelete,
-      onEdgesChange,
+        onNodesChange,
-      onDelete,
+        onEdgesChange,
-    } = store.getState();
+        onDelete,
-    const { matchingNodes, matchingEdges } = getElementsToRemove<Node, Edge>({
+      } = store.getState();
-      nodesToRemove: nodesDeleted || [],
+      const { nodes: matchingNodes, edges: matchingEdges } = getElementsToRemove({
-      edgesToRemove: edgesDeleted || [],
+        nodesToRemove,
-      nodes,
+        edgesToRemove,
-      edges,
+        nodes,
-    });
+        edges,
+        onBeforeDelete,
+      });
 
-    if (matchingNodes.length || matchingEdges.length) {
+      const hasMatchingEdges = matchingEdges.length > 0;
-      if (hasDefaultEdges || hasDefaultNodes) {
+      const hasMatchingNodes = matchingNodes.length > 0;
+
+      if (hasMatchingEdges) {
         if (hasDefaultEdges) {
           store.setState({
             edges: edges.filter((e) => !matchingEdges.some((mE) => mE.id === e.id)),
           });
         }
 
+        onEdgesDelete?.(matchingEdges);
+        onEdgesChange?.(
+          matchingEdges.map((edge) => ({
+            id: edge.id,
+            type: 'remove',
+          }))
+        );
+      }
+
+      if (hasMatchingNodes) {
         if (hasDefaultNodes) {
           store.setState({
             nodes: nodes.filter((n) => !matchingNodes.some((mN) => mN.id === n.id)),
           });
         }
+
+        onNodesDelete?.(matchingNodes);
+        onNodesChange?.(matchingNodes.map((node) => ({ id: node.id, type: 'remove' })));
       }
 
-      if (matchingEdges.length > 0) {
+      if (hasMatchingNodes || hasMatchingEdges) {
-        onEdgesDelete?.(matchingEdges);
+        onDelete?.({ nodes: matchingNodes, edges: matchingEdges });
-
-        if (onEdgesChange) {
-          onEdgesChange(
-            matchingEdges.map((edge) => ({
-              id: edge.id,
-              type: 'remove',
-            }))
-          );
-        }
       }
 
-      if (matchingNodes.length > 0) {
+      return { deletedNodes: matchingNodes, deletedEdges: matchingEdges };
-        onNodesDelete?.(matchingNodes as Node[]);
+    },
-
+    []
-        if (onNodesChange) {
+  );
-          const nodeChanges: NodeChange[] = matchingNodes.map((node) => ({ id: node.id, type: 'remove' }));
-          onNodesChange(nodeChanges);
-        }
-      }
-
-      onDelete?.({ nodes: matchingNodes, edges: matchingEdges });
-    }
-
-    return { deletedNodes: matchingNodes, deletedEdges: matchingEdges };
-  }, []);
 
   const getNodeRect = useCallback(
     (nodeOrRect: NodeType | { id: Node['id'] } | Rect): [Rect | null, NodeType | null | undefined, boolean] => {

packages/react/src/index.ts

@@ -79,6 +79,7 @@ export {
   type ColorMode,
   type ColorModeClass,
   type HandleType,
+  type OnBeforeDelete,
 } from '@xyflow/system';
 
 // system utils

packages/react/src/types/component-props.ts

@@ -21,6 +21,7 @@ import type {
   IsValidConnection,
   ColorMode,
   SnapGrid,
+  OnBeforeDelete,
 } from '@xyflow/system';
 
 import type {
@@ -100,6 +101,7 @@ export type ReactFlowProps = Omit<HTMLAttributes<HTMLDivElement>, 'onError'> & {
   onPaneMouseEnter?: (event: ReactMouseEvent) => void;
   onPaneMouseMove?: (event: ReactMouseEvent) => void;
   onPaneMouseLeave?: (event: ReactMouseEvent) => void;
+  onBeforeDelete?: OnBeforeDelete;
   nodeTypes?: NodeTypes;
   edgeTypes?: EdgeTypes;
   connectionLineType?: ConnectionLineType;

packages/react/src/types/instance.ts

@@ -1,6 +1,6 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 /* eslint-disable @typescript-eslint/no-namespace */
-import type { Rect, Viewport } from '@xyflow/system';
+import type { OnBeforeDelete, Rect, Viewport } from '@xyflow/system';
 import type { Node, Edge, ViewportHelperFunctions } from '.';
 
 export type ReactFlowJsonObject<NodeType extends Node = Node, EdgeType extends Edge = Edge> = {
@@ -12,6 +12,7 @@ export type ReactFlowJsonObject<NodeType extends Node = Node, EdgeType extends E
 export type DeleteElementsOptions = {
   nodes?: (Node | { id: Node['id'] })[];
   edges?: (Edge | { id: Edge['id'] })[];
+  onBeforeDelete?: OnBeforeDelete;
 };
 
 export namespace Instance {
@@ -31,7 +32,7 @@ export namespace Instance {
     NodeType,
     EdgeType
   >;
-  export type DeleteElements = ({ nodes, edges }: DeleteElementsOptions) => {
+  export type DeleteElements = (params: DeleteElementsOptions) => {
     deletedNodes: Node[];
     deletedEdges: Edge[];
   };

packages/react/src/types/store.ts

@@ -27,6 +27,7 @@ import {
   type EdgeLookup,
   type ConnectionLookup,
   type NodeLookup,
+  OnBeforeDelete,
 } from '@xyflow/system';
 
 import type {
@@ -132,6 +133,7 @@ export type ReactFlowStore = {
   onViewportChangeStart?: OnViewportChange;
   onViewportChange?: OnViewportChange;
   onViewportChangeEnd?: OnViewportChange;
+  onBeforeDelete?: OnBeforeDelete;
 
   onSelectionChangeHandlers: OnSelectionChangeFunc[];
 

packages/svelte/src/lib/container/SvelteFlow/SvelteFlow.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
   import { onMount, hasContext } from 'svelte';
+  import { get } from 'svelte/store';
   import cc from 'classcat';
   import { ConnectionMode, PanOnScrollMode, type Viewport } from '@xyflow/system';
 
@@ -15,13 +16,7 @@
   import { Attribution } from '$lib/components/Attribution';
   import { key, useStore, createStoreContext } from '$lib/store';
   import type { SvelteFlowProps } from './types';
-  import {
+  import { updateStore, updateStoreByKeys, type UpdatableStoreProps } from './utils';
-    updateStore,
-    updateStoreByKeys,
-    type UpdatableStoreProps,
-    getColorModeClass
-  } from './utils';
-  import { get } from 'svelte/store';
   import { useColorModeClass } from '$lib/hooks/useColorModeClass';
 
   type $$Props = SvelteFlowProps;
@@ -81,6 +76,7 @@
   export let onconnect: $$Props['onconnect'] = undefined;
   export let onconnectstart: $$Props['onconnectstart'] = undefined;
   export let onconnectend: $$Props['onconnectend'] = undefined;
+  export let onbeforedelete: $$Props['onbeforedelete'] = undefined;
 
   export let defaultMarkerColor = '#b1b1b7';
 
@@ -158,7 +154,8 @@
       nodeDragThreshold,
       onconnect,
       onconnectstart,
-      onconnectend
+      onconnectend,
+      onbeforedelete
     };
 
     updateStoreByKeys(store, updatableProps);

packages/svelte/src/lib/container/SvelteFlow/types.ts

@@ -18,7 +18,8 @@ import type {
   ColorMode,
   OnConnect,
   OnConnectStart,
-  OnConnectEnd
+  OnConnectEnd,
+  OnBeforeDelete
 } from '@xyflow/system';
 
 import type {
@@ -93,6 +94,7 @@ export type SvelteFlowProps = DOMAttributes<HTMLDivElement> & {
   onMoveEnd?: OnMoveEnd;
   onerror?: OnError;
   ondelete?: OnDelete;
+  onbeforedelete?: OnBeforeDelete;
 
   onedgecreate?: OnEdgeCreate;
 

packages/svelte/src/lib/container/SvelteFlow/utils.ts

@@ -1,6 +1,6 @@
 import type { SvelteFlowStore } from '$lib/store/types';
 import type { EdgeTypes, NodeTypes } from '$lib/types';
-import type { ColorMode, CoordinateExtent } from '@xyflow/system';
+import type { CoordinateExtent } from '@xyflow/system';
 import type { Writable } from 'svelte/store';
 
 // this is helper function for updating the store
@@ -69,6 +69,7 @@ export type UpdatableStoreProps = {
   onconnect?: UnwrapWritable<SvelteFlowStore['onconnect']>;
   onconnectstart?: UnwrapWritable<SvelteFlowStore['onconnectstart']>;
   onconnectend?: UnwrapWritable<SvelteFlowStore['onconnectend']>;
+  onbeforedelete?: UnwrapWritable<SvelteFlowStore['onbeforedelete']>;
 };
 
 export function updateStoreByKeys(store: SvelteFlowStore, keys: UpdatableStoreProps) {
@@ -81,15 +82,3 @@ export function updateStoreByKeys(store: SvelteFlowStore, keys: UpdatableStorePr
     }
   });
 }
-
-export function getColorModeClass(colorMode?: ColorMode) {
-  if (colorMode !== 'system') {
-    return colorMode;
-  }
-
-  if (!colorMode || typeof window === 'undefined' || !window.matchMedia) {
-    return 'light';
-  }
-
-  return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
-}

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

@@ -13,7 +13,8 @@ import {
   type Rect,
   getViewportForBounds,
   getElementsToRemove,
-  rendererPointToPoint
+  rendererPointToPoint,
+  type OnBeforeDelete
 } from '@xyflow/system';
 
 import { useStore } from '$lib/store';
@@ -48,7 +49,8 @@ export function useSvelteFlow(): {
   fitBounds: (bounds: Rect, options?: FitBoundsOptions) => void;
   deleteElements: (
     nodesToRemove?: (Node | { id: Node['id'] })[],
-    edgesToRemove?: (Edge | { id: Edge['id'] })[]
+    edgesToRemove?: (Edge | { id: Edge['id'] })[],
+    onBeforeDelete?: OnBeforeDelete
   ) => { deletedNodes: Node[]; deletedEdges: Edge[] };
   screenToFlowPosition: (position: XYPosition) => XYPosition;
   flowToScreenPosition: (position: XYPosition) => XYPosition;
@@ -69,6 +71,7 @@ export function useSvelteFlow(): {
     zoomIn,
     zoomOut,
     fitView,
+    onbeforedelete,
     snapGrid,
     viewport,
     width,
@@ -200,23 +203,27 @@ export function useSvelteFlow(): {
     },
     deleteElements: (
       nodesToRemove: (Node | { id: Node['id'] })[] = [],
-      edgesToRemove: (Edge | { id: Edge['id'] })[] = []
+      edgesToRemove: (Edge | { id: Edge['id'] })[] = [],
+      onBeforeDelete?: OnBeforeDelete
     ) => {
-      const _nodes = get(nodes);
+      const { nodes: matchingNodes, edges: matchingEdges } = getElementsToRemove({
-      const _edges = get(edges);
-      const { matchingNodes, matchingEdges } = getElementsToRemove<Node, Edge>({
         nodesToRemove,
         edgesToRemove,
-        nodes: _nodes,
+        nodes: get(nodes),
-        edges: _edges
+        edges: get(edges),
+        onBeforeDelete
       });
 
       if (matchingNodes) {
-        nodes.set(_nodes.filter((node) => !matchingNodes.some(({ id }) => id === node.id)));
+        nodes.update((nds) =>
+          nds.filter((node) => !matchingNodes.some(({ id }) => id === node.id))
+        );
       }
 
       if (matchingEdges) {
-        edges.set(_edges.filter((edge) => !matchingEdges.some(({ id }) => id === edge.id)));
+        edges.update((eds) =>
+          eds.filter((edge) => !matchingEdges.some(({ id }) => id === edge.id))
+        );
       }
 
       return {

packages/svelte/src/lib/store/index.ts

@@ -215,11 +215,12 @@ export function createStore({
       const selectedNodes = nodes.filter((node) => node.selected);
       const selectedEdges = edges.filter((edge) => edge.selected);
 
-      const { matchingNodes, matchingEdges } = getElementsToRemove<Node, Edge>({
+      const { nodes: matchingNodes, edges: matchingEdges } = getElementsToRemove({
         nodesToRemove: selectedNodes,
         edgesToRemove: selectedEdges,
         nodes,
-        edges
+        edges,
+        onBeforeDelete: get(store.onbeforedelete)
       });
 
       if (matchingNodes.length || matchingEdges.length) {

packages/svelte/src/lib/store/initial-store.ts

@@ -22,7 +22,8 @@ import {
   type OnConnect,
   type OnConnectStart,
   type OnConnectEnd,
-  type NodeLookup
+  type NodeLookup,
+  type OnBeforeDelete
 } from '@xyflow/system';
 
 import DefaultNode from '$lib/components/nodes/DefaultNode.svelte';
@@ -148,6 +149,7 @@ export const getInitialStore = ({
     onedgecreate: writable<OnEdgeCreate>(undefined),
     onconnect: writable<OnConnect>(undefined),
     onconnectstart: writable<OnConnectStart>(undefined),
-    onconnectend: writable<OnConnectEnd>(undefined)
+    onconnectend: writable<OnConnectEnd>(undefined),
+    onbeforedelete: writable<OnBeforeDelete>(undefined)
   };
 };

packages/system/src/types/general.ts

@@ -141,3 +141,11 @@ export type ColorModeClass = 'light' | 'dark';
 export type ColorMode = ColorModeClass | 'system';
 
 export type ConnectionLookup = Map<string, Map<string, Connection>>;
+
+export type OnBeforeDelete = <NodeType extends NodeBase = NodeBase, EdgeType extends EdgeBase = EdgeBase>({
+  nodes,
+  edges,
+}: {
+  nodes: NodeType[];
+  edges: EdgeType[];
+}) => boolean | { nodes: NodeType[]; edges: EdgeType[] };

packages/system/src/utils/graph.ts

@@ -22,6 +22,7 @@ import {
   NodeDragItem,
   CoordinateExtent,
   OnError,
+  OnBeforeDelete,
 } from '../types';
 import { errorMessages } from '../constants';
 
@@ -332,47 +333,69 @@ export function calcNextPosition<NodeType extends NodeBase>(
  * @param param.edgesToRemove - The edges to remove
  * @param param.nodes - All nodes
  * @param param.edges - All edges
- * @returns matchingNodes: nodes that can be deleted, matchingEdges: edges that can be deleted
+ * @param param.onBeforeDelete - Callback to check which nodes and edges can be deleted
+ * @returns nodes: nodes that can be deleted, edges: edges that can be deleted
  */
 export function getElementsToRemove<NodeType extends NodeBase = NodeBase, EdgeType extends EdgeBase = EdgeBase>({
-  nodesToRemove,
+  nodesToRemove = [],
-  edgesToRemove,
+  edgesToRemove = [],
   nodes,
   edges,
+  onBeforeDelete,
 }: {
   nodesToRemove: Partial<NodeType>[];
   edgesToRemove: Partial<EdgeType>[];
   nodes: NodeType[];
   edges: EdgeType[];
+  onBeforeDelete?: OnBeforeDelete;
 }): {
-  matchingNodes: NodeType[];
+  nodes: NodeType[];
-  matchingEdges: EdgeType[];
+  edges: EdgeType[];
 } {
   const nodeIds = nodesToRemove.map((node) => node.id);
+  const matchingNodes: NodeType[] = [];
+
+  for (const node of nodes) {
+    if (node.deletable === false) {
+      continue;
+    }
+
+    const isIncluded = nodeIds.includes(node.id);
+    const parentHit = !isIncluded && node.parentNode && matchingNodes.find((n) => n.id === node.parentNode);
+
+    if (isIncluded || parentHit) {
+      matchingNodes.push(node);
+    }
+  }
+
   const edgeIds = edgesToRemove.map((edge) => edge.id);
+  const deletableEdges = edges.filter((edge) => edge.deletable !== false);
+  const connectedEdges = getConnectedEdgesBase(matchingNodes, deletableEdges);
+  const matchingEdges: EdgeType[] = connectedEdges;
 
-  const matchingNodes = nodes.reduce<NodeType[]>((res, node) => {
+  for (const edge of deletableEdges) {
-    const parentHit = !nodeIds.includes(node.id) && node.parentNode && res.find((n) => n.id === node.parentNode);
+    const isIncluded = edgeIds.includes(edge.id);
-    const deletable = typeof node.deletable === 'boolean' ? node.deletable : true;
+
-    if (deletable && (nodeIds.includes(node.id) || parentHit)) {
+    if (isIncluded && !matchingEdges.find((e) => e.id === edge.id)) {
-      res.push(node);
+      matchingEdges.push(edge);
     }
+  }
 
-    return res;
+  if (!onBeforeDelete) {
-  }, []);
+    return {
-  const deletableEdges = edges.filter((e) => (typeof e.deletable === 'boolean' ? e.deletable : true));
+      edges: matchingEdges,
-  const initialHitEdges = deletableEdges.filter((e) => edgeIds.includes(e.id));
+      nodes: matchingNodes,
-  const connectedEdges = getConnectedEdgesBase<NodeType, EdgeType>(matchingNodes, deletableEdges);
+    };
-  const matchingEdges = connectedEdges.reduce((res, edge) => {
+  }
-    if (!res.find((e) => e.id === edge.id)) {
-      res.push(edge);
-    }
 
-    return res;
+  const onBeforeDeleteResult = onBeforeDelete({
-  }, initialHitEdges);
+    nodes: matchingNodes,
+    edges: matchingEdges,
+  });
 
-  return {
+  if (typeof onBeforeDeleteResult === 'boolean') {
-    matchingEdges,
+    return onBeforeDeleteResult ? { edges: matchingEdges, nodes: matchingNodes } : { edges: [], nodes: [] };
-    matchingNodes,
+  }
-  };
+
+  return onBeforeDeleteResult;
 }