ParamVector3 component

packages/desktop/src/renderer/components/ParamVector3/ParamVector3.module.css

@@ -0,0 +1,13 @@
+/* TODO: This CSS will eventually be removed when Vector3 is a dumb (compound) component in core */
+.container {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: 0.5rem;
+  height: 100%;
+}
+
+.item {
+  flex: 1;
+  height: 100%;
+}

packages/desktop/src/renderer/components/ParamVector3/ParamVector3.tsx

@@ -0,0 +1,42 @@
+import { useRef } from 'react'
+import { useInterval } from 'usehooks-ts'
+import { NodeParamVector3 } from '@hedron/engine'
+import c from './ParamVector3.module.css'
+import { FloatSlider, FloatSliderHandle } from '@components/core/FloatSlider/FloatSlider'
+import { useOnNodeValueChange } from '@components/hooks/useOnNodeValueChange'
+import { engineStore, useEngineStore } from '@renderer/engine'
+
+interface ParamVector3Props {
+  id: string
+}
+
+const SingleSlider = ({ id }: ParamVector3Props) => {
+  const ref = useRef<FloatSliderHandle>(null)
+  const onValueChange = useOnNodeValueChange(id)
+
+  useInterval(() => {
+    const nodeValue = engineStore.getState().nodeValues[id]
+    if (typeof nodeValue !== 'number') {
+      throw new Error('VectorComponentSlider value was not a number')
+    }
+    ref.current?.drawBar(nodeValue)
+  }, 100)
+
+  return <FloatSlider ref={ref} onValueChange={onValueChange} />
+}
+
+export const ParamVector3 = ({ id }: ParamVector3Props) => {
+  const node = useEngineStore((state) => state.nodes[id] as NodeParamVector3)
+
+  const { childNodeIds } = node
+
+  return (
+    <div className={c.container}>
+      {childNodeIds.map((childId) => (
+        <div key={childId} className={c.item}>
+          <SingleSlider key={childId} id={childId} />
+        </div>
+      ))}
+    </div>
+  )
+}

packages/desktop/src/renderer/components/SketchParams/SketchParams.tsx

@@ -4,6 +4,7 @@ import { ParamWithInfo, useActiveSketchParams } from '@components/hooks/useActiv
 import { ParamNumber } from '@components/ParamNumber/ParamNumber'
 import { ParamBoolean } from '@components/ParamBoolean/ParamBoolean'
 import { ParamEnum } from '@components/ParamEnum/ParamEnum'
+import { ParamVector3 } from '@components/ParamVector3/ParamVector3'
 import {
   NodeControl,
   NodeControlInner,
@@ -25,6 +26,8 @@ const getInputElement = (valueType: NodeTypes, id: string) => {
       return <ParamBoolean id={id} />
     case NodeTypes.Enum:
       return <ParamEnum id={id} />
+    case NodeTypes.Vector3:
+      return <ParamVector3 id={id} />
     default:
       return <i>Unsupported type {valueType}</i>
   }