From adae559d01a2215d1ddae2adf614e892039233eb Mon Sep 17 00:00:00 2001
From: trafficlunar <trafficlunar@proton.me>
Date: Fri, 13 Dec 2024 17:10:50 +0000
Subject: [PATCH] fix: reimplement zooming to mouse position

---
 src/components/Canvas.tsx | 21 ++++++++++-----------
 1 file changed, 10 insertions(+), 11 deletions(-)

diff --git a/src/components/Canvas.tsx b/src/components/Canvas.tsx
index c79c71e..0cdd634 100644
--- a/src/components/Canvas.tsx
+++ b/src/components/Canvas.tsx
@@ -23,6 +23,7 @@ function Canvas() {
 	const [coords, setCoords] = useState<Position>({ x: 0, y: 0 });
 	const [scale, setScale] = useState(1);
 
+	const [mousePosition, setMousePosition] = useState<Position>({ x: 0, y: 0 });
 	const [mouseCoords, setMouseCoords] = useState<Position>({ x: 0, y: 0 });
 	const [dragging, setDragging] = useState(false);
 
@@ -69,6 +70,10 @@ function Canvas() {
 			const mouseX = e.clientX - rect.left;
 			const mouseY = e.clientY - rect.top;
 
+			setMousePosition({
+				x: mouseX,
+				y: mouseY,
+			});
 			setMouseCoords({
 				x: Math.floor((mouseX - coords.x) / (16 * scale)),
 				y: Math.floor((mouseY - coords.y) / (16 * scale)),
@@ -90,22 +95,16 @@ function Canvas() {
 		(e: React.WheelEvent) => {
 			e.preventDefault();
 
-			// if (!stageContainerRef.current) return;
-
-			// const rect = stageContainerRef.current.getBoundingClientRect();
-			// const mouseX = e.clientX - rect.left;
-			// const mouseY = e.clientY - rect.top;
-
 			const scaleChange = e.deltaY > 0 ? -0.1 : 0.1;
 			const newScale = Math.min(Math.max(scale + scaleChange * scale, 0.25), 32);
 
 			setScale(newScale);
-			// setCoords({
-			// 	x: -(mouseX * scale) + e.clientX,
-			// 	y: -(mouseY * scale) + e.clientY,
-			// });
+			setCoords({
+				x: mousePosition.x - mouseCoords.x * 16 * newScale,
+				y: mousePosition.y - mouseCoords.y * 16 * newScale,
+			});
 		},
-		[scale]
+		[scale, mouseCoords, mousePosition]
 	);
 
 	useEffect(() => {