vodorod/parcer
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: only handle highlighter state

Browse Source
This commit is contained in:
karishmas6
2024-07-23 20:38:27 +05:30
parent 897397c899
commit 6815f1617b
1 changed files with 2 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files

30
src/components/organisms/BrowserWindow.tsx
View File

@@ -2,7 +2,6 @@ import React, { useCallback, useEffect, useState } from 'react';
import { useSocketStore } from '../../context/socket'; import { useSocketStore } from '../../context/socket';
import Canvas from "../atoms/canvas"; import Canvas from "../atoms/canvas";
import { useBrowserDimensionsStore } from "../../context/browserDimensions"; import { useBrowserDimensionsStore } from "../../context/browserDimensions";
import { Highlighter } from "../atoms/Highlighter";
export const BrowserWindow = () => { export const BrowserWindow = () => {
const [canvasRef, setCanvasReference] = useState<React.RefObject<HTMLCanvasElement> | undefined>(undefined); const [canvasRef, setCanvasReference] = useState<React.RefObject<HTMLCanvasElement> | undefined>(undefined);
@@ -12,20 +11,6 @@ export const BrowserWindow = () => {
const { socket } = useSocketStore(); const { socket } = useSocketStore();
const { width, height } = useBrowserDimensionsStore(); 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) => { const screencastHandler = useCallback((data: string) => {
setScreenShot(data); setScreenShot(data);
}, []); }, []);
@@ -47,27 +32,16 @@ export const BrowserWindow = () => {
}, []) }, [])
useEffect(() => { useEffect(() => {
document.addEventListener('mousemove', onMouseMove, false);
if (socket) { if (socket) {
socket.on("highlighter", highlighterHandler); socket.on("highlighter", highlighterHandler);
} }
return () => { return () => {
document.removeEventListener('mousemove', onMouseMove);
socket?.off("highlighter", highlighterHandler); socket?.off("highlighter", highlighterHandler);
}; };
}, [socket, onMouseMove]); }, [socket, highlighterHandler]);
return ( return (
<div> <div style={{ position: 'relative' }}>
{(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}
<Canvas <Canvas
onCreateRef={setCanvasReference} onCreateRef={setCanvasReference}
width={width} width={width}