fix: revert to !conditional mousedown emit

src/components/atoms/canvas.tsx

@@ -1,57 +1,31 @@
-import React, { useCallback, useEffect, useRef, useState } from 'react';
+import React, { useCallback, useEffect, useRef } from 'react';
 import { useSocketStore } from '../../context/socket';
 import { getMappedCoordinates } from "../../helpers/inputHelpers";
 import { useGlobalInfoStore } from "../../context/globalInfo";
-import { GenericModal } from '../atoms/GenericModal';
-import { Box, Button, Typography } from '@mui/material';
 
 interface CreateRefCallback {
     (ref: React.RefObject<HTMLCanvasElement>): void;
 }
-/**
- * Interface for mouse's x,y coordinates
- */
+
 interface CanvasProps {
     width: number;
     height: number;
     onCreateRef: CreateRefCallback;
-    highlighterData: { rect: DOMRect, selector: string } | null;
 }
 
+/**
+ * Interface for mouse's x,y coordinates
+ */
 export interface Coordinates {
     x: number;
     y: number;
-}
-
-const ConfirmationBox = ({ selector, onYes, onNo }: { selector: string; onYes: () => void; onNo: () => void }) => {
-    return (
-        <Box sx={{ textAlign: 'center' }}>
-            <Typography variant="h6" component="h2" gutterBottom>
-                Confirmation
-            </Typography>
-            <Typography variant="body1" gutterBottom>
-                Do you want to interact with the element: {selector}?
-            </Typography>
-            <Box sx={{ mt: 2, display: 'flex', justifyContent: 'center', gap: 2 }}>
-                <Button variant="contained" color="primary" onClick={onYes}>
-                    Yes
-                </Button>
-                <Button variant="contained" color="secondary" onClick={onNo}>
-                    No
-                </Button>
-            </Box>
-        </Box>
-    );
 };
 
