diff --git a/invokeai/frontend/web/src/features/ui/components/InvokeTabs.tsx b/invokeai/frontend/web/src/features/ui/components/InvokeTabs.tsx
index 4f3a214690..bb4e052b89 100644
--- a/invokeai/frontend/web/src/features/ui/components/InvokeTabs.tsx
+++ b/invokeai/frontend/web/src/features/ui/components/InvokeTabs.tsx
@@ -192,6 +192,7 @@ const InvokeTabs = () => {
expand: expandOptionsPanel,
collapse: collapseOptionsPanel,
toggle: toggleOptionsPanel,
+ onDoubleClickHandle: onDoubleClickOptionsPanelHandle,
} = usePanel(optionsPanelUsePanelOptions);
const {
@@ -204,10 +205,19 @@ const InvokeTabs = () => {
expand: expandGalleryPanel,
collapse: collapseGalleryPanel,
toggle: toggleGalleryPanel,
+ onDoubleClickHandle: onDoubleClickGalleryPanelHandle,
} = usePanel(galleryPanelUsePanelOptions);
- useHotkeys('g', toggleGalleryPanel, []);
- useHotkeys(['t', 'o'], toggleOptionsPanel, []);
+ useHotkeys('g', toggleGalleryPanel, [toggleGalleryPanel]);
+ useHotkeys(['t', 'o'], toggleOptionsPanel, [toggleOptionsPanel]);
+ useHotkeys(
+ 'shift+r',
+ () => {
+ resetOptionsPanel();
+ resetGalleryPanel();
+ },
+ [resetOptionsPanel, resetGalleryPanel]
+ );
useHotkeys(
'f',
() => {
@@ -219,7 +229,14 @@ const InvokeTabs = () => {
collapseGalleryPanel();
}
},
- [isOptionsPanelCollapsed, isGalleryPanelCollapsed]
+ [
+ isOptionsPanelCollapsed,
+ isGalleryPanelCollapsed,
+ expandOptionsPanel,
+ expandGalleryPanel,
+ collapseOptionsPanel,
+ collapseGalleryPanel,
+ ]
);
return (
@@ -265,7 +282,7 @@ const InvokeTabs = () => {
>
@@ -279,8 +296,8 @@ const InvokeTabs = () => {
<>
void;
+ /**
+ * Reset the panel to the minSize. If the panel is already at the minSize, collapse it.
+ * This should be passed to the `onDoubleClick` prop of the panel's nearest resize handle.
+ */
+ onDoubleClickHandle: () => void;
/**
* Toggle the panel between collapsed and expanded.
*/
@@ -183,6 +187,10 @@ export const usePanel = (arg: UsePanelOptions): UsePanelReturn => {
);
const reset = useCallback(() => {
+ panelHandleRef.current?.resize(_minSize);
+ }, [_minSize]);
+
+ const onDoubleClickHandle = useCallback(() => {
// If the panel is really super close to the min size, collapse it
if (Math.abs((panelHandleRef.current?.getSize() ?? 0) - _minSize) < 0.01) {
collapse();
@@ -204,6 +212,7 @@ export const usePanel = (arg: UsePanelOptions): UsePanelReturn => {
expand,
collapse,
resize,
+ onDoubleClickHandle,
};
};