github/InvokeAI
1
1
Fork 0
mirror of https://github.com/invoke-ai/InvokeAI.git synced 2026-04-23 03:00:31 -04:00
Code Issues Packages Projects Releases Wiki Activity

tidy(ui): move star hotkey into own hook & use reactive state for focus

Browse Source
This commit is contained in:
psychedelicious
2025-07-22 08:08:52 +10:00
parent 8418e34480
commit 2c1f2b2873
1 changed files with 34 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

61
invokeai/frontend/web/src/features/gallery/components/NewGallery.tsx
View File

@@ -2,13 +2,14 @@ import { Box, Flex, forwardRef, Grid, GridItem, Spinner, Text } from '@invoke-ai
import { createSelector } from '@reduxjs/toolkit';
import { logger } from 'app/logging/logger';
import { useAppSelector, useAppStore } from 'app/store/storeHooks';
import { getFocusedRegion } from 'common/hooks/focus';
import { getFocusedRegion, useIsRegionFocused } from 'common/hooks/focus';
import { useRangeBasedImageFetching } from 'features/gallery/hooks/useRangeBasedImageFetching';
import type { selectGetImageNamesQueryArgs } from 'features/gallery/store/gallerySelectors';
import {
selectGalleryImageMinimumWidth,
selectImageToCompare,
selectLastSelectedImage,
selectSelectionCount,
} from 'features/gallery/store/gallerySelectors';
import { imageToCompareChanged, selectionChanged } from 'features/gallery/store/gallerySlice';
import { useRegisteredHotkeys } from 'features/system/components/HotkeysModal/useHotkeyData';
@@ -450,6 +451,37 @@ const useScrollableGallery = (rootRef: RefObject<HTMLDivElement>) => {
return scrollerRef;
};
const useStarImageHotkey = () => {
const lastSelectedImage = useAppSelector(selectLastSelectedImage);
const selectionCount = useAppSelector(selectSelectionCount);
const isGalleryFocused = useIsRegionFocused('gallery');
const imageDTO = useImageDTO(lastSelectedImage);
const [starImages] = useStarImagesMutation();
const [unstarImages] = useUnstarImagesMutation();
const handleStarHotkey = useCallback(() => {
if (!imageDTO) {
return;
}
if (!isGalleryFocused) {
return;
}
if (imageDTO.starred) {
unstarImages({ image_names: [imageDTO.image_name] });
} else {
starImages({ image_names: [imageDTO.image_name] });
}
}, [imageDTO, isGalleryFocused, starImages, unstarImages]);
useRegisteredHotkeys({
id: 'starImage',
category: 'gallery',
callback: handleStarHotkey,
options: { enabled: !!imageDTO && selectionCount === 1 && isGalleryFocused },
dependencies: [imageDTO, selectionCount, isGalleryFocused, handleStarHotkey],
});
};
export const NewGallery = memo(() => {
const virtuosoRef = useRef<VirtuosoGridHandle>(null);
const rangeRef = useRef<ListRange>({ startIndex: 0, endIndex: 0 });
@@ -464,32 +496,7 @@ export const NewGallery = memo(() => {
enabled: !isLoading,
});
const lastSelectedImage = useAppSelector(selectLastSelectedImage);
const selectionCount = useAppSelector((state) => state.gallery.selection.length);
const isGalleryFocused = getFocusedRegion() === 'gallery';
const imageDTO = useImageDTO(lastSelectedImage);
const [starImages] = useStarImagesMutation();
const [unstarImages] = useUnstarImagesMutation();
const handleStarHotkey = useCallback(() => {
if (!imageDTO) {
return;
}
if (imageDTO.starred) {
unstarImages({ image_names: [imageDTO.image_name] });
} else {
starImages({ image_names: [imageDTO.image_name] });
}
}, [imageDTO, starImages, unstarImages]);
useRegisteredHotkeys({
id: 'starImage',
category: 'gallery',
callback: handleStarHotkey,
options: { enabled: !!imageDTO && selectionCount === 1 && isGalleryFocused },
dependencies: [imageDTO, selectionCount, isGalleryFocused, handleStarHotkey],
});
useStarImageHotkey();
useKeepSelectedImageInView(imageNames, virtuosoRef, rootRef, rangeRef);
useKeyboardNavigation(imageNames, virtuosoRef, rootRef);
const scrollerRef = useScrollableGallery(rootRef);