feat(ui): switch to viewer/canvas on invoke

invokeai/frontend/web/src/features/gallery/components/ImageGrid/GalleryImage.tsx

@@ -17,6 +17,7 @@ import { GalleryImageHoverIcons } from 'features/gallery/components/ImageGrid/Ga
 import { getGalleryImageDataTestId } from 'features/gallery/components/ImageGrid/getGalleryImageDataTestId';
 import { imageToCompareChanged, selectGallerySlice } from 'features/gallery/store/gallerySlice';
 import { useAutoLayoutContext } from 'features/ui/layouts/auto-layout-context';
+import { VIEWER_PANEL_ID } from 'features/ui/layouts/shared';
 import type { MouseEventHandler } from 'react';
 import { memo, useCallback, useEffect, useId, useMemo, useRef, useState } from 'react';
 import type { ImageDTO } from 'services/api/types';
@@ -205,7 +206,7 @@ export const GalleryImage = memo(({ imageDTO }: Props) => {
 
   const onDoubleClick = useCallback<MouseEventHandler<HTMLDivElement>>(() => {
     store.dispatch(imageToCompareChanged(null));
-    autoLayoutContext.focusImageViewer();
+    autoLayoutContext.focusPanel(VIEWER_PANEL_ID);
   }, [autoLayoutContext, store]);
 
   const dataTestId = useMemo(() => getGalleryImageDataTestId(imageDTO.image_name), [imageDTO.image_name]);

invokeai/frontend/web/src/features/gallery/components/ImageGrid/GalleryImageOpenInViewerIconButton.tsx

@@ -2,6 +2,7 @@ import { useAppDispatch } from 'app/store/storeHooks';
 import { DndImageIcon } from 'features/dnd/DndImageIcon';
 import { imageSelected, imageToCompareChanged } from 'features/gallery/store/gallerySlice';
 import { useAutoLayoutContext } from 'features/ui/layouts/auto-layout-context';
+import { VIEWER_PANEL_ID } from 'features/ui/layouts/shared';
 import { memo, useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
 import { PiArrowsOutBold } from 'react-icons/pi';
@@ -13,14 +14,14 @@ type Props = {
 
 export const GalleryImageOpenInViewerIconButton = memo(({ imageDTO }: Props) => {
   const dispatch = useAppDispatch();
-  const { focusImageViewer } = useAutoLayoutContext();
+  const { focusPanel } = useAutoLayoutContext();
   const { t } = useTranslation();
 
   const onClick = useCallback(() => {
     dispatch(imageToCompareChanged(null));
     dispatch(imageSelected(imageDTO));
-    focusImageViewer();
-  }, [dispatch, focusImageViewer, imageDTO]);
+    focusPanel(VIEWER_PANEL_ID);
+  }, [dispatch, focusPanel, imageDTO]);
 
   return (
     <DndImageIcon

invokeai/frontend/web/src/features/queue/hooks/useInvoke.ts

@@ -8,6 +8,8 @@ import { parseify } from 'common/util/serialize';
 import { useIsWorkflowEditorLocked } from 'features/nodes/hooks/useIsWorkflowEditorLocked';
 import { useEnqueueWorkflows } from 'features/queue/hooks/useEnqueueWorkflows';
 import { $isReadyToEnqueue } from 'features/queue/store/readiness';
+import { useAutoLayoutContextSafe } from 'features/ui/layouts/auto-layout-context';
+import { VIEWER_PANEL_ID, WORKSPACE_PANEL_ID } from 'features/ui/layouts/shared';
 import { selectActiveTab } from 'features/ui/store/uiSelectors';
 import { useCallback } from 'react';
 import { serializeError } from 'serialize-error';
@@ -17,6 +19,7 @@ const log = logger('generation');
 
 export const useInvoke = () => {
   const dispatch = useAppDispatch();
+  const ctx = useAutoLayoutContextSafe();
   const tabName = useAppSelector(selectActiveTab);
   const isReady = useStore($isReadyToEnqueue);
   const isLocked = useIsWorkflowEditorLocked();
@@ -56,11 +59,21 @@ export const useInvoke = () => {
 
   const enqueueBack = useCallback(() => {
     enqueue(false, false);
-  }, [enqueue]);
+    if (tabName === 'generate' || tabName === 'workflows' || tabName === 'upscaling') {
+      ctx?.focusPanel(VIEWER_PANEL_ID);
+    } else if (tabName === 'canvas') {
+      ctx?.focusPanel(WORKSPACE_PANEL_ID);
+    }
+  }, [ctx, enqueue, tabName]);
 
   const enqueueFront = useCallback(() => {
     enqueue(true, false);
-  }, [enqueue]);
+    if (tabName === 'generate' || tabName === 'workflows' || tabName === 'upscaling') {
+      ctx?.focusPanel(VIEWER_PANEL_ID);
+    } else if (tabName === 'canvas') {
+      ctx?.focusPanel(WORKSPACE_PANEL_ID);
+    }
+  }, [ctx, enqueue, tabName]);
 
   return { enqueueBack, enqueueFront, isLoading, isDisabled: !isReady || isLocked, enqueue };
 };

invokeai/frontend/web/src/features/ui/layouts/auto-layout-context.tsx

@@ -5,20 +5,14 @@ import { atom } from 'nanostores';
 import type { PropsWithChildren } from 'react';
 import { createContext, memo, useCallback, useContext, useMemo, useState } from 'react';
 
-import {
-  LEFT_PANEL_ID,
-  LEFT_PANEL_MIN_SIZE_PX,
-  RIGHT_PANEL_ID,
-  RIGHT_PANEL_MIN_SIZE_PX,
-  VIEWER_PANEL_ID,
-} from './shared';
+import { LEFT_PANEL_ID, LEFT_PANEL_MIN_SIZE_PX, RIGHT_PANEL_ID, RIGHT_PANEL_MIN_SIZE_PX } from './shared';
 
 type AutoLayoutContextValue = {
   toggleLeftPanel: () => void;
   toggleRightPanel: () => void;
   toggleBothPanels: () => void;
   resetPanels: () => void;
-  focusImageViewer: () => void;
+  focusPanel: (id: string) => void;
   _$rootPanelApi: WritableAtom<GridviewApi | null>;
   _$leftPanelApi: WritableAtom<GridviewApi | null>;
   _$centerPanelApi: WritableAtom<DockviewApi | null>;
@@ -116,13 +110,16 @@ export const AutoLayoutProvider = (props: PropsWithChildren<{ $rootApi: Writable
     expandPanel(api, RIGHT_PANEL_ID, RIGHT_PANEL_MIN_SIZE_PX);
   }, [$rootApi]);
 
-  const focusImageViewer = useCallback(() => {
-    const api = $centerApi.get();
-    if (!api) {
-      return;
-    }
-    activatePanel(api, VIEWER_PANEL_ID);
-  }, [$centerApi]);
+  const focusPanel = useCallback(
+    (id: string) => {
+      const api = $centerApi.get();
+      if (!api) {
+        return;
+      }
+      activatePanel(api, id);
+    },
+    [$centerApi]
+  );
 
   const value = useMemo<AutoLayoutContextValue>(
     () => ({
@@ -130,7 +127,7 @@ export const AutoLayoutProvider = (props: PropsWithChildren<{ $rootApi: Writable
       toggleRightPanel,
       toggleBothPanels,
       resetPanels,
-      focusImageViewer,
+      focusPanel,
       _$rootPanelApi: $rootApi,
       _$leftPanelApi: $leftApi,
       _$centerPanelApi: $centerApi,
@@ -141,7 +138,7 @@ export const AutoLayoutProvider = (props: PropsWithChildren<{ $rootApi: Writable
       $leftApi,
       $rightApi,
       $rootApi,
-      focusImageViewer,
+      focusPanel,
       resetPanels,
       toggleBothPanels,
       toggleLeftPanel,
@@ -159,6 +156,11 @@ export const useAutoLayoutContext = () => {
   return value;
 };
 
+export const useAutoLayoutContextSafe = () => {
+  const value = useContext(AutoLayoutContext);
+  return value;
+};
+
 export const PanelHotkeysLogical = memo(() => {
   const { toggleBothPanels, resetPanels, toggleLeftPanel, toggleRightPanel } = useAutoLayoutContext();
   useRegisteredHotkeys({