From 75f8e904cc2690bd1fa5aa8f75756edea62e6343 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Arno=C5=A1t=20Pleskot?= <arnostpleskot@gmail.com>
Date: Fri, 30 Jun 2023 01:27:53 +0200
Subject: [PATCH 01/57] feat: add possibility to limit scroll area

---
 src/appState.ts        |  2 +
 src/components/App.tsx | 92 +++++++++++++++++++++++++++++++++++++++++-
 src/types.ts           |  7 ++++
 3 files changed, 99 insertions(+), 2 deletions(-)

diff --git a/src/appState.ts b/src/appState.ts
index 104fbcbf5..64059c001 100644
--- a/src/appState.ts
+++ b/src/appState.ts
@@ -98,6 +98,7 @@ export const getDefaultAppState = (): Omit<
     pendingImageElementId: null,
     showHyperlinkPopup: false,
     selectedLinearElement: null,
+    scrollConstraints: null,
   };
 };
 
@@ -204,6 +205,7 @@ const APP_STATE_STORAGE_CONF = (<
   pendingImageElementId: { browser: false, export: false, server: false },
   showHyperlinkPopup: { browser: false, export: false, server: false },
   selectedLinearElement: { browser: true, export: false, server: false },
+  scrollConstraints: { browser: true, export: false, server: false },
 });
 
 const _clearAppStateForStorage = <
diff --git a/src/components/App.tsx b/src/components/App.tsx
index 7f747dbd4..2fab4122d 100644
--- a/src/components/App.tsx
+++ b/src/components/App.tsx
@@ -506,6 +506,7 @@ class App extends React.Component<AppProps, AppState> {
         resetCursor: this.resetCursor,
         updateFrameRendering: this.updateFrameRendering,
         toggleSidebar: this.toggleSidebar,
+        setScrollConstraints: this.setScrollConstraints,
       } as const;
       if (typeof excalidrawRef === "function") {
         excalidrawRef(api);
@@ -1728,7 +1729,8 @@ class App extends React.Component<AppProps, AppState> {
           }
           const scrolledOutside =
             // hide when editing text
-            isTextElement(this.state.editingElement)
+            isTextElement(this.state.editingElement) ||
+            this.state.scrollConstraints
               ? false
               : !atLeastOneVisibleElement && renderingElements.length > 0;
           if (this.state.scrolledOutside !== scrolledOutside) {
@@ -2369,7 +2371,25 @@ class App extends React.Component<AppProps, AppState> {
     state,
   ) => {
     this.cancelInProgresAnimation?.();
-    this.setState(state);
+
+    // When there are no scroll constraints, update the state directly
+    if (!this.state.scrollConstraints) {
+      this.setState(state);
+    }
+
+    // If state is a function, we generate the new state and then apply scroll constraints
+    if (typeof state === "function") {
+      this.setState((prevState, props) => {
+        // Generate new state
+        const newState = state(prevState, props);
+
+        // Apply scroll constraints to the new state
+        return this.constrainScroll(newState);
+      });
+    } else {
+      // If state is not a function, apply scroll constraints directly before updating the state
+      this.setState(this.constrainScroll(state));
+    }
   };
 
   setToast = (
@@ -7607,6 +7627,74 @@ class App extends React.Component<AppProps, AppState> {
     await setLanguage(currentLang);
     this.setAppState({});
   }
+
+  /**
+   * Sets the scroll constraints of the application state.
+   *
+   * @param scrollConstraints - The new scroll constraints.
+   */
+  public setScrollConstraints = (
+    scrollConstraints: AppState["scrollConstraints"],
+  ) => {
+    this.setState({
+      scrollConstraints,
+    });
+  };
+
+  /**
+   * Constrains the scroll position of the app state within the defined scroll constraints.
+   * The scroll position is adjusted based on the application's current state including zoom level and viewport dimensions.
+   *
+   * @param nextState - The next state of the application, or a subset of the application state.
+   * @returns The modified next state with scrollX and scrollY constrained to the scroll constraints.
+   */
+  private constrainScroll = <K extends keyof AppState>(
+    nextState: AppState | Pick<AppState, K> | null,
+  ) => {
+    const { scrollX, scrollY, scrollConstraints, width, height, zoom } =
+      this.state;
+
+    // When no scroll constraints are set, return the nextState as is
+    if (!scrollConstraints || !nextState) {
+      return nextState;
+    }
+
+    // Calculate scaled width and height
+    const scaledWidth = width / zoom.value;
+    const scaledHeight = height / zoom.value;
+
+    // Set default constrainedScrollX and constrainedScrollY values
+    let constrainedScrollX = scrollX;
+    let constrainedScrollY = scrollY;
+
+    // If scrollX is part of the nextState, constrain it within the scroll constraints
+    if ("scrollX" in nextState) {
+      constrainedScrollX = Math.min(
+        scrollConstraints.x,
+        Math.max(
+          nextState.scrollX,
+          scrollConstraints.x - scrollConstraints.width + scaledWidth,
+        ),
+      );
+    }
+
+    // If scrollY is part of the nextState, constrain it within the scroll constraints
+    if ("scrollY" in nextState) {
+      constrainedScrollY = Math.min(
+        scrollConstraints.y,
+        Math.max(
+          nextState.scrollY,
+          scrollConstraints.y - scrollConstraints.height + scaledHeight,
+        ),
+      );
+    }
+
+    return {
+      ...nextState,
+      scrollX: constrainedScrollX,
+      scrollY: constrainedScrollY,
+    };
+  };
 }
 
 // -----------------------------------------------------------------------------
diff --git a/src/types.ts b/src/types.ts
index 40f54831d..86cc9c412 100644
--- a/src/types.ts
+++ b/src/types.ts
@@ -223,6 +223,12 @@ export type AppState = {
   pendingImageElementId: ExcalidrawImageElement["id"] | null;
   showHyperlinkPopup: false | "info" | "editor";
   selectedLinearElement: LinearElementEditor | null;
+  scrollConstraints: {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+  } | null;
 };
 
 export type UIAppState = Omit<
@@ -549,6 +555,7 @@ export type ExcalidrawImperativeAPI = {
    * used in conjunction with view mode (props.viewModeEnabled).
    */
   updateFrameRendering: InstanceType<typeof App>["updateFrameRendering"];
+  setScrollConstraints: InstanceType<typeof App>["setScrollConstraints"];
 };
 
 export type Device = Readonly<{

From a8158691b799df433e092c2eed4c3c3d797b5cb5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Arno=C5=A1t=20Pleskot?= <arnostpleskot@gmail.com>
Date: Fri, 30 Jun 2023 17:24:20 +0200
Subject: [PATCH 02/57] feat: limit zoom by translateCanvas

---
 src/components/App.tsx | 35 +++++++++++++++++++++++++----------
 1 file changed, 25 insertions(+), 10 deletions(-)

diff --git a/src/components/App.tsx b/src/components/App.tsx
index 2fab4122d..71af8ddd4 100644
--- a/src/components/App.tsx
+++ b/src/components/App.tsx
@@ -2249,16 +2249,18 @@ class App extends React.Component<AppProps, AppState> {
     /** decimal fraction between 0.1 (10% zoom) and 30 (3000% zoom) */
     value: number,
   ) => {
-    this.setState({
-      ...getStateForZoom(
-        {
-          viewportX: this.state.width / 2 + this.state.offsetLeft,
-          viewportY: this.state.height / 2 + this.state.offsetTop,
-          nextZoom: getNormalizedZoom(value),
-        },
-        this.state,
-      ),
-    });
+    this.setState(
+      this.constrainScroll({
+        ...getStateForZoom(
+          {
+            viewportX: this.state.width / 2 + this.state.offsetLeft,
+            viewportY: this.state.height / 2 + this.state.offsetTop,
+            nextZoom: getNormalizedZoom(value),
+          },
+          this.state,
+        ),
+      }),
+    );
   };
 
   private cancelInProgresAnimation: (() => void) | null = null;
@@ -7663,9 +7665,13 @@ class App extends React.Component<AppProps, AppState> {
     const scaledWidth = width / zoom.value;
     const scaledHeight = height / zoom.value;
 
+    const maxZoomX = width / scrollConstraints.width;
+    const maxZoomY = height / scrollConstraints.height;
+
     // Set default constrainedScrollX and constrainedScrollY values
     let constrainedScrollX = scrollX;
     let constrainedScrollY = scrollY;
+    let constrainedZoom = zoom;
 
     // If scrollX is part of the nextState, constrain it within the scroll constraints
     if ("scrollX" in nextState) {
@@ -7689,10 +7695,19 @@ class App extends React.Component<AppProps, AppState> {
       );
     }
 
+    // If zoom is part of the nextState, constrain it within the scroll constraints
+    if ("zoom" in nextState) {
+      const zoomLimit = Math.min(maxZoomX, maxZoomY);
+      constrainedZoom = {
+        value: getNormalizedZoom(Math.max(nextState.zoom.value, zoomLimit)),
+      };
+    }
+
     return {
       ...nextState,
       scrollX: constrainedScrollX,
       scrollY: constrainedScrollY,
+      zoom: constrainedZoom,
     };
   };
 }

From 209934c90a3fd4be7fb6c667d8754e3814105b26 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Arno=C5=A1t=20Pleskot?= <arnostpleskot@gmail.com>
Date: Mon, 3 Jul 2023 22:34:26 +0200
Subject: [PATCH 03/57] feat: center constrained area on zoom out

---
 src/components/App.tsx | 43 +++++++++++++++++++++++++++++++++---------
 1 file changed, 34 insertions(+), 9 deletions(-)

diff --git a/src/components/App.tsx b/src/components/App.tsx
index 71af8ddd4..27da3e8be 100644
--- a/src/components/App.tsx
+++ b/src/components/App.tsx
@@ -7640,6 +7640,7 @@ class App extends React.Component<AppProps, AppState> {
   ) => {
     this.setState({
       scrollConstraints,
+      viewModeEnabled: !!scrollConstraints,
     });
   };
 
@@ -7661,25 +7662,42 @@ class App extends React.Component<AppProps, AppState> {
       return nextState;
     }
 
-    // Calculate scaled width and height
-    const scaledWidth = width / zoom.value;
-    const scaledHeight = height / zoom.value;
-
+    // Calculate maximum zoom for both X and Y axis based on width and height of viewport and scrollable area
     const maxZoomX = width / scrollConstraints.width;
     const maxZoomY = height / scrollConstraints.height;
 
+    // The smallest zoom out of maxZoomX and maxZoomY is our zoom limit
+    const zoomLimit = Math.min(maxZoomX, maxZoomY);
+
     // Set default constrainedScrollX and constrainedScrollY values
     let constrainedScrollX = scrollX;
     let constrainedScrollY = scrollY;
     let constrainedZoom = zoom;
 
+    // Function to adjust scroll position for centered view depending on the zoom value
+    const adjustScrollForCenteredView = (zoomValue: number) => {
+      // If zoom value is less than or equal to maxZoomX, adjust scrollX to ensure the view is centered on the X axis
+      if (zoomValue <= maxZoomX) {
+        const centeredScrollX =
+          (scrollConstraints.width - width / zoomValue) / -2;
+        constrainedScrollX = scrollConstraints.x + centeredScrollX;
+      }
+
+      // If zoom value is less than or equal to maxZoomY, adjust scrollY to ensure the view is centered on the Y axis
+      if (zoomValue <= maxZoomY) {
+        const centeredScrollY =
+          (scrollConstraints.height - height / zoomValue) / -2;
+        constrainedScrollY = scrollConstraints.y + centeredScrollY;
+      }
+    };
+
     // If scrollX is part of the nextState, constrain it within the scroll constraints
     if ("scrollX" in nextState) {
       constrainedScrollX = Math.min(
         scrollConstraints.x,
         Math.max(
           nextState.scrollX,
-          scrollConstraints.x - scrollConstraints.width + scaledWidth,
+          scrollConstraints.x - scrollConstraints.width + width / zoom.value,
         ),
       );
     }
@@ -7690,19 +7708,26 @@ class App extends React.Component<AppProps, AppState> {
         scrollConstraints.y,
         Math.max(
           nextState.scrollY,
-          scrollConstraints.y - scrollConstraints.height + scaledHeight,
+          scrollConstraints.y - scrollConstraints.height + height / zoom.value,
         ),
       );
     }
 
-    // If zoom is part of the nextState, constrain it within the scroll constraints
-    if ("zoom" in nextState) {
-      const zoomLimit = Math.min(maxZoomX, maxZoomY);
+    // If zoom is part of the nextState, constrain it within the scroll constraints and adjust for centered view
+    if (
+      "zoom" in nextState &&
+      typeof nextState.zoom === "object" &&
+      nextState.zoom !== null
+    ) {
       constrainedZoom = {
         value: getNormalizedZoom(Math.max(nextState.zoom.value, zoomLimit)),
       };
     }
 
+    // Call function to adjust scroll position for centered view depending on the current zoom value
+    adjustScrollForCenteredView(constrainedZoom.value);
+
+    // Return the nextState with constrained scrollX, scrollY, and zoom values
     return {
       ...nextState,
       scrollX: constrainedScrollX,

From 2998573e79207034be0812752db4104e5f95a34f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Arno=C5=A1t=20Pleskot?= <arnostpleskot@gmail.com>
Date: Tue, 4 Jul 2023 16:49:00 +0200
Subject: [PATCH 04/57] feat: limit scroll in componentDidUpdate

---
 src/components/App.tsx | 148 +++++++++++++++++++----------------------
 src/scene/types.ts     |   5 ++
 2 files changed, 72 insertions(+), 81 deletions(-)

diff --git a/src/components/App.tsx b/src/components/App.tsx
index 27da3e8be..55d1edb03 100644
--- a/src/components/App.tsx
+++ b/src/components/App.tsx
@@ -199,7 +199,11 @@ import {
   isSomeElementSelected,
 } from "../scene";
 import Scene from "../scene/Scene";
-import { RenderConfig, ScrollBars } from "../scene/types";
+import {
+  RenderConfig,
+  ScrollBars,
+  ConstrainedScrollValues,
+} from "../scene/types";
 import { getStateForZoom } from "../scene/zoom";
 import { findShapeByKey, SHAPES } from "../shapes";
 import {
@@ -1621,7 +1625,10 @@ class App extends React.Component<AppProps, AppState> {
         ),
       );
     }
-    this.renderScene();
+
+    const constraintedScroll = this.constrainScroll(prevState);
+
+    this.renderScene(constraintedScroll);
     this.history.record(this.state, this.scene.getElementsIncludingDeleted());
 
     // Do not notify consumers if we're still loading the scene. Among other
@@ -1637,7 +1644,7 @@ class App extends React.Component<AppProps, AppState> {
     }
   }
 
-  private renderScene = () => {
+  private renderScene = (constrainedScroll?: ConstrainedScrollValues) => {
     const cursorButton: {
       [id: string]: string | undefined;
     } = {};
@@ -1708,10 +1715,10 @@ class App extends React.Component<AppProps, AppState> {
         canvas: this.canvas!,
         renderConfig: {
           selectionColor,
-          scrollX: this.state.scrollX,
-          scrollY: this.state.scrollY,
+          scrollX: constrainedScroll?.scrollX ?? this.state.scrollX,
+          scrollY: constrainedScroll?.scrollY ?? this.state.scrollY,
           viewBackgroundColor: this.state.viewBackgroundColor,
-          zoom: this.state.zoom,
+          zoom: constrainedScroll?.zoom ?? this.state.zoom,
           remotePointerViewportCoords: pointerViewportCoords,
           remotePointerButton: cursorButton,
           remoteSelectedElementIds,
@@ -2250,16 +2257,14 @@ class App extends React.Component<AppProps, AppState> {
     value: number,
   ) => {
     this.setState(
-      this.constrainScroll({
-        ...getStateForZoom(
-          {
-            viewportX: this.state.width / 2 + this.state.offsetLeft,
-            viewportY: this.state.height / 2 + this.state.offsetTop,
-            nextZoom: getNormalizedZoom(value),
-          },
-          this.state,
-        ),
-      }),
+      getStateForZoom(
+        {
+          viewportX: this.state.width / 2 + this.state.offsetLeft,
+          viewportY: this.state.height / 2 + this.state.offsetTop,
+          nextZoom: getNormalizedZoom(value),
+        },
+        this.state,
+      ),
     );
   };
 
@@ -2373,25 +2378,7 @@ class App extends React.Component<AppProps, AppState> {
     state,
   ) => {
     this.cancelInProgresAnimation?.();
-
-    // When there are no scroll constraints, update the state directly
-    if (!this.state.scrollConstraints) {
-      this.setState(state);
-    }
-
-    // If state is a function, we generate the new state and then apply scroll constraints
-    if (typeof state === "function") {
-      this.setState((prevState, props) => {
-        // Generate new state
-        const newState = state(prevState, props);
-
-        // Apply scroll constraints to the new state
-        return this.constrainScroll(newState);
-      });
-    } else {
-      // If state is not a function, apply scroll constraints directly before updating the state
-      this.setState(this.constrainScroll(state));
-    }
+    this.setState(state);
   };
 
   setToast = (
@@ -7651,15 +7638,17 @@ class App extends React.Component<AppProps, AppState> {
    * @param nextState - The next state of the application, or a subset of the application state.
    * @returns The modified next state with scrollX and scrollY constrained to the scroll constraints.
    */
-  private constrainScroll = <K extends keyof AppState>(
-    nextState: AppState | Pick<AppState, K> | null,
-  ) => {
+  private constrainScroll = (prevState: AppState): ConstrainedScrollValues => {
     const { scrollX, scrollY, scrollConstraints, width, height, zoom } =
       this.state;
 
-    // When no scroll constraints are set, return the nextState as is
-    if (!scrollConstraints || !nextState) {
-      return nextState;
+    if (
+      !scrollConstraints ||
+      (this.state.zoom.value === prevState.zoom.value &&
+        this.state.scrollX === prevState.scrollX &&
+        this.state.scrollY === prevState.scrollY)
+    ) {
+      return null;
     }
 
     // Calculate maximum zoom for both X and Y axis based on width and height of viewport and scrollable area
@@ -7691,49 +7680,46 @@ class App extends React.Component<AppProps, AppState> {
       }
     };
 
-    // If scrollX is part of the nextState, constrain it within the scroll constraints
-    if ("scrollX" in nextState) {
-      constrainedScrollX = Math.min(
-        scrollConstraints.x,
-        Math.max(
-          nextState.scrollX,
-          scrollConstraints.x - scrollConstraints.width + width / zoom.value,
-        ),
-      );
-    }
+    // Constrain scrollX and scrollY within the scroll constraints
+    constrainedScrollX = Math.min(
+      scrollConstraints.x,
+      Math.max(
+        scrollX,
+        scrollConstraints.x - scrollConstraints.width + width / zoom.value,
+      ),
+    );
 
-    // If scrollY is part of the nextState, constrain it within the scroll constraints
-    if ("scrollY" in nextState) {
-      constrainedScrollY = Math.min(
-        scrollConstraints.y,
-        Math.max(
-          nextState.scrollY,
-          scrollConstraints.y - scrollConstraints.height + height / zoom.value,
-        ),
-      );
-    }
+    constrainedScrollY = Math.min(
+      scrollConstraints.y,
+      Math.max(
+        scrollY,
+        scrollConstraints.y - scrollConstraints.height + height / zoom.value,
+      ),
+    );
 
-    // If zoom is part of the nextState, constrain it within the scroll constraints and adjust for centered view
-    if (
-      "zoom" in nextState &&
-      typeof nextState.zoom === "object" &&
-      nextState.zoom !== null
-    ) {
-      constrainedZoom = {
-        value: getNormalizedZoom(Math.max(nextState.zoom.value, zoomLimit)),
-      };
-    }
-
-    // Call function to adjust scroll position for centered view depending on the current zoom value
-    adjustScrollForCenteredView(constrainedZoom.value);
-
-    // Return the nextState with constrained scrollX, scrollY, and zoom values
-    return {
-      ...nextState,
-      scrollX: constrainedScrollX,
-      scrollY: constrainedScrollY,
-      zoom: constrainedZoom,
+    // Constrain zoom within the scroll constraints and adjust for centered view
+    constrainedZoom = {
+      value: getNormalizedZoom(Math.max(zoom.value, zoomLimit)),
     };
+
+    adjustScrollForCenteredView(zoom.value);
+
+    // If any of the values have changed, set new state
+    if (
+      constrainedScrollX !== this.state.scrollX ||
+      constrainedScrollY !== this.state.scrollY ||
+      constrainedZoom.value !== this.state.zoom.value
+    ) {
+      const constrainedState = {
+        scrollX: constrainedScrollX,
+        scrollY: constrainedScrollY,
+        zoom: constrainedZoom,
+      };
+      this.setState(constrainedState);
+      return constrainedState;
+    }
+
+    return null;
   };
 }
 
diff --git a/src/scene/types.ts b/src/scene/types.ts
index a54b02b26..4a8463e1a 100644
--- a/src/scene/types.ts
+++ b/src/scene/types.ts
@@ -60,3 +60,8 @@ export type ScrollBars = {
     height: number;
   } | null;
 };
+
+export type ConstrainedScrollValues = Pick<
+  AppState,
+  "scrollX" | "scrollY" | "zoom"
+> | null;

From 71f7960606999e68ad51ecd199f503283c39864f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Arno=C5=A1t=20Pleskot?= <arnostpleskot@gmail.com>
Date: Tue, 4 Jul 2023 16:52:59 +0200
Subject: [PATCH 05/57] test: fix test snapshots

---
 .../__snapshots__/contextmenu.test.tsx.snap   | 17 ++++++
 .../regressionTests.test.tsx.snap             | 53 +++++++++++++++++++
 .../packages/__snapshots__/utils.test.ts.snap |  1 +
 3 files changed, 71 insertions(+)

diff --git a/src/tests/__snapshots__/contextmenu.test.tsx.snap b/src/tests/__snapshots__/contextmenu.test.tsx.snap
index 583c809a2..962ae3ade 100644
--- a/src/tests/__snapshots__/contextmenu.test.tsx.snap
+++ b/src/tests/__snapshots__/contextmenu.test.tsx.snap
@@ -345,6 +345,7 @@ Object {
   "pendingImageElementId": null,
   "previousSelectedElementIds": Object {},
   "resizingElement": null,
+  "scrollConstraints": null,
   "scrollX": 0,
   "scrollY": 0,
   "scrolledOutside": false,
@@ -537,6 +538,7 @@ Object {
   "pendingImageElementId": null,
   "previousSelectedElementIds": Object {},
   "resizingElement": null,
+  "scrollConstraints": null,
   "scrollX": 0,
   "scrollY": 0,
   "scrolledOutside": false,
@@ -735,6 +737,7 @@ Object {
   "pendingImageElementId": null,
   "previousSelectedElementIds": Object {},
   "resizingElement": null,
+  "scrollConstraints": null,
   "scrollX": 0,
   "scrollY": 0,
   "scrolledOutside": false,
@@ -1107,6 +1110,7 @@ Object {
   "pendingImageElementId": null,
   "previousSelectedElementIds": Object {},
   "resizingElement": null,
+  "scrollConstraints": null,
   "scrollX": 0,
   "scrollY": 0,
   "scrolledOutside": false,
@@ -1479,6 +1483,7 @@ Object {
   "pendingImageElementId": null,
   "previousSelectedElementIds": Object {},
   "resizingElement": null,
+  "scrollConstraints": null,
   "scrollX": 0,
   "scrollY": 0,
   "scrolledOutside": false,
@@ -1677,6 +1682,7 @@ Object {
   "pendingImageElementId": null,
   "previousSelectedElementIds": Object {},
   "resizingElement": null,
+  "scrollConstraints": null,
   "scrollX": 0,
   "scrollY": 0,
   "scrolledOutside": false,
@@ -1912,6 +1918,7 @@ Object {
   "pendingImageElementId": null,
   "previousSelectedElementIds": Object {},
   "resizingElement": null,
+  "scrollConstraints": null,
   "scrollX": 0,
   "scrollY": 0,
   "scrolledOutside": false,
@@ -2214,6 +2221,7 @@ Object {
     "id1": true,
   },
   "resizingElement": null,
+  "scrollConstraints": null,
   "scrollX": 0,
   "scrollY": 0,
   "scrolledOutside": false,
@@ -2600,6 +2608,7 @@ Object {
   "pendingImageElementId": null,
   "previousSelectedElementIds": Object {},
   "resizingElement": null,
+  "scrollConstraints": null,
   "scrollX": 0,
   "scrollY": 0,
   "scrolledOutside": false,
@@ -3478,6 +3487,7 @@ Object {
   "pendingImageElementId": null,
   "previousSelectedElementIds": Object {},
   "resizingElement": null,
+  "scrollConstraints": null,
   "scrollX": 0,
   "scrollY": 0,
   "scrolledOutside": false,
@@ -3850,6 +3860,7 @@ Object {
   "pendingImageElementId": null,
   "previousSelectedElementIds": Object {},
   "resizingElement": null,
+  "scrollConstraints": null,
   "scrollX": 0,
   "scrollY": 0,
   "scrolledOutside": false,
@@ -4224,6 +4235,7 @@ Object {
     "id1": true,
   },
   "resizingElement": null,
+  "scrollConstraints": null,
   "scrollX": 0,
   "scrollY": 0,
   "scrolledOutside": false,
@@ -4955,6 +4967,7 @@ Object {
     "id0": true,
   },
   "resizingElement": null,
+  "scrollConstraints": null,
   "scrollX": 0,
   "scrollY": 0,
   "scrolledOutside": false,
@@ -5534,6 +5547,7 @@ Object {
     "id0": true,
   },
   "resizingElement": null,
+  "scrollConstraints": null,
   "scrollX": 0,
   "scrollY": 0,
   "scrolledOutside": false,
@@ -6035,6 +6049,7 @@ Object {
   "pendingImageElementId": null,
   "previousSelectedElementIds": Object {},
   "resizingElement": null,
+  "scrollConstraints": null,
   "scrollX": 0,
   "scrollY": 0,
   "scrolledOutside": false,
@@ -6430,6 +6445,7 @@ Object {
   "pendingImageElementId": null,
   "previousSelectedElementIds": Object {},
   "resizingElement": null,
+  "scrollConstraints": null,
   "scrollX": 0,
   "scrollY": 0,
   "scrolledOutside": false,
@@ -6803,6 +6819,7 @@ Object {
   "pendingImageElementId": null,
   "previousSelectedElementIds": Object {},
   "resizingElement": null,
+  "scrollConstraints": null,
   "scrollX": 0,
   "scrollY": 0,
   "scrolledOutside": false,
diff --git a/src/tests/__snapshots__/regressionTests.test.tsx.snap b/src/tests/__snapshots__/regressionTests.test.tsx.snap
index fd2c2f5d7..450dab3b7 100644
--- a/src/tests/__snapshots__/regressionTests.test.tsx.snap
+++ b/src/tests/__snapshots__/regressionTests.test.tsx.snap
@@ -73,6 +73,7 @@ Object {
     "id2": true,
   },
   "resizingElement": null,
+  "scrollConstraints": null,
   "scrollX": 0,
   "scrollY": 0,
   "scrolledOutside": false,
@@ -625,6 +626,7 @@ Object {
     "id2": true,
   },
   "resizingElement": null,
+  "scrollConstraints": null,
   "scrollX": 0,
   "scrollY": 0,
   "scrolledOutside": false,
@@ -1175,6 +1177,7 @@ Object {
   "pendingImageElementId": null,
   "previousSelectedElementIds": Object {},
   "resizingElement": null,
+  "scrollConstraints": null,
   "scrollX": 0,
   "scrollY": 0,
   "scrolledOutside": false,
@@ -2108,6 +2111,7 @@ Object {
     "id0": true,
   },
   "resizingElement": null,
+  "scrollConstraints": null,
   "scrollX": 0,
   "scrollY": 0,
   "scrolledOutside": false,
@@ -2349,6 +2353,7 @@ Object {
     "id0": true,
   },
   "resizingElement": null,
+  "scrollConstraints": null,
   "scrollX": 0,
   "scrollY": 0,
   "scrolledOutside": false,
@@ -2899,6 +2904,7 @@ Object {
     "id0": true,
   },
   "resizingElement": null,
+  "scrollConstraints": null,
   "scrollX": 0,
   "scrollY": 0,
   "scrolledOutside": false,
@@ -3199,6 +3205,7 @@ Object {
   "pendingImageElementId": null,
   "previousSelectedElementIds": Object {},
   "resizingElement": null,
+  "scrollConstraints": null,
   "scrollX": 0,
   "scrollY": 0,
   "scrolledOutside": false,
@@ -3397,6 +3404,7 @@ Object {
     "id2": true,
   },
   "resizingElement": null,
+  "scrollConstraints": null,
   "scrollX": 0,
   "scrollY": 0,
   "scrolledOutside": false,
@@ -3931,6 +3939,7 @@ Object {
   "pendingImageElementId": null,
   "previousSelectedElementIds": Object {},
   "resizingElement": null,
+  "scrollConstraints": null,
   "scrollX": 0,
   "scrollY": 0,
   "scrolledOutside": false,
@@ -4258,6 +4267,7 @@ Object {
     "id0": true,
   },
   "resizingElement": null,
+  "scrollConstraints": null,
   "scrollX": 0,
   "scrollY": 0,
   "scrolledOutside": false,
@@ -4499,6 +4509,7 @@ Object {
     "id0": true,
   },
   "resizingElement": null,
+  "scrollConstraints": null,
   "scrollX": 0,
   "scrollY": 0,
   "scrolledOutside": false,
@@ -4783,6 +4794,7 @@ Object {
     "id1": true,
   },
   "resizingElement": null,
+  "scrollConstraints": null,
   "scrollX": 0,
   "scrollY": 0,
   "scrolledOutside": false,
@@ -5085,6 +5097,7 @@ Object {
     "id2": true,
   },
   "resizingElement": null,
+  "scrollConstraints": null,
   "scrollX": 0,
   "scrollY": 0,
   "scrolledOutside": false,
@@ -5550,6 +5563,7 @@ Object {
     "id1": true,
   },
   "resizingElement": null,
+  "scrollConstraints": null,
   "scrollX": 0,
   "scrollY": 0,
   "scrolledOutside": false,
@@ -5907,6 +5921,7 @@ Object {
     "id1": true,
   },
   "resizingElement": null,
+  "scrollConstraints": null,
   "scrollX": 0,
   "scrollY": 0,
   "scrolledOutside": false,
@@ -6235,6 +6250,7 @@ Object {
     "id0": true,
   },
   "resizingElement": null,
+  "scrollConstraints": null,
   "scrollX": 0,
   "scrollY": 0,
   "scrolledOutside": false,
@@ -6459,6 +6475,7 @@ Object {
     "id0": true,
   },
   "resizingElement": null,
+  "scrollConstraints": null,
   "scrollX": 0,
   "scrollY": 0,
   "scrolledOutside": false,
@@ -6653,6 +6670,7 @@ Object {
   "pendingImageElementId": null,
   "previousSelectedElementIds": Object {},
   "resizingElement": null,
+  "scrollConstraints": null,
   "scrollX": 0,
   "scrollY": 0,
   "scrolledOutside": false,
@@ -7206,6 +7224,7 @@ Object {
     "id1": true,
   },
   "resizingElement": null,
+  "scrollConstraints": null,
   "scrollX": 0,
   "scrollY": 0,
   "scrolledOutside": false,
@@ -7580,6 +7599,7 @@ Object {
   "pendingImageElementId": null,
   "previousSelectedElementIds": Object {},
   "resizingElement": null,
+  "scrollConstraints": null,
   "scrollX": 0,
   "scrollY": 0,
   "scrolledOutside": false,
@@ -9998,6 +10018,7 @@ Object {
     "id2": true,
   },
   "resizingElement": null,
+  "scrollConstraints": null,
   "scrollX": 0,
   "scrollY": 0,
   "scrolledOutside": false,
@@ -10433,6 +10454,7 @@ Object {
     "id0": true,
   },
   "resizingElement": null,
+  "scrollConstraints": null,
   "scrollX": 0,
   "scrollY": 0,
   "scrolledOutside": false,
@@ -10736,6 +10758,7 @@ Object {
     "id0": true,
   },
   "resizingElement": null,
+  "scrollConstraints": null,
   "scrollX": 0,
   "scrollY": 0,
   "scrolledOutside": false,
@@ -10995,6 +11018,7 @@ Object {
     "id0": true,
   },
   "resizingElement": null,
+  "scrollConstraints": null,
   "scrollX": 0,
   "scrollY": 0,
   "scrolledOutside": false,
@@ -11324,6 +11348,7 @@ Object {
   "pendingImageElementId": null,
   "previousSelectedElementIds": Object {},
   "resizingElement": null,
+  "scrollConstraints": null,
   "scrollX": 0,
   "scrollY": 0,
   "scrolledOutside": false,
@@ -11520,6 +11545,7 @@ Object {
   "pendingImageElementId": null,
   "previousSelectedElementIds": Object {},
   "resizingElement": null,
+  "scrollConstraints": null,
   "scrollX": 0,
   "scrollY": 0,
   "scrolledOutside": false,
@@ -11716,6 +11742,7 @@ Object {
   "pendingImageElementId": null,
   "previousSelectedElementIds": Object {},
   "resizingElement": null,
+  "scrollConstraints": null,
   "scrollX": 0,
   "scrollY": 0,
   "scrolledOutside": false,
@@ -11912,6 +11939,7 @@ Object {
   "pendingImageElementId": null,
   "previousSelectedElementIds": Object {},
   "resizingElement": null,
+  "scrollConstraints": null,
   "scrollX": 0,
   "scrollY": 0,
   "scrolledOutside": false,
@@ -12161,6 +12189,7 @@ Object {
   "pendingImageElementId": null,
   "previousSelectedElementIds": Object {},
   "resizingElement": null,
+  "scrollConstraints": null,
   "scrollX": 0,
   "scrollY": 0,
   "scrolledOutside": false,
@@ -12410,6 +12439,7 @@ Object {
   "pendingImageElementId": null,
   "previousSelectedElementIds": Object {},
   "resizingElement": null,
+  "scrollConstraints": null,
   "scrollX": 0,
   "scrollY": 0,
   "scrolledOutside": false,
@@ -12646,6 +12676,7 @@ Object {
   "pendingImageElementId": null,
   "previousSelectedElementIds": Object {},
   "resizingElement": null,
+  "scrollConstraints": null,
   "scrollX": 0,
   "scrollY": 0,
   "scrolledOutside": false,
@@ -12895,6 +12926,7 @@ Object {
   "pendingImageElementId": null,
   "previousSelectedElementIds": Object {},
   "resizingElement": null,
+  "scrollConstraints": null,
   "scrollX": 0,
   "scrollY": 0,
   "scrolledOutside": false,
@@ -13091,6 +13123,7 @@ Object {
   "pendingImageElementId": null,
   "previousSelectedElementIds": Object {},
   "resizingElement": null,
+  "scrollConstraints": null,
   "scrollX": 0,
   "scrollY": 0,
   "scrolledOutside": false,
@@ -13340,6 +13373,7 @@ Object {
   "pendingImageElementId": null,
   "previousSelectedElementIds": Object {},
   "resizingElement": null,
+  "scrollConstraints": null,
   "scrollX": 0,
   "scrollY": 0,
   "scrolledOutside": false,
@@ -13536,6 +13570,7 @@ Object {
   "pendingImageElementId": null,
   "previousSelectedElementIds": Object {},
   "resizingElement": null,
+  "scrollConstraints": null,
   "scrollX": 0,
   "scrollY": 0,
   "scrolledOutside": false,
@@ -13772,6 +13807,7 @@ Object {
   "pendingImageElementId": null,
   "previousSelectedElementIds": Object {},
   "resizingElement": null,
+  "scrollConstraints": null,
   "scrollX": 0,
   "scrollY": 0,
   "scrolledOutside": false,
@@ -13972,6 +14008,7 @@ Object {
     "id2": true,
   },
   "resizingElement": null,
+  "scrollConstraints": null,
   "scrollX": 0,
   "scrollY": 0,
   "scrolledOutside": false,
@@ -14834,6 +14871,7 @@ Object {
     "id0": true,
   },
   "resizingElement": null,
+  "scrollConstraints": null,
   "scrollX": 0,
   "scrollY": 0,
   "scrolledOutside": false,
@@ -15134,6 +15172,7 @@ Object {
   "pendingImageElementId": null,
   "previousSelectedElementIds": Object {},
   "resizingElement": null,
+  "scrollConstraints": null,
   "scrollX": -2.916666666666668,
   "scrollY": 0,
   "scrolledOutside": false,
@@ -15253,6 +15292,7 @@ Object {
   "pendingImageElementId": null,
   "previousSelectedElementIds": Object {},
   "resizingElement": null,
+  "scrollConstraints": null,
   "scrollX": 0,
   "scrollY": 0,
   "scrolledOutside": false,
@@ -15374,6 +15414,7 @@ Object {
     "id0": true,
   },
   "resizingElement": null,
+  "scrollConstraints": null,
   "scrollX": 0,
   "scrollY": 0,
   "scrolledOutside": false,
@@ -15571,6 +15612,7 @@ Object {
     "id1": true,
   },
   "resizingElement": null,
+  "scrollConstraints": null,
   "scrollX": 0,
   "scrollY": 0,
   "scrolledOutside": false,
@@ -15949,6 +15991,7 @@ Object {
     "id2": true,
   },
   "resizingElement": null,
+  "scrollConstraints": null,
   "scrollX": 0,
   "scrollY": 0,
   "scrolledOutside": false,
@@ -16598,6 +16641,7 @@ Object {
   "pendingImageElementId": null,
   "previousSelectedElementIds": Object {},
   "resizingElement": null,
+  "scrollConstraints": null,
   "scrollX": 0,
   "scrollY": 0,
   "scrolledOutside": false,
@@ -16842,6 +16886,7 @@ Object {
     "id6": true,
   },
   "resizingElement": null,
+  "scrollConstraints": null,
   "scrollX": 0,
   "scrollY": 0,
   "scrolledOutside": false,
@@ -17829,6 +17874,7 @@ Object {
   "pendingImageElementId": null,
   "previousSelectedElementIds": Object {},
   "resizingElement": null,
+  "scrollConstraints": null,
   "scrollX": 60,
   "scrollY": 60,
   "scrolledOutside": false,
@@ -17950,6 +17996,7 @@ Object {
     "id0": true,
   },
   "resizingElement": null,
+  "scrollConstraints": null,
   "scrollX": 0,
   "scrollY": 0,
   "scrolledOutside": false,
@@ -18866,6 +18913,7 @@ Object {
     "id2": true,
   },
   "resizingElement": null,
+  "scrollConstraints": null,
   "scrollX": 0,
   "scrollY": 0,
   "scrolledOutside": false,
@@ -19357,6 +19405,7 @@ Object {
     "id1": true,
   },
   "resizingElement": null,
+  "scrollConstraints": null,
   "scrollX": 0,
   "scrollY": 0,
   "scrolledOutside": false,
@@ -19685,6 +19734,7 @@ Object {
   "pendingImageElementId": null,
   "previousSelectedElementIds": Object {},
   "resizingElement": null,
+  "scrollConstraints": null,
   "scrollX": 10,
   "scrollY": -10,
   "scrolledOutside": false,
@@ -19804,6 +19854,7 @@ Object {
   "pendingImageElementId": null,
   "previousSelectedElementIds": Object {},
   "resizingElement": null,
+  "scrollConstraints": null,
   "scrollX": 0,
   "scrollY": 0,
   "scrolledOutside": false,
@@ -20397,6 +20448,7 @@ Object {
   "pendingImageElementId": null,
   "previousSelectedElementIds": Object {},
   "resizingElement": null,
+  "scrollConstraints": null,
   "scrollX": 0,
   "scrollY": 0,
   "scrolledOutside": false,
@@ -20516,6 +20568,7 @@ Object {
   "pendingImageElementId": null,
   "previousSelectedElementIds": Object {},
   "resizingElement": null,
+  "scrollConstraints": null,
   "scrollX": 0,
   "scrollY": 0,
   "scrolledOutside": false,
diff --git a/src/tests/packages/__snapshots__/utils.test.ts.snap b/src/tests/packages/__snapshots__/utils.test.ts.snap
index 34085498f..61e456b04 100644
--- a/src/tests/packages/__snapshots__/utils.test.ts.snap
+++ b/src/tests/packages/__snapshots__/utils.test.ts.snap
@@ -67,6 +67,7 @@ Object {
   "pendingImageElementId": null,
   "previousSelectedElementIds": Object {},
   "resizingElement": null,
+  "scrollConstraints": null,
   "scrollX": 0,
   "scrollY": 0,
   "scrolledOutside": false,

From f7e8056abeb55d1359f07a47c17a8e78faba3451 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Arno=C5=A1t=20Pleskot?= <arnostpleskot@gmail.com>
Date: Tue, 4 Jul 2023 17:10:20 +0200
Subject: [PATCH 06/57] feat: update constraints on window resize

---
 src/components/App.tsx | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/src/components/App.tsx b/src/components/App.tsx
index 55d1edb03..15ee6c61a 100644
--- a/src/components/App.tsx
+++ b/src/components/App.tsx
@@ -7642,11 +7642,15 @@ class App extends React.Component<AppProps, AppState> {
     const { scrollX, scrollY, scrollConstraints, width, height, zoom } =
       this.state;
 
+    // Skip if scroll constraints are not defined or if the zoom level or viewport dimensions have not changed.
+    // Constrains and scene will update on change of viewport dimensions.
     if (
       !scrollConstraints ||
       (this.state.zoom.value === prevState.zoom.value &&
         this.state.scrollX === prevState.scrollX &&
-        this.state.scrollY === prevState.scrollY)
+        this.state.scrollY === prevState.scrollY &&
+        this.state.width === prevState.width &&
+        this.state.height === prevState.height)
     ) {
       return null;
     }

From 35b43c14d89a37b782b2aa0863fce7f76ca1cadd Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Arno=C5=A1t=20Pleskot?= <arnostpleskot@gmail.com>
Date: Tue, 4 Jul 2023 18:20:01 +0200
Subject: [PATCH 07/57] feat: allow scroll over constraints while mouse down

---
 src/components/App.tsx | 157 ++++++++++++++++++++++++-----------------
 1 file changed, 94 insertions(+), 63 deletions(-)

diff --git a/src/components/App.tsx b/src/components/App.tsx
index 15ee6c61a..27f44ddc8 100644
--- a/src/components/App.tsx
+++ b/src/components/App.tsx
@@ -1495,6 +1495,7 @@ class App extends React.Component<AppProps, AppState> {
   }
 
   componentDidUpdate(prevProps: AppProps, prevState: AppState) {
+    console.log(this.state.cursorButton);
     if (
       !this.state.showWelcomeScreen &&
       !this.scene.getElementsIncludingDeleted().length
@@ -7639,86 +7640,116 @@ class App extends React.Component<AppProps, AppState> {
    * @returns The modified next state with scrollX and scrollY constrained to the scroll constraints.
    */
   private constrainScroll = (prevState: AppState): ConstrainedScrollValues => {
-    const { scrollX, scrollY, scrollConstraints, width, height, zoom } =
-      this.state;
+    const {
+      scrollX,
+      scrollY,
+      scrollConstraints,
+      width,
+      height,
+      zoom,
+      cursorButton,
+    } = this.state;
 
-    // Skip if scroll constraints are not defined or if the zoom level or viewport dimensions have not changed.
-    // Constrains and scene will update on change of viewport dimensions.
-    if (
-      !scrollConstraints ||
-      (this.state.zoom.value === prevState.zoom.value &&
-        this.state.scrollX === prevState.scrollX &&
-        this.state.scrollY === prevState.scrollY &&
-        this.state.width === prevState.width &&
-        this.state.height === prevState.height)
-    ) {
+    // Set the overscroll allowance percentage
+    const OVERSCROLL_ALLOWANCE_PERCENTAGE = 0.1;
+
+    // Check if the state has changed since the last render
+    const stateUnchanged =
+      zoom.value === prevState.zoom.value &&
+      scrollX === prevState.scrollX &&
+      scrollY === prevState.scrollY &&
+      width === prevState.width &&
+      height === prevState.height &&
+      cursorButton === prevState.cursorButton;
+
+    // If the state hasn't changed or the scroll constraints are not defined, return null
+    if (!scrollConstraints || stateUnchanged) {
       return null;
     }
 
-    // Calculate maximum zoom for both X and Y axis based on width and height of viewport and scrollable area
-    const maxZoomX = width / scrollConstraints.width;
-    const maxZoomY = height / scrollConstraints.height;
-
-    // The smallest zoom out of maxZoomX and maxZoomY is our zoom limit
+    // Calculate the maximum possible zoom based on the viewport and scrollable area sizes
+    const scrollableWidth = scrollConstraints.width;
+    const scrollableHeight = scrollConstraints.height;
+    const maxZoomX = width / scrollableWidth;
+    const maxZoomY = height / scrollableHeight;
     const zoomLimit = Math.min(maxZoomX, maxZoomY);
 
-    // Set default constrainedScrollX and constrainedScrollY values
+    // Default scroll and zoom values
     let constrainedScrollX = scrollX;
     let constrainedScrollY = scrollY;
-    let constrainedZoom = zoom;
-
-    // Function to adjust scroll position for centered view depending on the zoom value
-    const adjustScrollForCenteredView = (zoomValue: number) => {
-      // If zoom value is less than or equal to maxZoomX, adjust scrollX to ensure the view is centered on the X axis
-      if (zoomValue <= maxZoomX) {
-        const centeredScrollX =
-          (scrollConstraints.width - width / zoomValue) / -2;
-        constrainedScrollX = scrollConstraints.x + centeredScrollX;
-      }
-
-      // If zoom value is less than or equal to maxZoomY, adjust scrollY to ensure the view is centered on the Y axis
-      if (zoomValue <= maxZoomY) {
-        const centeredScrollY =
-          (scrollConstraints.height - height / zoomValue) / -2;
-        constrainedScrollY = scrollConstraints.y + centeredScrollY;
-      }
-    };
-
-    // Constrain scrollX and scrollY within the scroll constraints
-    constrainedScrollX = Math.min(
-      scrollConstraints.x,
-      Math.max(
-        scrollX,
-        scrollConstraints.x - scrollConstraints.width + width / zoom.value,
-      ),
-    );
-
-    constrainedScrollY = Math.min(
-      scrollConstraints.y,
-      Math.max(
-        scrollY,
-        scrollConstraints.y - scrollConstraints.height + height / zoom.value,
-      ),
-    );
-
-    // Constrain zoom within the scroll constraints and adjust for centered view
-    constrainedZoom = {
+    const constrainedZoom = {
       value: getNormalizedZoom(Math.max(zoom.value, zoomLimit)),
     };
 
-    adjustScrollForCenteredView(zoom.value);
+    // Calculate the overscroll allowance for each axis
+    const overscrollAllowanceX =
+      OVERSCROLL_ALLOWANCE_PERCENTAGE * scrollableWidth;
+    const overscrollAllowanceY =
+      OVERSCROLL_ALLOWANCE_PERCENTAGE * scrollableHeight;
 
-    // If any of the values have changed, set new state
-    if (
-      constrainedScrollX !== this.state.scrollX ||
-      constrainedScrollY !== this.state.scrollY ||
-      constrainedZoom.value !== this.state.zoom.value
-    ) {
+    // Define the maximum and minimum scroll for each axis based on the cursor button state
+    const maxScrollX =
+      cursorButton === "down"
+        ? scrollConstraints.x + overscrollAllowanceX
+        : scrollConstraints.x;
+    const minScrollX =
+      cursorButton === "down"
+        ? scrollConstraints.x -
+          scrollableWidth +
+          width / zoom.value -
+          overscrollAllowanceX
+        : scrollConstraints.x - scrollableWidth + width / zoom.value;
+
+    const maxScrollY =
+      cursorButton === "down"
+        ? scrollConstraints.y + overscrollAllowanceY
+        : scrollConstraints.y;
+    const minScrollY =
+      cursorButton === "down"
+        ? scrollConstraints.y -
+          scrollableHeight +
+          height / zoom.value -
+          overscrollAllowanceY
+        : scrollConstraints.y - scrollableHeight + height / zoom.value;
+
+    // Constrain the scroll within the scroll constraints, with overscroll allowance if the cursor button is down
+    constrainedScrollX = Math.min(maxScrollX, Math.max(scrollX, minScrollX));
+    constrainedScrollY = Math.min(maxScrollY, Math.max(scrollY, minScrollY));
+
+    // Check if the zoom value requires adjustment for a centered view
+    const shouldAdjustForCenteredView =
+      zoom.value <= maxZoomX || zoom.value <= maxZoomY;
+    if (shouldAdjustForCenteredView) {
+      // Adjust the scroll position for a centered view based on the zoom value
+      const adjustScrollForCenteredView = (zoomValue: number) => {
+        if (zoomValue <= maxZoomX) {
+          const centeredScrollX = (scrollableWidth - width / zoomValue) / -2;
+          constrainedScrollX = scrollConstraints.x + centeredScrollX;
+        }
+
+        if (zoomValue <= maxZoomY) {
+          const centeredScrollY = (scrollableHeight - height / zoomValue) / -2;
+          constrainedScrollY = scrollConstraints.y + centeredScrollY;
+        }
+      };
+
+      adjustScrollForCenteredView(zoom.value);
+    }
+
+    // Check if the new state differs from the old state
+    const stateChanged =
+      constrainedScrollX !== scrollX ||
+      constrainedScrollY !== scrollY ||
+      constrainedZoom.value !== zoom.value;
+
+    // If the state has changed, update the state and return the new state
+    if (stateChanged) {
       const constrainedState = {
         scrollX: constrainedScrollX,
         scrollY: constrainedScrollY,
         zoom: constrainedZoom,
       };
+
       this.setState(constrainedState);
       return constrainedState;
     }

From 485c57fd593c95e2a333e9d9dc6476180ac07e73 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Arno=C5=A1t=20Pleskot?= <arnostpleskot@gmail.com>
Date: Tue, 4 Jul 2023 18:23:40 +0200
Subject: [PATCH 08/57] chore: remove console.log

---
 src/components/App.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/components/App.tsx b/src/components/App.tsx
index 27f44ddc8..993141d21 100644
--- a/src/components/App.tsx
+++ b/src/components/App.tsx
@@ -1495,7 +1495,6 @@ class App extends React.Component<AppProps, AppState> {
   }
 
   componentDidUpdate(prevProps: AppProps, prevState: AppState) {
-    console.log(this.state.cursorButton);
     if (
       !this.state.showWelcomeScreen &&
       !this.scene.getElementsIncludingDeleted().length

From f82363aae9da535e05d2b6cf3f7b7b0d83eff80d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Arno=C5=A1t=20Pleskot?= <arnostpleskot@gmail.com>
Date: Tue, 4 Jul 2023 19:01:05 +0200
Subject: [PATCH 09/57] feat: enforce constrains on setting constrains

---
 src/components/App.tsx | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/src/components/App.tsx b/src/components/App.tsx
index 993141d21..daebe197c 100644
--- a/src/components/App.tsx
+++ b/src/components/App.tsx
@@ -7661,8 +7661,11 @@ class App extends React.Component<AppProps, AppState> {
       height === prevState.height &&
       cursorButton === prevState.cursorButton;
 
-    // If the state hasn't changed or the scroll constraints are not defined, return null
-    if (!scrollConstraints || stateUnchanged) {
+    // If the state hasn't changed and scrollConstraints didn't just get defined, return null
+    if (
+      !scrollConstraints ||
+      (stateUnchanged && (prevState.scrollConstraints || !scrollConstraints))
+    ) {
       return null;
     }
 

From 381ef9395627ff6db1c5068d8ea68ca1fe6d42d3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Arno=C5=A1t=20Pleskot?= <arnostpleskot@gmail.com>
Date: Wed, 5 Jul 2023 14:45:36 +0200
Subject: [PATCH 10/57] feat: remove zoom limit

---
 src/components/App.tsx | 12 +++---------
 1 file changed, 3 insertions(+), 9 deletions(-)

diff --git a/src/components/App.tsx b/src/components/App.tsx
index daebe197c..686c638cf 100644
--- a/src/components/App.tsx
+++ b/src/components/App.tsx
@@ -7650,7 +7650,7 @@ class App extends React.Component<AppProps, AppState> {
     } = this.state;
 
     // Set the overscroll allowance percentage
-    const OVERSCROLL_ALLOWANCE_PERCENTAGE = 0.1;
+    const OVERSCROLL_ALLOWANCE_PERCENTAGE = 0.2;
 
     // Check if the state has changed since the last render
     const stateUnchanged =
@@ -7674,14 +7674,10 @@ class App extends React.Component<AppProps, AppState> {
     const scrollableHeight = scrollConstraints.height;
     const maxZoomX = width / scrollableWidth;
     const maxZoomY = height / scrollableHeight;
-    const zoomLimit = Math.min(maxZoomX, maxZoomY);
 
     // Default scroll and zoom values
     let constrainedScrollX = scrollX;
     let constrainedScrollY = scrollY;
-    const constrainedZoom = {
-      value: getNormalizedZoom(Math.max(zoom.value, zoomLimit)),
-    };
 
     // Calculate the overscroll allowance for each axis
     const overscrollAllowanceX =
@@ -7740,16 +7736,14 @@ class App extends React.Component<AppProps, AppState> {
 
     // Check if the new state differs from the old state
     const stateChanged =
-      constrainedScrollX !== scrollX ||
-      constrainedScrollY !== scrollY ||
-      constrainedZoom.value !== zoom.value;
+      constrainedScrollX !== scrollX || constrainedScrollY !== scrollY;
 
     // If the state has changed, update the state and return the new state
     if (stateChanged) {
       const constrainedState = {
         scrollX: constrainedScrollX,
         scrollY: constrainedScrollY,
-        zoom: constrainedZoom,
+        zoom,
       };
 
       this.setState(constrainedState);

From 19ba1070410cc91dc1cb9296792ce9e7b8f59121 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Arno=C5=A1t=20Pleskot?= <arnostpleskot@gmail.com>
Date: Fri, 7 Jul 2023 15:35:10 +0200
Subject: [PATCH 11/57] feat: pass scrollConstraints via props

---
 src/actions/types.ts              | 2 +-
 src/appState.ts                   | 5 ++---
 src/components/App.tsx            | 5 +++++
 src/data/restore.ts               | 2 +-
 src/index-node.ts                 | 1 +
 src/packages/excalidraw/index.tsx | 2 ++
 src/packages/utils.ts             | 9 ++++++++-
 src/types.ts                      | 1 +
 8 files changed, 21 insertions(+), 6 deletions(-)

diff --git a/src/actions/types.ts b/src/actions/types.ts
index ab20a896b..0a6271a36 100644
--- a/src/actions/types.ts
+++ b/src/actions/types.ts
@@ -16,7 +16,7 @@ export type ActionResult =
       elements?: readonly ExcalidrawElement[] | null;
       appState?: MarkOptional<
         AppState,
-        "offsetTop" | "offsetLeft" | "width" | "height"
+        "offsetTop" | "offsetLeft" | "width" | "height" | "scrollConstraints"
       > | null;
       files?: BinaryFiles | null;
       commitToHistory: boolean;
diff --git a/src/appState.ts b/src/appState.ts
index 64059c001..ad05fca4f 100644
--- a/src/appState.ts
+++ b/src/appState.ts
@@ -17,7 +17,7 @@ const defaultExportScale = EXPORT_SCALES.includes(devicePixelRatio)
 
 export const getDefaultAppState = (): Omit<
   AppState,
-  "offsetTop" | "offsetLeft" | "width" | "height"
+  "offsetTop" | "offsetLeft" | "width" | "height" | "scrollConstraints"
 > => {
   return {
     showWelcomeScreen: false,
@@ -98,7 +98,6 @@ export const getDefaultAppState = (): Omit<
     pendingImageElementId: null,
     showHyperlinkPopup: false,
     selectedLinearElement: null,
-    scrollConstraints: null,
   };
 };
 
@@ -205,7 +204,7 @@ const APP_STATE_STORAGE_CONF = (<
   pendingImageElementId: { browser: false, export: false, server: false },
   showHyperlinkPopup: { browser: false, export: false, server: false },
   selectedLinearElement: { browser: true, export: false, server: false },
-  scrollConstraints: { browser: true, export: false, server: false },
+  scrollConstraints: { browser: false, export: false, server: false },
 });
 
 const _clearAppStateForStorage = <
diff --git a/src/components/App.tsx b/src/components/App.tsx
index 686c638cf..d26b13175 100644
--- a/src/components/App.tsx
+++ b/src/components/App.tsx
@@ -366,6 +366,7 @@ const ExcalidrawAppStateContext = React.createContext<AppState>({
   height: 0,
   offsetLeft: 0,
   offsetTop: 0,
+  scrollConstraints: null,
 });
 ExcalidrawAppStateContext.displayName = "ExcalidrawAppStateContext";
 
@@ -466,7 +467,9 @@ class App extends React.Component<AppProps, AppState> {
       gridModeEnabled = false,
       theme = defaultAppState.theme,
       name = defaultAppState.name,
+      scrollConstraints,
     } = props;
+
     this.state = {
       ...defaultAppState,
       theme,
@@ -478,6 +481,7 @@ class App extends React.Component<AppProps, AppState> {
       name,
       width: window.innerWidth,
       height: window.innerHeight,
+      scrollConstraints: scrollConstraints ?? null,
     };
 
     this.id = nanoid();
@@ -1209,6 +1213,7 @@ class App extends React.Component<AppProps, AppState> {
             height: this.state.height,
             offsetTop: this.state.offsetTop,
             offsetLeft: this.state.offsetLeft,
+            scrollConstraints: this.state.scrollConstraints,
           },
           null,
         ),
diff --git a/src/data/restore.ts b/src/data/restore.ts
index 5f2adc004..4d8212ba5 100644
--- a/src/data/restore.ts
+++ b/src/data/restore.ts
@@ -45,7 +45,7 @@ import { normalizeLink } from "./url";
 
 type RestoredAppState = Omit<
   AppState,
-  "offsetTop" | "offsetLeft" | "width" | "height"
+  "offsetTop" | "offsetLeft" | "width" | "height" | "scrollConstraints"
 >;
 
 export const AllowedExcalidrawActiveTools: Record<
diff --git a/src/index-node.ts b/src/index-node.ts
index e966b1d52..bd049802a 100644
--- a/src/index-node.ts
+++ b/src/index-node.ts
@@ -65,6 +65,7 @@ const canvas = exportToCanvas(
     offsetLeft: 0,
     width: 0,
     height: 0,
+    scrollConstraints: null,
   },
   {}, // files
   {
diff --git a/src/packages/excalidraw/index.tsx b/src/packages/excalidraw/index.tsx
index 8ee2956bb..02056bbb5 100644
--- a/src/packages/excalidraw/index.tsx
+++ b/src/packages/excalidraw/index.tsx
@@ -42,6 +42,7 @@ const ExcalidrawBase = (props: ExcalidrawProps) => {
     onPointerDown,
     onScrollChange,
     children,
+    scrollConstraints,
   } = props;
 
   const canvasActions = props.UIOptions?.canvasActions;
@@ -115,6 +116,7 @@ const ExcalidrawBase = (props: ExcalidrawProps) => {
           onLinkOpen={onLinkOpen}
           onPointerDown={onPointerDown}
           onScrollChange={onScrollChange}
+          scrollConstraints={scrollConstraints}
         >
           {children}
         </App>
diff --git a/src/packages/utils.ts b/src/packages/utils.ts
index d9365895e..629b2dee7 100644
--- a/src/packages/utils.ts
+++ b/src/packages/utils.ts
@@ -64,7 +64,14 @@ export const exportToCanvas = ({
   const { exportBackground, viewBackgroundColor } = restoredAppState;
   return _exportToCanvas(
     passElementsSafely(restoredElements),
-    { ...restoredAppState, offsetTop: 0, offsetLeft: 0, width: 0, height: 0 },
+    {
+      ...restoredAppState,
+      offsetTop: 0,
+      offsetLeft: 0,
+      width: 0,
+      height: 0,
+      scrollConstraints: null,
+    },
     files || {},
     { exportBackground, exportPadding, viewBackgroundColor },
     (width: number, height: number) => {
diff --git a/src/types.ts b/src/types.ts
index 86cc9c412..25f42872b 100644
--- a/src/types.ts
+++ b/src/types.ts
@@ -367,6 +367,7 @@ export interface ExcalidrawProps {
   ) => void;
   onScrollChange?: (scrollX: number, scrollY: number) => void;
   children?: React.ReactNode;
+  scrollConstraints?: AppState["scrollConstraints"];
 }
 
 export type SceneData = {

From bc44c3f947ac478ae17c2bf0e770c061fad6a03c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Arno=C5=A1t=20Pleskot?= <arnostpleskot@gmail.com>
Date: Sun, 9 Jul 2023 11:56:23 +0200
Subject: [PATCH 12/57] feat: add overscroll when constrained area is smaller
 than viewport

---
 src/components/App.tsx | 107 ++++++++++++++++++++++++-----------------
 1 file changed, 64 insertions(+), 43 deletions(-)

diff --git a/src/components/App.tsx b/src/components/App.tsx
index d26b13175..9316a83e5 100644
--- a/src/components/App.tsx
+++ b/src/components/App.tsx
@@ -7690,55 +7690,76 @@ class App extends React.Component<AppProps, AppState> {
     const overscrollAllowanceY =
       OVERSCROLL_ALLOWANCE_PERCENTAGE * scrollableHeight;
 
-    // Define the maximum and minimum scroll for each axis based on the cursor button state
-    const maxScrollX =
-      cursorButton === "down"
-        ? scrollConstraints.x + overscrollAllowanceX
-        : scrollConstraints.x;
-    const minScrollX =
-      cursorButton === "down"
-        ? scrollConstraints.x -
-          scrollableWidth +
-          width / zoom.value -
-          overscrollAllowanceX
-        : scrollConstraints.x - scrollableWidth + width / zoom.value;
-
-    const maxScrollY =
-      cursorButton === "down"
-        ? scrollConstraints.y + overscrollAllowanceY
-        : scrollConstraints.y;
-    const minScrollY =
-      cursorButton === "down"
-        ? scrollConstraints.y -
-          scrollableHeight +
-          height / zoom.value -
-          overscrollAllowanceY
-        : scrollConstraints.y - scrollableHeight + height / zoom.value;
-
-    // Constrain the scroll within the scroll constraints, with overscroll allowance if the cursor button is down
-    constrainedScrollX = Math.min(maxScrollX, Math.max(scrollX, minScrollX));
-    constrainedScrollY = Math.min(maxScrollY, Math.max(scrollY, minScrollY));
-
-    // Check if the zoom value requires adjustment for a centered view
+    // When we are zoomed out enough to contain constrained area in the viewport we will center the view
     const shouldAdjustForCenteredView =
       zoom.value <= maxZoomX || zoom.value <= maxZoomY;
-    if (shouldAdjustForCenteredView) {
-      // Adjust the scroll position for a centered view based on the zoom value
-      const adjustScrollForCenteredView = (zoomValue: number) => {
-        if (zoomValue <= maxZoomX) {
-          const centeredScrollX = (scrollableWidth - width / zoomValue) / -2;
-          constrainedScrollX = scrollConstraints.x + centeredScrollX;
-        }
 
-        if (zoomValue <= maxZoomY) {
-          const centeredScrollY = (scrollableHeight - height / zoomValue) / -2;
-          constrainedScrollY = scrollConstraints.y + centeredScrollY;
-        }
-      };
+    // When viewport is smaller than the scrollable area, user can pan freely within the constrained area,
+    // otherwilse the viewport is centered to the center of the scrollable area
+    let maxScrollX;
+    let minScrollX;
+    let maxScrollY;
+    let minScrollY;
 
-      adjustScrollForCenteredView(zoom.value);
+    // Get center of scrollable area
+    const constrainedScrollCenterX =
+      scrollConstraints.x + (scrollableWidth - width / zoom.value) / -2;
+    const constrainedScrollCenterY =
+      scrollConstraints.y + (scrollableHeight - height / zoom.value) / -2;
+
+    switch (true) {
+      case cursorButton === "down" && shouldAdjustForCenteredView:
+        // case when cursor button is down and we should adjust for centered view
+
+        maxScrollX = constrainedScrollCenterX + overscrollAllowanceX;
+        minScrollX = constrainedScrollCenterX - overscrollAllowanceX;
+
+        maxScrollY = constrainedScrollCenterY + overscrollAllowanceY;
+        minScrollY = constrainedScrollCenterY - overscrollAllowanceY;
+        break;
+
+      case cursorButton === "down" && !shouldAdjustForCenteredView:
+        // case when cursor button is down and we should not adjust for centered view
+        maxScrollX = scrollConstraints.x + overscrollAllowanceX;
+        minScrollX =
+          scrollConstraints.x -
+          scrollableWidth +
+          width / zoom.value -
+          overscrollAllowanceX;
+
+        maxScrollY = scrollConstraints.y + overscrollAllowanceY;
+        minScrollY =
+          scrollConstraints.y -
+          scrollableHeight +
+          height / zoom.value -
+          overscrollAllowanceY;
+        break;
+
+      case cursorButton !== "down" && shouldAdjustForCenteredView:
+        // case when cursor button is not down and we should adjust for centered view
+
+        maxScrollX = constrainedScrollCenterX;
+        minScrollX = constrainedScrollCenterX;
+
+        maxScrollY = constrainedScrollCenterY;
+        minScrollY = constrainedScrollCenterY;
+        break;
+
+      default:
+        // case when cursor button is not down and we should not adjust for centered view
+        maxScrollX = scrollConstraints.x;
+        minScrollX = scrollConstraints.x - scrollableWidth + width / zoom.value;
+
+        maxScrollY = scrollConstraints.y;
+        minScrollY =
+          scrollConstraints.y - scrollableHeight + height / zoom.value;
+        break;
     }
 
+    // Constrain the scroll within the scroll constraints
+    constrainedScrollX = Math.min(maxScrollX, Math.max(scrollX, minScrollX));
+    constrainedScrollY = Math.min(maxScrollY, Math.max(scrollY, minScrollY));
+
     // Check if the new state differs from the old state
     const stateChanged =
       constrainedScrollX !== scrollX || constrainedScrollY !== scrollY;

From 82014fe670540a8c4880a468780485fa9cdbcc10 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Arno=C5=A1t=20Pleskot?= <arnostpleskot@gmail.com>
Date: Sun, 9 Jul 2023 12:07:12 +0200
Subject: [PATCH 13/57] chore: comments and variable renaming

---
 src/components/App.tsx | 17 ++++++++++-------
 1 file changed, 10 insertions(+), 7 deletions(-)

diff --git a/src/components/App.tsx b/src/components/App.tsx
index 9316a83e5..3b15d5639 100644
--- a/src/components/App.tsx
+++ b/src/components/App.tsx
@@ -7667,13 +7667,12 @@ class App extends React.Component<AppProps, AppState> {
       cursorButton === prevState.cursorButton;
 
     // If the state hasn't changed and scrollConstraints didn't just get defined, return null
-    if (
-      !scrollConstraints ||
-      (stateUnchanged && (prevState.scrollConstraints || !scrollConstraints))
-    ) {
+    if (!scrollConstraints || (stateUnchanged && prevState.scrollConstraints)) {
       return null;
     }
 
+    console.log("fired");
+
     // Calculate the maximum possible zoom based on the viewport and scrollable area sizes
     const scrollableWidth = scrollConstraints.width;
     const scrollableHeight = scrollConstraints.height;
@@ -7707,6 +7706,10 @@ class App extends React.Component<AppProps, AppState> {
     const constrainedScrollCenterY =
       scrollConstraints.y + (scrollableHeight - height / zoom.value) / -2;
 
+    // We're using a `switch(true)` construction here to handle a set of conditions
+    // that can't be easily grouped into a regular switch statement.
+    // Each case represents a unique combination of cursorButton state and
+    // whether or not we should adjust for a centered view (constrained area is smaller than viewport).
     switch (true) {
       case cursorButton === "down" && shouldAdjustForCenteredView:
         // case when cursor button is down and we should adjust for centered view
@@ -7761,11 +7764,11 @@ class App extends React.Component<AppProps, AppState> {
     constrainedScrollY = Math.min(maxScrollY, Math.max(scrollY, minScrollY));
 
     // Check if the new state differs from the old state
-    const stateChanged =
+    // and if the state has changed, update the state and return the new state
+    const isStateChanged =
       constrainedScrollX !== scrollX || constrainedScrollY !== scrollY;
 
-    // If the state has changed, update the state and return the new state
-    if (stateChanged) {
+    if (isStateChanged) {
       const constrainedState = {
         scrollX: constrainedScrollX,
         scrollY: constrainedScrollY,

From 7fb6c2371524e2e9a48c96df74ef054f71cff142 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Arno=C5=A1t=20Pleskot?= <arnostpleskot@gmail.com>
Date: Sun, 9 Jul 2023 12:14:38 +0200
Subject: [PATCH 14/57] fix: remove forgotten console.log

---
 src/components/App.tsx | 2 --
 1 file changed, 2 deletions(-)

diff --git a/src/components/App.tsx b/src/components/App.tsx
index 3b15d5639..9983a9591 100644
--- a/src/components/App.tsx
+++ b/src/components/App.tsx
@@ -7671,8 +7671,6 @@ class App extends React.Component<AppProps, AppState> {
       return null;
     }
 
-    console.log("fired");
-
     // Calculate the maximum possible zoom based on the viewport and scrollable area sizes
     const scrollableWidth = scrollConstraints.width;
     const scrollableHeight = scrollConstraints.height;

From 7336b1c27697ee35a7779783a0ed279e5422fea5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Arno=C5=A1t=20Pleskot?= <arnostpleskot@gmail.com>
Date: Sun, 9 Jul 2023 12:59:14 +0200
Subject: [PATCH 15/57] test: update snapshot

---
 src/tests/packages/__snapshots__/utils.test.ts.snap | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/tests/packages/__snapshots__/utils.test.ts.snap b/src/tests/packages/__snapshots__/utils.test.ts.snap
index 61e456b04..34085498f 100644
--- a/src/tests/packages/__snapshots__/utils.test.ts.snap
+++ b/src/tests/packages/__snapshots__/utils.test.ts.snap
@@ -67,7 +67,6 @@ Object {
   "pendingImageElementId": null,
   "previousSelectedElementIds": Object {},
   "resizingElement": null,
-  "scrollConstraints": null,
   "scrollX": 0,
   "scrollY": 0,
   "scrolledOutside": false,

From c0bd9027cbe43edf1aff09691f7a5758bd805ade Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Arno=C5=A1t=20Pleskot?= <arnostpleskot@gmail.com>
Date: Sun, 9 Jul 2023 21:04:34 +0200
Subject: [PATCH 16/57] feat: animate the scroll to constrained area

---
 src/components/App.tsx | 54 ++++++++++++++++++++++++++++++++++++++----
 src/types.ts           |  1 +
 2 files changed, 51 insertions(+), 4 deletions(-)

diff --git a/src/components/App.tsx b/src/components/App.tsx
index 9983a9591..aa9590fc8 100644
--- a/src/components/App.tsx
+++ b/src/components/App.tsx
@@ -7657,6 +7657,10 @@ class App extends React.Component<AppProps, AppState> {
     // Set the overscroll allowance percentage
     const OVERSCROLL_ALLOWANCE_PERCENTAGE = 0.2;
 
+    if (!scrollConstraints || scrollConstraints.isAnimating) {
+      return null;
+    }
+
     // Check if the state has changed since the last render
     const stateUnchanged =
       zoom.value === prevState.zoom.value &&
@@ -7671,11 +7675,11 @@ class App extends React.Component<AppProps, AppState> {
       return null;
     }
 
-    // Calculate the maximum possible zoom based on the viewport and scrollable area sizes
+    // Calculate the zoom level on which will constrained area fit the viewport for each axis
     const scrollableWidth = scrollConstraints.width;
     const scrollableHeight = scrollConstraints.height;
-    const maxZoomX = width / scrollableWidth;
-    const maxZoomY = height / scrollableHeight;
+    const zoomLevelX = width / scrollableWidth;
+    const zoomLevelY = height / scrollableHeight;
 
     // Default scroll and zoom values
     let constrainedScrollX = scrollX;
@@ -7689,7 +7693,7 @@ class App extends React.Component<AppProps, AppState> {
 
     // When we are zoomed out enough to contain constrained area in the viewport we will center the view
     const shouldAdjustForCenteredView =
-      zoom.value <= maxZoomX || zoom.value <= maxZoomY;
+      zoom.value <= zoomLevelX || zoom.value <= zoomLevelY;
 
     // When viewport is smaller than the scrollable area, user can pan freely within the constrained area,
     // otherwilse the viewport is centered to the center of the scrollable area
@@ -7767,6 +7771,48 @@ class App extends React.Component<AppProps, AppState> {
       constrainedScrollX !== scrollX || constrainedScrollY !== scrollY;
 
     if (isStateChanged) {
+      // Animate the scroll position when the cursor button is not down and scroll position is outside of the scroll constraints
+      if (
+        (scrollX < scrollConstraints.x ||
+          scrollX + width > scrollConstraints.x + scrollConstraints.width ||
+          scrollY < scrollConstraints.y ||
+          scrollY + height > scrollConstraints.y + scrollConstraints.height) &&
+        cursorButton !== "down" &&
+        !scrollConstraints.isAnimating
+      ) {
+        this.setState({
+          scrollConstraints: { ...scrollConstraints, isAnimating: true },
+        });
+
+        easeToValuesRAF({
+          fromValues: { scrollX, scrollY },
+          toValues: {
+            scrollX: constrainedScrollX,
+            scrollY: constrainedScrollY,
+          },
+          onStep: ({ scrollX, scrollY }) => {
+            console.log("onStep");
+            this.setState({
+              scrollX,
+              scrollY,
+            });
+          },
+          onStart: () => {
+            this.setState({
+              scrollConstraints: { ...scrollConstraints, isAnimating: true },
+            });
+          },
+          onEnd: () => {
+            this.setState({
+              scrollConstraints: { ...scrollConstraints, isAnimating: false },
+            });
+          },
+        });
+
+        console.log("isAnimating");
+        return null;
+      }
+
       const constrainedState = {
         scrollX: constrainedScrollX,
         scrollY: constrainedScrollY,
diff --git a/src/types.ts b/src/types.ts
index 25f42872b..f048db85b 100644
--- a/src/types.ts
+++ b/src/types.ts
@@ -228,6 +228,7 @@ export type AppState = {
     y: number;
     width: number;
     height: number;
+    isAnimating?: boolean;
   } | null;
 };
 

From 71918e57a84258bf82d0b0badbde3d3ec9314fbe Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Arno=C5=A1t=20Pleskot?= <arnostpleskot@gmail.com>
Date: Sun, 9 Jul 2023 21:09:10 +0200
Subject: [PATCH 17/57] feat: cleanup

---
 src/components/App.tsx | 5 +----
 1 file changed, 1 insertion(+), 4 deletions(-)

diff --git a/src/components/App.tsx b/src/components/App.tsx
index aa9590fc8..da46e27f7 100644
--- a/src/components/App.tsx
+++ b/src/components/App.tsx
@@ -7777,8 +7777,7 @@ class App extends React.Component<AppProps, AppState> {
           scrollX + width > scrollConstraints.x + scrollConstraints.width ||
           scrollY < scrollConstraints.y ||
           scrollY + height > scrollConstraints.y + scrollConstraints.height) &&
-        cursorButton !== "down" &&
-        !scrollConstraints.isAnimating
+        cursorButton !== "down"
       ) {
         this.setState({
           scrollConstraints: { ...scrollConstraints, isAnimating: true },
@@ -7791,7 +7790,6 @@ class App extends React.Component<AppProps, AppState> {
             scrollY: constrainedScrollY,
           },
           onStep: ({ scrollX, scrollY }) => {
-            console.log("onStep");
             this.setState({
               scrollX,
               scrollY,
@@ -7809,7 +7807,6 @@ class App extends React.Component<AppProps, AppState> {
           },
         });
 
-        console.log("isAnimating");
         return null;
       }
 

From 92be92071a4a17c56cdd1b4c54ec8281166c880c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Arno=C5=A1t=20Pleskot?= <arnostpleskot@gmail.com>
Date: Sun, 9 Jul 2023 23:26:26 +0200
Subject: [PATCH 18/57] feat: disable animation on zooming

---
 src/components/App.tsx | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/components/App.tsx b/src/components/App.tsx
index da46e27f7..fcd95499b 100644
--- a/src/components/App.tsx
+++ b/src/components/App.tsx
@@ -7771,13 +7771,15 @@ class App extends React.Component<AppProps, AppState> {
       constrainedScrollX !== scrollX || constrainedScrollY !== scrollY;
 
     if (isStateChanged) {
-      // Animate the scroll position when the cursor button is not down and scroll position is outside of the scroll constraints
+      // Animate the scroll position when the cursor button is not down and scroll position is outside of the scroll constraints.
+      // We don't want to animate the scroll position when the user is dragging the canvas or zooiming in/out.
       if (
         (scrollX < scrollConstraints.x ||
           scrollX + width > scrollConstraints.x + scrollConstraints.width ||
           scrollY < scrollConstraints.y ||
           scrollY + height > scrollConstraints.y + scrollConstraints.height) &&
-        cursorButton !== "down"
+        cursorButton !== "down" &&
+        zoom.value === prevState.zoom.value
       ) {
         this.setState({
           scrollConstraints: { ...scrollConstraints, isAnimating: true },

From e8e391e4650fdd8cd08b48dcc47a43d3dcc17b26 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Arno=C5=A1t=20Pleskot?= <arnostpleskot@gmail.com>
Date: Sun, 9 Jul 2023 23:50:59 +0200
Subject: [PATCH 19/57] refactor: split constrainScroll into smaller functions

---
 src/components/App.tsx | 298 +++++++++++++++++++++++++----------------
 1 file changed, 179 insertions(+), 119 deletions(-)

diff --git a/src/components/App.tsx b/src/components/App.tsx
index fcd95499b..be56e086d 100644
--- a/src/components/App.tsx
+++ b/src/components/App.tsx
@@ -7675,154 +7675,214 @@ class App extends React.Component<AppProps, AppState> {
       return null;
     }
 
-    // Calculate the zoom level on which will constrained area fit the viewport for each axis
-    const scrollableWidth = scrollConstraints.width;
-    const scrollableHeight = scrollConstraints.height;
-    const zoomLevelX = width / scrollableWidth;
-    const zoomLevelY = height / scrollableHeight;
+    /**
+     * Calculate the zoom levels on which will constrained area fits the viewport for each axis
+     * @returns The zoom levels for the X and Y axes.
+     */
+    const calculateZoomLevel = () => {
+      const scrollableWidth = scrollConstraints.width;
+      const scrollableHeight = scrollConstraints.height;
+      const zoomLevelX = width / scrollableWidth;
+      const zoomLevelY = height / scrollableHeight;
+      return { zoomLevelX, zoomLevelY };
+    };
 
-    // Default scroll and zoom values
-    let constrainedScrollX = scrollX;
-    let constrainedScrollY = scrollY;
+    /**
+     * Calculates the center position of the constrained scroll area.
+     * @returns The X and Y coordinates of the center position.
+     */
+    const calculateConstrainedScrollCenter = () => {
+      const constrainedScrollCenterX =
+        scrollConstraints.x +
+        (scrollConstraints.width - width / zoom.value) / -2;
+      const constrainedScrollCenterY =
+        scrollConstraints.y +
+        (scrollConstraints.height - height / zoom.value) / -2;
+      return { constrainedScrollCenterX, constrainedScrollCenterY };
+    };
 
-    // Calculate the overscroll allowance for each axis
-    const overscrollAllowanceX =
-      OVERSCROLL_ALLOWANCE_PERCENTAGE * scrollableWidth;
-    const overscrollAllowanceY =
-      OVERSCROLL_ALLOWANCE_PERCENTAGE * scrollableHeight;
+    /**
+     * Calculates the overscroll allowance values for the constrained area.
+     * @returns The overscroll allowance values for the X and Y axes.
+     */
+    const calculateOverscrollAllowance = () => {
+      const overscrollAllowanceX =
+        OVERSCROLL_ALLOWANCE_PERCENTAGE * scrollConstraints.width;
+      const overscrollAllowanceY =
+        OVERSCROLL_ALLOWANCE_PERCENTAGE * scrollConstraints.height;
+      return { overscrollAllowanceX, overscrollAllowanceY };
+    };
 
-    // When we are zoomed out enough to contain constrained area in the viewport we will center the view
-    const shouldAdjustForCenteredView =
-      zoom.value <= zoomLevelX || zoom.value <= zoomLevelY;
-
-    // When viewport is smaller than the scrollable area, user can pan freely within the constrained area,
-    // otherwilse the viewport is centered to the center of the scrollable area
-    let maxScrollX;
-    let minScrollX;
-    let maxScrollY;
-    let minScrollY;
-
-    // Get center of scrollable area
-    const constrainedScrollCenterX =
-      scrollConstraints.x + (scrollableWidth - width / zoom.value) / -2;
-    const constrainedScrollCenterY =
-      scrollConstraints.y + (scrollableHeight - height / zoom.value) / -2;
-
-    // We're using a `switch(true)` construction here to handle a set of conditions
-    // that can't be easily grouped into a regular switch statement.
-    // Each case represents a unique combination of cursorButton state and
-    // whether or not we should adjust for a centered view (constrained area is smaller than viewport).
-    switch (true) {
-      case cursorButton === "down" && shouldAdjustForCenteredView:
-        // case when cursor button is down and we should adjust for centered view
+    /**
+     * Calculates the minimum and maximum scroll values based on the current state.
+     * @param shouldAdjustForCenteredView - Whether the view should be adjusted for centered view - when constrained area fits the viewport.
+     * @param overscrollAllowanceX - The overscroll allowance value for the X axis.
+     * @param overscrollAllowanceY - The overscroll allowance value for the Y axis.
+     * @param constrainedScrollCenterX - The X coordinate of the constrained scroll area center.
+     * @param constrainedScrollCenterY - The Y coordinate of the constrained scroll area center.
+     * @returns The minimum and maximum scroll values for the X and Y axes.
+     */
+    const calculateMinMaxScrollValues = (
+      shouldAdjustForCenteredView: boolean,
+      overscrollAllowanceX: number,
+      overscrollAllowanceY: number,
+      constrainedScrollCenterX: number,
+      constrainedScrollCenterY: number,
+    ) => {
+      let maxScrollX;
+      let minScrollX;
+      let maxScrollY;
+      let minScrollY;
 
+      if (cursorButton === "down" && shouldAdjustForCenteredView) {
         maxScrollX = constrainedScrollCenterX + overscrollAllowanceX;
         minScrollX = constrainedScrollCenterX - overscrollAllowanceX;
-
         maxScrollY = constrainedScrollCenterY + overscrollAllowanceY;
         minScrollY = constrainedScrollCenterY - overscrollAllowanceY;
-        break;
-
-      case cursorButton === "down" && !shouldAdjustForCenteredView:
-        // case when cursor button is down and we should not adjust for centered view
+      } else if (cursorButton === "down" && !shouldAdjustForCenteredView) {
         maxScrollX = scrollConstraints.x + overscrollAllowanceX;
         minScrollX =
           scrollConstraints.x -
-          scrollableWidth +
+          scrollConstraints.width +
           width / zoom.value -
           overscrollAllowanceX;
-
         maxScrollY = scrollConstraints.y + overscrollAllowanceY;
         minScrollY =
           scrollConstraints.y -
-          scrollableHeight +
+          scrollConstraints.height +
           height / zoom.value -
           overscrollAllowanceY;
-        break;
-
-      case cursorButton !== "down" && shouldAdjustForCenteredView:
-        // case when cursor button is not down and we should adjust for centered view
-
+      } else if (cursorButton !== "down" && shouldAdjustForCenteredView) {
         maxScrollX = constrainedScrollCenterX;
         minScrollX = constrainedScrollCenterX;
-
         maxScrollY = constrainedScrollCenterY;
         minScrollY = constrainedScrollCenterY;
-        break;
-
-      default:
-        // case when cursor button is not down and we should not adjust for centered view
+      } else {
         maxScrollX = scrollConstraints.x;
-        minScrollX = scrollConstraints.x - scrollableWidth + width / zoom.value;
-
+        minScrollX =
+          scrollConstraints.x - scrollConstraints.width + width / zoom.value;
         maxScrollY = scrollConstraints.y;
         minScrollY =
-          scrollConstraints.y - scrollableHeight + height / zoom.value;
-        break;
-    }
-
-    // Constrain the scroll within the scroll constraints
-    constrainedScrollX = Math.min(maxScrollX, Math.max(scrollX, minScrollX));
-    constrainedScrollY = Math.min(maxScrollY, Math.max(scrollY, minScrollY));
-
-    // Check if the new state differs from the old state
-    // and if the state has changed, update the state and return the new state
-    const isStateChanged =
-      constrainedScrollX !== scrollX || constrainedScrollY !== scrollY;
-
-    if (isStateChanged) {
-      // Animate the scroll position when the cursor button is not down and scroll position is outside of the scroll constraints.
-      // We don't want to animate the scroll position when the user is dragging the canvas or zooiming in/out.
-      if (
-        (scrollX < scrollConstraints.x ||
-          scrollX + width > scrollConstraints.x + scrollConstraints.width ||
-          scrollY < scrollConstraints.y ||
-          scrollY + height > scrollConstraints.y + scrollConstraints.height) &&
-        cursorButton !== "down" &&
-        zoom.value === prevState.zoom.value
-      ) {
-        this.setState({
-          scrollConstraints: { ...scrollConstraints, isAnimating: true },
-        });
-
-        easeToValuesRAF({
-          fromValues: { scrollX, scrollY },
-          toValues: {
-            scrollX: constrainedScrollX,
-            scrollY: constrainedScrollY,
-          },
-          onStep: ({ scrollX, scrollY }) => {
-            this.setState({
-              scrollX,
-              scrollY,
-            });
-          },
-          onStart: () => {
-            this.setState({
-              scrollConstraints: { ...scrollConstraints, isAnimating: true },
-            });
-          },
-          onEnd: () => {
-            this.setState({
-              scrollConstraints: { ...scrollConstraints, isAnimating: false },
-            });
-          },
-        });
-
-        return null;
+          scrollConstraints.y - scrollConstraints.height + height / zoom.value;
       }
 
-      const constrainedState = {
-        scrollX: constrainedScrollX,
-        scrollY: constrainedScrollY,
-        zoom,
-      };
+      return { maxScrollX, minScrollX, maxScrollY, minScrollY };
+    };
 
-      this.setState(constrainedState);
-      return constrainedState;
-    }
+    /**
+     * Constrains the scroll values within the constrained area.
+     * @param maxScrollX - The maximum scroll value for the X axis.
+     * @param minScrollX - The minimum scroll value for the X axis.
+     * @param maxScrollY - The maximum scroll value for the Y axis.
+     * @param minScrollY - The minimum scroll value for the Y axis.
+     * @returns The constrained scroll values for the X and Y axes.
+     */
+    const constrainScrollValues = (
+      maxScrollX: number,
+      minScrollX: number,
+      maxScrollY: number,
+      minScrollY: number,
+    ) => {
+      const constrainedScrollX = Math.min(
+        maxScrollX,
+        Math.max(scrollX, minScrollX),
+      );
+      const constrainedScrollY = Math.min(
+        maxScrollY,
+        Math.max(scrollY, minScrollY),
+      );
+      return { constrainedScrollX, constrainedScrollY };
+    };
 
-    return null;
+    /**
+     * Handles the state change based on the constrained scroll values.
+     * Also handles the animation to the constrained area when the viewport is outside of constrained area.
+     * @param constrainedScrollX - The constrained scroll value for the X axis.
+     * @param constrainedScrollY - The constrained scroll value for the Y axis.
+     * @returns The constrained state if the state has changed, when needs to be passed into render function, otherwise null.
+     */
+    const handleStateChange = (
+      constrainedScrollX: number,
+      constrainedScrollY: number,
+    ) => {
+      const isStateChanged =
+        constrainedScrollX !== scrollX || constrainedScrollY !== scrollY;
+
+      if (isStateChanged) {
+        if (
+          (scrollX < scrollConstraints.x ||
+            scrollX + width > scrollConstraints.x + scrollConstraints.width ||
+            scrollY < scrollConstraints.y ||
+            scrollY + height >
+              scrollConstraints.y + scrollConstraints.height) &&
+          cursorButton !== "down" &&
+          zoom.value === prevState.zoom.value
+        ) {
+          this.setState({
+            scrollConstraints: { ...scrollConstraints, isAnimating: true },
+          });
+
+          easeToValuesRAF({
+            fromValues: { scrollX, scrollY },
+            toValues: {
+              scrollX: constrainedScrollX,
+              scrollY: constrainedScrollY,
+            },
+            onStep: ({ scrollX, scrollY }) => {
+              this.setState({ scrollX, scrollY });
+            },
+            onStart: () => {
+              this.setState({
+                scrollConstraints: { ...scrollConstraints, isAnimating: true },
+              });
+            },
+            onEnd: () => {
+              this.setState({
+                scrollConstraints: { ...scrollConstraints, isAnimating: false },
+              });
+            },
+          });
+
+          return null;
+        }
+
+        const constrainedState = {
+          scrollX: constrainedScrollX,
+          scrollY: constrainedScrollY,
+          zoom,
+        };
+
+        this.setState(constrainedState);
+        return constrainedState;
+      }
+
+      return null;
+    };
+
+    // Compute the constrained scroll values.
+    const { zoomLevelX, zoomLevelY } = calculateZoomLevel();
+    const { constrainedScrollCenterX, constrainedScrollCenterY } =
+      calculateConstrainedScrollCenter();
+    const { overscrollAllowanceX, overscrollAllowanceY } =
+      calculateOverscrollAllowance();
+    const shouldAdjustForCenteredView =
+      zoom.value <= zoomLevelX || zoom.value <= zoomLevelY;
+    const { maxScrollX, minScrollX, maxScrollY, minScrollY } =
+      calculateMinMaxScrollValues(
+        shouldAdjustForCenteredView,
+        overscrollAllowanceX,
+        overscrollAllowanceY,
+        constrainedScrollCenterX,
+        constrainedScrollCenterY,
+      );
+    const { constrainedScrollX, constrainedScrollY } = constrainScrollValues(
+      maxScrollX,
+      minScrollX,
+      maxScrollY,
+      minScrollY,
+    );
+
+    return handleStateChange(constrainedScrollX, constrainedScrollY);
   };
 }
 

From 9562e4309f84529ac852b3971c6672e2ee27550e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Arno=C5=A1t=20Pleskot?= <arnostpleskot@gmail.com>
Date: Mon, 10 Jul 2023 18:10:22 +0200
Subject: [PATCH 20/57] feat: add zoom lock and viewportZoomFactor

---
 src/components/App.tsx | 60 +++++++++++++++++++++++++++---------------
 src/types.ts           |  4 +++
 2 files changed, 43 insertions(+), 21 deletions(-)

diff --git a/src/components/App.tsx b/src/components/App.tsx
index be56e086d..4deba45a9 100644
--- a/src/components/App.tsx
+++ b/src/components/App.tsx
@@ -223,6 +223,7 @@ import {
   FrameNameBoundsCache,
   SidebarName,
   SidebarTabName,
+  NormalizedZoomValue,
 } from "../types";
 import {
   debounce,
@@ -7650,20 +7651,17 @@ class App extends React.Component<AppProps, AppState> {
       scrollConstraints,
       width,
       height,
-      zoom,
+      zoom: currentZoom,
       cursorButton,
     } = this.state;
 
-    // Set the overscroll allowance percentage
-    const OVERSCROLL_ALLOWANCE_PERCENTAGE = 0.2;
-
     if (!scrollConstraints || scrollConstraints.isAnimating) {
       return null;
     }
 
     // Check if the state has changed since the last render
     const stateUnchanged =
-      zoom.value === prevState.zoom.value &&
+      currentZoom.value === prevState.zoom.value &&
       scrollX === prevState.scrollX &&
       scrollY === prevState.scrollY &&
       width === prevState.width &&
@@ -7671,10 +7669,17 @@ class App extends React.Component<AppProps, AppState> {
       cursorButton === prevState.cursorButton;
 
     // If the state hasn't changed and scrollConstraints didn't just get defined, return null
-    if (!scrollConstraints || (stateUnchanged && prevState.scrollConstraints)) {
+    if (stateUnchanged && prevState.scrollConstraints) {
       return null;
     }
 
+    // Set the overscroll allowance percentage
+    const OVERSCROLL_ALLOWANCE_PERCENTAGE = 0.2;
+    const lockZoom = scrollConstraints.opts?.lockZoom ?? false;
+    const viewportZoomFactor = scrollConstraints.opts?.viewportZoomFactor
+      ? Math.min(1, Math.max(scrollConstraints.opts.viewportZoomFactor, 0.1))
+      : 0.9;
+
     /**
      * Calculate the zoom levels on which will constrained area fits the viewport for each axis
      * @returns The zoom levels for the X and Y axes.
@@ -7684,20 +7689,21 @@ class App extends React.Component<AppProps, AppState> {
       const scrollableHeight = scrollConstraints.height;
       const zoomLevelX = width / scrollableWidth;
       const zoomLevelY = height / scrollableHeight;
-      return { zoomLevelX, zoomLevelY };
+      const maxZoomLevel = lockZoom
+        ? Math.min(zoomLevelX, zoomLevelY) * viewportZoomFactor
+        : null;
+      return { zoomLevelX, zoomLevelY, maxZoomLevel };
     };
 
     /**
      * Calculates the center position of the constrained scroll area.
      * @returns The X and Y coordinates of the center position.
      */
-    const calculateConstrainedScrollCenter = () => {
+    const calculateConstrainedScrollCenter = (zoom: number) => {
       const constrainedScrollCenterX =
-        scrollConstraints.x +
-        (scrollConstraints.width - width / zoom.value) / -2;
+        scrollConstraints.x + (scrollConstraints.width - width / zoom) / -2;
       const constrainedScrollCenterY =
-        scrollConstraints.y +
-        (scrollConstraints.height - height / zoom.value) / -2;
+        scrollConstraints.y + (scrollConstraints.height - height / zoom) / -2;
       return { constrainedScrollCenterX, constrainedScrollCenterY };
     };
 
@@ -7728,6 +7734,7 @@ class App extends React.Component<AppProps, AppState> {
       overscrollAllowanceY: number,
       constrainedScrollCenterX: number,
       constrainedScrollCenterY: number,
+      zoom: number,
     ) => {
       let maxScrollX;
       let minScrollX;
@@ -7744,13 +7751,13 @@ class App extends React.Component<AppProps, AppState> {
         minScrollX =
           scrollConstraints.x -
           scrollConstraints.width +
-          width / zoom.value -
+          width / zoom -
           overscrollAllowanceX;
         maxScrollY = scrollConstraints.y + overscrollAllowanceY;
         minScrollY =
           scrollConstraints.y -
           scrollConstraints.height +
-          height / zoom.value -
+          height / zoom -
           overscrollAllowanceY;
       } else if (cursorButton !== "down" && shouldAdjustForCenteredView) {
         maxScrollX = constrainedScrollCenterX;
@@ -7760,10 +7767,10 @@ class App extends React.Component<AppProps, AppState> {
       } else {
         maxScrollX = scrollConstraints.x;
         minScrollX =
-          scrollConstraints.x - scrollConstraints.width + width / zoom.value;
+          scrollConstraints.x - scrollConstraints.width + width / zoom;
         maxScrollY = scrollConstraints.y;
         minScrollY =
-          scrollConstraints.y - scrollConstraints.height + height / zoom.value;
+          scrollConstraints.y - scrollConstraints.height + height / zoom;
       }
 
       return { maxScrollX, minScrollX, maxScrollY, minScrollY };
@@ -7816,7 +7823,7 @@ class App extends React.Component<AppProps, AppState> {
             scrollY + height >
               scrollConstraints.y + scrollConstraints.height) &&
           cursorButton !== "down" &&
-          zoom.value === prevState.zoom.value
+          currentZoom.value === prevState.zoom.value
         ) {
           this.setState({
             scrollConstraints: { ...scrollConstraints, isAnimating: true },
@@ -7849,7 +7856,14 @@ class App extends React.Component<AppProps, AppState> {
         const constrainedState = {
           scrollX: constrainedScrollX,
           scrollY: constrainedScrollY,
-          zoom,
+          zoom: {
+            value: maxZoomLevel
+              ? (Math.max(
+                  currentZoom.value,
+                  maxZoomLevel,
+                ) as NormalizedZoomValue)
+              : currentZoom.value,
+          },
         };
 
         this.setState(constrainedState);
@@ -7860,13 +7874,16 @@ class App extends React.Component<AppProps, AppState> {
     };
 
     // Compute the constrained scroll values.
-    const { zoomLevelX, zoomLevelY } = calculateZoomLevel();
+    const { zoomLevelX, zoomLevelY, maxZoomLevel } = calculateZoomLevel();
+    const zoom = maxZoomLevel
+      ? Math.max(maxZoomLevel, currentZoom.value)
+      : currentZoom.value;
     const { constrainedScrollCenterX, constrainedScrollCenterY } =
-      calculateConstrainedScrollCenter();
+      calculateConstrainedScrollCenter(zoom);
     const { overscrollAllowanceX, overscrollAllowanceY } =
       calculateOverscrollAllowance();
     const shouldAdjustForCenteredView =
-      zoom.value <= zoomLevelX || zoom.value <= zoomLevelY;
+      zoom <= zoomLevelX || zoom <= zoomLevelY;
     const { maxScrollX, minScrollX, maxScrollY, minScrollY } =
       calculateMinMaxScrollValues(
         shouldAdjustForCenteredView,
@@ -7874,6 +7891,7 @@ class App extends React.Component<AppProps, AppState> {
         overscrollAllowanceY,
         constrainedScrollCenterX,
         constrainedScrollCenterY,
+        zoom,
       );
     const { constrainedScrollX, constrainedScrollY } = constrainScrollValues(
       maxScrollX,
diff --git a/src/types.ts b/src/types.ts
index f048db85b..4b602f784 100644
--- a/src/types.ts
+++ b/src/types.ts
@@ -229,6 +229,10 @@ export type AppState = {
     width: number;
     height: number;
     isAnimating?: boolean;
+    opts?: {
+      viewportZoomFactor?: number;
+      lockZoom?: boolean;
+    };
   } | null;
 };
 

From 6d165971fc355110b247da388d95b1197607d0d4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Arno=C5=A1t=20Pleskot?= <arnostpleskot@gmail.com>
Date: Mon, 10 Jul 2023 19:48:55 +0200
Subject: [PATCH 21/57] feat: set view mode when constrains set via props

---
 src/components/App.tsx            | 4 ----
 src/packages/excalidraw/index.tsx | 2 +-
 2 files changed, 1 insertion(+), 5 deletions(-)

diff --git a/src/components/App.tsx b/src/components/App.tsx
index 4deba45a9..fa1627060 100644
--- a/src/components/App.tsx
+++ b/src/components/App.tsx
@@ -7825,10 +7825,6 @@ class App extends React.Component<AppProps, AppState> {
           cursorButton !== "down" &&
           currentZoom.value === prevState.zoom.value
         ) {
-          this.setState({
-            scrollConstraints: { ...scrollConstraints, isAnimating: true },
-          });
-
           easeToValuesRAF({
             fromValues: { scrollX, scrollY },
             toValues: {
diff --git a/src/packages/excalidraw/index.tsx b/src/packages/excalidraw/index.tsx
index 02056bbb5..295f1d8d5 100644
--- a/src/packages/excalidraw/index.tsx
+++ b/src/packages/excalidraw/index.tsx
@@ -99,7 +99,7 @@ const ExcalidrawBase = (props: ExcalidrawProps) => {
           onPointerUpdate={onPointerUpdate}
           renderTopRightUI={renderTopRightUI}
           langCode={langCode}
-          viewModeEnabled={viewModeEnabled}
+          viewModeEnabled={viewModeEnabled || !!scrollConstraints}
           zenModeEnabled={zenModeEnabled}
           gridModeEnabled={gridModeEnabled}
           libraryReturnUrl={libraryReturnUrl}

From 71eb3023b2fd267db44fc5d11c4fb6814b4206a6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Arno=C5=A1t=20Pleskot?= <arnostpleskot@gmail.com>
Date: Mon, 10 Jul 2023 19:59:48 +0200
Subject: [PATCH 22/57] [debug]

---
 src/excalidraw-app/index.tsx | 7 +++++++
 1 file changed, 7 insertions(+)

diff --git a/src/excalidraw-app/index.tsx b/src/excalidraw-app/index.tsx
index 860437f3c..c13815f3c 100644
--- a/src/excalidraw-app/index.tsx
+++ b/src/excalidraw-app/index.tsx
@@ -696,6 +696,13 @@ const ExcalidrawWrapper = () => {
             />
           );
         }}
+        scrollConstraints={{
+          x: 0,
+          y: 0,
+          width: 2560,
+          height: 1300,
+          opts: { lockZoom: true, viewportZoomFactor: 0.1 },
+        }}
       >
         <AppMainMenu
           setCollabDialogShown={setCollabDialogShown}

From 132750f753d946508473de4e38fc8245a9fbba39 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Arno=C5=A1t=20Pleskot?= <arnostpleskot@gmail.com>
Date: Fri, 14 Jul 2023 20:46:48 +0200
Subject: [PATCH 23/57] feat: splitting logic, memoization

---
 src/components/App.tsx       | 436 +++++++++++++++++++++++------------
 src/excalidraw-app/index.tsx |   3 +-
 src/types.ts                 |  22 +-
 3 files changed, 300 insertions(+), 161 deletions(-)

diff --git a/src/components/App.tsx b/src/components/App.tsx
index fa1627060..a47aea270 100644
--- a/src/components/App.tsx
+++ b/src/components/App.tsx
@@ -223,6 +223,7 @@ import {
   FrameNameBoundsCache,
   SidebarName,
   SidebarTabName,
+  ScrollConstraints,
   NormalizedZoomValue,
 } from "../types";
 import {
@@ -251,6 +252,7 @@ import {
   easeToValuesRAF,
   muteFSAbortError,
   easeOut,
+  isShallowEqual,
 } from "../utils";
 import {
   ContextMenu,
@@ -457,6 +459,13 @@ class App extends React.Component<AppProps, AppState> {
   lastPointerDown: React.PointerEvent<HTMLElement> | null = null;
   lastPointerUp: React.PointerEvent<HTMLElement> | PointerEvent | null = null;
   lastViewportPosition = { x: 0, y: 0 };
+  private memoizedScrollConstraints: {
+    input: {
+      scrollConstraints: AppState["scrollConstraints"];
+      values: Omit<Partial<AppState>, "zoom"> & { zoom: NormalizedZoomValue };
+    };
+    result: ReturnType<App["calculateConstraints"]>;
+  } | null = null;
 
   constructor(props: AppProps) {
     super(props);
@@ -1632,9 +1641,74 @@ class App extends React.Component<AppProps, AppState> {
       );
     }
 
-    const constraintedScroll = this.constrainScroll(prevState);
+    let constraintedScrollState;
+    if (
+      this.state.scrollConstraints &&
+      !this.state.scrollConstraints.isAnimating
+    ) {
+      const {
+        scrollX,
+        scrollY,
+        width,
+        height,
+        scrollConstraints,
+        zoom,
+        cursorButton,
+      } = this.state;
 
-    this.renderScene(constraintedScroll);
+      // TODO: this could be replaced with memoization function like _.memoize()
+      const calculatedConstraints =
+        isShallowEqual(
+          scrollConstraints,
+          this.memoizedScrollConstraints?.input.scrollConstraints ?? {},
+        ) &&
+        isShallowEqual(
+          { width, height, zoom: zoom.value, cursorButton },
+          this.memoizedScrollConstraints?.input.values ?? {},
+        ) &&
+        this.memoizedScrollConstraints
+          ? this.memoizedScrollConstraints.result
+          : this.calculateConstraints({
+              scrollConstraints,
+              width,
+              height,
+              zoom,
+              cursorButton,
+            });
+
+      this.memoizedScrollConstraints = {
+        input: {
+          scrollConstraints,
+          values: { width, height, zoom: zoom.value, cursorButton },
+        },
+        result: calculatedConstraints,
+      };
+
+      const constrainedScrollValues = this.constrainScrollValues({
+        ...calculatedConstraints,
+        scrollX,
+        scrollY,
+      });
+
+      const isViewportOutsideOfConstrainedArea =
+        this.isViewportOutsideOfConstrainedArea({
+          scrollX,
+          scrollY,
+          width,
+          height,
+          scrollConstraints,
+        });
+
+      constraintedScrollState = this.handleConstrainedScrollStateChange({
+        ...constrainedScrollValues,
+        shouldAnimate:
+          isViewportOutsideOfConstrainedArea &&
+          this.state.cursorButton !== "down" &&
+          prevState.zoom.value === this.state.zoom.value,
+      });
+    }
+
+    this.renderScene(constraintedScrollState);
     this.history.record(this.state, this.scene.getElementsIncludingDeleted());
 
     // Do not notify consumers if we're still loading the scene. Among other
@@ -7629,55 +7703,59 @@ class App extends React.Component<AppProps, AppState> {
    * @param scrollConstraints - The new scroll constraints.
    */
   public setScrollConstraints = (
-    scrollConstraints: AppState["scrollConstraints"],
+    scrollConstraints: ScrollConstraints | null,
   ) => {
-    this.setState({
-      scrollConstraints,
-      viewModeEnabled: !!scrollConstraints,
-    });
+    if (scrollConstraints) {
+      const { scrollX, scrollY, width, height, zoom, cursorButton } =
+        this.state;
+      const constrainedScrollValues = this.constrainScrollValues({
+        ...this.calculateConstraints({
+          scrollConstraints,
+          zoom,
+          cursorButton,
+          width,
+          height,
+        }),
+        scrollX,
+        scrollY,
+      });
+      this.animateConstainedScroll({
+        ...constrainedScrollValues,
+        opts: {
+          onEndCallback: () => {
+            this.setState({
+              scrollConstraints,
+              viewModeEnabled: true,
+            });
+          },
+        },
+      });
+    } else {
+      this.setState({
+        scrollConstraints: null,
+        viewModeEnabled: false,
+      });
+    }
   };
 
-  /**
-   * Constrains the scroll position of the app state within the defined scroll constraints.
-   * The scroll position is adjusted based on the application's current state including zoom level and viewport dimensions.
-   *
-   * @param nextState - The next state of the application, or a subset of the application state.
-   * @returns The modified next state with scrollX and scrollY constrained to the scroll constraints.
-   */
-  private constrainScroll = (prevState: AppState): ConstrainedScrollValues => {
-    const {
-      scrollX,
-      scrollY,
-      scrollConstraints,
-      width,
-      height,
-      zoom: currentZoom,
-      cursorButton,
-    } = this.state;
-
-    if (!scrollConstraints || scrollConstraints.isAnimating) {
-      return null;
-    }
-
-    // Check if the state has changed since the last render
-    const stateUnchanged =
-      currentZoom.value === prevState.zoom.value &&
-      scrollX === prevState.scrollX &&
-      scrollY === prevState.scrollY &&
-      width === prevState.width &&
-      height === prevState.height &&
-      cursorButton === prevState.cursorButton;
-
-    // If the state hasn't changed and scrollConstraints didn't just get defined, return null
-    if (stateUnchanged && prevState.scrollConstraints) {
-      return null;
-    }
-
+  private calculateConstraints = ({
+    scrollConstraints,
+    width,
+    height,
+    zoom,
+    cursorButton,
+  }: {
+    scrollConstraints: ScrollConstraints;
+    width: AppState["width"];
+    height: AppState["height"];
+    zoom: AppState["zoom"];
+    cursorButton: AppState["cursorButton"];
+  }) => {
     // Set the overscroll allowance percentage
     const OVERSCROLL_ALLOWANCE_PERCENTAGE = 0.2;
-    const lockZoom = scrollConstraints.opts?.lockZoom ?? false;
-    const viewportZoomFactor = scrollConstraints.opts?.viewportZoomFactor
-      ? Math.min(1, Math.max(scrollConstraints.opts.viewportZoomFactor, 0.1))
+    const lockZoom = scrollConstraints.lockZoom ?? false;
+    const viewportZoomFactor = scrollConstraints.viewportZoomFactor
+      ? Math.min(1, Math.max(scrollConstraints.viewportZoomFactor, 0.1))
       : 0.9;
 
     /**
@@ -7776,110 +7854,16 @@ class App extends React.Component<AppProps, AppState> {
       return { maxScrollX, minScrollX, maxScrollY, minScrollY };
     };
 
-    /**
-     * Constrains the scroll values within the constrained area.
-     * @param maxScrollX - The maximum scroll value for the X axis.
-     * @param minScrollX - The minimum scroll value for the X axis.
-     * @param maxScrollY - The maximum scroll value for the Y axis.
-     * @param minScrollY - The minimum scroll value for the Y axis.
-     * @returns The constrained scroll values for the X and Y axes.
-     */
-    const constrainScrollValues = (
-      maxScrollX: number,
-      minScrollX: number,
-      maxScrollY: number,
-      minScrollY: number,
-    ) => {
-      const constrainedScrollX = Math.min(
-        maxScrollX,
-        Math.max(scrollX, minScrollX),
-      );
-      const constrainedScrollY = Math.min(
-        maxScrollY,
-        Math.max(scrollY, minScrollY),
-      );
-      return { constrainedScrollX, constrainedScrollY };
-    };
-
-    /**
-     * Handles the state change based on the constrained scroll values.
-     * Also handles the animation to the constrained area when the viewport is outside of constrained area.
-     * @param constrainedScrollX - The constrained scroll value for the X axis.
-     * @param constrainedScrollY - The constrained scroll value for the Y axis.
-     * @returns The constrained state if the state has changed, when needs to be passed into render function, otherwise null.
-     */
-    const handleStateChange = (
-      constrainedScrollX: number,
-      constrainedScrollY: number,
-    ) => {
-      const isStateChanged =
-        constrainedScrollX !== scrollX || constrainedScrollY !== scrollY;
-
-      if (isStateChanged) {
-        if (
-          (scrollX < scrollConstraints.x ||
-            scrollX + width > scrollConstraints.x + scrollConstraints.width ||
-            scrollY < scrollConstraints.y ||
-            scrollY + height >
-              scrollConstraints.y + scrollConstraints.height) &&
-          cursorButton !== "down" &&
-          currentZoom.value === prevState.zoom.value
-        ) {
-          easeToValuesRAF({
-            fromValues: { scrollX, scrollY },
-            toValues: {
-              scrollX: constrainedScrollX,
-              scrollY: constrainedScrollY,
-            },
-            onStep: ({ scrollX, scrollY }) => {
-              this.setState({ scrollX, scrollY });
-            },
-            onStart: () => {
-              this.setState({
-                scrollConstraints: { ...scrollConstraints, isAnimating: true },
-              });
-            },
-            onEnd: () => {
-              this.setState({
-                scrollConstraints: { ...scrollConstraints, isAnimating: false },
-              });
-            },
-          });
-
-          return null;
-        }
-
-        const constrainedState = {
-          scrollX: constrainedScrollX,
-          scrollY: constrainedScrollY,
-          zoom: {
-            value: maxZoomLevel
-              ? (Math.max(
-                  currentZoom.value,
-                  maxZoomLevel,
-                ) as NormalizedZoomValue)
-              : currentZoom.value,
-          },
-        };
-
-        this.setState(constrainedState);
-        return constrainedState;
-      }
-
-      return null;
-    };
-
-    // Compute the constrained scroll values.
     const { zoomLevelX, zoomLevelY, maxZoomLevel } = calculateZoomLevel();
-    const zoom = maxZoomLevel
-      ? Math.max(maxZoomLevel, currentZoom.value)
-      : currentZoom.value;
+    const constrainedZoom = getNormalizedZoom(
+      maxZoomLevel ? Math.max(maxZoomLevel, zoom.value) : zoom.value,
+    );
     const { constrainedScrollCenterX, constrainedScrollCenterY } =
-      calculateConstrainedScrollCenter(zoom);
+      calculateConstrainedScrollCenter(constrainedZoom);
     const { overscrollAllowanceX, overscrollAllowanceY } =
       calculateOverscrollAllowance();
     const shouldAdjustForCenteredView =
-      zoom <= zoomLevelX || zoom <= zoomLevelY;
+      constrainedZoom <= zoomLevelX || constrainedZoom <= zoomLevelY;
     const { maxScrollX, minScrollX, maxScrollY, minScrollY } =
       calculateMinMaxScrollValues(
         shouldAdjustForCenteredView,
@@ -7887,16 +7871,170 @@ class App extends React.Component<AppProps, AppState> {
         overscrollAllowanceY,
         constrainedScrollCenterX,
         constrainedScrollCenterY,
-        zoom,
+        constrainedZoom,
       );
-    const { constrainedScrollX, constrainedScrollY } = constrainScrollValues(
+
+    return {
       maxScrollX,
       minScrollX,
       maxScrollY,
       minScrollY,
-    );
+      constrainedZoom: {
+        value: constrainedZoom,
+      },
+    };
+  };
 
-    return handleStateChange(constrainedScrollX, constrainedScrollY);
+  /**
+   * Constrains the scroll values within the constrained area.
+   * @param maxScrollX - The maximum scroll value for the X axis.
+   * @param minScrollX - The minimum scroll value for the X axis.
+   * @param maxScrollY - The maximum scroll value for the Y axis.
+   * @param minScrollY - The minimum scroll value for the Y axis.
+   * @returns The constrained scroll values for the X and Y axes.
+   */
+  private constrainScrollValues = ({
+    scrollX,
+    scrollY,
+    maxScrollX,
+    minScrollX,
+    maxScrollY,
+    minScrollY,
+    constrainedZoom,
+  }: {
+    scrollX: number;
+    scrollY: number;
+    maxScrollX: number;
+    minScrollX: number;
+    maxScrollY: number;
+    minScrollY: number;
+    constrainedZoom: AppState["zoom"];
+  }) => {
+    const constrainedScrollX = Math.min(
+      maxScrollX,
+      Math.max(scrollX, minScrollX),
+    );
+    const constrainedScrollY = Math.min(
+      maxScrollY,
+      Math.max(scrollY, minScrollY),
+    );
+    return { constrainedScrollX, constrainedScrollY, constrainedZoom };
+  };
+
+  /**
+   * Animate the scroll values to the constrained area
+   */
+  private animateConstainedScroll = ({
+    constrainedScrollX,
+    constrainedScrollY,
+    opts,
+  }: {
+    constrainedScrollX: number;
+    constrainedScrollY: number;
+    opts?: {
+      onStartCallback?: () => void;
+      onEndCallback?: () => void;
+    };
+  }) => {
+    const { scrollX, scrollY, scrollConstraints } = this.state;
+
+    const { onStartCallback, onEndCallback } = opts || {};
+
+    if (!scrollConstraints) {
+      return null;
+    }
+
+    easeToValuesRAF({
+      fromValues: { scrollX, scrollY },
+      toValues: {
+        scrollX: constrainedScrollX,
+        scrollY: constrainedScrollY,
+      },
+      onStep: ({ scrollX, scrollY }) => {
+        this.setState({ scrollX, scrollY });
+      },
+      onStart: () => {
+        this.setState({
+          scrollConstraints: { ...scrollConstraints, isAnimating: true },
+        });
+        onStartCallback && onStartCallback();
+      },
+      onEnd: () => {
+        this.setState({
+          scrollConstraints: { ...scrollConstraints, isAnimating: false },
+        });
+        onEndCallback && onEndCallback();
+      },
+    });
+  };
+
+  private isViewportOutsideOfConstrainedArea = ({
+    scrollX,
+    scrollY,
+    width,
+    height,
+    scrollConstraints,
+  }: {
+    scrollX: AppState["scrollX"];
+    scrollY: AppState["scrollY"];
+    width: AppState["width"];
+    height: AppState["height"];
+    scrollConstraints: AppState["scrollConstraints"];
+  }) => {
+    if (!scrollConstraints) {
+      return false;
+    }
+
+    return (
+      scrollX < scrollConstraints.x ||
+      scrollX + width > scrollConstraints.x + scrollConstraints.width ||
+      scrollY < scrollConstraints.y ||
+      scrollY + height > scrollConstraints.y + scrollConstraints.height
+    );
+  };
+
+  /**
+   * Handles the state change based on the constrained scroll values.
+   * Also handles the animation to the constrained area when the viewport is outside of constrained area.
+   * @param constrainedScrollX - The constrained scroll value for the X axis.
+   * @param constrainedScrollY - The constrained scroll value for the Y axis.
+   * @returns The constrained state if the state has changed, when needs to be passed into render function, otherwise null.
+   */
+  private handleConstrainedScrollStateChange = ({
+    constrainedScrollX,
+    constrainedScrollY,
+    constrainedZoom,
+    shouldAnimate,
+  }: {
+    constrainedScrollX: number;
+    constrainedScrollY: number;
+    constrainedZoom: AppState["zoom"];
+    shouldAnimate?: boolean;
+  }) => {
+    const { scrollX, scrollY } = this.state;
+    const isStateChanged =
+      constrainedScrollX !== scrollX || constrainedScrollY !== scrollY;
+
+    if (isStateChanged) {
+      if (shouldAnimate) {
+        this.animateConstainedScroll({
+          constrainedScrollX,
+          constrainedScrollY,
+        });
+
+        return null;
+      }
+      const constrainedState = {
+        scrollX: constrainedScrollX,
+        scrollY: constrainedScrollY,
+        zoom: constrainedZoom,
+      };
+
+      this.setState(constrainedState);
+      return constrainedState;
+    }
+
+    return null;
   };
 }
 
diff --git a/src/excalidraw-app/index.tsx b/src/excalidraw-app/index.tsx
index c13815f3c..6da80f502 100644
--- a/src/excalidraw-app/index.tsx
+++ b/src/excalidraw-app/index.tsx
@@ -701,7 +701,8 @@ const ExcalidrawWrapper = () => {
           y: 0,
           width: 2560,
           height: 1300,
-          opts: { lockZoom: true, viewportZoomFactor: 0.1 },
+          lockZoom: true,
+          viewportZoomFactor: 0.1,
         }}
       >
         <AppMainMenu
diff --git a/src/types.ts b/src/types.ts
index 4b602f784..be4dc210a 100644
--- a/src/types.ts
+++ b/src/types.ts
@@ -223,17 +223,7 @@ export type AppState = {
   pendingImageElementId: ExcalidrawImageElement["id"] | null;
   showHyperlinkPopup: false | "info" | "editor";
   selectedLinearElement: LinearElementEditor | null;
-  scrollConstraints: {
-    x: number;
-    y: number;
-    width: number;
-    height: number;
-    isAnimating?: boolean;
-    opts?: {
-      viewportZoomFactor?: number;
-      lockZoom?: boolean;
-    };
-  } | null;
+  scrollConstraints: ScrollConstraints | null;
 };
 
 export type UIAppState = Omit<
@@ -590,3 +580,13 @@ export type FrameNameBoundsCache = {
     }
   >;
 };
+
+export type ScrollConstraints = {
+  x: number;
+  y: number;
+  width: number;
+  height: number;
+  isAnimating?: boolean;
+  viewportZoomFactor?: number;
+  lockZoom?: boolean;
+};

From 4e9039e850e01816aff3a91750fadb8d3a7b10a0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Arno=C5=A1t=20Pleskot?= <arnostpleskot@gmail.com>
Date: Fri, 14 Jul 2023 23:23:41 +0200
Subject: [PATCH 24/57] feat: simplify memoization logic

---
 src/components/App.tsx | 41 +++++++++++++++++------------------------
 1 file changed, 17 insertions(+), 24 deletions(-)

diff --git a/src/components/App.tsx b/src/components/App.tsx
index a47aea270..dd6df0cb5 100644
--- a/src/components/App.tsx
+++ b/src/components/App.tsx
@@ -224,7 +224,6 @@ import {
   SidebarName,
   SidebarTabName,
   ScrollConstraints,
-  NormalizedZoomValue,
 } from "../types";
 import {
   debounce,
@@ -459,13 +458,9 @@ class App extends React.Component<AppProps, AppState> {
   lastPointerDown: React.PointerEvent<HTMLElement> | null = null;
   lastPointerUp: React.PointerEvent<HTMLElement> | PointerEvent | null = null;
   lastViewportPosition = { x: 0, y: 0 };
-  private memoizedScrollConstraints: {
-    input: {
-      scrollConstraints: AppState["scrollConstraints"];
-      values: Omit<Partial<AppState>, "zoom"> & { zoom: NormalizedZoomValue };
-    };
-    result: ReturnType<App["calculateConstraints"]>;
-  } | null = null;
+  private memoizedScrollConstraints: ReturnType<
+    App["calculateConstraints"]
+  > | null = null;
 
   constructor(props: AppProps) {
     super(props);
@@ -1657,17 +1652,21 @@ class App extends React.Component<AppProps, AppState> {
       } = this.state;
 
       // TODO: this could be replaced with memoization function like _.memoize()
-      const calculatedConstraints =
-        isShallowEqual(
-          scrollConstraints,
-          this.memoizedScrollConstraints?.input.scrollConstraints ?? {},
-        ) &&
+      const canUseMemoizedConstraints =
+        isShallowEqual(scrollConstraints, prevState.scrollConstraints ?? {}) &&
         isShallowEqual(
           { width, height, zoom: zoom.value, cursorButton },
-          this.memoizedScrollConstraints?.input.values ?? {},
-        ) &&
-        this.memoizedScrollConstraints
-          ? this.memoizedScrollConstraints.result
+          {
+            width: prevState.width,
+            height: prevState.height,
+            zoom: prevState.zoom.value,
+            cursorButton: prevState.cursorButton,
+          } ?? {},
+        );
+
+      const calculatedConstraints =
+        canUseMemoizedConstraints && !!this.memoizedScrollConstraints
+          ? this.memoizedScrollConstraints
           : this.calculateConstraints({
               scrollConstraints,
               width,
@@ -1676,13 +1675,7 @@ class App extends React.Component<AppProps, AppState> {
               cursorButton,
             });
 
-      this.memoizedScrollConstraints = {
-        input: {
-          scrollConstraints,
-          values: { width, height, zoom: zoom.value, cursorButton },
-        },
-        result: calculatedConstraints,
-      };
+      this.memoizedScrollConstraints = calculatedConstraints;
 
       const constrainedScrollValues = this.constrainScrollValues({
         ...calculatedConstraints,

From 76d393098324e5e20496feb87efb89b8b06c3fd8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Arno=C5=A1t=20Pleskot?= <arnostpleskot@gmail.com>
Date: Mon, 31 Jul 2023 09:50:47 +0200
Subject: [PATCH 25/57] fix: typo

---
 src/components/App.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components/App.tsx b/src/components/App.tsx
index 4961af093..5baf7fbda 100644
--- a/src/components/App.tsx
+++ b/src/components/App.tsx
@@ -8258,7 +8258,7 @@ class App extends React.Component<AppProps, AppState> {
         scrollX,
         scrollY,
       });
-      this.animateConstainedScroll({
+      this.animateConstrainedScroll({
         ...constrainedScrollValues,
         opts: {
           onEndCallback: () => {
@@ -8463,7 +8463,7 @@ class App extends React.Component<AppProps, AppState> {
   /**
    * Animate the scroll values to the constrained area
    */
-  private animateConstainedScroll = ({
+  private animateConstrainedScroll = ({
     constrainedScrollX,
     constrainedScrollY,
     opts,
@@ -8556,7 +8556,7 @@ class App extends React.Component<AppProps, AppState> {
 
     if (isStateChanged) {
       if (shouldAnimate) {
-        this.animateConstainedScroll({
+        this.animateConstrainedScroll({
           constrainedScrollX,
           constrainedScrollY,
         });

From d24a032dbb4f6edb11227985308eca34adbd38f2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Arno=C5=A1t=20Pleskot?= <arnostpleskot@gmail.com>
Date: Mon, 31 Jul 2023 18:33:39 +0200
Subject: [PATCH 26/57] feat: set scroll constraints on initial scene state

---
 src/components/App.tsx | 128 ++++++++++++++++++++++++++++++++++-------
 1 file changed, 107 insertions(+), 21 deletions(-)

diff --git a/src/components/App.tsx b/src/components/App.tsx
index 5baf7fbda..3544c756f 100644
--- a/src/components/App.tsx
+++ b/src/components/App.tsx
@@ -1560,7 +1560,15 @@ class App extends React.Component<AppProps, AppState> {
       isLoading: false,
       toast: this.state.toast,
     };
-    if (initialData?.scrollToContent) {
+    if (this.props.scrollConstraints) {
+      scene.appState = {
+        ...scene.appState,
+        ...this.calculateConstrainedScrollCenter(
+          this.props.scrollConstraints,
+          scene.appState,
+        ),
+      };
+    } else if (initialData?.scrollToContent) {
       scene.appState = {
         ...scene.appState,
         ...calculateScrollCenter(
@@ -8277,6 +8285,98 @@ class App extends React.Component<AppProps, AppState> {
     }
   };
 
+  /**
+   * Calculates the scroll center coordinates and the optimal zoom level to fit the constrained scrollable area within the viewport.
+   *
+   * This method first calculates the necessary zoom level to fit the entire constrained scrollable area within the viewport.
+   * Then it calculates the constraints for the viewport given the new zoom level and the current scrollable area dimensions.
+   * The function returns an object containing the optimal scroll positions and zoom level.
+   *
+   * @param scrollConstraints - The constraints of the scrollable area including width, height, and position.
+   * @param appState - An object containing the current horizontal and vertical scroll positions.
+   * @returns An object containing the calculated optimal horizontal and vertical scroll positions and zoom level.
+   *
+   * @example
+   *
+   * const { scrollX, scrollY, zoom } = this.calculateConstrainedScrollCenter(scrollConstraints, { scrollX, scrollY });
+   */
+  public calculateConstrainedScrollCenter = (
+    scrollConstraints: AppState["scrollConstraints"],
+    { scrollX, scrollY }: Pick<AppState, "scrollX" | "scrollY">,
+  ): {
+    scrollX: AppState["scrollX"];
+    scrollY: AppState["scrollY"];
+    zoom: AppState["zoom"];
+  } => {
+    const { width, height, zoom } = this.state;
+
+    if (!scrollConstraints) {
+      return { scrollX, scrollY, zoom };
+    }
+
+    const { zoomLevelX, zoomLevelY, maxZoomLevel } = 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),
+      ),
+    };
+
+    const constraints = this.calculateConstraints({
+      scrollConstraints,
+      width,
+      height,
+      zoom: _zoom,
+      cursorButton: "up",
+    });
+
+    return {
+      scrollX: constraints.minScrollX,
+      scrollY: constraints.minScrollY,
+      zoom: constraints.constrainedZoom,
+    };
+  };
+
+  /**
+   * Calculates the zoom levels necessary to fit the constrained scrollable area within the viewport on the X and Y axes.
+   *
+   * The function considers the dimensions of the scrollable area, the dimensions of the viewport, the viewport zoom factor,
+   * and whether the zoom should be locked. It then calculates the necessary zoom levels for the X and Y axes separately.
+   * If the zoom should be locked, it calculates the maximum zoom level that fits the scrollable area within the viewport,
+   * factoring in the viewport zoom factor. If the zoom should not be locked, the maximum zoom level is set to null.
+   *
+   * @param scrollConstraints - The constraints of the scrollable area including width, height, and position.
+   * @param width - The width of the viewport.
+   * @param height - The height of the viewport.
+   * @returns An object containing the calculated zoom levels for the X and Y axes, and the maximum zoom level if applicable.
+   */
+  private calculateZoomLevel = (
+    scrollConstraints: ScrollConstraints,
+    width: AppState["width"],
+    height: AppState["height"],
+  ) => {
+    const DEFAULT_VIEWPORT_ZOOM_FACTOR = 0.2;
+
+    const lockZoom = scrollConstraints.lockZoom ?? false;
+    const viewportZoomFactor = scrollConstraints.viewportZoomFactor
+      ? Math.min(1, Math.max(scrollConstraints.viewportZoomFactor, 0.1))
+      : DEFAULT_VIEWPORT_ZOOM_FACTOR;
+
+    const scrollableWidth = scrollConstraints.width;
+    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 };
+  };
+
   private calculateConstraints = ({
     scrollConstraints,
     width,
@@ -8292,25 +8392,6 @@ class App extends React.Component<AppProps, AppState> {
   }) => {
     // Set the overscroll allowance percentage
     const OVERSCROLL_ALLOWANCE_PERCENTAGE = 0.2;
-    const lockZoom = scrollConstraints.lockZoom ?? false;
-    const viewportZoomFactor = scrollConstraints.viewportZoomFactor
-      ? Math.min(1, Math.max(scrollConstraints.viewportZoomFactor, 0.1))
-      : 0.9;
-
-    /**
-     * Calculate the zoom levels on which will constrained area fits the viewport for each axis
-     * @returns The zoom levels for the X and Y axes.
-     */
-    const calculateZoomLevel = () => {
-      const scrollableWidth = scrollConstraints.width;
-      const scrollableHeight = scrollConstraints.height;
-      const zoomLevelX = width / scrollableWidth;
-      const zoomLevelY = height / scrollableHeight;
-      const maxZoomLevel = lockZoom
-        ? Math.min(zoomLevelX, zoomLevelY) * viewportZoomFactor
-        : null;
-      return { zoomLevelX, zoomLevelY, maxZoomLevel };
-    };
 
     /**
      * Calculates the center position of the constrained scroll area.
@@ -8393,7 +8474,12 @@ class App extends React.Component<AppProps, AppState> {
       return { maxScrollX, minScrollX, maxScrollY, minScrollY };
     };
 
-    const { zoomLevelX, zoomLevelY, maxZoomLevel } = calculateZoomLevel();
+    const { zoomLevelX, zoomLevelY, maxZoomLevel } = this.calculateZoomLevel(
+      scrollConstraints,
+      width,
+      height,
+    );
+
     const constrainedZoom = getNormalizedZoom(
       maxZoomLevel ? Math.max(maxZoomLevel, zoom.value) : zoom.value,
     );

From 04e23e1d299c9877eb75995d58938d047c4bed3c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Arno=C5=A1t=20Pleskot?= <arnostpleskot@gmail.com>
Date: Tue, 1 Aug 2023 16:30:45 +0200
Subject: [PATCH 27/57] fix: do not animate empty scene

---
 src/components/App.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/App.tsx b/src/components/App.tsx
index 3544c756f..1889a1f7b 100644
--- a/src/components/App.tsx
+++ b/src/components/App.tsx
@@ -2012,7 +2012,6 @@ class App extends React.Component<AppProps, AppState> {
         cursorButton,
       } = this.state;
 
-      // TODO: this could be replaced with memoization function like _.memoize()
       const canUseMemoizedConstraints =
         isShallowEqual(scrollConstraints, prevState.scrollConstraints ?? {}) &&
         isShallowEqual(
@@ -2058,7 +2057,8 @@ class App extends React.Component<AppProps, AppState> {
         shouldAnimate:
           isViewportOutsideOfConstrainedArea &&
           this.state.cursorButton !== "down" &&
-          prevState.zoom.value === this.state.zoom.value,
+          prevState.zoom.value === this.state.zoom.value &&
+          this.scene.getElementsIncludingDeleted().length > 0, // Do not animate when app is initialized but scene is empty - this would cause flickering
       });
     }
 

From 4469c02191c6432efb5a09733575ca02d329d575 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Arno=C5=A1t=20Pleskot?= <arnostpleskot@gmail.com>
Date: Tue, 1 Aug 2023 16:52:59 +0200
Subject: [PATCH 28/57] chore: move this.scene.getElementsIncludingDeleted()
 result into const

---
 src/components/App.tsx | 8 +++-----
 1 file changed, 3 insertions(+), 5 deletions(-)

diff --git a/src/components/App.tsx b/src/components/App.tsx
index 1889a1f7b..7b8c49217 100644
--- a/src/components/App.tsx
+++ b/src/components/App.tsx
@@ -1866,10 +1866,8 @@ class App extends React.Component<AppProps, AppState> {
 
   componentDidUpdate(prevProps: AppProps, prevState: AppState) {
     this.updateEmbeddables();
-    if (
-      !this.state.showWelcomeScreen &&
-      !this.scene.getElementsIncludingDeleted().length
-    ) {
+    const elementsIncludingDeleted = this.scene.getElementsIncludingDeleted();
+    if (!this.state.showWelcomeScreen && !elementsIncludingDeleted.length) {
       this.setState({ showWelcomeScreen: true });
     }
 
@@ -2058,7 +2056,7 @@ class App extends React.Component<AppProps, AppState> {
           isViewportOutsideOfConstrainedArea &&
           this.state.cursorButton !== "down" &&
           prevState.zoom.value === this.state.zoom.value &&
-          this.scene.getElementsIncludingDeleted().length > 0, // Do not animate when app is initialized but scene is empty - this would cause flickering
+          elementsIncludingDeleted.length > 0, // Do not animate when app is initialized but scene is empty - this would cause flickering
       });
     }
 

From 803e14ada1d048acd7410f0fa7afe5f4e75f178f Mon Sep 17 00:00:00 2001
From: dwelle <luzar.david@gmail.com>
Date: Wed, 2 Aug 2023 17:41:32 +0200
Subject: [PATCH 29/57] Revert "[debug]"

This reverts commit 71eb3023b2fd267db44fc5d11c4fb6814b4206a6.
---
 src/excalidraw-app/index.tsx | 8 --------
 1 file changed, 8 deletions(-)

diff --git a/src/excalidraw-app/index.tsx b/src/excalidraw-app/index.tsx
index 18a74d10d..cd719e276 100644
--- a/src/excalidraw-app/index.tsx
+++ b/src/excalidraw-app/index.tsx
@@ -731,14 +731,6 @@ const ExcalidrawWrapper = () => {
             />
           );
         }}
-        scrollConstraints={{
-          x: 0,
-          y: 0,
-          width: 2560,
-          height: 1300,
-          lockZoom: true,
-          viewportZoomFactor: 0.1,
-        }}
       >
         <AppMainMenu
           setCollabDialogShown={setCollabDialogShown}

From b0cdd00c2a3663035c9cc1c3fc05a0e822980075 Mon Sep 17 00:00:00 2001
From: dwelle <luzar.david@gmail.com>
Date: Wed, 2 Aug 2023 17:54:04 +0200
Subject: [PATCH 30/57] [debug]

---
 src/components/App.tsx            | 2 +-
 src/excalidraw-app/index.tsx      | 7 +++++++
 src/packages/excalidraw/index.tsx | 2 +-
 3 files changed, 9 insertions(+), 2 deletions(-)

diff --git a/src/components/App.tsx b/src/components/App.tsx
index 7b8c49217..1f81a2fc8 100644
--- a/src/components/App.tsx
+++ b/src/components/App.tsx
@@ -8358,7 +8358,7 @@ class App extends React.Component<AppProps, AppState> {
     width: AppState["width"],
     height: AppState["height"],
   ) => {
-    const DEFAULT_VIEWPORT_ZOOM_FACTOR = 0.2;
+    const DEFAULT_VIEWPORT_ZOOM_FACTOR = 0.7;
 
     const lockZoom = scrollConstraints.lockZoom ?? false;
     const viewportZoomFactor = scrollConstraints.viewportZoomFactor
diff --git a/src/excalidraw-app/index.tsx b/src/excalidraw-app/index.tsx
index cd719e276..b3952bf8b 100644
--- a/src/excalidraw-app/index.tsx
+++ b/src/excalidraw-app/index.tsx
@@ -731,6 +731,13 @@ const ExcalidrawWrapper = () => {
             />
           );
         }}
+        scrollConstraints={{
+          x: 0,
+          y: 0,
+          width: 2560,
+          height: 1300,
+          lockZoom: true,
+        }}
       >
         <AppMainMenu
           setCollabDialogShown={setCollabDialogShown}
diff --git a/src/packages/excalidraw/index.tsx b/src/packages/excalidraw/index.tsx
index b265a72ed..09a776ab9 100644
--- a/src/packages/excalidraw/index.tsx
+++ b/src/packages/excalidraw/index.tsx
@@ -101,7 +101,7 @@ const ExcalidrawBase = (props: ExcalidrawProps) => {
           onPointerUpdate={onPointerUpdate}
           renderTopRightUI={renderTopRightUI}
           langCode={langCode}
-          viewModeEnabled={viewModeEnabled || !!scrollConstraints}
+          viewModeEnabled={viewModeEnabled /* || !!scrollConstraints */}
           zenModeEnabled={zenModeEnabled}
           gridModeEnabled={gridModeEnabled}
           libraryReturnUrl={libraryReturnUrl}

From 806b1e9705b8d5f8717f56ff8c3963f8c56c37a1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Arno=C5=A1t=20Pleskot?= <arnostpleskot@gmail.com>
Date: Sun, 3 Sep 2023 16:54:04 +0200
Subject: [PATCH 31/57] fix: prevent viewport jumping when panning by mouse
 wheel

---
 src/components/App.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/components/App.tsx b/src/components/App.tsx
index 1f81a2fc8..2cc98c494 100644
--- a/src/components/App.tsx
+++ b/src/components/App.tsx
@@ -2055,6 +2055,7 @@ class App extends React.Component<AppProps, AppState> {
         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
       });

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 32/57] 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 2cc98c494..78c723fa3 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 b3952bf8b..ce4af5e32 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

From ebbd72e792dcc827a22330f1ac708d96bbe08cec Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Arno=C5=A1t=20Pleskot?= <arnostpleskot@gmail.com>
Date: Mon, 4 Sep 2023 11:55:14 +0200
Subject: [PATCH 33/57] feat: use single overscrollAllowance for both axis

---
 src/components/App.tsx | 28 +++++++++++++---------------
 1 file changed, 13 insertions(+), 15 deletions(-)

diff --git a/src/components/App.tsx b/src/components/App.tsx
index 78c723fa3..d6b3ed85a 100644
--- a/src/components/App.tsx
+++ b/src/components/App.tsx
@@ -8411,7 +8411,8 @@ class App extends React.Component<AppProps, AppState> {
         OVERSCROLL_ALLOWANCE_PERCENTAGE * scrollConstraints.width;
       const overscrollAllowanceY =
         OVERSCROLL_ALLOWANCE_PERCENTAGE * scrollConstraints.height;
-      return { overscrollAllowanceX, overscrollAllowanceY };
+
+      return Math.min(overscrollAllowanceX, overscrollAllowanceY);
     };
 
     /**
@@ -8425,8 +8426,7 @@ class App extends React.Component<AppProps, AppState> {
      */
     const calculateMinMaxScrollValues = (
       shouldAdjustForCenteredView: boolean,
-      overscrollAllowanceX: number,
-      overscrollAllowanceY: number,
+      overscrollAllowance: number,
       constrainedScrollCenterX: number,
       constrainedScrollCenterY: number,
       zoom: number,
@@ -8437,23 +8437,23 @@ class App extends React.Component<AppProps, AppState> {
       let minScrollY;
 
       if (cursorButton === "down" && shouldAdjustForCenteredView) {
-        maxScrollX = constrainedScrollCenterX + overscrollAllowanceX;
-        minScrollX = constrainedScrollCenterX - overscrollAllowanceX;
-        maxScrollY = constrainedScrollCenterY + overscrollAllowanceY;
-        minScrollY = constrainedScrollCenterY - overscrollAllowanceY;
+        maxScrollX = constrainedScrollCenterX + overscrollAllowance;
+        minScrollX = constrainedScrollCenterX - overscrollAllowance;
+        maxScrollY = constrainedScrollCenterY + overscrollAllowance;
+        minScrollY = constrainedScrollCenterY - overscrollAllowance;
       } else if (cursorButton === "down" && !shouldAdjustForCenteredView) {
-        maxScrollX = scrollConstraints.x + overscrollAllowanceX;
+        maxScrollX = scrollConstraints.x + overscrollAllowance;
         minScrollX =
           scrollConstraints.x -
           scrollConstraints.width +
           width / zoom -
-          overscrollAllowanceX;
-        maxScrollY = scrollConstraints.y + overscrollAllowanceY;
+          overscrollAllowance;
+        maxScrollY = scrollConstraints.y + overscrollAllowance;
         minScrollY =
           scrollConstraints.y -
           scrollConstraints.height +
           height / zoom -
-          overscrollAllowanceY;
+          overscrollAllowance;
       } else if (cursorButton !== "down" && shouldAdjustForCenteredView) {
         maxScrollX = constrainedScrollCenterX;
         minScrollX = constrainedScrollCenterX;
@@ -8481,15 +8481,13 @@ class App extends React.Component<AppProps, AppState> {
     );
     const { constrainedScrollCenterX, constrainedScrollCenterY } =
       calculateConstrainedScrollCenter(constrainedZoom);
-    const { overscrollAllowanceX, overscrollAllowanceY } =
-      calculateOverscrollAllowance();
+    const overscrollAllowance = calculateOverscrollAllowance();
     const shouldAdjustForCenteredView =
       constrainedZoom <= zoomLevelX || constrainedZoom <= zoomLevelY;
     const { maxScrollX, minScrollX, maxScrollY, minScrollY } =
       calculateMinMaxScrollValues(
         shouldAdjustForCenteredView,
-        overscrollAllowanceX,
-        overscrollAllowanceY,
+        overscrollAllowance,
         constrainedScrollCenterX,
         constrainedScrollCenterY,
         constrainedZoom,

From 10900f39ee18572b5cc1721f01ed9c26ee181911 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Arno=C5=A1t=20Pleskot?= <arnostpleskot@gmail.com>
Date: Tue, 5 Sep 2023 17:32:51 +0200
Subject: [PATCH 34/57] fix: allow to scroll on one axis when other is fully in
 view

---
 src/components/App.tsx | 67 ++++++++++++++++++++++++++----------------
 1 file changed, 41 insertions(+), 26 deletions(-)

diff --git a/src/components/App.tsx b/src/components/App.tsx
index d6b3ed85a..4cf72073e 100644
--- a/src/components/App.tsx
+++ b/src/components/App.tsx
@@ -8417,7 +8417,8 @@ class App extends React.Component<AppProps, AppState> {
 
     /**
      * Calculates the minimum and maximum scroll values based on the current state.
-     * @param shouldAdjustForCenteredView - Whether the view should be adjusted for centered view - when constrained area fits the viewport.
+     * @param shouldAdjustForCenteredViewX - Whether the view should be adjusted for centered view on X axis - when constrained area width fits the viewport.
+     * @param shouldAdjustForCenteredViewY - Whether the view should be adjusted for centered view on Y axis - when constrained area height fits the viewport.
      * @param overscrollAllowanceX - The overscroll allowance value for the X axis.
      * @param overscrollAllowanceY - The overscroll allowance value for the Y axis.
      * @param constrainedScrollCenterX - The X coordinate of the constrained scroll area center.
@@ -8425,7 +8426,8 @@ class App extends React.Component<AppProps, AppState> {
      * @returns The minimum and maximum scroll values for the X and Y axes.
      */
     const calculateMinMaxScrollValues = (
-      shouldAdjustForCenteredView: boolean,
+      shouldAdjustForCenteredViewX: boolean,
+      shouldAdjustForCenteredViewY: boolean,
       overscrollAllowance: number,
       constrainedScrollCenterX: number,
       constrainedScrollCenterY: number,
@@ -8436,33 +8438,45 @@ class App extends React.Component<AppProps, AppState> {
       let maxScrollY;
       let minScrollY;
 
-      if (cursorButton === "down" && shouldAdjustForCenteredView) {
-        maxScrollX = constrainedScrollCenterX + overscrollAllowance;
-        minScrollX = constrainedScrollCenterX - overscrollAllowance;
-        maxScrollY = constrainedScrollCenterY + overscrollAllowance;
-        minScrollY = constrainedScrollCenterY - overscrollAllowance;
-      } else if (cursorButton === "down" && !shouldAdjustForCenteredView) {
-        maxScrollX = scrollConstraints.x + overscrollAllowance;
-        minScrollX =
-          scrollConstraints.x -
-          scrollConstraints.width +
-          width / zoom -
-          overscrollAllowance;
-        maxScrollY = scrollConstraints.y + overscrollAllowance;
-        minScrollY =
-          scrollConstraints.y -
-          scrollConstraints.height +
-          height / zoom -
-          overscrollAllowance;
-      } else if (cursorButton !== "down" && shouldAdjustForCenteredView) {
+      // Handling the X-axis
+      if (cursorButton === "down") {
+        if (shouldAdjustForCenteredViewX) {
+          maxScrollX = constrainedScrollCenterX + overscrollAllowance;
+          minScrollX = constrainedScrollCenterX - overscrollAllowance;
+        } else {
+          maxScrollX = scrollConstraints.x + overscrollAllowance;
+          minScrollX =
+            scrollConstraints.x -
+            scrollConstraints.width +
+            width / zoom -
+            overscrollAllowance;
+        }
+      } else if (shouldAdjustForCenteredViewX) {
         maxScrollX = constrainedScrollCenterX;
         minScrollX = constrainedScrollCenterX;
-        maxScrollY = constrainedScrollCenterY;
-        minScrollY = constrainedScrollCenterY;
       } else {
         maxScrollX = scrollConstraints.x;
         minScrollX =
           scrollConstraints.x - scrollConstraints.width + width / zoom;
+      }
+
+      // Handling the Y-axis
+      if (cursorButton === "down") {
+        if (shouldAdjustForCenteredViewY) {
+          maxScrollY = constrainedScrollCenterY + overscrollAllowance;
+          minScrollY = constrainedScrollCenterY - overscrollAllowance;
+        } else {
+          maxScrollY = scrollConstraints.y + overscrollAllowance;
+          minScrollY =
+            scrollConstraints.y -
+            scrollConstraints.height +
+            height / zoom -
+            overscrollAllowance;
+        }
+      } else if (shouldAdjustForCenteredViewY) {
+        maxScrollY = constrainedScrollCenterY;
+        minScrollY = constrainedScrollCenterY;
+      } else {
         maxScrollY = scrollConstraints.y;
         minScrollY =
           scrollConstraints.y - scrollConstraints.height + height / zoom;
@@ -8482,11 +8496,12 @@ class App extends React.Component<AppProps, AppState> {
     const { constrainedScrollCenterX, constrainedScrollCenterY } =
       calculateConstrainedScrollCenter(constrainedZoom);
     const overscrollAllowance = calculateOverscrollAllowance();
-    const shouldAdjustForCenteredView =
-      constrainedZoom <= zoomLevelX || constrainedZoom <= zoomLevelY;
+    const shouldAdjustForCenteredViewX = constrainedZoom <= zoomLevelX;
+    const shouldAdjustForCenteredViewY = constrainedZoom <= zoomLevelY;
     const { maxScrollX, minScrollX, maxScrollY, minScrollY } =
       calculateMinMaxScrollValues(
-        shouldAdjustForCenteredView,
+        shouldAdjustForCenteredViewX,
+        shouldAdjustForCenteredViewY,
         overscrollAllowance,
         constrainedScrollCenterX,
         constrainedScrollCenterY,

From 84b19a77d7b319fc81b372182fa4f06a6d5d6edc Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Arno=C5=A1t=20Pleskot?= <arnostpleskot@gmail.com>
Date: Mon, 11 Sep 2023 17:07:07 +0200
Subject: [PATCH 35/57] feat: make constrained scroll working with split
 canvases

---
 src/components/App.tsx         |  85 +++++++++++--
 src/scene/scrollConstraints.ts | 225 ++++++---------------------------
 2 files changed, 115 insertions(+), 195 deletions(-)

diff --git a/src/components/App.tsx b/src/components/App.tsx
index 963f4fb34..199f3f31b 100644
--- a/src/components/App.tsx
+++ b/src/components/App.tsx
@@ -355,8 +355,9 @@ import { StaticCanvas, InteractiveCanvas } from "./canvases";
 import { Renderer } from "../scene/Renderer";
 import { ShapeCache } from "../scene/ShapeCache";
 import {
-  setScrollConstraints,
   calculateConstrainedScrollCenter,
+  constrainScrollState,
+  isViewportOutsideOfConstrainedArea,
 } from "../scene/scrollConstraints";
 
 const AppContext = React.createContext<AppClassProperties>(null!);
@@ -2004,6 +2005,58 @@ class App extends React.Component<AppProps, AppState> {
         this.files,
       );
     }
+
+    if (
+      this.state.scrollConstraints &&
+      isViewportOutsideOfConstrainedArea(this.state) &&
+      prevState.cursorButton === "down" &&
+      this.state.cursorButton !== "down" &&
+      !this.state.isLoading
+    ) {
+      const state = constrainScrollState(this.state);
+      const cancel = easeToValuesRAF({
+        fromValues: {
+          scrollX: this.state.scrollX,
+          scrollY: this.state.scrollY,
+          zoom: this.state.zoom.value,
+        },
+        toValues: {
+          scrollX: state.scrollX,
+          scrollY: state.scrollY,
+          zoom: state.zoom.value,
+        },
+        interpolateValue: (from, to, progress, key) => {
+          // for zoom, use different easing
+          if (key === "zoom") {
+            return from * Math.pow(to / from, easeOut(progress));
+          }
+          // handle using default
+          return undefined;
+        },
+        onStep: ({ scrollX, scrollY, zoom }) => {
+          this.setState({
+            scrollX,
+            scrollY,
+            zoom: { value: getNormalizedZoom(zoom) },
+          });
+        },
+        onStart: () => {
+          this.setState({ shouldCacheIgnoreZoom: true });
+        },
+        onEnd: () => {
+          this.setState({ shouldCacheIgnoreZoom: false });
+        },
+        onCancel: () => {
+          this.setState({ shouldCacheIgnoreZoom: false });
+        },
+        duration: 500,
+      });
+
+      this.cancelInProgresAnimation = () => {
+        cancel();
+        this.cancelInProgresAnimation = null;
+      };
+    }
   }
 
   private renderInteractiveSceneCallback = ({
@@ -2669,9 +2722,27 @@ class App extends React.Component<AppProps, AppState> {
 
   /** use when changing scrollX/scrollY/zoom based on user interaction */
   private translateCanvas: React.Component<any, AppState>["setState"] = (
-    state,
+    stateUpdate,
   ) => {
     this.cancelInProgresAnimation?.();
+
+    const partialNewState =
+      typeof stateUpdate === "function"
+        ? (
+            stateUpdate as (
+              prevState: Readonly<AppState>,
+              props: Readonly<AppProps>,
+            ) => AppState
+          )(this.state, this.props)
+        : stateUpdate;
+
+    const newState: AppState = {
+      ...this.state,
+      ...partialNewState,
+    };
+
+    const state = constrainScrollState(newState);
+
     this.setState(state);
   };
 
@@ -8136,12 +8207,10 @@ class App extends React.Component<AppProps, AppState> {
     scrollConstraints: ScrollConstraints | null,
   ) => {
     if (scrollConstraints) {
-      setScrollConstraints(scrollConstraints, this.state, () =>
-        this.setState({
-          scrollConstraints,
-          viewModeEnabled: true,
-        }),
-      );
+      this.setState({
+        scrollConstraints,
+        viewModeEnabled: true,
+      });
     } else {
       this.setState({
         scrollConstraints: null,
diff --git a/src/scene/scrollConstraints.ts b/src/scene/scrollConstraints.ts
index 9b440c0fd..e5895cf3a 100644
--- a/src/scene/scrollConstraints.ts
+++ b/src/scene/scrollConstraints.ts
@@ -1,5 +1,4 @@
 import { AppState, ScrollConstraints } from "../types";
-import { easeToValuesRAF, isShallowEqual } from "../utils";
 import { getNormalizedZoom } from "./zoom";
 
 /**
@@ -274,162 +273,41 @@ const constrainScrollValues = ({
     maxScrollY,
     Math.max(scrollY, minScrollY),
   );
-  return { constrainedScrollX, constrainedScrollY, constrainedZoom };
+  return {
+    scrollX: constrainedScrollX,
+    scrollY: constrainedScrollY,
+    zoom: constrainedZoom,
+  };
 };
 
 /**
- * Animate the scroll values to the constrained area
+ * Determines whether the current viewport is outside the constrained area defined in the AppState.
+ *
+ * @param state - The application state containing scroll, zoom, and constraint information.
+ * @returns True if the viewport is outside the constrained area; otherwise undefined.
  */
-const animateConstrainedScroll = ({
-  state,
-  constrainedScrollX,
-  constrainedScrollY,
-  opts,
-}: {
-  state: AppState;
-  constrainedScrollX: number;
-  constrainedScrollY: number;
-  opts?: {
-    onStartCallback?: () => void;
-    onEndCallback?: () => void;
-  };
-}) => {
-  const { scrollX, scrollY, scrollConstraints } = state;
-
-  const { onStartCallback, onEndCallback } = opts || {};
-
-  if (!scrollConstraints) {
-    return null;
+export const isViewportOutsideOfConstrainedArea = (state: AppState) => {
+  if (!state.scrollConstraints) {
+    return;
   }
 
-  easeToValuesRAF({
-    fromValues: { scrollX, scrollY },
-    toValues: {
-      scrollX: constrainedScrollX,
-      scrollY: constrainedScrollY,
-    },
-    onStep: ({ scrollX, scrollY }) => {
-      // TODO: this.setState({ scrollX, scrollY });
-    },
-    onStart: () => {
-      // TODO: this.setState({
-      //   scrollConstraints: { ...scrollConstraints, isAnimating: true },
-      // });
-      onStartCallback && onStartCallback();
-    },
-    onEnd: () => {
-      // TODO: this.setState({
-      //   scrollConstraints: { ...scrollConstraints, isAnimating: false },
-      // });
-      onEndCallback && onEndCallback();
-    },
-  });
-};
-
-const isViewportOutsideOfConstrainedArea = ({
-  scrollX,
-  scrollY,
-  width,
-  height,
-  scrollConstraints,
-}: {
-  scrollX: AppState["scrollX"];
-  scrollY: AppState["scrollY"];
-  width: AppState["width"];
-  height: AppState["height"];
-  scrollConstraints: AppState["scrollConstraints"];
-}) => {
-  if (!scrollConstraints) {
-    return false;
-  }
+  const { scrollX, scrollY, width, height, scrollConstraints } = state;
 
   return (
-    scrollX < scrollConstraints.x ||
-    scrollX + width > scrollConstraints.x + scrollConstraints.width ||
+    scrollX > scrollConstraints.x ||
+    scrollX - width < scrollConstraints.x - scrollConstraints.width ||
     scrollY < scrollConstraints.y ||
     scrollY + height > scrollConstraints.y + scrollConstraints.height
   );
 };
 
 /**
- * Handles the state change based on the constrained scroll values.
- * Also handles the animation to the constrained area when the viewport is outside of constrained area.
- * @param constrainedScrollX - The constrained scroll value for the X axis.
- * @param constrainedScrollY - The constrained scroll value for the Y axis.
- * @returns The constrained state if the state has changed, when needs to be passed into render function, otherwise null.
+ * Constrains the AppState scroll values within the defined scroll constraints.
+ *
+ * @param state - The original AppState with the current scroll position, dimensions, and constraints.
+ * @returns A new AppState object with scroll values constrained as per the defined constraints.
  */
-const handleConstrainedScrollStateChange = ({
-  state,
-  constrainedScrollX,
-  constrainedScrollY,
-  constrainedZoom,
-  shouldAnimate,
-}: {
-  constrainedScrollX: number;
-  constrainedScrollY: number;
-  constrainedZoom: AppState["zoom"];
-  shouldAnimate?: boolean;
-  state: AppState;
-}) => {
-  const { scrollX, scrollY } = state;
-  const isStateChanged =
-    constrainedScrollX !== scrollX || constrainedScrollY !== scrollY;
-
-  if (isStateChanged) {
-    if (shouldAnimate) {
-      animateConstrainedScroll({
-        state,
-        constrainedScrollX,
-        constrainedScrollY,
-      });
-
-      return null;
-    }
-    const constrainedState = {
-      scrollX: constrainedScrollX,
-      scrollY: constrainedScrollY,
-      zoom: constrainedZoom,
-    };
-
-    // TODO: this.setState(constrainedState);
-    return constrainedState;
-  }
-
-  return null;
-};
-
-export const setScrollConstraints = (
-  scrollConstraints: ScrollConstraints,
-  state: AppState,
-  onAnimteEndCallback?: () => void,
-) => {
-  const { scrollX, scrollY, width, height, zoom, cursorButton } = state;
-  const constrainedScrollValues = constrainScrollValues({
-    ...calculateConstraints({
-      scrollConstraints,
-      zoom,
-      cursorButton,
-      width,
-      height,
-    }),
-    scrollX,
-    scrollY,
-  });
-  animateConstrainedScroll({
-    state,
-    ...constrainedScrollValues,
-    opts: {
-      onEndCallback: () => {
-        onAnimteEndCallback && onAnimteEndCallback();
-      },
-    },
-  });
-};
-
-let memoizedScrollConstraints: ReturnType<typeof calculateConstraints> | null =
-  null;
-
-export const constrainScrollState = (state: AppState, prevState: AppState) => {
+export const constrainScrollState = (state: AppState): AppState => {
   if (!state.scrollConstraints || state.scrollConstraints.isAnimating) {
     return state;
   }
@@ -443,55 +321,28 @@ export const constrainScrollState = (state: AppState, prevState: AppState) => {
     cursorButton,
   } = state;
 
-  const canUseMemoizedConstraints =
-    isShallowEqual(scrollConstraints, prevState.scrollConstraints ?? {}) &&
-    isShallowEqual(
-      { width, height, zoom: zoom.value, cursorButton },
-      {
-        width: prevState.width,
-        height: prevState.height,
-        zoom: prevState.zoom.value,
-        cursorButton: prevState.cursorButton,
-      } ?? {},
-    );
-
-  const calculatedConstraints =
-    canUseMemoizedConstraints && !!memoizedScrollConstraints
-      ? memoizedScrollConstraints
-      : calculateConstraints({
-          scrollConstraints,
-          width,
-          height,
-          zoom,
-          cursorButton,
-        });
-
-  memoizedScrollConstraints = calculatedConstraints;
-
-  const constrainedScrollValues = constrainScrollValues({
-    ...calculatedConstraints,
+  const constrainedValues = constrainScrollValues({
+    ...calculateConstraints({
+      scrollConstraints,
+      width,
+      height,
+      zoom,
+      cursorButton,
+    }),
     scrollX,
     scrollY,
   });
 
-  const viewportOutsideOfConstrainedArea = isViewportOutsideOfConstrainedArea({
-    scrollX,
-    scrollY,
-    width,
-    height,
-    scrollConstraints,
-  });
+  const isStateChanged =
+    constrainedValues.scrollX !== scrollX ||
+    constrainedValues.scrollY !== scrollY;
 
-  const shouldAnimate =
-    viewportOutsideOfConstrainedArea &&
-    state.cursorButton !== "down" &&
-    prevState.cursorButton === "down" &&
-    prevState.zoom.value === state.zoom.value &&
-    !state.isLoading; // Do not animate when app is initialized but scene is empty - it would cause flickering
+  if (isStateChanged) {
+    return {
+      ...state,
+      ...constrainedValues,
+    };
+  }
 
-  return handleConstrainedScrollStateChange({
-    state,
-    ...constrainedScrollValues,
-    shouldAnimate,
-  });
+  return state;
 };

From b99bf74c3d502e819c19b72d21e45208c788eaf2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Arno=C5=A1t=20Pleskot?= <arnostpleskot@gmail.com>
Date: Tue, 12 Sep 2023 12:23:13 +0200
Subject: [PATCH 36/57] feat: hide scroll back to content button

---
 src/components/LayerUI.tsx    | 2 +-
 src/components/MobileMenu.tsx | 3 ++-
 2 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/components/LayerUI.tsx b/src/components/LayerUI.tsx
index 26be77aef..67dada50f 100644
--- a/src/components/LayerUI.tsx
+++ b/src/components/LayerUI.tsx
@@ -461,7 +461,7 @@ const LayerUI = ({
                 renderCustomStats={renderCustomStats}
               />
             )}
-            {appState.scrolledOutside && (
+            {appState.scrolledOutside && !appState.scrollConstraints && (
               <button
                 className="scroll-back-to-content"
                 onClick={() => {
diff --git a/src/components/MobileMenu.tsx b/src/components/MobileMenu.tsx
index f08b99969..4164b889a 100644
--- a/src/components/MobileMenu.tsx
+++ b/src/components/MobileMenu.tsx
@@ -197,7 +197,8 @@ export const MobileMenu = ({
             {renderAppToolbar()}
             {appState.scrolledOutside &&
               !appState.openMenu &&
-              !appState.openSidebar && (
+              !appState.openSidebar &&
+              !appState.scrollConstraints && (
                 <button
                   className="scroll-back-to-content"
                   onClick={() => {

From dd9bde5ee7ce2f5ee2a10bd440ecf16055c230e8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Arno=C5=A1t=20Pleskot?= <arnostpleskot@gmail.com>
Date: Wed, 13 Sep 2023 14:54:39 +0200
Subject: [PATCH 37/57] feat: animation depending on timeout

---
 src/components/App.tsx         | 139 ++++++++++++++++++++-------------
 src/scene/scrollConstraints.ts |  63 ++++++++++-----
 2 files changed, 126 insertions(+), 76 deletions(-)

diff --git a/src/components/App.tsx b/src/components/App.tsx
index 199f3f31b..0667ef18b 100644
--- a/src/components/App.tsx
+++ b/src/components/App.tsx
@@ -357,8 +357,8 @@ import { ShapeCache } from "../scene/ShapeCache";
 import {
   calculateConstrainedScrollCenter,
   constrainScrollState,
-  isViewportOutsideOfConstrainedArea,
 } from "../scene/scrollConstraints";
+import { cancelRender } from "../renderer/renderScene";
 
 const AppContext = React.createContext<AppClassProperties>(null!);
 const AppPropsContext = React.createContext<AppProps>(null!);
@@ -428,6 +428,8 @@ let isDraggingScrollBar: boolean = false;
 let currentScrollBars: ScrollBars = { horizontal: null, vertical: null };
 let touchTimeout = 0;
 let invalidateContextMenu = false;
+let scrollConstraintsAnimationTimeout: ReturnType<typeof setTimeout> | null =
+  null;
 
 /**
  * Map of youtube embed video states
@@ -2005,58 +2007,6 @@ class App extends React.Component<AppProps, AppState> {
         this.files,
       );
     }
-
-    if (
-      this.state.scrollConstraints &&
-      isViewportOutsideOfConstrainedArea(this.state) &&
-      prevState.cursorButton === "down" &&
-      this.state.cursorButton !== "down" &&
-      !this.state.isLoading
-    ) {
-      const state = constrainScrollState(this.state);
-      const cancel = easeToValuesRAF({
-        fromValues: {
-          scrollX: this.state.scrollX,
-          scrollY: this.state.scrollY,
-          zoom: this.state.zoom.value,
-        },
-        toValues: {
-          scrollX: state.scrollX,
-          scrollY: state.scrollY,
-          zoom: state.zoom.value,
-        },
-        interpolateValue: (from, to, progress, key) => {
-          // for zoom, use different easing
-          if (key === "zoom") {
-            return from * Math.pow(to / from, easeOut(progress));
-          }
-          // handle using default
-          return undefined;
-        },
-        onStep: ({ scrollX, scrollY, zoom }) => {
-          this.setState({
-            scrollX,
-            scrollY,
-            zoom: { value: getNormalizedZoom(zoom) },
-          });
-        },
-        onStart: () => {
-          this.setState({ shouldCacheIgnoreZoom: true });
-        },
-        onEnd: () => {
-          this.setState({ shouldCacheIgnoreZoom: false });
-        },
-        onCancel: () => {
-          this.setState({ shouldCacheIgnoreZoom: false });
-        },
-        duration: 500,
-      });
-
-      this.cancelInProgresAnimation = () => {
-        cancel();
-        this.cancelInProgresAnimation = null;
-      };
-    }
   }
 
   private renderInteractiveSceneCallback = ({
@@ -2725,6 +2675,9 @@ class App extends React.Component<AppProps, AppState> {
     stateUpdate,
   ) => {
     this.cancelInProgresAnimation?.();
+    if (scrollConstraintsAnimationTimeout) {
+      clearTimeout(scrollConstraintsAnimationTimeout);
+    }
 
     const partialNewState =
       typeof stateUpdate === "function"
@@ -2739,11 +2692,87 @@ class App extends React.Component<AppProps, AppState> {
     const newState: AppState = {
       ...this.state,
       ...partialNewState,
+      ...(this.state.scrollConstraints && {
+        // manually reset if setState in onCancel wasn't committed yet
+        shouldCacheIgnoreZoom: false,
+        scrollConstraints: {
+          ...this.state.scrollConstraints,
+          isAnimating: false,
+        },
+      }),
     };
 
-    const state = constrainScrollState(newState);
+    const { state, shouldAnimate, animateTo } = constrainScrollState(newState);
 
-    this.setState(state);
+    this.setState(state, () => {
+      if (shouldAnimate && animateTo) {
+        scrollConstraintsAnimationTimeout = setTimeout(() => {
+          const cancel = easeToValuesRAF({
+            fromValues: {
+              scrollX: newState.scrollX,
+              scrollY: newState.scrollY,
+              zoom: newState.zoom.value,
+            },
+            toValues: {
+              scrollX: animateTo.scrollX,
+              scrollY: animateTo.scrollY,
+              zoom: animateTo.zoom.value,
+            },
+            interpolateValue: (from, to, progress, key) => {
+              // for zoom, use different easing
+              if (key === "zoom") {
+                return from * Math.pow(to / from, easeOut(progress));
+              }
+              // handle using default
+              return undefined;
+            },
+            onStep: ({ scrollX, scrollY, zoom }) => {
+              this.setState({
+                scrollX,
+                scrollY,
+                zoom: { value: getNormalizedZoom(zoom) },
+              });
+            },
+            onStart: () => {
+              this.setState((inAnimationState) => ({
+                shouldCacheIgnoreZoom: true,
+                scrollConstraints: {
+                  ...inAnimationState.scrollConstraints!, // existance scrollConstraints is checked in test for shouldAnimate
+                  isAnimating: true,
+                },
+              }));
+              cancelRender();
+            },
+            onEnd: () => {
+              this.setState((inAnimationState) => ({
+                shouldCacheIgnoreZoom: false,
+                scrollConstraints: {
+                  ...inAnimationState.scrollConstraints!,
+                  isAnimating: false,
+                },
+              }));
+            },
+            onCancel: () => {
+              this.setState((inAnimationState) => {
+                return {
+                  shouldCacheIgnoreZoom: false,
+                  scrollConstraints: {
+                    ...inAnimationState.scrollConstraints!,
+                    isAnimating: false,
+                  },
+                };
+              });
+            },
+            duration: 200,
+          });
+
+          this.cancelInProgresAnimation = () => {
+            cancel();
+            this.cancelInProgresAnimation = null;
+          };
+        }, 200);
+      }
+    });
   };
 
   setToast = (
diff --git a/src/scene/scrollConstraints.ts b/src/scene/scrollConstraints.ts
index e5895cf3a..973d2b2f0 100644
--- a/src/scene/scrollConstraints.ts
+++ b/src/scene/scrollConstraints.ts
@@ -286,9 +286,9 @@ const constrainScrollValues = ({
  * @param state - The application state containing scroll, zoom, and constraint information.
  * @returns True if the viewport is outside the constrained area; otherwise undefined.
  */
-export const isViewportOutsideOfConstrainedArea = (state: AppState) => {
+const isViewportOutsideOfConstrainedArea = (state: AppState) => {
   if (!state.scrollConstraints) {
-    return;
+    return false;
   }
 
   const { scrollX, scrollY, width, height, scrollConstraints } = state;
@@ -307,19 +307,21 @@ export const isViewportOutsideOfConstrainedArea = (state: AppState) => {
  * @param state - The original AppState with the current scroll position, dimensions, and constraints.
  * @returns A new AppState object with scroll values constrained as per the defined constraints.
  */
-export const constrainScrollState = (state: AppState): AppState => {
+export const constrainScrollState = (
+  state: AppState,
+): {
+  state: AppState;
+  shouldAnimate: boolean;
+  animateTo: {
+    scrollX: AppState["scrollX"];
+    scrollY: AppState["scrollY"];
+    zoom: AppState["zoom"];
+  } | null;
+} => {
   if (!state.scrollConstraints || state.scrollConstraints.isAnimating) {
-    return state;
+    return { state, shouldAnimate: false, animateTo: null };
   }
-  const {
-    scrollX,
-    scrollY,
-    width,
-    height,
-    scrollConstraints,
-    zoom,
-    cursorButton,
-  } = state;
+  const { scrollX, scrollY, width, height, scrollConstraints, zoom } = state;
 
   const constrainedValues = constrainScrollValues({
     ...calculateConstraints({
@@ -327,22 +329,41 @@ export const constrainScrollState = (state: AppState): AppState => {
       width,
       height,
       zoom,
-      cursorButton,
+      cursorButton: "down",
     }),
     scrollX,
     scrollY,
   });
 
-  const isStateChanged =
-    constrainedValues.scrollX !== scrollX ||
-    constrainedValues.scrollY !== scrollY;
+  const shouldAnimate = isViewportOutsideOfConstrainedArea(state);
 
-  if (isStateChanged) {
+  const animateTo = shouldAnimate
+    ? constrainScrollValues({
+        ...calculateConstraints({
+          scrollConstraints,
+          width,
+          height,
+          zoom,
+          cursorButton: "up",
+        }),
+        scrollX,
+        scrollY,
+      })
+    : null;
+
+  if (
+    constrainedValues.scrollX !== scrollX ||
+    constrainedValues.scrollY !== scrollY
+  ) {
     return {
-      ...state,
-      ...constrainedValues,
+      state: {
+        ...state,
+        ...constrainedValues,
+      },
+      shouldAnimate,
+      animateTo,
     };
   }
 
-  return state;
+  return { state, shouldAnimate, animateTo };
 };

From b4e80b602d5692f4212db26873d800671825636c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Arno=C5=A1t=20Pleskot?= <arnostpleskot@gmail.com>
Date: Wed, 13 Sep 2023 15:57:50 +0200
Subject: [PATCH 38/57] feat: add memoization

---
 src/scene/scrollConstraints.ts | 104 ++++++++++++++++++++++-----------
 1 file changed, 71 insertions(+), 33 deletions(-)

diff --git a/src/scene/scrollConstraints.ts b/src/scene/scrollConstraints.ts
index 973d2b2f0..b88db8fe1 100644
--- a/src/scene/scrollConstraints.ts
+++ b/src/scene/scrollConstraints.ts
@@ -1,4 +1,5 @@
 import { AppState, ScrollConstraints } from "../types";
+import { isShallowEqual } from "../utils";
 import { getNormalizedZoom } from "./zoom";
 
 /**
@@ -301,6 +302,15 @@ const isViewportOutsideOfConstrainedArea = (state: AppState) => {
   );
 };
 
+let memoizedValues: {
+  previousState: Pick<
+    AppState,
+    "zoom" | "width" | "height" | "scrollConstraints"
+  >;
+  constraints: ReturnType<typeof calculateConstraints>;
+  constraintsWithoutOverscroll: ReturnType<typeof calculateConstraints>;
+} | null = null;
+
 /**
  * Constrains the AppState scroll values within the defined scroll constraints.
  *
@@ -323,47 +333,75 @@ export const constrainScrollState = (
   }
   const { scrollX, scrollY, width, height, scrollConstraints, zoom } = state;
 
+  const canUseMemoizedValues =
+    memoizedValues?.previousState.scrollConstraints && // can't use memoized values if there were no scrollConstraints in memoizedValues
+    memoizedValues && // there are memoized values
+    isShallowEqual(
+      // current scrollConstraints are the same as in memoizedValues
+      state.scrollConstraints,
+      memoizedValues.previousState.scrollConstraints!,
+    ) &&
+    isShallowEqual(
+      // current zoom and window dimensions are equal to those in memoizedValues
+      { zoom: zoom.value, width, height },
+      {
+        zoom: memoizedValues.previousState.zoom.value,
+        width: memoizedValues.previousState.width,
+        height: memoizedValues.previousState.height,
+      },
+    );
+
+  const constraints = canUseMemoizedValues
+    ? memoizedValues!.constraints
+    : calculateConstraints({
+        scrollConstraints,
+        width,
+        height,
+        zoom,
+        cursorButton: "down",
+      });
+
+  const constraintsWithoutOverscroll = canUseMemoizedValues
+    ? memoizedValues!.constraintsWithoutOverscroll
+    : calculateConstraints({
+        scrollConstraints,
+        width,
+        height,
+        zoom,
+        cursorButton: "up",
+      });
+
   const constrainedValues = constrainScrollValues({
-    ...calculateConstraints({
-      scrollConstraints,
-      width,
-      height,
-      zoom,
-      cursorButton: "down",
-    }),
+    ...constraints,
     scrollX,
     scrollY,
   });
 
-  const shouldAnimate = isViewportOutsideOfConstrainedArea(state);
+  const animateTo = constrainScrollValues({
+    ...constraintsWithoutOverscroll,
+    scrollX,
+    scrollY,
+  });
 
-  const animateTo = shouldAnimate
-    ? constrainScrollValues({
-        ...calculateConstraints({
-          scrollConstraints,
-          width,
-          height,
-          zoom,
-          cursorButton: "up",
-        }),
-        scrollX,
-        scrollY,
-      })
-    : null;
-
-  if (
-    constrainedValues.scrollX !== scrollX ||
-    constrainedValues.scrollY !== scrollY
-  ) {
-    return {
-      state: {
-        ...state,
-        ...constrainedValues,
+  if (!canUseMemoizedValues) {
+    memoizedValues = {
+      previousState: {
+        zoom: state.zoom,
+        width: state.width,
+        height: state.height,
+        scrollConstraints: state.scrollConstraints,
       },
-      shouldAnimate,
-      animateTo,
+      constraints,
+      constraintsWithoutOverscroll,
     };
   }
 
-  return { state, shouldAnimate, animateTo };
+  return {
+    state: {
+      ...state,
+      ...constrainedValues,
+    },
+    shouldAnimate: isViewportOutsideOfConstrainedArea(state),
+    animateTo,
+  };
 };

From edf54d15438f24b2d744015ee8f044ebaee596d4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Arno=C5=A1t=20Pleskot?= <arnostpleskot@gmail.com>
Date: Wed, 13 Sep 2023 15:58:38 +0200
Subject: [PATCH 39/57] fix: scale constrained area based on zoom

---
 src/scene/scrollConstraints.ts | 10 ++++++----
 1 file changed, 6 insertions(+), 4 deletions(-)

diff --git a/src/scene/scrollConstraints.ts b/src/scene/scrollConstraints.ts
index b88db8fe1..eea06c71b 100644
--- a/src/scene/scrollConstraints.ts
+++ b/src/scene/scrollConstraints.ts
@@ -292,13 +292,15 @@ const isViewportOutsideOfConstrainedArea = (state: AppState) => {
     return false;
   }
 
-  const { scrollX, scrollY, width, height, scrollConstraints } = state;
+  const { scrollX, scrollY, width, height, scrollConstraints, zoom } = state;
 
   return (
     scrollX > scrollConstraints.x ||
-    scrollX - width < scrollConstraints.x - scrollConstraints.width ||
-    scrollY < scrollConstraints.y ||
-    scrollY + height > scrollConstraints.y + scrollConstraints.height
+    scrollX - width <
+      scrollConstraints.x - scrollConstraints.width * zoom.value ||
+    scrollY > scrollConstraints.y ||
+    scrollY - height <
+      scrollConstraints.y - scrollConstraints.height * zoom.value
   );
 };
 

From ddb08ce732033243cf6c05089b37ca5d92fe0ae5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Arno=C5=A1t=20Pleskot?= <arnostpleskot@gmail.com>
Date: Wed, 13 Sep 2023 16:18:47 +0200
Subject: [PATCH 40/57] feat: use single function for animating canvas
 translation

---
 src/components/App.tsx | 167 +++++++++++++++++++++--------------------
 src/types.ts           |   6 ++
 2 files changed, 91 insertions(+), 82 deletions(-)

diff --git a/src/components/App.tsx b/src/components/App.tsx
index 0667ef18b..4e09045e8 100644
--- a/src/components/App.tsx
+++ b/src/components/App.tsx
@@ -228,6 +228,7 @@ import {
   SidebarName,
   SidebarTabName,
   ScrollConstraints,
+  AnimateTranslateCanvasValues,
 } from "../types";
 import {
   debounce,
@@ -2627,28 +2628,18 @@ class App extends React.Component<AppProps, AppState> {
       const origScrollY = this.state.scrollY;
       const origZoom = this.state.zoom.value;
 
-      const cancel = easeToValuesRAF({
-        fromValues: {
-          scrollX: origScrollX,
-          scrollY: origScrollY,
-          zoom: origZoom,
-        },
-        toValues: { scrollX, scrollY, zoom: zoom.value },
-        interpolateValue: (from, to, progress, key) => {
-          // for zoom, use different easing
-          if (key === "zoom") {
-            return from * Math.pow(to / from, easeOut(progress));
-          }
-          // handle using default
-          return undefined;
-        },
-        onStep: ({ scrollX, scrollY, zoom }) => {
-          this.setState({
-            scrollX,
-            scrollY,
-            zoom: { value: zoom },
-          });
-        },
+      const fromValues = {
+        scrollX: this.state.scrollX,
+        scrollY: this.state.scrollY,
+        zoom: this.state.zoom.value,
+      };
+
+      const toValues = { scrollX, scrollY, zoom: zoom.value };
+
+      this.animateTranslateCanvas({
+        fromValues,
+        toValues,
+        duration: opts?.duration ?? 500,
         onStart: () => {
           this.setState({ shouldCacheIgnoreZoom: true });
         },
@@ -2658,13 +2649,7 @@ class App extends React.Component<AppProps, AppState> {
         onCancel: () => {
           this.setState({ shouldCacheIgnoreZoom: false });
         },
-        duration: opts?.duration ?? 500,
       });
-
-      this.cancelInProgresAnimation = () => {
-        cancel();
-        this.cancelInProgresAnimation = null;
-      };
     } else {
       this.setState({ scrollX, scrollY, zoom });
     }
@@ -2707,74 +2692,92 @@ class App extends React.Component<AppProps, AppState> {
     this.setState(state, () => {
       if (shouldAnimate && animateTo) {
         scrollConstraintsAnimationTimeout = setTimeout(() => {
-          const cancel = easeToValuesRAF({
-            fromValues: {
-              scrollX: newState.scrollX,
-              scrollY: newState.scrollY,
-              zoom: newState.zoom.value,
-            },
-            toValues: {
-              scrollX: animateTo.scrollX,
-              scrollY: animateTo.scrollY,
-              zoom: animateTo.zoom.value,
-            },
-            interpolateValue: (from, to, progress, key) => {
-              // for zoom, use different easing
-              if (key === "zoom") {
-                return from * Math.pow(to / from, easeOut(progress));
-              }
-              // handle using default
-              return undefined;
-            },
-            onStep: ({ scrollX, scrollY, zoom }) => {
-              this.setState({
-                scrollX,
-                scrollY,
-                zoom: { value: getNormalizedZoom(zoom) },
-              });
-            },
+          const fromValues = {
+            scrollX: newState.scrollX,
+            scrollY: newState.scrollY,
+            zoom: newState.zoom.value,
+          };
+          const toValues = {
+            scrollX: animateTo.scrollX,
+            scrollY: animateTo.scrollY,
+            zoom: animateTo.zoom.value,
+          };
+          const cleanUp = () => {
+            this.setState((inAnimationState) => ({
+              shouldCacheIgnoreZoom: false,
+              scrollConstraints: {
+                ...inAnimationState.scrollConstraints!,
+                isAnimating: false,
+              },
+            }));
+          };
+
+          this.animateTranslateCanvas({
+            fromValues,
+            toValues,
+            duration: 200,
             onStart: () => {
               this.setState((inAnimationState) => ({
                 shouldCacheIgnoreZoom: true,
                 scrollConstraints: {
-                  ...inAnimationState.scrollConstraints!, // existance scrollConstraints is checked in test for shouldAnimate
+                  ...inAnimationState.scrollConstraints!,
                   isAnimating: true,
                 },
               }));
-              cancelRender();
             },
-            onEnd: () => {
-              this.setState((inAnimationState) => ({
-                shouldCacheIgnoreZoom: false,
-                scrollConstraints: {
-                  ...inAnimationState.scrollConstraints!,
-                  isAnimating: false,
-                },
-              }));
-            },
-            onCancel: () => {
-              this.setState((inAnimationState) => {
-                return {
-                  shouldCacheIgnoreZoom: false,
-                  scrollConstraints: {
-                    ...inAnimationState.scrollConstraints!,
-                    isAnimating: false,
-                  },
-                };
-              });
-            },
-            duration: 200,
+            onEnd: cleanUp,
+            onCancel: cleanUp,
           });
-
-          this.cancelInProgresAnimation = () => {
-            cancel();
-            this.cancelInProgresAnimation = null;
-          };
         }, 200);
       }
     });
   };
 
+  animateTranslateCanvas = ({
+    fromValues,
+    toValues,
+    duration,
+    onStart,
+    onEnd,
+    onCancel,
+  }: {
+    fromValues: AnimateTranslateCanvasValues;
+    toValues: AnimateTranslateCanvasValues;
+    duration: number;
+    onStart: () => void;
+    onEnd: () => void;
+    onCancel: () => void;
+  }) => {
+    const cancel = easeToValuesRAF({
+      fromValues,
+      toValues,
+      interpolateValue: (from, to, progress, key) => {
+        // for zoom, use different easing
+        if (key === "zoom") {
+          return from * Math.pow(to / from, easeOut(progress));
+        }
+        // handle using default
+        return undefined;
+      },
+      onStep: ({ scrollX, scrollY, zoom }) => {
+        this.setState({
+          scrollX,
+          scrollY,
+          zoom: { value: zoom },
+        });
+      },
+      onStart,
+      onEnd,
+      onCancel,
+      duration,
+    });
+
+    this.cancelInProgresAnimation = () => {
+      cancel();
+      this.cancelInProgresAnimation = null;
+    };
+  };
+
   setToast = (
     toast: {
       message: string;
diff --git a/src/types.ts b/src/types.ts
index 5f1683f5e..1859e17e3 100644
--- a/src/types.ts
+++ b/src/types.ts
@@ -665,3 +665,9 @@ export type ScrollConstraints = {
   viewportZoomFactor?: number;
   lockZoom?: boolean;
 };
+
+export type AnimateTranslateCanvasValues = {
+  scrollX: AppState["scrollX"];
+  scrollY: AppState["scrollY"];
+  zoom: AppState["zoom"]["value"];
+};

From d1e3ea431b570440301904df2b04f1db847a9040 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Arno=C5=A1t=20Pleskot?= <arnostpleskot@gmail.com>
Date: Wed, 13 Sep 2023 16:40:39 +0200
Subject: [PATCH 41/57] chore: renaming

---
 src/scene/scrollConstraints.ts | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/src/scene/scrollConstraints.ts b/src/scene/scrollConstraints.ts
index eea06c71b..1aff887e0 100644
--- a/src/scene/scrollConstraints.ts
+++ b/src/scene/scrollConstraints.ts
@@ -49,7 +49,7 @@ export const calculateConstrainedScrollCenter = (
     width,
     height,
     zoom: _zoom,
-    cursorButton: "up",
+    allowOverscroll: false,
   });
 
   return {
@@ -98,13 +98,13 @@ const calculateConstraints = ({
   width,
   height,
   zoom,
-  cursorButton,
+  allowOverscroll,
 }: {
   scrollConstraints: ScrollConstraints;
   width: AppState["width"];
   height: AppState["height"];
   zoom: AppState["zoom"];
-  cursorButton: AppState["cursorButton"];
+  allowOverscroll: boolean;
 }) => {
   // Set the overscroll allowance percentage
   const OVERSCROLL_ALLOWANCE_PERCENTAGE = 0.2;
@@ -158,7 +158,7 @@ const calculateConstraints = ({
     let minScrollY;
 
     // Handling the X-axis
-    if (cursorButton === "down") {
+    if (allowOverscroll) {
       if (shouldAdjustForCenteredViewX) {
         maxScrollX = constrainedScrollCenterX + overscrollAllowance;
         minScrollX = constrainedScrollCenterX - overscrollAllowance;
@@ -179,7 +179,7 @@ const calculateConstraints = ({
     }
 
     // Handling the Y-axis
-    if (cursorButton === "down") {
+    if (allowOverscroll) {
       if (shouldAdjustForCenteredViewY) {
         maxScrollY = constrainedScrollCenterY + overscrollAllowance;
         minScrollY = constrainedScrollCenterY - overscrollAllowance;
@@ -360,7 +360,7 @@ export const constrainScrollState = (
         width,
         height,
         zoom,
-        cursorButton: "down",
+        allowOverscroll: true,
       });
 
   const constraintsWithoutOverscroll = canUseMemoizedValues
@@ -370,7 +370,7 @@ export const constrainScrollState = (
         width,
         height,
         zoom,
-        cursorButton: "up",
+        allowOverscroll: false,
       });
 
   const constrainedValues = constrainScrollValues({

From 186ed43671becd66ad14a68c05bea52ddb50ba7e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Arno=C5=A1t=20Pleskot?= <arnostpleskot@gmail.com>
Date: Wed, 13 Sep 2023 16:41:10 +0200
Subject: [PATCH 42/57] feat: animate to constrained area on setting constrains

---
 src/components/App.tsx | 93 +++++++++++++++++++++++++++---------------
 1 file changed, 59 insertions(+), 34 deletions(-)

diff --git a/src/components/App.tsx b/src/components/App.tsx
index 4e09045e8..ca47a64bf 100644
--- a/src/components/App.tsx
+++ b/src/components/App.tsx
@@ -2624,10 +2624,6 @@ class App extends React.Component<AppProps, AppState> {
     // when animating, we use RequestAnimationFrame to prevent the animation
     // from slowing down other processes
     if (opts?.animate) {
-      const origScrollX = this.state.scrollX;
-      const origScrollY = this.state.scrollY;
-      const origZoom = this.state.zoom.value;
-
       const fromValues = {
         scrollX: this.state.scrollX,
         scrollY: this.state.scrollY,
@@ -2702,38 +2698,46 @@ class App extends React.Component<AppProps, AppState> {
             scrollY: animateTo.scrollY,
             zoom: animateTo.zoom.value,
           };
-          const cleanUp = () => {
-            this.setState((inAnimationState) => ({
-              shouldCacheIgnoreZoom: false,
-              scrollConstraints: {
-                ...inAnimationState.scrollConstraints!,
-                isAnimating: false,
-              },
-            }));
-          };
 
-          this.animateTranslateCanvas({
-            fromValues,
-            toValues,
-            duration: 200,
-            onStart: () => {
-              this.setState((inAnimationState) => ({
-                shouldCacheIgnoreZoom: true,
-                scrollConstraints: {
-                  ...inAnimationState.scrollConstraints!,
-                  isAnimating: true,
-                },
-              }));
-            },
-            onEnd: cleanUp,
-            onCancel: cleanUp,
-          });
+          this.animateToConstrainedArea(fromValues, toValues);
         }, 200);
       }
     });
   };
 
-  animateTranslateCanvas = ({
+  private animateToConstrainedArea = (
+    fromValues: AnimateTranslateCanvasValues,
+    toValues: AnimateTranslateCanvasValues,
+  ) => {
+    const cleanUp = () => {
+      this.setState((state) => ({
+        shouldCacheIgnoreZoom: false,
+        scrollConstraints: {
+          ...state.scrollConstraints!,
+          isAnimating: false,
+        },
+      }));
+    };
+
+    this.animateTranslateCanvas({
+      fromValues,
+      toValues,
+      duration: 200,
+      onStart: () => {
+        this.setState((state) => ({
+          shouldCacheIgnoreZoom: true,
+          scrollConstraints: {
+            ...state.scrollConstraints!,
+            isAnimating: true,
+          },
+        }));
+      },
+      onEnd: cleanUp,
+      onCancel: cleanUp,
+    });
+  };
+
+  private animateTranslateCanvas = ({
     fromValues,
     toValues,
     duration,
@@ -8239,10 +8243,31 @@ class App extends React.Component<AppProps, AppState> {
     scrollConstraints: ScrollConstraints | null,
   ) => {
     if (scrollConstraints) {
-      this.setState({
-        scrollConstraints,
-        viewModeEnabled: true,
-      });
+      this.setState(
+        {
+          scrollConstraints,
+          viewModeEnabled: true,
+        },
+        () => {
+          const { animateTo } = constrainScrollState({
+            ...this.state,
+            scrollConstraints,
+          });
+
+          this.animateToConstrainedArea(
+            {
+              scrollX: this.state.scrollX,
+              scrollY: this.state.scrollY,
+              zoom: this.state.zoom.value,
+            },
+            {
+              scrollX: animateTo!.scrollX,
+              scrollY: animateTo!.scrollY,
+              zoom: animateTo!.zoom.value,
+            },
+          );
+        },
+      );
     } else {
       this.setState({
         scrollConstraints: null,

From 94e9b209510cbf60a0a24da6f0300cdd247bfc9e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Arno=C5=A1t=20Pleskot?= <arnostpleskot@gmail.com>
Date: Thu, 14 Sep 2023 12:07:30 +0200
Subject: [PATCH 43/57] fix: prevent jitter animation on pinch to zoom and on
 scroll event

---
 src/components/App.tsx         | 67 +++++++++++++++++++++-------------
 src/scene/scrollConstraints.ts |  2 +-
 2 files changed, 43 insertions(+), 26 deletions(-)

diff --git a/src/components/App.tsx b/src/components/App.tsx
index ca47a64bf..fee269489 100644
--- a/src/components/App.tsx
+++ b/src/components/App.tsx
@@ -2008,6 +2008,31 @@ class App extends React.Component<AppProps, AppState> {
         this.files,
       );
     }
+
+    if (
+      this.state.scrollConstraints &&
+      this.state.scrollConstraints.isAnimating
+    ) {
+      const { shouldAnimate, animateTo } = constrainScrollState(this.state);
+
+      scrollConstraintsAnimationTimeout = setTimeout(() => {
+        this.cancelInProgresAnimation?.();
+        if (shouldAnimate && animateTo) {
+          const fromValues = {
+            scrollX: this.state.scrollX,
+            scrollY: this.state.scrollY,
+            zoom: this.state.zoom.value,
+          };
+          const toValues = {
+            scrollX: animateTo.scrollX,
+            scrollY: animateTo.scrollY,
+            zoom: animateTo.zoom.value,
+          };
+
+          this.animateToConstrainedArea(fromValues, toValues);
+        }
+      }, 200);
+    }
   }
 
   private renderInteractiveSceneCallback = ({
@@ -2683,25 +2708,14 @@ class App extends React.Component<AppProps, AppState> {
       }),
     };
 
-    const { state, shouldAnimate, animateTo } = constrainScrollState(newState);
+    const { state, shouldAnimate } = constrainScrollState(newState);
 
-    this.setState(state, () => {
-      if (shouldAnimate && animateTo) {
-        scrollConstraintsAnimationTimeout = setTimeout(() => {
-          const fromValues = {
-            scrollX: newState.scrollX,
-            scrollY: newState.scrollY,
-            zoom: newState.zoom.value,
-          };
-          const toValues = {
-            scrollX: animateTo.scrollX,
-            scrollY: animateTo.scrollY,
-            zoom: animateTo.zoom.value,
-          };
-
-          this.animateToConstrainedArea(fromValues, toValues);
-        }, 200);
-      }
+    this.setState({
+      ...state,
+      scrollConstraints: {
+        ...state.scrollConstraints!,
+        isAnimating: shouldAnimate,
+      },
     });
   };
 
@@ -2724,13 +2738,16 @@ class App extends React.Component<AppProps, AppState> {
       toValues,
       duration: 200,
       onStart: () => {
-        this.setState((state) => ({
-          shouldCacheIgnoreZoom: true,
-          scrollConstraints: {
-            ...state.scrollConstraints!,
-            isAnimating: true,
-          },
-        }));
+        this.setState((state) => {
+          cancelRender();
+          return {
+            shouldCacheIgnoreZoom: true,
+            scrollConstraints: {
+              ...state.scrollConstraints!,
+              isAnimating: false,
+            },
+          };
+        });
       },
       onEnd: cleanUp,
       onCancel: cleanUp,
diff --git a/src/scene/scrollConstraints.ts b/src/scene/scrollConstraints.ts
index 1aff887e0..402dc80c0 100644
--- a/src/scene/scrollConstraints.ts
+++ b/src/scene/scrollConstraints.ts
@@ -330,7 +330,7 @@ export const constrainScrollState = (
     zoom: AppState["zoom"];
   } | null;
 } => {
-  if (!state.scrollConstraints || state.scrollConstraints.isAnimating) {
+  if (!state.scrollConstraints) {
     return { state, shouldAnimate: false, animateTo: null };
   }
   const { scrollX, scrollY, width, height, scrollConstraints, zoom } = state;

From c33fb846abc513aa51ae64afcf875c6284bfc878 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Arno=C5=A1t=20Pleskot?= <arnostpleskot@gmail.com>
Date: Thu, 14 Sep 2023 23:15:57 +0200
Subject: [PATCH 44/57] chore: cleanup

---
 src/components/App.tsx         | 66 ++++++++++++++--------------------
 src/scene/scrollConstraints.ts | 52 ++++++++-------------------
 src/types.ts                   |  2 +-
 3 files changed, 42 insertions(+), 78 deletions(-)

diff --git a/src/components/App.tsx b/src/components/App.tsx
index fee269489..fa5ff00bd 100644
--- a/src/components/App.tsx
+++ b/src/components/App.tsx
@@ -2009,28 +2009,23 @@ class App extends React.Component<AppProps, AppState> {
       );
     }
 
-    if (
-      this.state.scrollConstraints &&
-      this.state.scrollConstraints.isAnimating
-    ) {
-      const { shouldAnimate, animateTo } = constrainScrollState(this.state);
+    if (this.state.scrollConstraints?.animateOnNextUpdate) {
+      const newState = constrainScrollState(this.state, false);
 
       scrollConstraintsAnimationTimeout = setTimeout(() => {
         this.cancelInProgresAnimation?.();
-        if (shouldAnimate && animateTo) {
-          const fromValues = {
-            scrollX: this.state.scrollX,
-            scrollY: this.state.scrollY,
-            zoom: this.state.zoom.value,
-          };
-          const toValues = {
-            scrollX: animateTo.scrollX,
-            scrollY: animateTo.scrollY,
-            zoom: animateTo.zoom.value,
-          };
+        const fromValues = {
+          scrollX: this.state.scrollX,
+          scrollY: this.state.scrollY,
+          zoom: this.state.zoom.value,
+        };
+        const toValues = {
+          scrollX: newState.scrollX,
+          scrollY: newState.scrollY,
+          zoom: newState.zoom.value,
+        };
 
-          this.animateToConstrainedArea(fromValues, toValues);
-        }
+        this.animateToConstrainedArea(fromValues, toValues);
       }, 200);
     }
   }
@@ -2701,22 +2696,10 @@ class App extends React.Component<AppProps, AppState> {
       ...(this.state.scrollConstraints && {
         // manually reset if setState in onCancel wasn't committed yet
         shouldCacheIgnoreZoom: false,
-        scrollConstraints: {
-          ...this.state.scrollConstraints,
-          isAnimating: false,
-        },
       }),
     };
 
-    const { state, shouldAnimate } = constrainScrollState(newState);
-
-    this.setState({
-      ...state,
-      scrollConstraints: {
-        ...state.scrollConstraints!,
-        isAnimating: shouldAnimate,
-      },
-    });
+    this.setState(constrainScrollState(newState));
   };
 
   private animateToConstrainedArea = (
@@ -2728,7 +2711,7 @@ class App extends React.Component<AppProps, AppState> {
         shouldCacheIgnoreZoom: false,
         scrollConstraints: {
           ...state.scrollConstraints!,
-          isAnimating: false,
+          animateOnNextUpdate: false,
         },
       }));
     };
@@ -2744,7 +2727,7 @@ class App extends React.Component<AppProps, AppState> {
             shouldCacheIgnoreZoom: true,
             scrollConstraints: {
               ...state.scrollConstraints!,
-              isAnimating: false,
+              animateOnNextUpdate: false,
             },
           };
         });
@@ -8266,10 +8249,13 @@ class App extends React.Component<AppProps, AppState> {
           viewModeEnabled: true,
         },
         () => {
-          const { animateTo } = constrainScrollState({
-            ...this.state,
-            scrollConstraints,
-          });
+          const newState = constrainScrollState(
+            {
+              ...this.state,
+              scrollConstraints,
+            },
+            false,
+          );
 
           this.animateToConstrainedArea(
             {
@@ -8278,9 +8264,9 @@ class App extends React.Component<AppProps, AppState> {
               zoom: this.state.zoom.value,
             },
             {
-              scrollX: animateTo!.scrollX,
-              scrollY: animateTo!.scrollY,
-              zoom: animateTo!.zoom.value,
+              scrollX: newState.scrollX,
+              scrollY: newState.scrollY,
+              zoom: newState.zoom.value,
             },
           );
         },
diff --git a/src/scene/scrollConstraints.ts b/src/scene/scrollConstraints.ts
index 402dc80c0..a0497170d 100644
--- a/src/scene/scrollConstraints.ts
+++ b/src/scene/scrollConstraints.ts
@@ -310,7 +310,7 @@ let memoizedValues: {
     "zoom" | "width" | "height" | "scrollConstraints"
   >;
   constraints: ReturnType<typeof calculateConstraints>;
-  constraintsWithoutOverscroll: ReturnType<typeof calculateConstraints>;
+  allowOverscroll: boolean;
 } | null = null;
 
 /**
@@ -321,30 +321,24 @@ let memoizedValues: {
  */
 export const constrainScrollState = (
   state: AppState,
-): {
-  state: AppState;
-  shouldAnimate: boolean;
-  animateTo: {
-    scrollX: AppState["scrollX"];
-    scrollY: AppState["scrollY"];
-    zoom: AppState["zoom"];
-  } | null;
-} => {
+  allowOverscroll = true,
+): AppState => {
   if (!state.scrollConstraints) {
-    return { state, shouldAnimate: false, animateTo: null };
+    return state;
   }
   const { scrollX, scrollY, width, height, scrollConstraints, zoom } = state;
 
   const canUseMemoizedValues =
-    memoizedValues?.previousState.scrollConstraints && // can't use memoized values if there were no scrollConstraints in memoizedValues
     memoizedValues && // there are memoized values
+    memoizedValues.previousState.scrollConstraints && // can't use memoized values if there were no scrollConstraints in memoizedValues
+    memoizedValues.allowOverscroll === allowOverscroll && // allowOverscroll is the same as in memoizedValues
+    // current scrollConstraints are the same as in memoizedValues
     isShallowEqual(
-      // current scrollConstraints are the same as in memoizedValues
       state.scrollConstraints,
       memoizedValues.previousState.scrollConstraints!,
     ) &&
+    // current zoom and window dimensions are equal to those in memoizedValues
     isShallowEqual(
-      // current zoom and window dimensions are equal to those in memoizedValues
       { zoom: zoom.value, width, height },
       {
         zoom: memoizedValues.previousState.zoom.value,
@@ -360,17 +354,7 @@ export const constrainScrollState = (
         width,
         height,
         zoom,
-        allowOverscroll: true,
-      });
-
-  const constraintsWithoutOverscroll = canUseMemoizedValues
-    ? memoizedValues!.constraintsWithoutOverscroll
-    : calculateConstraints({
-        scrollConstraints,
-        width,
-        height,
-        zoom,
-        allowOverscroll: false,
+        allowOverscroll,
       });
 
   const constrainedValues = constrainScrollValues({
@@ -379,12 +363,6 @@ export const constrainScrollState = (
     scrollY,
   });
 
-  const animateTo = constrainScrollValues({
-    ...constraintsWithoutOverscroll,
-    scrollX,
-    scrollY,
-  });
-
   if (!canUseMemoizedValues) {
     memoizedValues = {
       previousState: {
@@ -394,16 +372,16 @@ export const constrainScrollState = (
         scrollConstraints: state.scrollConstraints,
       },
       constraints,
-      constraintsWithoutOverscroll,
+      allowOverscroll,
     };
   }
 
   return {
-    state: {
-      ...state,
-      ...constrainedValues,
+    ...state,
+    scrollConstraints: {
+      ...state.scrollConstraints,
+      animateOnNextUpdate: isViewportOutsideOfConstrainedArea(state),
     },
-    shouldAnimate: isViewportOutsideOfConstrainedArea(state),
-    animateTo,
+    ...constrainedValues,
   };
 };
diff --git a/src/types.ts b/src/types.ts
index 1859e17e3..e269e37bd 100644
--- a/src/types.ts
+++ b/src/types.ts
@@ -661,7 +661,7 @@ export type ScrollConstraints = {
   y: number;
   width: number;
   height: number;
-  isAnimating?: boolean;
+  animateOnNextUpdate?: boolean;
   viewportZoomFactor?: number;
   lockZoom?: boolean;
 };

From 266069ae05c26b2740cd3d6194c6e99a2dbad4b9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Arno=C5=A1t=20Pleskot?= <arnostpleskot@gmail.com>
Date: Thu, 14 Sep 2023 23:26:16 +0200
Subject: [PATCH 45/57] test: update snapshots

---
 src/element/textWysiwyg.test.tsx              |   40 +-
 .../__snapshots__/contextmenu.test.tsx.snap   | 1433 ++---
 .../__snapshots__/dragCreate.test.tsx.snap    |  199 -
 .../linearElementEditor.test.tsx.snap         |   11 +-
 src/tests/__snapshots__/move.test.tsx.snap    |  226 -
 .../multiPointCreate.test.tsx.snap            |  109 -
 .../regressionTests.test.tsx.snap             | 5260 +++++++----------
 .../__snapshots__/selection.test.tsx.snap     |  191 -
 src/tests/linearElementEditor.test.tsx        |   63 +-
 9 files changed, 2640 insertions(+), 4892 deletions(-)
 delete mode 100644 src/tests/__snapshots__/dragCreate.test.tsx.snap
 delete mode 100644 src/tests/__snapshots__/move.test.tsx.snap
 delete mode 100644 src/tests/__snapshots__/multiPointCreate.test.tsx.snap
 delete mode 100644 src/tests/__snapshots__/selection.test.tsx.snap

diff --git a/src/element/textWysiwyg.test.tsx b/src/element/textWysiwyg.test.tsx
index c855de357..78a0b686b 100644
--- a/src/element/textWysiwyg.test.tsx
+++ b/src/element/textWysiwyg.test.tsx
@@ -956,8 +956,8 @@ describe("textWysiwyg", () => {
       resize(rectangle, "ne", [rectangle.x + 100, rectangle.y - 100]);
       expect([h.elements[1].x, h.elements[1].y]).toMatchInlineSnapshot(`
         [
-          85,
-          4.5,
+          3085,
+          1862.5,
         ]
       `);
 
@@ -1280,8 +1280,8 @@ describe("textWysiwyg", () => {
         fireEvent.click(screen.getByTitle("Align top"));
         expect([h.elements[1].x, h.elements[1].y]).toMatchInlineSnapshot(`
           [
-            15,
-            25,
+            2665,
+            1505,
           ]
         `);
       });
@@ -1291,8 +1291,8 @@ describe("textWysiwyg", () => {
         fireEvent.click(screen.getByTitle("Align top"));
         expect([h.elements[1].x, h.elements[1].y]).toMatchInlineSnapshot(`
           [
-            30,
-            25,
+            3085,
+            1505,
           ]
         `);
       });
@@ -1303,8 +1303,8 @@ describe("textWysiwyg", () => {
 
         expect([h.elements[1].x, h.elements[1].y]).toMatchInlineSnapshot(`
           [
-            45,
-            25,
+            3505,
+            1505,
           ]
         `);
       });
@@ -1314,8 +1314,8 @@ describe("textWysiwyg", () => {
         fireEvent.click(screen.getByTitle("Left"));
         expect([h.elements[1].x, h.elements[1].y]).toMatchInlineSnapshot(`
           [
-            15,
-            45,
+            2665,
+            1862.5,
           ]
         `);
       });
@@ -1326,8 +1326,8 @@ describe("textWysiwyg", () => {
 
         expect([h.elements[1].x, h.elements[1].y]).toMatchInlineSnapshot(`
           [
-            30,
-            45,
+            3085,
+            1862.5,
           ]
         `);
       });
@@ -1338,8 +1338,8 @@ describe("textWysiwyg", () => {
 
         expect([h.elements[1].x, h.elements[1].y]).toMatchInlineSnapshot(`
           [
-            45,
-            45,
+            3505,
+            1862.5,
           ]
         `);
       });
@@ -1350,8 +1350,8 @@ describe("textWysiwyg", () => {
 
         expect([h.elements[1].x, h.elements[1].y]).toMatchInlineSnapshot(`
           [
-            15,
-            65,
+            2665,
+            2220,
           ]
         `);
       });
@@ -1361,8 +1361,8 @@ describe("textWysiwyg", () => {
         fireEvent.click(screen.getByTitle("Align bottom"));
         expect([h.elements[1].x, h.elements[1].y]).toMatchInlineSnapshot(`
           [
-            30,
-            65,
+            3085,
+            2220,
           ]
         `);
       });
@@ -1372,8 +1372,8 @@ describe("textWysiwyg", () => {
         fireEvent.click(screen.getByTitle("Align bottom"));
         expect([h.elements[1].x, h.elements[1].y]).toMatchInlineSnapshot(`
           [
-            45,
-            65,
+            3505,
+            2220,
           ]
         `);
       });
diff --git a/src/tests/__snapshots__/contextmenu.test.tsx.snap b/src/tests/__snapshots__/contextmenu.test.tsx.snap
index d7ead3b2e..292826db3 100644
--- a/src/tests/__snapshots__/contextmenu.test.tsx.snap
+++ b/src/tests/__snapshots__/contextmenu.test.tsx.snap
@@ -12,26 +12,6 @@ exports[`contextMenu element > right-clicking on a group should select whole gro
   "collaborators": Map {},
   "contextMenu": {
     "items": [
-      {
-        "contextItemLabel": "labels.cut",
-        "keyTest": [Function],
-        "name": "cut",
-        "perform": [Function],
-        "predicate": [Function],
-        "trackEvent": {
-          "category": "element",
-        },
-      },
-      {
-        "contextItemLabel": "labels.copy",
-        "keyTest": undefined,
-        "name": "copy",
-        "perform": [Function],
-        "predicate": [Function],
-        "trackEvent": {
-          "category": "element",
-        },
-      },
       {
         "contextItemLabel": "labels.paste",
         "keyTest": undefined,
@@ -42,24 +22,6 @@ exports[`contextMenu element > right-clicking on a group should select whole gro
           "category": "element",
         },
       },
-      {
-        "contextItemLabel": "labels.selectAllElementsInFrame",
-        "name": "selectAllElementsInFrame",
-        "perform": [Function],
-        "predicate": [Function],
-        "trackEvent": {
-          "category": "canvas",
-        },
-      },
-      {
-        "contextItemLabel": "labels.removeAllElementsFromFrame",
-        "name": "removeAllElementsFromFrame",
-        "perform": [Function],
-        "predicate": [Function],
-        "trackEvent": {
-          "category": "history",
-        },
-      },
       "separator",
       {
         "contextItemLabel": "labels.copyAsPng",
@@ -91,197 +53,74 @@ exports[`contextMenu element > right-clicking on a group should select whole gro
       },
       "separator",
       {
-        "contextItemLabel": "labels.copyStyles",
+        "contextItemLabel": "labels.selectAll",
         "keyTest": [Function],
-        "name": "copyStyles",
+        "name": "selectAll",
         "perform": [Function],
         "trackEvent": {
-          "category": "element",
+          "category": "canvas",
         },
       },
       {
-        "contextItemLabel": "labels.pasteStyles",
-        "keyTest": [Function],
-        "name": "pasteStyles",
+        "contextItemLabel": "labels.elementLock.unlockAll",
+        "name": "unlockAllElements",
         "perform": [Function],
+        "predicate": [Function],
         "trackEvent": {
-          "category": "element",
+          "category": "canvas",
         },
+        "viewMode": false,
       },
       "separator",
       {
-        "PanelComponent": [Function],
-        "contextItemLabel": "labels.group",
+        "checked": [Function],
+        "contextItemLabel": "labels.showGrid",
         "keyTest": [Function],
-        "name": "group",
+        "name": "gridMode",
         "perform": [Function],
         "predicate": [Function],
         "trackEvent": {
-          "category": "element",
+          "category": "canvas",
+          "predicate": [Function],
         },
+        "viewMode": true,
       },
       {
-        "contextItemLabel": "labels.unbindText",
-        "name": "unbindText",
+        "checked": [Function],
+        "contextItemLabel": "buttons.zenMode",
+        "keyTest": [Function],
+        "name": "zenMode",
         "perform": [Function],
         "predicate": [Function],
         "trackEvent": {
-          "category": "element",
+          "category": "canvas",
+          "predicate": [Function],
         },
+        "viewMode": true,
       },
       {
-        "contextItemLabel": "labels.bindText",
-        "name": "bindText",
+        "checked": [Function],
+        "contextItemLabel": "labels.viewMode",
+        "keyTest": [Function],
+        "name": "viewMode",
         "perform": [Function],
         "predicate": [Function],
         "trackEvent": {
-          "category": "element",
+          "category": "canvas",
+          "predicate": [Function],
         },
+        "viewMode": true,
       },
       {
-        "contextItemLabel": "labels.createContainerFromText",
-        "name": "wrapTextInContainer",
-        "perform": [Function],
-        "predicate": [Function],
-        "trackEvent": {
-          "category": "element",
-        },
-      },
-      {
-        "PanelComponent": [Function],
-        "contextItemLabel": "labels.ungroup",
+        "checked": [Function],
+        "contextItemLabel": "stats.title",
         "keyTest": [Function],
-        "name": "ungroup",
-        "perform": [Function],
-        "predicate": [Function],
-        "trackEvent": {
-          "category": "element",
-        },
-      },
-      "separator",
-      {
-        "contextItemLabel": "labels.addToLibrary",
-        "name": "addToLibrary",
+        "name": "stats",
         "perform": [Function],
         "trackEvent": {
-          "category": "element",
-        },
-      },
-      "separator",
-      {
-        "PanelComponent": [Function],
-        "contextItemLabel": "labels.sendBackward",
-        "keyPriority": 40,
-        "keyTest": [Function],
-        "name": "sendBackward",
-        "perform": [Function],
-        "trackEvent": {
-          "category": "element",
-        },
-      },
-      {
-        "PanelComponent": [Function],
-        "contextItemLabel": "labels.bringForward",
-        "keyPriority": 40,
-        "keyTest": [Function],
-        "name": "bringForward",
-        "perform": [Function],
-        "trackEvent": {
-          "category": "element",
-        },
-      },
-      {
-        "PanelComponent": [Function],
-        "contextItemLabel": "labels.sendToBack",
-        "keyTest": [Function],
-        "name": "sendToBack",
-        "perform": [Function],
-        "trackEvent": {
-          "category": "element",
-        },
-      },
-      {
-        "PanelComponent": [Function],
-        "contextItemLabel": "labels.bringToFront",
-        "keyTest": [Function],
-        "name": "bringToFront",
-        "perform": [Function],
-        "trackEvent": {
-          "category": "element",
-        },
-      },
-      "separator",
-      {
-        "contextItemLabel": "labels.flipHorizontal",
-        "keyTest": [Function],
-        "name": "flipHorizontal",
-        "perform": [Function],
-        "trackEvent": {
-          "category": "element",
-        },
-      },
-      {
-        "contextItemLabel": "labels.flipVertical",
-        "keyTest": [Function],
-        "name": "flipVertical",
-        "perform": [Function],
-        "trackEvent": {
-          "category": "element",
-        },
-      },
-      "separator",
-      {
-        "contextItemLabel": [Function],
-        "name": "toggleLinearEditor",
-        "perform": [Function],
-        "predicate": [Function],
-        "trackEvent": {
-          "category": "element",
-        },
-      },
-      {
-        "PanelComponent": [Function],
-        "contextItemLabel": [Function],
-        "keyTest": [Function],
-        "name": "hyperlink",
-        "perform": [Function],
-        "predicate": [Function],
-        "trackEvent": {
-          "action": "click",
-          "category": "hyperlink",
-        },
-      },
-      {
-        "PanelComponent": [Function],
-        "contextItemLabel": "labels.duplicateSelection",
-        "keyTest": [Function],
-        "name": "duplicateSelection",
-        "perform": [Function],
-        "trackEvent": {
-          "category": "element",
-        },
-      },
-      {
-        "contextItemLabel": [Function],
-        "keyTest": [Function],
-        "name": "toggleElementLock",
-        "perform": [Function],
-        "predicate": [Function],
-        "trackEvent": {
-          "category": "element",
-        },
-      },
-      "separator",
-      {
-        "PanelComponent": [Function],
-        "contextItemLabel": "labels.delete",
-        "keyTest": [Function],
-        "name": "deleteSelectedElements",
-        "perform": [Function],
-        "trackEvent": {
-          "action": "delete",
-          "category": "element",
+          "category": "menu",
         },
+        "viewMode": true,
       },
     ],
     "left": 30,
@@ -346,18 +185,19 @@ exports[`contextMenu element > right-clicking on a group should select whole gro
   "pendingImageElementId": null,
   "previousSelectedElementIds": {},
   "resizingElement": null,
-  "scrollConstraints": null,
-  "scrollX": 0,
-  "scrollY": 0,
-  "scrolledOutside": false,
-  "selectedElementIds": {
-    "id0": true,
-    "id1": true,
+  "scrollConstraints": {
+    "height": 1300,
+    "lockZoom": false,
+    "width": 2560,
+    "x": 0,
+    "y": 0,
   },
+  "scrollX": -560,
+  "scrollY": -300,
+  "scrolledOutside": true,
+  "selectedElementIds": {},
   "selectedElementsAreBeingDragged": false,
-  "selectedGroupIds": {
-    "g1": true,
-  },
+  "selectedGroupIds": {},
   "selectedLinearElement": null,
   "selectionElement": null,
   "shouldCacheIgnoreZoom": false,
@@ -373,7 +213,7 @@ exports[`contextMenu element > right-clicking on a group should select whole gro
   "width": 200,
   "zenModeEnabled": false,
   "zoom": {
-    "value": 1,
+    "value": 0.1,
   },
 }
 `;
@@ -468,7 +308,7 @@ exports[`contextMenu element > right-clicking on a group should select whole gro
 
 exports[`contextMenu element > right-clicking on a group should select whole group > [end of test] number of elements 1`] = `2`;
 
-exports[`contextMenu element > right-clicking on a group should select whole group > [end of test] number of renders 1`] = `5`;
+exports[`contextMenu element > right-clicking on a group should select whole group > [end of test] number of renders 1`] = `4`;
 
 exports[`contextMenu element > selecting 'Add to library' in context menu adds element to library > [end of test] appState 1`] = `
 {
@@ -540,9 +380,15 @@ exports[`contextMenu element > selecting 'Add to library' in context menu adds e
   "pendingImageElementId": null,
   "previousSelectedElementIds": {},
   "resizingElement": null,
-  "scrollConstraints": null,
-  "scrollX": 0,
-  "scrollY": 0,
+  "scrollConstraints": {
+    "height": 1300,
+    "lockZoom": false,
+    "width": 2560,
+    "x": 0,
+    "y": 0,
+  },
+  "scrollX": -560,
+  "scrollY": -300,
   "scrolledOutside": false,
   "selectedElementIds": {
     "id0": true,
@@ -566,7 +412,7 @@ exports[`contextMenu element > selecting 'Add to library' in context menu adds e
   "width": 200,
   "zenModeEnabled": false,
   "zoom": {
-    "value": 1,
+    "value": 0.1,
   },
 }
 `;
@@ -579,7 +425,7 @@ exports[`contextMenu element > selecting 'Add to library' in context menu adds e
   "fillStyle": "hachure",
   "frameId": null,
   "groupIds": [],
-  "height": 20,
+  "height": 200,
   "id": "id0",
   "isDeleted": false,
   "link": null,
@@ -597,9 +443,9 @@ exports[`contextMenu element > selecting 'Add to library' in context menu adds e
   "updated": 1,
   "version": 2,
   "versionNonce": 401146281,
-  "width": 20,
-  "x": -10,
-  "y": 0,
+  "width": 200,
+  "x": 460,
+  "y": 300,
 }
 `;
 
@@ -638,7 +484,7 @@ exports[`contextMenu element > selecting 'Add to library' in context menu adds e
           "fillStyle": "hachure",
           "frameId": null,
           "groupIds": [],
-          "height": 20,
+          "height": 200,
           "id": "id0",
           "isDeleted": false,
           "link": null,
@@ -656,9 +502,9 @@ exports[`contextMenu element > selecting 'Add to library' in context menu adds e
           "updated": 1,
           "version": 2,
           "versionNonce": 401146281,
-          "width": 20,
-          "x": -10,
-          "y": 0,
+          "width": 200,
+          "x": 460,
+          "y": 300,
         },
       ],
     },
@@ -740,9 +586,15 @@ exports[`contextMenu element > selecting 'Bring forward' in context menu brings
   "pendingImageElementId": null,
   "previousSelectedElementIds": {},
   "resizingElement": null,
-  "scrollConstraints": null,
-  "scrollX": 0,
-  "scrollY": 0,
+  "scrollConstraints": {
+    "height": 1300,
+    "lockZoom": false,
+    "width": 2560,
+    "x": 0,
+    "y": 0,
+  },
+  "scrollX": -560,
+  "scrollY": -300,
   "scrolledOutside": false,
   "selectedElementIds": {
     "id0": true,
@@ -764,7 +616,7 @@ exports[`contextMenu element > selecting 'Bring forward' in context menu brings
   "width": 200,
   "zenModeEnabled": false,
   "zoom": {
-    "value": 1,
+    "value": 0.1,
   },
 }
 `;
@@ -777,7 +629,7 @@ exports[`contextMenu element > selecting 'Bring forward' in context menu brings
   "fillStyle": "hachure",
   "frameId": null,
   "groupIds": [],
-  "height": 20,
+  "height": 200,
   "id": "id1",
   "isDeleted": false,
   "link": null,
@@ -795,9 +647,9 @@ exports[`contextMenu element > selecting 'Bring forward' in context menu brings
   "updated": 1,
   "version": 2,
   "versionNonce": 1014066025,
-  "width": 20,
-  "x": 20,
-  "y": 30,
+  "width": 200,
+  "x": 760,
+  "y": 600,
 }
 `;
 
@@ -809,7 +661,7 @@ exports[`contextMenu element > selecting 'Bring forward' in context menu brings
   "fillStyle": "hachure",
   "frameId": null,
   "groupIds": [],
-  "height": 20,
+  "height": 200,
   "id": "id0",
   "isDeleted": false,
   "link": null,
@@ -827,9 +679,9 @@ exports[`contextMenu element > selecting 'Bring forward' in context menu brings
   "updated": 1,
   "version": 3,
   "versionNonce": 400692809,
-  "width": 20,
-  "x": -10,
-  "y": 0,
+  "width": 200,
+  "x": 460,
+  "y": 300,
 }
 `;
 
@@ -868,7 +720,7 @@ exports[`contextMenu element > selecting 'Bring forward' in context menu brings
           "fillStyle": "hachure",
           "frameId": null,
           "groupIds": [],
-          "height": 20,
+          "height": 200,
           "id": "id0",
           "isDeleted": false,
           "link": null,
@@ -886,9 +738,9 @@ exports[`contextMenu element > selecting 'Bring forward' in context menu brings
           "updated": 1,
           "version": 2,
           "versionNonce": 401146281,
-          "width": 20,
-          "x": -10,
-          "y": 0,
+          "width": 200,
+          "x": 460,
+          "y": 300,
         },
       ],
     },
@@ -911,7 +763,7 @@ exports[`contextMenu element > selecting 'Bring forward' in context menu brings
           "fillStyle": "hachure",
           "frameId": null,
           "groupIds": [],
-          "height": 20,
+          "height": 200,
           "id": "id0",
           "isDeleted": false,
           "link": null,
@@ -929,9 +781,9 @@ exports[`contextMenu element > selecting 'Bring forward' in context menu brings
           "updated": 1,
           "version": 2,
           "versionNonce": 401146281,
-          "width": 20,
-          "x": -10,
-          "y": 0,
+          "width": 200,
+          "x": 460,
+          "y": 300,
         },
         {
           "angle": 0,
@@ -940,7 +792,7 @@ exports[`contextMenu element > selecting 'Bring forward' in context menu brings
           "fillStyle": "hachure",
           "frameId": null,
           "groupIds": [],
-          "height": 20,
+          "height": 200,
           "id": "id1",
           "isDeleted": false,
           "link": null,
@@ -958,9 +810,9 @@ exports[`contextMenu element > selecting 'Bring forward' in context menu brings
           "updated": 1,
           "version": 2,
           "versionNonce": 1014066025,
-          "width": 20,
-          "x": 20,
-          "y": 30,
+          "width": 200,
+          "x": 760,
+          "y": 600,
         },
       ],
     },
@@ -983,7 +835,7 @@ exports[`contextMenu element > selecting 'Bring forward' in context menu brings
           "fillStyle": "hachure",
           "frameId": null,
           "groupIds": [],
-          "height": 20,
+          "height": 200,
           "id": "id1",
           "isDeleted": false,
           "link": null,
@@ -1001,9 +853,9 @@ exports[`contextMenu element > selecting 'Bring forward' in context menu brings
           "updated": 1,
           "version": 2,
           "versionNonce": 1014066025,
-          "width": 20,
-          "x": 20,
-          "y": 30,
+          "width": 200,
+          "x": 760,
+          "y": 600,
         },
         {
           "angle": 0,
@@ -1012,7 +864,7 @@ exports[`contextMenu element > selecting 'Bring forward' in context menu brings
           "fillStyle": "hachure",
           "frameId": null,
           "groupIds": [],
-          "height": 20,
+          "height": 200,
           "id": "id0",
           "isDeleted": false,
           "link": null,
@@ -1030,9 +882,9 @@ exports[`contextMenu element > selecting 'Bring forward' in context menu brings
           "updated": 1,
           "version": 3,
           "versionNonce": 400692809,
-          "width": 20,
-          "x": -10,
-          "y": 0,
+          "width": 200,
+          "x": 460,
+          "y": 300,
         },
       ],
     },
@@ -1114,9 +966,15 @@ exports[`contextMenu element > selecting 'Bring to front' in context menu brings
   "pendingImageElementId": null,
   "previousSelectedElementIds": {},
   "resizingElement": null,
-  "scrollConstraints": null,
-  "scrollX": 0,
-  "scrollY": 0,
+  "scrollConstraints": {
+    "height": 1300,
+    "lockZoom": false,
+    "width": 2560,
+    "x": 0,
+    "y": 0,
+  },
+  "scrollX": -560,
+  "scrollY": -300,
   "scrolledOutside": false,
   "selectedElementIds": {
     "id0": true,
@@ -1138,7 +996,7 @@ exports[`contextMenu element > selecting 'Bring to front' in context menu brings
   "width": 200,
   "zenModeEnabled": false,
   "zoom": {
-    "value": 1,
+    "value": 0.1,
   },
 }
 `;
@@ -1151,7 +1009,7 @@ exports[`contextMenu element > selecting 'Bring to front' in context menu brings
   "fillStyle": "hachure",
   "frameId": null,
   "groupIds": [],
-  "height": 20,
+  "height": 200,
   "id": "id1",
   "isDeleted": false,
   "link": null,
@@ -1169,9 +1027,9 @@ exports[`contextMenu element > selecting 'Bring to front' in context menu brings
   "updated": 1,
   "version": 2,
   "versionNonce": 1014066025,
-  "width": 20,
-  "x": 20,
-  "y": 30,
+  "width": 200,
+  "x": 760,
+  "y": 600,
 }
 `;
 
@@ -1183,7 +1041,7 @@ exports[`contextMenu element > selecting 'Bring to front' in context menu brings
   "fillStyle": "hachure",
   "frameId": null,
   "groupIds": [],
-  "height": 20,
+  "height": 200,
   "id": "id0",
   "isDeleted": false,
   "link": null,
@@ -1201,9 +1059,9 @@ exports[`contextMenu element > selecting 'Bring to front' in context menu brings
   "updated": 1,
   "version": 3,
   "versionNonce": 400692809,
-  "width": 20,
-  "x": -10,
-  "y": 0,
+  "width": 200,
+  "x": 460,
+  "y": 300,
 }
 `;
 
@@ -1242,7 +1100,7 @@ exports[`contextMenu element > selecting 'Bring to front' in context menu brings
           "fillStyle": "hachure",
           "frameId": null,
           "groupIds": [],
-          "height": 20,
+          "height": 200,
           "id": "id0",
           "isDeleted": false,
           "link": null,
@@ -1260,9 +1118,9 @@ exports[`contextMenu element > selecting 'Bring to front' in context menu brings
           "updated": 1,
           "version": 2,
           "versionNonce": 401146281,
-          "width": 20,
-          "x": -10,
-          "y": 0,
+          "width": 200,
+          "x": 460,
+          "y": 300,
         },
       ],
     },
@@ -1285,7 +1143,7 @@ exports[`contextMenu element > selecting 'Bring to front' in context menu brings
           "fillStyle": "hachure",
           "frameId": null,
           "groupIds": [],
-          "height": 20,
+          "height": 200,
           "id": "id0",
           "isDeleted": false,
           "link": null,
@@ -1303,9 +1161,9 @@ exports[`contextMenu element > selecting 'Bring to front' in context menu brings
           "updated": 1,
           "version": 2,
           "versionNonce": 401146281,
-          "width": 20,
-          "x": -10,
-          "y": 0,
+          "width": 200,
+          "x": 460,
+          "y": 300,
         },
         {
           "angle": 0,
@@ -1314,7 +1172,7 @@ exports[`contextMenu element > selecting 'Bring to front' in context menu brings
           "fillStyle": "hachure",
           "frameId": null,
           "groupIds": [],
-          "height": 20,
+          "height": 200,
           "id": "id1",
           "isDeleted": false,
           "link": null,
@@ -1332,9 +1190,9 @@ exports[`contextMenu element > selecting 'Bring to front' in context menu brings
           "updated": 1,
           "version": 2,
           "versionNonce": 1014066025,
-          "width": 20,
-          "x": 20,
-          "y": 30,
+          "width": 200,
+          "x": 760,
+          "y": 600,
         },
       ],
     },
@@ -1357,7 +1215,7 @@ exports[`contextMenu element > selecting 'Bring to front' in context menu brings
           "fillStyle": "hachure",
           "frameId": null,
           "groupIds": [],
-          "height": 20,
+          "height": 200,
           "id": "id1",
           "isDeleted": false,
           "link": null,
@@ -1375,9 +1233,9 @@ exports[`contextMenu element > selecting 'Bring to front' in context menu brings
           "updated": 1,
           "version": 2,
           "versionNonce": 1014066025,
-          "width": 20,
-          "x": 20,
-          "y": 30,
+          "width": 200,
+          "x": 760,
+          "y": 600,
         },
         {
           "angle": 0,
@@ -1386,7 +1244,7 @@ exports[`contextMenu element > selecting 'Bring to front' in context menu brings
           "fillStyle": "hachure",
           "frameId": null,
           "groupIds": [],
-          "height": 20,
+          "height": 200,
           "id": "id0",
           "isDeleted": false,
           "link": null,
@@ -1404,9 +1262,9 @@ exports[`contextMenu element > selecting 'Bring to front' in context menu brings
           "updated": 1,
           "version": 3,
           "versionNonce": 400692809,
-          "width": 20,
-          "x": -10,
-          "y": 0,
+          "width": 200,
+          "x": 460,
+          "y": 300,
         },
       ],
     },
@@ -1488,9 +1346,15 @@ exports[`contextMenu element > selecting 'Copy styles' in context menu copies st
   "pendingImageElementId": null,
   "previousSelectedElementIds": {},
   "resizingElement": null,
-  "scrollConstraints": null,
-  "scrollX": 0,
-  "scrollY": 0,
+  "scrollConstraints": {
+    "height": 1300,
+    "lockZoom": false,
+    "width": 2560,
+    "x": 0,
+    "y": 0,
+  },
+  "scrollX": -560,
+  "scrollY": -300,
   "scrolledOutside": false,
   "selectedElementIds": {
     "id0": true,
@@ -1514,7 +1378,7 @@ exports[`contextMenu element > selecting 'Copy styles' in context menu copies st
   "width": 200,
   "zenModeEnabled": false,
   "zoom": {
-    "value": 1,
+    "value": 0.1,
   },
 }
 `;
@@ -1527,7 +1391,7 @@ exports[`contextMenu element > selecting 'Copy styles' in context menu copies st
   "fillStyle": "hachure",
   "frameId": null,
   "groupIds": [],
-  "height": 20,
+  "height": 200,
   "id": "id0",
   "isDeleted": false,
   "link": null,
@@ -1545,9 +1409,9 @@ exports[`contextMenu element > selecting 'Copy styles' in context menu copies st
   "updated": 1,
   "version": 2,
   "versionNonce": 2019559783,
-  "width": 20,
-  "x": -10,
-  "y": 0,
+  "width": 200,
+  "x": 460,
+  "y": 300,
 }
 `;
 
@@ -1586,7 +1450,7 @@ exports[`contextMenu element > selecting 'Copy styles' in context menu copies st
           "fillStyle": "hachure",
           "frameId": null,
           "groupIds": [],
-          "height": 20,
+          "height": 200,
           "id": "id0",
           "isDeleted": false,
           "link": null,
@@ -1604,9 +1468,9 @@ exports[`contextMenu element > selecting 'Copy styles' in context menu copies st
           "updated": 1,
           "version": 2,
           "versionNonce": 2019559783,
-          "width": 20,
-          "x": -10,
-          "y": 0,
+          "width": 200,
+          "x": 460,
+          "y": 300,
         },
       ],
     },
@@ -1688,9 +1552,15 @@ exports[`contextMenu element > selecting 'Delete' in context menu deletes elemen
   "pendingImageElementId": null,
   "previousSelectedElementIds": {},
   "resizingElement": null,
-  "scrollConstraints": null,
-  "scrollX": 0,
-  "scrollY": 0,
+  "scrollConstraints": {
+    "height": 1300,
+    "lockZoom": false,
+    "width": 2560,
+    "x": 0,
+    "y": 0,
+  },
+  "scrollX": -560,
+  "scrollY": -300,
   "scrolledOutside": false,
   "selectedElementIds": {},
   "selectedElementsAreBeingDragged": false,
@@ -1710,7 +1580,7 @@ exports[`contextMenu element > selecting 'Delete' in context menu deletes elemen
   "width": 200,
   "zenModeEnabled": false,
   "zoom": {
-    "value": 1,
+    "value": 0.1,
   },
 }
 `;
@@ -1723,7 +1593,7 @@ exports[`contextMenu element > selecting 'Delete' in context menu deletes elemen
   "fillStyle": "hachure",
   "frameId": null,
   "groupIds": [],
-  "height": 20,
+  "height": 200,
   "id": "id0",
   "isDeleted": true,
   "link": null,
@@ -1741,9 +1611,9 @@ exports[`contextMenu element > selecting 'Delete' in context menu deletes elemen
   "updated": 1,
   "version": 3,
   "versionNonce": 1150084233,
-  "width": 20,
-  "x": -10,
-  "y": 0,
+  "width": 200,
+  "x": 460,
+  "y": 300,
 }
 `;
 
@@ -1782,7 +1652,7 @@ exports[`contextMenu element > selecting 'Delete' in context menu deletes elemen
           "fillStyle": "hachure",
           "frameId": null,
           "groupIds": [],
-          "height": 20,
+          "height": 200,
           "id": "id0",
           "isDeleted": false,
           "link": null,
@@ -1800,9 +1670,9 @@ exports[`contextMenu element > selecting 'Delete' in context menu deletes elemen
           "updated": 1,
           "version": 2,
           "versionNonce": 401146281,
-          "width": 20,
-          "x": -10,
-          "y": 0,
+          "width": 200,
+          "x": 460,
+          "y": 300,
         },
       ],
     },
@@ -1823,7 +1693,7 @@ exports[`contextMenu element > selecting 'Delete' in context menu deletes elemen
           "fillStyle": "hachure",
           "frameId": null,
           "groupIds": [],
-          "height": 20,
+          "height": 200,
           "id": "id0",
           "isDeleted": true,
           "link": null,
@@ -1841,9 +1711,9 @@ exports[`contextMenu element > selecting 'Delete' in context menu deletes elemen
           "updated": 1,
           "version": 3,
           "versionNonce": 1150084233,
-          "width": 20,
-          "x": -10,
-          "y": 0,
+          "width": 200,
+          "x": 460,
+          "y": 300,
         },
       ],
     },
@@ -1925,9 +1795,15 @@ exports[`contextMenu element > selecting 'Duplicate' in context menu duplicates
   "pendingImageElementId": null,
   "previousSelectedElementIds": {},
   "resizingElement": null,
-  "scrollConstraints": null,
-  "scrollX": 0,
-  "scrollY": 0,
+  "scrollConstraints": {
+    "height": 1300,
+    "lockZoom": false,
+    "width": 2560,
+    "x": 0,
+    "y": 0,
+  },
+  "scrollX": -560,
+  "scrollY": -300,
   "scrolledOutside": false,
   "selectedElementIds": {
     "id0_copy": true,
@@ -1949,7 +1825,7 @@ exports[`contextMenu element > selecting 'Duplicate' in context menu duplicates
   "width": 200,
   "zenModeEnabled": false,
   "zoom": {
-    "value": 1,
+    "value": 0.1,
   },
 }
 `;
@@ -1962,7 +1838,7 @@ exports[`contextMenu element > selecting 'Duplicate' in context menu duplicates
   "fillStyle": "hachure",
   "frameId": null,
   "groupIds": [],
-  "height": 20,
+  "height": 200,
   "id": "id0",
   "isDeleted": false,
   "link": null,
@@ -1980,9 +1856,9 @@ exports[`contextMenu element > selecting 'Duplicate' in context menu duplicates
   "updated": 1,
   "version": 2,
   "versionNonce": 401146281,
-  "width": 20,
-  "x": -10,
-  "y": 0,
+  "width": 200,
+  "x": 460,
+  "y": 300,
 }
 `;
 
@@ -1994,7 +1870,7 @@ exports[`contextMenu element > selecting 'Duplicate' in context menu duplicates
   "fillStyle": "hachure",
   "frameId": null,
   "groupIds": [],
-  "height": 20,
+  "height": 200,
   "id": "id0_copy",
   "isDeleted": false,
   "link": null,
@@ -2012,9 +1888,9 @@ exports[`contextMenu element > selecting 'Duplicate' in context menu duplicates
   "updated": 1,
   "version": 2,
   "versionNonce": 401146281,
-  "width": 20,
-  "x": 0,
-  "y": 10,
+  "width": 200,
+  "x": 470,
+  "y": 310,
 }
 `;
 
@@ -2053,7 +1929,7 @@ exports[`contextMenu element > selecting 'Duplicate' in context menu duplicates
           "fillStyle": "hachure",
           "frameId": null,
           "groupIds": [],
-          "height": 20,
+          "height": 200,
           "id": "id0",
           "isDeleted": false,
           "link": null,
@@ -2071,9 +1947,9 @@ exports[`contextMenu element > selecting 'Duplicate' in context menu duplicates
           "updated": 1,
           "version": 2,
           "versionNonce": 401146281,
-          "width": 20,
-          "x": -10,
-          "y": 0,
+          "width": 200,
+          "x": 460,
+          "y": 300,
         },
       ],
     },
@@ -2096,7 +1972,7 @@ exports[`contextMenu element > selecting 'Duplicate' in context menu duplicates
           "fillStyle": "hachure",
           "frameId": null,
           "groupIds": [],
-          "height": 20,
+          "height": 200,
           "id": "id0",
           "isDeleted": false,
           "link": null,
@@ -2114,9 +1990,9 @@ exports[`contextMenu element > selecting 'Duplicate' in context menu duplicates
           "updated": 1,
           "version": 2,
           "versionNonce": 401146281,
-          "width": 20,
-          "x": -10,
-          "y": 0,
+          "width": 200,
+          "x": 460,
+          "y": 300,
         },
         {
           "angle": 0,
@@ -2125,7 +2001,7 @@ exports[`contextMenu element > selecting 'Duplicate' in context menu duplicates
           "fillStyle": "hachure",
           "frameId": null,
           "groupIds": [],
-          "height": 20,
+          "height": 200,
           "id": "id0_copy",
           "isDeleted": false,
           "link": null,
@@ -2143,9 +2019,9 @@ exports[`contextMenu element > selecting 'Duplicate' in context menu duplicates
           "updated": 1,
           "version": 2,
           "versionNonce": 401146281,
-          "width": 20,
-          "x": 0,
-          "y": 10,
+          "width": 200,
+          "x": 470,
+          "y": 310,
         },
       ],
     },
@@ -2229,9 +2105,15 @@ exports[`contextMenu element > selecting 'Group selection' in context menu group
     "id1": true,
   },
   "resizingElement": null,
-  "scrollConstraints": null,
-  "scrollX": 0,
-  "scrollY": 0,
+  "scrollConstraints": {
+    "height": 1300,
+    "lockZoom": false,
+    "width": 2560,
+    "x": 0,
+    "y": 0,
+  },
+  "scrollX": -560,
+  "scrollY": -300,
   "scrolledOutside": false,
   "selectedElementIds": {
     "id0": true,
@@ -2256,7 +2138,7 @@ exports[`contextMenu element > selecting 'Group selection' in context menu group
   "width": 200,
   "zenModeEnabled": false,
   "zoom": {
-    "value": 1,
+    "value": 0.1,
   },
 }
 `;
@@ -2271,7 +2153,7 @@ exports[`contextMenu element > selecting 'Group selection' in context menu group
   "groupIds": [
     "id3",
   ],
-  "height": 20,
+  "height": 200,
   "id": "id0",
   "isDeleted": false,
   "link": null,
@@ -2289,9 +2171,9 @@ exports[`contextMenu element > selecting 'Group selection' in context menu group
   "updated": 1,
   "version": 3,
   "versionNonce": 1604849351,
-  "width": 20,
-  "x": -10,
-  "y": 0,
+  "width": 200,
+  "x": 460,
+  "y": 300,
 }
 `;
 
@@ -2305,7 +2187,7 @@ exports[`contextMenu element > selecting 'Group selection' in context menu group
   "groupIds": [
     "id3",
   ],
-  "height": 20,
+  "height": 200,
   "id": "id1",
   "isDeleted": false,
   "link": null,
@@ -2323,9 +2205,9 @@ exports[`contextMenu element > selecting 'Group selection' in context menu group
   "updated": 1,
   "version": 3,
   "versionNonce": 1505387817,
-  "width": 20,
-  "x": 20,
-  "y": 30,
+  "width": 200,
+  "x": 760,
+  "y": 600,
 }
 `;
 
@@ -2364,7 +2246,7 @@ exports[`contextMenu element > selecting 'Group selection' in context menu group
           "fillStyle": "hachure",
           "frameId": null,
           "groupIds": [],
-          "height": 20,
+          "height": 200,
           "id": "id0",
           "isDeleted": false,
           "link": null,
@@ -2382,9 +2264,9 @@ exports[`contextMenu element > selecting 'Group selection' in context menu group
           "updated": 1,
           "version": 2,
           "versionNonce": 401146281,
-          "width": 20,
-          "x": -10,
-          "y": 0,
+          "width": 200,
+          "x": 460,
+          "y": 300,
         },
       ],
     },
@@ -2407,7 +2289,7 @@ exports[`contextMenu element > selecting 'Group selection' in context menu group
           "fillStyle": "hachure",
           "frameId": null,
           "groupIds": [],
-          "height": 20,
+          "height": 200,
           "id": "id0",
           "isDeleted": false,
           "link": null,
@@ -2425,9 +2307,9 @@ exports[`contextMenu element > selecting 'Group selection' in context menu group
           "updated": 1,
           "version": 2,
           "versionNonce": 401146281,
-          "width": 20,
-          "x": -10,
-          "y": 0,
+          "width": 200,
+          "x": 460,
+          "y": 300,
         },
         {
           "angle": 0,
@@ -2436,7 +2318,7 @@ exports[`contextMenu element > selecting 'Group selection' in context menu group
           "fillStyle": "hachure",
           "frameId": null,
           "groupIds": [],
-          "height": 20,
+          "height": 200,
           "id": "id1",
           "isDeleted": false,
           "link": null,
@@ -2454,9 +2336,9 @@ exports[`contextMenu element > selecting 'Group selection' in context menu group
           "updated": 1,
           "version": 2,
           "versionNonce": 1014066025,
-          "width": 20,
-          "x": 20,
-          "y": 30,
+          "width": 200,
+          "x": 760,
+          "y": 600,
         },
       ],
     },
@@ -2484,7 +2366,7 @@ exports[`contextMenu element > selecting 'Group selection' in context menu group
           "groupIds": [
             "id3",
           ],
-          "height": 20,
+          "height": 200,
           "id": "id0",
           "isDeleted": false,
           "link": null,
@@ -2502,9 +2384,9 @@ exports[`contextMenu element > selecting 'Group selection' in context menu group
           "updated": 1,
           "version": 3,
           "versionNonce": 1604849351,
-          "width": 20,
-          "x": -10,
-          "y": 0,
+          "width": 200,
+          "x": 460,
+          "y": 300,
         },
         {
           "angle": 0,
@@ -2515,7 +2397,7 @@ exports[`contextMenu element > selecting 'Group selection' in context menu group
           "groupIds": [
             "id3",
           ],
-          "height": 20,
+          "height": 200,
           "id": "id1",
           "isDeleted": false,
           "link": null,
@@ -2533,9 +2415,9 @@ exports[`contextMenu element > selecting 'Group selection' in context menu group
           "updated": 1,
           "version": 3,
           "versionNonce": 1505387817,
-          "width": 20,
-          "x": 20,
-          "y": 30,
+          "width": 200,
+          "x": 760,
+          "y": 600,
         },
       ],
     },
@@ -2617,9 +2499,15 @@ exports[`contextMenu element > selecting 'Paste styles' in context menu pastes s
   "pendingImageElementId": null,
   "previousSelectedElementIds": {},
   "resizingElement": null,
-  "scrollConstraints": null,
-  "scrollX": 0,
-  "scrollY": 0,
+  "scrollConstraints": {
+    "height": 1300,
+    "lockZoom": false,
+    "width": 2560,
+    "x": 0,
+    "y": 0,
+  },
+  "scrollX": -560,
+  "scrollY": -300,
   "scrolledOutside": false,
   "selectedElementIds": {
     "id0": true,
@@ -2643,7 +2531,7 @@ exports[`contextMenu element > selecting 'Paste styles' in context menu pastes s
   "width": 200,
   "zenModeEnabled": false,
   "zoom": {
-    "value": 1,
+    "value": 0.1,
   },
 }
 `;
@@ -2656,7 +2544,7 @@ exports[`contextMenu element > selecting 'Paste styles' in context menu pastes s
   "fillStyle": "cross-hatch",
   "frameId": null,
   "groupIds": [],
-  "height": 20,
+  "height": 200,
   "id": "id0",
   "isDeleted": false,
   "link": null,
@@ -2674,9 +2562,9 @@ exports[`contextMenu element > selecting 'Paste styles' in context menu pastes s
   "updated": 1,
   "version": 3,
   "versionNonce": 406373543,
-  "width": 20,
-  "x": -10,
-  "y": 0,
+  "width": 200,
+  "x": 460,
+  "y": 300,
 }
 `;
 
@@ -2688,7 +2576,7 @@ exports[`contextMenu element > selecting 'Paste styles' in context menu pastes s
   "fillStyle": "cross-hatch",
   "frameId": null,
   "groupIds": [],
-  "height": 20,
+  "height": 200,
   "id": "id1",
   "isDeleted": false,
   "link": null,
@@ -2706,9 +2594,9 @@ exports[`contextMenu element > selecting 'Paste styles' in context menu pastes s
   "updated": 1,
   "version": 9,
   "versionNonce": 1898319239,
-  "width": 20,
-  "x": 20,
-  "y": 30,
+  "width": 200,
+  "x": 760,
+  "y": 600,
 }
 `;
 
@@ -2747,7 +2635,7 @@ exports[`contextMenu element > selecting 'Paste styles' in context menu pastes s
           "fillStyle": "hachure",
           "frameId": null,
           "groupIds": [],
-          "height": 20,
+          "height": 200,
           "id": "id0",
           "isDeleted": false,
           "link": null,
@@ -2765,9 +2653,9 @@ exports[`contextMenu element > selecting 'Paste styles' in context menu pastes s
           "updated": 1,
           "version": 2,
           "versionNonce": 401146281,
-          "width": 20,
-          "x": -10,
-          "y": 0,
+          "width": 200,
+          "x": 460,
+          "y": 300,
         },
       ],
     },
@@ -2790,7 +2678,7 @@ exports[`contextMenu element > selecting 'Paste styles' in context menu pastes s
           "fillStyle": "hachure",
           "frameId": null,
           "groupIds": [],
-          "height": 20,
+          "height": 200,
           "id": "id0",
           "isDeleted": false,
           "link": null,
@@ -2808,9 +2696,9 @@ exports[`contextMenu element > selecting 'Paste styles' in context menu pastes s
           "updated": 1,
           "version": 2,
           "versionNonce": 401146281,
-          "width": 20,
-          "x": -10,
-          "y": 0,
+          "width": 200,
+          "x": 460,
+          "y": 300,
         },
         {
           "angle": 0,
@@ -2819,7 +2707,7 @@ exports[`contextMenu element > selecting 'Paste styles' in context menu pastes s
           "fillStyle": "hachure",
           "frameId": null,
           "groupIds": [],
-          "height": 20,
+          "height": 200,
           "id": "id1",
           "isDeleted": false,
           "link": null,
@@ -2837,9 +2725,9 @@ exports[`contextMenu element > selecting 'Paste styles' in context menu pastes s
           "updated": 1,
           "version": 2,
           "versionNonce": 1014066025,
-          "width": 20,
-          "x": 20,
-          "y": 30,
+          "width": 200,
+          "x": 760,
+          "y": 600,
         },
       ],
     },
@@ -2862,7 +2750,7 @@ exports[`contextMenu element > selecting 'Paste styles' in context menu pastes s
           "fillStyle": "hachure",
           "frameId": null,
           "groupIds": [],
-          "height": 20,
+          "height": 200,
           "id": "id0",
           "isDeleted": false,
           "link": null,
@@ -2880,9 +2768,9 @@ exports[`contextMenu element > selecting 'Paste styles' in context menu pastes s
           "updated": 1,
           "version": 2,
           "versionNonce": 401146281,
-          "width": 20,
-          "x": -10,
-          "y": 0,
+          "width": 200,
+          "x": 460,
+          "y": 300,
         },
         {
           "angle": 0,
@@ -2891,7 +2779,7 @@ exports[`contextMenu element > selecting 'Paste styles' in context menu pastes s
           "fillStyle": "hachure",
           "frameId": null,
           "groupIds": [],
-          "height": 20,
+          "height": 200,
           "id": "id1",
           "isDeleted": false,
           "link": null,
@@ -2909,9 +2797,9 @@ exports[`contextMenu element > selecting 'Paste styles' in context menu pastes s
           "updated": 1,
           "version": 3,
           "versionNonce": 400692809,
-          "width": 20,
-          "x": 20,
-          "y": 30,
+          "width": 200,
+          "x": 760,
+          "y": 600,
         },
       ],
     },
@@ -2934,7 +2822,7 @@ exports[`contextMenu element > selecting 'Paste styles' in context menu pastes s
           "fillStyle": "hachure",
           "frameId": null,
           "groupIds": [],
-          "height": 20,
+          "height": 200,
           "id": "id0",
           "isDeleted": false,
           "link": null,
@@ -2952,9 +2840,9 @@ exports[`contextMenu element > selecting 'Paste styles' in context menu pastes s
           "updated": 1,
           "version": 2,
           "versionNonce": 401146281,
-          "width": 20,
-          "x": -10,
-          "y": 0,
+          "width": 200,
+          "x": 460,
+          "y": 300,
         },
         {
           "angle": 0,
@@ -2963,7 +2851,7 @@ exports[`contextMenu element > selecting 'Paste styles' in context menu pastes s
           "fillStyle": "hachure",
           "frameId": null,
           "groupIds": [],
-          "height": 20,
+          "height": 200,
           "id": "id1",
           "isDeleted": false,
           "link": null,
@@ -2981,9 +2869,9 @@ exports[`contextMenu element > selecting 'Paste styles' in context menu pastes s
           "updated": 1,
           "version": 4,
           "versionNonce": 1505387817,
-          "width": 20,
-          "x": 20,
-          "y": 30,
+          "width": 200,
+          "x": 760,
+          "y": 600,
         },
       ],
     },
@@ -3006,7 +2894,7 @@ exports[`contextMenu element > selecting 'Paste styles' in context menu pastes s
           "fillStyle": "hachure",
           "frameId": null,
           "groupIds": [],
-          "height": 20,
+          "height": 200,
           "id": "id0",
           "isDeleted": false,
           "link": null,
@@ -3024,9 +2912,9 @@ exports[`contextMenu element > selecting 'Paste styles' in context menu pastes s
           "updated": 1,
           "version": 2,
           "versionNonce": 401146281,
-          "width": 20,
-          "x": -10,
-          "y": 0,
+          "width": 200,
+          "x": 460,
+          "y": 300,
         },
         {
           "angle": 0,
@@ -3035,7 +2923,7 @@ exports[`contextMenu element > selecting 'Paste styles' in context menu pastes s
           "fillStyle": "cross-hatch",
           "frameId": null,
           "groupIds": [],
-          "height": 20,
+          "height": 200,
           "id": "id1",
           "isDeleted": false,
           "link": null,
@@ -3053,9 +2941,9 @@ exports[`contextMenu element > selecting 'Paste styles' in context menu pastes s
           "updated": 1,
           "version": 5,
           "versionNonce": 493213705,
-          "width": 20,
-          "x": 20,
-          "y": 30,
+          "width": 200,
+          "x": 760,
+          "y": 600,
         },
       ],
     },
@@ -3078,7 +2966,7 @@ exports[`contextMenu element > selecting 'Paste styles' in context menu pastes s
           "fillStyle": "hachure",
           "frameId": null,
           "groupIds": [],
-          "height": 20,
+          "height": 200,
           "id": "id0",
           "isDeleted": false,
           "link": null,
@@ -3096,9 +2984,9 @@ exports[`contextMenu element > selecting 'Paste styles' in context menu pastes s
           "updated": 1,
           "version": 2,
           "versionNonce": 401146281,
-          "width": 20,
-          "x": -10,
-          "y": 0,
+          "width": 200,
+          "x": 460,
+          "y": 300,
         },
         {
           "angle": 0,
@@ -3107,7 +2995,7 @@ exports[`contextMenu element > selecting 'Paste styles' in context menu pastes s
           "fillStyle": "cross-hatch",
           "frameId": null,
           "groupIds": [],
-          "height": 20,
+          "height": 200,
           "id": "id1",
           "isDeleted": false,
           "link": null,
@@ -3125,9 +3013,9 @@ exports[`contextMenu element > selecting 'Paste styles' in context menu pastes s
           "updated": 1,
           "version": 6,
           "versionNonce": 81784553,
-          "width": 20,
-          "x": 20,
-          "y": 30,
+          "width": 200,
+          "x": 760,
+          "y": 600,
         },
       ],
     },
@@ -3150,7 +3038,7 @@ exports[`contextMenu element > selecting 'Paste styles' in context menu pastes s
           "fillStyle": "hachure",
           "frameId": null,
           "groupIds": [],
-          "height": 20,
+          "height": 200,
           "id": "id0",
           "isDeleted": false,
           "link": null,
@@ -3168,9 +3056,9 @@ exports[`contextMenu element > selecting 'Paste styles' in context menu pastes s
           "updated": 1,
           "version": 2,
           "versionNonce": 401146281,
-          "width": 20,
-          "x": -10,
-          "y": 0,
+          "width": 200,
+          "x": 460,
+          "y": 300,
         },
         {
           "angle": 0,
@@ -3179,7 +3067,7 @@ exports[`contextMenu element > selecting 'Paste styles' in context menu pastes s
           "fillStyle": "cross-hatch",
           "frameId": null,
           "groupIds": [],
-          "height": 20,
+          "height": 200,
           "id": "id1",
           "isDeleted": false,
           "link": null,
@@ -3197,9 +3085,9 @@ exports[`contextMenu element > selecting 'Paste styles' in context menu pastes s
           "updated": 1,
           "version": 7,
           "versionNonce": 1723083209,
-          "width": 20,
-          "x": 20,
-          "y": 30,
+          "width": 200,
+          "x": 760,
+          "y": 600,
         },
       ],
     },
@@ -3222,7 +3110,7 @@ exports[`contextMenu element > selecting 'Paste styles' in context menu pastes s
           "fillStyle": "hachure",
           "frameId": null,
           "groupIds": [],
-          "height": 20,
+          "height": 200,
           "id": "id0",
           "isDeleted": false,
           "link": null,
@@ -3240,9 +3128,9 @@ exports[`contextMenu element > selecting 'Paste styles' in context menu pastes s
           "updated": 1,
           "version": 2,
           "versionNonce": 401146281,
-          "width": 20,
-          "x": -10,
-          "y": 0,
+          "width": 200,
+          "x": 460,
+          "y": 300,
         },
         {
           "angle": 0,
@@ -3251,7 +3139,7 @@ exports[`contextMenu element > selecting 'Paste styles' in context menu pastes s
           "fillStyle": "cross-hatch",
           "frameId": null,
           "groupIds": [],
-          "height": 20,
+          "height": 200,
           "id": "id1",
           "isDeleted": false,
           "link": null,
@@ -3269,9 +3157,9 @@ exports[`contextMenu element > selecting 'Paste styles' in context menu pastes s
           "updated": 1,
           "version": 8,
           "versionNonce": 289600103,
-          "width": 20,
-          "x": 20,
-          "y": 30,
+          "width": 200,
+          "x": 760,
+          "y": 600,
         },
       ],
     },
@@ -3294,7 +3182,7 @@ exports[`contextMenu element > selecting 'Paste styles' in context menu pastes s
           "fillStyle": "hachure",
           "frameId": null,
           "groupIds": [],
-          "height": 20,
+          "height": 200,
           "id": "id0",
           "isDeleted": false,
           "link": null,
@@ -3312,9 +3200,9 @@ exports[`contextMenu element > selecting 'Paste styles' in context menu pastes s
           "updated": 1,
           "version": 2,
           "versionNonce": 401146281,
-          "width": 20,
-          "x": -10,
-          "y": 0,
+          "width": 200,
+          "x": 460,
+          "y": 300,
         },
         {
           "angle": 0,
@@ -3323,7 +3211,7 @@ exports[`contextMenu element > selecting 'Paste styles' in context menu pastes s
           "fillStyle": "cross-hatch",
           "frameId": null,
           "groupIds": [],
-          "height": 20,
+          "height": 200,
           "id": "id1",
           "isDeleted": false,
           "link": null,
@@ -3341,9 +3229,9 @@ exports[`contextMenu element > selecting 'Paste styles' in context menu pastes s
           "updated": 1,
           "version": 9,
           "versionNonce": 1898319239,
-          "width": 20,
-          "x": 20,
-          "y": 30,
+          "width": 200,
+          "x": 760,
+          "y": 600,
         },
       ],
     },
@@ -3366,7 +3254,7 @@ exports[`contextMenu element > selecting 'Paste styles' in context menu pastes s
           "fillStyle": "cross-hatch",
           "frameId": null,
           "groupIds": [],
-          "height": 20,
+          "height": 200,
           "id": "id0",
           "isDeleted": false,
           "link": null,
@@ -3384,9 +3272,9 @@ exports[`contextMenu element > selecting 'Paste styles' in context menu pastes s
           "updated": 1,
           "version": 3,
           "versionNonce": 406373543,
-          "width": 20,
-          "x": -10,
-          "y": 0,
+          "width": 200,
+          "x": 460,
+          "y": 300,
         },
         {
           "angle": 0,
@@ -3395,7 +3283,7 @@ exports[`contextMenu element > selecting 'Paste styles' in context menu pastes s
           "fillStyle": "cross-hatch",
           "frameId": null,
           "groupIds": [],
-          "height": 20,
+          "height": 200,
           "id": "id1",
           "isDeleted": false,
           "link": null,
@@ -3413,9 +3301,9 @@ exports[`contextMenu element > selecting 'Paste styles' in context menu pastes s
           "updated": 1,
           "version": 9,
           "versionNonce": 1898319239,
-          "width": 20,
-          "x": 20,
-          "y": 30,
+          "width": 200,
+          "x": 760,
+          "y": 600,
         },
       ],
     },
@@ -3497,9 +3385,15 @@ exports[`contextMenu element > selecting 'Send backward' in context menu sends e
   "pendingImageElementId": null,
   "previousSelectedElementIds": {},
   "resizingElement": null,
-  "scrollConstraints": null,
-  "scrollX": 0,
-  "scrollY": 0,
+  "scrollConstraints": {
+    "height": 1300,
+    "lockZoom": false,
+    "width": 2560,
+    "x": 0,
+    "y": 0,
+  },
+  "scrollX": -560,
+  "scrollY": -300,
   "scrolledOutside": false,
   "selectedElementIds": {
     "id1": true,
@@ -3521,7 +3415,7 @@ exports[`contextMenu element > selecting 'Send backward' in context menu sends e
   "width": 200,
   "zenModeEnabled": false,
   "zoom": {
-    "value": 1,
+    "value": 0.1,
   },
 }
 `;
@@ -3534,7 +3428,7 @@ exports[`contextMenu element > selecting 'Send backward' in context menu sends e
   "fillStyle": "hachure",
   "frameId": null,
   "groupIds": [],
-  "height": 20,
+  "height": 200,
   "id": "id1",
   "isDeleted": false,
   "link": null,
@@ -3552,9 +3446,9 @@ exports[`contextMenu element > selecting 'Send backward' in context menu sends e
   "updated": 1,
   "version": 3,
   "versionNonce": 400692809,
-  "width": 20,
-  "x": 20,
-  "y": 30,
+  "width": 200,
+  "x": 760,
+  "y": 600,
 }
 `;
 
@@ -3566,7 +3460,7 @@ exports[`contextMenu element > selecting 'Send backward' in context menu sends e
   "fillStyle": "hachure",
   "frameId": null,
   "groupIds": [],
-  "height": 20,
+  "height": 200,
   "id": "id0",
   "isDeleted": false,
   "link": null,
@@ -3584,9 +3478,9 @@ exports[`contextMenu element > selecting 'Send backward' in context menu sends e
   "updated": 1,
   "version": 2,
   "versionNonce": 401146281,
-  "width": 20,
-  "x": -10,
-  "y": 0,
+  "width": 200,
+  "x": 460,
+  "y": 300,
 }
 `;
 
@@ -3625,7 +3519,7 @@ exports[`contextMenu element > selecting 'Send backward' in context menu sends e
           "fillStyle": "hachure",
           "frameId": null,
           "groupIds": [],
-          "height": 20,
+          "height": 200,
           "id": "id0",
           "isDeleted": false,
           "link": null,
@@ -3643,9 +3537,9 @@ exports[`contextMenu element > selecting 'Send backward' in context menu sends e
           "updated": 1,
           "version": 2,
           "versionNonce": 401146281,
-          "width": 20,
-          "x": -10,
-          "y": 0,
+          "width": 200,
+          "x": 460,
+          "y": 300,
         },
       ],
     },
@@ -3668,7 +3562,7 @@ exports[`contextMenu element > selecting 'Send backward' in context menu sends e
           "fillStyle": "hachure",
           "frameId": null,
           "groupIds": [],
-          "height": 20,
+          "height": 200,
           "id": "id0",
           "isDeleted": false,
           "link": null,
@@ -3686,9 +3580,9 @@ exports[`contextMenu element > selecting 'Send backward' in context menu sends e
           "updated": 1,
           "version": 2,
           "versionNonce": 401146281,
-          "width": 20,
-          "x": -10,
-          "y": 0,
+          "width": 200,
+          "x": 460,
+          "y": 300,
         },
         {
           "angle": 0,
@@ -3697,7 +3591,7 @@ exports[`contextMenu element > selecting 'Send backward' in context menu sends e
           "fillStyle": "hachure",
           "frameId": null,
           "groupIds": [],
-          "height": 20,
+          "height": 200,
           "id": "id1",
           "isDeleted": false,
           "link": null,
@@ -3715,9 +3609,9 @@ exports[`contextMenu element > selecting 'Send backward' in context menu sends e
           "updated": 1,
           "version": 2,
           "versionNonce": 1014066025,
-          "width": 20,
-          "x": 20,
-          "y": 30,
+          "width": 200,
+          "x": 760,
+          "y": 600,
         },
       ],
     },
@@ -3740,7 +3634,7 @@ exports[`contextMenu element > selecting 'Send backward' in context menu sends e
           "fillStyle": "hachure",
           "frameId": null,
           "groupIds": [],
-          "height": 20,
+          "height": 200,
           "id": "id1",
           "isDeleted": false,
           "link": null,
@@ -3758,9 +3652,9 @@ exports[`contextMenu element > selecting 'Send backward' in context menu sends e
           "updated": 1,
           "version": 3,
           "versionNonce": 400692809,
-          "width": 20,
-          "x": 20,
-          "y": 30,
+          "width": 200,
+          "x": 760,
+          "y": 600,
         },
         {
           "angle": 0,
@@ -3769,7 +3663,7 @@ exports[`contextMenu element > selecting 'Send backward' in context menu sends e
           "fillStyle": "hachure",
           "frameId": null,
           "groupIds": [],
-          "height": 20,
+          "height": 200,
           "id": "id0",
           "isDeleted": false,
           "link": null,
@@ -3787,9 +3681,9 @@ exports[`contextMenu element > selecting 'Send backward' in context menu sends e
           "updated": 1,
           "version": 2,
           "versionNonce": 401146281,
-          "width": 20,
-          "x": -10,
-          "y": 0,
+          "width": 200,
+          "x": 460,
+          "y": 300,
         },
       ],
     },
@@ -3871,9 +3765,15 @@ exports[`contextMenu element > selecting 'Send to back' in context menu sends el
   "pendingImageElementId": null,
   "previousSelectedElementIds": {},
   "resizingElement": null,
-  "scrollConstraints": null,
-  "scrollX": 0,
-  "scrollY": 0,
+  "scrollConstraints": {
+    "height": 1300,
+    "lockZoom": false,
+    "width": 2560,
+    "x": 0,
+    "y": 0,
+  },
+  "scrollX": -560,
+  "scrollY": -300,
   "scrolledOutside": false,
   "selectedElementIds": {
     "id1": true,
@@ -3895,7 +3795,7 @@ exports[`contextMenu element > selecting 'Send to back' in context menu sends el
   "width": 200,
   "zenModeEnabled": false,
   "zoom": {
-    "value": 1,
+    "value": 0.1,
   },
 }
 `;
@@ -3908,7 +3808,7 @@ exports[`contextMenu element > selecting 'Send to back' in context menu sends el
   "fillStyle": "hachure",
   "frameId": null,
   "groupIds": [],
-  "height": 20,
+  "height": 200,
   "id": "id1",
   "isDeleted": false,
   "link": null,
@@ -3926,9 +3826,9 @@ exports[`contextMenu element > selecting 'Send to back' in context menu sends el
   "updated": 1,
   "version": 3,
   "versionNonce": 400692809,
-  "width": 20,
-  "x": 20,
-  "y": 30,
+  "width": 200,
+  "x": 760,
+  "y": 600,
 }
 `;
 
@@ -3940,7 +3840,7 @@ exports[`contextMenu element > selecting 'Send to back' in context menu sends el
   "fillStyle": "hachure",
   "frameId": null,
   "groupIds": [],
-  "height": 20,
+  "height": 200,
   "id": "id0",
   "isDeleted": false,
   "link": null,
@@ -3958,9 +3858,9 @@ exports[`contextMenu element > selecting 'Send to back' in context menu sends el
   "updated": 1,
   "version": 2,
   "versionNonce": 401146281,
-  "width": 20,
-  "x": -10,
-  "y": 0,
+  "width": 200,
+  "x": 460,
+  "y": 300,
 }
 `;
 
@@ -3999,7 +3899,7 @@ exports[`contextMenu element > selecting 'Send to back' in context menu sends el
           "fillStyle": "hachure",
           "frameId": null,
           "groupIds": [],
-          "height": 20,
+          "height": 200,
           "id": "id0",
           "isDeleted": false,
           "link": null,
@@ -4017,9 +3917,9 @@ exports[`contextMenu element > selecting 'Send to back' in context menu sends el
           "updated": 1,
           "version": 2,
           "versionNonce": 401146281,
-          "width": 20,
-          "x": -10,
-          "y": 0,
+          "width": 200,
+          "x": 460,
+          "y": 300,
         },
       ],
     },
@@ -4042,7 +3942,7 @@ exports[`contextMenu element > selecting 'Send to back' in context menu sends el
           "fillStyle": "hachure",
           "frameId": null,
           "groupIds": [],
-          "height": 20,
+          "height": 200,
           "id": "id0",
           "isDeleted": false,
           "link": null,
@@ -4060,9 +3960,9 @@ exports[`contextMenu element > selecting 'Send to back' in context menu sends el
           "updated": 1,
           "version": 2,
           "versionNonce": 401146281,
-          "width": 20,
-          "x": -10,
-          "y": 0,
+          "width": 200,
+          "x": 460,
+          "y": 300,
         },
         {
           "angle": 0,
@@ -4071,7 +3971,7 @@ exports[`contextMenu element > selecting 'Send to back' in context menu sends el
           "fillStyle": "hachure",
           "frameId": null,
           "groupIds": [],
-          "height": 20,
+          "height": 200,
           "id": "id1",
           "isDeleted": false,
           "link": null,
@@ -4089,9 +3989,9 @@ exports[`contextMenu element > selecting 'Send to back' in context menu sends el
           "updated": 1,
           "version": 2,
           "versionNonce": 1014066025,
-          "width": 20,
-          "x": 20,
-          "y": 30,
+          "width": 200,
+          "x": 760,
+          "y": 600,
         },
       ],
     },
@@ -4114,7 +4014,7 @@ exports[`contextMenu element > selecting 'Send to back' in context menu sends el
           "fillStyle": "hachure",
           "frameId": null,
           "groupIds": [],
-          "height": 20,
+          "height": 200,
           "id": "id1",
           "isDeleted": false,
           "link": null,
@@ -4132,9 +4032,9 @@ exports[`contextMenu element > selecting 'Send to back' in context menu sends el
           "updated": 1,
           "version": 3,
           "versionNonce": 400692809,
-          "width": 20,
-          "x": 20,
-          "y": 30,
+          "width": 200,
+          "x": 760,
+          "y": 600,
         },
         {
           "angle": 0,
@@ -4143,7 +4043,7 @@ exports[`contextMenu element > selecting 'Send to back' in context menu sends el
           "fillStyle": "hachure",
           "frameId": null,
           "groupIds": [],
-          "height": 20,
+          "height": 200,
           "id": "id0",
           "isDeleted": false,
           "link": null,
@@ -4161,9 +4061,9 @@ exports[`contextMenu element > selecting 'Send to back' in context menu sends el
           "updated": 1,
           "version": 2,
           "versionNonce": 401146281,
-          "width": 20,
-          "x": -10,
-          "y": 0,
+          "width": 200,
+          "x": 460,
+          "y": 300,
         },
       ],
     },
@@ -4247,9 +4147,15 @@ exports[`contextMenu element > selecting 'Ungroup selection' in context menu ung
     "id1": true,
   },
   "resizingElement": null,
-  "scrollConstraints": null,
-  "scrollX": 0,
-  "scrollY": 0,
+  "scrollConstraints": {
+    "height": 1300,
+    "lockZoom": false,
+    "width": 2560,
+    "x": 0,
+    "y": 0,
+  },
+  "scrollX": -560,
+  "scrollY": -300,
   "scrolledOutside": false,
   "selectedElementIds": {
     "id0": true,
@@ -4272,7 +4178,7 @@ exports[`contextMenu element > selecting 'Ungroup selection' in context menu ung
   "width": 200,
   "zenModeEnabled": false,
   "zoom": {
-    "value": 1,
+    "value": 0.1,
   },
 }
 `;
@@ -4285,7 +4191,7 @@ exports[`contextMenu element > selecting 'Ungroup selection' in context menu ung
   "fillStyle": "hachure",
   "frameId": null,
   "groupIds": [],
-  "height": 20,
+  "height": 200,
   "id": "id0",
   "isDeleted": false,
   "link": null,
@@ -4303,9 +4209,9 @@ exports[`contextMenu element > selecting 'Ungroup selection' in context menu ung
   "updated": 1,
   "version": 4,
   "versionNonce": 915032327,
-  "width": 20,
-  "x": -10,
-  "y": 0,
+  "width": 200,
+  "x": 460,
+  "y": 300,
 }
 `;
 
@@ -4317,7 +4223,7 @@ exports[`contextMenu element > selecting 'Ungroup selection' in context menu ung
   "fillStyle": "hachure",
   "frameId": null,
   "groupIds": [],
-  "height": 20,
+  "height": 200,
   "id": "id1",
   "isDeleted": false,
   "link": null,
@@ -4335,9 +4241,9 @@ exports[`contextMenu element > selecting 'Ungroup selection' in context menu ung
   "updated": 1,
   "version": 4,
   "versionNonce": 81784553,
-  "width": 20,
-  "x": 20,
-  "y": 30,
+  "width": 200,
+  "x": 760,
+  "y": 600,
 }
 `;
 
@@ -4376,7 +4282,7 @@ exports[`contextMenu element > selecting 'Ungroup selection' in context menu ung
           "fillStyle": "hachure",
           "frameId": null,
           "groupIds": [],
-          "height": 20,
+          "height": 200,
           "id": "id0",
           "isDeleted": false,
           "link": null,
@@ -4394,9 +4300,9 @@ exports[`contextMenu element > selecting 'Ungroup selection' in context menu ung
           "updated": 1,
           "version": 2,
           "versionNonce": 2019559783,
-          "width": 20,
-          "x": -10,
-          "y": 0,
+          "width": 200,
+          "x": 460,
+          "y": 300,
         },
       ],
     },
@@ -4419,7 +4325,7 @@ exports[`contextMenu element > selecting 'Ungroup selection' in context menu ung
           "fillStyle": "hachure",
           "frameId": null,
           "groupIds": [],
-          "height": 20,
+          "height": 200,
           "id": "id0",
           "isDeleted": false,
           "link": null,
@@ -4437,9 +4343,9 @@ exports[`contextMenu element > selecting 'Ungroup selection' in context menu ung
           "updated": 1,
           "version": 2,
           "versionNonce": 2019559783,
-          "width": 20,
-          "x": -10,
-          "y": 0,
+          "width": 200,
+          "x": 460,
+          "y": 300,
         },
         {
           "angle": 0,
@@ -4448,7 +4354,7 @@ exports[`contextMenu element > selecting 'Ungroup selection' in context menu ung
           "fillStyle": "hachure",
           "frameId": null,
           "groupIds": [],
-          "height": 20,
+          "height": 200,
           "id": "id1",
           "isDeleted": false,
           "link": null,
@@ -4466,9 +4372,9 @@ exports[`contextMenu element > selecting 'Ungroup selection' in context menu ung
           "updated": 1,
           "version": 2,
           "versionNonce": 238820263,
-          "width": 20,
-          "x": 20,
-          "y": 30,
+          "width": 200,
+          "x": 760,
+          "y": 600,
         },
       ],
     },
@@ -4496,7 +4402,7 @@ exports[`contextMenu element > selecting 'Ungroup selection' in context menu ung
           "groupIds": [
             "id3",
           ],
-          "height": 20,
+          "height": 200,
           "id": "id0",
           "isDeleted": false,
           "link": null,
@@ -4514,9 +4420,9 @@ exports[`contextMenu element > selecting 'Ungroup selection' in context menu ung
           "updated": 1,
           "version": 3,
           "versionNonce": 1505387817,
-          "width": 20,
-          "x": -10,
-          "y": 0,
+          "width": 200,
+          "x": 460,
+          "y": 300,
         },
         {
           "angle": 0,
@@ -4527,7 +4433,7 @@ exports[`contextMenu element > selecting 'Ungroup selection' in context menu ung
           "groupIds": [
             "id3",
           ],
-          "height": 20,
+          "height": 200,
           "id": "id1",
           "isDeleted": false,
           "link": null,
@@ -4545,9 +4451,9 @@ exports[`contextMenu element > selecting 'Ungroup selection' in context menu ung
           "updated": 1,
           "version": 3,
           "versionNonce": 23633383,
-          "width": 20,
-          "x": 20,
-          "y": 30,
+          "width": 200,
+          "x": 760,
+          "y": 600,
         },
       ],
     },
@@ -4571,7 +4477,7 @@ exports[`contextMenu element > selecting 'Ungroup selection' in context menu ung
           "fillStyle": "hachure",
           "frameId": null,
           "groupIds": [],
-          "height": 20,
+          "height": 200,
           "id": "id0",
           "isDeleted": false,
           "link": null,
@@ -4589,9 +4495,9 @@ exports[`contextMenu element > selecting 'Ungroup selection' in context menu ung
           "updated": 1,
           "version": 4,
           "versionNonce": 915032327,
-          "width": 20,
-          "x": -10,
-          "y": 0,
+          "width": 200,
+          "x": 460,
+          "y": 300,
         },
         {
           "angle": 0,
@@ -4600,7 +4506,7 @@ exports[`contextMenu element > selecting 'Ungroup selection' in context menu ung
           "fillStyle": "hachure",
           "frameId": null,
           "groupIds": [],
-          "height": 20,
+          "height": 200,
           "id": "id1",
           "isDeleted": false,
           "link": null,
@@ -4618,9 +4524,9 @@ exports[`contextMenu element > selecting 'Ungroup selection' in context menu ung
           "updated": 1,
           "version": 4,
           "versionNonce": 81784553,
-          "width": 20,
-          "x": 20,
-          "y": 30,
+          "width": 200,
+          "x": 760,
+          "y": 600,
         },
       ],
     },
@@ -4980,9 +4886,15 @@ exports[`contextMenu element > shows 'Group selection' in context menu for multi
     "id0": true,
   },
   "resizingElement": null,
-  "scrollConstraints": null,
-  "scrollX": 0,
-  "scrollY": 0,
+  "scrollConstraints": {
+    "height": 1300,
+    "lockZoom": false,
+    "width": 2560,
+    "x": 0,
+    "y": 0,
+  },
+  "scrollX": -560,
+  "scrollY": -300,
   "scrolledOutside": false,
   "selectedElementIds": {
     "id0": true,
@@ -5005,7 +4917,7 @@ exports[`contextMenu element > shows 'Group selection' in context menu for multi
   "width": 200,
   "zenModeEnabled": false,
   "zoom": {
-    "value": 1,
+    "value": 0.1,
   },
 }
 `;
@@ -5018,7 +4930,7 @@ exports[`contextMenu element > shows 'Group selection' in context menu for multi
   "fillStyle": "hachure",
   "frameId": null,
   "groupIds": [],
-  "height": 10,
+  "height": 100,
   "id": "id0",
   "isDeleted": false,
   "link": null,
@@ -5036,9 +4948,9 @@ exports[`contextMenu element > shows 'Group selection' in context menu for multi
   "updated": 1,
   "version": 2,
   "versionNonce": 401146281,
-  "width": 10,
-  "x": -10,
-  "y": 0,
+  "width": 100,
+  "x": 460,
+  "y": 300,
 }
 `;
 
@@ -5050,7 +4962,7 @@ exports[`contextMenu element > shows 'Group selection' in context menu for multi
   "fillStyle": "hachure",
   "frameId": null,
   "groupIds": [],
-  "height": 10,
+  "height": 100,
   "id": "id1",
   "isDeleted": false,
   "link": null,
@@ -5068,9 +4980,9 @@ exports[`contextMenu element > shows 'Group selection' in context menu for multi
   "updated": 1,
   "version": 2,
   "versionNonce": 1014066025,
-  "width": 10,
-  "x": 10,
-  "y": 0,
+  "width": 100,
+  "x": 660,
+  "y": 300,
 }
 `;
 
@@ -5109,7 +5021,7 @@ exports[`contextMenu element > shows 'Group selection' in context menu for multi
           "fillStyle": "hachure",
           "frameId": null,
           "groupIds": [],
-          "height": 10,
+          "height": 100,
           "id": "id0",
           "isDeleted": false,
           "link": null,
@@ -5127,9 +5039,9 @@ exports[`contextMenu element > shows 'Group selection' in context menu for multi
           "updated": 1,
           "version": 2,
           "versionNonce": 401146281,
-          "width": 10,
-          "x": -10,
-          "y": 0,
+          "width": 100,
+          "x": 460,
+          "y": 300,
         },
       ],
     },
@@ -5152,7 +5064,7 @@ exports[`contextMenu element > shows 'Group selection' in context menu for multi
           "fillStyle": "hachure",
           "frameId": null,
           "groupIds": [],
-          "height": 10,
+          "height": 100,
           "id": "id0",
           "isDeleted": false,
           "link": null,
@@ -5170,9 +5082,9 @@ exports[`contextMenu element > shows 'Group selection' in context menu for multi
           "updated": 1,
           "version": 2,
           "versionNonce": 401146281,
-          "width": 10,
-          "x": -10,
-          "y": 0,
+          "width": 100,
+          "x": 460,
+          "y": 300,
         },
         {
           "angle": 0,
@@ -5181,7 +5093,7 @@ exports[`contextMenu element > shows 'Group selection' in context menu for multi
           "fillStyle": "hachure",
           "frameId": null,
           "groupIds": [],
-          "height": 10,
+          "height": 100,
           "id": "id1",
           "isDeleted": false,
           "link": null,
@@ -5199,9 +5111,9 @@ exports[`contextMenu element > shows 'Group selection' in context menu for multi
           "updated": 1,
           "version": 2,
           "versionNonce": 1014066025,
-          "width": 10,
-          "x": 10,
-          "y": 0,
+          "width": 100,
+          "x": 660,
+          "y": 300,
         },
       ],
     },
@@ -5561,9 +5473,15 @@ exports[`contextMenu element > shows 'Ungroup selection' in context menu for gro
     "id0": true,
   },
   "resizingElement": null,
-  "scrollConstraints": null,
-  "scrollX": 0,
-  "scrollY": 0,
+  "scrollConstraints": {
+    "height": 1300,
+    "lockZoom": false,
+    "width": 2560,
+    "x": 0,
+    "y": 0,
+  },
+  "scrollX": -560,
+  "scrollY": -300,
   "scrolledOutside": false,
   "selectedElementIds": {
     "id0": true,
@@ -5588,7 +5506,7 @@ exports[`contextMenu element > shows 'Ungroup selection' in context menu for gro
   "width": 200,
   "zenModeEnabled": false,
   "zoom": {
-    "value": 1,
+    "value": 0.1,
   },
 }
 `;
@@ -5603,7 +5521,7 @@ exports[`contextMenu element > shows 'Ungroup selection' in context menu for gro
   "groupIds": [
     "id4",
   ],
-  "height": 10,
+  "height": 100,
   "id": "id0",
   "isDeleted": false,
   "link": null,
@@ -5621,9 +5539,9 @@ exports[`contextMenu element > shows 'Ungroup selection' in context menu for gro
   "updated": 1,
   "version": 3,
   "versionNonce": 23633383,
-  "width": 10,
-  "x": -10,
-  "y": 0,
+  "width": 100,
+  "x": 460,
+  "y": 300,
 }
 `;
 
@@ -5637,7 +5555,7 @@ exports[`contextMenu element > shows 'Ungroup selection' in context menu for gro
   "groupIds": [
     "id4",
   ],
-  "height": 10,
+  "height": 100,
   "id": "id1",
   "isDeleted": false,
   "link": null,
@@ -5655,9 +5573,9 @@ exports[`contextMenu element > shows 'Ungroup selection' in context menu for gro
   "updated": 1,
   "version": 3,
   "versionNonce": 493213705,
-  "width": 10,
-  "x": 10,
-  "y": 0,
+  "width": 100,
+  "x": 660,
+  "y": 300,
 }
 `;
 
@@ -5696,7 +5614,7 @@ exports[`contextMenu element > shows 'Ungroup selection' in context menu for gro
           "fillStyle": "hachure",
           "frameId": null,
           "groupIds": [],
-          "height": 10,
+          "height": 100,
           "id": "id0",
           "isDeleted": false,
           "link": null,
@@ -5714,9 +5632,9 @@ exports[`contextMenu element > shows 'Ungroup selection' in context menu for gro
           "updated": 1,
           "version": 2,
           "versionNonce": 2019559783,
-          "width": 10,
-          "x": -10,
-          "y": 0,
+          "width": 100,
+          "x": 460,
+          "y": 300,
         },
       ],
     },
@@ -5739,7 +5657,7 @@ exports[`contextMenu element > shows 'Ungroup selection' in context menu for gro
           "fillStyle": "hachure",
           "frameId": null,
           "groupIds": [],
-          "height": 10,
+          "height": 100,
           "id": "id0",
           "isDeleted": false,
           "link": null,
@@ -5757,9 +5675,9 @@ exports[`contextMenu element > shows 'Ungroup selection' in context menu for gro
           "updated": 1,
           "version": 2,
           "versionNonce": 2019559783,
-          "width": 10,
-          "x": -10,
-          "y": 0,
+          "width": 100,
+          "x": 460,
+          "y": 300,
         },
         {
           "angle": 0,
@@ -5768,7 +5686,7 @@ exports[`contextMenu element > shows 'Ungroup selection' in context menu for gro
           "fillStyle": "hachure",
           "frameId": null,
           "groupIds": [],
-          "height": 10,
+          "height": 100,
           "id": "id1",
           "isDeleted": false,
           "link": null,
@@ -5786,9 +5704,9 @@ exports[`contextMenu element > shows 'Ungroup selection' in context menu for gro
           "updated": 1,
           "version": 2,
           "versionNonce": 238820263,
-          "width": 10,
-          "x": 10,
-          "y": 0,
+          "width": 100,
+          "x": 660,
+          "y": 300,
         },
       ],
     },
@@ -5816,7 +5734,7 @@ exports[`contextMenu element > shows 'Ungroup selection' in context menu for gro
           "groupIds": [
             "id4",
           ],
-          "height": 10,
+          "height": 100,
           "id": "id0",
           "isDeleted": false,
           "link": null,
@@ -5834,9 +5752,9 @@ exports[`contextMenu element > shows 'Ungroup selection' in context menu for gro
           "updated": 1,
           "version": 3,
           "versionNonce": 23633383,
-          "width": 10,
-          "x": -10,
-          "y": 0,
+          "width": 100,
+          "x": 460,
+          "y": 300,
         },
         {
           "angle": 0,
@@ -5847,7 +5765,7 @@ exports[`contextMenu element > shows 'Ungroup selection' in context menu for gro
           "groupIds": [
             "id4",
           ],
-          "height": 10,
+          "height": 100,
           "id": "id1",
           "isDeleted": false,
           "link": null,
@@ -5865,9 +5783,9 @@ exports[`contextMenu element > shows 'Ungroup selection' in context menu for gro
           "updated": 1,
           "version": 3,
           "versionNonce": 493213705,
-          "width": 10,
-          "x": 10,
-          "y": 0,
+          "width": 100,
+          "x": 660,
+          "y": 300,
         },
       ],
     },
@@ -6064,9 +5982,15 @@ exports[`contextMenu element > shows context menu for canvas > [end of test] app
   "pendingImageElementId": null,
   "previousSelectedElementIds": {},
   "resizingElement": null,
-  "scrollConstraints": null,
-  "scrollX": 0,
-  "scrollY": 0,
+  "scrollConstraints": {
+    "height": 1300,
+    "lockZoom": false,
+    "width": 2560,
+    "x": 0,
+    "y": 0,
+  },
+  "scrollX": -560,
+  "scrollY": -300,
   "scrolledOutside": false,
   "selectedElementIds": {},
   "selectedElementsAreBeingDragged": false,
@@ -6086,7 +6010,7 @@ exports[`contextMenu element > shows context menu for canvas > [end of test] app
   "width": 200,
   "zenModeEnabled": false,
   "zoom": {
-    "value": 1,
+    "value": 0.1,
   },
 }
 `;
@@ -6461,9 +6385,15 @@ exports[`contextMenu element > shows context menu for element > [end of test] ap
   "pendingImageElementId": null,
   "previousSelectedElementIds": {},
   "resizingElement": null,
-  "scrollConstraints": null,
-  "scrollX": 0,
-  "scrollY": 0,
+  "scrollConstraints": {
+    "height": 1300,
+    "lockZoom": false,
+    "width": 2560,
+    "x": 0,
+    "y": 0,
+  },
+  "scrollX": -560,
+  "scrollY": -300,
   "scrolledOutside": false,
   "selectedElementIds": {
     "id0": true,
@@ -6485,7 +6415,7 @@ exports[`contextMenu element > shows context menu for element > [end of test] ap
   "width": 200,
   "zenModeEnabled": false,
   "zoom": {
-    "value": 1,
+    "value": 0.1,
   },
 }
 `;
@@ -6502,26 +6432,6 @@ exports[`contextMenu element > shows context menu for element > [end of test] ap
   "collaborators": Map {},
   "contextMenu": {
     "items": [
-      {
-        "contextItemLabel": "labels.cut",
-        "keyTest": [Function],
-        "name": "cut",
-        "perform": [Function],
-        "predicate": [Function],
-        "trackEvent": {
-          "category": "element",
-        },
-      },
-      {
-        "contextItemLabel": "labels.copy",
-        "keyTest": undefined,
-        "name": "copy",
-        "perform": [Function],
-        "predicate": [Function],
-        "trackEvent": {
-          "category": "element",
-        },
-      },
       {
         "contextItemLabel": "labels.paste",
         "keyTest": undefined,
@@ -6532,24 +6442,6 @@ exports[`contextMenu element > shows context menu for element > [end of test] ap
           "category": "element",
         },
       },
-      {
-        "contextItemLabel": "labels.selectAllElementsInFrame",
-        "name": "selectAllElementsInFrame",
-        "perform": [Function],
-        "predicate": [Function],
-        "trackEvent": {
-          "category": "canvas",
-        },
-      },
-      {
-        "contextItemLabel": "labels.removeAllElementsFromFrame",
-        "name": "removeAllElementsFromFrame",
-        "perform": [Function],
-        "predicate": [Function],
-        "trackEvent": {
-          "category": "history",
-        },
-      },
       "separator",
       {
         "contextItemLabel": "labels.copyAsPng",
@@ -6581,197 +6473,74 @@ exports[`contextMenu element > shows context menu for element > [end of test] ap
       },
       "separator",
       {
-        "contextItemLabel": "labels.copyStyles",
+        "contextItemLabel": "labels.selectAll",
         "keyTest": [Function],
-        "name": "copyStyles",
+        "name": "selectAll",
         "perform": [Function],
         "trackEvent": {
-          "category": "element",
+          "category": "canvas",
         },
       },
       {
-        "contextItemLabel": "labels.pasteStyles",
-        "keyTest": [Function],
-        "name": "pasteStyles",
+        "contextItemLabel": "labels.elementLock.unlockAll",
+        "name": "unlockAllElements",
         "perform": [Function],
+        "predicate": [Function],
         "trackEvent": {
-          "category": "element",
+          "category": "canvas",
         },
+        "viewMode": false,
       },
       "separator",
       {
-        "PanelComponent": [Function],
-        "contextItemLabel": "labels.group",
+        "checked": [Function],
+        "contextItemLabel": "labels.showGrid",
         "keyTest": [Function],
-        "name": "group",
+        "name": "gridMode",
         "perform": [Function],
         "predicate": [Function],
         "trackEvent": {
-          "category": "element",
+          "category": "canvas",
+          "predicate": [Function],
         },
+        "viewMode": true,
       },
       {
-        "contextItemLabel": "labels.unbindText",
-        "name": "unbindText",
+        "checked": [Function],
+        "contextItemLabel": "buttons.zenMode",
+        "keyTest": [Function],
+        "name": "zenMode",
         "perform": [Function],
         "predicate": [Function],
         "trackEvent": {
-          "category": "element",
+          "category": "canvas",
+          "predicate": [Function],
         },
+        "viewMode": true,
       },
       {
-        "contextItemLabel": "labels.bindText",
-        "name": "bindText",
+        "checked": [Function],
+        "contextItemLabel": "labels.viewMode",
+        "keyTest": [Function],
+        "name": "viewMode",
         "perform": [Function],
         "predicate": [Function],
         "trackEvent": {
-          "category": "element",
+          "category": "canvas",
+          "predicate": [Function],
         },
+        "viewMode": true,
       },
       {
-        "contextItemLabel": "labels.createContainerFromText",
-        "name": "wrapTextInContainer",
-        "perform": [Function],
-        "predicate": [Function],
-        "trackEvent": {
-          "category": "element",
-        },
-      },
-      {
-        "PanelComponent": [Function],
-        "contextItemLabel": "labels.ungroup",
+        "checked": [Function],
+        "contextItemLabel": "stats.title",
         "keyTest": [Function],
-        "name": "ungroup",
-        "perform": [Function],
-        "predicate": [Function],
-        "trackEvent": {
-          "category": "element",
-        },
-      },
-      "separator",
-      {
-        "contextItemLabel": "labels.addToLibrary",
-        "name": "addToLibrary",
+        "name": "stats",
         "perform": [Function],
         "trackEvent": {
-          "category": "element",
-        },
-      },
-      "separator",
-      {
-        "PanelComponent": [Function],
-        "contextItemLabel": "labels.sendBackward",
-        "keyPriority": 40,
-        "keyTest": [Function],
-        "name": "sendBackward",
-        "perform": [Function],
-        "trackEvent": {
-          "category": "element",
-        },
-      },
-      {
-        "PanelComponent": [Function],
-        "contextItemLabel": "labels.bringForward",
-        "keyPriority": 40,
-        "keyTest": [Function],
-        "name": "bringForward",
-        "perform": [Function],
-        "trackEvent": {
-          "category": "element",
-        },
-      },
-      {
-        "PanelComponent": [Function],
-        "contextItemLabel": "labels.sendToBack",
-        "keyTest": [Function],
-        "name": "sendToBack",
-        "perform": [Function],
-        "trackEvent": {
-          "category": "element",
-        },
-      },
-      {
-        "PanelComponent": [Function],
-        "contextItemLabel": "labels.bringToFront",
-        "keyTest": [Function],
-        "name": "bringToFront",
-        "perform": [Function],
-        "trackEvent": {
-          "category": "element",
-        },
-      },
-      "separator",
-      {
-        "contextItemLabel": "labels.flipHorizontal",
-        "keyTest": [Function],
-        "name": "flipHorizontal",
-        "perform": [Function],
-        "trackEvent": {
-          "category": "element",
-        },
-      },
-      {
-        "contextItemLabel": "labels.flipVertical",
-        "keyTest": [Function],
-        "name": "flipVertical",
-        "perform": [Function],
-        "trackEvent": {
-          "category": "element",
-        },
-      },
-      "separator",
-      {
-        "contextItemLabel": [Function],
-        "name": "toggleLinearEditor",
-        "perform": [Function],
-        "predicate": [Function],
-        "trackEvent": {
-          "category": "element",
-        },
-      },
-      {
-        "PanelComponent": [Function],
-        "contextItemLabel": [Function],
-        "keyTest": [Function],
-        "name": "hyperlink",
-        "perform": [Function],
-        "predicate": [Function],
-        "trackEvent": {
-          "action": "click",
-          "category": "hyperlink",
-        },
-      },
-      {
-        "PanelComponent": [Function],
-        "contextItemLabel": "labels.duplicateSelection",
-        "keyTest": [Function],
-        "name": "duplicateSelection",
-        "perform": [Function],
-        "trackEvent": {
-          "category": "element",
-        },
-      },
-      {
-        "contextItemLabel": [Function],
-        "keyTest": [Function],
-        "name": "toggleElementLock",
-        "perform": [Function],
-        "predicate": [Function],
-        "trackEvent": {
-          "category": "element",
-        },
-      },
-      "separator",
-      {
-        "PanelComponent": [Function],
-        "contextItemLabel": "labels.delete",
-        "keyTest": [Function],
-        "name": "deleteSelectedElements",
-        "perform": [Function],
-        "trackEvent": {
-          "action": "delete",
-          "category": "element",
+          "category": "menu",
         },
+        "viewMode": true,
       },
     ],
     "left": 80,
@@ -6836,10 +6605,16 @@ exports[`contextMenu element > shows context menu for element > [end of test] ap
   "pendingImageElementId": null,
   "previousSelectedElementIds": {},
   "resizingElement": null,
-  "scrollConstraints": null,
-  "scrollX": 0,
-  "scrollY": 0,
-  "scrolledOutside": false,
+  "scrollConstraints": {
+    "height": 1300,
+    "lockZoom": false,
+    "width": 2560,
+    "x": 0,
+    "y": 0,
+  },
+  "scrollX": -560,
+  "scrollY": -300,
+  "scrolledOutside": true,
   "selectedElementIds": {
     "id1": true,
   },
@@ -6860,7 +6635,7 @@ exports[`contextMenu element > shows context menu for element > [end of test] ap
   "width": 200,
   "zenModeEnabled": false,
   "zoom": {
-    "value": 1,
+    "value": 0.1,
   },
 }
 `;
@@ -6873,7 +6648,7 @@ exports[`contextMenu element > shows context menu for element > [end of test] el
   "fillStyle": "hachure",
   "frameId": null,
   "groupIds": [],
-  "height": 20,
+  "height": 200,
   "id": "id0",
   "isDeleted": false,
   "link": null,
@@ -6891,9 +6666,9 @@ exports[`contextMenu element > shows context menu for element > [end of test] el
   "updated": 1,
   "version": 2,
   "versionNonce": 401146281,
-  "width": 20,
-  "x": -10,
-  "y": 0,
+  "width": 200,
+  "x": 460,
+  "y": 300,
 }
 `;
 
@@ -6996,7 +6771,7 @@ exports[`contextMenu element > shows context menu for element > [end of test] hi
           "fillStyle": "hachure",
           "frameId": null,
           "groupIds": [],
-          "height": 20,
+          "height": 200,
           "id": "id0",
           "isDeleted": false,
           "link": null,
@@ -7014,9 +6789,9 @@ exports[`contextMenu element > shows context menu for element > [end of test] hi
           "updated": 1,
           "version": 2,
           "versionNonce": 401146281,
-          "width": 20,
-          "x": -10,
-          "y": 0,
+          "width": 200,
+          "x": 460,
+          "y": 300,
         },
       ],
     },
diff --git a/src/tests/__snapshots__/dragCreate.test.tsx.snap b/src/tests/__snapshots__/dragCreate.test.tsx.snap
deleted file mode 100644
index 34c994da5..000000000
--- a/src/tests/__snapshots__/dragCreate.test.tsx.snap
+++ /dev/null
@@ -1,199 +0,0 @@
-// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
-
-exports[`Test dragCreate > add element to the scene when pointer dragging long enough > arrow 1`] = `1`;
-
-exports[`Test dragCreate > add element to the scene when pointer dragging long enough > arrow 2`] = `
-{
-  "angle": 0,
-  "backgroundColor": "transparent",
-  "boundElements": null,
-  "endArrowhead": "arrow",
-  "endBinding": null,
-  "fillStyle": "hachure",
-  "frameId": null,
-  "groupIds": [],
-  "height": 50,
-  "id": "id0",
-  "isDeleted": false,
-  "lastCommittedPoint": null,
-  "link": null,
-  "locked": false,
-  "opacity": 100,
-  "points": [
-    [
-      0,
-      0,
-    ],
-    [
-      30,
-      50,
-    ],
-  ],
-  "roughness": 1,
-  "roundness": {
-    "type": 2,
-  },
-  "seed": 1278240551,
-  "startArrowhead": null,
-  "startBinding": null,
-  "strokeColor": "#1e1e1e",
-  "strokeStyle": "solid",
-  "strokeWidth": 1,
-  "type": "arrow",
-  "updated": 1,
-  "version": 3,
-  "versionNonce": 401146281,
-  "width": 30,
-  "x": 30,
-  "y": 20,
-}
-`;
-
-exports[`Test dragCreate > add element to the scene when pointer dragging long enough > diamond 1`] = `1`;
-
-exports[`Test dragCreate > add element to the scene when pointer dragging long enough > diamond 2`] = `
-{
-  "angle": 0,
-  "backgroundColor": "transparent",
-  "boundElements": null,
-  "fillStyle": "hachure",
-  "frameId": null,
-  "groupIds": [],
-  "height": 50,
-  "id": "id0",
-  "isDeleted": false,
-  "link": null,
-  "locked": false,
-  "opacity": 100,
-  "roughness": 1,
-  "roundness": {
-    "type": 2,
-  },
-  "seed": 1278240551,
-  "strokeColor": "#1e1e1e",
-  "strokeStyle": "solid",
-  "strokeWidth": 1,
-  "type": "diamond",
-  "updated": 1,
-  "version": 2,
-  "versionNonce": 453191,
-  "width": 30,
-  "x": 30,
-  "y": 20,
-}
-`;
-
-exports[`Test dragCreate > add element to the scene when pointer dragging long enough > ellipse 1`] = `1`;
-
-exports[`Test dragCreate > add element to the scene when pointer dragging long enough > ellipse 2`] = `
-{
-  "angle": 0,
-  "backgroundColor": "transparent",
-  "boundElements": null,
-  "fillStyle": "hachure",
-  "frameId": null,
-  "groupIds": [],
-  "height": 50,
-  "id": "id0",
-  "isDeleted": false,
-  "link": null,
-  "locked": false,
-  "opacity": 100,
-  "roughness": 1,
-  "roundness": {
-    "type": 2,
-  },
-  "seed": 1278240551,
-  "strokeColor": "#1e1e1e",
-  "strokeStyle": "solid",
-  "strokeWidth": 1,
-  "type": "ellipse",
-  "updated": 1,
-  "version": 2,
-  "versionNonce": 453191,
-  "width": 30,
-  "x": 30,
-  "y": 20,
-}
-`;
-
-exports[`Test dragCreate > add element to the scene when pointer dragging long enough > line 1`] = `
-{
-  "angle": 0,
-  "backgroundColor": "transparent",
-  "boundElements": null,
-  "endArrowhead": null,
-  "endBinding": null,
-  "fillStyle": "hachure",
-  "frameId": null,
-  "groupIds": [],
-  "height": 50,
-  "id": "id0",
-  "isDeleted": false,
-  "lastCommittedPoint": null,
-  "link": null,
-  "locked": false,
-  "opacity": 100,
-  "points": [
-    [
-      0,
-      0,
-    ],
-    [
-      30,
-      50,
-    ],
-  ],
-  "roughness": 1,
-  "roundness": {
-    "type": 2,
-  },
-  "seed": 1278240551,
-  "startArrowhead": null,
-  "startBinding": null,
-  "strokeColor": "#1e1e1e",
-  "strokeStyle": "solid",
-  "strokeWidth": 1,
-  "type": "line",
-  "updated": 1,
-  "version": 3,
-  "versionNonce": 401146281,
-  "width": 30,
-  "x": 30,
-  "y": 20,
-}
-`;
-
-exports[`Test dragCreate > add element to the scene when pointer dragging long enough > rectangle 1`] = `1`;
-
-exports[`Test dragCreate > add element to the scene when pointer dragging long enough > rectangle 2`] = `
-{
-  "angle": 0,
-  "backgroundColor": "transparent",
-  "boundElements": null,
-  "fillStyle": "hachure",
-  "frameId": null,
-  "groupIds": [],
-  "height": 50,
-  "id": "id0",
-  "isDeleted": false,
-  "link": null,
-  "locked": false,
-  "opacity": 100,
-  "roughness": 1,
-  "roundness": {
-    "type": 3,
-  },
-  "seed": 1278240551,
-  "strokeColor": "#1e1e1e",
-  "strokeStyle": "solid",
-  "strokeWidth": 1,
-  "type": "rectangle",
-  "updated": 1,
-  "version": 2,
-  "versionNonce": 453191,
-  "width": 30,
-  "x": 30,
-  "y": 20,
-}
-`;
diff --git a/src/tests/__snapshots__/linearElementEditor.test.tsx.snap b/src/tests/__snapshots__/linearElementEditor.test.tsx.snap
index 41e9f2b12..59eaa0b64 100644
--- a/src/tests/__snapshots__/linearElementEditor.test.tsx.snap
+++ b/src/tests/__snapshots__/linearElementEditor.test.tsx.snap
@@ -1,12 +1,3 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`Test Linear Elements > Test bound text element > should match styles for text editor 1`] = `
-<textarea
-  class="excalidraw-wysiwyg"
-  data-type="wysiwyg"
-  dir="auto"
-  style="position: absolute; display: inline-block; min-height: 1em; backface-visibility: hidden; margin: 0px; padding: 0px; border: 0px; outline: 0; resize: none; background: transparent; overflow: hidden; z-index: var(--zIndex-wysiwyg); word-break: break-word; white-space: pre-wrap; overflow-wrap: break-word; box-sizing: content-box; width: 10.5px; height: 25px; left: 35px; top: 7.5px; transform: translate(0px, 0px) scale(1) rotate(0deg); text-align: center; vertical-align: middle; color: rgb(30, 30, 30); opacity: 1; filter: var(--theme-filter); max-height: 992.5px; font: Emoji 20px 20px; line-height: 1.25; font-family: Virgil, Segoe UI Emoji;"
-  tabindex="0"
-  wrap="off"
-/>
-`;
+exports[`Test Linear Elements > Test bound text element > should match styles for text editor 1`] = `null`;
diff --git a/src/tests/__snapshots__/move.test.tsx.snap b/src/tests/__snapshots__/move.test.tsx.snap
deleted file mode 100644
index 092074ba3..000000000
--- a/src/tests/__snapshots__/move.test.tsx.snap
+++ /dev/null
@@ -1,226 +0,0 @@
-// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
-
-exports[`duplicate element on move when ALT is clicked > rectangle 1`] = `
-{
-  "angle": 0,
-  "backgroundColor": "transparent",
-  "boundElements": null,
-  "fillStyle": "hachure",
-  "frameId": null,
-  "groupIds": [],
-  "height": 50,
-  "id": "id0_copy",
-  "isDeleted": false,
-  "link": null,
-  "locked": false,
-  "opacity": 100,
-  "roughness": 1,
-  "roundness": {
-    "type": 3,
-  },
-  "seed": 1014066025,
-  "strokeColor": "#1e1e1e",
-  "strokeStyle": "solid",
-  "strokeWidth": 1,
-  "type": "rectangle",
-  "updated": 1,
-  "version": 4,
-  "versionNonce": 238820263,
-  "width": 30,
-  "x": 30,
-  "y": 20,
-}
-`;
-
-exports[`duplicate element on move when ALT is clicked > rectangle 2`] = `
-{
-  "angle": 0,
-  "backgroundColor": "transparent",
-  "boundElements": null,
-  "fillStyle": "hachure",
-  "frameId": null,
-  "groupIds": [],
-  "height": 50,
-  "id": "id0",
-  "isDeleted": false,
-  "link": null,
-  "locked": false,
-  "opacity": 100,
-  "roughness": 1,
-  "roundness": {
-    "type": 3,
-  },
-  "seed": 1278240551,
-  "strokeColor": "#1e1e1e",
-  "strokeStyle": "solid",
-  "strokeWidth": 1,
-  "type": "rectangle",
-  "updated": 1,
-  "version": 4,
-  "versionNonce": 1604849351,
-  "width": 30,
-  "x": -10,
-  "y": 60,
-}
-`;
-
-exports[`move element > rectangle 1`] = `
-{
-  "angle": 0,
-  "backgroundColor": "transparent",
-  "boundElements": null,
-  "fillStyle": "hachure",
-  "frameId": null,
-  "groupIds": [],
-  "height": 50,
-  "id": "id0",
-  "isDeleted": false,
-  "link": null,
-  "locked": false,
-  "opacity": 100,
-  "roughness": 1,
-  "roundness": {
-    "type": 3,
-  },
-  "seed": 1278240551,
-  "strokeColor": "#1e1e1e",
-  "strokeStyle": "solid",
-  "strokeWidth": 1,
-  "type": "rectangle",
-  "updated": 1,
-  "version": 3,
-  "versionNonce": 1150084233,
-  "width": 30,
-  "x": 0,
-  "y": 40,
-}
-`;
-
-exports[`move element > rectangles with binding arrow 1`] = `
-{
-  "angle": 0,
-  "backgroundColor": "transparent",
-  "boundElements": [
-    {
-      "id": "id2",
-      "type": "arrow",
-    },
-  ],
-  "fillStyle": "hachure",
-  "frameId": null,
-  "groupIds": [],
-  "height": 100,
-  "id": "id0",
-  "isDeleted": false,
-  "link": null,
-  "locked": false,
-  "opacity": 100,
-  "roughness": 1,
-  "roundness": {
-    "type": 3,
-  },
-  "seed": 1278240551,
-  "strokeColor": "#1e1e1e",
-  "strokeStyle": "solid",
-  "strokeWidth": 1,
-  "type": "rectangle",
-  "updated": 1,
-  "version": 3,
-  "versionNonce": 81784553,
-  "width": 100,
-  "x": 0,
-  "y": 0,
-}
-`;
-
-exports[`move element > rectangles with binding arrow 2`] = `
-{
-  "angle": 0,
-  "backgroundColor": "transparent",
-  "boundElements": [
-    {
-      "id": "id2",
-      "type": "arrow",
-    },
-  ],
-  "fillStyle": "hachure",
-  "frameId": null,
-  "groupIds": [],
-  "height": 300,
-  "id": "id1",
-  "isDeleted": false,
-  "link": null,
-  "locked": false,
-  "opacity": 100,
-  "roughness": 1,
-  "roundness": {
-    "type": 3,
-  },
-  "seed": 2019559783,
-  "strokeColor": "#1e1e1e",
-  "strokeStyle": "solid",
-  "strokeWidth": 1,
-  "type": "rectangle",
-  "updated": 1,
-  "version": 6,
-  "versionNonce": 927333447,
-  "width": 300,
-  "x": 201,
-  "y": 2,
-}
-`;
-
-exports[`move element > rectangles with binding arrow 3`] = `
-{
-  "angle": 0,
-  "backgroundColor": "transparent",
-  "boundElements": null,
-  "endArrowhead": null,
-  "endBinding": {
-    "elementId": "id1",
-    "focus": -0.46666666666666673,
-    "gap": 10,
-  },
-  "fillStyle": "hachure",
-  "frameId": null,
-  "groupIds": [],
-  "height": 81.48231043525051,
-  "id": "id2",
-  "isDeleted": false,
-  "lastCommittedPoint": null,
-  "link": null,
-  "locked": false,
-  "opacity": 100,
-  "points": [
-    [
-      0,
-      0,
-    ],
-    [
-      81,
-      81.48231043525051,
-    ],
-  ],
-  "roughness": 1,
-  "roundness": {
-    "type": 2,
-  },
-  "seed": 238820263,
-  "startArrowhead": null,
-  "startBinding": {
-    "elementId": "id0",
-    "focus": -0.6000000000000001,
-    "gap": 10,
-  },
-  "strokeColor": "#1e1e1e",
-  "strokeStyle": "solid",
-  "strokeWidth": 1,
-  "type": "line",
-  "updated": 1,
-  "version": 11,
-  "versionNonce": 1051383431,
-  "width": 81,
-  "x": 110,
-  "y": 49.981789081137734,
-}
-`;
diff --git a/src/tests/__snapshots__/multiPointCreate.test.tsx.snap b/src/tests/__snapshots__/multiPointCreate.test.tsx.snap
deleted file mode 100644
index 1f488b4d1..000000000
--- a/src/tests/__snapshots__/multiPointCreate.test.tsx.snap
+++ /dev/null
@@ -1,109 +0,0 @@
-// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
-
-exports[`multi point mode in linear elements > arrow 1`] = `
-{
-  "angle": 0,
-  "backgroundColor": "transparent",
-  "boundElements": null,
-  "endArrowhead": "arrow",
-  "endBinding": null,
-  "fillStyle": "hachure",
-  "frameId": null,
-  "groupIds": [],
-  "height": 110,
-  "id": "id0",
-  "isDeleted": false,
-  "lastCommittedPoint": [
-    70,
-    110,
-  ],
-  "link": null,
-  "locked": false,
-  "opacity": 100,
-  "points": [
-    [
-      0,
-      0,
-    ],
-    [
-      20,
-      30,
-    ],
-    [
-      70,
-      110,
-    ],
-  ],
-  "roughness": 1,
-  "roundness": {
-    "type": 2,
-  },
-  "seed": 1278240551,
-  "startArrowhead": null,
-  "startBinding": null,
-  "strokeColor": "#1e1e1e",
-  "strokeStyle": "solid",
-  "strokeWidth": 1,
-  "type": "arrow",
-  "updated": 1,
-  "version": 7,
-  "versionNonce": 1505387817,
-  "width": 70,
-  "x": 30,
-  "y": 30,
-}
-`;
-
-exports[`multi point mode in linear elements > line 1`] = `
-{
-  "angle": 0,
-  "backgroundColor": "transparent",
-  "boundElements": null,
-  "endArrowhead": null,
-  "endBinding": null,
-  "fillStyle": "hachure",
-  "frameId": null,
-  "groupIds": [],
-  "height": 110,
-  "id": "id0",
-  "isDeleted": false,
-  "lastCommittedPoint": [
-    70,
-    110,
-  ],
-  "link": null,
-  "locked": false,
-  "opacity": 100,
-  "points": [
-    [
-      0,
-      0,
-    ],
-    [
-      20,
-      30,
-    ],
-    [
-      70,
-      110,
-    ],
-  ],
-  "roughness": 1,
-  "roundness": {
-    "type": 2,
-  },
-  "seed": 1278240551,
-  "startArrowhead": null,
-  "startBinding": null,
-  "strokeColor": "#1e1e1e",
-  "strokeStyle": "solid",
-  "strokeWidth": 1,
-  "type": "line",
-  "updated": 1,
-  "version": 7,
-  "versionNonce": 1505387817,
-  "width": 70,
-  "x": 30,
-  "y": 30,
-}
-`;
diff --git a/src/tests/__snapshots__/regressionTests.test.tsx.snap b/src/tests/__snapshots__/regressionTests.test.tsx.snap
index 42561f7e0..d79bbc909 100644
--- a/src/tests/__snapshots__/regressionTests.test.tsx.snap
+++ b/src/tests/__snapshots__/regressionTests.test.tsx.snap
@@ -68,24 +68,21 @@ exports[`given element A and group of elements B and given both are selected whe
   "penDetected": false,
   "penMode": false,
   "pendingImageElementId": null,
-  "previousSelectedElementIds": {
-    "id0": true,
-    "id1": true,
-    "id2": true,
-  },
+  "previousSelectedElementIds": {},
   "resizingElement": null,
-  "scrollConstraints": null,
-  "scrollX": 0,
-  "scrollY": 0,
+  "scrollConstraints": {
+    "height": 1300,
+    "lockZoom": false,
+    "width": 2560,
+    "x": 0,
+    "y": 0,
+  },
+  "scrollX": -2560,
+  "scrollY": -1300,
   "scrolledOutside": false,
-  "selectedElementIds": {
-    "id0": true,
-    "id2": true,
-  },
+  "selectedElementIds": {},
   "selectedElementsAreBeingDragged": false,
-  "selectedGroupIds": {
-    "id5": true,
-  },
+  "selectedGroupIds": {},
   "selectedLinearElement": null,
   "selectionElement": null,
   "shouldCacheIgnoreZoom": false,
@@ -101,7 +98,7 @@ exports[`given element A and group of elements B and given both are selected whe
   "width": 1024,
   "zenModeEnabled": false,
   "zoom": {
-    "value": 1,
+    "value": 0.1,
   },
 }
 `;
@@ -141,7 +138,7 @@ exports[`given element A and group of elements B and given both are selected whe
           "fillStyle": "hachure",
           "frameId": null,
           "groupIds": [],
-          "height": 10,
+          "height": 100,
           "id": "id0",
           "isDeleted": false,
           "link": null,
@@ -159,9 +156,9 @@ exports[`given element A and group of elements B and given both are selected whe
           "updated": 1,
           "version": 2,
           "versionNonce": 453191,
-          "width": 10,
-          "x": 0,
-          "y": 0,
+          "width": 100,
+          "x": 2560,
+          "y": 1300,
         },
       ],
     },
@@ -184,7 +181,7 @@ exports[`given element A and group of elements B and given both are selected whe
           "fillStyle": "hachure",
           "frameId": null,
           "groupIds": [],
-          "height": 10,
+          "height": 100,
           "id": "id0",
           "isDeleted": false,
           "link": null,
@@ -202,9 +199,9 @@ exports[`given element A and group of elements B and given both are selected whe
           "updated": 1,
           "version": 2,
           "versionNonce": 453191,
-          "width": 10,
-          "x": 0,
-          "y": 0,
+          "width": 100,
+          "x": 2560,
+          "y": 1300,
         },
         {
           "angle": 0,
@@ -213,7 +210,7 @@ exports[`given element A and group of elements B and given both are selected whe
           "fillStyle": "hachure",
           "frameId": null,
           "groupIds": [],
-          "height": 10,
+          "height": 100,
           "id": "id1",
           "isDeleted": false,
           "link": null,
@@ -231,9 +228,9 @@ exports[`given element A and group of elements B and given both are selected whe
           "updated": 1,
           "version": 2,
           "versionNonce": 1116226695,
-          "width": 10,
-          "x": 0,
-          "y": 30,
+          "width": 100,
+          "x": 2560,
+          "y": 1600,
         },
       ],
     },
@@ -256,7 +253,7 @@ exports[`given element A and group of elements B and given both are selected whe
           "fillStyle": "hachure",
           "frameId": null,
           "groupIds": [],
-          "height": 10,
+          "height": 100,
           "id": "id0",
           "isDeleted": false,
           "link": null,
@@ -274,9 +271,9 @@ exports[`given element A and group of elements B and given both are selected whe
           "updated": 1,
           "version": 2,
           "versionNonce": 453191,
-          "width": 10,
-          "x": 0,
-          "y": 0,
+          "width": 100,
+          "x": 2560,
+          "y": 1300,
         },
         {
           "angle": 0,
@@ -285,7 +282,7 @@ exports[`given element A and group of elements B and given both are selected whe
           "fillStyle": "hachure",
           "frameId": null,
           "groupIds": [],
-          "height": 10,
+          "height": 100,
           "id": "id1",
           "isDeleted": false,
           "link": null,
@@ -303,9 +300,9 @@ exports[`given element A and group of elements B and given both are selected whe
           "updated": 1,
           "version": 2,
           "versionNonce": 1116226695,
-          "width": 10,
-          "x": 0,
-          "y": 30,
+          "width": 100,
+          "x": 2560,
+          "y": 1600,
         },
         {
           "angle": 0,
@@ -314,7 +311,7 @@ exports[`given element A and group of elements B and given both are selected whe
           "fillStyle": "hachure",
           "frameId": null,
           "groupIds": [],
-          "height": 10,
+          "height": 100,
           "id": "id2",
           "isDeleted": false,
           "link": null,
@@ -332,117 +329,9 @@ exports[`given element A and group of elements B and given both are selected whe
           "updated": 1,
           "version": 2,
           "versionNonce": 1604849351,
-          "width": 10,
-          "x": 0,
-          "y": 60,
-        },
-      ],
-    },
-    {
-      "appState": {
-        "editingGroupId": null,
-        "editingLinearElement": null,
-        "name": "Untitled-201933152653",
-        "selectedElementIds": {
-          "id0": true,
-          "id2": true,
-        },
-        "selectedGroupIds": {
-          "id5": true,
-        },
-        "viewBackgroundColor": "#ffffff",
-      },
-      "elements": [
-        {
-          "angle": 0,
-          "backgroundColor": "transparent",
-          "boundElements": null,
-          "fillStyle": "hachure",
-          "frameId": null,
-          "groupIds": [],
-          "height": 10,
-          "id": "id1",
-          "isDeleted": false,
-          "link": null,
-          "locked": false,
-          "opacity": 100,
-          "roughness": 1,
-          "roundness": {
-            "type": 3,
-          },
-          "seed": 2019559783,
-          "strokeColor": "#1e1e1e",
-          "strokeStyle": "solid",
-          "strokeWidth": 1,
-          "type": "rectangle",
-          "updated": 1,
-          "version": 2,
-          "versionNonce": 1116226695,
-          "width": 10,
-          "x": 0,
-          "y": 30,
-        },
-        {
-          "angle": 0,
-          "backgroundColor": "transparent",
-          "boundElements": null,
-          "fillStyle": "hachure",
-          "frameId": null,
-          "groupIds": [
-            "id5",
-          ],
-          "height": 10,
-          "id": "id0",
-          "isDeleted": false,
-          "link": null,
-          "locked": false,
-          "opacity": 100,
-          "roughness": 1,
-          "roundness": {
-            "type": 3,
-          },
-          "seed": 1278240551,
-          "strokeColor": "#1e1e1e",
-          "strokeStyle": "solid",
-          "strokeWidth": 1,
-          "type": "rectangle",
-          "updated": 1,
-          "version": 3,
-          "versionNonce": 915032327,
-          "width": 10,
-          "x": 0,
-          "y": 0,
-        },
-        {
-          "angle": 0,
-          "backgroundColor": "transparent",
-          "boundElements": null,
-          "fillStyle": "hachure",
-          "frameId": null,
-          "groupIds": [
-            "id5",
-          ],
-          "height": 10,
-          "id": "id2",
-          "isDeleted": false,
-          "link": null,
-          "locked": false,
-          "opacity": 100,
-          "roughness": 1,
-          "roundness": {
-            "type": 3,
-          },
-          "seed": 238820263,
-          "strokeColor": "#1e1e1e",
-          "strokeStyle": "solid",
-          "strokeWidth": 1,
-          "type": "rectangle",
-          "updated": 1,
-          "version": 3,
-          "versionNonce": 81784553,
-          "width": 10,
-          "x": 0,
-          "y": 60,
+          "width": 100,
+          "x": 2560,
+          "y": 1900,
         },
       ],
     },
@@ -452,7 +341,7 @@ exports[`given element A and group of elements B and given both are selected whe
 
 exports[`given element A and group of elements B and given both are selected when user clicks on B, on pointer up only elements from B should be selected > [end of test] number of elements 1`] = `0`;
 
-exports[`given element A and group of elements B and given both are selected when user clicks on B, on pointer up only elements from B should be selected > [end of test] number of renders 1`] = `22`;
+exports[`given element A and group of elements B and given both are selected when user clicks on B, on pointer up only elements from B should be selected > [end of test] number of renders 1`] = `18`;
 
 exports[`given element A and group of elements B and given both are selected when user shift-clicks on B, on pointer up only element A should be selected > [end of test] appState 1`] = `
 {
@@ -528,9 +417,15 @@ exports[`given element A and group of elements B and given both are selected whe
     "id2": true,
   },
   "resizingElement": null,
-  "scrollConstraints": null,
-  "scrollX": 0,
-  "scrollY": 0,
+  "scrollConstraints": {
+    "height": 1300,
+    "lockZoom": false,
+    "width": 2560,
+    "x": 0,
+    "y": 0,
+  },
+  "scrollX": -2560,
+  "scrollY": -1300,
   "scrolledOutside": false,
   "selectedElementIds": {
     "id1": true,
@@ -557,7 +452,7 @@ exports[`given element A and group of elements B and given both are selected whe
   "width": 1024,
   "zenModeEnabled": false,
   "zoom": {
-    "value": 1,
+    "value": 0.1,
   },
 }
 `;
@@ -597,7 +492,7 @@ exports[`given element A and group of elements B and given both are selected whe
           "fillStyle": "hachure",
           "frameId": null,
           "groupIds": [],
-          "height": 100,
+          "height": 1000,
           "id": "id0",
           "isDeleted": false,
           "link": null,
@@ -615,9 +510,9 @@ exports[`given element A and group of elements B and given both are selected whe
           "updated": 1,
           "version": 2,
           "versionNonce": 453191,
-          "width": 100,
-          "x": 0,
-          "y": 0,
+          "width": 1000,
+          "x": 2560,
+          "y": 1300,
         },
       ],
     },
@@ -640,7 +535,7 @@ exports[`given element A and group of elements B and given both are selected whe
           "fillStyle": "hachure",
           "frameId": null,
           "groupIds": [],
-          "height": 100,
+          "height": 1000,
           "id": "id0",
           "isDeleted": false,
           "link": null,
@@ -658,9 +553,9 @@ exports[`given element A and group of elements B and given both are selected whe
           "updated": 1,
           "version": 2,
           "versionNonce": 453191,
-          "width": 100,
-          "x": 0,
-          "y": 0,
+          "width": 1000,
+          "x": 2560,
+          "y": 1300,
         },
         {
           "angle": 0,
@@ -669,7 +564,7 @@ exports[`given element A and group of elements B and given both are selected whe
           "fillStyle": "hachure",
           "frameId": null,
           "groupIds": [],
-          "height": 100,
+          "height": 1000,
           "id": "id1",
           "isDeleted": false,
           "link": null,
@@ -687,9 +582,9 @@ exports[`given element A and group of elements B and given both are selected whe
           "updated": 1,
           "version": 2,
           "versionNonce": 1116226695,
-          "width": 100,
-          "x": 110,
-          "y": 110,
+          "width": 1000,
+          "x": 3660,
+          "y": 2400,
         },
       ],
     },
@@ -712,7 +607,7 @@ exports[`given element A and group of elements B and given both are selected whe
           "fillStyle": "hachure",
           "frameId": null,
           "groupIds": [],
-          "height": 100,
+          "height": 1000,
           "id": "id0",
           "isDeleted": false,
           "link": null,
@@ -730,9 +625,9 @@ exports[`given element A and group of elements B and given both are selected whe
           "updated": 1,
           "version": 2,
           "versionNonce": 453191,
-          "width": 100,
-          "x": 0,
-          "y": 0,
+          "width": 1000,
+          "x": 2560,
+          "y": 1300,
         },
         {
           "angle": 0,
@@ -741,7 +636,7 @@ exports[`given element A and group of elements B and given both are selected whe
           "fillStyle": "hachure",
           "frameId": null,
           "groupIds": [],
-          "height": 100,
+          "height": 1000,
           "id": "id1",
           "isDeleted": false,
           "link": null,
@@ -759,9 +654,9 @@ exports[`given element A and group of elements B and given both are selected whe
           "updated": 1,
           "version": 2,
           "versionNonce": 1116226695,
-          "width": 100,
-          "x": 110,
-          "y": 110,
+          "width": 1000,
+          "x": 3660,
+          "y": 2400,
         },
         {
           "angle": 0,
@@ -770,7 +665,7 @@ exports[`given element A and group of elements B and given both are selected whe
           "fillStyle": "hachure",
           "frameId": null,
           "groupIds": [],
-          "height": 100,
+          "height": 1000,
           "id": "id2",
           "isDeleted": false,
           "link": null,
@@ -788,9 +683,9 @@ exports[`given element A and group of elements B and given both are selected whe
           "updated": 1,
           "version": 2,
           "versionNonce": 1604849351,
-          "width": 100,
-          "x": 220,
-          "y": 220,
+          "width": 1000,
+          "x": 4760,
+          "y": 3500,
         },
       ],
     },
@@ -816,7 +711,7 @@ exports[`given element A and group of elements B and given both are selected whe
           "fillStyle": "hachure",
           "frameId": null,
           "groupIds": [],
-          "height": 100,
+          "height": 1000,
           "id": "id1",
           "isDeleted": false,
           "link": null,
@@ -834,9 +729,9 @@ exports[`given element A and group of elements B and given both are selected whe
           "updated": 1,
           "version": 2,
           "versionNonce": 1116226695,
-          "width": 100,
-          "x": 110,
-          "y": 110,
+          "width": 1000,
+          "x": 3660,
+          "y": 2400,
         },
         {
           "angle": 0,
@@ -847,7 +742,7 @@ exports[`given element A and group of elements B and given both are selected whe
           "groupIds": [
             "id4",
           ],
-          "height": 100,
+          "height": 1000,
           "id": "id0",
           "isDeleted": false,
           "link": null,
@@ -865,9 +760,9 @@ exports[`given element A and group of elements B and given both are selected whe
           "updated": 1,
           "version": 3,
           "versionNonce": 493213705,
-          "width": 100,
-          "x": 0,
-          "y": 0,
+          "width": 1000,
+          "x": 2560,
+          "y": 1300,
         },
         {
           "angle": 0,
@@ -878,7 +773,7 @@ exports[`given element A and group of elements B and given both are selected whe
           "groupIds": [
             "id4",
           ],
-          "height": 100,
+          "height": 1000,
           "id": "id2",
           "isDeleted": false,
           "link": null,
@@ -896,9 +791,9 @@ exports[`given element A and group of elements B and given both are selected whe
           "updated": 1,
           "version": 3,
           "versionNonce": 915032327,
-          "width": 100,
-          "x": 220,
-          "y": 220,
+          "width": 1000,
+          "x": 4760,
+          "y": 3500,
         },
       ],
     },
@@ -940,7 +835,7 @@ exports[`regression tests > Cmd/Ctrl-click exclusively select element under poin
   "draggingElement": null,
   "editingElement": null,
   "editingFrame": null,
-  "editingGroupId": "id10",
+  "editingGroupId": null,
   "editingLinearElement": null,
   "elementsToHighlight": null,
   "errorMessage": null,
@@ -958,7 +853,7 @@ exports[`regression tests > Cmd/Ctrl-click exclusively select element under poin
   "frameToHighlight": null,
   "gridSize": null,
   "height": 768,
-  "isBindingEnabled": false,
+  "isBindingEnabled": true,
   "isLoading": false,
   "isResizing": false,
   "isRotating": false,
@@ -980,13 +875,17 @@ exports[`regression tests > Cmd/Ctrl-click exclusively select element under poin
   "pendingImageElementId": null,
   "previousSelectedElementIds": {},
   "resizingElement": null,
-  "scrollConstraints": null,
-  "scrollX": 0,
-  "scrollY": 0,
-  "scrolledOutside": false,
-  "selectedElementIds": {
-    "id7": true,
+  "scrollConstraints": {
+    "height": 1300,
+    "lockZoom": false,
+    "width": 2560,
+    "x": 0,
+    "y": 0,
   },
+  "scrollX": -2560,
+  "scrollY": -1300,
+  "scrolledOutside": false,
+  "selectedElementIds": {},
   "selectedElementsAreBeingDragged": false,
   "selectedGroupIds": {},
   "selectedLinearElement": null,
@@ -1004,7 +903,7 @@ exports[`regression tests > Cmd/Ctrl-click exclusively select element under poin
   "width": 1024,
   "zenModeEnabled": false,
   "zoom": {
-    "value": 1,
+    "value": 0.1,
   },
 }
 `;
@@ -1044,7 +943,7 @@ exports[`regression tests > Cmd/Ctrl-click exclusively select element under poin
           "fillStyle": "hachure",
           "frameId": null,
           "groupIds": [],
-          "height": 10,
+          "height": 100,
           "id": "id0",
           "isDeleted": false,
           "link": null,
@@ -1062,9 +961,9 @@ exports[`regression tests > Cmd/Ctrl-click exclusively select element under poin
           "updated": 1,
           "version": 2,
           "versionNonce": 453191,
-          "width": 10,
-          "x": 0,
-          "y": 0,
+          "width": 100,
+          "x": 2560,
+          "y": 1300,
         },
       ],
     },
@@ -1087,7 +986,7 @@ exports[`regression tests > Cmd/Ctrl-click exclusively select element under poin
           "fillStyle": "hachure",
           "frameId": null,
           "groupIds": [],
-          "height": 10,
+          "height": 100,
           "id": "id0",
           "isDeleted": false,
           "link": null,
@@ -1105,9 +1004,9 @@ exports[`regression tests > Cmd/Ctrl-click exclusively select element under poin
           "updated": 1,
           "version": 2,
           "versionNonce": 453191,
-          "width": 10,
-          "x": 0,
-          "y": 0,
+          "width": 100,
+          "x": 2560,
+          "y": 1300,
         },
         {
           "angle": 0,
@@ -1116,7 +1015,7 @@ exports[`regression tests > Cmd/Ctrl-click exclusively select element under poin
           "fillStyle": "hachure",
           "frameId": null,
           "groupIds": [],
-          "height": 10,
+          "height": 100,
           "id": "id1",
           "isDeleted": false,
           "link": null,
@@ -1134,600 +1033,9 @@ exports[`regression tests > Cmd/Ctrl-click exclusively select element under poin
           "updated": 1,
           "version": 2,
           "versionNonce": 1116226695,
-          "width": 10,
-          "x": 30,
-          "y": 0,
-        },
-      ],
-    },
-    {
-      "appState": {
-        "editingGroupId": null,
-        "editingLinearElement": null,
-        "name": "Untitled-201933152653",
-        "selectedElementIds": {
-          "id0": true,
-          "id1": true,
-        },
-        "selectedGroupIds": {
-          "id4": true,
-        },
-        "viewBackgroundColor": "#ffffff",
-      },
-      "elements": [
-        {
-          "angle": 0,
-          "backgroundColor": "transparent",
-          "boundElements": null,
-          "fillStyle": "hachure",
-          "frameId": null,
-          "groupIds": [
-            "id4",
-          ],
-          "height": 10,
-          "id": "id0",
-          "isDeleted": false,
-          "link": null,
-          "locked": false,
-          "opacity": 100,
-          "roughness": 1,
-          "roundness": {
-            "type": 3,
-          },
-          "seed": 1278240551,
-          "strokeColor": "#1e1e1e",
-          "strokeStyle": "solid",
-          "strokeWidth": 1,
-          "type": "rectangle",
-          "updated": 1,
-          "version": 3,
-          "versionNonce": 1604849351,
-          "width": 10,
-          "x": 0,
-          "y": 0,
-        },
-        {
-          "angle": 0,
-          "backgroundColor": "transparent",
-          "boundElements": null,
-          "fillStyle": "hachure",
-          "frameId": null,
-          "groupIds": [
-            "id4",
-          ],
-          "height": 10,
-          "id": "id1",
-          "isDeleted": false,
-          "link": null,
-          "locked": false,
-          "opacity": 100,
-          "roughness": 1,
-          "roundness": {
-            "type": 3,
-          },
-          "seed": 2019559783,
-          "strokeColor": "#1e1e1e",
-          "strokeStyle": "solid",
-          "strokeWidth": 1,
-          "type": "rectangle",
-          "updated": 1,
-          "version": 3,
-          "versionNonce": 1505387817,
-          "width": 10,
-          "x": 30,
-          "y": 0,
-        },
-      ],
-    },
-    {
-      "appState": {
-        "editingGroupId": "id4",
-        "editingLinearElement": null,
-        "name": "Untitled-201933152653",
-        "selectedElementIds": {
-          "id0": true,
-        },
-        "selectedGroupIds": {},
-        "viewBackgroundColor": "#ffffff",
-      },
-      "elements": [
-        {
-          "angle": 0,
-          "backgroundColor": "transparent",
-          "boundElements": null,
-          "fillStyle": "hachure",
-          "frameId": null,
-          "groupIds": [
-            "id4",
-          ],
-          "height": 10,
-          "id": "id0",
-          "isDeleted": false,
-          "link": null,
-          "locked": false,
-          "opacity": 100,
-          "roughness": 1,
-          "roundness": {
-            "type": 3,
-          },
-          "seed": 1278240551,
-          "strokeColor": "#1e1e1e",
-          "strokeStyle": "solid",
-          "strokeWidth": 1,
-          "type": "rectangle",
-          "updated": 1,
-          "version": 3,
-          "versionNonce": 1604849351,
-          "width": 10,
-          "x": 0,
-          "y": 0,
-        },
-        {
-          "angle": 0,
-          "backgroundColor": "transparent",
-          "boundElements": null,
-          "fillStyle": "hachure",
-          "frameId": null,
-          "groupIds": [
-            "id4",
-          ],
-          "height": 10,
-          "id": "id1",
-          "isDeleted": false,
-          "link": null,
-          "locked": false,
-          "opacity": 100,
-          "roughness": 1,
-          "roundness": {
-            "type": 3,
-          },
-          "seed": 2019559783,
-          "strokeColor": "#1e1e1e",
-          "strokeStyle": "solid",
-          "strokeWidth": 1,
-          "type": "rectangle",
-          "updated": 1,
-          "version": 3,
-          "versionNonce": 1505387817,
-          "width": 10,
-          "x": 30,
-          "y": 0,
-        },
-      ],
-    },
-    {
-      "appState": {
-        "editingGroupId": null,
-        "editingLinearElement": null,
-        "name": "Untitled-201933152653",
-        "selectedElementIds": {
-          "id7": true,
-        },
-        "selectedGroupIds": {},
-        "viewBackgroundColor": "#ffffff",
-      },
-      "elements": [
-        {
-          "angle": 0,
-          "backgroundColor": "transparent",
-          "boundElements": null,
-          "fillStyle": "hachure",
-          "frameId": null,
-          "groupIds": [
-            "id4",
-          ],
-          "height": 10,
-          "id": "id0",
-          "isDeleted": false,
-          "link": null,
-          "locked": false,
-          "opacity": 100,
-          "roughness": 1,
-          "roundness": {
-            "type": 3,
-          },
-          "seed": 1278240551,
-          "strokeColor": "#1e1e1e",
-          "strokeStyle": "solid",
-          "strokeWidth": 1,
-          "type": "rectangle",
-          "updated": 1,
-          "version": 3,
-          "versionNonce": 1604849351,
-          "width": 10,
-          "x": 0,
-          "y": 0,
-        },
-        {
-          "angle": 0,
-          "backgroundColor": "transparent",
-          "boundElements": null,
-          "fillStyle": "hachure",
-          "frameId": null,
-          "groupIds": [
-            "id4",
-          ],
-          "height": 10,
-          "id": "id1",
-          "isDeleted": false,
-          "link": null,
-          "locked": false,
-          "opacity": 100,
-          "roughness": 1,
-          "roundness": {
-            "type": 3,
-          },
-          "seed": 2019559783,
-          "strokeColor": "#1e1e1e",
-          "strokeStyle": "solid",
-          "strokeWidth": 1,
-          "type": "rectangle",
-          "updated": 1,
-          "version": 3,
-          "versionNonce": 1505387817,
-          "width": 10,
-          "x": 30,
-          "y": 0,
-        },
-        {
-          "angle": 0,
-          "backgroundColor": "transparent",
-          "boundElements": null,
-          "fillStyle": "hachure",
-          "frameId": null,
-          "groupIds": [],
-          "height": 10,
-          "id": "id7",
-          "isDeleted": false,
-          "link": null,
-          "locked": false,
-          "opacity": 100,
-          "roughness": 1,
-          "roundness": {
-            "type": 3,
-          },
-          "seed": 81784553,
-          "strokeColor": "#1e1e1e",
-          "strokeStyle": "solid",
-          "strokeWidth": 1,
-          "type": "rectangle",
-          "updated": 1,
-          "version": 2,
-          "versionNonce": 1723083209,
-          "width": 10,
-          "x": 60,
-          "y": 0,
-        },
-      ],
-    },
-    {
-      "appState": {
-        "editingGroupId": null,
-        "editingLinearElement": null,
-        "name": "Untitled-201933152653",
-        "selectedElementIds": {
-          "id0": true,
-          "id1": true,
-          "id7": true,
-        },
-        "selectedGroupIds": {
-          "id10": true,
-        },
-        "viewBackgroundColor": "#ffffff",
-      },
-      "elements": [
-        {
-          "angle": 0,
-          "backgroundColor": "transparent",
-          "boundElements": null,
-          "fillStyle": "hachure",
-          "frameId": null,
-          "groupIds": [
-            "id4",
-            "id10",
-          ],
-          "height": 10,
-          "id": "id0",
-          "isDeleted": false,
-          "link": null,
-          "locked": false,
-          "opacity": 100,
-          "roughness": 1,
-          "roundness": {
-            "type": 3,
-          },
-          "seed": 1278240551,
-          "strokeColor": "#1e1e1e",
-          "strokeStyle": "solid",
-          "strokeWidth": 1,
-          "type": "rectangle",
-          "updated": 1,
-          "version": 4,
-          "versionNonce": 1315507081,
-          "width": 10,
-          "x": 0,
-          "y": 0,
-        },
-        {
-          "angle": 0,
-          "backgroundColor": "transparent",
-          "boundElements": null,
-          "fillStyle": "hachure",
-          "frameId": null,
-          "groupIds": [
-            "id4",
-            "id10",
-          ],
-          "height": 10,
-          "id": "id1",
-          "isDeleted": false,
-          "link": null,
-          "locked": false,
-          "opacity": 100,
-          "roughness": 1,
-          "roundness": {
-            "type": 3,
-          },
-          "seed": 2019559783,
-          "strokeColor": "#1e1e1e",
-          "strokeStyle": "solid",
-          "strokeWidth": 1,
-          "type": "rectangle",
-          "updated": 1,
-          "version": 4,
-          "versionNonce": 1898319239,
-          "width": 10,
-          "x": 30,
-          "y": 0,
-        },
-        {
-          "angle": 0,
-          "backgroundColor": "transparent",
-          "boundElements": null,
-          "fillStyle": "hachure",
-          "frameId": null,
-          "groupIds": [
-            "id10",
-          ],
-          "height": 10,
-          "id": "id7",
-          "isDeleted": false,
-          "link": null,
-          "locked": false,
-          "opacity": 100,
-          "roughness": 1,
-          "roundness": {
-            "type": 3,
-          },
-          "seed": 81784553,
-          "strokeColor": "#1e1e1e",
-          "strokeStyle": "solid",
-          "strokeWidth": 1,
-          "type": "rectangle",
-          "updated": 1,
-          "version": 3,
-          "versionNonce": 640725609,
-          "width": 10,
-          "x": 60,
-          "y": 0,
-        },
-      ],
-    },
-    {
-      "appState": {
-        "editingGroupId": "id4",
-        "editingLinearElement": null,
-        "name": "Untitled-201933152653",
-        "selectedElementIds": {
-          "id0": true,
-        },
-        "selectedGroupIds": {},
-        "viewBackgroundColor": "#ffffff",
-      },
-      "elements": [
-        {
-          "angle": 0,
-          "backgroundColor": "transparent",
-          "boundElements": null,
-          "fillStyle": "hachure",
-          "frameId": null,
-          "groupIds": [
-            "id4",
-            "id10",
-          ],
-          "height": 10,
-          "id": "id0",
-          "isDeleted": false,
-          "link": null,
-          "locked": false,
-          "opacity": 100,
-          "roughness": 1,
-          "roundness": {
-            "type": 3,
-          },
-          "seed": 1278240551,
-          "strokeColor": "#1e1e1e",
-          "strokeStyle": "solid",
-          "strokeWidth": 1,
-          "type": "rectangle",
-          "updated": 1,
-          "version": 4,
-          "versionNonce": 1315507081,
-          "width": 10,
-          "x": 0,
-          "y": 0,
-        },
-        {
-          "angle": 0,
-          "backgroundColor": "transparent",
-          "boundElements": null,
-          "fillStyle": "hachure",
-          "frameId": null,
-          "groupIds": [
-            "id4",
-            "id10",
-          ],
-          "height": 10,
-          "id": "id1",
-          "isDeleted": false,
-          "link": null,
-          "locked": false,
-          "opacity": 100,
-          "roughness": 1,
-          "roundness": {
-            "type": 3,
-          },
-          "seed": 2019559783,
-          "strokeColor": "#1e1e1e",
-          "strokeStyle": "solid",
-          "strokeWidth": 1,
-          "type": "rectangle",
-          "updated": 1,
-          "version": 4,
-          "versionNonce": 1898319239,
-          "width": 10,
-          "x": 30,
-          "y": 0,
-        },
-        {
-          "angle": 0,
-          "backgroundColor": "transparent",
-          "boundElements": null,
-          "fillStyle": "hachure",
-          "frameId": null,
-          "groupIds": [
-            "id10",
-          ],
-          "height": 10,
-          "id": "id7",
-          "isDeleted": false,
-          "link": null,
-          "locked": false,
-          "opacity": 100,
-          "roughness": 1,
-          "roundness": {
-            "type": 3,
-          },
-          "seed": 81784553,
-          "strokeColor": "#1e1e1e",
-          "strokeStyle": "solid",
-          "strokeWidth": 1,
-          "type": "rectangle",
-          "updated": 1,
-          "version": 3,
-          "versionNonce": 640725609,
-          "width": 10,
-          "x": 60,
-          "y": 0,
-        },
-      ],
-    },
-    {
-      "appState": {
-        "editingGroupId": "id10",
-        "editingLinearElement": null,
-        "name": "Untitled-201933152653",
-        "selectedElementIds": {
-          "id7": true,
-        },
-        "selectedGroupIds": {},
-        "viewBackgroundColor": "#ffffff",
-      },
-      "elements": [
-        {
-          "angle": 0,
-          "backgroundColor": "transparent",
-          "boundElements": null,
-          "fillStyle": "hachure",
-          "frameId": null,
-          "groupIds": [
-            "id4",
-            "id10",
-          ],
-          "height": 10,
-          "id": "id0",
-          "isDeleted": false,
-          "link": null,
-          "locked": false,
-          "opacity": 100,
-          "roughness": 1,
-          "roundness": {
-            "type": 3,
-          },
-          "seed": 1278240551,
-          "strokeColor": "#1e1e1e",
-          "strokeStyle": "solid",
-          "strokeWidth": 1,
-          "type": "rectangle",
-          "updated": 1,
-          "version": 4,
-          "versionNonce": 1315507081,
-          "width": 10,
-          "x": 0,
-          "y": 0,
-        },
-        {
-          "angle": 0,
-          "backgroundColor": "transparent",
-          "boundElements": null,
-          "fillStyle": "hachure",
-          "frameId": null,
-          "groupIds": [
-            "id4",
-            "id10",
-          ],
-          "height": 10,
-          "id": "id1",
-          "isDeleted": false,
-          "link": null,
-          "locked": false,
-          "opacity": 100,
-          "roughness": 1,
-          "roundness": {
-            "type": 3,
-          },
-          "seed": 2019559783,
-          "strokeColor": "#1e1e1e",
-          "strokeStyle": "solid",
-          "strokeWidth": 1,
-          "type": "rectangle",
-          "updated": 1,
-          "version": 4,
-          "versionNonce": 1898319239,
-          "width": 10,
-          "x": 30,
-          "y": 0,
-        },
-        {
-          "angle": 0,
-          "backgroundColor": "transparent",
-          "boundElements": null,
-          "fillStyle": "hachure",
-          "frameId": null,
-          "groupIds": [
-            "id10",
-          ],
-          "height": 10,
-          "id": "id7",
-          "isDeleted": false,
-          "link": null,
-          "locked": false,
-          "opacity": 100,
-          "roughness": 1,
-          "roundness": {
-            "type": 3,
-          },
-          "seed": 81784553,
-          "strokeColor": "#1e1e1e",
-          "strokeStyle": "solid",
-          "strokeWidth": 1,
-          "type": "rectangle",
-          "updated": 1,
-          "version": 3,
-          "versionNonce": 640725609,
-          "width": 10,
-          "x": 60,
-          "y": 0,
+          "width": 100,
+          "x": 2860,
+          "y": 1300,
         },
       ],
     },
@@ -1737,7 +1045,7 @@ exports[`regression tests > Cmd/Ctrl-click exclusively select element under poin
 
 exports[`regression tests > Cmd/Ctrl-click exclusively select element under pointer > [end of test] number of elements 1`] = `0`;
 
-exports[`regression tests > Cmd/Ctrl-click exclusively select element under pointer > [end of test] number of renders 1`] = `30`;
+exports[`regression tests > Cmd/Ctrl-click exclusively select element under pointer > [end of test] number of renders 1`] = `14`;
 
 exports[`regression tests > Drags selected element when hitting only bounding box and keeps element selected > [end of test] appState 1`] = `
 {
@@ -1811,9 +1119,15 @@ exports[`regression tests > Drags selected element when hitting only bounding bo
     "id0": true,
   },
   "resizingElement": null,
-  "scrollConstraints": null,
-  "scrollX": 0,
-  "scrollY": 0,
+  "scrollConstraints": {
+    "height": 1300,
+    "lockZoom": false,
+    "width": 2560,
+    "x": 0,
+    "y": 0,
+  },
+  "scrollX": -2560,
+  "scrollY": -1300,
   "scrolledOutside": false,
   "selectedElementIds": {
     "id0": true,
@@ -1835,7 +1149,7 @@ exports[`regression tests > Drags selected element when hitting only bounding bo
   "width": 1024,
   "zenModeEnabled": false,
   "zoom": {
-    "value": 1,
+    "value": 0.1,
   },
 }
 `;
@@ -1875,7 +1189,7 @@ exports[`regression tests > Drags selected element when hitting only bounding bo
           "fillStyle": "hachure",
           "frameId": null,
           "groupIds": [],
-          "height": 10,
+          "height": 100,
           "id": "id0",
           "isDeleted": false,
           "link": null,
@@ -1893,9 +1207,9 @@ exports[`regression tests > Drags selected element when hitting only bounding bo
           "updated": 1,
           "version": 2,
           "versionNonce": 453191,
-          "width": 10,
-          "x": 0,
-          "y": 0,
+          "width": 100,
+          "x": 2560,
+          "y": 1300,
         },
       ],
     },
@@ -1918,7 +1232,7 @@ exports[`regression tests > Drags selected element when hitting only bounding bo
           "fillStyle": "hachure",
           "frameId": null,
           "groupIds": [],
-          "height": 10,
+          "height": 100,
           "id": "id0",
           "isDeleted": false,
           "link": null,
@@ -1936,9 +1250,9 @@ exports[`regression tests > Drags selected element when hitting only bounding bo
           "updated": 1,
           "version": 3,
           "versionNonce": 1150084233,
-          "width": 10,
-          "x": 25,
-          "y": 25,
+          "width": 100,
+          "x": 2810,
+          "y": 1550,
         },
       ],
     },
@@ -2022,9 +1336,15 @@ exports[`regression tests > adjusts z order when grouping > [end of test] appSta
     "id0": true,
   },
   "resizingElement": null,
-  "scrollConstraints": null,
-  "scrollX": 0,
-  "scrollY": 0,
+  "scrollConstraints": {
+    "height": 1300,
+    "lockZoom": false,
+    "width": 2560,
+    "x": 0,
+    "y": 0,
+  },
+  "scrollX": -2560,
+  "scrollY": -1300,
   "scrolledOutside": false,
   "selectedElementIds": {
     "id0": true,
@@ -2049,7 +1369,7 @@ exports[`regression tests > adjusts z order when grouping > [end of test] appSta
   "width": 1024,
   "zenModeEnabled": false,
   "zoom": {
-    "value": 1,
+    "value": 0.1,
   },
 }
 `;
@@ -2089,7 +1409,7 @@ exports[`regression tests > adjusts z order when grouping > [end of test] histor
           "fillStyle": "hachure",
           "frameId": null,
           "groupIds": [],
-          "height": 10,
+          "height": 100,
           "id": "id0",
           "isDeleted": false,
           "link": null,
@@ -2107,9 +1427,9 @@ exports[`regression tests > adjusts z order when grouping > [end of test] histor
           "updated": 1,
           "version": 2,
           "versionNonce": 453191,
-          "width": 10,
-          "x": 10,
-          "y": 10,
+          "width": 100,
+          "x": 2660,
+          "y": 1400,
         },
       ],
     },
@@ -2132,7 +1452,7 @@ exports[`regression tests > adjusts z order when grouping > [end of test] histor
           "fillStyle": "hachure",
           "frameId": null,
           "groupIds": [],
-          "height": 10,
+          "height": 100,
           "id": "id0",
           "isDeleted": false,
           "link": null,
@@ -2150,9 +1470,9 @@ exports[`regression tests > adjusts z order when grouping > [end of test] histor
           "updated": 1,
           "version": 2,
           "versionNonce": 453191,
-          "width": 10,
-          "x": 10,
-          "y": 10,
+          "width": 100,
+          "x": 2660,
+          "y": 1400,
         },
         {
           "angle": 0,
@@ -2161,7 +1481,7 @@ exports[`regression tests > adjusts z order when grouping > [end of test] histor
           "fillStyle": "hachure",
           "frameId": null,
           "groupIds": [],
-          "height": 10,
+          "height": 100,
           "id": "id1",
           "isDeleted": false,
           "link": null,
@@ -2179,9 +1499,9 @@ exports[`regression tests > adjusts z order when grouping > [end of test] histor
           "updated": 1,
           "version": 2,
           "versionNonce": 1116226695,
-          "width": 10,
-          "x": 30,
-          "y": 10,
+          "width": 100,
+          "x": 2860,
+          "y": 1400,
         },
       ],
     },
@@ -2204,7 +1524,7 @@ exports[`regression tests > adjusts z order when grouping > [end of test] histor
           "fillStyle": "hachure",
           "frameId": null,
           "groupIds": [],
-          "height": 10,
+          "height": 100,
           "id": "id0",
           "isDeleted": false,
           "link": null,
@@ -2222,9 +1542,9 @@ exports[`regression tests > adjusts z order when grouping > [end of test] histor
           "updated": 1,
           "version": 2,
           "versionNonce": 453191,
-          "width": 10,
-          "x": 10,
-          "y": 10,
+          "width": 100,
+          "x": 2660,
+          "y": 1400,
         },
         {
           "angle": 0,
@@ -2233,7 +1553,7 @@ exports[`regression tests > adjusts z order when grouping > [end of test] histor
           "fillStyle": "hachure",
           "frameId": null,
           "groupIds": [],
-          "height": 10,
+          "height": 100,
           "id": "id1",
           "isDeleted": false,
           "link": null,
@@ -2251,9 +1571,9 @@ exports[`regression tests > adjusts z order when grouping > [end of test] histor
           "updated": 1,
           "version": 2,
           "versionNonce": 1116226695,
-          "width": 10,
-          "x": 30,
-          "y": 10,
+          "width": 100,
+          "x": 2860,
+          "y": 1400,
         },
         {
           "angle": 0,
@@ -2262,7 +1582,7 @@ exports[`regression tests > adjusts z order when grouping > [end of test] histor
           "fillStyle": "hachure",
           "frameId": null,
           "groupIds": [],
-          "height": 10,
+          "height": 100,
           "id": "id2",
           "isDeleted": false,
           "link": null,
@@ -2280,9 +1600,9 @@ exports[`regression tests > adjusts z order when grouping > [end of test] histor
           "updated": 1,
           "version": 2,
           "versionNonce": 1604849351,
-          "width": 10,
-          "x": 50,
-          "y": 10,
+          "width": 100,
+          "x": 3060,
+          "y": 1400,
         },
       ],
     },
@@ -2308,7 +1628,7 @@ exports[`regression tests > adjusts z order when grouping > [end of test] histor
           "fillStyle": "hachure",
           "frameId": null,
           "groupIds": [],
-          "height": 10,
+          "height": 100,
           "id": "id1",
           "isDeleted": false,
           "link": null,
@@ -2326,9 +1646,9 @@ exports[`regression tests > adjusts z order when grouping > [end of test] histor
           "updated": 1,
           "version": 2,
           "versionNonce": 1116226695,
-          "width": 10,
-          "x": 30,
-          "y": 10,
+          "width": 100,
+          "x": 2860,
+          "y": 1400,
         },
         {
           "angle": 0,
@@ -2339,7 +1659,7 @@ exports[`regression tests > adjusts z order when grouping > [end of test] histor
           "groupIds": [
             "id5",
           ],
-          "height": 10,
+          "height": 100,
           "id": "id0",
           "isDeleted": false,
           "link": null,
@@ -2357,9 +1677,9 @@ exports[`regression tests > adjusts z order when grouping > [end of test] histor
           "updated": 1,
           "version": 3,
           "versionNonce": 915032327,
-          "width": 10,
-          "x": 10,
-          "y": 10,
+          "width": 100,
+          "x": 2660,
+          "y": 1400,
         },
         {
           "angle": 0,
@@ -2370,7 +1690,7 @@ exports[`regression tests > adjusts z order when grouping > [end of test] histor
           "groupIds": [
             "id5",
           ],
-          "height": 10,
+          "height": 100,
           "id": "id2",
           "isDeleted": false,
           "link": null,
@@ -2388,9 +1708,9 @@ exports[`regression tests > adjusts z order when grouping > [end of test] histor
           "updated": 1,
           "version": 3,
           "versionNonce": 81784553,
-          "width": 10,
-          "x": 50,
-          "y": 10,
+          "width": 100,
+          "x": 3060,
+          "y": 1400,
         },
       ],
     },
@@ -2474,9 +1794,15 @@ exports[`regression tests > alt-drag duplicates an element > [end of test] appSt
     "id0": true,
   },
   "resizingElement": null,
-  "scrollConstraints": null,
-  "scrollX": 0,
-  "scrollY": 0,
+  "scrollConstraints": {
+    "height": 1300,
+    "lockZoom": false,
+    "width": 2560,
+    "x": 0,
+    "y": 0,
+  },
+  "scrollX": -2560,
+  "scrollY": -1300,
   "scrolledOutside": false,
   "selectedElementIds": {
     "id0": true,
@@ -2498,7 +1824,7 @@ exports[`regression tests > alt-drag duplicates an element > [end of test] appSt
   "width": 1024,
   "zenModeEnabled": false,
   "zoom": {
-    "value": 1,
+    "value": 0.1,
   },
 }
 `;
@@ -2538,7 +1864,7 @@ exports[`regression tests > alt-drag duplicates an element > [end of test] histo
           "fillStyle": "hachure",
           "frameId": null,
           "groupIds": [],
-          "height": 10,
+          "height": 100,
           "id": "id0",
           "isDeleted": false,
           "link": null,
@@ -2556,9 +1882,9 @@ exports[`regression tests > alt-drag duplicates an element > [end of test] histo
           "updated": 1,
           "version": 2,
           "versionNonce": 453191,
-          "width": 10,
-          "x": 10,
-          "y": 10,
+          "width": 100,
+          "x": 2660,
+          "y": 1400,
         },
       ],
     },
@@ -2581,7 +1907,7 @@ exports[`regression tests > alt-drag duplicates an element > [end of test] histo
           "fillStyle": "hachure",
           "frameId": null,
           "groupIds": [],
-          "height": 10,
+          "height": 100,
           "id": "id0_copy",
           "isDeleted": false,
           "link": null,
@@ -2599,9 +1925,9 @@ exports[`regression tests > alt-drag duplicates an element > [end of test] histo
           "updated": 1,
           "version": 4,
           "versionNonce": 238820263,
-          "width": 10,
-          "x": 10,
-          "y": 10,
+          "width": 100,
+          "x": 2660,
+          "y": 1400,
         },
         {
           "angle": 0,
@@ -2610,7 +1936,7 @@ exports[`regression tests > alt-drag duplicates an element > [end of test] histo
           "fillStyle": "hachure",
           "frameId": null,
           "groupIds": [],
-          "height": 10,
+          "height": 100,
           "id": "id0",
           "isDeleted": false,
           "link": null,
@@ -2628,9 +1954,9 @@ exports[`regression tests > alt-drag duplicates an element > [end of test] histo
           "updated": 1,
           "version": 3,
           "versionNonce": 1150084233,
-          "width": 10,
-          "x": 20,
-          "y": 20,
+          "width": 100,
+          "x": 2760,
+          "y": 1500,
         },
       ],
     },
@@ -2712,9 +2038,15 @@ exports[`regression tests > arrow keys > [end of test] appState 1`] = `
   "pendingImageElementId": null,
   "previousSelectedElementIds": {},
   "resizingElement": null,
-  "scrollConstraints": null,
-  "scrollX": 0,
-  "scrollY": 0,
+  "scrollConstraints": {
+    "height": 1300,
+    "lockZoom": false,
+    "width": 2560,
+    "x": 0,
+    "y": 0,
+  },
+  "scrollX": -2560,
+  "scrollY": -1300,
   "scrolledOutside": false,
   "selectedElementIds": {
     "id0": true,
@@ -2736,7 +2068,7 @@ exports[`regression tests > arrow keys > [end of test] appState 1`] = `
   "width": 1024,
   "zenModeEnabled": false,
   "zoom": {
-    "value": 1,
+    "value": 0.1,
   },
 }
 `;
@@ -2776,7 +2108,7 @@ exports[`regression tests > arrow keys > [end of test] history 1`] = `
           "fillStyle": "hachure",
           "frameId": null,
           "groupIds": [],
-          "height": 10,
+          "height": 100,
           "id": "id0",
           "isDeleted": false,
           "link": null,
@@ -2794,9 +2126,9 @@ exports[`regression tests > arrow keys > [end of test] history 1`] = `
           "updated": 1,
           "version": 2,
           "versionNonce": 453191,
-          "width": 10,
-          "x": 10,
-          "y": 10,
+          "width": 100,
+          "x": 2660,
+          "y": 1400,
         },
       ],
     },
@@ -2880,9 +2212,15 @@ exports[`regression tests > can drag element that covers another element, while
     "id2": true,
   },
   "resizingElement": null,
-  "scrollConstraints": null,
-  "scrollX": 0,
-  "scrollY": 0,
+  "scrollConstraints": {
+    "height": 1300,
+    "lockZoom": false,
+    "width": 2560,
+    "x": 0,
+    "y": 0,
+  },
+  "scrollX": -2560,
+  "scrollY": -1300,
   "scrolledOutside": false,
   "selectedElementIds": {
     "id1": true,
@@ -2904,7 +2242,7 @@ exports[`regression tests > can drag element that covers another element, while
   "width": 1024,
   "zenModeEnabled": false,
   "zoom": {
-    "value": 1,
+    "value": 0.1,
   },
 }
 `;
@@ -2944,7 +2282,7 @@ exports[`regression tests > can drag element that covers another element, while
           "fillStyle": "hachure",
           "frameId": null,
           "groupIds": [],
-          "height": 200,
+          "height": 2000,
           "id": "id0",
           "isDeleted": false,
           "link": null,
@@ -2962,9 +2300,9 @@ exports[`regression tests > can drag element that covers another element, while
           "updated": 1,
           "version": 2,
           "versionNonce": 453191,
-          "width": 200,
-          "x": 100,
-          "y": 100,
+          "width": 2000,
+          "x": 3560,
+          "y": 2300,
         },
       ],
     },
@@ -2987,7 +2325,7 @@ exports[`regression tests > can drag element that covers another element, while
           "fillStyle": "hachure",
           "frameId": null,
           "groupIds": [],
-          "height": 200,
+          "height": 2000,
           "id": "id0",
           "isDeleted": false,
           "link": null,
@@ -3005,9 +2343,9 @@ exports[`regression tests > can drag element that covers another element, while
           "updated": 1,
           "version": 2,
           "versionNonce": 453191,
-          "width": 200,
-          "x": 100,
-          "y": 100,
+          "width": 2000,
+          "x": 3560,
+          "y": 2300,
         },
         {
           "angle": 0,
@@ -3016,7 +2354,7 @@ exports[`regression tests > can drag element that covers another element, while
           "fillStyle": "hachure",
           "frameId": null,
           "groupIds": [],
-          "height": 200,
+          "height": 2000,
           "id": "id1",
           "isDeleted": false,
           "link": null,
@@ -3034,9 +2372,9 @@ exports[`regression tests > can drag element that covers another element, while
           "updated": 1,
           "version": 2,
           "versionNonce": 1116226695,
-          "width": 200,
-          "x": 100,
-          "y": 100,
+          "width": 2000,
+          "x": 3560,
+          "y": 2300,
         },
       ],
     },
@@ -3059,7 +2397,7 @@ exports[`regression tests > can drag element that covers another element, while
           "fillStyle": "hachure",
           "frameId": null,
           "groupIds": [],
-          "height": 200,
+          "height": 2000,
           "id": "id0",
           "isDeleted": false,
           "link": null,
@@ -3077,9 +2415,9 @@ exports[`regression tests > can drag element that covers another element, while
           "updated": 1,
           "version": 2,
           "versionNonce": 453191,
-          "width": 200,
-          "x": 100,
-          "y": 100,
+          "width": 2000,
+          "x": 3560,
+          "y": 2300,
         },
         {
           "angle": 0,
@@ -3088,7 +2426,7 @@ exports[`regression tests > can drag element that covers another element, while
           "fillStyle": "hachure",
           "frameId": null,
           "groupIds": [],
-          "height": 200,
+          "height": 2000,
           "id": "id1",
           "isDeleted": false,
           "link": null,
@@ -3106,9 +2444,9 @@ exports[`regression tests > can drag element that covers another element, while
           "updated": 1,
           "version": 2,
           "versionNonce": 1116226695,
-          "width": 200,
-          "x": 100,
-          "y": 100,
+          "width": 2000,
+          "x": 3560,
+          "y": 2300,
         },
         {
           "angle": 0,
@@ -3117,7 +2455,7 @@ exports[`regression tests > can drag element that covers another element, while
           "fillStyle": "hachure",
           "frameId": null,
           "groupIds": [],
-          "height": 350,
+          "height": 3500,
           "id": "id2",
           "isDeleted": false,
           "link": null,
@@ -3135,9 +2473,9 @@ exports[`regression tests > can drag element that covers another element, while
           "updated": 1,
           "version": 2,
           "versionNonce": 1604849351,
-          "width": 350,
-          "x": 300,
-          "y": 300,
+          "width": 3500,
+          "x": 5560,
+          "y": 4300,
         },
       ],
     },
@@ -3160,7 +2498,7 @@ exports[`regression tests > can drag element that covers another element, while
           "fillStyle": "hachure",
           "frameId": null,
           "groupIds": [],
-          "height": 200,
+          "height": 2000,
           "id": "id0",
           "isDeleted": false,
           "link": null,
@@ -3178,9 +2516,9 @@ exports[`regression tests > can drag element that covers another element, while
           "updated": 1,
           "version": 2,
           "versionNonce": 453191,
-          "width": 200,
-          "x": 100,
-          "y": 100,
+          "width": 2000,
+          "x": 3560,
+          "y": 2300,
         },
         {
           "angle": 0,
@@ -3189,7 +2527,7 @@ exports[`regression tests > can drag element that covers another element, while
           "fillStyle": "hachure",
           "frameId": null,
           "groupIds": [],
-          "height": 200,
+          "height": 2000,
           "id": "id1",
           "isDeleted": false,
           "link": null,
@@ -3207,9 +2545,9 @@ exports[`regression tests > can drag element that covers another element, while
           "updated": 1,
           "version": 3,
           "versionNonce": 493213705,
-          "width": 200,
-          "x": 300,
-          "y": 300,
+          "width": 2000,
+          "x": 5560,
+          "y": 4300,
         },
         {
           "angle": 0,
@@ -3218,7 +2556,7 @@ exports[`regression tests > can drag element that covers another element, while
           "fillStyle": "hachure",
           "frameId": null,
           "groupIds": [],
-          "height": 350,
+          "height": 3500,
           "id": "id2",
           "isDeleted": false,
           "link": null,
@@ -3236,9 +2574,9 @@ exports[`regression tests > can drag element that covers another element, while
           "updated": 1,
           "version": 2,
           "versionNonce": 1604849351,
-          "width": 350,
-          "x": 300,
-          "y": 300,
+          "width": 3500,
+          "x": 5560,
+          "y": 4300,
         },
       ],
     },
@@ -3320,9 +2658,15 @@ exports[`regression tests > change the properties of a shape > [end of test] app
   "pendingImageElementId": null,
   "previousSelectedElementIds": {},
   "resizingElement": null,
-  "scrollConstraints": null,
-  "scrollX": 0,
-  "scrollY": 0,
+  "scrollConstraints": {
+    "height": 1300,
+    "lockZoom": false,
+    "width": 2560,
+    "x": 0,
+    "y": 0,
+  },
+  "scrollX": -2560,
+  "scrollY": -1300,
   "scrolledOutside": false,
   "selectedElementIds": {
     "id0": true,
@@ -3344,7 +2688,7 @@ exports[`regression tests > change the properties of a shape > [end of test] app
   "width": 1024,
   "zenModeEnabled": false,
   "zoom": {
-    "value": 1,
+    "value": 0.1,
   },
 }
 `;
@@ -3384,7 +2728,7 @@ exports[`regression tests > change the properties of a shape > [end of test] his
           "fillStyle": "hachure",
           "frameId": null,
           "groupIds": [],
-          "height": 10,
+          "height": 100,
           "id": "id0",
           "isDeleted": false,
           "link": null,
@@ -3402,9 +2746,9 @@ exports[`regression tests > change the properties of a shape > [end of test] his
           "updated": 1,
           "version": 2,
           "versionNonce": 453191,
-          "width": 10,
-          "x": 10,
-          "y": 10,
+          "width": 100,
+          "x": 2660,
+          "y": 1400,
         },
       ],
     },
@@ -3427,7 +2771,7 @@ exports[`regression tests > change the properties of a shape > [end of test] his
           "fillStyle": "hachure",
           "frameId": null,
           "groupIds": [],
-          "height": 10,
+          "height": 100,
           "id": "id0",
           "isDeleted": false,
           "link": null,
@@ -3445,9 +2789,9 @@ exports[`regression tests > change the properties of a shape > [end of test] his
           "updated": 1,
           "version": 3,
           "versionNonce": 2019559783,
-          "width": 10,
-          "x": 10,
-          "y": 10,
+          "width": 100,
+          "x": 2660,
+          "y": 1400,
         },
       ],
     },
@@ -3470,7 +2814,7 @@ exports[`regression tests > change the properties of a shape > [end of test] his
           "fillStyle": "hachure",
           "frameId": null,
           "groupIds": [],
-          "height": 10,
+          "height": 100,
           "id": "id0",
           "isDeleted": false,
           "link": null,
@@ -3488,9 +2832,9 @@ exports[`regression tests > change the properties of a shape > [end of test] his
           "updated": 1,
           "version": 4,
           "versionNonce": 1116226695,
-          "width": 10,
-          "x": 10,
-          "y": 10,
+          "width": 100,
+          "x": 2660,
+          "y": 1400,
         },
       ],
     },
@@ -3513,7 +2857,7 @@ exports[`regression tests > change the properties of a shape > [end of test] his
           "fillStyle": "hachure",
           "frameId": null,
           "groupIds": [],
-          "height": 10,
+          "height": 100,
           "id": "id0",
           "isDeleted": false,
           "link": null,
@@ -3531,9 +2875,9 @@ exports[`regression tests > change the properties of a shape > [end of test] his
           "updated": 1,
           "version": 5,
           "versionNonce": 238820263,
-          "width": 10,
-          "x": 10,
-          "y": 10,
+          "width": 100,
+          "x": 2660,
+          "y": 1400,
         },
       ],
     },
@@ -3617,9 +2961,15 @@ exports[`regression tests > click on an element and drag it > [dragged] appState
     "id0": true,
   },
   "resizingElement": null,
-  "scrollConstraints": null,
-  "scrollX": 0,
-  "scrollY": 0,
+  "scrollConstraints": {
+    "height": 1300,
+    "lockZoom": false,
+    "width": 2560,
+    "x": 0,
+    "y": 0,
+  },
+  "scrollX": -2560,
+  "scrollY": -1300,
   "scrolledOutside": false,
   "selectedElementIds": {
     "id0": true,
@@ -3641,7 +2991,7 @@ exports[`regression tests > click on an element and drag it > [dragged] appState
   "width": 1024,
   "zenModeEnabled": false,
   "zoom": {
-    "value": 1,
+    "value": 0.1,
   },
 }
 `;
@@ -3654,7 +3004,7 @@ exports[`regression tests > click on an element and drag it > [dragged] element
   "fillStyle": "hachure",
   "frameId": null,
   "groupIds": [],
-  "height": 10,
+  "height": 100,
   "id": "id0",
   "isDeleted": false,
   "link": null,
@@ -3672,9 +3022,9 @@ exports[`regression tests > click on an element and drag it > [dragged] element
   "updated": 1,
   "version": 3,
   "versionNonce": 1150084233,
-  "width": 10,
-  "x": 20,
-  "y": 20,
+  "width": 100,
+  "x": 2760,
+  "y": 1500,
 }
 `;
 
@@ -3713,7 +3063,7 @@ exports[`regression tests > click on an element and drag it > [dragged] history
           "fillStyle": "hachure",
           "frameId": null,
           "groupIds": [],
-          "height": 10,
+          "height": 100,
           "id": "id0",
           "isDeleted": false,
           "link": null,
@@ -3731,9 +3081,9 @@ exports[`regression tests > click on an element and drag it > [dragged] history
           "updated": 1,
           "version": 2,
           "versionNonce": 453191,
-          "width": 10,
-          "x": 10,
-          "y": 10,
+          "width": 100,
+          "x": 2660,
+          "y": 1400,
         },
       ],
     },
@@ -3756,7 +3106,7 @@ exports[`regression tests > click on an element and drag it > [dragged] history
           "fillStyle": "hachure",
           "frameId": null,
           "groupIds": [],
-          "height": 10,
+          "height": 100,
           "id": "id0",
           "isDeleted": false,
           "link": null,
@@ -3774,9 +3124,9 @@ exports[`regression tests > click on an element and drag it > [dragged] history
           "updated": 1,
           "version": 3,
           "versionNonce": 1150084233,
-          "width": 10,
-          "x": 20,
-          "y": 20,
+          "width": 100,
+          "x": 2760,
+          "y": 1500,
         },
       ],
     },
@@ -3860,9 +3210,15 @@ exports[`regression tests > click on an element and drag it > [end of test] appS
     "id0": true,
   },
   "resizingElement": null,
-  "scrollConstraints": null,
-  "scrollX": 0,
-  "scrollY": 0,
+  "scrollConstraints": {
+    "height": 1300,
+    "lockZoom": false,
+    "width": 2560,
+    "x": 0,
+    "y": 0,
+  },
+  "scrollX": -2560,
+  "scrollY": -1300,
   "scrolledOutside": false,
   "selectedElementIds": {
     "id0": true,
@@ -3884,7 +3240,7 @@ exports[`regression tests > click on an element and drag it > [end of test] appS
   "width": 1024,
   "zenModeEnabled": false,
   "zoom": {
-    "value": 1,
+    "value": 0.1,
   },
 }
 `;
@@ -3924,7 +3280,7 @@ exports[`regression tests > click on an element and drag it > [end of test] hist
           "fillStyle": "hachure",
           "frameId": null,
           "groupIds": [],
-          "height": 10,
+          "height": 100,
           "id": "id0",
           "isDeleted": false,
           "link": null,
@@ -3942,9 +3298,9 @@ exports[`regression tests > click on an element and drag it > [end of test] hist
           "updated": 1,
           "version": 2,
           "versionNonce": 453191,
-          "width": 10,
-          "x": 10,
-          "y": 10,
+          "width": 100,
+          "x": 2660,
+          "y": 1400,
         },
       ],
     },
@@ -3967,7 +3323,7 @@ exports[`regression tests > click on an element and drag it > [end of test] hist
           "fillStyle": "hachure",
           "frameId": null,
           "groupIds": [],
-          "height": 10,
+          "height": 100,
           "id": "id0",
           "isDeleted": false,
           "link": null,
@@ -3985,9 +3341,9 @@ exports[`regression tests > click on an element and drag it > [end of test] hist
           "updated": 1,
           "version": 3,
           "versionNonce": 1150084233,
-          "width": 10,
-          "x": 20,
-          "y": 20,
+          "width": 100,
+          "x": 2760,
+          "y": 1500,
         },
       ],
     },
@@ -4010,7 +3366,7 @@ exports[`regression tests > click on an element and drag it > [end of test] hist
           "fillStyle": "hachure",
           "frameId": null,
           "groupIds": [],
-          "height": 10,
+          "height": 100,
           "id": "id0",
           "isDeleted": false,
           "link": null,
@@ -4028,9 +3384,9 @@ exports[`regression tests > click on an element and drag it > [end of test] hist
           "updated": 1,
           "version": 4,
           "versionNonce": 400692809,
-          "width": 10,
-          "x": 10,
-          "y": 10,
+          "width": 100,
+          "x": 2660,
+          "y": 1400,
         },
       ],
     },
@@ -4114,9 +3470,15 @@ exports[`regression tests > click to select a shape > [end of test] appState 1`]
     "id1": true,
   },
   "resizingElement": null,
-  "scrollConstraints": null,
-  "scrollX": 0,
-  "scrollY": 0,
+  "scrollConstraints": {
+    "height": 1300,
+    "lockZoom": false,
+    "width": 2560,
+    "x": 0,
+    "y": 0,
+  },
+  "scrollX": -2560,
+  "scrollY": -1300,
   "scrolledOutside": false,
   "selectedElementIds": {
     "id0": true,
@@ -4138,7 +3500,7 @@ exports[`regression tests > click to select a shape > [end of test] appState 1`]
   "width": 1024,
   "zenModeEnabled": false,
   "zoom": {
-    "value": 1,
+    "value": 0.1,
   },
 }
 `;
@@ -4178,7 +3540,7 @@ exports[`regression tests > click to select a shape > [end of test] history 1`]
           "fillStyle": "hachure",
           "frameId": null,
           "groupIds": [],
-          "height": 10,
+          "height": 100,
           "id": "id0",
           "isDeleted": false,
           "link": null,
@@ -4196,9 +3558,9 @@ exports[`regression tests > click to select a shape > [end of test] history 1`]
           "updated": 1,
           "version": 2,
           "versionNonce": 453191,
-          "width": 10,
-          "x": 10,
-          "y": 10,
+          "width": 100,
+          "x": 2660,
+          "y": 1400,
         },
       ],
     },
@@ -4221,7 +3583,7 @@ exports[`regression tests > click to select a shape > [end of test] history 1`]
           "fillStyle": "hachure",
           "frameId": null,
           "groupIds": [],
-          "height": 10,
+          "height": 100,
           "id": "id0",
           "isDeleted": false,
           "link": null,
@@ -4239,9 +3601,9 @@ exports[`regression tests > click to select a shape > [end of test] history 1`]
           "updated": 1,
           "version": 2,
           "versionNonce": 453191,
-          "width": 10,
-          "x": 10,
-          "y": 10,
+          "width": 100,
+          "x": 2660,
+          "y": 1400,
         },
         {
           "angle": 0,
@@ -4250,7 +3612,7 @@ exports[`regression tests > click to select a shape > [end of test] history 1`]
           "fillStyle": "hachure",
           "frameId": null,
           "groupIds": [],
-          "height": 10,
+          "height": 100,
           "id": "id1",
           "isDeleted": false,
           "link": null,
@@ -4268,9 +3630,9 @@ exports[`regression tests > click to select a shape > [end of test] history 1`]
           "updated": 1,
           "version": 2,
           "versionNonce": 1116226695,
-          "width": 10,
-          "x": 30,
-          "y": 10,
+          "width": 100,
+          "x": 2860,
+          "y": 1400,
         },
       ],
     },
@@ -4354,9 +3716,15 @@ exports[`regression tests > click-drag to select a group > [end of test] appStat
     "id2": true,
   },
   "resizingElement": null,
-  "scrollConstraints": null,
-  "scrollX": 0,
-  "scrollY": 0,
+  "scrollConstraints": {
+    "height": 1300,
+    "lockZoom": false,
+    "width": 2560,
+    "x": 0,
+    "y": 0,
+  },
+  "scrollX": -2560,
+  "scrollY": -1300,
   "scrolledOutside": false,
   "selectedElementIds": {
     "id0": true,
@@ -4379,7 +3747,7 @@ exports[`regression tests > click-drag to select a group > [end of test] appStat
   "width": 1024,
   "zenModeEnabled": false,
   "zoom": {
-    "value": 1,
+    "value": 0.1,
   },
 }
 `;
@@ -4419,7 +3787,7 @@ exports[`regression tests > click-drag to select a group > [end of test] history
           "fillStyle": "hachure",
           "frameId": null,
           "groupIds": [],
-          "height": 10,
+          "height": 100,
           "id": "id0",
           "isDeleted": false,
           "link": null,
@@ -4437,9 +3805,9 @@ exports[`regression tests > click-drag to select a group > [end of test] history
           "updated": 1,
           "version": 2,
           "versionNonce": 453191,
-          "width": 10,
-          "x": 10,
-          "y": 10,
+          "width": 100,
+          "x": 2660,
+          "y": 1400,
         },
       ],
     },
@@ -4462,7 +3830,7 @@ exports[`regression tests > click-drag to select a group > [end of test] history
           "fillStyle": "hachure",
           "frameId": null,
           "groupIds": [],
-          "height": 10,
+          "height": 100,
           "id": "id0",
           "isDeleted": false,
           "link": null,
@@ -4480,9 +3848,9 @@ exports[`regression tests > click-drag to select a group > [end of test] history
           "updated": 1,
           "version": 2,
           "versionNonce": 453191,
-          "width": 10,
-          "x": 10,
-          "y": 10,
+          "width": 100,
+          "x": 2660,
+          "y": 1400,
         },
         {
           "angle": 0,
@@ -4491,7 +3859,7 @@ exports[`regression tests > click-drag to select a group > [end of test] history
           "fillStyle": "hachure",
           "frameId": null,
           "groupIds": [],
-          "height": 10,
+          "height": 100,
           "id": "id1",
           "isDeleted": false,
           "link": null,
@@ -4509,9 +3877,9 @@ exports[`regression tests > click-drag to select a group > [end of test] history
           "updated": 1,
           "version": 2,
           "versionNonce": 1116226695,
-          "width": 10,
-          "x": 30,
-          "y": 10,
+          "width": 100,
+          "x": 2860,
+          "y": 1400,
         },
       ],
     },
@@ -4534,7 +3902,7 @@ exports[`regression tests > click-drag to select a group > [end of test] history
           "fillStyle": "hachure",
           "frameId": null,
           "groupIds": [],
-          "height": 10,
+          "height": 100,
           "id": "id0",
           "isDeleted": false,
           "link": null,
@@ -4552,9 +3920,9 @@ exports[`regression tests > click-drag to select a group > [end of test] history
           "updated": 1,
           "version": 2,
           "versionNonce": 453191,
-          "width": 10,
-          "x": 10,
-          "y": 10,
+          "width": 100,
+          "x": 2660,
+          "y": 1400,
         },
         {
           "angle": 0,
@@ -4563,7 +3931,7 @@ exports[`regression tests > click-drag to select a group > [end of test] history
           "fillStyle": "hachure",
           "frameId": null,
           "groupIds": [],
-          "height": 10,
+          "height": 100,
           "id": "id1",
           "isDeleted": false,
           "link": null,
@@ -4581,9 +3949,9 @@ exports[`regression tests > click-drag to select a group > [end of test] history
           "updated": 1,
           "version": 2,
           "versionNonce": 1116226695,
-          "width": 10,
-          "x": 30,
-          "y": 10,
+          "width": 100,
+          "x": 2860,
+          "y": 1400,
         },
         {
           "angle": 0,
@@ -4592,7 +3960,7 @@ exports[`regression tests > click-drag to select a group > [end of test] history
           "fillStyle": "hachure",
           "frameId": null,
           "groupIds": [],
-          "height": 10,
+          "height": 100,
           "id": "id2",
           "isDeleted": false,
           "link": null,
@@ -4610,9 +3978,9 @@ exports[`regression tests > click-drag to select a group > [end of test] history
           "updated": 1,
           "version": 2,
           "versionNonce": 1604849351,
-          "width": 10,
-          "x": 50,
-          "y": 10,
+          "width": 100,
+          "x": 3060,
+          "y": 1400,
         },
       ],
     },
@@ -4652,7 +4020,42 @@ exports[`regression tests > deleting last but one element in editing group shoul
   "cursorButton": "up",
   "defaultSidebarDockedPreference": false,
   "draggingElement": null,
-  "editingElement": null,
+  "editingElement": {
+    "angle": 0,
+    "backgroundColor": "transparent",
+    "baseline": 0,
+    "boundElements": null,
+    "containerId": null,
+    "fillStyle": "hachure",
+    "fontFamily": 1,
+    "fontSize": 20,
+    "frameId": null,
+    "groupIds": [],
+    "height": 25,
+    "id": "id4",
+    "isDeleted": false,
+    "lineHeight": 1.25,
+    "link": null,
+    "locked": false,
+    "opacity": 100,
+    "originalText": "",
+    "roughness": 1,
+    "roundness": null,
+    "seed": 1505387817,
+    "strokeColor": "#1e1e1e",
+    "strokeStyle": "solid",
+    "strokeWidth": 1,
+    "text": "",
+    "textAlign": "left",
+    "type": "text",
+    "updated": 1,
+    "version": 1,
+    "versionNonce": 0,
+    "verticalAlign": "top",
+    "width": 10,
+    "x": 29160,
+    "y": 14300,
+  },
   "editingFrame": null,
   "editingGroupId": null,
   "editingLinearElement": null,
@@ -4694,16 +4097,19 @@ exports[`regression tests > deleting last but one element in editing group shoul
   "pendingImageElementId": null,
   "previousSelectedElementIds": {},
   "resizingElement": null,
-  "scrollX": 0,
-  "scrollY": 0,
+  "scrollConstraints": {
+    "height": 1300,
+    "lockZoom": false,
+    "width": 2560,
+    "x": 0,
+    "y": 0,
+  },
+  "scrollX": -2560,
+  "scrollY": -1300,
   "scrolledOutside": false,
-  "selectedElementIds": {
-    "id1": true,
-  },
+  "selectedElementIds": {},
   "selectedElementsAreBeingDragged": false,
-  "selectedGroupIds": {
-    "id4": false,
-  },
+  "selectedGroupIds": {},
   "selectedLinearElement": null,
   "selectionElement": null,
   "shouldCacheIgnoreZoom": false,
@@ -4719,7 +4125,7 @@ exports[`regression tests > deleting last but one element in editing group shoul
   "width": 1024,
   "zenModeEnabled": false,
   "zoom": {
-    "value": 1,
+    "value": 0.1,
   },
 }
 `;
@@ -4759,7 +4165,7 @@ exports[`regression tests > deleting last but one element in editing group shoul
           "fillStyle": "hachure",
           "frameId": null,
           "groupIds": [],
-          "height": 10,
+          "height": 100,
           "id": "id0",
           "isDeleted": false,
           "link": null,
@@ -4777,9 +4183,9 @@ exports[`regression tests > deleting last but one element in editing group shoul
           "updated": 1,
           "version": 2,
           "versionNonce": 453191,
-          "width": 10,
-          "x": 10,
-          "y": 0,
+          "width": 100,
+          "x": 2660,
+          "y": 1300,
         },
       ],
     },
@@ -4802,7 +4208,7 @@ exports[`regression tests > deleting last but one element in editing group shoul
           "fillStyle": "hachure",
           "frameId": null,
           "groupIds": [],
-          "height": 10,
+          "height": 100,
           "id": "id0",
           "isDeleted": false,
           "link": null,
@@ -4820,9 +4226,9 @@ exports[`regression tests > deleting last but one element in editing group shoul
           "updated": 1,
           "version": 2,
           "versionNonce": 453191,
-          "width": 10,
-          "x": 10,
-          "y": 0,
+          "width": 100,
+          "x": 2660,
+          "y": 1300,
         },
         {
           "angle": 0,
@@ -4831,7 +4237,7 @@ exports[`regression tests > deleting last but one element in editing group shoul
           "fillStyle": "hachure",
           "frameId": null,
           "groupIds": [],
-          "height": 10,
+          "height": 100,
           "id": "id1",
           "isDeleted": false,
           "link": null,
@@ -4849,242 +4255,9 @@ exports[`regression tests > deleting last but one element in editing group shoul
           "updated": 1,
           "version": 2,
           "versionNonce": 1116226695,
-          "width": 10,
-          "x": 50,
-          "y": 0,
-        },
-      ],
-    },
-    {
-      "appState": {
-        "editingGroupId": null,
-        "editingLinearElement": null,
-        "name": "Untitled-201933152653",
-        "selectedElementIds": {
-          "id0": true,
-          "id1": true,
-        },
-        "selectedGroupIds": {
-          "id4": true,
-        },
-        "viewBackgroundColor": "#ffffff",
-      },
-      "elements": [
-        {
-          "angle": 0,
-          "backgroundColor": "transparent",
-          "boundElements": null,
-          "fillStyle": "hachure",
-          "frameId": null,
-          "groupIds": [
-            "id4",
-          ],
-          "height": 10,
-          "id": "id0",
-          "isDeleted": false,
-          "link": null,
-          "locked": false,
-          "opacity": 100,
-          "roughness": 1,
-          "roundness": {
-            "type": 3,
-          },
-          "seed": 1278240551,
-          "strokeColor": "#1e1e1e",
-          "strokeStyle": "solid",
-          "strokeWidth": 1,
-          "type": "rectangle",
-          "updated": 1,
-          "version": 3,
-          "versionNonce": 1604849351,
-          "width": 10,
-          "x": 10,
-          "y": 0,
-        },
-        {
-          "angle": 0,
-          "backgroundColor": "transparent",
-          "boundElements": null,
-          "fillStyle": "hachure",
-          "frameId": null,
-          "groupIds": [
-            "id4",
-          ],
-          "height": 10,
-          "id": "id1",
-          "isDeleted": false,
-          "link": null,
-          "locked": false,
-          "opacity": 100,
-          "roughness": 1,
-          "roundness": {
-            "type": 3,
-          },
-          "seed": 2019559783,
-          "strokeColor": "#1e1e1e",
-          "strokeStyle": "solid",
-          "strokeWidth": 1,
-          "type": "rectangle",
-          "updated": 1,
-          "version": 3,
-          "versionNonce": 1505387817,
-          "width": 10,
-          "x": 50,
-          "y": 0,
-        },
-      ],
-    },
-    {
-      "appState": {
-        "editingGroupId": "id4",
-        "editingLinearElement": null,
-        "name": "Untitled-201933152653",
-        "selectedElementIds": {
-          "id1": true,
-        },
-        "selectedGroupIds": {},
-        "viewBackgroundColor": "#ffffff",
-      },
-      "elements": [
-        {
-          "angle": 0,
-          "backgroundColor": "transparent",
-          "boundElements": null,
-          "fillStyle": "hachure",
-          "frameId": null,
-          "groupIds": [
-            "id4",
-          ],
-          "height": 10,
-          "id": "id0",
-          "isDeleted": true,
-          "link": null,
-          "locked": false,
-          "opacity": 100,
-          "roughness": 1,
-          "roundness": {
-            "type": 3,
-          },
-          "seed": 1278240551,
-          "strokeColor": "#1e1e1e",
-          "strokeStyle": "solid",
-          "strokeWidth": 1,
-          "type": "rectangle",
-          "updated": 1,
-          "version": 4,
-          "versionNonce": 493213705,
-          "width": 10,
-          "x": 10,
-          "y": 0,
-        },
-        {
-          "angle": 0,
-          "backgroundColor": "transparent",
-          "boundElements": null,
-          "fillStyle": "hachure",
-          "frameId": null,
-          "groupIds": [
-            "id4",
-          ],
-          "height": 10,
-          "id": "id1",
-          "isDeleted": false,
-          "link": null,
-          "locked": false,
-          "opacity": 100,
-          "roughness": 1,
-          "roundness": {
-            "type": 3,
-          },
-          "seed": 2019559783,
-          "strokeColor": "#1e1e1e",
-          "strokeStyle": "solid",
-          "strokeWidth": 1,
-          "type": "rectangle",
-          "updated": 1,
-          "version": 3,
-          "versionNonce": 1505387817,
-          "width": 10,
-          "x": 50,
-          "y": 0,
-        },
-      ],
-    },
-    {
-      "appState": {
-        "editingGroupId": null,
-        "editingLinearElement": null,
-        "name": "Untitled-201933152653",
-        "selectedElementIds": {
-          "id1": true,
-        },
-        "selectedGroupIds": {
-          "id4": false,
-        },
-        "viewBackgroundColor": "#ffffff",
-      },
-      "elements": [
-        {
-          "angle": 0,
-          "backgroundColor": "transparent",
-          "boundElements": null,
-          "fillStyle": "hachure",
-          "frameId": null,
-          "groupIds": [
-            "id4",
-          ],
-          "height": 10,
-          "id": "id0",
-          "isDeleted": true,
-          "link": null,
-          "locked": false,
-          "opacity": 100,
-          "roughness": 1,
-          "roundness": {
-            "type": 3,
-          },
-          "seed": 1278240551,
-          "strokeColor": "#1e1e1e",
-          "strokeStyle": "solid",
-          "strokeWidth": 1,
-          "type": "rectangle",
-          "updated": 1,
-          "version": 4,
-          "versionNonce": 493213705,
-          "width": 10,
-          "x": 10,
-          "y": 0,
-        },
-        {
-          "angle": 0,
-          "backgroundColor": "transparent",
-          "boundElements": null,
-          "fillStyle": "hachure",
-          "frameId": null,
-          "groupIds": [
-            "id4",
-          ],
-          "height": 10,
-          "id": "id1",
-          "isDeleted": false,
-          "link": null,
-          "locked": false,
-          "opacity": 100,
-          "roughness": 1,
-          "roundness": {
-            "type": 3,
-          },
-          "seed": 2019559783,
-          "strokeColor": "#1e1e1e",
-          "strokeStyle": "solid",
-          "strokeWidth": 1,
-          "type": "rectangle",
-          "updated": 1,
-          "version": 3,
-          "versionNonce": 1505387817,
-          "width": 10,
-          "x": 50,
-          "y": 0,
+          "width": 100,
+          "x": 3060,
+          "y": 1300,
         },
       ],
     },
@@ -5094,7 +4267,7 @@ exports[`regression tests > deleting last but one element in editing group shoul
 
 exports[`regression tests > deleting last but one element in editing group should unselect the group > [end of test] number of elements 1`] = `0`;
 
-exports[`regression tests > deleting last but one element in editing group should unselect the group > [end of test] number of renders 1`] = `20`;
+exports[`regression tests > deleting last but one element in editing group should unselect the group > [end of test] number of renders 1`] = `16`;
 
 exports[`regression tests > deselects group of selected elements on pointer down when pointer doesn't hit any element > [end of test] appState 1`] = `
 {
@@ -5149,8 +4322,8 @@ exports[`regression tests > deselects group of selected elements on pointer down
     "version": 1,
     "versionNonce": 0,
     "width": 0,
-    "x": 500,
-    "y": 500,
+    "x": 7560,
+    "y": 6300,
   },
   "editingElement": null,
   "editingFrame": null,
@@ -5197,9 +4370,15 @@ exports[`regression tests > deselects group of selected elements on pointer down
     "id1": true,
   },
   "resizingElement": null,
-  "scrollConstraints": null,
-  "scrollX": 0,
-  "scrollY": 0,
+  "scrollConstraints": {
+    "height": 1300,
+    "lockZoom": false,
+    "width": 2560,
+    "x": 0,
+    "y": 0,
+  },
+  "scrollX": -2560,
+  "scrollY": -1300,
   "scrolledOutside": false,
   "selectedElementIds": {},
   "selectedElementsAreBeingDragged": false,
@@ -5231,8 +4410,8 @@ exports[`regression tests > deselects group of selected elements on pointer down
     "version": 1,
     "versionNonce": 0,
     "width": 0,
-    "x": 500,
-    "y": 500,
+    "x": 7560,
+    "y": 6300,
   },
   "shouldCacheIgnoreZoom": false,
   "showHyperlinkPopup": false,
@@ -5247,7 +4426,7 @@ exports[`regression tests > deselects group of selected elements on pointer down
   "width": 1024,
   "zenModeEnabled": false,
   "zoom": {
-    "value": 1,
+    "value": 0.1,
   },
 }
 `;
@@ -5287,7 +4466,7 @@ exports[`regression tests > deselects group of selected elements on pointer down
           "fillStyle": "hachure",
           "frameId": null,
           "groupIds": [],
-          "height": 10,
+          "height": 100,
           "id": "id0",
           "isDeleted": false,
           "link": null,
@@ -5305,9 +4484,9 @@ exports[`regression tests > deselects group of selected elements on pointer down
           "updated": 1,
           "version": 2,
           "versionNonce": 453191,
-          "width": 10,
-          "x": 0,
-          "y": 0,
+          "width": 100,
+          "x": 2560,
+          "y": 1300,
         },
       ],
     },
@@ -5330,7 +4509,7 @@ exports[`regression tests > deselects group of selected elements on pointer down
           "fillStyle": "hachure",
           "frameId": null,
           "groupIds": [],
-          "height": 10,
+          "height": 100,
           "id": "id0",
           "isDeleted": false,
           "link": null,
@@ -5348,9 +4527,9 @@ exports[`regression tests > deselects group of selected elements on pointer down
           "updated": 1,
           "version": 2,
           "versionNonce": 453191,
-          "width": 10,
-          "x": 0,
-          "y": 0,
+          "width": 100,
+          "x": 2560,
+          "y": 1300,
         },
         {
           "angle": 0,
@@ -5359,7 +4538,7 @@ exports[`regression tests > deselects group of selected elements on pointer down
           "fillStyle": "hachure",
           "frameId": null,
           "groupIds": [],
-          "height": 10,
+          "height": 100,
           "id": "id1",
           "isDeleted": false,
           "link": null,
@@ -5377,9 +4556,9 @@ exports[`regression tests > deselects group of selected elements on pointer down
           "updated": 1,
           "version": 2,
           "versionNonce": 1116226695,
-          "width": 10,
-          "x": 110,
-          "y": 110,
+          "width": 100,
+          "x": 3660,
+          "y": 2400,
         },
       ],
     },
@@ -5444,8 +4623,8 @@ exports[`regression tests > deselects group of selected elements on pointer up w
     "version": 1,
     "versionNonce": 0,
     "width": 0,
-    "x": 50,
-    "y": 50,
+    "x": 3060,
+    "y": 1800,
   },
   "editingElement": null,
   "editingFrame": null,
@@ -5492,9 +4671,15 @@ exports[`regression tests > deselects group of selected elements on pointer up w
     "id1": true,
   },
   "resizingElement": null,
-  "scrollConstraints": null,
-  "scrollX": 0,
-  "scrollY": 0,
+  "scrollConstraints": {
+    "height": 1300,
+    "lockZoom": false,
+    "width": 2560,
+    "x": 0,
+    "y": 0,
+  },
+  "scrollX": -2560,
+  "scrollY": -1300,
   "scrolledOutside": false,
   "selectedElementIds": {},
   "selectedElementsAreBeingDragged": false,
@@ -5514,7 +4699,7 @@ exports[`regression tests > deselects group of selected elements on pointer up w
   "width": 1024,
   "zenModeEnabled": false,
   "zoom": {
-    "value": 1,
+    "value": 0.1,
   },
 }
 `;
@@ -5554,7 +4739,7 @@ exports[`regression tests > deselects group of selected elements on pointer up w
           "fillStyle": "hachure",
           "frameId": null,
           "groupIds": [],
-          "height": 10,
+          "height": 100,
           "id": "id0",
           "isDeleted": false,
           "link": null,
@@ -5572,9 +4757,9 @@ exports[`regression tests > deselects group of selected elements on pointer up w
           "updated": 1,
           "version": 2,
           "versionNonce": 453191,
-          "width": 10,
-          "x": 0,
-          "y": 0,
+          "width": 100,
+          "x": 2560,
+          "y": 1300,
         },
       ],
     },
@@ -5597,7 +4782,7 @@ exports[`regression tests > deselects group of selected elements on pointer up w
           "fillStyle": "hachure",
           "frameId": null,
           "groupIds": [],
-          "height": 10,
+          "height": 100,
           "id": "id0",
           "isDeleted": false,
           "link": null,
@@ -5615,9 +4800,9 @@ exports[`regression tests > deselects group of selected elements on pointer up w
           "updated": 1,
           "version": 2,
           "versionNonce": 453191,
-          "width": 10,
-          "x": 0,
-          "y": 0,
+          "width": 100,
+          "x": 2560,
+          "y": 1300,
         },
         {
           "angle": 0,
@@ -5626,7 +4811,7 @@ exports[`regression tests > deselects group of selected elements on pointer up w
           "fillStyle": "hachure",
           "frameId": null,
           "groupIds": [],
-          "height": 10,
+          "height": 100,
           "id": "id1",
           "isDeleted": false,
           "link": null,
@@ -5644,9 +4829,9 @@ exports[`regression tests > deselects group of selected elements on pointer up w
           "updated": 1,
           "version": 2,
           "versionNonce": 1116226695,
-          "width": 10,
-          "x": 110,
-          "y": 110,
+          "width": 100,
+          "x": 3660,
+          "y": 2400,
         },
       ],
     },
@@ -5711,8 +4896,8 @@ exports[`regression tests > deselects selected element on pointer down when poin
     "version": 1,
     "versionNonce": 0,
     "width": 0,
-    "x": 110,
-    "y": 110,
+    "x": 3660,
+    "y": 2400,
   },
   "editingElement": null,
   "editingFrame": null,
@@ -5758,9 +4943,15 @@ exports[`regression tests > deselects selected element on pointer down when poin
     "id0": true,
   },
   "resizingElement": null,
-  "scrollConstraints": null,
-  "scrollX": 0,
-  "scrollY": 0,
+  "scrollConstraints": {
+    "height": 1300,
+    "lockZoom": false,
+    "width": 2560,
+    "x": 0,
+    "y": 0,
+  },
+  "scrollX": -2560,
+  "scrollY": -1300,
   "scrolledOutside": false,
   "selectedElementIds": {},
   "selectedElementsAreBeingDragged": false,
@@ -5792,8 +4983,8 @@ exports[`regression tests > deselects selected element on pointer down when poin
     "version": 1,
     "versionNonce": 0,
     "width": 0,
-    "x": 110,
-    "y": 110,
+    "x": 3660,
+    "y": 2400,
   },
   "shouldCacheIgnoreZoom": false,
   "showHyperlinkPopup": false,
@@ -5808,7 +4999,7 @@ exports[`regression tests > deselects selected element on pointer down when poin
   "width": 1024,
   "zenModeEnabled": false,
   "zoom": {
-    "value": 1,
+    "value": 0.1,
   },
 }
 `;
@@ -5848,7 +5039,7 @@ exports[`regression tests > deselects selected element on pointer down when poin
           "fillStyle": "hachure",
           "frameId": null,
           "groupIds": [],
-          "height": 10,
+          "height": 100,
           "id": "id0",
           "isDeleted": false,
           "link": null,
@@ -5866,9 +5057,9 @@ exports[`regression tests > deselects selected element on pointer down when poin
           "updated": 1,
           "version": 2,
           "versionNonce": 453191,
-          "width": 10,
-          "x": 0,
-          "y": 0,
+          "width": 100,
+          "x": 2560,
+          "y": 1300,
         },
       ],
     },
@@ -5952,9 +5143,15 @@ exports[`regression tests > deselects selected element, on pointer up, when clic
     "id0": true,
   },
   "resizingElement": null,
-  "scrollConstraints": null,
-  "scrollX": 0,
-  "scrollY": 0,
+  "scrollConstraints": {
+    "height": 1300,
+    "lockZoom": false,
+    "width": 2560,
+    "x": 0,
+    "y": 0,
+  },
+  "scrollX": -2560,
+  "scrollY": -1300,
   "scrolledOutside": false,
   "selectedElementIds": {},
   "selectedElementsAreBeingDragged": false,
@@ -5974,7 +5171,7 @@ exports[`regression tests > deselects selected element, on pointer up, when clic
   "width": 1024,
   "zenModeEnabled": false,
   "zoom": {
-    "value": 1,
+    "value": 0.1,
   },
 }
 `;
@@ -6014,7 +5211,7 @@ exports[`regression tests > deselects selected element, on pointer up, when clic
           "fillStyle": "hachure",
           "frameId": null,
           "groupIds": [],
-          "height": 100,
+          "height": 1000,
           "id": "id0",
           "isDeleted": false,
           "link": null,
@@ -6032,9 +5229,9 @@ exports[`regression tests > deselects selected element, on pointer up, when clic
           "updated": 1,
           "version": 2,
           "versionNonce": 453191,
-          "width": 100,
-          "x": 0,
-          "y": 0,
+          "width": 1000,
+          "x": 2560,
+          "y": 1300,
         },
       ],
     },
@@ -6116,9 +5313,15 @@ exports[`regression tests > double click to edit a group > [end of test] appStat
   "pendingImageElementId": null,
   "previousSelectedElementIds": {},
   "resizingElement": null,
-  "scrollConstraints": null,
-  "scrollX": 0,
-  "scrollY": 0,
+  "scrollConstraints": {
+    "height": 1300,
+    "lockZoom": false,
+    "width": 2560,
+    "x": 0,
+    "y": 0,
+  },
+  "scrollX": -2560,
+  "scrollY": -1300,
   "scrolledOutside": false,
   "selectedElementIds": {
     "id2": true,
@@ -6140,7 +5343,7 @@ exports[`regression tests > double click to edit a group > [end of test] appStat
   "width": 1024,
   "zenModeEnabled": false,
   "zoom": {
-    "value": 1,
+    "value": 0.1,
   },
 }
 `;
@@ -6180,7 +5383,7 @@ exports[`regression tests > double click to edit a group > [end of test] history
           "fillStyle": "hachure",
           "frameId": null,
           "groupIds": [],
-          "height": 10,
+          "height": 100,
           "id": "id0",
           "isDeleted": false,
           "link": null,
@@ -6198,9 +5401,9 @@ exports[`regression tests > double click to edit a group > [end of test] history
           "updated": 1,
           "version": 2,
           "versionNonce": 453191,
-          "width": 10,
-          "x": 10,
-          "y": 10,
+          "width": 100,
+          "x": 2660,
+          "y": 1400,
         },
       ],
     },
@@ -6223,7 +5426,7 @@ exports[`regression tests > double click to edit a group > [end of test] history
           "fillStyle": "hachure",
           "frameId": null,
           "groupIds": [],
-          "height": 10,
+          "height": 100,
           "id": "id0",
           "isDeleted": false,
           "link": null,
@@ -6241,9 +5444,9 @@ exports[`regression tests > double click to edit a group > [end of test] history
           "updated": 1,
           "version": 2,
           "versionNonce": 453191,
-          "width": 10,
-          "x": 10,
-          "y": 10,
+          "width": 100,
+          "x": 2660,
+          "y": 1400,
         },
         {
           "angle": 0,
@@ -6252,7 +5455,7 @@ exports[`regression tests > double click to edit a group > [end of test] history
           "fillStyle": "hachure",
           "frameId": null,
           "groupIds": [],
-          "height": 10,
+          "height": 100,
           "id": "id1",
           "isDeleted": false,
           "link": null,
@@ -6270,9 +5473,9 @@ exports[`regression tests > double click to edit a group > [end of test] history
           "updated": 1,
           "version": 2,
           "versionNonce": 1116226695,
-          "width": 10,
-          "x": 30,
-          "y": 10,
+          "width": 100,
+          "x": 2860,
+          "y": 1400,
         },
       ],
     },
@@ -6295,7 +5498,7 @@ exports[`regression tests > double click to edit a group > [end of test] history
           "fillStyle": "hachure",
           "frameId": null,
           "groupIds": [],
-          "height": 10,
+          "height": 100,
           "id": "id0",
           "isDeleted": false,
           "link": null,
@@ -6313,9 +5516,9 @@ exports[`regression tests > double click to edit a group > [end of test] history
           "updated": 1,
           "version": 2,
           "versionNonce": 453191,
-          "width": 10,
-          "x": 10,
-          "y": 10,
+          "width": 100,
+          "x": 2660,
+          "y": 1400,
         },
         {
           "angle": 0,
@@ -6324,7 +5527,7 @@ exports[`regression tests > double click to edit a group > [end of test] history
           "fillStyle": "hachure",
           "frameId": null,
           "groupIds": [],
-          "height": 10,
+          "height": 100,
           "id": "id1",
           "isDeleted": false,
           "link": null,
@@ -6342,9 +5545,9 @@ exports[`regression tests > double click to edit a group > [end of test] history
           "updated": 1,
           "version": 2,
           "versionNonce": 1116226695,
-          "width": 10,
-          "x": 30,
-          "y": 10,
+          "width": 100,
+          "x": 2860,
+          "y": 1400,
         },
         {
           "angle": 0,
@@ -6353,7 +5556,7 @@ exports[`regression tests > double click to edit a group > [end of test] history
           "fillStyle": "hachure",
           "frameId": null,
           "groupIds": [],
-          "height": 10,
+          "height": 100,
           "id": "id2",
           "isDeleted": false,
           "link": null,
@@ -6371,9 +5574,9 @@ exports[`regression tests > double click to edit a group > [end of test] history
           "updated": 1,
           "version": 2,
           "versionNonce": 1604849351,
-          "width": 10,
-          "x": 50,
-          "y": 10,
+          "width": 100,
+          "x": 3060,
+          "y": 1400,
         },
       ],
     },
@@ -6402,7 +5605,7 @@ exports[`regression tests > double click to edit a group > [end of test] history
           "groupIds": [
             "id3",
           ],
-          "height": 10,
+          "height": 100,
           "id": "id0",
           "isDeleted": false,
           "link": null,
@@ -6420,9 +5623,9 @@ exports[`regression tests > double click to edit a group > [end of test] history
           "updated": 1,
           "version": 3,
           "versionNonce": 23633383,
-          "width": 10,
-          "x": 10,
-          "y": 10,
+          "width": 100,
+          "x": 2660,
+          "y": 1400,
         },
         {
           "angle": 0,
@@ -6433,7 +5636,7 @@ exports[`regression tests > double click to edit a group > [end of test] history
           "groupIds": [
             "id3",
           ],
-          "height": 10,
+          "height": 100,
           "id": "id1",
           "isDeleted": false,
           "link": null,
@@ -6451,9 +5654,9 @@ exports[`regression tests > double click to edit a group > [end of test] history
           "updated": 1,
           "version": 3,
           "versionNonce": 493213705,
-          "width": 10,
-          "x": 30,
-          "y": 10,
+          "width": 100,
+          "x": 2860,
+          "y": 1400,
         },
         {
           "angle": 0,
@@ -6464,7 +5667,7 @@ exports[`regression tests > double click to edit a group > [end of test] history
           "groupIds": [
             "id3",
           ],
-          "height": 10,
+          "height": 100,
           "id": "id2",
           "isDeleted": false,
           "link": null,
@@ -6482,9 +5685,9 @@ exports[`regression tests > double click to edit a group > [end of test] history
           "updated": 1,
           "version": 3,
           "versionNonce": 915032327,
-          "width": 10,
-          "x": 50,
-          "y": 10,
+          "width": 100,
+          "x": 3060,
+          "y": 1400,
         },
       ],
     },
@@ -6569,9 +5772,15 @@ exports[`regression tests > drags selected elements from point inside common bou
     "id1": true,
   },
   "resizingElement": null,
-  "scrollConstraints": null,
-  "scrollX": 0,
-  "scrollY": 0,
+  "scrollConstraints": {
+    "height": 1300,
+    "lockZoom": false,
+    "width": 2560,
+    "x": 0,
+    "y": 0,
+  },
+  "scrollX": -2560,
+  "scrollY": -1300,
   "scrolledOutside": false,
   "selectedElementIds": {
     "id0": true,
@@ -6594,7 +5803,7 @@ exports[`regression tests > drags selected elements from point inside common bou
   "width": 1024,
   "zenModeEnabled": false,
   "zoom": {
-    "value": 1,
+    "value": 0.1,
   },
 }
 `;
@@ -6634,7 +5843,7 @@ exports[`regression tests > drags selected elements from point inside common bou
           "fillStyle": "hachure",
           "frameId": null,
           "groupIds": [],
-          "height": 10,
+          "height": 100,
           "id": "id0",
           "isDeleted": false,
           "link": null,
@@ -6652,9 +5861,9 @@ exports[`regression tests > drags selected elements from point inside common bou
           "updated": 1,
           "version": 2,
           "versionNonce": 453191,
-          "width": 10,
-          "x": 0,
-          "y": 0,
+          "width": 100,
+          "x": 2560,
+          "y": 1300,
         },
       ],
     },
@@ -6677,7 +5886,7 @@ exports[`regression tests > drags selected elements from point inside common bou
           "fillStyle": "hachure",
           "frameId": null,
           "groupIds": [],
-          "height": 10,
+          "height": 100,
           "id": "id0",
           "isDeleted": false,
           "link": null,
@@ -6695,9 +5904,9 @@ exports[`regression tests > drags selected elements from point inside common bou
           "updated": 1,
           "version": 2,
           "versionNonce": 453191,
-          "width": 10,
-          "x": 0,
-          "y": 0,
+          "width": 100,
+          "x": 2560,
+          "y": 1300,
         },
         {
           "angle": 0,
@@ -6706,7 +5915,7 @@ exports[`regression tests > drags selected elements from point inside common bou
           "fillStyle": "hachure",
           "frameId": null,
           "groupIds": [],
-          "height": 10,
+          "height": 100,
           "id": "id1",
           "isDeleted": false,
           "link": null,
@@ -6724,9 +5933,9 @@ exports[`regression tests > drags selected elements from point inside common bou
           "updated": 1,
           "version": 2,
           "versionNonce": 1116226695,
-          "width": 10,
-          "x": 110,
-          "y": 110,
+          "width": 100,
+          "x": 3660,
+          "y": 2400,
         },
       ],
     },
@@ -6750,7 +5959,7 @@ exports[`regression tests > drags selected elements from point inside common bou
           "fillStyle": "hachure",
           "frameId": null,
           "groupIds": [],
-          "height": 10,
+          "height": 100,
           "id": "id0",
           "isDeleted": false,
           "link": null,
@@ -6768,9 +5977,9 @@ exports[`regression tests > drags selected elements from point inside common bou
           "updated": 1,
           "version": 3,
           "versionNonce": 1604849351,
-          "width": 10,
-          "x": 25,
-          "y": 25,
+          "width": 100,
+          "x": 2810,
+          "y": 1550,
         },
         {
           "angle": 0,
@@ -6779,7 +5988,7 @@ exports[`regression tests > drags selected elements from point inside common bou
           "fillStyle": "hachure",
           "frameId": null,
           "groupIds": [],
-          "height": 10,
+          "height": 100,
           "id": "id1",
           "isDeleted": false,
           "link": null,
@@ -6797,9 +6006,9 @@ exports[`regression tests > drags selected elements from point inside common bou
           "updated": 1,
           "version": 3,
           "versionNonce": 23633383,
-          "width": 10,
-          "x": 135,
-          "y": 135,
+          "width": 100,
+          "x": 3910,
+          "y": 2650,
         },
       ],
     },
@@ -6881,9 +6090,15 @@ exports[`regression tests > draw every type of shape > [end of test] appState 1`
   "pendingImageElementId": null,
   "previousSelectedElementIds": {},
   "resizingElement": null,
-  "scrollConstraints": null,
-  "scrollX": 0,
-  "scrollY": 0,
+  "scrollConstraints": {
+    "height": 1300,
+    "lockZoom": false,
+    "width": 2560,
+    "x": 0,
+    "y": 0,
+  },
+  "scrollX": -2560,
+  "scrollY": -1300,
   "scrolledOutside": false,
   "selectedElementIds": {},
   "selectedElementsAreBeingDragged": false,
@@ -6903,7 +6118,7 @@ exports[`regression tests > draw every type of shape > [end of test] appState 1`
   "width": 1024,
   "zenModeEnabled": false,
   "zoom": {
-    "value": 1,
+    "value": 0.1,
   },
 }
 `;
@@ -6943,7 +6158,7 @@ exports[`regression tests > draw every type of shape > [end of test] history 1`]
           "fillStyle": "hachure",
           "frameId": null,
           "groupIds": [],
-          "height": 10,
+          "height": 100,
           "id": "id0",
           "isDeleted": false,
           "link": null,
@@ -6961,9 +6176,9 @@ exports[`regression tests > draw every type of shape > [end of test] history 1`]
           "updated": 1,
           "version": 2,
           "versionNonce": 453191,
-          "width": 20,
-          "x": 10,
-          "y": -10,
+          "width": 200,
+          "x": 2660,
+          "y": 1200,
         },
       ],
     },
@@ -6986,7 +6201,7 @@ exports[`regression tests > draw every type of shape > [end of test] history 1`]
           "fillStyle": "hachure",
           "frameId": null,
           "groupIds": [],
-          "height": 10,
+          "height": 100,
           "id": "id0",
           "isDeleted": false,
           "link": null,
@@ -7004,9 +6219,9 @@ exports[`regression tests > draw every type of shape > [end of test] history 1`]
           "updated": 1,
           "version": 2,
           "versionNonce": 453191,
-          "width": 20,
-          "x": 10,
-          "y": -10,
+          "width": 200,
+          "x": 2660,
+          "y": 1200,
         },
         {
           "angle": 0,
@@ -7015,7 +6230,7 @@ exports[`regression tests > draw every type of shape > [end of test] history 1`]
           "fillStyle": "hachure",
           "frameId": null,
           "groupIds": [],
-          "height": 10,
+          "height": 100,
           "id": "id1",
           "isDeleted": false,
           "link": null,
@@ -7033,9 +6248,9 @@ exports[`regression tests > draw every type of shape > [end of test] history 1`]
           "updated": 1,
           "version": 2,
           "versionNonce": 1116226695,
-          "width": 20,
-          "x": 40,
-          "y": -10,
+          "width": 200,
+          "x": 2960,
+          "y": 1200,
         },
       ],
     },
@@ -7058,7 +6273,7 @@ exports[`regression tests > draw every type of shape > [end of test] history 1`]
           "fillStyle": "hachure",
           "frameId": null,
           "groupIds": [],
-          "height": 10,
+          "height": 100,
           "id": "id0",
           "isDeleted": false,
           "link": null,
@@ -7076,9 +6291,9 @@ exports[`regression tests > draw every type of shape > [end of test] history 1`]
           "updated": 1,
           "version": 2,
           "versionNonce": 453191,
-          "width": 20,
-          "x": 10,
-          "y": -10,
+          "width": 200,
+          "x": 2660,
+          "y": 1200,
         },
         {
           "angle": 0,
@@ -7087,7 +6302,7 @@ exports[`regression tests > draw every type of shape > [end of test] history 1`]
           "fillStyle": "hachure",
           "frameId": null,
           "groupIds": [],
-          "height": 10,
+          "height": 100,
           "id": "id1",
           "isDeleted": false,
           "link": null,
@@ -7105,9 +6320,9 @@ exports[`regression tests > draw every type of shape > [end of test] history 1`]
           "updated": 1,
           "version": 2,
           "versionNonce": 1116226695,
-          "width": 20,
-          "x": 40,
-          "y": -10,
+          "width": 200,
+          "x": 2960,
+          "y": 1200,
         },
         {
           "angle": 0,
@@ -7116,7 +6331,7 @@ exports[`regression tests > draw every type of shape > [end of test] history 1`]
           "fillStyle": "hachure",
           "frameId": null,
           "groupIds": [],
-          "height": 10,
+          "height": 100,
           "id": "id2",
           "isDeleted": false,
           "link": null,
@@ -7134,9 +6349,9 @@ exports[`regression tests > draw every type of shape > [end of test] history 1`]
           "updated": 1,
           "version": 2,
           "versionNonce": 1604849351,
-          "width": 20,
-          "x": 70,
-          "y": -10,
+          "width": 200,
+          "x": 3260,
+          "y": 1200,
         },
       ],
     },
@@ -7159,7 +6374,7 @@ exports[`regression tests > draw every type of shape > [end of test] history 1`]
           "fillStyle": "hachure",
           "frameId": null,
           "groupIds": [],
-          "height": 10,
+          "height": 100,
           "id": "id0",
           "isDeleted": false,
           "link": null,
@@ -7177,9 +6392,9 @@ exports[`regression tests > draw every type of shape > [end of test] history 1`]
           "updated": 1,
           "version": 2,
           "versionNonce": 453191,
-          "width": 20,
-          "x": 10,
-          "y": -10,
+          "width": 200,
+          "x": 2660,
+          "y": 1200,
         },
         {
           "angle": 0,
@@ -7188,7 +6403,7 @@ exports[`regression tests > draw every type of shape > [end of test] history 1`]
           "fillStyle": "hachure",
           "frameId": null,
           "groupIds": [],
-          "height": 10,
+          "height": 100,
           "id": "id1",
           "isDeleted": false,
           "link": null,
@@ -7206,9 +6421,9 @@ exports[`regression tests > draw every type of shape > [end of test] history 1`]
           "updated": 1,
           "version": 2,
           "versionNonce": 1116226695,
-          "width": 20,
-          "x": 40,
-          "y": -10,
+          "width": 200,
+          "x": 2960,
+          "y": 1200,
         },
         {
           "angle": 0,
@@ -7217,7 +6432,7 @@ exports[`regression tests > draw every type of shape > [end of test] history 1`]
           "fillStyle": "hachure",
           "frameId": null,
           "groupIds": [],
-          "height": 10,
+          "height": 100,
           "id": "id2",
           "isDeleted": false,
           "link": null,
@@ -7235,9 +6450,9 @@ exports[`regression tests > draw every type of shape > [end of test] history 1`]
           "updated": 1,
           "version": 2,
           "versionNonce": 1604849351,
-          "width": 20,
-          "x": 70,
-          "y": -10,
+          "width": 200,
+          "x": 3260,
+          "y": 1200,
         },
         {
           "angle": 0,
@@ -7248,7 +6463,7 @@ exports[`regression tests > draw every type of shape > [end of test] history 1`]
           "fillStyle": "hachure",
           "frameId": null,
           "groupIds": [],
-          "height": 10,
+          "height": 100,
           "id": "id3",
           "isDeleted": false,
           "lastCommittedPoint": null,
@@ -7261,8 +6476,8 @@ exports[`regression tests > draw every type of shape > [end of test] history 1`]
               0,
             ],
             [
-              50,
-              10,
+              500,
+              100,
             ],
           ],
           "roughness": 1,
@@ -7279,9 +6494,9 @@ exports[`regression tests > draw every type of shape > [end of test] history 1`]
           "updated": 1,
           "version": 3,
           "versionNonce": 81784553,
-          "width": 50,
-          "x": 130,
-          "y": -10,
+          "width": 500,
+          "x": 3860,
+          "y": 1200,
         },
       ],
     },
@@ -7304,7 +6519,7 @@ exports[`regression tests > draw every type of shape > [end of test] history 1`]
           "fillStyle": "hachure",
           "frameId": null,
           "groupIds": [],
-          "height": 10,
+          "height": 100,
           "id": "id0",
           "isDeleted": false,
           "link": null,
@@ -7322,9 +6537,9 @@ exports[`regression tests > draw every type of shape > [end of test] history 1`]
           "updated": 1,
           "version": 2,
           "versionNonce": 453191,
-          "width": 20,
-          "x": 10,
-          "y": -10,
+          "width": 200,
+          "x": 2660,
+          "y": 1200,
         },
         {
           "angle": 0,
@@ -7333,7 +6548,7 @@ exports[`regression tests > draw every type of shape > [end of test] history 1`]
           "fillStyle": "hachure",
           "frameId": null,
           "groupIds": [],
-          "height": 10,
+          "height": 100,
           "id": "id1",
           "isDeleted": false,
           "link": null,
@@ -7351,9 +6566,9 @@ exports[`regression tests > draw every type of shape > [end of test] history 1`]
           "updated": 1,
           "version": 2,
           "versionNonce": 1116226695,
-          "width": 20,
-          "x": 40,
-          "y": -10,
+          "width": 200,
+          "x": 2960,
+          "y": 1200,
         },
         {
           "angle": 0,
@@ -7362,7 +6577,7 @@ exports[`regression tests > draw every type of shape > [end of test] history 1`]
           "fillStyle": "hachure",
           "frameId": null,
           "groupIds": [],
-          "height": 10,
+          "height": 100,
           "id": "id2",
           "isDeleted": false,
           "link": null,
@@ -7380,9 +6595,9 @@ exports[`regression tests > draw every type of shape > [end of test] history 1`]
           "updated": 1,
           "version": 2,
           "versionNonce": 1604849351,
-          "width": 20,
-          "x": 70,
-          "y": -10,
+          "width": 200,
+          "x": 3260,
+          "y": 1200,
         },
         {
           "angle": 0,
@@ -7393,7 +6608,7 @@ exports[`regression tests > draw every type of shape > [end of test] history 1`]
           "fillStyle": "hachure",
           "frameId": null,
           "groupIds": [],
-          "height": 10,
+          "height": 100,
           "id": "id3",
           "isDeleted": false,
           "lastCommittedPoint": null,
@@ -7406,8 +6621,8 @@ exports[`regression tests > draw every type of shape > [end of test] history 1`]
               0,
             ],
             [
-              50,
-              10,
+              500,
+              100,
             ],
           ],
           "roughness": 1,
@@ -7424,9 +6639,9 @@ exports[`regression tests > draw every type of shape > [end of test] history 1`]
           "updated": 1,
           "version": 3,
           "versionNonce": 81784553,
-          "width": 50,
-          "x": 130,
-          "y": -10,
+          "width": 500,
+          "x": 3860,
+          "y": 1200,
         },
         {
           "angle": 0,
@@ -7437,7 +6652,7 @@ exports[`regression tests > draw every type of shape > [end of test] history 1`]
           "fillStyle": "hachure",
           "frameId": null,
           "groupIds": [],
-          "height": 10,
+          "height": 100,
           "id": "id4",
           "isDeleted": false,
           "lastCommittedPoint": null,
@@ -7450,8 +6665,8 @@ exports[`regression tests > draw every type of shape > [end of test] history 1`]
               0,
             ],
             [
-              50,
-              10,
+              500,
+              100,
             ],
           ],
           "roughness": 1,
@@ -7468,9 +6683,9 @@ exports[`regression tests > draw every type of shape > [end of test] history 1`]
           "updated": 1,
           "version": 3,
           "versionNonce": 289600103,
-          "width": 50,
-          "x": 220,
-          "y": -10,
+          "width": 500,
+          "x": 4760,
+          "y": 1200,
         },
       ],
     },
@@ -7493,7 +6708,7 @@ exports[`regression tests > draw every type of shape > [end of test] history 1`]
           "fillStyle": "hachure",
           "frameId": null,
           "groupIds": [],
-          "height": 10,
+          "height": 100,
           "id": "id0",
           "isDeleted": false,
           "link": null,
@@ -7511,9 +6726,9 @@ exports[`regression tests > draw every type of shape > [end of test] history 1`]
           "updated": 1,
           "version": 2,
           "versionNonce": 453191,
-          "width": 20,
-          "x": 10,
-          "y": -10,
+          "width": 200,
+          "x": 2660,
+          "y": 1200,
         },
         {
           "angle": 0,
@@ -7522,7 +6737,7 @@ exports[`regression tests > draw every type of shape > [end of test] history 1`]
           "fillStyle": "hachure",
           "frameId": null,
           "groupIds": [],
-          "height": 10,
+          "height": 100,
           "id": "id1",
           "isDeleted": false,
           "link": null,
@@ -7540,9 +6755,9 @@ exports[`regression tests > draw every type of shape > [end of test] history 1`]
           "updated": 1,
           "version": 2,
           "versionNonce": 1116226695,
-          "width": 20,
-          "x": 40,
-          "y": -10,
+          "width": 200,
+          "x": 2960,
+          "y": 1200,
         },
         {
           "angle": 0,
@@ -7551,7 +6766,7 @@ exports[`regression tests > draw every type of shape > [end of test] history 1`]
           "fillStyle": "hachure",
           "frameId": null,
           "groupIds": [],
-          "height": 10,
+          "height": 100,
           "id": "id2",
           "isDeleted": false,
           "link": null,
@@ -7569,9 +6784,9 @@ exports[`regression tests > draw every type of shape > [end of test] history 1`]
           "updated": 1,
           "version": 2,
           "versionNonce": 1604849351,
-          "width": 20,
-          "x": 70,
-          "y": -10,
+          "width": 200,
+          "x": 3260,
+          "y": 1200,
         },
         {
           "angle": 0,
@@ -7582,7 +6797,7 @@ exports[`regression tests > draw every type of shape > [end of test] history 1`]
           "fillStyle": "hachure",
           "frameId": null,
           "groupIds": [],
-          "height": 10,
+          "height": 100,
           "id": "id3",
           "isDeleted": false,
           "lastCommittedPoint": null,
@@ -7595,8 +6810,8 @@ exports[`regression tests > draw every type of shape > [end of test] history 1`]
               0,
             ],
             [
-              50,
-              10,
+              500,
+              100,
             ],
           ],
           "roughness": 1,
@@ -7613,9 +6828,9 @@ exports[`regression tests > draw every type of shape > [end of test] history 1`]
           "updated": 1,
           "version": 3,
           "versionNonce": 81784553,
-          "width": 50,
-          "x": 130,
-          "y": -10,
+          "width": 500,
+          "x": 3860,
+          "y": 1200,
         },
         {
           "angle": 0,
@@ -7626,7 +6841,7 @@ exports[`regression tests > draw every type of shape > [end of test] history 1`]
           "fillStyle": "hachure",
           "frameId": null,
           "groupIds": [],
-          "height": 10,
+          "height": 100,
           "id": "id4",
           "isDeleted": false,
           "lastCommittedPoint": null,
@@ -7639,8 +6854,8 @@ exports[`regression tests > draw every type of shape > [end of test] history 1`]
               0,
             ],
             [
-              50,
-              10,
+              500,
+              100,
             ],
           ],
           "roughness": 1,
@@ -7657,9 +6872,9 @@ exports[`regression tests > draw every type of shape > [end of test] history 1`]
           "updated": 1,
           "version": 3,
           "versionNonce": 289600103,
-          "width": 50,
-          "x": 220,
-          "y": -10,
+          "width": 500,
+          "x": 4760,
+          "y": 1200,
         },
         {
           "angle": 0,
@@ -7670,12 +6885,12 @@ exports[`regression tests > draw every type of shape > [end of test] history 1`]
           "fillStyle": "hachure",
           "frameId": null,
           "groupIds": [],
-          "height": 10,
+          "height": 100,
           "id": "id5",
           "isDeleted": false,
           "lastCommittedPoint": [
-            50,
-            10,
+            500,
+            100,
           ],
           "link": null,
           "locked": false,
@@ -7686,8 +6901,8 @@ exports[`regression tests > draw every type of shape > [end of test] history 1`]
               0,
             ],
             [
-              50,
-              10,
+              500,
+              100,
             ],
           ],
           "roughness": 1,
@@ -7704,9 +6919,9 @@ exports[`regression tests > draw every type of shape > [end of test] history 1`]
           "updated": 1,
           "version": 5,
           "versionNonce": 1349943049,
-          "width": 50,
-          "x": 310,
-          "y": -10,
+          "width": 500,
+          "x": 5660,
+          "y": 1200,
         },
       ],
     },
@@ -7729,7 +6944,7 @@ exports[`regression tests > draw every type of shape > [end of test] history 1`]
           "fillStyle": "hachure",
           "frameId": null,
           "groupIds": [],
-          "height": 10,
+          "height": 100,
           "id": "id0",
           "isDeleted": false,
           "link": null,
@@ -7747,9 +6962,9 @@ exports[`regression tests > draw every type of shape > [end of test] history 1`]
           "updated": 1,
           "version": 2,
           "versionNonce": 453191,
-          "width": 20,
-          "x": 10,
-          "y": -10,
+          "width": 200,
+          "x": 2660,
+          "y": 1200,
         },
         {
           "angle": 0,
@@ -7758,7 +6973,7 @@ exports[`regression tests > draw every type of shape > [end of test] history 1`]
           "fillStyle": "hachure",
           "frameId": null,
           "groupIds": [],
-          "height": 10,
+          "height": 100,
           "id": "id1",
           "isDeleted": false,
           "link": null,
@@ -7776,9 +6991,9 @@ exports[`regression tests > draw every type of shape > [end of test] history 1`]
           "updated": 1,
           "version": 2,
           "versionNonce": 1116226695,
-          "width": 20,
-          "x": 40,
-          "y": -10,
+          "width": 200,
+          "x": 2960,
+          "y": 1200,
         },
         {
           "angle": 0,
@@ -7787,7 +7002,7 @@ exports[`regression tests > draw every type of shape > [end of test] history 1`]
           "fillStyle": "hachure",
           "frameId": null,
           "groupIds": [],
-          "height": 10,
+          "height": 100,
           "id": "id2",
           "isDeleted": false,
           "link": null,
@@ -7805,9 +7020,9 @@ exports[`regression tests > draw every type of shape > [end of test] history 1`]
           "updated": 1,
           "version": 2,
           "versionNonce": 1604849351,
-          "width": 20,
-          "x": 70,
-          "y": -10,
+          "width": 200,
+          "x": 3260,
+          "y": 1200,
         },
         {
           "angle": 0,
@@ -7818,7 +7033,7 @@ exports[`regression tests > draw every type of shape > [end of test] history 1`]
           "fillStyle": "hachure",
           "frameId": null,
           "groupIds": [],
-          "height": 10,
+          "height": 100,
           "id": "id3",
           "isDeleted": false,
           "lastCommittedPoint": null,
@@ -7831,8 +7046,8 @@ exports[`regression tests > draw every type of shape > [end of test] history 1`]
               0,
             ],
             [
-              50,
-              10,
+              500,
+              100,
             ],
           ],
           "roughness": 1,
@@ -7849,9 +7064,9 @@ exports[`regression tests > draw every type of shape > [end of test] history 1`]
           "updated": 1,
           "version": 3,
           "versionNonce": 81784553,
-          "width": 50,
-          "x": 130,
-          "y": -10,
+          "width": 500,
+          "x": 3860,
+          "y": 1200,
         },
         {
           "angle": 0,
@@ -7862,7 +7077,7 @@ exports[`regression tests > draw every type of shape > [end of test] history 1`]
           "fillStyle": "hachure",
           "frameId": null,
           "groupIds": [],
-          "height": 10,
+          "height": 100,
           "id": "id4",
           "isDeleted": false,
           "lastCommittedPoint": null,
@@ -7875,8 +7090,8 @@ exports[`regression tests > draw every type of shape > [end of test] history 1`]
               0,
             ],
             [
-              50,
-              10,
+              500,
+              100,
             ],
           ],
           "roughness": 1,
@@ -7893,9 +7108,9 @@ exports[`regression tests > draw every type of shape > [end of test] history 1`]
           "updated": 1,
           "version": 3,
           "versionNonce": 289600103,
-          "width": 50,
-          "x": 220,
-          "y": -10,
+          "width": 500,
+          "x": 4760,
+          "y": 1200,
         },
         {
           "angle": 0,
@@ -7906,12 +7121,12 @@ exports[`regression tests > draw every type of shape > [end of test] history 1`]
           "fillStyle": "hachure",
           "frameId": null,
           "groupIds": [],
-          "height": 20,
+          "height": 200,
           "id": "id5",
           "isDeleted": false,
           "lastCommittedPoint": [
-            80,
-            20,
+            800,
+            200,
           ],
           "link": null,
           "locked": false,
@@ -7922,12 +7137,12 @@ exports[`regression tests > draw every type of shape > [end of test] history 1`]
               0,
             ],
             [
-              50,
-              10,
+              500,
+              100,
             ],
             [
-              80,
-              20,
+              800,
+              200,
             ],
           ],
           "roughness": 1,
@@ -7944,9 +7159,9 @@ exports[`regression tests > draw every type of shape > [end of test] history 1`]
           "updated": 1,
           "version": 7,
           "versionNonce": 1292308681,
-          "width": 80,
-          "x": 310,
-          "y": -10,
+          "width": 800,
+          "x": 5660,
+          "y": 1200,
         },
       ],
     },
@@ -7969,7 +7184,7 @@ exports[`regression tests > draw every type of shape > [end of test] history 1`]
           "fillStyle": "hachure",
           "frameId": null,
           "groupIds": [],
-          "height": 10,
+          "height": 100,
           "id": "id0",
           "isDeleted": false,
           "link": null,
@@ -7987,9 +7202,9 @@ exports[`regression tests > draw every type of shape > [end of test] history 1`]
           "updated": 1,
           "version": 2,
           "versionNonce": 453191,
-          "width": 20,
-          "x": 10,
-          "y": -10,
+          "width": 200,
+          "x": 2660,
+          "y": 1200,
         },
         {
           "angle": 0,
@@ -7998,7 +7213,7 @@ exports[`regression tests > draw every type of shape > [end of test] history 1`]
           "fillStyle": "hachure",
           "frameId": null,
           "groupIds": [],
-          "height": 10,
+          "height": 100,
           "id": "id1",
           "isDeleted": false,
           "link": null,
@@ -8016,9 +7231,9 @@ exports[`regression tests > draw every type of shape > [end of test] history 1`]
           "updated": 1,
           "version": 2,
           "versionNonce": 1116226695,
-          "width": 20,
-          "x": 40,
-          "y": -10,
+          "width": 200,
+          "x": 2960,
+          "y": 1200,
         },
         {
           "angle": 0,
@@ -8027,7 +7242,7 @@ exports[`regression tests > draw every type of shape > [end of test] history 1`]
           "fillStyle": "hachure",
           "frameId": null,
           "groupIds": [],
-          "height": 10,
+          "height": 100,
           "id": "id2",
           "isDeleted": false,
           "link": null,
@@ -8045,9 +7260,9 @@ exports[`regression tests > draw every type of shape > [end of test] history 1`]
           "updated": 1,
           "version": 2,
           "versionNonce": 1604849351,
-          "width": 20,
-          "x": 70,
-          "y": -10,
+          "width": 200,
+          "x": 3260,
+          "y": 1200,
         },
         {
           "angle": 0,
@@ -8058,7 +7273,7 @@ exports[`regression tests > draw every type of shape > [end of test] history 1`]
           "fillStyle": "hachure",
           "frameId": null,
           "groupIds": [],
-          "height": 10,
+          "height": 100,
           "id": "id3",
           "isDeleted": false,
           "lastCommittedPoint": null,
@@ -8071,8 +7286,8 @@ exports[`regression tests > draw every type of shape > [end of test] history 1`]
               0,
             ],
             [
-              50,
-              10,
+              500,
+              100,
             ],
           ],
           "roughness": 1,
@@ -8089,9 +7304,9 @@ exports[`regression tests > draw every type of shape > [end of test] history 1`]
           "updated": 1,
           "version": 3,
           "versionNonce": 81784553,
-          "width": 50,
-          "x": 130,
-          "y": -10,
+          "width": 500,
+          "x": 3860,
+          "y": 1200,
         },
         {
           "angle": 0,
@@ -8102,7 +7317,7 @@ exports[`regression tests > draw every type of shape > [end of test] history 1`]
           "fillStyle": "hachure",
           "frameId": null,
           "groupIds": [],
-          "height": 10,
+          "height": 100,
           "id": "id4",
           "isDeleted": false,
           "lastCommittedPoint": null,
@@ -8115,8 +7330,8 @@ exports[`regression tests > draw every type of shape > [end of test] history 1`]
               0,
             ],
             [
-              50,
-              10,
+              500,
+              100,
             ],
           ],
           "roughness": 1,
@@ -8133,9 +7348,9 @@ exports[`regression tests > draw every type of shape > [end of test] history 1`]
           "updated": 1,
           "version": 3,
           "versionNonce": 289600103,
-          "width": 50,
-          "x": 220,
-          "y": -10,
+          "width": 500,
+          "x": 4760,
+          "y": 1200,
         },
         {
           "angle": 0,
@@ -8146,12 +7361,12 @@ exports[`regression tests > draw every type of shape > [end of test] history 1`]
           "fillStyle": "hachure",
           "frameId": null,
           "groupIds": [],
-          "height": 20,
+          "height": 200,
           "id": "id5",
           "isDeleted": false,
           "lastCommittedPoint": [
-            80,
-            20,
+            800,
+            200,
           ],
           "link": null,
           "locked": false,
@@ -8162,12 +7377,12 @@ exports[`regression tests > draw every type of shape > [end of test] history 1`]
               0,
             ],
             [
-              50,
-              10,
+              500,
+              100,
             ],
             [
-              80,
-              20,
+              800,
+              200,
             ],
           ],
           "roughness": 1,
@@ -8184,9 +7399,9 @@ exports[`regression tests > draw every type of shape > [end of test] history 1`]
           "updated": 1,
           "version": 7,
           "versionNonce": 1292308681,
-          "width": 80,
-          "x": 310,
-          "y": -10,
+          "width": 800,
+          "x": 5660,
+          "y": 1200,
         },
         {
           "angle": 0,
@@ -8197,12 +7412,12 @@ exports[`regression tests > draw every type of shape > [end of test] history 1`]
           "fillStyle": "hachure",
           "frameId": null,
           "groupIds": [],
-          "height": 10,
+          "height": 100,
           "id": "id6",
           "isDeleted": false,
           "lastCommittedPoint": [
-            50,
-            10,
+            500,
+            100,
           ],
           "link": null,
           "locked": false,
@@ -8213,8 +7428,8 @@ exports[`regression tests > draw every type of shape > [end of test] history 1`]
               0,
             ],
             [
-              50,
-              10,
+              500,
+              100,
             ],
           ],
           "roughness": 1,
@@ -8231,9 +7446,9 @@ exports[`regression tests > draw every type of shape > [end of test] history 1`]
           "updated": 1,
           "version": 5,
           "versionNonce": 1177973545,
-          "width": 50,
-          "x": 430,
-          "y": -10,
+          "width": 500,
+          "x": 6860,
+          "y": 1200,
         },
       ],
     },
@@ -8256,7 +7471,7 @@ exports[`regression tests > draw every type of shape > [end of test] history 1`]
           "fillStyle": "hachure",
           "frameId": null,
           "groupIds": [],
-          "height": 10,
+          "height": 100,
           "id": "id0",
           "isDeleted": false,
           "link": null,
@@ -8274,9 +7489,9 @@ exports[`regression tests > draw every type of shape > [end of test] history 1`]
           "updated": 1,
           "version": 2,
           "versionNonce": 453191,
-          "width": 20,
-          "x": 10,
-          "y": -10,
+          "width": 200,
+          "x": 2660,
+          "y": 1200,
         },
         {
           "angle": 0,
@@ -8285,7 +7500,7 @@ exports[`regression tests > draw every type of shape > [end of test] history 1`]
           "fillStyle": "hachure",
           "frameId": null,
           "groupIds": [],
-          "height": 10,
+          "height": 100,
           "id": "id1",
           "isDeleted": false,
           "link": null,
@@ -8303,9 +7518,9 @@ exports[`regression tests > draw every type of shape > [end of test] history 1`]
           "updated": 1,
           "version": 2,
           "versionNonce": 1116226695,
-          "width": 20,
-          "x": 40,
-          "y": -10,
+          "width": 200,
+          "x": 2960,
+          "y": 1200,
         },
         {
           "angle": 0,
@@ -8314,7 +7529,7 @@ exports[`regression tests > draw every type of shape > [end of test] history 1`]
           "fillStyle": "hachure",
           "frameId": null,
           "groupIds": [],
-          "height": 10,
+          "height": 100,
           "id": "id2",
           "isDeleted": false,
           "link": null,
@@ -8332,9 +7547,9 @@ exports[`regression tests > draw every type of shape > [end of test] history 1`]
           "updated": 1,
           "version": 2,
           "versionNonce": 1604849351,
-          "width": 20,
-          "x": 70,
-          "y": -10,
+          "width": 200,
+          "x": 3260,
+          "y": 1200,
         },
         {
           "angle": 0,
@@ -8345,7 +7560,7 @@ exports[`regression tests > draw every type of shape > [end of test] history 1`]
           "fillStyle": "hachure",
           "frameId": null,
           "groupIds": [],
-          "height": 10,
+          "height": 100,
           "id": "id3",
           "isDeleted": false,
           "lastCommittedPoint": null,
@@ -8358,8 +7573,8 @@ exports[`regression tests > draw every type of shape > [end of test] history 1`]
               0,
             ],
             [
-              50,
-              10,
+              500,
+              100,
             ],
           ],
           "roughness": 1,
@@ -8376,9 +7591,9 @@ exports[`regression tests > draw every type of shape > [end of test] history 1`]
           "updated": 1,
           "version": 3,
           "versionNonce": 81784553,
-          "width": 50,
-          "x": 130,
-          "y": -10,
+          "width": 500,
+          "x": 3860,
+          "y": 1200,
         },
         {
           "angle": 0,
@@ -8389,7 +7604,7 @@ exports[`regression tests > draw every type of shape > [end of test] history 1`]
           "fillStyle": "hachure",
           "frameId": null,
           "groupIds": [],
-          "height": 10,
+          "height": 100,
           "id": "id4",
           "isDeleted": false,
           "lastCommittedPoint": null,
@@ -8402,8 +7617,8 @@ exports[`regression tests > draw every type of shape > [end of test] history 1`]
               0,
             ],
             [
-              50,
-              10,
+              500,
+              100,
             ],
           ],
           "roughness": 1,
@@ -8420,9 +7635,9 @@ exports[`regression tests > draw every type of shape > [end of test] history 1`]
           "updated": 1,
           "version": 3,
           "versionNonce": 289600103,
-          "width": 50,
-          "x": 220,
-          "y": -10,
+          "width": 500,
+          "x": 4760,
+          "y": 1200,
         },
         {
           "angle": 0,
@@ -8433,12 +7648,12 @@ exports[`regression tests > draw every type of shape > [end of test] history 1`]
           "fillStyle": "hachure",
           "frameId": null,
           "groupIds": [],
-          "height": 20,
+          "height": 200,
           "id": "id5",
           "isDeleted": false,
           "lastCommittedPoint": [
-            80,
-            20,
+            800,
+            200,
           ],
           "link": null,
           "locked": false,
@@ -8449,12 +7664,12 @@ exports[`regression tests > draw every type of shape > [end of test] history 1`]
               0,
             ],
             [
-              50,
-              10,
+              500,
+              100,
             ],
             [
-              80,
-              20,
+              800,
+              200,
             ],
           ],
           "roughness": 1,
@@ -8471,9 +7686,9 @@ exports[`regression tests > draw every type of shape > [end of test] history 1`]
           "updated": 1,
           "version": 7,
           "versionNonce": 1292308681,
-          "width": 80,
-          "x": 310,
-          "y": -10,
+          "width": 800,
+          "x": 5660,
+          "y": 1200,
         },
         {
           "angle": 0,
@@ -8484,12 +7699,12 @@ exports[`regression tests > draw every type of shape > [end of test] history 1`]
           "fillStyle": "hachure",
           "frameId": null,
           "groupIds": [],
-          "height": 20,
+          "height": 200,
           "id": "id6",
           "isDeleted": false,
           "lastCommittedPoint": [
-            80,
-            20,
+            800,
+            200,
           ],
           "link": null,
           "locked": false,
@@ -8500,12 +7715,12 @@ exports[`regression tests > draw every type of shape > [end of test] history 1`]
               0,
             ],
             [
-              50,
-              10,
+              500,
+              100,
             ],
             [
-              80,
-              20,
+              800,
+              200,
             ],
           ],
           "roughness": 1,
@@ -8522,9 +7737,9 @@ exports[`regression tests > draw every type of shape > [end of test] history 1`]
           "updated": 1,
           "version": 7,
           "versionNonce": 271613161,
-          "width": 80,
-          "x": 430,
-          "y": -10,
+          "width": 800,
+          "x": 6860,
+          "y": 1200,
         },
       ],
     },
@@ -8545,7 +7760,7 @@ exports[`regression tests > draw every type of shape > [end of test] history 1`]
           "fillStyle": "hachure",
           "frameId": null,
           "groupIds": [],
-          "height": 10,
+          "height": 100,
           "id": "id0",
           "isDeleted": false,
           "link": null,
@@ -8563,9 +7778,9 @@ exports[`regression tests > draw every type of shape > [end of test] history 1`]
           "updated": 1,
           "version": 2,
           "versionNonce": 453191,
-          "width": 20,
-          "x": 10,
-          "y": -10,
+          "width": 200,
+          "x": 2660,
+          "y": 1200,
         },
         {
           "angle": 0,
@@ -8574,7 +7789,7 @@ exports[`regression tests > draw every type of shape > [end of test] history 1`]
           "fillStyle": "hachure",
           "frameId": null,
           "groupIds": [],
-          "height": 10,
+          "height": 100,
           "id": "id1",
           "isDeleted": false,
           "link": null,
@@ -8592,9 +7807,9 @@ exports[`regression tests > draw every type of shape > [end of test] history 1`]
           "updated": 1,
           "version": 2,
           "versionNonce": 1116226695,
-          "width": 20,
-          "x": 40,
-          "y": -10,
+          "width": 200,
+          "x": 2960,
+          "y": 1200,
         },
         {
           "angle": 0,
@@ -8603,7 +7818,7 @@ exports[`regression tests > draw every type of shape > [end of test] history 1`]
           "fillStyle": "hachure",
           "frameId": null,
           "groupIds": [],
-          "height": 10,
+          "height": 100,
           "id": "id2",
           "isDeleted": false,
           "link": null,
@@ -8621,9 +7836,9 @@ exports[`regression tests > draw every type of shape > [end of test] history 1`]
           "updated": 1,
           "version": 2,
           "versionNonce": 1604849351,
-          "width": 20,
-          "x": 70,
-          "y": -10,
+          "width": 200,
+          "x": 3260,
+          "y": 1200,
         },
         {
           "angle": 0,
@@ -8634,7 +7849,7 @@ exports[`regression tests > draw every type of shape > [end of test] history 1`]
           "fillStyle": "hachure",
           "frameId": null,
           "groupIds": [],
-          "height": 10,
+          "height": 100,
           "id": "id3",
           "isDeleted": false,
           "lastCommittedPoint": null,
@@ -8647,8 +7862,8 @@ exports[`regression tests > draw every type of shape > [end of test] history 1`]
               0,
             ],
             [
-              50,
-              10,
+              500,
+              100,
             ],
           ],
           "roughness": 1,
@@ -8665,9 +7880,9 @@ exports[`regression tests > draw every type of shape > [end of test] history 1`]
           "updated": 1,
           "version": 3,
           "versionNonce": 81784553,
-          "width": 50,
-          "x": 130,
-          "y": -10,
+          "width": 500,
+          "x": 3860,
+          "y": 1200,
         },
         {
           "angle": 0,
@@ -8678,7 +7893,7 @@ exports[`regression tests > draw every type of shape > [end of test] history 1`]
           "fillStyle": "hachure",
           "frameId": null,
           "groupIds": [],
-          "height": 10,
+          "height": 100,
           "id": "id4",
           "isDeleted": false,
           "lastCommittedPoint": null,
@@ -8691,8 +7906,8 @@ exports[`regression tests > draw every type of shape > [end of test] history 1`]
               0,
             ],
             [
-              50,
-              10,
+              500,
+              100,
             ],
           ],
           "roughness": 1,
@@ -8709,9 +7924,9 @@ exports[`regression tests > draw every type of shape > [end of test] history 1`]
           "updated": 1,
           "version": 3,
           "versionNonce": 289600103,
-          "width": 50,
-          "x": 220,
-          "y": -10,
+          "width": 500,
+          "x": 4760,
+          "y": 1200,
         },
         {
           "angle": 0,
@@ -8722,12 +7937,12 @@ exports[`regression tests > draw every type of shape > [end of test] history 1`]
           "fillStyle": "hachure",
           "frameId": null,
           "groupIds": [],
-          "height": 20,
+          "height": 200,
           "id": "id5",
           "isDeleted": false,
           "lastCommittedPoint": [
-            80,
-            20,
+            800,
+            200,
           ],
           "link": null,
           "locked": false,
@@ -8738,12 +7953,12 @@ exports[`regression tests > draw every type of shape > [end of test] history 1`]
               0,
             ],
             [
-              50,
-              10,
+              500,
+              100,
             ],
             [
-              80,
-              20,
+              800,
+              200,
             ],
           ],
           "roughness": 1,
@@ -8760,9 +7975,9 @@ exports[`regression tests > draw every type of shape > [end of test] history 1`]
           "updated": 1,
           "version": 7,
           "versionNonce": 1292308681,
-          "width": 80,
-          "x": 310,
-          "y": -10,
+          "width": 800,
+          "x": 5660,
+          "y": 1200,
         },
         {
           "angle": 0,
@@ -8773,12 +7988,12 @@ exports[`regression tests > draw every type of shape > [end of test] history 1`]
           "fillStyle": "hachure",
           "frameId": null,
           "groupIds": [],
-          "height": 20,
+          "height": 200,
           "id": "id6",
           "isDeleted": false,
           "lastCommittedPoint": [
-            80,
-            20,
+            800,
+            200,
           ],
           "link": null,
           "locked": false,
@@ -8789,12 +8004,12 @@ exports[`regression tests > draw every type of shape > [end of test] history 1`]
               0,
             ],
             [
-              50,
-              10,
+              500,
+              100,
             ],
             [
-              80,
-              20,
+              800,
+              200,
             ],
           ],
           "roughness": 1,
@@ -8811,9 +8026,9 @@ exports[`regression tests > draw every type of shape > [end of test] history 1`]
           "updated": 1,
           "version": 7,
           "versionNonce": 271613161,
-          "width": 80,
-          "x": 430,
-          "y": -10,
+          "width": 800,
+          "x": 6860,
+          "y": 1200,
         },
         {
           "angle": 0,
@@ -8822,12 +8037,12 @@ exports[`regression tests > draw every type of shape > [end of test] history 1`]
           "fillStyle": "hachure",
           "frameId": null,
           "groupIds": [],
-          "height": 10,
+          "height": 100,
           "id": "id7",
           "isDeleted": false,
           "lastCommittedPoint": [
-            50,
-            10,
+            500,
+            100,
           ],
           "link": null,
           "locked": false,
@@ -8838,12 +8053,12 @@ exports[`regression tests > draw every type of shape > [end of test] history 1`]
               0,
             ],
             [
-              50,
-              10,
+              500,
+              100,
             ],
             [
-              50,
-              10,
+              500,
+              100,
             ],
           ],
           "pressures": [
@@ -8862,9 +8077,9 @@ exports[`regression tests > draw every type of shape > [end of test] history 1`]
           "updated": 1,
           "version": 4,
           "versionNonce": 1439318121,
-          "width": 50,
-          "x": 550,
-          "y": -10,
+          "width": 500,
+          "x": 8060,
+          "y": 1200,
         },
       ],
     },
@@ -8949,9 +8164,15 @@ exports[`regression tests > given a group of selected elements with an element t
     "id2": true,
   },
   "resizingElement": null,
-  "scrollConstraints": null,
-  "scrollX": 0,
-  "scrollY": 0,
+  "scrollConstraints": {
+    "height": 1300,
+    "lockZoom": false,
+    "width": 2560,
+    "x": 0,
+    "y": 0,
+  },
+  "scrollX": -2560,
+  "scrollY": -1300,
   "scrolledOutside": false,
   "selectedElementIds": {
     "id1": true,
@@ -8973,7 +8194,7 @@ exports[`regression tests > given a group of selected elements with an element t
   "width": 1024,
   "zenModeEnabled": false,
   "zoom": {
-    "value": 1,
+    "value": 0.1,
   },
 }
 `;
@@ -9013,7 +8234,7 @@ exports[`regression tests > given a group of selected elements with an element t
           "fillStyle": "hachure",
           "frameId": null,
           "groupIds": [],
-          "height": 10,
+          "height": 100,
           "id": "id0",
           "isDeleted": false,
           "link": null,
@@ -9031,9 +8252,9 @@ exports[`regression tests > given a group of selected elements with an element t
           "updated": 1,
           "version": 2,
           "versionNonce": 453191,
-          "width": 10,
-          "x": 0,
-          "y": 0,
+          "width": 100,
+          "x": 2560,
+          "y": 1300,
         },
       ],
     },
@@ -9056,7 +8277,7 @@ exports[`regression tests > given a group of selected elements with an element t
           "fillStyle": "hachure",
           "frameId": null,
           "groupIds": [],
-          "height": 10,
+          "height": 100,
           "id": "id0",
           "isDeleted": false,
           "link": null,
@@ -9074,9 +8295,9 @@ exports[`regression tests > given a group of selected elements with an element t
           "updated": 1,
           "version": 2,
           "versionNonce": 453191,
-          "width": 10,
-          "x": 0,
-          "y": 0,
+          "width": 100,
+          "x": 2560,
+          "y": 1300,
         },
         {
           "angle": 0,
@@ -9085,7 +8306,7 @@ exports[`regression tests > given a group of selected elements with an element t
           "fillStyle": "hachure",
           "frameId": null,
           "groupIds": [],
-          "height": 100,
+          "height": 1000,
           "id": "id1",
           "isDeleted": false,
           "link": null,
@@ -9103,9 +8324,9 @@ exports[`regression tests > given a group of selected elements with an element t
           "updated": 1,
           "version": 2,
           "versionNonce": 1116226695,
-          "width": 100,
-          "x": 110,
-          "y": 110,
+          "width": 1000,
+          "x": 3660,
+          "y": 2400,
         },
       ],
     },
@@ -9128,7 +8349,7 @@ exports[`regression tests > given a group of selected elements with an element t
           "fillStyle": "hachure",
           "frameId": null,
           "groupIds": [],
-          "height": 10,
+          "height": 100,
           "id": "id0",
           "isDeleted": false,
           "link": null,
@@ -9146,9 +8367,9 @@ exports[`regression tests > given a group of selected elements with an element t
           "updated": 1,
           "version": 2,
           "versionNonce": 453191,
-          "width": 10,
-          "x": 0,
-          "y": 0,
+          "width": 100,
+          "x": 2560,
+          "y": 1300,
         },
         {
           "angle": 0,
@@ -9157,7 +8378,7 @@ exports[`regression tests > given a group of selected elements with an element t
           "fillStyle": "hachure",
           "frameId": null,
           "groupIds": [],
-          "height": 100,
+          "height": 1000,
           "id": "id1",
           "isDeleted": false,
           "link": null,
@@ -9175,9 +8396,9 @@ exports[`regression tests > given a group of selected elements with an element t
           "updated": 1,
           "version": 2,
           "versionNonce": 1116226695,
-          "width": 100,
-          "x": 110,
-          "y": 110,
+          "width": 1000,
+          "x": 3660,
+          "y": 2400,
         },
         {
           "angle": 0,
@@ -9186,7 +8407,7 @@ exports[`regression tests > given a group of selected elements with an element t
           "fillStyle": "hachure",
           "frameId": null,
           "groupIds": [],
-          "height": 100,
+          "height": 1000,
           "id": "id2",
           "isDeleted": false,
           "link": null,
@@ -9204,9 +8425,9 @@ exports[`regression tests > given a group of selected elements with an element t
           "updated": 1,
           "version": 2,
           "versionNonce": 1604849351,
-          "width": 100,
-          "x": 310,
-          "y": 310,
+          "width": 1000,
+          "x": 5660,
+          "y": 4400,
         },
       ],
     },
@@ -9290,9 +8511,15 @@ exports[`regression tests > given a selected element A and a not selected elemen
     "id0": true,
   },
   "resizingElement": null,
-  "scrollConstraints": null,
-  "scrollX": 0,
-  "scrollY": 0,
+  "scrollConstraints": {
+    "height": 1300,
+    "lockZoom": false,
+    "width": 2560,
+    "x": 0,
+    "y": 0,
+  },
+  "scrollX": -2560,
+  "scrollY": -1300,
   "scrolledOutside": false,
   "selectedElementIds": {
     "id0": true,
@@ -9315,7 +8542,7 @@ exports[`regression tests > given a selected element A and a not selected elemen
   "width": 1024,
   "zenModeEnabled": false,
   "zoom": {
-    "value": 1,
+    "value": 0.1,
   },
 }
 `;
@@ -9355,7 +8582,7 @@ exports[`regression tests > given a selected element A and a not selected elemen
           "fillStyle": "hachure",
           "frameId": null,
           "groupIds": [],
-          "height": 1000,
+          "height": 10000,
           "id": "id0",
           "isDeleted": false,
           "link": null,
@@ -9373,9 +8600,9 @@ exports[`regression tests > given a selected element A and a not selected elemen
           "updated": 1,
           "version": 2,
           "versionNonce": 401146281,
-          "width": 1000,
-          "x": 0,
-          "y": 0,
+          "width": 10000,
+          "x": 2560,
+          "y": 1300,
         },
       ],
     },
@@ -9398,7 +8625,7 @@ exports[`regression tests > given a selected element A and a not selected elemen
           "fillStyle": "hachure",
           "frameId": null,
           "groupIds": [],
-          "height": 1000,
+          "height": 10000,
           "id": "id0",
           "isDeleted": false,
           "link": null,
@@ -9416,9 +8643,9 @@ exports[`regression tests > given a selected element A and a not selected elemen
           "updated": 1,
           "version": 2,
           "versionNonce": 401146281,
-          "width": 1000,
-          "x": 0,
-          "y": 0,
+          "width": 10000,
+          "x": 2560,
+          "y": 1300,
         },
         {
           "angle": 0,
@@ -9427,7 +8654,7 @@ exports[`regression tests > given a selected element A and a not selected elemen
           "fillStyle": "hachure",
           "frameId": null,
           "groupIds": [],
-          "height": 1000,
+          "height": 10000,
           "id": "id1",
           "isDeleted": false,
           "link": null,
@@ -9445,9 +8672,9 @@ exports[`regression tests > given a selected element A and a not selected elemen
           "updated": 1,
           "version": 2,
           "versionNonce": 1014066025,
-          "width": 1000,
-          "x": 500,
-          "y": 500,
+          "width": 10000,
+          "x": 7560,
+          "y": 6300,
         },
       ],
     },
@@ -9484,9 +8711,37 @@ exports[`regression tests > given selected element A with lower z-index than uns
   "currentItemStrokeStyle": "solid",
   "currentItemStrokeWidth": 1,
   "currentItemTextAlign": "left",
-  "cursorButton": "up",
+  "cursorButton": "down",
   "defaultSidebarDockedPreference": false,
-  "draggingElement": null,
+  "draggingElement": {
+    "angle": 0,
+    "backgroundColor": "transparent",
+    "boundElements": null,
+    "fillStyle": "hachure",
+    "frameId": null,
+    "groupIds": [],
+    "height": 0,
+    "id": "id3",
+    "isDeleted": false,
+    "link": null,
+    "locked": false,
+    "opacity": 100,
+    "roughness": 1,
+    "roundness": {
+      "type": 2,
+    },
+    "seed": 2019559783,
+    "strokeColor": "#1e1e1e",
+    "strokeStyle": "solid",
+    "strokeWidth": 1,
+    "type": "selection",
+    "updated": 1,
+    "version": 1,
+    "versionNonce": 0,
+    "width": 0,
+    "x": 11560,
+    "y": 10300,
+  },
   "editingElement": null,
   "editingFrame": null,
   "editingGroupId": null,
@@ -9527,21 +8782,51 @@ exports[`regression tests > given selected element A with lower z-index than uns
   "penDetected": false,
   "penMode": false,
   "pendingImageElementId": null,
-  "previousSelectedElementIds": {
-    "id0": true,
-  },
+  "previousSelectedElementIds": {},
   "resizingElement": null,
-  "scrollConstraints": null,
-  "scrollX": 0,
-  "scrollY": 0,
-  "scrolledOutside": false,
-  "selectedElementIds": {
-    "id1": true,
+  "scrollConstraints": {
+    "height": 1300,
+    "lockZoom": false,
+    "width": 2560,
+    "x": 0,
+    "y": 0,
   },
+  "scrollX": -2560,
+  "scrollY": -1300,
+  "scrolledOutside": true,
+  "selectedElementIds": {},
   "selectedElementsAreBeingDragged": false,
   "selectedGroupIds": {},
   "selectedLinearElement": null,
-  "selectionElement": null,
+  "selectionElement": {
+    "angle": 0,
+    "backgroundColor": "transparent",
+    "boundElements": null,
+    "fillStyle": "hachure",
+    "frameId": null,
+    "groupIds": [],
+    "height": 0,
+    "id": "id3",
+    "isDeleted": false,
+    "link": null,
+    "locked": false,
+    "opacity": 100,
+    "roughness": 1,
+    "roundness": {
+      "type": 2,
+    },
+    "seed": 2019559783,
+    "strokeColor": "#1e1e1e",
+    "strokeStyle": "solid",
+    "strokeWidth": 1,
+    "type": "selection",
+    "updated": 1,
+    "version": 1,
+    "versionNonce": 0,
+    "width": 0,
+    "x": 11560,
+    "y": 10300,
+  },
   "shouldCacheIgnoreZoom": false,
   "showHyperlinkPopup": false,
   "showStats": false,
@@ -9555,7 +8840,7 @@ exports[`regression tests > given selected element A with lower z-index than uns
   "width": 1024,
   "zenModeEnabled": false,
   "zoom": {
-    "value": 1,
+    "value": 0.1,
   },
 }
 `;
@@ -9576,85 +8861,13 @@ exports[`regression tests > given selected element A with lower z-index than uns
       },
       "elements": [],
     },
-    {
-      "appState": {
-        "editingGroupId": null,
-        "editingLinearElement": null,
-        "name": "Untitled-201933152653",
-        "selectedElementIds": {
-          "id0": true,
-        },
-        "selectedGroupIds": {},
-        "viewBackgroundColor": "#ffffff",
-      },
-      "elements": [
-        {
-          "angle": 0,
-          "backgroundColor": "red",
-          "boundElements": null,
-          "fillStyle": "hachure",
-          "frameId": null,
-          "groupIds": [],
-          "height": 1000,
-          "id": "id0",
-          "isDeleted": false,
-          "link": null,
-          "locked": false,
-          "opacity": 100,
-          "roughness": 1,
-          "roundness": {
-            "type": 3,
-          },
-          "seed": 1278240551,
-          "strokeColor": "#1e1e1e",
-          "strokeStyle": "solid",
-          "strokeWidth": 1,
-          "type": "rectangle",
-          "updated": 1,
-          "version": 1,
-          "versionNonce": 0,
-          "width": 1000,
-          "x": 0,
-          "y": 0,
-        },
-        {
-          "angle": 0,
-          "backgroundColor": "red",
-          "boundElements": null,
-          "fillStyle": "hachure",
-          "frameId": null,
-          "groupIds": [],
-          "height": 500,
-          "id": "id1",
-          "isDeleted": false,
-          "link": null,
-          "locked": false,
-          "opacity": 100,
-          "roughness": 1,
-          "roundness": {
-            "type": 3,
-          },
-          "seed": 449462985,
-          "strokeColor": "#1e1e1e",
-          "strokeStyle": "solid",
-          "strokeWidth": 1,
-          "type": "rectangle",
-          "updated": 1,
-          "version": 1,
-          "versionNonce": 0,
-          "width": 500,
-          "x": 500,
-          "y": 500,
-        },
-      ],
-    },
   ],
 }
 `;
 
 exports[`regression tests > given selected element A with lower z-index than unselected element B and given B is partially over A when clicking intersection between A and B B should be selected on pointer up > [end of test] number of elements 1`] = `0`;
 
-exports[`regression tests > given selected element A with lower z-index than unselected element B and given B is partially over A when clicking intersection between A and B B should be selected on pointer up > [end of test] number of renders 1`] = `7`;
+exports[`regression tests > given selected element A with lower z-index than unselected element B and given B is partially over A when clicking intersection between A and B B should be selected on pointer up > [end of test] number of renders 1`] = `5`;
 
 exports[`regression tests > given selected element A with lower z-index than unselected element B and given B is partially over A when dragging on intersection between A and B A should be dragged and keep being selected > [end of test] appState 1`] = `
 {
@@ -9724,17 +8937,19 @@ exports[`regression tests > given selected element A with lower z-index than uns
   "penDetected": false,
   "penMode": false,
   "pendingImageElementId": null,
-  "previousSelectedElementIds": {
-    "id0": true,
-  },
+  "previousSelectedElementIds": {},
   "resizingElement": null,
-  "scrollConstraints": null,
-  "scrollX": 0,
-  "scrollY": 0,
-  "scrolledOutside": false,
-  "selectedElementIds": {
-    "id0": true,
+  "scrollConstraints": {
+    "height": 1300,
+    "lockZoom": false,
+    "width": 2560,
+    "x": 0,
+    "y": 0,
   },
+  "scrollX": -2560,
+  "scrollY": -1300,
+  "scrolledOutside": true,
+  "selectedElementIds": {},
   "selectedElementsAreBeingDragged": false,
   "selectedGroupIds": {},
   "selectedLinearElement": null,
@@ -9752,7 +8967,7 @@ exports[`regression tests > given selected element A with lower z-index than uns
   "width": 1024,
   "zenModeEnabled": false,
   "zoom": {
-    "value": 1,
+    "value": 0.1,
   },
 }
 `;
@@ -9773,157 +8988,13 @@ exports[`regression tests > given selected element A with lower z-index than uns
       },
       "elements": [],
     },
-    {
-      "appState": {
-        "editingGroupId": null,
-        "editingLinearElement": null,
-        "name": "Untitled-201933152653",
-        "selectedElementIds": {
-          "id0": true,
-        },
-        "selectedGroupIds": {},
-        "viewBackgroundColor": "#ffffff",
-      },
-      "elements": [
-        {
-          "angle": 0,
-          "backgroundColor": "red",
-          "boundElements": null,
-          "fillStyle": "hachure",
-          "frameId": null,
-          "groupIds": [],
-          "height": 1000,
-          "id": "id0",
-          "isDeleted": false,
-          "link": null,
-          "locked": false,
-          "opacity": 100,
-          "roughness": 1,
-          "roundness": {
-            "type": 3,
-          },
-          "seed": 1278240551,
-          "strokeColor": "#1e1e1e",
-          "strokeStyle": "solid",
-          "strokeWidth": 1,
-          "type": "rectangle",
-          "updated": 1,
-          "version": 1,
-          "versionNonce": 0,
-          "width": 1000,
-          "x": 0,
-          "y": 0,
-        },
-        {
-          "angle": 0,
-          "backgroundColor": "red",
-          "boundElements": null,
-          "fillStyle": "hachure",
-          "frameId": null,
-          "groupIds": [],
-          "height": 500,
-          "id": "id1",
-          "isDeleted": false,
-          "link": null,
-          "locked": false,
-          "opacity": 100,
-          "roughness": 1,
-          "roundness": {
-            "type": 3,
-          },
-          "seed": 449462985,
-          "strokeColor": "#1e1e1e",
-          "strokeStyle": "solid",
-          "strokeWidth": 1,
-          "type": "rectangle",
-          "updated": 1,
-          "version": 1,
-          "versionNonce": 0,
-          "width": 500,
-          "x": 500,
-          "y": 500,
-        },
-      ],
-    },
-    {
-      "appState": {
-        "editingGroupId": null,
-        "editingLinearElement": null,
-        "name": "Untitled-201933152653",
-        "selectedElementIds": {
-          "id0": true,
-        },
-        "selectedGroupIds": {},
-        "viewBackgroundColor": "#ffffff",
-      },
-      "elements": [
-        {
-          "angle": 0,
-          "backgroundColor": "red",
-          "boundElements": null,
-          "fillStyle": "hachure",
-          "frameId": null,
-          "groupIds": [],
-          "height": 1000,
-          "id": "id0",
-          "isDeleted": false,
-          "link": null,
-          "locked": false,
-          "opacity": 100,
-          "roughness": 1,
-          "roundness": {
-            "type": 3,
-          },
-          "seed": 1278240551,
-          "strokeColor": "#1e1e1e",
-          "strokeStyle": "solid",
-          "strokeWidth": 1,
-          "type": "rectangle",
-          "updated": 1,
-          "version": 2,
-          "versionNonce": 1150084233,
-          "width": 1000,
-          "x": 100,
-          "y": 100,
-        },
-        {
-          "angle": 0,
-          "backgroundColor": "red",
-          "boundElements": null,
-          "fillStyle": "hachure",
-          "frameId": null,
-          "groupIds": [],
-          "height": 500,
-          "id": "id1",
-          "isDeleted": false,
-          "link": null,
-          "locked": false,
-          "opacity": 100,
-          "roughness": 1,
-          "roundness": {
-            "type": 3,
-          },
-          "seed": 449462985,
-          "strokeColor": "#1e1e1e",
-          "strokeStyle": "solid",
-          "strokeWidth": 1,
-          "type": "rectangle",
-          "updated": 1,
-          "version": 1,
-          "versionNonce": 0,
-          "width": 500,
-          "x": 500,
-          "y": 500,
-        },
-      ],
-    },
   ],
 }
 `;
 
 exports[`regression tests > given selected element A with lower z-index than unselected element B and given B is partially over A when dragging on intersection between A and B A should be dragged and keep being selected > [end of test] number of elements 1`] = `0`;
 
-exports[`regression tests > given selected element A with lower z-index than unselected element B and given B is partially over A when dragging on intersection between A and B A should be dragged and keep being selected > [end of test] number of renders 1`] = `8`;
+exports[`regression tests > given selected element A with lower z-index than unselected element B and given B is partially over A when dragging on intersection between A and B A should be dragged and keep being selected > [end of test] number of renders 1`] = `5`;
 
 exports[`regression tests > key 2 selects rectangle tool > [end of test] appState 1`] = `
 {
@@ -9995,9 +9066,15 @@ exports[`regression tests > key 2 selects rectangle tool > [end of test] appStat
   "pendingImageElementId": null,
   "previousSelectedElementIds": {},
   "resizingElement": null,
-  "scrollConstraints": null,
-  "scrollX": 0,
-  "scrollY": 0,
+  "scrollConstraints": {
+    "height": 1300,
+    "lockZoom": false,
+    "width": 2560,
+    "x": 0,
+    "y": 0,
+  },
+  "scrollX": -2560,
+  "scrollY": -1300,
   "scrolledOutside": false,
   "selectedElementIds": {
     "id0": true,
@@ -10019,7 +9096,7 @@ exports[`regression tests > key 2 selects rectangle tool > [end of test] appStat
   "width": 1024,
   "zenModeEnabled": false,
   "zoom": {
-    "value": 1,
+    "value": 0.1,
   },
 }
 `;
@@ -10059,7 +9136,7 @@ exports[`regression tests > key 2 selects rectangle tool > [end of test] history
           "fillStyle": "hachure",
           "frameId": null,
           "groupIds": [],
-          "height": 10,
+          "height": 100,
           "id": "id0",
           "isDeleted": false,
           "link": null,
@@ -10077,9 +9154,9 @@ exports[`regression tests > key 2 selects rectangle tool > [end of test] history
           "updated": 1,
           "version": 2,
           "versionNonce": 453191,
-          "width": 10,
-          "x": 10,
-          "y": 10,
+          "width": 100,
+          "x": 2660,
+          "y": 1400,
         },
       ],
     },
@@ -10161,9 +9238,15 @@ exports[`regression tests > key 3 selects diamond tool > [end of test] appState
   "pendingImageElementId": null,
   "previousSelectedElementIds": {},
   "resizingElement": null,
-  "scrollConstraints": null,
-  "scrollX": 0,
-  "scrollY": 0,
+  "scrollConstraints": {
+    "height": 1300,
+    "lockZoom": false,
+    "width": 2560,
+    "x": 0,
+    "y": 0,
+  },
+  "scrollX": -2560,
+  "scrollY": -1300,
   "scrolledOutside": false,
   "selectedElementIds": {
     "id0": true,
@@ -10185,7 +9268,7 @@ exports[`regression tests > key 3 selects diamond tool > [end of test] appState
   "width": 1024,
   "zenModeEnabled": false,
   "zoom": {
-    "value": 1,
+    "value": 0.1,
   },
 }
 `;
@@ -10225,7 +9308,7 @@ exports[`regression tests > key 3 selects diamond tool > [end of test] history 1
           "fillStyle": "hachure",
           "frameId": null,
           "groupIds": [],
-          "height": 10,
+          "height": 100,
           "id": "id0",
           "isDeleted": false,
           "link": null,
@@ -10243,9 +9326,9 @@ exports[`regression tests > key 3 selects diamond tool > [end of test] history 1
           "updated": 1,
           "version": 2,
           "versionNonce": 453191,
-          "width": 10,
-          "x": 10,
-          "y": 10,
+          "width": 100,
+          "x": 2660,
+          "y": 1400,
         },
       ],
     },
@@ -10327,9 +9410,15 @@ exports[`regression tests > key 4 selects ellipse tool > [end of test] appState
   "pendingImageElementId": null,
   "previousSelectedElementIds": {},
   "resizingElement": null,
-  "scrollConstraints": null,
-  "scrollX": 0,
-  "scrollY": 0,
+  "scrollConstraints": {
+    "height": 1300,
+    "lockZoom": false,
+    "width": 2560,
+    "x": 0,
+    "y": 0,
+  },
+  "scrollX": -2560,
+  "scrollY": -1300,
   "scrolledOutside": false,
   "selectedElementIds": {
     "id0": true,
@@ -10351,7 +9440,7 @@ exports[`regression tests > key 4 selects ellipse tool > [end of test] appState
   "width": 1024,
   "zenModeEnabled": false,
   "zoom": {
-    "value": 1,
+    "value": 0.1,
   },
 }
 `;
@@ -10391,7 +9480,7 @@ exports[`regression tests > key 4 selects ellipse tool > [end of test] history 1
           "fillStyle": "hachure",
           "frameId": null,
           "groupIds": [],
-          "height": 10,
+          "height": 100,
           "id": "id0",
           "isDeleted": false,
           "link": null,
@@ -10409,9 +9498,9 @@ exports[`regression tests > key 4 selects ellipse tool > [end of test] history 1
           "updated": 1,
           "version": 2,
           "versionNonce": 453191,
-          "width": 10,
-          "x": 10,
-          "y": 10,
+          "width": 100,
+          "x": 2660,
+          "y": 1400,
         },
       ],
     },
@@ -10493,9 +9582,15 @@ exports[`regression tests > key 5 selects arrow tool > [end of test] appState 1`
   "pendingImageElementId": null,
   "previousSelectedElementIds": {},
   "resizingElement": null,
-  "scrollConstraints": null,
-  "scrollX": 0,
-  "scrollY": 0,
+  "scrollConstraints": {
+    "height": 1300,
+    "lockZoom": false,
+    "width": 2560,
+    "x": 0,
+    "y": 0,
+  },
+  "scrollX": -2560,
+  "scrollY": -1300,
   "scrolledOutside": false,
   "selectedElementIds": {
     "id0": true,
@@ -10540,7 +9635,7 @@ exports[`regression tests > key 5 selects arrow tool > [end of test] appState 1`
   "width": 1024,
   "zenModeEnabled": false,
   "zoom": {
-    "value": 1,
+    "value": 0.1,
   },
 }
 `;
@@ -10582,7 +9677,7 @@ exports[`regression tests > key 5 selects arrow tool > [end of test] history 1`]
           "fillStyle": "hachure",
           "frameId": null,
           "groupIds": [],
-          "height": 10,
+          "height": 100,
           "id": "id0",
           "isDeleted": false,
           "lastCommittedPoint": null,
@@ -10595,8 +9690,8 @@ exports[`regression tests > key 5 selects arrow tool > [end of test] history 1`]
               0,
             ],
             [
-              10,
-              10,
+              100,
+              100,
             ],
           ],
           "roughness": 1,
@@ -10613,9 +9708,9 @@ exports[`regression tests > key 5 selects arrow tool > [end of test] history 1`]
           "updated": 1,
           "version": 3,
           "versionNonce": 401146281,
-          "width": 10,
-          "x": 10,
-          "y": 10,
+          "width": 100,
+          "x": 2660,
+          "y": 1400,
         },
       ],
     },
@@ -10697,9 +9792,15 @@ exports[`regression tests > key 6 selects line tool > [end of test] appState 1`]
   "pendingImageElementId": null,
   "previousSelectedElementIds": {},
   "resizingElement": null,
-  "scrollConstraints": null,
-  "scrollX": 0,
-  "scrollY": 0,
+  "scrollConstraints": {
+    "height": 1300,
+    "lockZoom": false,
+    "width": 2560,
+    "x": 0,
+    "y": 0,
+  },
+  "scrollX": -2560,
+  "scrollY": -1300,
   "scrolledOutside": false,
   "selectedElementIds": {
     "id0": true,
@@ -10744,7 +9845,7 @@ exports[`regression tests > key 6 selects line tool > [end of test] appState 1`]
   "width": 1024,
   "zenModeEnabled": false,
   "zoom": {
-    "value": 1,
+    "value": 0.1,
   },
 }
 `;
@@ -10786,7 +9887,7 @@ exports[`regression tests > key 6 selects line tool > [end of test] history 1`]
           "fillStyle": "hachure",
           "frameId": null,
           "groupIds": [],
-          "height": 10,
+          "height": 100,
           "id": "id0",
           "isDeleted": false,
           "lastCommittedPoint": null,
@@ -10799,8 +9900,8 @@ exports[`regression tests > key 6 selects line tool > [end of test] history 1`]
               0,
             ],
             [
-              10,
-              10,
+              100,
+              100,
             ],
           ],
           "roughness": 1,
@@ -10817,9 +9918,9 @@ exports[`regression tests > key 6 selects line tool > [end of test] history 1`]
           "updated": 1,
           "version": 3,
           "versionNonce": 401146281,
-          "width": 10,
-          "x": 10,
-          "y": 10,
+          "width": 100,
+          "x": 2660,
+          "y": 1400,
         },
       ],
     },
@@ -10901,9 +10002,15 @@ exports[`regression tests > key 7 selects freedraw tool > [end of test] appState
   "pendingImageElementId": null,
   "previousSelectedElementIds": {},
   "resizingElement": null,
-  "scrollConstraints": null,
-  "scrollX": 0,
-  "scrollY": 0,
+  "scrollConstraints": {
+    "height": 1300,
+    "lockZoom": false,
+    "width": 2560,
+    "x": 0,
+    "y": 0,
+  },
+  "scrollX": -2560,
+  "scrollY": -1300,
   "scrolledOutside": false,
   "selectedElementIds": {},
   "selectedElementsAreBeingDragged": false,
@@ -10923,7 +10030,7 @@ exports[`regression tests > key 7 selects freedraw tool > [end of test] appState
   "width": 1024,
   "zenModeEnabled": false,
   "zoom": {
-    "value": 1,
+    "value": 0.1,
   },
 }
 `;
@@ -10961,12 +10068,12 @@ exports[`regression tests > key 7 selects freedraw tool > [end of test] history
           "fillStyle": "hachure",
           "frameId": null,
           "groupIds": [],
-          "height": 10,
+          "height": 100,
           "id": "id0",
           "isDeleted": false,
           "lastCommittedPoint": [
-            10,
-            10,
+            100,
+            100,
           ],
           "link": null,
           "locked": false,
@@ -10977,12 +10084,12 @@ exports[`regression tests > key 7 selects freedraw tool > [end of test] history
               0,
             ],
             [
-              10,
-              10,
+              100,
+              100,
             ],
             [
-              10,
-              10,
+              100,
+              100,
             ],
           ],
           "pressures": [
@@ -11001,9 +10108,9 @@ exports[`regression tests > key 7 selects freedraw tool > [end of test] history
           "updated": 1,
           "version": 4,
           "versionNonce": 1150084233,
-          "width": 10,
-          "x": 10,
-          "y": 10,
+          "width": 100,
+          "x": 2660,
+          "y": 1400,
         },
       ],
     },
@@ -11085,9 +10192,15 @@ exports[`regression tests > key a selects arrow tool > [end of test] appState 1`
   "pendingImageElementId": null,
   "previousSelectedElementIds": {},
   "resizingElement": null,
-  "scrollConstraints": null,
-  "scrollX": 0,
-  "scrollY": 0,
+  "scrollConstraints": {
+    "height": 1300,
+    "lockZoom": false,
+    "width": 2560,
+    "x": 0,
+    "y": 0,
+  },
+  "scrollX": -2560,
+  "scrollY": -1300,
   "scrolledOutside": false,
   "selectedElementIds": {
     "id0": true,
@@ -11132,7 +10245,7 @@ exports[`regression tests > key a selects arrow tool > [end of test] appState 1`
   "width": 1024,
   "zenModeEnabled": false,
   "zoom": {
-    "value": 1,
+    "value": 0.1,
   },
 }
 `;
@@ -11174,7 +10287,7 @@ exports[`regression tests > key a selects arrow tool > [end of test] history 1`]
           "fillStyle": "hachure",
           "frameId": null,
           "groupIds": [],
-          "height": 10,
+          "height": 100,
           "id": "id0",
           "isDeleted": false,
           "lastCommittedPoint": null,
@@ -11187,8 +10300,8 @@ exports[`regression tests > key a selects arrow tool > [end of test] history 1`]
               0,
             ],
             [
-              10,
-              10,
+              100,
+              100,
             ],
           ],
           "roughness": 1,
@@ -11205,9 +10318,9 @@ exports[`regression tests > key a selects arrow tool > [end of test] history 1`]
           "updated": 1,
           "version": 3,
           "versionNonce": 401146281,
-          "width": 10,
-          "x": 10,
-          "y": 10,
+          "width": 100,
+          "x": 2660,
+          "y": 1400,
         },
       ],
     },
@@ -11289,9 +10402,15 @@ exports[`regression tests > key d selects diamond tool > [end of test] appState
   "pendingImageElementId": null,
   "previousSelectedElementIds": {},
   "resizingElement": null,
-  "scrollConstraints": null,
-  "scrollX": 0,
-  "scrollY": 0,
+  "scrollConstraints": {
+    "height": 1300,
+    "lockZoom": false,
+    "width": 2560,
+    "x": 0,
+    "y": 0,
+  },
+  "scrollX": -2560,
+  "scrollY": -1300,
   "scrolledOutside": false,
   "selectedElementIds": {
     "id0": true,
@@ -11313,7 +10432,7 @@ exports[`regression tests > key d selects diamond tool > [end of test] appState
   "width": 1024,
   "zenModeEnabled": false,
   "zoom": {
-    "value": 1,
+    "value": 0.1,
   },
 }
 `;
@@ -11353,7 +10472,7 @@ exports[`regression tests > key d selects diamond tool > [end of test] history 1
           "fillStyle": "hachure",
           "frameId": null,
           "groupIds": [],
-          "height": 10,
+          "height": 100,
           "id": "id0",
           "isDeleted": false,
           "link": null,
@@ -11371,9 +10490,9 @@ exports[`regression tests > key d selects diamond tool > [end of test] history 1
           "updated": 1,
           "version": 2,
           "versionNonce": 453191,
-          "width": 10,
-          "x": 10,
-          "y": 10,
+          "width": 100,
+          "x": 2660,
+          "y": 1400,
         },
       ],
     },
@@ -11455,9 +10574,15 @@ exports[`regression tests > key l selects line tool > [end of test] appState 1`]
   "pendingImageElementId": null,
   "previousSelectedElementIds": {},
   "resizingElement": null,
-  "scrollConstraints": null,
-  "scrollX": 0,
-  "scrollY": 0,
+  "scrollConstraints": {
+    "height": 1300,
+    "lockZoom": false,
+    "width": 2560,
+    "x": 0,
+    "y": 0,
+  },
+  "scrollX": -2560,
+  "scrollY": -1300,
   "scrolledOutside": false,
   "selectedElementIds": {
     "id0": true,
@@ -11502,7 +10627,7 @@ exports[`regression tests > key l selects line tool > [end of test] appState 1`]
   "width": 1024,
   "zenModeEnabled": false,
   "zoom": {
-    "value": 1,
+    "value": 0.1,
   },
 }
 `;
@@ -11544,7 +10669,7 @@ exports[`regression tests > key l selects line tool > [end of test] history 1`]
           "fillStyle": "hachure",
           "frameId": null,
           "groupIds": [],
-          "height": 10,
+          "height": 100,
           "id": "id0",
           "isDeleted": false,
           "lastCommittedPoint": null,
@@ -11557,8 +10682,8 @@ exports[`regression tests > key l selects line tool > [end of test] history 1`]
               0,
             ],
             [
-              10,
-              10,
+              100,
+              100,
             ],
           ],
           "roughness": 1,
@@ -11575,9 +10700,9 @@ exports[`regression tests > key l selects line tool > [end of test] history 1`]
           "updated": 1,
           "version": 3,
           "versionNonce": 401146281,
-          "width": 10,
-          "x": 10,
-          "y": 10,
+          "width": 100,
+          "x": 2660,
+          "y": 1400,
         },
       ],
     },
@@ -11659,9 +10784,15 @@ exports[`regression tests > key o selects ellipse tool > [end of test] appState
   "pendingImageElementId": null,
   "previousSelectedElementIds": {},
   "resizingElement": null,
-  "scrollConstraints": null,
-  "scrollX": 0,
-  "scrollY": 0,
+  "scrollConstraints": {
+    "height": 1300,
+    "lockZoom": false,
+    "width": 2560,
+    "x": 0,
+    "y": 0,
+  },
+  "scrollX": -2560,
+  "scrollY": -1300,
   "scrolledOutside": false,
   "selectedElementIds": {
     "id0": true,
@@ -11683,7 +10814,7 @@ exports[`regression tests > key o selects ellipse tool > [end of test] appState
   "width": 1024,
   "zenModeEnabled": false,
   "zoom": {
-    "value": 1,
+    "value": 0.1,
   },
 }
 `;
@@ -11723,7 +10854,7 @@ exports[`regression tests > key o selects ellipse tool > [end of test] history 1
           "fillStyle": "hachure",
           "frameId": null,
           "groupIds": [],
-          "height": 10,
+          "height": 100,
           "id": "id0",
           "isDeleted": false,
           "link": null,
@@ -11741,9 +10872,9 @@ exports[`regression tests > key o selects ellipse tool > [end of test] history 1
           "updated": 1,
           "version": 2,
           "versionNonce": 453191,
-          "width": 10,
-          "x": 10,
-          "y": 10,
+          "width": 100,
+          "x": 2660,
+          "y": 1400,
         },
       ],
     },
@@ -11825,9 +10956,15 @@ exports[`regression tests > key p selects freedraw tool > [end of test] appState
   "pendingImageElementId": null,
   "previousSelectedElementIds": {},
   "resizingElement": null,
-  "scrollConstraints": null,
-  "scrollX": 0,
-  "scrollY": 0,
+  "scrollConstraints": {
+    "height": 1300,
+    "lockZoom": false,
+    "width": 2560,
+    "x": 0,
+    "y": 0,
+  },
+  "scrollX": -2560,
+  "scrollY": -1300,
   "scrolledOutside": false,
   "selectedElementIds": {},
   "selectedElementsAreBeingDragged": false,
@@ -11847,7 +10984,7 @@ exports[`regression tests > key p selects freedraw tool > [end of test] appState
   "width": 1024,
   "zenModeEnabled": false,
   "zoom": {
-    "value": 1,
+    "value": 0.1,
   },
 }
 `;
@@ -11885,12 +11022,12 @@ exports[`regression tests > key p selects freedraw tool > [end of test] history
           "fillStyle": "hachure",
           "frameId": null,
           "groupIds": [],
-          "height": 10,
+          "height": 100,
           "id": "id0",
           "isDeleted": false,
           "lastCommittedPoint": [
-            10,
-            10,
+            100,
+            100,
           ],
           "link": null,
           "locked": false,
@@ -11901,12 +11038,12 @@ exports[`regression tests > key p selects freedraw tool > [end of test] history
               0,
             ],
             [
-              10,
-              10,
+              100,
+              100,
             ],
             [
-              10,
-              10,
+              100,
+              100,
             ],
           ],
           "pressures": [
@@ -11925,9 +11062,9 @@ exports[`regression tests > key p selects freedraw tool > [end of test] history
           "updated": 1,
           "version": 4,
           "versionNonce": 1150084233,
-          "width": 10,
-          "x": 10,
-          "y": 10,
+          "width": 100,
+          "x": 2660,
+          "y": 1400,
         },
       ],
     },
@@ -12009,9 +11146,15 @@ exports[`regression tests > key r selects rectangle tool > [end of test] appStat
   "pendingImageElementId": null,
   "previousSelectedElementIds": {},
   "resizingElement": null,
-  "scrollConstraints": null,
-  "scrollX": 0,
-  "scrollY": 0,
+  "scrollConstraints": {
+    "height": 1300,
+    "lockZoom": false,
+    "width": 2560,
+    "x": 0,
+    "y": 0,
+  },
+  "scrollX": -2560,
+  "scrollY": -1300,
   "scrolledOutside": false,
   "selectedElementIds": {
     "id0": true,
@@ -12033,7 +11176,7 @@ exports[`regression tests > key r selects rectangle tool > [end of test] appStat
   "width": 1024,
   "zenModeEnabled": false,
   "zoom": {
-    "value": 1,
+    "value": 0.1,
   },
 }
 `;
@@ -12073,7 +11216,7 @@ exports[`regression tests > key r selects rectangle tool > [end of test] history
           "fillStyle": "hachure",
           "frameId": null,
           "groupIds": [],
-          "height": 10,
+          "height": 100,
           "id": "id0",
           "isDeleted": false,
           "link": null,
@@ -12091,9 +11234,9 @@ exports[`regression tests > key r selects rectangle tool > [end of test] history
           "updated": 1,
           "version": 2,
           "versionNonce": 453191,
-          "width": 10,
-          "x": 10,
-          "y": 10,
+          "width": 100,
+          "x": 2660,
+          "y": 1400,
         },
       ],
     },
@@ -12179,9 +11322,15 @@ exports[`regression tests > make a group and duplicate it > [end of test] appSta
     "id2": true,
   },
   "resizingElement": null,
-  "scrollConstraints": null,
-  "scrollX": 0,
-  "scrollY": 0,
+  "scrollConstraints": {
+    "height": 1300,
+    "lockZoom": false,
+    "width": 2560,
+    "x": 0,
+    "y": 0,
+  },
+  "scrollX": -2560,
+  "scrollY": -1300,
   "scrolledOutside": false,
   "selectedElementIds": {
     "id0": true,
@@ -12207,7 +11356,7 @@ exports[`regression tests > make a group and duplicate it > [end of test] appSta
   "width": 1024,
   "zenModeEnabled": false,
   "zoom": {
-    "value": 1,
+    "value": 0.1,
   },
 }
 `;
@@ -12247,7 +11396,7 @@ exports[`regression tests > make a group and duplicate it > [end of test] histor
           "fillStyle": "hachure",
           "frameId": null,
           "groupIds": [],
-          "height": 10,
+          "height": 100,
           "id": "id0",
           "isDeleted": false,
           "link": null,
@@ -12265,9 +11414,9 @@ exports[`regression tests > make a group and duplicate it > [end of test] histor
           "updated": 1,
           "version": 2,
           "versionNonce": 453191,
-          "width": 10,
-          "x": 10,
-          "y": 10,
+          "width": 100,
+          "x": 2660,
+          "y": 1400,
         },
       ],
     },
@@ -12290,7 +11439,7 @@ exports[`regression tests > make a group and duplicate it > [end of test] histor
           "fillStyle": "hachure",
           "frameId": null,
           "groupIds": [],
-          "height": 10,
+          "height": 100,
           "id": "id0",
           "isDeleted": false,
           "link": null,
@@ -12308,9 +11457,9 @@ exports[`regression tests > make a group and duplicate it > [end of test] histor
           "updated": 1,
           "version": 2,
           "versionNonce": 453191,
-          "width": 10,
-          "x": 10,
-          "y": 10,
+          "width": 100,
+          "x": 2660,
+          "y": 1400,
         },
         {
           "angle": 0,
@@ -12319,7 +11468,7 @@ exports[`regression tests > make a group and duplicate it > [end of test] histor
           "fillStyle": "hachure",
           "frameId": null,
           "groupIds": [],
-          "height": 10,
+          "height": 100,
           "id": "id1",
           "isDeleted": false,
           "link": null,
@@ -12337,9 +11486,9 @@ exports[`regression tests > make a group and duplicate it > [end of test] histor
           "updated": 1,
           "version": 2,
           "versionNonce": 1116226695,
-          "width": 10,
-          "x": 30,
-          "y": 10,
+          "width": 100,
+          "x": 2860,
+          "y": 1400,
         },
       ],
     },
@@ -12362,7 +11511,7 @@ exports[`regression tests > make a group and duplicate it > [end of test] histor
           "fillStyle": "hachure",
           "frameId": null,
           "groupIds": [],
-          "height": 10,
+          "height": 100,
           "id": "id0",
           "isDeleted": false,
           "link": null,
@@ -12380,9 +11529,9 @@ exports[`regression tests > make a group and duplicate it > [end of test] histor
           "updated": 1,
           "version": 2,
           "versionNonce": 453191,
-          "width": 10,
-          "x": 10,
-          "y": 10,
+          "width": 100,
+          "x": 2660,
+          "y": 1400,
         },
         {
           "angle": 0,
@@ -12391,7 +11540,7 @@ exports[`regression tests > make a group and duplicate it > [end of test] histor
           "fillStyle": "hachure",
           "frameId": null,
           "groupIds": [],
-          "height": 10,
+          "height": 100,
           "id": "id1",
           "isDeleted": false,
           "link": null,
@@ -12409,9 +11558,9 @@ exports[`regression tests > make a group and duplicate it > [end of test] histor
           "updated": 1,
           "version": 2,
           "versionNonce": 1116226695,
-          "width": 10,
-          "x": 30,
-          "y": 10,
+          "width": 100,
+          "x": 2860,
+          "y": 1400,
         },
         {
           "angle": 0,
@@ -12420,7 +11569,7 @@ exports[`regression tests > make a group and duplicate it > [end of test] histor
           "fillStyle": "hachure",
           "frameId": null,
           "groupIds": [],
-          "height": 10,
+          "height": 100,
           "id": "id2",
           "isDeleted": false,
           "link": null,
@@ -12438,9 +11587,9 @@ exports[`regression tests > make a group and duplicate it > [end of test] histor
           "updated": 1,
           "version": 2,
           "versionNonce": 1604849351,
-          "width": 10,
-          "x": 50,
-          "y": 10,
+          "width": 100,
+          "x": 3060,
+          "y": 1400,
         },
       ],
     },
@@ -12469,7 +11618,7 @@ exports[`regression tests > make a group and duplicate it > [end of test] histor
           "groupIds": [
             "id4",
           ],
-          "height": 10,
+          "height": 100,
           "id": "id0",
           "isDeleted": false,
           "link": null,
@@ -12487,9 +11636,9 @@ exports[`regression tests > make a group and duplicate it > [end of test] histor
           "updated": 1,
           "version": 3,
           "versionNonce": 915032327,
-          "width": 10,
-          "x": 10,
-          "y": 10,
+          "width": 100,
+          "x": 2660,
+          "y": 1400,
         },
         {
           "angle": 0,
@@ -12500,7 +11649,7 @@ exports[`regression tests > make a group and duplicate it > [end of test] histor
           "groupIds": [
             "id4",
           ],
-          "height": 10,
+          "height": 100,
           "id": "id1",
           "isDeleted": false,
           "link": null,
@@ -12518,9 +11667,9 @@ exports[`regression tests > make a group and duplicate it > [end of test] histor
           "updated": 1,
           "version": 3,
           "versionNonce": 81784553,
-          "width": 10,
-          "x": 30,
-          "y": 10,
+          "width": 100,
+          "x": 2860,
+          "y": 1400,
         },
         {
           "angle": 0,
@@ -12531,7 +11680,7 @@ exports[`regression tests > make a group and duplicate it > [end of test] histor
           "groupIds": [
             "id4",
           ],
-          "height": 10,
+          "height": 100,
           "id": "id2",
           "isDeleted": false,
           "link": null,
@@ -12549,9 +11698,9 @@ exports[`regression tests > make a group and duplicate it > [end of test] histor
           "updated": 1,
           "version": 3,
           "versionNonce": 747212839,
-          "width": 10,
-          "x": 50,
-          "y": 10,
+          "width": 100,
+          "x": 3060,
+          "y": 1400,
         },
       ],
     },
@@ -12580,7 +11729,7 @@ exports[`regression tests > make a group and duplicate it > [end of test] histor
           "groupIds": [
             "id4_copy",
           ],
-          "height": 10,
+          "height": 100,
           "id": "id0_copy",
           "isDeleted": false,
           "link": null,
@@ -12598,9 +11747,9 @@ exports[`regression tests > make a group and duplicate it > [end of test] histor
           "updated": 1,
           "version": 5,
           "versionNonce": 908564423,
-          "width": 10,
-          "x": 10,
-          "y": 10,
+          "width": 100,
+          "x": 2660,
+          "y": 1400,
         },
         {
           "angle": 0,
@@ -12611,7 +11760,7 @@ exports[`regression tests > make a group and duplicate it > [end of test] histor
           "groupIds": [
             "id4_copy",
           ],
-          "height": 10,
+          "height": 100,
           "id": "id1_copy",
           "isDeleted": false,
           "link": null,
@@ -12629,9 +11778,9 @@ exports[`regression tests > make a group and duplicate it > [end of test] histor
           "updated": 1,
           "version": 5,
           "versionNonce": 1359939303,
-          "width": 10,
-          "x": 30,
-          "y": 10,
+          "width": 100,
+          "x": 2860,
+          "y": 1400,
         },
         {
           "angle": 0,
@@ -12642,7 +11791,7 @@ exports[`regression tests > make a group and duplicate it > [end of test] histor
           "groupIds": [
             "id4_copy",
           ],
-          "height": 10,
+          "height": 100,
           "id": "id2_copy",
           "isDeleted": false,
           "link": null,
@@ -12660,9 +11809,9 @@ exports[`regression tests > make a group and duplicate it > [end of test] histor
           "updated": 1,
           "version": 5,
           "versionNonce": 2004587015,
-          "width": 10,
-          "x": 50,
-          "y": 10,
+          "width": 100,
+          "x": 3060,
+          "y": 1400,
         },
         {
           "angle": 0,
@@ -12673,7 +11822,7 @@ exports[`regression tests > make a group and duplicate it > [end of test] histor
           "groupIds": [
             "id4",
           ],
-          "height": 10,
+          "height": 100,
           "id": "id0",
           "isDeleted": false,
           "link": null,
@@ -12691,9 +11840,9 @@ exports[`regression tests > make a group and duplicate it > [end of test] histor
           "updated": 1,
           "version": 4,
           "versionNonce": 1006504105,
-          "width": 10,
-          "x": 20,
-          "y": 20,
+          "width": 100,
+          "x": 2760,
+          "y": 1500,
         },
         {
           "angle": 0,
@@ -12704,7 +11853,7 @@ exports[`regression tests > make a group and duplicate it > [end of test] histor
           "groupIds": [
             "id4",
           ],
-          "height": 10,
+          "height": 100,
           "id": "id1",
           "isDeleted": false,
           "link": null,
@@ -12722,9 +11871,9 @@ exports[`regression tests > make a group and duplicate it > [end of test] histor
           "updated": 1,
           "version": 4,
           "versionNonce": 1315507081,
-          "width": 10,
-          "x": 40,
-          "y": 20,
+          "width": 100,
+          "x": 2960,
+          "y": 1500,
         },
         {
           "angle": 0,
@@ -12735,7 +11884,7 @@ exports[`regression tests > make a group and duplicate it > [end of test] histor
           "groupIds": [
             "id4",
           ],
-          "height": 10,
+          "height": 100,
           "id": "id2",
           "isDeleted": false,
           "link": null,
@@ -12753,9 +11902,9 @@ exports[`regression tests > make a group and duplicate it > [end of test] histor
           "updated": 1,
           "version": 4,
           "versionNonce": 640725609,
-          "width": 10,
-          "x": 60,
-          "y": 20,
+          "width": 100,
+          "x": 3160,
+          "y": 1500,
         },
       ],
     },
@@ -12839,9 +11988,15 @@ exports[`regression tests > noop interaction after undo shouldn't create history
     "id0": true,
   },
   "resizingElement": null,
-  "scrollConstraints": null,
-  "scrollX": 0,
-  "scrollY": 0,
+  "scrollConstraints": {
+    "height": 1300,
+    "lockZoom": false,
+    "width": 2560,
+    "x": 0,
+    "y": 0,
+  },
+  "scrollX": -2560,
+  "scrollY": -1300,
   "scrolledOutside": false,
   "selectedElementIds": {
     "id1": true,
@@ -12863,7 +12018,7 @@ exports[`regression tests > noop interaction after undo shouldn't create history
   "width": 1024,
   "zenModeEnabled": false,
   "zoom": {
-    "value": 1,
+    "value": 0.1,
   },
 }
 `;
@@ -12903,7 +12058,7 @@ exports[`regression tests > noop interaction after undo shouldn't create history
           "fillStyle": "hachure",
           "frameId": null,
           "groupIds": [],
-          "height": 10,
+          "height": 100,
           "id": "id0",
           "isDeleted": false,
           "link": null,
@@ -12921,9 +12076,9 @@ exports[`regression tests > noop interaction after undo shouldn't create history
           "updated": 1,
           "version": 2,
           "versionNonce": 453191,
-          "width": 10,
-          "x": 10,
-          "y": 10,
+          "width": 100,
+          "x": 2660,
+          "y": 1400,
         },
       ],
     },
@@ -12946,7 +12101,7 @@ exports[`regression tests > noop interaction after undo shouldn't create history
           "fillStyle": "hachure",
           "frameId": null,
           "groupIds": [],
-          "height": 10,
+          "height": 100,
           "id": "id0",
           "isDeleted": false,
           "link": null,
@@ -12964,9 +12119,9 @@ exports[`regression tests > noop interaction after undo shouldn't create history
           "updated": 1,
           "version": 2,
           "versionNonce": 453191,
-          "width": 10,
-          "x": 10,
-          "y": 10,
+          "width": 100,
+          "x": 2660,
+          "y": 1400,
         },
         {
           "angle": 0,
@@ -12975,7 +12130,7 @@ exports[`regression tests > noop interaction after undo shouldn't create history
           "fillStyle": "hachure",
           "frameId": null,
           "groupIds": [],
-          "height": 10,
+          "height": 100,
           "id": "id1",
           "isDeleted": false,
           "link": null,
@@ -12993,9 +12148,9 @@ exports[`regression tests > noop interaction after undo shouldn't create history
           "updated": 1,
           "version": 2,
           "versionNonce": 1116226695,
-          "width": 10,
-          "x": 30,
-          "y": 10,
+          "width": 100,
+          "x": 2860,
+          "y": 1400,
         },
       ],
     },
@@ -13032,7 +12187,7 @@ exports[`regression tests > pinch-to-zoom works > [end of test] appState 1`] = `
   "currentItemStrokeStyle": "solid",
   "currentItemStrokeWidth": 1,
   "currentItemTextAlign": "left",
-  "cursorButton": "down",
+  "cursorButton": "up",
   "defaultSidebarDockedPreference": false,
   "draggingElement": null,
   "editingElement": null,
@@ -13059,7 +12214,7 @@ exports[`regression tests > pinch-to-zoom works > [end of test] appState 1`] = `
   "isLoading": false,
   "isResizing": false,
   "isRotating": false,
-  "lastPointerDownWith": "touch",
+  "lastPointerDownWith": "mouse",
   "multiElement": null,
   "name": "Untitled-201933152653",
   "offsetLeft": 0,
@@ -13077,16 +12232,22 @@ exports[`regression tests > pinch-to-zoom works > [end of test] appState 1`] = `
   "pendingImageElementId": null,
   "previousSelectedElementIds": {},
   "resizingElement": null,
-  "scrollConstraints": null,
-  "scrollX": -2.916666666666668,
-  "scrollY": 0,
+  "scrollConstraints": {
+    "height": 1300,
+    "lockZoom": false,
+    "width": 2560,
+    "x": 0,
+    "y": 0,
+  },
+  "scrollX": -2560,
+  "scrollY": -1300,
   "scrolledOutside": false,
   "selectedElementIds": {},
   "selectedElementsAreBeingDragged": false,
   "selectedGroupIds": {},
   "selectedLinearElement": null,
   "selectionElement": null,
-  "shouldCacheIgnoreZoom": true,
+  "shouldCacheIgnoreZoom": false,
   "showHyperlinkPopup": false,
   "showStats": false,
   "showWelcomeScreen": true,
@@ -13099,7 +12260,7 @@ exports[`regression tests > pinch-to-zoom works > [end of test] appState 1`] = `
   "width": 1024,
   "zenModeEnabled": false,
   "zoom": {
-    "value": 1,
+    "value": 0.1,
   },
 }
 `;
@@ -13126,7 +12287,7 @@ exports[`regression tests > pinch-to-zoom works > [end of test] history 1`] = `
 
 exports[`regression tests > pinch-to-zoom works > [end of test] number of elements 1`] = `0`;
 
-exports[`regression tests > pinch-to-zoom works > [end of test] number of renders 1`] = `7`;
+exports[`regression tests > pinch-to-zoom works > [end of test] number of renders 1`] = `4`;
 
 exports[`regression tests > rerenders UI on language change > [end of test] appState 1`] = `
 {
@@ -13198,9 +12359,15 @@ exports[`regression tests > rerenders UI on language change > [end of test] appS
   "pendingImageElementId": null,
   "previousSelectedElementIds": {},
   "resizingElement": null,
-  "scrollConstraints": null,
-  "scrollX": 0,
-  "scrollY": 0,
+  "scrollConstraints": {
+    "height": 1300,
+    "lockZoom": false,
+    "width": 2560,
+    "x": 0,
+    "y": 0,
+  },
+  "scrollX": -2560,
+  "scrollY": -1300,
   "scrolledOutside": false,
   "selectedElementIds": {},
   "selectedElementsAreBeingDragged": false,
@@ -13220,7 +12387,7 @@ exports[`regression tests > rerenders UI on language change > [end of test] appS
   "width": 1024,
   "zenModeEnabled": false,
   "zoom": {
-    "value": 1,
+    "value": 0.1,
   },
 }
 `;
@@ -13321,9 +12488,15 @@ exports[`regression tests > shift click on selected element should deselect it o
     "id0": true,
   },
   "resizingElement": null,
-  "scrollConstraints": null,
-  "scrollX": 0,
-  "scrollY": 0,
+  "scrollConstraints": {
+    "height": 1300,
+    "lockZoom": false,
+    "width": 2560,
+    "x": 0,
+    "y": 0,
+  },
+  "scrollX": -2560,
+  "scrollY": -1300,
   "scrolledOutside": false,
   "selectedElementIds": {},
   "selectedElementsAreBeingDragged": false,
@@ -13343,7 +12516,7 @@ exports[`regression tests > shift click on selected element should deselect it o
   "width": 1024,
   "zenModeEnabled": false,
   "zoom": {
-    "value": 1,
+    "value": 0.1,
   },
 }
 `;
@@ -13383,7 +12556,7 @@ exports[`regression tests > shift click on selected element should deselect it o
           "fillStyle": "hachure",
           "frameId": null,
           "groupIds": [],
-          "height": 10,
+          "height": 100,
           "id": "id0",
           "isDeleted": false,
           "link": null,
@@ -13401,9 +12574,9 @@ exports[`regression tests > shift click on selected element should deselect it o
           "updated": 1,
           "version": 2,
           "versionNonce": 453191,
-          "width": 10,
-          "x": 0,
-          "y": 0,
+          "width": 100,
+          "x": 2560,
+          "y": 1300,
         },
       ],
     },
@@ -13488,9 +12661,15 @@ exports[`regression tests > shift-click to multiselect, then drag > [end of test
     "id1": true,
   },
   "resizingElement": null,
-  "scrollConstraints": null,
-  "scrollX": 0,
-  "scrollY": 0,
+  "scrollConstraints": {
+    "height": 1300,
+    "lockZoom": false,
+    "width": 2560,
+    "x": 0,
+    "y": 0,
+  },
+  "scrollX": -2560,
+  "scrollY": -1300,
   "scrolledOutside": false,
   "selectedElementIds": {
     "id0": true,
@@ -13513,7 +12692,7 @@ exports[`regression tests > shift-click to multiselect, then drag > [end of test
   "width": 1024,
   "zenModeEnabled": false,
   "zoom": {
-    "value": 1,
+    "value": 0.1,
   },
 }
 `;
@@ -13553,7 +12732,7 @@ exports[`regression tests > shift-click to multiselect, then drag > [end of test
           "fillStyle": "hachure",
           "frameId": null,
           "groupIds": [],
-          "height": 10,
+          "height": 100,
           "id": "id0",
           "isDeleted": false,
           "link": null,
@@ -13571,9 +12750,9 @@ exports[`regression tests > shift-click to multiselect, then drag > [end of test
           "updated": 1,
           "version": 2,
           "versionNonce": 453191,
-          "width": 10,
-          "x": 10,
-          "y": 10,
+          "width": 100,
+          "x": 2660,
+          "y": 1400,
         },
       ],
     },
@@ -13596,7 +12775,7 @@ exports[`regression tests > shift-click to multiselect, then drag > [end of test
           "fillStyle": "hachure",
           "frameId": null,
           "groupIds": [],
-          "height": 10,
+          "height": 100,
           "id": "id0",
           "isDeleted": false,
           "link": null,
@@ -13614,9 +12793,9 @@ exports[`regression tests > shift-click to multiselect, then drag > [end of test
           "updated": 1,
           "version": 2,
           "versionNonce": 453191,
-          "width": 10,
-          "x": 10,
-          "y": 10,
+          "width": 100,
+          "x": 2660,
+          "y": 1400,
         },
         {
           "angle": 0,
@@ -13625,7 +12804,7 @@ exports[`regression tests > shift-click to multiselect, then drag > [end of test
           "fillStyle": "hachure",
           "frameId": null,
           "groupIds": [],
-          "height": 10,
+          "height": 100,
           "id": "id1",
           "isDeleted": false,
           "link": null,
@@ -13643,9 +12822,9 @@ exports[`regression tests > shift-click to multiselect, then drag > [end of test
           "updated": 1,
           "version": 2,
           "versionNonce": 1116226695,
-          "width": 10,
-          "x": 30,
-          "y": 10,
+          "width": 100,
+          "x": 2860,
+          "y": 1400,
         },
       ],
     },
@@ -13669,7 +12848,7 @@ exports[`regression tests > shift-click to multiselect, then drag > [end of test
           "fillStyle": "hachure",
           "frameId": null,
           "groupIds": [],
-          "height": 10,
+          "height": 100,
           "id": "id0",
           "isDeleted": false,
           "link": null,
@@ -13687,9 +12866,9 @@ exports[`regression tests > shift-click to multiselect, then drag > [end of test
           "updated": 1,
           "version": 3,
           "versionNonce": 1505387817,
-          "width": 10,
-          "x": 20,
-          "y": 20,
+          "width": 100,
+          "x": 2760,
+          "y": 1500,
         },
         {
           "angle": 0,
@@ -13698,7 +12877,7 @@ exports[`regression tests > shift-click to multiselect, then drag > [end of test
           "fillStyle": "hachure",
           "frameId": null,
           "groupIds": [],
-          "height": 10,
+          "height": 100,
           "id": "id1",
           "isDeleted": false,
           "link": null,
@@ -13716,9 +12895,9 @@ exports[`regression tests > shift-click to multiselect, then drag > [end of test
           "updated": 1,
           "version": 3,
           "versionNonce": 493213705,
-          "width": 10,
-          "x": 40,
-          "y": 20,
+          "width": 100,
+          "x": 2960,
+          "y": 1500,
         },
       ],
     },
@@ -13804,9 +12983,15 @@ exports[`regression tests > should group elements and ungroup them > [end of tes
     "id2": true,
   },
   "resizingElement": null,
-  "scrollConstraints": null,
-  "scrollX": 0,
-  "scrollY": 0,
+  "scrollConstraints": {
+    "height": 1300,
+    "lockZoom": false,
+    "width": 2560,
+    "x": 0,
+    "y": 0,
+  },
+  "scrollX": -2560,
+  "scrollY": -1300,
   "scrolledOutside": false,
   "selectedElementIds": {
     "id0": true,
@@ -13830,7 +13015,7 @@ exports[`regression tests > should group elements and ungroup them > [end of tes
   "width": 1024,
   "zenModeEnabled": false,
   "zoom": {
-    "value": 1,
+    "value": 0.1,
   },
 }
 `;
@@ -13870,7 +13055,7 @@ exports[`regression tests > should group elements and ungroup them > [end of tes
           "fillStyle": "hachure",
           "frameId": null,
           "groupIds": [],
-          "height": 10,
+          "height": 100,
           "id": "id0",
           "isDeleted": false,
           "link": null,
@@ -13888,9 +13073,9 @@ exports[`regression tests > should group elements and ungroup them > [end of tes
           "updated": 1,
           "version": 2,
           "versionNonce": 453191,
-          "width": 10,
-          "x": 10,
-          "y": 10,
+          "width": 100,
+          "x": 2660,
+          "y": 1400,
         },
       ],
     },
@@ -13913,7 +13098,7 @@ exports[`regression tests > should group elements and ungroup them > [end of tes
           "fillStyle": "hachure",
           "frameId": null,
           "groupIds": [],
-          "height": 10,
+          "height": 100,
           "id": "id0",
           "isDeleted": false,
           "link": null,
@@ -13931,9 +13116,9 @@ exports[`regression tests > should group elements and ungroup them > [end of tes
           "updated": 1,
           "version": 2,
           "versionNonce": 453191,
-          "width": 10,
-          "x": 10,
-          "y": 10,
+          "width": 100,
+          "x": 2660,
+          "y": 1400,
         },
         {
           "angle": 0,
@@ -13942,7 +13127,7 @@ exports[`regression tests > should group elements and ungroup them > [end of tes
           "fillStyle": "hachure",
           "frameId": null,
           "groupIds": [],
-          "height": 10,
+          "height": 100,
           "id": "id1",
           "isDeleted": false,
           "link": null,
@@ -13960,9 +13145,9 @@ exports[`regression tests > should group elements and ungroup them > [end of tes
           "updated": 1,
           "version": 2,
           "versionNonce": 1116226695,
-          "width": 10,
-          "x": 30,
-          "y": 10,
+          "width": 100,
+          "x": 2860,
+          "y": 1400,
         },
       ],
     },
@@ -13985,7 +13170,7 @@ exports[`regression tests > should group elements and ungroup them > [end of tes
           "fillStyle": "hachure",
           "frameId": null,
           "groupIds": [],
-          "height": 10,
+          "height": 100,
           "id": "id0",
           "isDeleted": false,
           "link": null,
@@ -14003,9 +13188,9 @@ exports[`regression tests > should group elements and ungroup them > [end of tes
           "updated": 1,
           "version": 2,
           "versionNonce": 453191,
-          "width": 10,
-          "x": 10,
-          "y": 10,
+          "width": 100,
+          "x": 2660,
+          "y": 1400,
         },
         {
           "angle": 0,
@@ -14014,7 +13199,7 @@ exports[`regression tests > should group elements and ungroup them > [end of tes
           "fillStyle": "hachure",
           "frameId": null,
           "groupIds": [],
-          "height": 10,
+          "height": 100,
           "id": "id1",
           "isDeleted": false,
           "link": null,
@@ -14032,9 +13217,9 @@ exports[`regression tests > should group elements and ungroup them > [end of tes
           "updated": 1,
           "version": 2,
           "versionNonce": 1116226695,
-          "width": 10,
-          "x": 30,
-          "y": 10,
+          "width": 100,
+          "x": 2860,
+          "y": 1400,
         },
         {
           "angle": 0,
@@ -14043,7 +13228,7 @@ exports[`regression tests > should group elements and ungroup them > [end of tes
           "fillStyle": "hachure",
           "frameId": null,
           "groupIds": [],
-          "height": 10,
+          "height": 100,
           "id": "id2",
           "isDeleted": false,
           "link": null,
@@ -14061,9 +13246,9 @@ exports[`regression tests > should group elements and ungroup them > [end of tes
           "updated": 1,
           "version": 2,
           "versionNonce": 1604849351,
-          "width": 10,
-          "x": 50,
-          "y": 10,
+          "width": 100,
+          "x": 3060,
+          "y": 1400,
         },
       ],
     },
@@ -14092,7 +13277,7 @@ exports[`regression tests > should group elements and ungroup them > [end of tes
           "groupIds": [
             "id4",
           ],
-          "height": 10,
+          "height": 100,
           "id": "id0",
           "isDeleted": false,
           "link": null,
@@ -14110,9 +13295,9 @@ exports[`regression tests > should group elements and ungroup them > [end of tes
           "updated": 1,
           "version": 3,
           "versionNonce": 915032327,
-          "width": 10,
-          "x": 10,
-          "y": 10,
+          "width": 100,
+          "x": 2660,
+          "y": 1400,
         },
         {
           "angle": 0,
@@ -14123,7 +13308,7 @@ exports[`regression tests > should group elements and ungroup them > [end of tes
           "groupIds": [
             "id4",
           ],
-          "height": 10,
+          "height": 100,
           "id": "id1",
           "isDeleted": false,
           "link": null,
@@ -14141,9 +13326,9 @@ exports[`regression tests > should group elements and ungroup them > [end of tes
           "updated": 1,
           "version": 3,
           "versionNonce": 81784553,
-          "width": 10,
-          "x": 30,
-          "y": 10,
+          "width": 100,
+          "x": 2860,
+          "y": 1400,
         },
         {
           "angle": 0,
@@ -14154,7 +13339,7 @@ exports[`regression tests > should group elements and ungroup them > [end of tes
           "groupIds": [
             "id4",
           ],
-          "height": 10,
+          "height": 100,
           "id": "id2",
           "isDeleted": false,
           "link": null,
@@ -14172,9 +13357,9 @@ exports[`regression tests > should group elements and ungroup them > [end of tes
           "updated": 1,
           "version": 3,
           "versionNonce": 747212839,
-          "width": 10,
-          "x": 50,
-          "y": 10,
+          "width": 100,
+          "x": 3060,
+          "y": 1400,
         },
       ],
     },
@@ -14199,7 +13384,7 @@ exports[`regression tests > should group elements and ungroup them > [end of tes
           "fillStyle": "hachure",
           "frameId": null,
           "groupIds": [],
-          "height": 10,
+          "height": 100,
           "id": "id0",
           "isDeleted": false,
           "link": null,
@@ -14217,9 +13402,9 @@ exports[`regression tests > should group elements and ungroup them > [end of tes
           "updated": 1,
           "version": 4,
           "versionNonce": 289600103,
-          "width": 10,
-          "x": 10,
-          "y": 10,
+          "width": 100,
+          "x": 2660,
+          "y": 1400,
         },
         {
           "angle": 0,
@@ -14228,7 +13413,7 @@ exports[`regression tests > should group elements and ungroup them > [end of tes
           "fillStyle": "hachure",
           "frameId": null,
           "groupIds": [],
-          "height": 10,
+          "height": 100,
           "id": "id1",
           "isDeleted": false,
           "link": null,
@@ -14246,9 +13431,9 @@ exports[`regression tests > should group elements and ungroup them > [end of tes
           "updated": 1,
           "version": 4,
           "versionNonce": 1315507081,
-          "width": 10,
-          "x": 30,
-          "y": 10,
+          "width": 100,
+          "x": 2860,
+          "y": 1400,
         },
         {
           "angle": 0,
@@ -14257,7 +13442,7 @@ exports[`regression tests > should group elements and ungroup them > [end of tes
           "fillStyle": "hachure",
           "frameId": null,
           "groupIds": [],
-          "height": 10,
+          "height": 100,
           "id": "id2",
           "isDeleted": false,
           "link": null,
@@ -14275,9 +13460,9 @@ exports[`regression tests > should group elements and ungroup them > [end of tes
           "updated": 1,
           "version": 4,
           "versionNonce": 1898319239,
-          "width": 10,
-          "x": 50,
-          "y": 10,
+          "width": 100,
+          "x": 3060,
+          "y": 1400,
         },
       ],
     },
@@ -14359,9 +13544,15 @@ exports[`regression tests > should show fill icons when element has non transpar
   "pendingImageElementId": null,
   "previousSelectedElementIds": {},
   "resizingElement": null,
-  "scrollConstraints": null,
-  "scrollX": 0,
-  "scrollY": 0,
+  "scrollConstraints": {
+    "height": 1300,
+    "lockZoom": false,
+    "width": 2560,
+    "x": 0,
+    "y": 0,
+  },
+  "scrollX": -2560,
+  "scrollY": -1300,
   "scrolledOutside": false,
   "selectedElementIds": {
     "id0": true,
@@ -14383,7 +13574,7 @@ exports[`regression tests > should show fill icons when element has non transpar
   "width": 1024,
   "zenModeEnabled": false,
   "zoom": {
-    "value": 1,
+    "value": 0.1,
   },
 }
 `;
@@ -14423,7 +13614,7 @@ exports[`regression tests > should show fill icons when element has non transpar
           "fillStyle": "hachure",
           "frameId": null,
           "groupIds": [],
-          "height": 10,
+          "height": 100,
           "id": "id0",
           "isDeleted": false,
           "link": null,
@@ -14441,9 +13632,9 @@ exports[`regression tests > should show fill icons when element has non transpar
           "updated": 1,
           "version": 2,
           "versionNonce": 453191,
-          "width": 10,
-          "x": 0,
-          "y": 0,
+          "width": 100,
+          "x": 2560,
+          "y": 1300,
         },
       ],
     },
@@ -14466,7 +13657,7 @@ exports[`regression tests > should show fill icons when element has non transpar
           "fillStyle": "hachure",
           "frameId": null,
           "groupIds": [],
-          "height": 10,
+          "height": 100,
           "id": "id0",
           "isDeleted": false,
           "link": null,
@@ -14484,9 +13675,9 @@ exports[`regression tests > should show fill icons when element has non transpar
           "updated": 1,
           "version": 3,
           "versionNonce": 2019559783,
-          "width": 10,
-          "x": 0,
-          "y": 0,
+          "width": 100,
+          "x": 2560,
+          "y": 1300,
         },
       ],
     },
@@ -14569,24 +13760,23 @@ exports[`regression tests > single-clicking on a subgroup of a selected group sh
   "previousSelectedElementIds": {
     "id0": true,
     "id1": true,
+    "id4": true,
     "id5": true,
-    "id6": true,
   },
   "resizingElement": null,
-  "scrollConstraints": null,
-  "scrollX": 0,
-  "scrollY": 0,
+  "scrollConstraints": {
+    "height": 1300,
+    "lockZoom": false,
+    "width": 2560,
+    "x": 0,
+    "y": 0,
+  },
+  "scrollX": -2560,
+  "scrollY": -1300,
   "scrolledOutside": false,
-  "selectedElementIds": {
-    "id0": true,
-    "id1": true,
-    "id5": true,
-    "id6": true,
-  },
+  "selectedElementIds": {},
   "selectedElementsAreBeingDragged": false,
-  "selectedGroupIds": {
-    "id10": true,
-  },
+  "selectedGroupIds": {},
   "selectedLinearElement": null,
   "selectionElement": null,
   "shouldCacheIgnoreZoom": false,
@@ -14602,7 +13792,7 @@ exports[`regression tests > single-clicking on a subgroup of a selected group sh
   "width": 1024,
   "zenModeEnabled": false,
   "zoom": {
-    "value": 1,
+    "value": 0.1,
   },
 }
 `;
@@ -14642,7 +13832,7 @@ exports[`regression tests > single-clicking on a subgroup of a selected group sh
           "fillStyle": "hachure",
           "frameId": null,
           "groupIds": [],
-          "height": 10,
+          "height": 100,
           "id": "id0",
           "isDeleted": false,
           "link": null,
@@ -14660,9 +13850,9 @@ exports[`regression tests > single-clicking on a subgroup of a selected group sh
           "updated": 1,
           "version": 2,
           "versionNonce": 453191,
-          "width": 10,
-          "x": 10,
-          "y": 0,
+          "width": 100,
+          "x": 2660,
+          "y": 1300,
         },
       ],
     },
@@ -14685,7 +13875,7 @@ exports[`regression tests > single-clicking on a subgroup of a selected group sh
           "fillStyle": "hachure",
           "frameId": null,
           "groupIds": [],
-          "height": 10,
+          "height": 100,
           "id": "id0",
           "isDeleted": false,
           "link": null,
@@ -14703,9 +13893,9 @@ exports[`regression tests > single-clicking on a subgroup of a selected group sh
           "updated": 1,
           "version": 2,
           "versionNonce": 453191,
-          "width": 10,
-          "x": 10,
-          "y": 0,
+          "width": 100,
+          "x": 2660,
+          "y": 1300,
         },
         {
           "angle": 0,
@@ -14714,7 +13904,7 @@ exports[`regression tests > single-clicking on a subgroup of a selected group sh
           "fillStyle": "hachure",
           "frameId": null,
           "groupIds": [],
-          "height": 10,
+          "height": 100,
           "id": "id1",
           "isDeleted": false,
           "link": null,
@@ -14732,9 +13922,240 @@ exports[`regression tests > single-clicking on a subgroup of a selected group sh
           "updated": 1,
           "version": 2,
           "versionNonce": 1116226695,
-          "width": 10,
-          "x": 50,
-          "y": 0,
+          "width": 100,
+          "x": 3060,
+          "y": 1300,
+        },
+      ],
+    },
+    {
+      "appState": {
+        "editingGroupId": null,
+        "editingLinearElement": null,
+        "name": "Untitled-201933152653",
+        "selectedElementIds": {
+          "id4": true,
+        },
+        "selectedGroupIds": {},
+        "viewBackgroundColor": "#ffffff",
+      },
+      "elements": [
+        {
+          "angle": 0,
+          "backgroundColor": "transparent",
+          "boundElements": null,
+          "fillStyle": "hachure",
+          "frameId": null,
+          "groupIds": [],
+          "height": 100,
+          "id": "id0",
+          "isDeleted": false,
+          "link": null,
+          "locked": false,
+          "opacity": 100,
+          "roughness": 1,
+          "roundness": {
+            "type": 3,
+          },
+          "seed": 1278240551,
+          "strokeColor": "#1e1e1e",
+          "strokeStyle": "solid",
+          "strokeWidth": 1,
+          "type": "rectangle",
+          "updated": 1,
+          "version": 2,
+          "versionNonce": 453191,
+          "width": 100,
+          "x": 2660,
+          "y": 1300,
+        },
+        {
+          "angle": 0,
+          "backgroundColor": "transparent",
+          "boundElements": null,
+          "fillStyle": "hachure",
+          "frameId": null,
+          "groupIds": [],
+          "height": 100,
+          "id": "id1",
+          "isDeleted": false,
+          "link": null,
+          "locked": false,
+          "opacity": 100,
+          "roughness": 1,
+          "roundness": {
+            "type": 3,
+          },
+          "seed": 2019559783,
+          "strokeColor": "#1e1e1e",
+          "strokeStyle": "solid",
+          "strokeWidth": 1,
+          "type": "rectangle",
+          "updated": 1,
+          "version": 2,
+          "versionNonce": 1116226695,
+          "width": 100,
+          "x": 3060,
+          "y": 1300,
+        },
+        {
+          "angle": 0,
+          "backgroundColor": "transparent",
+          "boundElements": null,
+          "fillStyle": "hachure",
+          "frameId": null,
+          "groupIds": [],
+          "height": 100,
+          "id": "id4",
+          "isDeleted": false,
+          "link": null,
+          "locked": false,
+          "opacity": 100,
+          "roughness": 1,
+          "roundness": {
+            "type": 3,
+          },
+          "seed": 1505387817,
+          "strokeColor": "#1e1e1e",
+          "strokeStyle": "solid",
+          "strokeWidth": 1,
+          "type": "rectangle",
+          "updated": 1,
+          "version": 2,
+          "versionNonce": 493213705,
+          "width": 100,
+          "x": 2660,
+          "y": 1800,
+        },
+      ],
+    },
+    {
+      "appState": {
+        "editingGroupId": null,
+        "editingLinearElement": null,
+        "name": "Untitled-201933152653",
+        "selectedElementIds": {
+          "id5": true,
+        },
+        "selectedGroupIds": {},
+        "viewBackgroundColor": "#ffffff",
+      },
+      "elements": [
+        {
+          "angle": 0,
+          "backgroundColor": "transparent",
+          "boundElements": null,
+          "fillStyle": "hachure",
+          "frameId": null,
+          "groupIds": [],
+          "height": 100,
+          "id": "id0",
+          "isDeleted": false,
+          "link": null,
+          "locked": false,
+          "opacity": 100,
+          "roughness": 1,
+          "roundness": {
+            "type": 3,
+          },
+          "seed": 1278240551,
+          "strokeColor": "#1e1e1e",
+          "strokeStyle": "solid",
+          "strokeWidth": 1,
+          "type": "rectangle",
+          "updated": 1,
+          "version": 2,
+          "versionNonce": 453191,
+          "width": 100,
+          "x": 2660,
+          "y": 1300,
+        },
+        {
+          "angle": 0,
+          "backgroundColor": "transparent",
+          "boundElements": null,
+          "fillStyle": "hachure",
+          "frameId": null,
+          "groupIds": [],
+          "height": 100,
+          "id": "id1",
+          "isDeleted": false,
+          "link": null,
+          "locked": false,
+          "opacity": 100,
+          "roughness": 1,
+          "roundness": {
+            "type": 3,
+          },
+          "seed": 2019559783,
+          "strokeColor": "#1e1e1e",
+          "strokeStyle": "solid",
+          "strokeWidth": 1,
+          "type": "rectangle",
+          "updated": 1,
+          "version": 2,
+          "versionNonce": 1116226695,
+          "width": 100,
+          "x": 3060,
+          "y": 1300,
+        },
+        {
+          "angle": 0,
+          "backgroundColor": "transparent",
+          "boundElements": null,
+          "fillStyle": "hachure",
+          "frameId": null,
+          "groupIds": [],
+          "height": 100,
+          "id": "id4",
+          "isDeleted": false,
+          "link": null,
+          "locked": false,
+          "opacity": 100,
+          "roughness": 1,
+          "roundness": {
+            "type": 3,
+          },
+          "seed": 1505387817,
+          "strokeColor": "#1e1e1e",
+          "strokeStyle": "solid",
+          "strokeWidth": 1,
+          "type": "rectangle",
+          "updated": 1,
+          "version": 2,
+          "versionNonce": 493213705,
+          "width": 100,
+          "x": 2660,
+          "y": 1800,
+        },
+        {
+          "angle": 0,
+          "backgroundColor": "transparent",
+          "boundElements": null,
+          "fillStyle": "hachure",
+          "frameId": null,
+          "groupIds": [],
+          "height": 100,
+          "id": "id5",
+          "isDeleted": false,
+          "link": null,
+          "locked": false,
+          "opacity": 100,
+          "roughness": 1,
+          "roundness": {
+            "type": 3,
+          },
+          "seed": 81784553,
+          "strokeColor": "#1e1e1e",
+          "strokeStyle": "solid",
+          "strokeWidth": 1,
+          "type": "rectangle",
+          "updated": 1,
+          "version": 2,
+          "versionNonce": 1723083209,
+          "width": 100,
+          "x": 3060,
+          "y": 1800,
         },
       ],
     },
@@ -14746,327 +14167,11 @@ exports[`regression tests > single-clicking on a subgroup of a selected group sh
         "selectedElementIds": {
           "id0": true,
           "id1": true,
-        },
-        "selectedGroupIds": {
           "id4": true,
-        },
-        "viewBackgroundColor": "#ffffff",
-      },
-      "elements": [
-        {
-          "angle": 0,
-          "backgroundColor": "transparent",
-          "boundElements": null,
-          "fillStyle": "hachure",
-          "frameId": null,
-          "groupIds": [
-            "id4",
-          ],
-          "height": 10,
-          "id": "id0",
-          "isDeleted": false,
-          "link": null,
-          "locked": false,
-          "opacity": 100,
-          "roughness": 1,
-          "roundness": {
-            "type": 3,
-          },
-          "seed": 1278240551,
-          "strokeColor": "#1e1e1e",
-          "strokeStyle": "solid",
-          "strokeWidth": 1,
-          "type": "rectangle",
-          "updated": 1,
-          "version": 3,
-          "versionNonce": 1604849351,
-          "width": 10,
-          "x": 10,
-          "y": 0,
-        },
-        {
-          "angle": 0,
-          "backgroundColor": "transparent",
-          "boundElements": null,
-          "fillStyle": "hachure",
-          "frameId": null,
-          "groupIds": [
-            "id4",
-          ],
-          "height": 10,
-          "id": "id1",
-          "isDeleted": false,
-          "link": null,
-          "locked": false,
-          "opacity": 100,
-          "roughness": 1,
-          "roundness": {
-            "type": 3,
-          },
-          "seed": 2019559783,
-          "strokeColor": "#1e1e1e",
-          "strokeStyle": "solid",
-          "strokeWidth": 1,
-          "type": "rectangle",
-          "updated": 1,
-          "version": 3,
-          "versionNonce": 1505387817,
-          "width": 10,
-          "x": 50,
-          "y": 0,
-        },
-      ],
-    },
-    {
-      "appState": {
-        "editingGroupId": null,
-        "editingLinearElement": null,
-        "name": "Untitled-201933152653",
-        "selectedElementIds": {
           "id5": true,
         },
-        "selectedGroupIds": {},
-        "viewBackgroundColor": "#ffffff",
-      },
-      "elements": [
-        {
-          "angle": 0,
-          "backgroundColor": "transparent",
-          "boundElements": null,
-          "fillStyle": "hachure",
-          "frameId": null,
-          "groupIds": [
-            "id4",
-          ],
-          "height": 10,
-          "id": "id0",
-          "isDeleted": false,
-          "link": null,
-          "locked": false,
-          "opacity": 100,
-          "roughness": 1,
-          "roundness": {
-            "type": 3,
-          },
-          "seed": 1278240551,
-          "strokeColor": "#1e1e1e",
-          "strokeStyle": "solid",
-          "strokeWidth": 1,
-          "type": "rectangle",
-          "updated": 1,
-          "version": 3,
-          "versionNonce": 1604849351,
-          "width": 10,
-          "x": 10,
-          "y": 0,
-        },
-        {
-          "angle": 0,
-          "backgroundColor": "transparent",
-          "boundElements": null,
-          "fillStyle": "hachure",
-          "frameId": null,
-          "groupIds": [
-            "id4",
-          ],
-          "height": 10,
-          "id": "id1",
-          "isDeleted": false,
-          "link": null,
-          "locked": false,
-          "opacity": 100,
-          "roughness": 1,
-          "roundness": {
-            "type": 3,
-          },
-          "seed": 2019559783,
-          "strokeColor": "#1e1e1e",
-          "strokeStyle": "solid",
-          "strokeWidth": 1,
-          "type": "rectangle",
-          "updated": 1,
-          "version": 3,
-          "versionNonce": 1505387817,
-          "width": 10,
-          "x": 50,
-          "y": 0,
-        },
-        {
-          "angle": 0,
-          "backgroundColor": "transparent",
-          "boundElements": null,
-          "fillStyle": "hachure",
-          "frameId": null,
-          "groupIds": [],
-          "height": 10,
-          "id": "id5",
-          "isDeleted": false,
-          "link": null,
-          "locked": false,
-          "opacity": 100,
-          "roughness": 1,
-          "roundness": {
-            "type": 3,
-          },
-          "seed": 493213705,
-          "strokeColor": "#1e1e1e",
-          "strokeStyle": "solid",
-          "strokeWidth": 1,
-          "type": "rectangle",
-          "updated": 1,
-          "version": 2,
-          "versionNonce": 81784553,
-          "width": 10,
-          "x": 10,
-          "y": 50,
-        },
-      ],
-    },
-    {
-      "appState": {
-        "editingGroupId": null,
-        "editingLinearElement": null,
-        "name": "Untitled-201933152653",
-        "selectedElementIds": {
-          "id6": true,
-        },
-        "selectedGroupIds": {},
-        "viewBackgroundColor": "#ffffff",
-      },
-      "elements": [
-        {
-          "angle": 0,
-          "backgroundColor": "transparent",
-          "boundElements": null,
-          "fillStyle": "hachure",
-          "frameId": null,
-          "groupIds": [
-            "id4",
-          ],
-          "height": 10,
-          "id": "id0",
-          "isDeleted": false,
-          "link": null,
-          "locked": false,
-          "opacity": 100,
-          "roughness": 1,
-          "roundness": {
-            "type": 3,
-          },
-          "seed": 1278240551,
-          "strokeColor": "#1e1e1e",
-          "strokeStyle": "solid",
-          "strokeWidth": 1,
-          "type": "rectangle",
-          "updated": 1,
-          "version": 3,
-          "versionNonce": 1604849351,
-          "width": 10,
-          "x": 10,
-          "y": 0,
-        },
-        {
-          "angle": 0,
-          "backgroundColor": "transparent",
-          "boundElements": null,
-          "fillStyle": "hachure",
-          "frameId": null,
-          "groupIds": [
-            "id4",
-          ],
-          "height": 10,
-          "id": "id1",
-          "isDeleted": false,
-          "link": null,
-          "locked": false,
-          "opacity": 100,
-          "roughness": 1,
-          "roundness": {
-            "type": 3,
-          },
-          "seed": 2019559783,
-          "strokeColor": "#1e1e1e",
-          "strokeStyle": "solid",
-          "strokeWidth": 1,
-          "type": "rectangle",
-          "updated": 1,
-          "version": 3,
-          "versionNonce": 1505387817,
-          "width": 10,
-          "x": 50,
-          "y": 0,
-        },
-        {
-          "angle": 0,
-          "backgroundColor": "transparent",
-          "boundElements": null,
-          "fillStyle": "hachure",
-          "frameId": null,
-          "groupIds": [],
-          "height": 10,
-          "id": "id5",
-          "isDeleted": false,
-          "link": null,
-          "locked": false,
-          "opacity": 100,
-          "roughness": 1,
-          "roundness": {
-            "type": 3,
-          },
-          "seed": 493213705,
-          "strokeColor": "#1e1e1e",
-          "strokeStyle": "solid",
-          "strokeWidth": 1,
-          "type": "rectangle",
-          "updated": 1,
-          "version": 2,
-          "versionNonce": 81784553,
-          "width": 10,
-          "x": 10,
-          "y": 50,
-        },
-        {
-          "angle": 0,
-          "backgroundColor": "transparent",
-          "boundElements": null,
-          "fillStyle": "hachure",
-          "frameId": null,
-          "groupIds": [],
-          "height": 10,
-          "id": "id6",
-          "isDeleted": false,
-          "link": null,
-          "locked": false,
-          "opacity": 100,
-          "roughness": 1,
-          "roundness": {
-            "type": 3,
-          },
-          "seed": 1723083209,
-          "strokeColor": "#1e1e1e",
-          "strokeStyle": "solid",
-          "strokeWidth": 1,
-          "type": "rectangle",
-          "updated": 1,
-          "version": 2,
-          "versionNonce": 1006504105,
-          "width": 10,
-          "x": 50,
-          "y": 50,
-        },
-      ],
-    },
-    {
-      "appState": {
-        "editingGroupId": null,
-        "editingLinearElement": null,
-        "name": "Untitled-201933152653",
-        "selectedElementIds": {
-          "id5": true,
-          "id6": true,
-        },
         "selectedGroupIds": {
-          "id9": true,
+          "id8": true,
         },
         "viewBackgroundColor": "#ffffff",
       },
@@ -15078,9 +14183,9 @@ exports[`regression tests > single-clicking on a subgroup of a selected group sh
           "fillStyle": "hachure",
           "frameId": null,
           "groupIds": [
-            "id4",
+            "id8",
           ],
-          "height": 10,
+          "height": 100,
           "id": "id0",
           "isDeleted": false,
           "link": null,
@@ -15097,10 +14202,10 @@ exports[`regression tests > single-clicking on a subgroup of a selected group sh
           "type": "rectangle",
           "updated": 1,
           "version": 3,
-          "versionNonce": 1604849351,
-          "width": 10,
-          "x": 10,
-          "y": 0,
+          "versionNonce": 1898319239,
+          "width": 100,
+          "x": 2660,
+          "y": 1300,
         },
         {
           "angle": 0,
@@ -15109,9 +14214,9 @@ exports[`regression tests > single-clicking on a subgroup of a selected group sh
           "fillStyle": "hachure",
           "frameId": null,
           "groupIds": [
-            "id4",
+            "id8",
           ],
-          "height": 10,
+          "height": 100,
           "id": "id1",
           "isDeleted": false,
           "link": null,
@@ -15128,41 +14233,10 @@ exports[`regression tests > single-clicking on a subgroup of a selected group sh
           "type": "rectangle",
           "updated": 1,
           "version": 3,
-          "versionNonce": 1505387817,
-          "width": 10,
-          "x": 50,
-          "y": 0,
-        },
-        {
-          "angle": 0,
-          "backgroundColor": "transparent",
-          "boundElements": null,
-          "fillStyle": "hachure",
-          "frameId": null,
-          "groupIds": [
-            "id9",
-          ],
-          "height": 10,
-          "id": "id5",
-          "isDeleted": false,
-          "link": null,
-          "locked": false,
-          "opacity": 100,
-          "roughness": 1,
-          "roundness": {
-            "type": 3,
-          },
-          "seed": 493213705,
-          "strokeColor": "#1e1e1e",
-          "strokeStyle": "solid",
-          "strokeWidth": 1,
-          "type": "rectangle",
-          "updated": 1,
-          "version": 3,
           "versionNonce": 640725609,
-          "width": 10,
-          "x": 10,
-          "y": 50,
+          "width": 100,
+          "x": 3060,
+          "y": 1300,
         },
         {
           "angle": 0,
@@ -15171,10 +14245,10 @@ exports[`regression tests > single-clicking on a subgroup of a selected group sh
           "fillStyle": "hachure",
           "frameId": null,
           "groupIds": [
-            "id9",
+            "id8",
           ],
-          "height": 10,
-          "id": "id6",
+          "height": 100,
+          "id": "id4",
           "isDeleted": false,
           "link": null,
           "locked": false,
@@ -15183,7 +14257,7 @@ exports[`regression tests > single-clicking on a subgroup of a selected group sh
           "roundness": {
             "type": 3,
           },
-          "seed": 1723083209,
+          "seed": 1505387817,
           "strokeColor": "#1e1e1e",
           "strokeStyle": "solid",
           "strokeWidth": 1,
@@ -15191,60 +14265,9 @@ exports[`regression tests > single-clicking on a subgroup of a selected group sh
           "updated": 1,
           "version": 3,
           "versionNonce": 406373543,
-          "width": 10,
-          "x": 50,
-          "y": 50,
-        },
-      ],
-    },
-    {
-      "appState": {
-        "editingGroupId": null,
-        "editingLinearElement": null,
-        "name": "Untitled-201933152653",
-        "selectedElementIds": {
-          "id0": true,
-          "id1": true,
-          "id5": true,
-          "id6": true,
-        },
-        "selectedGroupIds": {
-          "id10": true,
-        },
-        "viewBackgroundColor": "#ffffff",
-      },
-      "elements": [
-        {
-          "angle": 0,
-          "backgroundColor": "transparent",
-          "boundElements": null,
-          "fillStyle": "hachure",
-          "frameId": null,
-          "groupIds": [
-            "id4",
-            "id10",
-          ],
-          "height": 10,
-          "id": "id0",
-          "isDeleted": false,
-          "link": null,
-          "locked": false,
-          "opacity": 100,
-          "roughness": 1,
-          "roundness": {
-            "type": 3,
-          },
-          "seed": 1278240551,
-          "strokeColor": "#1e1e1e",
-          "strokeStyle": "solid",
-          "strokeWidth": 1,
-          "type": "rectangle",
-          "updated": 1,
-          "version": 4,
-          "versionNonce": 908564423,
-          "width": 10,
-          "x": 10,
-          "y": 0,
+          "width": 100,
+          "x": 2660,
+          "y": 1800,
         },
         {
           "angle": 0,
@@ -15253,42 +14276,9 @@ exports[`regression tests > single-clicking on a subgroup of a selected group sh
           "fillStyle": "hachure",
           "frameId": null,
           "groupIds": [
-            "id4",
-            "id10",
+            "id8",
           ],
-          "height": 10,
-          "id": "id1",
-          "isDeleted": false,
-          "link": null,
-          "locked": false,
-          "opacity": 100,
-          "roughness": 1,
-          "roundness": {
-            "type": 3,
-          },
-          "seed": 2019559783,
-          "strokeColor": "#1e1e1e",
-          "strokeStyle": "solid",
-          "strokeWidth": 1,
-          "type": "rectangle",
-          "updated": 1,
-          "version": 4,
-          "versionNonce": 1402203177,
-          "width": 10,
-          "x": 50,
-          "y": 0,
-        },
-        {
-          "angle": 0,
-          "backgroundColor": "transparent",
-          "boundElements": null,
-          "fillStyle": "hachure",
-          "frameId": null,
-          "groupIds": [
-            "id9",
-            "id10",
-          ],
-          "height": 10,
+          "height": 100,
           "id": "id5",
           "isDeleted": false,
           "link": null,
@@ -15298,49 +14288,17 @@ exports[`regression tests > single-clicking on a subgroup of a selected group sh
           "roundness": {
             "type": 3,
           },
-          "seed": 493213705,
+          "seed": 81784553,
           "strokeColor": "#1e1e1e",
           "strokeStyle": "solid",
           "strokeWidth": 1,
           "type": "rectangle",
           "updated": 1,
-          "version": 4,
-          "versionNonce": 1359939303,
-          "width": 10,
-          "x": 10,
-          "y": 50,
-        },
-        {
-          "angle": 0,
-          "backgroundColor": "transparent",
-          "boundElements": null,
-          "fillStyle": "hachure",
-          "frameId": null,
-          "groupIds": [
-            "id9",
-            "id10",
-          ],
-          "height": 10,
-          "id": "id6",
-          "isDeleted": false,
-          "link": null,
-          "locked": false,
-          "opacity": 100,
-          "roughness": 1,
-          "roundness": {
-            "type": 3,
-          },
-          "seed": 1723083209,
-          "strokeColor": "#1e1e1e",
-          "strokeStyle": "solid",
-          "strokeWidth": 1,
-          "type": "rectangle",
-          "updated": 1,
-          "version": 4,
-          "versionNonce": 1349943049,
-          "width": 10,
-          "x": 50,
-          "y": 50,
+          "version": 3,
+          "versionNonce": 941653321,
+          "width": 100,
+          "x": 3060,
+          "y": 1800,
         },
       ],
     },
@@ -15350,7 +14308,7 @@ exports[`regression tests > single-clicking on a subgroup of a selected group sh
 
 exports[`regression tests > single-clicking on a subgroup of a selected group should not alter selection > [end of test] number of elements 1`] = `0`;
 
-exports[`regression tests > single-clicking on a subgroup of a selected group should not alter selection > [end of test] number of renders 1`] = `30`;
+exports[`regression tests > single-clicking on a subgroup of a selected group should not alter selection > [end of test] number of renders 1`] = `27`;
 
 exports[`regression tests > spacebar + drag scrolls the canvas > [end of test] appState 1`] = `
 {
@@ -15422,9 +14380,16 @@ exports[`regression tests > spacebar + drag scrolls the canvas > [end of test] a
   "pendingImageElementId": null,
   "previousSelectedElementIds": {},
   "resizingElement": null,
-  "scrollConstraints": null,
-  "scrollX": 60,
-  "scrollY": 60,
+  "scrollConstraints": {
+    "animateOnNextUpdate": true,
+    "height": 1300,
+    "lockZoom": false,
+    "width": 2560,
+    "x": 0,
+    "y": 0,
+  },
+  "scrollX": 3580,
+  "scrollY": 2930,
   "scrolledOutside": false,
   "selectedElementIds": {},
   "selectedElementsAreBeingDragged": false,
@@ -15444,7 +14409,7 @@ exports[`regression tests > spacebar + drag scrolls the canvas > [end of test] a
   "width": 1024,
   "zenModeEnabled": false,
   "zoom": {
-    "value": 1,
+    "value": 0.1,
   },
 }
 `;
@@ -15501,9 +14466,44 @@ exports[`regression tests > supports nested groups > [end of test] appState 1`]
   "cursorButton": "up",
   "defaultSidebarDockedPreference": false,
   "draggingElement": null,
-  "editingElement": null,
+  "editingElement": {
+    "angle": 0,
+    "backgroundColor": "transparent",
+    "baseline": 0,
+    "boundElements": null,
+    "containerId": null,
+    "fillStyle": "hachure",
+    "fontFamily": 1,
+    "fontSize": 20,
+    "frameId": null,
+    "groupIds": [],
+    "height": 25,
+    "id": "id4",
+    "isDeleted": false,
+    "lineHeight": 1.25,
+    "link": null,
+    "locked": false,
+    "opacity": 100,
+    "originalText": "",
+    "roughness": 1,
+    "roundness": null,
+    "seed": 747212839,
+    "strokeColor": "#1e1e1e",
+    "strokeStyle": "solid",
+    "strokeWidth": 1,
+    "text": "",
+    "textAlign": "left",
+    "type": "text",
+    "updated": 1,
+    "version": 1,
+    "versionNonce": 0,
+    "verticalAlign": "top",
+    "width": 10,
+    "x": 48160,
+    "y": 34300,
+  },
   "editingFrame": null,
-  "editingGroupId": "id3",
+  "editingGroupId": null,
   "editingLinearElement": null,
   "elementsToHighlight": null,
   "errorMessage": null,
@@ -15541,17 +14541,19 @@ exports[`regression tests > supports nested groups > [end of test] appState 1`]
   "penDetected": false,
   "penMode": false,
   "pendingImageElementId": null,
-  "previousSelectedElementIds": {
-    "id0": true,
-  },
+  "previousSelectedElementIds": {},
   "resizingElement": null,
-  "scrollConstraints": null,
-  "scrollX": 0,
-  "scrollY": 0,
-  "scrolledOutside": false,
-  "selectedElementIds": {
-    "id1": true,
+  "scrollConstraints": {
+    "height": 1300,
+    "lockZoom": false,
+    "width": 2560,
+    "x": 0,
+    "y": 0,
   },
+  "scrollX": -2560,
+  "scrollY": -1300,
+  "scrolledOutside": false,
+  "selectedElementIds": {},
   "selectedElementsAreBeingDragged": false,
   "selectedGroupIds": {},
   "selectedLinearElement": null,
@@ -15569,7 +14571,7 @@ exports[`regression tests > supports nested groups > [end of test] appState 1`]
   "width": 1024,
   "zenModeEnabled": false,
   "zoom": {
-    "value": 1,
+    "value": 0.1,
   },
 }
 `;
@@ -15609,7 +14611,7 @@ exports[`regression tests > supports nested groups > [end of test] history 1`] =
           "fillStyle": "hachure",
           "frameId": null,
           "groupIds": [],
-          "height": 50,
+          "height": 500,
           "id": "id0",
           "isDeleted": false,
           "link": null,
@@ -15627,9 +14629,9 @@ exports[`regression tests > supports nested groups > [end of test] history 1`] =
           "updated": 1,
           "version": 2,
           "versionNonce": 453191,
-          "width": 50,
-          "x": 0,
-          "y": 0,
+          "width": 500,
+          "x": 2560,
+          "y": 1300,
         },
       ],
     },
@@ -15652,7 +14654,7 @@ exports[`regression tests > supports nested groups > [end of test] history 1`] =
           "fillStyle": "hachure",
           "frameId": null,
           "groupIds": [],
-          "height": 50,
+          "height": 500,
           "id": "id0",
           "isDeleted": false,
           "link": null,
@@ -15670,9 +14672,9 @@ exports[`regression tests > supports nested groups > [end of test] history 1`] =
           "updated": 1,
           "version": 2,
           "versionNonce": 453191,
-          "width": 50,
-          "x": 0,
-          "y": 0,
+          "width": 500,
+          "x": 2560,
+          "y": 1300,
         },
         {
           "angle": 0,
@@ -15681,7 +14683,7 @@ exports[`regression tests > supports nested groups > [end of test] history 1`] =
           "fillStyle": "hachure",
           "frameId": null,
           "groupIds": [],
-          "height": 50,
+          "height": 500,
           "id": "id1",
           "isDeleted": false,
           "link": null,
@@ -15699,9 +14701,9 @@ exports[`regression tests > supports nested groups > [end of test] history 1`] =
           "updated": 1,
           "version": 2,
           "versionNonce": 1116226695,
-          "width": 50,
-          "x": 100,
-          "y": 100,
+          "width": 500,
+          "x": 3560,
+          "y": 2300,
         },
       ],
     },
@@ -15724,7 +14726,7 @@ exports[`regression tests > supports nested groups > [end of test] history 1`] =
           "fillStyle": "hachure",
           "frameId": null,
           "groupIds": [],
-          "height": 50,
+          "height": 500,
           "id": "id0",
           "isDeleted": false,
           "link": null,
@@ -15742,9 +14744,9 @@ exports[`regression tests > supports nested groups > [end of test] history 1`] =
           "updated": 1,
           "version": 2,
           "versionNonce": 453191,
-          "width": 50,
-          "x": 0,
-          "y": 0,
+          "width": 500,
+          "x": 2560,
+          "y": 1300,
         },
         {
           "angle": 0,
@@ -15753,7 +14755,7 @@ exports[`regression tests > supports nested groups > [end of test] history 1`] =
           "fillStyle": "hachure",
           "frameId": null,
           "groupIds": [],
-          "height": 50,
+          "height": 500,
           "id": "id1",
           "isDeleted": false,
           "link": null,
@@ -15771,9 +14773,9 @@ exports[`regression tests > supports nested groups > [end of test] history 1`] =
           "updated": 1,
           "version": 2,
           "versionNonce": 1116226695,
-          "width": 50,
-          "x": 100,
-          "y": 100,
+          "width": 500,
+          "x": 3560,
+          "y": 2300,
         },
         {
           "angle": 0,
@@ -15782,7 +14784,7 @@ exports[`regression tests > supports nested groups > [end of test] history 1`] =
           "fillStyle": "hachure",
           "frameId": null,
           "groupIds": [],
-          "height": 50,
+          "height": 500,
           "id": "id2",
           "isDeleted": false,
           "link": null,
@@ -15800,9 +14802,9 @@ exports[`regression tests > supports nested groups > [end of test] history 1`] =
           "updated": 1,
           "version": 2,
           "versionNonce": 1604849351,
-          "width": 50,
-          "x": 200,
-          "y": 200,
+          "width": 500,
+          "x": 4560,
+          "y": 3300,
         },
       ],
     },
@@ -15831,7 +14833,7 @@ exports[`regression tests > supports nested groups > [end of test] history 1`] =
           "groupIds": [
             "id3",
           ],
-          "height": 50,
+          "height": 500,
           "id": "id0",
           "isDeleted": false,
           "link": null,
@@ -15849,9 +14851,9 @@ exports[`regression tests > supports nested groups > [end of test] history 1`] =
           "updated": 1,
           "version": 3,
           "versionNonce": 23633383,
-          "width": 50,
-          "x": 0,
-          "y": 0,
+          "width": 500,
+          "x": 2560,
+          "y": 1300,
         },
         {
           "angle": 0,
@@ -15862,7 +14864,7 @@ exports[`regression tests > supports nested groups > [end of test] history 1`] =
           "groupIds": [
             "id3",
           ],
-          "height": 50,
+          "height": 500,
           "id": "id1",
           "isDeleted": false,
           "link": null,
@@ -15880,9 +14882,9 @@ exports[`regression tests > supports nested groups > [end of test] history 1`] =
           "updated": 1,
           "version": 3,
           "versionNonce": 493213705,
-          "width": 50,
-          "x": 100,
-          "y": 100,
+          "width": 500,
+          "x": 3560,
+          "y": 2300,
         },
         {
           "angle": 0,
@@ -15893,7 +14895,7 @@ exports[`regression tests > supports nested groups > [end of test] history 1`] =
           "groupIds": [
             "id3",
           ],
-          "height": 50,
+          "height": 500,
           "id": "id2",
           "isDeleted": false,
           "link": null,
@@ -15911,342 +14913,9 @@ exports[`regression tests > supports nested groups > [end of test] history 1`] =
           "updated": 1,
           "version": 3,
           "versionNonce": 915032327,
-          "width": 50,
-          "x": 200,
-          "y": 200,
-        },
-      ],
-    },
-    {
-      "appState": {
-        "editingGroupId": "id3",
-        "editingLinearElement": null,
-        "name": "Untitled-201933152653",
-        "selectedElementIds": {
-          "id0": true,
-          "id2": true,
-        },
-        "selectedGroupIds": {},
-        "viewBackgroundColor": "#ffffff",
-      },
-      "elements": [
-        {
-          "angle": 0,
-          "backgroundColor": "transparent",
-          "boundElements": null,
-          "fillStyle": "hachure",
-          "frameId": null,
-          "groupIds": [
-            "id3",
-          ],
-          "height": 50,
-          "id": "id0",
-          "isDeleted": false,
-          "link": null,
-          "locked": false,
-          "opacity": 100,
-          "roughness": 1,
-          "roundness": {
-            "type": 3,
-          },
-          "seed": 1278240551,
-          "strokeColor": "#1e1e1e",
-          "strokeStyle": "solid",
-          "strokeWidth": 1,
-          "type": "rectangle",
-          "updated": 1,
-          "version": 3,
-          "versionNonce": 23633383,
-          "width": 50,
-          "x": 0,
-          "y": 0,
-        },
-        {
-          "angle": 0,
-          "backgroundColor": "transparent",
-          "boundElements": null,
-          "fillStyle": "hachure",
-          "frameId": null,
-          "groupIds": [
-            "id3",
-          ],
-          "height": 50,
-          "id": "id1",
-          "isDeleted": false,
-          "link": null,
-          "locked": false,
-          "opacity": 100,
-          "roughness": 1,
-          "roundness": {
-            "type": 3,
-          },
-          "seed": 2019559783,
-          "strokeColor": "#1e1e1e",
-          "strokeStyle": "solid",
-          "strokeWidth": 1,
-          "type": "rectangle",
-          "updated": 1,
-          "version": 3,
-          "versionNonce": 493213705,
-          "width": 50,
-          "x": 100,
-          "y": 100,
-        },
-        {
-          "angle": 0,
-          "backgroundColor": "transparent",
-          "boundElements": null,
-          "fillStyle": "hachure",
-          "frameId": null,
-          "groupIds": [
-            "id3",
-          ],
-          "height": 50,
-          "id": "id2",
-          "isDeleted": false,
-          "link": null,
-          "locked": false,
-          "opacity": 100,
-          "roughness": 1,
-          "roundness": {
-            "type": 3,
-          },
-          "seed": 238820263,
-          "strokeColor": "#1e1e1e",
-          "strokeStyle": "solid",
-          "strokeWidth": 1,
-          "type": "rectangle",
-          "updated": 1,
-          "version": 3,
-          "versionNonce": 915032327,
-          "width": 50,
-          "x": 200,
-          "y": 200,
-        },
-      ],
-    },
-    {
-      "appState": {
-        "editingGroupId": "id3",
-        "editingLinearElement": null,
-        "name": "Untitled-201933152653",
-        "selectedElementIds": {
-          "id0": true,
-          "id2": true,
-        },
-        "selectedGroupIds": {
-          "id5": true,
-        },
-        "viewBackgroundColor": "#ffffff",
-      },
-      "elements": [
-        {
-          "angle": 0,
-          "backgroundColor": "transparent",
-          "boundElements": null,
-          "fillStyle": "hachure",
-          "frameId": null,
-          "groupIds": [
-            "id3",
-          ],
-          "height": 50,
-          "id": "id1",
-          "isDeleted": false,
-          "link": null,
-          "locked": false,
-          "opacity": 100,
-          "roughness": 1,
-          "roundness": {
-            "type": 3,
-          },
-          "seed": 2019559783,
-          "strokeColor": "#1e1e1e",
-          "strokeStyle": "solid",
-          "strokeWidth": 1,
-          "type": "rectangle",
-          "updated": 1,
-          "version": 3,
-          "versionNonce": 493213705,
-          "width": 50,
-          "x": 100,
-          "y": 100,
-        },
-        {
-          "angle": 0,
-          "backgroundColor": "transparent",
-          "boundElements": null,
-          "fillStyle": "hachure",
-          "frameId": null,
-          "groupIds": [
-            "id5",
-            "id3",
-          ],
-          "height": 50,
-          "id": "id0",
-          "isDeleted": false,
-          "link": null,
-          "locked": false,
-          "opacity": 100,
-          "roughness": 1,
-          "roundness": {
-            "type": 3,
-          },
-          "seed": 1278240551,
-          "strokeColor": "#1e1e1e",
-          "strokeStyle": "solid",
-          "strokeWidth": 1,
-          "type": "rectangle",
-          "updated": 1,
-          "version": 4,
-          "versionNonce": 1723083209,
-          "width": 50,
-          "x": 0,
-          "y": 0,
-        },
-        {
-          "angle": 0,
-          "backgroundColor": "transparent",
-          "boundElements": null,
-          "fillStyle": "hachure",
-          "frameId": null,
-          "groupIds": [
-            "id5",
-            "id3",
-          ],
-          "height": 50,
-          "id": "id2",
-          "isDeleted": false,
-          "link": null,
-          "locked": false,
-          "opacity": 100,
-          "roughness": 1,
-          "roundness": {
-            "type": 3,
-          },
-          "seed": 238820263,
-          "strokeColor": "#1e1e1e",
-          "strokeStyle": "solid",
-          "strokeWidth": 1,
-          "type": "rectangle",
-          "updated": 1,
-          "version": 4,
-          "versionNonce": 760410951,
-          "width": 50,
-          "x": 200,
-          "y": 200,
-        },
-      ],
-    },
-    {
-      "appState": {
-        "editingGroupId": null,
-        "editingLinearElement": null,
-        "name": "Untitled-201933152653",
-        "selectedElementIds": {
-          "id0": true,
-          "id1": true,
-          "id2": true,
-        },
-        "selectedGroupIds": {
-          "id3": true,
-        },
-        "viewBackgroundColor": "#ffffff",
-      },
-      "elements": [
-        {
-          "angle": 0,
-          "backgroundColor": "transparent",
-          "boundElements": null,
-          "fillStyle": "hachure",
-          "frameId": null,
-          "groupIds": [
-            "id3",
-          ],
-          "height": 50,
-          "id": "id1",
-          "isDeleted": false,
-          "link": null,
-          "locked": false,
-          "opacity": 100,
-          "roughness": 1,
-          "roundness": {
-            "type": 3,
-          },
-          "seed": 2019559783,
-          "strokeColor": "#1e1e1e",
-          "strokeStyle": "solid",
-          "strokeWidth": 1,
-          "type": "rectangle",
-          "updated": 1,
-          "version": 3,
-          "versionNonce": 493213705,
-          "width": 50,
-          "x": 100,
-          "y": 100,
-        },
-        {
-          "angle": 0,
-          "backgroundColor": "transparent",
-          "boundElements": null,
-          "fillStyle": "hachure",
-          "frameId": null,
-          "groupIds": [
-            "id5",
-            "id3",
-          ],
-          "height": 50,
-          "id": "id0",
-          "isDeleted": false,
-          "link": null,
-          "locked": false,
-          "opacity": 100,
-          "roughness": 1,
-          "roundness": {
-            "type": 3,
-          },
-          "seed": 1278240551,
-          "strokeColor": "#1e1e1e",
-          "strokeStyle": "solid",
-          "strokeWidth": 1,
-          "type": "rectangle",
-          "updated": 1,
-          "version": 4,
-          "versionNonce": 1723083209,
-          "width": 50,
-          "x": 0,
-          "y": 0,
-        },
-        {
-          "angle": 0,
-          "backgroundColor": "transparent",
-          "boundElements": null,
-          "fillStyle": "hachure",
-          "frameId": null,
-          "groupIds": [
-            "id5",
-            "id3",
-          ],
-          "height": 50,
-          "id": "id2",
-          "isDeleted": false,
-          "link": null,
-          "locked": false,
-          "opacity": 100,
-          "roughness": 1,
-          "roundness": {
-            "type": 3,
-          },
-          "seed": 238820263,
-          "strokeColor": "#1e1e1e",
-          "strokeStyle": "solid",
-          "strokeWidth": 1,
-          "type": "rectangle",
-          "updated": 1,
-          "version": 4,
-          "versionNonce": 760410951,
-          "width": 50,
-          "x": 200,
-          "y": 200,
+          "width": 500,
+          "x": 4560,
+          "y": 3300,
         },
       ],
     },
@@ -16256,7 +14925,7 @@ exports[`regression tests > supports nested groups > [end of test] history 1`] =
 
 exports[`regression tests > supports nested groups > [end of test] number of elements 1`] = `0`;
 
-exports[`regression tests > supports nested groups > [end of test] number of renders 1`] = `27`;
+exports[`regression tests > supports nested groups > [end of test] number of renders 1`] = `20`;
 
 exports[`regression tests > switches from group of selected elements to another element on pointer down > [end of test] appState 1`] = `
 {
@@ -16311,8 +14980,8 @@ exports[`regression tests > switches from group of selected elements to another
     "version": 1,
     "versionNonce": 0,
     "width": 0,
-    "x": 0,
-    "y": 0,
+    "x": 2560,
+    "y": 1300,
   },
   "editingElement": null,
   "editingFrame": null,
@@ -16359,9 +15028,15 @@ exports[`regression tests > switches from group of selected elements to another
     "id2": true,
   },
   "resizingElement": null,
-  "scrollConstraints": null,
-  "scrollX": 0,
-  "scrollY": 0,
+  "scrollConstraints": {
+    "height": 1300,
+    "lockZoom": false,
+    "width": 2560,
+    "x": 0,
+    "y": 0,
+  },
+  "scrollX": -2560,
+  "scrollY": -1300,
   "scrolledOutside": false,
   "selectedElementIds": {
     "id0": true,
@@ -16395,8 +15070,8 @@ exports[`regression tests > switches from group of selected elements to another
     "version": 1,
     "versionNonce": 0,
     "width": 0,
-    "x": 0,
-    "y": 0,
+    "x": 2560,
+    "y": 1300,
   },
   "shouldCacheIgnoreZoom": false,
   "showHyperlinkPopup": false,
@@ -16411,7 +15086,7 @@ exports[`regression tests > switches from group of selected elements to another
   "width": 1024,
   "zenModeEnabled": false,
   "zoom": {
-    "value": 1,
+    "value": 0.1,
   },
 }
 `;
@@ -16451,7 +15126,7 @@ exports[`regression tests > switches from group of selected elements to another
           "fillStyle": "hachure",
           "frameId": null,
           "groupIds": [],
-          "height": 10,
+          "height": 100,
           "id": "id0",
           "isDeleted": false,
           "link": null,
@@ -16469,9 +15144,9 @@ exports[`regression tests > switches from group of selected elements to another
           "updated": 1,
           "version": 2,
           "versionNonce": 453191,
-          "width": 10,
-          "x": 0,
-          "y": 0,
+          "width": 100,
+          "x": 2560,
+          "y": 1300,
         },
       ],
     },
@@ -16494,7 +15169,7 @@ exports[`regression tests > switches from group of selected elements to another
           "fillStyle": "hachure",
           "frameId": null,
           "groupIds": [],
-          "height": 10,
+          "height": 100,
           "id": "id0",
           "isDeleted": false,
           "link": null,
@@ -16512,9 +15187,9 @@ exports[`regression tests > switches from group of selected elements to another
           "updated": 1,
           "version": 2,
           "versionNonce": 453191,
-          "width": 10,
-          "x": 0,
-          "y": 0,
+          "width": 100,
+          "x": 2560,
+          "y": 1300,
         },
         {
           "angle": 0,
@@ -16523,7 +15198,7 @@ exports[`regression tests > switches from group of selected elements to another
           "fillStyle": "hachure",
           "frameId": null,
           "groupIds": [],
-          "height": 100,
+          "height": 1000,
           "id": "id1",
           "isDeleted": false,
           "link": null,
@@ -16541,9 +15216,9 @@ exports[`regression tests > switches from group of selected elements to another
           "updated": 1,
           "version": 2,
           "versionNonce": 1116226695,
-          "width": 100,
-          "x": 110,
-          "y": 110,
+          "width": 1000,
+          "x": 3660,
+          "y": 2400,
         },
       ],
     },
@@ -16566,7 +15241,7 @@ exports[`regression tests > switches from group of selected elements to another
           "fillStyle": "hachure",
           "frameId": null,
           "groupIds": [],
-          "height": 10,
+          "height": 100,
           "id": "id0",
           "isDeleted": false,
           "link": null,
@@ -16584,9 +15259,9 @@ exports[`regression tests > switches from group of selected elements to another
           "updated": 1,
           "version": 2,
           "versionNonce": 453191,
-          "width": 10,
-          "x": 0,
-          "y": 0,
+          "width": 100,
+          "x": 2560,
+          "y": 1300,
         },
         {
           "angle": 0,
@@ -16595,7 +15270,7 @@ exports[`regression tests > switches from group of selected elements to another
           "fillStyle": "hachure",
           "frameId": null,
           "groupIds": [],
-          "height": 100,
+          "height": 1000,
           "id": "id1",
           "isDeleted": false,
           "link": null,
@@ -16613,9 +15288,9 @@ exports[`regression tests > switches from group of selected elements to another
           "updated": 1,
           "version": 2,
           "versionNonce": 1116226695,
-          "width": 100,
-          "x": 110,
-          "y": 110,
+          "width": 1000,
+          "x": 3660,
+          "y": 2400,
         },
         {
           "angle": 0,
@@ -16624,7 +15299,7 @@ exports[`regression tests > switches from group of selected elements to another
           "fillStyle": "hachure",
           "frameId": null,
           "groupIds": [],
-          "height": 100,
+          "height": 1000,
           "id": "id2",
           "isDeleted": false,
           "link": null,
@@ -16642,9 +15317,9 @@ exports[`regression tests > switches from group of selected elements to another
           "updated": 1,
           "version": 2,
           "versionNonce": 1604849351,
-          "width": 100,
-          "x": 310,
-          "y": 310,
+          "width": 1000,
+          "x": 5660,
+          "y": 4400,
         },
       ],
     },
@@ -16709,8 +15384,8 @@ exports[`regression tests > switches selected element on pointer down > [end of
     "version": 1,
     "versionNonce": 0,
     "width": 0,
-    "x": 0,
-    "y": 0,
+    "x": 2560,
+    "y": 1300,
   },
   "editingElement": null,
   "editingFrame": null,
@@ -16756,9 +15431,15 @@ exports[`regression tests > switches selected element on pointer down > [end of
     "id1": true,
   },
   "resizingElement": null,
-  "scrollConstraints": null,
-  "scrollX": 0,
-  "scrollY": 0,
+  "scrollConstraints": {
+    "height": 1300,
+    "lockZoom": false,
+    "width": 2560,
+    "x": 0,
+    "y": 0,
+  },
+  "scrollX": -2560,
+  "scrollY": -1300,
   "scrolledOutside": false,
   "selectedElementIds": {
     "id0": true,
@@ -16792,8 +15473,8 @@ exports[`regression tests > switches selected element on pointer down > [end of
     "version": 1,
     "versionNonce": 0,
     "width": 0,
-    "x": 0,
-    "y": 0,
+    "x": 2560,
+    "y": 1300,
   },
   "shouldCacheIgnoreZoom": false,
   "showHyperlinkPopup": false,
@@ -16808,7 +15489,7 @@ exports[`regression tests > switches selected element on pointer down > [end of
   "width": 1024,
   "zenModeEnabled": false,
   "zoom": {
-    "value": 1,
+    "value": 0.1,
   },
 }
 `;
@@ -16848,7 +15529,7 @@ exports[`regression tests > switches selected element on pointer down > [end of
           "fillStyle": "hachure",
           "frameId": null,
           "groupIds": [],
-          "height": 10,
+          "height": 100,
           "id": "id0",
           "isDeleted": false,
           "link": null,
@@ -16866,9 +15547,9 @@ exports[`regression tests > switches selected element on pointer down > [end of
           "updated": 1,
           "version": 2,
           "versionNonce": 453191,
-          "width": 10,
-          "x": 0,
-          "y": 0,
+          "width": 100,
+          "x": 2560,
+          "y": 1300,
         },
       ],
     },
@@ -16891,7 +15572,7 @@ exports[`regression tests > switches selected element on pointer down > [end of
           "fillStyle": "hachure",
           "frameId": null,
           "groupIds": [],
-          "height": 10,
+          "height": 100,
           "id": "id0",
           "isDeleted": false,
           "link": null,
@@ -16909,9 +15590,9 @@ exports[`regression tests > switches selected element on pointer down > [end of
           "updated": 1,
           "version": 2,
           "versionNonce": 453191,
-          "width": 10,
-          "x": 0,
-          "y": 0,
+          "width": 100,
+          "x": 2560,
+          "y": 1300,
         },
         {
           "angle": 0,
@@ -16920,7 +15601,7 @@ exports[`regression tests > switches selected element on pointer down > [end of
           "fillStyle": "hachure",
           "frameId": null,
           "groupIds": [],
-          "height": 10,
+          "height": 100,
           "id": "id1",
           "isDeleted": false,
           "link": null,
@@ -16938,9 +15619,9 @@ exports[`regression tests > switches selected element on pointer down > [end of
           "updated": 1,
           "version": 2,
           "versionNonce": 1116226695,
-          "width": 10,
-          "x": 20,
-          "y": 20,
+          "width": 100,
+          "x": 2760,
+          "y": 1500,
         },
       ],
     },
@@ -17022,16 +15703,23 @@ exports[`regression tests > two-finger scroll works > [end of test] appState 1`]
   "pendingImageElementId": null,
   "previousSelectedElementIds": {},
   "resizingElement": null,
-  "scrollConstraints": null,
-  "scrollX": 10,
-  "scrollY": -10,
+  "scrollConstraints": {
+    "animateOnNextUpdate": true,
+    "height": 1300,
+    "lockZoom": false,
+    "width": 2560,
+    "x": 0,
+    "y": 0,
+  },
+  "scrollX": 3580,
+  "scrollY": 2930,
   "scrolledOutside": false,
   "selectedElementIds": {},
   "selectedElementsAreBeingDragged": false,
   "selectedGroupIds": {},
   "selectedLinearElement": null,
   "selectionElement": null,
-  "shouldCacheIgnoreZoom": true,
+  "shouldCacheIgnoreZoom": false,
   "showHyperlinkPopup": false,
   "showStats": false,
   "showWelcomeScreen": true,
@@ -17044,7 +15732,7 @@ exports[`regression tests > two-finger scroll works > [end of test] appState 1`]
   "width": 1024,
   "zenModeEnabled": false,
   "zoom": {
-    "value": 1,
+    "value": 0.1,
   },
 }
 `;
@@ -17071,7 +15759,7 @@ exports[`regression tests > two-finger scroll works > [end of test] history 1`]
 
 exports[`regression tests > two-finger scroll works > [end of test] number of elements 1`] = `0`;
 
-exports[`regression tests > two-finger scroll works > [end of test] number of renders 1`] = `8`;
+exports[`regression tests > two-finger scroll works > [end of test] number of renders 1`] = `6`;
 
 exports[`regression tests > undo/redo drawing an element > [end of test] appState 1`] = `
 {
@@ -17143,9 +15831,15 @@ exports[`regression tests > undo/redo drawing an element > [end of test] appStat
   "pendingImageElementId": null,
   "previousSelectedElementIds": {},
   "resizingElement": null,
-  "scrollConstraints": null,
-  "scrollX": 0,
-  "scrollY": 0,
+  "scrollConstraints": {
+    "height": 1300,
+    "lockZoom": false,
+    "width": 2560,
+    "x": 0,
+    "y": 0,
+  },
+  "scrollX": -2560,
+  "scrollY": -1300,
   "scrolledOutside": false,
   "selectedElementIds": {
     "id1": true,
@@ -17167,7 +15861,7 @@ exports[`regression tests > undo/redo drawing an element > [end of test] appStat
   "width": 1024,
   "zenModeEnabled": false,
   "zoom": {
-    "value": 1,
+    "value": 0.1,
   },
 }
 `;
@@ -17195,7 +15889,7 @@ exports[`regression tests > undo/redo drawing an element > [end of test] history
           "fillStyle": "hachure",
           "frameId": null,
           "groupIds": [],
-          "height": 10,
+          "height": 100,
           "id": "id0",
           "isDeleted": false,
           "link": null,
@@ -17213,9 +15907,9 @@ exports[`regression tests > undo/redo drawing an element > [end of test] history
           "updated": 1,
           "version": 2,
           "versionNonce": 453191,
-          "width": 20,
-          "x": 10,
-          "y": -10,
+          "width": 200,
+          "x": 2660,
+          "y": 1200,
         },
         {
           "angle": 0,
@@ -17224,7 +15918,7 @@ exports[`regression tests > undo/redo drawing an element > [end of test] history
           "fillStyle": "hachure",
           "frameId": null,
           "groupIds": [],
-          "height": 20,
+          "height": 200,
           "id": "id1",
           "isDeleted": false,
           "link": null,
@@ -17242,9 +15936,9 @@ exports[`regression tests > undo/redo drawing an element > [end of test] history
           "updated": 1,
           "version": 2,
           "versionNonce": 1116226695,
-          "width": 30,
-          "x": 40,
-          "y": 0,
+          "width": 300,
+          "x": 2960,
+          "y": 1300,
         },
         {
           "angle": 0,
@@ -17255,12 +15949,12 @@ exports[`regression tests > undo/redo drawing an element > [end of test] history
           "fillStyle": "hachure",
           "frameId": null,
           "groupIds": [],
-          "height": 20,
+          "height": 200,
           "id": "id2",
           "isDeleted": false,
           "lastCommittedPoint": [
-            100,
-            20,
+            1000,
+            200,
           ],
           "link": null,
           "locked": false,
@@ -17271,12 +15965,12 @@ exports[`regression tests > undo/redo drawing an element > [end of test] history
               0,
             ],
             [
-              60,
-              10,
+              600,
+              100,
             ],
             [
-              100,
-              20,
+              1000,
+              200,
             ],
           ],
           "roughness": 1,
@@ -17293,9 +15987,9 @@ exports[`regression tests > undo/redo drawing an element > [end of test] history
           "updated": 1,
           "version": 7,
           "versionNonce": 1006504105,
-          "width": 100,
-          "x": 130,
-          "y": 10,
+          "width": 1000,
+          "x": 3860,
+          "y": 1400,
         },
       ],
     },
@@ -17318,7 +16012,7 @@ exports[`regression tests > undo/redo drawing an element > [end of test] history
           "fillStyle": "hachure",
           "frameId": null,
           "groupIds": [],
-          "height": 10,
+          "height": 100,
           "id": "id0",
           "isDeleted": false,
           "link": null,
@@ -17336,9 +16030,9 @@ exports[`regression tests > undo/redo drawing an element > [end of test] history
           "updated": 1,
           "version": 2,
           "versionNonce": 453191,
-          "width": 20,
-          "x": 10,
-          "y": -10,
+          "width": 200,
+          "x": 2660,
+          "y": 1200,
         },
         {
           "angle": 0,
@@ -17347,7 +16041,7 @@ exports[`regression tests > undo/redo drawing an element > [end of test] history
           "fillStyle": "hachure",
           "frameId": null,
           "groupIds": [],
-          "height": 20,
+          "height": 200,
           "id": "id1",
           "isDeleted": false,
           "link": null,
@@ -17365,9 +16059,9 @@ exports[`regression tests > undo/redo drawing an element > [end of test] history
           "updated": 1,
           "version": 2,
           "versionNonce": 1116226695,
-          "width": 30,
-          "x": 40,
-          "y": 0,
+          "width": 300,
+          "x": 2960,
+          "y": 1300,
         },
         {
           "angle": 0,
@@ -17378,12 +16072,12 @@ exports[`regression tests > undo/redo drawing an element > [end of test] history
           "fillStyle": "hachure",
           "frameId": null,
           "groupIds": [],
-          "height": 10,
+          "height": 100,
           "id": "id2",
           "isDeleted": false,
           "lastCommittedPoint": [
-            60,
-            10,
+            600,
+            100,
           ],
           "link": null,
           "locked": false,
@@ -17394,8 +16088,8 @@ exports[`regression tests > undo/redo drawing an element > [end of test] history
               0,
             ],
             [
-              60,
-              10,
+              600,
+              100,
             ],
           ],
           "roughness": 1,
@@ -17412,9 +16106,9 @@ exports[`regression tests > undo/redo drawing an element > [end of test] history
           "updated": 1,
           "version": 5,
           "versionNonce": 81784553,
-          "width": 60,
-          "x": 130,
-          "y": 10,
+          "width": 600,
+          "x": 3860,
+          "y": 1400,
         },
       ],
     },
@@ -17450,7 +16144,7 @@ exports[`regression tests > undo/redo drawing an element > [end of test] history
           "fillStyle": "hachure",
           "frameId": null,
           "groupIds": [],
-          "height": 10,
+          "height": 100,
           "id": "id0",
           "isDeleted": false,
           "link": null,
@@ -17468,9 +16162,9 @@ exports[`regression tests > undo/redo drawing an element > [end of test] history
           "updated": 1,
           "version": 2,
           "versionNonce": 453191,
-          "width": 20,
-          "x": 10,
-          "y": -10,
+          "width": 200,
+          "x": 2660,
+          "y": 1200,
         },
       ],
     },
@@ -17493,7 +16187,7 @@ exports[`regression tests > undo/redo drawing an element > [end of test] history
           "fillStyle": "hachure",
           "frameId": null,
           "groupIds": [],
-          "height": 10,
+          "height": 100,
           "id": "id0",
           "isDeleted": false,
           "link": null,
@@ -17511,9 +16205,9 @@ exports[`regression tests > undo/redo drawing an element > [end of test] history
           "updated": 1,
           "version": 2,
           "versionNonce": 453191,
-          "width": 20,
-          "x": 10,
-          "y": -10,
+          "width": 200,
+          "x": 2660,
+          "y": 1200,
         },
         {
           "angle": 0,
@@ -17522,7 +16216,7 @@ exports[`regression tests > undo/redo drawing an element > [end of test] history
           "fillStyle": "hachure",
           "frameId": null,
           "groupIds": [],
-          "height": 20,
+          "height": 200,
           "id": "id1",
           "isDeleted": false,
           "link": null,
@@ -17540,9 +16234,9 @@ exports[`regression tests > undo/redo drawing an element > [end of test] history
           "updated": 1,
           "version": 2,
           "versionNonce": 1116226695,
-          "width": 30,
-          "x": 40,
-          "y": 0,
+          "width": 300,
+          "x": 2960,
+          "y": 1300,
         },
       ],
     },
@@ -17624,9 +16318,15 @@ exports[`regression tests > updates fontSize & fontFamily appState > [end of tes
   "pendingImageElementId": null,
   "previousSelectedElementIds": {},
   "resizingElement": null,
-  "scrollConstraints": null,
-  "scrollX": 0,
-  "scrollY": 0,
+  "scrollConstraints": {
+    "height": 1300,
+    "lockZoom": false,
+    "width": 2560,
+    "x": 0,
+    "y": 0,
+  },
+  "scrollX": -2560,
+  "scrollY": -1300,
   "scrolledOutside": false,
   "selectedElementIds": {},
   "selectedElementsAreBeingDragged": false,
@@ -17646,7 +16346,7 @@ exports[`regression tests > updates fontSize & fontFamily appState > [end of tes
   "width": 1024,
   "zenModeEnabled": false,
   "zoom": {
-    "value": 1,
+    "value": 0.1,
   },
 }
 `;
@@ -17745,9 +16445,15 @@ exports[`regression tests > zoom hotkeys > [end of test] appState 1`] = `
   "pendingImageElementId": null,
   "previousSelectedElementIds": {},
   "resizingElement": null,
-  "scrollConstraints": null,
-  "scrollX": 0,
-  "scrollY": 0,
+  "scrollConstraints": {
+    "height": 1300,
+    "lockZoom": false,
+    "width": 2560,
+    "x": 0,
+    "y": 0,
+  },
+  "scrollX": -2560,
+  "scrollY": -1300,
   "scrolledOutside": false,
   "selectedElementIds": {},
   "selectedElementsAreBeingDragged": false,
@@ -17767,7 +16473,7 @@ exports[`regression tests > zoom hotkeys > [end of test] appState 1`] = `
   "width": 1024,
   "zenModeEnabled": false,
   "zoom": {
-    "value": 1,
+    "value": 0.1,
   },
 }
 `;
@@ -17794,4 +16500,4 @@ exports[`regression tests > zoom hotkeys > [end of test] history 1`] = `
 
 exports[`regression tests > zoom hotkeys > [end of test] number of elements 1`] = `0`;
 
-exports[`regression tests > zoom hotkeys > [end of test] number of renders 1`] = `6`;
+exports[`regression tests > zoom hotkeys > [end of test] number of renders 1`] = `4`;
diff --git a/src/tests/__snapshots__/selection.test.tsx.snap b/src/tests/__snapshots__/selection.test.tsx.snap
deleted file mode 100644
index 33635bca5..000000000
--- a/src/tests/__snapshots__/selection.test.tsx.snap
+++ /dev/null
@@ -1,191 +0,0 @@
-// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
-
-exports[`select single element on the scene > arrow 1`] = `
-{
-  "angle": 0,
-  "backgroundColor": "transparent",
-  "boundElements": null,
-  "endArrowhead": "arrow",
-  "endBinding": null,
-  "fillStyle": "hachure",
-  "frameId": null,
-  "groupIds": [],
-  "height": 50,
-  "id": "id0",
-  "isDeleted": false,
-  "lastCommittedPoint": null,
-  "link": null,
-  "locked": false,
-  "opacity": 100,
-  "points": [
-    [
-      0,
-      0,
-    ],
-    [
-      30,
-      50,
-    ],
-  ],
-  "roughness": 1,
-  "roundness": {
-    "type": 2,
-  },
-  "seed": 1278240551,
-  "startArrowhead": null,
-  "startBinding": null,
-  "strokeColor": "#1e1e1e",
-  "strokeStyle": "solid",
-  "strokeWidth": 1,
-  "type": "arrow",
-  "updated": 1,
-  "version": 3,
-  "versionNonce": 401146281,
-  "width": 30,
-  "x": 10,
-  "y": 10,
-}
-`;
-
-exports[`select single element on the scene > arrow escape 1`] = `
-{
-  "angle": 0,
-  "backgroundColor": "transparent",
-  "boundElements": null,
-  "endArrowhead": null,
-  "endBinding": null,
-  "fillStyle": "hachure",
-  "frameId": null,
-  "groupIds": [],
-  "height": 50,
-  "id": "id0",
-  "isDeleted": false,
-  "lastCommittedPoint": null,
-  "link": null,
-  "locked": false,
-  "opacity": 100,
-  "points": [
-    [
-      0,
-      0,
-    ],
-    [
-      30,
-      50,
-    ],
-  ],
-  "roughness": 1,
-  "roundness": {
-    "type": 2,
-  },
-  "seed": 1278240551,
-  "startArrowhead": null,
-  "startBinding": null,
-  "strokeColor": "#1e1e1e",
-  "strokeStyle": "solid",
-  "strokeWidth": 1,
-  "type": "line",
-  "updated": 1,
-  "version": 3,
-  "versionNonce": 401146281,
-  "width": 30,
-  "x": 10,
-  "y": 10,
-}
-`;
-
-exports[`select single element on the scene > diamond 1`] = `
-{
-  "angle": 0,
-  "backgroundColor": "transparent",
-  "boundElements": null,
-  "fillStyle": "hachure",
-  "frameId": null,
-  "groupIds": [],
-  "height": 50,
-  "id": "id0",
-  "isDeleted": false,
-  "link": null,
-  "locked": false,
-  "opacity": 100,
-  "roughness": 1,
-  "roundness": {
-    "type": 2,
-  },
-  "seed": 1278240551,
-  "strokeColor": "#1e1e1e",
-  "strokeStyle": "solid",
-  "strokeWidth": 1,
-  "type": "diamond",
-  "updated": 1,
-  "version": 2,
-  "versionNonce": 453191,
-  "width": 30,
-  "x": 10,
-  "y": 10,
-}
-`;
-
-exports[`select single element on the scene > ellipse 1`] = `
-{
-  "angle": 0,
-  "backgroundColor": "transparent",
-  "boundElements": null,
-  "fillStyle": "hachure",
-  "frameId": null,
-  "groupIds": [],
-  "height": 50,
-  "id": "id0",
-  "isDeleted": false,
-  "link": null,
-  "locked": false,
-  "opacity": 100,
-  "roughness": 1,
-  "roundness": {
-    "type": 2,
-  },
-  "seed": 1278240551,
-  "strokeColor": "#1e1e1e",
-  "strokeStyle": "solid",
-  "strokeWidth": 1,
-  "type": "ellipse",
-  "updated": 1,
-  "version": 2,
-  "versionNonce": 453191,
-  "width": 30,
-  "x": 10,
-  "y": 10,
-}
-`;
-
-exports[`select single element on the scene > rectangle 1`] = `
-{
-  "angle": 0,
-  "backgroundColor": "transparent",
-  "boundElements": null,
-  "fillStyle": "hachure",
-  "frameId": null,
-  "groupIds": [],
-  "height": 50,
-  "id": "id0",
-  "isDeleted": false,
-  "link": null,
-  "locked": false,
-  "opacity": 100,
-  "roughness": 1,
-  "roundness": {
-    "type": 3,
-  },
-  "seed": 1278240551,
-  "strokeColor": "#1e1e1e",
-  "strokeStyle": "solid",
-  "strokeWidth": 1,
-  "type": "rectangle",
-  "updated": 1,
-  "version": 2,
-  "versionNonce": 453191,
-  "width": 30,
-  "x": 10,
-  "y": 10,
-}
-`;
diff --git a/src/tests/linearElementEditor.test.tsx b/src/tests/linearElementEditor.test.tsx
index 7c14b6ef7..806220379 100644
--- a/src/tests/linearElementEditor.test.tsx
+++ b/src/tests/linearElementEditor.test.tsx
@@ -726,8 +726,8 @@ describe("Test Linear Elements", () => {
             0,
           ],
           [
-            -60,
-            -100,
+            40,
+            0,
           ],
         ]
       `);
@@ -885,8 +885,8 @@ describe("Test Linear Elements", () => {
       ]);
       expect((h.elements[1] as ExcalidrawTextElementWithContainer).text)
         .toMatchInlineSnapshot(`
-          "Online whiteboard 
-          collaboration made 
+          "Online whiteboard
+          collaboration made
           easy"
         `);
     });
@@ -919,8 +919,8 @@ describe("Test Linear Elements", () => {
       ]);
       expect((h.elements[1] as ExcalidrawTextElementWithContainer).text)
         .toMatchInlineSnapshot(`
-          "Online whiteboard 
-          collaboration made 
+          "Online whiteboard
+          collaboration made
           easy"
         `);
     });
@@ -961,8 +961,8 @@ describe("Test Linear Elements", () => {
           }
         `);
       expect(textElement.text).toMatchInlineSnapshot(`
-        "Online whiteboard 
-        collaboration made 
+        "Online whiteboard
+        collaboration made
         easy"
       `);
       expect(LinearElementEditor.getElementAbsoluteCoords(container, true))
@@ -972,24 +972,24 @@ describe("Test Linear Elements", () => {
             20,
             105,
             80,
-            55.45893770831013,
+            55,
             45,
           ]
         `);
 
       rotate(container, -35, 55);
-      expect(container.angle).toMatchInlineSnapshot(`1.3988061968364685`);
+      expect(container.angle).toMatchInlineSnapshot("0");
       expect(textElement.angle).toBe(0);
       expect(getBoundTextElementPosition(container, textElement))
         .toMatchInlineSnapshot(`
           {
-            "x": 21.73926141863671,
-            "y": 73.31003398390868,
+            "x": 75,
+            "y": 60,
           }
         `);
       expect(textElement.text).toMatchInlineSnapshot(`
-        "Online whiteboard 
-        collaboration made 
+        "Online whiteboard
+        collaboration made
         easy"
       `);
       expect(LinearElementEditor.getElementAbsoluteCoords(container, true))
@@ -997,9 +997,9 @@ describe("Test Linear Elements", () => {
           [
             20,
             20,
-            102.41961302274555,
-            86.49012635273976,
-            55.45893770831013,
+            105,
+            80,
+            55,
             45,
           ]
         `);
@@ -1026,8 +1026,8 @@ describe("Test Linear Elements", () => {
           }
         `);
       expect(textElement.text).toMatchInlineSnapshot(`
-        "Online whiteboard 
-        collaboration made 
+        "Online whiteboard
+        collaboration made
         easy"
       `);
       expect(LinearElementEditor.getElementAbsoluteCoords(container, true))
@@ -1061,7 +1061,7 @@ describe("Test Linear Elements", () => {
         `);
       expect((h.elements[1] as ExcalidrawTextElementWithContainer).text)
         .toMatchInlineSnapshot(`
-          "Online whiteboard 
+          "Online whiteboard
           collaboration made easy"
         `);
       expect(LinearElementEditor.getElementAbsoluteCoords(container, true))
@@ -1094,8 +1094,8 @@ describe("Test Linear Elements", () => {
           }
         `);
       expect(textElement.text).toMatchInlineSnapshot(`
-        "Online whiteboard 
-        collaboration made 
+        "Online whiteboard
+        collaboration made
         easy"
       `);
       const points = LinearElementEditor.getPointsGlobalCoordinates(container);
@@ -1106,21 +1106,22 @@ describe("Test Linear Elements", () => {
       expect({ width: container.width, height: container.height })
         .toMatchInlineSnapshot(`
           {
-            "height": 130,
-            "width": 340,
+            "height": 0,
+            "width": 40,
           }
         `);
 
       expect(getBoundTextElementPosition(container, textElement))
         .toMatchInlineSnapshot(`
           {
-            "x": 75,
-            "y": -5,
+            "x": 25,
+            "y": 10,
           }
         `);
       expect(textElement.text).toMatchInlineSnapshot(`
-        "Online whiteboard 
-        collaboration made easy"
+        "Online whiteboard
+        collaboration made
+        easy"
       `);
     });
 
@@ -1167,7 +1168,7 @@ describe("Test Linear Elements", () => {
       expect(
         wrapText(textElement.originalText, font, getBoundTextMaxWidth(arrow)),
       ).toMatchInlineSnapshot(`
-        "Online whiteboard 
+        "Online whiteboard
         collaboration made easy"
       `);
       const handleBindTextResizeSpy = vi.spyOn(
@@ -1190,8 +1191,8 @@ describe("Test Linear Elements", () => {
       expect(
         wrapText(textElement.originalText, font, getBoundTextMaxWidth(arrow)),
       ).toMatchInlineSnapshot(`
-        "Online whiteboard 
-        collaboration made 
+        "Online whiteboard
+        collaboration made
         easy"
       `);
     });

From b40fd6540442fae9ca0c28f7e2136a6342e1d643 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Arno=C5=A1t=20Pleskot?= <arnostpleskot@gmail.com>
Date: Mon, 18 Sep 2023 15:00:52 +0200
Subject: [PATCH 46/57] feat: fix overscroll animation trigger when zoomed in

---
 src/scene/scrollConstraints.ts | 18 ++++++++++++------
 1 file changed, 12 insertions(+), 6 deletions(-)

diff --git a/src/scene/scrollConstraints.ts b/src/scene/scrollConstraints.ts
index a0497170d..940ca9f9e 100644
--- a/src/scene/scrollConstraints.ts
+++ b/src/scene/scrollConstraints.ts
@@ -294,13 +294,19 @@ const isViewportOutsideOfConstrainedArea = (state: AppState) => {
 
   const { scrollX, scrollY, width, height, scrollConstraints, zoom } = state;
 
+  // Adjust scroll and dimensions according to the zoom level
+  const adjustedScrollX = scrollX * zoom.value;
+  const adjustedScrollY = scrollY * zoom.value;
+  const adjustedWidth = width / zoom.value;
+  const adjustedHeight = height / zoom.value;
+
   return (
-    scrollX > scrollConstraints.x ||
-    scrollX - width <
-      scrollConstraints.x - scrollConstraints.width * zoom.value ||
-    scrollY > scrollConstraints.y ||
-    scrollY - height <
-      scrollConstraints.y - scrollConstraints.height * zoom.value
+    adjustedScrollX > scrollConstraints.x ||
+    adjustedScrollX - adjustedWidth <
+      scrollConstraints.x - scrollConstraints.width ||
+    adjustedScrollY > scrollConstraints.y ||
+    adjustedScrollY - adjustedHeight <
+      scrollConstraints.y - scrollConstraints.height
   );
 };
 

From d5f55aba447ff636ae37edbac41eeab1329fd26b Mon Sep 17 00:00:00 2001
From: dwelle <5153846+dwelle@users.noreply.github.com>
Date: Wed, 7 Feb 2024 16:10:47 +0100
Subject: [PATCH 47/57] [debug] 2

---
 excalidraw-app/App.tsx                        | 226 ++++++++++++++++--
 .../excalidraw/scene/scrollConstraints.ts     |   2 +-
 2 files changed, 207 insertions(+), 21 deletions(-)

diff --git a/excalidraw-app/App.tsx b/excalidraw-app/App.tsx
index 93ae38478..ea4f8d067 100644
--- a/excalidraw-app/App.tsx
+++ b/excalidraw-app/App.tsx
@@ -27,6 +27,7 @@ import {
   LiveCollaborationTrigger,
   TTDDialog,
   TTDDialogTrigger,
+  getCommonBounds,
 } from "../packages/excalidraw/index";
 import {
   AppState,
@@ -35,6 +36,7 @@ import {
   BinaryFiles,
   ExcalidrawInitialDataState,
   UIAppState,
+  ScrollConstraints,
 } from "../packages/excalidraw/types";
 import {
   debounce,
@@ -98,15 +100,161 @@ import { useAtomWithInitialValue } from "../packages/excalidraw/jotai";
 import { appJotaiStore } from "./app-jotai";
 
 import "./index.scss";
-import { ResolutionType } from "../packages/excalidraw/utility-types";
+import { Merge, ResolutionType } from "../packages/excalidraw/utility-types";
 import { ShareableLinkDialog } from "../packages/excalidraw/components/ShareableLinkDialog";
 import { openConfirmModal } from "../packages/excalidraw/components/OverwriteConfirm/OverwriteConfirmState";
 import { OverwriteConfirmDialog } from "../packages/excalidraw/components/OverwriteConfirm/OverwriteConfirm";
 import Trans from "../packages/excalidraw/components/Trans";
 import { ShareDialog, shareDialogStateAtom } from "./share/ShareDialog";
+import { getSelectedElements } from "../packages/excalidraw/scene";
 
 polyfill();
 
+type DebugScrollConstraints = Merge<
+  ScrollConstraints,
+  { viewportZoomFactor: number; enabled: boolean }
+>;
+
+const ConstraintsSettings = ({
+  initialConstraints,
+  excalidrawAPI,
+}: {
+  initialConstraints: DebugScrollConstraints;
+  excalidrawAPI: ExcalidrawImperativeAPI;
+}) => {
+  const [constraints, setConstraints] =
+    useState<DebugScrollConstraints>(initialConstraints);
+
+  useEffect(() => {
+    // add JSON-stringified constraints into url hash for easy sharing
+    const hash = new URLSearchParams(window.location.hash.slice(1));
+    hash.set(
+      "constraints",
+      encodeURIComponent(
+        window.btoa(JSON.stringify(constraints)).replace(/=+/, ""),
+      ),
+    );
+    window.location.hash = decodeURIComponent(hash.toString());
+  }, [constraints]);
+
+  const [selection, setSelection] = useState<ExcalidrawElement[]>([]);
+  useEffect(() => {
+    return excalidrawAPI.onChange((elements, appState) => {
+      setSelection(getSelectedElements(elements, appState));
+    });
+  }, [excalidrawAPI]);
+
+  return (
+    <div
+      style={{
+        display: "flex",
+        position: "fixed",
+        bottom: 10,
+        left: "calc(50%)",
+        transform: "translateX(-50%)",
+        gap: "0.6rem",
+        zIndex: 999999,
+      }}
+    >
+      enabled:{" "}
+      <input
+        type="checkbox"
+        defaultChecked={!!constraints.enabled}
+        onChange={(e) =>
+          setConstraints((s) => ({ ...s, enabled: e.target.checked }))
+        }
+      />
+      x:{" "}
+      <input
+        placeholder="x"
+        size={4}
+        value={constraints.x.toString()}
+        onChange={(e) =>
+          setConstraints((s) => ({
+            ...s,
+            x: parseInt(e.target.value) ?? 0,
+          }))
+        }
+      />
+      y:{" "}
+      <input
+        placeholder="y"
+        size={4}
+        value={constraints.y.toString()}
+        onChange={(e) =>
+          setConstraints((s) => ({
+            ...s,
+            y: parseInt(e.target.value) ?? 0,
+          }))
+        }
+      />
+      w:{" "}
+      <input
+        placeholder="width"
+        size={4}
+        value={constraints.width.toString()}
+        onChange={(e) =>
+          setConstraints((s) => ({
+            ...s,
+            x: parseInt(e.target.value) ?? 200,
+          }))
+        }
+      />
+      h:{" "}
+      <input
+        placeholder="height"
+        size={4}
+        value={constraints.height.toString()}
+        onChange={(e) =>
+          setConstraints((s) => ({
+            ...s,
+            x: parseInt(e.target.value) ?? 200,
+          }))
+        }
+      />
+      zoomFactor:
+      <input
+        placeholder="height"
+        type="number"
+        min="0.1"
+        max="1"
+        step="0.1"
+        value={constraints.viewportZoomFactor.toString()}
+        onChange={(e) =>
+          setConstraints((s) => ({
+            ...s,
+            viewportZoomFactor: parseFloat(e.target.value.toString()) ?? 0.7,
+          }))
+        }
+      />
+      lockZoom:{" "}
+      <input
+        type="checkbox"
+        defaultChecked={!!constraints.lockZoom}
+        onChange={(e) =>
+          setConstraints((s) => ({ ...s, lockZoom: e.target.checked }))
+        }
+      />
+      {selection.length > 0 && (
+        <button
+          onClick={() => {
+            const bbox = getCommonBounds(selection);
+            setConstraints((s) => ({
+              ...s,
+              x: Math.round(bbox[0]),
+              y: Math.round(bbox[1]),
+              width: Math.round(bbox[2] - bbox[0]),
+              height: Math.round(bbox[3] - bbox[1]),
+            }));
+          }}
+        >
+          use selection
+        </button>
+      )}
+    </div>
+  );
+};
+
 window.EXCALIDRAW_THROTTLE_RENDER = true;
 
 let isSelfEmbedding = false;
@@ -151,10 +299,22 @@ const initializeScene = async (opts: {
   )
 > => {
   const searchParams = new URLSearchParams(window.location.search);
+  const hashParams = new URLSearchParams(window.location.hash.slice(1));
   const id = searchParams.get("id");
-  const jsonBackendMatch = window.location.hash.match(
-    /^#json=([a-zA-Z0-9_-]+),([a-zA-Z0-9_-]+)$/,
-  );
+  const shareableLink = hashParams.get("json")?.split(",");
+
+  if (shareableLink) {
+    hashParams.delete("json");
+    const hash = `#${decodeURIComponent(hashParams.toString())}`;
+    window.history.replaceState(
+      {},
+      APP_NAME,
+      `${window.location.origin}${hash}`,
+    );
+  }
+
+  console.log({ shareableLink });
+
   const externalUrlMatch = window.location.hash.match(/^#url=(.*)$/);
 
   const localDataState = importFromLocalStorage();
@@ -164,7 +324,7 @@ const initializeScene = async (opts: {
   } = await loadScene(null, null, localDataState);
 
   let roomLinkData = getCollaborationLinkData(window.location.href);
-  const isExternalScene = !!(id || jsonBackendMatch || roomLinkData);
+  const isExternalScene = !!(id || shareableLink || roomLinkData);
   if (isExternalScene) {
     if (
       // don't prompt if scene is empty
@@ -174,16 +334,17 @@ const initializeScene = async (opts: {
       // otherwise, prompt whether user wants to override current scene
       (await openConfirmModal(shareableLinkConfirmDialog))
     ) {
-      if (jsonBackendMatch) {
+      if (shareableLink) {
         scene = await loadScene(
-          jsonBackendMatch[1],
-          jsonBackendMatch[2],
+          shareableLink[0],
+          shareableLink[1],
           localDataState,
         );
+        console.log(">>>>", scene);
       }
       scene.scrollToContent = true;
       if (!roomLinkData) {
-        window.history.replaceState({}, APP_NAME, window.location.origin);
+        // window.history.replaceState({}, APP_NAME, window.location.origin);
       }
     } else {
       // https://github.com/excalidraw/excalidraw/issues/1919
@@ -200,7 +361,7 @@ const initializeScene = async (opts: {
       }
 
       roomLinkData = null;
-      window.history.replaceState({}, APP_NAME, window.location.origin);
+      // window.history.replaceState({}, APP_NAME, window.location.origin);
     }
   } else if (externalUrlMatch) {
     window.history.replaceState({}, APP_NAME, window.location.origin);
@@ -261,12 +422,12 @@ const initializeScene = async (opts: {
       key: roomLinkData.roomKey,
     };
   } else if (scene) {
-    return isExternalScene && jsonBackendMatch
+    return isExternalScene && shareableLink
       ? {
           scene,
           isExternalScene,
-          id: jsonBackendMatch[1],
-          key: jsonBackendMatch[2],
+          id: shareableLink[0],
+          key: shareableLink[1],
         }
       : { scene, isExternalScene: false };
   }
@@ -672,6 +833,31 @@ const ExcalidrawWrapper = () => {
     [setShareDialogState],
   );
 
+  const [constraints] = useState<DebugScrollConstraints>(() => {
+    const stored = new URLSearchParams(location.hash.slice(1)).get(
+      "constraints",
+    );
+    let storedConstraints = {};
+    if (stored) {
+      try {
+        storedConstraints = JSON.parse(window.atob(stored));
+      } catch {}
+    }
+
+    return {
+      x: 0,
+      y: 0,
+      width: document.body.clientWidth,
+      height: document.body.clientHeight,
+      lockZoom: false,
+      viewportZoomFactor: 0.7,
+      enabled: true,
+      ...storedConstraints,
+    };
+  });
+
+  console.log(constraints);
+
   // browsers generally prevent infinite self-embedding, there are
   // cases where it still happens, and while we disallow self-embedding
   // by not whitelisting our own origin, this serves as an additional guard
@@ -753,14 +939,14 @@ const ExcalidrawWrapper = () => {
             />
           );
         }}
-        scrollConstraints={{
-          x: 0,
-          y: 0,
-          width: 2560,
-          height: 1300,
-          lockZoom: false,
-        }}
+        scrollConstraints={constraints.enabled ? constraints : undefined}
       >
+        {excalidrawAPI && (
+          <ConstraintsSettings
+            excalidrawAPI={excalidrawAPI}
+            initialConstraints={constraints}
+          />
+        )}
         <AppMainMenu
           onCollabDialogOpen={onCollabDialogOpen}
           isCollaborating={isCollaborating}
diff --git a/packages/excalidraw/scene/scrollConstraints.ts b/packages/excalidraw/scene/scrollConstraints.ts
index 940ca9f9e..01c05afa9 100644
--- a/packages/excalidraw/scene/scrollConstraints.ts
+++ b/packages/excalidraw/scene/scrollConstraints.ts
@@ -77,7 +77,7 @@ const calculateZoomLevel = (
   width: AppState["width"],
   height: AppState["height"],
 ) => {
-  const DEFAULT_VIEWPORT_ZOOM_FACTOR = 0.7;
+  const DEFAULT_VIEWPORT_ZOOM_FACTOR = 0.2;
 
   const viewportZoomFactor = scrollConstraints.viewportZoomFactor
     ? Math.min(1, Math.max(scrollConstraints.viewportZoomFactor, 0.1))

From 9bc874a61ef3342c4c2fe87b15c4b47d525a4ef1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Arno=C5=A1t=20Pleskot?= <arnostpleskot@gmail.com>
Date: Thu, 8 Feb 2024 18:40:42 +0100
Subject: [PATCH 48/57] fix: adjust the scroll constraints to align with
 inverted scrollX/Y

---
 .../excalidraw/scene/scrollConstraints.ts     | 50 +++++++++++++++++--
 1 file changed, 46 insertions(+), 4 deletions(-)

diff --git a/packages/excalidraw/scene/scrollConstraints.ts b/packages/excalidraw/scene/scrollConstraints.ts
index 01c05afa9..ff5aa0559 100644
--- a/packages/excalidraw/scene/scrollConstraints.ts
+++ b/packages/excalidraw/scene/scrollConstraints.ts
@@ -25,12 +25,19 @@ export const calculateConstrainedScrollCenter = (
   scrollY: AppState["scrollY"];
   zoom: AppState["zoom"];
 } => {
-  const { width, height, zoom, scrollConstraints } = state;
+  const {
+    width,
+    height,
+    zoom,
+    scrollConstraints: inverseScrollConstraints,
+  } = state;
 
-  if (!scrollConstraints) {
+  if (!inverseScrollConstraints) {
     return { scrollX, scrollY, zoom };
   }
 
+  const scrollConstraints = alignScrollConstraints(inverseScrollConstraints);
+
   const { zoomLevelX, zoomLevelY, initialZoomLevel } = calculateZoomLevel(
     scrollConstraints,
     width,
@@ -281,6 +288,23 @@ const constrainScrollValues = ({
   };
 };
 
+/**
+ * Inverts the scroll constraints to align with the state scrollX and scrollY values, which are inverted.
+ * This should be removed once the https://github.com/excalidraw/excalidraw/issues/5965 is resolved.
+ *
+ * @param originalScrollContraints - The scroll constraints with the original coordinates.
+ */
+// BUG: remove this function once the #5965 is resolved
+const alignScrollConstraints = (
+  originalScrollContraints: ScrollConstraints,
+) => {
+  return {
+    ...originalScrollContraints,
+    x: originalScrollContraints.x * -1,
+    y: originalScrollContraints.y * -1,
+  };
+};
+
 /**
  * Determines whether the current viewport is outside the constrained area defined in the AppState.
  *
@@ -292,7 +316,16 @@ const isViewportOutsideOfConstrainedArea = (state: AppState) => {
     return false;
   }
 
-  const { scrollX, scrollY, width, height, scrollConstraints, zoom } = state;
+  const {
+    scrollX,
+    scrollY,
+    width,
+    height,
+    scrollConstraints: inverseScrollConstraints,
+    zoom,
+  } = state;
+
+  const scrollConstraints = alignScrollConstraints(inverseScrollConstraints);
 
   // Adjust scroll and dimensions according to the zoom level
   const adjustedScrollX = scrollX * zoom.value;
@@ -332,7 +365,16 @@ export const constrainScrollState = (
   if (!state.scrollConstraints) {
     return state;
   }
-  const { scrollX, scrollY, width, height, scrollConstraints, zoom } = state;
+  const {
+    scrollX,
+    scrollY,
+    width,
+    height,
+    scrollConstraints: inverseScrollConstraints,
+    zoom,
+  } = state;
+
+  const scrollConstraints = alignScrollConstraints(inverseScrollConstraints);
 
   const canUseMemoizedValues =
     memoizedValues && // there are memoized values

From 82aa1cf19d3a1b7323966f9c5d7b5d1ae8581cae Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Arno=C5=A1t=20Pleskot?= <arnostpleskot@gmail.com>
Date: Fri, 9 Feb 2024 15:31:51 +0100
Subject: [PATCH 49/57] fix: fixed detecting viewport outside of constraints

---
 packages/excalidraw/scene/scrollConstraints.ts | 12 ++++--------
 1 file changed, 4 insertions(+), 8 deletions(-)

diff --git a/packages/excalidraw/scene/scrollConstraints.ts b/packages/excalidraw/scene/scrollConstraints.ts
index ff5aa0559..ea6242de0 100644
--- a/packages/excalidraw/scene/scrollConstraints.ts
+++ b/packages/excalidraw/scene/scrollConstraints.ts
@@ -328,18 +328,14 @@ const isViewportOutsideOfConstrainedArea = (state: AppState) => {
   const scrollConstraints = alignScrollConstraints(inverseScrollConstraints);
 
   // Adjust scroll and dimensions according to the zoom level
-  const adjustedScrollX = scrollX * zoom.value;
-  const adjustedScrollY = scrollY * zoom.value;
   const adjustedWidth = width / zoom.value;
   const adjustedHeight = height / zoom.value;
 
   return (
-    adjustedScrollX > scrollConstraints.x ||
-    adjustedScrollX - adjustedWidth <
-      scrollConstraints.x - scrollConstraints.width ||
-    adjustedScrollY > scrollConstraints.y ||
-    adjustedScrollY - adjustedHeight <
-      scrollConstraints.y - scrollConstraints.height
+    scrollX > scrollConstraints.x ||
+    scrollX - adjustedWidth < scrollConstraints.x - scrollConstraints.width ||
+    scrollY > scrollConstraints.y ||
+    scrollY - adjustedHeight < scrollConstraints.y - scrollConstraints.height
   );
 };
 

From 4c62eef7dadf383b8a2bbb68c7fcb0ae5253d720 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Arno=C5=A1t=20Pleskot?= <arnostpleskot@gmail.com>
Date: Fri, 9 Feb 2024 15:47:18 +0100
Subject: [PATCH 50/57] fix: add scroll constraints to pinch-to-zoom in safari

---
 packages/excalidraw/components/App.tsx | 23 +++++++++++++----------
 1 file changed, 13 insertions(+), 10 deletions(-)

diff --git a/packages/excalidraw/components/App.tsx b/packages/excalidraw/components/App.tsx
index 9288e8627..27d71d817 100644
--- a/packages/excalidraw/components/App.tsx
+++ b/packages/excalidraw/components/App.tsx
@@ -4269,16 +4269,19 @@ class App extends React.Component<AppProps, AppState> {
 
     const initialScale = gesture.initialScale;
     if (initialScale) {
-      this.setState((state) => ({
-        ...getStateForZoom(
-          {
-            viewportX: this.lastViewportPosition.x,
-            viewportY: this.lastViewportPosition.y,
-            nextZoom: getNormalizedZoom(initialScale * event.scale),
-          },
-          state,
-        ),
-      }));
+      this.setState((state) =>
+        constrainScrollState({
+          ...state,
+          ...getStateForZoom(
+            {
+              viewportX: this.lastViewportPosition.x,
+              viewportY: this.lastViewportPosition.y,
+              nextZoom: getNormalizedZoom(initialScale * event.scale),
+            },
+            state,
+          ),
+        }),
+      );
     }
   });
 

From b5bf346229fcd0d8900e30eabd4fa4ca4a28e9a7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Arno=C5=A1t=20Pleskot?= <arnostpleskot@gmail.com>
Date: Fri, 9 Feb 2024 16:10:58 +0100
Subject: [PATCH 51/57] fix: prevent jumping when trying to zoom out the
 zoomFactor

---
 packages/excalidraw/scene/scrollConstraints.ts | 16 +++++++++++-----
 1 file changed, 11 insertions(+), 5 deletions(-)

diff --git a/packages/excalidraw/scene/scrollConstraints.ts b/packages/excalidraw/scene/scrollConstraints.ts
index ea6242de0..32791d7ee 100644
--- a/packages/excalidraw/scene/scrollConstraints.ts
+++ b/packages/excalidraw/scene/scrollConstraints.ts
@@ -401,11 +401,17 @@ export const constrainScrollState = (
         allowOverscroll,
       });
 
-  const constrainedValues = constrainScrollValues({
-    ...constraints,
-    scrollX,
-    scrollY,
-  });
+  const constrainedValues =
+    zoom.value >= constraints.constrainedZoom.value // when trying to zoom out of the constrained area we want to keep the viewport centered and prevent jumping caused by change of scrollX and scrollY values when zooming
+      ? constrainScrollValues({
+          ...constraints,
+          scrollX,
+          scrollY,
+        })
+      : calculateConstrainedScrollCenter(state, {
+          scrollX,
+          scrollY,
+        });
 
   if (!canUseMemoizedValues) {
     memoizedValues = {

From 213134bbcadf6773eaceee36a1ea9e2f7f50b5f1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Arno=C5=A1t=20Pleskot?= <arnostpleskot@gmail.com>
Date: Fri, 9 Feb 2024 16:17:58 +0100
Subject: [PATCH 52/57] fix: disable overscroll on pinch-to-zoom

---
 packages/excalidraw/components/App.tsx | 25 ++++++++++++++-----------
 1 file changed, 14 insertions(+), 11 deletions(-)

diff --git a/packages/excalidraw/components/App.tsx b/packages/excalidraw/components/App.tsx
index 27d71d817..5a7d06c17 100644
--- a/packages/excalidraw/components/App.tsx
+++ b/packages/excalidraw/components/App.tsx
@@ -4270,17 +4270,20 @@ class App extends React.Component<AppProps, AppState> {
     const initialScale = gesture.initialScale;
     if (initialScale) {
       this.setState((state) =>
-        constrainScrollState({
-          ...state,
-          ...getStateForZoom(
-            {
-              viewportX: this.lastViewportPosition.x,
-              viewportY: this.lastViewportPosition.y,
-              nextZoom: getNormalizedZoom(initialScale * event.scale),
-            },
-            state,
-          ),
-        }),
+        constrainScrollState(
+          {
+            ...state,
+            ...getStateForZoom(
+              {
+                viewportX: this.lastViewportPosition.x,
+                viewportY: this.lastViewportPosition.y,
+                nextZoom: getNormalizedZoom(initialScale * event.scale),
+              },
+              state,
+            ),
+          },
+          false,
+        ),
       );
     }
   });

From 78d2a6ecc0e9c0d8d360cf7c1787f4da0eb43139 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Arno=C5=A1t=20Pleskot?= <arnostpleskot@gmail.com>
Date: Fri, 9 Feb 2024 20:09:00 +0100
Subject: [PATCH 53/57] feat: add constraints on canvas actions

---
 packages/excalidraw/actions/actionCanvas.tsx | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/packages/excalidraw/actions/actionCanvas.tsx b/packages/excalidraw/actions/actionCanvas.tsx
index ab5f8cfd7..73f4864be 100644
--- a/packages/excalidraw/actions/actionCanvas.tsx
+++ b/packages/excalidraw/actions/actionCanvas.tsx
@@ -22,6 +22,7 @@ import {
 import { DEFAULT_CANVAS_BACKGROUND_PICKS } from "../colors";
 import { SceneBounds } from "../element/bounds";
 import { setCursor } from "../cursor";
+import { constrainScrollState } from "../scene/scrollConstraints";
 
 export const actionChangeViewBackgroundColor = register({
   name: "changeViewBackgroundColor",
@@ -137,7 +138,7 @@ export const actionZoomOut = register({
   trackEvent: { category: "canvas" },
   perform: (_elements, appState, _, app) => {
     return {
-      appState: {
+      appState: constrainScrollState({
         ...appState,
         ...getStateForZoom(
           {
@@ -148,7 +149,7 @@ export const actionZoomOut = register({
           appState,
         ),
         userToFollow: null,
-      },
+      }),
       commitToHistory: false,
     };
   },

From d6710ded049b7df2faad06d1e3ef41f4d81f59a8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Arno=C5=A1t=20Pleskot?= <arnostpleskot@gmail.com>
Date: Fri, 9 Feb 2024 20:57:18 +0100
Subject: [PATCH 54/57] feat: disable animations during zooms out of translate
 canvas

---
 packages/excalidraw/actions/actionCanvas.tsx  | 54 ++++++++++---------
 packages/excalidraw/components/App.tsx        |  8 +--
 .../excalidraw/scene/scrollConstraints.ts     | 10 +++-
 3 files changed, 43 insertions(+), 29 deletions(-)

diff --git a/packages/excalidraw/actions/actionCanvas.tsx b/packages/excalidraw/actions/actionCanvas.tsx
index 73f4864be..42213877d 100644
--- a/packages/excalidraw/actions/actionCanvas.tsx
+++ b/packages/excalidraw/actions/actionCanvas.tsx
@@ -100,18 +100,21 @@ export const actionZoomIn = register({
   trackEvent: { category: "canvas" },
   perform: (_elements, appState, _, app) => {
     return {
-      appState: {
-        ...appState,
-        ...getStateForZoom(
-          {
-            viewportX: appState.width / 2 + appState.offsetLeft,
-            viewportY: appState.height / 2 + appState.offsetTop,
-            nextZoom: getNormalizedZoom(appState.zoom.value + ZOOM_STEP),
-          },
-          appState,
-        ),
-        userToFollow: null,
-      },
+      appState: constrainScrollState(
+        {
+          ...appState,
+          ...getStateForZoom(
+            {
+              viewportX: appState.width / 2 + appState.offsetLeft,
+              viewportY: appState.height / 2 + appState.offsetTop,
+              nextZoom: getNormalizedZoom(appState.zoom.value + ZOOM_STEP),
+            },
+            appState,
+          ),
+          userToFollow: null,
+        },
+        { disableAnimation: true },
+      ),
       commitToHistory: false,
     };
   },
@@ -138,18 +141,21 @@ export const actionZoomOut = register({
   trackEvent: { category: "canvas" },
   perform: (_elements, appState, _, app) => {
     return {
-      appState: constrainScrollState({
-        ...appState,
-        ...getStateForZoom(
-          {
-            viewportX: appState.width / 2 + appState.offsetLeft,
-            viewportY: appState.height / 2 + appState.offsetTop,
-            nextZoom: getNormalizedZoom(appState.zoom.value - ZOOM_STEP),
-          },
-          appState,
-        ),
-        userToFollow: null,
-      }),
+      appState: constrainScrollState(
+        {
+          ...appState,
+          ...getStateForZoom(
+            {
+              viewportX: appState.width / 2 + appState.offsetLeft,
+              viewportY: appState.height / 2 + appState.offsetTop,
+              nextZoom: getNormalizedZoom(appState.zoom.value - ZOOM_STEP),
+            },
+            appState,
+          ),
+          userToFollow: null,
+        },
+        { disableAnimation: true },
+      ),
       commitToHistory: false,
     };
   },
diff --git a/packages/excalidraw/components/App.tsx b/packages/excalidraw/components/App.tsx
index 5a7d06c17..0539df14a 100644
--- a/packages/excalidraw/components/App.tsx
+++ b/packages/excalidraw/components/App.tsx
@@ -2797,7 +2797,9 @@ class App extends React.Component<AppProps, AppState> {
     }
 
     if (this.state.scrollConstraints?.animateOnNextUpdate) {
-      const newState = constrainScrollState(this.state, false);
+      const newState = constrainScrollState(this.state, {
+        allowOverscroll: false,
+      });
 
       scrollConstraintsAnimationTimeout = setTimeout(() => {
         this.cancelInProgressAnimation?.();
@@ -4282,7 +4284,7 @@ class App extends React.Component<AppProps, AppState> {
               state,
             ),
           },
-          false,
+          { disableAnimation: true },
         ),
       );
     }
@@ -9646,7 +9648,7 @@ class App extends React.Component<AppProps, AppState> {
               ...this.state,
               scrollConstraints,
             },
-            false,
+            { allowOverscroll: false },
           );
 
           this.animateToConstrainedArea(
diff --git a/packages/excalidraw/scene/scrollConstraints.ts b/packages/excalidraw/scene/scrollConstraints.ts
index 32791d7ee..249743522 100644
--- a/packages/excalidraw/scene/scrollConstraints.ts
+++ b/packages/excalidraw/scene/scrollConstraints.ts
@@ -348,15 +348,17 @@ let memoizedValues: {
   allowOverscroll: boolean;
 } | null = null;
 
+type Options = { allowOverscroll?: boolean; disableAnimation?: boolean };
 /**
  * Constrains the AppState scroll values within the defined scroll constraints.
  *
  * @param state - The original AppState with the current scroll position, dimensions, and constraints.
+ * @param options - An object containing options for the method: allowOverscroll and disableAnimation.
  * @returns A new AppState object with scroll values constrained as per the defined constraints.
  */
 export const constrainScrollState = (
   state: AppState,
-  allowOverscroll = true,
+  options?: Options,
 ): AppState => {
   if (!state.scrollConstraints) {
     return state;
@@ -370,6 +372,8 @@ export const constrainScrollState = (
     zoom,
   } = state;
 
+  const { allowOverscroll = true, disableAnimation = false } = options || {};
+
   const scrollConstraints = alignScrollConstraints(inverseScrollConstraints);
 
   const canUseMemoizedValues =
@@ -430,7 +434,9 @@ export const constrainScrollState = (
     ...state,
     scrollConstraints: {
       ...state.scrollConstraints,
-      animateOnNextUpdate: isViewportOutsideOfConstrainedArea(state),
+      animateOnNextUpdate: disableAnimation
+        ? false
+        : isViewportOutsideOfConstrainedArea(state),
     },
     ...constrainedValues,
   };

From 1316d884fe33d1ed3dab8e3575ab0884d0984f94 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Arno=C5=A1t=20Pleskot?= <arnostpleskot@gmail.com>
Date: Fri, 9 Feb 2024 21:18:05 +0100
Subject: [PATCH 55/57] feat: update constraints on window resize

---
 packages/excalidraw/components/App.tsx | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/packages/excalidraw/components/App.tsx b/packages/excalidraw/components/App.tsx
index 0539df14a..3726bae63 100644
--- a/packages/excalidraw/components/App.tsx
+++ b/packages/excalidraw/components/App.tsx
@@ -2486,7 +2486,11 @@ class App extends React.Component<AppProps, AppState> {
     if (!supportsResizeObserver) {
       this.refreshEditorBreakpoints();
     }
-    this.setState({});
+    if (this.state.scrollConstraints) {
+      this.setState((state) => constrainScrollState(state));
+    } else {
+      this.setState({});
+    }
   });
 
   /** generally invoked only if fullscreen was invoked programmatically */

From 782772cec507754da80e6fb1d02d4332163f5ac6 Mon Sep 17 00:00:00 2001
From: Ryan Di <ryan.weihao.di@gmail.com>
Date: Mon, 14 Apr 2025 17:16:15 +1000
Subject: [PATCH 56/57] fix debug inputs

---
 excalidraw-app/App.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/excalidraw-app/App.tsx b/excalidraw-app/App.tsx
index 6b1ce4ff9..503fc7450 100644
--- a/excalidraw-app/App.tsx
+++ b/excalidraw-app/App.tsx
@@ -231,7 +231,7 @@ const ConstraintsSettings = ({
         onChange={(e) =>
           setConstraints((s) => ({
             ...s,
-            x: parseInt(e.target.value) ?? 200,
+            width: parseInt(e.target.value) ?? 200,
           }))
         }
       />
@@ -243,7 +243,7 @@ const ConstraintsSettings = ({
         onChange={(e) =>
           setConstraints((s) => ({
             ...s,
-            x: parseInt(e.target.value) ?? 200,
+            height: parseInt(e.target.value) ?? 200,
           }))
         }
       />

From df26487936b4e2aeaec08f772eff966548d5bcb2 Mon Sep 17 00:00:00 2001
From: Ryan Di <ryan.weihao.di@gmail.com>
Date: Mon, 14 Apr 2025 17:22:23 +1000
Subject: [PATCH 57/57] call api to update when debug inputs change

---
 excalidraw-app/App.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/excalidraw-app/App.tsx b/excalidraw-app/App.tsx
index 503fc7450..c6e05e286 100644
--- a/excalidraw-app/App.tsx
+++ b/excalidraw-app/App.tsx
@@ -170,6 +170,7 @@ const ConstraintsSettings = ({
       ),
     );
     window.location.hash = decodeURIComponent(hash.toString());
+    excalidrawAPI.setScrollConstraints(constraints);
   }, [constraints]);
 
   const [selection, setSelection] = useState<ExcalidrawElement[]>([]);