fix onSelectionEnd behavior

examples/react/src/examples/Figma/index.tsx

@@ -45,6 +45,8 @@ const BasicFlow = () => {
       onMove={onMove}
       onMoveEnd={onMoveEnd}
       onPaneClick={(e) => console.log('pane click', e)}
+      onSelectionStart={(e) => console.log('on selection start', e)}
+      onSelectionEnd={(e) => console.log('on selection end', e)}
     >
       <Background variant={BackgroundVariant.Cross} />
       <Controls />

examples/svelte/src/routes/examples/figma/+page.svelte

@@ -47,6 +47,8 @@
 	{onmove}
 	{onmoveend}
 	onpaneclick={(e) => console.log('on pane click', e)}
+	onselectionend={(e) => console.log('on selection end', e)}
+	onselectionstart={(e) => console.log('on selection start', e)}
 >
 	<Controls />
 	<Background variant={BackgroundVariant.Dots} />

packages/react/src/container/Pane/index.tsx

@@ -120,6 +120,7 @@ export function Pane({
   const onClickCapture = (event: ReactMouseEvent) => {
     if (selectionInProgress.current) {
       event.stopPropagation();
+      selectionInProgress.current = false;
     }
   };
 
@@ -202,6 +203,7 @@ export function Pane({
       if (distance <= paneClickDistance) {
         return;
       }
+      onSelectionStart?.(event);
     }
 
     selectionInProgress.current = true;
@@ -277,14 +279,9 @@ export function Pane({
       userSelectionRect: null,
       nodesSelectionActive: selectedNodeIds.current.size > 0,
     });
-    onSelectionEnd?.(event);
 
-    /*
+    if (selectionInProgress.current) {
-     * If the user kept holding the selectionKey during the selection,
+      onSelectionEnd?.(event);
-     * we need to reset the selectionInProgress, so the next click event is not prevented
-     */
-    if (selectionKeyPressed || selectionOnDrag) {
-      selectionInProgress.current = false;
     }
 
     selectionStarted.current = false;

packages/svelte/src/lib/container/Pane/Pane.svelte

@@ -147,6 +147,7 @@
       if (distance <= paneClickDistance) {
         return;
       }
+      onselectionstart?.(event);
     }
 
     selectionInProgress = true;
@@ -220,7 +221,9 @@
       store.selectionRectMode = 'nodes';
     }
 
-    onselectionend?.(event);
+    if (selectionInProgress) {
+      onselectionend?.(event);
+    }
 
     selectionStarted = false;
   }