Fix missing shapes when resizing window

components/canvas/canvas.tsx

@@ -12,6 +12,7 @@ import BoundsBg from './bounds/bounds-bg'
 import Handles from './bounds/handles'
 import useCanvasEvents from 'hooks/useCanvasEvents'
 import ContextMenu from './context-menu/context-menu'
+import useWindowResize from 'hooks/useWindowResize'
 
 export default function Canvas(): JSX.Element {
   const rCanvas = useRef<SVGSVGElement>(null)
@@ -21,6 +22,8 @@ export default function Canvas(): JSX.Element {
 
   useZoomEvents()
 
+  useWindowResize()
+
   const events = useCanvasEvents(rCanvas)
 
   const isReady = useSelector((s) => s.isIn('ready'))

hooks/useWindowResize.ts

@@ -0,0 +1,15 @@
+import { useEffect } from 'react'
+import state from 'state'
+
+export default function useWindowResize(): void {
+  useEffect(() => {
+    function handleResize() {
+      state.send('RESIZED_WINDOW')
+    }
+
+    window.addEventListener('resize', handleResize)
+    return () => {
+      window.removeEventListener('resize', handleResize)
+    }
+  }, [])
+}

state/sessions/draw-session.ts

@@ -5,7 +5,8 @@ import { getShapeUtils } from 'state/shape-utils'
 import { getBoundsFromPoints, getPage, getShape, updateParents } from 'utils'
 import vec from 'utils/vec'
 import commands from 'state/commands'
-export default class BrushSession extends BaseSession {
+
+export default class DrawSession extends BaseSession {
   origin: number[]
   previous: number[]
   last: number[]

state/state.ts

@@ -173,12 +173,13 @@ const state = createState({
         else: ['zoomCameraToActual'],
       },
       on: {
+        RESIZED_WINDW: 'updateOnResize',
         RESET_PAGE: 'resetPage',
         TOGGLED_READ_ONLY: 'toggleReadOnly',
         LOADED_FONTS: 'resetShapes',
         USED_PEN_DEVICE: 'enablePenLock',
         DISABLED_PEN_LOCK: 'disablePenLock',
-        TOGGLED_CODE_PANEL_OPEN: 'toggleCodePanel',
+        TOGGLED_CODE_PANEL_OPEN: ['toggleCodePanel', 'saveAppState'],
         TOGGLED_STYLE_PANEL_OPEN: 'toggleStylePanel',
         PANNED_CAMERA: 'panCamera',
         POINTED_CANVAS: ['closeStylePanel', 'clearCurrentParentId'],
@@ -1123,6 +1124,10 @@ const state = createState({
     },
   },
   actions: {
+    updateOnResize(data) {
+      getPageState(data).camera.point = { ...getPageState(data).camera.point }
+    },
+
     toggleReadOnly(data) {
       data.isReadOnly = !data.isReadOnly
     },
@@ -1838,6 +1843,10 @@ const state = createState({
       storage.loadDocumentFromJson(data, payload.json)
     },
 
+    saveAppState(data) {
+      storage.saveAppStateToLocalStorage(data)
+    },
+
     forceSave(data) {
       storage.saveToFileSystem(data)
     },

state/storage.ts

@@ -49,6 +49,13 @@ class Storage {
     }
   }
 
+  saveAppStateToLocalStorage = (data: Data) => {
+    localStorage.setItem(
+      storageId(data.document.id, 'document-state', data.document.id),
+      compress(JSON.stringify(data))
+    )
+  }
+
   saveDocumentToLocalStorage(data: Data) {
     const document = this.getCompleteDocument(data)
 
@@ -56,10 +63,6 @@ class Storage {
       storageId(data.document.id, 'document', data.document.id),
       compress(JSON.stringify(document))
     )
-    localStorage.setItem(
-      storageId(data.document.id, 'document-state', data.document.id),
-      compress(JSON.stringify(data))
-    )
   }
 
   getCompleteDocument = (data: Data) => {
@@ -162,18 +165,14 @@ class Storage {
       data.currentPageId = pageState.id
     }
 
-    // 4. Save the current document
+    // 4. Save the current app state / document
     // The document is now "full" and ready. Whether we've restored a
     // document or created a new one, save the entire current document.
-    localStorage.setItem(
+    this.saveDocumentToLocalStorage(data)
-      storageId(data.document.id, 'document', data.document.id),
-      compress(JSON.stringify(data.document))
-    )
 
-    localStorage.setItem(
+    // 4.1
-      storageId(data.document.id, 'document-state', data.document.id),
+    // Also save the app state.
-      compress(JSON.stringify(data))
+    this.saveAppStateToLocalStorage(data)
-    )
 
     // 4.1
     // Also save out copies of each page separately.
@@ -311,11 +310,13 @@ class Storage {
   /* ------------------- File System ------------------ */
 
   saveToFileSystem = (data: Data) => {
+    this.saveAppStateToLocalStorage(data)
     this.saveDocumentToLocalStorage(data)
     this.saveDataToFileSystem(data, data.document.id, false)
   }
 
   saveAsToFileSystem = (data: Data) => {
+    this.saveAppStateToLocalStorage(data)
     this.saveDocumentToLocalStorage(data)
     this.saveDataToFileSystem(data, uniqueId(), true)
   }