improves touch events when drawing

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>
   )
 }

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)},
+    rotate(${shape.rotation * (180 / Math.PI)},
-  ${getShapeUtils(shape).getCenter(shape)})
+    ${getShapeUtils(shape).getCenter(shape)})
-  translate(${shape.point})`
+    translate(${shape.point})
+  `
 
   return (
     <Indicator

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 },
+          })
         )
       )
     }