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

refactor(ui): workflows component structure (WIP)

Browse Source 
- Simplify and de-insane-ify component structure, hooks, selectors, etc.
- Some perf improvements by using data attributes for styling instead of dynamic CSS-in-JS.
- Add field notes and start of linear view config, got blocked when I ran into deeper layout issues that made it very difficult to handle field configs. So those are WIP in this commit.
This commit is contained in:
psychedelicious
2025-01-20 13:27:44 +11:00
parent 52947f40c3
commit e479cb5fe4
44 changed files with 800 additions and 487 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
invokeai/frontend/web/src/features/ui/components/AppContent.tsx
View File

@@ -5,7 +5,7 @@ import { CanvasRightPanel } from 'features/controlLayers/components/CanvasRightP
import { useDndMonitor } from 'features/dnd/useDndMonitor';
import GalleryPanelContent from 'features/gallery/components/GalleryPanelContent';
import { ImageViewer } from 'features/gallery/components/ImageViewer/ImageViewer';
import NodeEditorPanelGroup from 'features/nodes/components/sidePanel/NodeEditorPanelGroup';
import WorkflowsLeftPanel from 'features/nodes/components/sidePanel/NodeEditorPanelGroup';
import QueueControls from 'features/queue/components/QueueControls';
import { useRegisteredHotkeys } from 'features/system/components/HotkeysModal/useHotkeyData';
import FloatingGalleryButton from 'features/ui/components/FloatingGalleryButton';
@@ -13,7 +13,7 @@ import FloatingParametersPanelButtons from 'features/ui/components/FloatingParam
import ParametersPanelTextToImage from 'features/ui/components/ParametersPanels/ParametersPanelTextToImage';
import ModelManagerTab from 'features/ui/components/tabs/ModelManagerTab';
import QueueTab from 'features/ui/components/tabs/QueueTab';
import { WorkflowsTabContent } from 'features/ui/components/tabs/WorkflowsTabContent';
import { WorkflowsMainPanel } from 'features/ui/components/tabs/WorkflowsTabContent';
import { VerticalNavBar } from 'features/ui/components/VerticalNavBar';
import type { UsePanelOptions } from 'features/ui/hooks/usePanel';
import { usePanel } from 'features/ui/hooks/usePanel';
@@ -165,7 +165,6 @@ const RightPanelContent = memo(() => {
if (tab === 'canvas') {
return <CanvasRightPanel />;
}
if (tab === 'upscaling' || tab === 'workflows') {
return <GalleryPanelContent />;
}
@@ -183,9 +182,8 @@ const LeftPanelContent = memo(() => {
if (tab === 'upscaling') {
return <ParametersPanelUpscale />;
}
if (tab === 'workflows') {
return <NodeEditorPanelGroup />;
return <WorkflowsLeftPanel />;
}
return null;
@@ -194,6 +192,7 @@ LeftPanelContent.displayName = 'LeftPanelContent';
const MainPanelContent = memo(() => {
const tab = useAppSelector(selectActiveTab);
if (tab === 'canvas') {
return <CanvasMainPanelContent />;
}
@@ -201,7 +200,7 @@ const MainPanelContent = memo(() => {
return <ImageViewer />;
}
if (tab === 'workflows') {
return <WorkflowsTabContent />;
return <WorkflowsMainPanel />;
}
if (tab === 'models') {
return <ModelManagerTab />;

4
invokeai/frontend/web/src/features/ui/components/tabs/WorkflowsTabContent.tsx
View File

@@ -5,7 +5,7 @@ import { selectWorkflowMode } from 'features/nodes/store/workflowSlice';
import { memo } from 'react';
import { ReactFlowProvider } from 'reactflow';
export const WorkflowsTabContent = memo(() => {
export const WorkflowsMainPanel = memo(() => {
const mode = useAppSelector(selectWorkflowMode);
if (mode === 'edit') {
@@ -19,4 +19,4 @@ export const WorkflowsTabContent = memo(() => {
return <ImageViewer />;
});
WorkflowsTabContent.displayName = 'WorkflowsTabContent';
WorkflowsMainPanel.displayName = 'WorkflowsMainPanel';