Fix bug where reloading could clear the state (#465)

* Fix bug where reloading could clear the state

* fix test

* Fix image and video positions

packages/tldraw/src/state/StateManager/StateManager.ts

@@ -120,6 +120,8 @@ export class StateManager<T extends Record<string, any>> {
    * Save the current state to indexdb.
    */
   protected persist = (id?: string): void | Promise<void> => {
+    if (this._status !== 'ready') return
+
     if (this.onPersist) {
       this.onPersist(this._state, id)
     }

packages/tldraw/src/state/TldrawApp.spec.ts

@@ -634,40 +634,25 @@ describe('TldrawTestApp', () => {
   jest.setTimeout(10000)
 
   describe('When changing versions', () => {
-    it('migrates correctly', (done) => {
+    it('migrates correctly', async () => {
       const defaultState = TldrawTestApp.defaultState
-
       const withoutRoom = {
         ...defaultState,
       }
-
       delete withoutRoom.room
-
       TldrawTestApp.defaultState = withoutRoom
-
       const app = new TldrawTestApp('migrate_1')
-
+      await app.ready
       app.createShapes({
         id: 'rect1',
         type: TDShapeType.Rectangle,
       })
-
+      TldrawTestApp.version = 100
-      setTimeout(() => {
+      TldrawTestApp.defaultState.room = defaultState.room
-        // TODO: Force the version to change and restore room.
+      const app2 = new TldrawTestApp('migrate_1')
-        TldrawTestApp.version = 100
+      await app2.ready
-        TldrawTestApp.defaultState.room = defaultState.room
+      expect(app2.getShape('rect1')).toBeTruthy()
-
+      return
-        const app2 = new TldrawTestApp('migrate_1')
-
-        setTimeout(() => {
-          try {
-            expect(app2.getShape('rect1')).toBeTruthy()
-            done()
-          } catch (e) {
-            done(e)
-          }
-        }, 100)
-      }, 100)
     })
   })
 

packages/tldraw/src/state/TldrawApp.ts

@@ -360,8 +360,12 @@ export class TldrawApp extends StateManager<TDSnapshot> {
             const toShape = page.shapes[binding.toId]
             const fromShape = page.shapes[binding.fromId]
 
-            const toUtils = TLDR.getShapeUtil(toShape)
+            if (!(toShape && fromShape)) {
+              delete next.document.pages[pageId].bindings[binding.id]
+              return
+            }
 
+            const toUtils = TLDR.getShapeUtil(toShape)
             const fromUtils = TLDR.getShapeUtil(fromShape)
 
             // We only need to update the binding's "from" shape
@@ -1011,7 +1015,6 @@ export class TldrawApp extends StateManager<TDSnapshot> {
 
   setDisableAssets = (disableAssets: boolean): this => {
     this.patchState({ appState: { disableAssets } }, 'ui:toggled_disable_images')
-    this.persist()
     return this
   }
 
@@ -3361,12 +3364,12 @@ export class TldrawApp extends StateManager<TDSnapshot> {
 
   getShapeUtil = TLDR.getShapeUtil
 
-  static version = 15
+  static version = 15.2
 
   static defaultDocument: TDDocument = {
     id: 'doc',
     name: 'New Document',
-    version: 15,
+    version: TldrawApp.version,
     pages: {
       page: {
         id: 'page',

packages/tldraw/src/state/shapes/ImageUtil/ImageUtil.tsx

@@ -141,6 +141,7 @@ const Wrapper = styled('div', {
   width: '100%',
   borderRadius: '3px',
   perspective: '800px',
+  overflow: 'hidden',
   p: {
     userSelect: 'none',
   },
@@ -166,6 +167,9 @@ const Wrapper = styled('div', {
 })
 
 const ImageElement = styled('img', {
+  position: 'absolute',
+  top: 0,
+  left: 0,
   width: '100%',
   height: '100%',
   maxWidth: '100%',

packages/tldraw/src/state/shapes/VideoUtil/VideoUtil.tsx

@@ -181,6 +181,7 @@ const Wrapper = styled('div', {
   width: '100%',
   borderRadius: '3px',
   perspective: '800px',
+  overflow: 'hidden',
   p: {
     userSelect: 'none',
   },
@@ -206,8 +207,14 @@ const Wrapper = styled('div', {
 })
 
 const VideoElement = styled('video', {
+  position: 'absolute',
+  top: 0,
+  left: 0,
+  width: '100%',
+  height: '100%',
   maxWidth: '100%',
   minWidth: '100%',
-  pointerEvents: 'all',
+  pointerEvents: 'none',
+  objectFit: 'cover',
   borderRadius: 2,
 })