control layout updates

2026-05-08 18:28:28 +10:00
parent a0cc86f189
commit d650cac857
2 changed files with 322 additions and 210 deletions
--- a/ui/src/components/ParameterField.jsx
+++ b/ui/src/components/ParameterField.jsx
@@ -1,9 +1,9 @@
 import Wheel from "@uiw/react-color-wheel";
 import { hsvaToRgba, rgbaToHsva } from "@uiw/color-convert";
-import { Copy, RotateCcw, Zap } from "lucide-react";
+import { RotateCcw, Zap } from "lucide-react";
+import { useEffect, useRef, useState } from "react";

 import { useThrottledParameterValue } from "../hooks/useThrottledParameterValue";
-import { ParameterValueDisplay } from "./ParameterValueDisplay";

 function valuesMatch(left, right) {
  return JSON.stringify(left) === JSON.stringify(right);
@@ -23,7 +23,7 @@ function ParameterHeader({ layer, parameter, onReset, resetDisabled }) {
    <div className="parameter__header">
      <div className="parameter__title">
        <label>{parameter.label}</label>
-        {parameter.description ? <p>{parameter.description}</p> : null}
+        {parameter.description ? <p title={parameter.description}>{parameter.description}</p> : null}
      </div>
      <button
        type="button"
@@ -32,8 +32,7 @@ function ParameterHeader({ layer, parameter, onReset, resetDisabled }) {
        aria-label={`Copy OSC route ${oscRoute}`}
        onClick={copyRoute}
      >
-        <span>{oscRoute}</span>
-        <Copy size={13} strokeWidth={1.75} aria-hidden="true" />
+        <span aria-hidden="true">OSC</span>
      </button>
      <button
        type="button"
@@ -91,12 +90,12 @@ function hsvaToColorValue(hsva, alpha) {
 }

 export function ParameterField({ layer, parameter, onParameterChange }) {
+  const [colorPickerOpen, setColorPickerOpen] = useState(false);
+  const colorControlRef = useRef(null);
  const {
-    appliedValue,
    beginInteraction,
    draftValue,
    endInteraction,
-    isPending,
    scheduleSendValue,
    sendValue,
  } = useThrottledParameterValue(parameter, onParameterChange);
@@ -108,6 +107,32 @@ export function ParameterField({ layer, parameter, onParameterChange }) {
      sendValue(defaultValue);
    }
  };
+
+  useEffect(() => {
+    if (!colorPickerOpen) {
+      return undefined;
+    }
+
+    function handlePointerDown(event) {
+      if (!colorControlRef.current || !colorControlRef.current.contains(event.target)) {
+        setColorPickerOpen(false);
+      }
+    }
+
+    function handleKeyDown(event) {
+      if (event.key === "Escape") {
+        setColorPickerOpen(false);
+      }
+    }
+
+    document.addEventListener("pointerdown", handlePointerDown, true);
+    document.addEventListener("keydown", handleKeyDown);
+    return () => {
+      document.removeEventListener("pointerdown", handlePointerDown, true);
+      document.removeEventListener("keydown", handleKeyDown);
+    };
+  }, [colorPickerOpen]);
+
  const header = (
    <ParameterHeader
      layer={layer}
@@ -121,36 +146,37 @@ export function ParameterField({ layer, parameter, onParameterChange }) {
    return (
      <section className="parameter">
        {header}
-        <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 className="parameter__control">
+          <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>
        </div>
-        <ParameterValueDisplay parameterType={parameter.type} value={appliedValue} pending={isPending} />
      </section>
    );
  }
@@ -164,26 +190,28 @@ export function ParameterField({ layer, parameter, onParameterChange }) {
    return (
      <section className="parameter">
        {header}
-        <div className="parameter__pair">
-          {Array.from({ length: 2 }, (_, 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 className="parameter__control">
+          <div className="parameter__pair parameter__pair--vec2">
+            {Array.from({ length: 2 }, (_, index) => (
+              <input
+                key={index}
+                type="number"
+                aria-label={`${parameter.label} ${index === 0 ? "X" : "Y"}`}
+                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>
        </div>
-        <ParameterValueDisplay parameterType={parameter.type} value={appliedValue} pending={isPending} />
      </section>
    );
  }
@@ -196,69 +224,84 @@ export function ParameterField({ layer, parameter, onParameterChange }) {
    const hsva = colorValueToHsva(values);
    const wheelHsva = { ...hsva, v: 100 };
    const sendHsva = (nextHsva) => scheduleSendValue(hsvaToColorValue(nextHsva, values[3]));
+    const updateColorComponent = (index, nextValue) => {
+      const next = [...values];
+      next[index] = Number(nextValue);
+      sendValue(next);
+    };

    return (
-      <section className="parameter">
+      <section className="parameter parameter--color">
        {header}
-        <div className="parameter__wheel-row">
-          <div className="parameter__color-stack">
-            <div
-              className="parameter__wheel"
-              onPointerDown={beginInteraction}
-              onPointerUp={endInteraction}
-              onPointerCancel={endInteraction}
-              onBlur={endInteraction}
+        <div className="parameter__control" ref={colorControlRef}>
+          <div className="parameter__color-compact">
+            <button
+              type="button"
+              className="parameter__swatch-button"
+              title={`Open ${parameter.label} color picker`}
+              aria-label={`Open ${parameter.label} color picker`}
+              onClick={() => setColorPickerOpen((open) => !open)}
            >
-              <Wheel
-                color={wheelHsva}
-                width={196}
-                height={196}
-                onChange={(color) => sendHsva({ ...color.hsva, v: hsva.v })}
-              />
+              <span className="parameter__swatch" style={{ background: colorValueToHex(values) }} aria-hidden="true" />
+            </button>
+            <div className="parameter__rgba-grid">
+              {["R", "G", "B", "A"].map((label, index) => (
+                <label key={label} className="parameter__rgba-field">
+                  <span>{label}</span>
+                  <input
+                    type="number"
+                    min={parameter.min?.[index] ?? 0}
+                    max={parameter.max?.[index] ?? 1}
+                    step={parameter.step?.[index] ?? 0.01}
+                    value={values[index]}
+                    onFocus={beginInteraction}
+                    onChange={(event) => updateColorComponent(index, event.target.value)}
+                    onBlur={endInteraction}
+                  />
+                </label>
+              ))}
            </div>
-            <label className="parameter__value-slider">
-              <input
-                type="range"
-                min={0}
-                max={100}
-                step={1}
-                value={Math.round(hsva.v)}
-                aria-label={`${parameter.label} value`}
-                onMouseDown={beginInteraction}
+          </div>
+          {colorPickerOpen ? (
+            <div className="parameter__color-popover">
+              <div
+                className="parameter__wheel"
                onPointerDown={beginInteraction}
-                onTouchStart={beginInteraction}
-                onChange={(event) => sendHsva({ ...hsva, v: Number(event.target.value) })}
-                onMouseUp={endInteraction}
-                onTouchEnd={endInteraction}
                onPointerUp={endInteraction}
-                onKeyDown={beginInteraction}
-                onKeyUp={endInteraction}
+                onPointerCancel={endInteraction}
                onBlur={endInteraction}
-              />
-            </label>
-          </div>
-          <div className="parameter__color-bottom">
-            <label className="parameter__alpha">
-              <span>Alpha</span>
-              <input
-                type="number"
-                min={parameter.min?.[3] ?? 0}
-                max={parameter.max?.[3] ?? 1}
-                step={parameter.step?.[3] ?? 0.01}
-                value={values[3]}
-                onFocus={beginInteraction}
-                onChange={(event) => {
-                  const next = [...values];
-                  next[3] = Number(event.target.value);
-                  sendValue(next);
-                }}
-                onBlur={endInteraction}
-              />
-            </label>
-            <div className="parameter__swatch" style={{ background: colorValueToHex(values) }} aria-hidden="true" />
-          </div>
+              >
+                <Wheel
+                  color={wheelHsva}
+                  width={196}
+                  height={196}
+                  onChange={(color) => sendHsva({ ...color.hsva, v: hsva.v })}
+                />
+              </div>
+              <label className="parameter__value-slider">
+                <span>Value</span>
+                <input
+                  type="range"
+                  min={0}
+                  max={100}
+                  step={1}
+                  value={Math.round(hsva.v)}
+                  aria-label={`${parameter.label} value`}
+                  onMouseDown={beginInteraction}
+                  onPointerDown={beginInteraction}
+                  onTouchStart={beginInteraction}
+                  onChange={(event) => sendHsva({ ...hsva, v: Number(event.target.value) })}
+                  onMouseUp={endInteraction}
+                  onTouchEnd={endInteraction}
+                  onPointerUp={endInteraction}
+                  onKeyDown={beginInteraction}
+                  onKeyUp={endInteraction}
+                  onBlur={endInteraction}
+                />
+              </label>
+            </div>
+          ) : null}
        </div>
-        <ParameterValueDisplay parameterType={parameter.type} value={appliedValue} pending={isPending} />
      </section>
    );
  }
@@ -267,17 +310,18 @@ export function ParameterField({ layer, parameter, onParameterChange }) {
    return (
      <section className="parameter">
        {header}
-        <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} />
+        <div className="parameter__control">
+          <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>
+        </div>
      </section>
    );
  }
@@ -286,19 +330,20 @@ export function ParameterField({ layer, parameter, onParameterChange }) {
    return (
      <section className="parameter">
        {header}
-        <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} />
+        <div className="parameter__control">
+          <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>
+        </div>
      </section>
    );
  }
@@ -307,16 +352,17 @@ export function ParameterField({ layer, parameter, onParameterChange }) {
    return (
      <section className="parameter">
        {header}
-        <input
-          type="text"
-          maxLength={parameter.maxLength ?? 64}
-          placeholder={parameter.defaultValue ? `Default: ${parameter.defaultValue}` : ""}
-          value={draftValue ?? ""}
-          onFocus={beginInteraction}
-          onChange={(event) => sendValue(event.target.value)}
-          onBlur={endInteraction}
-        />
-        <ParameterValueDisplay parameterType={parameter.type} value={appliedValue} pending={isPending} />
+        <div className="parameter__control">
+          <input
+            type="text"
+            maxLength={parameter.maxLength ?? 64}
+            placeholder={parameter.defaultValue ? `Default: ${parameter.defaultValue}` : ""}
+            value={draftValue ?? ""}
+            onFocus={beginInteraction}
+            onChange={(event) => sendValue(event.target.value)}
+            onBlur={endInteraction}
+          />
+        </div>
      </section>
    );
  }
@@ -326,15 +372,16 @@ export function ParameterField({ layer, parameter, onParameterChange }) {
    return (
      <section className="parameter">
        {header}
-        <button
-          type="button"
-          className="button-with-icon parameter__trigger"
-          onClick={() => sendValue(triggerCount + 1)}
-        >
-          <Zap size={16} strokeWidth={1.9} aria-hidden="true" />
-          <span>Trigger</span>
-        </button>
-        <ParameterValueDisplay parameterType={parameter.type} value={appliedValue} pending={isPending} />
+        <div className="parameter__control">
+          <button
+            type="button"
+            className="button-with-icon parameter__trigger"
+            onClick={() => sendValue(triggerCount + 1)}
+          >
+            <Zap size={16} strokeWidth={1.9} aria-hidden="true" />
+            <span>Trigger</span>
+          </button>
+        </div>
      </section>
    );
  }