Timeline perf improvements (#662)

* move get keyboard tracks out of update function

* cache flattened tracks

* Return a defensive copy from getAllTracks()

Copilot review: getAllTracks() returned the internal flatTracks array
by reference, letting callers mutate cached internal state and
changing prior per-call-fresh-array behavior. Return a shallow copy
instead; the cached array is still used directly on hot internal paths.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>

---------

Co-authored-by: Claude Sonnet 5 <noreply@anthropic.com>

Author: cale-bradbury

packages/timeline/src/TimelineInput.ts

@@ -43,6 +43,23 @@ export const TIMELINE_OPTION_NODE_CONFIGS = defineOptionNodeConfigs([
 // We can use TimelineOptionNodes for strong typing when using useNodeOptionNodes
 export type TimelineOptionNodes = OptionNodesFromConfigs<typeof TIMELINE_OPTION_NODE_CONFIGS>
 
+const getKeyframeTracks = (tracks: TimelineManagerTrack[]): TimelineManagerKeyframeTrack[] => {
+  const keyframeTracks: TimelineManagerKeyframeTrack[] = []
+
+  for (const track of tracks) {
+    if (track.trackType === 'keyframe') {
+      keyframeTracks.push(track)
+      continue
+    }
+
+    if (track.trackType === 'vector') {
+      keyframeTracks.push(...getKeyframeTracks(track.childTracks))
+    }
+  }
+
+  return keyframeTracks
+}
+
 export class TimelineInput implements IPlugin {
   public readonly id = 'timeline-input'
   public readonly name = 'Timeline Input'
@@ -101,26 +118,6 @@ export class TimelineInput implements IPlugin {
         const changedTrackIds = Object.keys(changed)
         if (changedTrackIds.length > 0) {
           const allTracks = getTimelineTracks(engine.getStoreState(), timelineId)
-
-          const getKeyframeTracks = (
-            tracks: TimelineManagerTrack[],
-          ): TimelineManagerKeyframeTrack[] => {
-            const keyframeTracks: TimelineManagerKeyframeTrack[] = []
-
-            for (const track of tracks) {
-              if (track.trackType === 'keyframe') {
-                keyframeTracks.push(track)
-                continue
-              }
-
-              if (track.trackType === 'vector') {
-                keyframeTracks.push(...getKeyframeTracks(track.childTracks))
-              }
-            }
-
-            return keyframeTracks
-          }
-
           const tracks = getKeyframeTracks(allTracks)
 
           const paramTargetNodeIds: string[] = []

packages/timeline/src/TimelineManager.ts

@@ -27,17 +27,34 @@ export class TimelineManager {
   // Number of shot keyframes at or before the position as of the last check, per track.
   private shotKeyframeCount: Map<string, number> = new Map()
   private clock: Clock | null = null
+  // Flattened (vector tracks expanded to their childTracks) view of timelineData.tracks, kept in
+  // sync by buildCache() - avoids re-walking the track tree on every computeValues/emitUpdate call.
+  private flatTracks: TimelineManagerTrack[] = []
 
   constructor(timeline: TimelineManagerData, clock?: Clock) {
     this.timelineData = timeline
     this.clock = clock ?? null
     this.buildCache()
   }
 
+  private flattenTracks(tracks: TimelineManagerTrack[]): TimelineManagerTrack[] {
+    const allTracks: TimelineManagerTrack[] = []
+
+    for (const track of tracks) {
+      allTracks.push(track)
+      if (track.trackType === 'vector') {
+        allTracks.push(...this.flattenTracks(track.childTracks))
+      }
+    }
+
+    return allTracks
+  }
+
   private buildCache() {
     this.sortedKeyframesCache.clear()
     this.resetKeyframeIndexes()
-    for (const track of this.getAllTracks()) {
+    this.flatTracks = this.flattenTracks(this.timelineData.tracks)
+    for (const track of this.flatTracks) {
       switch (track.trackType) {
         case 'audio':
           if (this.audioCache.get(track.id)?.src !== track.audioUrl) {
@@ -104,7 +121,7 @@ export class TimelineManager {
 
   private computeValues(): TrackValues {
     const values: TrackValues = {}
-    for (const track of this.getAllTracks()) {
+    for (const track of this.flatTracks) {
       if (track.trackType !== 'keyframe') continue
       const value = this.getTrackValue(track)
       if (value !== undefined) {
@@ -143,7 +160,7 @@ export class TimelineManager {
     track: TimelineManagerAudioTrack
     audio: HTMLAudioElement
   }[] {
-    return this.getAllTracks()
+    return this.flatTracks
       .filter(
         (track): track is TimelineManagerAudioTrack =>
           track.trackType === 'audio' && this.audioCache.has(track.id),
@@ -176,17 +193,8 @@ export class TimelineManager {
     this.rafId = requestAnimationFrame(this.tick)
   }
 
-  getAllTracks(tracks = this.timelineData.tracks): TimelineManagerTrack[] {
-    const allTracks: TimelineManagerTrack[] = []
-
-    for (const track of tracks) {
-      allTracks.push(track)
-      if (track.trackType === 'vector') {
-        allTracks.push(...this.getAllTracks(track.childTracks))
-      }
-    }
-
-    return allTracks
+  getAllTracks(): TimelineManagerTrack[] {
+    return [...this.flatTracks]
   }
 
   play() {