apps/web/src/components/editor/panels/preview/guide-overlay.tsx


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

"use client";

import { getGuideById } from "@/lib/guides";
import { usePreviewStore } from "@/stores/preview-store";
import { usePreviewViewport } from "./preview-viewport";

export function GuideOverlay() {
	const activeGuide = usePreviewStore((state) => state.activeGuide);
	const viewport = usePreviewViewport();
	const guide = getGuideById(activeGuide);

	if (!guide) {
		return null;
	}

	return (
		<div
			className="pointer-events-none absolute"
			style={{
				left: viewport.sceneLeft,
				top: viewport.sceneTop,
				width: viewport.sceneWidth,
				height: viewport.sceneHeight,
			}}
		>
			{guide.renderOverlay({
				width: viewport.sceneWidth,
				height: viewport.sceneHeight,
			})}
		</div>
	);
}