Skip to content

Commit bcd1a64

Browse files
psychedeliciouspsychedelicious
committed
feat(ui): get all tabs working w/ new layout
1 parent 3363b0b commit bcd1a64

File tree

8 files changed

+288
-54
lines changed

8 files changed

+288
-54
lines changed

‎invokeai/frontend/web/src/features/controlLayers/components/SimpleSession/WorkflowsLaunchpadPanel.tsx

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
import { Flex, Heading } from '@invoke-ai/ui-library';
2+
import { memo } from 'react';
3+
4+
export const WorkflowsLaunchpadPanel = memo(() => {
5+
return (
6+
<Flex flexDir="column" h="full" w="full" alignItems="center" justifyContent="center" gap={2}>
7+
<Flex flexDir="column" w="full" h="full" justifyContent="center" gap={4} px={12} maxW={768}>
8+
<Heading mb={4}>Go deep with Workflows.</Heading>
9+
</Flex>
10+
</Flex>
11+
);
12+
});
13+
WorkflowsLaunchpadPanel.displayName = 'WorkflowsLaunchpadPanel';

‎invokeai/frontend/web/src/features/nodes/components/NodeEditor.tsx

Lines changed: 18 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import type { SystemStyleObject } from '@invoke-ai/ui-library';
2+
import { ReactFlowProvider } from '@xyflow/react';
23
import { FocusRegionWrapper } from 'common/components/FocusRegionWrapper';
34
import { IAINoContentFallback } from 'common/components/IAIImageFallback';
45
import { AddNodeCmdk } from 'features/nodes/components/flow/AddNodeCmdk/AddNodeCmdk';
@@ -29,21 +30,23 @@ const NodeEditor = () => {
2930
const { t } = useTranslation();
3031

3132
return (
32-
<FocusRegionWrapper region="workflows" layerStyle="first" sx={FOCUS_REGION_STYLES}>
33-
{data && (
34-
<>
35-
<Flow />
36-
<AddNodeCmdk />
37-
<TopLeftPanel />
38-
<TopCenterPanel />
39-
<TopRightPanel />
40-
<BottomLeftPanel />
41-
<MinimapPanel />
42-
</>
43-
)}
44-
<WorkflowEditorSettings />
45-
{isLoading && <IAINoContentFallback label={t('nodes.loadingNodes')} icon={PiFlowArrowBold} />}
46-
</FocusRegionWrapper>
33+
<ReactFlowProvider>
34+
<FocusRegionWrapper region="workflows" layerStyle="first" sx={FOCUS_REGION_STYLES}>
35+
{data && (
36+
<>
37+
<Flow />
38+
<AddNodeCmdk />
39+
<TopLeftPanel />
40+
<TopCenterPanel />
41+
<TopRightPanel />
42+
<BottomLeftPanel />
43+
<MinimapPanel />
44+
</>
45+
)}
46+
<WorkflowEditorSettings />
47+
{isLoading && <IAINoContentFallback label={t('nodes.loadingNodes')} icon={PiFlowArrowBold} />}
48+
</FocusRegionWrapper>
49+
</ReactFlowProvider>
4750
);
4851
};
4952

‎invokeai/frontend/web/src/features/nodes/components/sidePanel/WorkflowsTabLeftPanel.tsx

Lines changed: 11 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ import { PublishWorkflowPanelContent } from 'features/nodes/components/sidePanel
88
import { ActiveWorkflowDescription } from 'features/nodes/components/sidePanel/WorkflowListMenu/ActiveWorkflowDescription';
99
import { ActiveWorkflowNameAndActions } from 'features/nodes/components/sidePanel/WorkflowListMenu/ActiveWorkflowNameAndActions';
1010
import { selectWorkflowMode } from 'features/nodes/store/workflowLibrarySlice';
11+
import QueueControls from 'features/queue/components/QueueControls';
1112
import { memo } from 'react';
1213

