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): support a min expanded size for collapsible panels

Browse Source
This commit is contained in:
psychedelicious
2025-07-07 18:55:32 +10:00
parent 702cb2cb1e
commit ecedfce758
4 changed files with 26 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -24,9 +24,11 @@ export const LEFT_PANEL_MIN_SIZE_PX = 420;
export const RIGHT_PANEL_MIN_SIZE_PX = 420;
export const BOARD_PANEL_MIN_HEIGHT_PX = 36;
export const BOARD_PANEL_MIN_EXPANDED_HEIGHT_PX = 128;
export const BOARD_PANEL_DEFAULT_HEIGHT_PX = 232;
export const GALLERY_PANEL_MIN_HEIGHT_PX = 36;
export const GALLERY_PANEL_MIN_EXPANDED_HEIGHT_PX = 128;
export const GALLERY_PANEL_DEFAULT_HEIGHT_PX = 232;
export const LAYERS_PANEL_MIN_HEIGHT_PX = 36;

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

@@ -21,7 +21,8 @@ export const useCollapsibleGridviewPanel = (
panelId: string,
orientation: 'horizontal' | 'vertical',
defaultSize: number,
collapsedSize?: number
collapsedSize?: number,
minExpandedSize?: number
) => {
const $isCollapsed = useState(() => atom(false))[0];
const lastExpandedSizeRef = useRef<number>(0);
@@ -46,12 +47,18 @@ export const useCollapsibleGridviewPanel = (
if (!panel || !(panel instanceof GridviewPanel)) {
return;
}
if (orientation === 'vertical') {
panel.api.setSize({ height: lastExpandedSizeRef.current || defaultSize });
} else {
panel.api.setSize({ width: lastExpandedSizeRef.current || defaultSize });
let newSize = lastExpandedSizeRef.current || defaultSize;
if (minExpandedSize && newSize < minExpandedSize) {
newSize = minExpandedSize;
}
}, [defaultSize, orientation, panelId, tab]);
if (orientation === 'vertical') {
panel.api.setSize({ height: newSize });
} else {
panel.api.setSize({ width: newSize });
}
}, [defaultSize, minExpandedSize, orientation, panelId, tab]);
const toggle = useCallback(() => {
const panel = navigationApi.getPanel(tab, panelId);