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

tidy(ui): more renaming of components

Browse Source
This commit is contained in:
psychedelicious 2024-04-30 13:41:29 +10:00 committed by Kent Keirsey
parent 3441187c23
commit b3dbfdaa02
29 changed files with 125 additions and 124 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
invokeai/frontend/web/public/locales/en.json
View File

@ -1533,8 +1533,8 @@
"addPositivePrompt": "Add $t(common.positivePrompt)", "addPositivePrompt": "Add $t(common.positivePrompt)",
"addNegativePrompt": "Add $t(common.negativePrompt)", "addNegativePrompt": "Add $t(common.negativePrompt)",
"addIPAdapter": "Add $t(common.ipAdapter)", "addIPAdapter": "Add $t(common.ipAdapter)",
"maskedGuidance": "Masked Guidance", "regionalGuidance": "Regional Guidance",
"maskedGuidanceLayer": "$t(controlLayers.maskedGuidance) $t(unifiedCanvas.layer)", "regionalGuidanceLayer": "$t(controlLayers.regionalGuidance) $t(unifiedCanvas.layer)",
"controlNetLayer": "$t(common.controlNet) $t(unifiedCanvas.layer)", "controlNetLayer": "$t(common.controlNet) $t(unifiedCanvas.layer)",
"ipAdapterLayer": "$t(common.ipAdapter) $t(unifiedCanvas.layer)", "ipAdapterLayer": "$t(common.ipAdapter) $t(unifiedCanvas.layer)",
"opacity": "Opacity" "opacity": "Opacity"

4
invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/regionalControlToControlAdapterBridge.ts
View File

