diff --git a/src/components/organisms/BrowserWindow.tsx b/src/components/organisms/BrowserWindow.tsx index 32ab9607..afefbb41 100644 --- a/src/components/organisms/BrowserWindow.tsx +++ b/src/components/organisms/BrowserWindow.tsx @@ -9,6 +9,7 @@ export const BrowserWindow = () => { const [canvasRef, setCanvasReference] = useState | undefined>(undefined); const [screenShot, setScreenShot] = useState(""); const [highlighterData, setHighlighterData] = useState<{ rect: DOMRect, selector: string } | null>(null); + const [selectedElement, setSelectedElement] = useState<{ rect: DOMRect, selector: string } | null>(null); const { socket } = useSocketStore(); const { width, height } = useBrowserDimensionsStore(); @@ -55,17 +56,25 @@ export const BrowserWindow = () => { console.log('Highlighter Rect via socket:', data.rect) }, [highlighterData]) + const handleClick = useCallback(() => { + if (highlighterData) { + setSelectedElement(highlighterData); + } + }, [highlighterData]); + useEffect(() => { document.addEventListener('mousemove', onMouseMove, false); + document.addEventListener('click', handleClick); if (socket) { socket.on("highlighter", highlighterHandler); } //cleaning function return () => { document.removeEventListener('mousemove', onMouseMove); + document.removeEventListener('click', handleClick); socket?.off("highlighter", highlighterHandler); }; - }, [socket, onMouseMove]); + }, [socket, onMouseMove, handleClick]); return ( <> @@ -76,8 +85,19 @@ export const BrowserWindow = () => { width={width} height={height} canvasRect={canvasRef.current.getBoundingClientRect()} + isSelected={false} /> : null} + {selectedElement && canvasRef?.current ? + + : null}