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

chore: lint

Browse Source
This commit is contained in:
karishmas6
2024-06-14 23:17:32 +05:30
parent 165de97446
commit c444cfc00f
1 changed files with 26 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -8,23 +8,23 @@ export const BrowserWindow = () => {
const [canvasRef, setCanvasReference] = useState<React.RefObject<HTMLCanvasElement> | undefined>(undefined); const [canvasRef, setCanvasReference] = useState<React.RefObject<HTMLCanvasElement> | undefined>(undefined);
const [screenShot, setScreenShot] = useState<string>(""); const [screenShot, setScreenShot] = useState<string>("");
const [highlighterData, setHighlighterData] = useState<{rect: DOMRect, selector: string} | null>(null); const [highlighterData, setHighlighterData] = useState<{ rect: DOMRect, selector: string } | null>(null);
const { socket } = useSocketStore(); const { socket } = useSocketStore();
const { width, height } = useBrowserDimensionsStore(); const { width, height } = useBrowserDimensionsStore();
console.log('Use browser dimensions:', width, height) console.log('Use browser dimensions:', width, height)
const onMouseMove = (e: MouseEvent) =>{ const onMouseMove = (e: MouseEvent) => {
if (canvasRef && canvasRef.current && highlighterData) { if (canvasRef && canvasRef.current && highlighterData) {
const canvasRect = canvasRef.current.getBoundingClientRect(); const canvasRect = canvasRef.current.getBoundingClientRect();
// mousemove outside the browser window // mousemove outside the browser window
if ( if (
e.pageX < canvasRect.left e.pageX < canvasRect.left
|| e.pageX > canvasRect.right || e.pageX > canvasRect.right
|| e.pageY < canvasRect.top || e.pageY < canvasRect.top
|| e.pageY > canvasRect.bottom || e.pageY > canvasRect.bottom
){ ) {
setHighlighterData(null); setHighlighterData(null);
} }
} }
@@ -34,7 +34,7 @@ export const BrowserWindow = () => {
setScreenShot(data); setScreenShot(data);
}, [screenShot]); }, [screenShot]);
useEffect(() => { useEffect(() => {
if (socket) { if (socket) {
socket.on("screencast", screencastHandler); socket.on("screencast", screencastHandler);
} }
@@ -50,12 +50,12 @@ export const BrowserWindow = () => {
}, [screenShot, canvasRef, socket, screencastHandler]); }, [screenShot, canvasRef, socket, screencastHandler]);
const highlighterHandler = useCallback((data: {rect: DOMRect, selector: string}) => { const highlighterHandler = useCallback((data: { rect: DOMRect, selector: string }) => {
setHighlighterData(data); setHighlighterData(data);
console.log('Highlighter Rect via socket:', data.rect) console.log('Highlighter Rect via socket:', data.rect)
}, [highlighterData]) }, [highlighterData])
useEffect(() => { useEffect(() => {
document.addEventListener('mousemove', onMouseMove, false); document.addEventListener('mousemove', onMouseMove, false);
if (socket) { if (socket) {
socket.on("highlighter", highlighterHandler); socket.on("highlighter", highlighterHandler);
@@ -68,26 +68,26 @@ export const BrowserWindow = () => {
}, [socket, onMouseMove]); }, [socket, onMouseMove]);
return ( return (
<> <>
{(highlighterData?.rect != null && highlighterData?.rect.top != null) && canvasRef?.current ? {(highlighterData?.rect != null && highlighterData?.rect.top != null) && canvasRef?.current ?
< Highlighter < Highlighter
unmodifiedRect={highlighterData?.rect} unmodifiedRect={highlighterData?.rect}
displayedSelector={highlighterData?.selector} displayedSelector={highlighterData?.selector}
width={width} width={width}
height={height} height={height}
canvasRect={canvasRef.current.getBoundingClientRect()} canvasRect={canvasRef.current.getBoundingClientRect()}
/>
: null}
<Canvas
onCreateRef={setCanvasReference}
width={width}
height={height}
/> />
: null } </>
<Canvas
onCreateRef={setCanvasReference}
width={width}
height={height}
/>
</>
); );
}; };
const drawImage = (image: string, canvas: HTMLCanvasElement) :void => { const drawImage = (image: string, canvas: HTMLCanvasElement): void => {
const ctx = canvas.getContext('2d'); const ctx = canvas.getContext('2d');