-const Canvas = ({ width, height, onCreateRef, highlighterData }: CanvasProps) => {
+const Canvas = ({ width, height, onCreateRef }: CanvasProps) => {
+
     const canvasRef = useRef<HTMLCanvasElement>(null);
     const { socket } = useSocketStore();
     const { setLastAction, lastAction } = useGlobalInfoStore();
-    const [showConfirmation, setShowConfirmation] = useState(false);
-    const [pendingClick, setPendingClick] = useState<Coordinates | null>(null);
-
-    const lastMousePosition = useRef<Coordinates>({ x: 0, y: 0 });
 
     const notifyLastAction = (action: string) => {
         if (lastAction !== action) {
@@ -59,12 +33,23 @@ const Canvas = ({ width, height, onCreateRef, highlighterData }: CanvasProps) =>
         }
     };
 
-    const onMouseEvent = useCallback((event: MouseEvent) => {
-        if (socket && canvasRef.current) {
-            const coordinates = getMappedCoordinates(event, canvasRef.current, width, height);
+    const lastMousePosition = useRef<Coordinates>({ x: 0, y: 0 });
+    //const lastWheelPosition = useRef<ScrollDeltas>({ deltaX: 0, deltaY: 0 });
 
+    const onMouseEvent = useCallback((event: MouseEvent) => {
+        if (socket) {
+            const coordinates = {
+                x: event.clientX,
+                y: event.clientY,
+            }
             switch (event.type) {
+                case 'mousedown':
+                    const clickCoordinates = getMappedCoordinates(event, canvasRef.current, width, height);
+                    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) {
                         lastMousePosition.current = {
@@ -78,26 +63,6 @@ const Canvas = ({ width, height, onCreateRef, highlighterData }: CanvasProps) =>
                         notifyLastAction('move');
                     }
                     break;
-                case 'mousedown':
-                    if (highlighterData) {
-                        const highlightRect = highlighterData.rect;
-                        if (
-                            coordinates.x >= highlightRect.left &&
-                            coordinates.x <= highlightRect.right &&
-                            coordinates.y >= highlightRect.top &&
-                            coordinates.y <= highlightRect.bottom
-                        ) {
-                            setPendingClick(coordinates);
-                            setShowConfirmation(true);
-                        } else {
-                            socket.emit('input:mousedown', coordinates);
-                            notifyLastAction('click');
-                        }
-                    } else {
-                        socket.emit('input:mousedown', coordinates);
-                        notifyLastAction('click');
-                    }
-                    break;
                 case 'wheel':
                     const wheelEvent = event as WheelEvent;
                     const deltas = {
@@ -107,9 +72,12 @@ const Canvas = ({ width, height, onCreateRef, highlighterData }: CanvasProps) =>
                     socket.emit('input:wheel', deltas);
                     notifyLastAction('scroll');
                     break;
+                default:
+                    console.log('Default mouseEvent registered');
+                    return;
             }
         }
-    }, [socket, width, height, setLastAction, highlighterData]);
+    }, [socket]);
 
     const onKeyboardEvent = useCallback((event: KeyboardEvent) => {
         if (socket) {
@@ -121,18 +89,13 @@ const Canvas = ({ width, height, onCreateRef, highlighterData }: CanvasProps) =>
                 case 'keyup':
                     socket.emit('input:keyup', event.key);
                     break;
+                default:
+                    console.log('Default keyEvent registered');
+                    return;
             }
         }
-    }, [socket, setLastAction]);
+    }, [socket]);
 
-    const handleConfirmation = (confirmed: boolean) => {
-        if (confirmed && pendingClick && socket) {
-            socket.emit('input:mousedown', pendingClick);
-            notifyLastAction('click');
-        }
-        setShowConfirmation(false);
-        setPendingClick(null);
-    };
 
     useEffect(() => {
         if (canvasRef.current) {
@@ -151,31 +114,24 @@ const Canvas = ({ width, height, onCreateRef, highlighterData }: CanvasProps) =>
                     canvasRef.current.removeEventListener('keydown', onKeyboardEvent);
                     canvasRef.current.removeEventListener('keyup', onKeyboardEvent);
                 }
+
             };
+        } else {
+            console.log('Canvas not initialized');
         }
-    }, [onMouseEvent, onKeyboardEvent, onCreateRef]);
+
+    }, [onMouseEvent]);
 
     return (
-        <>
-            <GenericModal
-                isOpen={showConfirmation}
-                onClose={() => setShowConfirmation(false)}
-                canBeClosed={false}
-            >
-                <ConfirmationBox
-                    selector={highlighterData?.selector || ''}
-                    onYes={() => handleConfirmation(true)}
-                    onNo={() => handleConfirmation(false)}
-                />
-            </GenericModal>
-            <canvas
-                tabIndex={0}
-                ref={canvasRef}
-                height={720}
-                width={1280}
-            />
-        </>
+        <canvas
+            tabIndex={0}
+            ref={canvasRef}
+            height={720}
+            width={1280}
+        />
     );
+
 };
 
+
 export default Canvas;

src/components/organisms/BrowserWindow.tsx

@@ -3,18 +3,52 @@ import { useSocketStore } from '../../context/socket';
 import Canvas from "../atoms/canvas";
 import { useBrowserDimensionsStore } from "../../context/browserDimensions";
 import { Highlighter } from "../atoms/Highlighter";
