Added new shaders

ui/src/components/ParameterField.jsx

@@ -1,9 +1,15 @@
-import { Copy } from "lucide-react";
+import Wheel from "@uiw/react-color-wheel";
+import { hsvaToRgba, rgbaToHsva } from "@uiw/color-convert";
+import { Copy, RotateCcw } from "lucide-react";
 
 import { useThrottledParameterValue } from "../hooks/useThrottledParameterValue";
 import { ParameterValueDisplay } from "./ParameterValueDisplay";
 
-function ParameterHeader({ layer, parameter }) {
+function valuesMatch(left, right) {
+  return JSON.stringify(left) === JSON.stringify(right);
+}
+
+function ParameterHeader({ layer, parameter, onReset, resetDisabled }) {
   const layerKey = layer.shaderId || layer.shaderName || layer.id;
   const oscRoute = `/VideoShaderToys/${layerKey}/${parameter.id}`;
 
@@ -26,6 +32,16 @@ function ParameterHeader({ layer, parameter }) {
         <span>{oscRoute}</span>
         <Copy size={13} strokeWidth={1.75} aria-hidden="true" />
       </button>
+      <button
+        type="button"
+        className="parameter__reset"
+        title={`Reset ${parameter.label}`}
+        aria-label={`Reset ${parameter.label}`}
+        disabled={resetDisabled}
+        onClick={onReset}
+      >
+        <RotateCcw size={13} strokeWidth={1.9} aria-hidden="true" />
+      </button>
     </div>
   );
 }
@@ -48,13 +64,26 @@ function colorValueToHex(value) {
   return `#${colorComponentToHex(values[0])}${colorComponentToHex(values[1])}${colorComponentToHex(values[2])}`;
 }
 
-function hexToColorValue(hex, alpha) {
-  const sanitized = /^#[0-9a-fA-F]{6}$/.test(hex) ? hex.slice(1) : "000000";
+function colorValueToHsva(value) {
+  const values = [...(value ?? [])];
+  while (values.length < 4) {
+    values.push(values.length === 3 ? 1 : 0);
+  }
+  return rgbaToHsva({
+    r: Math.round(clamp01(values[0]) * 255),
+    g: Math.round(clamp01(values[1]) * 255),
+    b: Math.round(clamp01(values[2]) * 255),
+    a: clamp01(values[3]),
+  });
+}
+
+function hsvaToColorValue(hsva, alpha) {
+  const rgba = hsvaToRgba({ ...hsva, a: clamp01(alpha ?? hsva.a ?? 1) });
   return [
-    parseInt(sanitized.slice(0, 2), 16) / 255,
-    parseInt(sanitized.slice(2, 4), 16) / 255,
-    parseInt(sanitized.slice(4, 6), 16) / 255,
-    clamp01(alpha ?? 1),
+    clamp01(rgba.r / 255),
+    clamp01(rgba.g / 255),
+    clamp01(rgba.b / 255),
+    clamp01(alpha ?? rgba.a ?? 1),
   ];
 }
 
@@ -69,7 +98,21 @@ export function ParameterField({ layer, parameter, onParameterChange }) {
     sendValue,
   } = useThrottledParameterValue(parameter, onParameterChange);
 
-  const header = <ParameterHeader layer={layer} parameter={parameter} />;
+  const defaultValue = parameter.defaultValue;
+  const resetDisabled = defaultValue === undefined || valuesMatch(draftValue, defaultValue);
+  const resetParameter = () => {
+    if (defaultValue !== undefined) {
+      sendValue(defaultValue);
+    }
+  };
+  const header = (
+    <ParameterHeader
+      layer={layer}
+      parameter={parameter}
+      resetDisabled={resetDisabled}
+      onReset={resetParameter}
+    />
+  );
 
   if (parameter.type === "float") {
     return (
@@ -151,14 +194,21 @@ export function ParameterField({ layer, parameter, onParameterChange }) {
     return (
       <section className="parameter">
         {header}
-        <div className="parameter__color-row">
-          <input
-            type="color"
-            value={colorValueToHex(values)}
-            onFocus={beginInteraction}
-            onChange={(event) => sendValue(hexToColorValue(event.target.value, values[3]))}
+        <div className="parameter__wheel-row">
+          <div
+            className="parameter__wheel"
+            onPointerDown={beginInteraction}
+            onPointerUp={endInteraction}
+            onPointerCancel={endInteraction}
             onBlur={endInteraction}
-          />
+          >
+            <Wheel
+              color={colorValueToHsva(values)}
+              width={132}
+              height={132}
+              onChange={(color) => scheduleSendValue(hsvaToColorValue(color.hsva, values[3]))}
+            />
+          </div>
           <label className="parameter__alpha">
             <span>Alpha</span>
             <input
@@ -176,6 +226,7 @@ export function ParameterField({ layer, parameter, onParameterChange }) {
               onBlur={endInteraction}
             />
           </label>
+          <div className="parameter__swatch" style={{ background: colorValueToHex(values) }} aria-hidden="true" />
         </div>
         <ParameterValueDisplay parameterType={parameter.type} value={appliedValue} pending={isPending} />
       </section>