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): next/prev image buttons

Browse Source
This commit is contained in:
psychedelicious 2023-05-01 00:02:19 +10:00
parent fecb77e344
commit 29743a9e02
4 changed files with 55 additions and 80 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -62,7 +62,6 @@ const CurrentImagePreview = () => {
}}
/>
)}
{!shouldShowImageDetails && <NextPrevImageButtons />}
{shouldShowImageDetails && image && 'metadata' in image && (
<Box
sx={{
@ -77,6 +76,7 @@ const CurrentImagePreview = () => {
<ImageMetadataViewer image={image} />
</Box>
)}
{!shouldShowImageDetails && <NextPrevImageButtons />}
</Flex>
);
};

22
invokeai/frontend/web/src/features/gallery/components/ImageGalleryPanel.tsx
View File

@ -110,28 +110,6 @@ export const ImageGalleryPanel = () => {
[shouldPinGallery]
);
useHotkeys(
'left',
() => {
dispatch(selectPrevImage());
},
{
enabled: !isStaging || activeTabName !== 'unifiedCanvas',
},
[isStaging, activeTabName]
);
useHotkeys(
'right',
() => {
dispatch(selectNextImage());
},
{
enabled: !isStaging || activeTabName !== 'unifiedCanvas',
},
[isStaging, activeTabName]
);
useHotkeys(
'shift+g',
() => {

77
invokeai/frontend/web/src/features/gallery/components/NextPrevImageButtons.tsx
View File

@ -1,18 +1,14 @@
import { ChakraProps, Flex, Grid, IconButton } from '@chakra-ui/react';
import { createSelector } from '@reduxjs/toolkit';
import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
import { isEqual } from 'lodash-es';
import { useState } from 'react';
import { clamp, isEqual } from 'lodash-es';
import { useCallback, useState } from 'react';
import { useTranslation } from 'react-i18next';
import { FaAngleLeft, FaAngleRight } from 'react-icons/fa';
import { gallerySelector } from '../store/gallerySelectors';
import { RootState } from 'app/store/store';
import { selectResultsEntities } from '../store/resultsSlice';
// import {
// GalleryCategory,
// selectNextImage,
// selectPrevImage,
// } from '../store/gallerySlice';
import { imageSelected } from '../store/gallerySlice';
import { useHotkeys } from 'react-hotkeys-hook';
const nextPrevButtonTriggerAreaStyles: ChakraProps['sx'] = {
height: '100%',
@ -40,12 +36,32 @@ export const nextPrevImageButtonsSelector = createSelector(
(i) => i === selectedImage.name
);
const nextImageIndex = clamp(
currentImageIndex + 1,
0,
state[currentCategory].ids.length - 1
);
const prevImageIndex = clamp(
currentImageIndex - 1,
0,
state[currentCategory].ids.length - 1
);
const nextImageId = state[currentCategory].ids[nextImageIndex];
const prevImageId = state[currentCategory].ids[prevImageIndex];
const nextImage = state[currentCategory].entities[nextImageId];
const prevImage = state[currentCategory].entities[prevImageId];
const imagesLength = state[currentCategory].ids.length;
return {
isOnFirstImage: currentImageIndex === 0,
isOnLastImage:
!isNaN(currentImageIndex) && currentImageIndex === imagesLength - 1,
nextImage,
prevImage,
};
},
{
@ -59,28 +75,43 @@ const NextPrevImageButtons = () => {
const dispatch = useAppDispatch();
const { t } = useTranslation();
const { isOnFirstImage, isOnLastImage } = useAppSelector(
nextPrevImageButtonsSelector
);
const { isOnFirstImage, isOnLastImage, nextImage, prevImage } =
useAppSelector(nextPrevImageButtonsSelector);
const [shouldShowNextPrevButtons, setShouldShowNextPrevButtons] =
useState<boolean>(false);
const handleCurrentImagePreviewMouseOver = () => {
const handleCurrentImagePreviewMouseOver = useCallback(() => {
setShouldShowNextPrevButtons(true);
};
}, []);
const handleCurrentImagePreviewMouseOut = () => {
const handleCurrentImagePreviewMouseOut = useCallback(() => {
setShouldShowNextPrevButtons(false);
};
}, []);
const handleClickPrevButton = () => {
dispatch(selectPrevImage());
};
const handlePrevImage = useCallback(() => {
dispatch(imageSelected(prevImage));
}, [dispatch, prevImage]);
const handleClickNextButton = () => {
dispatch(selectNextImage());
};
const handleNextImage = useCallback(() => {
dispatch(imageSelected(nextImage));
}, [dispatch, nextImage]);
useHotkeys(
'left',
() => {
handlePrevImage();
},
[prevImage]
);
useHotkeys(
'right',
() => {
handleNextImage();
},
[nextImage]
);
return (
<Flex
@ -104,7 +135,7 @@ const NextPrevImageButtons = () => {
aria-label={t('accessibility.previousImage')}
icon={<FaAngleLeft size={64} />}
variant="unstyled"
onClick={handleClickPrevButton}
onClick={handlePrevImage}
boxSize={16}
sx={nextPrevButtonStyles}
/>
@ -123,7 +154,7 @@ const NextPrevImageButtons = () => {
aria-label={t('accessibility.nextImage')}
icon={<FaAngleRight size={64} />}
variant="unstyled"
onClick={handleClickNextButton}
onClick={handleNextImage}
boxSize={16}
sx={nextPrevButtonStyles}
/>

34
invokeai/frontend/web/src/features/gallery/store/gallerySlice.ts
View File

@ -41,40 +41,6 @@ export const gallerySlice = createSlice({
) => {
state.selectedImage = action.payload;
},
// selectNextImage: (state) => {
// const { currentImage } = state;
// if (!currentImage) return;
// const tempImages =
// state.categories[currentImage.category as GalleryCategory].images;
// if (currentImage) {
// const currentImageIndex = tempImages.findIndex(
// (i) => i.uuid === currentImage.uuid
// );
// if (currentImageIndex < tempImages.length - 1) {
// const newCurrentImage = tempImages[currentImageIndex + 1];
// state.currentImage = newCurrentImage;
// state.currentImageUuid = newCurrentImage.uuid;
// }
// }
// },
// selectPrevImage: (state) => {
// const { currentImage } = state;
// if (!currentImage) return;
// const tempImages =
// state.categories[currentImage.category as GalleryCategory].images;
// if (currentImage) {
// const currentImageIndex = tempImages.findIndex(
// (i) => i.uuid === currentImage.uuid
// );
// if (currentImageIndex > 0) {
// const newCurrentImage = tempImages[currentImageIndex - 1];
// state.currentImage = newCurrentImage;
// state.currentImageUuid = newCurrentImage.uuid;
// }
// }
// },
setGalleryImageMinimumWidth: (state, action: PayloadAction<number>) => {
state.galleryImageMinimumWidth = action.payload;
},