Mirrored_Repos/InvokeAI
1
0
Fork 0
mirror of https://github.com/invoke-ai/InvokeAI synced 2024-08-30 20:32:17 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix(ui): fix control image sizes

Browse Source 
they were all weird
This commit is contained in:
psychedelicious 2023-06-24 17:46:10 +10:00
parent 8f9fa15fc8
commit 013e2aa2a1
2 changed files with 40 additions and 44 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
invokeai/frontend/web/src/features/controlNet/components/ControlNet.tsx
View File

@ -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

51
invokeai/frontend/web/src/features/controlNet/components/ControlNetImagePreview.tsx
View File

@ -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,23 +92,28 @@ 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',
@ -120,30 +121,22 @@ const ControlNetImagePreview = (props: Props) => {
insetInlineStart: 0,
w: 'full',
h: 'full',
opacity: shouldShowProcessedImage ? 1 : 0,
transitionProperty: 'common',
transitionDuration: 'normal',
}}
>
{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}
imageSx={{
w: 'full',
h: 'full',
}}
/>
</Box>
)}
{pendingControlImages.includes(controlNetId) && (
<Box
sx={{
@ -173,7 +166,7 @@ const ControlNetImagePreview = (props: Props) => {
/>
</Flex>
)}
</Box>
</Flex>
);
};