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

Move full screen hotkey to floating to prevent tab rerenders

Browse Source
This commit is contained in:
blessedcoolant 2022-11-22 23:27:12 +13:00
parent a86049f822
commit 876ae7f70f
3 changed files with 71 additions and 87 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

61
frontend/src/features/tabs/components/FloatingGalleryButton.tsx
View File

@ -1,42 +1,21 @@
import { MdPhotoLibrary } from 'react-icons/md';
import { RootState, useAppDispatch, useAppSelector } from 'app/store';
import { useAppDispatch, useAppSelector } from 'app/store';
import IAIIconButton from 'common/components/IAIIconButton';
import {
GalleryState,
setShouldShowGallery,
} from 'features/gallery/store/gallerySlice';
import { setShouldShowGallery } from 'features/gallery/store/gallerySlice';
import { setDoesCanvasNeedScaling } from 'features/canvas/store/canvasSlice';
import { createSelector } from '@reduxjs/toolkit';
import { activeTabNameSelector } from 'features/options/store/optionsSelectors';
import _ from 'lodash';
const floatingGallerySelcetor = createSelector(
[(state: RootState) => state.gallery, activeTabNameSelector],
(gallery: GalleryState, activeTabName) => {
const { shouldShowGallery, shouldHoldGalleryOpen, shouldPinGallery } =
gallery;
const shouldShowGalleryButton =
!(shouldShowGallery || (shouldHoldGalleryOpen && !shouldPinGallery)) &&
['txt2img', 'img2img', 'unifiedCanvas'].includes(activeTabName);
return {
shouldPinGallery,
shouldShowGalleryButton,
};
},
{
memoizeOptions: {
resultEqualityCheck: _.isEqual,
},
}
);
import { useHotkeys } from 'react-hotkeys-hook';
import { floatingSelector } from './FloatingOptionsPanelButtons';
import { setShouldShowOptionsPanel } from 'features/options/store/optionsSlice';
const FloatingGalleryButton = () => {
const dispatch = useAppDispatch();
const { shouldShowGalleryButton, shouldPinGallery } = useAppSelector(
floatingGallerySelcetor
);
const {
shouldShowGallery,
shouldShowGalleryButton,
shouldPinGallery,
shouldShowOptionsPanel,
shouldPinOptionsPanel,
} = useAppSelector(floatingSelector);
const handleShowGallery = () => {
dispatch(setShouldShowGallery(true));
@ -45,6 +24,22 @@ const FloatingGalleryButton = () => {
}
};
useHotkeys(
'f',
() => {
if (shouldShowGallery || shouldShowOptionsPanel) {
dispatch(setShouldShowOptionsPanel(false));
dispatch(setShouldShowGallery(false));
} else {
dispatch(setShouldShowOptionsPanel(true));
dispatch(setShouldShowGallery(true));
}
if (shouldPinGallery || shouldPinOptionsPanel)
setTimeout(() => dispatch(setDoesCanvasNeedScaling(true)), 400);
},
[shouldShowGallery, shouldShowOptionsPanel]
);
return shouldShowGalleryButton ? (
<IAIIconButton
tooltip="Show Gallery (G)"

47
frontend/src/features/tabs/components/FloatingOptionsPanelButtons.tsx
View File

@ -11,27 +11,47 @@ import _ from 'lodash';
import { setDoesCanvasNeedScaling } from 'features/canvas/store/canvasSlice';
import { FaSlidersH } from 'react-icons/fa';
import { activeTabNameSelector } from 'features/options/store/optionsSelectors';
import { useHotkeys } from 'react-hotkeys-hook';
import {
GalleryState,
setShouldShowGallery,
} from 'features/gallery/store/gallerySlice';
const floatingOptionsSelector = createSelector(
[(state: RootState) => state.options, activeTabNameSelector],
(options: OptionsState, activeTabName) => {
export const floatingSelector = createSelector(
[
(state: RootState) => state.options,
(state: RootState) => state.gallery,
activeTabNameSelector,
],
(options: OptionsState, gallery: GalleryState, activeTabName) => {
const {
shouldPinOptionsPanel,
shouldShowOptionsPanel,
shouldHoldOptionsPanelOpen,
} = options;
const { shouldShowGallery, shouldPinGallery, shouldHoldGalleryOpen } =
gallery;
const shouldShowOptionsPanelButton =
!(
shouldShowOptionsPanel ||
(shouldHoldOptionsPanelOpen && !shouldPinOptionsPanel)
) && ['txt2img', 'img2img', 'unifiedCanvas'].includes(activeTabName);
const shouldShowGalleryButton =
!(shouldShowGallery || (shouldHoldGalleryOpen && !shouldPinGallery)) &&
['txt2img', 'img2img', 'unifiedCanvas'].includes(activeTabName);
return {
shouldPinOptionsPanel,
shouldShowProcessButtons:
!shouldPinOptionsPanel || !shouldShowOptionsPanel,
shouldShowOptionsPanelButton,
shouldShowOptionsPanel,
shouldShowGallery,
shouldPinGallery,
shouldShowGalleryButton,
};
},
{ memoizeOptions: { resultEqualityCheck: _.isEqual } }
@ -40,10 +60,13 @@ const floatingOptionsSelector = createSelector(
const FloatingOptionsPanelButtons = () => {
const dispatch = useAppDispatch();
const {
shouldShowOptionsPanel,
shouldShowOptionsPanelButton,
shouldShowProcessButtons,
shouldPinOptionsPanel,
} = useAppSelector(floatingOptionsSelector);
shouldShowGallery,
shouldPinGallery,
} = useAppSelector(floatingSelector);
const handleShowOptionsPanel = () => {
dispatch(setShouldShowOptionsPanel(true));
@ -52,6 +75,22 @@ const FloatingOptionsPanelButtons = () => {
}
};
useHotkeys(
'f',
() => {
if (shouldShowGallery || shouldShowOptionsPanel) {
dispatch(setShouldShowOptionsPanel(false));
dispatch(setShouldShowGallery(false));
} else {
dispatch(setShouldShowOptionsPanel(true));
dispatch(setShouldShowGallery(true));
}
if (shouldPinGallery || shouldPinOptionsPanel)
setTimeout(() => dispatch(setDoesCanvasNeedScaling(true)), 400);
},
[shouldShowGallery, shouldShowOptionsPanel]
);
return shouldShowOptionsPanelButton ? (
<div className="show-hide-button-options">
<IAIIconButton

50
frontend/src/features/tabs/components/InvokeTabs.tsx
View File

@ -10,22 +10,15 @@ import NodesIcon from 'common/icons/NodesIcon';
import PostprocessingIcon from 'common/icons/PostprocessingIcon';
import TextToImageIcon from 'common/icons/TextToImageIcon';
import {
OptionsState,
setActiveTab,
setIsLightBoxOpen,
setShouldShowOptionsPanel,
} from 'features/options/store/optionsSlice';
import ImageToImageWorkarea from './ImageToImage';
import TextToImageWorkarea from './TextToImage';
import Lightbox from 'features/lightbox/components/Lightbox';
import { setDoesCanvasNeedScaling } from 'features/canvas/store/canvasSlice';
import UnifiedCanvasWorkarea from './UnifiedCanvas/UnifiedCanvasWorkarea';
import {
GalleryState,
setShouldShowGallery,
} from 'features/gallery/store/gallerySlice';
import UnifiedCanvasIcon from 'common/icons/UnifiedCanvasIcon';
import { createSelector } from '@reduxjs/toolkit';
import TrainingWIP from 'common/components/WorkInProgress/Training';
import TrainingIcon from 'common/icons/TrainingIcon';
@ -69,26 +62,6 @@ export const tabMap = _.map(tabDict, (tab, key) => key);
const tabMapTypes = [...tabMap] as const;
export type InvokeTabName = typeof tabMapTypes[number];
const fullScreenSelector = createSelector(
[(state: RootState) => state.gallery, (state: RootState) => state.options],
(gallery: GalleryState, options: OptionsState) => {
const { shouldShowGallery, shouldPinGallery } = gallery;
const { shouldShowOptionsPanel, shouldPinOptionsPanel } = options;
return {
shouldShowGallery,
shouldPinGallery,
shouldShowOptionsPanel,
shouldPinOptionsPanel,
};
},
{
memoizeOptions: {
resultEqualityCheck: _.isEqual,
},
}
);
export default function InvokeTabs() {
const activeTab = useAppSelector(
(state: RootState) => state.options.activeTab
@ -97,13 +70,6 @@ export default function InvokeTabs() {
(state: RootState) => state.options.isLightBoxOpen
);
const {
shouldPinGallery,
shouldShowGallery,
shouldPinOptionsPanel,
shouldShowOptionsPanel,
} = useAppSelector(fullScreenSelector);
const dispatch = useAppDispatch();
useHotkeys('1', () => {
@ -139,22 +105,6 @@ export default function InvokeTabs() {
[isLightBoxOpen]
);
useHotkeys(
'f',
() => {
if (shouldShowGallery || shouldShowOptionsPanel) {
dispatch(setShouldShowOptionsPanel(false));
dispatch(setShouldShowGallery(false));
} else {
dispatch(setShouldShowOptionsPanel(true));
dispatch(setShouldShowGallery(true));
}
if (shouldPinGallery || shouldPinOptionsPanel)
setTimeout(() => dispatch(setDoesCanvasNeedScaling(true)), 400);
},
[shouldShowGallery, shouldShowOptionsPanel]
);
const renderTabs = () => {
const tabsToRender: ReactElement[] = [];
Object.keys(tabDict).forEach((key) => {