Add option to save all staging images to gallery in canvas mode

Co-authored-by: kent <kent@invoke.ai>

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

@@ -0,0 +1,23 @@
+import { Alert, AlertIcon, AlertTitle } from '@invoke-ai/ui-library';
+import { useAppSelector } from 'app/store/storeHooks';
+import { selectSaveAllStagingImagesToGallery } from 'features/controlLayers/store/canvasSettingsSlice';
+import { memo } from 'react';
+import { useTranslation } from 'react-i18next';
+
+export const CanvasAlertsSaveAllStagingImagesToGallery = memo(() => {
+  const { t } = useTranslation();
+  const saveAllStagingImagesToGallery = useAppSelector(selectSaveAllStagingImagesToGallery);
+
+  if (!saveAllStagingImagesToGallery) {
+    return null;
+  }
+
+  return (
+    <Alert status="info" borderRadius="base" fontSize="sm" shadow="md" w="fit-content">
+      <AlertIcon />
+      <AlertTitle>{t('controlLayers.settings.saveAllStagingImagesToGallery.alert')}</AlertTitle>
+    </Alert>
+  );
+});
+
+CanvasAlertsSaveAllStagingImagesToGallery.displayName = 'CanvasAlertsSaveAllStagingImagesToGallery';

invokeai/frontend/web/src/features/controlLayers/components/Settings/CanvasSettingsPopover.tsx

@@ -26,6 +26,7 @@ import { CanvasSettingsPreserveMaskCheckbox } from 'features/controlLayers/compo
 import { CanvasSettingsPressureSensitivityCheckbox } from 'features/controlLayers/components/Settings/CanvasSettingsPressureSensitivity';
 import { CanvasSettingsRecalculateRectsButton } from 'features/controlLayers/components/Settings/CanvasSettingsRecalculateRectsButton';
 import { CanvasSettingsRuleOfThirdsSwitch } from 'features/controlLayers/components/Settings/CanvasSettingsRuleOfThirdsGuideSwitch';
+import { CanvasSettingsSaveAllStagingImagesToGalleryCheckbox } from 'features/controlLayers/components/Settings/CanvasSettingsSaveAllStagingImagesToGalleryCheckbox';
 import { CanvasSettingsShowHUDSwitch } from 'features/controlLayers/components/Settings/CanvasSettingsShowHUDSwitch';
 import { CanvasSettingsShowProgressOnCanvas } from 'features/controlLayers/components/Settings/CanvasSettingsShowProgressOnCanvasSwitch';
 import { memo } from 'react';
@@ -61,6 +62,7 @@ export const CanvasSettingsPopover = memo(() => {
               <CanvasSettingsPreserveMaskCheckbox />
               <CanvasSettingsClipToBboxCheckbox />
               <CanvasSettingsOutputOnlyMaskedRegionsCheckbox />
+              <CanvasSettingsSaveAllStagingImagesToGalleryCheckbox />
             </Flex>
 
             <Divider />

invokeai/frontend/web/src/features/controlLayers/components/Settings/CanvasSettingsSaveAllStagingImagesToGalleryCheckbox.tsx

@@ -0,0 +1,25 @@
+import { Checkbox, FormControl, FormLabel } from '@invoke-ai/ui-library';
+import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
+import {
+  selectSaveAllStagingImagesToGallery,
+  settingsSaveAllStagingImagesToGalleryToggled,
+} from 'features/controlLayers/store/canvasSettingsSlice';
+import { memo, useCallback } from 'react';
+import { useTranslation } from 'react-i18next';
+
+export const CanvasSettingsSaveAllStagingImagesToGalleryCheckbox = memo(() => {
+  const { t } = useTranslation();
+  const dispatch = useAppDispatch();
+  const saveAllStagingImagesToGallery = useAppSelector(selectSaveAllStagingImagesToGallery);
+  const onChange = useCallback(() => {
+    dispatch(settingsSaveAllStagingImagesToGalleryToggled());
+  }, [dispatch]);
+  return (
+    <FormControl w="full">
+      <FormLabel flexGrow={1}>{t('controlLayers.saveAllStagingImagesToGallery')}</FormLabel>
+      <Checkbox isChecked={saveAllStagingImagesToGallery} onChange={onChange} />
+    </FormControl>
+  );
+});
+
+CanvasSettingsSaveAllStagingImagesToGalleryCheckbox.displayName = 'CanvasSettingsSaveAllStagingImagesToGalleryCheckbox';

invokeai/frontend/web/src/features/controlLayers/store/canvasSettingsSlice.ts

@@ -77,6 +77,10 @@ type CanvasSettingsState = {
    * Whether to show the rule of thirds composition guide overlay on the canvas.
    */
   ruleOfThirds: boolean;
+  /**
+   * Whether to save all staging images to the gallery instead of keeping them as intermediate images.
+   */
+  saveAllStagingImagesToGallery: boolean;
 };
 
 const initialState: CanvasSettingsState = {
@@ -97,6 +101,7 @@ const initialState: CanvasSettingsState = {
   isolatedLayerPreview: true,
   pressureSensitivity: true,
   ruleOfThirds: false,
+  saveAllStagingImagesToGallery: false,
 };
 
 export const canvasSettingsSlice = createSlice({
@@ -154,6 +159,9 @@ export const canvasSettingsSlice = createSlice({
     settingsRuleOfThirdsToggled: (state) => {
       state.ruleOfThirds = !state.ruleOfThirds;
     },
+    settingsSaveAllStagingImagesToGalleryToggled: (state) => {
+      state.saveAllStagingImagesToGallery = !state.saveAllStagingImagesToGallery;
+    },
   },
 });
 
@@ -175,6 +183,7 @@ export const {
   settingsIsolatedLayerPreviewToggled,
   settingsPressureSensitivityToggled,
   settingsRuleOfThirdsToggled,
+  settingsSaveAllStagingImagesToGalleryToggled,
 } = canvasSettingsSlice.actions;
 
 /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
@@ -209,3 +218,6 @@ export const selectIsolatedStagingPreview = createCanvasSettingsSelector((settin
 export const selectIsolatedLayerPreview = createCanvasSettingsSelector((settings) => settings.isolatedLayerPreview);
 export const selectPressureSensitivity = createCanvasSettingsSelector((settings) => settings.pressureSensitivity);
 export const selectRuleOfThirds = createCanvasSettingsSelector((settings) => settings.ruleOfThirds);
+export const selectSaveAllStagingImagesToGallery = createCanvasSettingsSelector(
+  (settings) => settings.saveAllStagingImagesToGallery
+);