refactor(ui): split up float and integer field renderers

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

@@ -1,8 +1,10 @@
+import { FloatFieldCollectionInputComponent } from 'features/nodes/components/flow/nodes/Invocation/fields/inputs/FloatFieldCollectionInputComponent';
+import { FloatFieldInputComponent } from 'features/nodes/components/flow/nodes/Invocation/fields/inputs/FloatFieldInputComponent';
 import { FloatGeneratorFieldInputComponent } from 'features/nodes/components/flow/nodes/Invocation/fields/inputs/FloatGeneratorFieldComponent';
 import { ImageFieldCollectionInputComponent } from 'features/nodes/components/flow/nodes/Invocation/fields/inputs/ImageFieldCollectionInputComponent';
+import { IntegerFieldCollectionInputComponent } from 'features/nodes/components/flow/nodes/Invocation/fields/inputs/IntegerFieldCollectionInputComponent';
 import { IntegerGeneratorFieldInputComponent } from 'features/nodes/components/flow/nodes/Invocation/fields/inputs/IntegerGeneratorFieldComponent';
 import ModelIdentifierFieldInputComponent from 'features/nodes/components/flow/nodes/Invocation/fields/inputs/ModelIdentifierFieldInputComponent';
-import { NumberFieldCollectionInputComponent } from 'features/nodes/components/flow/nodes/Invocation/fields/inputs/NumberFieldCollectionInputComponent';
 import { StringFieldCollectionInputComponent } from 'features/nodes/components/flow/nodes/Invocation/fields/inputs/StringFieldCollectionInputComponent';
 import { StringGeneratorFieldInputComponent } from 'features/nodes/components/flow/nodes/Invocation/fields/inputs/StringGeneratorFieldComponent';
 import { useInputFieldInstance } from 'features/nodes/hooks/useInputFieldInstance';
@@ -91,10 +93,10 @@ import EnumFieldInputComponent from './inputs/EnumFieldInputComponent';
 import FluxMainModelFieldInputComponent from './inputs/FluxMainModelFieldInputComponent';
 import FluxVAEModelFieldInputComponent from './inputs/FluxVAEModelFieldInputComponent';
 import ImageFieldInputComponent from './inputs/ImageFieldInputComponent';
+import { IntegerFieldInputComponent } from './inputs/IntegerFieldInputComponent';
 import IPAdapterModelFieldInputComponent from './inputs/IPAdapterModelFieldInputComponent';
 import LoRAModelFieldInputComponent from './inputs/LoRAModelFieldInputComponent';
 import MainModelFieldInputComponent from './inputs/MainModelFieldInputComponent';
-import NumberFieldInputComponent from './inputs/NumberFieldInputComponent';
 import RefinerModelFieldInputComponent from './inputs/RefinerModelFieldInputComponent';
 import SchedulerFieldInputComponent from './inputs/SchedulerFieldInputComponent';
 import SD3MainModelFieldInputComponent from './inputs/SD3MainModelFieldInputComponent';
@@ -126,20 +128,20 @@ export const InputFieldRenderer = memo(({ nodeId, fieldName }: InputFieldProps)
     return <BooleanFieldInputComponent nodeId={nodeId} field={fieldInstance} fieldTemplate={fieldTemplate} />;
   }
 
