From ec9d4f3145d7a9ace40401ea87e284adf49900c5 Mon Sep 17 00:00:00 2001
From: peterkogo <peter@xyflow.com>
Date: Tue, 13 May 2025 17:44:28 +0200
Subject: [PATCH] add onselectionstart onselectionend

---
 packages/svelte/src/lib/container/Pane/Pane.svelte   |  6 ++++--
 packages/svelte/src/lib/container/Pane/types.ts      |  2 ++
 .../src/lib/container/SvelteFlow/SvelteFlow.svelte   | 12 +++++++++++-
 .../svelte/src/lib/container/SvelteFlow/types.ts     |  4 ++++
 4 files changed, 21 insertions(+), 3 deletions(-)

diff --git a/packages/svelte/src/lib/container/Pane/Pane.svelte b/packages/svelte/src/lib/container/Pane/Pane.svelte
index 9fedd44d..db11bd7d 100644
--- a/packages/svelte/src/lib/container/Pane/Pane.svelte
+++ b/packages/svelte/src/lib/container/Pane/Pane.svelte
@@ -50,6 +50,8 @@
     selectionOnDrag,
     onpaneclick,
     onpanecontextmenu,
+    onselectionstart,
+    onselectionend,
     children
   }: PaneProps<NodeType, EdgeType> = $props();
 
@@ -115,7 +117,7 @@
       y
     };
 
-    // onSelectionStart?.(event);
+    onselectionstart?.(event);
   }
 
   function onPointerMove(event: PointerEvent) {
@@ -201,7 +203,7 @@
       selectionInProgress = false;
     }
 
-    // onSelectionEnd?.(event);
+    onselectionend?.(event);
   }
 
   const onContextMenu = (event: MouseEvent) => {
diff --git a/packages/svelte/src/lib/container/Pane/types.ts b/packages/svelte/src/lib/container/Pane/types.ts
index 293ebe3e..8442834e 100644
--- a/packages/svelte/src/lib/container/Pane/types.ts
+++ b/packages/svelte/src/lib/container/Pane/types.ts
@@ -6,5 +6,7 @@ export type PaneProps<NodeType extends Node = Node, EdgeType extends Edge = Edge
   store: SvelteFlowStore<NodeType, EdgeType>;
   panOnDrag?: boolean | number[];
   selectionOnDrag?: boolean;
+  onselectionstart?: (event: PointerEvent) => void;
+  onselectionend?: (event: PointerEvent) => void;
   children: Snippet;
 } & PaneEvents;
diff --git a/packages/svelte/src/lib/container/SvelteFlow/SvelteFlow.svelte b/packages/svelte/src/lib/container/SvelteFlow/SvelteFlow.svelte
index 904c8ad1..9b039558 100644
--- a/packages/svelte/src/lib/container/SvelteFlow/SvelteFlow.svelte
+++ b/packages/svelte/src/lib/container/SvelteFlow/SvelteFlow.svelte
@@ -45,6 +45,8 @@
     onnodepointerleave,
     onselectionclick,
     onselectioncontextmenu,
+    onselectionstart,
+    onselectionend,
     onedgeclick,
     onedgecontextmenu,
     onedgepointerenter,
@@ -157,7 +159,15 @@
     {onmoveend}
     {oninit}
   >
-    <Pane bind:store {onpaneclick} {onpanecontextmenu} {panOnDrag} {selectionOnDrag}>
+    <Pane
+      bind:store
+      {onpaneclick}
+      {onpanecontextmenu}
+      {onselectionstart}
+      {onselectionend}
+      {panOnDrag}
+      {selectionOnDrag}
+    >
       <ViewportComponent bind:store>
         <div class="svelte-flow__viewport-back svelte-flow__container"></div>
         <EdgeRenderer
diff --git a/packages/svelte/src/lib/container/SvelteFlow/types.ts b/packages/svelte/src/lib/container/SvelteFlow/types.ts
index efe91567..d25d0afc 100644
--- a/packages/svelte/src/lib/container/SvelteFlow/types.ts
+++ b/packages/svelte/src/lib/container/SvelteFlow/types.ts
@@ -467,4 +467,8 @@ export type SvelteFlowProps<
     onselectiondrag?: OnSelectionDrag<NodeType>;
     /** This event handler gets called when a user stops dragging a selection box. */
     onselectiondragstop?: OnSelectionDrag<NodeType>;
+    /** This event handler gets called when the user starts to drag a selection box */
+    onselectionstart?: (event: PointerEvent) => void;
+    /** This event handler gets called when the user finishes dragging a selection box */
+    onselectionend?: (event: PointerEvent) => void;
   };