Merge remote-tracking branch 'upstream/alpha' into timeline-track-selection

cale-bradbury · cale-bradbury · commit 357dcf4e8886 · 2026-07-13T20:43:15.000-04:00
diff --git a/apps/desktop/src/main/mainWindow.ts b/apps/desktop/src/main/mainWindow.ts
@@ -26,6 +26,7 @@ export const createWindow = (): void => {
     show: false,
     autoHideMenuBar: !process.platform.startsWith('win'),
     ...(process.platform === 'linux' ? { icon } : {}),
+    title: 'Hedron',
     webPreferences: {
       preload: join(__dirname, '../preload/index.js'),
       sandbox: false,
diff --git a/apps/desktop/src/renderer/index.html b/apps/desktop/src/renderer/index.html
@@ -2,7 +2,7 @@
 <html>
   <head>
     <meta charset="UTF-8" />
-    <title>Electron</title>
+    <title>Hedron</title>
     <meta http-equiv="Content-Security-Policy" content="default-src * 'unsafe-inline' blob:;" />
   </head>
 
diff --git a/package.json b/package.json
@@ -1,5 +1,6 @@
 {
   "name": "root",
+  "productName": "Hedron",
   "private": true,
   "scripts": {
     "dev": "lerna run dev --scope desktop",
diff --git a/packages/engine/src/store/types/ParamNode.ts b/packages/engine/src/store/types/ParamNode.ts
@@ -151,6 +151,7 @@ export type ParamValueType = ParamNode['valueType'] | null
 
 export type ParamVector = ParamVector2 | ParamVector3 | ParamRGB
 export type ParamVectorValueType = ParamVector['valueType']
+export type ParamNonVectorValueType = Exclude<ParamValueType, ParamVectorValueType>
 
 export type EnsureRequiredValueType<T> = T extends { valueType?: infer V }
   ? Omit<T, 'valueType'> & { valueType: V }
diff --git a/packages/timeline/src/TimelineInput.ts b/packages/timeline/src/TimelineInput.ts
@@ -7,6 +7,7 @@ import {
   OptionNodesFromConfigs,
   isParamVector,
   ParamNode,
+  ParamValue,
   ShotNode,
   isParamVectorComponent,
 } from '@hedron-gl/engine'
@@ -121,14 +122,28 @@ export class TimelineInput implements IPlugin {
           }
 
           const tracks = getKeyframeTracks(allTracks)
-          const changedTargetNodeIds = changedTrackIds.map(
-            (trackId) => tracks.find((track) => track.id === trackId)?.targetNodeId ?? trackId,
-          )
-
-          engine.setMultipleParamValues(
-            changedTargetNodeIds,
-            changedTrackIds.map((trackId) => changed[trackId]),
-          )
+
+          const paramTargetNodeIds: string[] = []
+          const paramValues: ParamValue[] = []
+
+          for (const trackId of changedTrackIds) {
+            const targetNodeId =
+              tracks.find((track) => track.id === trackId)?.targetNodeId ?? trackId
+            const targetNode = engine.getNode(targetNodeId)
+            const value = changed[trackId]
+
+            if (targetNode?.nodeType === 'shot') {
+              engine.fireShot(targetNodeId)
+              continue
+            }
+
+            paramTargetNodeIds.push(targetNodeId)
+            paramValues.push(value)
+          }
+
+          if (paramTargetNodeIds.length > 0) {
+            engine.setMultipleParamValues(paramTargetNodeIds, paramValues)
+          }
         }
       })
     })
diff --git a/packages/timeline/src/TimelineManager.ts b/packages/timeline/src/TimelineManager.ts
@@ -5,6 +5,8 @@ import type {
   TimelineManagerTrack,
   Keyframe,
   TimelineManagerAudioTrack,
+  TimelineManagerKeyframeTrack,
+  KeyframeParam,
 } from '@/types'
 
 export type TrackValues = Record<string, ParamValue>
