From c26528041a2bcc9f56efe05ede3c78ae06e80c95 Mon Sep 17 00:00:00 2001
From: moklick <info@moritzklack.com>
Date: Fri, 28 Aug 2020 21:08:19 +0200
Subject: [PATCH 1/2] chore: release v5.6.0

---
 package-lock.json | 2 +-
 package.json      | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 0b819e20..346ec294 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,6 +1,6 @@
 {
   "name": "react-flow-renderer",
-  "version": "5.5.0",
+  "version": "5.6.0",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
diff --git a/package.json b/package.json
index df30dfd7..7291841c 100644
--- a/package.json
+++ b/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",

From 394c0ab53c1689cbb3c2b6dfe4743e1ab904c316 Mon Sep 17 00:00:00 2001
From: Emiel Wit <emiel.wit@bettyblocks.com>
Date: Wed, 2 Sep 2020 10:23:39 +0200
Subject: [PATCH 2/2] feat: add onPaneScroll event handler

  - add the possibility to listen to the onWheel event
  - add event handler to interaction demo
---
 example/src/Interaction/index.js  | 15 +++++++++++++++
 src/container/GraphView/index.tsx | 12 +++++++++++-
 src/container/ReactFlow/index.tsx |  5 ++++-
 3 files changed, 30 insertions(+), 2 deletions(-)

diff --git a/example/src/Interaction/index.js b/example/src/Interaction/index.js
index 81129be6..af7aafd9 100644
--- a/example/src/Interaction/index.js
+++ b/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
diff --git a/src/container/GraphView/index.tsx b/src/container/GraphView/index.tsx
index 14fbae1e..0baef218 100644
--- a/src/container/GraphView/index.tsx
+++ b/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>
diff --git a/src/container/ReactFlow/index.tsx b/src/container/ReactFlow/index.tsx
index ff72ddf8..b7365b91 100644
--- a/src/container/ReactFlow/index.tsx
+++ b/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}