From 70e67c45dd07b7c0d89cf1e0538b9db8821166b9 Mon Sep 17 00:00:00 2001
From: psychedelicious <4822129+psychedelicious@users.noreply.github.com>
Date: Fri, 18 Nov 2022 15:28:48 +1100
Subject: [PATCH] Fixes canvas showing spinner on first load

Also adds good default canvas scale and positioning when no image is on it
---
 .../canvas/components/IAICanvasResizer.tsx    |  2 --
 .../src/features/canvas/store/canvasSlice.ts  | 35 +++++++++++++++++--
 .../src/features/canvas/util/constants.ts     | 16 ++++-----
 3 files changed, 40 insertions(+), 13 deletions(-)

diff --git a/frontend/src/features/canvas/components/IAICanvasResizer.tsx b/frontend/src/features/canvas/components/IAICanvasResizer.tsx
index b9bea759bf..a44c9ca414 100644
--- a/frontend/src/features/canvas/components/IAICanvasResizer.tsx
+++ b/frontend/src/features/canvas/components/IAICanvasResizer.tsx
@@ -46,8 +46,6 @@ const IAICanvasResizer = () => {
 
       const { clientWidth, clientHeight } = ref.current;
 
-      if (!initialCanvasImage?.image) return;
-
       dispatch(
         setCanvasContainerDimensions({
           width: clientWidth,
diff --git a/frontend/src/features/canvas/store/canvasSlice.ts b/frontend/src/features/canvas/store/canvasSlice.ts
index a1bdf5a2b5..ad4496de35 100644
--- a/frontend/src/features/canvas/store/canvasSlice.ts
+++ b/frontend/src/features/canvas/store/canvasSlice.ts
@@ -24,6 +24,7 @@ import {
   isCanvasMaskLine,
 } from './canvasTypes';
 import roundDimensionsTo64 from '../util/roundDimensionsTo64';
+import { STAGE_PADDING_PERCENTAGE } from '../util/constants';
 
 export const initialLayerState: CanvasLayerState = {
   objects: [],
@@ -410,10 +411,39 @@ export const canvasSlice = createSlice({
       const { width: containerWidth, height: containerHeight } =
         state.canvasContainerDimensions;
 
-      state.stageDimensions = {
+      const initialCanvasImage =
+        state.layerState.objects.find(isCanvasBaseImage);
+
+      const newStageDimensions = {
         width: Math.floor(containerWidth),
         height: Math.floor(containerHeight),
       };
+
+      if (!initialCanvasImage) {
+        const newScale = calculateScale(
+          newStageDimensions.width,
+          newStageDimensions.height,
+          512,
+          512,
+          STAGE_PADDING_PERCENTAGE
+        );
+
+        const newCoordinates = calculateCoordinates(
+          newStageDimensions.width,
+          newStageDimensions.height,
+          0,
+          0,
+          512,
+          512,
+          newScale
+        );
+
+        state.stageScale = newScale;
+
+        state.stageCoordinates = newCoordinates;
+      }
+
+      state.stageDimensions = newStageDimensions;
     },
     resetCanvasView: (
       state,
@@ -433,13 +463,12 @@ export const canvasSlice = createSlice({
 
       const { x, y, width, height } = contentRect;
 
-      const padding = 0.95;
       const newScale = calculateScale(
         stageWidth,
         stageHeight,
         width,
         height,
-        padding
+        STAGE_PADDING_PERCENTAGE
       );
 
       const newCoordinates = calculateCoordinates(
diff --git a/frontend/src/features/canvas/util/constants.ts b/frontend/src/features/canvas/util/constants.ts
index 59a9a46d71..10b27c82d1 100644
--- a/frontend/src/features/canvas/util/constants.ts
+++ b/frontend/src/features/canvas/util/constants.ts
@@ -1,14 +1,14 @@
-// widths of ants-style bounding box outline
-export const DASH_WIDTH = 4;
-
-// speed of marching ants (lower is faster)
-export const MARCHING_ANTS_SPEED = 30;
-
 // bounding box anchor size
 export const TRANSFORMER_ANCHOR_SIZE = 15;
 
+// canvas wheel zoom exponential scale factor
 export const CANVAS_SCALE_BY = 0.999;
 
-export const MIN_CANVAS_SCALE = 0.1
+// minimum (furthest-zoomed-out) scale
+export const MIN_CANVAS_SCALE = 0.1;
 
-export const MAX_CANVAS_SCALE = 20
\ No newline at end of file
+// maximum (furthest-zoomed-in) scale
+export const MAX_CANVAS_SCALE = 20;
+
+// padding given to initial image/bounding box when stage view is reset
+export const STAGE_PADDING_PERCENTAGE = 0.95;