diff --git a/invokeai/frontend/web/src/features/controlLayers/components/CanvasEntityList/EntityListSelectedEntityActionBarInvertMaskButton.tsx b/invokeai/frontend/web/src/features/controlLayers/components/CanvasEntityList/EntityListSelectedEntityActionBarInvertMaskButton.tsx index 2384f5dd416..361be5e70ef 100644 --- a/invokeai/frontend/web/src/features/controlLayers/components/CanvasEntityList/EntityListSelectedEntityActionBarInvertMaskButton.tsx +++ b/invokeai/frontend/web/src/features/controlLayers/components/CanvasEntityList/EntityListSelectedEntityActionBarInvertMaskButton.tsx @@ -3,7 +3,7 @@ import { useAppSelector } from 'app/store/storeHooks'; import { useCanvasIsBusy } from 'features/controlLayers/hooks/useCanvasIsBusy'; import { useInvertMask } from 'features/controlLayers/hooks/useInvertMask'; import { selectSelectedEntityIdentifier } from 'features/controlLayers/store/selectors'; -import { isInpaintMaskEntityIdentifier } from 'features/controlLayers/store/types'; +import { isMaskEntityIdentifier } from 'features/controlLayers/store/types'; import { memo } from 'react'; import { useTranslation } from 'react-i18next'; import { PiSelectionInverseBold } from 'react-icons/pi'; @@ -18,10 +18,15 @@ export const EntityListSelectedEntityActionBarInvertMaskButton = memo(() => { return null; } - if (!isInpaintMaskEntityIdentifier(selectedEntityIdentifier)) { + if (!isMaskEntityIdentifier(selectedEntityIdentifier)) { return null; } + const label = + selectedEntityIdentifier.type === 'regional_guidance' + ? t('controlLayers.invertRegion', { defaultValue: 'Invert Region' }) + : t('controlLayers.invertMask'); + return ( { minW={8} variant="link" alignSelf="stretch" - aria-label={t('controlLayers.invertMask')} - tooltip={t('controlLayers.invertMask')} + aria-label={label} + tooltip={label} icon={} /> ); diff --git a/invokeai/frontend/web/src/features/controlLayers/hooks/useCanvasInvertMaskHotkey.tsx b/invokeai/frontend/web/src/features/controlLayers/hooks/useCanvasInvertMaskHotkey.tsx index fada792e748..51f9cae0480 100644 --- a/invokeai/frontend/web/src/features/controlLayers/hooks/useCanvasInvertMaskHotkey.tsx +++ b/invokeai/frontend/web/src/features/controlLayers/hooks/useCanvasInvertMaskHotkey.tsx @@ -3,7 +3,7 @@ import { useAssertSingleton } from 'common/hooks/useAssertSingleton'; import { useCanvasIsBusy } from 'features/controlLayers/hooks/useCanvasIsBusy'; import { useInvertMask } from 'features/controlLayers/hooks/useInvertMask'; import { selectSelectedEntityIdentifier } from 'features/controlLayers/store/selectors'; -import { isInpaintMaskEntityIdentifier } from 'features/controlLayers/store/types'; +import { isMaskEntityIdentifier } from 'features/controlLayers/store/types'; import { useRegisteredHotkeys } from 'features/system/components/HotkeysModal/useHotkeyData'; import { useMemo } from 'react'; @@ -17,7 +17,7 @@ export const useCanvasInvertMaskHotkey = () => { if (!selectedEntityIdentifier) { return false; } - if (!isInpaintMaskEntityIdentifier(selectedEntityIdentifier)) { + if (!isMaskEntityIdentifier(selectedEntityIdentifier)) { return false; } if (isBusy) { diff --git a/invokeai/frontend/web/src/features/controlLayers/hooks/useInvertMask.ts b/invokeai/frontend/web/src/features/controlLayers/hooks/useInvertMask.ts index 342b984fb1c..2e3e35c3e9b 100644 --- a/invokeai/frontend/web/src/features/controlLayers/hooks/useInvertMask.ts +++ b/invokeai/frontend/web/src/features/controlLayers/hooks/useInvertMask.ts @@ -3,6 +3,7 @@ import { useCanvasManager } from 'features/controlLayers/contexts/CanvasManagerP import { canvasToBlob, canvasToImageData } from 'features/controlLayers/konva/util'; import { entityRasterized } from 'features/controlLayers/store/canvasSlice'; import { selectSelectedEntityIdentifier } from 'features/controlLayers/store/selectors'; +import { isMaskEntityIdentifier } from 'features/controlLayers/store/types'; import { imageDTOToImageObject } from 'features/controlLayers/store/util'; import { toast } from 'features/toast/toast'; import { useCallback } from 'react'; @@ -17,9 +18,14 @@ export const useInvertMask = () => { const invertMask = useCallback(async () => { try { + if (!selectedEntityIdentifier || !isMaskEntityIdentifier(selectedEntityIdentifier)) { + return; + } + const bboxRect = canvasManager.stateApi.getBbox().rect; + const maskType = selectedEntityIdentifier.type; - const adapters = canvasManager.compositor.getVisibleAdaptersOfType('inpaint_mask'); + const adapters = canvasManager.compositor.getVisibleAdaptersOfType(maskType); if (adapters.length === 0) { toast({ @@ -43,7 +49,7 @@ export const useInvertMask = () => { fullCtx.fillStyle = 'rgba(0, 0, 0, 0)'; fullCtx.fillRect(0, 0, bboxRect.width, bboxRect.height); - const visibleMasksRect = canvasManager.compositor.getVisibleRectOfType('inpaint_mask'); + const visibleMasksRect = canvasManager.compositor.getVisibleRectOfType(maskType); if (visibleMasksRect.width > 0 && visibleMasksRect.height > 0) { const compositeCanvas = canvasManager.compositor.getCompositeCanvas(adapters, visibleMasksRect);