From 2af0d7b3a7524a8eb3bfd03b7b1258ff417e322c Mon Sep 17 00:00:00 2001
From: Steve Ruiz <steveruizok@gmail.com>
Date: Sun, 30 May 2021 14:20:25 +0100
Subject: [PATCH] improves touch events when drawing

---
 components/canvas/page.tsx     |  4 ++--
 components/canvas/selected.tsx |  7 ++++---
 lib/shape-utils/draw.tsx       | 10 +++++++---
 3 files changed, 13 insertions(+), 8 deletions(-)

diff --git a/components/canvas/page.tsx b/components/canvas/page.tsx
index c0cf1f2e8..ed0ab79fa 100644
--- a/components/canvas/page.tsx
+++ b/components/canvas/page.tsx
@@ -18,10 +18,10 @@ export default function Page() {
   const isSelecting = useSelector((s) => s.isIn('selecting'))
 
   return (
-    <>
+    <g pointerEvents={isSelecting ? 'all' : 'none'}>
       {currentPageShapeIds.map((shapeId) => (
         <Shape key={shapeId} id={shapeId} isSelecting={isSelecting} />
       ))}
-    </>
+    </g>
   )
 }
diff --git a/components/canvas/selected.tsx b/components/canvas/selected.tsx
index 319223594..ba7251583 100644
--- a/components/canvas/selected.tsx
+++ b/components/canvas/selected.tsx
@@ -33,9 +33,10 @@ export function ShapeOutline({ id }: { id: string }) {
   if (!shape) return null
 
   const transform = `
-  rotate(${shape.rotation * (180 / Math.PI)},
-  ${getShapeUtils(shape).getCenter(shape)})
-  translate(${shape.point})`
+    rotate(${shape.rotation * (180 / Math.PI)},
+    ${getShapeUtils(shape).getCenter(shape)})
+    translate(${shape.point})
+  `
 
   return (
     <Indicator
diff --git a/lib/shape-utils/draw.tsx b/lib/shape-utils/draw.tsx
index 243369a9b..46361f48f 100644
--- a/lib/shape-utils/draw.tsx
+++ b/lib/shape-utils/draw.tsx
@@ -8,7 +8,6 @@ import getStroke from 'perfect-freehand'
 import {
   getBoundsCenter,
   getBoundsFromPoints,
-  getRotatedCorners,
   getSvgPathFromStroke,
   translateBounds,
 } from 'utils/utils'
@@ -27,7 +26,7 @@ const draw = registerShapeUtils<DrawShape>({
       parentId: 'page0',
       childIndex: 0,
       point: [0, 0],
-      points: [[0, 0]],
+      points: [],
       rotation: 0,
       isAspectRatioLocked: false,
       isLocked: false,
@@ -50,7 +49,12 @@ const draw = registerShapeUtils<DrawShape>({
       pathCache.set(
         points,
         getSvgPathFromStroke(
-          getStroke(points, { size: +style.strokeWidth * 2, thinning: 0.9 })
+          getStroke(points, {
+            size: +style.strokeWidth * 2,
+            thinning: 0.9,
+            end: { taper: 100 },
+            start: { taper: 100 },
+          })
         )
       )
     }