refactor(deleteElements): use onbeforedelete from store

examples/svelte/src/routes/examples/usesvelteflow/Sidebar.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { useNodes, useSvelteFlow } from '@xyflow/svelte';
+	import { useEdges, useNodes, useSvelteFlow } from '@xyflow/svelte';
 
 	const {
 		zoomIn,
@@ -10,10 +10,12 @@
 		setViewport,
 		getViewport,
 		viewport,
-		toObject
+		toObject,
+		deleteElements
 	} = useSvelteFlow();
 
 	const nodes = useNodes();
+	const edges = useEdges();
 </script>
 
 <aside>
@@ -25,6 +27,14 @@
 	<button on:click={() => setCenter(0, 0)}>setCenter 0, 0</button>
 	<button on:click={() => setViewport({ x: 100, y: 100, zoom: 2 })}>setViewport</button>
 	<button on:click={() => console.log(getViewport())}>getViewport</button>
+
+	<button on:click={() => deleteElements({ edges: $edges.map((edge) => ({ id: edge.id })) })}
+		>delete edges</button
+	>
+	<button on:click={() => deleteElements({ nodes: [{ id: $nodes[0].id }] })}>delete node</button>
+	<button on:click={() => deleteElements({ nodes: $nodes.map((node) => ({ id: node.id })) })}
+		>deleteElements</button
+	>
 	<button
 		on:click={() => {
 			const { nodes, edges, viewport } = toObject();

packages/react/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @xyflow/react
 
+## 12.0.0-next.6
+
+### Minor changes
+
+- fix `deleteElements`
+
 ## 12.0.0-next.5
 
 ### Minor changes

packages/react/src/hooks/useGlobalKeyHandler.ts

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

packages/react/src/hooks/useReactFlow.ts

@@ -118,7 +118,7 @@ export function useReactFlow<NodeType extends Node = Node, EdgeType extends Edge
   }, []);
 
   const deleteElements = useCallback<Instance.DeleteElements>(
-    async ({ nodes: nodesToRemove = [], edges: edgesToRemove = [], onBeforeDelete }) => {
+    async ({ nodes: nodesToRemove = [], edges: edgesToRemove = [] }) => {
       const {
         nodes,
         edges,
@@ -129,6 +129,7 @@ export function useReactFlow<NodeType extends Node = Node, EdgeType extends Edge
         onNodesChange,
         onEdgesChange,
         onDelete,
+        onBeforeDelete,
       } = store.getState();
       const { nodes: matchingNodes, edges: matchingEdges } = await getElementsToRemove({
         nodesToRemove,

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 { OnBeforeDelete, Rect, Viewport } from '@xyflow/system';
+import type { Rect, Viewport } from '@xyflow/system';
 import type { Node, Edge, ViewportHelperFunctions } from '.';
 
 export type ReactFlowJsonObject<NodeType extends Node = Node, EdgeType extends Edge = Edge> = {
@@ -12,7 +12,6 @@ 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 {

packages/svelte/CHANGELOG.md

@@ -1,5 +1,15 @@
 # @xyflow/svelte
 
+## 0.0.33
+
+### Bugfix
+
+- fix `deleteElements`
+
+### ⚠️ Breaking
+
+- `deleteElements` function now takes one object as an argument `{ nodes: [], edges: [] }` instead of two `(nodes, edges)`  
+
 ## 0.0.32
 
 ### Features

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

@@ -13,8 +13,7 @@ import {
   type Rect,
   getViewportForBounds,
   getElementsToRemove,
-  rendererPointToPoint,
+  rendererPointToPoint
-  type OnBeforeDelete
 } from '@xyflow/system';
 
 import { useStore } from '$lib/store';
@@ -47,11 +46,13 @@ export function useSvelteFlow(): {
     partially?: boolean
   ) => boolean;
   fitBounds: (bounds: Rect, options?: FitBoundsOptions) => void;
-  deleteElements: (
+  deleteElements: ({
-    nodesToRemove?: (Node | { id: Node['id'] })[],
+    nodes,
-    edgesToRemove?: (Edge | { id: Edge['id'] })[],
+    edges
-    onBeforeDelete?: OnBeforeDelete
+  }: {
-  ) => Promise<{ deletedNodes: Node[]; deletedEdges: Edge[] }>;
+    nodes?: (Node | { id: Node['id'] })[];
+    edges?: (Edge | { id: Edge['id'] })[];
+  }) => Promise<{ deletedNodes: Node[]; deletedEdges: Edge[] }>;
   screenToFlowPosition: (position: XYPosition) => XYPosition;
   flowToScreenPosition: (position: XYPosition) => XYPosition;
   viewport: Writable<Viewport>;
@@ -201,17 +202,13 @@ export function useSvelteFlow(): {
 
       return partiallyVisible || overlappingArea >= nodeRect.width * nodeRect.height;
     },
-    deleteElements: async (
+    deleteElements: async ({ nodes: nodesToRemove = [], edges: edgesToRemove = [] }) => {
-      nodesToRemove: (Node | { id: Node['id'] })[] = [],
-      edgesToRemove: (Edge | { id: Edge['id'] })[] = [],
-      onBeforeDelete?: OnBeforeDelete
-    ) => {
       const { nodes: matchingNodes, edges: matchingEdges } = await getElementsToRemove({
         nodesToRemove,
         edgesToRemove,
         nodes: get(nodes),
         edges: get(edges),
-        onBeforeDelete
+        onBeforeDelete: get(onbeforedelete)
       });
 
       if (matchingNodes) {