From 5aacb84499c3c266f1e84737d0523d86ec76d62a Mon Sep 17 00:00:00 2001
From: moklick <info@moritzklack.com>
Date: Thu, 11 Jan 2024 12:56:00 +0100
Subject: [PATCH] fix(react): deleteElements for uncontrolled flows

---
 .../src/routes/examples/usesvelteflow/Sidebar.svelte   |  6 ++++++
 packages/react/src/hooks/useReactFlow.ts               | 10 ++++------
 2 files changed, 10 insertions(+), 6 deletions(-)

diff --git a/examples/svelte/src/routes/examples/usesvelteflow/Sidebar.svelte b/examples/svelte/src/routes/examples/usesvelteflow/Sidebar.svelte
index 5e6d20a2..0a27afd9 100644
--- a/examples/svelte/src/routes/examples/usesvelteflow/Sidebar.svelte
+++ b/examples/svelte/src/routes/examples/usesvelteflow/Sidebar.svelte
@@ -16,6 +16,11 @@
 
 	const nodes = useNodes();
 	const edges = useEdges();
+
+	const deleteNode = () => {
+		$nodes.shift();
+		$nodes = $nodes;
+	};
 </script>
 
 <aside>
@@ -35,6 +40,7 @@
 	<button on:click={() => deleteElements({ nodes: $nodes.map((node) => ({ id: node.id })) })}
 		>deleteElements</button
 	>
+	<button on:click={() => deleteNode()}>delete via store</button>
 	<button
 		on:click={() => {
 			const { nodes, edges, viewport } = toObject();
diff --git a/packages/react/src/hooks/useReactFlow.ts b/packages/react/src/hooks/useReactFlow.ts
index f5d63080..518bf683 100644
--- a/packages/react/src/hooks/useReactFlow.ts
+++ b/packages/react/src/hooks/useReactFlow.ts
@@ -144,9 +144,8 @@ export function useReactFlow<NodeType extends Node = Node, EdgeType extends Edge
 
       if (hasMatchingEdges) {
         if (hasDefaultEdges) {
-          store.setState({
-            edges: edges.filter((e) => !matchingEdges.some((mE) => mE.id === e.id)),
-          });
+          const nextEdges = edges.filter((e) => !matchingEdges.some((mE) => mE.id === e.id));
+          store.getState().setEdges(nextEdges);
         }
 
         onEdgesDelete?.(matchingEdges);
@@ -160,9 +159,8 @@ export function useReactFlow<NodeType extends Node = Node, EdgeType extends Edge
 
       if (hasMatchingNodes) {
         if (hasDefaultNodes) {
-          store.setState({
-            nodes: nodes.filter((n) => !matchingNodes.some((mN) => mN.id === n.id)),
-          });
+          const nextNodes = nodes.filter((n) => !matchingNodes.some((mN) => mN.id === n.id));
+          store.getState().setNodes(nextNodes);
         }
 
         onNodesDelete?.(matchingNodes);