From 29cfe5a2745c233a6557256271688360995905ca Mon Sep 17 00:00:00 2001
From: psychedelicious <4822129+psychedelicious@users.noreply.github.com>
Date: Sat, 6 Apr 2024 15:30:30 +1100
Subject: [PATCH] fix(ui): handle multipleOf on number fields

This data is already in the template but it wasn't ever used.

One big place where this improves UX is the noise node. Previously, the UI let you change width and height in increments of 1, despite the template requiring a multiple of 8. It now works in multiples of 8.
---
 .../inputs/NumberFieldInputComponent.tsx      | 36 +++++++++++++------
 1 file changed, 26 insertions(+), 10 deletions(-)

diff --git a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/inputs/NumberFieldInputComponent.tsx b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/inputs/NumberFieldInputComponent.tsx
index 0cb250bb22..e3f33d8a45 100644
--- a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/inputs/NumberFieldInputComponent.tsx
+++ b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/inputs/NumberFieldInputComponent.tsx
@@ -37,34 +37,50 @@ const NumberFieldInputComponent = (
   );
 
   const min = useMemo(() => {
+    let min = -NUMPY_RAND_MAX;
     if (!isNil(fieldTemplate.minimum)) {
-      return fieldTemplate.minimum;
+      min = fieldTemplate.minimum;
     }
     if (!isNil(fieldTemplate.exclusiveMinimum)) {
-      return fieldTemplate.exclusiveMinimum + 0.01;
+      min = fieldTemplate.exclusiveMinimum + 0.01;
     }
-    return;
+    return min;
   }, [fieldTemplate.exclusiveMinimum, fieldTemplate.minimum]);
 
   const max = useMemo(() => {
+    let max = NUMPY_RAND_MAX;
     if (!isNil(fieldTemplate.maximum)) {
-      return fieldTemplate.maximum;
+      max = fieldTemplate.maximum;
     }
     if (!isNil(fieldTemplate.exclusiveMaximum)) {
-      return fieldTemplate.exclusiveMaximum - 0.01;
+      max = fieldTemplate.exclusiveMaximum - 0.01;
     }
-    return;
+    return max;
   }, [fieldTemplate.exclusiveMaximum, fieldTemplate.maximum]);
 
+  const step = useMemo(() => {
+    if (isNil(fieldTemplate.multipleOf)) {
+      return isIntegerField ? 1 : 0.1;
+    }
+    return fieldTemplate.multipleOf;
+  }, [fieldTemplate.multipleOf, isIntegerField]);
+
+  const fineStep = useMemo(() => {
+    if (isNil(fieldTemplate.multipleOf)) {
+      return isIntegerField ? 1 : 0.01;
+    }
+    return fieldTemplate.multipleOf;
+  }, [fieldTemplate.multipleOf, isIntegerField]);
+
   return (
     <CompositeNumberInput
       defaultValue={fieldTemplate.default}
       onChange={handleValueChanged}
       value={field.value}
-      min={min ?? -NUMPY_RAND_MAX}
-      max={max ?? NUMPY_RAND_MAX}
-      step={isIntegerField ? 1 : 0.1}
-      fineStep={isIntegerField ? 1 : 0.01}
+      min={min}
+      max={max}
+      step={step}
+      fineStep={fineStep}
       className="nodrag"
     />
   );