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
|
import { useCallback, useMemo, useRef, useSyncExternalStore } from "react";
import { EditorCore } from "@/core";
function isShallowEqual(a: unknown, b: unknown): boolean {
if (Object.is(a, b)) return true;
if (!Array.isArray(a) || !Array.isArray(b)) return false;
if (a.length !== b.length) return false;
return a.every((item, i) => Object.is(item, b[i]));
}
const subscribeNone = () => () => {};
export function useEditor(): EditorCore;
export function useEditor<T>(selector: (editor: EditorCore) => T): T;
export function useEditor<T>(
selector?: (editor: EditorCore) => T,
): EditorCore | T {
const editor = useMemo(() => EditorCore.getInstance(), []);
const selectorRef = useRef(selector);
selectorRef.current = selector;
const snapshotCacheRef = useRef<unknown>(undefined);
const subscribeAll = useCallback(
(onChange: () => void) => {
const unsubscribers = [
editor.playback.subscribe(onChange),
editor.timeline.subscribe(onChange),
editor.scenes.subscribe(onChange),
editor.project.subscribe(onChange),
editor.media.subscribe(onChange),
editor.renderer.subscribe(onChange),
editor.selection.subscribe(onChange),
editor.clipboard.subscribe(onChange),
editor.diagnostics.subscribe(onChange),
];
return () => {
unsubscribers.forEach((unsubscribe) => {
unsubscribe();
});
};
},
[editor],
);
const getSnapshot = useCallback(() => {
const next = selectorRef.current ? selectorRef.current(editor) : editor;
if (isShallowEqual(snapshotCacheRef.current, next)) {
return snapshotCacheRef.current;
}
snapshotCacheRef.current = next;
return next;
}, [editor]);
return useSyncExternalStore(
selector ? subscribeAll : subscribeNone,
getSnapshot,
getSnapshot,
) as EditorCore | T;
}
|
