From 05101f8b3c5ea9b203021435cb710368f1987a21 Mon Sep 17 00:00:00 2001 From: Mary Hipp Date: Wed, 18 Sep 2024 10:48:59 -0400 Subject: [PATCH] fix(ui): update studio destination options and get them all working with new tab and store values --- .../frontend/web/src/app/components/App.tsx | 16 +++--- .../web/src/app/components/InvokeAIUI.tsx | 8 +-- .../app/hooks/useHandleStudioDestination.ts | 57 +++++++++++++++++++ 3 files changed, 70 insertions(+), 11 deletions(-) create mode 100644 invokeai/frontend/web/src/app/hooks/useHandleStudioDestination.ts diff --git a/invokeai/frontend/web/src/app/components/App.tsx b/invokeai/frontend/web/src/app/components/App.tsx index 97dbe00e28a..83c3242a27e 100644 --- a/invokeai/frontend/web/src/app/components/App.tsx +++ b/invokeai/frontend/web/src/app/components/App.tsx @@ -1,4 +1,6 @@ import { Box, useGlobalModifiersInit } from '@invoke-ai/ui-library'; +import type { StudioDestination } from 'app/hooks/useHandleStudioDestination'; +import { useHandleStudioDestination } from 'app/hooks/useHandleStudioDestination'; import { useSyncQueueStatus } from 'app/hooks/useSyncQueueStatus'; import { useLogger } from 'app/logging/useLogger'; import { appStarted } from 'app/store/middleware/listenerMiddleware/listeners/appStarted'; @@ -21,8 +23,6 @@ import RefreshAfterResetModal from 'features/system/components/SettingsModal/Ref import { configChanged } from 'features/system/store/configSlice'; import { selectLanguage } from 'features/system/store/systemSelectors'; import { AppContent } from 'features/ui/components/AppContent'; -import { setActiveTab } from 'features/ui/store/uiSlice'; -import type { TabName } from 'features/ui/store/uiTypes'; import { useGetAndLoadLibraryWorkflow } from 'features/workflowLibrary/hooks/useGetAndLoadLibraryWorkflow'; import { AnimatePresence } from 'framer-motion'; import i18n from 'i18n'; @@ -45,7 +45,7 @@ interface Props { }; selectedWorkflowId?: string; selectedStylePresetId?: string; - destination?: TabName; + studioDestination?: StudioDestination; } const App = ({ @@ -53,7 +53,7 @@ const App = ({ selectedImage, selectedWorkflowId, selectedStylePresetId, - destination, + studioDestination, }: Props) => { const language = useAppSelector(selectLanguage); const logger = useLogger('system'); @@ -66,6 +66,8 @@ const App = ({ useGlobalHotkeys(); useGetOpenAPISchemaQuery(); + const handleStudioDestination = useHandleStudioDestination(); + const { dropzone, isHandlingUpload, setIsHandlingUpload } = useFullscreenDropzone(); const handleReset = useCallback(() => { @@ -100,10 +102,10 @@ const App = ({ }, [dispatch, selectedStylePresetId]); useEffect(() => { - if (destination) { - dispatch(setActiveTab(destination)); + if (studioDestination) { + handleStudioDestination(studioDestination); } - }, [dispatch, destination]); + }, [handleStudioDestination, studioDestination]); useEffect(() => { dispatch(appStarted()); diff --git a/invokeai/frontend/web/src/app/components/InvokeAIUI.tsx b/invokeai/frontend/web/src/app/components/InvokeAIUI.tsx index 61252aaf1bf..44f94393775 100644 --- a/invokeai/frontend/web/src/app/components/InvokeAIUI.tsx +++ b/invokeai/frontend/web/src/app/components/InvokeAIUI.tsx @@ -1,6 +1,7 @@ import 'i18n'; import type { Middleware } from '@reduxjs/toolkit'; +import type { StudioDestination } from 'app/hooks/useHandleStudioDestination'; import { $authToken } from 'app/store/nanostores/authToken'; import { $baseUrl } from 'app/store/nanostores/baseUrl'; import { $customNavComponent } from 'app/store/nanostores/customNavComponent'; @@ -18,7 +19,6 @@ import type { PartialAppConfig } from 'app/types/invokeai'; import Loading from 'common/components/Loading/Loading'; import AppDndContext from 'features/dnd/components/AppDndContext'; import type { WorkflowCategory } from 'features/nodes/types/workflow'; -import type { TabName } from 'features/ui/store/uiTypes'; import type { PropsWithChildren, ReactNode } from 'react'; import React, { lazy, memo, useEffect, useMemo } from 'react'; import { Provider } from 'react-redux'; @@ -46,7 +46,7 @@ interface Props extends PropsWithChildren { }; selectedWorkflowId?: string; selectedStylePresetId?: string; - destination?: TabName; + studioDestination?: StudioDestination; customStarUi?: CustomStarUi; socketOptions?: Partial; isDebugging?: boolean; @@ -68,7 +68,7 @@ const InvokeAIUI = ({ selectedImage, selectedWorkflowId, selectedStylePresetId, - destination, + studioDestination, customStarUi, socketOptions, isDebugging = false, @@ -230,7 +230,7 @@ const InvokeAIUI = ({ selectedImage={selectedImage} selectedWorkflowId={selectedWorkflowId} selectedStylePresetId={selectedStylePresetId} - destination={destination} + studioDestination={studioDestination} /> diff --git a/invokeai/frontend/web/src/app/hooks/useHandleStudioDestination.ts b/invokeai/frontend/web/src/app/hooks/useHandleStudioDestination.ts new file mode 100644 index 00000000000..47c5afd24a1 --- /dev/null +++ b/invokeai/frontend/web/src/app/hooks/useHandleStudioDestination.ts @@ -0,0 +1,57 @@ +import { useAppDispatch } from 'app/store/storeHooks'; +import { settingsSendToCanvasChanged } from 'features/controlLayers/store/canvasSettingsSlice'; +import { useImageViewer } from 'features/gallery/components/ImageViewer/useImageViewer'; +import { $isMenuOpen } from 'features/stylePresets/store/isMenuOpen'; +import { setActiveTab } from 'features/ui/store/uiSlice'; +import { $isWorkflowLibraryModalOpen } from 'features/workflowLibrary/store/isWorkflowLibraryModalOpen'; +import { useCallback } from 'react'; + +export type StudioDestination = + | 'generation' + | 'canvas' + | 'workflows' + | 'upscaling' + | 'viewAllWorkflows' + | 'viewAllStylePresets'; + +export const useHandleStudioDestination = () => { + const dispatch = useAppDispatch(); + const imageViewer = useImageViewer(); + + const handleStudioDestination = useCallback( + (destination: StudioDestination) => { + switch (destination) { + case 'generation': + dispatch(setActiveTab('canvas')); + dispatch(settingsSendToCanvasChanged(false)); + imageViewer.open(); + break; + case 'canvas': + dispatch(setActiveTab('canvas')); + dispatch(settingsSendToCanvasChanged(true)); + imageViewer.close(); + break; + case 'workflows': + dispatch(setActiveTab('workflows')); + break; + case 'upscaling': + dispatch(setActiveTab('upscaling')); + break; + case 'viewAllWorkflows': + dispatch(setActiveTab('workflows')); + $isWorkflowLibraryModalOpen.set(true); + break; + case 'viewAllStylePresets': + dispatch(setActiveTab('canvas')); + $isMenuOpen.set(true); + break; + default: + dispatch(setActiveTab('canvas')); + break; + } + }, + [dispatch, imageViewer] + ); + + return handleStudioDestination; +};