feat: add width, height as props to App.tsx (#1871)

src/actions/actionCanvas.tsx

@@ -204,8 +204,8 @@ export const actionZoomToFit = register({
     const [x1, y1, x2, y2] = commonBounds;
     const centerX = (x1 + x2) / 2;
     const centerY = (y1 + y2) / 2;
-    const scrollX = normalizeScroll(window.innerWidth / 2 - centerX);
+    const scrollX = normalizeScroll(appState.width / 2 - centerX);
-    const scrollY = normalizeScroll(window.innerHeight / 2 - centerY);
+    const scrollY = normalizeScroll(appState.height / 2 - centerY);
     const zoom = calculateZoom(commonBounds, appState.zoom, {
       scrollX,
       scrollY,

src/actions/actionNavigate.tsx

@@ -16,8 +16,8 @@ export const actionGoToCollaborator = register({
     return {
       appState: {
         ...appState,
-        scrollX: normalizeScroll(window.innerWidth / 2 - point.x),
+        scrollX: normalizeScroll(appState.width / 2 - point.x),
-        scrollY: normalizeScroll(window.innerHeight / 2 - point.y),
+        scrollY: normalizeScroll(appState.height / 2 - point.y),
         // Close mobile menu
         openMenu: appState.openMenu === "canvas" ? null : appState.openMenu,
       },

src/appState.ts

@@ -56,6 +56,8 @@ export const getDefaultAppState = (): AppState => {
     gridSize: null,
     editingGroupId: null,
     selectedGroupIds: {},
+    width: window.innerWidth,
+    height: window.innerHeight,
   };
 };
 

src/components/App.tsx

@@ -58,6 +58,7 @@ import { renderScene } from "../renderer";
 import { AppState, GestureEvent, Gesture } from "../types";
 import {
   ExcalidrawElement,
+  ExcalidrawProps,
   ExcalidrawTextElement,
   NonDeleted,
 } from "../element/types";
@@ -184,7 +185,7 @@ const gesture: Gesture = {
   initialScale: null,
 };
 
-class App extends React.Component<any, AppState> {
+class App extends React.Component<ExcalidrawProps, AppState> {
   canvas: HTMLCanvasElement | null = null;
   rc: RoughCanvas | null = null;
   portal: Portal = new Portal(this);
@@ -194,13 +195,23 @@ class App extends React.Component<any, AppState> {
   unmounted: boolean = false;
   actionManager: ActionManager;
 
-  public state: AppState = {
+  public static defaultProps: Partial<ExcalidrawProps> = {
-    ...getDefaultAppState(),
+    width: window.innerWidth,
-    isLoading: true,
+    height: window.innerHeight,
   };
 
   constructor(props: any) {
     super(props);
+    const defaultAppState = getDefaultAppState();
+
+    const { width, height } = props;
+    this.state = {
+      ...defaultAppState,
+      isLoading: true,
+      width,
+      height,
+    };
+
     this.actionManager = new ActionManager(
       this.syncActionResult,
       () => this.state,
@@ -213,9 +224,11 @@ class App extends React.Component<any, AppState> {
   }
 
   public render() {
-    const { zenModeEnabled } = this.state;
+    const {
-    const canvasDOMWidth = window.innerWidth;
+      zenModeEnabled,
-    const canvasDOMHeight = window.innerHeight;
+      width: canvasDOMWidth,
+      height: canvasDOMHeight,
+    } = this.state;
 
     const canvasScale = window.devicePixelRatio;
 
@@ -516,7 +529,16 @@ class App extends React.Component<any, AppState> {
     this.broadcastScene(SCENE.UPDATE, /* syncAll */ true);
   }, SYNC_FULL_SCENE_INTERVAL_MS);
 
-  componentDidUpdate() {
+  componentDidUpdate(prevProps: ExcalidrawProps) {
+    const { width: prevWidth, height: prevHeight } = prevProps;
+    const { width: currentWidth, height: currentHeight } = this.props;
+    if (prevWidth !== currentWidth || prevHeight !== currentHeight) {
+      this.setState({
+        width: currentWidth,
+        height: currentHeight,
+      });
+    }
+
     if (this.state.isCollaborating && !this.portal.socket) {
       this.initializeSocketClient({ showLoadingState: true });
     }

src/element/types.ts

@@ -77,3 +77,8 @@ export type VerticalAlign = "top" | "middle";
 
 export type FontFamily = keyof typeof FONT_FAMILY;
 export type FontString = string & { _brand: "fontString" };
+
+export interface ExcalidrawProps {
+  width: number;
+  height: number;
+}

src/index.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useState, useLayoutEffect } from "react";
 import ReactDOM from "react-dom";
 import * as Sentry from "@sentry/browser";
 import * as SentryIntegrations from "@sentry/integrations";
@@ -75,18 +75,40 @@ document.addEventListener(
   { passive: false },
 );
 
+function ExcalidrawApp() {
+  const [dimensions, setDimensions] = useState({
+    width: window.innerWidth,
+    height: window.innerHeight,
+  });
+
+  const onResize = () => {
+    setDimensions({
+      width: window.innerWidth,
+      height: window.innerHeight,
+    });
+  };
+
+  useLayoutEffect(() => {
+    window.addEventListener("resize", onResize);
+
+    return () => window.removeEventListener("resize", onResize);
+  }, []);
+
+  const { width, height } = dimensions;
+  return (
+    <TopErrorBoundary>
+      <IsMobileProvider>
+        <InitializeApp>
+          <App width={width} height={height} />
+        </InitializeApp>
+      </IsMobileProvider>
+    </TopErrorBoundary>
+  );
+}
+
 const rootElement = document.getElementById("root");
 
-ReactDOM.render(
+ReactDOM.render(<ExcalidrawApp />, rootElement);
-  <TopErrorBoundary>
-    <IsMobileProvider>
-      <InitializeApp>
-        <App />
-      </InitializeApp>
-    </IsMobileProvider>
-  </TopErrorBoundary>,
-  rootElement,
-);
 
 registerServiceWorker({
   onUpdate: (registration) => {

src/scene/scroll.ts

@@ -29,8 +29,8 @@ function isOutsideViewPort(
     window.devicePixelRatio,
   );
   return (
-    viewportX2 - viewportX1 > window.innerWidth ||
+    viewportX2 - viewportX1 > appState.width ||
-    viewportY2 - viewportY1 > window.innerHeight
+    viewportY2 - viewportY1 > appState.height
   );
 }
 
@@ -63,7 +63,7 @@ export const calculateScrollCenter = (
   const centerY = (y1 + y2) / 2;
 
   return {
-    scrollX: normalizeScroll(window.innerWidth / 2 - centerX),
+    scrollX: normalizeScroll(appState.width / 2 - centerX),
-    scrollY: normalizeScroll(window.innerHeight / 2 - centerY),
+    scrollY: normalizeScroll(appState.height / 2 - centerY),
   };
 };

src/tests/__snapshots__/regressionTests.test.tsx.snap

@@ -25,6 +25,7 @@ Object {
   "errorMessage": null,
   "exportBackground": true,
   "gridSize": null,
+  "height": 768,
   "isCollaborating": false,
   "isLoading": false,
   "isResizing": false,
@@ -56,6 +57,7 @@ Object {
   "showShortcutsDialog": false,
   "username": "",
   "viewBackgroundColor": "#ffffff",
+  "width": 1024,
   "zenModeEnabled": false,
   "zoom": 1,
 }
@@ -423,6 +425,7 @@ Object {
   "errorMessage": null,
   "exportBackground": true,
   "gridSize": null,
+  "height": 768,
   "isCollaborating": false,
   "isLoading": false,
   "isResizing": false,
@@ -449,6 +452,7 @@ Object {
   "showShortcutsDialog": false,
   "username": "",
   "viewBackgroundColor": "#ffffff",
+  "width": 1024,
   "zenModeEnabled": false,
   "zoom": 1,
 }
@@ -630,6 +634,7 @@ Object {
   "errorMessage": null,
   "exportBackground": true,
   "gridSize": null,
+  "height": 768,
   "isCollaborating": false,
   "isLoading": false,
   "isResizing": false,
@@ -653,6 +658,7 @@ Object {
   "showShortcutsDialog": false,
   "username": "",
   "viewBackgroundColor": "#ffffff",
+  "width": 1024,
   "zenModeEnabled": false,
   "zoom": 1,
 }
@@ -754,6 +760,7 @@ Object {
   "errorMessage": null,
   "exportBackground": true,
   "gridSize": null,
+  "height": 768,
   "isCollaborating": false,
   "isLoading": false,
   "isResizing": false,
@@ -777,6 +784,7 @@ Object {
   "showShortcutsDialog": false,
   "username": "",
   "viewBackgroundColor": "#ffffff",
+  "width": 1024,
   "zenModeEnabled": false,
   "zoom": 1,
 }
@@ -1014,6 +1022,7 @@ Object {
   "errorMessage": null,
   "exportBackground": true,
   "gridSize": null,
+  "height": 768,
   "isCollaborating": false,
   "isLoading": false,
   "isResizing": false,
@@ -1040,6 +1049,7 @@ Object {
   "showShortcutsDialog": false,
   "username": "",
   "viewBackgroundColor": "#ffffff",
+  "width": 1024,
   "zenModeEnabled": false,
   "zoom": 1,
 }
@@ -1176,6 +1186,7 @@ Object {
   "errorMessage": null,
   "exportBackground": true,
   "gridSize": null,
+  "height": 768,
   "isCollaborating": false,
   "isLoading": false,
   "isResizing": false,
@@ -1204,6 +1215,7 @@ Object {
   "showShortcutsDialog": false,
   "username": "",
   "viewBackgroundColor": "#ffffff",
+  "width": 1024,
   "zenModeEnabled": false,
   "zoom": 1,
 }
@@ -1376,6 +1388,7 @@ Object {
   "errorMessage": null,
   "exportBackground": true,
   "gridSize": null,
+  "height": 768,
   "isCollaborating": false,
   "isLoading": false,
   "isResizing": false,
@@ -1402,6 +1415,7 @@ Object {
   "showShortcutsDialog": false,
   "username": "",
   "viewBackgroundColor": "#ffffff",
+  "width": 1024,
   "zenModeEnabled": false,
   "zoom": 1,
 }
@@ -1582,6 +1596,7 @@ Object {
   "errorMessage": null,
   "exportBackground": true,
   "gridSize": null,
+  "height": 768,
   "isCollaborating": false,
   "isLoading": false,
   "isResizing": false,
@@ -1609,6 +1624,7 @@ Object {
   "showShortcutsDialog": false,
   "username": "",
   "viewBackgroundColor": "#ffffff",
+  "width": 1024,
   "zenModeEnabled": false,
   "zoom": 1,
 }
@@ -1889,6 +1905,7 @@ Object {
   "errorMessage": null,
   "exportBackground": true,
   "gridSize": null,
+  "height": 768,
   "isCollaborating": false,
   "isLoading": false,
   "isResizing": false,
@@ -1912,6 +1929,7 @@ Object {
   "showShortcutsDialog": false,
   "username": "",
   "viewBackgroundColor": "#ffffff",
+  "width": 1024,
   "zenModeEnabled": false,
   "zoom": 1,
 }
@@ -2282,6 +2300,7 @@ Object {
   "errorMessage": null,
   "exportBackground": true,
   "gridSize": null,
+  "height": 768,
   "isCollaborating": false,
   "isLoading": false,
   "isResizing": false,
@@ -2305,6 +2324,7 @@ Object {
   "showShortcutsDialog": false,
   "username": "",
   "viewBackgroundColor": "#ffffff",
+  "width": 1024,
   "zenModeEnabled": false,
   "zoom": 1,
 }
@@ -4068,6 +4088,7 @@ Object {
   "errorMessage": null,
   "exportBackground": true,
   "gridSize": null,
+  "height": 768,
   "isCollaborating": false,
   "isLoading": false,
   "isResizing": false,
@@ -4091,6 +4112,7 @@ Object {
   "showShortcutsDialog": false,
   "username": "",
   "viewBackgroundColor": "#ffffff",
+  "width": 1024,
   "zenModeEnabled": false,
   "zoom": 1,
 }
@@ -4192,6 +4214,7 @@ Object {
   "errorMessage": null,
   "exportBackground": true,
   "gridSize": null,
+  "height": 768,
   "isCollaborating": false,
   "isLoading": false,
   "isResizing": false,
@@ -4215,6 +4238,7 @@ Object {
   "showShortcutsDialog": false,
   "username": "",
   "viewBackgroundColor": "#ffffff",
+  "width": 1024,
   "zenModeEnabled": false,
   "zoom": 1,
 }
@@ -4316,6 +4340,7 @@ Object {
   "errorMessage": null,
   "exportBackground": true,
   "gridSize": null,
+  "height": 768,
   "isCollaborating": false,
   "isLoading": false,
   "isResizing": false,
@@ -4339,6 +4364,7 @@ Object {
   "showShortcutsDialog": false,
   "username": "",
   "viewBackgroundColor": "#ffffff",
+  "width": 1024,
   "zenModeEnabled": false,
   "zoom": 1,
 }
@@ -4440,6 +4466,7 @@ Object {
   "errorMessage": null,
   "exportBackground": true,
   "gridSize": null,
+  "height": 768,
   "isCollaborating": false,
   "isLoading": false,
   "isResizing": false,
@@ -4463,6 +4490,7 @@ Object {
   "showShortcutsDialog": false,
   "username": "",
   "viewBackgroundColor": "#ffffff",
+  "width": 1024,
   "zenModeEnabled": false,
   "zoom": 1,
 }
@@ -4586,6 +4614,7 @@ Object {
   "errorMessage": null,
   "exportBackground": true,
   "gridSize": null,
+  "height": 768,
   "isCollaborating": false,
   "isLoading": false,
   "isResizing": false,
@@ -4609,6 +4638,7 @@ Object {
   "showShortcutsDialog": false,
   "username": "",
   "viewBackgroundColor": "#ffffff",
+  "width": 1024,
   "zenModeEnabled": false,
   "zoom": 1,
 }
@@ -4732,6 +4762,7 @@ Object {
   "errorMessage": null,
   "exportBackground": true,
   "gridSize": null,
+  "height": 768,
   "isCollaborating": false,
   "isLoading": false,
   "isResizing": false,
@@ -4755,6 +4786,7 @@ Object {
   "showShortcutsDialog": false,
   "username": "",
   "viewBackgroundColor": "#ffffff",
+  "width": 1024,
   "zenModeEnabled": false,
   "zoom": 1,
 }
@@ -4878,6 +4910,7 @@ Object {
   "errorMessage": null,
   "exportBackground": true,
   "gridSize": null,
+  "height": 768,
   "isCollaborating": false,
   "isLoading": false,
   "isResizing": false,
@@ -4901,6 +4934,7 @@ Object {
   "showShortcutsDialog": false,
   "username": "",
   "viewBackgroundColor": "#ffffff",
+  "width": 1024,
   "zenModeEnabled": false,
   "zoom": 1,
 }
@@ -5024,6 +5058,7 @@ Object {
   "errorMessage": null,
   "exportBackground": true,
   "gridSize": null,
+  "height": 768,
   "isCollaborating": false,
   "isLoading": false,
   "isResizing": false,
@@ -5047,6 +5082,7 @@ Object {
   "showShortcutsDialog": false,
   "username": "",
   "viewBackgroundColor": "#ffffff",
+  "width": 1024,
   "zenModeEnabled": false,
   "zoom": 1,
 }
@@ -5148,6 +5184,7 @@ Object {
   "errorMessage": null,
   "exportBackground": true,
   "gridSize": null,
+  "height": 768,
   "isCollaborating": false,
   "isLoading": false,
   "isResizing": false,
@@ -5171,6 +5208,7 @@ Object {
   "showShortcutsDialog": false,
   "username": "",
   "viewBackgroundColor": "#ffffff",
+  "width": 1024,
   "zenModeEnabled": false,
   "zoom": 1,
 }
@@ -5272,6 +5310,7 @@ Object {
   "errorMessage": null,
   "exportBackground": true,
   "gridSize": null,
+  "height": 768,
   "isCollaborating": false,
   "isLoading": false,
   "isResizing": false,
@@ -5295,6 +5334,7 @@ Object {
   "showShortcutsDialog": false,
   "username": "",
   "viewBackgroundColor": "#ffffff",
+  "width": 1024,
   "zenModeEnabled": false,
   "zoom": 1,
 }
@@ -5418,6 +5458,7 @@ Object {
   "errorMessage": null,
   "exportBackground": true,
   "gridSize": null,
+  "height": 768,
   "isCollaborating": false,
   "isLoading": false,
   "isResizing": false,
@@ -5441,6 +5482,7 @@ Object {
   "showShortcutsDialog": false,
   "username": "",
   "viewBackgroundColor": "#ffffff",
+  "width": 1024,
   "zenModeEnabled": false,
   "zoom": 1,
 }
@@ -5542,6 +5584,7 @@ Object {
   "errorMessage": null,
   "exportBackground": true,
   "gridSize": null,
+  "height": 768,
   "isCollaborating": false,
   "isLoading": false,
   "isResizing": false,
@@ -5565,6 +5608,7 @@ Object {
   "showShortcutsDialog": false,
   "username": "",
   "viewBackgroundColor": "#ffffff",
+  "width": 1024,
   "zenModeEnabled": false,
   "zoom": 1,
 }
@@ -5688,6 +5732,7 @@ Object {
   "errorMessage": null,
   "exportBackground": true,
   "gridSize": null,
+  "height": 768,
   "isCollaborating": false,
   "isLoading": false,
   "isResizing": false,
@@ -5722,6 +5767,7 @@ Object {
   "showShortcutsDialog": false,
   "username": "",
   "viewBackgroundColor": "#ffffff",
+  "width": 1024,
   "zenModeEnabled": false,
   "zoom": 1,
 }
@@ -6326,6 +6372,7 @@ Object {
   "errorMessage": null,
   "exportBackground": true,
   "gridSize": null,
+  "height": 768,
   "isCollaborating": false,
   "isLoading": false,
   "isResizing": false,
@@ -6353,6 +6400,7 @@ Object {
   "showShortcutsDialog": false,
   "username": "",
   "viewBackgroundColor": "#ffffff",
+  "width": 1024,
   "zenModeEnabled": false,
   "zoom": 1,
 }
@@ -6533,6 +6581,7 @@ Object {
   "errorMessage": null,
   "exportBackground": true,
   "gridSize": null,
+  "height": 768,
   "isCollaborating": false,
   "isLoading": false,
   "isResizing": false,
@@ -6556,6 +6605,7 @@ Object {
   "showShortcutsDialog": false,
   "username": "",
   "viewBackgroundColor": "#ffffff",
+  "width": 1024,
   "zenModeEnabled": false,
   "zoom": 1,
 }
@@ -6598,6 +6648,7 @@ Object {
   "errorMessage": null,
   "exportBackground": true,
   "gridSize": null,
+  "height": 768,
   "isCollaborating": false,
   "isLoading": false,
   "isResizing": false,
@@ -6619,6 +6670,7 @@ Object {
   "showShortcutsDialog": false,
   "username": "",
   "viewBackgroundColor": "#ffffff",
+  "width": 1024,
   "zenModeEnabled": false,
   "zoom": 1,
 }
@@ -6661,6 +6713,7 @@ Object {
   "errorMessage": null,
   "exportBackground": true,
   "gridSize": null,
+  "height": 768,
   "isCollaborating": false,
   "isLoading": false,
   "isResizing": false,
@@ -6700,6 +6753,7 @@ Object {
   "showShortcutsDialog": false,
   "username": "",
   "viewBackgroundColor": "#ffffff",
+  "width": 1024,
   "zenModeEnabled": false,
   "zoom": 1,
 }
@@ -7481,6 +7535,7 @@ Object {
   "errorMessage": null,
   "exportBackground": true,
   "gridSize": null,
+  "height": 768,
   "isCollaborating": false,
   "isLoading": false,
   "isResizing": false,
@@ -7511,6 +7566,7 @@ Object {
   "showShortcutsDialog": false,
   "username": "",
   "viewBackgroundColor": "#ffffff",
+  "width": 1024,
   "zenModeEnabled": false,
   "zoom": 1,
 }
@@ -7878,6 +7934,7 @@ Object {
   "errorMessage": null,
   "exportBackground": true,
   "gridSize": null,
+  "height": 768,
   "isCollaborating": false,
   "isLoading": false,
   "isResizing": false,
@@ -7906,6 +7963,7 @@ Object {
   "showShortcutsDialog": false,
   "username": "",
   "viewBackgroundColor": "#ffffff",
+  "width": 1024,
   "zenModeEnabled": false,
   "zoom": 1,
 }
@@ -8192,6 +8250,7 @@ Object {
   "errorMessage": null,
   "exportBackground": true,
   "gridSize": null,
+  "height": 768,
   "isCollaborating": false,
   "isLoading": false,
   "isResizing": false,
@@ -8218,6 +8277,7 @@ Object {
   "showShortcutsDialog": false,
   "username": "",
   "viewBackgroundColor": "#ffffff",
+  "width": 1024,
   "zenModeEnabled": false,
   "zoom": 1,
 }
@@ -8427,6 +8487,7 @@ Object {
   "errorMessage": null,
   "exportBackground": true,
   "gridSize": null,
+  "height": 768,
   "isCollaborating": false,
   "isLoading": false,
   "isResizing": false,
@@ -8451,6 +8512,7 @@ Object {
   "showShortcutsDialog": false,
   "username": "",
   "viewBackgroundColor": "#ffffff",
+  "width": 1024,
   "zenModeEnabled": false,
   "zoom": 1,
 }
@@ -8587,6 +8649,7 @@ Object {
   "errorMessage": null,
   "exportBackground": true,
   "gridSize": null,
+  "height": 768,
   "isCollaborating": false,
   "isLoading": false,
   "isResizing": false,
@@ -8625,6 +8688,7 @@ Object {
   "showShortcutsDialog": false,
   "username": "",
   "viewBackgroundColor": "#ffffff",
+  "width": 1024,
   "zenModeEnabled": false,
   "zoom": 1,
 }
@@ -9356,6 +9420,7 @@ Object {
   "errorMessage": null,
   "exportBackground": true,
   "gridSize": null,
+  "height": 768,
   "isCollaborating": false,
   "isLoading": false,
   "isResizing": false,
@@ -9392,6 +9457,7 @@ Object {
   "showShortcutsDialog": false,
   "username": "",
   "viewBackgroundColor": "#ffffff",
+  "width": 1024,
   "zenModeEnabled": false,
   "zoom": 1,
 }
@@ -10026,6 +10092,7 @@ Object {
   "errorMessage": null,
   "exportBackground": true,
   "gridSize": null,
+  "height": 768,
   "isCollaborating": false,
   "isLoading": false,
   "isResizing": false,
@@ -10060,6 +10127,7 @@ Object {
   "showShortcutsDialog": false,
   "username": "",
   "viewBackgroundColor": "#ffffff",
+  "width": 1024,
   "zenModeEnabled": false,
   "zoom": 1,
 }
@@ -10601,6 +10669,7 @@ Object {
   "errorMessage": null,
   "exportBackground": true,
   "gridSize": null,
+  "height": 768,
   "isCollaborating": false,
   "isLoading": false,
   "isResizing": false,
@@ -10633,6 +10702,7 @@ Object {
   "showShortcutsDialog": false,
   "username": "",
   "viewBackgroundColor": "#ffffff",
+  "width": 1024,
   "zenModeEnabled": false,
   "zoom": 1,
 }
@@ -11085,6 +11155,7 @@ Object {
   "errorMessage": null,
   "exportBackground": true,
   "gridSize": null,
+  "height": 768,
   "isCollaborating": false,
   "isLoading": false,
   "isResizing": false,
@@ -11116,6 +11187,7 @@ Object {
   "showShortcutsDialog": false,
   "username": "",
   "viewBackgroundColor": "#ffffff",
+  "width": 1024,
   "zenModeEnabled": false,
   "zoom": 1,
 }
@@ -11525,6 +11597,7 @@ Object {
   "errorMessage": null,
   "exportBackground": true,
   "gridSize": null,
+  "height": 768,
   "isCollaborating": false,
   "isLoading": false,
   "isResizing": false,
@@ -11554,6 +11627,7 @@ Object {
   "showShortcutsDialog": false,
   "username": "",
   "viewBackgroundColor": "#ffffff",
+  "width": 1024,
   "zenModeEnabled": false,
   "zoom": 1,
 }
@@ -11880,6 +11954,7 @@ Object {
   "errorMessage": null,
   "exportBackground": true,
   "gridSize": null,
+  "height": 768,
   "isCollaborating": false,
   "isLoading": false,
   "isResizing": false,
@@ -11907,6 +11982,7 @@ Object {
   "showShortcutsDialog": false,
   "username": "",
   "viewBackgroundColor": "#ffffff",
+  "width": 1024,
   "zenModeEnabled": false,
   "zoom": 1,
 }
@@ -12154,6 +12230,7 @@ Object {
   "errorMessage": null,
   "exportBackground": true,
   "gridSize": null,
+  "height": 768,
   "isCollaborating": false,
   "isLoading": false,
   "isResizing": false,
@@ -12179,6 +12256,7 @@ Object {
   "showShortcutsDialog": false,
   "username": "",
   "viewBackgroundColor": "#ffffff",
+  "width": 1024,
   "zenModeEnabled": false,
   "zoom": 1,
 }
@@ -12351,6 +12429,7 @@ Object {
   "errorMessage": null,
   "exportBackground": true,
   "gridSize": null,
+  "height": 768,
   "isCollaborating": false,
   "isLoading": false,
   "isResizing": false,
@@ -12390,6 +12469,7 @@ Object {
   "showShortcutsDialog": false,
   "username": "",
   "viewBackgroundColor": "#ffffff",
+  "width": 1024,
   "zenModeEnabled": false,
   "zoom": 1,
 }
@@ -13171,6 +13251,7 @@ Object {
   "errorMessage": null,
   "exportBackground": true,
   "gridSize": null,
+  "height": 768,
   "isCollaborating": false,
   "isLoading": false,
   "isResizing": false,
@@ -13208,6 +13289,7 @@ Object {
   "showShortcutsDialog": false,
   "username": "",
   "viewBackgroundColor": "#ffffff",
+  "width": 1024,
   "zenModeEnabled": false,
   "zoom": 1,
 }
@@ -13890,6 +13972,7 @@ Object {
   "errorMessage": null,
   "exportBackground": true,
   "gridSize": null,
+  "height": 768,
   "isCollaborating": false,
   "isLoading": false,
   "isResizing": false,
@@ -13925,6 +14008,7 @@ Object {
   "showShortcutsDialog": false,
   "username": "",
   "viewBackgroundColor": "#ffffff",
+  "width": 1024,
   "zenModeEnabled": false,
   "zoom": 1,
 }
@@ -14512,6 +14596,7 @@ Object {
   "errorMessage": null,
   "exportBackground": true,
   "gridSize": null,
+  "height": 768,
   "isCollaborating": false,
   "isLoading": false,
   "isResizing": false,
@@ -14545,6 +14630,7 @@ Object {
   "showShortcutsDialog": false,
   "username": "",
   "viewBackgroundColor": "#ffffff",
+  "width": 1024,
   "zenModeEnabled": false,
   "zoom": 1,
 }
@@ -15041,6 +15127,7 @@ Object {
   "errorMessage": null,
   "exportBackground": true,
   "gridSize": null,
+  "height": 768,
   "isCollaborating": false,
   "isLoading": false,
   "isResizing": false,
@@ -15073,6 +15160,7 @@ Object {
   "showShortcutsDialog": false,
   "username": "",
   "viewBackgroundColor": "#ffffff",
+  "width": 1024,
   "zenModeEnabled": false,
   "zoom": 1,
 }
@@ -15312,6 +15400,7 @@ Object {
   "errorMessage": null,
   "exportBackground": true,
   "gridSize": null,
+  "height": 768,
   "isCollaborating": false,
   "isLoading": false,
   "isResizing": false,
@@ -15333,6 +15422,7 @@ Object {
   "showShortcutsDialog": false,
   "username": "",
   "viewBackgroundColor": "#ffffff",
+  "width": 1024,
   "zenModeEnabled": false,
   "zoom": 1,
 }
@@ -15375,6 +15465,7 @@ Object {
   "errorMessage": null,
   "exportBackground": true,
   "gridSize": null,
+  "height": 768,
   "isCollaborating": false,
   "isLoading": false,
   "isResizing": false,
@@ -15398,6 +15489,7 @@ Object {
   "showShortcutsDialog": false,
   "username": "",
   "viewBackgroundColor": "#ffffff",
+  "width": 1024,
   "zenModeEnabled": false,
   "zoom": 1,
 }
@@ -15499,6 +15591,7 @@ Object {
   "errorMessage": null,
   "exportBackground": true,
   "gridSize": null,
+  "height": 768,
   "isCollaborating": false,
   "isLoading": false,
   "isResizing": false,
@@ -15520,6 +15613,7 @@ Object {
   "showShortcutsDialog": false,
   "username": "",
   "viewBackgroundColor": "#ffffff",
+  "width": 1024,
   "zenModeEnabled": false,
   "zoom": 1,
 }
@@ -15562,6 +15656,7 @@ Object {
   "errorMessage": null,
   "exportBackground": true,
   "gridSize": null,
+  "height": 768,
   "isCollaborating": false,
   "isLoading": false,
   "isResizing": false,
@@ -15585,6 +15680,7 @@ Object {
   "showShortcutsDialog": false,
   "username": "",
   "viewBackgroundColor": "#ffffff",
+  "width": 1024,
   "zenModeEnabled": false,
   "zoom": 1,
 }
@@ -16214,6 +16310,7 @@ Object {
   "errorMessage": null,
   "exportBackground": true,
   "gridSize": null,
+  "height": 768,
   "isCollaborating": false,
   "isLoading": false,
   "isResizing": false,
@@ -16237,6 +16334,7 @@ Object {
   "showShortcutsDialog": false,
   "username": "",
   "viewBackgroundColor": "#ffffff",
+  "width": 1024,
   "zenModeEnabled": false,
   "zoom": 1.99,
 }
@@ -16279,6 +16377,7 @@ Object {
   "errorMessage": null,
   "exportBackground": true,
   "gridSize": null,
+  "height": 768,
   "isCollaborating": false,
   "isLoading": false,
   "isResizing": false,
@@ -16302,6 +16401,7 @@ Object {
   "showShortcutsDialog": false,
   "username": "",
   "viewBackgroundColor": "#ffffff",
+  "width": 1024,
   "zenModeEnabled": false,
   "zoom": 1,
 }
@@ -16705,6 +16805,7 @@ Object {
   "errorMessage": null,
   "exportBackground": true,
   "gridSize": null,
+  "height": 768,
   "isCollaborating": false,
   "isLoading": false,
   "isResizing": false,
@@ -16726,6 +16827,7 @@ Object {
   "showShortcutsDialog": false,
   "username": "",
   "viewBackgroundColor": "#ffffff",
+  "width": 1024,
   "zenModeEnabled": false,
   "zoom": 1,
 }
@@ -16779,6 +16881,7 @@ Object {
   "errorMessage": null,
   "exportBackground": true,
   "gridSize": null,
+  "height": 768,
   "isCollaborating": false,
   "isLoading": false,
   "isResizing": false,
@@ -16800,6 +16903,7 @@ Object {
   "showShortcutsDialog": false,
   "username": "",
   "viewBackgroundColor": "#ffffff",
+  "width": 1024,
   "zenModeEnabled": false,
   "zoom": 1,
 }

src/types.ts

@@ -79,6 +79,8 @@ export type AppState = {
   /** group being edited when you drill down to its constituent element
     (e.g. when you double-click on a group's element) */
   editingGroupId: GroupId | null;
+  width: number;
+  height: number;
 };
 
 export type PointerCoords = Readonly<{