From b88729fbf1ba15b7560a872d9052bb779b7b2fd6 Mon Sep 17 00:00:00 2001
From: moklick <info@moritzklack.com>
Date: Tue, 3 Nov 2020 15:58:47 +0100
Subject: [PATCH] feat(panOnScroll): add speed option

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

diff --git a/src/container/FlowRenderer/index.tsx b/src/container/FlowRenderer/index.tsx
index b6ad9a3c..726db470 100644
--- a/src/container/FlowRenderer/index.tsx
+++ b/src/container/FlowRenderer/index.tsx
@@ -38,6 +38,7 @@ const FlowRenderer = ({
   elementsSelectable,
   zoomOnScroll,
   panOnScroll,
+  panOnScrollSpeed,
   zoomOnDoubleClick,
   paneMoveable,
   defaultPosition,
@@ -85,6 +86,7 @@ const FlowRenderer = ({
       elementsSelectable={elementsSelectable}
       zoomOnScroll={zoomOnScroll}
       panOnScroll={panOnScroll}
+      panOnScrollSpeed={panOnScrollSpeed}
       zoomOnDoubleClick={zoomOnDoubleClick}
       paneMoveable={paneMoveable}
       defaultPosition={defaultPosition}
diff --git a/src/container/GraphView/index.tsx b/src/container/GraphView/index.tsx
index 07fb32d5..abd34865 100644
--- a/src/container/GraphView/index.tsx
+++ b/src/container/GraphView/index.tsx
@@ -71,6 +71,7 @@ export interface GraphViewProps {
   markerEndId?: string;
   zoomOnScroll?: boolean;
   panOnScroll?: boolean;
+  panOnScrollSpeed?: number;
   zoomOnDoubleClick?: boolean;
   paneMoveable?: boolean;
 }
@@ -120,6 +121,7 @@ const GraphView = ({
   markerEndId,
   zoomOnScroll,
   panOnScroll,
+  panOnScrollSpeed,
   zoomOnDoubleClick,
   paneMoveable,
   onPaneClick,
@@ -254,6 +256,7 @@ const GraphView = ({
       zoomOnScroll={zoomOnScroll}
       zoomOnDoubleClick={zoomOnDoubleClick}
       panOnScroll={panOnScroll}
+      panOnScrollSpeed={panOnScrollSpeed}
       paneMoveable={paneMoveable}
       defaultPosition={defaultPosition}
       defaultZoom={defaultZoom}
diff --git a/src/container/ReactFlow/index.tsx b/src/container/ReactFlow/index.tsx
index 2edbbd8c..c28c6639 100644
--- a/src/container/ReactFlow/index.tsx
+++ b/src/container/ReactFlow/index.tsx
@@ -99,6 +99,7 @@ export interface ReactFlowProps extends Omit<HTMLAttributes<HTMLDivElement>, 'on
   markerEndId?: string;
   zoomOnScroll?: boolean;
   panOnScroll?: boolean;
+  panOnScrollSpeed?: number;
   zoomOnDoubleClick?: boolean;
 }
 
@@ -149,6 +150,7 @@ const ReactFlow = ({
   markerEndId,
   zoomOnScroll = true,
   panOnScroll = false,
+  panOnScrollSpeed = 0.5,
   zoomOnDoubleClick = true,
   paneMoveable = true,
   onPaneClick,
@@ -206,6 +208,7 @@ const ReactFlow = ({
           zoomOnScroll={zoomOnScroll}
           zoomOnDoubleClick={zoomOnDoubleClick}
           panOnScroll={panOnScroll}
+          panOnScrollSpeed={panOnScrollSpeed}
           paneMoveable={paneMoveable}
           onPaneClick={onPaneClick}
           onPaneScroll={onPaneScroll}
diff --git a/src/container/ZoomPane/index.tsx b/src/container/ZoomPane/index.tsx
index df0efee2..8b7e5000 100644
--- a/src/container/ZoomPane/index.tsx
+++ b/src/container/ZoomPane/index.tsx
@@ -9,6 +9,7 @@ interface ZoomPaneProps {
   elementsSelectable?: boolean;
   zoomOnScroll?: boolean;
   panOnScroll?: boolean;
+  panOnScrollSpeed?: number;
   zoomOnDoubleClick?: boolean;
   paneMoveable?: boolean;
   defaultPosition?: [number, number];
@@ -37,6 +38,7 @@ const ZoomPane = ({
   onMoveEnd,
   zoomOnScroll = true,
   panOnScroll = false,
+  panOnScrollSpeed = 0.5,
   zoomOnDoubleClick = true,
   selectionKeyPressed,
   elementsSelectable,
@@ -66,19 +68,23 @@ const ZoomPane = ({
 
   useEffect(() => {
     if (d3Selection && d3Zoom) {
-      const pan = (evt: any) => {
-        d3Zoom.translateBy(d3Selection, evt.wheelDeltaX, evt.wheelDeltaY);
-      };
-
       if (panOnScroll) {
-        d3Selection.on('wheel', pan).on('wheel.zoom', null);
-      } else {
-        if (typeof d3ZoomHandler !== 'undefined') {
-          d3Selection.on('wheel', null).on('wheel.zoom', d3ZoomHandler);
-        }
+        d3Selection
+          .on('wheel', (event: any) => {
+            const currentZoom = d3Selection.property('__zoom').k || 1;
+
+            d3Zoom.translateBy(
+              d3Selection,
+              (event.wheelDeltaX / currentZoom) * panOnScrollSpeed,
+              (event.wheelDeltaY / currentZoom) * panOnScrollSpeed
+            );
+          })
+          .on('wheel.zoom', null);
+      } else if (typeof d3ZoomHandler !== 'undefined') {
+        d3Selection.on('wheel', null).on('wheel.zoom', d3ZoomHandler);
       }
     }
-  }, [panOnScroll, d3Selection, d3Zoom]);
+  }, [panOnScroll, d3Selection, d3Zoom, d3ZoomHandler]);
 
   useEffect(() => {
     if (d3Zoom) {