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
|
"use client";
import { useEditor } from "@/hooks/use-editor";
import type { SnapLine } from "@/lib/preview/preview-snap";
import { positionToOverlay } from "@/lib/preview/preview-coords";
export function SnapGuides({
lines,
canvasRef,
containerRef,
}: {
lines: SnapLine[];
canvasRef: React.RefObject<HTMLCanvasElement | null>;
containerRef: React.RefObject<HTMLDivElement | null>;
}) {
const editor = useEditor();
const canvasSize = editor.project.getActive().settings.canvasSize;
const canvasRect = canvasRef.current?.getBoundingClientRect();
const containerRect = containerRef.current?.getBoundingClientRect();
if (!canvasRect || !containerRect || lines.length === 0) {
return null;
}
const toOverlayX = (logicalX: number) =>
positionToOverlay({
positionX: logicalX,
positionY: 0,
canvasRect,
containerRect,
canvasSize,
}).x;
const toOverlayY = (logicalY: number) =>
positionToOverlay({
positionX: 0,
positionY: logicalY,
canvasRect,
containerRect,
canvasSize,
}).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>
);
}
|
