github/InvokeAI
1
1
Fork 0
mirror of https://github.com/invoke-ai/InvokeAI.git synced 2026-02-12 12:35:01 -05:00
Code Issues Packages Projects Releases Wiki Activity

chore(ui): dpdm

Browse Source
This commit is contained in:
psychedelicious
2025-06-25 14:10:38 +10:00
parent e164451dfe
commit a928ed0204
5 changed files with 26 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,5 +1,5 @@
import { IconButton, Input, InputGroup, InputRightElement, Spinner } from '@invoke-ai/ui-library';
import { useGalleryImageNames } from 'features/gallery/components/NewGallery';
import { useGalleryImageNames } from 'features/gallery/components/use-gallery-image-names';
import type { ChangeEvent, KeyboardEvent } from 'react';
import { memo, useCallback } from 'react';
import { useTranslation } from 'react-i18next';

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

@@ -1,7 +1,7 @@
import { Tag, TagCloseButton, TagLabel } from '@invoke-ai/ui-library';
import { useAppDispatch, useAppSelector, useAppStore } from 'app/store/storeHooks';
import { useIsRegionFocused } from 'common/hooks/focus';
import { useGalleryImageNames } from 'features/gallery/components/NewGallery';
import { useGalleryImageNames } from 'features/gallery/components/use-gallery-image-names';
import { selectFirstSelectedImage, selectSelectionCount } from 'features/gallery/store/gallerySelectors';
import { selectionChanged } from 'features/gallery/store/gallerySlice';
import { useRegisteredHotkeys } from 'features/system/components/HotkeysModal/useHotkeyData';

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

@@ -1,14 +1,13 @@
import { Box, Flex, forwardRef, Grid, GridItem, Skeleton, Spinner, Text } from '@invoke-ai/ui-library';
import { createSelector } from '@reduxjs/toolkit';
import { logger } from 'app/logging/logger';
import { EMPTY_ARRAY } from 'app/store/constants';
import { useAppSelector, useAppStore } from 'app/store/storeHooks';
import type { selectListImageNamesQueryArgs } from 'features/gallery/store/gallerySelectors';
import {
LIMIT,
selectGalleryImageMinimumWidth,
selectImageToCompare,
selectLastSelectedImage,
selectListImageNamesQueryArgs,
} from 'features/gallery/store/gallerySelectors';
import { imageToCompareChanged, selectionChanged } from 'features/gallery/store/gallerySlice';
import { useRegisteredHotkeys } from 'features/system/components/HotkeysModal/useHotkeyData';
@@ -24,12 +23,13 @@ import type {
VirtuosoGridHandle,
} from 'react-virtuoso';
import { VirtuosoGrid } from 'react-virtuoso';
import { useGetImageNamesQuery, useListImagesQuery } from 'services/api/endpoints/images';
import { useListImagesQuery } from 'services/api/endpoints/images';
import type { ImageDTO } from 'services/api/types';
import { useDebounce } from 'use-debounce';
import { GalleryImage } from './ImageGrid/GalleryImage';
import { GallerySelectionCountTag } from './ImageGrid/GallerySelectionCountTag';
import { useGalleryImageNames } from './use-gallery-image-names';
const log = logger('gallery');
@@ -396,21 +396,6 @@ const useKeepSelectedImageInView = (
}, [imageName, imageNames, rangeRef, rootRef, virtuosoRef]);
};
const getImageNamesQueryOptions = {
selectFromResult: ({ data, isLoading, isFetching }) => ({
imageNames: data ?? EMPTY_ARRAY,
isLoading,
isFetching,
}),
} satisfies Parameters<typeof useGetImageNamesQuery>[1];
export const useGalleryImageNames = () => {
const _queryArgs = useAppSelector(selectListImageNamesQueryArgs);
const [queryArgs] = useDebounce(_queryArgs, DEBOUNCE_DELAY);
const { imageNames, isLoading, isFetching } = useGetImageNamesQuery(queryArgs, getImageNamesQueryOptions);
return { imageNames, isLoading, isFetching, queryArgs };
};
const useScrollableGallery = (rootRef: RefObject<HTMLDivElement>) => {
const [scroller, scrollerRef] = useState<HTMLElement | null>(null);
const [initialize, osInstance] = useOverlayScrollbars({

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

@@ -8,7 +8,7 @@ import { memo, useCallback, useMemo } from 'react';
import { useTranslation } from 'react-i18next';
import { PiCaretLeftBold, PiCaretRightBold } from 'react-icons/pi';
import { useGalleryImageNames } from './NewGallery';
import { useGalleryImageNames } from './use-gallery-image-names';
const NextPrevImageButtons = ({ inset = 8 }: { inset?: ChakraProps['insetInlineStart' | 'insetInlineEnd'] }) => {
const { t } = useTranslation();

20
invokeai/frontend/web/src/features/gallery/components/use-gallery-image-names.ts Normal file
View File

@@ -0,0 +1,20 @@
import { EMPTY_ARRAY } from 'app/store/constants';
import { useAppSelector } from 'app/store/storeHooks';
import { selectListImageNamesQueryArgs } from 'features/gallery/store/gallerySelectors';
import { useGetImageNamesQuery } from 'services/api/endpoints/images';
import { useDebounce } from 'use-debounce';
const getImageNamesQueryOptions = {
selectFromResult: ({ data, isLoading, isFetching }) => ({
imageNames: data ?? EMPTY_ARRAY,
isLoading,
isFetching,
}),
} satisfies Parameters<typeof useGetImageNamesQuery>[1];
export const useGalleryImageNames = () => {
const _queryArgs = useAppSelector(selectListImageNamesQueryArgs);
const [queryArgs] = useDebounce(_queryArgs, 500);
const { imageNames, isLoading, isFetching } = useGetImageNamesQuery(queryArgs, getImageNamesQueryOptions);
return { imageNames, isLoading, isFetching, queryArgs };
};