Adds gallery auto-switch toggle; ref #1272

frontend/dist/index.html

@@ -6,7 +6,7 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <title>InvokeAI - A Stable Diffusion Toolkit</title>
   <link rel="shortcut icon" type="icon" href="./assets/favicon.0d253ced.ico" />
-  <script type="module" crossorigin src="./assets/index.366cfb7e.js"></script>
+  <script type="module" crossorigin src="./assets/index.26f6b9c2.js"></script>
   <link rel="stylesheet" href="./assets/index.25bb1c01.css">
 </head>
 

frontend/src/features/gallery/ImageGallery.tsx

@@ -1,7 +1,7 @@
 import { Button } from '@chakra-ui/button';
 import { NumberSize, Resizable, Size } from 're-resizable';
 
-import { useEffect, useRef, useState } from 'react';
+import { ChangeEvent, useEffect, useRef, useState } from 'react';
 import { useHotkeys } from 'react-hotkeys-hook';
 import { MdClear, MdPhotoLibrary } from 'react-icons/md';
 import { BsPinAngleFill } from 'react-icons/bs';
@@ -14,6 +14,7 @@ import {
   setGalleryImageMinimumWidth,
   setGalleryImageObjectFit,
   setGalleryScrollPosition,
+  setShouldAutoSwitchToNewImages,
   setShouldHoldGalleryOpen,
   setShouldPinGallery,
 } from './gallerySlice';
@@ -45,6 +46,7 @@ export default function ImageGallery() {
     activeTabName,
     galleryImageObjectFit,
     shouldHoldGalleryOpen,
+    shouldAutoSwitchToNewImages,
   } = useAppSelector(imageGallerySelector);
 
   const [gallerySize, setGallerySize] = useState<Size>({
@@ -370,6 +372,15 @@ export default function ImageGallery() {
                     }
                   />
                 </div>
+                <div>
+                  <IAICheckbox
+                    label="Auto-Switch to New Images"
+                    isChecked={shouldAutoSwitchToNewImages}
+                    onChange={(e: ChangeEvent<HTMLInputElement>) =>
+                      dispatch(setShouldAutoSwitchToNewImages(e.target.checked))
+                    }
+                  />
+                </div>
               </div>
             </IAIPopover>
 

frontend/src/features/gallery/gallerySlice.ts

@@ -19,6 +19,7 @@ export interface GalleryState {
   galleryImageMinimumWidth: number;
   galleryImageObjectFit: GalleryImageObjectFitType;
   shouldHoldGalleryOpen: boolean;
+  shouldAutoSwitchToNewImages: boolean;
 }
 
 const initialState: GalleryState = {
@@ -31,6 +32,7 @@ const initialState: GalleryState = {
   galleryImageMinimumWidth: 64,
   galleryImageObjectFit: 'contain',
   shouldHoldGalleryOpen: false,
+  shouldAutoSwitchToNewImages: true,
 };
 
 export const gallerySlice = createSlice({
@@ -94,9 +96,11 @@ export const gallerySlice = createSlice({
       }
 
       state.images.unshift(newImage);
-      state.currentImageUuid = uuid;
+      if (state.shouldAutoSwitchToNewImages) {
+        state.currentImageUuid = uuid;
+        state.currentImage = newImage;
+      }
       state.intermediateImage = undefined;
-      state.currentImage = newImage;
       state.latest_mtime = mtime;
     },
     setIntermediateImage: (state, action: PayloadAction<InvokeAI.Image>) => {
@@ -186,6 +190,9 @@ export const gallerySlice = createSlice({
     setShouldHoldGalleryOpen: (state, action: PayloadAction<boolean>) => {
       state.shouldHoldGalleryOpen = action.payload;
     },
+    setShouldAutoSwitchToNewImages: (state, action: PayloadAction<boolean>) => {
+      state.shouldAutoSwitchToNewImages = action.payload;
+    },
   },
 });
 
@@ -204,6 +211,7 @@ export const {
   setGalleryImageMinimumWidth,
   setGalleryImageObjectFit,
   setShouldHoldGalleryOpen,
+  setShouldAutoSwitchToNewImages,
 } = gallerySlice.actions;
 
 export default gallerySlice.reducer;

frontend/src/features/gallery/gallerySliceSelectors.ts

@@ -17,6 +17,7 @@ export const imageGallerySelector = createSelector(
       galleryImageMinimumWidth,
       galleryImageObjectFit,
       shouldHoldGalleryOpen,
+      shouldAutoSwitchToNewImages
     } = gallery;
 
     const { activeTab } = options;
@@ -33,6 +34,7 @@ export const imageGallerySelector = createSelector(
       galleryGridTemplateColumns: `repeat(auto-fill, minmax(${galleryImageMinimumWidth}px, auto))`,
       activeTabName: tabMap[activeTab],
       shouldHoldGalleryOpen,
+      shouldAutoSwitchToNewImages
     };
   }
 );