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 { 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 { MdPhotoLibrary } from 'react-icons/md';
import { BsPinAngle, BsPinAngleFill } from 'react-icons/bs';
@ -66,7 +72,7 @@ export default function ImageGallery() {
galleryWidth >= GALLERY_SHOW_BUTTONS_MIN_WIDTH
);
useEffect(() => {
useLayoutEffect(() => {
if (!shouldPinGallery) return;
if (isLightBoxOpen) {
@ -91,10 +97,9 @@ export default function ImageGallery() {
);
setGalleryMaxWidth(590);
}
setTimeout(() => dispatch(setDoesCanvasNeedScaling(true)), 400);
}, [dispatch, activeTabName, shouldPinGallery, galleryWidth, isLightBoxOpen]);
useEffect(() => {
useLayoutEffect(() => {
if (!shouldPinGallery) {
setGalleryMaxWidth(window.innerWidth);
}
@ -119,7 +124,6 @@ export default function ImageGallery() {
};
const handleCloseGallery = () => {
// if (shouldPinGallery) return;
dispatch(setShouldShowGallery(false));
dispatch(
setGalleryScrollPosition(
@ -127,7 +131,6 @@ export default function ImageGallery() {
)
);
dispatch(setShouldHoldGalleryOpen(false));
// dispatch(setDoesCanvasNeedScaling(true));
};
const handleClickLoadMore = () => {
@ -151,8 +154,6 @@ export default function ImageGallery() {
'g',
() => {
handleToggleGallery();
shouldPinGallery &&
setTimeout(() => dispatch(setDoesCanvasNeedScaling(true)), 400);
},
[shouldShowGallery, shouldPinGallery]
);
@ -169,7 +170,6 @@ export default function ImageGallery() {
'shift+g',
() => {
handleSetShouldPinGallery();
dispatch(setDoesCanvasNeedScaling(true));
},
[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(
[canvasSelector],
(canvas) => {
const {
doesCanvasNeedScaling,
layerState: { objects },
} = canvas;
const { doesCanvasNeedScaling } = canvas;
return {
doesCanvasNeedScaling,
doesOutpaintingHaveObjects: objects.length > 0,
};
},
{
@ -30,14 +26,12 @@ const selector = createSelector(
const UnifiedCanvasDisplay = () => {
const dispatch = useAppDispatch();
const { doesCanvasNeedScaling, doesOutpaintingHaveObjects } =
useAppSelector(selector);
const { doesCanvasNeedScaling } = useAppSelector(selector);
useLayoutEffect(() => {
const resizeCallback = _.debounce(
() => dispatch(setDoesCanvasNeedScaling(true)),
250
);
const resizeCallback = _.debounce(() => {
dispatch(setDoesCanvasNeedScaling(true));
}, 250);
window.addEventListener('resize', resizeCallback);
return () => window.removeEventListener('resize', resizeCallback);
}, [dispatch]);