From 10fd4f6a616f48b044da20a7e44df7f43879c82a Mon Sep 17 00:00:00 2001 From: psychedelicious <4822129+psychedelicious@users.noreply.github.com> Date: Fri, 29 Dec 2023 15:34:04 +1100 Subject: [PATCH] feat(ui): update panel lib, move gallery to percentages --- invokeai/frontend/web/package.json | 2 +- invokeai/frontend/web/pnpm-lock.yaml | 8 +- .../sidePanel/NodeEditorPanelGroup.tsx | 25 +--- .../ui/components/FloatingGalleryButton.tsx | 14 +-- .../src/features/ui/components/InvokeTabs.tsx | 114 ++++-------------- .../ui/components/tabs/ImageToImageTab.tsx | 1 - .../web/src/features/ui/hooks/usePanel.ts | 27 +++-- 7 files changed, 57 insertions(+), 134 deletions(-) diff --git a/invokeai/frontend/web/package.json b/invokeai/frontend/web/package.json index d8eae592f3..a37556793f 100644 --- a/invokeai/frontend/web/package.json +++ b/invokeai/frontend/web/package.json @@ -94,7 +94,7 @@ "react-icons": "^4.12.0", "react-konva": "^18.2.10", "react-redux": "^9.0.4", - "react-resizable-panels": "^0.0.55", + "react-resizable-panels": "^1.0.5", "react-select": "5.7.7", "react-textarea-autosize": "^8.5.3", "react-use": "^17.4.2", diff --git a/invokeai/frontend/web/pnpm-lock.yaml b/invokeai/frontend/web/pnpm-lock.yaml index 2fbb210ad6..abf5f1def9 100644 --- a/invokeai/frontend/web/pnpm-lock.yaml +++ b/invokeai/frontend/web/pnpm-lock.yaml @@ -132,8 +132,8 @@ dependencies: specifier: ^9.0.4 version: 9.0.4(@types/react@18.2.46)(react@18.2.0)(redux@5.0.1) react-resizable-panels: - specifier: ^0.0.55 - version: 0.0.55(react-dom@18.2.0)(react@18.2.0) + specifier: ^1.0.5 + version: 1.0.5(react-dom@18.2.0)(react@18.2.0) react-select: specifier: 5.7.7 version: 5.7.7(@types/react@18.2.46)(react-dom@18.2.0)(react@18.2.0) @@ -11199,8 +11199,8 @@ packages: use-sidecar: 1.1.2(@types/react@18.2.46)(react@18.2.0) dev: false - /react-resizable-panels@0.0.55(react-dom@18.2.0)(react@18.2.0): - resolution: {integrity: sha512-J/LTFzUEjJiqwSjVh8gjUXkQDA8MRPjARASfn++d2+KOgA+9UcRYUfE3QBJixer2vkk+ffQ4cq3QzWzzHgqYpQ==} + /react-resizable-panels@1.0.5(react-dom@18.2.0)(react@18.2.0): + resolution: {integrity: sha512-OP0whNQCko+f4BgoptGaeIc7StBRyeMeJ+8r/7rXACBDf9W5EcMWuM32hfqPDMenS2HFy/eZVi/r8XqK+ZIEag==} peerDependencies: react: ^16.14.0 || ^17.0.0 || ^18.0.0 react-dom: ^16.14.0 || ^17.0.0 || ^18.0.0 diff --git a/invokeai/frontend/web/src/features/nodes/components/sidePanel/NodeEditorPanelGroup.tsx b/invokeai/frontend/web/src/features/nodes/components/sidePanel/NodeEditorPanelGroup.tsx index d0554eb5cc..55dc82aefd 100644 --- a/invokeai/frontend/web/src/features/nodes/components/sidePanel/NodeEditorPanelGroup.tsx +++ b/invokeai/frontend/web/src/features/nodes/components/sidePanel/NodeEditorPanelGroup.tsx @@ -5,7 +5,7 @@ import QueueControls from 'features/queue/components/QueueControls'; import ResizeHandle from 'features/ui/components/tabs/ResizeHandle'; import { usePanelStorage } from 'features/ui/hooks/usePanelStorage'; import type { CSSProperties } from 'react'; -import { memo, useCallback, useRef, useState } from 'react'; +import { memo, useCallback, useRef } from 'react'; import type { ImperativePanelGroupHandle } from 'react-resizable-panels'; import { Panel, PanelGroup } from 'react-resizable-panels'; @@ -15,8 +15,6 @@ import WorkflowPanel from './workflow/WorkflowPanel'; const panelGroupStyles: CSSProperties = { height: '100%', width: '100%' }; const NodeEditorPanelGroup = () => { - const [isTopPanelCollapsed, setIsTopPanelCollapsed] = useState(false); - const [isBottomPanelCollapsed, setIsBottomPanelCollapsed] = useState(false); const panelGroupRef = useRef(null); const panelStorage = usePanelStorage(); const handleDoubleClickHandle = useCallback(() => { @@ -37,31 +35,14 @@ const NodeEditorPanelGroup = () => { style={panelGroupStyles} storage={panelStorage} > - + - + diff --git a/invokeai/frontend/web/src/features/ui/components/FloatingGalleryButton.tsx b/invokeai/frontend/web/src/features/ui/components/FloatingGalleryButton.tsx index 1c55e6efa5..df8087a498 100644 --- a/invokeai/frontend/web/src/features/ui/components/FloatingGalleryButton.tsx +++ b/invokeai/frontend/web/src/features/ui/components/FloatingGalleryButton.tsx @@ -1,27 +1,21 @@ import { Flex } from '@chakra-ui/layout'; import { Portal } from '@chakra-ui/portal'; import { InvIconButton } from 'common/components/InvIconButton/InvIconButton'; -import type { RefObject } from 'react'; -import { memo, useCallback } from 'react'; +import { memo } from 'react'; import { useTranslation } from 'react-i18next'; import { MdPhotoLibrary } from 'react-icons/md'; -import type { ImperativePanelHandle } from 'react-resizable-panels'; type Props = { isGalleryCollapsed: boolean; - galleryPanelRef: RefObject; + expandGallery: () => void; }; const FloatingGalleryButton = ({ isGalleryCollapsed, - galleryPanelRef, + expandGallery, }: Props) => { const { t } = useTranslation(); - const handleShowGallery = useCallback(() => { - galleryPanelRef.current?.expand(); - }, [galleryPanelRef]); - if (!isGalleryCollapsed) { return null; } @@ -38,7 +32,7 @@ const FloatingGalleryButton = ({ } p={0} px={3} diff --git a/invokeai/frontend/web/src/features/ui/components/InvokeTabs.tsx b/invokeai/frontend/web/src/features/ui/components/InvokeTabs.tsx index e4c7ad5f10..43f4ba14b9 100644 --- a/invokeai/frontend/web/src/features/ui/components/InvokeTabs.tsx +++ b/invokeai/frontend/web/src/features/ui/components/InvokeTabs.tsx @@ -95,13 +95,10 @@ const enabledTabsSelector = createMemoizedSelector( } ); -const SIDE_PANEL_MIN_SIZE_PX = 448; -const MAIN_PANEL_MIN_SIZE_PX = 448; -const GALLERY_PANEL_MIN_SIZE_PX = 360; - export const NO_GALLERY_TABS: InvokeTabName[] = ['modelManager', 'queue']; export const NO_SIDE_PANEL_TABS: InvokeTabName[] = ['modelManager', 'queue']; const panelStyles: CSSProperties = { height: '100%', width: '100%' }; +const GALLERY_MIN_SIZE_PCT = 20 const InvokeTabs = () => { const activeTabIndex = useAppSelector(activeTabIndexSelector); @@ -155,53 +152,18 @@ const InvokeTabs = () => { [dispatch, enabledTabs] ); - const { - isCollapsed: isSidePanelCollapsed, - expand: expandSidePanel, - collapse: collapseSidePanel, - toggle: toggleSidePanel, - } = usePanel(SIDE_PANEL_MIN_SIZE_PX, 'pixels'); - const { ref: galleryPanelRef, minSize: galleryPanelMinSize, isCollapsed: isGalleryPanelCollapsed, - setIsCollapsed: setIsGalleryPanelCollapsed, + onCollapse: onCollapseGalleryPanel, + onExpand: onExpandGalleryPanel, reset: resetGalleryPanel, expand: expandGalleryPanel, - collapse: collapseGalleryPanel, toggle: toggleGalleryPanel, - } = usePanel(GALLERY_PANEL_MIN_SIZE_PX, 'pixels'); + } = usePanel(GALLERY_MIN_SIZE_PCT); - useHotkeys( - 'f', - () => { - if (isGalleryPanelCollapsed || isSidePanelCollapsed) { - expandGalleryPanel(); - expandSidePanel(); - } else { - collapseSidePanel(); - collapseGalleryPanel(); - } - }, - [dispatch, isGalleryPanelCollapsed, isSidePanelCollapsed] - ); - - useHotkeys( - ['t', 'o'], - () => { - toggleSidePanel(); - }, - [dispatch] - ); - - useHotkeys( - 'g', - () => { - toggleGalleryPanel(); - }, - [dispatch] - ); + useHotkeys('g', toggleGalleryPanel, []); const panelStorage = usePanelStorage(); @@ -219,73 +181,47 @@ const InvokeTabs = () => { {tabs} - {!NO_SIDE_PANEL_TABS.includes(activeTabName) && ( - - {activeTabName === 'nodes' ? ( - - ) : ( - - )} - - )} - {/* {!NO_SIDE_PANEL_TABS.includes(activeTabName) && ( - <> - - {activeTabName === 'nodes' ? ( - - ) : ( - - )} - - - - - )} */} - - {tabPanels} + + + {!NO_SIDE_PANEL_TABS.includes(activeTabName) && ( + + {activeTabName === 'nodes' ? ( + + ) : ( + + )} + + )} + + {tabPanels} + + {!NO_GALLERY_TABS.includes(activeTabName) && ( <> - + )} diff --git a/invokeai/frontend/web/src/features/ui/components/tabs/ImageToImageTab.tsx b/invokeai/frontend/web/src/features/ui/components/tabs/ImageToImageTab.tsx index 0acd1e1034..332c25adce 100644 --- a/invokeai/frontend/web/src/features/ui/components/tabs/ImageToImageTab.tsx +++ b/invokeai/frontend/web/src/features/ui/components/tabs/ImageToImageTab.tsx @@ -36,7 +36,6 @@ const ImageToImageTab = () => { direction="horizontal" style={panelGroupStyles} storage={panelStorage} - units="percentages" > { +export const usePanel = (minSize: number) => { const ref = useRef(null); const [isCollapsed, setIsCollapsed] = useState(() => - Boolean(ref.current?.getCollapsed()) + Boolean(ref.current?.isCollapsed()) ); + const onCollapse = useCallback(() => { + setIsCollapsed(true); + }, []); + + const onExpand = useCallback(() => { + setIsCollapsed(false); + }, []); + const toggle = useCallback(() => { - if (ref.current?.getCollapsed()) { + if (ref.current?.isCollapsed()) { flushSync(() => { ref.current?.expand(); }); @@ -35,15 +47,16 @@ export const usePanel = (minSize: number, units: Units) => { const reset = useCallback(() => { flushSync(() => { - ref.current?.resize(minSize, units); + ref.current?.resize(minSize); }); - }, [minSize, units]); + }, [minSize]); return { ref, minSize, isCollapsed, - setIsCollapsed, + onCollapse, + onExpand, reset, toggle, expand,