Annoying file system saving stuff

next.config.js

@@ -2,6 +2,7 @@ const withPWA = require('next-pwa')
 
 module.exports = withPWA({
   pwa: {
+    disable: process.env.NODE_ENV === 'development',
     dest: 'public',
   },
 })

public/sw.js

@@ -13,116 +13,120 @@
 
 // If the loader is already loaded, just stop.
 if (!self.define) {
-  const singleRequire = name => {
+  const singleRequire = (name) => {
     if (name !== 'require') {
-      name = name + '.js';
+      name = name + '.js'
     }
-    let promise = Promise.resolve();
+    let promise = Promise.resolve()
     if (!registry[name]) {
-      
-        promise = new Promise(async resolve => {
-          if ("document" in self) {
-            const script = document.createElement("script");
-            script.src = name;
-            document.head.appendChild(script);
-            script.onload = resolve;
-          } else {
-            importScripts(name);
-            resolve();
-          }
-        });
-      
+      promise = new Promise(async (resolve) => {
+        if ('document' in self) {
+          const script = document.createElement('script')
+          script.src = name
+          document.head.appendChild(script)
+          script.onload = resolve
+        } else {
+          importScripts(name)
+          resolve()
+        }
+      })
     }
     return promise.then(() => {
       if (!registry[name]) {
-        throw new Error(`Module ${name} didn’t register its module`);
+        throw new Error(`Module ${name} didn’t register its module`)
       }
-      return registry[name];
-    });
-  };
+      return registry[name]
+    })
+  }
 
   const require = (names, resolve) => {
-    Promise.all(names.map(singleRequire))
-      .then(modules => resolve(modules.length === 1 ? modules[0] : modules));
-  };
-  
+    Promise.all(names.map(singleRequire)).then((modules) =>
+      resolve(modules.length === 1 ? modules[0] : modules)
+    )
+  }
+
   const registry = {
-    require: Promise.resolve(require)
-  };
+    require: Promise.resolve(require),
+  }
 
   self.define = (moduleName, depsNames, factory) => {
     if (registry[moduleName]) {
       // Module is already loading or loaded.
-      return;
+      return
     }
     registry[moduleName] = Promise.resolve().then(() => {
-      let exports = {};
+      let exports = {}
       const module = {
-        uri: location.origin + moduleName.slice(1)
-      };
+        uri: location.origin + moduleName.slice(1),
+      }
       return Promise.all(
-        depsNames.map(depName => {
-          switch(depName) {
-            case "exports":
-              return exports;
-            case "module":
-              return module;
+        depsNames.map((depName) => {
+          switch (depName) {
+            case 'exports':
+              return exports
+            case 'module':
+              return module
             default:
-              return singleRequire(depName);
+              return singleRequire(depName)
           }
         })
-      ).then(deps => {
-        const facValue = factory(...deps);
-        if(!exports.default) {
-          exports.default = facValue;
+      ).then((deps) => {
+        const facValue = factory(...deps)
+        if (!exports.default) {
+          exports.default = facValue
         }
-        return exports;
-      });
-    });
-  };
+        return exports
+      })
+    })
+  }
 }
-define("./sw.js",['./workbox-6b19f60b'], function (workbox) { 'use strict';
+define('./sw.js', ['./workbox-6b19f60b'], function (workbox) {
+  'use strict'
 
   /**
-  * Welcome to your Workbox-powered service worker!
-  *
-  * You'll need to register this file in your web app.
-  * See https://goo.gl/nhQhGp
-  *
-  * The rest of the code is auto-generated. Please don't update this file
-  * directly; instead, make changes to your Workbox build configuration
-  * and re-run your build process.
-  * See https://goo.gl/2aRDsh
-  */
+   * Welcome to your Workbox-powered service worker!
+   *
+   * You'll need to register this file in your web app.
+   * See https://goo.gl/nhQhGp
+   *
+   * The rest of the code is auto-generated. Please don't update this file
+   * directly; instead, make changes to your Workbox build configuration
+   * and re-run your build process.
+   * See https://goo.gl/2aRDsh
+   */
 
-  importScripts();
-  self.skipWaiting();
-  workbox.clientsClaim();
-  workbox.registerRoute("/", new workbox.NetworkFirst({
-    "cacheName": "start-url",
-    plugins: [{
-      cacheWillUpdate: async ({
-        request,
-        response,
-        event,
-        state
-      }) => {
-        if (response && response.type === 'opaqueredirect') {
-          return new Response(response.body, {
-            status: 200,
-            statusText: 'OK',
-            headers: response.headers
-          });
-        }
-
-        return response;
-      }
-    }]
-  }), 'GET');
-  workbox.registerRoute(/.*/i, new workbox.NetworkOnly({
-    "cacheName": "dev",
-    plugins: []
-  }), 'GET');
+  importScripts()
+  self.skipWaiting()
+  workbox.clientsClaim()
+  workbox.registerRoute(
+    '/',
+    new workbox.NetworkFirst({
+      cacheName: 'start-url',
+      plugins: [
+        {
+          cacheWillUpdate: async ({ request, response, event, state }) => {
+            if (response && response.type === 'opaqueredirect') {
+              return new Response(response.body, {
+                status: 200,
+                statusText: 'OK',
+                headers: response.headers,
+              })
+            }
 
-});
+            return response
+          },
+        },
+      ],
+    }),
+    'GET'
+  )
+  workbox.registerRoute(
+    /.*/i,
+    new workbox.NetworkOnly({
+      cacheName: 'dev',
+      plugins: [],
+    }),
+    'GET'
+  )
+})
 //# sourceMappingURL=sw.js.map

