Improves translating, breaks save/load again

hooks/useCanvasEvents.ts

@@ -1,6 +1,6 @@
 import { MutableRefObject, useCallback } from 'react'
 import state from 'state'
-import { fastBrushSelect, fastDrawUpdate } from 'state/hacks'
+import { fastBrushSelect, fastDrawUpdate, fastTranslate } from 'state/hacks'
 import inputs from 'state/inputs'
 import { isMobile } from 'utils/utils'
 
@@ -30,18 +30,24 @@ export default function useCanvasEvents(
   const handlePointerMove = useCallback((e: React.PointerEvent) => {
     if (!inputs.canAccept(e.pointerId)) return
 
+    const info = inputs.pointerMove(e)
+
     if (state.isIn('draw.editing')) {
-      fastDrawUpdate(inputs.pointerMove(e))
+      fastDrawUpdate(info)
       return
     }
 
     if (state.isIn('brushSelecting')) {
-      const info = inputs.pointerMove(e)
       fastBrushSelect(info.point)
       return
     }
 
-    state.send('MOVED_POINTER', inputs.pointerMove(e))
+    if (state.isIn('translatingSelection')) {
+      fastTranslate(info)
+      return
+    }
+
+    state.send('MOVED_POINTER', info)
   }, [])
 
   const handlePointerUp = useCallback((e: React.PointerEvent) => {

hooks/useShapeEvents.ts

@@ -14,14 +14,16 @@ export default function useShapeEvents(
       e.stopPropagation()
       rGroup.current.setPointerCapture(e.pointerId)
 
+      const info = inputs.pointerDown(e, id)
+
       if (e.button === 0) {
-        if (inputs.isDoubleClick()) {
-          state.send('DOUBLE_POINTED_SHAPE', inputs.pointerDown(e, id))
+        if (inputs.isDoubleClick() && !(info.altKey || info.metaKey)) {
+          state.send('DOUBLE_POINTED_SHAPE', info)
         }
 
-        state.send('POINTED_SHAPE', inputs.pointerDown(e, id))
+        state.send('POINTED_SHAPE', info)
       } else {
-        state.send('RIGHT_POINTED', inputs.pointerDown(e, id))
+        state.send('RIGHT_POINTED', info)
       }
     },
     [id]

lib/shape-utils/rectangle.tsx

@@ -12,7 +12,7 @@ import {
 import { defaultStyle, getShapeStyle } from 'lib/shape-styles'
 import getStroke from 'perfect-freehand'
 
-const pathCache = new WeakMap<RectangleShape, string>([])
+const pathCache = new WeakMap<number[], string>([])
 
 const rectangle = registerShapeUtils<RectangleShape>({
   boundsCache: new WeakMap([]),
@@ -42,11 +42,11 @@ const rectangle = registerShapeUtils<RectangleShape>({
     const { id, size, radius, style } = shape
     const styles = getShapeStyle(style)
 
-    if (!pathCache.has(shape)) {
+    if (!pathCache.has(shape.size)) {
       renderPath(shape)
     }
 
-    const path = pathCache.get(shape)
+    const path = pathCache.get(shape.size)
 
     return (
       <g id={id}>
@@ -163,5 +163,5 @@ function renderPath(shape: RectangleShape) {
     }
   )
 
-  pathCache.set(shape, getSvgPathFromStroke(stroke))
+  pathCache.set(shape.size, getSvgPathFromStroke(stroke))
 }

state/sessions/translate-session.ts

@@ -56,6 +56,7 @@ export default class TranslateSession extends BaseSession {
         for (const { id, point } of initialShapes) {
           const shape = shapes[id]
           getShapeUtils(shape).translateTo(shape, point)
+          shapes[shape.id] = { ...shape }
         }
 
         for (const clone of clones) {
@@ -65,6 +66,8 @@ export default class TranslateSession extends BaseSession {
 
           getShapeUtils(shape).translateBy(shape, delta)
 
+          shapes[clone.id] = { ...shape }
+
           const parent = shapes[shape.parentId]
 
           if (!parent) continue
@@ -73,12 +76,15 @@ export default class TranslateSession extends BaseSession {
             ...parent.children,
             shape.id,
           ])
+
+          shapes[shape.parentId] = { ...parent }
         }
       }
 
       for (const { id } of clones) {
         const shape = shapes[id]
         getShapeUtils(shape).translateBy(shape, trueDelta)
+        shapes[id] = { ...shape }
       }
 
       setSelectedIds(
@@ -107,19 +113,22 @@ export default class TranslateSession extends BaseSession {
           getDocumentBranch(data, initialShape.id).forEach((id) => {
             const shape = shapes[id]
             getShapeUtils(shape).translateBy(shape, delta)
+            shapes[id] = { ...shape }
           })
         }
 
-        initialParents.forEach(
-          (parent) =>
-            ((shapes[parent.id] as GroupShape).children = parent.children)
-        )
+        initialParents.forEach((parent) => {
+          const shape = shapes[parent.id] as GroupShape
+          shapes[parent.id] = { ...shape, children: parent.children }
+        })
       }
 
       for (const initialShape of initialShapes) {
         getDocumentBranch(data, initialShape.id).forEach((id) => {
           const shape = shapes[id]
           getShapeUtils(shape).translateBy(shape, trueDelta)
+
+          shapes[id] = { ...shape }
         })
       }
 
@@ -204,7 +213,6 @@ export function getTranslateSnapshot(data: Data) {
     clones: selectedShapes
       .filter((shape) => shape.type !== ShapeType.Group)
       .flatMap((shape) => {
-        // TODO: Clone children recursively
         const clone = {
           ...shape,
           id: uuid(),
@@ -214,13 +222,6 @@ export function getTranslateSnapshot(data: Data) {
         }
 
         return clone
-
-        // cloneGroup(cData, {
-        //   ...shape,
-        //   id: uuid(),
-        //   parentId: shape.parentId,
-        //   childIndex: getChildIndexAbove(cData, shape.id),
-        // })
       }),
   }
 }

state/storage.ts

@@ -6,7 +6,7 @@ import { current } from 'immer'
 import { v4 as uuid } from 'uuid'
 import * as idb from 'idb-keyval'
 
-const CURRENT_VERSION = 'code_slate_0.0.6'
+const CURRENT_VERSION = 'code_slate_0.0.7'
 const DOCUMENT_ID = '0001'
 
 function storageId(fileId: string, label: string, id?: string) {
@@ -27,7 +27,7 @@ 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)
   }

utils/utils.ts

@@ -1636,6 +1636,8 @@ export function updateParents(data: Data, changedShapeIds: string[]) {
       parent,
       parent.children.map((id) => shapes[id])
     )
+
+    shapes[parentId] = { ...parent }
   }
 
   updateParents(data, parentToUpdateIds)
@@ -1770,6 +1772,7 @@ export function getPoint(
 }
 
 export function lzw_encode(s: string) {
+  return s
   const dict = {}
   const data = (s + '').split('')
 
@@ -1803,6 +1806,8 @@ export function lzw_encode(s: string) {
 
 // Decompress an LZW-encoded string
 export function lzw_decode(s: string) {
+  return s
+
   const dict = {}
   const data = (s + '').split('')