From b65cc1229de124b729b519e406b818f306a0127e Mon Sep 17 00:00:00 2001
From: Jack Fishwick <jack@poly-ai.com>
Date: Mon, 26 Sep 2022 16:07:45 +0100
Subject: [PATCH] feat: add option for right click movement.

---
 packages/core/src/container/FlowRenderer/index.tsx | 10 ++++++++--
 packages/core/src/container/ZoomPane/index.tsx     | 14 +++++++++++++-
 packages/core/src/types/component-props.ts         |  2 +-
 3 files changed, 22 insertions(+), 4 deletions(-)

diff --git a/packages/core/src/container/FlowRenderer/index.tsx b/packages/core/src/container/FlowRenderer/index.tsx
index 372fe762..8956bc0c 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 && !panOnDrag);
+  const isSelectionMode = selectionKeyPressed || (selectBoxOnDrag && panOnDrag !== true);
 
   useGlobalKeyHandler({ deleteKeyCode, multiSelectionKeyCode });
 
@@ -79,7 +79,13 @@ const FlowRenderer = ({
     store.setState({ nodesSelectionActive: false });
   };
 
-  const onContextMenu = onPaneContextMenu ? (event: MouseEvent) => onPaneContextMenu(event) : undefined;
+  const onContextMenu = (event: MouseEvent) => {
+    onPaneContextMenu?.(event);
+
+    if (panOnDrag === 'RightClick') {
+      event.preventDefault();
+    }
+  };
   const onWheel = onPaneScroll ? (event: WheelEvent) => onPaneScroll(event) : undefined;
 
   return (
diff --git a/packages/core/src/container/ZoomPane/index.tsx b/packages/core/src/container/ZoomPane/index.tsx
index c8050821..76547725 100644
--- a/packages/core/src/container/ZoomPane/index.tsx
+++ b/packages/core/src/container/ZoomPane/index.tsx
@@ -277,8 +277,20 @@ const ZoomPane = ({
           return false;
         }
 
+        // if the pane is only movable using right clicks, prevent all other clicks
+        if (
+          panOnDrag === 'RightClick' &&
+          (event.type === 'mousedown' || event.type === 'touchstart') &&
+          event.button !== 2
+        ) {
+          return false;
+        }
+
+        // We only allow right clicks if pan on drag is set to right click
+        const buttonAllowed = panOnDrag === 'RightClick' ? 1 !== event.button : !event.button || event.button <= 1;
+
         // default filter for d3-zoom
-        return (!event.ctrlKey || event.type === 'wheel') && (!event.button || event.button <= 1);
+        return (!event.ctrlKey || event.type === 'wheel') && buttonAllowed;
       });
     }
   }, [
diff --git a/packages/core/src/types/component-props.ts b/packages/core/src/types/component-props.ts
index 456122ce..9cf390a7 100644
--- a/packages/core/src/types/component-props.ts
+++ b/packages/core/src/types/component-props.ts
@@ -108,7 +108,7 @@ export type ReactFlowProps = HTMLAttributes<HTMLDivElement> & {
   initNodeOrigin?: NodeOrigin;
   elementsSelectable?: boolean;
   selectNodesOnDrag?: boolean;
-  panOnDrag?: boolean;
+  panOnDrag?: boolean | 'RightClick';
   minZoom?: number;
   maxZoom?: number;
   defaultViewport?: Viewport;