CI/CD

2026-05-03 11:26:10 +10:00
parent ee929374a8
commit c39a1fd53c
12 changed files with 848 additions and 701 deletions
--- a/ui/src/components/ParameterField.jsx
+++ b/ui/src/components/ParameterField.jsx
@@ -0,0 +1,130 @@
+import { useThrottledParameterValue } from "../hooks/useThrottledParameterValue";
+import { ParameterValueDisplay } from "./ParameterValueDisplay";
+
+export function ParameterField({ parameter, onParameterChange }) {
+  const {
+    appliedValue,
+    beginInteraction,
+    draftValue,
+    endInteraction,
+    isPending,
+    scheduleSendValue,
+    sendValue,
+  } = useThrottledParameterValue(parameter, onParameterChange);
+
+  const label = <label>{parameter.label}</label>;
+
+  if (parameter.type === "float") {
+    return (
+      <section className="parameter">
+        {label}
+        <div className="parameter__pair">
+          <input
+            type="range"
+            min={parameter.min?.[0] ?? 0}
+            max={parameter.max?.[0] ?? 1}
+            step={parameter.step?.[0] ?? 0.01}
+            value={draftValue}
+            onMouseDown={beginInteraction}
+            onPointerDown={beginInteraction}
+            onTouchStart={beginInteraction}
+            onChange={(event) => scheduleSendValue(Number(event.target.value))}
+            onMouseUp={endInteraction}
+            onTouchEnd={endInteraction}
+            onPointerUp={endInteraction}
+            onKeyDown={beginInteraction}
+            onKeyUp={endInteraction}
+            onBlur={endInteraction}
+          />
+          <input
+            type="number"
+            min={parameter.min?.[0] ?? ""}
+            max={parameter.max?.[0] ?? ""}
+            step={parameter.step?.[0] ?? 0.01}
+            value={draftValue}
+            onFocus={beginInteraction}
+            onChange={(event) => sendValue(Number(event.target.value))}
+            onBlur={endInteraction}
+          />
+        </div>
+        <ParameterValueDisplay parameterType={parameter.type} value={appliedValue} pending={isPending} />
+      </section>
+    );
+  }
+
+  if (parameter.type === "vec2" || parameter.type === "color") {
+    const componentCount = parameter.type === "color" ? 4 : 2;
+    const values = [...(draftValue ?? [])];
+    while (values.length < componentCount) {
+      values.push(0);
+    }
+
+    return (
+      <section className="parameter">
+        {label}
+        <div className="parameter__pair">
+          {Array.from({ length: componentCount }, (_, index) => (
+            <input
+              key={index}
+              type="number"
+              min={parameter.min?.[index] ?? ""}
+              max={parameter.max?.[index] ?? ""}
+              step={parameter.step?.[index] ?? 0.01}
+              value={values[index]}
+              onFocus={beginInteraction}
+              onChange={(event) => {
+                const next = [...values];
+                next[index] = Number(event.target.value);
+                sendValue(next);
+              }}
+              onBlur={endInteraction}
+            />
+          ))}
+        </div>
+        <ParameterValueDisplay parameterType={parameter.type} value={appliedValue} pending={isPending} />
+      </section>
+    );
+  }
+
+  if (parameter.type === "bool") {
+    return (
+      <section className="parameter">
+        {label}
+        <label className="toggle toggle--field">
+          <input
+            type="checkbox"
+            checked={Boolean(draftValue)}
+            onFocus={beginInteraction}
+            onChange={(event) => sendValue(event.target.checked)}
+            onBlur={endInteraction}
+          />
+          <span>{draftValue ? "Enabled" : "Disabled"}</span>
+        </label>
+        <ParameterValueDisplay parameterType={parameter.type} value={appliedValue} pending={isPending} />
+      </section>
+    );
+  }
+
+  if (parameter.type === "enum") {
+    return (
+      <section className="parameter">
+        {label}
+        <select
+          value={draftValue}
+          onFocus={beginInteraction}
+          onChange={(event) => sendValue(event.target.value)}
+          onBlur={endInteraction}
+        >
+          {parameter.options.map((option) => (
+            <option key={option.value} value={option.value}>
+              {option.label}
+            </option>
+          ))}
+        </select>
+        <ParameterValueDisplay parameterType={parameter.type} value={appliedValue} pending={isPending} />
+      </section>
+    );
+  }
+
+  return null;
+}