Bläddra i källkod

Improves(?) save / load

main
Steve Ruiz 4 år sedan
förälder
incheckning
a689422576
4 ändrade filer med 49 tillägg och 26 borttagningar
  1. 1
    0
      package.json
  2. 0
    3
      state/sessions/draw-session.ts
  3. 43
    23
      state/storage.ts
  4. 5
    0
      yarn.lock

+ 1
- 0
package.json Visa fil

20
     "@stitches/react": "^0.1.9",
20
     "@stitches/react": "^0.1.9",
21
     "browser-fs-access": "^0.17.3",
21
     "browser-fs-access": "^0.17.3",
22
     "framer-motion": "^4.1.16",
22
     "framer-motion": "^4.1.16",
23
+    "idb-keyval": "^5.0.6",
23
     "ismobilejs": "^1.1.1",
24
     "ismobilejs": "^1.1.1",
24
     "next": "10.2.0",
25
     "next": "10.2.0",
25
     "next-pwa": "^5.2.21",
26
     "next-pwa": "^5.2.21",

+ 0
- 3
state/sessions/draw-session.ts Visa fil

5
 import { getPage, getShape, isMobile, updateParents } from 'utils/utils'
5
 import { getPage, getShape, isMobile, updateParents } from 'utils/utils'
6
 import * as vec from 'utils/vec'
6
 import * as vec from 'utils/vec'
7
 import commands from 'state/commands'
7
 import commands from 'state/commands'
8
-
9
-let prevEndPoint: number[]
10
-
11
 export default class BrushSession extends BaseSession {
8
 export default class BrushSession extends BaseSession {
12
   origin: number[]
9
   origin: number[]
13
   previous: number[]
10
   previous: number[]

+ 43
- 23
state/storage.ts Visa fil

2
 import { Data, Page, PageState, TLDocument } from 'types'
2
 import { Data, Page, PageState, TLDocument } from 'types'
3
 import { setToArray } from 'utils/utils'
3
 import { setToArray } from 'utils/utils'
4
 import state from './state'
4
 import state from './state'
5
+import { current } from 'immer'
5
 import { v4 as uuid } from 'uuid'
6
 import { v4 as uuid } from 'uuid'
7
+import * as idb from 'idb-keyval'
6
 
8
 
7
 const CURRENT_VERSION = 'code_slate_0.0.5'
9
 const CURRENT_VERSION = 'code_slate_0.0.5'
8
 const DOCUMENT_ID = '0001'
10
 const DOCUMENT_ID = '0001'
9
 
11
 
10
-function storageId(fileId: string, label: string, id: string) {
11
-  return `${CURRENT_VERSION}_doc_${fileId}_${label}_${id}`
12
+function storageId(fileId: string, label: string, id?: string) {
13
+  return [CURRENT_VERSION, fileId, label, id].filter(Boolean).join('_')
12
 }
14
 }
13
 
15
 
14
 class Storage {
16
 class Storage {
15
   previousSaveHandle?: fa.FileSystemHandle
17
   previousSaveHandle?: fa.FileSystemHandle
16
 
18
 
19
+  constructor() {
20
+    // this.loadPreviousHandle() // Still needs debugging
21
+  }
22
+
17
   firstLoad(data: Data) {
23
   firstLoad(data: Data) {
18
     const lastOpened = localStorage.getItem(`${CURRENT_VERSION}_lastOpened`)
24
     const lastOpened = localStorage.getItem(`${CURRENT_VERSION}_lastOpened`)
25
+
19
     this.loadDocumentFromLocalStorage(data, lastOpened || DOCUMENT_ID)
26
     this.loadDocumentFromLocalStorage(data, lastOpened || DOCUMENT_ID)
27
+
20
     this.loadPage(data, data.currentPageId)
28
     this.loadPage(data, data.currentPageId)
29
+
21
     this.saveToLocalStorage(data, data.document.id)
30
     this.saveToLocalStorage(data, data.document.id)
31
+
22
     localStorage.setItem(`${CURRENT_VERSION}_lastOpened`, data.document.id)
32
     localStorage.setItem(`${CURRENT_VERSION}_lastOpened`, data.document.id)
23
   }
33
   }
24
 
34
 
28
       this.savePage(restoredData, restoredData.document.id, key)
38
       this.savePage(restoredData, restoredData.document.id, key)
29
     }
39
     }
30
 
40
 
31
-    // Empty shapes in state for each page
32
-    for (let key in restoredData.document.pages) {
33
-      // restoredData.document.pages[key].shapes = {}
34
-    }
35
-
41
+    // Empty current state.
36
     data.document = {} as TLDocument
42
     data.document = {} as TLDocument
37
     data.pageStates = {}
43
     data.pageStates = {}
38
 
44
 
39
-    // Merge restored data into state
45
+    // Merge restored data into state.
40
     Object.assign(data, restoredData)
46
     Object.assign(data, restoredData)
41
 
47
 
42
-    // Minor migrtation: add id and name to document
48
+    // Add id and name to document, just in case.
43
     data.document = {
49
     data.document = {
44
       id: 'document0',
50
       id: 'document0',
45
       name: 'My Document',
51
       name: 'My Document',
63
       return false
69
       return false
64
     }
70
     }
65
 
71
 
66
-    const restoredData = JSON.parse(savedData)
72
+    const restoredData: any = JSON.parse(savedData)
73
+
74
+    for (let pageId in restoredData.document.pages) {
75
+      const selectedIds = restoredData.pageStates[pageId].selectedIds
76
+      restoredData.pageStates[pageId].selectedIds = new Set(selectedIds)
77
+    }
67
 
78
 
68
     this.load(data, restoredData)
79
     this.load(data, restoredData)
69
   }
80
   }
