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

added support for bottom key

Browse Source
This commit is contained in:
Rohinish 2024-01-03 22:48:57 +05:30 committed by psychedelicious
parent eba668956d
commit 196fb0e014
2 changed files with 44 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -46,7 +46,8 @@ const CurrentImagePreview = () => {
handleLoadMoreImages, handleLoadMoreImages,
areMoreImagesAvailable, areMoreImagesAvailable,
isFetching, isFetching,
handleTopImage handleTopImage,
handleBottomImage
} = useNextPrevImage(); } = useNextPrevImage();
useHotkeys( useHotkeys(
@ -85,6 +86,14 @@ const CurrentImagePreview = () => {
[handleTopImage] [handleTopImage]
); );
useHotkeys(
'down',
() => {
handleBottomImage();
},
[handleBottomImage]
);
const { currentData: imageDTO } = useGetImageDTOQuery(imageName ?? skipToken); const { currentData: imageDTO } = useGetImageDTOQuery(imageName ?? skipToken);
const draggableData = useMemo<TypesafeDraggableData | undefined>(() => { const draggableData = useMemo<TypesafeDraggableData | undefined>(() => {

37
invokeai/frontend/web/src/features/gallery/hooks/useNextPrevImage.ts
View File

@ -79,10 +79,12 @@ export const nextPrevImageButtonsSelector = createMemoizedSelector(
const nextImageIndex = clamp(currentImageIndex + 1, 0, images.length - 1); const nextImageIndex = clamp(currentImageIndex + 1, 0, images.length - 1);
const prevImageIndex = clamp(currentImageIndex - 1, 0, images.length - 1); const prevImageIndex = clamp(currentImageIndex - 1, 0, images.length - 1);
const topImageIndex = clamp(currentImageIndex - imagesPerRow,0, images.length - 1) const topImageIndex = clamp(currentImageIndex - imagesPerRow,0, images.length - 1)
const bottomImageIndex = clamp(currentImageIndex + imagesPerRow,0, images.length - 1)
const nextImageId = images[nextImageIndex]?.image_name; const nextImageId = images[nextImageIndex]?.image_name;
const prevImageId = images[prevImageIndex]?.image_name; const prevImageId = images[prevImageIndex]?.image_name;
const topImageId = images[topImageIndex]?.image_name const topImageId = images[topImageIndex]?.image_name
const bottomImageId = images[bottomImageIndex]?.image_name
const nextImage = nextImageId const nextImage = nextImageId
? imagesSelectors.selectById(data, nextImageId) ? imagesSelectors.selectById(data, nextImageId)
@ -93,6 +95,9 @@ export const nextPrevImageButtonsSelector = createMemoizedSelector(
const topImage = topImageId const topImage = topImageId
? selectors.selectById(data, topImageId) ? selectors.selectById(data, topImageId)
: undefined; : undefined;
const bottomImage = bottomImageId
? selectors.selectById(data, bottomImageId)
: undefined;
const imagesLength = images.length; const imagesLength = images.length;
@ -107,7 +112,9 @@ export const nextPrevImageButtonsSelector = createMemoizedSelector(
prevImageIndex, prevImageIndex,
queryArgs, queryArgs,
topImageIndex, topImageIndex,
topImage topImage,
bottomImageIndex,
bottomImage
}; };
} }
); );
@ -126,7 +133,9 @@ export const useNextPrevImage = () => {
loadedImagesCount, loadedImagesCount,
currentImageIndex, currentImageIndex,
topImageIndex, topImageIndex,
topImage topImage,
bottomImageIndex,
bottomImage
} = useAppSelector(nextPrevImageButtonsSelector); } = useAppSelector(nextPrevImageButtonsSelector);
const handlePrevImage = useCallback(() => { const handlePrevImage = useCallback(() => {
@ -190,6 +199,27 @@ export const useNextPrevImage = () => {
} }
},[dispatch, topImage, topImageIndex]) },[dispatch, topImage, topImageIndex])
const handleBottomImage = useCallback(() => {
bottomImage && dispatch(imageSelected(bottomImage));
const range = $useNextPrevImageState.get().virtuosoRangeRef?.current;
const virtuoso = $useNextPrevImageState.get().virtuosoRef?.current;
if (!range || !virtuoso) {
return;
}
if (
bottomImageIndex !== undefined &&
(bottomImageIndex < range.startIndex || bottomImageIndex > range.endIndex)
) {
virtuoso.scrollToIndex({
index: bottomImageIndex,
behavior: 'smooth',
align: getScrollToIndexAlign(bottomImageIndex, range),
});
}
},[dispatch, bottomImage, bottomImageIndex])
const [listImages] = useLazyListImagesQuery(); const [listImages] = useLazyListImagesQuery();
const handleLoadMoreImages = useCallback(() => { const handleLoadMoreImages = useCallback(() => {
@ -208,6 +238,7 @@ export const useNextPrevImage = () => {
areMoreImagesAvailable, areMoreImagesAvailable,
handleLoadMoreImages, handleLoadMoreImages,
isFetching, isFetching,
handleTopImage handleTopImage,
handleBottomImage
}; };
}; };