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): improved node image drop target & error state

Browse Source
This commit is contained in:
psychedelicious
2024-10-05 08:59:52 +10:00
committed by Kent Keirsey
parent 42e5ec3916
commit 3ce94e5b84
1 changed files with 17 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -17,7 +17,7 @@ import { $isConnected } from 'services/events/stores';
import type { FieldComponentProps } from './types';
const ImageFieldInputComponent = (props: FieldComponentProps<ImageFieldInputInstance, ImageFieldInputTemplate>) => {
const { nodeId, field } = props;
const { nodeId, field, fieldTemplate } = props;
const dispatch = useAppDispatch();
const isConnected = useStore($isConnected);
const { currentData: imageDTO, isError } = useGetImageDTOQuery(field.value?.image_name ?? skipToken);
@@ -67,7 +67,17 @@ const ImageFieldInputComponent = (props: FieldComponentProps<ImageFieldInputInst
}, [handleReset, isConnected, isError]);
return (
<Flex className="nodrag" w="full" h="full" alignItems="center" justifyContent="center">
<Flex
className="nodrag"
w="full"
h="full"
alignItems="center"
justifyContent="center"
borderColor="error.500"
borderStyle="solid"
borderWidth={fieldTemplate.required && !field.value ? 1 : 0}
borderRadius="base"
>
<IAIDndImage
imageDTO={imageDTO}
droppableData={droppableData}
@@ -92,9 +102,11 @@ export default memo(ImageFieldInputComponent);
const UploadElement = memo(() => {
const { t } = useTranslation();
return (
<Text fontSize={16} fontWeight="semibold">
{t('gallery.dropOrUpload')}
</Text>
<Flex h={16} w="full" alignItems="center" justifyContent="center">
<Text fontSize={16} fontWeight="semibold">
{t('gallery.dropOrUpload')}
</Text>
</Flex>
);
});