public/sw.js.map

@@ -1 +1 @@
-{"version":3,"file":"sw.js","sources":["../../../../../private/var/folders/3w/cj9n4h8j7xl3b82k45v7xw2r0000gn/T/c3a33184c37956dfaa3e384f35b959c0/sw.js"],"sourcesContent":["import {registerRoute as workbox_routing_registerRoute} from '/Users/stephenruiz/Developer/GitHub/code-slate/node_modules/workbox-routing/registerRoute.mjs';\nimport {NetworkFirst as workbox_strategies_NetworkFirst} from '/Users/stephenruiz/Developer/GitHub/code-slate/node_modules/workbox-strategies/NetworkFirst.mjs';\nimport {NetworkOnly as workbox_strategies_NetworkOnly} from '/Users/stephenruiz/Developer/GitHub/code-slate/node_modules/workbox-strategies/NetworkOnly.mjs';\nimport {clientsClaim as workbox_core_clientsClaim} from '/Users/stephenruiz/Developer/GitHub/code-slate/node_modules/workbox-core/clientsClaim.mjs';/**\n * Welcome to your Workbox-powered service worker!\n *\n * You'll need to register this file in your web app.\n * See https://goo.gl/nhQhGp\n *\n * The rest of the code is auto-generated. Please don't update this file\n * directly; instead, make changes to your Workbox build configuration\n * and re-run your build process.\n * See https://goo.gl/2aRDsh\n */\n\n\nimportScripts(\n  \n);\n\n\n\n\n\n\n\nself.skipWaiting();\n\nworkbox_core_clientsClaim();\n\n\n\nworkbox_routing_registerRoute(\"/\", new workbox_strategies_NetworkFirst({ \"cacheName\":\"start-url\", plugins: [{ cacheWillUpdate: async ({request, response, event, state}) => { if (response && response.type === 'opaqueredirect') { return new Response(response.body, {status: 200, statusText: 'OK', headers: response.headers}); } return response; } }] }), 'GET');\nworkbox_routing_registerRoute(/.*/i, new workbox_strategies_NetworkOnly({ \"cacheName\":\"dev\", plugins: [] }), 'GET');\n\n\n\n\n"],"names":["importScripts","self","skipWaiting","workbox_core_clientsClaim","workbox_routing_registerRoute","workbox_strategies_NetworkFirst","plugins","cacheWillUpdate","request","response","event","state","type","Response","body","status","statusText","headers","workbox_strategies_NetworkOnly"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAGoJ;EACpJ;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;EAGAA,aAAa;EAUbC,IAAI,CAACC,WAAL;AAEAC,sBAAyB;AAIzBC,uBAA6B,CAAC,GAAD,EAAM,IAAIC,oBAAJ,CAAoC;EAAE,eAAY,WAAd;EAA2BC,EAAAA,OAAO,EAAE,CAAC;EAAEC,IAAAA,eAAe,EAAE,OAAO;EAACC,MAAAA,OAAD;EAAUC,MAAAA,QAAV;EAAoBC,MAAAA,KAApB;EAA2BC,MAAAA;EAA3B,KAAP,KAA6C;EAAE,UAAIF,QAAQ,IAAIA,QAAQ,CAACG,IAAT,KAAkB,gBAAlC,EAAoD;EAAE,eAAO,IAAIC,QAAJ,CAAaJ,QAAQ,CAACK,IAAtB,EAA4B;EAACC,UAAAA,MAAM,EAAE,GAAT;EAAcC,UAAAA,UAAU,EAAE,IAA1B;EAAgCC,UAAAA,OAAO,EAAER,QAAQ,CAACQ;EAAlD,SAA5B,CAAP;EAAiG;;EAAC,aAAOR,QAAP;EAAkB;EAA5O,GAAD;EAApC,CAApC,CAAN,EAAmU,KAAnU,CAA7B;AACAL,uBAA6B,CAAC,KAAD,EAAQ,IAAIc,mBAAJ,CAAmC;EAAE,eAAY,KAAd;EAAqBZ,EAAAA,OAAO,EAAE;EAA9B,CAAnC,CAAR,EAAgF,KAAhF,CAA7B;;"}
+{"version":3,"file":"sw.js","sources":["../../../../../private/var/folders/3w/cj9n4h8j7xl3b82k45v7xw2r0000gn/T/7c1696e7af803225aac54932551101fc/sw.js"],"sourcesContent":["import {registerRoute as workbox_routing_registerRoute} from '/Users/stephenruiz/Developer/GitHub/code-slate/node_modules/workbox-routing/registerRoute.mjs';\nimport {NetworkFirst as workbox_strategies_NetworkFirst} from '/Users/stephenruiz/Developer/GitHub/code-slate/node_modules/workbox-strategies/NetworkFirst.mjs';\nimport {NetworkOnly as workbox_strategies_NetworkOnly} from '/Users/stephenruiz/Developer/GitHub/code-slate/node_modules/workbox-strategies/NetworkOnly.mjs';\nimport {clientsClaim as workbox_core_clientsClaim} from '/Users/stephenruiz/Developer/GitHub/code-slate/node_modules/workbox-core/clientsClaim.mjs';/**\n * Welcome to your Workbox-powered service worker!\n *\n * You'll need to register this file in your web app.\n * See https://goo.gl/nhQhGp\n *\n * The rest of the code is auto-generated. Please don't update this file\n * directly; instead, make changes to your Workbox build configuration\n * and re-run your build process.\n * See https://goo.gl/2aRDsh\n */\n\n\nimportScripts(\n  \n);\n\n\n\n\n\n\n\nself.skipWaiting();\n\nworkbox_core_clientsClaim();\n\n\n\nworkbox_routing_registerRoute(\"/\", new workbox_strategies_NetworkFirst({ \"cacheName\":\"start-url\", plugins: [{ cacheWillUpdate: async ({request, response, event, state}) => { if (response && response.type === 'opaqueredirect') { return new Response(response.body, {status: 200, statusText: 'OK', headers: response.headers}); } return response; } }] }), 'GET');\nworkbox_routing_registerRoute(/.*/i, new workbox_strategies_NetworkOnly({ \"cacheName\":\"dev\", plugins: [] }), 'GET');\n\n\n\n\n"],"names":["importScripts","self","skipWaiting","workbox_core_clientsClaim","workbox_routing_registerRoute","workbox_strategies_NetworkFirst","plugins","cacheWillUpdate","request","response","event","state","type","Response","body","status","statusText","headers","workbox_strategies_NetworkOnly"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAGoJ;EACpJ;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;EAGAA,aAAa;EAUbC,IAAI,CAACC,WAAL;AAEAC,sBAAyB;AAIzBC,uBAA6B,CAAC,GAAD,EAAM,IAAIC,oBAAJ,CAAoC;EAAE,eAAY,WAAd;EAA2BC,EAAAA,OAAO,EAAE,CAAC;EAAEC,IAAAA,eAAe,EAAE,OAAO;EAACC,MAAAA,OAAD;EAAUC,MAAAA,QAAV;EAAoBC,MAAAA,KAApB;EAA2BC,MAAAA;EAA3B,KAAP,KAA6C;EAAE,UAAIF,QAAQ,IAAIA,QAAQ,CAACG,IAAT,KAAkB,gBAAlC,EAAoD;EAAE,eAAO,IAAIC,QAAJ,CAAaJ,QAAQ,CAACK,IAAtB,EAA4B;EAACC,UAAAA,MAAM,EAAE,GAAT;EAAcC,UAAAA,UAAU,EAAE,IAA1B;EAAgCC,UAAAA,OAAO,EAAER,QAAQ,CAACQ;EAAlD,SAA5B,CAAP;EAAiG;;EAAC,aAAOR,QAAP;EAAkB;EAA5O,GAAD;EAApC,CAApC,CAAN,EAAmU,KAAnU,CAA7B;AACAL,uBAA6B,CAAC,KAAD,EAAQ,IAAIc,mBAAJ,CAAmC;EAAE,eAAY,KAAd;EAAqBZ,EAAAA,OAAO,EAAE;EAA9B,CAAnC,CAAR,EAAgF,KAAhF,CAA7B;;"}

state/history.ts

@@ -23,6 +23,7 @@ class History<T extends Data> {
       this.pointer = this.maxLength - 1
     }
 
+    storage.savePage(data)
     storage.saveToLocalStorage(data)
   }
 
@@ -32,6 +33,7 @@ class History<T extends Data> {
     command.undo(data)
     if (this.disabled) return
     this.pointer--
+    storage.savePage(data)
     storage.saveToLocalStorage(data)
   }
 
@@ -41,6 +43,7 @@ class History<T extends Data> {
     command.redo(data, false)
     if (this.disabled) return
     this.pointer++
+    storage.savePage(data)
     storage.saveToLocalStorage(data)
   }
 

state/state.ts

@@ -1495,7 +1495,7 @@ const state = createState({
     },
 
     loadDocumentFromJson(data, payload: { restoredData: any }) {
-      storage.load(data, payload.restoredData)
+      storage.loadDocumentFromJson(data, payload.restoredData)
     },
 
     forceSave(data) {

state/storage.ts

@@ -7,7 +7,7 @@ import { v4 as uuid } from 'uuid'
 const CURRENT_VERSION = 'code_slate_0.0.5'
 const DOCUMENT_ID = '0001'
 
-function storageId(label: string, fileId: string, id: string) {
+function storageId(fileId: string, label: string, id: string) {
   return `${CURRENT_VERSION}_doc_${fileId}_${label}_${id}`
 }
 
@@ -17,17 +17,22 @@ class Storage {
   firstLoad(data: Data) {
     const lastOpened = localStorage.getItem(`${CURRENT_VERSION}_lastOpened`)
     this.loadDocumentFromLocalStorage(data, lastOpened || DOCUMENT_ID)
+    this.loadPage(data, data.currentPageId)
+    this.saveToLocalStorage(data, data.document.id)
+    localStorage.setItem(`${CURRENT_VERSION}_lastOpened`, data.document.id)
   }
 
   load(data: Data, restoredData: any) {
-    // Empty shapes in state for each page
+    console.log('loading restored data', restoredData)
+
+    // Before loading the state, save the pages / page states
     for (let key in restoredData.document.pages) {
-      restoredData.document.pages[key].shapes = {}
+      this.savePage(restoredData, restoredData.document.id, key)
     }
 
-    // Empty page states for each page
-    for (let key in restoredData.pageStates) {
-      restoredData.document.pages[key].shapes = {}
+    // Empty shapes in state for each page
+    for (let key in restoredData.document.pages) {
+      // restoredData.document.pages[key].shapes = {}
     }
 
     data.document = {} as TLDocument
@@ -42,36 +47,6 @@ class Storage {
       name: 'My Document',
       ...restoredData.document,
     }
-
-    localStorage.setItem(`${CURRENT_VERSION}_lastOpened`, data.document.id)
-
-    console.log('loaded', data.document)
-
-    // Let's also save the loaded document to local storage
-    this.saveToLocalStorage(data, data.document.id)
-
-    // Load current page
-    this.loadPage(data, data.currentPageId)
-  }
-
-  async loadDocumentFromFilesystem() {
-    const blob = await fa.fileOpen({
-      description: 'tldraw files',
-    })
-
-    const text = await getTextFromBlob(blob)
-
-    const restoredData = JSON.parse(text)
-
-    if (restoredData === null) {
-      console.warn('Could not load that data.')
-      return
-    }
-
-    // Save blob for future saves
-    this.previousSaveHandle = blob.handle
-
-    state.send('LOADED_FROM_FILE', { restoredData })
   }
 
   loadDocumentFromLocalStorage(data: Data, fileId = DOCUMENT_ID) {
@@ -79,7 +54,9 @@ class Storage {
     if (typeof localStorage === 'undefined') return
 
     // Load data from local storage
-    const savedData = localStorage.getItem(fileId)
+    const savedData = localStorage.getItem(
+      storageId(fileId, 'document', fileId)
+    )
 
     if (savedData === null) {
       // If we're going to use the default data, assign the
@@ -96,7 +73,8 @@ class Storage {
   getDataToSave = (data: Data) => {
     const dataToSave: any = { ...data }
 
-    for (let pageId in data.document) {
+    for (let pageId in data.document.pages) {
+      // Page
       const savedPage = localStorage.getItem(
         storageId(data.document.id, 'page', pageId)
       )
@@ -105,9 +83,9 @@ class Storage {
         const restored: Page = JSON.parse(savedPage)
         dataToSave.document.pages[pageId] = restored
       }
-    }
 
-    dataToSave.pageStates = {}
+      dataToSave.pageStates = {}
+    }
 
     return JSON.stringify(dataToSave, null, 2)
   }
@@ -116,61 +94,66 @@ class Storage {
     if (typeof window === 'undefined') return
     if (typeof localStorage === 'undefined') return
 
-    // Save current data to local storage
-    localStorage.setItem(id, this.getDataToSave(data))
+    const dataToSave = this.getDataToSave(data)
 
-    // Save current page too
-    this.savePage(data, id, data.currentPageId)
+    // Save current data to local storage
+    localStorage.setItem(storageId(id, 'document', id), dataToSave)
   }
 
-  saveAsToFileSystem = (data: Data) => {
-    // Create a new document id when saving to the file system
-
-    this.saveToFileSystem(data, uuid())
+  loadDocumentFromJson(data: Data, restoredData: any) {
+    this.load(data, restoredData)
+    this.loadPage(data, data.currentPageId)
+    this.saveToLocalStorage(data, data.document.id)
+    localStorage.setItem(`${CURRENT_VERSION}_lastOpened`, data.document.id)
   }
+  /* ---------------------- Pages --------------------- */
 
-  saveToFileSystem = (data: Data, id?: string) => {
-    // Save to local storage first
-    this.saveToLocalStorage(data, id)
+  savePage(data: Data, fileId = data.document.id, pageId = data.currentPageId) {
+    if (typeof window === 'undefined') return
+    if (typeof localStorage === 'undefined') return
 
-    const json = this.getDataToSave(data)
+    // Save page
+    const page = data.document.pages[pageId]
+    const json = JSON.stringify(page)
 
-    const blob = new Blob([json], {
-      type: 'application/vnd.tldraw+json',
-    })
+    localStorage.setItem(storageId(fileId, 'page', pageId), json)
 
-    fa.fileSave(
-      blob,
-      {
-        fileName: `${
-          id
-            ? data.document.name
-            : this.previousSaveHandle?.name || 'My Document'
-        }.tldr`,
-        description: 'tldraw file',
-        extensions: ['.tldr'],
+    // Save page state
+
+    let currentPageState = {
+      camera: {
+        point: [0, 0],
+        zoom: 1,
       },
-      id ? undefined : this.previousSaveHandle,
-      true
+      selectedIds: new Set([]),
+      ...data.pageStates[pageId],
+    }
+
+    const pageState = {
+      ...currentPageState,
+      selectedIds: setToArray(currentPageState.selectedIds),
+    }
+
+    localStorage.setItem(
+      storageId(fileId, 'pageState', pageId),
+      JSON.stringify(pageState)
     )
-      .then((handle) => {
-        this.previousSaveHandle = handle
-        state.send('SAVED_FILE_TO_FILE_SYSTEM')
-      })
-      .catch((e) => {
-        state.send('CANCELLED_SAVE', { reason: e.message })
-      })
   }
 
-  loadPageFromLocalStorage(fileId: string, pageId: string) {
-    let restored: Page
+  loadPage(data: Data, pageId = data.currentPageId) {
+    if (typeof window === 'undefined') return
+    if (typeof localStorage === 'undefined') return
+
+    const fileId = data.document.id
+
+    // Page
 
     const savedPage = localStorage.getItem(storageId(fileId, 'page', pageId))
 
     if (savedPage !== null) {
-      restored = JSON.parse(savedPage)
+      data.document.pages[pageId] = JSON.parse(savedPage)
     } else {
-      restored = {
+      data.document.pages[pageId] = {
         id: pageId,
         type: 'page',
         childIndex: 0,
@@ -179,21 +162,18 @@ class Storage {
       }
     }
 
-    return restored
-  }
-
-  loadPageStateFromLocalStorage(fileId: string, pageId: string) {
-    let restored: PageState
+    // Page state
 
     const savedPageState = localStorage.getItem(
       storageId(fileId, 'pageState', pageId)
     )
 
     if (savedPageState !== null) {
-      restored = JSON.parse(savedPageState)
+      const restored: PageState = JSON.parse(savedPageState)
       restored.selectedIds = new Set(restored.selectedIds)
+      data.pageStates[pageId] = restored
     } else {
-      restored = {
+      data.pageStates[pageId] = {
         camera: {
           point: [0, 0],
           zoom: 1,
@@ -202,64 +182,86 @@ class Storage {
       }
     }
 
-    return restored
+    // Empty shapes in state for other pages
+
+    for (let key in data.document.pages) {
+      if (key === pageId) continue
+      data.document.pages[key].shapes = {}
+    }
+
+    // Update camera for the new page state
+    document.documentElement.style.setProperty(
+      '--camera-zoom',
+      data.pageStates[data.currentPageId].camera.zoom.toString()
+    )
   }
 
-  savePage(data: Data, fileId = data.document.id, pageId = data.currentPageId) {
-    if (typeof window === 'undefined') return
-    if (typeof localStorage === 'undefined') return
+  /* ------------------- File System ------------------ */
 
-    // Save page
-    const page = data.document.pages[pageId]
+  saveToFileSystem = (data: Data) => {
+    this.saveDataToFileSystem(data, data.document.id, false)
+  }
 
-    localStorage.setItem(
-      storageId(fileId, 'page', pageId),
-      JSON.stringify(page)
-    )
+  saveAsToFileSystem = (data: Data) => {
+    this.saveDataToFileSystem(data, uuid(), true)
+  }
 
-    // Save page state
+  saveDataToFileSystem = (data: Data, id: string, saveAs: boolean) => {
+    const json = this.getDataToSave(data)
 
-    let currentPageState = {
-      camera: {
-        point: [0, 0],
-        zoom: 1,
-      },
-      selectedIds: new Set([]),
-      ...data.pageStates[pageId],
-    }
+    this.saveToLocalStorage(data, id)
 
-    const pageState = {
-      ...currentPageState,
-      selectedIds: setToArray(currentPageState.selectedIds),
-    }
+    const blob = new Blob([json], {
+      type: 'application/vnd.tldraw+json',
+    })
 
-    localStorage.setItem(
-      storageId(fileId, 'pageState', pageId),
-      JSON.stringify(pageState)
+    fa.fileSave(
+      blob,
+      {
+        fileName: `${
+          saveAs
+            ? data.document.name
+            : this.previousSaveHandle?.name || 'My Document'
+        }.tldr`,
+        description: 'tldraw file',
+        extensions: ['.tldr'],
+      },
+      saveAs ? undefined : this.previousSaveHandle,
+      true
     )
+      .then((handle) => {
+        this.previousSaveHandle = handle
+        state.send('SAVED_FILE_TO_FILE_SYSTEM')
+      })
+      .catch((e) => {
+        state.send('CANCELLED_SAVE', { reason: e.message })
+      })
   }
 
-  loadPage(data: Data, pageId = data.currentPageId) {
-    if (typeof window === 'undefined') return
-    if (typeof localStorage === 'undefined') return
+  loadDocumentFromFilesystem() {
+    fa.fileOpen({
+      description: 'tldraw files',
+    })
+      .then((blob) =>
+        getTextFromBlob(blob).then((text) => {
+          const restoredData = JSON.parse(text)
 
-    const fileId = data.document.id
+          console.log('restoring data', restoredData)
 
-    data.document.pages[pageId] = this.loadPageFromLocalStorage(fileId, pageId)
+          if (restoredData === null) {
+            console.warn('Could not load that data.')
+            return
+          }
 
-    data.pageStates[pageId] = this.loadPageStateFromLocalStorage(fileId, pageId)
+          // Save blob for future saves
+          this.previousSaveHandle = blob.handle
 
-    // Empty shapes in state for other pages
-    for (let key in data.document.pages) {
-      if (key === pageId) continue
-      data.document.pages[key].shapes = {}
-    }
-
-    // Update camera for the new page state
-    document.documentElement.style.setProperty(
-      '--camera-zoom',
-      data.pageStates[data.currentPageId].camera.zoom.toString()
-    )
+          state.send('LOADED_FROM_FILE', { restoredData: { ...restoredData } })
+        })
+      )
+      .catch((e) => {
+        state.send('CANCELLED_SAVE', { reason: e.message })
+      })
   }
 }
 

worker/index.js

@@ -0,0 +1 @@
+self.__WB_DISABLE_DEV_LOGS = true