70
 
81
 
71
   getDataToSave = (data: Data) => {
82
   getDataToSave = (data: Data) => {
72
-    const dataToSave: any = { ...data }
83
+    const dataToSave = current(data) as any
73
 
84
 
74
     for (let pageId in data.document.pages) {
85
     for (let pageId in data.document.pages) {
75
-      // Page
76
       const savedPage = localStorage.getItem(
86
       const savedPage = localStorage.getItem(
77
         storageId(data.document.id, 'page', pageId)
87
         storageId(data.document.id, 'page', pageId)
78
       )
88
       )
82
         dataToSave.document.pages[pageId] = restored
92
         dataToSave.document.pages[pageId] = restored
83
       }
93
       }
84
 
94
 
85
-      dataToSave.pageStates = {}
95
+      const pageState = dataToSave.pageStates[pageId]
96
+      pageState.selectedIds = setToArray(pageState.selectedIds)
86
     }
97
     }
87
 
98
 
88
     return JSON.stringify(dataToSave, null, 2)
99
     return JSON.stringify(dataToSave, null, 2)
89
   }
100
   }
90
 
101
 
91
-  saveToLocalStorage = (data: Data, id = data.document.id) => {
102
+  saveToLocalStorage = (data: Data, fileId = data.document.id) => {
92
     if (typeof window === 'undefined') return
103
     if (typeof window === 'undefined') return
93
     if (typeof localStorage === 'undefined') return
104
     if (typeof localStorage === 'undefined') return
94
 
105
 
95
     const dataToSave = this.getDataToSave(data)
106
     const dataToSave = this.getDataToSave(data)
96
 
107
 
97
     // Save current data to local storage
108
     // Save current data to local storage
98
-    localStorage.setItem(storageId(id, 'document', id), dataToSave)
109
+    localStorage.setItem(storageId(fileId, 'document', fileId), dataToSave)
99
   }
110
   }
100
 
111
 
101
   loadDocumentFromJson(data: Data, restoredData: any) {
112
   loadDocumentFromJson(data: Data, restoredData: any) {
106
   }
117
   }
107
   /* ---------------------- Pages --------------------- */
118
   /* ---------------------- Pages --------------------- */
108
 
119
 
