feat(deletion): add onBeforeDelete handler

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

@@ -1,5 +1,6 @@
 <script lang="ts">
   import { onMount, hasContext } from 'svelte';
+  import { get } from 'svelte/store';
   import cc from 'classcat';
   import { ConnectionMode, PanOnScrollMode, type Viewport } from '@xyflow/system';
 
@@ -15,13 +16,7 @@
   import { Attribution } from '$lib/components/Attribution';
   import { key, useStore, createStoreContext } from '$lib/store';
   import type { SvelteFlowProps } from './types';
-  import {
-    updateStore,
-    updateStoreByKeys,
-    type UpdatableStoreProps,
-    getColorModeClass
-  } from './utils';
-  import { get } from 'svelte/store';
+  import { updateStore, updateStoreByKeys, type UpdatableStoreProps } from './utils';
   import { useColorModeClass } from '$lib/hooks/useColorModeClass';
 
   type $$Props = SvelteFlowProps;
@@ -81,6 +76,7 @@
   export let onconnect: $$Props['onconnect'] = undefined;
   export let onconnectstart: $$Props['onconnectstart'] = undefined;
   export let onconnectend: $$Props['onconnectend'] = undefined;
+  export let onbeforedelete: $$Props['onbeforedelete'] = undefined;
 
   export let defaultMarkerColor = '#b1b1b7';
 
@@ -158,7 +154,8 @@
       nodeDragThreshold,
       onconnect,
       onconnectstart,
-      onconnectend
+      onconnectend,
+      onbeforedelete
     };
 
     updateStoreByKeys(store, updatableProps);

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

@@ -18,7 +18,8 @@ import type {
   ColorMode,
   OnConnect,
   OnConnectStart,
-  OnConnectEnd
+  OnConnectEnd,
+  OnBeforeDelete
 } from '@xyflow/system';
 
 import type {
@@ -93,6 +94,7 @@ export type SvelteFlowProps = DOMAttributes<HTMLDivElement> & {
   onMoveEnd?: OnMoveEnd;
   onerror?: OnError;
   ondelete?: OnDelete;
+  onbeforedelete?: OnBeforeDelete;
 
   onedgecreate?: OnEdgeCreate;
 

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

@@ -1,6 +1,6 @@
 import type { SvelteFlowStore } from '$lib/store/types';
 import type { EdgeTypes, NodeTypes } from '$lib/types';
-import type { ColorMode, CoordinateExtent } from '@xyflow/system';
+import type { CoordinateExtent } from '@xyflow/system';
 import type { Writable } from 'svelte/store';
 
 // this is helper function for updating the store
@@ -69,6 +69,7 @@ export type UpdatableStoreProps = {
   onconnect?: UnwrapWritable<SvelteFlowStore['onconnect']>;
   onconnectstart?: UnwrapWritable<SvelteFlowStore['onconnectstart']>;
   onconnectend?: UnwrapWritable<SvelteFlowStore['onconnectend']>;
+  onbeforedelete?: UnwrapWritable<SvelteFlowStore['onbeforedelete']>;
 };
 
 export function updateStoreByKeys(store: SvelteFlowStore, keys: UpdatableStoreProps) {
@@ -81,15 +82,3 @@ export function updateStoreByKeys(store: SvelteFlowStore, keys: UpdatableStorePr
     }
   });
 }
-
-export function getColorModeClass(colorMode?: ColorMode) {
-  if (colorMode !== 'system') {
-    return colorMode;
-  }
-
-  if (!colorMode || typeof window === 'undefined' || !window.matchMedia) {
-    return 'light';
-  }
-
-  return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
-}

packages/svelte/src/lib/hooks/useSvelteFlow.ts

@@ -13,7 +13,8 @@ import {
   type Rect,
   getViewportForBounds,
   getElementsToRemove,
-  rendererPointToPoint
+  rendererPointToPoint,
+  type OnBeforeDelete
 } from '@xyflow/system';
 
 import { useStore } from '$lib/store';
