Refactors gallery resizing, persists width

frontend/src/app/store.ts

@@ -59,6 +59,7 @@ const galleryPersistConfig = {
   key: 'gallery',
   storage,
   whitelist: [
+    'galleryWidth',
     'shouldPinGallery',
     'shouldShowGallery',
     'galleryScrollPosition',

frontend/src/features/gallery/ImageGallery.scss

@@ -52,9 +52,15 @@
 
     .image-gallery-header {
       display: flex;
-      justify-content: end;
       align-items: center;
       column-gap: 0.5rem;
+      justify-content: space-between;
+
+      div {
+        display: flex;
+        column-gap: 0.5rem;
+        column-gap: 0.5rem;
+      }
 
       .image-gallery-icon-btn {
         background-color: var(--btn-load-more) !important;

frontend/src/features/gallery/ImageGallery.tsx

@@ -15,6 +15,7 @@ import {
   setGalleryImageMinimumWidth,
   setGalleryImageObjectFit,
   setGalleryScrollPosition,
+  setGalleryWidth,
   setShouldAutoSwitchToNewImages,
   setShouldHoldGalleryOpen,
   setShouldPinGallery,
@@ -33,6 +34,8 @@ import IAICheckbox from '../../common/components/IAICheckbox';
 import { setNeedsCache } from '../tabs/Inpainting/inpaintingSlice';
 import _ from 'lodash';
 
+const GALLERY_SHOW_BUTTONS_MIN_WIDTH = 320;
+
 export default function ImageGallery() {
   const dispatch = useAppDispatch();
   const toast = useToast();
@@ -51,71 +54,39 @@ export default function ImageGallery() {
     shouldHoldGalleryOpen,
     shouldAutoSwitchToNewImages,
     areMoreImagesAvailable,
+    galleryWidth,
   } = useAppSelector(imageGallerySelector);
 
-  const [gallerySize, setGallerySize] = useState<Size>({
+  const [galleryMinWidth, setGalleryMinWidth] = useState<number>(300);
-    width: '300',
+  const [galleryMaxWidth, setGalleryMaxWidth] = useState<number>(590);
-    height: '100%',
-  });
 
-  const [galleryMaxSize, setGalleryMaxSize] = useState<Size>({
+  const [shouldShowButtons, setShouldShowButtons] = useState<boolean>(
-    width: '590', // keep max at 590 for any tab
+    galleryWidth >= GALLERY_SHOW_BUTTONS_MIN_WIDTH
-    height: '100%',
+  );
-  });
-
-  const [galleryMinSize, setGalleryMinSize] = useState<Size>({
-    width: '300', // keep max at 590 for any tab
-    height: '100%',
-  });
-
-  console.log(gallerySize, galleryMaxSize, galleryMinSize);
 
   useEffect(() => {
-    if (activeTabName === 'inpainting' && shouldPinGallery) {
+    if (!shouldPinGallery) return;
-      setGalleryMinSize((prevSize) => {
+
-        return { ...prevSize, width: 220 };
+    if (activeTabName === 'inpainting') {
-      });
+      dispatch(setGalleryWidth(220));
-      setGalleryMaxSize((prevSize) => {
+      setGalleryMinWidth(220);
-        return { ...prevSize, width: 220 };
+      setGalleryMaxWidth(220);
-      });
+    } else if (activeTabName === 'img2img') {
-      setGallerySize((prevSize) => {
+      dispatch(
-        return {
+        setGalleryWidth(Math.min(Math.max(Number(galleryWidth), 0), 490))
-          ...prevSize,
+      );
-          width: Math.min(Math.max(Number(prevSize.width), 0), 220),
+      setGalleryMaxWidth(490);
-        };
-      });
-    } else if (activeTabName === 'img2img' && shouldPinGallery) {
-      setGalleryMaxSize((prevSize) => {
-        return { ...prevSize, width: 490, height: '100%' };
-      });
-      setGallerySize((prevSize) => {
-        return {
-          ...prevSize,
-          width: Math.min(Math.max(Number(prevSize.width), 0), 490),
-        };
-      });
     } else {
-      setGalleryMaxSize((prevSize) => {
+      dispatch(
-        return { ...prevSize, width: 590, height: '100%' };
+        setGalleryWidth(Math.min(Math.max(Number(galleryWidth), 0), 590))
-      });
+      );
-      setGallerySize((prevSize) => {
+      setGalleryMaxWidth(590);
-        return {
-          ...prevSize,
-          width: Math.min(Math.max(Number(prevSize.width), 0), 590),
-        };
-      });
     }
-  }, [activeTabName, shouldPinGallery]);
+  }, [dispatch, activeTabName, shouldPinGallery, galleryWidth]);
 
   useEffect(() => {
     if (!shouldPinGallery) {
-      setGalleryMaxSize((prevSize) => {
+      setGalleryMaxWidth(window.innerWidth);
-        // calculate vh in px
-        return {
-          ...prevSize,
-          width: window.innerWidth,
-        };
-      });
     }
   }, [shouldPinGallery]);
 
@@ -126,10 +97,6 @@ export default function ImageGallery() {
   const handleSetShouldPinGallery = () => {
     dispatch(setNeedsCache(true));
     dispatch(setShouldPinGallery(!shouldPinGallery));
-    setGallerySize({
-      ...gallerySize,
-      height: shouldPinGallery ? '100vh' : '100%',
-    });
   };
 
   const handleToggleGallery = () => {
@@ -300,9 +267,9 @@ export default function ImageGallery() {
         onMouseOver={!shouldPinGallery ? cancelCloseGalleryTimer : undefined}
       >
         <Resizable
-          minWidth={galleryMinSize.width}
+          minWidth={galleryMinWidth}
-          maxWidth={galleryMaxSize.width}
+          maxWidth={galleryMaxWidth}
-          maxHeight={'100%'}
+          // maxHeight={'100%'}
           className={'image-gallery-popup'}
           handleStyles={{ left: { width: '15px' } }}
           enable={{
@@ -315,17 +282,25 @@ export default function ImageGallery() {
             bottomLeft: false,
             topLeft: false,
           }}
-          size={gallerySize}
+          size={{
+            width: galleryWidth,
+            height: shouldPinGallery ? '100%' : '100vh',
+          }}
           onResizeStop={(
             _event: MouseEvent | TouchEvent,
             _direction: Direction,
             elementRef: HTMLElement,
             delta: NumberSize
           ) => {
-            setGallerySize({
+            dispatch(
-              width: _.clamp(Number(gallerySize.width) + delta.width, 0, Number(galleryMaxSize.width)),
+              setGalleryWidth(
-              height: '100%',
+                _.clamp(
-            });
+                  Number(galleryWidth) + delta.width,
+                  0,
+                  Number(galleryMaxWidth)
+                )
+              )
+            );
             elementRef.removeAttribute('data-resize-alert');
           }}
           onResize={(
@@ -335,18 +310,21 @@ export default function ImageGallery() {
             delta: NumberSize
           ) => {
             const newWidth = _.clamp(
-              Number(gallerySize.width) + delta.width,
+              Number(galleryWidth) + delta.width,
               0,
-              Number(galleryMaxSize.width)
+              Number(galleryMaxWidth)
             );
-            if (newWidth >= galleryMaxSize.width) {
+
+            if (newWidth >= 320 && !shouldShowButtons) {
+              setShouldShowButtons(true);
+            } else if (newWidth < 320 && shouldShowButtons) {
+              setShouldShowButtons(false);
+            }
+
+            if (newWidth >= galleryMaxWidth) {
               elementRef.setAttribute('data-resize-alert', 'true');
             } else {
               elementRef.removeAttribute('data-resize-alert');
-              setGallerySize({
-                width: newWidth,
-                height: '100%',
-              });
             }
           }}
         >
@@ -358,7 +336,7 @@ export default function ImageGallery() {
                 variant="solid"
                 className="image-gallery-category-btn-group"
               >
-                {gallerySize.width > 320 ? (
+                {shouldShowButtons ? (
                   <>
                     <Button
                       data-selected={currentCategory === 'result'}
@@ -393,6 +371,7 @@ export default function ImageGallery() {
                 )}
               </ButtonGroup>
             </div>
+            <div>
               <IAIPopover
                 trigger="hover"
                 hasArrow={activeTabName === 'inpainting' ? false : true}
@@ -451,7 +430,9 @@ export default function ImageGallery() {
                       label="Auto-Switch to New Images"
                       isChecked={shouldAutoSwitchToNewImages}
                       onChange={(e: ChangeEvent<HTMLInputElement>) =>
-                      dispatch(setShouldAutoSwitchToNewImages(e.target.checked))
+                        dispatch(
+                          setShouldAutoSwitchToNewImages(e.target.checked)
+                        )
                       }
                     />
                   </div>
@@ -476,6 +457,7 @@ export default function ImageGallery() {
                 icon={<MdClear />}
               />
             </div>
+          </div>
           <div className="image-gallery-container" ref={galleryContainerRef}>
             {images.length || areMoreImagesAvailable ? (
               <>

frontend/src/features/gallery/gallerySlice.ts

@@ -36,6 +36,7 @@ export interface GalleryState {
     result: Gallery;
   };
   currentCategory: GalleryCategory;
+  galleryWidth: number;
 }
 
 const initialState: GalleryState = {
@@ -62,6 +63,7 @@ const initialState: GalleryState = {
       areMoreImagesAvailable: true,
     },
   },
+  galleryWidth: 300,
 };
 
 export const gallerySlice = createSlice({
@@ -248,6 +250,9 @@ export const gallerySlice = createSlice({
     setCurrentCategory: (state, action: PayloadAction<GalleryCategory>) => {
       state.currentCategory = action.payload;
     },
+    setGalleryWidth: (state, action: PayloadAction<number>) => {
+      state.galleryWidth = action.payload;
+    },
   },
 });
 
@@ -268,6 +273,7 @@ export const {
   setShouldHoldGalleryOpen,
   setShouldAutoSwitchToNewImages,
   setCurrentCategory,
+  setGalleryWidth,
 } = gallerySlice.actions;
 
 export default gallerySlice.reducer;

frontend/src/features/gallery/gallerySliceSelectors.ts

@@ -18,6 +18,7 @@ export const imageGallerySelector = createSelector(
       galleryImageObjectFit,
       shouldHoldGalleryOpen,
       shouldAutoSwitchToNewImages,
+      galleryWidth,
     } = gallery;
 
     const { activeTab } = options;
@@ -37,6 +38,7 @@ export const imageGallerySelector = createSelector(
       areMoreImagesAvailable:
         categories[currentCategory].areMoreImagesAvailable,
       currentCategory,
+      galleryWidth,
     };
   }
 );