add onselectionstart onselectionend

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) => {

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;

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

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