Add zoom on mousewheel

src/components/canvas.jsx

@@ -1,4 +1,4 @@
-import React, { useContext, useRef, useState } from "react";
+import React, { useContext, useRef, useState, useEffect } from "react";
 import { useDrop } from "react-dnd";
 import Table from "./table";
 import {
@@ -51,6 +51,7 @@ export default function Canvas(props) {
     mouseY: 0,
   });
   const [cursor, setCursor] = useState("default");
+  const [zoom, setZoom] = useState(1);
 
   const canvas = useRef(null);
 
@@ -347,6 +348,26 @@ export default function Canvas(props) {
     [tables, areas]
   );
 
+  const handleMouseWheel = (e) => {
+    // const zoomDirection = e.deltaY > 0 ? "out" : "in";
+    e.preventDefault();
+    if (e.deltaY <= 0 ) {
+      setZoom((prev) => prev * 1.1);
+    } else {
+      setZoom((prev) => prev / 1.1);
+    }
+  };
+
+  useEffect(() => {
+    const canvasElement = canvas.current;
+    canvasElement.addEventListener("wheel", handleMouseWheel, {
+      passive: false,
+    });
+    return () => {
+      canvasElement.removeEventListener("wheel", handleMouseWheel);
+    };
+  }, []);
+
   return (
     <div ref={drop} className="flex-grow h-full" id="canvas">
       <div ref={canvas} className="w-full h-full">
@@ -385,11 +406,14 @@ export default function Canvas(props) {
             height="100%"
             fill="url(#pattern-circles)"
           ></rect>
+          <g style={{ transform: `scale(${zoom})`, transformOrigin: "0 0" }}>
             {areas.map((a) => (
               <Area
                 key={a.id}
                 areaData={a}
-              onMouseDown={(e) => handleMouseDownRect(e, a.id, ObjectType.AREA)}
+                onMouseDown={(e) =>
+                  handleMouseDownRect(e, a.id, ObjectType.AREA)
+                }
                 setResize={setAreaResize}
                 initCoords={initCoords}
                 setInitCoords={setInitCoords}
@@ -423,9 +447,12 @@ export default function Canvas(props) {
               <Note
                 key={n.id}
                 data={n}
-              onMouseDown={(e) => handleMouseDownRect(e, n.id, ObjectType.NOTE)}
+                onMouseDown={(e) =>
+                  handleMouseDownRect(e, n.id, ObjectType.NOTE)
+                }
               ></Note>
             ))}
+          </g>
         </svg>
       </div>
     </div>