Combine X/Y node parameters into one section in the inspector

adamwych · adamwych · commit 7f7bf735e053 · 2023-11-17T21:00:25.000+01:00
diff --git a/packages/material/node-parameter.ts b/packages/material/node-parameter.ts
@@ -1,5 +1,5 @@
 export type ParameterInputType = "number" | "rgb" | "select";
-export type ParameterValueType = "int" | "float" | "vec3";
+export type ParameterValueType = "int" | "float" | "vec2" | "vec3" | "ivec2";
 
 type MakeParameterInputInfo<
     InputType extends ParameterInputType,
@@ -23,8 +23,8 @@ type MakeParameterInputInfo<
 export type NumberParameterInputInfo = MakeParameterInputInfo<
     "number",
     { min: number; max: number; step?: number },
-    number,
-    "int" | "float"
+    number | Array<number>,
+    "int" | "float" | "vec2" | "vec3" | "ivec2"
 >;
 
 export type RgbParameterInputInfo = MakeParameterInputInfo<
diff --git a/packages/renderer/webgl2/painters/scatter.ts b/packages/renderer/webgl2/painters/scatter.ts
@@ -9,8 +9,7 @@ export default class ScatterNodePainter extends PatternNodePainter {
 
         const randomnessSeed = node.parameters["seed"] as number;
         const size = (node.parameters["size"] as number) * 2048;
-        const spreadX = node.parameters["spreadX"] as number;
-        const spreadY = node.parameters["spreadY"] as number;
+        const spread = node.parameters["spread"] as [number, number];
         const randomRotation = node.parameters["randomRotation"] as number;
         const randomScale = (node.parameters["randomScale"] as number) / 2048;
 
@@ -22,7 +21,7 @@ export default class ScatterNodePainter extends PatternNodePainter {
             const scale = size / 2048 + rng() * randomScale - randomScale / 2;
             elements.push({
                 rotation: rng() * randomRotation,
-                position: [rng() * spreadX - spreadX / 2, rng() * spreadY - spreadY / 2, 0],
+                position: [rng() * spread[0] - spread[0] / 2, rng() * spread[1] - spread[1] / 2, 0],
                 scale: [scale, scale],
             });
         }
diff --git a/packages/renderer/webgl2/painters/tile.ts b/packages/renderer/webgl2/painters/tile.ts
@@ -6,10 +6,12 @@ export default class TileNodePainter extends PatternNodePainter {
         const node = snapshot.node;
         const elements: Array<PatternElement> = [];
 
-        const amountX = Math.floor(node.parameters["amountX"] as number);
-        const amountY = Math.floor(node.parameters["amountY"] as number);
-        const extraOffsetX = (node.parameters["offsetX"] as number) / amountX;
-        const extraOffsetY = (node.parameters["offsetY"] as number) / amountY;
+        const amountXY = node.parameters["amount"] as [number, number];
+        const amountX = Math.floor(amountXY[0]);
+        const amountY = Math.floor(amountXY[1]);
+        const extraOffsetXY = node.parameters["offset"] as [number, number];
+        const extraOffsetX = extraOffsetXY[0] / amountX;
+        const extraOffsetY = extraOffsetXY[1] / amountY;
         const scale = 1 / Math.max(amountX, amountY);
 
         const toAddY = Math.ceil(extraOffsetY * amountY * amountY + 1);
diff --git a/packages/ui/editor/inspector/inputs/number.tsx b/packages/ui/editor/inspector/inputs/number.tsx
@@ -1,44 +1,86 @@
-import { createEffect, createSignal } from "solid-js";
+import { Accessor, For, createEffect, createSignal } from "solid-js";
 import { NumberParameterInputInfo } from "../../../../material/node-parameter";
 import HorizontalSlider from "../../../components/slider/horizontalSlider";
 import { InputProps } from "../parameter";
 
 export default function MaterialNodeInspectorNumberInput(
-    props: InputProps<NumberParameterInputInfo, number>,
+    props: InputProps<NumberParameterInputInfo, number | Array<number>>,
 ) {
-    const [maxScale, setMaxScale] = createSignal(1);
-    const isFloat = props.parameter.valueType === "float";
+    const isFloat = props.parameter.valueType !== "int" && props.parameter.valueType !== "ivec2";
 
-    createEffect(() => {
-        const max = props.parameter.inputProps.max ?? 1;
-        if (props.value() > max * maxScale()) {
-            setMaxScale((s) => s * 2);
-        }
-    });
+    function onChange(index: number, value: number) {
+        const currentValue = props.value() as Array<number>;
+        const newValue = [...currentValue];
+        newValue[index] = value;
+        props.onChange(newValue);
+    }
+
+    function InnerInput({
+        value,
+        onChange,
+    }: {
+        value: Accessor<number>;
+        onChange: (value: number) => void;
+    }) {
+        const [maxScale, setMaxScale] = createSignal(1);
+
+        createEffect(() => {
+            const max = props.parameter.inputProps.max ?? 1;
+            if (value() > max * maxScale()) {
+                setMaxScale((s) => s * 2);
+            }
+        });
+
+        return (
+            <div class="flex items-center gap-4">
+                <input
+                    style={{ width: "44px" }}
+                    class="hide-spin-button py-0.5 outline-none bg-gray-0 border border-gray-200 text-xs text-center rounded-md"
+                    type="number"
+                    value={isFloat ? value().toFixed(2) : value()}
+                    onChange={(ev) =>
+                        onChange(isFloat ? parseFloat(ev.target.value) : parseInt(ev.target.value))
+                    }
+                />
+
+                <HorizontalSlider
+                    min={props.parameter.inputProps.min ?? 0}
+                    max={(props.parameter.inputProps.max ?? 1) * maxScale()}
+                    step={props.parameter.inputProps.step ?? 0.01}
+                    value={value()}
+                    onChange={(value) => onChange(isFloat ? value : Math.round(value))}
+                    onPointerDown={props.onFocus}
+                    onPointerUp={props.onBlur}
+                />
+            </div>
+        );
+    }
+
+    const numberOfInputs = getNumberOfInputs(props.parameter);
+    if (numberOfInputs === 1) {
+        return <InnerInput value={() => props.value() as number} onChange={props.onChange} />;
+    }
 
     return (
-        <div class="flex items-center gap-4">
-            <input
-                style={{ width: "44px" }}
-                class="hide-spin-button py-0.5 outline-none bg-gray-0 border border-gray-200 text-xs text-center rounded-md"
-                type="number"
-                value={isFloat ? props.value().toFixed(2) : props.value()}
-                onChange={(ev) =>
-                    props.onChange(
-                        isFloat ? parseFloat(ev.target.value) : parseInt(ev.target.value),
-                    )
-                }
-            />
-
-            <HorizontalSlider
-                min={props.parameter.inputProps.min ?? 0}
-                max={(props.parameter.inputProps.max ?? 1) * maxScale()}
-                step={props.parameter.inputProps.step ?? 0.01}
-                value={props.value()}
-                onChange={(value) => props.onChange(isFloat ? value : Math.round(value))}
-                onPointerDown={props.onFocus}
-                onPointerUp={props.onBlur}
-            />
+        <div class="flex flex-col gap-2">
+            <For each={Array(numberOfInputs).fill(0)}>
+                {(_, index) => (
+                    <InnerInput
+                        value={() => (props.value() as Array<number>)[index()]}
+                        onChange={(v) => onChange(index(), v)}
+                    />
+                )}
+            </For>
         </div>
     );
 }
+
+function getNumberOfInputs(parameter: NumberParameterInputInfo) {
+    if (parameter.valueType === "vec2" || parameter.valueType === "ivec2") {
+        return 2;
+    } else if (parameter.valueType === "vec3") {
+        return 3;
+    }
+
+    return 1;
+}
diff --git a/resources/nodes/layout/scatter.ts b/resources/nodes/layout/scatter.ts
@@ -28,23 +28,12 @@ export default {
                 max: 1,
             },
         },
-        spreadX: {
-            id: "spreadX",
-            name: "Spread X",
-            default: 1,
-            inputType: "number",
-            valueType: "float",
-            inputProps: {
-                min: 0,
-                max: 4,
-            },
-        },
-        spreadY: {
-            id: "spreadY",
-            name: "Spread Y",
-            default: 1,
+        spread: {
+            id: "spread",
+            name: "Spread X/Y",
+            default: [1, 1],
             inputType: "number",
-            valueType: "float",
+            valueType: "vec2",
             inputProps: {
                 min: 0,
                 max: 4,
diff --git a/resources/nodes/layout/tile.ts b/resources/nodes/layout/tile.ts
@@ -5,45 +5,23 @@ export default {
     name: "Tile",
     groupName: "Layout",
     parameters: {
-        amountX: {
-            id: "amountX",
-            name: "Amount X",
-            default: 1,
+        amount: {
+            id: "amount",
+            name: "Amount X/Y",
+            default: [1, 1],
             inputType: "number",
-            valueType: "int",
+            valueType: "ivec2",
             inputProps: {
                 min: 1,
                 max: 16,
             },
         },
-        amountY: {
-            id: "amountY",
-            name: "Amount Y",
-            default: 1,
+        offset: {
+            id: "offset",
+            name: "Offset X/Y",
+            default: [0, 0],
             inputType: "number",
-            valueType: "int",
-            inputProps: {
-                min: 1,
-                max: 16,
-            },
-        },
-        offsetX: {
-            id: "offsetX",
-            name: "Offset X",
-            default: 0,
-            inputType: "number",
-            valueType: "float",
-            inputProps: {
-                min: 0,
-                max: 1,
-            },
-        },
-        offsetY: {
-            id: "offsetY",
-            name: "Offset Y",
-            default: 0,
-            inputType: "number",
-            valueType: "float",
+            valueType: "vec2",
             inputProps: {
                 min: 0,
                 max: 1,
diff --git a/resources/nodes/layout/transform.glsl b/resources/nodes/layout/transform.glsl
@@ -3,11 +3,9 @@ precision highp float;
 
 in vec2 a_texCoord;
 
-uniform float p_offsetX;
-uniform float p_offsetY;
+uniform vec2 p_offset;
 uniform float p_rotation;
-uniform float p_scaleX;
-uniform float p_scaleY;
+uniform vec2 p_scale;
 uniform int p_wrapMode;
 
 uniform sampler2D i_in;
@@ -19,7 +17,7 @@ out vec4 out_color;
 #define WRAP_MODE_CUTOUT 2
 
 vec2 translateUV(vec2 uv, vec2 translation) {
-    return vec2(mod(uv.x + p_offsetX, 1.0f), mod(uv.y + p_offsetY, 1.0f));
+    return vec2(mod(uv.x + p_offset.x, 1.0f), mod(uv.y + p_offset.y, 1.0f));
 }
 
 vec2 rotateUV(vec2 uv, float rotation, vec2 pivot) {
@@ -32,9 +30,9 @@ vec2 scaleUV(vec2 uv, vec2 scale, vec2 pivot) {
 
 void main(void) {
     vec2 uv = vec2(0.0f);
-    uv = translateUV(a_texCoord, vec2(p_offsetX, p_offsetY));
+    uv = translateUV(a_texCoord, vec2(p_offset.x, p_offset.y));
     uv = rotateUV(uv, radians(360.0f - p_rotation), vec2(0.5f, 0.5f));
-    uv = scaleUV(uv, vec2(p_scaleX, p_scaleY), vec2(0.5f, 0.5f));
+    uv = scaleUV(uv, vec2(p_scale.x, p_scale.y), vec2(0.5f, 0.5f));
 
     if(p_wrapMode == WRAP_MODE_REPEAT) {
         uv.x = mod(uv.x, 1.0f);
diff --git a/resources/nodes/layout/transform.ts b/resources/nodes/layout/transform.ts
@@ -6,27 +6,16 @@ export default {
     name: "Transform",
     groupName: "Layout",
     parameters: {
-        offsetX: {
-            id: "offsetX",
-            name: "Offset X",
-            default: 0,
-            inputType: "number",
-            inputProps: {
-                min: -1,
-                max: 1,
-            },
-            valueType: "float",
-        },
-        offsetY: {
-            id: "offsetY",
-            name: "Offset Y",
-            default: 0,
+        offset: {
+            id: "offset",
+            name: "Offset X/Y",
+            default: [0, 0],
             inputType: "number",
             inputProps: {
                 min: -1,
                 max: 1,
             },
-            valueType: "float",
+            valueType: "vec2",
         },
         rotation: {
             id: "rotation",
@@ -39,27 +28,16 @@ export default {
             },
             valueType: "float",
         },
-        scaleX: {
-            id: "scaleX",
-            name: "Scale X",
-            default: 1,
+        scale: {
+            id: "scale",
+            name: "Scale X/Y",
+            default: [1, 1],
             inputType: "number",
             inputProps: {
                 min: 0,
                 max: 2,
             },
-            valueType: "float",
-        },
-        scaleY: {
-            id: "scaleY",
-            name: "Scale Y",
-            default: 1,
-            inputType: "number",
-            inputProps: {
-                min: 0,
-                max: 2,
-            },
-            valueType: "float",
+            valueType: "vec2",
         },
         wrapMode: {
             id: "wrapMode",
diff --git a/resources/nodes/noises/perlin.fs b/resources/nodes/noises/perlin.fs
@@ -3,8 +3,7 @@ precision highp float;
 
 in vec2 a_texCoord;
 
-uniform float p_offsetX;
-uniform float p_offsetY;
+uniform vec2 p_offset;
 uniform float p_sharpness;
 uniform float p_scale;
 uniform int p_levels;
@@ -39,7 +38,7 @@ void main(void) {
     out_color = vec4(0, 0, 0, 1);
 
     vec2 uv = a_texCoord;
-    uv += vec2(p_offsetX, p_offsetY);
+    uv += p_offset;
     uv *= p_scale;
 
     float n = 0.0f;
diff --git a/resources/nodes/noises/perlin.ts b/resources/nodes/noises/perlin.ts
diff --git a/resources/nodes/noises/voronoi.fs b/resources/nodes/noises/voronoi.fs
diff --git a/resources/nodes/noises/voronoi.ts b/resources/nodes/noises/voronoi.ts
