fix: integer sliders and slider max for color space nodes

src/components/input/EntryRgb.vue

@@ -8,45 +8,26 @@ import {tooltipController, settings} from "../store";
 
 import {Vec3} from "@/util";
 import getString, {NO_DESC, StringKey} from "@/strings";
-
-
-const props = defineProps({
-  modelValue: {
-    type: Array as any as PropType<Vec3>,
-    required: true,
-  },
-
-  validate: {
-    // type requires a generic component
-    type: Function as PropType<(proposedValue: any) => boolean>,
-    default: acceptAlways,
-  },
-
-  convertIn: {
-    type: Function as PropType<(value: any) => any>,
-    default: cloneArray,
-  },
-
-  convertOut: {
-    type: Function as PropType<(value: any) => any>,
-    default: cloneArray,
-  },
-
-
-  maxes: {
-    type: Array as PropType<number[]>,
-    default: [],
-  },
-
-  sliderProps: {
-    type: Array,
-    default: [],
-  },
-
-  descs: {
-    type: Array as PropType<StringKey[]>,
-    default: [],
-  },
+import { SliderProps } from "@/models/Node";
+
+
+const props = withDefaults(defineProps<{
+  modelValue: Vec3,
+  validate?: (proposedValue: Vec3) => boolean,
+  convertIn?: (proposedValue: Vec3) => Vec3,
+  convertOut?: (proposedValue: Vec3) => Vec3,
+  maxes?: number[],
+  softMaxes?: number[],
+  sliderProps?: SliderProps[],
+  descs?: StringKey[],
+}>(), {
+  validate: acceptAlways,
+  convertIn: cloneArray,
+  convertOut: cloneArray,
+  maxes: [],
+  softMaxes: [],
+  sliderProps: [],
+  descs: [],
 });
 
 

src/components/input/EntrySlider.vue

@@ -51,7 +51,7 @@ const proposedValueIsValid = ref(true);
 const entryActive = ref(false);
 
 
-const tempValue = ref(props.convertOut(props.modelValue).toString());
+const tempValue = ref("");
 
 const displayValue = computed({
   get: () => entryActive.value ? tempValue.value : Number(Number(tempValue.value).toFixed(4)).toString(),
@@ -77,6 +77,7 @@ const emit = defineEmits([
 const setDisplayToTrueValue = () => {
   tempValue.value = props.convertOut(props.modelValue).toString();
 };
+setDisplayToTrueValue();
 
 
 const onInput = () => {

src/components/input/base-functions.ts

@@ -1,3 +1,5 @@
+import { Vec3 } from "@/util";
+
 export const acceptAlways = () => true;
 export const identity = <T>(value: T) => value;
-export const cloneArray = <T>(value: T[]): T[] => [...value];
+export const cloneArray = (value: Vec3): Vec3 => [...value];

src/components/node/NodeSocketField.vue

@@ -7,7 +7,7 @@ import EntrySlider from "../input/EntrySlider.vue";
 
 import {settings, tree} from "../store";
 
-import {Socket, SocketType as St, SocketFlag, Tree} from "@/models/Node";
+import {Socket, SocketType, SocketFlag, Tree} from "@/models/Node";
 import {externals} from "@/models/nodetypes";
 import getString, {NO_DESC} from "@/strings";
 
@@ -50,44 +50,45 @@ const onValueChange = (requiresShaderReload=false) => {
 const isOutputNode = props.socket.node instanceof externals.DeviceTransformNode;
 
 
-const isFloat = props.socket.isType(St.Float);
-const isVector = [St.Vector, St.VectorOrColor].includes(props.socket.type) && !isOutputNode;
-
-const isEntry = isFloat || isVector;
+const isNumeric = [SocketType.Float, SocketType.Integer].includes(props.socket.type);
+const isVector = [SocketType.Vector, SocketType.VectorOrColor].includes(props.socket.type) && !isOutputNode;
 
 const isRgb = Boolean(props.socket.flags & SocketFlag.Rgb);
 const isHue = Boolean(props.socket.flags & SocketFlag.Hue);
 
-type FloatSocket = Socket<St.Float>;
-type VectorSocket = Socket<St.Vector | St.VectorOrColor>;
+type VectorSocket = Socket<SocketType.Vector | SocketType.VectorOrColor>;
 </script>
 
 <template>
   <div class="socket-value-editor"
       ref="editorContainer">
-    <template v-if="isFloat">
-      <EntrySlider v-model="(socket as FloatSocket).fieldValue"
-          @update:modelValue="onValueChange(socket.valueChangeRequiresShaderReload)"
-
-          :convertIn="
-            isRgb ? (value: number) => value / settings.rgbScale :
-            isHue ? (value: number) => value / settings.hueScale :
-            undefined
-          "
-          :convertOut="
-            isRgb ? (value: number) => value * settings.rgbScale :
-            isHue ? (value: number) => value * settings.hueScale :
-            undefined
-          "
-          :validate="isFinite"
-
-          :max="
-            isRgb ? settings.rgbScale :
-            isHue ? settings.hueScale :
-            undefined
-          "
-
-          v-bind="(socket as FloatSocket).data.sliderProps" />
+    <template v-if="isNumeric">
+      <EntrySlider
+        v-model="(socket as Socket<SocketType.Float>).fieldValue"
+        @update:modelValue="onValueChange(socket.valueChangeRequiresShaderReload)"
+
+        :convertIn="
+          isRgb ? (value: number) => value / settings.rgbScale :
+          isHue ? (value: number) => value / settings.hueScale :
+          undefined
+        "
+        :convertOut="
+          isRgb ? (value: number) => value * settings.rgbScale :
+          isHue ? (value: number) => value * settings.hueScale :
+          undefined
+        "
+        :validate="isFinite"
+
+        :softMax="
+          isRgb ? settings.rgbScale :
+          isHue ? settings.hueScale :
+          undefined
+        "
+
+        :step="props.socket.type === SocketType.Integer ? 1 : undefined"
+
+        v-bind="(socket as Socket<SocketType.Float>).data.sliderProps"
+      />
     </template>
 
     <template v-else-if="isVector">
@@ -106,7 +107,7 @@ type VectorSocket = Socket<St.Vector | St.VectorOrColor>;
           "
           :validate="(color: number[]) => color.every(comp => isFinite(comp))"
 
-          :maxes="
+          :softMaxes="
             isRgb ? (socket as VectorSocket).fieldValue.map(() => settings.rgbScale) :
             isHue ? (socket as VectorSocket).fieldValue.map(() => settings.hueScale) :
             undefined
@@ -115,20 +116,20 @@ type VectorSocket = Socket<St.Vector | St.VectorOrColor>;
           :descs="socket.fieldText" />
     </template>
 
-    <template v-else-if="socket.type === St.Dropdown">
+    <template v-else-if="socket.type === SocketType.Dropdown">
       <label>
         <select v-model="socket.fieldValue"
             @change="onValueChange(socket.valueChangeRequiresShaderReload)">
           <option
-            v-for="{text, value} of (socket as Socket<St.Dropdown>).data.options"
+            v-for="{text, value} of (socket as Socket<SocketType.Dropdown>).data.options"
             :value="value"
             v-html="getString(text)"
           ></option>
         </select>
       </label>
     </template>
 
-    <template v-else-if="socket.type === St.Image">
+    <template v-else-if="socket.type === SocketType.Image">
       <input type="file"
           accept="image/*"
           ref="fileInput"
@@ -138,7 +139,7 @@ type VectorSocket = Socket<St.Vector | St.VectorOrColor>;
           }" />
     </template>
 
-    <template v-else-if="socket.type === St.Bool">
+    <template v-else-if="socket.type === SocketType.Bool">
       <input type="checkbox"
           v-model="socket.fieldValue"
           @change="onValueChange(socket.valueChangeRequiresShaderReload)" />

src/models/Node.ts

@@ -632,8 +632,10 @@ export abstract class Socket<St extends SocketType=any> {
 
   private static readonly defaultValues = new Map<SocketType, SocketValue>([
     [SocketType.Float, 0],
+    [SocketType.Integer, 0],
     [SocketType.Vector, [0, 0, 0]],
     [SocketType.VectorOrColor, [0, 0, 0]],
+    [SocketType.Bool, false],
   ]);
 
   /** Specifies what destination socket types a source socket type can be linked to, if it cannot be determined

src/models/nodetypes/images.ts

@@ -240,7 +240,7 @@ uniform float ${height};`,
 
       this.ins.push(
         new InSocket(this, SocketType.DynamicAny, "label.socket.sample.source", {
-          ...dynamicTyping.inSocketOptions,
+          ...dynamicTyping.inSocketOptions(val),
           constant: true,
         }),
         ...(this.coordsSockets = [