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

feat(ui): more batch generator stuff

Browse Source
This commit is contained in:
psychedelicious
2025-01-13 19:28:42 +11:00
parent 38e50cc7aa
commit 3cb5f8536b
1 changed files with 33 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files

67
invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/inputs/NumberFieldCollectionInputComponent.tsx
View File

@@ -34,6 +34,15 @@ import type { FieldComponentProps } from './types';
const overlayscrollbarsOptions = getOverlayScrollbarsParams().options;
const isGenerator = (
value: IntegerFieldCollectionInputInstance['value'] | FloatFieldCollectionInputInstance['value']
): value is IntegerStartStepCountGenerator | FloatStartStepCountGenerator => {
if (!value || Array.isArray(value)) {
return false;
}
return true;
};
const sx = {
borderWidth: 1,
'&[data-error=true]': {
@@ -53,23 +62,8 @@ export const NumberFieldCollectionInputComponent = memo(
const isInvalid = useFieldIsInvalid(nodeId, field.name);
const isIntegerField = useMemo(() => fieldTemplate.type.name === 'IntegerField', [fieldTemplate.type]);
const entryMode = useMemo(() => {
if (!field.value) {
return 'manual';
}
if (Array.isArray(field.value)) {
return 'manual';
}
return 'step';
}, [field.value]);
const toggleEntryMode = useCallback(() => {
if (!field.value || Array.isArray(field.value)) {
const newValue: IntegerStartStepCountGenerator | FloatStartStepCountGenerator = isIntegerField
? { type: 'integer-start-step-count-generator', start: 0, step: 1, count: 1 }
: { type: 'float-start-step-count-generator', start: 0, step: 1, count: 1 };
store.dispatch(fieldNumberCollectionValueChanged({ nodeId, fieldName: field.name, value: newValue }));
} else {
if (isGenerator(field.value)) {
store.dispatch(
fieldNumberCollectionValueChanged({
nodeId,
@@ -77,6 +71,11 @@ export const NumberFieldCollectionInputComponent = memo(
value: [0],
})
);
} else {
const newValue: IntegerStartStepCountGenerator | FloatStartStepCountGenerator = isIntegerField
? { type: 'integer-start-step-count-generator', start: 0, step: 1, count: 1 }
: { type: 'float-start-step-count-generator', start: 0, step: 1, count: 1 };
store.dispatch(fieldNumberCollectionValueChanged({ nodeId, fieldName: field.name, value: newValue }));
}
}, [field.name, field.value, isIntegerField, nodeId, store]);
@@ -140,21 +139,20 @@ export const NumberFieldCollectionInputComponent = memo(
data-error={isInvalid}
>
<Flex gap={2} w="full" alignItems="center">
{!field.value ||
(Array.isArray(field.value) && (
<>
<Text flexGrow={1}>Manual</Text>
<IconButton
w="full"
onClick={onAddNumber}
aria-label="Add Item"
icon={<PiPlusBold />}
variant="ghost"
size="sm"
/>
</>
))}
{field.value && !Array.isArray(field.value) && (
{!isGenerator(field.value) && (
<>
<Text flexGrow={1}>Manual</Text>
<IconButton
w="full"
onClick={onAddNumber}
aria-label="Add Item"
icon={<PiPlusBold />}
variant="ghost"
size="sm"
/>
</>
)}
{isGenerator(field.value) && (
<>
<Text flexGrow={1}>Generator</Text>
</>
@@ -162,12 +160,12 @@ export const NumberFieldCollectionInputComponent = memo(
<IconButton
onClick={toggleEntryMode}
aria-label="Toggle Entry Mode"
icon={entryMode === 'manual' ? <PiLightbulbFill /> : <PiPencilSimpleFill />}
icon={isGenerator(field.value) ? <PiPencilSimpleFill /> : <PiLightbulbFill />}
variant="ghost"
size="sm"
/>
</Flex>
{field.value && !Array.isArray(field.value) && (
{isGenerator(field.value) && (
<GeneratorEntry
nodeId={nodeId}
fieldName={field.name}
@@ -179,7 +177,7 @@ export const NumberFieldCollectionInputComponent = memo(
fineStep={fineStep}
/>
)}
{field.value && Array.isArray(field.value) && field.value.length > 0 && (
{field.value && !isGenerator(field.value) && (
<ManualEntry
nodeId={nodeId}
fieldName={field.name}
@@ -395,6 +393,7 @@ const NumberListItemContent = memo(
icon={<PiXBold />}
aria-label={t('common.remove')}
tooltip={t('common.remove')}
tabIndex={-1}
/>
</Flex>
);