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

fix(ui): initial panel sizing

Browse Source
This commit is contained in:
psychedelicious
2025-07-01 23:30:30 +10:00
parent dc9cd22d9d
commit 3d8f865fb0
6 changed files with 15 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -32,10 +32,11 @@ import { CanvasWorkspacePanel } from './CanvasWorkspacePanel';
import { navigationApi } from './navigation-api'; import { navigationApi } from './navigation-api';
import { PanelHotkeysLogical } from './PanelHotkeysLogical'; import { PanelHotkeysLogical } from './PanelHotkeysLogical';
import { import {
BOARD_PANEL_DEFAULT_HEIGHT_PX,
BOARD_PANEL_MIN_HEIGHT_PX, BOARD_PANEL_MIN_HEIGHT_PX,
BOARDS_PANEL_ID, BOARDS_PANEL_ID,
CANVAS_BOARD_PANEL_DEFAULT_HEIGHT_PX,
DEFAULT_TAB_ID, DEFAULT_TAB_ID,
GALLERY_PANEL_DEFAULT_HEIGHT_PX,
GALLERY_PANEL_ID, GALLERY_PANEL_ID,
GALLERY_PANEL_MIN_HEIGHT_PX, GALLERY_PANEL_MIN_HEIGHT_PX,
LAUNCHPAD_PANEL_ID, LAUNCHPAD_PANEL_ID,
@@ -207,7 +208,9 @@ export const initializeRightPanelLayout = (tab: TabName, api: GridviewApi) => {
}, },
}); });
boards.api.setSize({ height: BOARD_PANEL_DEFAULT_HEIGHT_PX, width: RIGHT_PANEL_MIN_SIZE_PX }); gallery.api.setSize({ height: GALLERY_PANEL_DEFAULT_HEIGHT_PX, width: RIGHT_PANEL_MIN_SIZE_PX });
boards.api.setSize({ height: CANVAS_BOARD_PANEL_DEFAULT_HEIGHT_PX, width: RIGHT_PANEL_MIN_SIZE_PX });
return { gallery, layers, boards } satisfies Record<string, IGridviewPanel>; return { gallery, layers, boards } satisfies Record<string, IGridviewPanel>;
}; };

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

@@ -34,6 +34,7 @@ import {
BOARD_PANEL_MIN_HEIGHT_PX, BOARD_PANEL_MIN_HEIGHT_PX,
BOARDS_PANEL_ID, BOARDS_PANEL_ID,
DEFAULT_TAB_ID, DEFAULT_TAB_ID,
GALLERY_PANEL_DEFAULT_HEIGHT_PX,
GALLERY_PANEL_ID, GALLERY_PANEL_ID,
GALLERY_PANEL_MIN_HEIGHT_PX, GALLERY_PANEL_MIN_HEIGHT_PX,
LAUNCHPAD_PANEL_ID, LAUNCHPAD_PANEL_ID,
@@ -171,6 +172,7 @@ export const initializeRightPanelLayout = (tab: TabName, api: GridviewApi) => {
}, },
}); });
gallery.api.setSize({ height: GALLERY_PANEL_DEFAULT_HEIGHT_PX, width: RIGHT_PANEL_MIN_SIZE_PX });
boards.api.setSize({ height: BOARD_PANEL_DEFAULT_HEIGHT_PX, width: RIGHT_PANEL_MIN_SIZE_PX }); boards.api.setSize({ height: BOARD_PANEL_DEFAULT_HEIGHT_PX, width: RIGHT_PANEL_MIN_SIZE_PX });
return { gallery, boards } satisfies Record<string, IGridviewPanel>; return { gallery, boards } satisfies Record<string, IGridviewPanel>;

3
invokeai/frontend/web/src/features/ui/layouts/shared.ts
View File

@@ -28,3 +28,6 @@ export const GALLERY_PANEL_DEFAULT_HEIGHT_PX = 232;
export const LAYERS_PANEL_MIN_HEIGHT_PX = 36; export const LAYERS_PANEL_MIN_HEIGHT_PX = 36;
export const LAYERS_PANEL_DEFAULT_HEIGHT_PX = 232; export const LAYERS_PANEL_DEFAULT_HEIGHT_PX = 232;
export const CANVAS_BOARD_PANEL_DEFAULT_HEIGHT_PX = 36; // Collapsed by default on Canvas
export const CANVAS_GALLERY_PANEL_DEFAULT_HEIGHT_PX = 200; // Smaller default size on Canvas

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