@ -8,9 +8,9 @@ import {
controlAdapterLayerAdded, controlAdapterLayerAdded,
ipAdapterLayerAdded, ipAdapterLayerAdded,
layerDeleted, layerDeleted,
maskedGuidanceLayerAdded,
maskLayerIPAdapterAdded, maskLayerIPAdapterAdded,
maskLayerIPAdapterDeleted, maskLayerIPAdapterDeleted,
regionalGuidanceLayerAdded,
} from 'features/controlLayers/store/controlLayersSlice'; } from 'features/controlLayers/store/controlLayersSlice';
import type { Layer } from 'features/controlLayers/store/types'; import type { Layer } from 'features/controlLayers/store/types';
import { modelConfigsAdapterSelectors, modelsApi } from 'services/api/endpoints/models'; import { modelConfigsAdapterSelectors, modelsApi } from 'services/api/endpoints/models';
@ -33,7 +33,7 @@ export const addRegionalControlToControlAdapterBridge = (startAppListening: AppS
const type = action.payload; const type = action.payload;
const layerId = uuidv4(); const layerId = uuidv4();
if (type === 'regional_guidance_layer') { if (type === 'regional_guidance_layer') {
dispatch(maskedGuidanceLayerAdded({ layerId })); dispatch(regionalGuidanceLayerAdded({ layerId }));
return; return;
} }

4
invokeai/frontend/web/src/features/controlLayers/components/AddLayerButton.tsx
View File

@ -8,7 +8,7 @@ import { PiPlusBold } from 'react-icons/pi';
export const AddLayerButton = memo(() => { export const AddLayerButton = memo(() => {
const { t } = useTranslation(); const { t } = useTranslation();
const dispatch = useAppDispatch(); const dispatch = useAppDispatch();
const addMaskedGuidanceLayer = useCallback(() => { const addRegionalGuidanceLayer = useCallback(() => {
dispatch(guidanceLayerAdded('regional_guidance_layer')); dispatch(guidanceLayerAdded('regional_guidance_layer'));
}, [dispatch]); }, [dispatch]);
const addControlNetLayer = useCallback(() => { const addControlNetLayer = useCallback(() => {
@ -24,7 +24,7 @@ export const AddLayerButton = memo(() => {
{t('controlLayers.addLayer')} {t('controlLayers.addLayer')}
</MenuButton> </MenuButton>
<MenuList> <MenuList>
<MenuItem onClick={addMaskedGuidanceLayer}> {t('controlLayers.maskedGuidanceLayer')}</MenuItem> <MenuItem onClick={addRegionalGuidanceLayer}> {t('controlLayers.regionalGuidanceLayer')}</MenuItem>
<MenuItem onClick={addControlNetLayer}> {t('controlLayers.controlNetLayer')}</MenuItem> <MenuItem onClick={addControlNetLayer}> {t('controlLayers.controlNetLayer')}</MenuItem>
<MenuItem onClick={addIPAdapterLayer}> {t('controlLayers.ipAdapterLayer')}</MenuItem> <MenuItem onClick={addIPAdapterLayer}> {t('controlLayers.ipAdapterLayer')}</MenuItem>
</MenuList> </MenuList>

4
invokeai/frontend/web/src/features/controlLayers/components/AddPromptButtons.tsx
View File

@ -3,7 +3,7 @@ import { createMemoizedSelector } from 'app/store/createMemoizedSelector';
import { guidanceLayerIPAdapterAdded } from 'app/store/middleware/listenerMiddleware/listeners/regionalControlToControlAdapterBridge'; import { guidanceLayerIPAdapterAdded } from 'app/store/middleware/listenerMiddleware/listeners/regionalControlToControlAdapterBridge';
import { useAppDispatch, useAppSelector } from 'app/store/storeHooks'; import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
import { import {
isMaskedGuidanceLayer, isRegionalGuidanceLayer,
maskLayerNegativePromptChanged, maskLayerNegativePromptChanged,
maskLayerPositivePromptChanged, maskLayerPositivePromptChanged,
selectControlLayersSlice, selectControlLayersSlice,
@ -23,7 +23,7 @@ export const AddPromptButtons = ({ layerId }: AddPromptButtonProps) => {
() => () =>
createMemoizedSelector(selectControlLayersSlice, (controlLayers) => { createMemoizedSelector(selectControlLayersSlice, (controlLayers) => {
const layer = controlLayers.present.layers.find((l) => l.id === layerId); 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 { return {
canAddPositivePrompt: layer.positivePrompt === null, canAddPositivePrompt: layer.positivePrompt === null,
canAddNegativePrompt: layer.negativePrompt === null, canAddNegativePrompt: layer.negativePrompt === null,

16
invokeai/frontend/web/src/features/controlLayers/components/ControlAdapterLayerListItem.tsx → invokeai/frontend/web/src/features/controlLayers/components/CALayerListItem.tsx
View File

@ -3,10 +3,10 @@ import { createMemoizedSelector } from 'app/store/createMemoizedSelector';
import { useAppDispatch, useAppSelector } from 'app/store/storeHooks'; import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
import CALayerOpacity from 'features/controlLayers/components/CALayerOpacity'; import CALayerOpacity from 'features/controlLayers/components/CALayerOpacity';
import ControlAdapterLayerConfig from 'features/controlLayers/components/controlAdapterOverrides/ControlAdapterLayerConfig'; 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 { LayerTitle } from 'features/controlLayers/components/LayerTitle';
import { RPLayerDeleteButton } from 'features/controlLayers/components/RPLayerDeleteButton'; import { LayerVisibilityToggle } from 'features/controlLayers/components/LayerVisibilityToggle';
import { RPLayerMenu } from 'features/controlLayers/components/RPLayerMenu';
import { RPLayerVisibilityToggle } from 'features/controlLayers/components/RPLayerVisibilityToggle';
import { import {
isControlAdapterLayer, isControlAdapterLayer,
layerSelected, layerSelected,
@ -19,7 +19,7 @@ type Props = {
layerId: string; layerId: string;
}; };
export const ControlAdapterLayerListItem = memo(({ layerId }: Props) => { export const CALayerListItem = memo(({ layerId }: Props) => {
const dispatch = useAppDispatch(); const dispatch = useAppDispatch();
const selector = useMemo( const selector = useMemo(
() => () =>
@ -49,12 +49,12 @@ export const ControlAdapterLayerListItem = memo(({ layerId }: Props) => {
> >
<Flex flexDir="column" gap={4} w="full" bg="base.850" p={3} borderRadius="base"> <Flex flexDir="column" gap={4} w="full" bg="base.850" p={3} borderRadius="base">
<Flex gap={3} alignItems="center" cursor="pointer"> <Flex gap={3} alignItems="center" cursor="pointer">
<RPLayerVisibilityToggle layerId={layerId} /> <LayerVisibilityToggle layerId={layerId} />
<LayerTitle type="control_adapter_layer" /> <LayerTitle type="control_adapter_layer" />
<Spacer /> <Spacer />
<CALayerOpacity layerId={layerId} /> <CALayerOpacity layerId={layerId} />
<RPLayerMenu layerId={layerId} /> <LayerMenu layerId={layerId} />
<RPLayerDeleteButton layerId={layerId} /> <LayerDeleteButton layerId={layerId} />
</Flex> </Flex>
<ControlAdapterLayerConfig id={controlNetId} /> <ControlAdapterLayerConfig id={controlNetId} />
</Flex> </Flex>
@ -62,4 +62,4 @@ export const ControlAdapterLayerListItem = memo(({ layerId }: Props) => {
); );
}); });
ControlAdapterLayerListItem.displayName = 'ControlAdapterLayerListItem'; CALayerListItem.displayName = 'CALayerListItem';

12
invokeai/frontend/web/src/features/controlLayers/components/ControlLayersPanelContent.tsx
View File

@ -4,10 +4,10 @@ import { createMemoizedSelector } from 'app/store/createMemoizedSelector';
import { useAppSelector } from 'app/store/storeHooks'; import { useAppSelector } from 'app/store/storeHooks';
import ScrollableContent from 'common/components/OverlayScrollbars/ScrollableContent'; import ScrollableContent from 'common/components/OverlayScrollbars/ScrollableContent';
import { AddLayerButton } from 'features/controlLayers/components/AddLayerButton'; 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 { DeleteAllLayersButton } from 'features/controlLayers/components/DeleteAllLayersButton';
import { IPAdapterLayerListItem } from 'features/controlLayers/components/IPAdapterLayerListItem'; import { IPLayerListItem } from 'features/controlLayers/components/IPLayerListItem';
import { MaskedGuidanceLayerListItem } from 'features/controlLayers/components/MaskedGuidanceLayerListItem'; import { RGLayerListItem } from 'features/controlLayers/components/RGLayerListItem';
import { isRenderableLayer, selectControlLayersSlice } from 'features/controlLayers/store/controlLayersSlice'; import { isRenderableLayer, selectControlLayersSlice } from 'features/controlLayers/store/controlLayersSlice';
import type { Layer } from 'features/controlLayers/store/types'; import type { Layer } from 'features/controlLayers/store/types';
import { partition } from 'lodash-es'; import { partition } from 'lodash-es';
@ -46,13 +46,13 @@ type LayerWrapperProps = {
const LayerWrapper = memo(({ id, type }: LayerWrapperProps) => { const LayerWrapper = memo(({ id, type }: LayerWrapperProps) => {
if (type === 'regional_guidance_layer') { if (type === 'regional_guidance_layer') {
return <MaskedGuidanceLayerListItem key={id} layerId={id} />; return <RGLayerListItem key={id} layerId={id} />;
} }
if (type === 'control_adapter_layer') { if (type === 'control_adapter_layer') {
return <ControlAdapterLayerListItem key={id} layerId={id} />; return <CALayerListItem key={id} layerId={id} />;
} }
if (type === 'ip_adapter_layer') { if (type === 'ip_adapter_layer') {
return <IPAdapterLayerListItem key={id} layerId={id} />; return <IPLayerListItem key={id} layerId={id} />;
} }
}); });

12
invokeai/frontend/web/src/features/controlLayers/components/IPAdapterLayerListItem.tsx → invokeai/frontend/web/src/features/controlLayers/components/IPLayerListItem.tsx
View File

@ -2,9 +2,9 @@ import { Flex, Spacer } from '@invoke-ai/ui-library';
import { createMemoizedSelector } from 'app/store/createMemoizedSelector'; import { createMemoizedSelector } from 'app/store/createMemoizedSelector';
import { useAppSelector } from 'app/store/storeHooks'; import { useAppSelector } from 'app/store/storeHooks';
import ControlAdapterLayerConfig from 'features/controlLayers/components/controlAdapterOverrides/ControlAdapterLayerConfig'; import ControlAdapterLayerConfig from 'features/controlLayers/components/controlAdapterOverrides/ControlAdapterLayerConfig';
import { LayerDeleteButton } from 'features/controlLayers/components/LayerDeleteButton';
import { LayerTitle } from 'features/controlLayers/components/LayerTitle'; import { LayerTitle } from 'features/controlLayers/components/LayerTitle';
import { RPLayerDeleteButton } from 'features/controlLayers/components/RPLayerDeleteButton'; import { LayerVisibilityToggle } from 'features/controlLayers/components/LayerVisibilityToggle';
import { RPLayerVisibilityToggle } from 'features/controlLayers/components/RPLayerVisibilityToggle';
import { isIPAdapterLayer, selectControlLayersSlice } from 'features/controlLayers/store/controlLayersSlice'; import { isIPAdapterLayer, selectControlLayersSlice } from 'features/controlLayers/store/controlLayersSlice';
import { memo, useMemo } from 'react'; import { memo, useMemo } from 'react';
import { assert } from 'tsafe'; import { assert } from 'tsafe';
@ -13,7 +13,7 @@ type Props = {
layerId: string; layerId: string;
}; };
export const IPAdapterLayerListItem = memo(({ layerId }: Props) => { export const IPLayerListItem = memo(({ layerId }: Props) => {
const selector = useMemo( const selector = useMemo(
() => () =>
createMemoizedSelector(selectControlLayersSlice, (controlLayers) => { createMemoizedSelector(selectControlLayersSlice, (controlLayers) => {
@ -28,10 +28,10 @@ export const IPAdapterLayerListItem = memo(({ layerId }: Props) => {
<Flex gap={2} bg="base.800" borderRadius="base" p="1px"> <Flex gap={2} bg="base.800" borderRadius="base" p="1px">
<Flex flexDir="column" gap={4} w="full" bg="base.850" p={3} borderRadius="base"> <Flex flexDir="column" gap={4} w="full" bg="base.850" p={3} borderRadius="base">
<Flex gap={3} alignItems="center"> <Flex gap={3} alignItems="center">
<RPLayerVisibilityToggle layerId={layerId} /> <LayerVisibilityToggle layerId={layerId} />
<LayerTitle type="ip_adapter_layer" /> <LayerTitle type="ip_adapter_layer" />
<Spacer /> <Spacer />
<RPLayerDeleteButton layerId={layerId} /> <LayerDeleteButton layerId={layerId} />
</Flex> </Flex>
<ControlAdapterLayerConfig id={ipAdapterId} /> <ControlAdapterLayerConfig id={ipAdapterId} />
</Flex> </Flex>
@ -39,4 +39,4 @@ export const IPAdapterLayerListItem = memo(({ layerId }: Props) => {
); );
}); });
IPAdapterLayerListItem.displayName = 'IPAdapterLayerListItem'; IPLayerListItem.displayName = 'IPLayerListItem';

4
invokeai/frontend/web/src/features/controlLayers/components/RPLayerDeleteButton.tsx → invokeai/frontend/web/src/features/controlLayers/components/LayerDeleteButton.tsx
View File

@ -7,7 +7,7 @@ import { PiTrashSimpleBold } from 'react-icons/pi';
type Props = { layerId: string }; type Props = { layerId: string };
export const RPLayerDeleteButton = memo(({ layerId }: Props) => { export const LayerDeleteButton = memo(({ layerId }: Props) => {
const { t } = useTranslation(); const { t } = useTranslation();
const dispatch = useAppDispatch(); const dispatch = useAppDispatch();
const deleteLayer = useCallback(() => { const deleteLayer = useCallback(() => {
@ -25,4 +25,4 @@ export const RPLayerDeleteButton = memo(({ layerId }: Props) => {
); );
}); });
RPLayerDeleteButton.displayName = 'RPLayerDeleteButton'; LayerDeleteButton.displayName = 'LayerDeleteButton';

12
invokeai/frontend/web/src/features/controlLayers/components/RPLayerMenu.tsx → invokeai/frontend/web/src/features/controlLayers/components/LayerMenu.tsx
View File

@ -1,7 +1,7 @@
import { IconButton, Menu, MenuButton, MenuDivider, MenuItem, MenuList } from '@invoke-ai/ui-library'; import { IconButton, Menu, MenuButton, MenuDivider, MenuItem, MenuList } from '@invoke-ai/ui-library';
import { useAppDispatch } from 'app/store/storeHooks'; import { useAppDispatch } from 'app/store/storeHooks';
import { RPLayerMenuArrangeActions } from 'features/controlLayers/components/RPLayerMenuArrangeActions'; import { LayerMenuArrangeActions } from 'features/controlLayers/components/LayerMenuArrangeActions';
import { RPLayerMenuMaskedGuidanceActions } from 'features/controlLayers/components/RPLayerMenuMaskedGuidanceActions'; import { LayerMenuRGActions } from 'features/controlLayers/components/LayerMenuRGActions';
import { useLayerType } from 'features/controlLayers/hooks/layerStateHooks'; import { useLayerType } from 'features/controlLayers/hooks/layerStateHooks';
import { layerDeleted, layerReset } from 'features/controlLayers/store/controlLayersSlice'; import { layerDeleted, layerReset } from 'features/controlLayers/store/controlLayersSlice';
import { memo, useCallback } from 'react'; import { memo, useCallback } from 'react';
@ -10,7 +10,7 @@ import { PiArrowCounterClockwiseBold, PiDotsThreeVerticalBold, PiTrashSimpleBold
type Props = { layerId: string }; type Props = { layerId: string };
export const RPLayerMenu = memo(({ layerId }: Props) => { export const LayerMenu = memo(({ layerId }: Props) => {
const dispatch = useAppDispatch(); const dispatch = useAppDispatch();
const { t } = useTranslation(); const { t } = useTranslation();
const layerType = useLayerType(layerId); const layerType = useLayerType(layerId);
@ -26,13 +26,13 @@ export const RPLayerMenu = memo(({ layerId }: Props) => {
<MenuList> <MenuList>
{layerType === 'regional_guidance_layer' && ( {layerType === 'regional_guidance_layer' && (
<> <>
<RPLayerMenuMaskedGuidanceActions layerId={layerId} /> <LayerMenuRGActions layerId={layerId} />
<MenuDivider /> <MenuDivider />
</> </>
)} )}
{(layerType === 'regional_guidance_layer' || layerType === 'control_adapter_layer') && ( {(layerType === 'regional_guidance_layer' || layerType === 'control_adapter_layer') && (
<> <>
<RPLayerMenuArrangeActions layerId={layerId} /> <LayerMenuArrangeActions layerId={layerId} />
<MenuDivider /> <MenuDivider />
</> </>
)} )}
@ -49,4 +49,4 @@ export const RPLayerMenu = memo(({ layerId }: Props) => {
); );
}); });
RPLayerMenu.displayName = 'RPLayerMenu'; LayerMenu.displayName = 'LayerMenu';

4
invokeai/frontend/web/src/features/controlLayers/components/RPLayerMenuArrangeActions.tsx → invokeai/frontend/web/src/features/controlLayers/components/LayerMenuArrangeActions.tsx
View File

@ -16,7 +16,7 @@ import { assert } from 'tsafe';
type Props = { layerId: string }; type Props = { layerId: string };
export const RPLayerMenuArrangeActions = memo(({ layerId }: Props) => { export const LayerMenuArrangeActions = memo(({ layerId }: Props) => {
const dispatch = useAppDispatch(); const dispatch = useAppDispatch();
const { t } = useTranslation(); const { t } = useTranslation();
const selectValidActions = useMemo( const selectValidActions = useMemo(
@ -66,4 +66,4 @@ export const RPLayerMenuArrangeActions = memo(({ layerId }: Props) => {
); );
}); });
RPLayerMenuArrangeActions.displayName = 'RPLayerMenuArrangeActions'; LayerMenuArrangeActions.displayName = 'LayerMenuArrangeActions';

8
invokeai/frontend/web/src/features/controlLayers/components/RPLayerMenuMaskedGuidanceActions.tsx → invokeai/frontend/web/src/features/controlLayers/components/LayerMenuRGActions.tsx
View File

@ -3,7 +3,7 @@ import { createMemoizedSelector } from 'app/store/createMemoizedSelector';
import { guidanceLayerIPAdapterAdded } from 'app/store/middleware/listenerMiddleware/listeners/regionalControlToControlAdapterBridge'; import { guidanceLayerIPAdapterAdded } from 'app/store/middleware/listenerMiddleware/listeners/regionalControlToControlAdapterBridge';
import { useAppDispatch, useAppSelector } from 'app/store/storeHooks'; import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
import { import {
isMaskedGuidanceLayer, isRegionalGuidanceLayer,
maskLayerNegativePromptChanged, maskLayerNegativePromptChanged,
maskLayerPositivePromptChanged, maskLayerPositivePromptChanged,
selectControlLayersSlice, selectControlLayersSlice,
@ -15,14 +15,14 @@ import { assert } from 'tsafe';
type Props = { layerId: string }; type Props = { layerId: string };
export const RPLayerMenuMaskedGuidanceActions = memo(({ layerId }: Props) => { export const LayerMenuRGActions = memo(({ layerId }: Props) => {
const dispatch = useAppDispatch(); const dispatch = useAppDispatch();
const { t } = useTranslation(); const { t } = useTranslation();
const selectValidActions = useMemo( const selectValidActions = useMemo(
() => () =>
createMemoizedSelector(selectControlLayersSlice, (controlLayers) => { createMemoizedSelector(selectControlLayersSlice, (controlLayers) => {
const layer = controlLayers.present.layers.find((l) => l.id === layerId); 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 { return {
canAddPositivePrompt: layer.positivePrompt === null, canAddPositivePrompt: layer.positivePrompt === null,
canAddNegativePrompt: layer.negativePrompt === null, canAddNegativePrompt: layer.negativePrompt === null,
@ -55,4 +55,4 @@ export const RPLayerMenuMaskedGuidanceActions = memo(({ layerId }: Props) => {
); );
}); });
RPLayerMenuMaskedGuidanceActions.displayName = 'RPLayerMenuMaskedGuidanceActions'; LayerMenuRGActions.displayName = 'LayerMenuRGActions';

2
invokeai/frontend/web/src/features/controlLayers/components/LayerTitle.tsx
View File

@ -11,7 +11,7 @@ export const LayerTitle = memo(({ type }: Props) => {
const { t } = useTranslation(); const { t } = useTranslation();
const title = useMemo(() => { const title = useMemo(() => {
if (type === 'regional_guidance_layer') { if (type === 'regional_guidance_layer') {
return t('controlLayers.maskedGuidance'); return t('controlLayers.regionalGuidance');
} else if (type === 'control_adapter_layer') { } else if (type === 'control_adapter_layer') {
return t('common.controlNet'); return t('common.controlNet');
} else if (type === 'ip_adapter_layer') { } else if (type === 'ip_adapter_layer') {

4
invokeai/frontend/web/src/features/controlLayers/components/RPLayerVisibilityToggle.tsx → invokeai/frontend/web/src/features/controlLayers/components/LayerVisibilityToggle.tsx
View File

@ -10,7 +10,7 @@ type Props = {
layerId: string; layerId: string;
}; };
export const RPLayerVisibilityToggle = memo(({ layerId }: Props) => { export const LayerVisibilityToggle = memo(({ layerId }: Props) => {
const { t } = useTranslation(); const { t } = useTranslation();
const dispatch = useAppDispatch(); const dispatch = useAppDispatch();
const isVisible = useLayerIsVisible(layerId); const isVisible = useLayerIsVisible(layerId);
@ -31,4 +31,4 @@ export const RPLayerVisibilityToggle = memo(({ layerId }: Props) => {
); );
}); });
RPLayerVisibilityToggle.displayName = 'RPLayerVisibilityToggle'; LayerVisibilityToggle.displayName = 'LayerVisibilityToggle';

8
invokeai/frontend/web/src/features/controlLayers/components/RPLayerAutoNegativeCheckbox.tsx → invokeai/frontend/web/src/features/controlLayers/components/RGLayerAutoNegativeCheckbox.tsx
View File

@ -2,7 +2,7 @@ import { Checkbox, FormControl, FormLabel } from '@invoke-ai/ui-library';
import { createSelector } from '@reduxjs/toolkit'; import { createSelector } from '@reduxjs/toolkit';
import { useAppDispatch, useAppSelector } from 'app/store/storeHooks'; import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
import { import {
isMaskedGuidanceLayer, isRegionalGuidanceLayer,
maskLayerAutoNegativeChanged, maskLayerAutoNegativeChanged,
selectControlLayersSlice, selectControlLayersSlice,
} from 'features/controlLayers/store/controlLayersSlice'; } from 'features/controlLayers/store/controlLayersSlice';
@ -20,7 +20,7 @@ const useAutoNegative = (layerId: string) => {
() => () =>
createSelector(selectControlLayersSlice, (controlLayers) => { createSelector(selectControlLayersSlice, (controlLayers) => {
const layer = controlLayers.present.layers.find((l) => l.id === layerId); 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; return layer.autoNegative;
}), }),
[layerId] [layerId]
@ -29,7 +29,7 @@ const useAutoNegative = (layerId: string) => {
return autoNegative; return autoNegative;
}; };
export const MaskedGuidanceLayerAutoNegativeCheckbox = memo(({ layerId }: Props) => { export const RGLayerAutoNegativeCheckbox = memo(({ layerId }: Props) => {
const { t } = useTranslation(); const { t } = useTranslation();
const dispatch = useAppDispatch(); const dispatch = useAppDispatch();
const autoNegative = useAutoNegative(layerId); const autoNegative = useAutoNegative(layerId);
@ -48,4 +48,4 @@ export const MaskedGuidanceLayerAutoNegativeCheckbox = memo(({ layerId }: Props)
); );
}); });
MaskedGuidanceLayerAutoNegativeCheckbox.displayName = 'MaskedGuidanceLayerAutoNegativeCheckbox'; RGLayerAutoNegativeCheckbox.displayName = 'RGLayerAutoNegativeCheckbox';

8
invokeai/frontend/web/src/features/controlLayers/components/RPLayerColorPicker.tsx → invokeai/frontend/web/src/features/controlLayers/components/RGLayerColorPicker.tsx
View File

@ -4,7 +4,7 @@ import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
import RgbColorPicker from 'common/components/RgbColorPicker'; import RgbColorPicker from 'common/components/RgbColorPicker';
import { rgbColorToString } from 'features/canvas/util/colorToString'; import { rgbColorToString } from 'features/canvas/util/colorToString';
import { import {
isMaskedGuidanceLayer, isRegionalGuidanceLayer,
maskLayerPreviewColorChanged, maskLayerPreviewColorChanged,
selectControlLayersSlice, selectControlLayersSlice,
} from 'features/controlLayers/store/controlLayersSlice'; } from 'features/controlLayers/store/controlLayersSlice';
@ -17,13 +17,13 @@ type Props = {
layerId: string; layerId: string;
}; };
export const RPLayerColorPicker = memo(({ layerId }: Props) => { export const RGLayerColorPicker = memo(({ layerId }: Props) => {
const { t } = useTranslation(); const { t } = useTranslation();
const selectColor = useMemo( const selectColor = useMemo(
() => () =>
createMemoizedSelector(selectControlLayersSlice, (controlLayers) => { createMemoizedSelector(selectControlLayersSlice, (controlLayers) => {
const layer = controlLayers.present.layers.find((l) => l.id === layerId); 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; return layer.previewColor;
}), }),
[layerId] [layerId]
@ -64,4 +64,4 @@ export const RPLayerColorPicker = memo(({ layerId }: Props) => {
); );
}); });
RPLayerColorPicker.displayName = 'RPLayerColorPicker'; RGLayerColorPicker.displayName = 'RGLayerColorPicker';

14
invokeai/frontend/web/src/features/controlLayers/components/RPLayerIPAdapterList.tsx → invokeai/frontend/web/src/features/controlLayers/components/RGLayerIPAdapterList.tsx
View File

@ -3,7 +3,7 @@ import { createMemoizedSelector } from 'app/store/createMemoizedSelector';
import { guidanceLayerIPAdapterDeleted } from 'app/store/middleware/listenerMiddleware/listeners/regionalControlToControlAdapterBridge'; import { guidanceLayerIPAdapterDeleted } from 'app/store/middleware/listenerMiddleware/listeners/regionalControlToControlAdapterBridge';
import { useAppDispatch, useAppSelector } from 'app/store/storeHooks'; import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
import ControlAdapterLayerConfig from 'features/controlLayers/components/controlAdapterOverrides/ControlAdapterLayerConfig'; 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 { memo, useCallback, useMemo } from 'react';
import { PiTrashSimpleBold } from 'react-icons/pi'; import { PiTrashSimpleBold } from 'react-icons/pi';
import { assert } from 'tsafe'; import { assert } from 'tsafe';
@ -12,11 +12,11 @@ type Props = {
layerId: string; layerId: string;
}; };
export const RPLayerIPAdapterList = memo(({ layerId }: Props) => { export const RGLayerIPAdapterList = memo(({ layerId }: Props) => {
const selectIPAdapterIds = useMemo( const selectIPAdapterIds = useMemo(
() => () =>
createMemoizedSelector(selectControlLayersSlice, (controlLayers) => { 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`); assert(layer, `Layer ${layerId} not found`);
return layer.ipAdapterIds; return layer.ipAdapterIds;
}), }),
@ -37,14 +37,14 @@ export const RPLayerIPAdapterList = memo(({ layerId }: Props) => {
<Divider /> <Divider />
</Flex> </Flex>
)} )}
<IPAdapterListItem layerId={layerId} ipAdapterId={id} ipAdapterNumber={index + 1} /> <RGLayerIPAdapterListItem layerId={layerId} ipAdapterId={id} ipAdapterNumber={index + 1} />
</Flex> </Flex>
))} ))}
</> </>
); );
}); });
RPLayerIPAdapterList.displayName = 'RPLayerIPAdapterList'; RGLayerIPAdapterList.displayName = 'RGLayerIPAdapterList';
type IPAdapterListItemProps = { type IPAdapterListItemProps = {
layerId: string; layerId: string;
@ -52,7 +52,7 @@ type IPAdapterListItemProps = {
ipAdapterNumber: number; ipAdapterNumber: number;
}; };
const IPAdapterListItem = memo(({ layerId, ipAdapterId, ipAdapterNumber }: IPAdapterListItemProps) => { const RGLayerIPAdapterListItem = memo(({ layerId, ipAdapterId, ipAdapterNumber }: IPAdapterListItemProps) => {
const dispatch = useAppDispatch(); const dispatch = useAppDispatch();
const onDeleteIPAdapter = useCallback(() => { const onDeleteIPAdapter = useCallback(() => {
dispatch(guidanceLayerIPAdapterDeleted({ layerId, ipAdapterId })); dispatch(guidanceLayerIPAdapterDeleted({ layerId, ipAdapterId }));
@ -77,4 +77,4 @@ const IPAdapterListItem = memo(({ layerId, ipAdapterId, ipAdapterNumber }: IPAda
); );
}); });
IPAdapterListItem.displayName = 'IPAdapterListItem'; RGLayerIPAdapterListItem.displayName = 'RGLayerIPAdapterListItem';

40
invokeai/frontend/web/src/features/controlLayers/components/MaskedGuidanceLayerListItem.tsx → invokeai/frontend/web/src/features/controlLayers/components/RGLayerListItem.tsx
View File

@ -2,17 +2,17 @@ import { Badge, Flex, Spacer } from '@invoke-ai/ui-library';
import { createMemoizedSelector } from 'app/store/createMemoizedSelector'; import { createMemoizedSelector } from 'app/store/createMemoizedSelector';
import { useAppDispatch, useAppSelector } from 'app/store/storeHooks'; import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
import { rgbColorToString } from 'features/canvas/util/colorToString'; 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 { LayerTitle } from 'features/controlLayers/components/LayerTitle';
import { RPLayerColorPicker } from 'features/controlLayers/components/RPLayerColorPicker'; import { LayerVisibilityToggle } from 'features/controlLayers/components/LayerVisibilityToggle';
import { RPLayerDeleteButton } from 'features/controlLayers/components/RPLayerDeleteButton'; import { RGLayerColorPicker } from 'features/controlLayers/components/RGLayerColorPicker';
import { RPLayerIPAdapterList } from 'features/controlLayers/components/RPLayerIPAdapterList'; import { RGLayerIPAdapterList } from 'features/controlLayers/components/RGLayerIPAdapterList';
import { RPLayerMenu } from 'features/controlLayers/components/RPLayerMenu'; import { RGLayerNegativePrompt } from 'features/controlLayers/components/RGLayerNegativePrompt';
import { RPLayerNegativePrompt } from 'features/controlLayers/components/RPLayerNegativePrompt'; import { RGLayerPositivePrompt } from 'features/controlLayers/components/RGLayerPositivePrompt';
import { RPLayerPositivePrompt } from 'features/controlLayers/components/RPLayerPositivePrompt'; import RGLayerSettingsPopover from 'features/controlLayers/components/RGLayerSettingsPopover';
import RPLayerSettingsPopover from 'features/controlLayers/components/RPLayerSettingsPopover';
import { RPLayerVisibilityToggle } from 'features/controlLayers/components/RPLayerVisibilityToggle';
import { import {
isMaskedGuidanceLayer, isRegionalGuidanceLayer,
layerSelected, layerSelected,
selectControlLayersSlice, selectControlLayersSlice,
} from 'features/controlLayers/store/controlLayersSlice'; } from 'features/controlLayers/store/controlLayersSlice';
@ -26,14 +26,14 @@ type Props = {
layerId: string; layerId: string;
}; };
export const MaskedGuidanceLayerListItem = memo(({ layerId }: Props) => { export const RGLayerListItem = memo(({ layerId }: Props) => {
const { t } = useTranslation(); const { t } = useTranslation();
const dispatch = useAppDispatch(); const dispatch = useAppDispatch();
const selector = useMemo( const selector = useMemo(
() => () =>
createMemoizedSelector(selectControlLayersSlice, (controlLayers) => { createMemoizedSelector(selectControlLayersSlice, (controlLayers) => {
const layer = controlLayers.present.layers.find((l) => l.id === layerId); 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 { return {
color: rgbColorToString(layer.previewColor), color: rgbColorToString(layer.previewColor),
hasPositivePrompt: layer.positivePrompt !== null, hasPositivePrompt: layer.positivePrompt !== null,
@ -62,7 +62,7 @@ export const MaskedGuidanceLayerListItem = memo(({ layerId }: Props) => {
> >
<Flex flexDir="column" w="full" bg="base.850" p={3} gap={3} borderRadius="base"> <Flex flexDir="column" w="full" bg="base.850" p={3} gap={3} borderRadius="base">
<Flex gap={3} alignItems="center" cursor="pointer"> <Flex gap={3} alignItems="center" cursor="pointer">
<RPLayerVisibilityToggle layerId={layerId} /> <LayerVisibilityToggle layerId={layerId} />
<LayerTitle type="regional_guidance_layer" /> <LayerTitle type="regional_guidance_layer" />
<Spacer /> <Spacer />
{autoNegative === 'invert' && ( {autoNegative === 'invert' && (
@ -70,18 +70,18 @@ export const MaskedGuidanceLayerListItem = memo(({ layerId }: Props) => {
{t('controlLayers.autoNegative')} {t('controlLayers.autoNegative')}
</Badge> </Badge>
)} )}
<RPLayerColorPicker layerId={layerId} /> <RGLayerColorPicker layerId={layerId} />
<RPLayerSettingsPopover layerId={layerId} /> <RGLayerSettingsPopover layerId={layerId} />
<RPLayerMenu layerId={layerId} /> <LayerMenu layerId={layerId} />
<RPLayerDeleteButton layerId={layerId} /> <LayerDeleteButton layerId={layerId} />
</Flex> </Flex>
{!hasPositivePrompt && !hasNegativePrompt && !hasIPAdapters && <AddPromptButtons layerId={layerId} />} {!hasPositivePrompt && !hasNegativePrompt && !hasIPAdapters && <AddPromptButtons layerId={layerId} />}
{hasPositivePrompt && <RPLayerPositivePrompt layerId={layerId} />} {hasPositivePrompt && <RGLayerPositivePrompt layerId={layerId} />}
{hasNegativePrompt && <RPLayerNegativePrompt layerId={layerId} />} {hasNegativePrompt && <RGLayerNegativePrompt layerId={layerId} />}
{hasIPAdapters && <RPLayerIPAdapterList layerId={layerId} />} {hasIPAdapters && <RGLayerIPAdapterList layerId={layerId} />}
</Flex> </Flex>
</Flex> </Flex>
); );
}); });
MaskedGuidanceLayerListItem.displayName = 'MaskedGuidanceLayerListItem'; RGLayerListItem.displayName = 'RGLayerListItem';

8
invokeai/frontend/web/src/features/controlLayers/components/RPLayerNegativePrompt.tsx → invokeai/frontend/web/src/features/controlLayers/components/RGLayerNegativePrompt.tsx
View File

@ -1,6 +1,6 @@
import { Box, Textarea } from '@invoke-ai/ui-library'; import { Box, Textarea } from '@invoke-ai/ui-library';
import { useAppDispatch } from 'app/store/storeHooks'; 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 { useLayerNegativePrompt } from 'features/controlLayers/hooks/layerStateHooks';
import { maskLayerNegativePromptChanged } from 'features/controlLayers/store/controlLayersSlice'; import { maskLayerNegativePromptChanged } from 'features/controlLayers/store/controlLayersSlice';
import { PromptOverlayButtonWrapper } from 'features/parameters/components/Prompts/PromptOverlayButtonWrapper'; import { PromptOverlayButtonWrapper } from 'features/parameters/components/Prompts/PromptOverlayButtonWrapper';
@ -14,7 +14,7 @@ type Props = {
layerId: string; layerId: string;
}; };
export const RPLayerNegativePrompt = memo(({ layerId }: Props) => { export const RGLayerNegativePrompt = memo(({ layerId }: Props) => {
const prompt = useLayerNegativePrompt(layerId); const prompt = useLayerNegativePrompt(layerId);
const dispatch = useAppDispatch(); const dispatch = useAppDispatch();
const textareaRef = useRef<HTMLTextAreaElement>(null); const textareaRef = useRef<HTMLTextAreaElement>(null);
@ -47,7 +47,7 @@ export const RPLayerNegativePrompt = memo(({ layerId }: Props) => {
fontSize="sm" fontSize="sm"
/> />
<PromptOverlayButtonWrapper> <PromptOverlayButtonWrapper>
<RPLayerPromptDeleteButton layerId={layerId} polarity="negative" /> <RGLayerPromptDeleteButton layerId={layerId} polarity="negative" />
<AddPromptTriggerButton isOpen={isOpen} onOpen={onOpen} /> <AddPromptTriggerButton isOpen={isOpen} onOpen={onOpen} />
</PromptOverlayButtonWrapper> </PromptOverlayButtonWrapper>
</Box> </Box>
@ -55,4 +55,4 @@ export const RPLayerNegativePrompt = memo(({ layerId }: Props) => {
); );
}); });
RPLayerNegativePrompt.displayName = 'RPLayerNegativePrompt'; RGLayerNegativePrompt.displayName = 'RGLayerNegativePrompt';

8
invokeai/frontend/web/src/features/controlLayers/components/RPLayerPositivePrompt.tsx → invokeai/frontend/web/src/features/controlLayers/components/RGLayerPositivePrompt.tsx
View File

@ -1,6 +1,6 @@
import { Box, Textarea } from '@invoke-ai/ui-library'; import { Box, Textarea } from '@invoke-ai/ui-library';
import { useAppDispatch } from 'app/store/storeHooks'; 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 { useLayerPositivePrompt } from 'features/controlLayers/hooks/layerStateHooks';
import { maskLayerPositivePromptChanged } from 'features/controlLayers/store/controlLayersSlice'; import { maskLayerPositivePromptChanged } from 'features/controlLayers/store/controlLayersSlice';
import { PromptOverlayButtonWrapper } from 'features/parameters/components/Prompts/PromptOverlayButtonWrapper'; import { PromptOverlayButtonWrapper } from 'features/parameters/components/Prompts/PromptOverlayButtonWrapper';
@ -14,7 +14,7 @@ type Props = {
layerId: string; layerId: string;
}; };
export const RPLayerPositivePrompt = memo(({ layerId }: Props) => { export const RGLayerPositivePrompt = memo(({ layerId }: Props) => {
const prompt = useLayerPositivePrompt(layerId); const prompt = useLayerPositivePrompt(layerId);
const dispatch = useAppDispatch(); const dispatch = useAppDispatch();
const textareaRef = useRef<HTMLTextAreaElement>(null); const textareaRef = useRef<HTMLTextAreaElement>(null);
@ -47,7 +47,7 @@ export const RPLayerPositivePrompt = memo(({ layerId }: Props) => {
minH={28} minH={28}
/> />
<PromptOverlayButtonWrapper> <PromptOverlayButtonWrapper>
<RPLayerPromptDeleteButton layerId={layerId} polarity="positive" /> <RGLayerPromptDeleteButton layerId={layerId} polarity="positive" />
<AddPromptTriggerButton isOpen={isOpen} onOpen={onOpen} /> <AddPromptTriggerButton isOpen={isOpen} onOpen={onOpen} />
</PromptOverlayButtonWrapper> </PromptOverlayButtonWrapper>
</Box> </Box>
@ -55,4 +55,4 @@ export const RPLayerPositivePrompt = memo(({ layerId }: Props) => {
); );
}); });
RPLayerPositivePrompt.displayName = 'RPLayerPositivePrompt'; RGLayerPositivePrompt.displayName = 'RGLayerPositivePrompt';

4
invokeai/frontend/web/src/features/controlLayers/components/RPLayerPromptDeleteButton.tsx → invokeai/frontend/web/src/features/controlLayers/components/RGLayerPromptDeleteButton.tsx
View File

@ -13,7 +13,7 @@ type Props = {
polarity: 'positive' | 'negative'; polarity: 'positive' | 'negative';
}; };
export const RPLayerPromptDeleteButton = memo(({ layerId, polarity }: Props) => { export const RGLayerPromptDeleteButton = memo(({ layerId, polarity }: Props) => {
const { t } = useTranslation(); const { t } = useTranslation();
const dispatch = useAppDispatch(); const dispatch = useAppDispatch();
const onClick = useCallback(() => { const onClick = useCallback(() => {
@ -35,4 +35,4 @@ export const RPLayerPromptDeleteButton = memo(({ layerId, polarity }: Props) =>
); );
}); });
RPLayerPromptDeleteButton.displayName = 'RPLayerPromptDeleteButton'; RGLayerPromptDeleteButton.displayName = 'RGLayerPromptDeleteButton';

8
invokeai/frontend/web/src/features/controlLayers/components/RPLayerSettingsPopover.tsx → invokeai/frontend/web/src/features/controlLayers/components/RGLayerSettingsPopover.tsx
View File

@ -9,7 +9,7 @@ import {
PopoverContent, PopoverContent,
PopoverTrigger, PopoverTrigger,
} from '@invoke-ai/ui-library'; } from '@invoke-ai/ui-library';
import { MaskedGuidanceLayerAutoNegativeCheckbox } from 'features/controlLayers/components/RPLayerAutoNegativeCheckbox'; import { RGLayerAutoNegativeCheckbox } from 'features/controlLayers/components/RGLayerAutoNegativeCheckbox';
import { memo } from 'react'; import { memo } from 'react';
import { useTranslation } from 'react-i18next'; import { useTranslation } from 'react-i18next';
import { PiGearSixBold } from 'react-icons/pi'; import { PiGearSixBold } from 'react-icons/pi';
@ -23,7 +23,7 @@ const formLabelProps: FormLabelProps = {
minW: 32, minW: 32,
}; };
const RPLayerSettingsPopover = ({ layerId }: Props) => { const RGLayerSettingsPopover = ({ layerId }: Props) => {
const { t } = useTranslation(); const { t } = useTranslation();
return ( return (
@ -41,7 +41,7 @@ const RPLayerSettingsPopover = ({ layerId }: Props) => {
<PopoverBody> <PopoverBody>
<Flex direction="column" gap={2}> <Flex direction="column" gap={2}>
<FormControlGroup formLabelProps={formLabelProps}> <FormControlGroup formLabelProps={formLabelProps}>
<MaskedGuidanceLayerAutoNegativeCheckbox layerId={layerId} /> <RGLayerAutoNegativeCheckbox layerId={layerId} />
</FormControlGroup> </FormControlGroup>
</Flex> </Flex>
</PopoverBody> </PopoverBody>
@ -50,4 +50,4 @@ const RPLayerSettingsPopover = ({ layerId }: Props) => {
); );
}; };
export default memo(RPLayerSettingsPopover); export default memo(RGLayerSettingsPopover);

4
invokeai/frontend/web/src/features/controlLayers/components/StageComponent.tsx
View File

@ -10,7 +10,7 @@ import {
$isMouseOver, $isMouseOver,
$lastMouseDownPos, $lastMouseDownPos,
$tool, $tool,
isMaskedGuidanceLayer, isRegionalGuidanceLayer,
layerBboxChanged, layerBboxChanged,
layerTranslated, layerTranslated,
selectControlLayersSlice, selectControlLayersSlice,
@ -29,7 +29,7 @@ const log = logger('controlLayers');
const selectSelectedLayerColor = createMemoizedSelector(selectControlLayersSlice, (controlLayers) => { const selectSelectedLayerColor = createMemoizedSelector(selectControlLayersSlice, (controlLayers) => {
const layer = controlLayers.present.layers const layer = controlLayers.present.layers
.filter(isMaskedGuidanceLayer) .filter(isRegionalGuidanceLayer)
.find((l) => l.id === controlLayers.present.selectedLayerId); .find((l) => l.id === controlLayers.present.selectedLayerId);
return layer?.previewColor ?? null; return layer?.previewColor ?? null;
}); });

6
invokeai/frontend/web/src/features/controlLayers/hooks/layerStateHooks.ts
View File

@ -2,7 +2,7 @@ import { createSelector } from '@reduxjs/toolkit';
import { useAppSelector } from 'app/store/storeHooks'; import { useAppSelector } from 'app/store/storeHooks';
import { import {
isControlAdapterLayer, isControlAdapterLayer,
isMaskedGuidanceLayer, isRegionalGuidanceLayer,
selectControlLayersSlice, selectControlLayersSlice,
} from 'features/controlLayers/store/controlLayersSlice'; } from 'features/controlLayers/store/controlLayersSlice';
import { useMemo } from 'react'; import { useMemo } from 'react';
@ -13,7 +13,7 @@ export const useLayerPositivePrompt = (layerId: string) => {
() => () =>
createSelector(selectControlLayersSlice, (controlLayers) => { createSelector(selectControlLayersSlice, (controlLayers) => {
const layer = controlLayers.present.layers.find((l) => l.id === layerId); 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`); assert(layer.positivePrompt !== null, `Layer ${layerId} does not have a positive prompt`);
return layer.positivePrompt; return layer.positivePrompt;
}), }),
@ -28,7 +28,7 @@ export const useLayerNegativePrompt = (layerId: string) => {
() => () =>
createSelector(selectControlLayersSlice, (controlLayers) => { createSelector(selectControlLayersSlice, (controlLayers) => {
const layer = controlLayers.present.layers.find((l) => l.id === layerId); 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`); assert(layer.negativePrompt !== null, `Layer ${layerId} does not have a negative prompt`);
return layer.negativePrompt; return layer.negativePrompt;
}), }),

4
invokeai/frontend/web/src/features/controlLayers/hooks/useRegionalControlTitle.ts
View File

@ -1,6 +1,6 @@
import { createSelector } from '@reduxjs/toolkit'; import { createSelector } from '@reduxjs/toolkit';
import { useAppSelector } from 'app/store/storeHooks'; 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 { useMemo } from 'react';
import { useTranslation } from 'react-i18next'; import { useTranslation } from 'react-i18next';
@ -9,7 +9,7 @@ const selectValidLayerCount = createSelector(selectControlLayersSlice, (controlL
return 0; return 0;
} }
const validLayers = controlLayers.present.layers const validLayers = controlLayers.present.layers
.filter(isMaskedGuidanceLayer) .filter(isRegionalGuidanceLayer)
.filter((l) => l.isEnabled) .filter((l) => l.isEnabled)
.filter((l) => { .filter((l) => {
const hasTextPrompt = Boolean(l.positivePrompt || l.negativePrompt); const hasTextPrompt = Boolean(l.positivePrompt || l.negativePrompt);

18
invokeai/frontend/web/src/features/controlLayers/store/controlLayersSlice.ts
View File

@ -56,7 +56,7 @@ export const initialControlLayersState: ControlLayersState = {
}; };
const isLine = (obj: VectorMaskLine | VectorMaskRect): obj is VectorMaskLine => obj.type === 'vector_mask_line'; 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'; layer?.type === 'regional_guidance_layer';
export const isControlAdapterLayer = (layer?: Layer): layer is ControlAdapterLayer => export const isControlAdapterLayer = (layer?: Layer): layer is ControlAdapterLayer =>
layer?.type === 'control_adapter_layer'; layer?.type === 'control_adapter_layer';
@ -78,7 +78,7 @@ const resetLayer = (layer: Layer) => {
} }
}; };
const getVectorMaskPreviewColor = (state: ControlLayersState): RgbColor => { const getVectorMaskPreviewColor = (state: ControlLayersState): RgbColor => {
const vmLayers = state.layers.filter(isMaskedGuidanceLayer); const vmLayers = state.layers.filter(isRegionalGuidanceLayer);
const lastColor = vmLayers[vmLayers.length - 1]?.previewColor; const lastColor = vmLayers[vmLayers.length - 1]?.previewColor;
return LayerColors.next(lastColor); return LayerColors.next(lastColor);
}; };
@ -88,10 +88,10 @@ export const controlLayersSlice = createSlice({
initialState: initialControlLayersState, initialState: initialControlLayersState,
reducers: { reducers: {
//#region All Layers //#region All Layers
maskedGuidanceLayerAdded: (state, action: PayloadAction<{ layerId: string }>) => { regionalGuidanceLayerAdded: (state, action: PayloadAction<{ layerId: string }>) => {
const { layerId } = action.payload; const { layerId } = action.payload;
const layer: RegionalGuidanceLayer = { const layer: RegionalGuidanceLayer = {
id: getMaskedGuidanceLayerId(layerId), id: getRegionalGuidanceLayerId(layerId),
type: 'regional_guidance_layer', type: 'regional_guidance_layer',
isEnabled: true, isEnabled: true,
bbox: null, bbox: null,
@ -291,7 +291,7 @@ export const controlLayersSlice = createSlice({
const { layerId, points, tool } = action.payload; const { layerId, points, tool } = action.payload;
const layer = state.layers.find((l) => l.id === layerId); const layer = state.layers.find((l) => l.id === layerId);
if (layer?.type === 'regional_guidance_layer') { 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({ layer.maskObjects.push({
type: 'vector_mask_line', type: 'vector_mask_line',
tool: tool, tool: tool,
@ -518,7 +518,7 @@ export const {
layerVisibilityToggled, layerVisibilityToggled,
selectedLayerReset, selectedLayerReset,
selectedLayerDeleted, selectedLayerDeleted,
maskedGuidanceLayerAdded, regionalGuidanceLayerAdded,
ipAdapterLayerAdded, ipAdapterLayerAdded,
controlAdapterLayerAdded, controlAdapterLayerAdded,
layerOpacityChanged, layerOpacityChanged,
@ -595,10 +595,10 @@ export const regional_guidance_layer_RECT_NAME = 'regional_guidance_layer.rect';
export const LAYER_BBOX_NAME = 'layer.bbox'; export const LAYER_BBOX_NAME = 'layer.bbox';
// Getters for non-singleton layer and object IDs // Getters for non-singleton layer and object IDs
const getMaskedGuidanceLayerId = (layerId: string) => `${regional_guidance_layer_NAME}_${layerId}`; const getRegionalGuidanceLayerId = (layerId: string) => `${regional_guidance_layer_NAME}_${layerId}`;
const getMaskedGuidanceLayerLineId = (layerId: string, lineId: string) => `${layerId}.line_${lineId}`; const getRegionalGuidanceLayerLineId = (layerId: string, lineId: string) => `${layerId}.line_${lineId}`;
const getMaskedGuidnaceLayerRectId = (layerId: string, lineId: string) => `${layerId}.rect_${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}`; `${layerId}.objectGroup_${groupId}`;
export const getLayerBboxId = (layerId: string) => `${layerId}.bbox`; export const getLayerBboxId = (layerId: string) => `${layerId}.bbox`;
const getControlNetLayerId = (layerId: string) => `control_adapter_layer_${layerId}`; const getControlNetLayerId = (layerId: string) => `control_adapter_layer_${layerId}`;

4
invokeai/frontend/web/src/features/controlLayers/util/getLayerBlobs.ts
View File

@ -1,7 +1,7 @@
import { getStore } from 'app/store/nanostores/store'; import { getStore } from 'app/store/nanostores/store';
import openBase64ImageInTab from 'common/util/openBase64ImageInTab'; import openBase64ImageInTab from 'common/util/openBase64ImageInTab';
import { blobToDataURL } from 'features/canvas/util/blobToDataURL'; 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 { renderers } from 'features/controlLayers/util/renderers';
import Konva from 'konva'; import Konva from 'konva';
import { assert } from 'tsafe'; import { assert } from 'tsafe';
@ -19,7 +19,7 @@ export const getRegionalPromptLayerBlobs = async (
const state = getStore().getState(); const state = getStore().getState();
const { layers } = state.controlLayers.present; const { layers } = state.controlLayers.present;
const { width, height } = state.controlLayers.present.size; const { width, height } = state.controlLayers.present.size;
const reduxLayers = layers.filter(isMaskedGuidanceLayer); const reduxLayers = layers.filter(isRegionalGuidanceLayer);
const container = document.createElement('div'); const container = document.createElement('div');
const stage = new Konva.Stage({ container, width, height }); const stage = new Konva.Stage({ container, width, height });
renderers.renderLayers(stage, reduxLayers, 1, 'brush'); renderers.renderLayers(stage, reduxLayers, 1, 'brush');

17
invokeai/frontend/web/src/features/controlLayers/util/renderers.ts
View File

@ -9,9 +9,9 @@ import {
CONTROLNET_LAYER_NAME, CONTROLNET_LAYER_NAME,
getControlNetLayerImageId, getControlNetLayerImageId,
getLayerBboxId, getLayerBboxId,
getMaskedGuidanceLayerObjectGroupId, getRegionalGuidanceLayerObjectGroupId,
isControlAdapterLayer, isControlAdapterLayer,
isMaskedGuidanceLayer, isRegionalGuidanceLayer,
isRenderableLayer, isRenderableLayer,
LAYER_BBOX_NAME, LAYER_BBOX_NAME,
regional_guidance_layer_LINE_NAME, regional_guidance_layer_LINE_NAME,
@ -224,7 +224,7 @@ const renderToolPreview = (
* @param reduxLayer The redux layer to create the konva layer from. * @param reduxLayer The redux layer to create the konva layer from.
* @param onLayerPosChanged Callback for when the layer's position changes. * @param onLayerPosChanged Callback for when the layer's position changes.
*/ */
const createMaskedGuidanceLayer = ( const createRegionalGuidanceLayer = (
stage: Konva.Stage, stage: Konva.Stage,
reduxLayer: RegionalGuidanceLayer, reduxLayer: RegionalGuidanceLayer,
onLayerPosChanged?: (layerId: string, x: number, y: number) => void 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) // The object group holds all of the layer's objects (e.g. lines and rects)
const konvaObjectGroup = new Konva.Group({ const konvaObjectGroup = new Konva.Group({
id: getMaskedGuidanceLayerObjectGroupId(reduxLayer.id, uuidv4()), id: getRegionalGuidanceLayerObjectGroupId(reduxLayer.id, uuidv4()),
name: regional_guidance_layer_OBJECT_GROUP_NAME, name: regional_guidance_layer_OBJECT_GROUP_NAME,
listening: false, listening: false,
}); });
@ -325,7 +325,7 @@ const createVectorMaskRect = (reduxObject: VectorMaskRect, konvaGroup: Konva.Gro
* @param globalMaskLayerOpacity The opacity of the global mask layer. * @param globalMaskLayerOpacity The opacity of the global mask layer.
* @param tool The current tool. * @param tool The current tool.
*/ */
const renderMaskedGuidanceLayer = ( const renderRegionalGuidanceLayer = (
stage: Konva.Stage, stage: Konva.Stage,
reduxLayer: RegionalGuidanceLayer, reduxLayer: RegionalGuidanceLayer,
globalMaskLayerOpacity: number, globalMaskLayerOpacity: number,
@ -333,7 +333,8 @@ const renderMaskedGuidanceLayer = (
onLayerPosChanged?: (layerId: string, x: number, y: number) => void onLayerPosChanged?: (layerId: string, x: number, y: number) => void
): void => { ): void => {
const konvaLayer = const konvaLayer =
stage.findOne<Konva.Layer>(`#${reduxLayer.id}`) ?? createMaskedGuidanceLayer(stage, reduxLayer, onLayerPosChanged); stage.findOne<Konva.Layer>(`#${reduxLayer.id}`) ??
createRegionalGuidanceLayer(stage, reduxLayer, onLayerPosChanged);
// Update the layer's position and listening state // Update the layer's position and listening state
konvaLayer.setAttrs({ konvaLayer.setAttrs({
@ -540,8 +541,8 @@ const renderLayers = (
} }
for (const reduxLayer of reduxLayers) { for (const reduxLayer of reduxLayers) {
if (isMaskedGuidanceLayer(reduxLayer)) { if (isRegionalGuidanceLayer(reduxLayer)) {
renderMaskedGuidanceLayer(stage, reduxLayer, globalMaskLayerOpacity, tool, onLayerPosChanged); renderRegionalGuidanceLayer(stage, reduxLayer, globalMaskLayerOpacity, tool, onLayerPosChanged);
} }
if (isControlAdapterLayer(reduxLayer)) { if (isControlAdapterLayer(reduxLayer)) {
renderControlNetLayer(stage, reduxLayer); renderControlNetLayer(stage, reduxLayer);

4
invokeai/frontend/web/src/features/nodes/util/graph/addControlLayersToGraph.ts
View File

@ -1,7 +1,7 @@
import { getStore } from 'app/store/nanostores/store'; import { getStore } from 'app/store/nanostores/store';
import type { RootState } from 'app/store/store'; import type { RootState } from 'app/store/store';
import { selectAllIPAdapters } from 'features/controlAdapters/store/controlAdaptersSlice'; 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 { getRegionalPromptLayerBlobs } from 'features/controlLayers/util/getLayerBlobs';
import { import {
IP_ADAPTER_COLLECT, IP_ADAPTER_COLLECT,
@ -29,7 +29,7 @@ export const addControlLayersToGraph = async (state: RootState, graph: NonNullab
const layers = state.controlLayers.present.layers const layers = state.controlLayers.present.layers
// Only support vector mask layers now // Only support vector mask layers now
// TODO: Image masks // TODO: Image masks
.filter(isMaskedGuidanceLayer) .filter(isRegionalGuidanceLayer)
// Only visible layers are rendered on the canvas // Only visible layers are rendered on the canvas
.filter((l) => l.isEnabled) .filter((l) => l.isEnabled)
// Only layers with prompts get added to the graph // Only layers with prompts get added to the graph

4
invokeai/frontend/web/src/features/nodes/util/graph/addIPAdapterToLinearGraph.ts
View File

@ -1,7 +1,7 @@
import type { RootState } from 'app/store/store'; import type { RootState } from 'app/store/store';
import { selectValidIPAdapters } from 'features/controlAdapters/store/controlAdaptersSlice'; import { selectValidIPAdapters } from 'features/controlAdapters/store/controlAdaptersSlice';
import type { IPAdapterConfig } from 'features/controlAdapters/store/types'; 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 type { ImageField } from 'features/nodes/types/common';
import { activeTabNameSelector } from 'features/ui/store/uiSelectors'; import { activeTabNameSelector } from 'features/ui/store/uiSelectors';
import { differenceWith, intersectionWith } from 'lodash-es'; 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 // Masked IP adapters are handled in the graph helper for regional control - skip them here
const maskedIPAdapterIds = state.controlLayers.present.layers const maskedIPAdapterIds = state.controlLayers.present.layers
.filter(isMaskedGuidanceLayer) .filter(isRegionalGuidanceLayer)
.map((l) => l.ipAdapterIds) .map((l) => l.ipAdapterIds)
.flat(); .flat();
const nonMaskedIPAdapters = differenceWith(validIPAdapters, maskedIPAdapterIds, (a, b) => a.id === b); const nonMaskedIPAdapters = differenceWith(validIPAdapters, maskedIPAdapterIds, (a, b) => a.id === b);