From 5262c016e70fe01be1120100aa9cb6a515a811c0 Mon Sep 17 00:00:00 2001 From: FromTheLOLAshes Date: Tue, 2 Apr 2024 07:12:08 +0700 Subject: [PATCH 1/3] Keyframe drag, keyframe display, audio dnd --- .../{ClipElement.tsx => AnimationElement.tsx} | 5 +- ...ClipElements.tsx => AnimationElements.tsx} | 6 +- .../comps/SidePanelTabs/AudioElement.tsx | 78 +++++++++++++++++++ .../comps/SidePanelTabs/AudioElements.tsx | 25 ++++++ .../PageEnigma/comps/SidePanelTabs/index.tsx | 9 ++- .../PageEnigma/comps/Timeline/Timeline.tsx | 11 ++- .../PageEnigma/comps/Timeline/TrackClip.tsx | 3 +- .../PageEnigma/comps/Timeline/TrackClips.tsx | 22 +++++- .../comps/Timeline/TrackKeyFrame.tsx | 36 +++------ .../contexts/TrackContext/TrackContext.tsx | 7 +- .../contexts/TrackContext/TrackProvider.tsx | 23 ++++-- .../TrackContext/utils/useUpdateDragDrop.ts | 2 +- app/pages/PageEnigma/store/audioGroup.ts | 22 ++++-- app/pages/PageEnigma/store/characterGroups.ts | 2 +- app/pages/PageEnigma/store/dragAndDrop.ts | 2 +- app/pages/PageEnigma/store/index.ts | 1 + app/pages/PageEnigma/store/objectGroup.ts | 30 +++++-- 17 files changed, 211 insertions(+), 73 deletions(-) rename app/pages/PageEnigma/comps/SidePanelTabs/{ClipElement.tsx => AnimationElement.tsx} (95%) rename app/pages/PageEnigma/comps/SidePanelTabs/{ClipElements.tsx => AnimationElements.tsx} (78%) create mode 100644 app/pages/PageEnigma/comps/SidePanelTabs/AudioElement.tsx create mode 100644 app/pages/PageEnigma/comps/SidePanelTabs/AudioElements.tsx diff --git a/app/pages/PageEnigma/comps/SidePanelTabs/ClipElement.tsx b/app/pages/PageEnigma/comps/SidePanelTabs/AnimationElement.tsx similarity index 95% rename from app/pages/PageEnigma/comps/SidePanelTabs/ClipElement.tsx rename to app/pages/PageEnigma/comps/SidePanelTabs/AnimationElement.tsx index 37c09ae69b..1520f19497 100644 --- a/app/pages/PageEnigma/comps/SidePanelTabs/ClipElement.tsx +++ b/app/pages/PageEnigma/comps/SidePanelTabs/AnimationElement.tsx @@ -11,10 +11,10 @@ import { useSignals } from "@preact/signals-react/runtime"; interface Props { clip: MediaClip; - type: "animations" | "lipSync"; + type: "animations" | "audio"; } -export const ClipElement = ({ clip, type }: Props) => { +export const AnimationElement = ({ clip, type }: Props) => { useSignals(); const { startDrag, endDrag } = useContext(TrackContext); const { initX, initY } = initPosition.value; @@ -33,7 +33,6 @@ export const ClipElement = ({ clip, type }: Props) => { const deltaX = event.pageX - initX; const deltaY = event.pageY - initY; currPosition.value = { currX: initX + deltaX, currY: initY + deltaY }; - return; } }; diff --git a/app/pages/PageEnigma/comps/SidePanelTabs/ClipElements.tsx b/app/pages/PageEnigma/comps/SidePanelTabs/AnimationElements.tsx similarity index 78% rename from app/pages/PageEnigma/comps/SidePanelTabs/ClipElements.tsx rename to app/pages/PageEnigma/comps/SidePanelTabs/AnimationElements.tsx index 1c935c9fc2..c9cbceaf51 100644 --- a/app/pages/PageEnigma/comps/SidePanelTabs/ClipElements.tsx +++ b/app/pages/PageEnigma/comps/SidePanelTabs/AnimationElements.tsx @@ -1,10 +1,10 @@ import { useContext, useEffect, useState } from "react"; -import { ClipElement } from "./ClipElement"; +import { AnimationElement } from "./AnimationElement"; import { TrackContext } from "~/pages/PageEnigma/contexts/TrackContext/TrackContext"; import { useSignals } from "@preact/signals-react/runtime"; import { timelineHeight } from "~/pages/PageEnigma/store"; -export const ClipElements = () => { +export const AnimationElements = () => { const { animationClips } = useContext(TrackContext); useSignals(); const [height, setHeight] = useState(0); @@ -17,7 +17,7 @@ export const ClipElements = () => {
{animationClips.map((clip) => { return ( - + ); })}
diff --git a/app/pages/PageEnigma/comps/SidePanelTabs/AudioElement.tsx b/app/pages/PageEnigma/comps/SidePanelTabs/AudioElement.tsx new file mode 100644 index 0000000000..9da211d7ee --- /dev/null +++ b/app/pages/PageEnigma/comps/SidePanelTabs/AudioElement.tsx @@ -0,0 +1,78 @@ +import { useCallback, useContext, useEffect } from "react"; +import { MediaClip } from "~/pages/PageEnigma/models/track"; +import { TrackContext } from "~/pages/PageEnigma/contexts/TrackContext/TrackContext"; +import { + canDrop, + currPosition, + dragId, + initPosition, +} from "~/pages/PageEnigma/store"; +import { useSignals } from "@preact/signals-react/runtime"; + +interface Props { + clip: MediaClip; + type: "animations" | "audio"; +} + +export const AudioElement = ({ clip, type }: Props) => { + useSignals(); + const { startDrag, endDrag } = useContext(TrackContext); + const { initX, initY } = initPosition.value; + + useEffect(() => { + const onPointerUp = () => { + if (dragId.value) { + endDrag(); + } + }; + + const onMouseMove = (event: MouseEvent) => { + if (dragId) { + event.stopPropagation(); + event.preventDefault(); + const deltaX = event.pageX - initX; + const deltaY = event.pageY - initY; + currPosition.value = { currX: initX + deltaX, currY: initY + deltaY }; + } + }; + + window.addEventListener("pointerup", onPointerUp); + window.addEventListener("pointermove", onMouseMove); + + return () => { + window.removeEventListener("pointerup", onPointerUp); + window.removeEventListener("pointermove", onMouseMove); + }; + }, [startDrag, endDrag, initX, initY]); + + const onPointerDown = useCallback( + (event: React.PointerEvent) => { + if (event.button === 0) { + startDrag(type, clip.media_id, clip.length); + currPosition.value = { + currX: event.pageX, + currY: event.pageY, + }; + initPosition.value = { + initX: event.pageX, + initY: event.pageY, + }; + canDrop.value = false; + } + }, + [type, clip.media_id, startDrag, clip.length], + ); + + return ( +
+
+ {clip.name} +
+
+ ); +}; diff --git a/app/pages/PageEnigma/comps/SidePanelTabs/AudioElements.tsx b/app/pages/PageEnigma/comps/SidePanelTabs/AudioElements.tsx new file mode 100644 index 0000000000..a35bd2d552 --- /dev/null +++ b/app/pages/PageEnigma/comps/SidePanelTabs/AudioElements.tsx @@ -0,0 +1,25 @@ +import { useContext, useEffect, useState } from "react"; +import { AnimationElement } from "./AnimationElement"; +import { TrackContext } from "~/pages/PageEnigma/contexts/TrackContext/TrackContext"; +import { useSignals } from "@preact/signals-react/runtime"; +import { timelineHeight } from "~/pages/PageEnigma/store"; + +export const AudioElements = () => { + const { audioClips } = useContext(TrackContext); + useSignals(); + const [height, setHeight] = useState(0); + + useEffect(() => { + setHeight(window.outerHeight - timelineHeight.value); + }, []); + + return ( +
+ {audioClips.map((clip) => { + return ( + + ); + })} +
+ ); +}; diff --git a/app/pages/PageEnigma/comps/SidePanelTabs/index.tsx b/app/pages/PageEnigma/comps/SidePanelTabs/index.tsx index 7ea7f8d701..8a3a31b967 100644 --- a/app/pages/PageEnigma/comps/SidePanelTabs/index.tsx +++ b/app/pages/PageEnigma/comps/SidePanelTabs/index.tsx @@ -1,6 +1,7 @@ import { Tabs } from "~/modules/Tabs"; -import { TabStylization} from "./TabStylization"; -import { ClipElements } from "./ClipElements"; +import { TabStylization } from "./TabStylization"; +import { AnimationElements } from "./AnimationElements"; +import { AudioElements } from "~/pages/PageEnigma/comps/SidePanelTabs/AudioElements"; export const SidePanelTabs = () => { return ( @@ -8,7 +9,7 @@ export const SidePanelTabs = () => { tabs={[ { header: "Animation", - children: , + children: , }, { header: "Camera", @@ -16,7 +17,7 @@ export const SidePanelTabs = () => { }, { header: "Audio", - children:

Audio Tab

, + children: , }, { header: "Stylization", diff --git a/app/pages/PageEnigma/comps/Timeline/Timeline.tsx b/app/pages/PageEnigma/comps/Timeline/Timeline.tsx index 13fab55f96..3de3cb7155 100644 --- a/app/pages/PageEnigma/comps/Timeline/Timeline.tsx +++ b/app/pages/PageEnigma/comps/Timeline/Timeline.tsx @@ -8,6 +8,7 @@ import { timelineHeight, deleteAudioClip, deleteCharacterClip, + selectedItem, } from "~/pages/PageEnigma/store"; import { useQueueHandler } from "~/pages/PageEnigma/comps/Timeline/utils/useQueueHandler"; import { useSignals } from "@preact/signals-react/runtime"; @@ -17,7 +18,6 @@ import { Characters } from "~/pages/PageEnigma/comps/Timeline/Characters"; import { ObjectGroups } from "~/pages/PageEnigma/comps/Timeline/ObjectGroups"; import useUpdateKeyframe from "~/pages/PageEnigma/contexts/TrackContext/utils/useUpdateKeyframe"; import { Clip, Keyframe } from "~/pages/PageEnigma/models/track"; -import { selectedItem } from "~/pages/PageEnigma/store/selectedItem"; function getItemType(item: Clip | Keyframe | null) { if (!item) { @@ -50,9 +50,12 @@ export const Timeline = () => { }, []); const onDelete = useCallback(() => { - deleteCharacterClip(selectedItem.value as Clip); - deleteAudioClip(selectedItem.value as Clip); - deleteKeyframe(selectedItem.value as Keyframe); + if ((selectedItem.value as Clip).clip_uuid) { + deleteCharacterClip(selectedItem.value as Clip); + deleteAudioClip(selectedItem.value as Clip); + } else { + deleteKeyframe(selectedItem.value as Keyframe); + } selectedItem.value = null; }, [deleteKeyframe]); diff --git a/app/pages/PageEnigma/comps/Timeline/TrackClip.tsx b/app/pages/PageEnigma/comps/Timeline/TrackClip.tsx index 1a6e4bf5ae..d12685ac28 100644 --- a/app/pages/PageEnigma/comps/Timeline/TrackClip.tsx +++ b/app/pages/PageEnigma/comps/Timeline/TrackClip.tsx @@ -1,8 +1,7 @@ import { useMouseEventsClip } from "./utils/useMouseEventsClip"; import { useState } from "react"; -import { scale } from "~/pages/PageEnigma/store"; +import { scale, selectedItem } from "~/pages/PageEnigma/store"; import { Clip } from "~/pages/PageEnigma/models/track"; -import { selectedItem } from "~/pages/PageEnigma/store/selectedItem"; interface Props { min: number; diff --git a/app/pages/PageEnigma/comps/Timeline/TrackClips.tsx b/app/pages/PageEnigma/comps/Timeline/TrackClips.tsx index f07ee1f593..565944df23 100644 --- a/app/pages/PageEnigma/comps/Timeline/TrackClips.tsx +++ b/app/pages/PageEnigma/comps/Timeline/TrackClips.tsx @@ -37,15 +37,29 @@ export const TrackClips = ({ const trackType = type ?? style; function onPointerOver() { - if (dragType.value !== trackType) { - return; + if (dragType.value === "animations") { + if (dragType.value !== trackType) { + return; + } + } + if (dragType.value === "audio") { + if (["lipSync", "audio"].indexOf(trackType) === -1) { + return; + } } dropId.value = id; } function onPointerMove(event: PointerEvent) { - if (dragType.value !== trackType) { - return; + if (dragType.value === "animations") { + if (dragType.value !== trackType) { + return; + } + } + if (dragType.value === "audio") { + if (["lipSync", "audio"].indexOf(trackType) === -1) { + return; + } } const track = document.getElementById(`track-${trackType}-${id}`); if (!track) { diff --git a/app/pages/PageEnigma/comps/Timeline/TrackKeyFrame.tsx b/app/pages/PageEnigma/comps/Timeline/TrackKeyFrame.tsx index 001001a3e5..c828baebc0 100644 --- a/app/pages/PageEnigma/comps/Timeline/TrackKeyFrame.tsx +++ b/app/pages/PageEnigma/comps/Timeline/TrackKeyFrame.tsx @@ -1,15 +1,13 @@ import { Keyframe } from "~/pages/PageEnigma/models/track"; import { useState } from "react"; -import { scale } from "~/pages/PageEnigma/store"; +import { scale, selectedItem } from "~/pages/PageEnigma/store"; import { useMouseEventsKeyframe } from "~/pages/PageEnigma/comps/Timeline/utils/useMouseEventsKeyframe"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import { faSortUpDown } from "@fortawesome/pro-solid-svg-icons"; -import { selectedItem } from "~/pages/PageEnigma/store/selectedItem"; interface Props { min: number; max: number; - style: "character" | "camera" | "audio" | "objects"; keyframe: Keyframe; updateKeyframe: (options: { id: string; offset: number }) => void; } @@ -18,7 +16,6 @@ export const TrackKeyFrame = ({ keyframe, min, max, - style, updateKeyframe, }: Props) => { const [offset, setOffset] = useState(keyframe.offset); @@ -33,32 +30,19 @@ export const TrackKeyFrame = ({ const selectedKeyframeId = (selectedItem.value as Keyframe | null)?.keyframe_uuid ?? ""; - const classes = [ - "absolute", - keyframe.keyframe_uuid === selectedKeyframeId - ? `bg-${style}-selected` - : `bg-${style}-clip`, - ]; - return ( + /> ); }; diff --git a/app/pages/PageEnigma/contexts/TrackContext/TrackContext.tsx b/app/pages/PageEnigma/contexts/TrackContext/TrackContext.tsx index 9ff5ba07b0..adc2738f8e 100644 --- a/app/pages/PageEnigma/contexts/TrackContext/TrackContext.tsx +++ b/app/pages/PageEnigma/contexts/TrackContext/TrackContext.tsx @@ -3,7 +3,6 @@ import { MediaClip, Keyframe, QueueKeyframe, - Clip, } from "~/pages/PageEnigma/models/track"; export const TrackContext = createContext<{ @@ -16,11 +15,7 @@ export const TrackContext = createContext<{ audioClips: MediaClip[]; // drag and drop - startDrag: ( - type: "animations" | "lipSync", - id: string, - length: number, - ) => void; + startDrag: (type: "animations" | "audio", id: string, length: number) => void; endDrag: () => void; }>({ addKeyframe: () => {}, diff --git a/app/pages/PageEnigma/contexts/TrackContext/TrackProvider.tsx b/app/pages/PageEnigma/contexts/TrackContext/TrackProvider.tsx index 642b1215fa..c20b871c69 100644 --- a/app/pages/PageEnigma/contexts/TrackContext/TrackProvider.tsx +++ b/app/pages/PageEnigma/contexts/TrackContext/TrackProvider.tsx @@ -1,14 +1,11 @@ import { TrackContext } from "~/pages/PageEnigma/contexts/TrackContext/TrackContext"; import { ReactNode, useCallback, useEffect, useMemo, useState } from "react"; -import { - ClipType, - Keyframe, - Clip, - MediaClip, -} from "~/pages/PageEnigma/models/track"; +import { ClipType, MediaClip } from "~/pages/PageEnigma/models/track"; import useUpdateDragDrop from "~/pages/PageEnigma/contexts/TrackContext/utils/useUpdateDragDrop"; import { addCharacterAnimation, + addCharacterAudio, + addGlobalAudio, canDrop, dragId, dragType, @@ -59,6 +56,20 @@ export const TrackProvider = ({ children }: Props) => { offset: dropOffset.value, }); } + if (dragType.value === "audio") { + addCharacterAudio({ + clipId: dragId.value!, + characterId: dropId.value, + audioClips, + offset: dropOffset.value, + }); + addGlobalAudio({ + clipId: dragId.value!, + audioId: dropId.value, + audioClips, + offset: dropOffset.value, + }); + } } endDrag(); }, [animationClips, endDrag]); diff --git a/app/pages/PageEnigma/contexts/TrackContext/utils/useUpdateDragDrop.ts b/app/pages/PageEnigma/contexts/TrackContext/utils/useUpdateDragDrop.ts index 32d7d9192c..40c397c624 100644 --- a/app/pages/PageEnigma/contexts/TrackContext/utils/useUpdateDragDrop.ts +++ b/app/pages/PageEnigma/contexts/TrackContext/utils/useUpdateDragDrop.ts @@ -8,7 +8,7 @@ import { export default function useUpdateDragDrop() { const startDrag = useCallback( - (type: "animations" | "lipSync", id: string, length: number) => { + (type: "animations" | "audio", id: string, length: number) => { dragId.value = id; dragType.value = type; clipLength.value = length; diff --git a/app/pages/PageEnigma/store/audioGroup.ts b/app/pages/PageEnigma/store/audioGroup.ts index f037fd3552..f693976c45 100644 --- a/app/pages/PageEnigma/store/audioGroup.ts +++ b/app/pages/PageEnigma/store/audioGroup.ts @@ -48,12 +48,22 @@ export function updateAudio({ }; } -export function addGlobalAudio( - dragId: string, - audioClips: MediaClip[], - offset: number, -) { - const clip = audioClips.find((row) => row.media_id === dragId); +export function addGlobalAudio({ + clipId, + audioId, + audioClips, + offset, +}: { + clipId: string; + audioId: string; + audioClips: MediaClip[]; + offset: number; +}) { + if (audioGroup.value.id !== audioId) { + return; + } + + const clip = audioClips.find((row) => row.media_id === clipId); if (!clip) { return; } diff --git a/app/pages/PageEnigma/store/characterGroups.ts b/app/pages/PageEnigma/store/characterGroups.ts index 9f76192685..3d972fe95f 100644 --- a/app/pages/PageEnigma/store/characterGroups.ts +++ b/app/pages/PageEnigma/store/characterGroups.ts @@ -81,7 +81,7 @@ export function updateCharacters({ return { ...character, - positionClips: newPositionKeyframes, + positionKeyframes: newPositionKeyframes, }; }); } diff --git a/app/pages/PageEnigma/store/dragAndDrop.ts b/app/pages/PageEnigma/store/dragAndDrop.ts index 7d0c98a940..0f286f36d6 100644 --- a/app/pages/PageEnigma/store/dragAndDrop.ts +++ b/app/pages/PageEnigma/store/dragAndDrop.ts @@ -1,6 +1,6 @@ import { signal } from "@preact/signals-core"; -export const dragType = signal<"animations" | "lipSync" | null>(null); +export const dragType = signal<"animations" | "audio" | null>(null); export const dragId = signal(null); export const canDrop = signal(false); export const overTimeline = signal(false); diff --git a/app/pages/PageEnigma/store/index.ts b/app/pages/PageEnigma/store/index.ts index 2c8a560d91..f10490e10c 100644 --- a/app/pages/PageEnigma/store/index.ts +++ b/app/pages/PageEnigma/store/index.ts @@ -3,5 +3,6 @@ export * from "./cameraGroup"; export * from "./characterGroups"; export * from "./dragAndDrop"; export * from "./objectGroup"; +export * from "./selectedItem"; export * from "./sizing"; export * from "./timing"; diff --git a/app/pages/PageEnigma/store/objectGroup.ts b/app/pages/PageEnigma/store/objectGroup.ts index 9e068770bc..f2778dad68 100644 --- a/app/pages/PageEnigma/store/objectGroup.ts +++ b/app/pages/PageEnigma/store/objectGroup.ts @@ -21,10 +21,27 @@ export function updateObject({ id, offset }: { id: string; offset: number }) { objects: oldObject.objects.map((object) => ({ object_uuid: object.object_uuid, name: object.name, - keyframes: object.keyframes.map((keyFrame) => ({ - ...keyFrame, - offset: keyFrame.keyframe_uuid === id ? offset : keyFrame.offset, - })), + keyframes: object.keyframes.map((keyFrame) => { + if (keyFrame.keyframe_uuid !== id) { + return { + ...keyFrame, + }; + } + + Queue.publish({ + queueName: QueueNames.TO_ENGINE, + action: toEngineActions.UPDATE_KEYFRAME, + data: { + ...keyFrame, + offset, + }, + }); + + return { + ...keyFrame, + offset, + }; + }), })), }; } @@ -78,7 +95,7 @@ export function deleteObjectKeyframe(keyframe: Keyframe) { const obj = oldObjectGroup.objects.find( (row) => row.object_uuid === keyframe.object_uuid, ); - console.log("delete", obj); + console.log("delete", obj, keyframe.keyframe_uuid); if (!obj) { return oldObjectGroup; } @@ -98,7 +115,7 @@ export function deleteObjectKeyframe(keyframe: Keyframe) { ]; if (newKeyframes.length) { - return { + objectGroup.value = { ...oldObjectGroup, objects: [ ...oldObjectGroup.objects.map((object) => ({ @@ -109,6 +126,7 @@ export function deleteObjectKeyframe(keyframe: Keyframe) { })), ], }; + return; } objectGroup.value = { ...oldObjectGroup, From f31803542589f86befe2673e9cb8e4ddfa6cc679 Mon Sep 17 00:00:00 2001 From: FromTheLOLAshes Date: Tue, 2 Apr 2024 07:40:13 +0700 Subject: [PATCH 2/3] Split camera and object keyframes --- app/pages/PageEnigma/comps/Timeline/Camera.tsx | 2 ++ app/pages/PageEnigma/comps/Timeline/TrackKeyFrames.tsx | 1 - app/pages/PageEnigma/js/editor.ts | 8 ++++++-- app/pages/PageEnigma/store/cameraGroup.ts | 1 + 4 files changed, 9 insertions(+), 3 deletions(-) diff --git a/app/pages/PageEnigma/comps/Timeline/Camera.tsx b/app/pages/PageEnigma/comps/Timeline/Camera.tsx index e60119b680..473d108b74 100644 --- a/app/pages/PageEnigma/comps/Timeline/Camera.tsx +++ b/app/pages/PageEnigma/comps/Timeline/Camera.tsx @@ -1,7 +1,9 @@ import { cameraGroup, fullWidth, updateCamera } from "~/pages/PageEnigma/store"; import { TrackKeyFrames } from "~/pages/PageEnigma/comps/Timeline/TrackKeyFrames"; +import { useSignals } from "@preact/signals-react/runtime"; export const Camera = () => { + useSignals(); const { keyframes } = cameraGroup.value!; return ( diff --git a/app/pages/PageEnigma/comps/Timeline/TrackKeyFrames.tsx b/app/pages/PageEnigma/comps/Timeline/TrackKeyFrames.tsx index a5c5edb377..aea6f7334c 100644 --- a/app/pages/PageEnigma/comps/Timeline/TrackKeyFrames.tsx +++ b/app/pages/PageEnigma/comps/Timeline/TrackKeyFrames.tsx @@ -34,7 +34,6 @@ export const TrackKeyFrames = ({ ? keyframes[index + 1].offset : filmLength.value * 60 } - style={style} updateKeyframe={updateKeyframe} keyframe={keyframe} /> diff --git a/app/pages/PageEnigma/js/editor.ts b/app/pages/PageEnigma/js/editor.ts index 4d89a12b95..4aa6ab2528 100644 --- a/app/pages/PageEnigma/js/editor.ts +++ b/app/pages/PageEnigma/js/editor.ts @@ -12,7 +12,7 @@ import { SMAAPass } from "three/addons/postprocessing/SMAAPass.js"; import { SAOPass } from "three/addons/postprocessing/SAOPass.js"; import { UnrealBloomPass } from "three/addons/postprocessing/UnrealBloomPass.js"; import { BokehPass } from "three/addons/postprocessing/BokehPass.js"; -import { FFmpeg, createFFmpeg, fetchFile } from "@ffmpeg/ffmpeg"; +import { createFFmpeg, fetchFile, FFmpeg } from "@ffmpeg/ffmpeg"; import AudioEngine from "./audio_engine.js"; import TransformEngine from "./transform_engine.js"; import { TimeLine, TimelineDataState } from "./timeline.js"; @@ -22,6 +22,7 @@ import { AnimationEngine } from "./animation_engine.js"; import { PointerLockControls } from "three/addons/controls/PointerLockControls.js"; import { APPUI_ACTION_TYPES } from "../reducers"; +import { ClipGroup } from "~/pages/PageEnigma/models/track"; class EditorState { // { @@ -1144,7 +1145,10 @@ class Editor { this.dispatchAppUiState({ type: APPUI_ACTION_TYPES.SHOW_CONTROLPANELS_SCENEOBJECT, payload: { - group: "object", // TODO: add meta data to determine what it is a camera or a object or a character into prefab clips + group: + this.selected.name === "::CAM::" + ? ClipGroup.CAMERA + : ClipGroup.OBJECT, // TODO: add meta data to determine what it is a camera or a object or a character into prefab clips object_uuid: this.selected.uuid, object_name: this.selected.name, version: this.version, diff --git a/app/pages/PageEnigma/store/cameraGroup.ts b/app/pages/PageEnigma/store/cameraGroup.ts index 698abdcde3..1330f9b872 100644 --- a/app/pages/PageEnigma/store/cameraGroup.ts +++ b/app/pages/PageEnigma/store/cameraGroup.ts @@ -33,6 +33,7 @@ export function updateCamera({ id, offset }: { id: string; offset: number }) { } export function addCameraKeyframe(keyframe: QueueKeyframe, offset: number) { + console.log("cam", keyframe); const newKeyframe = { version: keyframe.version, keyframe_uuid: uuid.v4(), From 871890840aa4bfaedc4f0bfc5a65d187caa2d80b Mon Sep 17 00:00:00 2001 From: FromTheLOLAshes Date: Tue, 2 Apr 2024 07:44:22 +0700 Subject: [PATCH 3/3] Add object name to the object track --- app/pages/PageEnigma/comps/Timeline/ObjectTrack.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/pages/PageEnigma/comps/Timeline/ObjectTrack.tsx b/app/pages/PageEnigma/comps/Timeline/ObjectTrack.tsx index 380442b95e..a63c6f4e2d 100644 --- a/app/pages/PageEnigma/comps/Timeline/ObjectTrack.tsx +++ b/app/pages/PageEnigma/comps/Timeline/ObjectTrack.tsx @@ -15,7 +15,7 @@ export const ObjectTrack = () => {