diff --git a/frontend/src/app/store.ts b/frontend/src/app/store.ts index 5e8a4bc873..8bb9f87f6e 100644 --- a/frontend/src/app/store.ts +++ b/frontend/src/app/store.ts @@ -28,9 +28,11 @@ import { socketioMiddleware } from './socketio/middleware'; * The necesssary nested persistors with blacklists are configured below. */ -const canvasBlacklist = ['cursorPosition'].map( - (blacklistItem) => `canvas.${blacklistItem}` -); +const canvasBlacklist = [ + 'cursorPosition', + 'isCanvasInitialized', + 'doesCanvasNeedScaling', +].map((blacklistItem) => `canvas.${blacklistItem}`); const systemBlacklist = [ 'currentIteration', diff --git a/frontend/src/features/canvas/store/canvasSlice.ts b/frontend/src/features/canvas/store/canvasSlice.ts index c2470afa99..48c29f10e9 100644 --- a/frontend/src/features/canvas/store/canvasSlice.ts +++ b/frontend/src/features/canvas/store/canvasSlice.ts @@ -503,6 +503,7 @@ export const canvasSlice = createSlice({ state.stageScale = newScale; state.stageCoordinates = newCoordinates; + state.stageDimensions = newStageDimensions; state.boundingBoxCoordinates = { x: 0, y: 0 }; state.boundingBoxDimensions = { width: 512, height: 512 }; return; diff --git a/frontend/src/features/tabs/components/InvokeTabs.tsx b/frontend/src/features/tabs/components/InvokeTabs.tsx index 0959853436..8d6204edc1 100644 --- a/frontend/src/features/tabs/components/InvokeTabs.tsx +++ b/frontend/src/features/tabs/components/InvokeTabs.tsx @@ -16,7 +16,6 @@ import { 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 UnifiedCanvasIcon from 'common/icons/UnifiedCanvasIcon'; import TrainingWIP from 'common/components/WorkInProgress/Training'; @@ -143,7 +142,6 @@ export default function InvokeTabs() { index={activeTab} onChange={(index: number) => { dispatch(setActiveTab(index)); - dispatch(setDoesCanvasNeedScaling(true)); }} >
{renderTabs()}
diff --git a/frontend/src/features/tabs/components/UnifiedCanvas/UnifiedCanvasDisplay.tsx b/frontend/src/features/tabs/components/UnifiedCanvas/UnifiedCanvasDisplay.tsx index 2842df9157..8b845a4bb3 100644 --- a/frontend/src/features/tabs/components/UnifiedCanvas/UnifiedCanvasDisplay.tsx +++ b/frontend/src/features/tabs/components/UnifiedCanvas/UnifiedCanvasDisplay.tsx @@ -26,13 +26,18 @@ const selector = createSelector( const UnifiedCanvasDisplay = () => { const dispatch = useAppDispatch(); + const { doesCanvasNeedScaling } = useAppSelector(selector); useLayoutEffect(() => { + dispatch(setDoesCanvasNeedScaling(true)); + const resizeCallback = _.debounce(() => { dispatch(setDoesCanvasNeedScaling(true)); }, 250); + window.addEventListener('resize', resizeCallback); + return () => window.removeEventListener('resize', resizeCallback); }, [dispatch]); diff --git a/frontend/src/features/tabs/components/UnifiedCanvas/UnifiedCanvasWorkarea.tsx b/frontend/src/features/tabs/components/UnifiedCanvas/UnifiedCanvasWorkarea.tsx index 93db982f7f..45f0d026d1 100644 --- a/frontend/src/features/tabs/components/UnifiedCanvas/UnifiedCanvasWorkarea.tsx +++ b/frontend/src/features/tabs/components/UnifiedCanvas/UnifiedCanvasWorkarea.tsx @@ -1,15 +1,8 @@ import UnifiedCanvasPanel from './UnifiedCanvasPanel'; import UnifiedCanvasDisplay from './UnifiedCanvasDisplay'; 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() { - const dispatch = useAppDispatch(); - useEffect(() => { - dispatch(setDoesCanvasNeedScaling(true)); - }, [dispatch]); return ( }