Fixes gallery closing on context menu

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.4150d00b.js"></script>
+  <script type="module" crossorigin src="./assets/index.35e26a9a.js"></script>
   <link rel="stylesheet" href="./assets/index.44f7d837.css">
 </head>
 

frontend/src/features/gallery/HoverableImage.tsx

@@ -7,7 +7,11 @@ import {
   useToast,
 } from '@chakra-ui/react';
 import { useAppDispatch, useAppSelector } from '../../app/store';
-import { setCurrentImage } from './gallerySlice';
+import {
+  setCurrentImage,
+  setShouldHoldGalleryOpen,
+  setShouldShowGallery,
+} from './gallerySlice';
 import { FaCheck, FaTrashAlt } from 'react-icons/fa';
 import DeleteImageModal from './DeleteImageModal';
 import { memo, useState } from 'react';
@@ -40,15 +44,16 @@ const memoEqualityCheck = (
  */
 const HoverableImage = memo((props: HoverableImageProps) => {
   const dispatch = useAppDispatch();
-  const { activeTabName, galleryImageObjectFit } = useAppSelector(hoverableImageSelector);
+  const { activeTabName, galleryImageObjectFit } = useAppSelector(
+    hoverableImageSelector
+  );
+  const { image, isSelected } = props;
+  const { url, uuid, metadata } = image;
 
   const [isHovered, setIsHovered] = useState<boolean>(false);
 
   const toast = useToast();
 
-  const { image, isSelected } = props;
-  const { url, uuid, metadata } = image;
-
   const handleMouseOver = () => setIsHovered(true);
 
   const handleMouseOut = () => setIsHovered(false);
@@ -137,7 +142,12 @@ const HoverableImage = memo((props: HoverableImageProps) => {
   const handleSelectImage = () => dispatch(setCurrentImage(image));
 
   return (
-    <ContextMenu.Root>
+    <ContextMenu.Root
+      onOpenChange={(open: boolean) => {
+        dispatch(setShouldHoldGalleryOpen(open));
+        dispatch(setShouldShowGallery(true));
+      }}
+    >
       <ContextMenu.Trigger>
         <Box
           position={'relative'}
@@ -180,7 +190,10 @@ const HoverableImage = memo((props: HoverableImageProps) => {
           )}
         </Box>
       </ContextMenu.Trigger>
-      <ContextMenu.Content className="hoverable-image-context-menu">
+      <ContextMenu.Content
+        className="hoverable-image-context-menu"
+        sticky={'always'}
+      >
         <ContextMenu.Item
           onClickCapture={handleUsePrompt}
           disabled={image?.metadata?.image?.prompt === undefined}

frontend/src/features/gallery/ImageGallery.tsx

@@ -1,7 +1,7 @@
 import { Button } from '@chakra-ui/button';
 import { NumberSize, Resizable, Size } from 're-resizable';
 
-import React, { ChangeEvent, useEffect, useRef, useState } from 'react';
+import { 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,
+  setShouldHoldGalleryOpen,
   setShouldPinGallery,
 } from './gallerySlice';
 import HoverableImage from './HoverableImage';
@@ -43,6 +44,7 @@ export default function ImageGallery() {
     galleryGridTemplateColumns,
     activeTabName,
     galleryImageObjectFit,
+    shouldHoldGalleryOpen,
   } = useAppSelector(imageGallerySelector);
 
   const [gallerySize, setGallerySize] = useState<Size>({
@@ -119,6 +121,10 @@ export default function ImageGallery() {
         galleryContainerRef.current ? galleryContainerRef.current.scrollTop : 0
       )
     );
+    if (!shouldHoldGalleryOpen) {
+      dispatch(setShouldHoldGalleryOpen(false));
+      setCloseGalleryTimer();
+    }
     dispatch(setShouldShowGallery(false));
   };
 
@@ -247,7 +253,7 @@ export default function ImageGallery() {
   return (
     <CSSTransition
       nodeRef={galleryRef}
-      in={shouldShowGallery}
+      in={shouldShowGallery || shouldHoldGalleryOpen}
       unmountOnExit
       timeout={200}
       classNames="image-gallery-area"
@@ -258,6 +264,7 @@ export default function ImageGallery() {
         ref={galleryRef}
         onMouseLeave={!shouldPinGallery ? setCloseGalleryTimer : undefined}
         onMouseEnter={!shouldPinGallery ? cancelCloseGalleryTimer : undefined}
+        onMouseOver={!shouldPinGallery ? cancelCloseGalleryTimer : undefined}
       >
         <Resizable
           minWidth={galleryMinSize.width}

frontend/src/features/gallery/gallerySlice.ts

@@ -18,6 +18,7 @@ export interface GalleryState {
   galleryScrollPosition: number;
   galleryImageMinimumWidth: number;
   galleryImageObjectFit: GalleryImageObjectFitType;
+  shouldHoldGalleryOpen: boolean;
 }
 
 const initialState: GalleryState = {
@@ -29,6 +30,7 @@ const initialState: GalleryState = {
   galleryScrollPosition: 0,
   galleryImageMinimumWidth: 64,
   galleryImageObjectFit: 'contain',
+  shouldHoldGalleryOpen: false,
 };
 
 export const gallerySlice = createSlice({
@@ -181,6 +183,9 @@ export const gallerySlice = createSlice({
     ) => {
       state.galleryImageObjectFit = action.payload;
     },
+    setShouldHoldGalleryOpen: (state, action: PayloadAction<boolean>) => {
+      state.shouldHoldGalleryOpen = action.payload;
+    },
   },
 });
 
@@ -198,6 +203,7 @@ export const {
   setGalleryScrollPosition,
   setGalleryImageMinimumWidth,
   setGalleryImageObjectFit,
+  setShouldHoldGalleryOpen,
 } = gallerySlice.actions;
 
 export default gallerySlice.reducer;

frontend/src/features/gallery/gallerySliceSelectors.ts

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

frontend/src/features/tabs/InvokeWorkarea.tsx

@@ -12,7 +12,7 @@ type InvokeWorkareaProps = {
 const InvokeWorkarea = (props: InvokeWorkareaProps) => {
   const { optionsPanel, className, children } = props;
 
-  const { shouldShowGallery } = useAppSelector(
+  const { shouldShowGallery, shouldHoldGalleryOpen } = useAppSelector(
     (state: RootState) => state.gallery
   );
 
@@ -27,7 +27,9 @@ const InvokeWorkarea = (props: InvokeWorkareaProps) => {
         <div className="workarea-content">{children}</div>
         <ImageGallery />
       </div>
-      {!shouldShowGallery && <ShowHideGalleryButton />}
+      {!(shouldShowGallery || shouldHoldGalleryOpen) && (
+        <ShowHideGalleryButton />
+      )}
     </div>
   );
 };