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

perf(ui): optimize gallery image delete button rendering

Browse Source
This commit is contained in:
psychedelicious 2024-08-22 17:26:27 +10:00
parent 97c0d3f6be
commit 6d1edc330d
1 changed files with 22 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

35
invokeai/frontend/web/src/features/gallery/components/ImageGrid/GalleryImage.tsx
View File

@ -12,7 +12,7 @@ import { getGalleryImageDataTestId } from 'features/gallery/components/ImageGrid
import { useMultiselect } from 'features/gallery/hooks/useMultiselect'; import { useMultiselect } from 'features/gallery/hooks/useMultiselect';
import { useScrollIntoView } from 'features/gallery/hooks/useScrollIntoView'; import { useScrollIntoView } from 'features/gallery/hooks/useScrollIntoView';
import { imageToCompareChanged, isImageViewerOpenChanged } from 'features/gallery/store/gallerySlice'; import { imageToCompareChanged, isImageViewerOpenChanged } from 'features/gallery/store/gallerySlice';
import type { MouseEvent } from 'react'; import type { MouseEvent, MouseEventHandler } from 'react';
import { memo, useCallback, useMemo, useState } from 'react'; import { memo, useCallback, useMemo, useState } from 'react';
import { useTranslation } from 'react-i18next'; import { useTranslation } from 'react-i18next';
import { PiStarBold, PiStarFill, PiTrashSimpleFill } from 'react-icons/pi'; import { PiStarBold, PiStarFill, PiTrashSimpleFill } from 'react-icons/pi';
@ -40,8 +40,6 @@ interface HoverableImageProps {
const GalleryImage = ({ index, imageDTO }: HoverableImageProps) => { const GalleryImage = ({ index, imageDTO }: HoverableImageProps) => {
const dispatch = useAppDispatch(); const dispatch = useAppDispatch();
const shift = useShiftModifier();
const { t } = useTranslation();
const selectedBoardId = useAppSelector((s) => s.gallery.selectedBoardId); const selectedBoardId = useAppSelector((s) => s.gallery.selectedBoardId);
const alwaysShowImageSizeBadge = useAppSelector((s) => s.gallery.alwaysShowImageSizeBadge); const alwaysShowImageSizeBadge = useAppSelector((s) => s.gallery.alwaysShowImageSizeBadge);
const isSelectedForCompare = useAppSelector((s) => s.gallery.imageToCompare?.image_name === imageDTO.image_name); const isSelectedForCompare = useAppSelector((s) => s.gallery.imageToCompare?.image_name === imageDTO.image_name);
@ -190,16 +188,7 @@ const GalleryImage = ({ index, imageDTO }: HoverableImageProps) => {
insetInlineEnd={1} insetInlineEnd={1}
/> />
{isHovered && shift && ( {isHovered && <DeleteIcon onClick={handleDelete} />}
<IAIDndImageIcon
onClick={handleDelete}
icon={<PiTrashSimpleFill size="16px" />}
tooltip={t('gallery.deleteImage_one')}
position="absolute"
bottom={1}
insetInlineEnd={1}
/>
)}
</> </>
</IAIDndImage> </IAIDndImage>
</Flex> </Flex>
@ -208,3 +197,23 @@ const GalleryImage = ({ index, imageDTO }: HoverableImageProps) => {
}; };
export default memo(GalleryImage); export default memo(GalleryImage);
const DeleteIcon = ({ onClick }: { onClick: MouseEventHandler }) => {
const shift = useShiftModifier();
const { t } = useTranslation();
if (!shift) {
return null;
}
return (
<IAIDndImageIcon
onClick={onClick}
icon={<PiTrashSimpleFill size="16px" />}
tooltip={t('gallery.deleteImage_one')}
position="absolute"
bottom={1}
insetInlineEnd={1}
/>
);
};