diff --git a/invokeai/frontend/web/src/features/nodes/components/sidePanel/WorkflowViewEditToggleButton.tsx b/invokeai/frontend/web/src/features/nodes/components/sidePanel/WorkflowViewEditToggleButton.tsx index d001c9d3a7..6c91d9d025 100644 --- a/invokeai/frontend/web/src/features/nodes/components/sidePanel/WorkflowViewEditToggleButton.tsx +++ b/invokeai/frontend/web/src/features/nodes/components/sidePanel/WorkflowViewEditToggleButton.tsx @@ -1,6 +1,9 @@ import { IconButton } from '@invoke-ai/ui-library'; import { useAppDispatch, useAppSelector } from 'app/store/storeHooks'; import { selectWorkflowMode, workflowModeChanged } from 'features/nodes/store/workflowLibrarySlice'; +import { useAutoLayoutContext } from 'features/ui/layouts/auto-layout-context'; +import { VIEWER_PANEL_ID, WORKSPACE_PANEL_ID } from 'features/ui/layouts/shared'; +import { setActiveTab } from 'features/ui/store/uiSlice'; import type { MouseEventHandler } from 'react'; import { memo, useCallback } from 'react'; import { useTranslation } from 'react-i18next'; @@ -10,21 +13,30 @@ export const WorkflowViewEditToggleButton = memo(() => { const dispatch = useAppDispatch(); const mode = useAppSelector(selectWorkflowMode); const { t } = useTranslation(); + const { focusPanel } = useAutoLayoutContext(); const onClickEdit = useCallback>( (e) => { e.stopPropagation(); + // Navigate to workflows tab and focus the Workflow Editor panel + dispatch(setActiveTab('workflows')); dispatch(workflowModeChanged('edit')); + // Focus the Workflow Editor panel + focusPanel(WORKSPACE_PANEL_ID); }, - [dispatch] + [dispatch, focusPanel] ); const onClickView = useCallback>( (e) => { e.stopPropagation(); + // Navigate to workflows tab and focus the Image Viewer panel + dispatch(setActiveTab('workflows')); dispatch(workflowModeChanged('view')); + // Focus the Image Viewer panel + focusPanel(VIEWER_PANEL_ID); }, - [dispatch] + [dispatch, focusPanel] ); if (mode === 'view') {