Merge branch 'next' into refactor/set-nodes

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

packages/react/src/hooks/useReactFlow.ts

@@ -162,9 +162,8 @@ export function useReactFlow<NodeType extends Node = Node, EdgeType extends Edge
 
       if (hasMatchingEdges) {
         if (hasDefaultEdges) {
-          store.setState({
+          const nextEdges = edges.filter((e) => !matchingEdges.some((mE) => mE.id === e.id));
-            edges: edges.filter((e) => !matchingEdges.some((mE) => mE.id === e.id)),
+          store.getState().setEdges(nextEdges);
-          });
         }
 
         onEdgesDelete?.(matchingEdges);
@@ -178,9 +177,8 @@ export function useReactFlow<NodeType extends Node = Node, EdgeType extends Edge
 
       if (hasMatchingNodes) {
         if (hasDefaultNodes) {
-          store.setState({
+          const nextNodes = nodes.filter((n) => !matchingNodes.some((mN) => mN.id === n.id));
-            nodes: nodes.filter((n) => !matchingNodes.some((mN) => mN.id === n.id)),
+          store.getState().setNodes(nextNodes);
-          });
         }
 
         onNodesDelete?.(matchingNodes);