tidy(ui): clearer component names for inpaint mask

This commit is contained in:
psychedelicious 2024-08-07 17:50:27 +10:00
parent bedaca70a3
commit 9879999a65
5 changed files with 16 additions and 16 deletions

View File

@ -2,7 +2,7 @@
import { Flex } from '@invoke-ai/ui-library'; import { Flex } from '@invoke-ai/ui-library';
import ScrollableContent from 'common/components/OverlayScrollbars/ScrollableContent'; import ScrollableContent from 'common/components/OverlayScrollbars/ScrollableContent';
import { ControlAdapterList } from 'features/controlLayers/components/ControlAdapter/ControlAdapterList'; import { ControlAdapterList } from 'features/controlLayers/components/ControlAdapter/ControlAdapterList';
import { IM } from 'features/controlLayers/components/InpaintMask/IM'; import { InpaintMask } from 'features/controlLayers/components/InpaintMask/InpaintMask';
import { IPAEntityList } from 'features/controlLayers/components/IPAdapter/IPAEntityList'; import { IPAEntityList } from 'features/controlLayers/components/IPAdapter/IPAEntityList';
import { LayerEntityList } from 'features/controlLayers/components/Layer/LayerEntityList'; import { LayerEntityList } from 'features/controlLayers/components/Layer/LayerEntityList';
import { RGEntityList } from 'features/controlLayers/components/RegionalGuidance/RGEntityList'; import { RGEntityList } from 'features/controlLayers/components/RegionalGuidance/RGEntityList';
@ -12,7 +12,7 @@ export const CanvasEntityList = memo(() => {
return ( return (
<ScrollableContent> <ScrollableContent>
<Flex flexDir="column" gap={2} data-testid="control-layers-layer-list"> <Flex flexDir="column" gap={2} data-testid="control-layers-layer-list">
<IM /> <InpaintMask />
<RGEntityList /> <RGEntityList />
<ControlAdapterList /> <ControlAdapterList />
<IPAEntityList /> <IPAEntityList />

View File

@ -3,15 +3,15 @@ import { CanvasEntityContainer } from 'features/controlLayers/components/common/
import { CanvasEntityEnabledToggle } from 'features/controlLayers/components/common/CanvasEntityEnabledToggle'; import { CanvasEntityEnabledToggle } from 'features/controlLayers/components/common/CanvasEntityEnabledToggle';
import { CanvasEntityHeader } from 'features/controlLayers/components/common/CanvasEntityHeader'; import { CanvasEntityHeader } from 'features/controlLayers/components/common/CanvasEntityHeader';
import { CanvasEntityTitle } from 'features/controlLayers/components/common/CanvasEntityTitle'; import { CanvasEntityTitle } from 'features/controlLayers/components/common/CanvasEntityTitle';
import { IMActionsMenu } from 'features/controlLayers/components/InpaintMask/IMActionsMenu'; import { InpaintMaskActionsMenu } from 'features/controlLayers/components/InpaintMask/InpaintMaskActionsMenu';
import { IMSettings } from 'features/controlLayers/components/InpaintMask/IMSettings'; import { InpaintMaskSettings } from 'features/controlLayers/components/InpaintMask/InpaintMaskSettings';
import { EntityIdentifierContext } from 'features/controlLayers/contexts/EntityIdentifierContext'; import { EntityIdentifierContext } from 'features/controlLayers/contexts/EntityIdentifierContext';
import type { CanvasEntityIdentifier } from 'features/controlLayers/store/types'; import type { CanvasEntityIdentifier } from 'features/controlLayers/store/types';
import { memo, useMemo } from 'react'; import { memo, useMemo } from 'react';
import { IMMaskFillColorPicker } from './IMMaskFillColorPicker'; import { InpaintMaskMaskFillColorPicker } from './InpaintMaskMaskFillColorPicker';
export const IM = memo(() => { export const InpaintMask = memo(() => {
const entityIdentifier = useMemo<CanvasEntityIdentifier>(() => ({ id: 'inpaint_mask', type: 'inpaint_mask' }), []); const entityIdentifier = useMemo<CanvasEntityIdentifier>(() => ({ id: 'inpaint_mask', type: 'inpaint_mask' }), []);
const { isOpen, onToggle } = useDisclosure({ defaultIsOpen: false }); const { isOpen, onToggle } = useDisclosure({ defaultIsOpen: false });
return ( return (
@ -21,13 +21,13 @@ export const IM = memo(() => {
<CanvasEntityEnabledToggle /> <CanvasEntityEnabledToggle />
<CanvasEntityTitle /> <CanvasEntityTitle />
<Spacer /> <Spacer />
<IMMaskFillColorPicker /> <InpaintMaskMaskFillColorPicker />
<IMActionsMenu /> <InpaintMaskActionsMenu />
</CanvasEntityHeader> </CanvasEntityHeader>
{isOpen && <IMSettings />} {isOpen && <InpaintMaskSettings />}
</CanvasEntityContainer> </CanvasEntityContainer>
</EntityIdentifierContext.Provider> </EntityIdentifierContext.Provider>
); );
}); });
IM.displayName = 'IM'; InpaintMask.displayName = 'InpaintMask';

View File

@ -3,7 +3,7 @@ import { CanvasEntityActionMenuItems } from 'features/controlLayers/components/c
import { CanvasEntityMenuButton } from 'features/controlLayers/components/common/CanvasEntityMenuButton'; import { CanvasEntityMenuButton } from 'features/controlLayers/components/common/CanvasEntityMenuButton';
import { memo } from 'react'; import { memo } from 'react';
export const IMActionsMenu = memo(() => { export const InpaintMaskActionsMenu = memo(() => {
return ( return (
<Menu> <Menu>
<CanvasEntityMenuButton /> <CanvasEntityMenuButton />
@ -14,4 +14,4 @@ export const IMActionsMenu = memo(() => {
); );
}); });
IMActionsMenu.displayName = 'IMActionsMenu'; InpaintMaskActionsMenu.displayName = 'InpaintMaskActionsMenu';

View File

@ -8,7 +8,7 @@ import { memo, useCallback } from 'react';
import type { RgbColor } from 'react-colorful'; import type { RgbColor } from 'react-colorful';
import { useTranslation } from 'react-i18next'; import { useTranslation } from 'react-i18next';
export const IMMaskFillColorPicker = memo(() => { export const InpaintMaskMaskFillColorPicker = memo(() => {
const { t } = useTranslation(); const { t } = useTranslation();
const dispatch = useAppDispatch(); const dispatch = useAppDispatch();
const fill = useAppSelector((s) => s.canvasV2.inpaintMask.fill); const fill = useAppSelector((s) => s.canvasV2.inpaintMask.fill);
@ -43,4 +43,4 @@ export const IMMaskFillColorPicker = memo(() => {
); );
}); });
IMMaskFillColorPicker.displayName = 'IMMaskFillColorPicker'; InpaintMaskMaskFillColorPicker.displayName = 'InpaintMaskMaskFillColorPicker';

View File

@ -1,8 +1,8 @@
import { CanvasEntitySettings } from 'features/controlLayers/components/common/CanvasEntitySettings'; import { CanvasEntitySettings } from 'features/controlLayers/components/common/CanvasEntitySettings';
import { memo } from 'react'; import { memo } from 'react';
export const IMSettings = memo(() => { export const InpaintMaskSettings = memo(() => {
return <CanvasEntitySettings>PLACEHOLDER</CanvasEntitySettings>; return <CanvasEntitySettings>PLACEHOLDER</CanvasEntitySettings>;
}); });
IMSettings.displayName = 'IMSettings'; InpaintMaskSettings.displayName = 'InpaintMaskSettings';