blob: ced5e9219a1c96405ab9903b545999a391998ce9 (
plain) (
blame)
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
|
"use client";
import { usePreviewViewport } from "@/components/editor/panels/preview/preview-viewport";
import type { SnapLine } from "@/lib/preview/preview-snap";
export function SnapGuides({ lines }: { lines: SnapLine[] }) {
const viewport = usePreviewViewport();
if (lines.length === 0) {
return null;
}
const toOverlayX = (logicalX: number) =>
viewport.positionToOverlay({
positionX: logicalX,
positionY: 0,
}).x;
const toOverlayY = (logicalY: number) =>
viewport.positionToOverlay({
positionX: 0,
positionY: logicalY,
}).y;
return (
<div className="pointer-events-none absolute inset-0" aria-hidden>
{lines.map((line) => {
if (line.type === "vertical") {
return (
<div
key={`vertical-${line.position}`}
className="absolute top-0 bottom-0 w-px bg-white/70"
style={{ left: toOverlayX(line.position) }}
/>
);
}
return (
<div
key={`horizontal-${line.position}`}
className="absolute left-0 right-0 h-px bg-white/70"
style={{ top: toOverlayY(line.position) }}
/>
);
})}
</div>
);
}
|
