From 08c6ed4a06daeb49417b189ef872d4f73ab1799e Mon Sep 17 00:00:00 2001
From: moklick <info@moritzklack.com>
Date: Thu, 11 Jan 2024 11:19:23 +0100
Subject: [PATCH] refactor(deleteElements): use onbeforedelete from store

---
 .../examples/usesvelteflow/Sidebar.svelte     | 14 +++++++++--
 packages/react/CHANGELOG.md                   |  6 +++++
 .../react/src/hooks/useGlobalKeyHandler.ts    |  4 ++--
 packages/react/src/hooks/useReactFlow.ts      |  3 ++-
 packages/react/src/types/instance.ts          |  3 +--
 packages/svelte/CHANGELOG.md                  | 10 ++++++++
 .../svelte/src/lib/hooks/useSvelteFlow.ts     | 23 ++++++++-----------
 7 files changed, 43 insertions(+), 20 deletions(-)

diff --git a/examples/svelte/src/routes/examples/usesvelteflow/Sidebar.svelte b/examples/svelte/src/routes/examples/usesvelteflow/Sidebar.svelte
index a195cf1c..5e6d20a2 100644
--- a/examples/svelte/src/routes/examples/usesvelteflow/Sidebar.svelte
+++ b/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();
diff --git a/packages/react/CHANGELOG.md b/packages/react/CHANGELOG.md
index 249614a4..146e178c 100644
--- a/packages/react/CHANGELOG.md
+++ b/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
diff --git a/packages/react/src/hooks/useGlobalKeyHandler.ts b/packages/react/src/hooks/useGlobalKeyHandler.ts
index f85826c7..ffc7a2aa 100644
--- a/packages/react/src/hooks/useGlobalKeyHandler.ts
+++ b/packages/react/src/hooks/useGlobalKeyHandler.ts
@@ -30,8 +30,8 @@ export function useGlobalKeyHandler({
 
   useEffect(() => {
     if (deleteKeyPressed) {
-      const { edges, nodes, onBeforeDelete } = store.getState();
-      deleteElements({ nodes: nodes.filter(selected), edges: edges.filter(selected), onBeforeDelete });
+      const { edges, nodes } = store.getState();
+      deleteElements({ nodes: nodes.filter(selected), edges: edges.filter(selected) });
       store.setState({ nodesSelectionActive: false });
     }
   }, [deleteKeyPressed]);
diff --git a/packages/react/src/hooks/useReactFlow.ts b/packages/react/src/hooks/useReactFlow.ts
index 198599d5..f5d63080 100644
--- a/packages/react/src/hooks/useReactFlow.ts
+++ b/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,
diff --git a/packages/react/src/types/instance.ts b/packages/react/src/types/instance.ts
index c9c4708d..0bf01b20 100644
--- a/packages/react/src/types/instance.ts
+++ b/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 {
diff --git a/packages/svelte/CHANGELOG.md b/packages/svelte/CHANGELOG.md
index 76920305..dc044f9e 100644
--- a/packages/svelte/CHANGELOG.md
+++ b/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
diff --git a/packages/svelte/src/lib/hooks/useSvelteFlow.ts b/packages/svelte/src/lib/hooks/useSvelteFlow.ts
index ec370dbf..c4da0c2b 100644
--- a/packages/svelte/src/lib/hooks/useSvelteFlow.ts
+++ b/packages/svelte/src/lib/hooks/useSvelteFlow.ts
@@ -13,8 +13,7 @@ import {
   type Rect,
   getViewportForBounds,
   getElementsToRemove,
-  rendererPointToPoint,
-  type OnBeforeDelete
+  rendererPointToPoint
 } 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: (
-    nodesToRemove?: (Node | { id: Node['id'] })[],
-    edgesToRemove?: (Edge | { id: Edge['id'] })[],
-    onBeforeDelete?: OnBeforeDelete
-  ) => Promise<{ deletedNodes: Node[]; deletedEdges: Edge[] }>;
+  deleteElements: ({
+    nodes,
+    edges
+  }: {
+    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 (
-      nodesToRemove: (Node | { id: Node['id'] })[] = [],
-      edgesToRemove: (Edge | { id: Edge['id'] })[] = [],
-      onBeforeDelete?: OnBeforeDelete
-    ) => {
+    deleteElements: async ({ nodes: nodesToRemove = [], edges: edgesToRemove = [] }) => {
       const { nodes: matchingNodes, edges: matchingEdges } = await getElementsToRemove({
         nodesToRemove,
         edgesToRemove,
         nodes: get(nodes),
         edges: get(edges),
-        onBeforeDelete
+        onBeforeDelete: get(onbeforedelete)
       });
 
       if (matchingNodes) {