From 17646123de0d03b221a06fab2e38c07624b0da04 Mon Sep 17 00:00:00 2001
From: peterkogo <peter@xyflow.com>
Date: Tue, 13 May 2025 15:54:25 +0200
Subject: [PATCH] add onselectiondrag events

---
 packages/svelte/src/lib/actions/drag/index.ts      |  3 +++
 .../src/lib/container/SvelteFlow/Wrapper.svelte    |  3 +++
 .../svelte/src/lib/container/SvelteFlow/types.ts   | 14 +++++++++++++-
 .../svelte/src/lib/store/initial-store.svelte.ts   |  7 ++++++-
 packages/svelte/src/lib/types/events.ts            |  5 +++++
 5 files changed, 30 insertions(+), 2 deletions(-)

diff --git a/packages/svelte/src/lib/actions/drag/index.ts b/packages/svelte/src/lib/actions/drag/index.ts
index 84539018..18aa2e3c 100644
--- a/packages/svelte/src/lib/actions/drag/index.ts
+++ b/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
       };
     }
diff --git a/packages/svelte/src/lib/container/SvelteFlow/Wrapper.svelte b/packages/svelte/src/lib/container/SvelteFlow/Wrapper.svelte
index 20b1dcc3..e8952d51 100644
--- a/packages/svelte/src/lib/container/SvelteFlow/Wrapper.svelte
+++ b/packages/svelte/src/lib/container/SvelteFlow/Wrapper.svelte
@@ -54,6 +54,9 @@
     onclickconnectend,
     oninit,
     onselectionchange,
+    onselectiondragstart,
+    onselectiondrag,
+    onselectiondragstop,
     clickConnect,
     fitView,
     fitViewOptions,
diff --git a/packages/svelte/src/lib/container/SvelteFlow/types.ts b/packages/svelte/src/lib/container/SvelteFlow/types.ts
index e7ea8208..efe91567 100644
--- a/packages/svelte/src/lib/container/SvelteFlow/types.ts
+++ b/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>;
   };
diff --git a/packages/svelte/src/lib/store/initial-store.svelte.ts b/packages/svelte/src/lib/store/initial-store.svelte.ts
index 3f8ab896..9d67e65a 100644
--- a/packages/svelte/src/lib/store/initial-store.svelte.ts
+++ b/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;
diff --git a/packages/svelte/src/lib/types/events.ts b/packages/svelte/src/lib/types/events.ts
index 1c7b147c..24db8e1e 100644
--- a/packages/svelte/src/lib/types/events.ts
+++ b/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;