From a5516001e7e35596f4e94b73cd28cae4c38b9e13 Mon Sep 17 00:00:00 2001
From: Alex Kempton <alex@funwithtriangles.net>
Date: Wed, 18 Dec 2024 14:30:34 +0100
Subject: [PATCH] ParamVector3 component

---
 .../ParamVector3/ParamVector3.module.css      | 13 ++++++
 .../components/ParamVector3/ParamVector3.tsx  | 42 +++++++++++++++++++
 .../components/SketchParams/SketchParams.tsx  |  3 ++
 3 files changed, 58 insertions(+)
 create mode 100644 packages/desktop/src/renderer/components/ParamVector3/ParamVector3.module.css
 create mode 100644 packages/desktop/src/renderer/components/ParamVector3/ParamVector3.tsx

diff --git a/packages/desktop/src/renderer/components/ParamVector3/ParamVector3.module.css b/packages/desktop/src/renderer/components/ParamVector3/ParamVector3.module.css
new file mode 100644
index 00000000..edfa8611
--- /dev/null
+++ b/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%;
+}
diff --git a/packages/desktop/src/renderer/components/ParamVector3/ParamVector3.tsx b/packages/desktop/src/renderer/components/ParamVector3/ParamVector3.tsx
new file mode 100644
index 00000000..63863843
--- /dev/null
+++ b/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>
+  )
+}
diff --git a/packages/desktop/src/renderer/components/SketchParams/SketchParams.tsx b/packages/desktop/src/renderer/components/SketchParams/SketchParams.tsx
index e6310c6b..5a3321e5 100644
--- a/packages/desktop/src/renderer/components/SketchParams/SketchParams.tsx
+++ b/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>
   }