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): control adapter image preview

Browse Source
This commit is contained in:
psychedelicious 2024-06-26 21:51:58 +10:00
parent 93ffcb642e
commit 6dcdc87eb1
4 changed files with 83 additions and 71 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
invokeai/frontend/web/src/features/controlAdapters/components/ControlAdapterImagePreview.tsx
View File

@ -184,23 +184,25 @@ const ControlAdapterImagePreview = ({ isSmall, id }: Props) => {
/> />
</Box> </Box>
<Flex flexDir="column" top={1} insetInlineEnd={1}> {controlImage && (
<Flex position="absolute" flexDir="column" top={1} insetInlineEnd={1} gap={1}>
<IAIDndImageIcon <IAIDndImageIcon
onClick={handleResetControlImage} onClick={handleResetControlImage}
icon={controlImage ? <PiArrowCounterClockwiseBold size={16} /> : undefined} icon={<PiArrowCounterClockwiseBold size={16} />}
tooltip={t('controlnet.resetControlImage')} tooltip={t('controlnet.resetControlImage')}
/> />
<IAIDndImageIcon <IAIDndImageIcon
onClick={handleSaveControlImage} onClick={handleSaveControlImage}
icon={controlImage ? <PiFloppyDiskBold size={16} /> : undefined} icon={<PiFloppyDiskBold size={16} />}
tooltip={t('controlnet.saveControlImage')} tooltip={t('controlnet.saveControlImage')}
/> />
<IAIDndImageIcon <IAIDndImageIcon
onClick={handleSetControlImageToDimensions} onClick={handleSetControlImageToDimensions}
icon={controlImage ? <PiRulerBold size={16} /> : undefined} icon={<PiRulerBold size={16} />}
tooltip={t('controlnet.setControlImageDimensions')} tooltip={t('controlnet.setControlImageDimensions')}
/> />
</Flex> </Flex>
)}
{pendingControlImages.includes(id) && ( {pendingControlImages.includes(id) && (
<Flex <Flex

20
invokeai/frontend/web/src/features/controlLayers/components/ControlAndIPAdapter/ControlAdapterImagePreview.tsx
View File

@ -159,7 +159,7 @@ export const ControlAdapterImagePreview = memo(
onMouseEnter={handleMouseEnter} onMouseEnter={handleMouseEnter}
onMouseLeave={handleMouseLeave} onMouseLeave={handleMouseLeave}
position="relative" position="relative"
w="full" w={36}
h={36} h={36}
alignItems="center" alignItems="center"
justifyContent="center" justifyContent="center"
@ -192,25 +192,27 @@ export const ControlAdapterImagePreview = memo(
/> />
</Box> </Box>
<> {controlImage && (
<Flex position="absolute" flexDir="column" top={1} insetInlineEnd={1} gap={1}>
<IAIDndImageIcon <IAIDndImageIcon
onClick={handleResetControlImage} onClick={handleResetControlImage}
icon={controlImage ? <PiArrowCounterClockwiseBold size={16} /> : undefined} icon={<PiArrowCounterClockwiseBold size={16} />}
tooltip={t('controlnet.resetControlImage')} tooltip={t('controlnet.resetControlImage')}
/> />
<IAIDndImageIcon <IAIDndImageIcon
onClick={handleSaveControlImage} onClick={handleSaveControlImage}
icon={controlImage ? <PiFloppyDiskBold size={16} /> : undefined} icon={<PiFloppyDiskBold size={16} />}
tooltip={t('controlnet.saveControlImage')} tooltip={t('controlnet.saveControlImage')}
mt={6}
/> />
<IAIDndImageIcon <IAIDndImageIcon
onClick={handleSetControlImageToDimensions} onClick={handleSetControlImageToDimensions}
icon={controlImage ? <PiRulerBold size={16} /> : undefined} icon={<PiRulerBold size={16} />}
tooltip={shift ? t('controlnet.setControlImageDimensionsForce') : t('controlnet.setControlImageDimensions')} tooltip={
mt={12} shift ? t('controlnet.setControlImageDimensionsForce') : t('controlnet.setControlImageDimensions')
}
/> />
</> </Flex>
)}
{controlAdapter.processorPendingBatchId !== null && ( {controlAdapter.processorPendingBatchId !== null && (
<Flex <Flex

17
invokeai/frontend/web/src/features/controlLayers/components/ControlAndIPAdapter/IPAdapterImagePreview.tsx
View File

@ -81,7 +81,7 @@ export const IPAdapterImagePreview = memo(
}, [handleResetControlImage, isConnected, isErrorControlImage]); }, [handleResetControlImage, isConnected, isErrorControlImage]);
return ( return (
<Flex position="relative" w="full" h={36} alignItems="center" justifyContent="center"> <Flex position="relative" w={36} h={36} alignItems="center">
<IAIDndImage <IAIDndImage
draggableData={draggableData} draggableData={draggableData}
droppableData={droppableData} droppableData={droppableData}
@ -89,19 +89,22 @@ export const IPAdapterImagePreview = memo(
postUploadAction={postUploadAction} postUploadAction={postUploadAction}
/> />
<> {controlImage && (
<Flex position="absolute" flexDir="column" top={1} insetInlineEnd={1} gap={1}>
<IAIDndImageIcon <IAIDndImageIcon
onClick={handleResetControlImage} onClick={handleResetControlImage}
icon={controlImage ? <PiArrowCounterClockwiseBold size={16} /> : undefined} icon={<PiArrowCounterClockwiseBold size={16} />}
tooltip={t('controlnet.resetControlImage')} tooltip={t('controlnet.resetControlImage')}
/> />
<IAIDndImageIcon <IAIDndImageIcon
onClick={handleSetControlImageToDimensions} onClick={handleSetControlImageToDimensions}
icon={controlImage ? <PiRulerBold size={16} /> : undefined} icon={<PiRulerBold size={16} />}
tooltip={shift ? t('controlnet.setControlImageDimensionsForce') : t('controlnet.setControlImageDimensions')} tooltip={
mt={6} shift ? t('controlnet.setControlImageDimensionsForce') : t('controlnet.setControlImageDimensions')
}
/> />
</> </Flex>
)}
</Flex> </Flex>
); );
} }

19
invokeai/frontend/web/src/features/controlLayers/components/IILayer/InitialImagePreview.tsx
View File

@ -78,7 +78,8 @@ export const InitialImagePreview = memo(({ image, onChangeImage, droppableData,
}, [onReset, isConnected, isErrorControlImage]); }, [onReset, isConnected, isErrorControlImage]);
return ( return (
<Flex position="relative" w="full" h={36} alignItems="center" justifyContent="center"> <Flex w="full" alignItems="center" justifyContent="center">
<Flex position="relative" w={36} h={36} alignItems="center" justifyContent="center">
<IAIDndImage <IAIDndImage
draggableData={draggableData} draggableData={draggableData}
droppableData={droppableData} droppableData={droppableData}
@ -86,19 +87,23 @@ export const InitialImagePreview = memo(({ image, onChangeImage, droppableData,
postUploadAction={postUploadAction} postUploadAction={postUploadAction}
/> />
<> {imageDTO && (
<Flex position="absolute" flexDir="column" top={1} insetInlineEnd={1} gap={1}>
<IAIDndImageIcon <IAIDndImageIcon
onClick={onReset} onClick={onReset}
icon={imageDTO ? <PiArrowCounterClockwiseBold size={16} /> : undefined} icon={<PiArrowCounterClockwiseBold size={16} />}
tooltip={t('controlnet.resetControlImage')} tooltip={t('controlnet.resetControlImage')}
/> />
<IAIDndImageIcon <IAIDndImageIcon
onClick={onUseSize} onClick={onUseSize}
icon={imageDTO ? <PiRulerBold size={16} /> : undefined} icon={<PiRulerBold size={16} />}
tooltip={shift ? t('controlnet.setControlImageDimensionsForce') : t('controlnet.setControlImageDimensions')} tooltip={
mt={6} shift ? t('controlnet.setControlImageDimensionsForce') : t('controlnet.setControlImageDimensions')
}
/> />
</> </Flex>
)}
</Flex>
</Flex> </Flex>
); );
}); });