feat(ui): make save all images to gallery option also bypass canvas

Author: psychedelicious

invokeai/frontend/web/public/locales/en.json

@@ -2332,7 +2332,7 @@
                 "alert": "Preserving Masked Region"
             },
             "saveAllImagesToGallery": {
-                "alert": "Saving All Images to Gallery"
+                "alert": "Sending images to Gallery, bypassing Canvas"
             },
             "isolatedStagingPreview": "Isolated Staging Preview",
             "isolatedPreview": "Isolated Preview",

invokeai/frontend/web/src/features/controlLayers/components/CanvasAlerts/CanvasAlertsSaveAllImagesToGallery.tsx

@@ -13,7 +13,7 @@ export const CanvasAlertsSaveAllImagesToGallery = memo(() => {
   }
 
   return (
-    <Alert status="info" borderRadius="base" fontSize="sm" shadow="md" w="fit-content">
+    <Alert status="warning" borderRadius="base" fontSize="sm" shadow="md" w="fit-content">
       <AlertIcon />
       <AlertTitle>{t('controlLayers.settings.saveAllImagesToGallery.alert')}</AlertTitle>
     </Alert>

invokeai/frontend/web/src/features/controlLayers/components/CanvasAlerts/CanvasAlertsSelectedEntityStatus.tsx

@@ -57,21 +57,21 @@ const CanvasAlertsSelectedEntityStatusContent = memo(({ entityIdentifier, adapte
   const alert = useMemo<AlertData | null>(() => {
     if (isFiltering) {
       return {
-        status: 'info',
+        status: 'warning',
         title: t('controlLayers.HUD.entityStatus.isFiltering', { title }),
       };
     }
 
     if (isTransforming) {
       return {
-        status: 'info',
+        status: 'warning',
         title: t('controlLayers.HUD.entityStatus.isTransforming', { title }),
       };
     }
 
     if (isEmpty) {
       return {
-        status: 'info',
+        status: 'warning',
         title: t('controlLayers.HUD.entityStatus.isEmpty', { title }),
       };
     }

invokeai/frontend/web/src/features/nodes/util/graph/graphBuilderUtils.ts

@@ -2,6 +2,7 @@ import { createSelector } from '@reduxjs/toolkit';
 import type { RootState } from 'app/store/store';
 import { getPrefixedId } from 'features/controlLayers/konva/util';
 import { selectSaveAllImagesToGallery } from 'features/controlLayers/store/canvasSettingsSlice';
+import { selectCanvasSessionId } from 'features/controlLayers/store/canvasStagingAreaSlice';
 import {
   selectImg2imgStrength,
   selectMainModelConfig,
@@ -42,9 +43,8 @@ export const getBoardField = (state: RootState): BoardField | undefined => {
  * - board
  */
 export const selectCanvasOutputFields = (state: RootState) => {
-  // Advanced session means working on canvas - images are not saved to gallery or added to a board.
-  // Simple session means working in YOLO mode - images are saved to gallery & board.
   const tab = selectActiveTab(state);
+  // This flag also has an effect on the canvas destination - see selectCanvasDestination below.
   const saveAllImagesToGallery = selectSaveAllImagesToGallery(state);
 
   // If we're on canvas and the save all images setting is enabled, save to gallery
@@ -59,6 +59,23 @@ export const selectCanvasOutputFields = (state: RootState) => {
   };
 };
 
+/**
+ * Select the destination to use for canvas queue items.
+ *
+ */
+export const selectCanvasDestination = (state: RootState) => {
+  // The canvas will stage images that have its session ID as the destination. When the user has enabled saving all
+  // images to gallery, we want to bypass the staging area. So we use 'canvas' as a generic destination. Images will
+  // go directly to the gallery.
+  //
+  // This flag also has an effect on the canvas output fields - see selectCanvasOutputFields above.
+  const saveAllImagesToGallery = selectSaveAllImagesToGallery(state);
+  if (saveAllImagesToGallery) {
+    return 'canvas';
+  }
+  return selectCanvasSessionId(state);
+};
+
 /**
  * Gets the prompts, modified for the active style preset.
  */

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

@@ -7,7 +7,6 @@ import { extractMessageFromAssertionError } from 'common/util/extractMessageFrom
 import { withResult, withResultAsync } from 'common/util/result';
 import { useCanvasManagerSafe } from 'features/controlLayers/contexts/CanvasManagerProviderGate';
 import type { CanvasManager } from 'features/controlLayers/konva/CanvasManager';
-import { selectCanvasSessionId } from 'features/controlLayers/store/canvasStagingAreaSlice';
 import { prepareLinearUIBatch } from 'features/nodes/util/graph/buildLinearBatchConfig';
 import { buildChatGPT4oGraph } from 'features/nodes/util/graph/generation/buildChatGPT4oGraph';
 import { buildCogView4Graph } from 'features/nodes/util/graph/generation/buildCogView4Graph';
@@ -18,6 +17,7 @@ import { buildImagen4Graph } from 'features/nodes/util/graph/generation/buildIma
 import { buildSD1Graph } from 'features/nodes/util/graph/generation/buildSD1Graph';
 import { buildSD3Graph } from 'features/nodes/util/graph/generation/buildSD3Graph';
 import { buildSDXLGraph } from 'features/nodes/util/graph/generation/buildSDXLGraph';
+import { selectCanvasDestination } from 'features/nodes/util/graph/graphBuilderUtils';
 import type { GraphBuilderArg } from 'features/nodes/util/graph/types';
 import { UnsupportedGenerationModeError } from 'features/nodes/util/graph/types';
 import { toast } from 'features/toast/toast';
@@ -36,7 +36,7 @@ const enqueueCanvas = async (store: AppStore, canvasManager: CanvasManager, prep
 
   const state = getState();
 
-  const destination = selectCanvasSessionId(state);
+  const destination = selectCanvasDestination(state);
 
   const buildGraphResult = await withResultAsync(async () => {
     const model = state.params.model;

invokeai/frontend/web/src/features/ui/layouts/CanvasWorkspacePanel.tsx

@@ -85,9 +85,9 @@ export const CanvasWorkspacePanel = memo(() => {
                 alignItems="flex-start"
               >
                 {showHUD && <CanvasHUD />}
+                <CanvasAlertsSaveAllImagesToGallery />
                 <CanvasAlertsSelectedEntityStatus />
                 <CanvasAlertsPreserveMask />
-                <CanvasAlertsSaveAllImagesToGallery />
                 <CanvasAlertsInvocationProgress />
               </Flex>
               <Flex position="absolute" top={1} insetInlineEnd={1}>