Mirrored_Repos/InvokeAI
1
0
Fork 0
mirror of https://github.com/invoke-ai/InvokeAI synced 2024-08-30 20:32:17 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat(ui): improve drag and drop ux

Browse Source
This commit is contained in:
psychedelicious
2023-06-01 19:24:26 +10:00
parent b1e1e3efc7
commit fa4d88e163
10 changed files with 72 additions and 117 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
invokeai/frontend/web/src/features/parameters/components/Parameters/ImageToImage/InitialImageDisplay.tsx
View File

@ -1,6 +1,5 @@
import { Flex } from '@chakra-ui/react';
import InitialImagePreview from './InitialImagePreview';
import InitialImageButtons from 'common/components/InitialImageButtons';
const InitialImageDisplay = () => {
return (

37
invokeai/frontend/web/src/features/parameters/components/Parameters/ImageToImage/InitialImagePreview.tsx
View File

@ -1,4 +1,4 @@
import { Flex, Icon, Image } from '@chakra-ui/react';
import { Flex } from '@chakra-ui/react';
import { createSelector } from '@reduxjs/toolkit';
import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
import { useGetUrl } from 'common/util/getUrl';
@ -6,14 +6,10 @@ import {
clearInitialImage,
initialImageChanged,
} from 'features/parameters/store/generationSlice';
import { DragEvent, useCallback } from 'react';
import { useCallback } from 'react';
import { useTranslation } from 'react-i18next';
import ImageMetadataOverlay from 'common/components/ImageMetadataOverlay';
import { generationSelector } from 'features/parameters/store/generationSelectors';
import { initialImageSelected } from 'features/parameters/store/actions';
import { defaultSelectorOptions } from 'app/store/util/defaultMemoizeOptions';
import ImageFallbackSpinner from 'features/gallery/components/ImageFallbackSpinner';
import { FaImage } from 'react-icons/fa';
import { configSelector } from '../../../../system/store/configSelectors';
import { useAppToaster } from 'app/components/Toaster';
import IAISelectableImage from 'features/controlNet/components/parameters/IAISelectableImage';
@ -76,41 +72,12 @@ const InitialImagePreview = () => {
alignItems: 'center',
justifyContent: 'center',
}}
// onDrop={handleDrop}
>
<IAISelectableImage
image={initialImage}
onChange={handleChange}
onReset={handleReset}
/>
{/* {initialImage?.image_url && (
<>
<Image
src={getUrl(initialImage?.image_url)}
fallbackStrategy="beforeLoadOrError"
fallback={<ImageFallbackSpinner />}
onError={handleError}
sx={{
objectFit: 'contain',
maxWidth: '100%',
maxHeight: '100%',
height: 'auto',
position: 'absolute',
borderRadius: 'base',
}}
/>
<ImageMetadataOverlay image={initialImage} />
</>
)}
{!initialImage?.image_url && (
<Icon
as={FaImage}
sx={{
boxSize: 24,
color: 'base.500',
}}
/>
)} */}
</Flex>
);
};