individual timeline display and track selection

Author: cale-bradbury

apps/desktop/src/renderer/engine.ts

@@ -5,7 +5,7 @@ import { MidiInput, MidiInputPanel, MidiGlobalPanel } from '@hedron-gl/midi-inpu
 import { GamepadInput, GamepadInputPanel, GamepadGlobalPanel } from '@hedron-gl/gamepad-input'
 import { LFOInput, LFOInputPanel } from '@hedron-gl/lfo-input'
 import { AudioInput, AudioInputPanel, AudioGlobalPanel } from '@hedron-gl/audio-input'
-import { TimelineInput, TimelineGlobalPanel } from '@hedron-gl/timeline'
+import { TimelineInput, TimelineGlobalPanel, TimelineInputPanel } from '@hedron-gl/timeline'
 import { SceneControlPlugin, SceneControlGlobalPanel } from '@hedron-gl/scene-control'
 
 export const performanceMonitor = new Stats()
@@ -36,6 +36,7 @@ export const pluginViews = {
     lfo: LFOInputPanel,
     audio: AudioInputPanel,
     gamepad: GamepadInputPanel,
+    ['timeline-track']: TimelineInputPanel,
   },
   globalPanel: {
     ['audio-input']: AudioGlobalPanel,

apps/desktop/src/renderer/handlers/fileHandlers.ts

@@ -93,6 +93,7 @@ export const handleSaveProjectDialog = async (options?: { saveAs?: boolean }) =>
     openedControlGroups,
     selectedNodes,
     selectedInputs,
+    selectedTimelineTrackId,
     selectedSceneId,
     selectedSketches,
   } = appState
@@ -111,6 +112,7 @@ export const handleSaveProjectDialog = async (options?: { saveAs?: boolean }) =>
       selectedSketches,
       selectedNodes,
       selectedInputs,
+      selectedTimelineTrackId,
       openedControlGroups,
     },
   }

packages/app-store/src/appStore.ts

@@ -39,6 +39,7 @@ export interface ProjectData {
     selectedSketches: { [sceneId: string]: string | null }
     selectedNodes: { [sketchId: string]: string | null }
     selectedInputs: { [inputId: string]: string | null }
+    selectedTimelineTrackId: string | null
     openedControlGroups: { [sketchId: string]: Record<number, boolean> }
   }
 }
@@ -48,6 +49,7 @@ export interface AppState {
   selectedSketches: ProjectData['app']['selectedSketches'] // TODO: should be part of ProjectData
   selectedNodes: ProjectData['app']['selectedNodes']
   selectedInputs: ProjectData['app']['selectedInputs']
+  selectedTimelineTrackId: ProjectData['app']['selectedTimelineTrackId']
   openedControlGroups: ProjectData['app']['openedControlGroups']
   sketchesDir: string | null
   globalDialogId: DialogId | null
@@ -56,6 +58,7 @@ export interface AppState {
   sketchesServerBuildResult: BuildResult | null
   setSelectedNode: (sketchID: string, nodeId: string | null) => void
   setSelectedInput: (nodeId: string, inputId: string | null) => void
+  setSelectedTimelineTrackId: (trackId: string | null) => void
   setOpenedControlGroup: (sketchId: string, groupIndex: number, isOpen: boolean) => void
   setSelectedSceneId: (id: string | null) => void
   setSelectedSketch: (sceneId: string, sketchId: string | null) => void
@@ -93,6 +96,7 @@ export const createAppStore = () =>
             currentSavePath: null,
             selectedNodes: {},
             selectedInputs: {},
+            selectedTimelineTrackId: null,
             openedControlGroups: {},
             saveList: [],
             sketchesServerBuildResult: null,
@@ -150,6 +154,11 @@ export const createAppStore = () =>
                 state.selectedInputs[nodeId] = inputId
               })
             },
