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
|
import { useEffect, useReducer, useRef, type RefObject } from "react";
import { useEditor } from "@/editor/use-editor";
import {
DragDropController,
type DragDropConfig,
} from "@/timeline/controllers/drag-drop-controller";
interface UseTimelineDragDropProps {
containerRef: RefObject<HTMLDivElement | null>;
headerRef?: RefObject<HTMLElement | null>;
tracksScrollRef?: RefObject<HTMLDivElement | null>;
zoomLevel: number;
}
export function useTimelineDragDrop({
containerRef,
headerRef,
tracksScrollRef,
zoomLevel,
}: UseTimelineDragDropProps) {
const editor = useEditor();
const config: DragDropConfig = {
zoomLevel,
getContainerEl: () => containerRef.current,
getHeaderEl: () => headerRef?.current ?? null,
getTracksScrollEl: () => tracksScrollRef?.current ?? null,
getActiveProjectFps: () => editor.project.getActive()?.settings.fps ?? null,
getActiveProjectId: () =>
editor.project.getActiveOrNull()?.metadata.id ?? null,
getSceneTracks: () => editor.scenes.getActiveScene().tracks,
getCurrentPlayheadTime: () => editor.playback.getCurrentTime(),
getMediaAssets: () => editor.media.getAssets(),
dragSource: editor.timeline.dragSource,
addMediaAsset: (args) => editor.media.addMediaAsset(args),
executeCommand: (command) => editor.command.execute({ command }),
insertElement: (args) => editor.timeline.insertElement(args),
addClipEffect: (args) => editor.timeline.addClipEffect(args),
};
const configRef = useRef<DragDropConfig>(config);
configRef.current = config;
const controllerRef = useRef<DragDropController | null>(null);
if (!controllerRef.current) {
controllerRef.current = new DragDropController({ configRef });
}
const controller = controllerRef.current;
const [, rerender] = useReducer((n: number) => n + 1, 0);
useEffect(() => controller.subscribe(rerender), [controller]);
useEffect(() => () => controller.destroy(), [controller]);
return {
isDragOver: controller.isDragOver,
dropTarget: controller.dropTarget,
dragElementType: controller.dragElementType,
dragProps: {
onDragEnter: controller.onDragEnter,
onDragOver: controller.onDragOver,
onDragLeave: controller.onDragLeave,
onDrop: controller.onDrop,
},
};
}
|
