feat(ui): configurable field constraints for number fields in form builder

invokeai/frontend/web/public/locales/en.json

@@ -1768,7 +1768,9 @@
             "containerPlaceholder": "Empty Container",
             "headingPlaceholder": "Empty Heading",
             "textPlaceholder": "Empty Text",
-            "workflowBuilderAlphaWarning": "The workflow builder is currently in alpha. There may be breaking changes before the stable release."
+            "workflowBuilderAlphaWarning": "The workflow builder is currently in alpha. There may be breaking changes before the stable release.",
+            "minimum": "Minimum",
+            "maximum": "Maximum"
         }
     },
     "controlLayers": {

invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/FloatField/FloatFieldInput.tsx

@@ -3,24 +3,35 @@ import { useFloatField } from 'features/nodes/components/flow/nodes/Invocation/f
 import type { FieldComponentProps } from 'features/nodes/components/flow/nodes/Invocation/fields/inputs/types';
 import { NO_DRAG_CLASS } from 'features/nodes/types/constants';
 import type { FloatFieldInputInstance, FloatFieldInputTemplate } from 'features/nodes/types/field';
+import type { NodeFieldFloatSettings } from 'features/nodes/types/workflow';
 import { memo } from 'react';
 
-export const FloatFieldInput = memo((props: FieldComponentProps<FloatFieldInputInstance, FloatFieldInputTemplate>) => {
-  const { defaultValue, onChange, value, min, max, step, fineStep } = useFloatField(props);
+export const FloatFieldInput = memo(
+  (
+    props: FieldComponentProps<FloatFieldInputInstance, FloatFieldInputTemplate, { settings?: NodeFieldFloatSettings }>
+  ) => {
+    const { nodeId, field, fieldTemplate, settings } = props;
+    const { defaultValue, onChange, min, max, step, fineStep } = useFloatField(
+      nodeId,
+      field.name,
+      fieldTemplate,
+      settings
+    );
 
-  return (
-    <CompositeNumberInput
-      defaultValue={defaultValue}
-      onChange={onChange}
-      value={value}
-      min={min}
-      max={max}
-      step={step}
-      fineStep={fineStep}
-      className={NO_DRAG_CLASS}
-      flex="1 1 0"
-    />
-  );
-});
+    return (
+      <CompositeNumberInput
+        defaultValue={defaultValue}
+        onChange={onChange}
+        value={field.value}
+        min={min}
+        max={max}
+        step={step}
+        fineStep={fineStep}
+        className={NO_DRAG_CLASS}
+        flex="1 1 0"
+      />
+    );
+  }
+);
 
 FloatFieldInput.displayName = 'FloatFieldInput ';

invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/FloatField/FloatFieldInputAndSlider.tsx

@@ -3,18 +3,27 @@ import { useFloatField } from 'features/nodes/components/flow/nodes/Invocation/f
 import type { FieldComponentProps } from 'features/nodes/components/flow/nodes/Invocation/fields/inputs/types';
 import { NO_DRAG_CLASS } from 'features/nodes/types/constants';
 import type { FloatFieldInputInstance, FloatFieldInputTemplate } from 'features/nodes/types/field';
+import type { NodeFieldFloatSettings } from 'features/nodes/types/workflow';
 import { memo } from 'react';
 
 export const FloatFieldInputAndSlider = memo(
-  (props: FieldComponentProps<FloatFieldInputInstance, FloatFieldInputTemplate>) => {
-    const { defaultValue, onChange, value, min, max, step, fineStep } = useFloatField(props);
+  (
+    props: FieldComponentProps<FloatFieldInputInstance, FloatFieldInputTemplate, { settings?: NodeFieldFloatSettings }>
+  ) => {
+    const { nodeId, field, fieldTemplate, settings } = props;
+    const { defaultValue, onChange, min, max, step, fineStep } = useFloatField(
+      nodeId,
+      field.name,
+      fieldTemplate,
+      settings
+    );
 
     return (
       <>
         <CompositeSlider
           defaultValue={defaultValue}
           onChange={onChange}
-          value={value}
+          value={field.value}
           min={min}
           max={max}
           step={step}
@@ -27,7 +36,7 @@ export const FloatFieldInputAndSlider = memo(
         <CompositeNumberInput
           defaultValue={defaultValue}
           onChange={onChange}
-          value={value}
+          value={field.value}
           min={min}
           max={max}
           step={step}

invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/FloatField/FloatFieldSlider.tsx

@@ -3,26 +3,37 @@ import { useFloatField } from 'features/nodes/components/flow/nodes/Invocation/f
 import type { FieldComponentProps } from 'features/nodes/components/flow/nodes/Invocation/fields/inputs/types';
 import { NO_DRAG_CLASS } from 'features/nodes/types/constants';
 import type { FloatFieldInputInstance, FloatFieldInputTemplate } from 'features/nodes/types/field';
+import type { NodeFieldFloatSettings } from 'features/nodes/types/workflow';
 import { memo } from 'react';
 
-export const FloatFieldSlider = memo((props: FieldComponentProps<FloatFieldInputInstance, FloatFieldInputTemplate>) => {
-  const { defaultValue, onChange, value, min, max, step, fineStep } = useFloatField(props);
+export const FloatFieldSlider = memo(
+  (
+    props: FieldComponentProps<FloatFieldInputInstance, FloatFieldInputTemplate, { settings?: NodeFieldFloatSettings }>
+  ) => {
+    const { nodeId, field, fieldTemplate, settings } = props;
+    const { defaultValue, onChange, min, max, step, fineStep } = useFloatField(
+      nodeId,
+      field.name,
+      fieldTemplate,
+      settings
+    );
 
-  return (
-    <CompositeSlider
-      defaultValue={defaultValue}
-      onChange={onChange}
-      value={value}
-      min={min}
-      max={max}
-      step={step}
-      fineStep={fineStep}
-      className={NO_DRAG_CLASS}
-      marks
-      withThumbTooltip
-      flex="1 1 0"
-    />
-  );
-});
+    return (
+      <CompositeSlider
+        defaultValue={defaultValue}
+        onChange={onChange}
+        value={field.value}
+        min={min}
+        max={max}
+        step={step}
+        fineStep={fineStep}
+        className={NO_DRAG_CLASS}
+        marks
+        withThumbTooltip
+        flex="1 1 0"
+      />
+    );
+  }
+);
 
 FloatFieldSlider.displayName = 'FloatFieldSlider ';

invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/FloatField/useFloatField.ts

@@ -1,65 +1,89 @@
 import { NUMPY_RAND_MAX } from 'app/constants';
 import { useAppDispatch } from 'app/store/storeHooks';
-import type { FieldComponentProps } from 'features/nodes/components/flow/nodes/Invocation/fields/inputs/types';
+import { roundDownToMultiple, roundUpToMultiple } from 'common/util/roundDownToMultiple';
 import { fieldFloatValueChanged } from 'features/nodes/store/nodesSlice';
-import type { FloatFieldInputInstance, FloatFieldInputTemplate } from 'features/nodes/types/field';
+import type { FloatFieldInputTemplate } from 'features/nodes/types/field';
+import { constrainNumber } from 'features/nodes/util/constrainNumber';
 import { isNil } from 'lodash-es';
 import { useCallback, useMemo } from 'react';
 
-export const useFloatField = (props: FieldComponentProps<FloatFieldInputInstance, FloatFieldInputTemplate>) => {
-  const { nodeId, field, fieldTemplate } = props;
+export const useFloatField = (
+  nodeId: string,
+  fieldName: string,
+  fieldTemplate: FloatFieldInputTemplate,
+  overrides: { min?: number; max?: number; step?: number } = {}
+) => {
+  const { min: overrideMin, max: overrideMax, step: overrideStep } = overrides;
   const dispatch = useAppDispatch();
 
-  const onChange = useCallback(
-    (value: number) => {
-      dispatch(fieldFloatValueChanged({ nodeId, fieldName: field.name, value }));
-    },
-    [dispatch, field.name, nodeId]
-  );
+  const step = useMemo(() => {
+    if (overrideStep !== undefined) {
+      return overrideStep;
+    }
+    if (isNil(fieldTemplate.multipleOf)) {
+      return 0.1;
+    }
+    return fieldTemplate.multipleOf;
+  }, [fieldTemplate.multipleOf, overrideStep]);
+
+  const fineStep = useMemo(() => {
+    if (overrideStep !== undefined) {
+      return overrideStep;
+    }
+    if (isNil(fieldTemplate.multipleOf)) {
+      return 0.01;
+    }
+    return fieldTemplate.multipleOf;
+  }, [fieldTemplate.multipleOf, overrideStep]);
 
   const min = useMemo(() => {
     let min = -NUMPY_RAND_MAX;
-    if (!isNil(fieldTemplate.minimum)) {
+
+    if (overrideMin !== undefined) {
+      min = overrideMin;
+    } else if (!isNil(fieldTemplate.minimum)) {
       min = fieldTemplate.minimum;
-    }
-    if (!isNil(fieldTemplate.exclusiveMinimum)) {
+    } else if (!isNil(fieldTemplate.exclusiveMinimum)) {
       min = fieldTemplate.exclusiveMinimum + 0.01;
     }
-    return min;
-  }, [fieldTemplate.exclusiveMinimum, fieldTemplate.minimum]);
+
+    return roundUpToMultiple(min, step);
+  }, [fieldTemplate.exclusiveMinimum, fieldTemplate.minimum, overrideMin, step]);
 
   const max = useMemo(() => {
     let max = NUMPY_RAND_MAX;
-    if (!isNil(fieldTemplate.maximum)) {
+
+    if (overrideMax !== undefined) {
+      max = overrideMax;
+    } else if (!isNil(fieldTemplate.maximum)) {
       max = fieldTemplate.maximum;
-    }
-    if (!isNil(fieldTemplate.exclusiveMaximum)) {
+    } else if (!isNil(fieldTemplate.exclusiveMaximum)) {
       max = fieldTemplate.exclusiveMaximum - 0.01;
     }
-    return max;
-  }, [fieldTemplate.exclusiveMaximum, fieldTemplate.maximum]);
 
-  const step = useMemo(() => {
-    if (isNil(fieldTemplate.multipleOf)) {
-      return 0.1;
-    }
-    return fieldTemplate.multipleOf;
-  }, [fieldTemplate.multipleOf]);
+    return roundDownToMultiple(max, step);
+  }, [fieldTemplate.exclusiveMaximum, fieldTemplate.maximum, overrideMax, step]);
 
-  const fineStep = useMemo(() => {
-    if (isNil(fieldTemplate.multipleOf)) {
-      return 0.01;
-    }
-    return fieldTemplate.multipleOf;
-  }, [fieldTemplate.multipleOf]);
+  const constrainValue = useCallback(
+    (v: number) =>
+      constrainNumber(v, { min, max, step: step }, { min: overrideMin, max: overrideMax, step: overrideStep }),
+    [max, min, overrideMax, overrideMin, overrideStep, step]
+  );
+
+  const onChange = useCallback(
+    (value: number) => {
+      dispatch(fieldFloatValueChanged({ nodeId, fieldName, value }));
+    },
+    [dispatch, fieldName, nodeId]
+  );
 
   return {
     defaultValue: fieldTemplate.default,
     onChange,
-    value: field.value,
     min,
     max,
     step,
     fineStep,
+    constrainValue,
   };
 };

invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/InputFieldRenderer.tsx

@@ -95,6 +95,8 @@ import {
 } from 'features/nodes/types/field';
 import type { NodeFieldElement } from 'features/nodes/types/workflow';
 import { memo } from 'react';
+import type { Equals } from 'tsafe';
+import { assert } from 'tsafe';
 
 import BoardFieldInputComponent from './inputs/BoardFieldInputComponent';
 import BooleanFieldInputComponent from './inputs/BooleanFieldInputComponent';
@@ -157,6 +159,8 @@ export const InputFieldRenderer = memo(({ nodeId, fieldName, settings }: Props)
       return <StringFieldInput nodeId={nodeId} field={field} fieldTemplate={template} />;
     } else if (settings.component === 'textarea') {
       return <StringFieldTextarea nodeId={nodeId} field={field} fieldTemplate={template} />;
+    } else {
+      assert<Equals<never, typeof settings.component>>(false, 'Unexpected settings.component');
     }
   }
 
@@ -171,32 +175,47 @@ export const InputFieldRenderer = memo(({ nodeId, fieldName, settings }: Props)
     if (!isIntegerFieldInputInstance(field)) {
       return null;
     }
-    if (settings?.type !== 'integer-field-config') {
+    if (!settings || settings.type !== 'integer-field-config') {
       return <IntegerFieldInput nodeId={nodeId} field={field} fieldTemplate={template} />;
     }
+
     if (settings.component === 'number-input') {
-      return <IntegerFieldInput nodeId={nodeId} field={field} fieldTemplate={template} />;
-    } else if (settings.component === 'slider') {
-      return <IntegerFieldSlider nodeId={nodeId} field={field} fieldTemplate={template} />;
-    } else if (settings.component === 'number-input-and-slider') {
-      return <IntegerFieldInputAndSlider nodeId={nodeId} field={field} fieldTemplate={template} />;
+      return <IntegerFieldInput nodeId={nodeId} field={field} fieldTemplate={template} settings={settings} />;
+    }
+
+    if (settings.component === 'slider') {
+      return <IntegerFieldSlider nodeId={nodeId} field={field} fieldTemplate={template} settings={settings} />;
     }
+
+    if (settings.component === 'number-input-and-slider') {
+      return <IntegerFieldInputAndSlider nodeId={nodeId} field={field} fieldTemplate={template} settings={settings} />;
+    }
+
+    assert<Equals<never, typeof settings.component>>(false, 'Unexpected settings.component');
   }
 
   if (isFloatFieldInputTemplate(template)) {
     if (!isFloatFieldInputInstance(field)) {
       return null;
     }
-    if (settings?.type !== 'float-field-config') {
+
+    if (!settings || settings.type !== 'float-field-config') {
       return <FloatFieldInput nodeId={nodeId} field={field} fieldTemplate={template} />;
     }
+
     if (settings.component === 'number-input') {
-      return <FloatFieldInput nodeId={nodeId} field={field} fieldTemplate={template} />;
-    } else if (settings.component === 'slider') {
-      return <FloatFieldSlider nodeId={nodeId} field={field} fieldTemplate={template} />;
-    } else if (settings.component === 'number-input-and-slider') {
-      return <FloatFieldInputAndSlider nodeId={nodeId} field={field} fieldTemplate={template} />;
+      return <FloatFieldInput nodeId={nodeId} field={field} fieldTemplate={template} settings={settings} />;
+    }
+
+    if (settings.component === 'slider') {
+      return <FloatFieldSlider nodeId={nodeId} field={field} fieldTemplate={template} settings={settings} />;
     }
+
+    if (settings.component === 'number-input-and-slider') {
+      return <FloatFieldInputAndSlider nodeId={nodeId} field={field} fieldTemplate={template} settings={settings} />;
+    }
+
+    assert<Equals<never, typeof settings.component>>(false, 'Unexpected settings.component');
   }
 
   if (isIntegerFieldCollectionInputTemplate(template)) {