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): restore object count to layer titles

Browse Source
This commit is contained in:
psychedelicious 2024-08-07 08:23:51 +10:00
parent bdce958f29
commit d9131f7563
3 changed files with 67 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
invokeai/frontend/web/src/features/controlLayers/components/common/CanvasEntityTitle.tsx
View File

@ -1,29 +1,13 @@
import { Text } from '@invoke-ai/ui-library'; import { Text } from '@invoke-ai/ui-library';
import { useEntityIdentifierContext } from 'features/controlLayers/contexts/EntityIdentifierContext'; import { useEntityIdentifierContext } from 'features/controlLayers/contexts/EntityIdentifierContext';
import { useEntityIsSelected } from 'features/controlLayers/hooks/useEntityIsSelected'; import { useEntityIsSelected } from 'features/controlLayers/hooks/useEntityIsSelected';
import { memo, useMemo } from 'react'; import { useEntityTitle } from 'features/controlLayers/hooks/useEntityTitle';
import { useTranslation } from 'react-i18next'; import { memo } from 'react';
import { assert } from 'tsafe';
export const CanvasEntityTitle = memo(() => { export const CanvasEntityTitle = memo(() => {
const { t } = useTranslation();
const entityIdentifier = useEntityIdentifierContext(); const entityIdentifier = useEntityIdentifierContext();
const isSelected = useEntityIsSelected(entityIdentifier); const isSelected = useEntityIsSelected(entityIdentifier);
const title = useMemo(() => { const title = useEntityTitle(entityIdentifier);
if (entityIdentifier.type === 'inpaint_mask') {
return t('controlLayers.inpaintMask');
} else if (entityIdentifier.type === 'control_adapter') {
return t('controlLayers.globalControlAdapter');
} else if (entityIdentifier.type === 'layer') {
return t('controlLayers.layer');
} else if (entityIdentifier.type === 'ip_adapter') {
return t('controlLayers.ipAdapter');
} else if (entityIdentifier.type === 'regional_guidance') {
return t('controlLayers.regionalGuidance');
} else {
assert(false, 'Unexpected entity type');
}
}, [entityIdentifier.type, t]);
return ( return (
<Text size="sm" fontWeight="semibold" userSelect="none" color={isSelected ? 'base.100' : 'base.300'}> <Text size="sm" fontWeight="semibold" userSelect="none" color={isSelected ? 'base.100' : 'base.300'}>

28
invokeai/frontend/web/src/features/controlLayers/hooks/useEntityObjectCount.ts Normal file
View File

@ -0,0 +1,28 @@
import { createSelector } from '@reduxjs/toolkit';
import { useAppSelector } from 'app/store/storeHooks';
import { selectCanvasV2Slice, selectEntity } from 'features/controlLayers/store/canvasV2Slice';
import type { CanvasEntityIdentifier } from 'features/controlLayers/store/types';
import { useMemo } from 'react';
export const useEntityObjectCount = (entityIdentifier: CanvasEntityIdentifier) => {
const selectObjectCount = useMemo(
() =>
createSelector(selectCanvasV2Slice, (canvasV2) => {
const entity = selectEntity(canvasV2, entityIdentifier);
if (!entity) {
return 0;
} else if (entity.type === 'layer') {
return entity.objects.length;
} else if (entity.type === 'inpaint_mask') {
return entity.objects.length;
} else if (entity.type === 'regional_guidance') {
return entity.objects.length;
} else {
return 0;
}
}),
[entityIdentifier]
);
const objectCount = useAppSelector(selectObjectCount);
return objectCount;
};

36
invokeai/frontend/web/src/features/controlLayers/hooks/useEntityTitle.ts Normal file
View File

@ -0,0 +1,36 @@
import { useEntityObjectCount } from 'features/controlLayers/hooks/useEntityObjectCount';
import type { CanvasEntityIdentifier } from 'features/controlLayers/store/types';
import { useMemo } from 'react';
import { useTranslation } from 'react-i18next';
import { assert } from 'tsafe';
export const useEntityTitle = (entityIdentifier: CanvasEntityIdentifier) => {
const { t } = useTranslation();
const objectCount = useEntityObjectCount(entityIdentifier);
const title = useMemo(() => {
const parts: string[] = [];
if (entityIdentifier.type === 'inpaint_mask') {
parts.push(t('controlLayers.inpaintMask'));
} else if (entityIdentifier.type === 'control_adapter') {
parts.push(t('controlLayers.globalControlAdapter'));
} else if (entityIdentifier.type === 'layer') {
parts.push(t('controlLayers.layer'));
} else if (entityIdentifier.type === 'ip_adapter') {
parts.push(t('controlLayers.ipAdapter'));
} else if (entityIdentifier.type === 'regional_guidance') {
parts.push(t('controlLayers.regionalGuidance'));
} else {
assert(false, 'Unexpected entity type');
}
if (objectCount > 0) {
parts.push(`(${objectCount})`);
}
return parts.join(' ');
}, [entityIdentifier.type, objectCount, t]);
return title;
};