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

example/src/Interaction/index.js

@@ -17,6 +17,7 @@ const onElementClick = (event, element) => console.log('click', element);
 const onPaneClick = (event) => console.log('onPaneClick', event);
 const onPaneScroll = (event) => console.log('onPaneScroll', event);
 const onPaneContextMenu = (event) => console.log('onPaneContextMenu', event);
+const onMoveEnd = (event) => console.log('onMoveEnd', event);
 
 const InteractionFlow = () => {
   const [elements, setElements] = useState(initialElements);
@@ -27,6 +28,7 @@ const InteractionFlow = () => {
   const [isConnectable, setIsConnectable] = useState(false);
   const [zoomOnScroll, setZoomOnScroll] = useState(false);
   const [panOnScroll, setPanOnScroll] = useState(false);
+  const [panOnScrollMode, setPanOnScrollMode] = useState('free');
   const [zoomOnDoubleClick, setZoomOnDoubleClick] = useState(false);
   const [paneMoveable, setPaneMoveable] = useState(true);
   const [captureZoomClick, setCaptureZoomClick] = useState(false);
@@ -41,6 +43,7 @@ const InteractionFlow = () => {
       nodesDraggable={isDraggable}
       zoomOnScroll={zoomOnScroll}
       panOnScroll={panOnScroll}
+      panOnScrollMode={panOnScrollMode}
       zoomOnDoubleClick={zoomOnDoubleClick}
       onConnect={onConnect}
       onElementClick={captureElementClick ? onElementClick : undefined}
@@ -50,7 +53,7 @@ const InteractionFlow = () => {
       onPaneClick={captureZoomClick ? onPaneClick : undefined}
       onPaneScroll={captureZoomScroll ? onPaneScroll : undefined}
       onPaneContextMenu={captureZoomClick ? onPaneContextMenu : undefined}
-      onMoveEnd={(evt) => console.log('on move end', evt)}
+      onMoveEnd={onMoveEnd}
     >
       <MiniMap />
       <Controls />
@@ -116,6 +119,21 @@ const InteractionFlow = () => {
             />
           </label>
         </div>
+        <div>
+          <label htmlFor="panonscrollmode">
+            panOnScrollMode
+            <select
+              id="panonscrollmode"
+              value={panOnScrollMode}
+              onChange={(event) => setPanOnScrollMode(event.target.value)}
+              className="react-flow__panonscrollmode"
+            >
+              <option value="free">free</option>
+              <option value="horizontal">horizontal</option>
+              <option value="vertical">vertical</option>
+            </select>
+          </label>
+        </div>
         <div>
           <label htmlFor="zoomondbl">
             zoomOnDoubleClick

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 deltaX = panOnScrollMode === PanOnScrollMode.Vertical ? 0 : event.deltaX * deltaNormalize;
-            const deltaY = event.deltaY * 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',
+}