From 752e3c318ea6455a527761d3dd3881483a6a6269 Mon Sep 17 00:00:00 2001
From: karishmas6 <carishmashukla28@gmail.com>
Date: Fri, 18 Oct 2024 16:48:26 +0530
Subject: [PATCH] feat: dont use getMappedCoordinates

---
 src/components/atoms/canvas.tsx | 35 +++++++++++++++++----------------
 1 file changed, 18 insertions(+), 17 deletions(-)

diff --git a/src/components/atoms/canvas.tsx b/src/components/atoms/canvas.tsx
index 654c782a..2dbbdff2 100644
--- a/src/components/atoms/canvas.tsx
+++ b/src/components/atoms/canvas.tsx
@@ -45,34 +45,35 @@ const Canvas = ({ width, height, onCreateRef }: CanvasProps) => {
     }, [getText, getList]);
 
     const onMouseEvent = useCallback((event: MouseEvent) => {
-        if (socket) {
-            const coordinates = {
-                x: event.clientX,
-                y: event.clientY,
-            }
+        if (socket && canvasRef.current) {
+            // Get the canvas bounding rectangle
+            const rect = canvasRef.current.getBoundingClientRect();
+            const clickCoordinates = {
+                x: event.clientX - rect.left, // Use relative x coordinate
+                y: event.clientY - rect.top, // Use relative y coordinate
+            };
+
             switch (event.type) {
                 case 'mousedown':
-                    const clickCoordinates = getMappedCoordinates(event, canvasRef.current, width, height);
                     if (getTextRef.current === true) {
                         console.log('Capturing Text...');
-                    } else if (getListRef.current === true){
+                    } else if (getListRef.current === true) {
                         console.log('Capturing List...');
-                    }else {
+                    } else {
                         socket.emit('input:mousedown', clickCoordinates);
                     }
                     notifyLastAction('click');
                     break;
                 case 'mousemove':
-                    const coordinates = getMappedCoordinates(event, canvasRef.current, width, height);
-                    if (lastMousePosition.current.x !== coordinates.x ||
-                        lastMousePosition.current.y !== coordinates.y) {
+                    if (lastMousePosition.current.x !== clickCoordinates.x ||
+                        lastMousePosition.current.y !== clickCoordinates.y) {
                         lastMousePosition.current = {
-                            x: coordinates.x,
-                            y: coordinates.y,
+                            x: clickCoordinates.x,
+                            y: clickCoordinates.y,
                         };
                         socket.emit('input:mousemove', {
-                            x: coordinates.x,
-                            y: coordinates.y,
+                            x: clickCoordinates.x,
+                            y: clickCoordinates.y,
                         });
                         notifyLastAction('move');
                     }
@@ -140,8 +141,8 @@ const Canvas = ({ width, height, onCreateRef }: CanvasProps) => {
         <canvas
             tabIndex={0}
             ref={canvasRef}
-            height={720}
-            width={1280}
+            height={500}
+            width={900}
         />
     );