fix: Vector slider controls (#2247)

Author: aleksanderkatan

apps/typegpu-docs/src/components/ControlPanel.tsx

@@ -88,7 +88,7 @@ function SliderRow({
   );
 }
 
-function VectorSliderRow({
+function VectorSliderRow<T extends d.v2f | d.v3f | d.v4f>({
   label,
   initial,
   min,
@@ -97,13 +97,13 @@ function VectorSliderRow({
   onChange,
 }: {
   label: string;
-  initial: number[];
-  min: number[];
-  max: number[];
-  step: number[];
-  onChange: (value: number[]) => void;
+  initial: T;
+  min: T;
+  max: T;
+  step: T;
+  onChange: (value: T) => void;
 }) {
-  const [value, setValue] = useState<number[]>(initial ?? min);
+  const [value, setValue] = useState<T>(initial);
   const runWithCatch = useSetAtom(runWithCatchAtom);
 
   return (
@@ -116,8 +116,8 @@ function VectorSliderRow({
         step={step}
         value={value}
         onChange={(newValue) => {
-          setValue(newValue);
-          void runWithCatch(() => onChange(newValue));
+          setValue(newValue as T);
+          void runWithCatch(() => onChange(newValue as T));
         }}
       />
     </>
@@ -248,7 +248,7 @@ function paramToControlRow(param: ExampleControlParam) {
     <VectorSliderRow
       key={param.label}
       label={param.label}
-      onChange={param.onVectorSliderChange}
+      onChange={param.onVectorSliderChange as (value: d.v2f | d.v3f | d.v4f) => void}
       min={param.min}
       max={param.max}
       step={param.step}

apps/typegpu-docs/src/components/design/VectorSlider.tsx

@@ -1,16 +1,24 @@
 import * as RadixSlider from '@radix-ui/react-slider';
+import { d } from 'typegpu';
 
-type Props = {
-  min: number[];
-  max: number[];
-  step: number[];
-  value: number[];
-  onChange: (value: number[]) => void;
+type Props<T extends d.v2f | d.v3f | d.v4f> = {
+  min: T;
+  max: T;
+  step: T;
+  value: T;
+  onChange: (value: T) => void;
 };
 
-export function VectorSlider({ min, max, step, value, onChange }: Props) {
+export function VectorSlider({ min, max, step, value, onChange }: Props<d.v2f | d.v3f | d.v4f>) {
   const handleComponentChange = (index: number, newValue: number) => {
-    onChange([...value.slice(0, index), newValue, ...value.slice(index + 1)]);
+    const newVec =
+      value.kind === 'vec2f'
+        ? d.vec2f(value)
+        : value.kind === 'vec3f'
+          ? d.vec3f(value)
+          : d.vec4f(value);
+    newVec[index] = newValue;
+    onChange(newVec);
   };
 
   const renderSlider = (index: number) => (

apps/typegpu-docs/src/components/stackblitz/stackBlitzIndex.ts

@@ -1,3 +1,5 @@
+import { d } from 'typegpu';
+
 const body = document.querySelector('body') as HTMLBodyElement;
 body.style.display = 'flex';
 body.style.flexDirection = 'column';
@@ -146,15 +148,15 @@ for (const controls of Object.values(example)) {
 
           slider.addEventListener('input', () => {
             currentValues[i] = Number.parseFloat(slider.value);
-            params.onVectorSliderChange(currentValues);
+            (params.onVectorSliderChange as (value: d.v2f | d.v3f | d.v4f) => void)(currentValues);
           });
 
           row.appendChild(labelSpan);
           row.appendChild(slider);
           sliderContainer.appendChild(row);
         }
 
-        params.onVectorSliderChange(currentValues);
+        (params.onVectorSliderChange as (value: d.v2f | d.v3f | d.v4f) => void)(currentValues);
         controlRow.appendChild(sliderContainer);
       }
 
@@ -222,17 +224,17 @@ type SliderControlParam = {
   step?: number;
 };
 
-type VectorSliderControlParam = {
-  onVectorSliderChange: (newValue: number[]) => void;
-  initial: number[];
-  min: number[];
-  max: number[];
-  step: number[];
+type VectorSliderControlParam<T extends d.v2f | d.v3f | d.v4f> = {
+  onVectorSliderChange: (newValue: T) => void;
+  initial: T;
+  min: T;
+  max: T;
+  step: T;
 };
 
 type ColorPickerControlParam = {
-  onColorChange: (newValue: readonly [number, number, number]) => void;
-  initial: readonly [number, number, number];
+  onColorChange: (newValue: d.v3f) => void;
+  initial: d.v3f;
 };
 
 type ButtonControlParam = {
@@ -250,22 +252,24 @@ type ExampleControlParam =
   | SliderControlParam
   | ButtonControlParam
   | TextAreaControlParam
-  | VectorSliderControlParam
+  | VectorSliderControlParam<d.v2f>
+  | VectorSliderControlParam<d.v3f>
+  | VectorSliderControlParam<d.v4f>
   | ColorPickerControlParam;
 
-function hexToRgb(hex: string): readonly [number, number, number] {
-  return [
+function hexToRgb(hex: string): d.v3f {
+  return d.vec3f(
     Number.parseInt(hex.slice(1, 3), 16) / 255,
     Number.parseInt(hex.slice(3, 5), 16) / 255,
     Number.parseInt(hex.slice(5, 7), 16) / 255,
-  ];
+  );
 }
 
 function componentToHex(c: number) {
   const hex = (c * 255).toString(16);
   return hex.length === 1 ? `0${hex}` : hex;
 }
 
-function rgbToHex(rgb: readonly [number, number, number]) {
+function rgbToHex(rgb: d.v3f) {
   return `#${rgb.map(componentToHex).join('')}`;
 }

apps/typegpu-docs/src/examples/rendering/phong-reflection/params.ts

@@ -4,9 +4,9 @@ import { ExampleControls } from './schemas.ts';
 export const backgroundColor = d.vec3f(28, 28, 28).div(255);
 
 export const initialControls = ExampleControls({
-  lightColor: d.vec3f(1, 0.7, 0),
+  lightColor: d.vec3f(0.8, 0.8, 0.8),
   lightDirection: d.vec3f(0, 7, -7),
-  ambientColor: d.vec3f(0.6, 0.6, 0.6),
+  ambientColor: d.vec3f(1, 0.7, 0),
   ambientStrength: 0.5,
   specularExponent: 8,
 });

apps/typegpu-docs/src/utils/examples/exampleControlAtom.ts

@@ -23,12 +23,12 @@ export type SliderControlParam = {
   label: string;
 };
 
-export type VectorSliderControlParam = {
-  onVectorSliderChange: (newValue: number[]) => void;
-  initial: number[];
-  min: number[];
-  max: number[];
-  step: number[];
+export type VectorSliderControlParam<T extends d.v2f | d.v3f | d.v4f> = {
+  onVectorSliderChange: (newValue: T) => void;
+  initial: T;
+  min: T;
+  max: T;
+  step: T;
   label: string;
 };
 
@@ -55,7 +55,9 @@ export type ExampleControlParam =
   | SliderControlParam
   | ButtonControlParam
   | TextAreaControlParam
-  | VectorSliderControlParam
+  | VectorSliderControlParam<d.v2f>
+  | VectorSliderControlParam<d.v3f>
+  | VectorSliderControlParam<d.v4f>
   | ColorPickerControlParam;
 
 export const exampleControlsAtom = atom<ExampleControlParam[]>([]);

apps/typegpu-docs/src/utils/examples/exampleRunner.ts

@@ -1,3 +1,4 @@
+import type { d } from 'typegpu';
 import type { ExampleControlParam } from './exampleControlAtom.ts';
 import type { ExampleState } from './exampleState.ts';
 
@@ -14,7 +15,7 @@ function initializeParam(param: ExampleControlParam) {
     return param.onSliderChange(param.initial);
   }
   if ('onVectorSliderChange' in param) {
-    return param.onVectorSliderChange(param.initial);
+    return (param.onVectorSliderChange as (v: d.v2f | d.v3f | d.v4f) => void)(param.initial);
   }
   if ('onColorChange' in param) {
     return param.onColorChange(param.initial);