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)",
"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"

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

@ -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;
}

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(() => {
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')}
</MenuButton>
<MenuList>
<MenuItem onClick={addMaskedGuidanceLayer}> {t('controlLayers.maskedGuidanceLayer')}</MenuItem>
<MenuItem onClick={addRegionalGuidanceLayer}> {t('controlLayers.regionalGuidanceLayer')}</MenuItem>
<MenuItem onClick={addControlNetLayer}> {t('controlLayers.controlNetLayer')}</MenuItem>
<MenuItem onClick={addIPAdapterLayer}> {t('controlLayers.ipAdapterLayer')}</MenuItem>
</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 { 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,

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 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) => {
>
<Flex flexDir="column" gap={4} w="full" bg="base.850" p={3} borderRadius="base">
<Flex gap={3} alignItems="center" cursor="pointer">
<RPLayerVisibilityToggle layerId={layerId} />
<LayerVisibilityToggle layerId={layerId} />
<LayerTitle type="control_adapter_layer" />
<Spacer />
<CALayerOpacity layerId={layerId} />
<RPLayerMenu layerId={layerId} />
<RPLayerDeleteButton layerId={layerId} />
<LayerMenu layerId={layerId} />
<LayerDeleteButton layerId={layerId} />
</Flex>
<ControlAdapterLayerConfig id={controlNetId} />
</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 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 <MaskedGuidanceLayerListItem key={id} layerId={id} />;
return <RGLayerListItem key={id} layerId={id} />;
}
if (type === 'control_adapter_layer') {
return <ControlAdapterLayerListItem key={id} layerId={id} />;
return <CALayerListItem key={id} layerId={id} />;
}
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 { 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) => {
<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 gap={3} alignItems="center">
<RPLayerVisibilityToggle layerId={layerId} />
<LayerVisibilityToggle layerId={layerId} />
<LayerTitle type="ip_adapter_layer" />
<Spacer />
<RPLayerDeleteButton layerId={layerId} />
<LayerDeleteButton layerId={layerId} />
</Flex>
<ControlAdapterLayerConfig id={ipAdapterId} />
</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 };
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';

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 { 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) => {
<MenuList>
{layerType === 'regional_guidance_layer' && (
<>
<RPLayerMenuMaskedGuidanceActions layerId={layerId} />
<LayerMenuRGActions layerId={layerId} />
<MenuDivider />
</>
)}
{(layerType === 'regional_guidance_layer' || layerType === 'control_adapter_layer') && (
<>
<RPLayerMenuArrangeActions layerId={layerId} />
<LayerMenuArrangeActions layerId={layerId} />
<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 };
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';

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 { 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';

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 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') {

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;
};
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';

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 { 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';

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 { 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';

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 { 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) => {
<Divider />
</Flex>
)}
<IPAdapterListItem layerId={layerId} ipAdapterId={id} ipAdapterNumber={index + 1} />
<RGLayerIPAdapterListItem layerId={layerId} ipAdapterId={id} ipAdapterNumber={index + 1} />
</Flex>
))}
</>
);
});
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';

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 { 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) => {
>
<Flex flexDir="column" w="full" bg="base.850" p={3} gap={3} borderRadius="base">
<Flex gap={3} alignItems="center" cursor="pointer">
<RPLayerVisibilityToggle layerId={layerId} />
<LayerVisibilityToggle layerId={layerId} />
<LayerTitle type="regional_guidance_layer" />
<Spacer />
{autoNegative === 'invert' && (
@ -70,18 +70,18 @@ export const MaskedGuidanceLayerListItem = memo(({ layerId }: Props) => {
{t('controlLayers.autoNegative')}
</Badge>
)}
<RPLayerColorPicker layerId={layerId} />
<RPLayerSettingsPopover layerId={layerId} />
<RPLayerMenu layerId={layerId} />
<RPLayerDeleteButton layerId={layerId} />
<RGLayerColorPicker layerId={layerId} />
<RGLayerSettingsPopover layerId={layerId} />
<LayerMenu layerId={layerId} />
<LayerDeleteButton layerId={layerId} />
</Flex>
{!hasPositivePrompt && !hasNegativePrompt && !hasIPAdapters && <AddPromptButtons layerId={layerId} />}
{hasPositivePrompt && <RPLayerPositivePrompt layerId={layerId} />}
{hasNegativePrompt && <RPLayerNegativePrompt layerId={layerId} />}
{hasIPAdapters && <RPLayerIPAdapterList layerId={layerId} />}
{hasPositivePrompt && <RGLayerPositivePrompt layerId={layerId} />}
{hasNegativePrompt && <RGLayerNegativePrompt layerId={layerId} />}
{hasIPAdapters && <RGLayerIPAdapterList layerId={layerId} />}
</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 { 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<HTMLTextAreaElement>(null);
@ -47,7 +47,7 @@ export const RPLayerNegativePrompt = memo(({ layerId }: Props) => {
fontSize="sm"
/>
<PromptOverlayButtonWrapper>
<RPLayerPromptDeleteButton layerId={layerId} polarity="negative" />
<RGLayerPromptDeleteButton layerId={layerId} polarity="negative" />
<AddPromptTriggerButton isOpen={isOpen} onOpen={onOpen} />
</PromptOverlayButtonWrapper>
</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 { 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<HTMLTextAreaElement>(null);
@ -47,7 +47,7 @@ export const RPLayerPositivePrompt = memo(({ layerId }: Props) => {
minH={28}
/>
<PromptOverlayButtonWrapper>
<RPLayerPromptDeleteButton layerId={layerId} polarity="positive" />
<RGLayerPromptDeleteButton layerId={layerId} polarity="positive" />
<AddPromptTriggerButton isOpen={isOpen} onOpen={onOpen} />
</PromptOverlayButtonWrapper>
</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';
};
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';

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,
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) => {
<PopoverBody>
<Flex direction="column" gap={2}>
<FormControlGroup formLabelProps={formLabelProps}>
<MaskedGuidanceLayerAutoNegativeCheckbox layerId={layerId} />
<RGLayerAutoNegativeCheckbox layerId={layerId} />
</FormControlGroup>
</Flex>
</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,
$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;
});

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 {
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;
}),

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

@ -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);

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';
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}`;

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

@ -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');

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

@ -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<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
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);

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 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

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 { 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);