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): block gallery navigation when staging images on canvas

Browse Source
This commit is contained in:
Thomas Mello 2024-01-28 03:09:11 +03:00 committed by psychedelicious
parent 287d3c2b04
commit c4291f2136
1 changed files with 17 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
invokeai/frontend/web/src/features/gallery/hooks/useGalleryHotkeys.ts
View File

@ -1,11 +1,22 @@
import { useAppSelector } from 'app/store/storeHooks';
import { isStagingSelector } from 'features/canvas/store/canvasSelectors';
import { useGalleryImages } from 'features/gallery/hooks/useGalleryImages'; import { useGalleryImages } from 'features/gallery/hooks/useGalleryImages';
import { useGalleryNavigation } from 'features/gallery/hooks/useGalleryNavigation'; import { useGalleryNavigation } from 'features/gallery/hooks/useGalleryNavigation';
import { activeTabNameSelector } from 'features/ui/store/uiSelectors';
import { useMemo } from 'react';
import { useHotkeys } from 'react-hotkeys-hook'; import { useHotkeys } from 'react-hotkeys-hook';
/** /**
* Registers gallery hotkeys. This hook is a singleton. * Registers gallery hotkeys. This hook is a singleton.
*/ */
export const useGalleryHotkeys = () => { export const useGalleryHotkeys = () => {
const activeTabName = useAppSelector(activeTabNameSelector);
const isStaging = useAppSelector(isStagingSelector);
// block navigation on Unified Canvas tab when staging new images
const canNavigateGallery = useMemo(() => {
return activeTabName !== 'unifiedCanvas' || !isStaging;
}, [activeTabName, isStaging]);
const { const {
areMoreImagesAvailable, areMoreImagesAvailable,
handleLoadMoreImages, handleLoadMoreImages,
@ -18,14 +29,17 @@ export const useGalleryHotkeys = () => {
useHotkeys( useHotkeys(
'left', 'left',
() => { () => {
handleLeftImage(); canNavigateGallery && handleLeftImage();
}, },
[handleLeftImage] [handleLeftImage, canNavigateGallery]
); );
useHotkeys( useHotkeys(
'right', 'right',
() => { () => {
if (!canNavigateGallery) {
return;
}
if (isOnLastImage && areMoreImagesAvailable && !isFetching) { if (isOnLastImage && areMoreImagesAvailable && !isFetching) {
handleLoadMoreImages(); handleLoadMoreImages();
return; return;
@ -34,7 +48,7 @@ export const useGalleryHotkeys = () => {
handleRightImage(); handleRightImage();
} }
}, },
[isOnLastImage, areMoreImagesAvailable, handleLoadMoreImages, isFetching, handleRightImage] [isOnLastImage, areMoreImagesAvailable, handleLoadMoreImages, isFetching, handleRightImage, canNavigateGallery]
); );
useHotkeys( useHotkeys(