Clear existing data on load

app/pages/PageEnigma/comps/Timeline/utils/useQueueHandler.ts

@@ -37,7 +37,7 @@ const LOADING_FUNCTIONS: Record<ClipGroup, (item: ClipUI) => void> = {
 
 export function useQueueHandler() {
   useSignals();
-  const { addKeyframe } = useContext(TrackContext);
+  const { addKeyframe, clearExistingData } = useContext(TrackContext);
 
   const handleFromEngineActions = useCallback(({ action, data }: Arguments) => {
     console.log("FROM ENGINE", action, data);
@@ -46,6 +46,7 @@ export function useQueueHandler() {
         currentTime.value = (data as UpdateTime).currentTime;
         break;
       case fromEngineActions.UPDATE_TIME_LINE:
+        clearExistingData();
         (data as ClipUI[]).forEach((item) => {
           LOADING_FUNCTIONS[item.group](item);
         });

app/pages/PageEnigma/contexts/TrackContext/TrackContext.tsx

@@ -6,6 +6,9 @@ export const TrackContext = createContext<{
   addKeyframe: (keyframe: QueueKeyframe, offset: number) => void;
   deleteKeyframe: (keyframe: Keyframe) => void;
 
+  // misc
+  clearExistingData: () => void;
+
   // drag and drop
   startDrag: (item: MediaItem) => void;
   endDrag: () => void;
@@ -13,6 +16,8 @@ export const TrackContext = createContext<{
   addKeyframe: () => {},
   deleteKeyframe: () => {},
 
+  clearExistingData: () => {},
+
   startDrag: () => {},
   endDrag: () => {},
 });

app/pages/PageEnigma/contexts/TrackContext/TrackProvider.tsx

@@ -12,6 +12,10 @@ import {
   dropId,
   dropOffset,
   addObject,
+  characterGroups,
+  cameraGroup,
+  audioGroup,
+  objectGroup,
 } from "~/pages/PageEnigma/store";
 import useUpdateKeyframe from "~/pages/PageEnigma/contexts/TrackContext/utils/useUpdateKeyframe";
 
@@ -67,14 +71,34 @@ export const TrackProvider = ({ children }: Props) => {
     endDrag();
   }, [endDrag]);
 
+  const clearExistingData = useCallback(() => {
+    characterGroups.value = [];
+    cameraGroup.value = {
+      id: "CG1",
+      keyframes: [],
+    };
+    audioGroup.value = {
+      id: "AG-1",
+      clips: [],
+      muted: false,
+    };
+    objectGroup.value = {
+      id: "OG1",
+      objects: [],
+    };
+  }, []);
+
   const values = useMemo(() => {
     return {
       ...keyframes,
 
+      clearExistingData,
+
       ...dragDrop,
       endDrag: dropClip,
     };
-  }, [keyframes, dragDrop, dropClip]);
+  }, [keyframes, dragDrop, dropClip, clearExistingData]);
+
   return (
     <TrackContext.Provider value={values}>{children}</TrackContext.Provider>
   );