diff --git a/invokeai/frontend/web/public/locales/en.json b/invokeai/frontend/web/public/locales/en.json index 36e915c4fc..814ad4de0d 100644 --- a/invokeai/frontend/web/public/locales/en.json +++ b/invokeai/frontend/web/public/locales/en.json @@ -1533,8 +1533,8 @@ "addPositivePrompt": "Add $t(common.positivePrompt)", "addNegativePrompt": "Add $t(common.negativePrompt)", "addIPAdapter": "Add $t(common.ipAdapter)", - "maskedGuidance": "Masked Guidance", - "maskedGuidanceLayer": "$t(controlLayers.maskedGuidance) $t(unifiedCanvas.layer)", + "regionalGuidance": "Regional Guidance", + "regionalGuidanceLayer": "$t(controlLayers.regionalGuidance) $t(unifiedCanvas.layer)", "controlNetLayer": "$t(common.controlNet) $t(unifiedCanvas.layer)", "ipAdapterLayer": "$t(common.ipAdapter) $t(unifiedCanvas.layer)", "opacity": "Opacity" diff --git a/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/regionalControlToControlAdapterBridge.ts b/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/regionalControlToControlAdapterBridge.ts index d90dfb97bf..8a9191f90b 100644 --- a/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/regionalControlToControlAdapterBridge.ts +++ b/invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/regionalControlToControlAdapterBridge.ts @@ -8,9 +8,9 @@ import { controlAdapterLayerAdded, ipAdapterLayerAdded, layerDeleted, - maskedGuidanceLayerAdded, maskLayerIPAdapterAdded, maskLayerIPAdapterDeleted, + regionalGuidanceLayerAdded, } from 'features/controlLayers/store/controlLayersSlice'; import type { Layer } from 'features/controlLayers/store/types'; import { modelConfigsAdapterSelectors, modelsApi } from 'services/api/endpoints/models'; @@ -33,7 +33,7 @@ export const addRegionalControlToControlAdapterBridge = (startAppListening: AppS const type = action.payload; const layerId = uuidv4(); if (type === 'regional_guidance_layer') { - dispatch(maskedGuidanceLayerAdded({ layerId })); + dispatch(regionalGuidanceLayerAdded({ layerId })); return; } diff --git a/invokeai/frontend/web/src/features/controlLayers/components/AddLayerButton.tsx b/invokeai/frontend/web/src/features/controlLayers/components/AddLayerButton.tsx index 9c324b1f9e..c1d95be10f 100644 --- a/invokeai/frontend/web/src/features/controlLayers/components/AddLayerButton.tsx +++ b/invokeai/frontend/web/src/features/controlLayers/components/AddLayerButton.tsx @@ -8,7 +8,7 @@ import { PiPlusBold } from 'react-icons/pi'; export const AddLayerButton = memo(() => { const { t } = useTranslation(); const dispatch = useAppDispatch(); - const addMaskedGuidanceLayer = useCallback(() => { + const addRegionalGuidanceLayer = useCallback(() => { dispatch(guidanceLayerAdded('regional_guidance_layer')); }, [dispatch]); const addControlNetLayer = useCallback(() => { @@ -24,7 +24,7 @@ export const AddLayerButton = memo(() => { {t('controlLayers.addLayer')} - {t('controlLayers.maskedGuidanceLayer')} + {t('controlLayers.regionalGuidanceLayer')} {t('controlLayers.controlNetLayer')} {t('controlLayers.ipAdapterLayer')} diff --git a/invokeai/frontend/web/src/features/controlLayers/components/AddPromptButtons.tsx b/invokeai/frontend/web/src/features/controlLayers/components/AddPromptButtons.tsx index 81b119c7c3..51e5f43b24 100644 --- a/invokeai/frontend/web/src/features/controlLayers/components/AddPromptButtons.tsx +++ b/invokeai/frontend/web/src/features/controlLayers/components/AddPromptButtons.tsx @@ -3,7 +3,7 @@ import { createMemoizedSelector } from 'app/store/createMemoizedSelector'; import { guidanceLayerIPAdapterAdded } from 'app/store/middleware/listenerMiddleware/listeners/regionalControlToControlAdapterBridge'; import { useAppDispatch, useAppSelector } from 'app/store/storeHooks'; import { - isMaskedGuidanceLayer, + isRegionalGuidanceLayer, maskLayerNegativePromptChanged, maskLayerPositivePromptChanged, selectControlLayersSlice, @@ -23,7 +23,7 @@ export const AddPromptButtons = ({ layerId }: AddPromptButtonProps) => { () => createMemoizedSelector(selectControlLayersSlice, (controlLayers) => { const layer = controlLayers.present.layers.find((l) => l.id === layerId); - assert(isMaskedGuidanceLayer(layer), `Layer ${layerId} not found or not an RP layer`); + assert(isRegionalGuidanceLayer(layer), `Layer ${layerId} not found or not an RP layer`); return { canAddPositivePrompt: layer.positivePrompt === null, canAddNegativePrompt: layer.negativePrompt === null, diff --git a/invokeai/frontend/web/src/features/controlLayers/components/ControlAdapterLayerListItem.tsx b/invokeai/frontend/web/src/features/controlLayers/components/CALayerListItem.tsx similarity index 78% rename from invokeai/frontend/web/src/features/controlLayers/components/ControlAdapterLayerListItem.tsx rename to invokeai/frontend/web/src/features/controlLayers/components/CALayerListItem.tsx index 5b0859a174..28ef0866fb 100644 --- a/invokeai/frontend/web/src/features/controlLayers/components/ControlAdapterLayerListItem.tsx +++ b/invokeai/frontend/web/src/features/controlLayers/components/CALayerListItem.tsx @@ -3,10 +3,10 @@ import { createMemoizedSelector } from 'app/store/createMemoizedSelector'; import { useAppDispatch, useAppSelector } from 'app/store/storeHooks'; import CALayerOpacity from 'features/controlLayers/components/CALayerOpacity'; import ControlAdapterLayerConfig from 'features/controlLayers/components/controlAdapterOverrides/ControlAdapterLayerConfig'; +import { LayerDeleteButton } from 'features/controlLayers/components/LayerDeleteButton'; +import { LayerMenu } from 'features/controlLayers/components/LayerMenu'; import { LayerTitle } from 'features/controlLayers/components/LayerTitle'; -import { RPLayerDeleteButton } from 'features/controlLayers/components/RPLayerDeleteButton'; -import { RPLayerMenu } from 'features/controlLayers/components/RPLayerMenu'; -import { RPLayerVisibilityToggle } from 'features/controlLayers/components/RPLayerVisibilityToggle'; +import { LayerVisibilityToggle } from 'features/controlLayers/components/LayerVisibilityToggle'; import { isControlAdapterLayer, layerSelected, @@ -19,7 +19,7 @@ type Props = { layerId: string; }; -export const ControlAdapterLayerListItem = memo(({ layerId }: Props) => { +export const CALayerListItem = memo(({ layerId }: Props) => { const dispatch = useAppDispatch(); const selector = useMemo( () => @@ -49,12 +49,12 @@ export const ControlAdapterLayerListItem = memo(({ layerId }: Props) => { > - + - - + + @@ -62,4 +62,4 @@ export const ControlAdapterLayerListItem = memo(({ layerId }: Props) => { ); }); -ControlAdapterLayerListItem.displayName = 'ControlAdapterLayerListItem'; +CALayerListItem.displayName = 'CALayerListItem'; diff --git a/invokeai/frontend/web/src/features/controlLayers/components/ControlLayersPanelContent.tsx b/invokeai/frontend/web/src/features/controlLayers/components/ControlLayersPanelContent.tsx index 4d1545badb..e2865be356 100644 --- a/invokeai/frontend/web/src/features/controlLayers/components/ControlLayersPanelContent.tsx +++ b/invokeai/frontend/web/src/features/controlLayers/components/ControlLayersPanelContent.tsx @@ -4,10 +4,10 @@ import { createMemoizedSelector } from 'app/store/createMemoizedSelector'; import { useAppSelector } from 'app/store/storeHooks'; import ScrollableContent from 'common/components/OverlayScrollbars/ScrollableContent'; import { AddLayerButton } from 'features/controlLayers/components/AddLayerButton'; -import { ControlAdapterLayerListItem } from 'features/controlLayers/components/ControlAdapterLayerListItem'; +import { CALayerListItem } from 'features/controlLayers/components/CALayerListItem'; import { DeleteAllLayersButton } from 'features/controlLayers/components/DeleteAllLayersButton'; -import { IPAdapterLayerListItem } from 'features/controlLayers/components/IPAdapterLayerListItem'; -import { MaskedGuidanceLayerListItem } from 'features/controlLayers/components/MaskedGuidanceLayerListItem'; +import { IPLayerListItem } from 'features/controlLayers/components/IPLayerListItem'; +import { RGLayerListItem } from 'features/controlLayers/components/RGLayerListItem'; import { isRenderableLayer, selectControlLayersSlice } from 'features/controlLayers/store/controlLayersSlice'; import type { Layer } from 'features/controlLayers/store/types'; import { partition } from 'lodash-es'; @@ -46,13 +46,13 @@ type LayerWrapperProps = { const LayerWrapper = memo(({ id, type }: LayerWrapperProps) => { if (type === 'regional_guidance_layer') { - return ; + return ; } if (type === 'control_adapter_layer') { - return ; + return ; } if (type === 'ip_adapter_layer') { - return ; + return ; } }); diff --git a/invokeai/frontend/web/src/features/controlLayers/components/IPAdapterLayerListItem.tsx b/invokeai/frontend/web/src/features/controlLayers/components/IPLayerListItem.tsx similarity index 76% rename from invokeai/frontend/web/src/features/controlLayers/components/IPAdapterLayerListItem.tsx rename to invokeai/frontend/web/src/features/controlLayers/components/IPLayerListItem.tsx index 188a7c1f4f..efb4156137 100644 --- a/invokeai/frontend/web/src/features/controlLayers/components/IPAdapterLayerListItem.tsx +++ b/invokeai/frontend/web/src/features/controlLayers/components/IPLayerListItem.tsx @@ -2,9 +2,9 @@ import { Flex, Spacer } from '@invoke-ai/ui-library'; import { createMemoizedSelector } from 'app/store/createMemoizedSelector'; import { useAppSelector } from 'app/store/storeHooks'; import ControlAdapterLayerConfig from 'features/controlLayers/components/controlAdapterOverrides/ControlAdapterLayerConfig'; +import { LayerDeleteButton } from 'features/controlLayers/components/LayerDeleteButton'; import { LayerTitle } from 'features/controlLayers/components/LayerTitle'; -import { RPLayerDeleteButton } from 'features/controlLayers/components/RPLayerDeleteButton'; -import { RPLayerVisibilityToggle } from 'features/controlLayers/components/RPLayerVisibilityToggle'; +import { LayerVisibilityToggle } from 'features/controlLayers/components/LayerVisibilityToggle'; import { isIPAdapterLayer, selectControlLayersSlice } from 'features/controlLayers/store/controlLayersSlice'; import { memo, useMemo } from 'react'; import { assert } from 'tsafe'; @@ -13,7 +13,7 @@ type Props = { layerId: string; }; -export const IPAdapterLayerListItem = memo(({ layerId }: Props) => { +export const IPLayerListItem = memo(({ layerId }: Props) => { const selector = useMemo( () => createMemoizedSelector(selectControlLayersSlice, (controlLayers) => { @@ -28,10 +28,10 @@ export const IPAdapterLayerListItem = memo(({ layerId }: Props) => { - + - + @@ -39,4 +39,4 @@ export const IPAdapterLayerListItem = memo(({ layerId }: Props) => { ); }); -IPAdapterLayerListItem.displayName = 'IPAdapterLayerListItem'; +IPLayerListItem.displayName = 'IPLayerListItem'; diff --git a/invokeai/frontend/web/src/features/controlLayers/components/RPLayerDeleteButton.tsx b/invokeai/frontend/web/src/features/controlLayers/components/LayerDeleteButton.tsx similarity index 86% rename from invokeai/frontend/web/src/features/controlLayers/components/RPLayerDeleteButton.tsx rename to invokeai/frontend/web/src/features/controlLayers/components/LayerDeleteButton.tsx index 96aba546bc..fe9c9ecc2a 100644 --- a/invokeai/frontend/web/src/features/controlLayers/components/RPLayerDeleteButton.tsx +++ b/invokeai/frontend/web/src/features/controlLayers/components/LayerDeleteButton.tsx @@ -7,7 +7,7 @@ import { PiTrashSimpleBold } from 'react-icons/pi'; type Props = { layerId: string }; -export const RPLayerDeleteButton = memo(({ layerId }: Props) => { +export const LayerDeleteButton = memo(({ layerId }: Props) => { const { t } = useTranslation(); const dispatch = useAppDispatch(); const deleteLayer = useCallback(() => { @@ -25,4 +25,4 @@ export const RPLayerDeleteButton = memo(({ layerId }: Props) => { ); }); -RPLayerDeleteButton.displayName = 'RPLayerDeleteButton'; +LayerDeleteButton.displayName = 'LayerDeleteButton'; diff --git a/invokeai/frontend/web/src/features/controlLayers/components/RPLayerMenu.tsx b/invokeai/frontend/web/src/features/controlLayers/components/LayerMenu.tsx similarity index 79% rename from invokeai/frontend/web/src/features/controlLayers/components/RPLayerMenu.tsx rename to invokeai/frontend/web/src/features/controlLayers/components/LayerMenu.tsx index 95879701c8..cd86fb8cd1 100644 --- a/invokeai/frontend/web/src/features/controlLayers/components/RPLayerMenu.tsx +++ b/invokeai/frontend/web/src/features/controlLayers/components/LayerMenu.tsx @@ -1,7 +1,7 @@ import { IconButton, Menu, MenuButton, MenuDivider, MenuItem, MenuList } from '@invoke-ai/ui-library'; import { useAppDispatch } from 'app/store/storeHooks'; -import { RPLayerMenuArrangeActions } from 'features/controlLayers/components/RPLayerMenuArrangeActions'; -import { RPLayerMenuMaskedGuidanceActions } from 'features/controlLayers/components/RPLayerMenuMaskedGuidanceActions'; +import { LayerMenuArrangeActions } from 'features/controlLayers/components/LayerMenuArrangeActions'; +import { LayerMenuRGActions } from 'features/controlLayers/components/LayerMenuRGActions'; import { useLayerType } from 'features/controlLayers/hooks/layerStateHooks'; import { layerDeleted, layerReset } from 'features/controlLayers/store/controlLayersSlice'; import { memo, useCallback } from 'react'; @@ -10,7 +10,7 @@ import { PiArrowCounterClockwiseBold, PiDotsThreeVerticalBold, PiTrashSimpleBold type Props = { layerId: string }; -export const RPLayerMenu = memo(({ layerId }: Props) => { +export const LayerMenu = memo(({ layerId }: Props) => { const dispatch = useAppDispatch(); const { t } = useTranslation(); const layerType = useLayerType(layerId); @@ -26,13 +26,13 @@ export const RPLayerMenu = memo(({ layerId }: Props) => { {layerType === 'regional_guidance_layer' && ( <> - + )} {(layerType === 'regional_guidance_layer' || layerType === 'control_adapter_layer') && ( <> - + )} @@ -49,4 +49,4 @@ export const RPLayerMenu = memo(({ layerId }: Props) => { ); }); -RPLayerMenu.displayName = 'RPLayerMenu'; +LayerMenu.displayName = 'LayerMenu'; diff --git a/invokeai/frontend/web/src/features/controlLayers/components/RPLayerMenuArrangeActions.tsx b/invokeai/frontend/web/src/features/controlLayers/components/LayerMenuArrangeActions.tsx similarity index 94% rename from invokeai/frontend/web/src/features/controlLayers/components/RPLayerMenuArrangeActions.tsx rename to invokeai/frontend/web/src/features/controlLayers/components/LayerMenuArrangeActions.tsx index fab3a47adb..9c51671a39 100644 --- a/invokeai/frontend/web/src/features/controlLayers/components/RPLayerMenuArrangeActions.tsx +++ b/invokeai/frontend/web/src/features/controlLayers/components/LayerMenuArrangeActions.tsx @@ -16,7 +16,7 @@ import { assert } from 'tsafe'; type Props = { layerId: string }; -export const RPLayerMenuArrangeActions = memo(({ layerId }: Props) => { +export const LayerMenuArrangeActions = memo(({ layerId }: Props) => { const dispatch = useAppDispatch(); const { t } = useTranslation(); const selectValidActions = useMemo( @@ -66,4 +66,4 @@ export const RPLayerMenuArrangeActions = memo(({ layerId }: Props) => { ); }); -RPLayerMenuArrangeActions.displayName = 'RPLayerMenuArrangeActions'; +LayerMenuArrangeActions.displayName = 'LayerMenuArrangeActions'; diff --git a/invokeai/frontend/web/src/features/controlLayers/components/RPLayerMenuMaskedGuidanceActions.tsx b/invokeai/frontend/web/src/features/controlLayers/components/LayerMenuRGActions.tsx similarity index 88% rename from invokeai/frontend/web/src/features/controlLayers/components/RPLayerMenuMaskedGuidanceActions.tsx rename to invokeai/frontend/web/src/features/controlLayers/components/LayerMenuRGActions.tsx index a3da006d0b..cdcb4d99b3 100644 --- a/invokeai/frontend/web/src/features/controlLayers/components/RPLayerMenuMaskedGuidanceActions.tsx +++ b/invokeai/frontend/web/src/features/controlLayers/components/LayerMenuRGActions.tsx @@ -3,7 +3,7 @@ import { createMemoizedSelector } from 'app/store/createMemoizedSelector'; import { guidanceLayerIPAdapterAdded } from 'app/store/middleware/listenerMiddleware/listeners/regionalControlToControlAdapterBridge'; import { useAppDispatch, useAppSelector } from 'app/store/storeHooks'; import { - isMaskedGuidanceLayer, + isRegionalGuidanceLayer, maskLayerNegativePromptChanged, maskLayerPositivePromptChanged, selectControlLayersSlice, @@ -15,14 +15,14 @@ import { assert } from 'tsafe'; type Props = { layerId: string }; -export const RPLayerMenuMaskedGuidanceActions = memo(({ layerId }: Props) => { +export const LayerMenuRGActions = memo(({ layerId }: Props) => { const dispatch = useAppDispatch(); const { t } = useTranslation(); const selectValidActions = useMemo( () => createMemoizedSelector(selectControlLayersSlice, (controlLayers) => { const layer = controlLayers.present.layers.find((l) => l.id === layerId); - assert(isMaskedGuidanceLayer(layer), `Layer ${layerId} not found or not an RP layer`); + assert(isRegionalGuidanceLayer(layer), `Layer ${layerId} not found or not an RP layer`); return { canAddPositivePrompt: layer.positivePrompt === null, canAddNegativePrompt: layer.negativePrompt === null, @@ -55,4 +55,4 @@ export const RPLayerMenuMaskedGuidanceActions = memo(({ layerId }: Props) => { ); }); -RPLayerMenuMaskedGuidanceActions.displayName = 'RPLayerMenuMaskedGuidanceActions'; +LayerMenuRGActions.displayName = 'LayerMenuRGActions'; diff --git a/invokeai/frontend/web/src/features/controlLayers/components/LayerTitle.tsx b/invokeai/frontend/web/src/features/controlLayers/components/LayerTitle.tsx index a192b9e865..523bae0490 100644 --- a/invokeai/frontend/web/src/features/controlLayers/components/LayerTitle.tsx +++ b/invokeai/frontend/web/src/features/controlLayers/components/LayerTitle.tsx @@ -11,7 +11,7 @@ export const LayerTitle = memo(({ type }: Props) => { const { t } = useTranslation(); const title = useMemo(() => { if (type === 'regional_guidance_layer') { - return t('controlLayers.maskedGuidance'); + return t('controlLayers.regionalGuidance'); } else if (type === 'control_adapter_layer') { return t('common.controlNet'); } else if (type === 'ip_adapter_layer') { diff --git a/invokeai/frontend/web/src/features/controlLayers/components/RPLayerVisibilityToggle.tsx b/invokeai/frontend/web/src/features/controlLayers/components/LayerVisibilityToggle.tsx similarity index 87% rename from invokeai/frontend/web/src/features/controlLayers/components/RPLayerVisibilityToggle.tsx rename to invokeai/frontend/web/src/features/controlLayers/components/LayerVisibilityToggle.tsx index 7a39f5d95e..77fa8cf8e8 100644 --- a/invokeai/frontend/web/src/features/controlLayers/components/RPLayerVisibilityToggle.tsx +++ b/invokeai/frontend/web/src/features/controlLayers/components/LayerVisibilityToggle.tsx @@ -10,7 +10,7 @@ type Props = { layerId: string; }; -export const RPLayerVisibilityToggle = memo(({ layerId }: Props) => { +export const LayerVisibilityToggle = memo(({ layerId }: Props) => { const { t } = useTranslation(); const dispatch = useAppDispatch(); const isVisible = useLayerIsVisible(layerId); @@ -31,4 +31,4 @@ export const RPLayerVisibilityToggle = memo(({ layerId }: Props) => { ); }); -RPLayerVisibilityToggle.displayName = 'RPLayerVisibilityToggle'; +LayerVisibilityToggle.displayName = 'LayerVisibilityToggle'; diff --git a/invokeai/frontend/web/src/features/controlLayers/components/RPLayerAutoNegativeCheckbox.tsx b/invokeai/frontend/web/src/features/controlLayers/components/RGLayerAutoNegativeCheckbox.tsx similarity index 83% rename from invokeai/frontend/web/src/features/controlLayers/components/RPLayerAutoNegativeCheckbox.tsx rename to invokeai/frontend/web/src/features/controlLayers/components/RGLayerAutoNegativeCheckbox.tsx index 32a60039f6..6f03d4b28d 100644 --- a/invokeai/frontend/web/src/features/controlLayers/components/RPLayerAutoNegativeCheckbox.tsx +++ b/invokeai/frontend/web/src/features/controlLayers/components/RGLayerAutoNegativeCheckbox.tsx @@ -2,7 +2,7 @@ import { Checkbox, FormControl, FormLabel } from '@invoke-ai/ui-library'; import { createSelector } from '@reduxjs/toolkit'; import { useAppDispatch, useAppSelector } from 'app/store/storeHooks'; import { - isMaskedGuidanceLayer, + isRegionalGuidanceLayer, maskLayerAutoNegativeChanged, selectControlLayersSlice, } from 'features/controlLayers/store/controlLayersSlice'; @@ -20,7 +20,7 @@ const useAutoNegative = (layerId: string) => { () => createSelector(selectControlLayersSlice, (controlLayers) => { const layer = controlLayers.present.layers.find((l) => l.id === layerId); - assert(isMaskedGuidanceLayer(layer), `Layer ${layerId} not found or not an RP layer`); + assert(isRegionalGuidanceLayer(layer), `Layer ${layerId} not found or not an RP layer`); return layer.autoNegative; }), [layerId] @@ -29,7 +29,7 @@ const useAutoNegative = (layerId: string) => { return autoNegative; }; -export const MaskedGuidanceLayerAutoNegativeCheckbox = memo(({ layerId }: Props) => { +export const RGLayerAutoNegativeCheckbox = memo(({ layerId }: Props) => { const { t } = useTranslation(); const dispatch = useAppDispatch(); const autoNegative = useAutoNegative(layerId); @@ -48,4 +48,4 @@ export const MaskedGuidanceLayerAutoNegativeCheckbox = memo(({ layerId }: Props) ); }); -MaskedGuidanceLayerAutoNegativeCheckbox.displayName = 'MaskedGuidanceLayerAutoNegativeCheckbox'; +RGLayerAutoNegativeCheckbox.displayName = 'RGLayerAutoNegativeCheckbox'; diff --git a/invokeai/frontend/web/src/features/controlLayers/components/RPLayerColorPicker.tsx b/invokeai/frontend/web/src/features/controlLayers/components/RGLayerColorPicker.tsx similarity index 88% rename from invokeai/frontend/web/src/features/controlLayers/components/RPLayerColorPicker.tsx rename to invokeai/frontend/web/src/features/controlLayers/components/RGLayerColorPicker.tsx index e1a20d0210..04c6fbf0a2 100644 --- a/invokeai/frontend/web/src/features/controlLayers/components/RPLayerColorPicker.tsx +++ b/invokeai/frontend/web/src/features/controlLayers/components/RGLayerColorPicker.tsx @@ -4,7 +4,7 @@ import { useAppDispatch, useAppSelector } from 'app/store/storeHooks'; import RgbColorPicker from 'common/components/RgbColorPicker'; import { rgbColorToString } from 'features/canvas/util/colorToString'; import { - isMaskedGuidanceLayer, + isRegionalGuidanceLayer, maskLayerPreviewColorChanged, selectControlLayersSlice, } from 'features/controlLayers/store/controlLayersSlice'; @@ -17,13 +17,13 @@ type Props = { layerId: string; }; -export const RPLayerColorPicker = memo(({ layerId }: Props) => { +export const RGLayerColorPicker = memo(({ layerId }: Props) => { const { t } = useTranslation(); const selectColor = useMemo( () => createMemoizedSelector(selectControlLayersSlice, (controlLayers) => { const layer = controlLayers.present.layers.find((l) => l.id === layerId); - assert(isMaskedGuidanceLayer(layer), `Layer ${layerId} not found or not an vector mask layer`); + assert(isRegionalGuidanceLayer(layer), `Layer ${layerId} not found or not an vector mask layer`); return layer.previewColor; }), [layerId] @@ -64,4 +64,4 @@ export const RPLayerColorPicker = memo(({ layerId }: Props) => { ); }); -RPLayerColorPicker.displayName = 'RPLayerColorPicker'; +RGLayerColorPicker.displayName = 'RGLayerColorPicker'; diff --git a/invokeai/frontend/web/src/features/controlLayers/components/RPLayerIPAdapterList.tsx b/invokeai/frontend/web/src/features/controlLayers/components/RGLayerIPAdapterList.tsx similarity index 76% rename from invokeai/frontend/web/src/features/controlLayers/components/RPLayerIPAdapterList.tsx rename to invokeai/frontend/web/src/features/controlLayers/components/RGLayerIPAdapterList.tsx index 4b37bbef7a..07a8e0e334 100644 --- a/invokeai/frontend/web/src/features/controlLayers/components/RPLayerIPAdapterList.tsx +++ b/invokeai/frontend/web/src/features/controlLayers/components/RGLayerIPAdapterList.tsx @@ -3,7 +3,7 @@ import { createMemoizedSelector } from 'app/store/createMemoizedSelector'; import { guidanceLayerIPAdapterDeleted } from 'app/store/middleware/listenerMiddleware/listeners/regionalControlToControlAdapterBridge'; import { useAppDispatch, useAppSelector } from 'app/store/storeHooks'; import ControlAdapterLayerConfig from 'features/controlLayers/components/controlAdapterOverrides/ControlAdapterLayerConfig'; -import { isMaskedGuidanceLayer, selectControlLayersSlice } from 'features/controlLayers/store/controlLayersSlice'; +import { isRegionalGuidanceLayer, selectControlLayersSlice } from 'features/controlLayers/store/controlLayersSlice'; import { memo, useCallback, useMemo } from 'react'; import { PiTrashSimpleBold } from 'react-icons/pi'; import { assert } from 'tsafe'; @@ -12,11 +12,11 @@ type Props = { layerId: string; }; -export const RPLayerIPAdapterList = memo(({ layerId }: Props) => { +export const RGLayerIPAdapterList = memo(({ layerId }: Props) => { const selectIPAdapterIds = useMemo( () => createMemoizedSelector(selectControlLayersSlice, (controlLayers) => { - const layer = controlLayers.present.layers.filter(isMaskedGuidanceLayer).find((l) => l.id === layerId); + const layer = controlLayers.present.layers.filter(isRegionalGuidanceLayer).find((l) => l.id === layerId); assert(layer, `Layer ${layerId} not found`); return layer.ipAdapterIds; }), @@ -37,14 +37,14 @@ export const RPLayerIPAdapterList = memo(({ layerId }: Props) => { )} - + ))} ); }); -RPLayerIPAdapterList.displayName = 'RPLayerIPAdapterList'; +RGLayerIPAdapterList.displayName = 'RGLayerIPAdapterList'; type IPAdapterListItemProps = { layerId: string; @@ -52,7 +52,7 @@ type IPAdapterListItemProps = { ipAdapterNumber: number; }; -const IPAdapterListItem = memo(({ layerId, ipAdapterId, ipAdapterNumber }: IPAdapterListItemProps) => { +const RGLayerIPAdapterListItem = memo(({ layerId, ipAdapterId, ipAdapterNumber }: IPAdapterListItemProps) => { const dispatch = useAppDispatch(); const onDeleteIPAdapter = useCallback(() => { dispatch(guidanceLayerIPAdapterDeleted({ layerId, ipAdapterId })); @@ -77,4 +77,4 @@ const IPAdapterListItem = memo(({ layerId, ipAdapterId, ipAdapterNumber }: IPAda ); }); -IPAdapterListItem.displayName = 'IPAdapterListItem'; +RGLayerIPAdapterListItem.displayName = 'RGLayerIPAdapterListItem'; diff --git a/invokeai/frontend/web/src/features/controlLayers/components/MaskedGuidanceLayerListItem.tsx b/invokeai/frontend/web/src/features/controlLayers/components/RGLayerListItem.tsx similarity index 62% rename from invokeai/frontend/web/src/features/controlLayers/components/MaskedGuidanceLayerListItem.tsx rename to invokeai/frontend/web/src/features/controlLayers/components/RGLayerListItem.tsx index 2a48417f8c..96acfffa50 100644 --- a/invokeai/frontend/web/src/features/controlLayers/components/MaskedGuidanceLayerListItem.tsx +++ b/invokeai/frontend/web/src/features/controlLayers/components/RGLayerListItem.tsx @@ -2,17 +2,17 @@ import { Badge, Flex, Spacer } from '@invoke-ai/ui-library'; import { createMemoizedSelector } from 'app/store/createMemoizedSelector'; import { useAppDispatch, useAppSelector } from 'app/store/storeHooks'; import { rgbColorToString } from 'features/canvas/util/colorToString'; +import { LayerDeleteButton } from 'features/controlLayers/components/LayerDeleteButton'; +import { LayerMenu } from 'features/controlLayers/components/LayerMenu'; import { LayerTitle } from 'features/controlLayers/components/LayerTitle'; -import { RPLayerColorPicker } from 'features/controlLayers/components/RPLayerColorPicker'; -import { RPLayerDeleteButton } from 'features/controlLayers/components/RPLayerDeleteButton'; -import { RPLayerIPAdapterList } from 'features/controlLayers/components/RPLayerIPAdapterList'; -import { RPLayerMenu } from 'features/controlLayers/components/RPLayerMenu'; -import { RPLayerNegativePrompt } from 'features/controlLayers/components/RPLayerNegativePrompt'; -import { RPLayerPositivePrompt } from 'features/controlLayers/components/RPLayerPositivePrompt'; -import RPLayerSettingsPopover from 'features/controlLayers/components/RPLayerSettingsPopover'; -import { RPLayerVisibilityToggle } from 'features/controlLayers/components/RPLayerVisibilityToggle'; +import { LayerVisibilityToggle } from 'features/controlLayers/components/LayerVisibilityToggle'; +import { RGLayerColorPicker } from 'features/controlLayers/components/RGLayerColorPicker'; +import { RGLayerIPAdapterList } from 'features/controlLayers/components/RGLayerIPAdapterList'; +import { RGLayerNegativePrompt } from 'features/controlLayers/components/RGLayerNegativePrompt'; +import { RGLayerPositivePrompt } from 'features/controlLayers/components/RGLayerPositivePrompt'; +import RGLayerSettingsPopover from 'features/controlLayers/components/RGLayerSettingsPopover'; import { - isMaskedGuidanceLayer, + isRegionalGuidanceLayer, layerSelected, selectControlLayersSlice, } from 'features/controlLayers/store/controlLayersSlice'; @@ -26,14 +26,14 @@ type Props = { layerId: string; }; -export const MaskedGuidanceLayerListItem = memo(({ layerId }: Props) => { +export const RGLayerListItem = memo(({ layerId }: Props) => { const { t } = useTranslation(); const dispatch = useAppDispatch(); const selector = useMemo( () => createMemoizedSelector(selectControlLayersSlice, (controlLayers) => { const layer = controlLayers.present.layers.find((l) => l.id === layerId); - assert(isMaskedGuidanceLayer(layer), `Layer ${layerId} not found or not an RP layer`); + assert(isRegionalGuidanceLayer(layer), `Layer ${layerId} not found or not an RP layer`); return { color: rgbColorToString(layer.previewColor), hasPositivePrompt: layer.positivePrompt !== null, @@ -62,7 +62,7 @@ export const MaskedGuidanceLayerListItem = memo(({ layerId }: Props) => { > - + {autoNegative === 'invert' && ( @@ -70,18 +70,18 @@ export const MaskedGuidanceLayerListItem = memo(({ layerId }: Props) => { {t('controlLayers.autoNegative')} )} - - - - + + + + {!hasPositivePrompt && !hasNegativePrompt && !hasIPAdapters && } - {hasPositivePrompt && } - {hasNegativePrompt && } - {hasIPAdapters && } + {hasPositivePrompt && } + {hasNegativePrompt && } + {hasIPAdapters && } ); }); -MaskedGuidanceLayerListItem.displayName = 'MaskedGuidanceLayerListItem'; +RGLayerListItem.displayName = 'RGLayerListItem'; diff --git a/invokeai/frontend/web/src/features/controlLayers/components/RPLayerNegativePrompt.tsx b/invokeai/frontend/web/src/features/controlLayers/components/RGLayerNegativePrompt.tsx similarity index 86% rename from invokeai/frontend/web/src/features/controlLayers/components/RPLayerNegativePrompt.tsx rename to invokeai/frontend/web/src/features/controlLayers/components/RGLayerNegativePrompt.tsx index d396de4634..e869c8809a 100644 --- a/invokeai/frontend/web/src/features/controlLayers/components/RPLayerNegativePrompt.tsx +++ b/invokeai/frontend/web/src/features/controlLayers/components/RGLayerNegativePrompt.tsx @@ -1,6 +1,6 @@ import { Box, Textarea } from '@invoke-ai/ui-library'; import { useAppDispatch } from 'app/store/storeHooks'; -import { RPLayerPromptDeleteButton } from 'features/controlLayers/components/RPLayerPromptDeleteButton'; +import { RGLayerPromptDeleteButton } from 'features/controlLayers/components/RGLayerPromptDeleteButton'; import { useLayerNegativePrompt } from 'features/controlLayers/hooks/layerStateHooks'; import { maskLayerNegativePromptChanged } from 'features/controlLayers/store/controlLayersSlice'; import { PromptOverlayButtonWrapper } from 'features/parameters/components/Prompts/PromptOverlayButtonWrapper'; @@ -14,7 +14,7 @@ type Props = { layerId: string; }; -export const RPLayerNegativePrompt = memo(({ layerId }: Props) => { +export const RGLayerNegativePrompt = memo(({ layerId }: Props) => { const prompt = useLayerNegativePrompt(layerId); const dispatch = useAppDispatch(); const textareaRef = useRef(null); @@ -47,7 +47,7 @@ export const RPLayerNegativePrompt = memo(({ layerId }: Props) => { fontSize="sm" /> - + @@ -55,4 +55,4 @@ export const RPLayerNegativePrompt = memo(({ layerId }: Props) => { ); }); -RPLayerNegativePrompt.displayName = 'RPLayerNegativePrompt'; +RGLayerNegativePrompt.displayName = 'RGLayerNegativePrompt'; diff --git a/invokeai/frontend/web/src/features/controlLayers/components/RPLayerPositivePrompt.tsx b/invokeai/frontend/web/src/features/controlLayers/components/RGLayerPositivePrompt.tsx similarity index 86% rename from invokeai/frontend/web/src/features/controlLayers/components/RPLayerPositivePrompt.tsx rename to invokeai/frontend/web/src/features/controlLayers/components/RGLayerPositivePrompt.tsx index 054c75958c..6d508338c1 100644 --- a/invokeai/frontend/web/src/features/controlLayers/components/RPLayerPositivePrompt.tsx +++ b/invokeai/frontend/web/src/features/controlLayers/components/RGLayerPositivePrompt.tsx @@ -1,6 +1,6 @@ import { Box, Textarea } from '@invoke-ai/ui-library'; import { useAppDispatch } from 'app/store/storeHooks'; -import { RPLayerPromptDeleteButton } from 'features/controlLayers/components/RPLayerPromptDeleteButton'; +import { RGLayerPromptDeleteButton } from 'features/controlLayers/components/RGLayerPromptDeleteButton'; import { useLayerPositivePrompt } from 'features/controlLayers/hooks/layerStateHooks'; import { maskLayerPositivePromptChanged } from 'features/controlLayers/store/controlLayersSlice'; import { PromptOverlayButtonWrapper } from 'features/parameters/components/Prompts/PromptOverlayButtonWrapper'; @@ -14,7 +14,7 @@ type Props = { layerId: string; }; -export const RPLayerPositivePrompt = memo(({ layerId }: Props) => { +export const RGLayerPositivePrompt = memo(({ layerId }: Props) => { const prompt = useLayerPositivePrompt(layerId); const dispatch = useAppDispatch(); const textareaRef = useRef(null); @@ -47,7 +47,7 @@ export const RPLayerPositivePrompt = memo(({ layerId }: Props) => { minH={28} /> - + @@ -55,4 +55,4 @@ export const RPLayerPositivePrompt = memo(({ layerId }: Props) => { ); }); -RPLayerPositivePrompt.displayName = 'RPLayerPositivePrompt'; +RGLayerPositivePrompt.displayName = 'RGLayerPositivePrompt'; diff --git a/invokeai/frontend/web/src/features/controlLayers/components/RPLayerPromptDeleteButton.tsx b/invokeai/frontend/web/src/features/controlLayers/components/RGLayerPromptDeleteButton.tsx similarity index 89% rename from invokeai/frontend/web/src/features/controlLayers/components/RPLayerPromptDeleteButton.tsx rename to invokeai/frontend/web/src/features/controlLayers/components/RGLayerPromptDeleteButton.tsx index b2778d0997..9a32bb68ad 100644 --- a/invokeai/frontend/web/src/features/controlLayers/components/RPLayerPromptDeleteButton.tsx +++ b/invokeai/frontend/web/src/features/controlLayers/components/RGLayerPromptDeleteButton.tsx @@ -13,7 +13,7 @@ type Props = { polarity: 'positive' | 'negative'; }; -export const RPLayerPromptDeleteButton = memo(({ layerId, polarity }: Props) => { +export const RGLayerPromptDeleteButton = memo(({ layerId, polarity }: Props) => { const { t } = useTranslation(); const dispatch = useAppDispatch(); const onClick = useCallback(() => { @@ -35,4 +35,4 @@ export const RPLayerPromptDeleteButton = memo(({ layerId, polarity }: Props) => ); }); -RPLayerPromptDeleteButton.displayName = 'RPLayerPromptDeleteButton'; +RGLayerPromptDeleteButton.displayName = 'RGLayerPromptDeleteButton'; diff --git a/invokeai/frontend/web/src/features/controlLayers/components/RPLayerSettingsPopover.tsx b/invokeai/frontend/web/src/features/controlLayers/components/RGLayerSettingsPopover.tsx similarity index 77% rename from invokeai/frontend/web/src/features/controlLayers/components/RPLayerSettingsPopover.tsx rename to invokeai/frontend/web/src/features/controlLayers/components/RGLayerSettingsPopover.tsx index cf6674db5d..acb64e16b8 100644 --- a/invokeai/frontend/web/src/features/controlLayers/components/RPLayerSettingsPopover.tsx +++ b/invokeai/frontend/web/src/features/controlLayers/components/RGLayerSettingsPopover.tsx @@ -9,7 +9,7 @@ import { PopoverContent, PopoverTrigger, } from '@invoke-ai/ui-library'; -import { MaskedGuidanceLayerAutoNegativeCheckbox } from 'features/controlLayers/components/RPLayerAutoNegativeCheckbox'; +import { RGLayerAutoNegativeCheckbox } from 'features/controlLayers/components/RGLayerAutoNegativeCheckbox'; import { memo } from 'react'; import { useTranslation } from 'react-i18next'; import { PiGearSixBold } from 'react-icons/pi'; @@ -23,7 +23,7 @@ const formLabelProps: FormLabelProps = { minW: 32, }; -const RPLayerSettingsPopover = ({ layerId }: Props) => { +const RGLayerSettingsPopover = ({ layerId }: Props) => { const { t } = useTranslation(); return ( @@ -41,7 +41,7 @@ const RPLayerSettingsPopover = ({ layerId }: Props) => { - + @@ -50,4 +50,4 @@ const RPLayerSettingsPopover = ({ layerId }: Props) => { ); }; -export default memo(RPLayerSettingsPopover); +export default memo(RGLayerSettingsPopover); diff --git a/invokeai/frontend/web/src/features/controlLayers/components/StageComponent.tsx b/invokeai/frontend/web/src/features/controlLayers/components/StageComponent.tsx index be7f584627..00368a059f 100644 --- a/invokeai/frontend/web/src/features/controlLayers/components/StageComponent.tsx +++ b/invokeai/frontend/web/src/features/controlLayers/components/StageComponent.tsx @@ -10,7 +10,7 @@ import { $isMouseOver, $lastMouseDownPos, $tool, - isMaskedGuidanceLayer, + isRegionalGuidanceLayer, layerBboxChanged, layerTranslated, selectControlLayersSlice, @@ -29,7 +29,7 @@ const log = logger('controlLayers'); const selectSelectedLayerColor = createMemoizedSelector(selectControlLayersSlice, (controlLayers) => { const layer = controlLayers.present.layers - .filter(isMaskedGuidanceLayer) + .filter(isRegionalGuidanceLayer) .find((l) => l.id === controlLayers.present.selectedLayerId); return layer?.previewColor ?? null; }); diff --git a/invokeai/frontend/web/src/features/controlLayers/hooks/layerStateHooks.ts b/invokeai/frontend/web/src/features/controlLayers/hooks/layerStateHooks.ts index 346f553e32..abeb7b801d 100644 --- a/invokeai/frontend/web/src/features/controlLayers/hooks/layerStateHooks.ts +++ b/invokeai/frontend/web/src/features/controlLayers/hooks/layerStateHooks.ts @@ -2,7 +2,7 @@ import { createSelector } from '@reduxjs/toolkit'; import { useAppSelector } from 'app/store/storeHooks'; import { isControlAdapterLayer, - isMaskedGuidanceLayer, + isRegionalGuidanceLayer, selectControlLayersSlice, } from 'features/controlLayers/store/controlLayersSlice'; import { useMemo } from 'react'; @@ -13,7 +13,7 @@ export const useLayerPositivePrompt = (layerId: string) => { () => createSelector(selectControlLayersSlice, (controlLayers) => { const layer = controlLayers.present.layers.find((l) => l.id === layerId); - assert(isMaskedGuidanceLayer(layer), `Layer ${layerId} not found or not an RP layer`); + assert(isRegionalGuidanceLayer(layer), `Layer ${layerId} not found or not an RP layer`); assert(layer.positivePrompt !== null, `Layer ${layerId} does not have a positive prompt`); return layer.positivePrompt; }), @@ -28,7 +28,7 @@ export const useLayerNegativePrompt = (layerId: string) => { () => createSelector(selectControlLayersSlice, (controlLayers) => { const layer = controlLayers.present.layers.find((l) => l.id === layerId); - assert(isMaskedGuidanceLayer(layer), `Layer ${layerId} not found or not an RP layer`); + assert(isRegionalGuidanceLayer(layer), `Layer ${layerId} not found or not an RP layer`); assert(layer.negativePrompt !== null, `Layer ${layerId} does not have a negative prompt`); return layer.negativePrompt; }), diff --git a/invokeai/frontend/web/src/features/controlLayers/hooks/useRegionalControlTitle.ts b/invokeai/frontend/web/src/features/controlLayers/hooks/useRegionalControlTitle.ts index f755b3e6f2..2957bed522 100644 --- a/invokeai/frontend/web/src/features/controlLayers/hooks/useRegionalControlTitle.ts +++ b/invokeai/frontend/web/src/features/controlLayers/hooks/useRegionalControlTitle.ts @@ -1,6 +1,6 @@ import { createSelector } from '@reduxjs/toolkit'; import { useAppSelector } from 'app/store/storeHooks'; -import { isMaskedGuidanceLayer, selectControlLayersSlice } from 'features/controlLayers/store/controlLayersSlice'; +import { isRegionalGuidanceLayer, selectControlLayersSlice } from 'features/controlLayers/store/controlLayersSlice'; import { useMemo } from 'react'; import { useTranslation } from 'react-i18next'; @@ -9,7 +9,7 @@ const selectValidLayerCount = createSelector(selectControlLayersSlice, (controlL return 0; } const validLayers = controlLayers.present.layers - .filter(isMaskedGuidanceLayer) + .filter(isRegionalGuidanceLayer) .filter((l) => l.isEnabled) .filter((l) => { const hasTextPrompt = Boolean(l.positivePrompt || l.negativePrompt); diff --git a/invokeai/frontend/web/src/features/controlLayers/store/controlLayersSlice.ts b/invokeai/frontend/web/src/features/controlLayers/store/controlLayersSlice.ts index f5e0fe616a..6e3fba453a 100644 --- a/invokeai/frontend/web/src/features/controlLayers/store/controlLayersSlice.ts +++ b/invokeai/frontend/web/src/features/controlLayers/store/controlLayersSlice.ts @@ -56,7 +56,7 @@ export const initialControlLayersState: ControlLayersState = { }; const isLine = (obj: VectorMaskLine | VectorMaskRect): obj is VectorMaskLine => obj.type === 'vector_mask_line'; -export const isMaskedGuidanceLayer = (layer?: Layer): layer is RegionalGuidanceLayer => +export const isRegionalGuidanceLayer = (layer?: Layer): layer is RegionalGuidanceLayer => layer?.type === 'regional_guidance_layer'; export const isControlAdapterLayer = (layer?: Layer): layer is ControlAdapterLayer => layer?.type === 'control_adapter_layer'; @@ -78,7 +78,7 @@ const resetLayer = (layer: Layer) => { } }; const getVectorMaskPreviewColor = (state: ControlLayersState): RgbColor => { - const vmLayers = state.layers.filter(isMaskedGuidanceLayer); + const vmLayers = state.layers.filter(isRegionalGuidanceLayer); const lastColor = vmLayers[vmLayers.length - 1]?.previewColor; return LayerColors.next(lastColor); }; @@ -88,10 +88,10 @@ export const controlLayersSlice = createSlice({ initialState: initialControlLayersState, reducers: { //#region All Layers - maskedGuidanceLayerAdded: (state, action: PayloadAction<{ layerId: string }>) => { + regionalGuidanceLayerAdded: (state, action: PayloadAction<{ layerId: string }>) => { const { layerId } = action.payload; const layer: RegionalGuidanceLayer = { - id: getMaskedGuidanceLayerId(layerId), + id: getRegionalGuidanceLayerId(layerId), type: 'regional_guidance_layer', isEnabled: true, bbox: null, @@ -291,7 +291,7 @@ export const controlLayersSlice = createSlice({ const { layerId, points, tool } = action.payload; const layer = state.layers.find((l) => l.id === layerId); if (layer?.type === 'regional_guidance_layer') { - const lineId = getMaskedGuidanceLayerLineId(layer.id, action.meta.uuid); + const lineId = getRegionalGuidanceLayerLineId(layer.id, action.meta.uuid); layer.maskObjects.push({ type: 'vector_mask_line', tool: tool, @@ -518,7 +518,7 @@ export const { layerVisibilityToggled, selectedLayerReset, selectedLayerDeleted, - maskedGuidanceLayerAdded, + regionalGuidanceLayerAdded, ipAdapterLayerAdded, controlAdapterLayerAdded, layerOpacityChanged, @@ -595,10 +595,10 @@ export const regional_guidance_layer_RECT_NAME = 'regional_guidance_layer.rect'; export const LAYER_BBOX_NAME = 'layer.bbox'; // Getters for non-singleton layer and object IDs -const getMaskedGuidanceLayerId = (layerId: string) => `${regional_guidance_layer_NAME}_${layerId}`; -const getMaskedGuidanceLayerLineId = (layerId: string, lineId: string) => `${layerId}.line_${lineId}`; +const getRegionalGuidanceLayerId = (layerId: string) => `${regional_guidance_layer_NAME}_${layerId}`; +const getRegionalGuidanceLayerLineId = (layerId: string, lineId: string) => `${layerId}.line_${lineId}`; const getMaskedGuidnaceLayerRectId = (layerId: string, lineId: string) => `${layerId}.rect_${lineId}`; -export const getMaskedGuidanceLayerObjectGroupId = (layerId: string, groupId: string) => +export const getRegionalGuidanceLayerObjectGroupId = (layerId: string, groupId: string) => `${layerId}.objectGroup_${groupId}`; export const getLayerBboxId = (layerId: string) => `${layerId}.bbox`; const getControlNetLayerId = (layerId: string) => `control_adapter_layer_${layerId}`; diff --git a/invokeai/frontend/web/src/features/controlLayers/util/getLayerBlobs.ts b/invokeai/frontend/web/src/features/controlLayers/util/getLayerBlobs.ts index c7616e4300..1b0808c5f1 100644 --- a/invokeai/frontend/web/src/features/controlLayers/util/getLayerBlobs.ts +++ b/invokeai/frontend/web/src/features/controlLayers/util/getLayerBlobs.ts @@ -1,7 +1,7 @@ import { getStore } from 'app/store/nanostores/store'; import openBase64ImageInTab from 'common/util/openBase64ImageInTab'; import { blobToDataURL } from 'features/canvas/util/blobToDataURL'; -import { isMaskedGuidanceLayer, regional_guidance_layer_NAME } from 'features/controlLayers/store/controlLayersSlice'; +import { isRegionalGuidanceLayer, regional_guidance_layer_NAME } from 'features/controlLayers/store/controlLayersSlice'; import { renderers } from 'features/controlLayers/util/renderers'; import Konva from 'konva'; import { assert } from 'tsafe'; @@ -19,7 +19,7 @@ export const getRegionalPromptLayerBlobs = async ( const state = getStore().getState(); const { layers } = state.controlLayers.present; const { width, height } = state.controlLayers.present.size; - const reduxLayers = layers.filter(isMaskedGuidanceLayer); + const reduxLayers = layers.filter(isRegionalGuidanceLayer); const container = document.createElement('div'); const stage = new Konva.Stage({ container, width, height }); renderers.renderLayers(stage, reduxLayers, 1, 'brush'); diff --git a/invokeai/frontend/web/src/features/controlLayers/util/renderers.ts b/invokeai/frontend/web/src/features/controlLayers/util/renderers.ts index d61e6d1b96..f2245b1faf 100644 --- a/invokeai/frontend/web/src/features/controlLayers/util/renderers.ts +++ b/invokeai/frontend/web/src/features/controlLayers/util/renderers.ts @@ -9,9 +9,9 @@ import { CONTROLNET_LAYER_NAME, getControlNetLayerImageId, getLayerBboxId, - getMaskedGuidanceLayerObjectGroupId, + getRegionalGuidanceLayerObjectGroupId, isControlAdapterLayer, - isMaskedGuidanceLayer, + isRegionalGuidanceLayer, isRenderableLayer, LAYER_BBOX_NAME, regional_guidance_layer_LINE_NAME, @@ -224,7 +224,7 @@ const renderToolPreview = ( * @param reduxLayer The redux layer to create the konva layer from. * @param onLayerPosChanged Callback for when the layer's position changes. */ -const createMaskedGuidanceLayer = ( +const createRegionalGuidanceLayer = ( stage: Konva.Stage, reduxLayer: RegionalGuidanceLayer, onLayerPosChanged?: (layerId: string, x: number, y: number) => void @@ -264,7 +264,7 @@ const createMaskedGuidanceLayer = ( // The object group holds all of the layer's objects (e.g. lines and rects) const konvaObjectGroup = new Konva.Group({ - id: getMaskedGuidanceLayerObjectGroupId(reduxLayer.id, uuidv4()), + id: getRegionalGuidanceLayerObjectGroupId(reduxLayer.id, uuidv4()), name: regional_guidance_layer_OBJECT_GROUP_NAME, listening: false, }); @@ -325,7 +325,7 @@ const createVectorMaskRect = (reduxObject: VectorMaskRect, konvaGroup: Konva.Gro * @param globalMaskLayerOpacity The opacity of the global mask layer. * @param tool The current tool. */ -const renderMaskedGuidanceLayer = ( +const renderRegionalGuidanceLayer = ( stage: Konva.Stage, reduxLayer: RegionalGuidanceLayer, globalMaskLayerOpacity: number, @@ -333,7 +333,8 @@ const renderMaskedGuidanceLayer = ( onLayerPosChanged?: (layerId: string, x: number, y: number) => void ): void => { const konvaLayer = - stage.findOne(`#${reduxLayer.id}`) ?? createMaskedGuidanceLayer(stage, reduxLayer, onLayerPosChanged); + stage.findOne(`#${reduxLayer.id}`) ?? + createRegionalGuidanceLayer(stage, reduxLayer, onLayerPosChanged); // Update the layer's position and listening state konvaLayer.setAttrs({ @@ -540,8 +541,8 @@ const renderLayers = ( } for (const reduxLayer of reduxLayers) { - if (isMaskedGuidanceLayer(reduxLayer)) { - renderMaskedGuidanceLayer(stage, reduxLayer, globalMaskLayerOpacity, tool, onLayerPosChanged); + if (isRegionalGuidanceLayer(reduxLayer)) { + renderRegionalGuidanceLayer(stage, reduxLayer, globalMaskLayerOpacity, tool, onLayerPosChanged); } if (isControlAdapterLayer(reduxLayer)) { renderControlNetLayer(stage, reduxLayer); diff --git a/invokeai/frontend/web/src/features/nodes/util/graph/addControlLayersToGraph.ts b/invokeai/frontend/web/src/features/nodes/util/graph/addControlLayersToGraph.ts index b16fe806b6..a7236af3cc 100644 --- a/invokeai/frontend/web/src/features/nodes/util/graph/addControlLayersToGraph.ts +++ b/invokeai/frontend/web/src/features/nodes/util/graph/addControlLayersToGraph.ts @@ -1,7 +1,7 @@ import { getStore } from 'app/store/nanostores/store'; import type { RootState } from 'app/store/store'; import { selectAllIPAdapters } from 'features/controlAdapters/store/controlAdaptersSlice'; -import { isMaskedGuidanceLayer } from 'features/controlLayers/store/controlLayersSlice'; +import { isRegionalGuidanceLayer } from 'features/controlLayers/store/controlLayersSlice'; import { getRegionalPromptLayerBlobs } from 'features/controlLayers/util/getLayerBlobs'; import { IP_ADAPTER_COLLECT, @@ -29,7 +29,7 @@ export const addControlLayersToGraph = async (state: RootState, graph: NonNullab const layers = state.controlLayers.present.layers // Only support vector mask layers now // TODO: Image masks - .filter(isMaskedGuidanceLayer) + .filter(isRegionalGuidanceLayer) // Only visible layers are rendered on the canvas .filter((l) => l.isEnabled) // Only layers with prompts get added to the graph diff --git a/invokeai/frontend/web/src/features/nodes/util/graph/addIPAdapterToLinearGraph.ts b/invokeai/frontend/web/src/features/nodes/util/graph/addIPAdapterToLinearGraph.ts index 1fd0ea76d7..2c53fb3827 100644 --- a/invokeai/frontend/web/src/features/nodes/util/graph/addIPAdapterToLinearGraph.ts +++ b/invokeai/frontend/web/src/features/nodes/util/graph/addIPAdapterToLinearGraph.ts @@ -1,7 +1,7 @@ import type { RootState } from 'app/store/store'; import { selectValidIPAdapters } from 'features/controlAdapters/store/controlAdaptersSlice'; import type { IPAdapterConfig } from 'features/controlAdapters/store/types'; -import { isIPAdapterLayer, isMaskedGuidanceLayer } from 'features/controlLayers/store/controlLayersSlice'; +import { isIPAdapterLayer, isRegionalGuidanceLayer } from 'features/controlLayers/store/controlLayersSlice'; import type { ImageField } from 'features/nodes/types/common'; import { activeTabNameSelector } from 'features/ui/store/uiSelectors'; import { differenceWith, intersectionWith } from 'lodash-es'; @@ -28,7 +28,7 @@ const getIPAdapters = (state: RootState) => { // Masked IP adapters are handled in the graph helper for regional control - skip them here const maskedIPAdapterIds = state.controlLayers.present.layers - .filter(isMaskedGuidanceLayer) + .filter(isRegionalGuidanceLayer) .map((l) => l.ipAdapterIds) .flat(); const nonMaskedIPAdapters = differenceWith(validIPAdapters, maskedIPAdapterIds, (a, b) => a.id === b);