diff --git a/src/components/organisms/BrowserWindow.tsx b/src/components/organisms/BrowserWindow.tsx index 18fec604..c516a776 100644 --- a/src/components/organisms/BrowserWindow.tsx +++ b/src/components/organisms/BrowserWindow.tsx @@ -2,6 +2,7 @@ import React, { useCallback, useEffect, useState } from 'react'; import { useSocketStore } from '../../context/socket'; import Canvas from "../atoms/canvas"; import { useBrowserDimensionsStore } from "../../context/browserDimensions"; +import { Highlighter } from "../atoms/Highlighter"; export const BrowserWindow = () => { const [canvasRef, setCanvasReference] = useState | undefined>(undefined); @@ -11,6 +12,20 @@ export const BrowserWindow = () => { const { socket } = useSocketStore(); const { width, height } = useBrowserDimensionsStore(); + const onMouseMove = (e: MouseEvent) => { + if (canvasRef && canvasRef.current && highlighterData) { + const canvasRect = canvasRef.current.getBoundingClientRect(); + if ( + e.pageX < canvasRect.left + || e.pageX > canvasRect.right + || e.pageY < canvasRect.top + || e.pageY > canvasRect.bottom + ) { + setHighlighterData(null); + } + } + }; + const screencastHandler = useCallback((data: string) => { setScreenShot(data); }, []); @@ -32,16 +47,27 @@ export const BrowserWindow = () => { }, []) useEffect(() => { + document.addEventListener('mousemove', onMouseMove, false); if (socket) { socket.on("highlighter", highlighterHandler); } return () => { + document.removeEventListener('mousemove', onMouseMove); socket?.off("highlighter", highlighterHandler); }; - }, [socket, highlighterHandler]); + }, [socket, onMouseMove]); return ( -
+
+ {(highlighterData?.rect != null && highlighterData?.rect.top != null) && canvasRef?.current ? + + : null}