code review changes

Author: Attila Cseh

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

@@ -13,7 +13,7 @@ export const FloatFieldInput = memo(
     props: FieldComponentProps<FloatFieldInputInstance, FloatFieldInputTemplate, { settings?: NodeFieldFloatSettings }>
   ) => {
     const { nodeId, field, fieldTemplate, settings } = props;
-    const { defaultValue, onChange, min, max, step, fineStep, constrainValue, showShuffle, handleClickRandomizeValue } =
+    const { defaultValue, onChange, min, max, step, fineStep, constrainValue, showShuffle, randomizeValue } =
       useFloatField(nodeId, field.name, fieldTemplate, settings);
 
     const { t } = useTranslation();
@@ -33,13 +33,7 @@ export const FloatFieldInput = memo(
           constrainValue={constrainValue}
         />
         {showShuffle && (
-          <Button
-            size="sm"
-            isDisabled={false}
-            onClick={handleClickRandomizeValue}
-            leftIcon={<PiShuffleBold />}
-            flexShrink={0}
-          >
+          <Button size="sm" isDisabled={false} onClick={randomizeValue} leftIcon={<PiShuffleBold />} flexShrink={0}>
             {t('workflows.builder.shuffle')}
           </Button>
         )}

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

@@ -13,7 +13,7 @@ export const FloatFieldInputAndSlider = memo(
     props: FieldComponentProps<FloatFieldInputInstance, FloatFieldInputTemplate, { settings?: NodeFieldFloatSettings }>
   ) => {
     const { nodeId, field, fieldTemplate, settings } = props;
-    const { defaultValue, onChange, min, max, step, fineStep, constrainValue, showShuffle, handleClickRandomizeValue } =
+    const { defaultValue, onChange, min, max, step, fineStep, constrainValue, showShuffle, randomizeValue } =
       useFloatField(nodeId, field.name, fieldTemplate, settings);
 
     const { t } = useTranslation();
@@ -46,13 +46,7 @@ export const FloatFieldInputAndSlider = memo(
           constrainValue={constrainValue}
         />
         {showShuffle && (
-          <Button
-            size="sm"
-            isDisabled={false}
-            onClick={handleClickRandomizeValue}
-            leftIcon={<PiShuffleBold />}
-            flexShrink={0}
-          >
+          <Button size="sm" isDisabled={false} onClick={randomizeValue} leftIcon={<PiShuffleBold />} flexShrink={0}>
             {t('workflows.builder.shuffle')}
           </Button>
         )}

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

@@ -13,7 +13,7 @@ export const FloatFieldSlider = memo(
     props: FieldComponentProps<FloatFieldInputInstance, FloatFieldInputTemplate, { settings?: NodeFieldFloatSettings }>
   ) => {
     const { nodeId, field, fieldTemplate, settings } = props;
-    const { defaultValue, onChange, min, max, step, fineStep, showShuffle, handleClickRandomizeValue } = useFloatField(
+    const { defaultValue, onChange, min, max, step, fineStep, showShuffle, randomizeValue } = useFloatField(
       nodeId,
       field.name,
       fieldTemplate,
@@ -38,13 +38,7 @@ export const FloatFieldSlider = memo(
           flex="1 1 0"
         />
         {showShuffle && (
-          <Button
-            size="sm"
-            isDisabled={false}
-            onClick={handleClickRandomizeValue}
-            leftIcon={<PiShuffleBold />}
-            flexShrink={0}
-          >
+          <Button size="sm" isDisabled={false} onClick={randomizeValue} leftIcon={<PiShuffleBold />} flexShrink={0}>
             {t('workflows.builder.shuffle')}
           </Button>
         )}

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

@@ -78,7 +78,7 @@ export const useFloatField = (
     [dispatch, fieldName, nodeId]
   );
 
-  const handleClickRandomizeValue = useCallback(() => {
+  const randomizeValue = useCallback(() => {
     const value = Number((Math.round(randomFloat(min, max) / step) * step).toFixed(10));
     dispatch(fieldFloatValueChanged({ nodeId, fieldName, value }));
   }, [dispatch, fieldName, nodeId, min, max, step]);
@@ -92,6 +92,6 @@ export const useFloatField = (
     fineStep,
     constrainValue,
     showShuffle,
-    handleClickRandomizeValue,
+    randomizeValue,
   };
 };

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

@@ -17,25 +17,16 @@ export const IntegerFieldInput = memo(
     >
   ) => {
     const { nodeId, field, fieldTemplate, settings } = props;
-    const {
-      defaultValue,
-      onValueChange,
-      min,
-      max,
-      step,
-      fineStep,
-      constrainValue,
-      showShuffle,
-      handleClickRandomizeValue,
-    } = useIntegerField(nodeId, field.name, fieldTemplate, settings);
+    const { defaultValue, onChange, min, max, step, fineStep, constrainValue, showShuffle, randomizeValue } =
+      useIntegerField(nodeId, field.name, fieldTemplate, settings);
 
     const { t } = useTranslation();
 
     return (
       <>
         <CompositeNumberInput
           defaultValue={defaultValue}
-          onChange={onValueChange}
+          onChange={onChange}
           value={field.value}
           min={min}
           max={max}
@@ -46,13 +37,7 @@ export const IntegerFieldInput = memo(
           constrainValue={constrainValue}
         />
         {showShuffle && (
-          <Button
-            size="sm"
-            isDisabled={false}
-            onClick={handleClickRandomizeValue}
-            leftIcon={<PiShuffleBold />}
-            flexShrink={0}
-          >
+          <Button size="sm" isDisabled={false} onClick={randomizeValue} leftIcon={<PiShuffleBold />} flexShrink={0}>
             {t('workflows.builder.shuffle')}
           </Button>
         )}

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

@@ -17,25 +17,16 @@ export const IntegerFieldInputAndSlider = memo(
     >
   ) => {
     const { nodeId, field, fieldTemplate, settings } = props;
-    const {
-      defaultValue,
-      onValueChange,
-      min,
-      max,
-      step,
-      fineStep,
-      constrainValue,
-      showShuffle,
-      handleClickRandomizeValue,
-    } = useIntegerField(nodeId, field.name, fieldTemplate, settings);
+    const { defaultValue, onChange, min, max, step, fineStep, constrainValue, showShuffle, randomizeValue } =
+      useIntegerField(nodeId, field.name, fieldTemplate, settings);
 
     const { t } = useTranslation();
 
     return (
       <>
         <CompositeSlider
           defaultValue={defaultValue}
-          onChange={onValueChange}
+          onChange={onChange}
           value={field.value}
           min={min}
           max={max}
@@ -48,7 +39,7 @@ export const IntegerFieldInputAndSlider = memo(
         />
         <CompositeNumberInput
           defaultValue={defaultValue}
-          onChange={onValueChange}
+          onChange={onChange}
           value={field.value}
           min={min}
           max={max}
@@ -59,13 +50,7 @@ export const IntegerFieldInputAndSlider = memo(
           constrainValue={constrainValue}
         />
         {showShuffle && (
-          <Button
-            size="sm"
-            isDisabled={false}
-            onClick={handleClickRandomizeValue}
-            leftIcon={<PiShuffleBold />}
-            flexShrink={0}
-          >
+          <Button size="sm" isDisabled={false} onClick={randomizeValue} leftIcon={<PiShuffleBold />} flexShrink={0}>
             {t('workflows.builder.shuffle')}
           </Button>
         )}

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

@@ -17,16 +17,20 @@ export const IntegerFieldSlider = memo(
     >
   ) => {
     const { nodeId, field, fieldTemplate, settings } = props;
-    const { defaultValue, onValueChange, min, max, step, fineStep, showShuffle, handleClickRandomizeValue } =
-      useIntegerField(nodeId, field.name, fieldTemplate, settings);
+    const { defaultValue, onChange, min, max, step, fineStep, showShuffle, randomizeValue } = useIntegerField(
+      nodeId,
+      field.name,
+      fieldTemplate,
+      settings
+    );
 
     const { t } = useTranslation();
 
     return (
       <>
         <CompositeSlider
           defaultValue={defaultValue}
-          onChange={onValueChange}
+          onChange={onChange}
           value={field.value}
           min={min}
           max={max}
@@ -38,13 +42,7 @@ export const IntegerFieldSlider = memo(
           flex="1 1 0"
         />
         {showShuffle && (
-          <Button
-            size="sm"
-            isDisabled={false}
-            onClick={handleClickRandomizeValue}
-            leftIcon={<PiShuffleBold />}
-            flexShrink={0}
-          >
+          <Button size="sm" isDisabled={false} onClick={randomizeValue} leftIcon={<PiShuffleBold />} flexShrink={0}>
             {t('workflows.builder.shuffle')}
           </Button>
         )}

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

@@ -70,27 +70,27 @@ export const useIntegerField = (
     [max, min, overrideMax, overrideMin, overrideStep, step]
   );
 
-  const onValueChange = useCallback(
+  const onChange = useCallback(
     (value: number) => {
       dispatch(fieldIntegerValueChanged({ nodeId, fieldName, value }));
     },
     [dispatch, fieldName, nodeId]
   );
 
-  const handleClickRandomizeValue = useCallback(() => {
+  const randomizeValue = useCallback(() => {
     const value = Math.round(randomInt(min, max) / step) * step;
     dispatch(fieldIntegerValueChanged({ nodeId, fieldName, value }));
   }, [dispatch, fieldName, nodeId, min, max, step]);
 
   return {
     defaultValue: fieldTemplate.default,
-    onValueChange,
+    onChange,
     min,
     max,
     step,
     fineStep,
     constrainValue,
     showShuffle,
-    handleClickRandomizeValue,
+    randomizeValue,
   };
 };

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

@@ -20,6 +20,24 @@ type Props = {
 };
 
 export const NodeFieldElementFloatSettings = memo(({ id, settings, nodeId, fieldName, fieldTemplate }: Props) => {
+  return (
+    <>
+      <SettingShuffle id={id} settings={settings} nodeId={nodeId} fieldName={fieldName} fieldTemplate={fieldTemplate} />
+      <SettingComponent
+        id={id}
+        settings={settings}
+        nodeId={nodeId}
+        fieldName={fieldName}
+        fieldTemplate={fieldTemplate}
+      />
+      <SettingMin id={id} settings={settings} nodeId={nodeId} fieldName={fieldName} fieldTemplate={fieldTemplate} />
+      <SettingMax id={id} settings={settings} nodeId={nodeId} fieldName={fieldName} fieldTemplate={fieldTemplate} />
+    </>
+  );
+});
+NodeFieldElementFloatSettings.displayName = 'NodeFieldElementFloatSettings';
+
+const SettingShuffle = memo(({ id, settings }: Props) => {
   const { showShuffle } = settings;
 
   const { t } = useTranslation();
@@ -34,24 +52,13 @@ export const NodeFieldElementFloatSettings = memo(({ id, settings, nodeId, field
   }, [dispatch, id, settings, showShuffle]);
 
   return (
-    <>
-      <FormControl>
-        <FormLabel flex={1}>{t('workflows.builder.showShuffle')}</FormLabel>
-        <Switch size="sm" isChecked={showShuffle} onChange={toggleShowShuffle} />
-      </FormControl>
-      <SettingComponent
-        id={id}
-        settings={settings}
-        nodeId={nodeId}
-        fieldName={fieldName}
-        fieldTemplate={fieldTemplate}
-      />
-      <SettingMin id={id} settings={settings} nodeId={nodeId} fieldName={fieldName} fieldTemplate={fieldTemplate} />
-      <SettingMax id={id} settings={settings} nodeId={nodeId} fieldName={fieldName} fieldTemplate={fieldTemplate} />
-    </>
+    <FormControl>
+      <FormLabel flex={1}>{t('workflows.builder.showShuffle')}</FormLabel>
+      <Switch size="sm" isChecked={showShuffle} onChange={toggleShowShuffle} />
+    </FormControl>
   );
 });
-NodeFieldElementFloatSettings.displayName = 'NodeFieldElementFloatSettings';
+SettingShuffle.displayName = 'SettingShuffle';
 
 const SettingComponent = memo(({ id, settings }: Props) => {
   const { t } = useTranslation();

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

@@ -21,6 +21,24 @@ type Props = {
 };
 
 export const NodeFieldElementIntegerSettings = memo(({ id, settings, nodeId, fieldName, fieldTemplate }: Props) => {
+  return (
+    <>
+      <SettingShuffle id={id} settings={settings} nodeId={nodeId} fieldName={fieldName} fieldTemplate={fieldTemplate} />
+      <SettingComponent
+        id={id}
+        settings={settings}
+        nodeId={nodeId}
+        fieldName={fieldName}
+        fieldTemplate={fieldTemplate}
+      />
+      <SettingMin id={id} settings={settings} nodeId={nodeId} fieldName={fieldName} fieldTemplate={fieldTemplate} />
+      <SettingMax id={id} settings={settings} nodeId={nodeId} fieldName={fieldName} fieldTemplate={fieldTemplate} />
+    </>
+  );
+});
+NodeFieldElementIntegerSettings.displayName = 'NodeFieldElementIntegerSettings';
+
+const SettingShuffle = memo(({ id, settings }: Props) => {
   const { showShuffle } = settings;
 
   const { t } = useTranslation();
@@ -35,24 +53,13 @@ export const NodeFieldElementIntegerSettings = memo(({ id, settings, nodeId, fie
   }, [dispatch, id, settings, showShuffle]);
 
   return (
-    <>
-      <FormControl>
-        <FormLabel flex={1}>{t('workflows.builder.showShuffle')}</FormLabel>
-        <Switch size="sm" isChecked={showShuffle} onChange={toggleShowShuffle} />
-      </FormControl>
-      <SettingComponent
-        id={id}
-        settings={settings}
-        nodeId={nodeId}
-        fieldName={fieldName}
-        fieldTemplate={fieldTemplate}
-      />
-      <SettingMin id={id} settings={settings} nodeId={nodeId} fieldName={fieldName} fieldTemplate={fieldTemplate} />
-      <SettingMax id={id} settings={settings} nodeId={nodeId} fieldName={fieldName} fieldTemplate={fieldTemplate} />
-    </>
+    <FormControl>
+      <FormLabel flex={1}>{t('workflows.builder.showShuffle')}</FormLabel>
+      <Switch size="sm" isChecked={showShuffle} onChange={toggleShowShuffle} />
+    </FormControl>
   );
 });
-NodeFieldElementIntegerSettings.displayName = 'NodeFieldElementIntegerSettings';
+SettingShuffle.displayName = 'SettingShuffle';
 
 const SettingComponent = memo(({ id, settings }: Props) => {
   const { t } = useTranslation();