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

Stops unnecessary canvas rescales on gallery state change

Browse Source
This commit is contained in:
psychedelicious 2022-11-17 19:12:49 +11:00 committed by blessedcoolant
parent 432dc704a6
commit 0100a63b59
2 changed files with 14 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
frontend/src/features/gallery/ImageGallery.tsx
View File

@ -1,7 +1,13 @@
import { Button } from '@chakra-ui/button'; import { Button } from '@chakra-ui/button';
import { NumberSize, Resizable } from 're-resizable'; import { NumberSize, Resizable } from 're-resizable';
import { ChangeEvent, useEffect, useRef, useState } from 'react'; import {
ChangeEvent,
useEffect,
useLayoutEffect,
useRef,
useState,
} from 'react';
import { useHotkeys } from 'react-hotkeys-hook'; import { useHotkeys } from 'react-hotkeys-hook';
import { MdPhotoLibrary } from 'react-icons/md'; import { MdPhotoLibrary } from 'react-icons/md';
import { BsPinAngle, BsPinAngleFill } from 'react-icons/bs'; import { BsPinAngle, BsPinAngleFill } from 'react-icons/bs';
@ -66,7 +72,7 @@ export default function ImageGallery() {
galleryWidth >= GALLERY_SHOW_BUTTONS_MIN_WIDTH galleryWidth >= GALLERY_SHOW_BUTTONS_MIN_WIDTH
); );
useEffect(() => { useLayoutEffect(() => {
if (!shouldPinGallery) return; if (!shouldPinGallery) return;
if (isLightBoxOpen) { if (isLightBoxOpen) {
@ -91,10 +97,9 @@ export default function ImageGallery() {
); );
setGalleryMaxWidth(590); setGalleryMaxWidth(590);
} }
setTimeout(() => dispatch(setDoesCanvasNeedScaling(true)), 400);
}, [dispatch, activeTabName, shouldPinGallery, galleryWidth, isLightBoxOpen]); }, [dispatch, activeTabName, shouldPinGallery, galleryWidth, isLightBoxOpen]);
useEffect(() => { useLayoutEffect(() => {
if (!shouldPinGallery) { if (!shouldPinGallery) {
setGalleryMaxWidth(window.innerWidth); setGalleryMaxWidth(window.innerWidth);
} }
@ -119,7 +124,6 @@ export default function ImageGallery() {
}; };
const handleCloseGallery = () => { const handleCloseGallery = () => {
// if (shouldPinGallery) return;
dispatch(setShouldShowGallery(false)); dispatch(setShouldShowGallery(false));
dispatch( dispatch(
setGalleryScrollPosition( setGalleryScrollPosition(
@ -127,7 +131,6 @@ export default function ImageGallery() {
) )
); );
dispatch(setShouldHoldGalleryOpen(false)); dispatch(setShouldHoldGalleryOpen(false));
// dispatch(setDoesCanvasNeedScaling(true));
}; };
const handleClickLoadMore = () => { const handleClickLoadMore = () => {
@ -151,8 +154,6 @@ export default function ImageGallery() {
'g', 'g',
() => { () => {
handleToggleGallery(); handleToggleGallery();
shouldPinGallery &&
setTimeout(() => dispatch(setDoesCanvasNeedScaling(true)), 400);
}, },
[shouldShowGallery, shouldPinGallery] [shouldShowGallery, shouldPinGallery]
); );
@ -169,7 +170,6 @@ export default function ImageGallery() {
'shift+g', 'shift+g',
() => { () => {
handleSetShouldPinGallery(); handleSetShouldPinGallery();
dispatch(setDoesCanvasNeedScaling(true));
}, },
[shouldPinGallery] [shouldPinGallery]
); );

16
frontend/src/features/tabs/UnifiedCanvas/UnifiedCanvasDisplay.tsx
View File

@ -12,13 +12,9 @@ import { canvasSelector } from 'features/canvas/store/canvasSelectors';
const selector = createSelector( const selector = createSelector(
[canvasSelector], [canvasSelector],
(canvas) => { (canvas) => {
const { const { doesCanvasNeedScaling } = canvas;
doesCanvasNeedScaling,
layerState: { objects },
} = canvas;
return { return {
doesCanvasNeedScaling, doesCanvasNeedScaling,
doesOutpaintingHaveObjects: objects.length > 0,
}; };
}, },
{ {
@ -30,14 +26,12 @@ const selector = createSelector(
const UnifiedCanvasDisplay = () => { const UnifiedCanvasDisplay = () => {
const dispatch = useAppDispatch(); const dispatch = useAppDispatch();
const { doesCanvasNeedScaling, doesOutpaintingHaveObjects } = const { doesCanvasNeedScaling } = useAppSelector(selector);
useAppSelector(selector);
useLayoutEffect(() => { useLayoutEffect(() => {
const resizeCallback = _.debounce( const resizeCallback = _.debounce(() => {
() => dispatch(setDoesCanvasNeedScaling(true)), dispatch(setDoesCanvasNeedScaling(true));
250 }, 250);
);
window.addEventListener('resize', resizeCallback); window.addEventListener('resize', resizeCallback);
return () => window.removeEventListener('resize', resizeCallback); return () => window.removeEventListener('resize', resizeCallback);
}, [dispatch]); }, [dispatch]);