-  if (isIntegerFieldInputInstance(fieldInstance) && isIntegerFieldInputTemplate(fieldTemplate)) {
-    return <NumberFieldInputComponent nodeId={nodeId} field={fieldInstance} fieldTemplate={fieldTemplate} />;
-  }
-
   if (isFloatFieldInputInstance(fieldInstance) && isFloatFieldInputTemplate(fieldTemplate)) {
-    return <NumberFieldInputComponent nodeId={nodeId} field={fieldInstance} fieldTemplate={fieldTemplate} />;
-  }
-
-  if (isIntegerFieldCollectionInputInstance(fieldInstance) && isIntegerFieldCollectionInputTemplate(fieldTemplate)) {
-    return <NumberFieldCollectionInputComponent nodeId={nodeId} field={fieldInstance} fieldTemplate={fieldTemplate} />;
+    return <FloatFieldInputComponent nodeId={nodeId} field={fieldInstance} fieldTemplate={fieldTemplate} />;
   }
 
   if (isFloatFieldCollectionInputInstance(fieldInstance) && isFloatFieldCollectionInputTemplate(fieldTemplate)) {
-    return <NumberFieldCollectionInputComponent nodeId={nodeId} field={fieldInstance} fieldTemplate={fieldTemplate} />;
+    return <FloatFieldCollectionInputComponent nodeId={nodeId} field={fieldInstance} fieldTemplate={fieldTemplate} />;
+  }
+
+  if (isIntegerFieldInputInstance(fieldInstance) && isIntegerFieldInputTemplate(fieldTemplate)) {
+    return <IntegerFieldInputComponent nodeId={nodeId} field={fieldInstance} fieldTemplate={fieldTemplate} />;
+  }
+
+  if (isIntegerFieldCollectionInputInstance(fieldInstance) && isIntegerFieldCollectionInputTemplate(fieldTemplate)) {
+    return <IntegerFieldCollectionInputComponent nodeId={nodeId} field={fieldInstance} fieldTemplate={fieldTemplate} />;
   }
 
   if (isEnumFieldInputInstance(fieldInstance) && isEnumFieldInputTemplate(fieldTemplate)) {

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

@@ -0,0 +1,221 @@
+import type { SystemStyleObject } from '@invoke-ai/ui-library';
+import {
+  Button,
+  CompositeNumberInput,
+  Divider,
+  Flex,
+  FormLabel,
+  Grid,
+  GridItem,
+  IconButton,
+} from '@invoke-ai/ui-library';
+import { NUMPY_RAND_MAX } from 'app/constants';
+import { useAppStore } from 'app/store/nanostores/store';
+import { getOverlayScrollbarsParams, overlayScrollbarsStyles } from 'common/components/OverlayScrollbars/constants';
+import { useInputFieldIsInvalid } from 'features/nodes/hooks/useInputFieldIsInvalid';
+import { fieldFloatCollectionValueChanged } from 'features/nodes/store/nodesSlice';
+import type { FloatFieldCollectionInputInstance, FloatFieldCollectionInputTemplate } from 'features/nodes/types/field';
+import { isNil } from 'lodash-es';
+import { OverlayScrollbarsComponent } from 'overlayscrollbars-react';
+import { memo, useCallback, useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { PiXBold } from 'react-icons/pi';
+
+import type { FieldComponentProps } from './types';
+
+const overlayscrollbarsOptions = getOverlayScrollbarsParams().options;
+
+const sx = {
+  borderWidth: 1,
+  '&[data-error=true]': {
+    borderColor: 'error.500',
+    borderStyle: 'solid',
+  },
+} satisfies SystemStyleObject;
+
+export const FloatFieldCollectionInputComponent = memo(
+  (props: FieldComponentProps<FloatFieldCollectionInputInstance, FloatFieldCollectionInputTemplate>) => {
+    const { nodeId, field, fieldTemplate } = props;
+    const store = useAppStore();
+    const { t } = useTranslation();
+
+    const isInvalid = useInputFieldIsInvalid(nodeId, field.name);
+
+    const onChangeValue = useCallback(
+      (value: FloatFieldCollectionInputInstance['value']) => {
+        store.dispatch(fieldFloatCollectionValueChanged({ nodeId, fieldName: field.name, value }));
+      },
+      [field.name, nodeId, store]
+    );
+    const onRemoveNumber = useCallback(
+      (index: number) => {
+        const newValue = field.value ? [...field.value] : [];
+        newValue.splice(index, 1);
+        onChangeValue(newValue);
+      },
+      [field.value, onChangeValue]
+    );
+
+    const onChangeNumber = useCallback(
+      (index: number, value: number) => {
+        const newValue = field.value ? [...field.value] : [];
+        newValue[index] = value;
+        onChangeValue(newValue);
+      },
+      [field.value, onChangeValue]
+    );
+
+    const onAddNumber = useCallback(() => {
+      const newValue = field.value ? [...field.value, 0] : [0];
+      onChangeValue(newValue);
+    }, [field.value, onChangeValue]);
+
+    const min = useMemo(() => {
+      let min = -NUMPY_RAND_MAX;
+      if (!isNil(fieldTemplate.minimum)) {
+        min = fieldTemplate.minimum;
+      }
+      if (!isNil(fieldTemplate.exclusiveMinimum)) {
+        min = fieldTemplate.exclusiveMinimum + 0.01;
+      }
+      return min;
+    }, [fieldTemplate.exclusiveMinimum, fieldTemplate.minimum]);
+
+    const max = useMemo(() => {
+      let max = NUMPY_RAND_MAX;
+      if (!isNil(fieldTemplate.maximum)) {
+        max = fieldTemplate.maximum;
+      }
+      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]);
+
+    const fineStep = useMemo(() => {
+      if (isNil(fieldTemplate.multipleOf)) {
+        return 0.01;
+      }
+      return fieldTemplate.multipleOf;
+    }, [fieldTemplate.multipleOf]);
+
+    return (
+      <Flex
+        className="nodrag"
+        position="relative"
+        w="full"
+        h="auto"
+        maxH={64}
+        alignItems="stretch"
+        justifyContent="center"
+        p={1}
+        sx={sx}
+        data-error={isInvalid}
+        borderRadius="base"
+        flexDir="column"
+        gap={1}
+      >
+        <Button onClick={onAddNumber} variant="ghost">
+          {t('nodes.addItem')}
+        </Button>
+        {field.value && field.value.length > 0 && (
+          <>
+            <Divider />
+            <OverlayScrollbarsComponent
+              className="nowheel"
+              defer
+              style={overlayScrollbarsStyles}
+              options={overlayscrollbarsOptions}
+            >
+              <Grid gap={1} gridTemplateColumns="auto 1fr auto" alignItems="center">
+                {field.value.map((value, index) => (
+                  <FloatListItemContent
+                    key={index}
+                    value={value}
+                    index={index}
+                    min={min}
+                    max={max}
+                    step={step}
+                    fineStep={fineStep}
+                    onRemoveNumber={onRemoveNumber}
+                    onChangeNumber={onChangeNumber}
+                  />
+                ))}
+              </Grid>
+            </OverlayScrollbarsComponent>
+          </>
+        )}
+      </Flex>
+    );
+  }
+);
+
+FloatFieldCollectionInputComponent.displayName = 'FloatFieldCollectionInputComponent';
+
+type FloatListItemContentProps = {
+  value: number;
+  index: number;
+  min: number;
+  max: number;
+  step: number;
+  fineStep: number;
+  onRemoveNumber: (index: number) => void;
+  onChangeNumber: (index: number, value: number) => void;
+};
+
+const FloatListItemContent = memo(
+  ({ value, index, min, max, step, fineStep, onRemoveNumber, onChangeNumber }: FloatListItemContentProps) => {
+    const { t } = useTranslation();
+
+    const onClickRemove = useCallback(() => {
+      onRemoveNumber(index);
+    }, [index, onRemoveNumber]);
+    const onChange = useCallback(
+      (value: number) => {
+        onChangeNumber(index, value);
+      },
+      [index, onChangeNumber]
+    );
+
+    return (
+      <>
+        <GridItem>
+          <FormLabel ps={1} m={0}>
+            {index + 1}.
+          </FormLabel>
+        </GridItem>
+        <GridItem>
+          <CompositeNumberInput
+            onChange={onChange}
+            value={value}
+            min={min}
+            max={max}
+            step={step}
+            fineStep={fineStep}
+            className="nodrag"
+            flexGrow={1}
+          />
+        </GridItem>
+        <GridItem>
+          <IconButton
+            tabIndex={-1}
+            size="sm"
+            variant="link"
+            alignSelf="stretch"
+            onClick={onClickRemove}
+            icon={<PiXBold />}
+            aria-label={t('common.delete')}
+          />
+        </GridItem>
+      </>
+    );
+  }
+);
+FloatListItemContent.displayName = 'FloatListItemContent';

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

@@ -0,0 +1,74 @@
+import { CompositeNumberInput } from '@invoke-ai/ui-library';
+import { NUMPY_RAND_MAX } from 'app/constants';
+import { useAppDispatch } from 'app/store/storeHooks';
+import { fieldFloatValueChanged } from 'features/nodes/store/nodesSlice';
+import type { FloatFieldInputInstance, FloatFieldInputTemplate } from 'features/nodes/types/field';
+import { isNil } from 'lodash-es';
+import { memo, useCallback, useMemo } from 'react';
+
+import type { FieldComponentProps } from './types';
+
+export const FloatFieldInputComponent = memo(
+  (props: FieldComponentProps<FloatFieldInputInstance, FloatFieldInputTemplate>) => {
+    const { nodeId, field, fieldTemplate } = props;
+    const dispatch = useAppDispatch();
+
+    const handleValueChanged = useCallback(
+      (value: number) => {
+        dispatch(fieldFloatValueChanged({ nodeId, fieldName: field.name, value }));
+      },
+      [dispatch, field.name, nodeId]
+    );
+
+    const min = useMemo(() => {
+      let min = -NUMPY_RAND_MAX;
+      if (!isNil(fieldTemplate.minimum)) {
+        min = fieldTemplate.minimum;
+      }
+      if (!isNil(fieldTemplate.exclusiveMinimum)) {
+        min = fieldTemplate.exclusiveMinimum + 0.01;
+      }
+      return min;
+    }, [fieldTemplate.exclusiveMinimum, fieldTemplate.minimum]);
+
+    const max = useMemo(() => {
+      let max = NUMPY_RAND_MAX;
+      if (!isNil(fieldTemplate.maximum)) {
+        max = fieldTemplate.maximum;
+      }
+      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]);
+
+    const fineStep = useMemo(() => {
+      if (isNil(fieldTemplate.multipleOf)) {
+        return 0.01;
+      }
+      return fieldTemplate.multipleOf;
+    }, [fieldTemplate.multipleOf]);
+
+    return (
+      <CompositeNumberInput
+        defaultValue={fieldTemplate.default}
+        onChange={handleValueChanged}
+        value={field.value}
+        min={min}
+        max={max}
+        step={step}
+        fineStep={fineStep}
+        className="nodrag"
+      />
+    );
+  }
+);
+
+FloatFieldInputComponent.displayName = 'FloatFieldInputComponent ';

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

@@ -13,10 +13,8 @@ import { NUMPY_RAND_MAX } from 'app/constants';
 import { useAppStore } from 'app/store/nanostores/store';
 import { getOverlayScrollbarsParams, overlayScrollbarsStyles } from 'common/components/OverlayScrollbars/constants';
 import { useInputFieldIsInvalid } from 'features/nodes/hooks/useInputFieldIsInvalid';
-import { fieldNumberCollectionValueChanged } from 'features/nodes/store/nodesSlice';
+import { fieldIntegerCollectionValueChanged } from 'features/nodes/store/nodesSlice';
 import type {
-  FloatFieldCollectionInputInstance,
-  FloatFieldCollectionInputTemplate,
   IntegerFieldCollectionInputInstance,
   IntegerFieldCollectionInputTemplate,
 } from 'features/nodes/types/field';
@@ -38,41 +36,43 @@ const sx = {
   },
 } satisfies SystemStyleObject;
 
-export const NumberFieldCollectionInputComponent = memo(
-  (
-    props:
-      | FieldComponentProps<IntegerFieldCollectionInputInstance, IntegerFieldCollectionInputTemplate>
-      | FieldComponentProps<FloatFieldCollectionInputInstance, FloatFieldCollectionInputTemplate>
-  ) => {
+export const IntegerFieldCollectionInputComponent = memo(
+  (props: FieldComponentProps<IntegerFieldCollectionInputInstance, IntegerFieldCollectionInputTemplate>) => {
     const { nodeId, field, fieldTemplate } = props;
     const store = useAppStore();
     const { t } = useTranslation();
 
     const isInvalid = useInputFieldIsInvalid(nodeId, field.name);
-    const isIntegerField = useMemo(() => fieldTemplate.type.name === 'IntegerField', [fieldTemplate.type]);
+
+    const onChangeValue = useCallback(
+      (value: IntegerFieldCollectionInputInstance['value']) => {
+        store.dispatch(fieldIntegerCollectionValueChanged({ nodeId, fieldName: field.name, value }));
+      },
+      [field.name, nodeId, store]
+    );
 
     const onRemoveNumber = useCallback(
       (index: number) => {
         const newValue = field.value ? [...field.value] : [];
         newValue.splice(index, 1);
-        store.dispatch(fieldNumberCollectionValueChanged({ nodeId, fieldName: field.name, value: newValue }));
+        onChangeValue(newValue);
       },
-      [field.name, field.value, nodeId, store]
+      [field.value, onChangeValue]
     );
 
     const onChangeNumber = useCallback(
       (index: number, value: number) => {
         const newValue = field.value ? [...field.value] : [];
         newValue[index] = value;
-        store.dispatch(fieldNumberCollectionValueChanged({ nodeId, fieldName: field.name, value: newValue }));
+        onChangeValue(newValue);
       },
-      [field.name, field.value, nodeId, store]
+      [field.value, onChangeValue]
     );
 
     const onAddNumber = useCallback(() => {
       const newValue = field.value ? [...field.value, 0] : [0];
-      store.dispatch(fieldNumberCollectionValueChanged({ nodeId, fieldName: field.name, value: newValue }));
-    }, [field.name, field.value, nodeId, store]);
+      onChangeValue(newValue);
+    }, [field.value, onChangeValue]);
 
     const min = useMemo(() => {
       let min = -NUMPY_RAND_MAX;
@@ -98,17 +98,17 @@ export const NumberFieldCollectionInputComponent = memo(
 
     const step = useMemo(() => {
       if (isNil(fieldTemplate.multipleOf)) {
-        return isIntegerField ? 1 : 0.1;
+        return 1;
       }
       return fieldTemplate.multipleOf;
-    }, [fieldTemplate.multipleOf, isIntegerField]);
+    }, [fieldTemplate.multipleOf]);
 
     const fineStep = useMemo(() => {
       if (isNil(fieldTemplate.multipleOf)) {
-        return isIntegerField ? 1 : 0.01;
+        return 1;
       }
       return fieldTemplate.multipleOf;
-    }, [fieldTemplate.multipleOf, isIntegerField]);
+    }, [fieldTemplate.multipleOf]);
 
     return (
       <Flex
@@ -140,7 +140,7 @@ export const NumberFieldCollectionInputComponent = memo(
             >
               <Grid gap={1} gridTemplateColumns="auto 1fr auto" alignItems="center">
                 {field.value.map((value, index) => (
-                  <NumberListItemContent
+                  <IntegerListItemContent
                     key={index}
                     value={value}
                     index={index}
@@ -148,7 +148,6 @@ export const NumberFieldCollectionInputComponent = memo(
                     max={max}
                     step={step}
                     fineStep={fineStep}
-                    isIntegerField={isIntegerField}
                     onRemoveNumber={onRemoveNumber}
                     onChangeNumber={onChangeNumber}
                   />
@@ -162,12 +161,11 @@ export const NumberFieldCollectionInputComponent = memo(
   }
 );
 
-NumberFieldCollectionInputComponent.displayName = 'NumberFieldCollectionInputComponent';
+IntegerFieldCollectionInputComponent.displayName = 'IntegerFieldCollectionInputComponent';
 
-type NumberListItemContentProps = {
+type IntegerListItemContentProps = {
   value: number;
   index: number;
-  isIntegerField: boolean;
   min: number;
   max: number;
   step: number;
@@ -176,28 +174,18 @@ type NumberListItemContentProps = {
   onChangeNumber: (index: number, value: number) => void;
 };
 
-const NumberListItemContent = memo(
-  ({
-    value,
-    index,
-    isIntegerField,
-    min,
-    max,
-    step,
-    fineStep,
-    onRemoveNumber,
-    onChangeNumber,
-  }: NumberListItemContentProps) => {
+const IntegerListItemContent = memo(
+  ({ value, index, min, max, step, fineStep, onRemoveNumber, onChangeNumber }: IntegerListItemContentProps) => {
     const { t } = useTranslation();
 
     const onClickRemove = useCallback(() => {
       onRemoveNumber(index);
     }, [index, onRemoveNumber]);
     const onChange = useCallback(
-      (v: number) => {
-        onChangeNumber(index, isIntegerField ? Math.floor(Number(v)) : Number(v));
+      (value: number) => {
+        onChangeNumber(index, Math.floor(value));
       },
-      [index, isIntegerField, onChangeNumber]
+      [index, onChangeNumber]
     );
 
     return (
@@ -234,4 +222,4 @@ const NumberListItemContent = memo(
     );
   }
 );
-NumberListItemContent.displayName = 'NumberListItemContent';
+IntegerListItemContent.displayName = 'IntegerListItemContent';

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

@@ -0,0 +1,74 @@
+import { CompositeNumberInput } from '@invoke-ai/ui-library';
+import { NUMPY_RAND_MAX } from 'app/constants';
+import { useAppDispatch } from 'app/store/storeHooks';
+import { fieldIntegerValueChanged } from 'features/nodes/store/nodesSlice';
+import type { IntegerFieldInputInstance, IntegerFieldInputTemplate } from 'features/nodes/types/field';
+import { isNil } from 'lodash-es';
+import { memo, useCallback, useMemo } from 'react';
+
+import type { FieldComponentProps } from './types';
+
+export const IntegerFieldInputComponent = memo(
+  (props: FieldComponentProps<IntegerFieldInputInstance, IntegerFieldInputTemplate>) => {
+    const { nodeId, field, fieldTemplate } = props;
+    const dispatch = useAppDispatch();
+
+    const handleValueChanged = useCallback(
+      (value: number) => {
+        dispatch(fieldIntegerValueChanged({ nodeId, fieldName: field.name, value: Math.floor(Number(value)) }));
+      },
+      [dispatch, field.name, nodeId]
+    );
+
+    const min = useMemo(() => {
+      let min = -NUMPY_RAND_MAX;
+      if (!isNil(fieldTemplate.minimum)) {
+        min = fieldTemplate.minimum;
+      }
+      if (!isNil(fieldTemplate.exclusiveMinimum)) {
+        min = fieldTemplate.exclusiveMinimum + 0.01;
+      }
+      return min;
+    }, [fieldTemplate.exclusiveMinimum, fieldTemplate.minimum]);
+
+    const max = useMemo(() => {
+      let max = NUMPY_RAND_MAX;
+      if (!isNil(fieldTemplate.maximum)) {
+        max = fieldTemplate.maximum;
+      }
+      if (!isNil(fieldTemplate.exclusiveMaximum)) {
+        max = fieldTemplate.exclusiveMaximum - 0.01;
+      }
+      return max;
+    }, [fieldTemplate.exclusiveMaximum, fieldTemplate.maximum]);
+
+    const step = useMemo(() => {
+      if (isNil(fieldTemplate.multipleOf)) {
+        return 1;
+      }
+      return fieldTemplate.multipleOf;
+    }, [fieldTemplate.multipleOf]);
+
+    const fineStep = useMemo(() => {
+      if (isNil(fieldTemplate.multipleOf)) {
+        return 1;
+      }
+      return fieldTemplate.multipleOf;
+    }, [fieldTemplate.multipleOf]);
+
+    return (
+      <CompositeNumberInput
+        defaultValue={fieldTemplate.default}
+        onChange={handleValueChanged}
+        value={field.value}
+        min={min}
+        max={max}
+        step={step}
+        fineStep={fineStep}
+        className="nodrag"
+      />
+    );
+  }
+);
+
+IntegerFieldInputComponent.displayName = 'IntegerFieldInputComponent';

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

@@ -1,89 +0,0 @@
-import { CompositeNumberInput } from '@invoke-ai/ui-library';
-import { NUMPY_RAND_MAX } from 'app/constants';
-import { useAppDispatch } from 'app/store/storeHooks';
-import { fieldNumberValueChanged } from 'features/nodes/store/nodesSlice';
-import type {
-  FloatFieldInputInstance,
-  FloatFieldInputTemplate,
-  IntegerFieldInputInstance,
-  IntegerFieldInputTemplate,
-} from 'features/nodes/types/field';
-import { isNil } from 'lodash-es';
-import { memo, useCallback, useMemo } from 'react';
-
-import type { FieldComponentProps } from './types';
-
-const NumberFieldInputComponent = (
-  props: FieldComponentProps<
-    IntegerFieldInputInstance | FloatFieldInputInstance,
-    IntegerFieldInputTemplate | FloatFieldInputTemplate
-  >
-) => {
-  const { nodeId, field, fieldTemplate } = props;
-  const dispatch = useAppDispatch();
-  const isIntegerField = useMemo(() => fieldTemplate.type.name === 'IntegerField', [fieldTemplate.type]);
-
-  const handleValueChanged = useCallback(
-    (v: number) => {
-      dispatch(
-        fieldNumberValueChanged({
-          nodeId,
-          fieldName: field.name,
-          value: isIntegerField ? Math.floor(Number(v)) : Number(v),
-        })
-      );
-    },
-    [dispatch, field.name, isIntegerField, nodeId]
-  );
-
-  const min = useMemo(() => {
-    let min = -NUMPY_RAND_MAX;
-    if (!isNil(fieldTemplate.minimum)) {
-      min = fieldTemplate.minimum;
-    }
-    if (!isNil(fieldTemplate.exclusiveMinimum)) {
-      min = fieldTemplate.exclusiveMinimum + 0.01;
-    }
-    return min;
-  }, [fieldTemplate.exclusiveMinimum, fieldTemplate.minimum]);
-
-  const max = useMemo(() => {
-    let max = NUMPY_RAND_MAX;
-    if (!isNil(fieldTemplate.maximum)) {
-      max = fieldTemplate.maximum;
-    }
-    if (!isNil(fieldTemplate.exclusiveMaximum)) {
-      max = fieldTemplate.exclusiveMaximum - 0.01;
-    }
-    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}
-      max={max}
-      step={step}
-      fineStep={fineStep}
-      className="nodrag"
-    />
-  );
-};
-
-export default memo(NumberFieldInputComponent);

invokeai/frontend/web/src/features/nodes/store/nodesSlice.ts

@@ -333,11 +333,17 @@ export const nodesSlice = createSlice({
     fieldStringCollectionValueChanged: (state, action: FieldValueAction<StringFieldCollectionValue>) => {
       fieldValueReducer(state, action, zStringFieldCollectionValue);
     },
-    fieldNumberValueChanged: (state, action: FieldValueAction<IntegerFieldValue | FloatFieldValue>) => {
-      fieldValueReducer(state, action, zIntegerFieldValue.or(zFloatFieldValue));
+    fieldIntegerValueChanged: (state, action: FieldValueAction<IntegerFieldValue>) => {
+      fieldValueReducer(state, action, zIntegerFieldValue);
     },
-    fieldNumberCollectionValueChanged: (state, action: FieldValueAction<IntegerFieldCollectionValue>) => {
-      fieldValueReducer(state, action, zIntegerFieldCollectionValue.or(zFloatFieldCollectionValue));
+    fieldFloatValueChanged: (state, action: FieldValueAction<FloatFieldValue>) => {
+      fieldValueReducer(state, action, zFloatFieldValue);
+    },
+    fieldFloatCollectionValueChanged: (state, action: FieldValueAction<IntegerFieldCollectionValue>) => {
+      fieldValueReducer(state, action, zFloatFieldCollectionValue);
+    },
+    fieldIntegerCollectionValueChanged: (state, action: FieldValueAction<IntegerFieldCollectionValue>) => {
+      fieldValueReducer(state, action, zIntegerFieldCollectionValue);
     },
     fieldBooleanValueChanged: (state, action: FieldValueAction<BooleanFieldValue>) => {
       fieldValueReducer(state, action, zBooleanFieldValue);
@@ -491,8 +497,10 @@ export const {
   fieldLoRAModelValueChanged,
   fieldModelIdentifierValueChanged,
   fieldMainModelValueChanged,
-  fieldNumberValueChanged,
-  fieldNumberCollectionValueChanged,
+  fieldIntegerValueChanged,
+  fieldFloatValueChanged,
+  fieldFloatCollectionValueChanged,
+  fieldIntegerCollectionValueChanged,
   fieldRefinerModelValueChanged,
   fieldSchedulerValueChanged,
   fieldStringValueChanged,
@@ -609,8 +617,10 @@ export const isAnyNodeOrEdgeMutation = isAnyOf(
   fieldLabelChanged,
   fieldLoRAModelValueChanged,
   fieldMainModelValueChanged,
-  fieldNumberValueChanged,
-  fieldNumberCollectionValueChanged,
+  fieldIntegerValueChanged,
+  fieldIntegerCollectionValueChanged,
+  fieldFloatValueChanged,
+  fieldFloatCollectionValueChanged,
   fieldRefinerModelValueChanged,
   fieldSchedulerValueChanged,
   fieldStringValueChanged,