fix deletion logic

examples/svelte/src/routes/tests/generic/[topic]/[example]/+page.svelte

@@ -3,11 +3,11 @@
 
 	import Flow from './Flow.svelte';
 
-	interface Props {
+	let {
+		data
+	}: {
 		data: { flowConfig: FlowConfig };
-	}
+	} = $props();
-
-	let { data }: Props = $props();
 </script>
 
 <SvelteFlowProvider>

examples/svelte/src/routes/tests/generic/[topic]/[example]/Flow.svelte

@@ -1,5 +1,4 @@
 <script lang="ts">
-	import { writable } from 'svelte/store';
 	import { Background, Controls, MiniMap, Panel, SvelteFlow } from '@xyflow/svelte';
 
 	import '@xyflow/svelte/dist/style.css';
@@ -11,13 +10,13 @@
 	let { flowConfig }: Props = $props();
 
 	// Create writables here so it is easier to create test cases
-	const nodes = writable(flowConfig.flowProps?.nodes);
+	let nodes = $state.raw(flowConfig.flowProps?.nodes ?? []);
-	const edges = writable(flowConfig.flowProps?.edges);
+	let edges = $state.raw(flowConfig.flowProps?.edges ?? []);
 
-	const flowProps = { ...flowConfig.flowProps, nodes, edges };
+	const flowProps = { ...flowConfig.flowProps };
 </script>
 
-<SvelteFlow {...flowProps}>
+<SvelteFlow bind:nodes bind:edges {...flowProps}>
 	{#if flowConfig.panelProps}
 		<Panel {...flowConfig.panelProps} />
 	{/if}

packages/svelte/src/lib/components/KeyHandler/KeyHandler.svelte

@@ -8,6 +8,7 @@
 
   import type { KeyHandlerProps } from './types';
   import type { KeyDefinition, KeyDefinitionObject } from '$lib/types';
+  import { useSvelteFlow } from '$lib/hooks/useSvelteFlow.svelte';
 
   let {
     store,
@@ -18,7 +19,7 @@
     zoomActivationKey = isMacOs() ? 'Meta' : 'Control'
   }: KeyHandlerProps = $props();
 
-  // const { nodes: _nodes, edges: _edges } = store;
+  let { deleteElements } = useSvelteFlow();
 
   function isKeyObject(key?: KeyDefinition | null): key is KeyDefinitionObject {
     return key !== null && typeof key === 'object';
@@ -64,26 +65,18 @@
   }
 
   async function handleDelete() {
-    // const nodes = get(_nodes);
-    // const edges = get(_edges);
     const selectedNodes = store.nodes.filter((node) => node.selected);
     const selectedEdges = store.edges.filter((edge) => edge.selected);
 
-    const { nodes: matchingNodes, edges: matchingEdges } = await getElementsToRemove({
+    const { deletedNodes, deletedEdges } = await deleteElements({
-      nodesToRemove: selectedNodes,
+      nodes: selectedNodes,
-      edgesToRemove: selectedEdges,
+      edges: selectedEdges
-      nodes: store.nodes,
-      edges: store.edges,
-      onBeforeDelete: store.onbeforedelete
     });
 
-    if (matchingNodes.length || matchingEdges.length) {
+    if (deletedNodes.length > 0 || deletedEdges.length > 0) {
-      // _nodes.update((nds) => nds.filter((node) => !matchingNodes.some((mN) => mN.id === node.id)));
-      // _edges.update((eds) => eds.filter((edge) => !matchingEdges.some((mE) => mE.id === edge.id)));
-
       store.ondelete?.({
-        nodes: matchingNodes,
+        nodes: deletedNodes,
-        edges: matchingEdges
+        edges: deletedEdges
       });
     }
   }