feat(panOnScroll): add mode options free, vertical and horizontal

src/container/FlowRenderer/index.tsx

@@ -41,6 +41,7 @@ const FlowRenderer = ({
   zoomOnScroll,
   panOnScroll,
   panOnScrollSpeed,
+  panOnScrollMode,
   zoomOnDoubleClick,
   paneMoveable,
   defaultPosition,
@@ -92,6 +93,7 @@ const FlowRenderer = ({
       zoomOnScroll={zoomOnScroll}
       panOnScroll={panOnScroll}
       panOnScrollSpeed={panOnScrollSpeed}
+      panOnScrollMode={panOnScrollMode}
       zoomOnDoubleClick={zoomOnDoubleClick}
       paneMoveable={paneMoveable}
       defaultPosition={defaultPosition}

src/container/GraphView/index.tsx

@@ -73,6 +73,7 @@ const GraphView = ({
   zoomOnScroll,
   panOnScroll,
   panOnScrollSpeed,
+  panOnScrollMode,
   zoomOnDoubleClick,
   paneMoveable,
   onPaneClick,
@@ -203,6 +204,7 @@ const GraphView = ({
       zoomOnDoubleClick={zoomOnDoubleClick}
       panOnScroll={panOnScroll}
       panOnScrollSpeed={panOnScrollSpeed}
+      panOnScrollMode={panOnScrollMode}
       paneMoveable={paneMoveable}
       defaultPosition={defaultPosition}
       defaultZoom={defaultZoom}

src/container/ReactFlow/index.tsx

@@ -34,6 +34,7 @@ import {
   OnConnectEndFunc,
   TranslateExtent,
   KeyCode,
+  PanOnScrollMode,
 } from '../../types';
 
 import '../../style.css';
@@ -103,6 +104,7 @@ export interface ReactFlowProps extends Omit<HTMLAttributes<HTMLDivElement>, 'on
   zoomOnScroll?: boolean;
   panOnScroll?: boolean;
   panOnScrollSpeed?: number;
+  panOnScrollMode?: PanOnScrollMode;
   zoomOnDoubleClick?: boolean;
 }
 
@@ -155,6 +157,7 @@ const ReactFlow = ({
   zoomOnScroll = true,
   panOnScroll = false,
   panOnScrollSpeed = 0.5,
+  panOnScrollMode = PanOnScrollMode.Free,
   zoomOnDoubleClick = true,
   paneMoveable = true,
   onPaneClick,
@@ -213,6 +216,7 @@ const ReactFlow = ({
           zoomOnDoubleClick={zoomOnDoubleClick}
           panOnScroll={panOnScroll}
           panOnScrollSpeed={panOnScrollSpeed}
+          panOnScrollMode={panOnScrollMode}
           paneMoveable={paneMoveable}
           onPaneClick={onPaneClick}
           onPaneScroll={onPaneScroll}

src/container/ZoomPane/index.tsx

@@ -6,7 +6,7 @@ import { clamp } from '../../utils';
 
 import useResizeHandler from '../../hooks/useResizeHandler';
 import { useStoreState, useStoreActions, useStore } from '../../store/hooks';
-import { FlowTransform, TranslateExtent } from '../../types';
+import { FlowTransform, TranslateExtent, PanOnScrollMode } from '../../types';
 
 interface ZoomPaneProps {
   selectionKeyPressed: boolean;
@@ -14,6 +14,7 @@ interface ZoomPaneProps {
   zoomOnScroll?: boolean;
   panOnScroll?: boolean;
   panOnScrollSpeed?: number;
+  panOnScrollMode?: PanOnScrollMode;
   zoomOnDoubleClick?: boolean;
   paneMoveable?: boolean;
   defaultPosition?: [number, number];
@@ -43,6 +44,7 @@ const ZoomPane = ({
   zoomOnScroll = true,
   panOnScroll = false,
   panOnScrollSpeed = 0.5,
+  panOnScrollMode = PanOnScrollMode.Free,
   zoomOnDoubleClick = true,
   selectionKeyPressed,
   elementsSelectable,
@@ -101,8 +103,8 @@ const ZoomPane = ({
             // increase scroll speed in firefox
             // firefox: deltaMode === 1; chrome: deltaMode === 0
             const deltaNormalize = event.deltaMode === 1 ? 20 : 1;
-            const deltaX = event.deltaX * deltaNormalize;
-            const deltaY = event.deltaY * deltaNormalize;
+            const deltaX = panOnScrollMode === PanOnScrollMode.Vertical ? 0 : event.deltaX * deltaNormalize;
+            const deltaY = panOnScrollMode === PanOnScrollMode.Horizontal ? 0 : event.deltaY * deltaNormalize;
 
             d3Zoom.translateBy(
               d3Selection,
@@ -115,7 +117,7 @@ const ZoomPane = ({
         d3Selection.on('wheel', null).on('wheel.zoom', d3ZoomHandler);
       }
     }
-  }, [panOnScroll, d3Selection, d3Zoom, d3ZoomHandler]);
+  }, [panOnScroll, panOnScrollMode, d3Selection, d3Zoom, d3ZoomHandler]);
 
   useEffect(() => {
     if (d3Zoom) {

src/types/index.ts

@@ -331,3 +331,9 @@ export type FlowTransform = {
 export type TranslateExtent = [[number, number], [number, number]];
 
 export type KeyCode = number | string;
+
+export enum PanOnScrollMode {
+  Free = 'free',
+  Vertical = 'vertical',
+  Horizontal = 'horizontal',
+}