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

fix(ui): fix init image causing overflow

Browse Source
This commit is contained in:
psychedelicious 2023-05-11 13:49:07 +10:00
parent 4333852c37
commit f9384be59b
2 changed files with 33 additions and 43 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
invokeai/frontend/web/src/features/gallery/components/CurrentImagePreview.tsx
View File

@ -1,4 +1,4 @@
import { Box, Flex, Image, Skeleton, useBoolean } from '@chakra-ui/react'; import { Box, Flex, Image } from '@chakra-ui/react';
import { createSelector } from '@reduxjs/toolkit'; import { createSelector } from '@reduxjs/toolkit';
import { useAppSelector } from 'app/store/storeHooks'; import { useAppSelector } from 'app/store/storeHooks';
import { useGetUrl } from 'common/util/getUrl'; import { useGetUrl } from 'common/util/getUrl';
@ -50,8 +50,6 @@ const CurrentImagePreview = () => {
} = useAppSelector(imagesSelector); } = useAppSelector(imagesSelector);
const { getUrl } = useGetUrl(); const { getUrl } = useGetUrl();
const [isLoaded, { on, off }] = useBoolean();
const handleDragStart = useCallback( const handleDragStart = useCallback(
(e: DragEvent<HTMLDivElement>) => { (e: DragEvent<HTMLDivElement>) => {
if (!image) { if (!image) {
@ -67,11 +65,11 @@ const CurrentImagePreview = () => {
return ( return (
<Flex <Flex
sx={{ sx={{
position: 'relative',
justifyContent: 'center',
alignItems: 'center',
width: '100%', width: '100%',
height: '100%', height: '100%',
position: 'relative',
alignItems: 'center',
justifyContent: 'center',
}} }}
> >
{progressImage && shouldShowProgressInViewer ? ( {progressImage && shouldShowProgressInViewer ? (

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

@ -62,48 +62,40 @@ const InitialImagePreview = () => {
sx={{ sx={{
width: 'full', width: 'full',
height: 'full', height: 'full',
position: 'relative',
alignItems: 'center', alignItems: 'center',
justifyContent: 'center', justifyContent: 'center',
position: 'relative',
}} }}
onDrop={handleDrop} onDrop={handleDrop}
> >
<Flex {initialImage?.url && (
sx={{ <>
height: 'full', <Image
width: 'full', sx={{
blur: '5px', objectFit: 'contain',
position: 'relative', maxWidth: '100%',
alignItems: 'center', maxHeight: '100%',
justifyContent: 'center', height: 'auto',
}} position: 'absolute',
> borderRadius: 'base',
{initialImage?.url && ( }}
<> src={getUrl(initialImage?.url)}
<Image onError={onError}
sx={{ onLoad={() => {
objectFit: 'contain', setIsLoaded(true);
borderRadius: 'base', }}
maxHeight: 'full', fallback={
}} <Flex
src={getUrl(initialImage?.url)} sx={{ h: 36, alignItems: 'center', justifyContent: 'center' }}
onError={onError} >
onLoad={() => { <Spinner color="grey" w="5rem" h="5rem" />
setIsLoaded(true); </Flex>
}} }
fallback={ />
<Flex {isLoaded && <ImageToImageOverlay image={initialImage} />}
sx={{ h: 36, alignItems: 'center', justifyContent: 'center' }} </>
> )}
<Spinner color="grey" w="5rem" h="5rem" /> {!initialImage?.url && <SelectImagePlaceholder />}
</Flex>
}
/>
{isLoaded && <ImageToImageOverlay image={initialImage} />}
</>
)}
{!initialImage?.url && <SelectImagePlaceholder />}
</Flex>
</Flex> </Flex>
); );
}; };