@@ -33,6 +33,7 @@ import {
BOARD_PANEL_MIN_HEIGHT_PX, BOARD_PANEL_MIN_HEIGHT_PX,
BOARDS_PANEL_ID, BOARDS_PANEL_ID,
DEFAULT_TAB_ID, DEFAULT_TAB_ID,
GALLERY_PANEL_DEFAULT_HEIGHT_PX,
GALLERY_PANEL_ID, GALLERY_PANEL_ID,
GALLERY_PANEL_MIN_HEIGHT_PX, GALLERY_PANEL_MIN_HEIGHT_PX,
LAUNCHPAD_PANEL_ID, LAUNCHPAD_PANEL_ID,
@@ -170,6 +171,7 @@ export const initializeRightPanelLayout = (tab: TabName, api: GridviewApi) => {
}, },
}); });
gallery.api.setSize({ height: GALLERY_PANEL_DEFAULT_HEIGHT_PX, width: RIGHT_PANEL_MIN_SIZE_PX });
boards.api.setSize({ height: BOARD_PANEL_DEFAULT_HEIGHT_PX, width: RIGHT_PANEL_MIN_SIZE_PX }); boards.api.setSize({ height: BOARD_PANEL_DEFAULT_HEIGHT_PX, width: RIGHT_PANEL_MIN_SIZE_PX });
return { gallery, boards } satisfies Record<string, IGridviewPanel>; return { gallery, boards } satisfies Record<string, IGridviewPanel>;

2
invokeai/frontend/web/src/features/ui/layouts/use-collapsible-gridview-panel.ts
View File

@@ -92,8 +92,6 @@ export const useCollapsibleGridviewPanel = (
return; return;
} }
lastExpandedSizeRef.current = orientation === 'vertical' ? panel.height : panel.width;
const disposable = panel.api.onDidDimensionsChange(() => { const disposable = panel.api.onDidDimensionsChange(() => {
const isCollapsed = getIsCollapsed(panel, orientation, collapsedSize); const isCollapsed = getIsCollapsed(panel, orientation, collapsedSize);
$isCollapsed.set(isCollapsed); $isCollapsed.set(isCollapsed);

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

@@ -35,6 +35,7 @@ import {
BOARD_PANEL_MIN_HEIGHT_PX, BOARD_PANEL_MIN_HEIGHT_PX,
BOARDS_PANEL_ID, BOARDS_PANEL_ID,
DEFAULT_TAB_ID, DEFAULT_TAB_ID,
GALLERY_PANEL_DEFAULT_HEIGHT_PX,
GALLERY_PANEL_ID, GALLERY_PANEL_ID,
GALLERY_PANEL_MIN_HEIGHT_PX, GALLERY_PANEL_MIN_HEIGHT_PX,
LAUNCHPAD_PANEL_ID, LAUNCHPAD_PANEL_ID,
@@ -189,6 +190,7 @@ export const initializeRightPanelLayout = (tab: TabName, api: GridviewApi) => {
}, },
}); });
gallery.api.setSize({ height: GALLERY_PANEL_DEFAULT_HEIGHT_PX, width: RIGHT_PANEL_MIN_SIZE_PX });
boards.api.setSize({ height: BOARD_PANEL_DEFAULT_HEIGHT_PX, width: RIGHT_PANEL_MIN_SIZE_PX }); boards.api.setSize({ height: BOARD_PANEL_DEFAULT_HEIGHT_PX, width: RIGHT_PANEL_MIN_SIZE_PX });
return { gallery, boards } satisfies Record<string, IGridviewPanel>; return { gallery, boards } satisfies Record<string, IGridviewPanel>;
@@ -295,6 +297,7 @@ export const WorkflowsTabAutoLayout = memo(() => {
const onReady = useCallback<IGridviewReactProps['onReady']>(({ api }) => { const onReady = useCallback<IGridviewReactProps['onReady']>(({ api }) => {
setRootApi(api); setRootApi(api);
}, []); }, []);
useResizeMainPanelOnFirstVisit(rootApi, rootRef); useResizeMainPanelOnFirstVisit(rootApi, rootRef);
useEffect(() => { useEffect(() => {