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, }; };