improve ui

add track properties editor

app/src/stores/entities.store.ts

@@ -7,6 +7,7 @@ import { create } from "zustand";
 interface EntitiesStore {
   entities: z.input<typeof AnimatedEntities>;
   selectedEntity: number | undefined;
+  selectedKeyframe: string | undefined;
   selectEntity: (index: number) => void;
   deselectEntity: () => void;
   setEntities: (entities: z.input<typeof AnimatedEntities>) => void;
@@ -14,6 +15,8 @@ interface EntitiesStore {
     index: number,
     entity: Partial<z.input<typeof AnimatedEntity>>
   ) => void;
+
+  deleteEntity: (index: number) => void;
   updateEntityById: (
     id: string,
     entity: Partial<z.input<typeof AnimatedEntity>>
@@ -22,6 +25,7 @@ interface EntitiesStore {
 
 const useEntitiesStore = create<EntitiesStore>((set) => ({
   entities: EXAMPLE_ANIMATED_ENTITIES,
+  selectedKeyframe: undefined,
   selectEntity: (index) => set(() => ({ selectedEntity: index })),
   deselectEntity: () => set(() => ({ selectedEntity: undefined })),
   selectedEntity: undefined,
@@ -36,6 +40,14 @@ const useEntitiesStore = create<EntitiesStore>((set) => ({
         >;
       });
 
+      return { entities: nextEntities };
+    }),
+  deleteEntity: (index) =>
+    set(({ entities }) => {
+      const nextEntities = produce(entities, (draft) => {
+        draft.splice(index, 1);
+      });
+
       return { entities: nextEntities };
     }),
   updateEntity: (index, entity) =>

app/src/stores/keyframe.store.ts

@@ -0,0 +1,15 @@
+import { create } from "zustand";
+
+interface KeyframeStore {
+  selectedKeyframe: string | undefined;
+  selectKeyframe: (id: string) => void;
+  deselectKeyframe: () => void;
+}
+
+const useKeyframeStore = create<KeyframeStore>((set) => ({
+  selectKeyframe: (id) => set({ selectedKeyframe: id }),
+  deselectKeyframe: () => set({ selectedKeyframe: undefined }),
+  selectedKeyframe: undefined,
+}));
+
+export { useKeyframeStore };

app/src/stores/render-state.store.ts

@@ -6,14 +6,16 @@ interface RenderStateStore {
   renderState: z.infer<typeof RenderState>;
   playing: boolean;
   setPlaying: (playing: boolean) => void;
+  togglePlaying: () => void;
   setCurrentFrame: (target: number) => void;
 }
 
-const useRenderStateStore = create<RenderStateStore>((set) => ({
+const useRenderStateStore = create<RenderStateStore>((set, get) => ({
   renderState: {
     curr_frame: 20,
   },
   playing: false,
+  togglePlaying: () => set({ playing: !get().playing }),
   setPlaying: (playing) => set({ playing }),
   setCurrentFrame: (target) =>
     set((store) => {

app/src/stores/timeline.store.ts

@@ -7,7 +7,7 @@ interface TimelineStore {
 }
 
 const useTimelineStore = create<TimelineStore>((set) => ({
-  fps: 30,
+  fps: 60,
   size: [1280, 720],
   duration: 10.0,
 }));