Mirrored_Repos/InvokeAI
1
0
Fork 0
mirror of https://github.com/invoke-ai/InvokeAI synced 2024-08-30 20:32:17 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat(ui): add support for default size in usePanel

Browse Source
This commit is contained in:
psychedelicious 2024-07-10 18:27:32 +10:00 committed by Kent Keirsey
parent 788f90a7d5
commit 2e7a95998c
1 changed files with 29 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

33
invokeai/frontend/web/src/features/ui/hooks/usePanel.ts
View File

@ -16,6 +16,10 @@ export type UsePanelOptions =
* The minimum size of the panel as a percentage. * The minimum size of the panel as a percentage.
*/ */
minSize: number; minSize: number;
/**
* The default size of the panel as a percentage.
*/
defaultSize?: number;
/** /**
* The unit of the minSize * The unit of the minSize
*/ */
@ -26,6 +30,10 @@ export type UsePanelOptions =
* The minimum size of the panel in pixels. * The minimum size of the panel in pixels.
*/ */
minSize: number; minSize: number;
/**
* The default size of the panel in pixels.
*/
defaultSize?: number;
/** /**
* The unit of the minSize. * The unit of the minSize.
*/ */
@ -50,6 +58,10 @@ export type UsePanelReturn = {
* The dynamically calculated minimum size of the panel. * The dynamically calculated minimum size of the panel.
*/ */
minSize: number; minSize: number;
/**
* The dynamically calculated default size of the panel.
*/
defaultSize: number;
/** /**
* Whether the panel is collapsed. * Whether the panel is collapsed.
*/ */
@ -94,6 +106,7 @@ export type UsePanelReturn = {
export const usePanel = (arg: UsePanelOptions): UsePanelReturn => { export const usePanel = (arg: UsePanelOptions): UsePanelReturn => {
const panelHandleRef = useRef<ImperativePanelHandle>(null); const panelHandleRef = useRef<ImperativePanelHandle>(null);
const [_minSize, _setMinSize] = useState<number>(arg.unit === 'percentages' ? arg.minSize : 0); const [_minSize, _setMinSize] = useState<number>(arg.unit === 'percentages' ? arg.minSize : 0);
const [_defaultSize, _setDefaultSize] = useState<number>(arg.defaultSize ?? arg.minSize);
// If the units are pixels, we need to calculate the min size as a percentage of the available space, // If the units are pixels, we need to calculate the min size as a percentage of the available space,
// then resize the panel if it is too small. // then resize the panel if it is too small.
@ -115,6 +128,13 @@ export const usePanel = (arg: UsePanelOptions): UsePanelReturn => {
const minSizePct = getSizeAsPercentage(arg.minSize, arg.panelGroupRef, arg.panelGroupDirection); const minSizePct = getSizeAsPercentage(arg.minSize, arg.panelGroupRef, arg.panelGroupDirection);
_setMinSize(minSizePct); _setMinSize(minSizePct);
const defaultSizePct = getSizeAsPercentage(
arg.defaultSize ?? arg.minSize,
arg.panelGroupRef,
arg.panelGroupDirection
);
_setDefaultSize(defaultSizePct);
if (!panelHandleRef.current.isCollapsed() && panelHandleRef.current.getSize() < minSizePct && minSizePct > 0) { if (!panelHandleRef.current.isCollapsed() && panelHandleRef.current.getSize() < minSizePct && minSizePct > 0) {
panelHandleRef.current.resize(minSizePct); panelHandleRef.current.resize(minSizePct);
} }
@ -124,8 +144,12 @@ export const usePanel = (arg: UsePanelOptions): UsePanelReturn => {
panelGroupHandleElements.forEach((el) => resizeObserver.observe(el)); panelGroupHandleElements.forEach((el) => resizeObserver.observe(el));
// Resize the panel to the min size once on startup // Resize the panel to the min size once on startup
const minSizePct = getSizeAsPercentage(arg.minSize, arg.panelGroupRef, arg.panelGroupDirection); const defaultSizePct = getSizeAsPercentage(
panelHandleRef.current?.resize(minSizePct); arg.defaultSize ?? arg.minSize,
arg.panelGroupRef,
arg.panelGroupDirection
);
panelHandleRef.current?.resize(defaultSizePct);
return () => { return () => {
resizeObserver.disconnect(); resizeObserver.disconnect();
@ -185,8 +209,8 @@ export const usePanel = (arg: UsePanelOptions): UsePanelReturn => {
} }
// Otherwise, resize to the min size // Otherwise, resize to the min size
panelHandleRef.current?.resize(_minSize); panelHandleRef.current?.resize(_defaultSize);
}, [_minSize, collapse]); }, [_defaultSize, _minSize, collapse]);
return { return {
ref: panelHandleRef, ref: panelHandleRef,
@ -200,6 +224,7 @@ export const usePanel = (arg: UsePanelOptions): UsePanelReturn => {
collapse, collapse,
resize, resize,
onDoubleClickHandle, onDoubleClickHandle,
defaultSize: _defaultSize,
}; };
}; };