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

fix(ui): rescale canvas on gallery resize

Browse Source
This commit is contained in:
psychedelicious 2023-05-11 11:24:00 +10:00
parent 8ef49c2640
commit 54b65f725f
1 changed files with 13 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
invokeai/frontend/web/src/features/ui/components/InvokeTabs.tsx
View File

@ -13,11 +13,14 @@ import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
import { setIsLightboxOpen } from 'features/lightbox/store/lightboxSlice'; import { setIsLightboxOpen } from 'features/lightbox/store/lightboxSlice';
import { InvokeTabName } from 'features/ui/store/tabMap'; import { InvokeTabName } from 'features/ui/store/tabMap';
import { setActiveTab, togglePanels } from 'features/ui/store/uiSlice'; import { setActiveTab, togglePanels } from 'features/ui/store/uiSlice';
import { memo, ReactNode, useMemo } from 'react'; import { memo, ReactNode, useCallback, useMemo } from 'react';
import { useHotkeys } from 'react-hotkeys-hook'; import { useHotkeys } from 'react-hotkeys-hook';
import { MdDeviceHub, MdGridOn } from 'react-icons/md'; import { MdDeviceHub, MdGridOn } from 'react-icons/md';
import { GoTextSize } from 'react-icons/go'; import { GoTextSize } from 'react-icons/go';
import { activeTabIndexSelector } from '../store/uiSelectors'; import {
activeTabIndexSelector,
activeTabNameSelector,
} from '../store/uiSelectors';
import { useTranslation } from 'react-i18next'; import { useTranslation } from 'react-i18next';
import { ResourceKey } from 'i18next'; import { ResourceKey } from 'i18next';
import { requestCanvasRescale } from 'features/canvas/store/thunks/requestCanvasScale'; import { requestCanvasRescale } from 'features/canvas/store/thunks/requestCanvasScale';
@ -76,6 +79,7 @@ const enabledTabsSelector = createSelector(
const InvokeTabs = () => { const InvokeTabs = () => {
const activeTab = useAppSelector(activeTabIndexSelector); const activeTab = useAppSelector(activeTabIndexSelector);
const activeTabName = useAppSelector(activeTabNameSelector);
const enabledTabs = useAppSelector(enabledTabsSelector); const enabledTabs = useAppSelector(enabledTabsSelector);
const isLightBoxOpen = useAppSelector( const isLightBoxOpen = useAppSelector(
(state: RootState) => state.lightbox.isLightboxOpen (state: RootState) => state.lightbox.isLightboxOpen
@ -107,6 +111,12 @@ const InvokeTabs = () => {
[shouldPinGallery, shouldPinParametersPanel] [shouldPinGallery, shouldPinParametersPanel]
); );
const handleResizeGallery = useCallback(() => {
if (activeTabName === 'unifiedCanvas') {
dispatch(requestCanvasRescale());
}
}, [dispatch, activeTabName]);
const tabs = useMemo( const tabs = useMemo(
() => () =>
enabledTabs.map((tab) => ( enabledTabs.map((tab) => (
@ -167,6 +177,7 @@ const InvokeTabs = () => {
<> <>
<ResizeHandle /> <ResizeHandle />
<Panel <Panel
onResize={handleResizeGallery}
id="gallery" id="gallery"
order={3} order={3}
defaultSize={10} defaultSize={10}