diff --git a/src/components/organisms/BrowserWindow.tsx b/src/components/organisms/BrowserWindow.tsx index a483201d..c516a776 100644 --- a/src/components/organisms/BrowserWindow.tsx +++ b/src/components/organisms/BrowserWindow.tsx @@ -3,52 +3,18 @@ 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; -} - -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 [isClickConfirmed, setIsClickConfirmed] = 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 @@ -62,7 +28,7 @@ export const BrowserWindow = () => { const screencastHandler = useCallback((data: string) => { setScreenShot(data); - }, [screenShot]); + }, []); useEffect(() => { if (socket) { @@ -70,8 +36,6 @@ export const BrowserWindow = () => { } if (canvasRef?.current) { drawImage(screenShot, canvasRef.current); - } else { - console.log('Canvas is not initialized'); } return () => { socket?.off("screencast", screencastHandler); @@ -80,8 +44,7 @@ export const BrowserWindow = () => { const highlighterHandler = useCallback((data: { rect: DOMRect, selector: string }) => { setHighlighterData(data); - // console.log('Highlighter Rect via socket:', data.rect) - }, [highlighterData]) + }, []) useEffect(() => { document.addEventListener('mousemove', onMouseMove, false); @@ -94,50 +57,9 @@ 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 - setIsClickConfirmed(true); - } else { - console.log('User declined interaction'); - setIsClickConfirmed(false); - } - setShowConfirmation(false); - }; - return ( -
- setShowConfirmation(false)} - canBeClosed={false} - > - handleConfirmation(true)} - onNo={() => handleConfirmation(false)} - /> - - {(!showConfirmation && highlighterData?.rect != null && highlighterData?.rect.top != null) && canvasRef?.current ? +
+ {(highlighterData?.rect != null && highlighterData?.rect.top != null) && canvasRef?.current ? { onCreateRef={setCanvasReference} width={width} height={height} - isClickConfirmed={isClickConfirmed} - resetClickConfirmation={() => setIsClickConfirmed(false)} + 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