From 31e270e32cc16c9f2f5c143365153eb68d2f8ec0 Mon Sep 17 00:00:00 2001 From: chainchompa Date: Wed, 31 Jul 2024 17:20:51 -0400 Subject: [PATCH 1/2] add base prop for destination to direct users to different tabs --- .../frontend/web/src/app/components/App.tsx | 6 +++++- .../web/src/app/components/Destination.tsx | 14 +++++++++++++ .../web/src/app/components/InvokeAIUI.tsx | 4 +++- .../parameters/hooks/useDestination.ts | 20 +++++++++++++++++++ 4 files changed, 42 insertions(+), 2 deletions(-) create mode 100644 invokeai/frontend/web/src/app/components/Destination.tsx create mode 100644 invokeai/frontend/web/src/features/parameters/hooks/useDestination.ts diff --git a/invokeai/frontend/web/src/app/components/App.tsx b/invokeai/frontend/web/src/app/components/App.tsx index 2d878d96e7..a91f24f544 100644 --- a/invokeai/frontend/web/src/app/components/App.tsx +++ b/invokeai/frontend/web/src/app/components/App.tsx @@ -16,6 +16,7 @@ import { useStarterModelsToast } from 'features/modelManagerV2/hooks/useStarterM import { configChanged } from 'features/system/store/configSlice'; import { languageSelector } from 'features/system/store/systemSelectors'; import InvokeTabs from 'features/ui/components/InvokeTabs'; +import type { InvokeTabName } from 'features/ui/store/tabMap'; import { AnimatePresence } from 'framer-motion'; import i18n from 'i18n'; import { size } from 'lodash-es'; @@ -24,6 +25,7 @@ import { ErrorBoundary } from 'react-error-boundary'; import { useGetOpenAPISchemaQuery } from 'services/api/endpoints/appInfo'; import AppErrorBoundaryFallback from './AppErrorBoundaryFallback'; +import Destination from './Destination'; import PreselectedImage from './PreselectedImage'; const DEFAULT_CONFIG = {}; @@ -34,9 +36,10 @@ interface Props { imageName: string; action: 'sendToImg2Img' | 'sendToCanvas' | 'useAllParameters'; }; + destination?: InvokeTabName | undefined; } -const App = ({ config = DEFAULT_CONFIG, selectedImage }: Props) => { +const App = ({ config = DEFAULT_CONFIG, selectedImage, destination }: Props) => { const language = useAppSelector(languageSelector); const logger = useLogger('system'); const dispatch = useAppDispatch(); @@ -96,6 +99,7 @@ const App = ({ config = DEFAULT_CONFIG, selectedImage }: Props) => { + ); }; diff --git a/invokeai/frontend/web/src/app/components/Destination.tsx b/invokeai/frontend/web/src/app/components/Destination.tsx new file mode 100644 index 0000000000..dd174ef8e8 --- /dev/null +++ b/invokeai/frontend/web/src/app/components/Destination.tsx @@ -0,0 +1,14 @@ +import { useDestination } from 'features/parameters/hooks/useDestination'; +import type { InvokeTabName } from 'features/ui/store/tabMap'; +import { memo } from 'react'; + +type Props = { + destination: InvokeTabName | undefined; +}; + +const Destination = (props: Props) => { + useDestination(props.destination); + return null; +}; + +export default memo(Destination); diff --git a/invokeai/frontend/web/src/app/components/InvokeAIUI.tsx b/invokeai/frontend/web/src/app/components/InvokeAIUI.tsx index 1dd1a265fb..8b5dc4babc 100644 --- a/invokeai/frontend/web/src/app/components/InvokeAIUI.tsx +++ b/invokeai/frontend/web/src/app/components/InvokeAIUI.tsx @@ -43,6 +43,7 @@ interface Props extends PropsWithChildren { imageName: string; action: 'sendToImg2Img' | 'sendToCanvas' | 'useAllParameters'; }; + destination?: 'canvas' | 'workflows'; customStarUi?: CustomStarUi; socketOptions?: Partial; isDebugging?: boolean; @@ -62,6 +63,7 @@ const InvokeAIUI = ({ projectUrl, queueId, selectedImage, + destination, customStarUi, socketOptions, isDebugging = false, @@ -218,7 +220,7 @@ const InvokeAIUI = ({ }> - + diff --git a/invokeai/frontend/web/src/features/parameters/hooks/useDestination.ts b/invokeai/frontend/web/src/features/parameters/hooks/useDestination.ts new file mode 100644 index 0000000000..159b96033a --- /dev/null +++ b/invokeai/frontend/web/src/features/parameters/hooks/useDestination.ts @@ -0,0 +1,20 @@ +import { useAppDispatch } from 'app/store/storeHooks'; +import type { InvokeTabName } from 'features/ui/store/tabMap'; +import { setActiveTab } from 'features/ui/store/uiSlice'; +import { useCallback, useEffect } from 'react'; + +export const useDestination = (destination: InvokeTabName | undefined) => { + const dispatch = useAppDispatch(); + + const handleSendToDestination = useCallback(() => { + if (destination) { + dispatch(setActiveTab(destination)); + } + }, [dispatch, destination]); + + useEffect(() => { + handleSendToDestination(); + }, [destination, handleSendToDestination]); + + return { handleSendToDestination }; +}; From e78fb428f0ab3c83e50bbdf4ec30ef49cdd8c53b Mon Sep 17 00:00:00 2001 From: chainchompa Date: Wed, 31 Jul 2024 18:06:22 -0400 Subject: [PATCH 2/2] simplify destination prop handling --- .../frontend/web/src/app/components/App.tsx | 9 +++++++-- .../web/src/app/components/Destination.tsx | 14 ------------- .../web/src/app/components/InvokeAIUI.tsx | 3 ++- .../parameters/hooks/useDestination.ts | 20 ------------------- 4 files changed, 9 insertions(+), 37 deletions(-) delete mode 100644 invokeai/frontend/web/src/app/components/Destination.tsx delete mode 100644 invokeai/frontend/web/src/features/parameters/hooks/useDestination.ts diff --git a/invokeai/frontend/web/src/app/components/App.tsx b/invokeai/frontend/web/src/app/components/App.tsx index a91f24f544..760eddbee8 100644 --- a/invokeai/frontend/web/src/app/components/App.tsx +++ b/invokeai/frontend/web/src/app/components/App.tsx @@ -17,6 +17,7 @@ import { configChanged } from 'features/system/store/configSlice'; import { languageSelector } from 'features/system/store/systemSelectors'; import InvokeTabs from 'features/ui/components/InvokeTabs'; import type { InvokeTabName } from 'features/ui/store/tabMap'; +import { setActiveTab } from 'features/ui/store/uiSlice'; import { AnimatePresence } from 'framer-motion'; import i18n from 'i18n'; import { size } from 'lodash-es'; @@ -25,7 +26,6 @@ import { ErrorBoundary } from 'react-error-boundary'; import { useGetOpenAPISchemaQuery } from 'services/api/endpoints/appInfo'; import AppErrorBoundaryFallback from './AppErrorBoundaryFallback'; -import Destination from './Destination'; import PreselectedImage from './PreselectedImage'; const DEFAULT_CONFIG = {}; @@ -70,6 +70,12 @@ const App = ({ config = DEFAULT_CONFIG, selectedImage, destination }: Props) => } }, [dispatch, config, logger]); + useEffect(() => { + if (destination) { + dispatch(setActiveTab(destination)); + } + }, [dispatch, destination]); + useEffect(() => { dispatch(appStarted()); }, [dispatch]); @@ -99,7 +105,6 @@ const App = ({ config = DEFAULT_CONFIG, selectedImage, destination }: Props) => - ); }; diff --git a/invokeai/frontend/web/src/app/components/Destination.tsx b/invokeai/frontend/web/src/app/components/Destination.tsx deleted file mode 100644 index dd174ef8e8..0000000000 --- a/invokeai/frontend/web/src/app/components/Destination.tsx +++ /dev/null @@ -1,14 +0,0 @@ -import { useDestination } from 'features/parameters/hooks/useDestination'; -import type { InvokeTabName } from 'features/ui/store/tabMap'; -import { memo } from 'react'; - -type Props = { - destination: InvokeTabName | undefined; -}; - -const Destination = (props: Props) => { - useDestination(props.destination); - return null; -}; - -export default memo(Destination); diff --git a/invokeai/frontend/web/src/app/components/InvokeAIUI.tsx b/invokeai/frontend/web/src/app/components/InvokeAIUI.tsx index 8b5dc4babc..0a80b7e92d 100644 --- a/invokeai/frontend/web/src/app/components/InvokeAIUI.tsx +++ b/invokeai/frontend/web/src/app/components/InvokeAIUI.tsx @@ -19,6 +19,7 @@ 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 { InvokeTabName } from 'features/ui/store/tabMap'; import type { PropsWithChildren, ReactNode } from 'react'; import React, { lazy, memo, useEffect, useMemo } from 'react'; import { Provider } from 'react-redux'; @@ -43,7 +44,7 @@ interface Props extends PropsWithChildren { imageName: string; action: 'sendToImg2Img' | 'sendToCanvas' | 'useAllParameters'; }; - destination?: 'canvas' | 'workflows'; + destination?: InvokeTabName; customStarUi?: CustomStarUi; socketOptions?: Partial; isDebugging?: boolean; diff --git a/invokeai/frontend/web/src/features/parameters/hooks/useDestination.ts b/invokeai/frontend/web/src/features/parameters/hooks/useDestination.ts deleted file mode 100644 index 159b96033a..0000000000 --- a/invokeai/frontend/web/src/features/parameters/hooks/useDestination.ts +++ /dev/null @@ -1,20 +0,0 @@ -import { useAppDispatch } from 'app/store/storeHooks'; -import type { InvokeTabName } from 'features/ui/store/tabMap'; -import { setActiveTab } from 'features/ui/store/uiSlice'; -import { useCallback, useEffect } from 'react'; - -export const useDestination = (destination: InvokeTabName | undefined) => { - const dispatch = useAppDispatch(); - - const handleSendToDestination = useCallback(() => { - if (destination) { - dispatch(setActiveTab(destination)); - } - }, [dispatch, destination]); - - useEffect(() => { - handleSendToDestination(); - }, [destination, handleSendToDestination]); - - return { handleSendToDestination }; -};