add onselectiondrag events

packages/svelte/src/lib/actions/drag/index.ts

@@ -47,6 +47,9 @@ export default function drag<NodeType extends Node = Node, EdgeType extends Edge
         nodeDragThreshold: store.nodeDragThreshold,
         unselectNodesAndEdges: store.unselectNodesAndEdges,
         updateNodePositions: store.updateNodePositions,
+        onSelectionDrag: store.onselectiondrag,
+        onSelectionDragStart: store.onselectiondragstart,
+        onSelectionDragStop: store.onselectiondragstop,
         panBy: store.panBy
       };
     }

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

@@ -54,6 +54,9 @@
     onclickconnectend,
     oninit,
     onselectionchange,
+    onselectiondragstart,
+    onselectiondrag,
+    onselectiondragstop,
     clickConnect,
     fitView,
     fitViewOptions,

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

@@ -40,7 +40,13 @@ import type {
 } from '$lib/types';
 
 import type { Component } from 'svelte';
-import type { EdgeEvents, NodeEvents, NodeSelectionEvents, PaneEvents } from '$lib/types/events';
+import type {
+  EdgeEvents,
+  NodeEvents,
+  NodeSelectionEvents,
+  OnSelectionDrag,
+  PaneEvents
+} from '$lib/types/events';
 
 export type SvelteFlowProps<
   NodeType extends Node = Node,
@@ -455,4 +461,10 @@ export type SvelteFlowProps<
     oninit?: () => void;
     /** This event handler gets called when the selected nodes & edges change */
     onselectionchange?: OnSelectionChange<NodeType, EdgeType>;
+    /** This event handler gets called when a user starts to drag a selection box. */
+    onselectiondragstart?: OnSelectionDrag<NodeType>;
+    /** This event handler gets called when a user drags a selection box. */
+    onselectiondrag?: OnSelectionDrag<NodeType>;
+    /** This event handler gets called when a user stops dragging a selection box. */
+    onselectiondragstop?: OnSelectionDrag<NodeType>;
   };

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

@@ -60,7 +60,8 @@ import type {
   EdgeLayouted,
   InternalNode,
   OnBeforeReconnect,
-  OnSelectionChange
+  OnSelectionChange,
+  OnSelectionDrag
 } from '$lib/types';
 
 import type { StoreSignals } from './types';
@@ -359,6 +360,10 @@ export function getInitialStore<NodeType extends Node = Node, EdgeType extends E
     onclickconnectend?: OnConnectEnd = $derived(signals.props.onclickconnectend);
     clickConnectStartHandle: Pick<Handle, 'id' | 'nodeId' | 'type'> | null = $state(null);
 
+    onselectiondrag?: OnSelectionDrag<NodeType> = $derived(signals.props.onselectiondrag);
+    onselectiondragstart?: OnSelectionDrag<NodeType> = $derived(signals.props.onselectiondragstart);
+    onselectiondragstop?: OnSelectionDrag<NodeType> = $derived(signals.props.onselectiondragstop);
+
     resolveFitView = async () => {
       if (!this.panZoom) {
         return;

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

@@ -70,3 +70,8 @@ export type EdgeEvents<EdgeType extends Edge = Edge> = {
   /** This event handler is called when the pointer of a user enters an edge. */
   onedgepointerleave?: ({ edge, event }: { edge: EdgeType; event: PointerEvent }) => void;
 };
+
+export type OnSelectionDrag<NodeType extends Node = Node> = (
+  event: MouseEvent,
+  nodes: NodeType[]
+) => void;