1314
import { ViewModeLeftPanelContent } from './viewMode/ViewModeLeftPanelContent';
@@ -18,13 +19,16 @@ const WorkflowsTabLeftPanel = () => {
1819
const isInPublishFlow = useStore($isInPublishFlow);
1920

2021
return (
21-
<Flex w="full" h="full" gap={2} flexDir="column">
22-
{isInPublishFlow && <PublishWorkflowPanelContent />}
23-
{!isInPublishFlow && <ActiveWorkflowNameAndActions />}
24-
{!isInPublishFlow && !isPublished && mode === 'view' && <ActiveWorkflowDescription />}
25-
{!isInPublishFlow && !isPublished && mode === 'view' && <ViewModeLeftPanelContent />}
26-
{!isInPublishFlow && !isPublished && mode === 'edit' && <EditModeLeftPanelContent />}
27-
{isPublished && <PublishedWorkflowPanelContent />}
22+
<Flex flexDir="column" w="full" h="full" gap={2} py={2} pe={2}>
23+
<QueueControls />
24+
<Flex w="full" h="full" gap={2} flexDir="column">
25+
{isInPublishFlow && <PublishWorkflowPanelContent />}
26+
{!isInPublishFlow && <ActiveWorkflowNameAndActions />}
27+
{!isInPublishFlow && !isPublished && mode === 'view' && <ActiveWorkflowDescription />}
28+
{!isInPublishFlow && !isPublished && mode === 'view' && <ViewModeLeftPanelContent />}
29+
{!isInPublishFlow && !isPublished && mode === 'edit' && <EditModeLeftPanelContent />}
30+
{isPublished && <PublishedWorkflowPanelContent />}
31+
</Flex>
2832
</Flex>
2933
);
3034
};

‎invokeai/frontend/web/src/features/queue/components/QueueTabContent.tsx

Lines changed: 1 addition & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,5 @@
11
import { Box, Flex } from '@invoke-ai/ui-library';
2-
import { useAppSelector } from 'app/store/storeHooks';
32
import { useFeatureStatus } from 'features/system/hooks/useFeatureStatus';
4-
import { selectActiveTab } from 'features/ui/store/uiSelectors';
53
import { memo } from 'react';
64

75
import InvocationCacheStatus from './InvocationCacheStatus';
@@ -11,18 +9,9 @@ import QueueTabQueueControls from './QueueTabQueueControls';
119

