Improving draw

hooks/useZoomEvents.ts

@@ -32,7 +32,7 @@ export default function useZoomEvents() {
           return
         }
 
-        if (state.isIn('pointing')) {
+        if (state.isInAny('pointing', 'drawing')) {
           fastPanUpdate(delta)
           return
         }

state/history.ts

@@ -24,7 +24,7 @@ class History<T extends Data> {
     }
 
     storage.savePage(data)
-    storage.saveToLocalStorage(data)
+    // storage.saveToLocalStorage(data)
   }
 
   undo = (data: T) => {
@@ -34,7 +34,7 @@ class History<T extends Data> {
     if (this.disabled) return
     this.pointer--
     storage.savePage(data)
-    storage.saveToLocalStorage(data)
+    // storage.saveToLocalStorage(data)
   }
 
   redo = (data: T) => {
@@ -44,7 +44,7 @@ class History<T extends Data> {
     if (this.disabled) return
     this.pointer++
     storage.savePage(data)
-    storage.saveToLocalStorage(data)
+    // storage.saveToLocalStorage(data)
   }
 
   disable = () => {

state/sessions/draw-session.ts

@@ -103,6 +103,16 @@ export default class BrushSession extends BaseSession {
     // Update the points and update the shape's parents.
     const shape = getShape(data, snapshot.id) as DrawShape
 
+    if (newPoint[0] < 0 || newPoint[1] < 0) {
+      const offset = [Math.min(newPoint[0], 0), Math.min(newPoint[1], 0)]
+
+      this.points = this.points.map((pt) => vec.sub(pt, offset))
+
+      this.origin = vec.sub(this.origin, offset)
+
+      getShapeUtils(shape).translateBy(shape, offset)
+    }
+
     getShapeUtils(shape).setProperty(shape, 'points', [...this.points])
 
     updateParents(data, [shape.id])

state/storage.ts

@@ -27,16 +27,13 @@ class Storage {
 
     this.loadPage(data, data.currentPageId)
 
-    this.saveToLocalStorage(data, data.document.id)
+    // this.saveToLocalStorage(data, data.document.id)
 
     localStorage.setItem(`${CURRENT_VERSION}_lastOpened`, data.document.id)
   }
 
   load(data: Data, restoredData: any) {
     // Before loading the state, save the pages / page states
-    for (let key in restoredData.document.pages) {
-      this.savePage(restoredData, restoredData.document.id, key)
-    }
 
     // Empty current state.
     data.document = {} as TLDocument
@@ -71,11 +68,6 @@ class Storage {
 
     const restoredData: any = JSON.parse(lzw_decode(savedData))
 
-    for (let pageId in restoredData.document.pages) {
-      const selectedIds = restoredData.pageStates[pageId].selectedIds
-      restoredData.pageStates[pageId].selectedIds = new Set(selectedIds)
-    }
-
     this.load(data, restoredData)
   }
 
@@ -92,7 +84,7 @@ class Storage {
         dataToSave.document.pages[pageId] = restored
       }
 
-      const pageState = dataToSave.pageStates[pageId]
+      const pageState = { ...dataToSave.pageStates[pageId] }
       pageState.selectedIds = setToArray(pageState.selectedIds)
     }
 
@@ -114,6 +106,11 @@ class Storage {
 
   loadDocumentFromJson(data: Data, restoredData: any) {
     this.load(data, restoredData)
+
+    for (let key in restoredData.document.pages) {
+      this.savePage(restoredData, restoredData.document.id, key)
+    }
+
     this.loadPage(data, data.currentPageId)
     this.saveToLocalStorage(data, data.document.id)
     localStorage.setItem(`${CURRENT_VERSION}_lastOpened`, data.document.id)
@@ -166,10 +163,10 @@ class Storage {
     const fileId = data.document.id
 
     // Page
-
     const savedPage = localStorage.getItem(storageId(fileId, 'page', pageId))
 
     if (savedPage !== null) {
+      console.log(lzw_decode(savedPage))
       data.document.pages[pageId] = JSON.parse(lzw_decode(savedPage))
     } else {
       data.document.pages[pageId] = {
@@ -182,7 +179,6 @@ class Storage {
     }
 
     // Page state
-
     const savedPageState = localStorage.getItem(
       storageId(fileId, 'pageState', pageId)
     )
@@ -200,10 +196,6 @@ class Storage {
       }
     }
 
-    data.pageStates[pageId].selectedIds = new Set(
-      data.pageStates[pageId].selectedIds
-    )
-
     // Empty shapes in state for other pages
 
     for (let key in data.document.pages) {
@@ -211,6 +203,11 @@ class Storage {
       data.document.pages[key].shapes = {}
     }
 
+    // Force selected Ids into sets
+    for (let key in data.pageStates) {
+      data.pageStates[key].selectedIds = new Set([])
+    }
+
     // Update camera for the new page state
     document.documentElement.style.setProperty(
       '--camera-zoom',

utils/utils.ts

@@ -1763,9 +1763,9 @@ export function getPoint(
   e: PointerEvent | React.PointerEvent | Touch | React.Touch | WheelEvent
 ) {
   return [
-    Number(e.clientX.toPrecision(4)),
-    Number(e.clientY.toPrecision(4)),
-    'pressure' in e ? e.pressure || 0.5 : 0.5,
+    Number(e.clientX.toPrecision(5)),
+    Number(e.clientY.toPrecision(5)),
+    'pressure' in e ? Number(e.pressure.toPrecision(5)) || 0.5 : 0.5,
   ]
 }
 

utils/vec.ts

@@ -339,8 +339,8 @@ export function clockwise(p1: number[], pc: number[], p2: number[]) {
   return isLeft(p1, pc, p2) > 0
 }
 
-export function round(a: number[], d = 2) {
-  return a.map((v) => +v.toFixed(d))
+export function round(a: number[], d = 5) {
+  return a.map((v) => Number(v.toPrecision(d)))
 }
 
 /**