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): resize options/gallery panels to min on window resize

Browse Source 
Per user feedback, this is preferrable to letting them expand when the window grows.

Also bumps `react-resizable-panels` now that one of my PRs is merged to fix an issue.
This commit is contained in:
psychedelicious 2024-01-14 09:43:19 +11:00
parent cc571d9ab2
commit 426a7b900f
3 changed files with 18 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
invokeai/frontend/web/package.json
View File

@ -96,7 +96,7 @@
"react-icons": "^4.12.0", "react-icons": "^4.12.0",
"react-konva": "^18.2.10", "react-konva": "^18.2.10",
"react-redux": "9.0.4", "react-redux": "9.0.4",
"react-resizable-panels": "^1.0.8", "react-resizable-panels": "^1.0.9",
"react-select": "5.8.0", "react-select": "5.8.0",
"react-textarea-autosize": "^8.5.3", "react-textarea-autosize": "^8.5.3",
"react-use": "^17.4.2", "react-use": "^17.4.2",

8
invokeai/frontend/web/pnpm-lock.yaml generated
View File

@ -143,8 +143,8 @@ dependencies:
specifier: 9.0.4 specifier: 9.0.4
version: 9.0.4(@types/react@18.2.47)(react@18.2.0)(redux@5.0.1) version: 9.0.4(@types/react@18.2.47)(react@18.2.0)(redux@5.0.1)
react-resizable-panels: react-resizable-panels:
specifier: ^1.0.8 specifier: ^1.0.9
version: 1.0.8(react-dom@18.2.0)(react@18.2.0) version: 1.0.9(react-dom@18.2.0)(react@18.2.0)
react-select: react-select:
specifier: 5.8.0 specifier: 5.8.0
version: 5.8.0(@types/react@18.2.47)(react-dom@18.2.0)(react@18.2.0) version: 5.8.0(@types/react@18.2.47)(react-dom@18.2.0)(react@18.2.0)
@ -11638,8 +11638,8 @@ packages:
use-sidecar: 1.1.2(@types/react@18.2.47)(react@18.2.0) use-sidecar: 1.1.2(@types/react@18.2.47)(react@18.2.0)
dev: false dev: false
/react-resizable-panels@1.0.8(react-dom@18.2.0)(react@18.2.0): /react-resizable-panels@1.0.9(react-dom@18.2.0)(react@18.2.0):
resolution: {integrity: sha512-IuivK06FWN115VSN8TDGYuIoAzplC4oPUCDZ5d+VWJj0p6N3SMfwjggpjMUGSpQJLvMi0FXPSLLn4rGVmESjmA==} resolution: {integrity: sha512-QPfW3L7yetEC6z04G9AYYFz5kBklh8rTWcOsVFImYMNUVhr1Y1r9Qc/20Yks2tA+lXMBWCUz4fkGEvbS7tpBSg==}
peerDependencies: peerDependencies:
react: ^16.14.0 || ^17.0.0 || ^18.0.0 react: ^16.14.0 || ^17.0.0 || ^18.0.0
react-dom: ^16.14.0 || ^17.0.0 || ^18.0.0 react-dom: ^16.14.0 || ^17.0.0 || ^18.0.0

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

@ -107,11 +107,8 @@ export const usePanel = (arg: UsePanelOptions): UsePanelReturn => {
return; return;
} }
const id = arg.panelGroupRef.current.getId(); const id = arg.panelGroupRef.current.getId();
const panelGroupElement = getPanelGroupElement(id, document); const panelGroupElement = getPanelGroupElement(id);
const panelGroupHandleElements = getResizeHandleElementsForGroup( const panelGroupHandleElements = getResizeHandleElementsForGroup(id);
id,
document
);
if (!panelGroupElement) { if (!panelGroupElement) {
return; return;
} }
@ -128,13 +125,15 @@ export const usePanel = (arg: UsePanelOptions): UsePanelReturn => {
_setMinSize(minSizePct); _setMinSize(minSizePct);
const currentSize = panelHandleRef.current.getSize(); /**
* TODO(psyche): Ideally, we only resize the panel if there is not enough room for it in the
// If currentSize is 0, the panel is collapsed, so we don't want to resize it * panel group. This is a bit tricky, though. We'd need to track the last known panel size
// If it's not 0, but less than the minSize, resize it * and compare it to the new size before resizing. This introduces some complexity that I'd
if (currentSize > 0 && currentSize < minSizePct) { * rather not need to maintain.
panelHandleRef.current.resize(minSizePct); *
} * For now, we'll just resize the panel to the min size every time the panel group is resized.
*/
panelHandleRef.current.resize(minSizePct);
}); });
resizeObserver.observe(panelGroupElement); resizeObserver.observe(panelGroupElement);
@ -247,7 +246,7 @@ const getSizeAsPercentage = (
return 0; return 0;
} }
const id = panelGroupHandleRef.current.getId(); const id = panelGroupHandleRef.current.getId();
const panelGroupElement = getPanelGroupElement(id, document); const panelGroupElement = getPanelGroupElement(id);
if (!panelGroupElement) { if (!panelGroupElement) {
// No panel group element, size is 0 // No panel group element, size is 0
return 0; return 0;
@ -260,7 +259,7 @@ const getSizeAsPercentage = (
: panelGroupElement.offsetHeight; : panelGroupElement.offsetHeight;
// ...minus the width/height of the resize handles // ...minus the width/height of the resize handles
getResizeHandleElementsForGroup(id, document).forEach((el) => { getResizeHandleElementsForGroup(id).forEach((el) => {
availableSpace -= availableSpace -=
panelGroupDirection === 'horizontal' ? el.offsetWidth : el.offsetHeight; panelGroupDirection === 'horizontal' ? el.offsetWidth : el.offsetHeight;
}); });