feat: add option for right click movement.

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 (

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;
       });
     }
   }, [

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;