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 wonkiness with image dnd

Browse Source
This commit is contained in:
psychedelicious 2023-06-04 18:12:14 +10:00
parent a664ee30a2
commit 065fff7db5
2 changed files with 26 additions and 39 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

31
invokeai/frontend/web/src/features/gallery/components/CurrentImageDisplay.tsx
View File

@ -1,4 +1,4 @@
import { Box, Flex, Icon } from '@chakra-ui/react'; import { Box, Flex } 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 { systemSelector } from 'features/system/store/systemSelectors'; import { systemSelector } from 'features/system/store/systemSelectors';
@ -7,7 +7,7 @@ import { isEqual } from 'lodash-es';
import { gallerySelector } from '../store/gallerySelectors'; import { gallerySelector } from '../store/gallerySelectors';
import CurrentImageButtons from './CurrentImageButtons'; import CurrentImageButtons from './CurrentImageButtons';
import CurrentImagePreview from './CurrentImagePreview'; import CurrentImagePreview from './CurrentImagePreview';
import { FaImage } from 'react-icons/fa'; import { defaultSelectorOptions } from 'app/store/util/defaultMemoizeOptions';
export const currentImageDisplaySelector = createSelector( export const currentImageDisplaySelector = createSelector(
[systemSelector, gallerySelector], [systemSelector, gallerySelector],
@ -15,21 +15,20 @@ export const currentImageDisplaySelector = createSelector(
const { progressImage } = system; const { progressImage } = system;
return { return {
hasAnImageToDisplay: gallery.selectedImage || progressImage, hasSelectedImage: Boolean(gallery.selectedImage),
hasProgressImage: Boolean(progressImage),
}; };
}, },
{ defaultSelectorOptions
memoizeOptions: {
resultEqualityCheck: isEqual,
},
}
); );
/** /**
* Displays the current image if there is one, plus associated actions. * Displays the current image if there is one, plus associated actions.
*/ */
const CurrentImageDisplay = () => { const CurrentImageDisplay = () => {
const { hasAnImageToDisplay } = useAppSelector(currentImageDisplaySelector); const { hasSelectedImage, hasProgressImage } = useAppSelector(
currentImageDisplaySelector
);
return ( return (
<Flex <Flex
@ -54,19 +53,9 @@ const CurrentImageDisplay = () => {
gap: 4, gap: 4,
}} }}
> >
{hasAnImageToDisplay ? ( <CurrentImagePreview />
<CurrentImagePreview />
) : (
<Icon
as={FaImage}
sx={{
boxSize: 24,
color: 'base.500',
}}
/>
)}
</Flex> </Flex>
{hasAnImageToDisplay && ( {hasSelectedImage && (
<Box sx={{ position: 'absolute', top: 0 }}> <Box sx={{ position: 'absolute', top: 0 }}>
<CurrentImageButtons /> <CurrentImageButtons />
</Box> </Box>

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

@ -101,23 +101,21 @@ const CurrentImagePreview = () => {
}} }}
/> />
) : ( ) : (
image && ( <Flex
<Flex sx={{
sx={{ width: 'full',
width: 'full', height: 'full',
height: 'full', alignItems: 'center',
alignItems: 'center', justifyContent: 'center',
justifyContent: 'center', }}
}} >
> <IAIDndImage
<IAIDndImage image={image}
image={image} onDrop={handleDrop}
onDrop={handleDrop} onError={handleError}
onError={handleError} fallback={<IAIImageFallback sx={{ bg: 'none' }} />}
fallback={<IAIImageFallback sx={{ bg: 'none' }} />} />
/> </Flex>
</Flex>
)
)} )}
{shouldShowImageDetails && image && image.metadata && ( {shouldShowImageDetails && image && image.metadata && (
<Box <Box
@ -133,7 +131,7 @@ const CurrentImagePreview = () => {
<ImageMetadataViewer image={image} /> <ImageMetadataViewer image={image} />
</Box> </Box>
)} )}
{!shouldShowImageDetails && ( {!shouldShowImageDetails && image && (
<Box <Box
sx={{ sx={{
position: 'absolute', position: 'absolute',