feat(ui): add actions for reset canvas layers / generation settings to session menus

Author: psychedelicious

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

@@ -1787,6 +1787,8 @@
         "newGallerySessionDesc": "This will clear the canvas and all settings except for your model selection. Generations will be sent to the gallery.",
         "newCanvasSession": "New Canvas Session",
         "newCanvasSessionDesc": "This will clear the canvas and all settings except for your model selection. Generations will be staged on the canvas.",
+        "resetCanvasLayers": "Reset Canvas Layers",
+        "resetGenerationSettings": "Reset Generation Settings",
         "replaceCurrent": "Replace Current",
         "controlLayerEmptyState": "<UploadButton>Upload an image</UploadButton>, drag an image from the <GalleryButton>gallery</GalleryButton> onto this layer, or draw on the canvas to get started.",
         "controlMode": {

invokeai/frontend/web/src/common/components/SessionMenuItems.tsx

@@ -0,0 +1,42 @@
+import { MenuItem } from '@invoke-ai/ui-library';
+import { useAppDispatch } from 'app/store/storeHooks';
+import {
+  useNewCanvasSession,
+  useNewGallerySession,
+} from 'features/controlLayers/components/NewSessionConfirmationAlertDialog';
+import { canvasReset } from 'features/controlLayers/store/actions';
+import { paramsReset } from 'features/controlLayers/store/paramsSlice';
+import { memo, useCallback } from 'react';
+import { useTranslation } from 'react-i18next';
+import { PiArrowsCounterClockwiseBold, PiFilePlusBold } from 'react-icons/pi';
+
+export const SessionMenuItems = memo(() => {
+  const { t } = useTranslation();
+  const dispatch = useAppDispatch();
+  const { newGallerySessionWithDialog } = useNewGallerySession();
+  const { newCanvasSessionWithDialog } = useNewCanvasSession();
+  const resetCanvasLayers = useCallback(() => {
+    dispatch(canvasReset());
+  }, [dispatch]);
+  const resetGenerationSettings = useCallback(() => {
+    dispatch(paramsReset());
+  }, [dispatch]);
+  return (
+    <>
+      <MenuItem icon={<PiFilePlusBold />} onClick={newGallerySessionWithDialog}>
+        {t('controlLayers.newGallerySession')}
+      </MenuItem>
+      <MenuItem icon={<PiFilePlusBold />} onClick={newCanvasSessionWithDialog}>
+        {t('controlLayers.newCanvasSession')}
+      </MenuItem>
+      <MenuItem icon={<PiArrowsCounterClockwiseBold />} onClick={resetCanvasLayers}>
+        {t('controlLayers.resetCanvasLayers')}
+      </MenuItem>
+      <MenuItem icon={<PiArrowsCounterClockwiseBold />} onClick={resetGenerationSettings}>
+        {t('controlLayers.resetGenerationSettings')}
+      </MenuItem>
+    </>
+  );
+});
+
+SessionMenuItems.displayName = 'SessionMenuItems';

invokeai/frontend/web/src/features/controlLayers/components/Toolbar/CanvasToolbarNewSessionMenuButton.tsx

@@ -1,16 +1,11 @@
-import { IconButton, Menu, MenuButton, MenuItem, MenuList } from '@invoke-ai/ui-library';
-import {
-  useNewCanvasSession,
-  useNewGallerySession,
-} from 'features/controlLayers/components/NewSessionConfirmationAlertDialog';
+import { IconButton, Menu, MenuButton, MenuList } from '@invoke-ai/ui-library';
+import { SessionMenuItems } from 'common/components/SessionMenuItems';
 import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
-import { PiFilePlusBold, PiImageBold, PiPaintBrushBold } from 'react-icons/pi';
+import { PiFilePlusBold } from 'react-icons/pi';
 
 export const CanvasToolbarNewSessionMenuButton = memo(() => {
   const { t } = useTranslation();
-  const { newGallerySessionWithDialog } = useNewGallerySession();
-  const { newCanvasSessionWithDialog } = useNewCanvasSession();
   return (
     <Menu placement="bottom-end">
       <MenuButton
@@ -21,12 +16,7 @@ export const CanvasToolbarNewSessionMenuButton = memo(() => {
         alignSelf="stretch"
       />
       <MenuList>
-        <MenuItem icon={<PiImageBold />} onClick={newGallerySessionWithDialog}>
-          {t('controlLayers.newGallerySession')}
-        </MenuItem>
-        <MenuItem icon={<PiPaintBrushBold />} onClick={newCanvasSessionWithDialog}>
-          {t('controlLayers.newCanvasSession')}
-        </MenuItem>
+        <SessionMenuItems />
       </MenuList>
     </Menu>
   );

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

@@ -273,24 +273,27 @@ export const paramsSlice = createSlice({
     setCanvasCoherenceMinDenoise: (state, action: PayloadAction<number>) => {
       state.canvasCoherenceMinDenoise = action.payload;
     },
+    paramsReset: (state) => resetState(state),
   },
   extraReducers(builder) {
-    builder.addMatcher(newSessionRequested, (state) => {
-      // When a new session is requested, we need to keep the current model selections, plus dependent state
-      // like VAE precision. Everything else gets reset to default.
-      const newState = deepClone(initialState);
-      newState.model = state.model;
-      newState.vae = state.vae;
-      newState.fluxVAE = state.fluxVAE;
-      newState.vaePrecision = state.vaePrecision;
-      newState.t5EncoderModel = state.t5EncoderModel;
-      newState.clipEmbedModel = state.clipEmbedModel;
-      newState.refinerModel = state.refinerModel;
-      return newState;
-    });
+    builder.addMatcher(newSessionRequested, (state) => resetState(state));
   },
 });
 
+const resetState = (state: ParamsState): ParamsState => {
+  // When a new session is requested, we need to keep the current model selections, plus dependent state
+  // like VAE precision. Everything else gets reset to default.
+  const newState = deepClone(initialState);
+  newState.model = state.model;
+  newState.vae = state.vae;
+  newState.fluxVAE = state.fluxVAE;
+  newState.vaePrecision = state.vaePrecision;
+  newState.t5EncoderModel = state.t5EncoderModel;
+  newState.clipEmbedModel = state.clipEmbedModel;
+  newState.refinerModel = state.refinerModel;
+  return newState;
+};
+
 export const {
   setInfillMethod,
   setInfillTileSize,
@@ -334,6 +337,7 @@ export const {
   setRefinerNegativeAestheticScore,
   setRefinerStart,
   modelChanged,
+  paramsReset,
 } = paramsSlice.actions;
 
 /* eslint-disable-next-line @typescript-eslint/no-explicit-any */

invokeai/frontend/web/src/features/queue/components/QueueActionsMenuButton.tsx

@@ -1,9 +1,6 @@
 import { IconButton, Menu, MenuButton, MenuGroup, MenuItem, MenuList } from '@invoke-ai/ui-library';
 import { useAppDispatch } from 'app/store/storeHooks';
-import {
-  useNewCanvasSession,
-  useNewGallerySession,
-} from 'features/controlLayers/components/NewSessionConfirmationAlertDialog';
+import { SessionMenuItems } from 'common/components/SessionMenuItems';
 import { useClearQueue } from 'features/queue/components/ClearQueueConfirmationAlertDialog';
 import { QueueCountBadge } from 'features/queue/components/QueueCountBadge';
 import { usePauseProcessor } from 'features/queue/hooks/usePauseProcessor';
@@ -12,25 +9,14 @@ import { useFeatureStatus } from 'features/system/hooks/useFeatureStatus';
 import { setActiveTab } from 'features/ui/store/uiSlice';
 import { memo, useCallback, useRef } from 'react';
 import { useTranslation } from 'react-i18next';
-import {
-  PiImageBold,
-  PiListBold,
-  PiPaintBrushBold,
-  PiPauseFill,
-  PiPlayFill,
-  PiQueueBold,
-  PiTrashSimpleBold,
-  PiXBold,
-} from 'react-icons/pi';
+import { PiListBold, PiPauseFill, PiPlayFill, PiQueueBold, PiTrashSimpleBold, PiXBold } from 'react-icons/pi';
 
 export const QueueActionsMenuButton = memo(() => {
   const ref = useRef<HTMLDivElement>(null);
   const dispatch = useAppDispatch();
   const { t } = useTranslation();
   const isPauseEnabled = useFeatureStatus('pauseQueue');
   const isResumeEnabled = useFeatureStatus('resumeQueue');
-  const { newGallerySessionWithDialog } = useNewGallerySession();
-  const { newCanvasSessionWithDialog } = useNewCanvasSession();
   const clearQueue = useClearQueue();
   const {
     resumeProcessor,
@@ -52,12 +38,7 @@ export const QueueActionsMenuButton = memo(() => {
         <MenuButton ref={ref} as={IconButton} size="lg" aria-label="Queue Actions Menu" icon={<PiListBold />} />
         <MenuList>
           <MenuGroup title={t('common.new')}>
-            <MenuItem icon={<PiImageBold />} onClick={newGallerySessionWithDialog}>
-              {t('controlLayers.newGallerySession')}
-            </MenuItem>
-            <MenuItem icon={<PiPaintBrushBold />} onClick={newCanvasSessionWithDialog}>
-              {t('controlLayers.newCanvasSession')}
-            </MenuItem>
+            <SessionMenuItems />
           </MenuGroup>
           <MenuGroup title={t('queue.queue')}>
             <MenuItem