Преглед на файлове

Improves translating, breaks save/load again

main
Steve Ruiz преди 4 години
родител
ревизия
94fcca1685
променени са 6 файла, в които са добавени 40 реда и са изтрити 26 реда
  1. 10
    4
      hooks/useCanvasEvents.ts
  2. 6
    4
      hooks/useShapeEvents.ts
  3. 4
    4
      lib/shape-utils/rectangle.tsx
  4. 13
    12
      state/sessions/translate-session.ts
  5. 2
    2
      state/storage.ts
  6. 5
    0
      utils/utils.ts

+ 10
- 4
hooks/useCanvasEvents.ts Целия файл

1
 import { MutableRefObject, useCallback } from 'react'
1
 import { MutableRefObject, useCallback } from 'react'
2
 import state from 'state'
2
 import state from 'state'
3
-import { fastBrushSelect, fastDrawUpdate } from 'state/hacks'
3
+import { fastBrushSelect, fastDrawUpdate, fastTranslate } from 'state/hacks'
4
 import inputs from 'state/inputs'
4
 import inputs from 'state/inputs'
5
 import { isMobile } from 'utils/utils'
5
 import { isMobile } from 'utils/utils'
6
 
6
 
30
   const handlePointerMove = useCallback((e: React.PointerEvent) => {
30
   const handlePointerMove = useCallback((e: React.PointerEvent) => {
31
     if (!inputs.canAccept(e.pointerId)) return
31
     if (!inputs.canAccept(e.pointerId)) return
32
 
32
 
33
+    const info = inputs.pointerMove(e)
34
+
33
     if (state.isIn('draw.editing')) {
35
     if (state.isIn('draw.editing')) {
34
-      fastDrawUpdate(inputs.pointerMove(e))
36
+      fastDrawUpdate(info)
35
       return
37
       return
36
     }
38
     }
37
 
39
 
38
     if (state.isIn('brushSelecting')) {
40
     if (state.isIn('brushSelecting')) {
39
-      const info = inputs.pointerMove(e)
40
       fastBrushSelect(info.point)
41
       fastBrushSelect(info.point)
41
       return
42
       return
42
     }
43
     }
43
 
44
 
44
-    state.send('MOVED_POINTER', inputs.pointerMove(e))
45
+    if (state.isIn('translatingSelection')) {
46
+      fastTranslate(info)
47
+      return
48
+    }
49
+
50
+    state.send('MOVED_POINTER', info)
45
   }, [])
51
   }, [])
46
 
52
 