@@ -22,6 +24,8 @@ export class TimelineManager {
   private sortedKeyframesCache: Map<string, Keyframe[]> = new Map()
   private audioCache: Map<string, HTMLAudioElement> = new Map()
   private lastKeyframeIndex: Map<string, number> = new Map()
+  // 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
 
   constructor(timeline: TimelineManagerData, clock?: Clock) {
@@ -55,8 +59,8 @@ export class TimelineManager {
     this.lastKeyframeIndex.clear()
   }
 
-  private getTrackValue(track: TimelineManagerTrack): ParamValue | undefined {
-    const sorted = this.sortedKeyframesCache.get(track.id) ?? []
+  private getHeldValue(track: TimelineManagerKeyframeTrack): ParamValue | undefined {
+    const sorted = (this.sortedKeyframesCache.get(track.id) ?? []) as KeyframeParam[]
     const startIndex = this.lastKeyframeIndex.get(track.id) ?? 0
     let value = startIndex > 0 ? sorted[startIndex - 1].value : undefined
     let lastIndex = startIndex
@@ -66,12 +70,42 @@ export class TimelineManager {
       lastIndex = i + 1
     }
     this.lastKeyframeIndex.set(track.id, lastIndex)
+
+    // interpolation for number values
+    const current = sorted[lastIndex - 1]
+    const next = sorted[lastIndex]
+    if (current?.valueType === 'number' && next?.valueType === 'number') {
+      const t = (this.position - current.time) / (next.time - current.time)
+      return current.value + (next.value - current.value) * t
+    }
+
     return value
   }
 
+  // Shot keyframes are momentary triggers, not held state: fire once whenever the number of
+  // keyframes crossed (time <= position) increases since the last check.
+  private getShouldShotFire(track: TimelineManagerTrack): true | undefined {
+    const sorted = this.sortedKeyframesCache.get(track.id) ?? []
+    const count = sorted.filter((kf) => kf.time < this.position).length
+    const lastCount = this.shotKeyframeCount.get(track.id) ?? 0
+    this.shotKeyframeCount.set(track.id, count)
+    return count > lastCount ? true : undefined
+  }
+
+  private isShotTrack(track: TimelineManagerTrack): boolean {
+    return track.trackType === 'keyframe' && track.keyframes[0]?.nodeType === 'shot'
+  }
+
+  // Returns the value for a track at the current position, or undefined if no value is held.
+  // Also returns true for shot tracks if a shot should fire at the current position, or undefined if not.
+  private getTrackValue(track: TimelineManagerKeyframeTrack): ParamValue | true | undefined {
+    return this.isShotTrack(track) ? this.getShouldShotFire(track) : this.getHeldValue(track)
+  }
+
   private computeValues(): TrackValues {
     const values: TrackValues = {}
     for (const track of this.getAllTracks()) {
+      if (track.trackType !== 'keyframe') continue
       const value = this.getTrackValue(track)
       if (value !== undefined) {
         values[track.id] = value
@@ -82,11 +116,19 @@ export class TimelineManager {
 
   private getChangedValues(newValues: TrackValues): TrackValues {
     const changed: TrackValues = {}
-    for (const key of Object.keys(newValues)) {
-      if (this.cachedValues[key] !== newValues[key]) {
-        changed[key] = newValues[key]
+    for (const track of this.getAllTracks()) {
+      const value = newValues[track.id]
+      if (value === undefined) continue
+
+      // Shot fires are already edge-detected in getShotFired, so a `true` is forwarded as-is
+      // rather than compared against the last value (there's no "held state" to diff against).
+      if (this.isShotTrack(track)) {
+        changed[track.id] = value
+      } else if (this.cachedValues[track.id] !== value) {
+        changed[track.id] = value
       }
     }
+
     return changed
   }
 
diff --git a/packages/timeline/src/components/Timeline/Timeline.tsx b/packages/timeline/src/components/Timeline/Timeline.tsx
@@ -60,6 +60,10 @@ export function Timeline({
     }
 
     const handleKeyDown = (e: KeyboardEvent) => {
+      const target = e.target as HTMLElement | null
+      if (target?.tagName === 'INPUT' || target?.tagName === 'TEXTAREA' || target?.isContentEditable) {
+        return
+      }
       if (e.key === 'x' && selectedKeyframes) {
         selectedKeyframes.forEach((keyframeId) => {
           onKeyframeDelete?.(keyframeId)
diff --git a/packages/timeline/src/components/TimelineGlobalPanel/useTimelineHandlers.ts b/packages/timeline/src/components/TimelineGlobalPanel/useTimelineHandlers.ts
@@ -1,9 +1,9 @@
 import { useCallback } from 'react'
-import { HedronEngine, ParamNode } from '@hedron-gl/engine'
+import { HedronEngine } from '@hedron-gl/engine'
 import { useNodeOptionNodes } from '@hedron-gl/ui-core'
 import { DEFAULT_TIMELINE_ID } from '@/constants'
 import { TimelineManager } from '@/TimelineManager'
-import type { Keyframe, TimelineTrackInput } from '@/types'
+import type { Keyframe, KeyframeParam, TimelineTrackInput } from '@/types'
 
 interface UseTimelineHandlersParams {
   engine: HedronEngine
@@ -50,25 +50,35 @@ export const useTimelineHandlers = ({ engine, manager }: UseTimelineHandlersPara
         return
       }
 
-      const targetParam = engine.getNode(inputNode.targetNodeId) as ParamNode | undefined
+      const targetNode = engine.getNode(inputNode.targetNodeId)
 
-      if (!targetParam) {
-        console.error(`Target param not found for input node ${inputNode.id}`)
+      if (!targetNode) {
+        console.error(`Target node not found for input node ${inputNode.id}`)
         return
       }
 
-      const targetParamValue = engine.getParamValue(inputNode.targetNodeId)
-
-      if (targetParamValue === undefined) {
-        console.error(`Target param value not found for input node ${inputNode.id}`)
-        return
-      }
-
-      const keyframe = {
-        id: crypto.randomUUID(),
-        time,
-        valueType: targetParam.valueType,
-        value: targetParamValue,
+      let keyframe: Keyframe
+      if (targetNode.nodeType === 'shot') {
+        keyframe = { id: crypto.randomUUID(), time, nodeType: 'shot' }
+      } else if (targetNode.nodeType === 'param') {
+        const targetParamValue = engine.getParamValue(inputNode.targetNodeId)
+
+        if (targetParamValue === undefined) {
+          console.error(`Target param value not found for input node ${inputNode.id}`)
+          return
+        }
+
+        keyframe = {
+          id: crypto.randomUUID(),
+          time,
+          valueType: targetNode.valueType,
+          value: targetParamValue,
+          nodeType: 'param',
+        } as KeyframeParam
+      } else {
+        throw new Error(
+          `Unsupported target node type for input node ${inputNode.id} with type ${targetNode.nodeType}`,
+        )
       }
 
       const nextKeyframes: Keyframe[] = [...(inputNode.customData?.keyframes ?? []), keyframe].sort(
diff --git a/packages/timeline/src/stories/Timeline.stories.tsx b/packages/timeline/src/stories/Timeline.stories.tsx
@@ -8,6 +8,7 @@ import { TimelineManager } from '@/TimelineManager'
 import type { TrackValues } from '@/TimelineManager'
 import { Timeline } from '@/components/Timeline/Timeline'
 import type {
+  KeyframeParam,
   TimelineManagerData,
   TimelineManagerKeyframeTrack,
   TimelineManagerTrack,
@@ -55,10 +56,10 @@ export const WithKeyframes: Story = {
           label: 'Visibility',
           trackType: 'keyframe',
           keyframes: [
-            { id: 'kf-1', time: 1000, valueType: 'boolean', value: true },
-            { id: 'kf-2', time: 3000, valueType: 'boolean', value: false },
-            { id: 'kf-3', time: 5500, valueType: 'boolean', value: true },
-            { id: 'kf-4', time: 8000, valueType: 'boolean', value: false },
+            { id: 'kf-1', time: 1000, valueType: 'boolean', value: true, nodeType: 'param' },
+            { id: 'kf-2', time: 3000, valueType: 'boolean', value: false, nodeType: 'param' },
+            { id: 'kf-3', time: 5500, valueType: 'boolean', value: true, nodeType: 'param' },
+            { id: 'kf-4', time: 8000, valueType: 'boolean', value: false, nodeType: 'param' },
           ],
         },
       ],
@@ -82,19 +83,19 @@ export const WithVectorTrack: Story = {
               label: 'X',
               trackType: 'keyframe',
               keyframes: [
-                { id: 'kf-px-1', time: 1000, valueType: 'number', value: 0 },
-                { id: 'kf-px-2', time: 5000, valueType: 'number', value: 0.75 },
-                { id: 'kf-px-3', time: 9000, valueType: 'number', value: -0.2 },
+                { id: 'kf-px-1', time: 1000, valueType: 'number', value: 0, nodeType: 'param' },
+                { id: 'kf-px-2', time: 5000, valueType: 'number', value: 0.75, nodeType: 'param' },
+                { id: 'kf-px-3', time: 9000, valueType: 'number', value: -0.2, nodeType: 'param' },
               ],
             },
             {
               id: 'track-pos-y',
               label: 'Y',
               trackType: 'keyframe',
               keyframes: [
-                { id: 'kf-py-1', time: 1500, valueType: 'number', value: -0.25 },
-                { id: 'kf-py-2', time: 4500, valueType: 'number', value: 0.5 },
-                { id: 'kf-py-3', time: 8000, valueType: 'number', value: 0.1 },
+                { id: 'kf-py-1', time: 1500, valueType: 'number', value: -0.25, nodeType: 'param' },
+                { id: 'kf-py-2', time: 4500, valueType: 'number', value: 0.5, nodeType: 'param' },
+                { id: 'kf-py-3', time: 8000, valueType: 'number', value: 0.1, nodeType: 'param' },
               ],
             },
           ],
@@ -128,19 +129,19 @@ export const Interactive = () => {
             label: 'X',
             trackType: 'keyframe',
             keyframes: [
-              { id: 'kf-px1', time: 500, valueType: 'number', value: -0.5 },
-              { id: 'kf-px2', time: 4000, valueType: 'number', value: 0.35 },
-              { id: 'kf-px3', time: 7000, valueType: 'number', value: 0.8 },
+              { id: 'kf-px1', time: 500, valueType: 'number', value: -0.5, nodeType: 'param' },
+              { id: 'kf-px2', time: 4000, valueType: 'number', value: 0.35, nodeType: 'param' },
+              { id: 'kf-px3', time: 7000, valueType: 'number', value: 0.8, nodeType: 'param' },
             ],
           },
           {
             id: 'track-pos-y',
             label: 'Y',
             trackType: 'keyframe',
             keyframes: [
-              { id: 'kf-py1', time: 1000, valueType: 'number', value: 0.25 },
-              { id: 'kf-py2', time: 5000, valueType: 'number', value: -0.1 },
-              { id: 'kf-py3', time: 8500, valueType: 'number', value: 0.55 },
+              { id: 'kf-py1', time: 1000, valueType: 'number', value: 0.25, nodeType: 'param' },
+              { id: 'kf-py2', time: 5000, valueType: 'number', value: -0.1, nodeType: 'param' },
+              { id: 'kf-py3', time: 8500, valueType: 'number', value: 0.55, nodeType: 'param' },
             ],
           },
         ],
@@ -150,31 +151,31 @@ export const Interactive = () => {
         label: 'Visibility',
         trackType: 'keyframe',
         keyframes: [
-          { id: 'kf-v1', time: 0, valueType: 'boolean', value: true },
-          { id: 'kf-v2', time: 3000, valueType: 'boolean', value: false },
-          { id: 'kf-v3', time: 6000, valueType: 'boolean', value: true },
+          { id: 'kf-v1', time: 0, valueType: 'boolean', value: true, nodeType: 'param' },
+          { id: 'kf-v2', time: 3000, valueType: 'boolean', value: false, nodeType: 'param' },
+          { id: 'kf-v3', time: 6000, valueType: 'boolean', value: true, nodeType: 'param' },
         ],
       },
       {
         id: 'track-2',
         label: 'Strobe',
         trackType: 'keyframe',
         keyframes: [
-          { id: 'kf-s1', time: 1000, valueType: 'boolean', value: true },
-          { id: 'kf-s2', time: 2000, valueType: 'boolean', value: false },
-          { id: 'kf-s3', time: 4000, valueType: 'boolean', value: true },
-          { id: 'kf-s4', time: 5000, valueType: 'boolean', value: false },
-          { id: 'kf-s5', time: 7000, valueType: 'boolean', value: true },
-          { id: 'kf-s6', time: 8000, valueType: 'boolean', value: false },
+          { id: 'kf-s1', time: 1000, valueType: 'boolean', value: true, nodeType: 'param' },
+          { id: 'kf-s2', time: 2000, valueType: 'boolean', value: false, nodeType: 'param' },
+          { id: 'kf-s3', time: 4000, valueType: 'boolean', value: true, nodeType: 'param' },
+          { id: 'kf-s4', time: 5000, valueType: 'boolean', value: false, nodeType: 'param' },
+          { id: 'kf-s5', time: 7000, valueType: 'boolean', value: true, nodeType: 'param' },
+          { id: 'kf-s6', time: 8000, valueType: 'boolean', value: false, nodeType: 'param' },
         ],
       },
       {
         id: 'track-3',
         label: 'Invert',
         trackType: 'keyframe',
         keyframes: [
-          { id: 'kf-i1', time: 2500, valueType: 'boolean', value: true },
-          { id: 'kf-i2', time: 7500, valueType: 'boolean', value: false },
+          { id: 'kf-i1', time: 2500, valueType: 'boolean', value: true, nodeType: 'param' },
+          { id: 'kf-i2', time: 7500, valueType: 'boolean', value: false, nodeType: 'param' },
         ],
       },
     ],
@@ -255,14 +256,15 @@ export const Interactive = () => {
       tracks: prev.tracks.map((track) => {
         const insertKeyframe = (track: TimelineManagerTrack): TimelineManagerTrack => {
           if (track.trackType === 'keyframe' && track.id === trackId) {
-            const lastKeyframe = track.keyframes[track.keyframes.length - 1]
+            const lastKeyframe = track.keyframes[track.keyframes.length - 1] as KeyframeParam
             const valueType = lastKeyframe?.valueType ?? 'boolean'
             const value =
               lastKeyframe?.value ??
               (valueType === 'number' ? 0 : valueType === 'boolean' ? true : null)
 
             return {
               ...track,
+              // @ts-ignore -- this is just a story file we don't need to care so much
               keyframes: [
                 ...track.keyframes,
                 {
@@ -360,11 +362,11 @@ export const LongDuration: Story = {
           label: 'Active',
           trackType: 'keyframe',
           keyframes: [
-            { id: 'kf-1', time: 10000, valueType: 'boolean', value: true },
-            { id: 'kf-2', time: 30000, valueType: 'boolean', value: false },
-            { id: 'kf-3', time: 60000, valueType: 'boolean', value: true },
-            { id: 'kf-4', time: 90000, valueType: 'boolean', value: false },
-            { id: 'kf-5', time: 110000, valueType: 'boolean', value: true },
+            { id: 'kf-1', time: 10000, valueType: 'boolean', value: true, nodeType: 'param' },
+            { id: 'kf-2', time: 30000, valueType: 'boolean', value: false, nodeType: 'param' },
+            { id: 'kf-3', time: 60000, valueType: 'boolean', value: true, nodeType: 'param' },
+            { id: 'kf-4', time: 90000, valueType: 'boolean', value: false, nodeType: 'param' },
+            { id: 'kf-5', time: 110000, valueType: 'boolean', value: true, nodeType: 'param' },
           ],
         },
       ],
diff --git a/packages/timeline/src/types.ts b/packages/timeline/src/types.ts

Original file line number	Diff line number	Diff line change
`@@ -1,5 +1,6 @@`
`1`	`1`	`{`
`2`	`2`	`"name": "root",`
	`3`	`+ "productName": "Hedron",`
`3`	`4`	`"private": true,`
`4`	`5`	`"scripts": {`
`5`	`6`	`"dev": "lerna run dev --scope desktop",`