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

feat(ui): split out canvas entity list component

Browse Source
This commit is contained in:
psychedelicious 2024-07-08 17:22:53 +10:00
parent e795de5647
commit bb712b3b3f
2 changed files with 57 additions and 42 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

53
invokeai/frontend/web/src/features/controlLayers/components/CanvasEntityList.tsx Normal file
View File

@ -0,0 +1,53 @@
/* eslint-disable i18next/no-literal-string */
import { Flex } from '@invoke-ai/ui-library';
import { createMemoizedSelector } from 'app/store/createMemoizedSelector';
import { useAppSelector } from 'app/store/storeHooks';
import { IAINoContentFallback } from 'common/components/IAIImageFallback';
import ScrollableContent from 'common/components/OverlayScrollbars/ScrollableContent';
import { CA } from 'features/controlLayers/components/ControlAdapter/CA';
import { IPA } from 'features/controlLayers/components/IPAdapter/IPA';
import { Layer } from 'features/controlLayers/components/Layer/Layer';
import { RG } from 'features/controlLayers/components/RegionalGuidance/RG';
import { mapId } from 'features/controlLayers/konva/util';
import { selectCanvasV2Slice } from 'features/controlLayers/store/canvasV2Slice';
import { memo } from 'react';
import { useTranslation } from 'react-i18next';
const selectEntityIds = createMemoizedSelector(selectCanvasV2Slice, (canvasV2) => {
const rgIds = canvasV2.regions.entities.map(mapId).reverse();
const caIds = canvasV2.controlAdapters.entities.map(mapId).reverse();
const ipaIds = canvasV2.ipAdapters.entities.map(mapId).reverse();
const layerIds = canvasV2.layers.entities.map(mapId).reverse();
const entityCount = rgIds.length + caIds.length + ipaIds.length + layerIds.length;
return { rgIds, caIds, ipaIds, layerIds, entityCount };
});
export const CanvasEntityList = memo(() => {
const { t } = useTranslation();
const { rgIds, caIds, ipaIds, layerIds, entityCount } = useAppSelector(selectEntityIds);
if (entityCount > 0) {
return (
<ScrollableContent>
<Flex flexDir="column" gap={2} data-testid="control-layers-layer-list">
{rgIds.map((id) => (
<RG key={id} id={id} />
))}
{caIds.map((id) => (
<CA key={id} id={id} />
))}
{ipaIds.map((id) => (
<IPA key={id} id={id} />
))}
{layerIds.map((id) => (
<Layer key={id} id={id} />
))}
</Flex>
</ScrollableContent>
);
}
return <IAINoContentFallback icon={null} label={t('controlLayers.noLayersAdded')} />;
});
CanvasEntityList.displayName = 'CanvasEntityList';

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

@ -1,60 +1,22 @@
/* eslint-disable i18next/no-literal-string */
import { Flex } from '@invoke-ai/ui-library';
import { createMemoizedSelector } from 'app/store/createMemoizedSelector';
import { useAppSelector } from 'app/store/storeHooks';
import { IAINoContentFallback } from 'common/components/IAIImageFallback';
import ScrollableContent from 'common/components/OverlayScrollbars/ScrollableContent';
import { AddLayerButton } from 'features/controlLayers/components/AddLayerButton';
import { CA } from 'features/controlLayers/components/ControlAdapter/CA';
import { CanvasEntityList } from 'features/controlLayers/components/CanvasEntityList';
import { DeleteAllLayersButton } from 'features/controlLayers/components/DeleteAllLayersButton';
import { IM } from 'features/controlLayers/components/InpaintMask/IM';
import { IPA } from 'features/controlLayers/components/IPAdapter/IPA';
import { Layer } from 'features/controlLayers/components/Layer/Layer';
import { RG } from 'features/controlLayers/components/RegionalGuidance/RG';
import { mapId } from 'features/controlLayers/konva/util';
import { selectCanvasV2Slice } from 'features/controlLayers/store/canvasV2Slice';
import { memo } from 'react';
import { useTranslation } from 'react-i18next';
const selectEntityIds = createMemoizedSelector(selectCanvasV2Slice, (canvasV2) => {
const rgIds = canvasV2.regions.entities.map(mapId).reverse();
const caIds = canvasV2.controlAdapters.entities.map(mapId).reverse();
const ipaIds = canvasV2.ipAdapters.entities.map(mapId).reverse();
const layerIds = canvasV2.layers.entities.map(mapId).reverse();
const entityCount = rgIds.length + caIds.length + ipaIds.length + layerIds.length;
return { rgIds, caIds, ipaIds, layerIds, entityCount };
});
export const ControlLayersPanelContent = memo(() => {
const { t } = useTranslation();
const { rgIds, caIds, ipaIds, layerIds, entityCount } = useAppSelector(selectEntityIds);
const isCanvasSessionActive = useAppSelector((s) => s.canvasV2.session.isActive);
return (
<Flex flexDir="column" gap={2} w="full" h="full">
<Flex justifyContent="space-around">
<AddLayerButton />
<DeleteAllLayersButton />
</Flex>
<IM />
{entityCount > 0 && (
<ScrollableContent>
<Flex flexDir="column" gap={2} data-testid="control-layers-layer-list">
{rgIds.map((id) => (
<RG key={id} id={id} />
))}
{caIds.map((id) => (
<CA key={id} id={id} />
))}
{ipaIds.map((id) => (
<IPA key={id} id={id} />
))}
{layerIds.map((id) => (
<Layer key={id} id={id} />
))}
</Flex>
</ScrollableContent>
)}
{entityCount === 0 && <IAINoContentFallback icon={null} label={t('controlLayers.noLayersAdded')} />}
{isCanvasSessionActive && <IM />}
<CanvasEntityList />
</Flex>
);
});