1210
const QueueTabContent = () => {
1311
const isInvocationCacheEnabled = useFeatureStatus('invocationCache');
14-
const activeTabName = useAppSelector(selectActiveTab);
1512

1613
return (
17-
<Flex
18-
display={activeTabName === 'queue' ? undefined : 'none'}
19-
hidden={activeTabName !== 'queue'}
20-
borderRadius="base"
21-
w="full"
22-
h="full"
23-
flexDir="column"
24-
gap={2}
25-
>
14+
<Flex borderRadius="base" w="full" h="full" flexDir="column" gap={2}>
2615
<Flex gap={2} w="full">
2716
<QueueTabQueueControls />
2817
<QueueStatus />

‎invokeai/frontend/web/src/features/system/components/HotkeysModal/useHotkeyData.ts

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -78,11 +78,12 @@ export const useHotkeyData = (): HotkeysData => {
7878
addHotkey('app', 'invokeFront', ['mod+shift+enter']);
7979
addHotkey('app', 'cancelQueueItem', ['shift+x']);
8080
addHotkey('app', 'clearQueue', ['mod+shift+x']);
81-
addHotkey('app', 'selectCanvasTab', ['1']);
82-
addHotkey('app', 'selectUpscalingTab', ['2']);
83-
addHotkey('app', 'selectWorkflowsTab', ['3']);
84-
addHotkey('app', 'selectModelsTab', ['4'], isModelManagerEnabled);
85-
addHotkey('app', 'selectQueueTab', isModelManagerEnabled ? ['5'] : ['4']);
81+
addHotkey('app', 'selectGenerateTab', ['1']);
82+
addHotkey('app', 'selectCanvasTab', ['2']);
83+
addHotkey('app', 'selectUpscalingTab', ['3']);
84+
addHotkey('app', 'selectWorkflowsTab', ['4']);
85+
addHotkey('app', 'selectModelsTab', ['5'], isModelManagerEnabled);
86+
addHotkey('app', 'selectQueueTab', isModelManagerEnabled ? ['6'] : ['5']);
8687
addHotkey('app', 'focusPrompt', ['alt+a']);
8788
addHotkey('app', 'toggleLeftPanel', ['t', 'o']);
8889
addHotkey('app', 'toggleRightPanel', ['g']);

‎invokeai/frontend/web/src/features/ui/components/AppContent.tsx

Lines changed: 35 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -8,11 +8,16 @@ import { VerticalNavBar } from 'features/ui/components/VerticalNavBar';
88
import { CanvasTabAutoLayout } from 'features/ui/layouts/canvas-tab-auto-layout';
99
import { GenerateTabAutoLayout } from 'features/ui/layouts/generate-tab-auto-layout';
1010
import { UpscalingTabAutoLayout } from 'features/ui/layouts/upscaling-tab-auto-layout';
11+
import { WorkflowsTabAutoLayout } from 'features/ui/layouts/workflows-tab-auto-layout';
1112
import { selectActiveTabIndex } from 'features/ui/store/uiSelectors';
1213
import { $isLeftPanelOpen, $isRightPanelOpen } from 'features/ui/store/uiSlice';
1314
import type { CSSProperties } from 'react';
1415
import { memo } from 'react';
1516

17+
import { TabMountGate } from './TabMountGate';
18+
import ModelManagerTab from './tabs/ModelManagerTab';
19+
import QueueTab from './tabs/QueueTab';
20+
1621
const panelStyles: CSSProperties = { position: 'relative', height: '100%', width: '100%', minWidth: 0 };
1722

1823
const onLeftPanelCollapse = (isCollapsed: boolean) => $isLeftPanelOpen.set(!isCollapsed);
@@ -103,15 +108,36 @@ export const AppContent = memo(() => {
103108
<VerticalNavBar />
104109
</TabList>
105110
<TabPanels w="full" h="full" p={0}>
106-
<TabPanel w="full" h="full" p={0}>
107-
<GenerateTabAutoLayout />
108-
</TabPanel>
109-
<TabPanel w="full" h="full" p={0}>
110-
<CanvasTabAutoLayout />
111-
</TabPanel>
112-
<TabPanel w="full" h="full" p={0}>
113-
<UpscalingTabAutoLayout />
114-
</TabPanel>
111+
<TabMountGate tab="generate">
112+
<TabPanel w="full" h="full" p={0}>
113+
<GenerateTabAutoLayout />
114+
</TabPanel>
115+
</TabMountGate>
116+
<TabMountGate tab="canvas">
117+
<TabPanel w="full" h="full" p={0}>
118+
<CanvasTabAutoLayout />
119+
</TabPanel>
120+
</TabMountGate>
121+
<TabMountGate tab="upscaling">
122+
<TabPanel w="full" h="full" p={0}>
123+
<UpscalingTabAutoLayout />
124+
</TabPanel>
125+
</TabMountGate>
126+
<TabMountGate tab="workflows">
127+
<TabPanel w="full" h="full" p={0}>
128+
<WorkflowsTabAutoLayout />
129+
</TabPanel>
130+
</TabMountGate>
131+
<TabMountGate tab="models">
132+
<TabPanel w="full" h="full" p={0}>
133+
<ModelManagerTab />
134+
</TabPanel>
135+
</TabMountGate>
136+
<TabMountGate tab="queue">
137+
<TabPanel w="full" h="full" p={0}>
138+
<QueueTab />
139+
</TabPanel>
140+
</TabMountGate>
115141
</TabPanels>
116142
</Tabs>
117143
);

‎invokeai/frontend/web/src/features/ui/components/tabs/WorkflowsTabContent.tsx

Lines changed: 1 addition & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,3 @@
1-
import { ReactFlowProvider } from '@xyflow/react';
21
import { useAppSelector } from 'app/store/storeHooks';
32
import { ImageViewer } from 'features/gallery/components/ImageViewer/ImageViewer';
43
import NodeEditor from 'features/nodes/components/NodeEditor';
@@ -9,11 +8,7 @@ export const WorkflowsMainPanel = memo(() => {
98
const mode = useAppSelector(selectWorkflowMode);
109

1110
if (mode === 'edit') {
12-
return (
13-
<ReactFlowProvider>
14-
<NodeEditor />
15-
</ReactFlowProvider>
16-
);
11+
return <NodeEditor />;
1712
}
1813

1914
return <ImageViewer />;

0 commit comments

Comments
 (0)