Merge branch 'EmielW-feature/add-onpagescroll-event-handler' into develop

example/src/Interaction/index.js

@@ -15,6 +15,7 @@ const onNodeDragStart = (event, node) => console.log('drag start', node);
 const onNodeDragStop = (event, node) => console.log('drag stop', node);
 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 InteractionFlow = () => {
@@ -28,6 +29,7 @@ const InteractionFlow = () => {
   const [zoomOnDoubleClick, setZoomOnDoubleClick] = useState(false);
   const [paneMoveable, setPaneMoveable] = useState(true);
   const [captureZoomClick, setCaptureZoomClick] = useState(false);
+  const [captureZoomScroll, setCaptureZoomScroll] = useState(false);
   const [captureElementClick, setCaptureElementClick] = useState(false);
 
   return (
@@ -44,6 +46,7 @@ const InteractionFlow = () => {
       onNodeDragStop={onNodeDragStop}
       paneMoveable={paneMoveable}
       onPaneClick={captureZoomClick ? onPaneClick : undefined}
+      onPaneScroll={captureZoomScroll ? onPaneScroll : undefined}
       onPaneContextMenu={captureZoomClick ? onPaneContextMenu : undefined}
     >
       <MiniMap />
@@ -134,6 +137,18 @@ const InteractionFlow = () => {
             />
           </label>
         </div>
+        <div>
+          <label htmlFor="capturezoompanescroll">
+            capture zoom pane scroll
+            <input
+              id="capturezoompanescroll"
+              type="checkbox"
+              checked={captureZoomScroll}
+              onChange={(event) => setCaptureZoomScroll(event.target.checked)}
+              className="react-flow__capturezoompanescroll"
+            />
+          </label>
+        </div>
         <div>
           <label htmlFor="captureelementclick">
             capture element click

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "react-flow-renderer",
-  "version": "5.5.0",
+  "version": "5.6.0",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-flow-renderer",
-  "version": "5.5.0",
+  "version": "5.6.0",
   "main": "dist/ReactFlow.js",
   "module": "dist/ReactFlow.esm.js",
   "types": "dist/index.d.ts",

src/container/GraphView/index.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useRef, useCallback, memo, CSSProperties, MouseEvent } from 'react';
+import React, { useEffect, useRef, useCallback, memo, CSSProperties, MouseEvent, WheelEvent } from 'react';
 
 import { useStoreState, useStoreActions, useStore } from '../../store/hooks';
 import NodeRenderer from '../NodeRenderer';
@@ -44,6 +44,7 @@ export interface GraphViewProps {
   onMove?: (flowTransform?: FlowTransform) => void;
   onMoveStart?: (flowTransform?: FlowTransform) => void;
   onMoveEnd?: (flowTransform?: FlowTransform) => void;
+  onPaneScroll?: (event?: WheelEvent) => void;
   onPaneClick?: (event: MouseEvent) => void;
   onPaneContextMenu?: (event: MouseEvent) => void;
   onSelectionDragStart?: (event: MouseEvent, nodes: Node[]) => void;
@@ -117,6 +118,7 @@ const GraphView = ({
   zoomOnDoubleClick,
   paneMoveable,
   onPaneClick,
+  onPaneScroll,
   onPaneContextMenu,
 }: GraphViewProps) => {
   const isInitialised = useRef<boolean>(false);
@@ -155,6 +157,13 @@ const GraphView = ({
     [onPaneContextMenu]
   );
 
+  const onZoomPaneScroll = useCallback(
+    (event: WheelEvent) => {
+      onPaneScroll?.(event);
+    },
+    [onPaneScroll]
+  );
+
   useResizeHandler(rendererNode);
   useGlobalKeyHandler({ onElementsRemove, deleteKeyCode });
   useElementUpdater(elements);
@@ -279,6 +288,7 @@ const GraphView = ({
         className="react-flow__zoompane"
         onClick={onZoomPaneClick}
         onContextMenu={onZoomPaneContextMenu}
+        onWheel={onZoomPaneScroll}
         ref={zoomPane}
       />
     </div>

src/container/ReactFlow/index.tsx

@@ -1,4 +1,4 @@
-import React, { useMemo, CSSProperties, HTMLAttributes, MouseEvent } from 'react';
+import React, { useMemo, CSSProperties, HTMLAttributes, MouseEvent, WheelEvent } from 'react';
 import cc from 'classcat';
 
 const nodeEnv: string = process.env.NODE_ENV as string;
@@ -56,6 +56,7 @@ export interface ReactFlowProps extends Omit<HTMLAttributes<HTMLDivElement>, 'on
   onSelectionDragStart?: (event: MouseEvent, nodes: Node[]) => void;
   onSelectionDrag?: (event: MouseEvent, nodes: Node[]) => void;
   onSelectionDragStop?: (event: MouseEvent, nodes: Node[]) => void;
+  onPaneScroll?: (event?: WheelEvent) => void;
   onPaneClick?: (event: MouseEvent) => void;
   onPaneContextMenu?: (event: MouseEvent) => void;
   nodeTypes: NodeTypesType;
@@ -130,6 +131,7 @@ const ReactFlow = ({
   zoomOnDoubleClick,
   paneMoveable,
   onPaneClick,
+  onPaneScroll,
   onPaneContextMenu,
 }: ReactFlowProps) => {
   const nodeTypesParsed = useMemo(() => createNodeTypes(nodeTypes), []);
@@ -180,6 +182,7 @@ const ReactFlow = ({
           zoomOnDoubleClick={zoomOnDoubleClick}
           paneMoveable={paneMoveable}
           onPaneClick={onPaneClick}
+          onPaneScroll={onPaneScroll}
           onPaneContextMenu={onPaneContextMenu}
           onSelectionDragStart={onSelectionDragStart}
           onSelectionDrag={onSelectionDrag}