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 }; +};