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

fix(ui): entity display list

Browse Source
This commit is contained in:
psychedelicious 2024-07-15 18:49:33 +10:00
parent b1fe6f9853
commit 0951aecb13
6 changed files with 143 additions and 48 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

61
invokeai/frontend/web/src/features/controlLayers/components/CanvasEntityList.tsx
View File

@ -1,53 +1,30 @@
/* 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 { CAEntityList } from 'features/controlLayers/components/ControlAdapter/CAEntityList';
import { InitialImage } from 'features/controlLayers/components/InitialImage/InitialImage';
import { IM } from 'features/controlLayers/components/InpaintMask/IM';
import { IPAEntityList } from 'features/controlLayers/components/IPAdapter/IPAEntityList';
import { LayerEntityList } from 'features/controlLayers/components/Layer/LayerEntityList';
import { RGEntityList } from 'features/controlLayers/components/RegionalGuidance/RGEntityList';
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);
const isCanvasSessionActive = useAppSelector((s) => s.canvasV2.session.isActive);
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')} />;
return (
<ScrollableContent>
<Flex flexDir="column" gap={2} data-testid="control-layers-layer-list">
{isCanvasSessionActive && <IM />}
<RGEntityList />
<CAEntityList />
<IPAEntityList />
<LayerEntityList />
{!isCanvasSessionActive && <InitialImage />}
</Flex>
</ScrollableContent>
);
});
CanvasEntityList.displayName = 'CanvasEntityList';

31
invokeai/frontend/web/src/features/controlLayers/components/ControlAdapter/CAEntityList.tsx Normal file
View File

@ -0,0 +1,31 @@
/* eslint-disable i18next/no-literal-string */
import { createMemoizedSelector } from 'app/store/createMemoizedSelector';
import { useAppSelector } from 'app/store/storeHooks';
import { CA } from 'features/controlLayers/components/ControlAdapter/CA';
import { mapId } from 'features/controlLayers/konva/util';
import { selectCanvasV2Slice } from 'features/controlLayers/store/canvasV2Slice';
import { memo } from 'react';
const selectEntityIds = createMemoizedSelector(selectCanvasV2Slice, (canvasV2) => {
return canvasV2.controlAdapters.entities.map(mapId).reverse();
});
export const CAEntityList = memo(() => {
const caIds = useAppSelector(selectEntityIds);
if (caIds.length === 0) {
return null;
}
if (caIds.length > 0) {
return (
<>
{caIds.map((id) => (
<CA key={id} id={id} />
))}
</>
);
}
});
CAEntityList.displayName = 'CAEntityList';

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

@ -1,24 +1,18 @@
/* eslint-disable i18next/no-literal-string */
import { Flex } from '@invoke-ai/ui-library';
import { useAppSelector } from 'app/store/storeHooks';
import { AddLayerButton } from 'features/controlLayers/components/AddLayerButton';
import { CanvasEntityList } from 'features/controlLayers/components/CanvasEntityList';
import { DeleteAllLayersButton } from 'features/controlLayers/components/DeleteAllLayersButton';
import { InitialImage } from 'features/controlLayers/components/InitialImage/InitialImage';
import { IM } from 'features/controlLayers/components/InpaintMask/IM';
import { memo } from 'react';
export const ControlLayersPanelContent = memo(() => {
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>
{isCanvasSessionActive && <IM />}
<CanvasEntityList />
{!isCanvasSessionActive && <InitialImage />}
</Flex>
);
});

31
invokeai/frontend/web/src/features/controlLayers/components/IPAdapter/IPAEntityList.tsx Normal file
View File

@ -0,0 +1,31 @@
/* eslint-disable i18next/no-literal-string */
import { createMemoizedSelector } from 'app/store/createMemoizedSelector';
import { useAppSelector } from 'app/store/storeHooks';
import { IPA } from 'features/controlLayers/components/IPAdapter/IPA';
import { mapId } from 'features/controlLayers/konva/util';
import { selectCanvasV2Slice } from 'features/controlLayers/store/canvasV2Slice';
import { memo } from 'react';
const selectEntityIds = createMemoizedSelector(selectCanvasV2Slice, (canvasV2) => {
return canvasV2.ipAdapters.entities.map(mapId).reverse();
});
export const IPAEntityList = memo(() => {
const ipaIds = useAppSelector(selectEntityIds);
if (ipaIds.length === 0) {
return null;
}
if (ipaIds.length > 0) {
return (
<>
{ipaIds.map((id) => (
<IPA key={id} id={id} />
))}
</>
);
}
});
IPAEntityList.displayName = 'IPAEntityList';

31
invokeai/frontend/web/src/features/controlLayers/components/Layer/LayerEntityList.tsx Normal file
View File

@ -0,0 +1,31 @@
/* eslint-disable i18next/no-literal-string */
import { createMemoizedSelector } from 'app/store/createMemoizedSelector';
import { useAppSelector } from 'app/store/storeHooks';
import { Layer } from 'features/controlLayers/components/Layer/Layer';
import { mapId } from 'features/controlLayers/konva/util';
import { selectCanvasV2Slice } from 'features/controlLayers/store/canvasV2Slice';
import { memo } from 'react';
const selectEntityIds = createMemoizedSelector(selectCanvasV2Slice, (canvasV2) => {
return canvasV2.layers.entities.map(mapId).reverse();
});
export const LayerEntityList = memo(() => {
const layerIds = useAppSelector(selectEntityIds);
if (layerIds.length === 0) {
return null;
}
if (layerIds.length > 0) {
return (
<>
{layerIds.map((id) => (
<Layer key={id} id={id} />
))}
</>
);
}
});
LayerEntityList.displayName = 'LayerEntityList';

31
invokeai/frontend/web/src/features/controlLayers/components/RegionalGuidance/RGEntityList.tsx Normal file
View File

@ -0,0 +1,31 @@
/* eslint-disable i18next/no-literal-string */
import { createMemoizedSelector } from 'app/store/createMemoizedSelector';
import { useAppSelector } from 'app/store/storeHooks';
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';
const selectEntityIds = createMemoizedSelector(selectCanvasV2Slice, (canvasV2) => {
return canvasV2.regions.entities.map(mapId).reverse();
});
export const RGEntityList = memo(() => {
const rgIds = useAppSelector(selectEntityIds);
if (rgIds.length === 0) {
return null;
}
if (rgIds.length > 0) {
return (
<>
{rgIds.map((id) => (
<RG key={id} id={id} />
))}
</>
);
}
});
RGEntityList.displayName = 'RGEntityList';