github/InvokeAI
1
1
Fork 0
mirror of https://github.com/invoke-ai/InvokeAI.git synced 2026-04-23 03:00:31 -04:00
Code Issues Packages Projects Releases Wiki Activity

feat(ui): add count to layers tab button

Browse Source
This commit is contained in:
psychedelicious
2024-09-10 07:16:25 +10:00
committed by Kent Keirsey
parent 136891ec3d
commit f5eefedc49
3 changed files with 9 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
invokeai/frontend/web/src/features/controlLayers/components/CanvasRightPanel.tsx
View File

@@ -5,6 +5,7 @@ import { useScopeOnFocus } from 'common/hooks/interactionScopes';
import { CanvasPanelContent } from 'features/controlLayers/components/CanvasPanelContent';
import { CanvasSendToToggle } from 'features/controlLayers/components/CanvasSendToToggle';
import { selectSendToCanvas } from 'features/controlLayers/store/canvasSettingsSlice';
import { selectEntityCount } from 'features/controlLayers/store/selectors';
import GalleryPanelContent from 'features/gallery/components/GalleryPanelContent';
import { memo, useCallback, useRef, useState } from 'react';
import { useTranslation } from 'react-i18next';
@@ -37,6 +38,7 @@ CanvasRightPanelContent.displayName = 'CanvasRightPanelContent';
const PanelTabs = memo(({ setTab }: { setTab: (val: number) => void }) => {
const { t } = useTranslation();
const entityCount = useAppSelector(selectEntityCount);
const sendToCanvas = useAppSelector(selectSendToCanvas);
const tabTimeout = useRef<number | null>(null);
const dndCtx = useDndContext();
@@ -64,8 +66,10 @@ const PanelTabs = memo(({ setTab }: { setTab: (val: number) => void }) => {
}, []);
return (
<>
<Tab position="relative" onMouseOver={onOnMouseOverLayersTab} onMouseOut={onMouseOut}>
{t('controlLayers.layer_other')}
<Tab position="relative" onMouseOver={onOnMouseOverLayersTab} onMouseOut={onMouseOut} w={32}>
<Box as="span" w="full">
{t('controlLayers.layer_withCount', { count: entityCount })}
</Box>
{sendToCanvas && (
<Box position="absolute" top={2} right={2} h={2} w={2} bg="invokeYellow.300" borderRadius="full" />
)}

2
invokeai/frontend/web/src/features/controlLayers/store/selectors.ts
View File

@@ -29,7 +29,7 @@ export const selectCanvasSlice = (state: RootState) => state.canvas.present;
*
* It does not check for validity of the entities.
*/
const selectEntityCount = createSelector(selectCanvasSlice, (canvas) => {
export const selectEntityCount = createSelector(selectCanvasSlice, (canvas) => {
return (
canvas.regions.entities.length +
canvas.ipAdapters.entities.length +