github/InvokeAI
1
1
Fork 0
mirror of https://github.com/invoke-ai/InvokeAI.git synced 2026-02-17 17:07:03 -05: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
Download Patch File Download Diff File Expand all files Collapse all files

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