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

36
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 && (
<IAIDndImageIcon <Flex position="absolute" flexDir="column" top={1} insetInlineEnd={1} gap={1}>
onClick={handleResetControlImage} <IAIDndImageIcon
icon={controlImage ? <PiArrowCounterClockwiseBold size={16} /> : undefined} onClick={handleResetControlImage}
tooltip={t('controlnet.resetControlImage')} icon={<PiArrowCounterClockwiseBold size={16} />}
/> tooltip={t('controlnet.resetControlImage')}
<IAIDndImageIcon />
onClick={handleSaveControlImage} <IAIDndImageIcon
icon={controlImage ? <PiFloppyDiskBold size={16} /> : undefined} onClick={handleSaveControlImage}
tooltip={t('controlnet.saveControlImage')} icon={<PiFloppyDiskBold size={16} />}
/> tooltip={t('controlnet.saveControlImage')}
<IAIDndImageIcon />
onClick={handleSetControlImageToDimensions} <IAIDndImageIcon
icon={controlImage ? <PiRulerBold size={16} /> : undefined} onClick={handleSetControlImageToDimensions}
tooltip={t('controlnet.setControlImageDimensions')} icon={<PiRulerBold size={16} />}
/> tooltip={t('controlnet.setControlImageDimensions')}
</Flex> />
</Flex>
)}
{pendingControlImages.includes(id) && ( {pendingControlImages.includes(id) && (
<Flex <Flex

42
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 && (
<IAIDndImageIcon <Flex position="absolute" flexDir="column" top={1} insetInlineEnd={1} gap={1}>
onClick={handleResetControlImage} <IAIDndImageIcon
icon={controlImage ? <PiArrowCounterClockwiseBold size={16} /> : undefined} onClick={handleResetControlImage}
tooltip={t('controlnet.resetControlImage')} icon={<PiArrowCounterClockwiseBold size={16} />}
/> tooltip={t('controlnet.resetControlImage')}
<IAIDndImageIcon />
onClick={handleSaveControlImage} <IAIDndImageIcon
icon={controlImage ? <PiFloppyDiskBold size={16} /> : undefined} onClick={handleSaveControlImage}
tooltip={t('controlnet.saveControlImage')} icon={<PiFloppyDiskBold size={16} />}
mt={6} tooltip={t('controlnet.saveControlImage')}
/> />
<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

31
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 && (
<IAIDndImageIcon <Flex position="absolute" flexDir="column" top={1} insetInlineEnd={1} gap={1}>
onClick={handleResetControlImage} <IAIDndImageIcon
icon={controlImage ? <PiArrowCounterClockwiseBold size={16} /> : undefined} onClick={handleResetControlImage}
tooltip={t('controlnet.resetControlImage')} icon={<PiArrowCounterClockwiseBold size={16} />}
/> tooltip={t('controlnet.resetControlImage')}
<IAIDndImageIcon />
onClick={handleSetControlImageToDimensions} <IAIDndImageIcon
icon={controlImage ? <PiRulerBold size={16} /> : undefined} onClick={handleSetControlImageToDimensions}
tooltip={shift ? t('controlnet.setControlImageDimensionsForce') : t('controlnet.setControlImageDimensions')} icon={<PiRulerBold size={16} />}
mt={6} tooltip={
/> shift ? t('controlnet.setControlImageDimensionsForce') : t('controlnet.setControlImageDimensions')
</> }
/>
</Flex>
)}
</Flex> </Flex>
); );
} }

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

@ -78,27 +78,32 @@ 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">
<IAIDndImage <Flex position="relative" w={36} h={36} alignItems="center" justifyContent="center">
draggableData={draggableData} <IAIDndImage
droppableData={droppableData} draggableData={draggableData}
imageDTO={imageDTO} droppableData={droppableData}
postUploadAction={postUploadAction} imageDTO={imageDTO}
/> postUploadAction={postUploadAction}
/>
<> {imageDTO && (
<IAIDndImageIcon <Flex position="absolute" flexDir="column" top={1} insetInlineEnd={1} gap={1}>
onClick={onReset} <IAIDndImageIcon
icon={imageDTO ? <PiArrowCounterClockwiseBold size={16} /> : undefined} onClick={onReset}
tooltip={t('controlnet.resetControlImage')} icon={<PiArrowCounterClockwiseBold size={16} />}
/> tooltip={t('controlnet.resetControlImage')}
<IAIDndImageIcon />
onClick={onUseSize} <IAIDndImageIcon
icon={imageDTO ? <PiRulerBold size={16} /> : undefined} onClick={onUseSize}
tooltip={shift ? t('controlnet.setControlImageDimensionsForce') : t('controlnet.setControlImageDimensions')} icon={<PiRulerBold size={16} />}
mt={6} tooltip={
/> shift ? t('controlnet.setControlImageDimensionsForce') : t('controlnet.setControlImageDimensions')
</> }
/>
</Flex>
)}
</Flex>
</Flex> </Flex>
); );
}); });