feat(ui): rework visibility conditions for image viewer

Author: psychedelicious

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

@@ -380,7 +380,7 @@
         "problemDeletingImagesDesc": "One or more images could not be deleted",
         "viewerImage": "Viewer Image",
         "compareImage": "Compare Image",
-        "selectForViewer": "Select for Viewer",
+        "openInViewer": "Open in Viewer",
         "selectForCompare": "Select for Compare",
         "selectAnImageToCompare": "Select an Image to Compare",
         "slider": "Slider",

invokeai/frontend/web/src/features/gallery/components/ImageViewer/CompareToolbar.tsx

@@ -7,6 +7,7 @@ import {
   imageToCompareChanged,
 } from 'features/gallery/store/gallerySlice';
 import { memo, useCallback } from 'react';
+import { useHotkeys } from 'react-hotkeys-hook';
 import { useTranslation } from 'react-i18next';
 import { PiArrowsOutBold, PiSwapBold, PiXBold } from 'react-icons/pi';
 
@@ -33,6 +34,7 @@ export const CompareToolbar = memo(() => {
   const exitCompare = useCallback(() => {
     dispatch(imageToCompareChanged(null));
   }, [dispatch]);
+  useHotkeys('esc', exitCompare, [exitCompare]);
 
   return (
     <Flex w="full" gap={2}>

invokeai/frontend/web/src/features/gallery/components/ImageViewer/ImageComparison.tsx

@@ -1,29 +1,22 @@
-import { createMemoizedSelector } from 'app/store/createMemoizedSelector';
 import { useAppSelector } from 'app/store/storeHooks';
 import { IAINoContentFallback } from 'common/components/IAIImageFallback';
 import type { Dimensions } from 'features/canvas/store/canvasTypes';
+import { selectComparisonImages } from 'features/gallery/components/ImageViewer/common';
 import { ImageComparisonHover } from 'features/gallery/components/ImageViewer/ImageComparisonHover';
 import { ImageComparisonSideBySide } from 'features/gallery/components/ImageViewer/ImageComparisonSideBySide';
 import { ImageComparisonSlider } from 'features/gallery/components/ImageViewer/ImageComparisonSlider';
-import { selectGallerySlice } from 'features/gallery/store/gallerySlice';
 import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { PiImagesBold } from 'react-icons/pi';
 
-const selector = createMemoizedSelector(selectGallerySlice, (gallerySlice) => {
-  const firstImage = gallerySlice.selection.slice(-1)[0] ?? null;
-  const secondImage = gallerySlice.imageToCompare;
-  return { firstImage, secondImage };
-});
-
 type Props = {
   containerDims: Dimensions;
 };
 
 export const ImageComparison = memo(({ containerDims }: Props) => {
   const { t } = useTranslation();
   const comparisonMode = useAppSelector((s) => s.gallery.comparisonMode);
-  const { firstImage, secondImage } = useAppSelector(selector);
+  const { firstImage, secondImage } = useAppSelector(selectComparisonImages);
 
   if (!firstImage || !secondImage) {
     // Should rarely/never happen - we don't render this component unless we have images to compare

invokeai/frontend/web/src/features/gallery/components/ImageViewer/ImageComparisonDroppable.tsx

@@ -1,17 +1,12 @@
 import { Flex } from '@invoke-ai/ui-library';
-import { createMemoizedSelector } from 'app/store/createMemoizedSelector';
 import { useAppSelector } from 'app/store/storeHooks';
 import IAIDroppable from 'common/components/IAIDroppable';
 import type { CurrentImageDropData, SelectForCompareDropData } from 'features/dnd/types';
-import { selectGallerySlice } from 'features/gallery/store/gallerySlice';
+import { useImageViewer } from 'features/gallery/components/ImageViewer/useImageViewer';
 import { memo, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 
-const selector = createMemoizedSelector(selectGallerySlice, (gallerySlice) => {
-  const firstImage = gallerySlice.selection.slice(-1)[0] ?? null;
-  const secondImage = gallerySlice.imageToCompare;
-  return { firstImage, secondImage };
-});
+import { selectComparisonImages } from './common';
 
 const setCurrentImageDropData: CurrentImageDropData = {
   id: 'current-image',
@@ -20,7 +15,8 @@ const setCurrentImageDropData: CurrentImageDropData = {
 
 export const ImageComparisonDroppable = memo(() => {
   const { t } = useTranslation();
-  const { firstImage, secondImage } = useAppSelector(selector);
+  const imageViewer = useImageViewer();
+  const { firstImage, secondImage } = useAppSelector(selectComparisonImages);
   const selectForCompareDropData = useMemo<SelectForCompareDropData>(
     () => ({
       id: 'image-comparison',
@@ -33,14 +29,17 @@ export const ImageComparisonDroppable = memo(() => {
     [firstImage?.image_name, secondImage?.image_name]
   );
 
+  if (!imageViewer.isOpen) {
+    return (
+      <Flex position="absolute" top={0} right={0} bottom={0} left={0} gap={2} pointerEvents="none">
+        <IAIDroppable data={setCurrentImageDropData} dropLabel={t('gallery.openInViewer')} />
+      </Flex>
+    );
+  }
+
   return (
     <Flex position="absolute" top={0} right={0} bottom={0} left={0} gap={2} pointerEvents="none">
-      <Flex position="relative" flex={1}>
-        <IAIDroppable data={setCurrentImageDropData} dropLabel={t('gallery.selectForViewer')} />
-      </Flex>
-      <Flex position="relative" flex={1}>
-        <IAIDroppable data={selectForCompareDropData} dropLabel={t('gallery.selectForCompare')} />
-      </Flex>
+      <IAIDroppable data={selectForCompareDropData} dropLabel={t('gallery.selectForCompare')} />
     </Flex>
   );
 });

invokeai/frontend/web/src/features/gallery/components/ImageViewer/ImageViewer.tsx

@@ -1,43 +1,17 @@
 import { Box, Flex } from '@invoke-ai/ui-library';
-import { useAppSelector } from 'app/store/storeHooks';
 import { CompareToolbar } from 'features/gallery/components/ImageViewer/CompareToolbar';
 import CurrentImagePreview from 'features/gallery/components/ImageViewer/CurrentImagePreview';
 import { ImageComparison } from 'features/gallery/components/ImageViewer/ImageComparison';
 import { ViewerToolbar } from 'features/gallery/components/ImageViewer/ViewerToolbar';
-import type { InvokeTabName } from 'features/ui/store/tabMap';
-import { activeTabNameSelector } from 'features/ui/store/uiSelectors';
-import { memo, useMemo } from 'react';
-import { useHotkeys } from 'react-hotkeys-hook';
+import { memo } from 'react';
 import { useMeasure } from 'react-use';
 
 import { useImageViewer } from './useImageViewer';
 
-const VIEWER_ENABLED_TABS: InvokeTabName[] = ['canvas', 'generation', 'workflows'];
-
 export const ImageViewer = memo(() => {
-  const { isOpen, onToggle, onClose } = useImageViewer();
-  const activeTabName = useAppSelector(activeTabNameSelector);
-  const workflowsMode = useAppSelector((s) => s.workflow.mode);
-  const isComparing = useAppSelector((s) => s.gallery.imageToCompare !== null);
-  const isViewerEnabled = useMemo(() => VIEWER_ENABLED_TABS.includes(activeTabName), [activeTabName]);
-  const shouldShowViewer = useMemo(() => {
-    if (activeTabName === 'workflows' && workflowsMode === 'view') {
-      return true;
-    }
-    if (!isViewerEnabled) {
-      return false;
-    }
-    return isOpen;
-  }, [isOpen, isViewerEnabled, workflowsMode, activeTabName]);
+  const imageViewer = useImageViewer();
   const [containerRef, containerDims] = useMeasure<HTMLDivElement>();
 
-  useHotkeys('z', onToggle, { enabled: isViewerEnabled }, [isViewerEnabled, onToggle]);
-  useHotkeys('esc', onClose, { enabled: isViewerEnabled }, [isViewerEnabled, onClose]);
-
-  if (!shouldShowViewer) {
-    return null;
-  }
-
   return (
     <Flex
       layerStyle="first"
@@ -53,11 +27,11 @@ export const ImageViewer = memo(() => {
       alignItems="center"
       justifyContent="center"
     >
-      {isComparing && <CompareToolbar />}
-      {!isComparing && <ViewerToolbar />}
+      {imageViewer.isComparing && <CompareToolbar />}
+      {!imageViewer.isComparing && <ViewerToolbar />}
       <Box ref={containerRef} w="full" h="full">
-        {!isComparing && <CurrentImagePreview />}
-        {isComparing && <ImageComparison containerDims={containerDims} />}
+        {!imageViewer.isComparing && <CurrentImagePreview />}
+        {imageViewer.isComparing && <ImageComparison containerDims={containerDims} />}
       </Box>
     </Flex>
   );

invokeai/frontend/web/src/features/gallery/components/ImageViewer/ViewerToggleMenu.tsx

@@ -9,33 +9,35 @@ import {
   PopoverTrigger,
   Text,
 } from '@invoke-ai/ui-library';
+import { useImageViewer } from 'features/gallery/components/ImageViewer/useImageViewer';
+import { useHotkeys } from 'react-hotkeys-hook';
 import { useTranslation } from 'react-i18next';
 import { PiCaretDownBold, PiCheckBold, PiEyeBold, PiPencilBold } from 'react-icons/pi';
 
-import { useImageViewer } from './useImageViewer';
-
 export const ViewerToggleMenu = () => {
   const { t } = useTranslation();
-  const { isOpen, onClose, onOpen } = useImageViewer();
+  const imageViewer = useImageViewer();
+  useHotkeys('z', imageViewer.onToggle, [imageViewer]);
+  useHotkeys('esc', imageViewer.onClose, [imageViewer]);
 
   return (
     <Popover isLazy>
       <PopoverTrigger>
-        <Button variant="outline" data-testid="toggle-viewer-menu-button">
+        <Button variant="outline" data-testid="toggle-viewer-menu-button" pointerEvents="auto">
           <Flex gap={3} w="full" alignItems="center">
-            {isOpen ? <Icon as={PiEyeBold} /> : <Icon as={PiPencilBold} />}
-            <Text fontSize="md">{isOpen ? t('common.viewing') : t('common.editing')}</Text>
+            {imageViewer.isOpen ? <Icon as={PiEyeBold} /> : <Icon as={PiPencilBold} />}
+            <Text fontSize="md">{imageViewer.isOpen ? t('common.viewing') : t('common.editing')}</Text>
             <Icon as={PiCaretDownBold} />
           </Flex>
         </Button>
       </PopoverTrigger>
-      <PopoverContent p={2}>
+      <PopoverContent p={2} pointerEvents="auto">
         <PopoverArrow />
         <PopoverBody>
           <Flex flexDir="column">
-            <Button onClick={onOpen} variant="ghost" h="auto" w="auto" p={2}>
+            <Button onClick={imageViewer.onOpen} variant="ghost" h="auto" w="auto" p={2}>
               <Flex gap={2} w="full">
-                <Icon as={PiCheckBold} visibility={isOpen ? 'visible' : 'hidden'} />
+                <Icon as={PiCheckBold} visibility={imageViewer.isOpen ? 'visible' : 'hidden'} />
                 <Flex flexDir="column" gap={2} alignItems="flex-start">
                   <Text fontWeight="semibold" color="base.100">
                     {t('common.viewing')}
@@ -46,9 +48,9 @@ export const ViewerToggleMenu = () => {
                 </Flex>
               </Flex>
             </Button>
-            <Button onClick={onClose} variant="ghost" h="auto" w="auto" p={2}>
+            <Button onClick={imageViewer.onClose} variant="ghost" h="auto" w="auto" p={2}>
               <Flex gap={2} w="full">
-                <Icon as={PiCheckBold} visibility={isOpen ? 'hidden' : 'visible'} />
+                <Icon as={PiCheckBold} visibility={imageViewer.isOpen ? 'hidden' : 'visible'} />
                 <Flex flexDir="column" gap={2} alignItems="flex-start">
                   <Text fontWeight="semibold" color="base.100">
                     {t('common.editing')}

invokeai/frontend/web/src/features/gallery/components/ImageViewer/ViewerToolbar.tsx

@@ -3,21 +3,13 @@ import { useAppSelector } from 'app/store/storeHooks';
 import { ToggleMetadataViewerButton } from 'features/gallery/components/ImageViewer/ToggleMetadataViewerButton';
 import { ToggleProgressButton } from 'features/gallery/components/ImageViewer/ToggleProgressButton';
 import { activeTabNameSelector } from 'features/ui/store/uiSelectors';
-import { memo, useMemo } from 'react';
+import { memo } from 'react';
 
 import CurrentImageButtons from './CurrentImageButtons';
 import { ViewerToggleMenu } from './ViewerToggleMenu';
 
 export const ViewerToolbar = memo(() => {
-  const workflowsMode = useAppSelector((s) => s.workflow.mode);
-  const activeTabName = useAppSelector(activeTabNameSelector);
-  const shouldShowToggleMenu = useMemo(() => {
-    if (activeTabName !== 'workflows') {
-      return true;
-    }
-    return workflowsMode === 'edit';
-  }, [workflowsMode, activeTabName]);
-
+  const tab = useAppSelector(activeTabNameSelector);
   return (
     <Flex w="full" gap={2}>
       <Flex flex={1} justifyContent="center">
@@ -31,7 +23,7 @@ export const ViewerToolbar = memo(() => {
       </Flex>
       <Flex flex={1} justifyContent="center">
         <Flex gap={2} marginInlineStart="auto">
-          {shouldShowToggleMenu && <ViewerToggleMenu />}
+          {tab !== 'workflows' && <ViewerToggleMenu />}
         </Flex>
       </Flex>
     </Flex>

invokeai/frontend/web/src/features/gallery/components/ImageViewer/common.ts

@@ -1,4 +1,6 @@
+import { createMemoizedSelector } from 'app/store/createMemoizedSelector';
 import type { Dimensions } from 'features/canvas/store/canvasTypes';
+import { selectGallerySlice } from 'features/gallery/store/gallerySlice';
 import type { ComparisonFit } from 'features/gallery/store/types';
 import type { ImageDTO } from 'services/api/types';
 
@@ -55,3 +57,8 @@ export const getSecondImageDims = (
 
   return { width, height };
 };
+export const selectComparisonImages = createMemoizedSelector(selectGallerySlice, (gallerySlice) => {
+  const firstImage = gallerySlice.selection.slice(-1)[0] ?? null;
+  const secondImage = gallerySlice.imageToCompare;
+  return { firstImage, secondImage };
+});

invokeai/frontend/web/src/features/gallery/components/ImageViewer/useImageViewer.ts

@@ -27,5 +27,5 @@ export const useImageViewer = () => {
     }
   }, [dispatch, isComparing, isOpen]);
 
-  return { isOpen, onOpen, onClose, onToggle };
+  return { isOpen, onOpen, onClose, onToggle, isComparing };
 };

invokeai/frontend/web/src/features/nodes/components/sidePanel/NodeEditorPanelGroup.tsx

@@ -1,9 +1,7 @@
 import 'reactflow/dist/style.css';
 
 import { Flex } from '@invoke-ai/ui-library';
-import { createMemoizedSelector } from 'app/store/createMemoizedSelector';
 import { useAppSelector } from 'app/store/storeHooks';
-import { selectWorkflowSlice } from 'features/nodes/store/workflowSlice';
 import QueueControls from 'features/queue/components/QueueControls';
 import ResizeHandle from 'features/ui/components/tabs/ResizeHandle';
 import { usePanelStorage } from 'features/ui/hooks/usePanelStorage';
@@ -21,14 +19,8 @@ import { WorkflowName } from './WorkflowName';
 
 const panelGroupStyles: CSSProperties = { height: '100%', width: '100%' };
 
-const selector = createMemoizedSelector(selectWorkflowSlice, (workflow) => {
-  return {
-    mode: workflow.mode,
-  };
-});
-
 const NodeEditorPanelGroup = () => {
-  const { mode } = useAppSelector(selector);
+  const mode = useAppSelector((s) => s.workflow.mode);
   const panelGroupRef = useRef<ImperativePanelGroupHandle>(null);
   const panelStorage = usePanelStorage();