From 24ed39be557d08e5b37372c6891edf490c8d8274 Mon Sep 17 00:00:00 2001
From: Suraj Shetty <surajshetty3416@gmail.com>
Date: Thu, 24 Oct 2024 11:53:19 +0530
Subject: [PATCH] fix: Control sensitivity of the zoom while using mouse

resolves: https://github.com/frappe/builder/issues/225
---
 frontend/src/utils/panAndZoom.ts | 17 +++++++++++++++--
 1 file changed, 15 insertions(+), 2 deletions(-)

diff --git a/frontend/src/utils/panAndZoom.ts b/frontend/src/utils/panAndZoom.ts
index d2416214..8e3b6d43 100644
--- a/frontend/src/utils/panAndZoom.ts
+++ b/frontend/src/utils/panAndZoom.ts
@@ -34,9 +34,22 @@ function setPanAndZoom(
 				};
 				panAndZoomAreaElement.addEventListener("mousemove", clearPinchPoint, { once: true });
 			}
-			// Multiplying with 0.01 to make the zooming less sensitive
+
+			let sensitivity = 0.008;
+			function tooMuchScroll() {
+				if (e.deltaY > 30 || e.deltaY < -30) {
+					return true;
+				}
+			}
+			if (tooMuchScroll()) {
+				// If the user scrolls too much, reduce the sensitivity
+				// this mostly happens when the user uses mouse wheel to scroll
+				// probably not the best way to handle this, but works for now
+				sensitivity = 0.001;
+			}
+
 			// Multiplying with scale to make the zooming feel consistent
-			let scale = props.scale - e.deltaY * 0.008 * props.scale;
+			let scale = props.scale - e.deltaY * sensitivity * props.scale;
 			scale = Math.min(Math.max(scale, zoomLimits.min), zoomLimits.max);
 			props.scale = scale;
 			nextTick(() => {