From 2c15662ef2a21fdc40a4eaff4acb79394f1db166 Mon Sep 17 00:00:00 2001 From: Prateek Kalra Date: Wed, 18 Oct 2023 18:37:27 +0530 Subject: [PATCH] =?UTF-8?q?=F0=9F=90=9B=20Fixed=20pinch=20zooming=20mouse?= =?UTF-8?q?=20issue=20(with=20ctrl=20key)=20(#940)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit **Fixed the drastic zoom increase decrease on ctrl + mouse scroll.** The issue was occuring due to the "scale" property in the pinch gesture. The scale was getting bigger values, leading to more zooming. What I did was, made sure that maximum scale difference between current and last value cannot be more than the scaling factor used in zoomin/zoomout buttons. That is. 0.2 Also, the pinch zoom would work as expected. /claim #567 ### Summary by CodeRabbit - Improvement: Enhanced zoom precision in the Graph component. This update allows for more accurate scaling when adjusting the view in the graph builder. The change ensures that the zoom level adjusts more precisely, providing a smoother and more controlled user experience when interacting with graphs. --- apps/builder/src/features/graph/components/Graph.tsx | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/apps/builder/src/features/graph/components/Graph.tsx b/apps/builder/src/features/graph/components/Graph.tsx index ab4b9b52b..4ce383550 100644 --- a/apps/builder/src/features/graph/components/Graph.tsx +++ b/apps/builder/src/features/graph/components/Graph.tsx @@ -171,7 +171,12 @@ export const Graph = ({ }) => { const { x: mouseX, y } = mousePosition ?? getCenterOfGraph() const mouseY = y - headerHeight - let newScale = scale ?? graphPosition.scale + (delta ?? 0) + let newScale = graphPosition.scale + (delta ?? 0) + if (scale) { + const scaleDiff = scale - graphPosition.scale + newScale += Math.min(zoomButtonsScaleBlock, Math.abs(scaleDiff)) * Math.sign(scaleDiff) + } + if ( (newScale >= maxScale && graphPosition.scale === maxScale) || (newScale <= minScale && graphPosition.scale === minScale)