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
|
import { useEffect, useReducer, useRef, type RefObject } from "react";
import { useEditor } from "@/editor/use-editor";
import { useShiftKey } from "@/hooks/use-shift-key";
import { useElementSelection } from "@/timeline/hooks/element/use-element-selection";
import { registerCanceller } from "@/editor/cancel-interaction";
import {
ElementInteractionController,
type ElementInteractionDeps,
type ElementInteractionDepsRef,
} from "@/timeline/controllers/element-interaction-controller";
import type { SnapPoint } from "@/timeline/snapping";
interface UseElementInteractionProps {
zoomLevel: number;
tracksContainerRef: RefObject<HTMLDivElement | null>;
tracksScrollRef: RefObject<HTMLDivElement | null>;
headerRef?: RefObject<HTMLElement | null>;
snappingEnabled: boolean;
onSnapPointChange?: (snapPoint: SnapPoint | null) => void;
}
export function useElementInteraction({
zoomLevel,
tracksContainerRef,
tracksScrollRef,
headerRef,
snappingEnabled,
onSnapPointChange,
}: UseElementInteractionProps) {
const editor = useEditor();
const isShiftHeldRef = useShiftKey();
const selection = useElementSelection();
const deps: ElementInteractionDeps = {
viewport: {
getZoomLevel: () => zoomLevel,
getTracksScrollEl: () => tracksScrollRef.current,
getTracksContainerEl: () => tracksContainerRef.current,
getHeaderEl: () => headerRef?.current ?? null,
},
input: {
isShiftHeld: () => isShiftHeldRef.current,
},
scene: {
getTracks: () => editor.scenes.getActiveScene().tracks,
getActiveFps: () => editor.project.getActive()?.settings.fps ?? null,
},
selection: {
getSelected: () => selection.selectedElements,
isSelected: selection.isElementSelected,
select: selection.selectElement,
handleClick: selection.handleElementClick,
clearKeyframeSelection: () => editor.selection.clearKeyframeSelection(),
},
playback: {
getCurrentTime: () => editor.playback.getCurrentTime(),
},
timeline: {
moveElements: (args) => editor.timeline.moveElements(args),
},
snap: {
isEnabled: () => snappingEnabled,
onChange: onSnapPointChange,
},
};
const depsRef = useRef<ElementInteractionDeps>(deps);
depsRef.current = deps;
const controllerRef = useRef<ElementInteractionController | null>(null);
if (!controllerRef.current) {
controllerRef.current = new ElementInteractionController({
depsRef: depsRef as ElementInteractionDepsRef,
});
}
const controller = controllerRef.current;
const [, rerender] = useReducer((n: number) => n + 1, 0);
useEffect(() => controller.subscribe(rerender), [controller]);
useEffect(() => {
if (!controller.isActive) return;
return registerCanceller({ fn: () => controller.cancel() });
}, [controller.isActive, controller]);
useEffect(() => () => controller.destroy(), [controller]);
return {
dragView: controller.view,
handleElementMouseDown: controller.onElementMouseDown,
handleElementClick: controller.onElementClick,
};
}
|
