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';
-}