53 lines
1.4 KiB
TypeScript
53 lines
1.4 KiB
TypeScript
import { useGetOverviewSnapshot } from "../../hooks/useGetOverviewSnapshot";
|
|
import NavigationArrow from "../UI/NavigationArrow";
|
|
|
|
type SnapshotContainerProps = {
|
|
side: string;
|
|
settingsPage?: boolean;
|
|
};
|
|
|
|
export const SnapshotContainer = ({
|
|
side,
|
|
settingsPage,
|
|
}: SnapshotContainerProps) => {
|
|
const { canvasRef, isError, isPending } = useGetOverviewSnapshot();
|
|
|
|
if (isError) return <p className="h-100">An error occurred</p>;
|
|
if (isPending) return <p className="h-100">Loading...</p>;
|
|
|
|
const handleZoomClick = (event: React.MouseEvent<HTMLCanvasElement>) => {
|
|
const bounds = canvasRef.current?.getBoundingClientRect();
|
|
if (!bounds) return;
|
|
const left = bounds.left;
|
|
const top = bounds.top;
|
|
const x = event.pageX;
|
|
const y = event.pageY;
|
|
const cw = canvasRef.current?.clientWidth;
|
|
const ch = canvasRef.current?.clientHeight;
|
|
if (!cw || !ch) return;
|
|
const px = x / cw;
|
|
const py = y / ch;
|
|
console.log({
|
|
left,
|
|
top,
|
|
x,
|
|
y,
|
|
px,
|
|
py,
|
|
});
|
|
};
|
|
|
|
return (
|
|
<div className="flex flex-col md:flex-row">
|
|
<NavigationArrow side={side} settingsPage={settingsPage} />
|
|
<div className="w-full">
|
|
<canvas
|
|
onClick={handleZoomClick}
|
|
ref={canvasRef}
|
|
className="absolute inset-0 object-contain min-h-[100%] z-20"
|
|
/>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|