feat(ui): tweak floating preview

invokeai/frontend/web/src/app/components/App.tsx

@@ -28,13 +28,7 @@ import { configChanged } from 'features/system/store/configSlice';
 import { useFeatureStatus } from 'features/system/hooks/useFeatureStatus';
 import { useLogger } from 'app/logging/useLogger';
 import ProgressImagePreview from 'features/parameters/components/ProgressImagePreview';
-import {
+import { DndContext, DragEndEvent } from '@dnd-kit/core';
-  DndContext,
-  DragEndEvent,
-  PointerSensor,
-  useSensor,
-  useSensors,
-} from '@dnd-kit/core';
 import { floatingProgressImageMoved } from 'features/ui/store/uiSlice';
 import { restrictToWindowEdges } from '@dnd-kit/modifiers';
 
@@ -50,9 +44,6 @@ const App = ({ config = DEFAULT_CONFIG, children }: Props) => {
   const log = useLogger();
 
   const currentTheme = useAppSelector((state) => state.ui.currentTheme);
-  const shouldShowProgressImage = useAppSelector(
-    (state) => state.ui.shouldShowProgressImage
-  );
 
   const isLightboxEnabled = useFeatureStatus('lightbox').isFeatureEnabled;
 
@@ -85,22 +76,8 @@ const App = ({ config = DEFAULT_CONFIG, children }: Props) => {
     [dispatch]
   );
 
-  const pointer = useSensor(PointerSensor, {
-    // Delay the drag events (allow clicks on elements)
-    activationConstraint: {
-      delay: 100,
-      tolerance: 5,
-    },
-  });
-
-  const sensors = useSensors(pointer);
-
   return (
-    <DndContext
+    <DndContext onDragEnd={handleDragEnd} modifiers={[restrictToWindowEdges]}>
-      onDragEnd={handleDragEnd}
-      sensors={sensors}
-      modifiers={[restrictToWindowEdges]}
-    >
       <Grid w="100vw" h="100vh" position="relative" overflow="hidden">
         {isLightboxEnabled && <Lightbox />}
         <ImageUploader>

invokeai/frontend/web/src/features/parameters/components/ProgressImagePreview.tsx

@@ -1,52 +1,45 @@
-import {
+import { Box, Flex, Icon, Image, Text } from '@chakra-ui/react';
-  Accordion,
-  AccordionButton,
-  AccordionIcon,
-  AccordionItem,
-  AccordionPanel,
-  Box,
-  Flex,
-  Icon,
-  Image,
-  Text,
-} from '@chakra-ui/react';
 import { useDraggable } from '@dnd-kit/core';
 import { createSelector } from '@reduxjs/toolkit';
-import { useAppSelector } from 'app/store/storeHooks';
+import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import { systemSelector } from 'features/system/store/systemSelectors';
-import { memo, useCallback, useRef, MouseEvent } from 'react';
+import { memo, useCallback } from 'react';
 import { CSS } from '@dnd-kit/utilities';
-import { FaEye, FaImage } from 'react-icons/fa';
+import { FaEye, FaImage, FaStopwatch } from 'react-icons/fa';
 import { uiSelector } from 'features/ui/store/uiSelectors';
 import { Resizable } from 're-resizable';
-import { useBoolean, useHoverDirty } from 'react-use';
 import IAIIconButton from 'common/components/IAIIconButton';
 import { CloseIcon } from '@chakra-ui/icons';
 import { useTranslation } from 'react-i18next';
+import { shouldShowProgressImagesToggled } from 'features/ui/store/uiSlice';
 
 const selector = createSelector([systemSelector, uiSelector], (system, ui) => {
   const { progressImage } = system;
-  const { floatingProgressImageCoordinates, shouldShowProgressImage } = ui;
+  const { floatingProgressImageCoordinates, shouldShowProgressImages } = ui;
 
   return {
     progressImage,
     coords: floatingProgressImageCoordinates,
-    shouldShowProgressImage,
+    shouldShowProgressImages,
   };
 });
 
 const ProgressImagePreview = () => {
-  const { progressImage, coords, shouldShowProgressImage } =
+  const dispatch = useAppDispatch();
+
+  const { progressImage, coords, shouldShowProgressImages } =
     useAppSelector(selector);
 
-  const [shouldShowProgressImages, toggleShouldShowProgressImages] =
-    useBoolean(false);
-
   const { t } = useTranslation();
+
   const { attributes, listeners, setNodeRef, transform } = useDraggable({
     id: 'progress-image',
   });
 
+  const toggleProgressImages = useCallback(() => {
+    dispatch(shouldShowProgressImagesToggled());
+  }, [dispatch]);
+
   const transformStyles = transform
     ? {
         transform: CSS.Translate.toString(transform),
@@ -75,19 +68,6 @@ const ProgressImagePreview = () => {
             defaultSize={{ width: 300, height: 300 }}
             minWidth={200}
             minHeight={200}
-            boundsByDirection={true}
-            enable={{ bottomRight: true }}
-          >
-            <Flex
-              sx={{
-                cursor: 'move',
-                w: 'full',
-                h: 'full',
-                alignItems: 'center',
-                justifyContent: 'center',
-              }}
-              {...listeners}
-              {...attributes}
           >
             <Flex
               sx={{
@@ -96,9 +76,42 @@ const ProgressImagePreview = () => {
                 h: 'full',
                 alignItems: 'center',
                 justifyContent: 'center',
-                  p: 4,
+                flexDir: 'column',
               }}
             >
+              <Flex
+                sx={{
+                  w: 'full',
+                  alignItems: 'center',
+                  justifyContent: 'center',
+                  p: 1.5,
+                  pl: 4,
+                  pr: 3,
+                  bg: 'base.700',
+                  borderTopRadius: 'base',
+                }}
+              >
+                <Flex
+                  sx={{
+                    flexGrow: 1,
+                    userSelect: 'none',
+                    cursor: 'move',
+                  }}
+                  {...listeners}
+                  {...attributes}
+                >
+                  <Text fontSize="sm" fontWeight={500}>
+                    Progress Images
+                  </Text>
+                </Flex>
+                <IAIIconButton
+                  onClick={toggleProgressImages}
+                  aria-label={t('ui.hideProgressImages')}
+                  size="xs"
+                  icon={<CloseIcon />}
+                  variant="ghost"
+                />
+              </Flex>
               {progressImage ? (
                 <Flex
                   sx={{
@@ -110,6 +123,7 @@ const ProgressImagePreview = () => {
                   }}
                 >
                   <Image
+                    draggable={false}
                     src={progressImage.dataURL}
                     width={progressImage.width}
                     height={progressImage.height}
@@ -121,6 +135,7 @@ const ProgressImagePreview = () => {
                       height: 'auto',
                       imageRendering: 'pixelated',
                       borderRadius: 'base',
+                      p: 2,
                     }}
                   />
                 </Flex>
@@ -137,30 +152,17 @@ const ProgressImagePreview = () => {
                 </Flex>
               )}
             </Flex>
-              <IAIIconButton
-                onClick={toggleShouldShowProgressImages}
-                aria-label={t('ui.hideProgressImages')}
-                size="xs"
-                icon={<CloseIcon />}
-                sx={{
-                  position: 'absolute',
-                  top: 2,
-                  insetInlineEnd: 2,
-                }}
-                variant="ghost"
-              />
-            </Flex>
           </Resizable>
         </Box>
       </Box>
     </Box>
   ) : (
     <IAIIconButton
-      onClick={toggleShouldShowProgressImages}
+      onClick={toggleProgressImages}
       tooltip={t('ui.showProgressImages')}
       sx={{ position: 'absolute', bottom: 4, insetInlineStart: 4 }}
       aria-label={t('ui.showProgressImages')}
-      icon={<FaEye />}
+      icon={<FaStopwatch />}
     />
   );
 };

invokeai/frontend/web/src/features/ui/store/uiSlice.ts

@@ -23,7 +23,7 @@ const initialUIState: UIState = {
   openGenerateAccordionItems: [],
   openUnifiedCanvasAccordionItems: [],
   floatingProgressImageCoordinates: { x: 0, y: 0 },
-  shouldShowProgressImage: false,
+  shouldShowProgressImages: false,
 };
 
 const initialState: UIState = initialUIState;
@@ -114,8 +114,8 @@ export const uiSlice = createSlice({
 
       state.floatingProgressImageCoordinates = { x: x + _x, y: y + _y };
     },
-    shouldShowProgressImageChanged: (state, action: PayloadAction<boolean>) => {
+    shouldShowProgressImagesToggled: (state) => {
-      state.shouldShowProgressImage = action.payload;
+      state.shouldShowProgressImages = !state.shouldShowProgressImages;
     },
   },
 });
@@ -141,7 +141,7 @@ export const {
   toggleGalleryPanel,
   openAccordionItemsChanged,
   floatingProgressImageMoved,
-  shouldShowProgressImageChanged,
+  shouldShowProgressImagesToggled,
 } = uiSlice.actions;
 
 export default uiSlice.reducer;

invokeai/frontend/web/src/features/ui/store/uiTypes.ts

@@ -20,5 +20,5 @@ export interface UIState {
   openGenerateAccordionItems: number[];
   openUnifiedCanvasAccordionItems: number[];
   floatingProgressImageCoordinates: Coordinates;
-  shouldShowProgressImage: boolean;
+  shouldShowProgressImages: boolean;
 }