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

Fixes canvas dimensions not setting on first load

Browse Source
This commit is contained in:
psychedelicious 2022-11-26 20:50:07 +11:00 committed by blessedcoolant
parent b0697bc4ff
commit 3131edb255
5 changed files with 11 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
frontend/src/app/store.ts
View File

@ -28,9 +28,11 @@ import { socketioMiddleware } from './socketio/middleware';
* The necesssary nested persistors with blacklists are configured below. * The necesssary nested persistors with blacklists are configured below.
*/ */
const canvasBlacklist = ['cursorPosition'].map( const canvasBlacklist = [
(blacklistItem) => `canvas.${blacklistItem}` 'cursorPosition',
); 'isCanvasInitialized',
'doesCanvasNeedScaling',
].map((blacklistItem) => `canvas.${blacklistItem}`);
const systemBlacklist = [ const systemBlacklist = [
'currentIteration', 'currentIteration',

1
frontend/src/features/canvas/store/canvasSlice.ts
View File

@ -503,6 +503,7 @@ export const canvasSlice = createSlice({
state.stageScale = newScale; state.stageScale = newScale;
state.stageCoordinates = newCoordinates; state.stageCoordinates = newCoordinates;
state.stageDimensions = newStageDimensions;
state.boundingBoxCoordinates = { x: 0, y: 0 }; state.boundingBoxCoordinates = { x: 0, y: 0 };
state.boundingBoxDimensions = { width: 512, height: 512 }; state.boundingBoxDimensions = { width: 512, height: 512 };
return; return;

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

@ -16,7 +16,6 @@ import {
import ImageToImageWorkarea from './ImageToImage'; import ImageToImageWorkarea from './ImageToImage';
import TextToImageWorkarea from './TextToImage'; import TextToImageWorkarea from './TextToImage';
import Lightbox from 'features/lightbox/components/Lightbox'; import Lightbox from 'features/lightbox/components/Lightbox';
import { setDoesCanvasNeedScaling } from 'features/canvas/store/canvasSlice';
import UnifiedCanvasWorkarea from './UnifiedCanvas/UnifiedCanvasWorkarea'; import UnifiedCanvasWorkarea from './UnifiedCanvas/UnifiedCanvasWorkarea';
import UnifiedCanvasIcon from 'common/icons/UnifiedCanvasIcon'; import UnifiedCanvasIcon from 'common/icons/UnifiedCanvasIcon';
import TrainingWIP from 'common/components/WorkInProgress/Training'; import TrainingWIP from 'common/components/WorkInProgress/Training';
@ -143,7 +142,6 @@ export default function InvokeTabs() {
index={activeTab} index={activeTab}
onChange={(index: number) => { onChange={(index: number) => {
dispatch(setActiveTab(index)); dispatch(setActiveTab(index));
dispatch(setDoesCanvasNeedScaling(true));
}} }}
> >
<div className="app-tabs-list">{renderTabs()}</div> <div className="app-tabs-list">{renderTabs()}</div>

5
frontend/src/features/tabs/components/UnifiedCanvas/UnifiedCanvasDisplay.tsx
View File

@ -26,13 +26,18 @@ const selector = createSelector(
const UnifiedCanvasDisplay = () => { const UnifiedCanvasDisplay = () => {
const dispatch = useAppDispatch(); const dispatch = useAppDispatch();
const { doesCanvasNeedScaling } = useAppSelector(selector); const { doesCanvasNeedScaling } = useAppSelector(selector);
useLayoutEffect(() => { useLayoutEffect(() => {
dispatch(setDoesCanvasNeedScaling(true));
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]);

7
frontend/src/features/tabs/components/UnifiedCanvas/UnifiedCanvasWorkarea.tsx
View File

@ -1,15 +1,8 @@
import UnifiedCanvasPanel from './UnifiedCanvasPanel'; import UnifiedCanvasPanel from './UnifiedCanvasPanel';
import UnifiedCanvasDisplay from './UnifiedCanvasDisplay'; import UnifiedCanvasDisplay from './UnifiedCanvasDisplay';
import InvokeWorkarea from 'features/tabs/components/InvokeWorkarea'; import InvokeWorkarea from 'features/tabs/components/InvokeWorkarea';
import { useAppDispatch } from 'app/store';
import { useEffect } from 'react';
import { setDoesCanvasNeedScaling } from 'features/canvas/store/canvasSlice';
export default function UnifiedCanvasWorkarea() { export default function UnifiedCanvasWorkarea() {
const dispatch = useAppDispatch();
useEffect(() => {
dispatch(setDoesCanvasNeedScaling(true));
}, [dispatch]);
return ( return (
<InvokeWorkarea <InvokeWorkarea
optionsPanel={<UnifiedCanvasPanel />} optionsPanel={<UnifiedCanvasPanel />}