+            setSelectedTimelineTrackId: (trackId) => {
+              set((state) => {
+                state.selectedTimelineTrackId = trackId
+              })
+            },
             setOpenedControlGroup: (sketchId: string, groupIndex: number, isOpen: boolean) => {
               set((state) => {
                 if (!state.openedControlGroups[sketchId]) {
@@ -211,6 +220,13 @@ export const createAppStore = () =>
                   }
                 }
 
+                if (
+                  state.selectedTimelineTrackId &&
+                  !validNodeIds.has(state.selectedTimelineTrackId)
+                ) {
+                  state.selectedTimelineTrackId = null
+                }
+
                 for (const sketchId of Object.keys(state.openedControlGroups)) {
                   if (!validSketchIds.has(sketchId)) {
                     delete state.openedControlGroups[sketchId]

packages/timeline/src/components/Timeline/Timeline.tsx

@@ -1,8 +1,9 @@
-import { useCallback, useEffect, useRef, useState } from 'react'
+import { useEffect, useRef, useState } from 'react'
 import { usePlayheadScrub } from './usePlayheadScrub'
 import c from './Timeline.module.css'
 import { TimelineTrack } from './TimelineTrack'
 import { TimelineManagerTrack } from '@/types'
+import { findTrackById } from '@/utils/findTrackById'
 
 export interface TimelineProps {
   /** Timeline data */
@@ -12,6 +13,8 @@ export interface TimelineProps {
   }
   /** Current playhead position in milliseconds */
   playheadPositionMs?: number
+  selectedTrackId?: string | null
+  setSelectedTrackId?: (trackId: string | null) => void
   /** Called when the user clicks on the track area to set the playhead */
   onPlayheadChange?: (time: number) => void
   /** Called when a keyframe should be deleted */
@@ -23,34 +26,25 @@ export interface TimelineProps {
 export function Timeline({
   timeline,
   playheadPositionMs = 0,
+  selectedTrackId: controlledSelectedTrackId,
+  setSelectedTrackId: controlledSetSelectedTrackId,
   onPlayheadChange,
   onKeyframeDelete,
   onKeyframeInsert,
 }: TimelineProps) {
   const { durationMs, tracks } = timeline
   const rulerAreaRef = useRef<HTMLDivElement>(null)
-  const [selectedTrackId, setSelectedTrackId] = useState<string | null>(null)
-  const [selectedKeyframes, setSelectedKeyframes] = useState<string[] | null>(null)
-
-  const findTrackById = useCallback(
-    (trackList: TimelineManagerTrack[], trackId: string): TimelineManagerTrack | null => {
-      for (const track of trackList) {
-        if (track.id === trackId) {
-          return track
-        }
-
-        if (track.trackType === 'vector') {
-          const childTrack = findTrackById(track.childTracks, trackId)
-          if (childTrack) {
-            return childTrack
-          }
-        }
-      }
-
-      return null
-    },
-    [],
+  const [uncontrolledSelectedTrackId, setUncontrolledSelectedTrackId] = useState<string | null>(
+    null,
   )
+  const isControlled = controlledSetSelectedTrackId !== undefined
+  const selectedTrackId = isControlled
+    ? (controlledSelectedTrackId ?? null)
+    : uncontrolledSelectedTrackId
+  const setSelectedTrackId = isControlled
+    ? controlledSetSelectedTrackId
+    : setUncontrolledSelectedTrackId
+  const [selectedKeyframes, setSelectedKeyframes] = useState<string[] | null>(null)
 
   useEffect(() => {
     const getChildKeyframeTrackIds = (track: TimelineManagerTrack): string[] => {

packages/timeline/src/components/TimelineGlobalPanel/TimelineGlobalPanel.tsx

@@ -3,6 +3,7 @@ import {
   NodeContainer,
   useNodeOptionNodes,
   useParamValue,
+  useAppStore,
   ControlGrid,
 } from '@hedron-gl/ui-core'
 import { useTimelineData } from './useTimelineData'
@@ -25,6 +26,9 @@ export const TimelineGlobalPanel = ({ engine }: TimelineGlobalPanelProps) => {
     manager,
   })
 
+  const selectedTrackId = useAppStore((state) => state.selectedTimelineTrackId)
+  const setSelectedTrackId = useAppStore((state) => state.setSelectedTimelineTrackId)
+
   const optionNodes = useNodeOptionNodes<TimelineOptionNodes>(DEFAULT_TIMELINE_ID)
   const isPlayingNode = optionNodes['isPlaying']!
   const playHeadPositionNode = optionNodes['playheadPositionMs']!
@@ -44,6 +48,8 @@ export const TimelineGlobalPanel = ({ engine }: TimelineGlobalPanelProps) => {
         <Timeline
           timeline={timeline}
           playheadPositionMs={playheadPositionMs}
+          selectedTrackId={selectedTrackId}
+          setSelectedTrackId={setSelectedTrackId}
           onPlayheadChange={handlePlayheadChange}
           onKeyframeDelete={handleKeyframeDelete}
           onKeyframeInsert={handleKeyframeInsert}

packages/timeline/src/components/TimelineInputPanel/TimelineInputPanel.tsx

@@ -0,0 +1,56 @@
+import { useEffect } from 'react'
+import { HedronEngine, InputNode } from '@hedron-gl/engine'
+import { useNodeOptionNodes, useParamValue, useAppStore } from '@hedron-gl/ui-core'
+import { useTimelineData } from '@/components/TimelineGlobalPanel/useTimelineData'
+import { useTimelineHandlers } from '@/components/TimelineGlobalPanel/useTimelineHandlers'
+import { useTimelineManager } from '@/components/TimelineGlobalPanel/useTimelineManager'
+import { DEFAULT_TIMELINE_ID } from '@/constants'
+import { Timeline } from '@/components/Timeline/Timeline'
+import { TimelineOptionNodes } from '@/TimelineInput'
+import { findTrackById } from '@/utils/findTrackById'
+
+interface TimelineInputPanelProps {
+  input: InputNode
+  engine: HedronEngine
+}
+
+/**
+ * Per-node view for a timeline-track input: the same editor as the global timeline panel
+ * (header, playhead, keyframes), scoped down to just this input's own track.
+ */
+export const TimelineInputPanel = ({ input, engine }: TimelineInputPanelProps) => {
+  const timeline = useTimelineData()
+  const manager = useTimelineManager(DEFAULT_TIMELINE_ID)
+
+  const { handlePlayheadChange, handleKeyframeDelete, handleKeyframeInsert } = useTimelineHandlers({
+    engine,
+    manager,
+  })
+
+  const selectedTrackId = useAppStore((state) => state.selectedTimelineTrackId)
+  const setSelectedTrackId = useAppStore((state) => state.setSelectedTimelineTrackId)
+
+  // Viewing this input's track makes it the selected one, so keyboard shortcuts (i/x) act on it
+  // and it stays in sync with the global timeline panel's selection.
+  useEffect(() => {
+    setSelectedTrackId(input.id)
+  }, [input.id, setSelectedTrackId])
+
+  const optionNodes = useNodeOptionNodes<TimelineOptionNodes>(DEFAULT_TIMELINE_ID)
+  const playHeadPositionNode = optionNodes['playheadPositionMs']!
+  const playheadPositionMs = useParamValue<number>(playHeadPositionNode.id)
+
+  const track = findTrackById(timeline.tracks, input.id)
+
+  return (
+    <Timeline
+      timeline={{ durationMs: timeline.durationMs, tracks: track ? [track] : [] }}
+      playheadPositionMs={playheadPositionMs}
+      selectedTrackId={selectedTrackId}
+      setSelectedTrackId={setSelectedTrackId}
+      onPlayheadChange={handlePlayheadChange}
+      onKeyframeDelete={handleKeyframeDelete}
+      onKeyframeInsert={handleKeyframeInsert}
+    />
+  )
+}

packages/timeline/src/index.ts

@@ -9,3 +9,4 @@ export { TimelineManager } from './TimelineManager'
 export type { TrackValues, OnUpdateCallback } from './TimelineManager'
 export { TimelineInput } from './TimelineInput'
 export { TimelineGlobalPanel } from './components/TimelineGlobalPanel/TimelineGlobalPanel'
+export { TimelineInputPanel } from './components/TimelineInputPanel/TimelineInputPanel'

packages/timeline/src/utils/findTrackById.ts

@@ -0,0 +1,21 @@
+import { TimelineManagerTrack } from '@/types'
+
+export const findTrackById = (
+  trackList: TimelineManagerTrack[],
+  trackId: string,
+): TimelineManagerTrack | null => {
+  for (const track of trackList) {
+    if (track.id === trackId) {
+      return track
+    }
+
+    if (track.trackType === 'vector') {
+      const childTrack = findTrackById(track.childTracks, trackId)
+      if (childTrack) {
+        return childTrack
+      }
+    }
+  }
+
+  return null
+}