feat(svelte): add ondelete handler #3618

examples/svelte/src/routes/examples/edges/+page.svelte

@@ -145,7 +145,7 @@
 	]);
 </script>
 
-<SvelteFlow {nodes} {edges} fitView nodeDragThreshold={2}>
+<SvelteFlow {nodes} {edges} fitView nodeDragThreshold={2} ondelete={console.log}>
 	<Controls />
 	<Background variant={BackgroundVariant.Dots} />
 	<MiniMap />

packages/svelte/src/lib/container/SvelteFlow/SvelteFlow.svelte

@@ -63,7 +63,8 @@
   export let selectionOnDrag: $$Props['selectionOnDrag'] = undefined;
   export let autoPanOnConnect: $$Props['autoPanOnConnect'] = true;
   export let autoPanOnNodeDrag: $$Props['autoPanOnNodeDrag'] = true;
-  export let onError: $$Props['onError'] = undefined;
+  export let onerror: $$Props['onerror'] = undefined;
+  export let ondelete: $$Props['ondelete'] = undefined;
   export let attributionPosition: $$Props['attributionPosition'] = undefined;
   export let proOptions: $$Props['proOptions'] = undefined;
   export let defaultEdgeOptions: $$Props['defaultEdgeOptions'] = undefined;
@@ -139,7 +140,8 @@
       isValidConnection,
       autoPanOnConnect,
       autoPanOnNodeDrag,
-      onError,
+      onerror,
+      ondelete,
       connectionMode,
       nodeDragThreshold
     };

packages/svelte/src/lib/container/SvelteFlow/types.ts

@@ -24,7 +24,8 @@ import type {
   KeyDefinition,
   EdgeTypes,
   DefaultEdgeOptions,
-  FitViewOptions
+  FitViewOptions,
+  OnDelete
 } from '$lib/types';
 import type { Writable } from 'svelte/store';
 
@@ -84,5 +85,6 @@ export type SvelteFlowProps = DOMAttributes<HTMLDivElement> & {
   onMoveStart?: OnMoveStart;
   onMove?: OnMove;
   onMoveEnd?: OnMoveEnd;
-  onError?: OnError;
+  onerror?: OnError;
+  ondelete?: OnDelete;
 };

packages/svelte/src/lib/container/SvelteFlow/utils.ts

@@ -62,7 +62,8 @@ export type UpdatableStoreProps = {
   autoPanOnConnect?: UnwrapWritable<SvelteFlowStore['autoPanOnConnect']>;
   autoPanOnNodeDrag?: UnwrapWritable<SvelteFlowStore['autoPanOnNodeDrag']>;
   connectionMode?: UnwrapWritable<SvelteFlowStore['connectionMode']>;
-  onError?: UnwrapWritable<SvelteFlowStore['onError']>;
+  onerror?: UnwrapWritable<SvelteFlowStore['onerror']>;
+  ondelete?: UnwrapWritable<SvelteFlowStore['ondelete']>;
   nodeDragThreshold?: UnwrapWritable<SvelteFlowStore['nodeDragThreshold']>;
 };
 

packages/svelte/src/lib/store/edge-tree.ts

@@ -41,8 +41,8 @@ export function getEdgeTree(store: SvelteFlowStoreState) {
   );
 
   return derived(
-    [visibleEdges, store.nodes, store.nodeLookup, store.connectionMode, store.onError],
+    [visibleEdges, store.nodes, store.nodeLookup, store.connectionMode, store.onerror],
-    ([visibleEdges, , nodeLookup, connectionMode, onError]) => {
+    ([visibleEdges, , nodeLookup, connectionMode, onerror]) => {
       const layoutedEdges = visibleEdges.reduce<EdgeLayouted[]>((res, edge) => {
         const sourceNode = nodeLookup.get(edge.source);
         const targetNode = nodeLookup.get(edge.target);
@@ -58,7 +58,7 @@ export function getEdgeTree(store: SvelteFlowStoreState) {
           sourceHandle: edge.sourceHandle || null,
           targetHandle: edge.targetHandle || null,
           connectionMode,
-          onError
+          onError: onerror
         });
 
         if (edgePosition) {

packages/svelte/src/lib/store/index.ts

@@ -221,6 +221,11 @@ export function createStore({
         store.edges.update((eds) =>
           eds.filter((edge) => !matchingEdges.some((mE) => mE.id === edge.id))
         );
+
+        get(store.ondelete)?.({
+          nodes: matchingNodes,
+          edges: matchingEdges
+        });
       }
     }
   });

packages/svelte/src/lib/store/initial-store.ts

@@ -28,7 +28,15 @@ import BezierEdge from '$lib/components/edges/BezierEdge.svelte';
 import StraightEdge from '$lib/components/edges/StraightEdge.svelte';
 import SmoothStepEdge from '$lib/components/edges/SmoothStepEdge.svelte';
 import StepEdge from '$lib/components/edges/StepEdge.svelte';
-import type { NodeTypes, EdgeTypes, EdgeLayouted, Node, Edge, FitViewOptions } from '$lib/types';
+import type {
+  NodeTypes,
+  EdgeTypes,
+  EdgeLayouted,
+  Node,
+  Edge,
+  FitViewOptions,
+  OnDelete
+} from '$lib/types';
 import { createNodesStore, createEdgesStore } from './utils';
 import { initConnectionProps, type ConnectionProps } from './derived-connection-props';
 
@@ -125,6 +133,7 @@ export const getInitialStore = ({
     defaultMarkerColor: writable<string>('#b1b1b7'),
     lib: readable<string>('svelte'),
     onlyRenderVisibleElements: writable<boolean>(false),
-    onError: writable<OnError>(devWarn)
+    onerror: writable<OnError>(devWarn),
+    ondelete: writable<OnDelete>(undefined)
   };
 };

packages/svelte/src/lib/types/general.ts

@@ -8,6 +8,7 @@ import type {
 } from '@xyflow/system';
 
 import type { Node } from './nodes';
+import type { Edge } from './edges';
 
 export type KeyModifier = ShortcutModifierDefinition;
 export type KeyDefinitionObject = { key: string; modifier?: KeyModifier };
@@ -32,3 +33,5 @@ export type HandleComponentProps = {
 };
 
 export type FitViewOptions = FitViewOptionsBase<Node>;
+
+export type OnDelete = (params: { nodes: Node[]; edges: Edge[] }) => void;