Browse Source

improves touch events when drawing

main
Steve Ruiz 4 years ago
parent
commit
2af0d7b3a7
3 changed files with 13 additions and 8 deletions
  1. 2
    2
      components/canvas/page.tsx
  2. 4
    3
      components/canvas/selected.tsx
  3. 7
    3
      lib/shape-utils/draw.tsx

+ 2
- 2
components/canvas/page.tsx View File

18
   const isSelecting = useSelector((s) => s.isIn('selecting'))
18
   const isSelecting = useSelector((s) => s.isIn('selecting'))
19
 
19
 
20
   return (
20
   return (
21
-    <>
21
+    <g pointerEvents={isSelecting ? 'all' : 'none'}>
22
       {currentPageShapeIds.map((shapeId) => (
22
       {currentPageShapeIds.map((shapeId) => (
23
         <Shape key={shapeId} id={shapeId} isSelecting={isSelecting} />
23
         <Shape key={shapeId} id={shapeId} isSelecting={isSelecting} />
24
       ))}
24
       ))}
25
-    </>
25
+    </g>
26
   )
26
   )
27
 }
27
 }

+ 4
- 3
components/canvas/selected.tsx View File

33
   if (!shape) return null
33
   if (!shape) return null
34
 
34
 
35
   const transform = `
35
   const transform = `
36
-  rotate(${shape.rotation * (180 / Math.PI)},
37
-  ${getShapeUtils(shape).getCenter(shape)})
38
-  translate(${shape.point})`
36
+    rotate(${shape.rotation * (180 / Math.PI)},
37
+    ${getShapeUtils(shape).getCenter(shape)})
38
+    translate(${shape.point})
39
+  `
39
 
40
 
40
   return (
41
   return (
41
     <Indicator
42
     <Indicator

+ 7
- 3
lib/shape-utils/draw.tsx View File

8
 import {
8
 import {
9
   getBoundsCenter,
9
   getBoundsCenter,
10
   getBoundsFromPoints,
10
   getBoundsFromPoints,
11
-  getRotatedCorners,
12
   getSvgPathFromStroke,
11
   getSvgPathFromStroke,
13
   translateBounds,
12
   translateBounds,
14
 } from 'utils/utils'
13
 } from 'utils/utils'
27
       parentId: 'page0',
26
       parentId: 'page0',
28
       childIndex: 0,
27
       childIndex: 0,
29
       point: [0, 0],
28
       point: [0, 0],
30
-      points: [[0, 0]],
29
+      points: [],
31
       rotation: 0,
30
       rotation: 0,
32
       isAspectRatioLocked: false,
31
       isAspectRatioLocked: false,
33
       isLocked: false,
32
       isLocked: false,
50
       pathCache.set(
49
       pathCache.set(
51
         points,
50
         points,
52
         getSvgPathFromStroke(
51
         getSvgPathFromStroke(
53
-          getStroke(points, { size: +style.strokeWidth * 2, thinning: 0.9 })
52
+          getStroke(points, {
53
+            size: +style.strokeWidth * 2,
54
+            thinning: 0.9,
55
+            end: { taper: 100 },
56
+            start: { taper: 100 },
57
+          })
54
         )
58
         )
55
       )
59
       )
56
     }
60
     }

Loading…
Cancel
Save