From f8ba86277431ba02c1582cb32907fa00c42aaed3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Arno=C5=A1t=20Pleskot?= <arnostpleskot@gmail.com>
Date: Sun, 3 Sep 2023 23:47:48 +0200
Subject: [PATCH] feat: set initial zoom to viewportZoomFactor when lockZoom is
 false

---
 src/components/App.tsx       | 44 +++++++++++++++++-------------------
 src/excalidraw-app/index.tsx |  2 +-
 2 files changed, 22 insertions(+), 24 deletions(-)

diff --git a/src/components/App.tsx b/src/components/App.tsx
index 2cc98c494a..78c723fa30 100644
--- a/src/components/App.tsx
+++ b/src/components/App.tsx
@@ -2050,14 +2050,16 @@ class App extends React.Component<AppProps, AppState> {
           scrollConstraints,
         });
 
+      const shouldAnimate =
+        isViewportOutsideOfConstrainedArea &&
+        this.state.cursorButton !== "down" &&
+        prevState.cursorButton === "down" &&
+        prevState.zoom.value === this.state.zoom.value &&
+        !this.state.isLoading; // Do not animate when app is initialized but scene is empty - it would cause flickering
+
       constraintedScrollState = this.handleConstrainedScrollStateChange({
         ...constrainedScrollValues,
-        shouldAnimate:
-          isViewportOutsideOfConstrainedArea &&
-          this.state.cursorButton !== "down" &&
-          prevState.cursorButton === "down" &&
-          prevState.zoom.value === this.state.zoom.value &&
-          elementsIncludingDeleted.length > 0, // Do not animate when app is initialized but scene is empty - this would cause flickering
+        shouldAnimate,
       });
     }
 
@@ -8313,16 +8315,13 @@ class App extends React.Component<AppProps, AppState> {
       return { scrollX, scrollY, zoom };
     }
 
-    const { zoomLevelX, zoomLevelY, maxZoomLevel } = this.calculateZoomLevel(
-      scrollConstraints,
-      width,
-      height,
-    );
+    const { zoomLevelX, zoomLevelY, initialZoomLevel } =
+      this.calculateZoomLevel(scrollConstraints, width, height);
 
     // The zoom level to contain the whole constrained area in view
     const _zoom = {
       value: getNormalizedZoom(
-        maxZoomLevel ?? Math.min(zoomLevelX, zoomLevelY),
+        initialZoomLevel ?? Math.min(zoomLevelX, zoomLevelY),
       ),
     };
 
@@ -8361,7 +8360,6 @@ class App extends React.Component<AppProps, AppState> {
   ) => {
     const DEFAULT_VIEWPORT_ZOOM_FACTOR = 0.7;
 
-    const lockZoom = scrollConstraints.lockZoom ?? false;
     const viewportZoomFactor = scrollConstraints.viewportZoomFactor
       ? Math.min(1, Math.max(scrollConstraints.viewportZoomFactor, 0.1))
       : DEFAULT_VIEWPORT_ZOOM_FACTOR;
@@ -8370,10 +8368,10 @@ class App extends React.Component<AppProps, AppState> {
     const scrollableHeight = scrollConstraints.height;
     const zoomLevelX = width / scrollableWidth;
     const zoomLevelY = height / scrollableHeight;
-    const maxZoomLevel = lockZoom
-      ? getNormalizedZoom(Math.min(zoomLevelX, zoomLevelY) * viewportZoomFactor)
-      : null;
-    return { zoomLevelX, zoomLevelY, maxZoomLevel };
+    const initialZoomLevel = getNormalizedZoom(
+      Math.min(zoomLevelX, zoomLevelY) * viewportZoomFactor,
+    );
+    return { zoomLevelX, zoomLevelY, initialZoomLevel };
   };
 
   private calculateConstraints = ({
@@ -8473,14 +8471,13 @@ class App extends React.Component<AppProps, AppState> {
       return { maxScrollX, minScrollX, maxScrollY, minScrollY };
     };
 
-    const { zoomLevelX, zoomLevelY, maxZoomLevel } = this.calculateZoomLevel(
-      scrollConstraints,
-      width,
-      height,
-    );
+    const { zoomLevelX, zoomLevelY, initialZoomLevel } =
+      this.calculateZoomLevel(scrollConstraints, width, height);
 
     const constrainedZoom = getNormalizedZoom(
-      maxZoomLevel ? Math.max(maxZoomLevel, zoom.value) : zoom.value,
+      scrollConstraints.lockZoom
+        ? Math.max(initialZoomLevel, zoom.value)
+        : zoom.value,
     );
     const { constrainedScrollCenterX, constrainedScrollCenterY } =
       calculateConstrainedScrollCenter(constrainedZoom);
@@ -8506,6 +8503,7 @@ class App extends React.Component<AppProps, AppState> {
       constrainedZoom: {
         value: constrainedZoom,
       },
+      initialZoomLevel,
     };
   };
 
diff --git a/src/excalidraw-app/index.tsx b/src/excalidraw-app/index.tsx
index b3952bf8b6..ce4af5e329 100644
--- a/src/excalidraw-app/index.tsx
+++ b/src/excalidraw-app/index.tsx
@@ -736,7 +736,7 @@ const ExcalidrawWrapper = () => {
           y: 0,
           width: 2560,
           height: 1300,
-          lockZoom: true,
+          lockZoom: false,
         }}
       >
         <AppMainMenu