github/InvokeAI
1
1
Fork 0
mirror of https://github.com/invoke-ai/InvokeAI.git synced 2026-04-23 03:00:31 -04:00
Code Issues Packages Projects Releases Wiki Activity

feat(ui): improved automatic tab/panel switching on user actions

Browse Source
This commit is contained in:
psychedelicious
2025-07-04 19:14:39 +10:00
parent f2426c3ab2
commit e73150c3e6
9 changed files with 87 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
invokeai/frontend/web/src/features/workflowLibrary/components/NewWorkflowConfirmationAlertDialog.tsx
View File

@@ -7,6 +7,8 @@ import { nodeEditorReset } from 'features/nodes/store/nodesSlice';
import { useWorkflowLibraryModal } from 'features/nodes/store/workflowLibraryModal';
import { workflowModeChanged } from 'features/nodes/store/workflowLibrarySlice';
import { toast } from 'features/toast/toast';
import { navigationApi } from 'features/ui/layouts/navigation-api';
import { WORKSPACE_PANEL_ID } from 'features/ui/layouts/shared';
import { memo, useCallback } from 'react';
import { useTranslation } from 'react-i18next';
@@ -24,6 +26,8 @@ export const useNewWorkflow = () => {
dispatch(workflowModeChanged('edit'));
workflowLibraryModal.close();
navigationApi.focusPanel('workflows', WORKSPACE_PANEL_ID);
toast({
id: 'NEW_WORKFLOW_CREATED',
title: t('workflows.newWorkflowCreated'),

16
invokeai/frontend/web/src/features/workflowLibrary/hooks/useValidateAndLoadWorkflow.ts
View File

@@ -1,14 +1,16 @@
import { logger } from 'app/logging/logger';
import { useAppDispatch } from 'app/store/storeHooks';
import { getIsFormEmpty } from 'features/nodes/components/sidePanel/builder/form-manipulation';
import { $nodeExecutionStates } from 'features/nodes/hooks/useNodeExecutionState';
import { $templates, workflowLoaded } from 'features/nodes/store/nodesSlice';
import { $needsFit } from 'features/nodes/store/reactFlowInstance';
import { workflowModeChanged } from 'features/nodes/store/workflowLibrarySlice';
import { WorkflowMigrationError, WorkflowVersionError } from 'features/nodes/types/error';
import type { WorkflowV3 } from 'features/nodes/types/workflow';
import { validateWorkflow } from 'features/nodes/util/workflow/validateWorkflow';
import { toast } from 'features/toast/toast';
import { navigationApi } from 'features/ui/layouts/navigation-api';
import { WORKSPACE_PANEL_ID } from 'features/ui/layouts/shared';
import { VIEWER_PANEL_ID, WORKSPACE_PANEL_ID } from 'features/ui/layouts/shared';
import { useCallback } from 'react';
import { useTranslation } from 'react-i18next';
import { serializeError } from 'serialize-error';
@@ -49,7 +51,6 @@ export const useValidateAndLoadWorkflow = () => {
origin: 'file' | 'image' | 'object' | 'library'
): Promise<WorkflowV3 | null> => {
try {
await navigationApi.focusPanel('workflows', WORKSPACE_PANEL_ID);
const templates = $templates.get();
const { workflow, warnings } = await validateWorkflow({
workflow: unvalidatedWorkflow,
@@ -68,6 +69,17 @@ export const useValidateAndLoadWorkflow = () => {
$nodeExecutionStates.set({});
dispatch(workflowLoaded(workflow));
// If the form is empty, assume the user is editing a new workflow.
if (getIsFormEmpty(workflow.form)) {
dispatch(workflowModeChanged('edit'));
navigationApi.focusPanel('workflows', WORKSPACE_PANEL_ID);
} else {
// Else assume they want to use the linear view of the workflow.
dispatch(workflowModeChanged('view'));
navigationApi.focusPanel('workflows', VIEWER_PANEL_ID);
}
if (!warnings.length) {
toast({
id: 'WORKFLOW_LOADED',