keyframes working for all non-vector values (#657)

* keyframes working for all non-vector values

* onNewInput returns the node rather than ID for convenience

* vector tracks have children

* useCallback to fix scrubbing in story

* vector tracks working with timeline

* tidy

* adding/deleting vector components

* types tidy

* story fix

* parent keyframe selected state

* tidy

* fix for 0 value keyframes

* removed active region for keyframes

* collapsible vector tracks

* copilot review fixes

Author: funwithtriangles

.gitignore

@@ -14,4 +14,4 @@ out
 .sketches-server
 dev-settings.json
 chrome-extensions
-packages/ui-core/storybook-static/*
+**/storybook-static/*

apps/desktop/src/renderer/components/SelectedNode/SelectedNode.tsx

@@ -44,10 +44,10 @@ export const SelectedNode = () => {
       Object.values(engine.plugins).map((plugin) => ({
         label: plugin.name,
         onClick: () => {
-          const id = engine.addInput(plugin.inputType, selectedNode.id)
-          if (!id) return
+          const newInput = engine.addInput(plugin.inputType, selectedNode.id)
+          if (!newInput) return
 
-          setSelectedInputId(selectedNode.id, id)
+          setSelectedInputId(selectedNode.id, newInput.id)
         },
       })),
     [selectedNode.id, setSelectedInputId],

packages/engine/src/HedronEngine/HedronEngine.ts

@@ -28,6 +28,7 @@ import {
   ConfigCustomNode,
   ChildGroupsLoose,
   Resources,
+  Input,
 } from '@store/types'
 import { getSketchesOfModuleId } from '@store/selectors/getSketchesOfModuleId'
 import { createEngineStore, EngineStore } from '@store/engineStore'
@@ -288,7 +289,7 @@ export class HedronEngine {
     this.store.getState().updateMultipleParamValues(nodeIds, values)
   }
 
-  public addInput(inputType: string, targetNodeId: string) {
+  public addInput(inputType: string, targetNodeId: string): Input | undefined {
     const plugin = Object.values(this.plugins).find((p) => p.inputType === inputType)
 
     if (!plugin) {
@@ -298,7 +299,7 @@ export class HedronEngine {
 
     const state = this.store.getState()
 
-    const targetNode = state.nodes[targetNodeId]
+    const targetNode = state.nodes[targetNodeId] as Param | Shot
 
     const numAlready = targetNode?.childGroups?.inputNodeIds?.length ?? 0
 
@@ -311,17 +312,17 @@ export class HedronEngine {
 
     const addInput = this.store.getState().addInput
 
-    const inputId = addInput(input)
+    const newInput = addInput(input)
 
     /**
      * FIXME: Once `optionNodesConfig` is removed, we wont need this
      * All plugins will use `onNewInput` to add these manually
      * */
-    this.addOptionNodes(inputId, plugin.optionNodesConfig ?? [])
+    this.addOptionNodes(newInput.id, plugin.optionNodesConfig ?? [])
 
-    plugin.onNewInput?.(this, inputId)
+    plugin.onNewInput?.(this, newInput, targetNode)
 
-    return inputId
+    return newInput
   }
 
   /**

packages/engine/src/plugins/Plugin.ts

@@ -56,7 +56,7 @@ export interface IPlugin {
   /**
    * Optional callback called after each input for this plugin is added
    */
-  onNewInput?: (engine: HedronEngine, inputId: string) => void
+  onNewInput?: (engine: HedronEngine, newInput: Input, targetNode: Param | Shot) => void
 }
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any

packages/engine/src/store/actionCreators/addSketch.ts

