From 2a21759e242fef03796e8cd2557f84993ab38bce Mon Sep 17 00:00:00 2001 From: FromTheLOLAshes Date: Mon, 1 Apr 2024 15:37:37 +0700 Subject: [PATCH] Fix delete --- .../PageEnigma/comps/Timeline/Timeline.tsx | 21 +++++++-- .../PageEnigma/comps/Timeline/TrackClip.tsx | 47 +++++++++---------- .../comps/Timeline/TrackKeyFrame.tsx | 9 ++-- .../contexts/TrackContext/TrackContext.tsx | 9 ++-- .../contexts/TrackContext/TrackProvider.tsx | 47 +++++++++++++++++-- .../TrackContext/utils/useUpdateKeyframe.ts | 1 + app/pages/PageEnigma/store/audioGroup.ts | 8 ++-- app/pages/PageEnigma/store/characterGroups.ts | 14 +++--- app/pages/PageEnigma/store/objectGroup.ts | 17 +++++-- 9 files changed, 114 insertions(+), 59 deletions(-) diff --git a/app/pages/PageEnigma/comps/Timeline/Timeline.tsx b/app/pages/PageEnigma/comps/Timeline/Timeline.tsx index 12a741c1e0..e449cd7baf 100644 --- a/app/pages/PageEnigma/comps/Timeline/Timeline.tsx +++ b/app/pages/PageEnigma/comps/Timeline/Timeline.tsx @@ -16,11 +16,21 @@ import { TimerGrid } from "~/pages/PageEnigma/comps/TimerGrid/TimerGrid"; import { Scrubber } from "~/pages/PageEnigma/comps/Scrubber/Scrubber"; 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"; + +function getItemType(item: Clip | Keyframe | null) { + if (!item) { + return ""; + } + return (item as Clip).clip_uuid ? "clip" : "keyframe"; +} export const Timeline = () => { useSignals(); const { selectedItem } = useContext(TrackContext); const [dialogOpen, setDialogOpen] = useState(false); + const { deleteKeyframe } = useUpdateKeyframe(); // implement the code to handle incoming messages from the Engine useQueueHandler(); @@ -32,6 +42,8 @@ export const Timeline = () => { const onDeleteAsk = useCallback( (event: KeyboardEvent) => { if (["Backspace", "Delete"].indexOf(event.key) > -1 && selectedItem) { + event.stopPropagation(); + event.preventDefault(); setDialogOpen(true); } }, @@ -39,9 +51,10 @@ export const Timeline = () => { ); const onDelete = useCallback(() => { - deleteCharacterClip(selectedItem!); - deleteAudioClip(selectedItem!); - }, [selectedItem]); + deleteCharacterClip(selectedItem as Clip); + deleteAudioClip(selectedItem as Clip); + deleteKeyframe(selectedItem as Keyframe); + }, [selectedItem, deleteKeyframe]); useEffect(() => { document.addEventListener("keydown", onDeleteAsk); @@ -69,7 +82,7 @@ export const Timeline = () => { setDialogOpen(false)} onOk={() => { diff --git a/app/pages/PageEnigma/comps/Timeline/TrackClip.tsx b/app/pages/PageEnigma/comps/Timeline/TrackClip.tsx index e6d3c8a66b..2e7a47c64b 100644 --- a/app/pages/PageEnigma/comps/Timeline/TrackClip.tsx +++ b/app/pages/PageEnigma/comps/Timeline/TrackClip.tsx @@ -1,13 +1,8 @@ import { useMouseEventsClip } from "./utils/useMouseEventsClip"; import { TrackContext } from "~/pages/PageEnigma/contexts/TrackContext/TrackContext"; -import { useCallback, useContext, useState } from "react"; +import { useContext, useState } from "react"; import { scale } from "~/pages/PageEnigma/store"; -import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; -import { faPlay } from "@fortawesome/pro-solid-svg-icons"; import { Clip } from "~/pages/PageEnigma/models/track"; -import Queue from "~/pages/PageEnigma/Queue/Queue"; -import { QueueNames } from "~/pages/PageEnigma/Queue/QueueNames"; -import { toEngineActions } from "~/pages/PageEnigma/Queue/toEngineActions"; interface Props { min: number; @@ -31,24 +26,26 @@ export const TrackClip = ({ clip, min, max, style, updateClip }: Props) => { setState, ); + const selectedClipId = (selectedItem as Clip | null)?.clip_uuid ?? ""; + const { length, offset } = state; - const onPlayClick = useCallback( - (event: React.MouseEvent) => { - event.stopPropagation(); - event.preventDefault(); - Queue.publish({ - queueName: QueueNames.TO_ENGINE, - action: toEngineActions.PLAY_CLIP, - data: clip, - }); - }, - [clip], - ); + // const onPlayClick = useCallback( + // (event: React.MouseEvent) => { + // event.stopPropagation(); + // event.preventDefault(); + // Queue.publish({ + // queueName: QueueNames.TO_ENGINE, + // action: toEngineActions.PLAY_CLIP, + // data: clip, + // }); + // }, + // [clip], + // ); const classes = [ "absolute", - clip.clip_uuid === selectedItem + clip.clip_uuid === selectedClipId ? `bg-${style}-selected` : `bg-${style}-clip`, ]; @@ -71,7 +68,7 @@ export const TrackClip = ({ clip, min, max, style, updateClip }: Props) => { ...classes, "rounded-l-lg", "block h-full", - clip.clip_uuid === selectedItem + clip.clip_uuid === selectedClipId ? "border border-b-2 border-l-2 border-r-0 border-t-2 border-white focus-visible:outline-0" : "", ].join(" ")} @@ -81,13 +78,13 @@ export const TrackClip = ({ clip, min, max, style, updateClip }: Props) => { cursor: "w-resize", }} onPointerDown={(event) => onPointerDown(event, "left")} - onClick={() => selectItem(clip.clip_uuid)} + onClick={() => selectItem(clip)} /> diff --git a/app/pages/PageEnigma/contexts/TrackContext/TrackContext.tsx b/app/pages/PageEnigma/contexts/TrackContext/TrackContext.tsx index 38a514de09..da96c5b655 100644 --- a/app/pages/PageEnigma/contexts/TrackContext/TrackContext.tsx +++ b/app/pages/PageEnigma/contexts/TrackContext/TrackContext.tsx @@ -1,12 +1,9 @@ import { createContext } from "react"; import { - AudioGroup, - CameraGroup, - CharacterGroup, - ObjectGroup, MediaClip, Keyframe, QueueKeyframe, + Clip, } from "~/pages/PageEnigma/models/track"; export const TrackContext = createContext<{ @@ -15,8 +12,8 @@ export const TrackContext = createContext<{ deleteKeyframe: (keyframe: Keyframe) => void; // current - only select one item - will be replaced - selectedItem: string | null; - selectItem: (itemId: string) => void; + selectedItem: Clip | Keyframe | null; + selectItem: (item: Clip | Keyframe) => void; // sidebar clips animationClips: MediaClip[]; diff --git a/app/pages/PageEnigma/contexts/TrackContext/TrackProvider.tsx b/app/pages/PageEnigma/contexts/TrackContext/TrackProvider.tsx index 106d839efe..06115e8d8c 100644 --- a/app/pages/PageEnigma/contexts/TrackContext/TrackProvider.tsx +++ b/app/pages/PageEnigma/contexts/TrackContext/TrackProvider.tsx @@ -1,6 +1,11 @@ import { TrackContext } from "~/pages/PageEnigma/contexts/TrackContext/TrackContext"; import { ReactNode, useCallback, useEffect, useMemo, useState } from "react"; -import { ClipType, MediaClip } from "~/pages/PageEnigma/models/track"; +import { + ClipType, + Keyframe, + Clip, + MediaClip, +} from "~/pages/PageEnigma/models/track"; import useUpdateDragDrop from "~/pages/PageEnigma/contexts/TrackContext/utils/useUpdateDragDrop"; import { addCharacterAnimation, @@ -22,9 +27,12 @@ export const TrackProvider = ({ children }: Props) => { const { endDrag, ...dragDrop } = useUpdateDragDrop(); - const [selectedItem, setSelectedClip] = useState(null); - const selectItem = useCallback((clipId: string | null) => { - setSelectedClip(clipId); + const [selectedItem, setSelectedItem] = useState( + null, + ); + const selectItem = useCallback((item: Clip | Keyframe) => { + console.log("item", item); + setSelectedItem(item); }, []); const [animationClips, setAnimationClips] = useState([]); @@ -98,7 +106,36 @@ export const TrackProvider = ({ children }: Props) => { name: "Walk", }, ]); - setAudioClips([]); + setAudioClips([ + { + version: 1, + media_id: uuid.v4(), + type: ClipType.ANIMATION, + length: 25, + name: "Sing", + }, + { + version: 1, + media_id: uuid.v4(), + type: ClipType.AUDIO, + length: 25, + name: "Chatter", + }, + { + version: 1, + media_id: uuid.v4(), + type: ClipType.AUDIO, + length: 25, + name: "Talk", + }, + { + version: 1, + media_id: uuid.v4(), + type: ClipType.AUDIO, + length: 25, + name: "Yell", + }, + ]); setScale(1); setLength(12); }, []); diff --git a/app/pages/PageEnigma/contexts/TrackContext/utils/useUpdateKeyframe.ts b/app/pages/PageEnigma/contexts/TrackContext/utils/useUpdateKeyframe.ts index 740739e467..92ae8e8894 100644 --- a/app/pages/PageEnigma/contexts/TrackContext/utils/useUpdateKeyframe.ts +++ b/app/pages/PageEnigma/contexts/TrackContext/utils/useUpdateKeyframe.ts @@ -36,6 +36,7 @@ export default function useUpdateKeyframe() { }, []); const deleteKeyframe = useCallback((keyframe: Keyframe) => { + console.log("del", keyframe); DELETE_KEYFRAME[keyframe.group](keyframe); }, []); diff --git a/app/pages/PageEnigma/store/audioGroup.ts b/app/pages/PageEnigma/store/audioGroup.ts index 07be9b937e..f037fd3552 100644 --- a/app/pages/PageEnigma/store/audioGroup.ts +++ b/app/pages/PageEnigma/store/audioGroup.ts @@ -115,17 +115,17 @@ export function selectAudioClip(clipId: string) { }; } -export function deleteAudioClip(clipId: string) { +export function deleteAudioClip(clip: Clip) { const oldAudioGroup = audioGroup.value; audioGroup.value = { ...oldAudioGroup, clips: [ - ...oldAudioGroup.clips.filter((clip) => { - if (clip.clip_uuid === clipId) { + ...oldAudioGroup.clips.filter((row) => { + if (row.clip_uuid === clip.clip_uuid) { Queue.publish({ queueName: QueueNames.TO_ENGINE, action: toEngineActions.DELETE_CLIP, - data: clip!, + data: row, }); return false; } diff --git a/app/pages/PageEnigma/store/characterGroups.ts b/app/pages/PageEnigma/store/characterGroups.ts index 7311bc5185..9f76192685 100644 --- a/app/pages/PageEnigma/store/characterGroups.ts +++ b/app/pages/PageEnigma/store/characterGroups.ts @@ -283,27 +283,27 @@ export function selectCharacterClip(clipId: string) { })); } -export function deleteCharacterClip(clipId: string) { +export function deleteCharacterClip(clip: Clip) { const oldCharacterGroups = characterGroups.value; characterGroups.value = oldCharacterGroups.map((character) => ({ ...character, - animationClips: character.animationClips.filter((clip) => { - if (clip.clip_uuid === clipId) { + animationClips: character.animationClips.filter((row) => { + if (row.clip_uuid === clip.clip_uuid) { Queue.publish({ queueName: QueueNames.TO_ENGINE, action: toEngineActions.DELETE_CLIP, - data: clip!, + data: row, }); return false; } return true; }), - lipSyncClips: character.lipSyncClips.filter((clip) => { - if (clip.clip_uuid === clipId) { + lipSyncClips: character.lipSyncClips.filter((row) => { + if (row.clip_uuid === clip.clip_uuid) { Queue.publish({ queueName: QueueNames.TO_ENGINE, action: toEngineActions.DELETE_CLIP, - data: clip!, + data: row, }); return false; } diff --git a/app/pages/PageEnigma/store/objectGroup.ts b/app/pages/PageEnigma/store/objectGroup.ts index 6ba564e75f..9e068770bc 100644 --- a/app/pages/PageEnigma/store/objectGroup.ts +++ b/app/pages/PageEnigma/store/objectGroup.ts @@ -4,7 +4,6 @@ import { ObjectGroup, QueueKeyframe, } from "~/pages/PageEnigma/models/track"; -import { useCallback } from "react"; import * as uuid from "uuid"; import Queue from "~/pages/PageEnigma/Queue/Queue"; import { QueueNames } from "~/pages/PageEnigma/Queue/QueueNames"; @@ -31,7 +30,6 @@ export function updateObject({ id, offset }: { id: string; offset: number }) { } export function addObjectKeyframe(keyframe: QueueKeyframe, offset: number) { - console.log(keyframe, offset); const oldObjectGroup = objectGroup.value; const obj = oldObjectGroup.objects.find( (row) => row.object_uuid === keyframe.object_uuid, @@ -80,14 +78,23 @@ export function deleteObjectKeyframe(keyframe: Keyframe) { const obj = oldObjectGroup.objects.find( (row) => row.object_uuid === keyframe.object_uuid, ); + console.log("delete", obj); if (!obj) { return oldObjectGroup; } const newKeyframes = [ - ...obj.keyframes.filter( - (row) => row.keyframe_uuid !== keyframe.keyframe_uuid, - ), + ...obj.keyframes.filter((row) => { + if (row.keyframe_uuid === keyframe.keyframe_uuid) { + Queue.publish({ + queueName: QueueNames.TO_ENGINE, + action: toEngineActions.DELETE_KEYFRAME, + data: row, + }); + return false; + } + return true; + }), ]; if (newKeyframes.length) {