47
   const handlePointerUp = useCallback((e: React.PointerEvent) => {
53
   const handlePointerUp = useCallback((e: React.PointerEvent) => {

+ 6
- 4
hooks/useShapeEvents.ts Целия файл

14
       e.stopPropagation()
14
       e.stopPropagation()
15
       rGroup.current.setPointerCapture(e.pointerId)
15
       rGroup.current.setPointerCapture(e.pointerId)
16
 
16
 
17
+      const info = inputs.pointerDown(e, id)
18
+
17
       if (e.button === 0) {
19
       if (e.button === 0) {
18
-        if (inputs.isDoubleClick()) {
19
-          state.send('DOUBLE_POINTED_SHAPE', inputs.pointerDown(e, id))
20
+        if (inputs.isDoubleClick() && !(info.altKey || info.metaKey)) {
21
+          state.send('DOUBLE_POINTED_SHAPE', info)
20
         }
22
         }
21
 
23
 
22
-        state.send('POINTED_SHAPE', inputs.pointerDown(e, id))
24
+        state.send('POINTED_SHAPE', info)
23
       } else {
25
       } else {
24
-        state.send('RIGHT_POINTED', inputs.pointerDown(e, id))
26
+        state.send('RIGHT_POINTED', info)
25
       }
27
       }
26
     },
28
     },
27
     [id]
29
     [id]

+ 4
- 4
lib/shape-utils/rectangle.tsx Целия файл

12
 import { defaultStyle, getShapeStyle } from 'lib/shape-styles'
12
 import { defaultStyle, getShapeStyle } from 'lib/shape-styles'
13
 import getStroke from 'perfect-freehand'
13
 import getStroke from 'perfect-freehand'
14
 
14
 
15
-const pathCache = new WeakMap<RectangleShape, string>([])
15
+const pathCache = new WeakMap<number[], string>([])
16
 
16
 
17
 const rectangle = registerShapeUtils<RectangleShape>({
17
 const rectangle = registerShapeUtils<RectangleShape>({
18
   boundsCache: new WeakMap([]),
18
   boundsCache: new WeakMap([]),
42
     const { id, size, radius, style } = shape
42
     const { id, size, radius, style } = shape
43
     const styles = getShapeStyle(style)
43
     const styles = getShapeStyle(style)
44
 
44
 
45
-    if (!pathCache.has(shape)) {
45
+    if (!pathCache.has(shape.size)) {
46
       renderPath(shape)
46
       renderPath(shape)
47
     }
47
     }
48
 
48
 
49
-    const path = pathCache.get(shape)
49
+    const path = pathCache.get(shape.size)
50
 
50
 
51
     return (
51
     return (
52
       <g id={id}>
52
       <g id={id}>
163
     }
163
     }
164
   )
164
   )
165
 
165
 
166
-  pathCache.set(shape, getSvgPathFromStroke(stroke))
166
+  pathCache.set(shape.size, getSvgPathFromStroke(stroke))
167
 }
167
 }

+ 13
- 12
state/sessions/translate-session.ts Целия файл

56
         for (const { id, point } of initialShapes) {
56
         for (const { id, point } of initialShapes) {
57
           const shape = shapes[id]
57
           const shape = shapes[id]
58
           getShapeUtils(shape).translateTo(shape, point)
58
           getShapeUtils(shape).translateTo(shape, point)
59
+          shapes[shape.id] = { ...shape }
59
         }
60
         }
60
 
61
 
61
         for (const clone of clones) {
62
         for (const clone of clones) {
65
 
66
 
66
           getShapeUtils(shape).translateBy(shape, delta)
67
           getShapeUtils(shape).translateBy(shape, delta)
67
 
68
 
69
+          shapes[clone.id] = { ...shape }
70
+
68
           const parent = shapes[shape.parentId]
71
           const parent = shapes[shape.parentId]
69
 
72
 
70
           if (!parent) continue
73
           if (!parent) continue
73
             ...parent.children,
76
             ...parent.children,
74
             shape.id,
77
             shape.id,
75
           ])
78
           ])
79
+
80
+          shapes[shape.parentId] = { ...parent }
76
         }
81
         }
77
       }
82
       }
78
 
83
 
79
       for (const { id } of clones) {
84
       for (const { id } of clones) {
80
         const shape = shapes[id]
85
         const shape = shapes[id]
81
         getShapeUtils(shape).translateBy(shape, trueDelta)
86
         getShapeUtils(shape).translateBy(shape, trueDelta)
87
+        shapes[id] = { ...shape }
82
       }
88
       }
83
 
89
 
84
       setSelectedIds(
90
       setSelectedIds(
107
           getDocumentBranch(data, initialShape.id).forEach((id) => {
113
           getDocumentBranch(data, initialShape.id).forEach((id) => {
108
             const shape = shapes[id]
114
             const shape = shapes[id]
109
             getShapeUtils(shape).translateBy(shape, delta)
115
             getShapeUtils(shape).translateBy(shape, delta)
116
+            shapes[id] = { ...shape }
110
           })
117
           })
111
         }
118
         }
112
 
119
 
113
-        initialParents.forEach(
114
-          (parent) =>
115
-            ((shapes[parent.id] as GroupShape).children = parent.children)
116
-        )
120
+        initialParents.forEach((parent) => {
121
+          const shape = shapes[parent.id] as GroupShape
122
+          shapes[parent.id] = { ...shape, children: parent.children }
123
+        })
117
       }
