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', aspectRatio: '1/1',
}} }}
> >
<ControlNetImagePreview controlNet={props.controlNet} /> <ControlNetImagePreview
controlNet={props.controlNet}
height={24}
/>
</Flex> </Flex>
)} )}
</Flex> </Flex>
@ -181,7 +184,7 @@ const ControlNet = (props: ControlNetProps) => {
<Box mt={2}> <Box mt={2}>
<ControlNetImagePreview <ControlNetImagePreview
controlNet={props.controlNet} controlNet={props.controlNet}
imageSx={expandedControlImageSx} height={96}
/> />
</Box> </Box>
<ParamControlNetProcessorSelect <ParamControlNetProcessorSelect

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

@ -6,7 +6,7 @@ import {
controlNetSelector, controlNetSelector,
} from '../store/controlNetSlice'; } from '../store/controlNetSlice';
import { useAppDispatch, useAppSelector } from 'app/store/storeHooks'; 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 IAIDndImage from 'common/components/IAIDndImage';
import { createSelector } from '@reduxjs/toolkit'; import { createSelector } from '@reduxjs/toolkit';
import { defaultSelectorOptions } from 'app/store/util/defaultMemoizeOptions'; import { defaultSelectorOptions } from 'app/store/util/defaultMemoizeOptions';
@ -27,11 +27,11 @@ const selector = createSelector(
type Props = { type Props = {
controlNet: ControlNetConfig; controlNet: ControlNetConfig;
imageSx?: ChakraProps['sx']; height: SystemStyleObject['h'];
}; };
const ControlNetImagePreview = (props: Props) => { const ControlNetImagePreview = (props: Props) => {
const { imageSx } = props; const { height } = props;
const { const {
controlNetId, controlNetId,
controlImage: controlImageName, controlImage: controlImageName,
@ -84,10 +84,6 @@ const ControlNetImagePreview = (props: Props) => {
setIsMouseOverImage(false); setIsMouseOverImage(false);
}, []); }, []);
const shouldShowProcessedImageBackdrop =
Number(controlImage?.width) > Number(processedControlImage?.width) ||
Number(controlImage?.height) > Number(processedControlImage?.height);
const shouldShowProcessedImage = const shouldShowProcessedImage =
controlImage && controlImage &&
processedControlImage && processedControlImage &&
@ -96,23 +92,28 @@ const ControlNetImagePreview = (props: Props) => {
processorType !== 'none'; processorType !== 'none';
return ( return (
<Box <Flex
onMouseEnter={handleMouseEnter} onMouseEnter={handleMouseEnter}
onMouseLeave={handleMouseLeave} onMouseLeave={handleMouseLeave}
sx={{ position: 'relative', w: 'full', h: 'full' }} sx={{
position: 'relative',
w: 'full',
h: height,
alignItems: 'center',
justifyContent: 'center',
}}
> >
<IAIDndImage <IAIDndImage
image={controlImage} image={controlImage}
onDrop={handleDrop} onDrop={handleDrop}
isDropDisabled={shouldShowProcessedImage} isDropDisabled={!shouldShowProcessedImage}
isUploadDisabled={Boolean(controlImage)} isUploadDisabled={Boolean(controlImage)}
postUploadAction={{ type: 'SET_CONTROLNET_IMAGE', controlNetId }} postUploadAction={{ type: 'SET_CONTROLNET_IMAGE', controlNetId }}
imageSx={{ imageSx={{
pointerEvents: shouldShowProcessedImage ? 'none' : 'auto', w: 'full',
...imageSx, h: 'full',
}} }}
/> />
{shouldShowProcessedImage && (
<Box <Box
sx={{ sx={{
position: 'absolute', position: 'absolute',
@ -120,30 +121,22 @@ const ControlNetImagePreview = (props: Props) => {
insetInlineStart: 0, insetInlineStart: 0,
w: 'full', w: 'full',
h: '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 <IAIDndImage
image={processedControlImage} image={processedControlImage}
onDrop={handleDrop} onDrop={handleDrop}
payloadImage={controlImage} payloadImage={controlImage}
isUploadDisabled={true} isUploadDisabled={true}
imageSx={imageSx} imageSx={{
w: 'full',
h: 'full',
}}
/> />
</Box> </Box>
)}
{pendingControlImages.includes(controlNetId) && ( {pendingControlImages.includes(controlNetId) && (
<Box <Box
sx={{ sx={{
@ -173,7 +166,7 @@ const ControlNetImagePreview = (props: Props) => {
/> />
</Flex> </Flex>
)} )}
</Box> </Flex>
); );
}; };