bak

src/stores/scene.ts

@@ -9,6 +9,7 @@ import type {
   Keyframe,
   Layer,
   Scene,
+  TrackGroup,
 } from '@/types/scene'
 import { DEFAULT_BASE_PROPS } from '@/types/scene'
 import { sampleLayer } from '@/lib/interpolate'
@@ -105,21 +106,50 @@ function normalizeScene(scene: Scene): Scene {
   scene.clips ||= []
   scene.clipTracks ||= []
   scene.clipInstances ||= []
-  if (!scene.trackOrder) {
-    scene.trackOrder = []
-    for (const l of scene.layers) scene.trackOrder.push(l.id)
-    for (const t of scene.clipTracks) scene.trackOrder.push(t.id)
-  } else {
-    const known = new Set<string>()
-    for (const l of scene.layers) known.add(l.id)
-    for (const t of scene.clipTracks) known.add(t.id)
-    scene.trackOrder = scene.trackOrder.filter((id) => known.has(id))
-    for (const l of scene.layers) if (!scene.trackOrder.includes(l.id)) scene.trackOrder.unshift(l.id)
-    for (const t of scene.clipTracks) if (!scene.trackOrder.includes(t.id)) scene.trackOrder.push(t.id)
+  scene.groups ||= []
+
+  const known = new Set<string>()
+  for (const l of scene.layers) known.add(l.id)
+  for (const t of scene.clipTracks) known.add(t.id)
+  for (const g of scene.groups) known.add(g.id)
+
+  // Cleanup: group childIds should only reference existing layers/clipTracks
+  const layerAndClipIds = new Set<string>()
+  for (const l of scene.layers) layerAndClipIds.add(l.id)
+  for (const t of scene.clipTracks) layerAndClipIds.add(t.id)
+  for (const g of scene.groups) {
+    g.childIds = g.childIds.filter((id) => layerAndClipIds.has(id))
+  }
+  // Dedupe: any given track can only be in one group
+  const inGroup = new Set<string>()
+  for (const g of scene.groups) {
+    g.childIds = g.childIds.filter((id) => {
+      if (inGroup.has(id)) return false
+      inGroup.add(id)
+      return true
+    })
+  }
+
+  if (!scene.trackOrder) scene.trackOrder = []
+  scene.trackOrder = scene.trackOrder.filter((id) => known.has(id))
+
+  for (const l of scene.layers) {
+    if (!inGroup.has(l.id) && !scene.trackOrder.includes(l.id)) {
+      scene.trackOrder.unshift(l.id)
+    }
+  }
+  for (const t of scene.clipTracks) {
+    if (!inGroup.has(t.id) && !scene.trackOrder.includes(t.id)) {
+      scene.trackOrder.push(t.id)
+    }
+  }
+  for (const g of scene.groups) {
+    if (!scene.trackOrder.includes(g.id)) scene.trackOrder.push(g.id)
   }
   return scene
 }
 
+
 export const useSceneStore = defineStore('scene', {
   state: (): State => ({
     scene: normalizeScene({
@@ -407,6 +437,12 @@ export const useSceneStore = defineStore('scene', {
       if (clipTrack) {
         if (color === null) delete clipTrack.color
         else clipTrack.color = color
+        return
+      }
+      const group = this.scene.groups?.find((g) => g.id === trackId)
+      if (group) {
+        if (color === null) delete group.color
+        else group.color = color
       }
     },
     shiftKeyframesPosition(
@@ -615,6 +651,62 @@ export const useSceneStore = defineStore('scene', {
       if (!this.scene.clipInstances) return
       this.scene.clipInstances = this.scene.clipInstances.filter((ci) => ci.id !== id)
     },
+    addTrackGroup(name?: string): TrackGroup {
+      const group: TrackGroup = {
+        id: uid(),
+        name: name?.trim() || 'Group',
+        childIds: [],
+      }
+      ;(this.scene.groups ||= []).push(group)
+      ;(this.scene.trackOrder ||= []).unshift(group.id)
+      return group
+    },
+    removeTrackGroup(id: string) {
+      const group = this.scene.groups?.find((g) => g.id === id)
+      if (!group) return
+      const order = this.scene.trackOrder ?? []
+      const idx = order.indexOf(id)
+      if (idx >= 0) order.splice(idx, 1, ...group.childIds)
+      this.scene.groups = (this.scene.groups ?? []).filter((g) => g.id !== id)
+    },
+    renameGroup(id: string, name: string) {
+      const group = this.scene.groups?.find((g) => g.id === id)
+      if (!group) return
+      const n = name.trim()
+      if (n) group.name = n
+    },
+    toggleGroupCollapsed(id: string) {
+      const group = this.scene.groups?.find((g) => g.id === id)
+      if (!group) return
+      group.collapsed = !group.collapsed
+    },
+    moveTrackIntoGroup(trackId: string, groupId: string, atIndex?: number) {
+      const target = this.scene.groups?.find((g) => g.id === groupId)
+      if (!target) return
+      if (trackId === groupId) return
+      // Remove from top-level trackOrder
+      const order = this.scene.trackOrder ?? []
+      const ti = order.indexOf(trackId)
+      if (ti >= 0) order.splice(ti, 1)
+      // Remove from any other group's childIds
+      for (const g of this.scene.groups ?? []) {
+        const gi = g.childIds.indexOf(trackId)
+        if (gi >= 0) g.childIds.splice(gi, 1)
+      }
+      const at = atIndex === undefined ? target.childIds.length : Math.max(0, Math.min(atIndex, target.childIds.length))
+      target.childIds.splice(at, 0, trackId)
+    },
+    moveTrackOutOfGroup(trackId: string, toTopLevelIndex?: number) {
+      for (const g of this.scene.groups ?? []) {
+        const gi = g.childIds.indexOf(trackId)
+        if (gi >= 0) g.childIds.splice(gi, 1)
+      }
+      const order = (this.scene.trackOrder ||= [])
+      if (!order.includes(trackId)) {
+        const at = toTopLevelIndex === undefined ? 0 : Math.max(0, Math.min(toTopLevelIndex, order.length))
+        order.splice(at, 0, trackId)
+      }
+    },
     enterClip(id: string) {
       const clip = this.scene.clips?.find((c) => c.id === id)
       if (!clip) return