feat(ui): configurable form field constraints (WIP2)

Author: psychedelicious

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

@@ -68,8 +68,8 @@ export const useFloatField = (
     (v: number) =>
       constrainNumber(
         v,
-        { min, max, multipleOf: step },
-        { min: overrideMin, max: overrideMax, multipleOf: overrideStep }
+        { min, max, step: step },
+        { min: overrideMin, max: overrideMax, step: overrideStep }
       ),
     [max, min, overrideMax, overrideMin, overrideStep, step]
   );

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

@@ -180,15 +180,15 @@ export const InputFieldRenderer = memo(({ nodeId, fieldName, settings }: Props)
     }
 
     if (settings.component === 'number-input') {
-      return <IntegerFieldInput 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} />;
+      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} />;
+      return <IntegerFieldInputAndSlider nodeId={nodeId} field={field} fieldTemplate={template} settings={settings} />;
     }
 
     assert<Equals<never, typeof settings.component>>(false, 'Unexpected settings.component');

invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/IntegerField/useIntegerField.ts

@@ -68,8 +68,8 @@ export const useIntegerField = (
     (v: number) =>
       constrainNumber(
         v,
-        { min, max, multipleOf: step },
-        { min: overrideMin, max: overrideMax, multipleOf: overrideStep }
+        { min, max, step: step },
+        { min: overrideMin, max: overrideMax, step: overrideStep }
       ),
     [max, min, overrideMax, overrideMin, overrideStep, step]
   );

invokeai/frontend/web/src/features/nodes/components/sidePanel/builder/NodeFieldElementFloatSettings.tsx

@@ -6,6 +6,7 @@ import { fieldFloatValueChanged } from 'features/nodes/store/nodesSlice';
 import { formElementNodeFieldDataChanged } from 'features/nodes/store/workflowSlice';
 import type { FloatFieldInputInstance, FloatFieldInputTemplate } from 'features/nodes/types/field';
 import { type NodeFieldFloatSettings, zNumberComponent } from 'features/nodes/types/workflow';
