From 3131edb2554c58cefe1012bd5f6651821ecedb82 Mon Sep 17 00:00:00 2001
From: psychedelicious <4822129+psychedelicious@users.noreply.github.com>
Date: Sat, 26 Nov 2022 20:50:07 +1100
Subject: [PATCH] Fixes canvas dimensions not setting on first load

---
 frontend/src/app/store.ts                                 | 8 +++++---
 frontend/src/features/canvas/store/canvasSlice.ts         | 1 +
 frontend/src/features/tabs/components/InvokeTabs.tsx      | 2 --
 .../components/UnifiedCanvas/UnifiedCanvasDisplay.tsx     | 5 +++++
 .../components/UnifiedCanvas/UnifiedCanvasWorkarea.tsx    | 7 -------
 5 files changed, 11 insertions(+), 12 deletions(-)

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));
       }}
     >
       <div className="app-tabs-list">{renderTabs()}</div>
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 (
     <InvokeWorkarea
       optionsPanel={<UnifiedCanvasPanel />}