+import { GenericModal } from '../atoms/GenericModal';
+import { Button, Typography, Box } from '@mui/material';
+
+interface ConfirmationBoxProps {
+    selector: string;
+    onYes: () => void;
+    onNo: () => void;
+}
+
+// New component for the confirmation box inside the modal
+const ConfirmationBox = ({ selector, onYes, onNo }: ConfirmationBoxProps) => {
+  return (
+    <Box sx={{ textAlign: 'center' }}>
+      <Typography variant="h6" component="h2" gutterBottom>
+        Confirmation
+      </Typography>
+      <Typography variant="body1" gutterBottom>
+        Do you want to interact with the element: {selector}?
+      </Typography>
+      <Box sx={{ mt: 2, display: 'flex', justifyContent: 'center', gap: 2 }}>
+        <Button variant="contained" color="primary" onClick={onYes}>
+          Yes
+        </Button>
+        <Button variant="contained" color="secondary" onClick={onNo}>
+          No
+        </Button>
+      </Box>
+    </Box>
+  );
+};
 
 export const BrowserWindow = () => {
     const [canvasRef, setCanvasReference] = useState<React.RefObject<HTMLCanvasElement> | undefined>(undefined);
     const [screenShot, setScreenShot] = useState<string>("");
     const [highlighterData, setHighlighterData] = useState<{ rect: DOMRect, selector: string } | null>(null);
+    const [showConfirmation, setShowConfirmation] = useState(false);
 
     const { socket } = useSocketStore();
     const { width, height } = useBrowserDimensionsStore();
 
+    console.log('Use browser dimensions:', width, height)
+
     const onMouseMove = (e: MouseEvent) => {
         if (canvasRef && canvasRef.current && highlighterData) {
             const canvasRect = canvasRef.current.getBoundingClientRect();
+            // mousemove outside the browser window
             if (
                 e.pageX < canvasRect.left
                 || e.pageX > canvasRect.right
@@ -28,7 +62,7 @@ export const BrowserWindow = () => {
 
     const screencastHandler = useCallback((data: string) => {
         setScreenShot(data);
-    }, []);
+    }, [screenShot]);
 
     useEffect(() => {
         if (socket) {
@@ -46,6 +80,7 @@ export const BrowserWindow = () => {
 
     const highlighterHandler = useCallback((data: { rect: DOMRect, selector: string }) => {
         setHighlighterData(data);
+        console.log('Highlighter Rect via socket:', data.rect)
     }, [highlighterData])
 
     useEffect(() => {
@@ -59,9 +94,48 @@ export const BrowserWindow = () => {
         };
     }, [socket, onMouseMove]);
 
+    const handleClick = (e: React.MouseEvent<HTMLDivElement>) => {
+        if (highlighterData && canvasRef?.current) {
+            const canvasRect = canvasRef.current.getBoundingClientRect();
+            const clickX = e.clientX - canvasRect.left;
+            const clickY = e.clientY - canvasRect.top;
+            
+            const highlightRect = highlighterData.rect;
+            if (
+                clickX >= highlightRect.left &&
+                clickX <= highlightRect.right &&
+                clickY >= highlightRect.top &&
+                clickY <= highlightRect.bottom
+            ) {
+                setShowConfirmation(true);
+            }
+        }
+    };
+
+    const handleConfirmation = (confirmed: boolean) => {
+        if (confirmed) {
+            console.log(`User confirmed interaction with: ${highlighterData?.selector}`);
+            // Here you can add logic to interact with the element
+        } else {
+            console.log('User declined interaction');
+        }
+        setShowConfirmation(false);
+    };
+
     return (
-        <div>
-            {(highlighterData?.rect != null && highlighterData?.rect.top != null) && canvasRef?.current ?
+        <div onClick={handleClick}>
+            <GenericModal 
+                isOpen={showConfirmation} 
+                onClose={() => setShowConfirmation(false)}
+                canBeClosed={false}
+            >
+                <ConfirmationBox
+                    selector={highlighterData?.selector || ''}
+                    onYes={() => handleConfirmation(true)}
+                    onNo={() => handleConfirmation(false)}
+                />
+            </GenericModal>
+            {(!showConfirmation && highlighterData?.rect != null && highlighterData?.rect.top != null) && canvasRef?.current ?
                 <Highlighter
                     unmodifiedRect={highlighterData?.rect}
                     displayedSelector={highlighterData?.selector}
@@ -74,18 +148,23 @@ export const BrowserWindow = () => {
                 onCreateRef={setCanvasReference}
                 width={width}
                 height={height}
-                highlighterData={highlighterData}
             />
         </div>
     );
 };
 
 const drawImage = (image: string, canvas: HTMLCanvasElement): void => {
+
     const ctx = canvas.getContext('2d');
+
     const img = new Image();
+
     img.src = image;
     img.onload = () => {
         URL.revokeObjectURL(img.src);
         ctx?.drawImage(img, 0, 0, 1280, 720);
+        console.log('Image drawn on canvas:', img.width, img.height);
+        console.log('Image drawn on canvas:', canvas.width, canvas.height);
     };
+
 };