From 6e55f9e650fed266e56d677dff3f1509e0efc9ea Mon Sep 17 00:00:00 2001 From: karishmas6 Date: Tue, 23 Jul 2024 22:28:32 +0530 Subject: [PATCH] fix: revert to !conditional mousedown emit --- src/components/atoms/canvas.tsx | 128 +++++++-------------- src/components/organisms/BrowserWindow.tsx | 87 +++++++++++++- 2 files changed, 125 insertions(+), 90 deletions(-) diff --git a/src/components/atoms/canvas.tsx b/src/components/atoms/canvas.tsx index 7351621e..9a879106 100644 --- a/src/components/atoms/canvas.tsx +++ b/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): 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 ( - - - Confirmation - - - Do you want to interact with the element: {selector}? - - - - - - - ); }; -const Canvas = ({ width, height, onCreateRef, highlighterData }: CanvasProps) => { +const Canvas = ({ width, height, onCreateRef }: CanvasProps) => { + const canvasRef = useRef(null); const { socket } = useSocketStore(); const { setLastAction, lastAction } = useGlobalInfoStore(); - const [showConfirmation, setShowConfirmation] = useState(false); - const [pendingClick, setPendingClick] = useState(null); - - const lastMousePosition = useRef({ 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({ x: 0, y: 0 }); + //const lastWheelPosition = useRef({ 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 ( - <> - setShowConfirmation(false)} - canBeClosed={false} - > - handleConfirmation(true)} - onNo={() => handleConfirmation(false)} - /> - - - + ); + }; + export default Canvas; \ No newline at end of file diff --git a/src/components/organisms/BrowserWindow.tsx b/src/components/organisms/BrowserWindow.tsx index ba842854..f63ecd38 100644 --- a/src/components/organisms/BrowserWindow.tsx +++ b/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 ( + + + Confirmation + + + Do you want to interact with the element: {selector}? + + + + + + + ); +}; export const BrowserWindow = () => { const [canvasRef, setCanvasReference] = useState | undefined>(undefined); const [screenShot, setScreenShot] = useState(""); 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) => { + 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 ( -
- {(highlighterData?.rect != null && highlighterData?.rect.top != null) && canvasRef?.current ? +
+ setShowConfirmation(false)} + canBeClosed={false} + > + handleConfirmation(true)} + onNo={() => handleConfirmation(false)} + /> + + {(!showConfirmation && highlighterData?.rect != null && highlighterData?.rect.top != null) && canvasRef?.current ? { onCreateRef={setCanvasReference} width={width} height={height} - highlighterData={highlighterData} />
); }; 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); }; + }; \ No newline at end of file