From ef475001229df3bc7c4469b3ad1c37b9e0dc0d3e Mon Sep 17 00:00:00 2001
From: moklick <info@moritzklack.com>
Date: Thu, 1 Jul 2021 15:30:29 +0200
Subject: [PATCH] feat(props): add preventScrolling prop closes #1077

---
 src/container/FlowRenderer/index.tsx |  2 ++
 src/container/GraphView/index.tsx    |  2 ++
 src/container/ReactFlow/index.tsx    |  3 +++
 src/container/ZoomPane/index.tsx     | 29 ++++++++++++++++++++++++----
 4 files changed, 32 insertions(+), 4 deletions(-)

diff --git a/src/container/FlowRenderer/index.tsx b/src/container/FlowRenderer/index.tsx
index 40fd16c7..bc976a87 100644
--- a/src/container/FlowRenderer/index.tsx
+++ b/src/container/FlowRenderer/index.tsx
@@ -49,6 +49,7 @@ const FlowRenderer = ({
   defaultPosition,
   defaultZoom,
   translateExtent,
+  preventScrolling,
   onSelectionDragStart,
   onSelectionDrag,
   onSelectionDragStop,
@@ -103,6 +104,7 @@ const FlowRenderer = ({
       defaultZoom={defaultZoom}
       translateExtent={translateExtent}
       zoomActivationKeyCode={zoomActivationKeyCode}
+      preventScrolling={preventScrolling}
     >
       {children}
       <UserSelection selectionKeyPressed={selectionKeyPressed} />
diff --git a/src/container/GraphView/index.tsx b/src/container/GraphView/index.tsx
index c3afca89..e002f366 100644
--- a/src/container/GraphView/index.tsx
+++ b/src/container/GraphView/index.tsx
@@ -73,6 +73,7 @@ const GraphView = ({
   defaultZoom,
   defaultPosition,
   translateExtent,
+  preventScrolling,
   nodeExtent,
   arrowHeadColor,
   markerEndId,
@@ -244,6 +245,7 @@ const GraphView = ({
       onSelectionDrag={onSelectionDrag}
       onSelectionDragStop={onSelectionDragStop}
       onSelectionContextMenu={onSelectionContextMenu}
+      preventScrolling={preventScrolling}
     >
       <NodeRenderer
         nodeTypes={nodeTypes}
diff --git a/src/container/ReactFlow/index.tsx b/src/container/ReactFlow/index.tsx
index def72496..66dbe234 100644
--- a/src/container/ReactFlow/index.tsx
+++ b/src/container/ReactFlow/index.tsx
@@ -107,6 +107,7 @@ export interface ReactFlowProps extends Omit<HTMLAttributes<HTMLDivElement>, 'on
   defaultZoom?: number;
   defaultPosition?: [number, number];
   translateExtent?: TranslateExtent;
+  preventScrolling?: boolean;
   nodeExtent?: NodeExtent;
   arrowHeadColor?: string;
   markerEndId?: string;
@@ -181,6 +182,7 @@ const ReactFlow = forwardRef<ReactFlowRefType, ReactFlowProps>(
       defaultZoom = 1,
       defaultPosition = [0, 0],
       translateExtent,
+      preventScrolling = true,
       nodeExtent,
       arrowHeadColor = '#b1b1b7',
       markerEndId,
@@ -258,6 +260,7 @@ const ReactFlow = forwardRef<ReactFlowRefType, ReactFlowProps>(
             defaultZoom={defaultZoom}
             defaultPosition={defaultPosition}
             translateExtent={translateExtent}
+            preventScrolling={preventScrolling}
             nodeExtent={nodeExtent}
             arrowHeadColor={arrowHeadColor}
             markerEndId={markerEndId}
diff --git a/src/container/ZoomPane/index.tsx b/src/container/ZoomPane/index.tsx
index e18801e0..9bf54ea4 100644
--- a/src/container/ZoomPane/index.tsx
+++ b/src/container/ZoomPane/index.tsx
@@ -25,6 +25,7 @@ interface ZoomPaneProps {
   onMoveStart?: (flowTransform?: FlowTransform) => void;
   onMoveEnd?: (flowTransform?: FlowTransform) => void;
   zoomActivationKeyCode?: KeyCode;
+  preventScrolling?: boolean;
   children: ReactNode;
 }
 
@@ -39,6 +40,8 @@ const eventToFlowTransform = (eventTransform: any): FlowTransform => ({
   zoom: eventTransform.k,
 });
 
+const hasNoWheelClass = (event: any) => event.target.closest('.nowheel');
+
 const ZoomPane = ({
   onMove,
   onMoveStart,
@@ -56,6 +59,7 @@ const ZoomPane = ({
   defaultZoom = 1,
   translateExtent,
   zoomActivationKeyCode,
+  preventScrolling = true,
   children,
 }: ZoomPaneProps) => {
   const zoomPane = useRef<HTMLDivElement>(null);
@@ -102,7 +106,7 @@ const ZoomPane = ({
       if (panOnScroll && !zoomActivationKeyPressed) {
         d3Selection
           .on('wheel', (event: any) => {
-            if (event.target.closest('.nowheel')) {
+            if (hasNoWheelClass(event)) {
               return false;
             }
             event.preventDefault();
@@ -134,10 +138,27 @@ const ZoomPane = ({
           })
           .on('wheel.zoom', null);
       } else if (typeof d3ZoomHandler !== 'undefined') {
-        d3Selection.on('wheel', null).on('wheel.zoom', d3ZoomHandler);
+        d3Selection
+          .on('wheel', (event: any) => {
+            if (!preventScrolling || hasNoWheelClass(event)) {
+              return null;
+            }
+
+            event.preventDefault();
+          })
+          .on('wheel.zoom', d3ZoomHandler);
       }
     }
-  }, [panOnScroll, panOnScrollMode, d3Selection, d3Zoom, d3ZoomHandler, zoomActivationKeyPressed, zoomOnPinch]);
+  }, [
+    panOnScroll,
+    panOnScrollMode,
+    d3Selection,
+    d3Zoom,
+    d3ZoomHandler,
+    zoomActivationKeyPressed,
+    zoomOnPinch,
+    preventScrolling,
+  ]);
 
   useEffect(() => {
     if (d3Zoom) {
@@ -211,7 +232,7 @@ const ZoomPane = ({
           return false;
         }
 
-        if (event.target.closest('.nowheel') && event.type === 'wheel') {
+        if (hasNoWheelClass(event) && event.type === 'wheel') {
           return false;
         }