refactor: only handle highlighter state

src/components/organisms/BrowserWindow.tsx

@@ -2,7 +2,6 @@ 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<React.RefObject<HTMLCanvasElement> | undefined>(undefined);
@@ -12,20 +11,6 @@ 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);
     }, []);
@@ -47,27 +32,16 @@ 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, onMouseMove]);
+    }, [socket, highlighterHandler]);
 
     return (
-        <div>
-            {(highlighterData?.rect != null && highlighterData?.rect.top != null) && canvasRef?.current ?
-                <Highlighter
-                    unmodifiedRect={highlighterData?.rect}
-                    displayedSelector={highlighterData?.selector}
-                    width={width}
-                    height={height}
-                    canvasRect={canvasRef.current.getBoundingClientRect()}
-                />
-                : null}
+        <div style={{ position: 'relative' }}>
             <Canvas
                 onCreateRef={setCanvasReference}
                 width={width}