fix: fix mouse zoom issues

frontend/src/canvas/CanvasContainer.js

@@ -66,42 +66,55 @@ const CanvasContainer = (props) => {
     };
   }, [isDragging, canvasX, canvasY]);
 
-  // Zoom in/out ( into the cursor position )
   const zoom = (e) => {
-    // Get the cursor position within the canvas ( note the canvas can go outside the viewport )
     const rect = props.canvasRef.current.getBoundingClientRect();
     let cursorX = e.clientX - rect.left;
     let cursorY = e.clientY - rect.top;
-    if (cursorX < 0) {
-      cursorX = 0;
-    } else if (cursorX > rect.width) {
-      cursorX = rect.width;
-    }
-    if (cursorY < 0) {
-      cursorY = 0;
-    } else if (cursorY > rect.height) {
-      cursorY = rect.height;
-    }
+    cursorX = Math.max(0, Math.min(cursorX, rect.width));
+    cursorY = Math.max(0, Math.min(cursorY, rect.height));
+
+    // Calculate the new scale
+    let newScale = canvasScale * (1 + e.deltaY * 0.01);
+    newScale = Math.max(minScale, Math.min(newScale, maxScale));
 
-    // Calculate new left and top position to keep cursor over the same rect pos  ition
-    let newScale = canvasScale * (1 + e.deltaY * -0.01);
-    if (newScale < minScale) {
-      newScale = minScale;
-    } else if (newScale > maxScale) {
-      newScale = maxScale;
-    }
-    const newWidth = width * newScale;
-    const newHeight = height * newScale;
     const oldCursorXRelative = cursorX / rect.width;
     const oldCursorYRelative = cursorY / rect.height;
-    const newCursorX = oldCursorXRelative * newWidth;
-    const newCursorY = oldCursorYRelative * newHeight;
-    const newPosX = canvasX - (newCursorX - cursorX);
-    const newPosY = canvasY - (newCursorY - cursorY);
-
-    setCanvasScale(newScale);
-    setCanvasX(newPosX);
-    setCanvasY(newPosY);
+
+    const applyScale = (currentScale) => {
+      const newWidth = width * currentScale;
+      const newHeight = height * currentScale;
+      const newCursorX = oldCursorXRelative * newWidth;
+      const newCursorY = oldCursorYRelative * newHeight;
+      const newPosX = canvasX - (newCursorX - cursorX);
+      const newPosY = canvasY - (newCursorY - cursorY);
+
+      setCanvasScale(currentScale);
+      setCanvasX(newPosX);
+      setCanvasY(newPosY);
+    };
+
+    // mouse zoom
+    if (Math.abs(e.deltaY) > 20) {
+      const interpolateScale = (startScale, endScale, duration) => {
+        const startTime = performance.now();
+        const step = (timestamp) => {
+          const progress = Math.min((timestamp - startTime) / duration, 1);
+          const currentScale = startScale + progress * (endScale - startScale);
+          applyScale(currentScale);
+
+          if (progress < 1) {
+            requestAnimationFrame(step);
+          }
+        };
+        requestAnimationFrame(step);
+      };
+
+      // Start the interpolation with a duration of 300ms
+      interpolateScale(canvasScale, newScale, 300);
+    } else {
+      // trackpad zoom
+      applyScale(newScale);
+    }
   };
 
   useEffect(() => {