diff --git a/invokeai/frontend/web/public/locales/en.json b/invokeai/frontend/web/public/locales/en.json index cfeeef8d51..a513db92bc 100644 --- a/invokeai/frontend/web/public/locales/en.json +++ b/invokeai/frontend/web/public/locales/en.json @@ -1667,6 +1667,8 @@ "controlLayers": "Control Layers", "globalMaskOpacity": "Global Mask Opacity", "autoNegative": "Auto Negative", + "enableAutoNegative": "Enable Auto Negative", + "disableAutoNegative": "Disable Auto Negative", "deletePrompt": "Delete Prompt", "resetRegion": "Reset Region", "debugLayers": "Debug Layers", @@ -1718,6 +1720,7 @@ "objects_other": "{{count}} objects", "convertToControlLayer": "Convert to Control Layer", "convertToRasterLayer": "Convert to Raster Layer", + "transparency": "Transparency", "enableTransparencyEffect": "Enable Transparency Effect", "disableTransparencyEffect": "Disable Transparency Effect", "hidingType": "Hiding {{type}}", diff --git a/invokeai/frontend/web/src/features/controlLayers/components/ControlLayer/ControlLayer.tsx b/invokeai/frontend/web/src/features/controlLayers/components/ControlLayer/ControlLayer.tsx index 7393cf080c..594a2f871c 100644 --- a/invokeai/frontend/web/src/features/controlLayers/components/ControlLayer/ControlLayer.tsx +++ b/invokeai/frontend/web/src/features/controlLayers/components/ControlLayer/ControlLayer.tsx @@ -1,11 +1,11 @@ import { Spacer } from '@invoke-ai/ui-library'; import { CanvasEntityContainer } from 'features/controlLayers/components/common/CanvasEntityContainer'; -import { CanvasEntityDeleteButton } from 'features/controlLayers/components/common/CanvasEntityDeleteButton'; import { CanvasEntityEnabledToggle } from 'features/controlLayers/components/common/CanvasEntityEnabledToggle'; import { CanvasEntityHeader } from 'features/controlLayers/components/common/CanvasEntityHeader'; import { CanvasEntityPreviewImage } from 'features/controlLayers/components/common/CanvasEntityPreviewImage'; import { CanvasEntitySettingsWrapper } from 'features/controlLayers/components/common/CanvasEntitySettingsWrapper'; import { CanvasEntityEditableTitle } from 'features/controlLayers/components/common/CanvasEntityTitleEdit'; +import { ControlLayerBadges } from 'features/controlLayers/components/ControlLayer/ControlLayerBadges'; import { ControlLayerControlAdapter } from 'features/controlLayers/components/ControlLayer/ControlLayerControlAdapter'; import { EntityLayerAdapterGate } from 'features/controlLayers/contexts/EntityAdapterContext'; import { EntityIdentifierContext } from 'features/controlLayers/contexts/EntityIdentifierContext'; @@ -25,10 +25,10 @@ export const ControlLayer = memo(({ id }: Props) => { - - + + diff --git a/invokeai/frontend/web/src/features/controlLayers/components/ControlLayer/ControlLayerBadges.tsx b/invokeai/frontend/web/src/features/controlLayers/components/ControlLayer/ControlLayerBadges.tsx new file mode 100644 index 0000000000..5ca8601ecc --- /dev/null +++ b/invokeai/frontend/web/src/features/controlLayers/components/ControlLayer/ControlLayerBadges.tsx @@ -0,0 +1,26 @@ +import { Badge } from '@invoke-ai/ui-library'; +import { useAppSelector } from 'app/store/storeHooks'; +import { useEntityIdentifierContext } from 'features/controlLayers/contexts/EntityIdentifierContext'; +import { selectControlLayerOrThrow } from 'features/controlLayers/store/controlLayersReducers'; +import { memo } from 'react'; +import { useTranslation } from 'react-i18next'; + +export const ControlLayerBadges = memo(() => { + const { id } = useEntityIdentifierContext(); + const { t } = useTranslation(); + const withTransparencyEffect = useAppSelector( + (s) => selectControlLayerOrThrow(s.canvasV2, id).withTransparencyEffect + ); + + return ( + <> + {withTransparencyEffect && ( + + {t('controlLayers.transparency')} + + )} + + ); +}); + +ControlLayerBadges.displayName = 'ControlLayerBadges'; diff --git a/invokeai/frontend/web/src/features/controlLayers/components/ControlLayer/ControlLayerMenuItems.tsx b/invokeai/frontend/web/src/features/controlLayers/components/ControlLayer/ControlLayerMenuItems.tsx index 1a98c994fd..97ab0eb4ce 100644 --- a/invokeai/frontend/web/src/features/controlLayers/components/ControlLayer/ControlLayerMenuItems.tsx +++ b/invokeai/frontend/web/src/features/controlLayers/components/ControlLayer/ControlLayerMenuItems.tsx @@ -2,7 +2,7 @@ import { MenuDivider } from '@invoke-ai/ui-library'; import { CanvasEntityMenuItemsArrange } from 'features/controlLayers/components/common/CanvasEntityMenuItemsArrange'; import { CanvasEntityMenuItemsDelete } from 'features/controlLayers/components/common/CanvasEntityMenuItemsDelete'; import { CanvasEntityMenuItemsFilter } from 'features/controlLayers/components/common/CanvasEntityMenuItemsFilter'; -import { CanvasEntityMenuItemsReset } from 'features/controlLayers/components/common/CanvasEntityMenuItemsReset'; +import { CanvasEntityMenuItemsTransform } from 'features/controlLayers/components/common/CanvasEntityMenuItemsTransform'; import { ControlLayerMenuItemsControlToRaster } from 'features/controlLayers/components/ControlLayer/ControlLayerMenuItemsControlToRaster'; import { ControlLayerMenuItemsTransparencyEffect } from 'features/controlLayers/components/ControlLayer/ControlLayerMenuItemsTransparencyEffect'; import { memo } from 'react'; @@ -10,13 +10,13 @@ import { memo } from 'react'; export const ControlLayerMenuItems = memo(() => { return ( <> + - ); diff --git a/invokeai/frontend/web/src/features/controlLayers/components/IPAdapter/IPAdapter.tsx b/invokeai/frontend/web/src/features/controlLayers/components/IPAdapter/IPAdapter.tsx index f20891a66d..01b08f4356 100644 --- a/invokeai/frontend/web/src/features/controlLayers/components/IPAdapter/IPAdapter.tsx +++ b/invokeai/frontend/web/src/features/controlLayers/components/IPAdapter/IPAdapter.tsx @@ -1,6 +1,5 @@ import { Spacer } from '@invoke-ai/ui-library'; import { CanvasEntityContainer } from 'features/controlLayers/components/common/CanvasEntityContainer'; -import { CanvasEntityDeleteButton } from 'features/controlLayers/components/common/CanvasEntityDeleteButton'; import { CanvasEntityEnabledToggle } from 'features/controlLayers/components/common/CanvasEntityEnabledToggle'; import { CanvasEntityHeader } from 'features/controlLayers/components/common/CanvasEntityHeader'; import { CanvasEntityEditableTitle } from 'features/controlLayers/components/common/CanvasEntityTitleEdit'; @@ -19,11 +18,10 @@ export const IPAdapter = memo(({ id }: Props) => { return ( - - + - + diff --git a/invokeai/frontend/web/src/features/controlLayers/components/IPAdapter/IPAdapterMenuItems.tsx b/invokeai/frontend/web/src/features/controlLayers/components/IPAdapter/IPAdapterMenuItems.tsx new file mode 100644 index 0000000000..315d3b06c4 --- /dev/null +++ b/invokeai/frontend/web/src/features/controlLayers/components/IPAdapter/IPAdapterMenuItems.tsx @@ -0,0 +1,16 @@ +import { MenuDivider } from '@invoke-ai/ui-library'; +import { CanvasEntityMenuItemsArrange } from 'features/controlLayers/components/common/CanvasEntityMenuItemsArrange'; +import { CanvasEntityMenuItemsDelete } from 'features/controlLayers/components/common/CanvasEntityMenuItemsDelete'; +import { memo } from 'react'; + +export const IPAdapterMenuItems = memo(() => { + return ( + <> + + + + + ); +}); + +IPAdapterMenuItems.displayName = 'IPAdapterMenuItems'; diff --git a/invokeai/frontend/web/src/features/controlLayers/components/InpaintMask/InpaintMask.tsx b/invokeai/frontend/web/src/features/controlLayers/components/InpaintMask/InpaintMask.tsx index 817fddd1fa..12021e0209 100644 --- a/invokeai/frontend/web/src/features/controlLayers/components/InpaintMask/InpaintMask.tsx +++ b/invokeai/frontend/web/src/features/controlLayers/components/InpaintMask/InpaintMask.tsx @@ -1,6 +1,5 @@ import { Spacer } from '@invoke-ai/ui-library'; import { CanvasEntityContainer } from 'features/controlLayers/components/common/CanvasEntityContainer'; -import { CanvasEntityDeleteButton } from 'features/controlLayers/components/common/CanvasEntityDeleteButton'; import { CanvasEntityEnabledToggle } from 'features/controlLayers/components/common/CanvasEntityEnabledToggle'; import { CanvasEntityHeader } from 'features/controlLayers/components/common/CanvasEntityHeader'; import { CanvasEntityPreviewImage } from 'features/controlLayers/components/common/CanvasEntityPreviewImage'; @@ -25,11 +24,10 @@ export const InpaintMask = memo(({ id }: Props) => { - - + diff --git a/invokeai/frontend/web/src/features/controlLayers/components/InpaintMask/InpaintMaskMaskFillColorPicker.tsx b/invokeai/frontend/web/src/features/controlLayers/components/InpaintMask/InpaintMaskMaskFillColorPicker.tsx index ef2cf79a4a..97855daad4 100644 --- a/invokeai/frontend/web/src/features/controlLayers/components/InpaintMask/InpaintMaskMaskFillColorPicker.tsx +++ b/invokeai/frontend/web/src/features/controlLayers/components/InpaintMask/InpaintMaskMaskFillColorPicker.tsx @@ -2,7 +2,6 @@ import { Flex, Popover, PopoverBody, PopoverContent, PopoverTrigger } from '@inv import { useAppDispatch, useAppSelector } from 'app/store/storeHooks'; import RgbColorPicker from 'common/components/RgbColorPicker'; import { rgbColorToString } from 'common/util/colorCodeTransformers'; -import { stopPropagation } from 'common/util/stopPropagation'; import { MaskFillStyle } from 'features/controlLayers/components/common/MaskFillStyle'; import { useEntityIdentifierContext } from 'features/controlLayers/contexts/EntityIdentifierContext'; import { inpaintMaskFillColorChanged, inpaintMaskFillStyleChanged } from 'features/controlLayers/store/canvasV2Slice'; @@ -38,10 +37,9 @@ export const InpaintMaskMaskFillColorPicker = memo(() => { borderRadius="full" borderWidth={1} bg={rgbColorToString(fill.color)} - w={8} - h={8} + w="22px" + h="22px" tabIndex={-1} - onDoubleClick={stopPropagation} // double click expands the layer /> diff --git a/invokeai/frontend/web/src/features/controlLayers/components/InpaintMask/InpaintMaskMenuItems.tsx b/invokeai/frontend/web/src/features/controlLayers/components/InpaintMask/InpaintMaskMenuItems.tsx index d0d1a7dc10..ac19e78ffa 100644 --- a/invokeai/frontend/web/src/features/controlLayers/components/InpaintMask/InpaintMaskMenuItems.tsx +++ b/invokeai/frontend/web/src/features/controlLayers/components/InpaintMask/InpaintMaskMenuItems.tsx @@ -1,10 +1,17 @@ -import { CanvasEntityMenuItemsReset } from 'features/controlLayers/components/common/CanvasEntityMenuItemsReset'; +import { MenuDivider } from '@invoke-ai/ui-library'; +import { CanvasEntityMenuItemsArrange } from 'features/controlLayers/components/common/CanvasEntityMenuItemsArrange'; +import { CanvasEntityMenuItemsDelete } from 'features/controlLayers/components/common/CanvasEntityMenuItemsDelete'; +import { CanvasEntityMenuItemsTransform } from 'features/controlLayers/components/common/CanvasEntityMenuItemsTransform'; import { memo } from 'react'; export const InpaintMaskMenuItems = memo(() => { return ( <> - + + + + + ); }); diff --git a/invokeai/frontend/web/src/features/controlLayers/components/RasterLayer/RasterLayer.tsx b/invokeai/frontend/web/src/features/controlLayers/components/RasterLayer/RasterLayer.tsx index f031725dbc..fbb89f4da8 100644 --- a/invokeai/frontend/web/src/features/controlLayers/components/RasterLayer/RasterLayer.tsx +++ b/invokeai/frontend/web/src/features/controlLayers/components/RasterLayer/RasterLayer.tsx @@ -1,6 +1,5 @@ import { Spacer } from '@invoke-ai/ui-library'; import { CanvasEntityContainer } from 'features/controlLayers/components/common/CanvasEntityContainer'; -import { CanvasEntityDeleteButton } from 'features/controlLayers/components/common/CanvasEntityDeleteButton'; import { CanvasEntityEnabledToggle } from 'features/controlLayers/components/common/CanvasEntityEnabledToggle'; import { CanvasEntityHeader } from 'features/controlLayers/components/common/CanvasEntityHeader'; import { CanvasEntityPreviewImage } from 'features/controlLayers/components/common/CanvasEntityPreviewImage'; @@ -23,10 +22,9 @@ export const RasterLayer = memo(({ id }: Props) => { - - + diff --git a/invokeai/frontend/web/src/features/controlLayers/components/RasterLayer/RasterLayerMenuItems.tsx b/invokeai/frontend/web/src/features/controlLayers/components/RasterLayer/RasterLayerMenuItems.tsx index f901876515..d787fc39f4 100644 --- a/invokeai/frontend/web/src/features/controlLayers/components/RasterLayer/RasterLayerMenuItems.tsx +++ b/invokeai/frontend/web/src/features/controlLayers/components/RasterLayer/RasterLayerMenuItems.tsx @@ -2,7 +2,6 @@ import { MenuDivider } from '@invoke-ai/ui-library'; import { CanvasEntityMenuItemsArrange } from 'features/controlLayers/components/common/CanvasEntityMenuItemsArrange'; import { CanvasEntityMenuItemsDelete } from 'features/controlLayers/components/common/CanvasEntityMenuItemsDelete'; import { CanvasEntityMenuItemsFilter } from 'features/controlLayers/components/common/CanvasEntityMenuItemsFilter'; -import { CanvasEntityMenuItemsReset } from 'features/controlLayers/components/common/CanvasEntityMenuItemsReset'; import { CanvasEntityMenuItemsTransform } from 'features/controlLayers/components/common/CanvasEntityMenuItemsTransform'; import { RasterLayerMenuItemsRasterToControl } from 'features/controlLayers/components/RasterLayer/RasterLayerMenuItemsRasterToControl'; import { memo } from 'react'; @@ -10,13 +9,12 @@ import { memo } from 'react'; export const RasterLayerMenuItems = memo(() => { return ( <> + - - ); diff --git a/invokeai/frontend/web/src/features/controlLayers/components/RegionalGuidance/RegionalGuidance.tsx b/invokeai/frontend/web/src/features/controlLayers/components/RegionalGuidance/RegionalGuidance.tsx index f7ef19ee80..ea5e85ee1d 100644 --- a/invokeai/frontend/web/src/features/controlLayers/components/RegionalGuidance/RegionalGuidance.tsx +++ b/invokeai/frontend/web/src/features/controlLayers/components/RegionalGuidance/RegionalGuidance.tsx @@ -1,6 +1,5 @@ import { Spacer } from '@invoke-ai/ui-library'; import { CanvasEntityContainer } from 'features/controlLayers/components/common/CanvasEntityContainer'; -import { CanvasEntityDeleteButton } from 'features/controlLayers/components/common/CanvasEntityDeleteButton'; import { CanvasEntityEnabledToggle } from 'features/controlLayers/components/common/CanvasEntityEnabledToggle'; import { CanvasEntityHeader } from 'features/controlLayers/components/common/CanvasEntityHeader'; import { CanvasEntityPreviewImage } from 'features/controlLayers/components/common/CanvasEntityPreviewImage'; @@ -13,7 +12,6 @@ import type { CanvasEntityIdentifier } from 'features/controlLayers/store/types' import { memo, useMemo } from 'react'; import { RegionalGuidanceMaskFillColorPicker } from './RegionalGuidanceMaskFillColorPicker'; -import { RegionalGuidanceSettingsPopover } from './RegionalGuidanceSettingsPopover'; type Props = { id: string; @@ -28,13 +26,11 @@ export const RegionalGuidance = memo(({ id }: Props) => { - - - + diff --git a/invokeai/frontend/web/src/features/controlLayers/components/RegionalGuidance/RegionalGuidanceBadges.tsx b/invokeai/frontend/web/src/features/controlLayers/components/RegionalGuidance/RegionalGuidanceBadges.tsx index e8edc65531..fb35b5068e 100644 --- a/invokeai/frontend/web/src/features/controlLayers/components/RegionalGuidance/RegionalGuidanceBadges.tsx +++ b/invokeai/frontend/web/src/features/controlLayers/components/RegionalGuidance/RegionalGuidanceBadges.tsx @@ -12,7 +12,7 @@ export const RegionalGuidanceBadges = memo(() => { return ( <> - {autoNegative === 'invert' && ( + {autoNegative && ( {t('controlLayers.autoNegative')} diff --git a/invokeai/frontend/web/src/features/controlLayers/components/RegionalGuidance/RegionalGuidanceMaskFillColorPicker.tsx b/invokeai/frontend/web/src/features/controlLayers/components/RegionalGuidance/RegionalGuidanceMaskFillColorPicker.tsx index a6bfa79958..f42e5f44e4 100644 --- a/invokeai/frontend/web/src/features/controlLayers/components/RegionalGuidance/RegionalGuidanceMaskFillColorPicker.tsx +++ b/invokeai/frontend/web/src/features/controlLayers/components/RegionalGuidance/RegionalGuidanceMaskFillColorPicker.tsx @@ -2,7 +2,6 @@ import { Flex, Popover, PopoverBody, PopoverContent, PopoverTrigger } from '@inv import { useAppDispatch, useAppSelector } from 'app/store/storeHooks'; import RgbColorPicker from 'common/components/RgbColorPicker'; import { rgbColorToString } from 'common/util/colorCodeTransformers'; -import { stopPropagation } from 'common/util/stopPropagation'; import { MaskFillStyle } from 'features/controlLayers/components/common/MaskFillStyle'; import { useEntityIdentifierContext } from 'features/controlLayers/contexts/EntityIdentifierContext'; import { rgFillColorChanged, rgFillStyleChanged } from 'features/controlLayers/store/canvasV2Slice'; @@ -37,10 +36,9 @@ export const RegionalGuidanceMaskFillColorPicker = memo(() => { borderRadius="full" borderWidth={1} bg={rgbColorToString(fill.color)} - w={8} - h={8} + w="22px" + h="22px" tabIndex={-1} - onDoubleClick={stopPropagation} // double click expands the layer /> diff --git a/invokeai/frontend/web/src/features/controlLayers/components/RegionalGuidance/RegionalGuidanceMenuItems.tsx b/invokeai/frontend/web/src/features/controlLayers/components/RegionalGuidance/RegionalGuidanceMenuItems.tsx index 9c495bb6db..2ae566688b 100644 --- a/invokeai/frontend/web/src/features/controlLayers/components/RegionalGuidance/RegionalGuidanceMenuItems.tsx +++ b/invokeai/frontend/web/src/features/controlLayers/components/RegionalGuidance/RegionalGuidanceMenuItems.tsx @@ -1,8 +1,9 @@ import { MenuDivider } from '@invoke-ai/ui-library'; import { CanvasEntityMenuItemsArrange } from 'features/controlLayers/components/common/CanvasEntityMenuItemsArrange'; import { CanvasEntityMenuItemsDelete } from 'features/controlLayers/components/common/CanvasEntityMenuItemsDelete'; -import { CanvasEntityMenuItemsReset } from 'features/controlLayers/components/common/CanvasEntityMenuItemsReset'; +import { CanvasEntityMenuItemsTransform } from 'features/controlLayers/components/common/CanvasEntityMenuItemsTransform'; import { RegionalGuidanceMenuItemsAddPromptsAndIPAdapter } from 'features/controlLayers/components/RegionalGuidance/RegionalGuidanceMenuItemsAddPromptsAndIPAdapter'; +import { RegionalGuidanceMenuItemsAutoNegative } from 'features/controlLayers/components/RegionalGuidance/RegionalGuidanceMenuItemsAutoNegative'; import { memo } from 'react'; export const RegionalGuidanceMenuItems = memo(() => { @@ -10,9 +11,11 @@ export const RegionalGuidanceMenuItems = memo(() => { <> + + + - ); diff --git a/invokeai/frontend/web/src/features/controlLayers/components/RegionalGuidance/RegionalGuidanceMenuItemsAutoNegative.tsx b/invokeai/frontend/web/src/features/controlLayers/components/RegionalGuidance/RegionalGuidanceMenuItemsAutoNegative.tsx new file mode 100644 index 0000000000..66ab80be8a --- /dev/null +++ b/invokeai/frontend/web/src/features/controlLayers/components/RegionalGuidance/RegionalGuidanceMenuItemsAutoNegative.tsx @@ -0,0 +1,26 @@ +import { MenuItem } from '@invoke-ai/ui-library'; +import { useAppDispatch, useAppSelector } from 'app/store/storeHooks'; +import { useEntityIdentifierContext } from 'features/controlLayers/contexts/EntityIdentifierContext'; +import { rgAutoNegativeToggled } from 'features/controlLayers/store/canvasV2Slice'; +import { selectRegionalGuidanceEntityOrThrow } from 'features/controlLayers/store/regionsReducers'; +import { memo, useCallback } from 'react'; +import { useTranslation } from 'react-i18next'; +import { PiSelectionInverseBold } from 'react-icons/pi'; + +export const RegionalGuidanceMenuItemsAutoNegative = memo(() => { + const { id } = useEntityIdentifierContext(); + const { t } = useTranslation(); + const dispatch = useAppDispatch(); + const autoNegative = useAppSelector((s) => selectRegionalGuidanceEntityOrThrow(s.canvasV2, id).autoNegative); + const onClick = useCallback(() => { + dispatch(rgAutoNegativeToggled({ id })); + }, [dispatch, id]); + + return ( + } onClick={onClick}> + {autoNegative ? t('controlLayers.disableAutoNegative') : t('controlLayers.enableAutoNegative')} + + ); +}); + +RegionalGuidanceMenuItemsAutoNegative.displayName = 'RegionalGuidanceMenuItemsAutoNegative'; diff --git a/invokeai/frontend/web/src/features/controlLayers/components/RegionalGuidance/RegionalGuidanceSettingsPopover.tsx b/invokeai/frontend/web/src/features/controlLayers/components/RegionalGuidance/RegionalGuidanceSettingsPopover.tsx deleted file mode 100644 index c67fdbe175..0000000000 --- a/invokeai/frontend/web/src/features/controlLayers/components/RegionalGuidance/RegionalGuidanceSettingsPopover.tsx +++ /dev/null @@ -1,63 +0,0 @@ -import { - Checkbox, - Flex, - FormControl, - FormLabel, - IconButton, - Popover, - PopoverArrow, - PopoverBody, - PopoverContent, - PopoverTrigger, -} from '@invoke-ai/ui-library'; -import { useAppDispatch, useAppSelector } from 'app/store/storeHooks'; -import { stopPropagation } from 'common/util/stopPropagation'; -import { useEntityIdentifierContext } from 'features/controlLayers/contexts/EntityIdentifierContext'; -import { rgAutoNegativeChanged } from 'features/controlLayers/store/canvasV2Slice'; -import { selectRegionalGuidanceEntityOrThrow } from 'features/controlLayers/store/regionsReducers'; -import type { ChangeEvent } from 'react'; -import { memo, useCallback } from 'react'; -import { useTranslation } from 'react-i18next'; -import { PiGearSixBold } from 'react-icons/pi'; - -export const RegionalGuidanceSettingsPopover = memo(() => { - const entityIdentifier = useEntityIdentifierContext(); - const { t } = useTranslation(); - const dispatch = useAppDispatch(); - const autoNegative = useAppSelector((s) => selectRegionalGuidanceEntityOrThrow(s.canvasV2, entityIdentifier.id).autoNegative); - const onChange = useCallback( - (e: ChangeEvent) => { - dispatch(rgAutoNegativeChanged({ id: entityIdentifier.id, autoNegative: e.target.checked ? 'invert' : 'off' })); - }, - [dispatch, entityIdentifier.id] - ); - - return ( - - - } - onDoubleClick={stopPropagation} // double click expands the layer - /> - - - - - - - - {t('controlLayers.autoNegative')} - - - - - - - - ); -}); - -RegionalGuidanceSettingsPopover.displayName = 'RegionalGuidanceSettingsPopover'; diff --git a/invokeai/frontend/web/src/features/controlLayers/components/common/BeginEndStepPct.tsx b/invokeai/frontend/web/src/features/controlLayers/components/common/BeginEndStepPct.tsx index 4f75c0bb97..4a3c4b949d 100644 --- a/invokeai/frontend/web/src/features/controlLayers/components/common/BeginEndStepPct.tsx +++ b/invokeai/frontend/web/src/features/controlLayers/components/common/BeginEndStepPct.tsx @@ -18,7 +18,7 @@ export const BeginEndStepPct = memo(({ beginEndStepPct, onChange }: Props) => { }, [onChange]); return ( - + {t('controlnet.beginEndStepPercentShort')} diff --git a/invokeai/frontend/web/src/features/controlLayers/components/common/CanvasEntityEnabledToggle.tsx b/invokeai/frontend/web/src/features/controlLayers/components/common/CanvasEntityEnabledToggle.tsx index fbe310521b..bd74304418 100644 --- a/invokeai/frontend/web/src/features/controlLayers/components/common/CanvasEntityEnabledToggle.tsx +++ b/invokeai/frontend/web/src/features/controlLayers/components/common/CanvasEntityEnabledToggle.tsx @@ -26,7 +26,6 @@ export const CanvasEntityEnabledToggle = memo(() => { variant="outline" icon={isEnabled ? : undefined} onClick={onClick} - colorScheme={isEnabled ? 'invokeBlue' : 'base'} onDoubleClick={stopPropagation} // double click expands the layer /> ); diff --git a/invokeai/frontend/web/src/features/controlLayers/components/common/CanvasEntityHeader.tsx b/invokeai/frontend/web/src/features/controlLayers/components/common/CanvasEntityHeader.tsx index d8e5955425..4fe8867fd2 100644 --- a/invokeai/frontend/web/src/features/controlLayers/components/common/CanvasEntityHeader.tsx +++ b/invokeai/frontend/web/src/features/controlLayers/components/common/CanvasEntityHeader.tsx @@ -2,6 +2,7 @@ import type { FlexProps } from '@invoke-ai/ui-library'; import { ContextMenu, Flex, MenuList } from '@invoke-ai/ui-library'; import { ControlLayerMenuItems } from 'features/controlLayers/components/ControlLayer/ControlLayerMenuItems'; import { InpaintMaskMenuItems } from 'features/controlLayers/components/InpaintMask/InpaintMaskMenuItems'; +import { IPAdapterMenuItems } from 'features/controlLayers/components/IPAdapter/IPAdapterMenuItems'; import { RasterLayerMenuItems } from 'features/controlLayers/components/RasterLayer/RasterLayerMenuItems'; import { RegionalGuidanceMenuItems } from 'features/controlLayers/components/RegionalGuidance/RegionalGuidanceMenuItems'; import { useEntityIdentifierContext } from 'features/controlLayers/contexts/EntityIdentifierContext'; @@ -44,7 +45,11 @@ export const CanvasEntityHeader = memo(({ children, ...rest }: FlexProps) => { } if (entityIdentifier.type === 'ip_adapter') { - return {/* no items for IP adapter yet */}; + return ( + + + + ); } assert(false, 'Unhandled entity type'); @@ -53,7 +58,7 @@ export const CanvasEntityHeader = memo(({ children, ...rest }: FlexProps) => { return ( {(ref) => ( - + {children} )} diff --git a/invokeai/frontend/web/src/features/controlLayers/components/common/CanvasEntityMenuItemsArrange.tsx b/invokeai/frontend/web/src/features/controlLayers/components/common/CanvasEntityMenuItemsArrange.tsx index 8bcb88f623..6342613ea5 100644 --- a/invokeai/frontend/web/src/features/controlLayers/components/common/CanvasEntityMenuItemsArrange.tsx +++ b/invokeai/frontend/web/src/features/controlLayers/components/common/CanvasEntityMenuItemsArrange.tsx @@ -33,6 +33,16 @@ const getIndexAndCount = ( index: canvasV2.regions.entities.findIndex((entity) => entity.id === id), count: canvasV2.regions.entities.length, }; + } else if (type === 'inpaint_mask') { + return { + index: canvasV2.inpaintMasks.entities.findIndex((entity) => entity.id === id), + count: canvasV2.inpaintMasks.entities.length, + }; + } else if (type === 'ip_adapter') { + return { + index: canvasV2.ipAdapters.entities.findIndex((entity) => entity.id === id), + count: canvasV2.ipAdapters.entities.length, + }; } else { return { index: -1, diff --git a/invokeai/frontend/web/src/features/controlLayers/components/common/CanvasEntitySettingsWrapper.tsx b/invokeai/frontend/web/src/features/controlLayers/components/common/CanvasEntitySettingsWrapper.tsx index b4ddd01703..a6e196c9b8 100644 --- a/invokeai/frontend/web/src/features/controlLayers/components/common/CanvasEntitySettingsWrapper.tsx +++ b/invokeai/frontend/web/src/features/controlLayers/components/common/CanvasEntitySettingsWrapper.tsx @@ -4,7 +4,7 @@ import { memo } from 'react'; export const CanvasEntitySettingsWrapper = memo(({ children }: PropsWithChildren) => { return ( - + {children} ); diff --git a/invokeai/frontend/web/src/features/controlLayers/store/canvasV2Slice.ts b/invokeai/frontend/web/src/features/controlLayers/store/canvasV2Slice.ts index cae88826a8..a6f9ba687b 100644 --- a/invokeai/frontend/web/src/features/controlLayers/store/canvasV2Slice.ts +++ b/invokeai/frontend/web/src/features/controlLayers/store/canvasV2Slice.ts @@ -341,15 +341,7 @@ export const canvasV2Slice = createSlice({ if (!entity) { return; } - if (entity.type === 'raster_layer') { - moveOneToEnd(state.rasterLayers.entities, entity); - } else if (entity.type === 'control_layer') { - moveOneToEnd(state.controlLayers.entities, entity); - } else if (entity.type === 'regional_guidance') { - moveOneToEnd(state.regions.entities, entity); - } else if (entity.type === 'inpaint_mask') { - moveOneToEnd(state.inpaintMasks.entities, entity); - } + moveOneToEnd(selectAllEntitiesOfType(state, entity.type), entity); }, entityArrangedToFront: (state, action: PayloadAction) => { const { entityIdentifier } = action.payload; @@ -357,15 +349,7 @@ export const canvasV2Slice = createSlice({ if (!entity) { return; } - if (entity.type === 'raster_layer') { - moveToEnd(state.rasterLayers.entities, entity); - } else if (entity.type === 'control_layer') { - moveToEnd(state.controlLayers.entities, entity); - } else if (entity.type === 'regional_guidance') { - moveToEnd(state.regions.entities, entity); - } else if (entity.type === 'inpaint_mask') { - moveToEnd(state.inpaintMasks.entities, entity); - } + moveToEnd(selectAllEntitiesOfType(state, entity.type), entity); }, entityArrangedBackwardOne: (state, action: PayloadAction) => { const { entityIdentifier } = action.payload; @@ -373,15 +357,7 @@ export const canvasV2Slice = createSlice({ if (!entity) { return; } - if (entity.type === 'raster_layer') { - moveOneToStart(state.rasterLayers.entities, entity); - } else if (entity.type === 'control_layer') { - moveOneToStart(state.controlLayers.entities, entity); - } else if (entity.type === 'regional_guidance') { - moveOneToStart(state.regions.entities, entity); - } else if (entity.type === 'inpaint_mask') { - moveOneToStart(state.inpaintMasks.entities, entity); - } + moveOneToStart(selectAllEntitiesOfType(state, entity.type), entity); }, entityArrangedToBack: (state, action: PayloadAction) => { const { entityIdentifier } = action.payload; @@ -389,15 +365,7 @@ export const canvasV2Slice = createSlice({ if (!entity) { return; } - if (entity.type === 'raster_layer') { - moveToStart(state.rasterLayers.entities, entity); - } else if (entity.type === 'control_layer') { - moveToStart(state.controlLayers.entities, entity); - } else if (entity.type === 'regional_guidance') { - moveToStart(state.regions.entities, entity); - } else if (entity.type === 'inpaint_mask') { - moveToStart(state.inpaintMasks.entities, entity); - } + moveToStart(selectAllEntitiesOfType(state, entity.type), entity); }, entityOpacityChanged: (state, action: PayloadAction>) => { const { entityIdentifier, opacity } = action.payload; @@ -538,7 +506,7 @@ export const { rgNegativePromptChanged, rgFillColorChanged, rgFillStyleChanged, - rgAutoNegativeChanged, + rgAutoNegativeToggled, rgIPAdapterAdded, rgIPAdapterDeleted, rgIPAdapterImageChanged, diff --git a/invokeai/frontend/web/src/features/controlLayers/store/regionsReducers.ts b/invokeai/frontend/web/src/features/controlLayers/store/regionsReducers.ts index 279267ee2b..3971ee3b17 100644 --- a/invokeai/frontend/web/src/features/controlLayers/store/regionsReducers.ts +++ b/invokeai/frontend/web/src/features/controlLayers/store/regionsReducers.ts @@ -10,7 +10,6 @@ import type { } from 'features/controlLayers/store/types'; import { imageDTOToImageWithDims } from 'features/controlLayers/store/types'; import { zModelIdentifierField } from 'features/nodes/types/common'; -import type { ParameterAutoNegative } from 'features/parameters/types/parameterSchemas'; import { isEqual } from 'lodash-es'; import type { ImageDTO, IPAdapterModelConfig } from 'services/api/types'; import { assert } from 'tsafe'; @@ -71,7 +70,7 @@ export const regionsReducers = { }, opacity: 0.5, position: { x: 0, y: 0 }, - autoNegative: 'invert', + autoNegative: true, positivePrompt: '', negativePrompt: null, ipAdapters: [], @@ -122,13 +121,13 @@ export const regionsReducers = { entity.fill.style = style; }, - rgAutoNegativeChanged: (state, action: PayloadAction<{ id: string; autoNegative: ParameterAutoNegative }>) => { - const { id, autoNegative } = action.payload; + rgAutoNegativeToggled: (state, action: PayloadAction<{ id: string }>) => { + const { id } = action.payload; const rg = selectRegionalGuidanceEntity(state, id); if (!rg) { return; } - rg.autoNegative = autoNegative; + rg.autoNegative = !rg.autoNegative; }, rgIPAdapterAdded: (state, action: PayloadAction<{ id: string; ipAdapter: RegionalGuidanceIPAdapterConfig }>) => { const { id, ipAdapter } = action.payload; diff --git a/invokeai/frontend/web/src/features/controlLayers/store/types.ts b/invokeai/frontend/web/src/features/controlLayers/store/types.ts index d9b7d52a53..0878d155bc 100644 --- a/invokeai/frontend/web/src/features/controlLayers/store/types.ts +++ b/invokeai/frontend/web/src/features/controlLayers/store/types.ts @@ -26,7 +26,6 @@ import type { ParameterWidth, } from 'features/parameters/types/parameterSchemas'; import { - zAutoNegative, zParameterNegativePrompt, zParameterPositivePrompt, } from 'features/parameters/types/parameterSchemas'; @@ -671,7 +670,7 @@ export const zCanvasRegionalGuidanceState = z.object({ positivePrompt: zParameterPositivePrompt.nullable(), negativePrompt: zParameterNegativePrompt.nullable(), ipAdapters: z.array(zRegionalGuidanceIPAdapterConfig), - autoNegative: zAutoNegative, + autoNegative: z.boolean(), }); export type CanvasRegionalGuidanceState = z.infer;