From b3ced7900127bae0bc9e4378b4ffaa7a1027944e Mon Sep 17 00:00:00 2001
From: Kiet <31864905+Kitenite@users.noreply.github.com>
Date: Sun, 6 Oct 2024 18:07:05 -0400
Subject: [PATCH] [refactor] Move default position logic (#468)

* Move default position logic

---------

Co-authored-by: ahp64 <101662343+ahp64@users.noreply.github.com>
---
 app/src/lib/editor/engine/canvas/index.ts | 15 ++++++++++++++-
 app/src/routes/editor/Canvas/index.tsx    |  9 +--------
 2 files changed, 15 insertions(+), 9 deletions(-)

diff --git a/app/src/lib/editor/engine/canvas/index.ts b/app/src/lib/editor/engine/canvas/index.ts
index 89078086..a1881b94 100644
--- a/app/src/lib/editor/engine/canvas/index.ts
+++ b/app/src/lib/editor/engine/canvas/index.ts
@@ -19,6 +19,19 @@ export class CanvasManager {
     constructor(private projects: ProjectsManager) {
         makeAutoObservable(this);
         this.listenToProjectChange();
+        this.panPosition = this.getDefaultPanPosition();
+    }
+
+    getDefaultPanPosition(): RectPosition {
+        if (!window) {
+            return DefaultSettings.POSITION;
+        }
+
+        const x =
+            window.innerWidth / 2 - (DefaultSettings.FRAME_DIMENSION.width * this.zoomScale) / 2;
+        const y =
+            window.innerHeight / 2 - (DefaultSettings.FRAME_DIMENSION.height * this.zoomScale) / 2;
+        return { x, y };
     }
 
     listenToProjectChange() {
@@ -77,7 +90,7 @@ export class CanvasManager {
 
     async applySettings(project: Project) {
         this.zoomScale = project.settings?.scale || DefaultSettings.SCALE;
-        this.panPosition = project.settings?.position || DefaultSettings.POSITION;
+        this.panPosition = project.settings?.position || this.getDefaultPanPosition();
         this.webFrames =
             project.settings?.frames && project.settings.frames.length
                 ? project.settings.frames
diff --git a/app/src/routes/editor/Canvas/index.tsx b/app/src/routes/editor/Canvas/index.tsx
index 95d69497..748f3eba 100644
--- a/app/src/routes/editor/Canvas/index.tsx
+++ b/app/src/routes/editor/Canvas/index.tsx
@@ -19,14 +19,7 @@ const Canvas = observer(({ children }: { children: ReactNode }) => {
     const containerRef = useRef<HTMLDivElement>(null);
     const [isPanning, setIsPanning] = useState(false);
     const [scale, setScale] = useState(editorEngine.canvas.scale);
-
-    const x_number = window.innerWidth / 2 - (1536 * scale) / 2; // - webviewWidth;
-    const y_number = window.innerHeight / 2 - (960 * scale) / 2; // - webviewHeight;
-
-    const [position, setPosition] = useState<{ x: number; y: number }>({
-        x: x_number,
-        y: y_number,
-    });
+    const [position, setPosition] = useState(editorEngine.canvas.position);
 
     useEffect(() => {
         editorEngine.canvas.scale = scale;