blob: 6ee4b584815a35d5bfc97cea790781b9df4a2599 (
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
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
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
|
import { useState } from "react";
import { usePreviewViewport } from "@/components/editor/panels/preview/preview-viewport";
import { usePreviewInteraction } from "@/hooks/use-preview-interaction";
import type { SnapLine } from "@/lib/preview/preview-snap";
import { TransformHandles } from "./transform-handles";
import { MaskHandles } from "./mask-handles";
import { SnapGuides } from "./snap-guides";
import { TextEditOverlay } from "./text-edit-overlay";
import { usePropertiesStore } from "../properties/stores/properties-store";
import { useEditor } from "@/hooks/use-editor";
export function PreviewInteractionOverlay() {
const [snapLines, setSnapLines] = useState<SnapLine[]>([]);
const editor = useEditor();
const viewport = usePreviewViewport();
const selectedElements = useEditor((e) => e.selection.getSelectedElements());
const activeTabPerType = usePropertiesStore((s) => s.activeTabPerType);
const selectedRef =
selectedElements.length === 1 ? selectedElements[0] : null;
const activeTrack = selectedRef
? editor.timeline.getTrackById({ trackId: selectedRef.trackId })
: null;
const activeElement =
activeTrack?.elements.find(
(element) => element.id === selectedRef?.elementId,
) ?? null;
const isMaskMode = activeElement
? activeTabPerType[activeElement.type] === "masks"
: false;
const {
onPointerDown,
onPointerMove,
onPointerUp,
onDoubleClick,
editingText,
commitTextEdit,
} = usePreviewInteraction({
onSnapLinesChange: setSnapLines,
isMaskMode,
});
const handlePointerDown = (event: React.PointerEvent) => {
if (viewport.handlePanPointerDown({ event })) {
return;
}
onPointerDown(event);
};
const handlePointerMove = (event: React.PointerEvent) => {
if (viewport.handlePanPointerMove({ event })) {
return;
}
onPointerMove(event);
};
const handlePointerUp = (event: React.PointerEvent) => {
if (viewport.handlePanPointerUp({ event })) {
return;
}
onPointerUp(event);
};
return (
<div className="absolute inset-0">
<div
className="absolute inset-0 pointer-events-auto"
role="application"
aria-label="Preview canvas"
style={{
cursor: viewport.isPanning
? "grabbing"
: viewport.canPan
? "default"
: undefined,
}}
onPointerDown={handlePointerDown}
onPointerMove={handlePointerMove}
onPointerUp={handlePointerUp}
onPointerCancel={handlePointerUp}
onDoubleClick={onDoubleClick}
onDragStart={(e) => e.preventDefault()}
/>
{editingText ? (
<TextEditOverlay
trackId={editingText.trackId}
elementId={editingText.elementId}
element={editingText.element}
onCommit={commitTextEdit}
/>
) : isMaskMode ? (
<MaskHandles onSnapLinesChange={setSnapLines} />
) : (
<TransformHandles onSnapLinesChange={setSnapLines} />
)}
<SnapGuides lines={snapLines} />
</div>
);
}
|