@@ -11,8 +11,8 @@ export const createAddSketch: SetterCreator<'addSketch'> = (setState) => (module
     for (const nodeConfig of config.nodes) {
       const id = createUniqueId()
       nodeIds.push(id)
-      // TODO: We're handing newSketchId as a parentId but sketches aren't yet nodes (this might break things...)
-      addNode(state, id, newSketchId, nodeConfig)
+      // FIXME: Add sketch parent ID here once sketches are nodes
+      addNode(state, id, null, nodeConfig)
     }
 
     state.sketches[newSketchId] = {

packages/engine/src/store/actionCreators/createAddInput.ts

@@ -1,6 +1,6 @@
 import { ensureNodeConfig } from '@store/shared/ensureConfig'
 import { addNode } from '@store/shared/addNode'
-import { SetterCreator } from '@store/types'
+import { Input, SetterCreator } from '@store/types'
 import { createUniqueId } from '@utils/createUniqueId'
 
 export const createAddInput: SetterCreator<'addInput'> =
@@ -10,6 +10,8 @@ export const createAddInput: SetterCreator<'addInput'> =
 
     const optionNodeIds: string[] = []
 
+    let newInput: Input | undefined = undefined
+
     setState((state) => {
       for (const cfg of optionsNodeConfig) {
         const optionNodeId = createUniqueId()
@@ -21,9 +23,11 @@ export const createAddInput: SetterCreator<'addInput'> =
       }
 
       if (state.nodes[id]) {
+        newInput = state.nodes[id] as Input
         return
       }
-      state.nodes[id] = {
+
+      newInput = {
         ...inputConfig,
         childGroups: {
           optionNodeIds,
@@ -33,9 +37,17 @@ export const createAddInput: SetterCreator<'addInput'> =
         nodeType: 'input',
       }
 
+      state.nodes[id] = newInput
+
       // Add children Ids to target node (so that cleanup works if target node is deleted)
       state.nodes[inputConfig.targetNodeId]?.childGroups.inputNodeIds.push(id)
     })
 
-    return id
+    if (!newInput) {
+      throw new Error(
+        'Failed to create new input. This is likely a bug in the engine store, as it should have been created in the setState callback.',
+      )
+    }
+
+    return newInput as Input
   }

packages/engine/src/store/types/Engine.ts

@@ -37,7 +37,7 @@ interface Actions {
   addInput: (
     inputConfig: Omit<Input, 'id' | 'optionNodeIds' | 'childGroups' | 'nodeType'>,
     optionsNodeConfig?: readonly (ConfigParam | ConfigShot)[],
-  ) => string
+  ) => Input
   deleteNode: (nodeId: string) => void
 }
 

packages/engine/src/store/types/Param.ts

@@ -152,25 +152,6 @@ export type ParamValueType = Param['valueType'] | null
 export type ParamVector = ParamVector2 | ParamVector3 | ParamRGB
 export type ParamVectorValueType = ParamVector['valueType']
 
-// Record ensures every ParamValueTypeWithChildren member is listed — adding a new
-// type that extends NodeParamWithChildrenBase will cause a compile error here if
-// it isn't included.
-const paramValueTypesWithChildren: Record<ParamVectorValueType, true> = {
-  vector3: true,
-  vector2: true,
-  rgb: true,
-}
-
-export const isParamVectorValueType = (
-  paramValueType: ParamValueType,
-): paramValueType is ParamVectorValueType => {
-  return paramValueType != null && paramValueType in paramValueTypesWithChildren
-}
-
-export const isParamVector = (node: Param): node is ParamVector => {
-  return node.nodeType === 'param' && node.valueType in paramValueTypesWithChildren
-}
-
 export type EnsureRequiredValueType<T> = T extends { valueType?: infer V }
   ? Omit<T, 'valueType'> & { valueType: V }
   : T

packages/engine/src/store/types/guards.ts

@@ -0,0 +1,38 @@
+import { ParamValueType, ParamVector, ParamVectorValueType } from './Param'
+import { Node } from './Node'
+import type { HedronEngine } from '@HedronEngine/HedronEngine'
+
+// Record ensures every ParamValueTypeWithChildren member is listed — adding a new
+// type that extends NodeParamWithChildrenBase will cause a compile error here if
+// it isn't included.
+const paramValueTypesWithChildren: Record<ParamVectorValueType, true> = {
+  vector3: true,
+  vector2: true,
+  rgb: true,
+}
+
+export const isParamVectorValueType = (
+  paramValueType: ParamValueType,
+): paramValueType is ParamVectorValueType => {
+  return paramValueType != null && paramValueType in paramValueTypesWithChildren
+}
+
+export const isParamVector = (node: Node): node is ParamVector => {
+  return node.nodeType === 'param' && node.valueType in paramValueTypesWithChildren
+}
+
+export const isParamVectorComponent = (node: Node, engine: HedronEngine) => {
+  let isComponent = false
+
+  if (node.nodeType !== 'param') return false
+
+  for (const parentId of node.parentIds) {
+    const parentNode = engine.getNode(parentId)!
+
+    if (isParamVector(parentNode)) {
+      isComponent = true
+    }
+  }
+
+  return isComponent
+}

packages/engine/src/store/types/index.ts

@@ -7,3 +7,4 @@ export * from './Input'
 export * from './Node'
 export * from './Engine'
 export * from './Resources'
+export * from './guards'