From 3169589fbc49fdd2d5e8175811844e44c38433fa Mon Sep 17 00:00:00 2001
From: Jack Fishwick <jack@poly-ai.com>
Date: Mon, 26 Sep 2022 15:08:51 +0100
Subject: [PATCH] feat: make sure 'panOnDrag' overrides 'selectBoxOnDrag'.

---
 packages/core/src/components/UserSelection/index.tsx | 10 +++++-----
 packages/core/src/container/FlowRenderer/index.tsx   |  6 +++---
 2 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/packages/core/src/components/UserSelection/index.tsx b/packages/core/src/components/UserSelection/index.tsx
index d0aed2da..e6435cd4 100644
--- a/packages/core/src/components/UserSelection/index.tsx
+++ b/packages/core/src/components/UserSelection/index.tsx
@@ -16,7 +16,7 @@ type SelectionRect = Rect & {
 };
 
 type UserSelectionProps = {
-  selectionKeyPressed: boolean;
+  isSelectionMode: boolean;
   onClick?: (e: React.MouseEvent) => void;
   onContextMenu?: (e: React.MouseEvent) => void;
   onWheel?: (e: React.WheelEvent) => void;
@@ -35,7 +35,7 @@ const selector = (s: ReactFlowState) => ({
   elementsSelectable: s.elementsSelectable,
 });
 
-const UserSelection = memo(({ selectionKeyPressed, onClick, onContextMenu, onWheel, children }: UserSelectionProps) => {
+const UserSelection = memo(({ isSelectionMode, onClick, onContextMenu, onWheel, children }: UserSelectionProps) => {
   const store = useStoreApi();
   const prevSelectedNodesCount = useRef<number>(0);
   const prevSelectedEdgesCount = useRef<number>(0);
@@ -53,7 +53,7 @@ const UserSelection = memo(({ selectionKeyPressed, onClick, onContextMenu, onWhe
   };
 
   const onMouseDown = (event: React.MouseEvent): void => {
-    if (!elementsSelectable || !selectionKeyPressed || event.button !== 0) {
+    if (!elementsSelectable || !isSelectionMode || event.button !== 0) {
       return;
     }
 
@@ -73,7 +73,7 @@ const UserSelection = memo(({ selectionKeyPressed, onClick, onContextMenu, onWhe
   };
 
   const onMouseMove = (event: React.MouseEvent): void => {
-    if (!selectionKeyPressed || !containerBounds.current || !userSelectionRect) {
+    if (!isSelectionMode || !containerBounds.current || !userSelectionRect) {
       return;
     }
 
@@ -129,7 +129,7 @@ const UserSelection = memo(({ selectionKeyPressed, onClick, onContextMenu, onWhe
   };
 
   const eventHandlers =
-    elementsSelectable && (selectionKeyPressed || userSelectionActive)
+    elementsSelectable && (isSelectionMode || userSelectionActive)
       ? {
           onClick,
           onContextMenu,
diff --git a/packages/core/src/container/FlowRenderer/index.tsx b/packages/core/src/container/FlowRenderer/index.tsx
index 5adc4d48..372fe762 100644
--- a/packages/core/src/container/FlowRenderer/index.tsx
+++ b/packages/core/src/container/FlowRenderer/index.tsx
@@ -69,7 +69,7 @@ const FlowRenderer = ({
   const nodesSelectionActive = useStore(selector);
   const selectionKeyPressed = useKeyPress(selectionKeyCode);
 
-  const isSelectionMode = selectionKeyPressed || selectBoxOnDrag;
+  const isSelectionMode = selectionKeyPressed || (selectBoxOnDrag && !panOnDrag);
 
   useGlobalKeyHandler({ deleteKeyCode, multiSelectionKeyCode });
 
@@ -94,7 +94,7 @@ const FlowRenderer = ({
       panOnScrollSpeed={panOnScrollSpeed}
       panOnScrollMode={panOnScrollMode}
       zoomOnDoubleClick={zoomOnDoubleClick}
-      panOnDrag={panOnDrag && !isSelectionMode}
+      panOnDrag={panOnDrag}
       defaultViewport={defaultViewport}
       translateExtent={translateExtent}
       minZoom={minZoom}
@@ -111,7 +111,7 @@ const FlowRenderer = ({
         onMouseLeave={onPaneMouseLeave}
         onContextMenu={onContextMenu}
         onWheel={onWheel}
-        selectionKeyPressed={isSelectionMode}
+        isSelectionMode={isSelectionMode}
       >
         {children}
         {nodesSelectionActive && (