@@ -48,7 +49,8 @@ export function useSvelteFlow(): {
   fitBounds: (bounds: Rect, options?: FitBoundsOptions) => void;
   deleteElements: (
     nodesToRemove?: (Node | { id: Node['id'] })[],
-    edgesToRemove?: (Edge | { id: Edge['id'] })[]
+    edgesToRemove?: (Edge | { id: Edge['id'] })[],
+    onBeforeDelete?: OnBeforeDelete
   ) => { deletedNodes: Node[]; deletedEdges: Edge[] };
   screenToFlowPosition: (position: XYPosition) => XYPosition;
   flowToScreenPosition: (position: XYPosition) => XYPosition;
@@ -69,6 +71,7 @@ export function useSvelteFlow(): {
     zoomIn,
     zoomOut,
     fitView,
+    onbeforedelete,
     snapGrid,
     viewport,
     width,
@@ -200,23 +203,27 @@ export function useSvelteFlow(): {
     },
     deleteElements: (
       nodesToRemove: (Node | { id: Node['id'] })[] = [],
-      edgesToRemove: (Edge | { id: Edge['id'] })[] = []
+      edgesToRemove: (Edge | { id: Edge['id'] })[] = [],
+      onBeforeDelete?: OnBeforeDelete
     ) => {
-      const _nodes = get(nodes);
-      const _edges = get(edges);
-      const { matchingNodes, matchingEdges } = getElementsToRemove<Node, Edge>({
+      const { nodes: matchingNodes, edges: matchingEdges } = getElementsToRemove({
         nodesToRemove,
         edgesToRemove,
-        nodes: _nodes,
-        edges: _edges
+        nodes: get(nodes),
+        edges: get(edges),
+        onBeforeDelete
       });
 
       if (matchingNodes) {
-        nodes.set(_nodes.filter((node) => !matchingNodes.some(({ id }) => id === node.id)));
+        nodes.update((nds) =>
+          nds.filter((node) => !matchingNodes.some(({ id }) => id === node.id))
+        );
       }
 
       if (matchingEdges) {
-        edges.set(_edges.filter((edge) => !matchingEdges.some(({ id }) => id === edge.id)));
+        edges.update((eds) =>
+          eds.filter((edge) => !matchingEdges.some(({ id }) => id === edge.id))
+        );
       }
 
       return {

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

@@ -215,11 +215,12 @@ export function createStore({
       const selectedNodes = nodes.filter((node) => node.selected);
       const selectedEdges = edges.filter((edge) => edge.selected);
 
-      const { matchingNodes, matchingEdges } = getElementsToRemove<Node, Edge>({
+      const { nodes: matchingNodes, edges: matchingEdges } = getElementsToRemove({
         nodesToRemove: selectedNodes,
         edgesToRemove: selectedEdges,
         nodes,
-        edges
+        edges,
+        onBeforeDelete: get(store.onbeforedelete)
       });
 
       if (matchingNodes.length || matchingEdges.length) {

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

@@ -22,7 +22,8 @@ import {
   type OnConnect,
   type OnConnectStart,
   type OnConnectEnd,
-  type NodeLookup
+  type NodeLookup,
+  type OnBeforeDelete
 } from '@xyflow/system';
 
 import DefaultNode from '$lib/components/nodes/DefaultNode.svelte';
@@ -148,6 +149,7 @@ export const getInitialStore = ({
     onedgecreate: writable<OnEdgeCreate>(undefined),
     onconnect: writable<OnConnect>(undefined),
     onconnectstart: writable<OnConnectStart>(undefined),
-    onconnectend: writable<OnConnectEnd>(undefined)
+    onconnectend: writable<OnConnectEnd>(undefined),
+    onbeforedelete: writable<OnBeforeDelete>(undefined)
   };
 };