github/InvokeAI
1
1
Fork 0
mirror of https://github.com/invoke-ai/InvokeAI.git synced 2026-04-23 03:00:31 -04:00
Code Issues Packages Projects Releases Wiki Activity

code review changes

Browse Source
This commit is contained in:
Attila Cseh
2025-08-21 11:17:43 +02:00
committed by psychedelicious
parent 008e421ad4
commit c5689ca1a7
10 changed files with 75 additions and 111 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -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>
)}

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

@@ -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>
)}

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

@@ -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>
)}

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

@@ -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,
};
};

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

@@ -17,17 +17,8 @@ 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();
@@ -35,7 +26,7 @@ export const IntegerFieldInput = memo(
<>
<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>
)}

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

@@ -17,17 +17,8 @@ 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();
@@ -35,7 +26,7 @@ export const IntegerFieldInputAndSlider = memo(
<>
<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>
)}

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

@@ -17,8 +17,12 @@ 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();
@@ -26,7 +30,7 @@ export const IntegerFieldSlider = memo(
<>
<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>
)}

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

@@ -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,
};
};

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

@@ -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();

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

@@ -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();