From 9c7f5ed3217e6c6b88b6025bc6e8bab9349e21c6 Mon Sep 17 00:00:00 2001 From: psychedelicious <4822129+psychedelicious@users.noreply.github.com> Date: Sun, 16 Jun 2024 11:43:43 +1000 Subject: [PATCH] refactor(ui): fix gallery stuff --- .../SingleSelectionMenuItems.tsx | 27 ++++++------------- .../ImageViewer/CurrentImageButtons.tsx | 3 +-- .../gallery/hooks/useGalleryHotkeys.ts | 19 +++---------- 3 files changed, 13 insertions(+), 36 deletions(-) diff --git a/invokeai/frontend/web/src/features/gallery/components/ImageContextMenu/SingleSelectionMenuItems.tsx b/invokeai/frontend/web/src/features/gallery/components/ImageContextMenu/SingleSelectionMenuItems.tsx index 19ad53eede..3c2d8578ae 100644 --- a/invokeai/frontend/web/src/features/gallery/components/ImageContextMenu/SingleSelectionMenuItems.tsx +++ b/invokeai/frontend/web/src/features/gallery/components/ImageContextMenu/SingleSelectionMenuItems.tsx @@ -4,23 +4,18 @@ import { $customStarUI } from 'app/store/nanostores/customStarUI'; import { useAppDispatch, useAppSelector } from 'app/store/storeHooks'; import { useCopyImageToClipboard } from 'common/hooks/useCopyImageToClipboard'; import { useDownloadImage } from 'common/hooks/useDownloadImage'; -import { setInitialCanvasImage } from 'features/canvas/store/canvasSlice'; import { imagesToChangeSelected, isModalOpenChanged } from 'features/changeBoardModal/store/slice'; -import { iiLayerAdded } from 'features/controlLayers/store/canvasV2Slice'; -import { selectOptimalDimension } from 'features/controlLayers/store/selectors'; import { imagesToDeleteSelected } from 'features/deleteImageModal/store/slice'; import { useImageActions } from 'features/gallery/hooks/useImageActions'; import { sentImageToCanvas, sentImageToImg2Img } from 'features/gallery/store/actions'; import { imageToCompareChanged } from 'features/gallery/store/gallerySlice'; import { $templates } from 'features/nodes/store/nodesSlice'; -import { selectOptimalDimension } from 'features/parameters/store/generationSlice'; import { upscaleInitialImageChanged } from 'features/parameters/store/upscaleSlice'; import { toast } from 'features/toast/toast'; import { setActiveTab } from 'features/ui/store/uiSlice'; import { useGetAndLoadEmbeddedWorkflow } from 'features/workflowLibrary/hooks/useGetAndLoadEmbeddedWorkflow'; import { size } from 'lodash-es'; import { memo, useCallback } from 'react'; -import { flushSync } from 'react-dom'; import { useTranslation } from 'react-i18next'; import { PiArrowsCounterClockwiseBold, @@ -47,7 +42,6 @@ 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); const dispatch = useAppDispatch(); const { t } = useTranslation(); @@ -86,24 +80,21 @@ const SingleSelectionMenuItems = (props: SingleSelectionMenuItemsProps) => { }, [dispatch, imageDTO]); const handleSendToImageToImage = useCallback(() => { + // TODO(psyche): restore send to img2img functionality dispatch(sentImageToImg2Img()); - dispatch(iiLayerAdded(imageDTO)); dispatch(setActiveTab('generation')); - }, [dispatch, imageDTO]); + }, [dispatch]); const handleSendToCanvas = useCallback(() => { + // TODO(psyche): restore send to canvas functionality dispatch(sentImageToCanvas()); - flushSync(() => { - dispatch(setActiveTab('canvas')); - }); - dispatch(setInitialCanvasImage(imageDTO, optimalDimension)); - + dispatch(setActiveTab('generation')); toast({ id: 'SENT_TO_CANVAS', title: t('toast.sentToUnifiedCanvas'), status: 'success', }); - }, [dispatch, imageDTO, t, optimalDimension]); + }, [dispatch, t]); const handleChangeBoard = useCallback(() => { dispatch(imagesToChangeSelected([imageDTO])); @@ -202,13 +193,11 @@ const SingleSelectionMenuItems = (props: SingleSelectionMenuItemsProps) => { } onClickCapture={handleSendToImageToImage} id="send-to-img2img"> {t('parameters.sendToImg2Img')} - {isCanvasEnabled && ( - } onClickCapture={handleSendToCanvas} id="send-to-canvas"> - {t('parameters.sendToUnifiedCanvas')} - - )} } onClickCapture={handleSendToUpscale} id="send-to-upscale"> {t('parameters.sendToUpscale')} + + } onClickCapture={handleSendToCanvas} id="send-to-canvas"> + {t('parameters.sendToUnifiedCanvas')} } onClickCapture={handleChangeBoard}> diff --git a/invokeai/frontend/web/src/features/gallery/components/ImageViewer/CurrentImageButtons.tsx b/invokeai/frontend/web/src/features/gallery/components/ImageViewer/CurrentImageButtons.tsx index d5c23ecb90..1ef91e7e2e 100644 --- a/invokeai/frontend/web/src/features/gallery/components/ImageViewer/CurrentImageButtons.tsx +++ b/invokeai/frontend/web/src/features/gallery/components/ImageViewer/CurrentImageButtons.tsx @@ -4,7 +4,6 @@ import { createSelector } from '@reduxjs/toolkit'; import { skipToken } from '@reduxjs/toolkit/query'; import { adHocPostProcessingRequested } from 'app/store/middleware/listenerMiddleware/listeners/addAdHocPostProcessingRequestedListener'; import { useAppDispatch, useAppSelector } from 'app/store/storeHooks'; -import { iiLayerAdded } from 'features/controlLayers/store/canvasV2Slice'; import { DeleteImageButton } from 'features/deleteImageModal/components/DeleteImageButton'; import { imagesToDeleteSelected } from 'features/deleteImageModal/store/slice'; import SingleSelectionMenuItems from 'features/gallery/components/ImageContextMenu/SingleSelectionMenuItems'; @@ -86,8 +85,8 @@ const CurrentImageButtons = () => { if (!imageDTO) { return; } + // TODO(psyche): restore send to img2img functionality dispatch(sentImageToImg2Img()); - dispatch(iiLayerAdded(imageDTO)); dispatch(setActiveTab('generation')); }, [dispatch, imageDTO]); diff --git a/invokeai/frontend/web/src/features/gallery/hooks/useGalleryHotkeys.ts b/invokeai/frontend/web/src/features/gallery/hooks/useGalleryHotkeys.ts index 5b14fb7a8c..a499b45f64 100644 --- a/invokeai/frontend/web/src/features/gallery/hooks/useGalleryHotkeys.ts +++ b/invokeai/frontend/web/src/features/gallery/hooks/useGalleryHotkeys.ts @@ -1,10 +1,7 @@ import { useAppSelector } from 'app/store/storeHooks'; -import { isStagingSelector } from 'features/canvas/store/canvasSelectors'; import { useGalleryNavigation } from 'features/gallery/hooks/useGalleryNavigation'; import { useGalleryPagination } from 'features/gallery/hooks/useGalleryPagination'; import { selectListImagesQueryArgs } from 'features/gallery/store/gallerySelectors'; -import { activeTabNameSelector } from 'features/ui/store/uiSelectors'; -import { useMemo } from 'react'; import { useHotkeys } from 'react-hotkeys-hook'; import { useListImagesQuery } from 'services/api/endpoints/images'; @@ -12,12 +9,7 @@ import { useListImagesQuery } from 'services/api/endpoints/images'; * Registers gallery hotkeys. This hook is a singleton. */ 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 !== 'canvas' || !isStaging; - }, [activeTabName, isStaging]); + // TODO(psyche): Hotkeys when staging - cannot navigate gallery with arrow keys when staging! const { goNext, goPrev, isNextEnabled, isPrevEnabled } = useGalleryPagination(); const queryArgs = useAppSelector(selectListImagesQueryArgs); @@ -41,17 +33,14 @@ export const useGalleryHotkeys = () => { goPrev(e.altKey ? 'alt+arrow' : 'arrow'); return; } - canNavigateGallery && handleLeftImage(e.altKey); + handleLeftImage(e.altKey); }, - [handleLeftImage, canNavigateGallery, isOnFirstImageOfView, goPrev, isPrevEnabled, queryResult.isFetching] + [handleLeftImage, isOnFirstImageOfView, goPrev, isPrevEnabled, queryResult.isFetching] ); useHotkeys( ['right', 'alt+right'], (e) => { - if (!canNavigateGallery) { - return; - } if (isOnLastImageOfView && isNextEnabled && !queryResult.isFetching) { goNext(e.altKey ? 'alt+arrow' : 'arrow'); return; @@ -60,7 +49,7 @@ export const useGalleryHotkeys = () => { handleRightImage(e.altKey); } }, - [isOnLastImageOfView, goNext, isNextEnabled, queryResult.isFetching, handleRightImage, canNavigateGallery] + [isOnLastImageOfView, goNext, isNextEnabled, queryResult.isFetching, handleRightImage] ); useHotkeys(