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): viewer integrates progress (wip)

Browse Source
This commit is contained in:
psychedelicious
2025-06-23 15:51:37 +10:00
parent f0ba693922
commit d23cdfd0ad
10 changed files with 158 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
invokeai/frontend/web/src/features/ui/layouts/TabWithoutCloseButton.tsx
View File

@@ -1,9 +1,9 @@
import { Flex, Text } from '@invoke-ai/ui-library';
import { useCallbackOnDragEnter } from 'common/hooks/useCallbackOnDragEnter';
import type { IDockviewPanelHeaderProps } from 'dockview';
import { useCallback, useRef } from 'react';
import { memo, useCallback, useRef } from 'react';
export const TabWithoutCloseButton = (props: IDockviewPanelHeaderProps) => {
export const TabWithoutCloseButton = memo((props: IDockviewPanelHeaderProps) => {
const ref = useRef<HTMLDivElement>(null);
const setActive = useCallback(() => {
if (!props.api.isActive) {
@@ -20,5 +20,5 @@ export const TabWithoutCloseButton = (props: IDockviewPanelHeaderProps) => {
</Text>
</Flex>
);
};
});
TabWithoutCloseButton.displayName = 'TabWithoutCloseButton';

6
invokeai/frontend/web/src/features/ui/layouts/TabWithoutCloseButtonAndWithProgressIndicator.tsx
View File

@@ -2,10 +2,10 @@ import { Flex, Text } from '@invoke-ai/ui-library';
import { useCallbackOnDragEnter } from 'common/hooks/useCallbackOnDragEnter';
import type { IDockviewPanelHeaderProps } from 'dockview';
import ProgressBar from 'features/system/components/ProgressBar';
import { useCallback, useRef } from 'react';
import { memo, useCallback, useRef } from 'react';
import { useIsGenerationInProgress } from 'services/api/endpoints/queue';
export const TabWithoutCloseButtonAndWithProgressIndicator = (props: IDockviewPanelHeaderProps) => {
export const TabWithoutCloseButtonAndWithProgressIndicator = memo((props: IDockviewPanelHeaderProps) => {
const isGenerationInProgress = useIsGenerationInProgress();
const ref = useRef<HTMLDivElement>(null);
@@ -27,5 +27,5 @@ export const TabWithoutCloseButtonAndWithProgressIndicator = (props: IDockviewPa
)}
</Flex>
);
};
});
TabWithoutCloseButtonAndWithProgressIndicator.displayName = 'TabWithoutCloseButtonAndWithProgressIndicator';

2
invokeai/frontend/web/src/features/ui/layouts/canvas-tab-auto-layout.tsx
View File

@@ -69,7 +69,7 @@ const initializeCenterPanelLayout = (api: DockviewApi) => {
id: VIEWER_PANEL_ID,
component: VIEWER_PANEL_ID,
title: 'Image Viewer',
tabComponent: DEFAULT_TAB_ID,
tabComponent: TAB_WITH_PROGRESS_INDICATOR_ID,
position: {
direction: 'within',
referencePanel: LAUNCHPAD_PANEL_ID,

2
invokeai/frontend/web/src/features/ui/layouts/generate-tab-auto-layout.tsx
View File

@@ -54,7 +54,7 @@ const initializeCenterPanelLayout = (api: DockviewApi) => {
id: VIEWER_PANEL_ID,
component: VIEWER_PANEL_ID,
title: 'Image Viewer',
tabComponent: DEFAULT_TAB_ID,
tabComponent: TAB_WITH_PROGRESS_INDICATOR_ID,
position: {
direction: 'within',
referencePanel: LAUNCHPAD_PANEL_ID,

2
invokeai/frontend/web/src/features/ui/layouts/upscaling-tab-auto-layout.tsx
View File

@@ -54,7 +54,7 @@ const initializeCenterLayout = (api: DockviewApi) => {
id: VIEWER_PANEL_ID,
component: VIEWER_PANEL_ID,
title: 'Image Viewer',
tabComponent: DEFAULT_TAB_ID,
tabComponent: TAB_WITH_PROGRESS_INDICATOR_ID,
position: {
direction: 'within',
referencePanel: LAUNCHPAD_PANEL_ID,

2
invokeai/frontend/web/src/features/ui/layouts/workflows-tab-auto-layout.tsx
View File

@@ -67,7 +67,7 @@ const initializeCenterPanelLayout = (api: DockviewApi) => {
id: VIEWER_PANEL_ID,
component: VIEWER_PANEL_ID,
title: 'Image Viewer',
tabComponent: DEFAULT_TAB_ID,
tabComponent: TAB_WITH_PROGRESS_INDICATOR_ID,
position: {
direction: 'within',
referencePanel: LAUNCHPAD_PANEL_ID,