Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 | 2833x 2833x 2833x 2833x 1820x 8x 1812x 550x 550x 550x 550x 550x 550x 550x 172x 550x 1812x 1812x 1734x 2833x | import { useState, useEffect } from 'react';
import { useViewportRef } from './useViewportRef';
import { useViewportSize } from './useViewportSize';
interface NormalizedBox {
minX: number;
minY: number;
maxX: number;
maxY: number;
}
interface MousePosition {
x: number;
y: number;
isInViewport: boolean;
relativeX: number;
relativeY: number; // Position as percentage from top (0-1)
isWithinNormalizedBox?: (normalizedBox: NormalizedBox) => boolean;
}
function useViewportMousePosition(viewportId: string): MousePosition {
const viewportRef = useViewportRef(viewportId);
const { width, height, clientRect } = useViewportSize(viewportId);
const [mousePosition, setMousePosition] = useState<MousePosition>({
x: 0,
y: 0,
isInViewport: false,
relativeY: 0,
relativeX: 0,
isWithinNormalizedBox: (normalizedBox: NormalizedBox) => false,
});
useEffect(() => {
if (!viewportRef.current) {
return;
}
const handleMouseMove = (event: MouseEvent) => {
Iif (!clientRect) {
return;
}
// Get mouse position relative to viewport
const x = event.clientX - clientRect.left;
const y = event.clientY - clientRect.top;
const isInViewport = x >= 0 && x <= clientRect.width && y >= 0 && y <= clientRect.height;
const relativeX = Math.max(0, Math.min(1, x / width));
const relativeY = Math.max(0, Math.min(1, y / height));
const isWithinNormalizedBox = (normalizedBox: NormalizedBox) => {
return (
relativeX >= normalizedBox.minX &&
relativeX <= normalizedBox.maxX &&
relativeY >= normalizedBox.minY &&
relativeY <= normalizedBox.maxY
);
};
setMousePosition({
x,
y,
isInViewport,
relativeX,
relativeY,
isWithinNormalizedBox,
});
};
document.addEventListener('mousemove', handleMouseMove);
return () => {
document.removeEventListener('mousemove', handleMouseMove);
};
}, [viewportRef, height, clientRect, width]);
return mousePosition;
}
export default useViewportMousePosition;
export { useViewportMousePosition };
|