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): canvas entity list headers

Browse Source
This commit is contained in:
psychedelicious 2024-07-17 15:14:10 +10:00
parent 137252128b
commit 88c57a9750
5 changed files with 54 additions and 3 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

@ -1668,6 +1668,10 @@
"raster": "Raster",
"rasterLayer": "$t(controlLayers.raster) $t(unifiedCanvas.layer)",
"opacity": "Opacity",
"regionalGuidance_withCount": "Regional Guidance ({{count}})",
"controlAdapters_withCount": "Control Adapters ({{count}})",
"layers_withCount": "Raster Layers ({{count}})",
"ipAdapters_withCount": "IP Adapters ({{count}})",
"globalControlAdapter": "Global $t(controlnet.controlAdapter_one)",
"globalControlAdapterLayer": "Global $t(controlnet.controlAdapter_one) $t(unifiedCanvas.layer)",
"globalIPAdapter": "Global $t(common.ipAdapter)",

15
invokeai/frontend/web/src/features/controlLayers/components/ControlAdapter/CAEntityList.tsx
View File

@ -1,16 +1,22 @@
/* eslint-disable i18next/no-literal-string */
import { Text } from '@invoke-ai/ui-library';
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';
import { useTranslation } from 'react-i18next';
const selectEntityIds = createMemoizedSelector(selectCanvasV2Slice, (canvasV2) => {
return canvasV2.controlAdapters.entities.map(mapId).reverse();
});
export const CAEntityList = memo(() => {
const { t } = useTranslation();
const isTypeSelected = useAppSelector((s) =>
Boolean(s.canvasV2.selectedEntityIdentifier?.type === 'control_adapter')
);
const caIds = useAppSelector(selectEntityIds);
if (caIds.length === 0) {
@ -20,6 +26,13 @@ export const CAEntityList = memo(() => {
if (caIds.length > 0) {
return (
<>
<Text
color={isTypeSelected ? 'base.100' : 'base.300'}
fontWeight={isTypeSelected ? 'semibold' : 'normal'}
userSelect="none"
>
{t('controlLayers.controlAdapters_withCount', { count: caIds.length })}
</Text>
{caIds.map((id) => (
<CA key={id} id={id} />
))}

11
invokeai/frontend/web/src/features/controlLayers/components/IPAdapter/IPAEntityList.tsx
View File

@ -1,16 +1,20 @@
/* eslint-disable i18next/no-literal-string */
import { Text } from '@invoke-ai/ui-library';
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';
import { useTranslation } from 'react-i18next';
const selectEntityIds = createMemoizedSelector(selectCanvasV2Slice, (canvasV2) => {
return canvasV2.ipAdapters.entities.map(mapId).reverse();
});
export const IPAEntityList = memo(() => {
const { t } = useTranslation();
const isTypeSelected = useAppSelector((s) => Boolean(s.canvasV2.selectedEntityIdentifier?.type === 'ip_adapter'));
const ipaIds = useAppSelector(selectEntityIds);
if (ipaIds.length === 0) {
@ -20,6 +24,13 @@ export const IPAEntityList = memo(() => {
if (ipaIds.length > 0) {
return (
<>
<Text
userSelect="none"
color={isTypeSelected ? 'base.100' : 'base.300'}
fontWeight={isTypeSelected ? 'semibold' : 'normal'}
>
{t('controlLayers.ipAdapters_withCount', { count: ipaIds.length })}
</Text>
{ipaIds.map((id) => (
<IPA key={id} id={id} />
))}

12
invokeai/frontend/web/src/features/controlLayers/components/Layer/LayerEntityList.tsx
View File

@ -1,16 +1,19 @@
/* eslint-disable i18next/no-literal-string */
import { Text } from '@invoke-ai/ui-library';
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';
import { useTranslation } from 'react-i18next';
const selectEntityIds = createMemoizedSelector(selectCanvasV2Slice, (canvasV2) => {
return canvasV2.layers.entities.map(mapId).reverse();
});
export const LayerEntityList = memo(() => {
const { t } = useTranslation();
const isTypeSelected = useAppSelector((s) => Boolean(s.canvasV2.selectedEntityIdentifier?.type === 'layer'));
const layerIds = useAppSelector(selectEntityIds);
if (layerIds.length === 0) {
@ -20,6 +23,13 @@ export const LayerEntityList = memo(() => {
if (layerIds.length > 0) {
return (
<>
<Text
color={isTypeSelected ? 'base.100' : 'base.300'}
fontWeight={isTypeSelected ? 'semibold' : 'normal'}
userSelect="none"
>
{t('controlLayers.layers_withCount', { count: layerIds.length })}
</Text>
{layerIds.map((id) => (
<Layer key={id} id={id} />
))}

15
invokeai/frontend/web/src/features/controlLayers/components/RegionalGuidance/RGEntityList.tsx
View File

@ -1,16 +1,22 @@
/* eslint-disable i18next/no-literal-string */
import { Text } from '@invoke-ai/ui-library';
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';
import { useTranslation } from 'react-i18next';
const selectEntityIds = createMemoizedSelector(selectCanvasV2Slice, (canvasV2) => {
return canvasV2.regions.entities.map(mapId).reverse();
});
export const RGEntityList = memo(() => {
const { t } = useTranslation();
const isTypeSelected = useAppSelector((s) =>
Boolean(s.canvasV2.selectedEntityIdentifier?.type === 'regional_guidance')
);
const rgIds = useAppSelector(selectEntityIds);
if (rgIds.length === 0) {
@ -20,6 +26,13 @@ export const RGEntityList = memo(() => {
if (rgIds.length > 0) {
return (
<>
<Text
color={isTypeSelected ? 'base.100' : 'base.300'}
fontWeight={isTypeSelected ? 'semibold' : 'normal'}
userSelect="none"
>
{t('controlLayers.regionalGuidance_withCount', { count: rgIds.length })}
</Text>
{rgIds.map((id) => (
<RG key={id} id={id} />
))}