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

feat(ui): rework comparison activation, add hotkeys

Browse Source
This commit is contained in:
psychedelicious 2024-05-31 20:26:34 +10:00
parent 3501636018
commit 0e5336d8fa
16 changed files with 153 additions and 161 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
invokeai/frontend/web/public/locales/en.json
View File

@ -386,7 +386,8 @@
"sideBySide": "Side-by-Side",
"swapImages": "Swap Images",
"compareOptions": "Comparison Options",
"sliderFitLabel": "Stretch second image to fit"
"sliderFitLabel": "Stretch second image to fit",
"exitCompare": "Exit Compare"
},
"hotkeys": {
"searchHotkeys": "Search Hotkeys",

4
invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/enqueueRequestedLinear.ts
View File

@ -1,6 +1,6 @@
import { enqueueRequested } from 'app/store/actions';
import type { AppStartListening } from 'app/store/middleware/listenerMiddleware';
import { viewerModeChanged } from 'features/gallery/store/gallerySlice';
import { isImageViewerOpenChanged } from 'features/gallery/store/gallerySlice';
import { prepareLinearUIBatch } from 'features/nodes/util/graph/buildLinearBatchConfig';
import { buildGenerationTabGraph } from 'features/nodes/util/graph/generation/buildGenerationTabGraph';
import { buildGenerationTabSDXLGraph } from 'features/nodes/util/graph/generation/buildGenerationTabSDXLGraph';
@ -34,7 +34,7 @@ export const addEnqueueRequestedLinear = (startAppListening: AppStartListening)
try {
await req.unwrap();
if (shouldShowProgressInViewer) {
dispatch(viewerModeChanged('view'));
dispatch(isImageViewerOpenChanged(true));
}
} finally {
req.reset();

9
invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/galleryImageClicked.ts
View File

@ -1,7 +1,7 @@
import { createAction } from '@reduxjs/toolkit';
import type { AppStartListening } from 'app/store/middleware/listenerMiddleware';
import { selectListImagesQueryArgs } from 'features/gallery/store/gallerySelectors';
import { selectionChanged } from 'features/gallery/store/gallerySlice';
import { imageToCompareChanged, selectionChanged } from 'features/gallery/store/gallerySlice';
import { imagesApi } from 'services/api/endpoints/images';
import type { ImageDTO } from 'services/api/types';
import { imagesSelectors } from 'services/api/util';
@ -11,6 +11,7 @@ export const galleryImageClicked = createAction<{
shiftKey: boolean;
ctrlKey: boolean;
metaKey: boolean;
altKey: boolean;
}>('gallery/imageClicked');
/**
@ -28,7 +29,7 @@ export const addGalleryImageClickedListener = (startAppListening: AppStartListen
startAppListening({
actionCreator: galleryImageClicked,
effect: async (action, { dispatch, getState }) => {
const { imageDTO, shiftKey, ctrlKey, metaKey } = action.payload;
const { imageDTO, shiftKey, ctrlKey, metaKey, altKey } = action.payload;
const state = getState();
const queryArgs = selectListImagesQueryArgs(state);
const { data: listImagesData } = imagesApi.endpoints.listImages.select(queryArgs)(state);
@ -41,7 +42,9 @@ export const addGalleryImageClickedListener = (startAppListening: AppStartListen
const imageDTOs = imagesSelectors.selectAll(listImagesData);
const selection = state.gallery.selection;
if (shiftKey) {
if (altKey) {
dispatch(imageToCompareChanged(imageDTO));
} else if (shiftKey) {
const rangeEndImageName = imageDTO.image_name;
const lastSelectedImage = selection[selection.length - 1]?.image_name;
const lastClickedIndex = imageDTOs.findIndex((n) => n.image_name === lastSelectedImage);

4
invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/socketio/socketInvocationComplete.ts
View File

@ -7,7 +7,7 @@ import {
boardIdSelected,
galleryViewChanged,
imageSelected,
viewerModeChanged,
isImageViewerOpenChanged,
} from 'features/gallery/store/gallerySlice';
import { IMAGE_CATEGORIES } from 'features/gallery/store/types';
import { $nodeExecutionStates, upsertExecutionState } from 'features/nodes/hooks/useExecutionState';
@ -108,7 +108,7 @@ export const addInvocationCompleteEventListener = (startAppListening: AppStartLi
}
dispatch(imageSelected(imageDTO));
dispatch(viewerModeChanged('view'));
dispatch(isImageViewerOpenChanged(true));
}
}
}

6
invokeai/frontend/web/src/features/gallery/components/ImageContextMenu/SingleSelectionMenuItems.tsx
View File

@ -46,11 +46,7 @@ type SingleSelectionMenuItemsProps = {
const SingleSelectionMenuItems = (props: SingleSelectionMenuItemsProps) => {
const { imageDTO } = props;
const optimalDimension = useAppSelector(selectOptimalDimension);
const maySelectForCompare = useAppSelector(
(s) =>
s.gallery.imageToCompare?.image_name !== imageDTO.image_name &&
s.gallery.selection.slice(-1)[0]?.image_name !== imageDTO.image_name
);
const maySelectForCompare = useAppSelector((s) => s.gallery.imageToCompare?.image_name !== imageDTO.image_name);
const dispatch = useAppDispatch();
const { t } = useTranslation();
const isCanvasEnabled = useFeatureStatus('canvas');

9
invokeai/frontend/web/src/features/gallery/components/ImageGrid/GalleryImage.tsx
View File

@ -11,7 +11,7 @@ import type { GallerySelectionDraggableData, ImageDraggableData, TypesafeDraggab
import { getGalleryImageDataTestId } from 'features/gallery/components/ImageGrid/getGalleryImageDataTestId';
import { useMultiselect } from 'features/gallery/hooks/useMultiselect';
import { useScrollIntoView } from 'features/gallery/hooks/useScrollIntoView';
import { viewerModeChanged } from 'features/gallery/store/gallerySlice';
import { imageToCompareChanged, isImageViewerOpenChanged } from 'features/gallery/store/gallerySlice';
import type { MouseEvent } from 'react';
import { memo, useCallback, useMemo, useState } from 'react';
import { useTranslation } from 'react-i18next';
@ -46,9 +46,7 @@ const GalleryImage = (props: HoverableImageProps) => {
const { t } = useTranslation();
const selectedBoardId = useAppSelector((s) => s.gallery.selectedBoardId);
const alwaysShowImageSizeBadge = useAppSelector((s) => s.gallery.alwaysShowImageSizeBadge);
const isSelectedForCompare = useAppSelector(
(s) => s.gallery.imageToCompare?.image_name === imageName && s.gallery.viewerMode === 'compare'
);
const isSelectedForCompare = useAppSelector((s) => s.gallery.imageToCompare?.image_name === imageName);
const { handleClick, isSelected, areMultiplesSelected } = useMultiselect(imageDTO);
const customStarUi = useStore($customStarUI);
@ -107,7 +105,8 @@ const GalleryImage = (props: HoverableImageProps) => {
}, []);
const onDoubleClick = useCallback(() => {
dispatch(viewerModeChanged('view'));
dispatch(isImageViewerOpenChanged(true));
dispatch(imageToCompareChanged(null));
}, [dispatch]);
const handleMouseOut = useCallback(() => {

46
invokeai/frontend/web/src/features/gallery/components/ImageViewer/ImageComparisonToolbarButtons.tsx
View File

@ -12,7 +12,12 @@ import {
Switch,
} from '@invoke-ai/ui-library';
import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
import { comparedImagesSwapped, comparisonModeChanged, sliderFitChanged } from 'features/gallery/store/gallerySlice';
import {
comparedImagesSwapped,
comparisonModeChanged,
imageToCompareChanged,
sliderFitChanged,
} from 'features/gallery/store/gallerySlice';
import type { ChangeEvent } from 'react';
import { memo, useCallback } from 'react';
import { useTranslation } from 'react-i18next';
@ -38,20 +43,12 @@ export const ImageComparisonToolbarButtons = memo(() => {
},
[dispatch]
);
const exitCompare = useCallback(() => {
dispatch(imageToCompareChanged(null));
}, [dispatch]);
return (
<>
<ButtonGroup variant="outline">
<Button onClick={setComparisonModeSlider} colorScheme={comparisonMode === 'slider' ? 'invokeBlue' : 'base'}>
{t('gallery.slider')}
</Button>
<Button
onClick={setComparisonModeSideBySide}
colorScheme={comparisonMode === 'side-by-side' ? 'invokeBlue' : 'base'}
>
{t('gallery.sideBySide')}
</Button>
</ButtonGroup>
<Popover isLazy>
<PopoverTrigger>
<IconButton
@ -63,13 +60,25 @@ export const ImageComparisonToolbarButtons = memo(() => {
<PopoverContent>
<PopoverBody>
<Flex direction="column" gap={2}>
<FormControl>
<ButtonGroup variant="outline" size="sm" w="full">
<Button
flex={1}
onClick={setComparisonModeSlider}
colorScheme={comparisonMode === 'slider' ? 'invokeBlue' : 'base'}
>
{t('gallery.slider')}
</Button>
<Button
flex={1}
onClick={setComparisonModeSideBySide}
colorScheme={comparisonMode === 'side-by-side' ? 'invokeBlue' : 'base'}
>
{t('gallery.sideBySide')}
</Button>
</ButtonGroup>
<FormControl isDisabled={comparisonMode !== 'slider'}>
<FormLabel>{t('gallery.sliderFitLabel')}</FormLabel>
<Switch
isChecked={sliderFit === 'fill'}
isDisabled={comparisonMode !== 'slider'}
onChange={onSliderFitChanged}
/>
<Switch isChecked={sliderFit === 'fill'} onChange={onSliderFitChanged} />
</FormControl>
</Flex>
</PopoverBody>
@ -77,6 +86,7 @@ export const ImageComparisonToolbarButtons = memo(() => {
</Popover>
<Button onClick={swapImages}>{t('gallery.swapImages')}</Button>
<Button onClick={exitCompare}>{t('gallery.exitCompare')}</Button>
</>
);
});

17
invokeai/frontend/web/src/features/gallery/components/ImageViewer/ImageViewer.tsx
View File

@ -17,18 +17,19 @@ import { ViewerToggleMenu } from './ViewerToggleMenu';
const VIEWER_ENABLED_TABS: InvokeTabName[] = ['canvas', 'generation', 'workflows'];
export const ImageViewer = memo(() => {
const { viewerMode, onToggle, openEditor } = useImageViewer();
const { isOpen, onToggle, onClose } = useImageViewer();
const activeTabName = useAppSelector(activeTabNameSelector);
const isComparing = useAppSelector((s) => s.gallery.imageToCompare !== null);
const isViewerEnabled = useMemo(() => VIEWER_ENABLED_TABS.includes(activeTabName), [activeTabName]);
const shouldShowViewer = useMemo(() => {
if (!isViewerEnabled) {
return false;
}
return viewerMode === 'view' || viewerMode === 'compare';
}, [viewerMode, isViewerEnabled]);
return isOpen;
}, [isOpen, isViewerEnabled]);
useHotkeys('z', onToggle, { enabled: isViewerEnabled }, [isViewerEnabled, onToggle]);
useHotkeys('esc', openEditor, { enabled: isViewerEnabled }, [isViewerEnabled, openEditor]);
useHotkeys('esc', onClose, { enabled: isViewerEnabled }, [isViewerEnabled, onClose]);
if (!shouldShowViewer) {
return null;
@ -58,8 +59,8 @@ export const ImageViewer = memo(() => {
</Flex>
</Flex>
<Flex flex={1} gap={2} justifyContent="center">
{viewerMode === 'view' && <CurrentImageButtons />}
{viewerMode === 'compare' && <ImageComparisonToolbarButtons />}
{!isComparing && <CurrentImageButtons />}
{isComparing && <ImageComparisonToolbarButtons />}
</Flex>
<Flex flex={1} justifyContent="center">
<Flex gap={2} marginInlineStart="auto">
@ -68,8 +69,8 @@ export const ImageViewer = memo(() => {
</Flex>
</Flex>
<Box w="full" h="full">
{viewerMode === 'view' && <CurrentImagePreview />}
{viewerMode === 'compare' && <ImageComparison />}
{!isComparing && <CurrentImagePreview />}
{isComparing && <ImageComparison />}
</Box>
</Flex>
);

68
invokeai/frontend/web/src/features/gallery/components/ImageViewer/ViewerToggleMenu.tsx
View File

@ -8,60 +8,23 @@ import {
PopoverContent,
PopoverTrigger,
Text,
useDisclosure,
} from '@invoke-ai/ui-library';
import { useCallback, useMemo } from 'react';
import { useTranslation } from 'react-i18next';
import { PiCaretDownBold, PiCheckBold, PiEyeBold, PiImagesBold, PiPencilBold } from 'react-icons/pi';
import { PiCaretDownBold, PiCheckBold, PiEyeBold, PiPencilBold } from 'react-icons/pi';
import { useImageViewer } from './useImageViewer';
export const ViewerToggleMenu = () => {
const { t } = useTranslation();
const { isOpen, onOpen, onClose } = useDisclosure();
const { viewerMode, openEditor, openViewer, openCompare } = useImageViewer();
const icon = useMemo(() => {
if (viewerMode === 'view') {
return <Icon as={PiEyeBold} />;
}
if (viewerMode === 'edit') {
return <Icon as={PiPencilBold} />;
}
if (viewerMode === 'compare') {
return <Icon as={PiImagesBold} />;
}
}, [viewerMode]);
const label = useMemo(() => {
if (viewerMode === 'view') {
return t('common.viewing');
}
if (viewerMode === 'edit') {
return t('common.editing');
}
if (viewerMode === 'compare') {
return t('common.comparing');
}
}, [t, viewerMode]);
const _openEditor = useCallback(() => {
openEditor();
onClose();
}, [onClose, openEditor]);
const _openViewer = useCallback(() => {
openViewer();
onClose();
}, [onClose, openViewer]);
const _openCompare = useCallback(() => {
openCompare();
onClose();
}, [onClose, openCompare]);
const { isOpen, onClose, onOpen } = useImageViewer();
return (
<Popover isOpen={isOpen} onClose={onClose} onOpen={onOpen}>
<Popover isLazy>
<PopoverTrigger>
<Button variant="outline" data-testid="toggle-viewer-menu-button">
<Flex gap={3} w="full" alignItems="center">
{icon}
<Text fontSize="md">{label}</Text>
{isOpen ? <Icon as={PiEyeBold} /> : <Icon as={PiPencilBold} />}
<Text fontSize="md">{isOpen ? t('common.viewing') : t('common.editing')}</Text>
<Icon as={PiCaretDownBold} />
</Flex>
</Button>
@ -70,9 +33,9 @@ export const ViewerToggleMenu = () => {
<PopoverArrow />
<PopoverBody>
<Flex flexDir="column">
<Button onClick={_openViewer} variant="ghost" h="auto" w="auto" p={2}>
<Button onClick={onOpen} variant="ghost" h="auto" w="auto" p={2}>
<Flex gap={2} w="full">
<Icon as={PiCheckBold} visibility={viewerMode === 'view' ? 'visible' : 'hidden'} />
<Icon as={PiCheckBold} visibility={isOpen ? 'visible' : 'hidden'} />
<Flex flexDir="column" gap={2} alignItems="flex-start">
<Text fontWeight="semibold" color="base.100">
{t('common.viewing')}
@ -83,9 +46,9 @@ export const ViewerToggleMenu = () => {
</Flex>
</Flex>
</Button>
<Button onClick={_openEditor} variant="ghost" h="auto" w="auto" p={2}>
<Button onClick={onClose} variant="ghost" h="auto" w="auto" p={2}>
<Flex gap={2} w="full">
<Icon as={PiCheckBold} visibility={viewerMode === 'edit' ? 'visible' : 'hidden'} />
<Icon as={PiCheckBold} visibility={isOpen ? 'hidden' : 'visible'} />
<Flex flexDir="column" gap={2} alignItems="flex-start">
<Text fontWeight="semibold" color="base.100">
{t('common.editing')}
@ -96,19 +59,6 @@ export const ViewerToggleMenu = () => {
</Flex>
</Flex>
</Button>
<Button onClick={_openCompare} variant="ghost" h="auto" w="auto" p={2}>
<Flex gap={2} w="full">
<Icon as={PiCheckBold} visibility={viewerMode === 'compare' ? 'visible' : 'hidden'} />
<Flex flexDir="column" gap={2} alignItems="flex-start">
<Text fontWeight="semibold" color="base.100">
{t('common.comparing')}
</Text>
<Text fontWeight="normal" color="base.300">
{t('common.comparingDesc')}
</Text>
</Flex>
</Flex>
</Button>
</Flex>
</PopoverBody>
</PopoverContent>

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

@ -1,26 +1,22 @@
import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
import { viewerModeChanged } from 'features/gallery/store/gallerySlice';
import { isImageViewerOpenChanged } from 'features/gallery/store/gallerySlice';
import { useCallback } from 'react';
export const useImageViewer = () => {
const dispatch = useAppDispatch();
const viewerMode = useAppSelector((s) => s.gallery.viewerMode);
const isOpen = useAppSelector((s) => s.gallery.isImageViewerOpen);
const openEditor = useCallback(() => {
dispatch(viewerModeChanged('edit'));
const onClose = useCallback(() => {
dispatch(isImageViewerOpenChanged(false));
}, [dispatch]);
const openViewer = useCallback(() => {
dispatch(viewerModeChanged('view'));
const onOpen = useCallback(() => {
dispatch(isImageViewerOpenChanged(true));
}, [dispatch]);
const onToggle = useCallback(() => {
dispatch(viewerModeChanged(viewerMode === 'view' ? 'edit' : 'view'));
}, [dispatch, viewerMode]);
dispatch(isImageViewerOpenChanged(!isOpen));
}, [dispatch, isOpen]);
const openCompare = useCallback(() => {
dispatch(viewerModeChanged('compare'));
}, [dispatch]);
return { viewerMode, openEditor, openViewer, openCompare, onToggle };
return { isOpen, onOpen, onClose, onToggle };
};

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

@ -27,16 +27,16 @@ export const useGalleryHotkeys = () => {
useGalleryNavigation();
useHotkeys(
'left',
() => {
canNavigateGallery && handleLeftImage();
['left', 'alt+left'],
(e) => {
canNavigateGallery && handleLeftImage(e.altKey);
},
[handleLeftImage, canNavigateGallery]
);
useHotkeys(
'right',
() => {
['right', 'alt+right'],
(e) => {
if (!canNavigateGallery) {
return;
}
@ -45,29 +45,29 @@ export const useGalleryHotkeys = () => {
return;
}
if (!isOnLastImage) {
handleRightImage();
handleRightImage(e.altKey);
}
},
[isOnLastImage, areMoreImagesAvailable, handleLoadMoreImages, isFetching, handleRightImage, canNavigateGallery]
);
useHotkeys(
'up',
() => {
handleUpImage();
['up', 'alt+up'],
(e) => {
handleUpImage(e.altKey);
},
{ preventDefault: true },
[handleUpImage]
);
useHotkeys(
'down',
() => {
['down', 'alt+down'],
(e) => {
if (!areImagesBelowCurrent && areMoreImagesAvailable && !isFetching) {
handleLoadMoreImages();
return;
}
handleDownImage();
handleDownImage(e.altKey);
},
{ preventDefault: true },
[areImagesBelowCurrent, areMoreImagesAvailable, handleLoadMoreImages, isFetching, handleDownImage]

68
invokeai/frontend/web/src/features/gallery/hooks/useGalleryNavigation.ts
View File

@ -1,11 +1,11 @@
import { useAltModifier } from '@invoke-ai/ui-library';
import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
import { getGalleryImageDataTestId } from 'features/gallery/components/ImageGrid/getGalleryImageDataTestId';
import { imageItemContainerTestId } from 'features/gallery/components/ImageGrid/ImageGridItemContainer';
import { imageListContainerTestId } from 'features/gallery/components/ImageGrid/ImageGridListContainer';
import { virtuosoGridRefs } from 'features/gallery/components/ImageGrid/types';
import { useGalleryImages } from 'features/gallery/hooks/useGalleryImages';
import { selectLastSelectedImage } from 'features/gallery/store/gallerySelectors';
import { imageSelected } from 'features/gallery/store/gallerySlice';
import { imageSelected, imageToCompareChanged } from 'features/gallery/store/gallerySlice';
import { getIsVisible } from 'features/gallery/util/getIsVisible';
import { getScrollToIndexAlign } from 'features/gallery/util/getScrollToIndexAlign';
import { clamp } from 'lodash-es';
@ -106,10 +106,10 @@ const getImageFuncs = {
};
type UseGalleryNavigationReturn = {
handleLeftImage: () => void;
handleRightImage: () => void;
handleUpImage: () => void;
handleDownImage: () => void;
handleLeftImage: (alt?: boolean) => void;
handleRightImage: (alt?: boolean) => void;
handleUpImage: (alt?: boolean) => void;
handleDownImage: (alt?: boolean) => void;
isOnFirstImage: boolean;
isOnLastImage: boolean;
areImagesBelowCurrent: boolean;
@ -123,7 +123,15 @@ type UseGalleryNavigationReturn = {
*/
export const useGalleryNavigation = (): UseGalleryNavigationReturn => {
const dispatch = useAppDispatch();
const lastSelectedImage = useAppSelector(selectLastSelectedImage);
const alt = useAltModifier();
const lastSelectedImage = useAppSelector((s) => {
const lastSelected = s.gallery.selection.slice(-1)[0] ?? null;
if (alt) {
return s.gallery.imageToCompare ?? lastSelected;
} else {
return lastSelected;
}
});
const {
queryResult: { data },
} = useGalleryImages();
@ -136,7 +144,7 @@ export const useGalleryNavigation = (): UseGalleryNavigationReturn => {
}, [lastSelectedImage, data]);
const handleNavigation = useCallback(
(direction: 'left' | 'right' | 'up' | 'down') => {
(direction: 'left' | 'right' | 'up' | 'down', alt?: boolean) => {
if (!data) {
return;
}
@ -144,10 +152,14 @@ export const useGalleryNavigation = (): UseGalleryNavigationReturn => {
if (!image || index === lastSelectedImageIndex) {
return;
}
dispatch(imageSelected(image));
if (alt) {
dispatch(imageToCompareChanged(image));
} else {
dispatch(imageSelected(image));
}
scrollToImage(image.image_name, index);
},
[dispatch, lastSelectedImageIndex, data]
[data, lastSelectedImageIndex, dispatch]
);
const isOnFirstImage = useMemo(() => lastSelectedImageIndex === 0, [lastSelectedImageIndex]);
@ -162,21 +174,33 @@ export const useGalleryNavigation = (): UseGalleryNavigationReturn => {
return lastSelectedImageIndex + imagesPerRow < loadedImagesCount;
}, [lastSelectedImageIndex, loadedImagesCount]);
const handleLeftImage = useCallback(() => {
handleNavigation('left');
}, [handleNavigation]);
const handleLeftImage = useCallback(
(alt?: boolean) => {
handleNavigation('left', alt);
},
[handleNavigation]
);
const handleRightImage = useCallback(() => {
handleNavigation('right');
}, [handleNavigation]);
const handleRightImage = useCallback(
(alt?: boolean) => {
handleNavigation('right', alt);
},
[handleNavigation]
);
const handleUpImage = useCallback(() => {
handleNavigation('up');
}, [handleNavigation]);
const handleUpImage = useCallback(
(alt?: boolean) => {
handleNavigation('up', alt);
},
[handleNavigation]
);
const handleDownImage = useCallback(() => {
handleNavigation('down');
}, [handleNavigation]);
const handleDownImage = useCallback(
(alt?: boolean) => {
handleNavigation('down', alt);
},
[handleNavigation]
);
return {
handleLeftImage,

1
invokeai/frontend/web/src/features/gallery/hooks/useMultiselect.ts
View File

@ -36,6 +36,7 @@ export const useMultiselect = (imageDTO?: ImageDTO) => {
shiftKey: e.shiftKey,
ctrlKey: e.ctrlKey,
metaKey: e.metaKey,
altKey: e.altKey,
})
);
},

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

@ -6,7 +6,7 @@ import { boardsApi } from 'services/api/endpoints/boards';
import { imagesApi } from 'services/api/endpoints/images';
import type { ImageDTO } from 'services/api/types';
import type { BoardId, ComparisonMode, GalleryState, GalleryView, ViewerMode } from './types';
import type { BoardId, ComparisonMode, GalleryState, GalleryView } from './types';
import { IMAGE_LIMIT, INITIAL_IMAGE_LIMIT } from './types';
const initialGalleryState: GalleryState = {
@ -21,7 +21,7 @@ const initialGalleryState: GalleryState = {
boardSearchText: '',
limit: INITIAL_IMAGE_LIMIT,
offset: 0,
viewerMode: 'view',
isImageViewerOpen: true,
imageToCompare: null,
comparisonMode: 'slider',
sliderFit: 'fill',
@ -40,7 +40,7 @@ export const gallerySlice = createSlice({
imageToCompareChanged: (state, action: PayloadAction<ImageDTO | null>) => {
state.imageToCompare = action.payload;
if (action.payload) {
state.viewerMode = 'compare';
state.isImageViewerOpen = true;
}
},
comparisonModeChanged: (state, action: PayloadAction<ComparisonMode>) => {
@ -88,8 +88,12 @@ export const gallerySlice = createSlice({
alwaysShowImageSizeBadgeChanged: (state, action: PayloadAction<boolean>) => {
state.alwaysShowImageSizeBadge = action.payload;
},
viewerModeChanged: (state, action: PayloadAction<ViewerMode>) => {
state.viewerMode = action.payload;
isImageViewerOpenChanged: (state, action: PayloadAction<boolean>) => {
if (state.isImageViewerOpen && state.imageToCompare) {
state.imageToCompare = null;
return;
}
state.isImageViewerOpen = action.payload;
},
comparedImagesSwapped: (state) => {
if (state.imageToCompare) {
@ -138,7 +142,7 @@ export const {
boardSearchTextChanged,
moreImagesLoaded,
alwaysShowImageSizeBadgeChanged,
viewerModeChanged,
isImageViewerOpenChanged,
imageToCompareChanged,
comparisonModeChanged,
comparedImagesSwapped,
@ -164,5 +168,13 @@ export const galleryPersistConfig: PersistConfig<GalleryState> = {
name: gallerySlice.name,
initialState: initialGalleryState,
migrate: migrateGalleryState,
persistDenylist: ['selection', 'selectedBoardId', 'galleryView', 'offset', 'limit', 'viewerMode', 'imageToCompare'],
persistDenylist: [
'selection',
'selectedBoardId',
'galleryView',
'offset',
'limit',
'isImageViewerOpen',
'imageToCompare',
],
};

3
invokeai/frontend/web/src/features/gallery/store/types.ts
View File

@ -8,7 +8,6 @@ export const IMAGE_LIMIT = 20;
export type GalleryView = 'images' | 'assets';
export type BoardId = 'none' | (string & Record<never, never>);
export type ComparisonMode = 'slider' | 'side-by-side';
export type ViewerMode = 'edit' | 'view' | 'compare';
export type GalleryState = {
selection: ImageDTO[];
@ -25,5 +24,5 @@ export type GalleryState = {
imageToCompare: ImageDTO | null;
comparisonMode: ComparisonMode;
sliderFit: 'contain' | 'fill';
viewerMode: ViewerMode;
isImageViewerOpen: boolean;
};

4
invokeai/frontend/web/src/features/ui/components/ParametersPanelTextToImage.tsx
View File

@ -3,7 +3,7 @@ import { Box, Flex, Tab, TabList, TabPanel, TabPanels, Tabs } from '@invoke-ai/u
import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
import { overlayScrollbarsParams } from 'common/components/OverlayScrollbars/constants';
import { ControlLayersPanelContent } from 'features/controlLayers/components/ControlLayersPanelContent';
import { viewerModeChanged } from 'features/gallery/store/gallerySlice';
import { isImageViewerOpenChanged } from 'features/gallery/store/gallerySlice';
import { Prompts } from 'features/parameters/components/Prompts/Prompts';
import QueueControls from 'features/queue/components/QueueControls';
import { SDXLPrompts } from 'features/sdxl/components/SDXLPrompts/SDXLPrompts';
@ -51,7 +51,7 @@ const ParametersPanelTextToImage = () => {
const onChangeTabs = useCallback(
(i: number) => {
if (i === 1) {
dispatch(viewerModeChanged('edit'));
dispatch(isImageViewerOpenChanged(false));
}
},
[dispatch]