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
|
"use client";
import { useEffect, useRef, useCallback } from "react";
import { PanelView } from "@/components/editor/panels/assets/views/base-panel";
import { DraggableItem } from "@/components/editor/panels/assets/draggable-item";
import { effectsRegistry, EFFECT_TARGET_ELEMENT_TYPES } from "@/effects";
import { effectPreviewService } from "@/services/renderer/effect-preview";
import { useEditor } from "@/editor/use-editor";
import { buildEffectElement } from "@/timeline/element-utils";
import type { EffectDefinition } from "@/effects/types";
export function EffectsView() {
const effects = effectsRegistry.getAll();
return (
<PanelView title="Effects">
<EffectsGrid effects={effects} />
</PanelView>
);
}
function EffectsGrid({ effects }: { effects: EffectDefinition[] }) {
return (
<div
className="grid gap-2"
style={{ gridTemplateColumns: "repeat(auto-fill, minmax(96px, 1fr))" }}
>
{effects.map((effect) => (
<EffectItem key={effect.type} effect={effect} />
))}
</div>
);
}
function EffectPreviewCanvas({ effectType }: { effectType: string }) {
const canvasRef = useRef<HTMLCanvasElement>(null);
useEffect(() => {
const render = () => {
if (canvasRef.current) {
effectPreviewService.renderPreview({
effectType,
params: {},
targetCanvas: canvasRef.current,
});
}
};
render();
return effectPreviewService.onPreviewImageReady({ callback: render });
}, [effectType]);
return <canvas ref={canvasRef} className="size-full" />;
}
function EffectItem({ effect }: { effect: EffectDefinition }) {
const editor = useEditor();
const handleAddToTimeline = useCallback(() => {
const currentTime = editor.playback.getCurrentTime();
const element = buildEffectElement({
effectType: effect.type,
startTime: currentTime,
});
editor.timeline.insertElement({
placement: { mode: "auto", trackType: "effect" },
element,
});
}, [editor, effect.type]);
const preview = <EffectPreviewCanvas effectType={effect.type} />;
return (
<DraggableItem
name={effect.name}
preview={preview}
dragData={{
id: effect.type,
name: effect.name,
type: "effect",
effectType: effect.type,
targetElementTypes: EFFECT_TARGET_ELEMENT_TYPES,
}}
onAddToTimeline={handleAddToTimeline}
aspectRatio={1}
isRounded
variant="card"
containerClassName="w-full"
/>
);
}
|
