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

Adds alert for bounding box size to status icons

Browse Source
This commit is contained in:
psychedelicious 2022-11-02 13:13:56 +11:00 committed by Lincoln Stein
parent 6195579910
commit f1ae6dae4c
2 changed files with 16 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
frontend/src/features/tabs/Inpainting/InpaintingCanvasStatusIcons.scss
View File

@ -2,18 +2,12 @@
position: absolute; position: absolute;
top: 0; top: 0;
left: 0; left: 0;
display: flex;
z-index: 2; z-index: 2;
margin: 0.5rem; margin: 0.5rem;
pointer-events: none; pointer-events: none;
background-color: var(--inpainting-alerts-bg);
border-radius: 0.2rem;
overflow: hidden;
button { button {
border-radius: 0; background-color: var(--inpainting-alerts-bg);
height: 100%;
vertical-align: top;
svg { svg {
fill: var(--inpainting-alerts-icon-color); fill: var(--inpainting-alerts-icon-color);

24
frontend/src/features/tabs/Inpainting/InpaintingCanvasStatusIcons.tsx
View File

@ -8,6 +8,7 @@ const inpaintingCanvasStatusIconsSelector = createSelector(
shouldInvertMask, shouldInvertMask,
shouldLockBoundingBox, shouldLockBoundingBox,
shouldShowBoundingBox, shouldShowBoundingBox,
boundingBoxDimensions,
} = inpainting; } = inpainting;
return { return {
@ -15,6 +16,8 @@ const inpaintingCanvasStatusIconsSelector = createSelector(
shouldInvertMask, shouldInvertMask,
shouldLockBoundingBox, shouldLockBoundingBox,
shouldShowBoundingBox, shouldShowBoundingBox,
isBoundingBoxTooSmall:
boundingBoxDimensions.width < 512 || boundingBoxDimensions.height < 512,
}; };
}, },
{ {
@ -24,9 +27,10 @@ const inpaintingCanvasStatusIconsSelector = createSelector(
} }
); );
import { IconButton } from '@chakra-ui/react'; import { ButtonGroup, IconButton } from '@chakra-ui/react';
import { createSelector } from '@reduxjs/toolkit'; import { createSelector } from '@reduxjs/toolkit';
import { BiHide, BiShow } from 'react-icons/bi'; import { BiHide, BiShow } from 'react-icons/bi';
import { GiResize } from 'react-icons/gi';
import { BsBoundingBox } from 'react-icons/bs'; import { BsBoundingBox } from 'react-icons/bs';
import { FaLock, FaUnlock } from 'react-icons/fa'; import { FaLock, FaUnlock } from 'react-icons/fa';
import { MdInvertColors, MdInvertColorsOff } from 'react-icons/md'; import { MdInvertColors, MdInvertColorsOff } from 'react-icons/md';
@ -39,11 +43,12 @@ const InpaintingCanvasStatusIcons = () => {
shouldInvertMask, shouldInvertMask,
shouldLockBoundingBox, shouldLockBoundingBox,
shouldShowBoundingBox, shouldShowBoundingBox,
isBoundingBoxTooSmall,
} = useAppSelector(inpaintingCanvasStatusIconsSelector); } = useAppSelector(inpaintingCanvasStatusIconsSelector);
return ( return (
<div className="inpainting-alerts"> <div className="inpainting-alerts">
<div style={{ pointerEvents: 'none' }}> <ButtonGroup isAttached>
<IconButton <IconButton
aria-label="Show/HideMask" aria-label="Show/HideMask"
size="xs" size="xs"
@ -52,8 +57,6 @@ const InpaintingCanvasStatusIcons = () => {
data-selected={!shouldShowMask} data-selected={!shouldShowMask}
icon={shouldShowMask ? <BiShow /> : <BiHide />} icon={shouldShowMask ? <BiShow /> : <BiHide />}
/> />
</div>
<div style={{ pointerEvents: 'none' }}>
<IconButton <IconButton
aria-label="Invert Mask" aria-label="Invert Mask"
variant={'ghost'} variant={'ghost'}
@ -62,8 +65,6 @@ const InpaintingCanvasStatusIcons = () => {
data-selected={shouldInvertMask} data-selected={shouldInvertMask}
icon={shouldInvertMask ? <MdInvertColors /> : <MdInvertColorsOff />} icon={shouldInvertMask ? <MdInvertColors /> : <MdInvertColorsOff />}
/> />
</div>
<div style={{ pointerEvents: 'none' }}>
<IconButton <IconButton
aria-label="Bounding Box Lock" aria-label="Bounding Box Lock"
size="xs" size="xs"
@ -71,8 +72,6 @@ const InpaintingCanvasStatusIcons = () => {
data-selected={shouldLockBoundingBox} data-selected={shouldLockBoundingBox}
icon={shouldLockBoundingBox ? <FaLock /> : <FaUnlock />} icon={shouldLockBoundingBox ? <FaLock /> : <FaUnlock />}
/> />
</div>
<div style={{ pointerEvents: 'none' }}>
<IconButton <IconButton
aria-label="Bounding Box Lock" aria-label="Bounding Box Lock"
size="xs" size="xs"
@ -80,7 +79,14 @@ const InpaintingCanvasStatusIcons = () => {
data-alert={!shouldShowBoundingBox} data-alert={!shouldShowBoundingBox}
icon={<BsBoundingBox />} icon={<BsBoundingBox />}
/> />
</div> <IconButton
aria-label="Under 512x512"
size="xs"
variant={'ghost'}
data-alert={isBoundingBoxTooSmall}
icon={<GiResize />}
/>
</ButtonGroup>
</div> </div>
); );
}; };