From 3d8f865fb00aae9e6472c4fd10d0ba139b7246d2 Mon Sep 17 00:00:00 2001 From: psychedelicious <4822129+psychedelicious@users.noreply.github.com> Date: Tue, 1 Jul 2025 23:30:30 +1000 Subject: [PATCH] fix(ui): initial panel sizing --- .../web/src/features/ui/layouts/canvas-tab-auto-layout.tsx | 7 +++++-- .../src/features/ui/layouts/generate-tab-auto-layout.tsx | 2 ++ invokeai/frontend/web/src/features/ui/layouts/shared.ts | 3 +++ .../src/features/ui/layouts/upscaling-tab-auto-layout.tsx | 2 ++ .../features/ui/layouts/use-collapsible-gridview-panel.ts | 2 -- .../src/features/ui/layouts/workflows-tab-auto-layout.tsx | 3 +++ 6 files changed, 15 insertions(+), 4 deletions(-) diff --git a/invokeai/frontend/web/src/features/ui/layouts/canvas-tab-auto-layout.tsx b/invokeai/frontend/web/src/features/ui/layouts/canvas-tab-auto-layout.tsx index b817bafb5d..7e421ae086 100644 --- a/invokeai/frontend/web/src/features/ui/layouts/canvas-tab-auto-layout.tsx +++ b/invokeai/frontend/web/src/features/ui/layouts/canvas-tab-auto-layout.tsx @@ -32,10 +32,11 @@ import { CanvasWorkspacePanel } from './CanvasWorkspacePanel'; import { navigationApi } from './navigation-api'; import { PanelHotkeysLogical } from './PanelHotkeysLogical'; import { - BOARD_PANEL_DEFAULT_HEIGHT_PX, BOARD_PANEL_MIN_HEIGHT_PX, BOARDS_PANEL_ID, + CANVAS_BOARD_PANEL_DEFAULT_HEIGHT_PX, DEFAULT_TAB_ID, + GALLERY_PANEL_DEFAULT_HEIGHT_PX, GALLERY_PANEL_ID, GALLERY_PANEL_MIN_HEIGHT_PX, 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; }; diff --git a/invokeai/frontend/web/src/features/ui/layouts/generate-tab-auto-layout.tsx b/invokeai/frontend/web/src/features/ui/layouts/generate-tab-auto-layout.tsx index 47aad70113..4c30520c7a 100644 --- a/invokeai/frontend/web/src/features/ui/layouts/generate-tab-auto-layout.tsx +++ b/invokeai/frontend/web/src/features/ui/layouts/generate-tab-auto-layout.tsx @@ -34,6 +34,7 @@ import { BOARD_PANEL_MIN_HEIGHT_PX, BOARDS_PANEL_ID, DEFAULT_TAB_ID, + GALLERY_PANEL_DEFAULT_HEIGHT_PX, GALLERY_PANEL_ID, GALLERY_PANEL_MIN_HEIGHT_PX, 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 }); return { gallery, boards } satisfies Record; diff --git a/invokeai/frontend/web/src/features/ui/layouts/shared.ts b/invokeai/frontend/web/src/features/ui/layouts/shared.ts index cc2b2dffd1..60dbb2e041 100644 --- a/invokeai/frontend/web/src/features/ui/layouts/shared.ts +++ b/invokeai/frontend/web/src/features/ui/layouts/shared.ts @@ -28,3 +28,6 @@ export const GALLERY_PANEL_DEFAULT_HEIGHT_PX = 232; export const LAYERS_PANEL_MIN_HEIGHT_PX = 36; 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 diff --git a/invokeai/frontend/web/src/features/ui/layouts/upscaling-tab-auto-layout.tsx b/invokeai/frontend/web/src/features/ui/layouts/upscaling-tab-auto-layout.tsx index 694ade17fd..3d04b010fe 100644 --- a/invokeai/frontend/web/src/features/ui/layouts/upscaling-tab-auto-layout.tsx +++ b/invokeai/frontend/web/src/features/ui/layouts/upscaling-tab-auto-layout.tsx @@ -33,6 +33,7 @@ import { BOARD_PANEL_MIN_HEIGHT_PX, BOARDS_PANEL_ID, DEFAULT_TAB_ID, + GALLERY_PANEL_DEFAULT_HEIGHT_PX, GALLERY_PANEL_ID, GALLERY_PANEL_MIN_HEIGHT_PX, 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 }); return { gallery, boards } satisfies Record; diff --git a/invokeai/frontend/web/src/features/ui/layouts/use-collapsible-gridview-panel.ts b/invokeai/frontend/web/src/features/ui/layouts/use-collapsible-gridview-panel.ts index d8c6c00ca3..2b4b70df3b 100644 --- a/invokeai/frontend/web/src/features/ui/layouts/use-collapsible-gridview-panel.ts +++ b/invokeai/frontend/web/src/features/ui/layouts/use-collapsible-gridview-panel.ts @@ -92,8 +92,6 @@ export const useCollapsibleGridviewPanel = ( return; } - lastExpandedSizeRef.current = orientation === 'vertical' ? panel.height : panel.width; - const disposable = panel.api.onDidDimensionsChange(() => { const isCollapsed = getIsCollapsed(panel, orientation, collapsedSize); $isCollapsed.set(isCollapsed); diff --git a/invokeai/frontend/web/src/features/ui/layouts/workflows-tab-auto-layout.tsx b/invokeai/frontend/web/src/features/ui/layouts/workflows-tab-auto-layout.tsx index 638f97b9d1..7f886780eb 100644 --- a/invokeai/frontend/web/src/features/ui/layouts/workflows-tab-auto-layout.tsx +++ b/invokeai/frontend/web/src/features/ui/layouts/workflows-tab-auto-layout.tsx @@ -35,6 +35,7 @@ import { BOARD_PANEL_MIN_HEIGHT_PX, BOARDS_PANEL_ID, DEFAULT_TAB_ID, + GALLERY_PANEL_DEFAULT_HEIGHT_PX, GALLERY_PANEL_ID, GALLERY_PANEL_MIN_HEIGHT_PX, 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 }); return { gallery, boards } satisfies Record; @@ -295,6 +297,7 @@ export const WorkflowsTabAutoLayout = memo(() => { const onReady = useCallback(({ api }) => { setRootApi(api); }, []); + useResizeMainPanelOnFirstVisit(rootApi, rootRef); useEffect(() => {