From 55c81362bb1c60d6da9f4123dde8668d8bd90b86 Mon Sep 17 00:00:00 2001
From: moklick <info@moritzklack.com>
Date: Wed, 24 Aug 2022 14:35:38 +0200
Subject: [PATCH] refactor(zomm): simplify

---
 .../core/src/container/ZoomPane/index.tsx     | 69 +++++++++----------
 1 file changed, 33 insertions(+), 36 deletions(-)

diff --git a/packages/core/src/container/ZoomPane/index.tsx b/packages/core/src/container/ZoomPane/index.tsx
index da431997..f5399430 100644
--- a/packages/core/src/container/ZoomPane/index.tsx
+++ b/packages/core/src/container/ZoomPane/index.tsx
@@ -92,49 +92,46 @@ const ZoomPane = ({
   useEffect(() => {
     if (d3Selection && d3Zoom) {
       if (panOnScroll && !zoomActivationKeyPressed) {
-        d3Selection
-          .on('wheel', (event: any) => {
-            if (isWrappedWithClass(event, noWheelClassName)) {
-              return false;
-            }
-            event.preventDefault();
-            event.stopImmediatePropagation();
+        d3Selection.on('wheel.zoom', (event: any) => {
+          if (isWrappedWithClass(event, noWheelClassName)) {
+            return false;
+          }
+          event.preventDefault();
+          event.stopImmediatePropagation();
 
-            const currentZoom = d3Selection.property('__zoom').k || 1;
+          const currentZoom = d3Selection.property('__zoom').k || 1;
 
-            if (event.ctrlKey && zoomOnPinch) {
-              const point = pointer(event);
-              // taken from https://github.com/d3/d3-zoom/blob/master/src/zoom.js
-              const pinchDelta = -event.deltaY * (event.deltaMode === 1 ? 0.05 : event.deltaMode ? 1 : 0.002) * 10;
-              const zoom = currentZoom * Math.pow(2, pinchDelta);
-              d3Zoom.scaleTo(d3Selection, zoom, point);
+          if (event.ctrlKey && zoomOnPinch) {
+            const point = pointer(event);
+            // taken from https://github.com/d3/d3-zoom/blob/master/src/zoom.js
+            const pinchDelta = -event.deltaY * (event.deltaMode === 1 ? 0.05 : event.deltaMode ? 1 : 0.002) * 10;
+            const zoom = currentZoom * Math.pow(2, pinchDelta);
+            d3Zoom.scaleTo(d3Selection, zoom, point);
 
-              return;
-            }
+            return;
+          }
 
-            // increase scroll speed in firefox
-            // firefox: deltaMode === 1; chrome: deltaMode === 0
-            const deltaNormalize = event.deltaMode === 1 ? 20 : 1;
-            const deltaX = panOnScrollMode === PanOnScrollMode.Vertical ? 0 : event.deltaX * deltaNormalize;
-            const deltaY = panOnScrollMode === PanOnScrollMode.Horizontal ? 0 : event.deltaY * deltaNormalize;
+          // increase scroll speed in firefox
+          // firefox: deltaMode === 1; chrome: deltaMode === 0
+          const deltaNormalize = event.deltaMode === 1 ? 20 : 1;
+          const deltaX = panOnScrollMode === PanOnScrollMode.Vertical ? 0 : event.deltaX * deltaNormalize;
+          const deltaY = panOnScrollMode === PanOnScrollMode.Horizontal ? 0 : event.deltaY * deltaNormalize;
 
-            d3Zoom.translateBy(
-              d3Selection,
-              -(deltaX / currentZoom) * panOnScrollSpeed,
-              -(deltaY / currentZoom) * panOnScrollSpeed
-            );
-          })
-          .on('wheel.zoom', null);
+          d3Zoom.translateBy(
+            d3Selection,
+            -(deltaX / currentZoom) * panOnScrollSpeed,
+            -(deltaY / currentZoom) * panOnScrollSpeed
+          );
+        });
       } else if (typeof d3ZoomHandler !== 'undefined') {
-        d3Selection
-          .on('wheel', (event: any) => {
-            if (!preventScrolling || isWrappedWithClass(event, noWheelClassName)) {
-              return null;
-            }
+        d3Selection.on('wheel.zoom', function (event: any, d: any) {
+          if (!preventScrolling || isWrappedWithClass(event, noWheelClassName)) {
+            return null;
+          }
 
-            event.preventDefault();
-          })
-          .on('wheel.zoom', d3ZoomHandler);
+          event.preventDefault();
+          d3ZoomHandler.call(this, event, d);
+        });
       }
     }
   }, [