124
       }
118
 
125
 
119
       for (const initialShape of initialShapes) {
126
       for (const initialShape of initialShapes) {
120
         getDocumentBranch(data, initialShape.id).forEach((id) => {
127
         getDocumentBranch(data, initialShape.id).forEach((id) => {
121
           const shape = shapes[id]
128
           const shape = shapes[id]
122
           getShapeUtils(shape).translateBy(shape, trueDelta)
129
           getShapeUtils(shape).translateBy(shape, trueDelta)
130
+
131
+          shapes[id] = { ...shape }
123
         })
132
         })
124
       }
133
       }
125
 
134
 
204
     clones: selectedShapes
213
     clones: selectedShapes
205
       .filter((shape) => shape.type !== ShapeType.Group)
214
       .filter((shape) => shape.type !== ShapeType.Group)
206
       .flatMap((shape) => {
215
       .flatMap((shape) => {
207
-        // TODO: Clone children recursively
208
         const clone = {
216
         const clone = {
209
           ...shape,
217
           ...shape,
210
           id: uuid(),
218
           id: uuid(),
214
         }
222
         }
215
 
223
 
216
         return clone
224
         return clone
217
-
218
-        // cloneGroup(cData, {
219
-        //   ...shape,
220
-        //   id: uuid(),
221
-        //   parentId: shape.parentId,
222
-        //   childIndex: getChildIndexAbove(cData, shape.id),
223
-        // })
224
       }),
225
       }),
225
   }
226
   }
226
 }
227
 }

+ 2
- 2
state/storage.ts Целия файл

6
 import { v4 as uuid } from 'uuid'
6
 import { v4 as uuid } from 'uuid'
7
 import * as idb from 'idb-keyval'
7
 import * as idb from 'idb-keyval'
8
 
8
 
9
-const CURRENT_VERSION = 'code_slate_0.0.6'
9
+const CURRENT_VERSION = 'code_slate_0.0.7'
10
 const DOCUMENT_ID = '0001'
10
 const DOCUMENT_ID = '0001'
11
 
11
 
12
 function storageId(fileId: string, label: string, id?: string) {
12
 function storageId(fileId: string, label: string, id?: string) {
27
 
27
 
28
     this.loadPage(data, data.currentPageId)
28
     this.loadPage(data, data.currentPageId)
29
 
29
 
30
-    // this.saveToLocalStorage(data, data.document.id)
30
+    this.saveToLocalStorage(data, data.document.id)
31
 
31
 
32
     localStorage.setItem(`${CURRENT_VERSION}_lastOpened`, data.document.id)
32
     localStorage.setItem(`${CURRENT_VERSION}_lastOpened`, data.document.id)
33
   }
33
   }

+ 5
- 0
utils/utils.ts Целия файл

1636
       parent,
1636
       parent,
1637
       parent.children.map((id) => shapes[id])
1637
       parent.children.map((id) => shapes[id])
1638
     )
1638
     )
1639
+
1640
+    shapes[parentId] = { ...parent }
1639
   }
1641
   }
1640
 
1642
 
1641
   updateParents(data, parentToUpdateIds)
1643
   updateParents(data, parentToUpdateIds)
1770
 }
1772
 }
1771
 
1773
 
1772
 export function lzw_encode(s: string) {
1774
 export function lzw_encode(s: string) {
1775
+  return s
1773
   const dict = {}
1776
   const dict = {}
1774
   const data = (s + '').split('')
1777
   const data = (s + '').split('')
1775
 
1778
 
1803
 
1806
 
1804
 // Decompress an LZW-encoded string
1807
 // Decompress an LZW-encoded string
1805
 export function lzw_decode(s: string) {
1808
 export function lzw_decode(s: string) {
1809
+  return s
1810
+
1806
   const dict = {}
1811
   const dict = {}
1807
   const data = (s + '').split('')
1812
   const data = (s + '').split('')
1808
 
1813
 

Loading…
Отказ
Запис