From 9b8486b39f6e9a478700e1e87a328562c0c41103 Mon Sep 17 00:00:00 2001
From: moklick <info@moritzklack.com>
Date: Mon, 15 Jul 2024 14:38:46 +0200
Subject: [PATCH] fix(selection): dont trigger onSelectionEnd on click

---
 packages/react/src/container/FlowRenderer/index.tsx |  4 +++-
 packages/react/src/container/Pane/index.tsx         | 11 +++++++++--
 2 files changed, 12 insertions(+), 3 deletions(-)

diff --git a/packages/react/src/container/FlowRenderer/index.tsx b/packages/react/src/container/FlowRenderer/index.tsx
index 34c0be13..727970e3 100644
--- a/packages/react/src/container/FlowRenderer/index.tsx
+++ b/packages/react/src/container/FlowRenderer/index.tsx
@@ -77,7 +77,8 @@ function FlowRendererComponent<NodeType extends Node = Node>({
 
   const panOnDrag = panActivationKeyPressed || _panOnDrag;
   const panOnScroll = panActivationKeyPressed || _panOnScroll;
-  const isSelecting = selectionKeyPressed || userSelectionActive || (selectionOnDrag && panOnDrag !== true);
+  const _selectionOnDrag = selectionOnDrag && panOnDrag !== true;
+  const isSelecting = selectionKeyPressed || userSelectionActive || _selectionOnDrag;
 
   useGlobalKeyHandler({ deleteKeyCode, multiSelectionKeyCode });
 
@@ -117,6 +118,7 @@ function FlowRendererComponent<NodeType extends Node = Node>({
         isSelecting={!!isSelecting}
         selectionMode={selectionMode}
         selectionKeyPressed={selectionKeyPressed}
+        selectionOnDrag={_selectionOnDrag}
       >
         {children}
         {nodesSelectionActive && (
diff --git a/packages/react/src/container/Pane/index.tsx b/packages/react/src/container/Pane/index.tsx
index a0bd5ba3..3fd1d079 100644
--- a/packages/react/src/container/Pane/index.tsx
+++ b/packages/react/src/container/Pane/index.tsx
@@ -35,6 +35,7 @@ type PaneProps = {
     | 'onPaneMouseEnter'
     | 'onPaneMouseMove'
     | 'onPaneMouseLeave'
+    | 'selectionOnDrag'
   >
 >;
 
@@ -61,6 +62,7 @@ export function Pane({
   selectionKeyPressed,
   selectionMode = SelectionMode.Full,
   panOnDrag,
+  selectionOnDrag,
   onSelectionStart,
   onSelectionEnd,
   onPaneClick,
@@ -83,6 +85,7 @@ export function Pane({
 
   // Used to prevent click events when the user lets go of the selectionKey during a selection
   const selectionInProgress = useRef<boolean>(false);
+  const selectionStarted = useRef<boolean>(false);
 
   const resetUserSelection = () => {
     store.setState({ userSelectionActive: false, userSelectionRect: null });
@@ -129,6 +132,8 @@ export function Pane({
       return;
     }
 
+    selectionStarted.current = true;
+    selectionInProgress.current = false;
     edgeIdLookup.current = new Map();
 
     for (const [id, edge] of edgeLookup) {
@@ -219,7 +224,7 @@ export function Pane({
   };
 
   const onPointerUp = (event: ReactPointerEvent) => {
-    if (event.button !== 0) {
+    if (event.button !== 0 || !selectionStarted.current) {
       return;
     }
 
@@ -240,9 +245,11 @@ export function Pane({
 
     // If the user kept holding the selectionKey during the selection,
     // we need to reset the selectionInProgress, so the next click event is not prevented
-    if (selectionKeyPressed) {
+    if (selectionKeyPressed || selectionOnDrag) {
       selectionInProgress.current = false;
     }
+
+    selectionStarted.current = false;
   };
 
   return (