+import { constrainNumber } from 'features/nodes/util/constrainNumber';
 import type { ChangeEvent } from 'react';
 import { memo, useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
@@ -79,7 +80,9 @@ const SettingMin = memo(({ id, config, nodeId, fieldName, fieldTemplate }: Props
         min: v,
       };
       dispatch(formElementNodeFieldDataChanged({ id, changes: { settings: newConfig } }));
-      const constrained = constrain(v, floatField, newConfig);
+
+      // We may need to update the value if it is outside the new min/max range
+      const constrained = constrainNumber(field.value, floatField, newConfig);
       if (field.value !== constrained) {
         dispatch(fieldFloatValueChanged({ nodeId, fieldName, value: v }));
       }
@@ -128,9 +131,11 @@ const SettingMax = memo(({ id, config, nodeId, fieldName, fieldTemplate }: Props
         max: v,
       };
       dispatch(formElementNodeFieldDataChanged({ id, changes: { settings: newConfig } }));
-      const constrained = constrain(v, floatField, newConfig);
+
+      // We may need to update the value if it is outside the new min/max range
+      const constrained = constrainNumber(field.value, floatField, newConfig);
       if (field.value !== constrained) {
-        dispatch(fieldFloatValueChanged({ nodeId, fieldName, value: v }));
+        dispatch(fieldFloatValueChanged({ nodeId, fieldName, value: constrained }));
       }
     },
     [config, dispatch, field.value, fieldName, floatField, id, nodeId]
@@ -154,14 +159,3 @@ const SettingMax = memo(({ id, config, nodeId, fieldName, fieldTemplate }: Props
   );
 });
 SettingMax.displayName = 'SettingMax';
-
-const constrain = (v: number, fieldSettings: ReturnType<typeof useFloatField>, overrides: NodeFieldFloatSettings) => {
-  const min = overrides.min ?? fieldSettings.min;
-  const max = overrides.max ?? fieldSettings.max;
-  const step = overrides.step ?? fieldSettings.step;
-
-  const _v = Math.min(max, Math.max(min, v));
-  const _diff = _v - min;
-  const _steps = Math.round(_diff / step);
-  return min + _steps * step;
-};

invokeai/frontend/web/src/features/nodes/components/sidePanel/builder/NodeFieldElementIntegerSettings.tsx

@@ -7,10 +7,10 @@ import { formElementNodeFieldDataChanged } from 'features/nodes/store/workflowSl
 import type { IntegerFieldInputInstance, IntegerFieldInputTemplate } from 'features/nodes/types/field';
 import type { NodeFieldIntegerSettings } from 'features/nodes/types/workflow';
 import { zNumberComponent } from 'features/nodes/types/workflow';
+import { constrainNumber } from 'features/nodes/util/constrainNumber';
 import type { ChangeEvent } from 'react';
 import { memo, useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
-import type { PartialDeep } from 'type-fest';
 
 type Props = {
   id: string;
@@ -80,10 +80,13 @@ const SettingMin = memo(({ id, config, nodeId, fieldName, fieldTemplate }: Props
         ...config,
         min: v,
       };
+
       dispatch(formElementNodeFieldDataChanged({ id, changes: { settings: newConfig } }));
-      const constrained = constrain(v, floatField, newConfig);
+
+      // We may need to update the value if it is outside the new min/max range
+      const constrained = constrainNumber(field.value, { ...floatField }, newConfig);
       if (field.value !== constrained) {
-        dispatch(fieldIntegerValueChanged({ nodeId, fieldName, value: v }));
+        dispatch(fieldIntegerValueChanged({ nodeId, fieldName, value: constrained }));
       }
     },
     [config, dispatch, field.value, fieldName, floatField, id, nodeId]
@@ -101,7 +104,7 @@ const SettingMin = memo(({ id, config, nodeId, fieldName, fieldTemplate }: Props
         value={config.min === undefined ? (`${floatField.min} (inherited)` as unknown as number) : config.min}
         onChange={onChange}
         min={floatField.min}
-        max={(config.max ?? floatField.max) - 0.1}
+        max={(config.max ?? floatField.max) - 1}
       />
     </FormControl>
   );
@@ -129,10 +132,13 @@ const SettingMax = memo(({ id, config, nodeId, fieldName, fieldTemplate }: Props
         ...config,
         max: v,
       };
+
       dispatch(formElementNodeFieldDataChanged({ id, changes: { settings: newConfig } }));
-      const constrained = constrain(v, floatField, newConfig);
+
+      // We may need to update the value if it is outside the new min/max range
+      const constrained = constrainNumber(field.value, floatField, newConfig);
       if (field.value !== constrained) {
-        dispatch(fieldIntegerValueChanged({ nodeId, fieldName, value: v }));
+        dispatch(fieldIntegerValueChanged({ nodeId, fieldName, value: constrained }));
       }
     },
     [config, dispatch, field.value, fieldName, floatField, id, nodeId]
@@ -149,25 +155,10 @@ const SettingMax = memo(({ id, config, nodeId, fieldName, fieldTemplate }: Props
         isDisabled={config.max === undefined}
         value={config.max === undefined ? (`${floatField.max} (inherited)` as unknown as number) : config.max}
         onChange={onChange}
-        min={(config.min ?? floatField.min) + 0.1}
+        min={(config.min ?? floatField.min) + 1}
         max={floatField.max}
       />
     </FormControl>
   );
 });
 SettingMax.displayName = 'SettingMax';
-
-type NumberConstraints = { min: number; max: number; step: number };
-
-const constrain = (v: number, constraints: NumberConstraints, overrides: PartialDeep<NumberConstraints>) => {
-  const min = overrides.min ?? constraints.min;
-  const max = overrides.max ?? constraints.max;
-  const step = overrides.step ?? constraints.step;
-
-  console.log({ min, max, step });
-
-  const _v = Math.min(max, Math.max(min, v));
-  const _diff = _v - min;
-  const _steps = Math.round(_diff / step);
-  return min + _steps * step;
-};

invokeai/frontend/web/src/features/nodes/util/constrainNumber.test.ts

@@ -4,7 +4,7 @@ import { constrainNumber } from './constrainNumber';
 
 describe('constrainNumber', () => {
   // Default constraints to be used in tests
-  const defaultConstraints = { min: 0, max: 10, multipleOf: 1 };
+  const defaultConstraints = { min: 0, max: 10, step: 1 };
 
   it('should keep values within range', () => {
     expect(constrainNumber(5, defaultConstraints)).toBe(5);
@@ -13,7 +13,7 @@ describe('constrainNumber', () => {
   });
 
   it('should round to nearest multiple', () => {
-    const constraints = { min: 0, max: 10, multipleOf: 2 };
+    const constraints = { min: 0, max: 10, step: 2 };
     expect(constrainNumber(1, constraints)).toBe(2);
     expect(constrainNumber(2, constraints)).toBe(2);
     expect(constrainNumber(3, constraints)).toBe(4);
@@ -22,7 +22,7 @@ describe('constrainNumber', () => {
   });
 
   it('should handle negative multiples', () => {
-    const constraints = { min: -10, max: 10, multipleOf: 3 };
+    const constraints = { min: -10, max: 10, step: 3 };
     expect(constrainNumber(-9, constraints)).toBe(-9);
     expect(constrainNumber(-8, constraints)).toBe(-9);
     expect(constrainNumber(-7, constraints)).toBe(-6);
@@ -41,15 +41,15 @@ describe('constrainNumber', () => {
   });
 
   it('should respect boundaries when rounding', () => {
-    const constraints = { min: 0, max: 10, multipleOf: 4 };
+    const constraints = { min: 0, max: 10, step: 4 };
     // Value at 9 would normally round to 8
     expect(constrainNumber(9, constraints)).toBe(8);
     // Value at 11 would normally round to 12, but max is 10
     expect(constrainNumber(11, constraints)).toBe(10);
   });
 
   it('should handle decimal multiples', () => {
-    const constraints = { min: 0, max: 1, multipleOf: 0.25 };
+    const constraints = { min: 0, max: 1, step: 0.25 };
     expect(constrainNumber(0.3, constraints)).toBe(0.25);
     expect(constrainNumber(0.87, constraints)).toBe(0.75);
     expect(constrainNumber(0.88, constraints)).toBe(1.0);
@@ -64,10 +64,10 @@ describe('constrainNumber', () => {
     expect(constrainNumber(8, defaultConstraints, { max: 7 })).toBe(7);
 
     // Override multipleOf
-    expect(constrainNumber(4.7, defaultConstraints, { multipleOf: 2 })).toBe(4);
+    expect(constrainNumber(4.7, defaultConstraints, { step: 2 })).toBe(4);
 
     // Override all
-    expect(constrainNumber(15, defaultConstraints, { min: 5, max: 20, multipleOf: 5 })).toBe(15);
+    expect(constrainNumber(15, defaultConstraints, { min: 5, max: 20, step: 5 })).toBe(15);
   });
 
   it('should handle edge cases', () => {
@@ -78,7 +78,7 @@ describe('constrainNumber', () => {
     expect(constrainNumber(10, defaultConstraints)).toBe(10);
 
     // multipleOf larger than range
-    const narrowConstraints = { min: 5, max: 7, multipleOf: 5 };
+    const narrowConstraints = { min: 5, max: 7, step: 5 };
     expect(constrainNumber(6, narrowConstraints)).toBe(5);
   });
 });

invokeai/frontend/web/src/features/nodes/util/constrainNumber.ts

@@ -1,6 +1,6 @@
 import type { PartialDeep } from 'type-fest';
 
-type NumberConstraints = { min: number; max: number; multipleOf?: number };
+type NumberConstraints = { min: number; max: number; step?: number };
 
 /**
  * Constrain a number to a range and round to the nearest multiple of a given value.
@@ -16,7 +16,7 @@ export const constrainNumber = (
 ) => {
   const min = overrides?.min ?? constraints.min;
   const max = overrides?.max ?? constraints.max;
-  const multipleOf = overrides?.multipleOf ?? constraints.multipleOf;
+  const multipleOf = overrides?.step ?? constraints.step;
 
   if (multipleOf === undefined) {
     return Math.min(Math.max(v, min), max);