Additional shaders

ui/src/components/ParameterField.jsx

@@ -190,43 +190,70 @@ export function ParameterField({ layer, parameter, onParameterChange }) {
     while (values.length < 4) {
       values.push(values.length === 3 ? 1 : 0);
     }
+    const hsva = colorValueToHsva(values);
+    const wheelHsva = { ...hsva, v: 100 };
+    const sendHsva = (nextHsva) => scheduleSendValue(hsvaToColorValue(nextHsva, values[3]));
 
     return (
       <section className="parameter">
         {header}
         <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
-              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);
-              }}
+          <div className="parameter__color-stack">
+            <div
+              className="parameter__wheel"
+              onPointerDown={beginInteraction}
+              onPointerUp={endInteraction}
+              onPointerCancel={endInteraction}
               onBlur={endInteraction}
-            />
-          </label>
-          <div className="parameter__swatch" style={{ background: colorValueToHex(values) }} aria-hidden="true" />
+            >
+              <Wheel
+                color={wheelHsva}
+                width={196}
+                height={196}
+                onChange={(color) => sendHsva({ ...color.hsva, v: hsva.v })}
+              />
+            </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}
+                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>
+          <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>
         </div>
         <ParameterValueDisplay parameterType={parameter.type} value={appliedValue} pending={isPending} />
       </section>