github/InvokeAI
1
1
Fork 0
mirror of https://github.com/invoke-ai/InvokeAI.git synced 2026-02-13 15:04:59 -05: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

10
invokeai/frontend/web/src/features/gallery/components/BoardsListPanelContent.tsx
View File

@@ -9,7 +9,12 @@ import { GalleryHeader } from 'features/gallery/components/GalleryHeader';
import { selectBoardSearchText } from 'features/gallery/store/gallerySelectors';
import { boardSearchTextChanged } from 'features/gallery/store/gallerySlice';
import { useAutoLayoutContext } from 'features/ui/layouts/auto-layout-context';
import { BOARD_PANEL_DEFAULT_HEIGHT_PX, BOARD_PANEL_MIN_HEIGHT_PX, BOARDS_PANEL_ID } from 'features/ui/layouts/shared';
import {
BOARD_PANEL_DEFAULT_HEIGHT_PX,
BOARD_PANEL_MIN_EXPANDED_HEIGHT_PX,
BOARD_PANEL_MIN_HEIGHT_PX,
BOARDS_PANEL_ID,
} from 'features/ui/layouts/shared';
import { useCollapsibleGridviewPanel } from 'features/ui/layouts/use-collapsible-gridview-panel';
import type { CSSProperties } from 'react';
import { memo, useCallback } from 'react';
@@ -27,7 +32,8 @@ export const BoardsPanel = memo(() => {
BOARDS_PANEL_ID,
'vertical',
BOARD_PANEL_DEFAULT_HEIGHT_PX,
BOARD_PANEL_MIN_HEIGHT_PX
BOARD_PANEL_MIN_HEIGHT_PX,
BOARD_PANEL_MIN_EXPANDED_HEIGHT_PX
);
const isCollapsed = useStore(collapsibleApi.$isCollapsed);
const { t } = useTranslation();

4
invokeai/frontend/web/src/features/gallery/components/Gallery.tsx
View File

@@ -10,6 +10,7 @@ import { useAutoLayoutContext } from 'features/ui/layouts/auto-layout-context';
import {
GALLERY_PANEL_DEFAULT_HEIGHT_PX,
GALLERY_PANEL_ID,
GALLERY_PANEL_MIN_EXPANDED_HEIGHT_PX,
GALLERY_PANEL_MIN_HEIGHT_PX,
} from 'features/ui/layouts/shared';
import { useCollapsibleGridviewPanel } from 'features/ui/layouts/use-collapsible-gridview-panel';
@@ -38,7 +39,8 @@ export const GalleryPanel = memo(() => {
GALLERY_PANEL_ID,
'vertical',
GALLERY_PANEL_DEFAULT_HEIGHT_PX,
GALLERY_PANEL_MIN_HEIGHT_PX
GALLERY_PANEL_MIN_HEIGHT_PX,
GALLERY_PANEL_MIN_EXPANDED_HEIGHT_PX
);
const isCollapsed = useStore(collapsibleApi.$isCollapsed);

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);