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
|
import { useCallback, useMemo, useRef, useSyncExternalStore } from "react";
import { EditorCore } from "@/core";
const SNAPSHOT_UNSET = Symbol("snapshotUnset");
function isShallowEqual({
a,
b,
}: {
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 snapshotCacheRef = useRef<T | typeof SNAPSHOT_UNSET>(SNAPSHOT_UNSET);
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((): EditorCore | T => {
if (!selector) {
return editor;
}
const next = selector(editor);
if (
snapshotCacheRef.current !== SNAPSHOT_UNSET &&
isShallowEqual({
a: snapshotCacheRef.current,
b: next,
})
) {
return snapshotCacheRef.current;
}
snapshotCacheRef.current = next;
return next;
}, [editor, selector]);
return useSyncExternalStore(
selector ? subscribeAll : subscribeNone,
getSnapshot,
getSnapshot,
);
}
|
