fix(ui): fix control image sizes

they were all weird
invoke-ai · Jun 24, 2023 · 36237d6 · 36237d6
1 parent c9f59e0
commit 36237d6
Show file tree

Hide file tree

Showing 2 changed files with 40 additions and 44 deletions.
diff --git a/invokeai/frontend/web/src/features/controlNet/components/ControlNet.tsx b/invokeai/frontend/web/src/features/controlNet/components/ControlNet.tsx
@@ -172,7 +172,10 @@ const ControlNet = (props: ControlNetProps) => {
                   aspectRatio: '1/1',
                 }}
               >
-                <ControlNetImagePreview controlNet={props.controlNet} />
+                <ControlNetImagePreview
+                  controlNet={props.controlNet}
+                  height={24}
+                />
               </Flex>
             )}
           </Flex>
@@ -181,7 +184,7 @@ const ControlNet = (props: ControlNetProps) => {
               <Box mt={2}>
                 <ControlNetImagePreview
                   controlNet={props.controlNet}
-                  imageSx={expandedControlImageSx}
+                  height={96}
                 />
               </Box>
               <ParamControlNetProcessorSelect

diff --git a/invokeai/frontend/web/src/features/controlNet/components/ControlNetImagePreview.tsx b/invokeai/frontend/web/src/features/controlNet/components/ControlNetImagePreview.tsx
@@ -6,7 +6,7 @@ import {
   controlNetSelector,
 } from '../store/controlNetSlice';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
-import { Box, ChakraProps, Flex } from '@chakra-ui/react';
+import { Box, Flex, SystemStyleObject } from '@chakra-ui/react';
 import IAIDndImage from 'common/components/IAIDndImage';
 import { createSelector } from '@reduxjs/toolkit';
 import { defaultSelectorOptions } from 'app/store/util/defaultMemoizeOptions';
@@ -27,11 +27,11 @@ const selector = createSelector(
 
 type Props = {
   controlNet: ControlNetConfig;
-  imageSx?: ChakraProps['sx'];
+  height: SystemStyleObject['h'];
 };
 
 const ControlNetImagePreview = (props: Props) => {
-  const { imageSx } = props;
+  const { height } = props;
   const {
     controlNetId,
     controlImage: controlImageName,
@@ -84,10 +84,6 @@ const ControlNetImagePreview = (props: Props) => {
     setIsMouseOverImage(false);
   }, []);
 
-  const shouldShowProcessedImageBackdrop =
-    Number(controlImage?.width) > Number(processedControlImage?.width) ||
-    Number(controlImage?.height) > Number(processedControlImage?.height);
-
   const shouldShowProcessedImage =
     controlImage &&
     processedControlImage &&
@@ -96,54 +92,51 @@ const ControlNetImagePreview = (props: Props) => {
     processorType !== 'none';
 
   return (
-    <Box
+    <Flex
       onMouseEnter={handleMouseEnter}
       onMouseLeave={handleMouseLeave}
-      sx={{ position: 'relative', w: 'full', h: 'full' }}
+      sx={{
+        position: 'relative',
+        w: 'full',
+        h: height,
+        alignItems: 'center',
+        justifyContent: 'center',
+      }}
     >
       <IAIDndImage
         image={controlImage}
         onDrop={handleDrop}
-        isDropDisabled={shouldShowProcessedImage}
+        isDropDisabled={!shouldShowProcessedImage}
         isUploadDisabled={Boolean(controlImage)}
         postUploadAction={{ type: 'SET_CONTROLNET_IMAGE', controlNetId }}
         imageSx={{
-          pointerEvents: shouldShowProcessedImage ? 'none' : 'auto',
-          ...imageSx,
+          w: 'full',
+          h: 'full',
         }}
       />
-      {shouldShowProcessedImage && (
-        <Box
-          sx={{
-            position: 'absolute',
-            top: 0,
-            insetInlineStart: 0,
+      <Box
+        sx={{
+          position: 'absolute',
+          top: 0,
+          insetInlineStart: 0,
+          w: 'full',
+          h: 'full',
+          opacity: shouldShowProcessedImage ? 1 : 0,
+          transitionProperty: 'common',
+          transitionDuration: 'normal',
+        }}
+      >
+        <IAIDndImage
+          image={processedControlImage}
+          onDrop={handleDrop}
+          payloadImage={controlImage}
+          isUploadDisabled={true}
+          imageSx={{
             w: 'full',
             h: 'full',
           }}
-        >
-          {shouldShowProcessedImageBackdrop && (
-            <Box
-              sx={{
-                position: 'absolute',
-                top: 0,
-                insetInlineStart: 0,
-                w: 'full',
-                h: 'full',
-                bg: 'base.900',
-                opacity: 0.7,
-              }}
-            />
-          )}
-          <IAIDndImage
-            image={processedControlImage}
-            onDrop={handleDrop}
-            payloadImage={controlImage}
-            isUploadDisabled={true}
-            imageSx={imageSx}
-          />
-        </Box>
-      )}
+        />
+      </Box>
       {pendingControlImages.includes(controlNetId) && (
         <Box
           sx={{
@@ -173,7 +166,7 @@ const ControlNetImagePreview = (props: Props) => {
           />
         </Flex>
       )}
-    </Box>
+    </Flex>
   );
 };