120
+  async loadPreviousHandle() {
121
+    const handle: fa.FileSystemHandle | undefined = await idb.get(
122
+      'previous_handle'
123
+    )
124
+    if (handle !== undefined) {
125
+      this.previousSaveHandle = handle
126
+    }
127
+  }
128
+
109
   savePage(data: Data, fileId = data.document.id, pageId = data.currentPageId) {
129
   savePage(data: Data, fileId = data.document.id, pageId = data.currentPageId) {
110
     if (typeof window === 'undefined') return
130
     if (typeof window === 'undefined') return
111
     if (typeof localStorage === 'undefined') return
131
     if (typeof localStorage === 'undefined') return
127
       ...data.pageStates[pageId],
147
       ...data.pageStates[pageId],
128
     }
148
     }
129
 
149
 
130
-    const pageState = {
131
-      ...currentPageState,
132
-      selectedIds: setToArray(currentPageState.selectedIds),
133
-    }
134
-
135
     localStorage.setItem(
150
     localStorage.setItem(
136
       storageId(fileId, 'pageState', pageId),
151
       storageId(fileId, 'pageState', pageId),
137
-      JSON.stringify(pageState)
152
+      JSON.stringify({
153
+        ...currentPageState,
154
+        selectedIds: setToArray(currentPageState.selectedIds),
155
+      })
138
     )
156
     )
139
   }
157
   }
140
 
158
 
204
     this.saveDataToFileSystem(data, uuid(), true)
222
     this.saveDataToFileSystem(data, uuid(), true)
205
   }
223
   }
206
 
224
 
207
-  saveDataToFileSystem = (data: Data, id: string, saveAs: boolean) => {
225
+  saveDataToFileSystem = (data: Data, fileId: string, saveAs: boolean) => {
208
     const json = this.getDataToSave(data)
226
     const json = this.getDataToSave(data)
209
 
227
 
210
-    this.saveToLocalStorage(data, id)
228
+    this.saveToLocalStorage(data, fileId)
211
 
229
 
212
     const blob = new Blob([json], {
230
     const blob = new Blob([json], {
213
       type: 'application/vnd.tldraw+json',
231
       type: 'application/vnd.tldraw+json',
230
       .then((handle) => {
248
       .then((handle) => {
231
         this.previousSaveHandle = handle
249
         this.previousSaveHandle = handle
232
         state.send('SAVED_FILE_TO_FILE_SYSTEM')
250
         state.send('SAVED_FILE_TO_FILE_SYSTEM')
251
+        idb.set('previous_handle', handle)
233
       })
252
       })
234
       .catch((e) => {
253
       .catch((e) => {
235
         state.send('CANCELLED_SAVE', { reason: e.message })
254
         state.send('CANCELLED_SAVE', { reason: e.message })
237
   }
256
   }
238
 
257
 
239
   loadDocumentFromFilesystem() {
258
   loadDocumentFromFilesystem() {
259
+    console.warn('Loading file from file system.')
240
     fa.fileOpen({
260
     fa.fileOpen({
241
       description: 'tldraw files',
261
       description: 'tldraw files',
242
     })
262
     })

+ 5
- 0
yarn.lock Visa fil

4979
   dependencies:
4979
   dependencies:
4980
     safer-buffer ">= 2.1.2 < 3.0.0"
4980
     safer-buffer ">= 2.1.2 < 3.0.0"
4981
 
4981
 
4982
+idb-keyval@^5.0.6:
4983
+  version "5.0.6"
4984
+  resolved "https://registry.yarnpkg.com/idb-keyval/-/idb-keyval-5.0.6.tgz#62fe4a6703fb5ec86661f41330c94fda65e6d0e6"
4985
+  integrity sha512-6lJuVbwyo82mKSH6Wq2eHkt9LcbwHAelMIcMe0tP4p20Pod7tTxq9zf0ge2n/YDfMOpDryerfmmYyuQiaFaKOg==
4986
+
4982
 ieee754@^1.1.4:
4987
 ieee754@^1.1.4:
4983
   version "1.2.1"
4988
   version "1.2.1"
4984
   resolved "https://registry.yarnpkg.com/ieee754/-/ieee754-1.2.1.tgz#8eb7a10a63fff25d15a57b001586d177d1b0d352"
4989
   resolved "https://registry.yarnpkg.com/ieee754/-/ieee754-1.2.1.tgz#8eb7a10a63fff25d15a57b001586d177d1b0d352"

Laddar…
Avbryt
Spara