Fixes transforms on drawn shapes, adds straight line drawing with draw tool

components/canvas/canvas.tsx

@@ -14,9 +14,9 @@ import Selected from './selected'
 export default function Canvas() {
   const rCanvas = useRef<SVGSVGElement>(null)
   const rGroup = useRef<SVGGElement>(null)
-  const events = useZoomEvents(rCanvas)
 
   useCamera(rGroup)
+  useZoomEvents()
 
   const isReady = useSelector((s) => s.isIn('ready'))
 
@@ -48,7 +48,6 @@ export default function Canvas() {
   return (
     <MainSVG
       ref={rCanvas}
-      {...events}
       onPointerDown={handlePointerDown}
       onPointerMove={handlePointerMove}
       onPointerUp={handlePointerUp}

hooks/useZoomEvents.ts

@@ -9,13 +9,11 @@ import { useGesture } from 'react-use-gesture'
  * @param ref
  * @returns
  */
-export default function useZoomEvents(
-  ref: React.MutableRefObject<SVGSVGElement>
-) {
+export default function useZoomEvents() {
   const rPinchDa = useRef<number[] | undefined>(undefined)
   const rPinchPoint = useRef<number[] | undefined>(undefined)
 
-  const bind = useGesture(
+  useGesture(
     {
       onWheel: ({ event, delta }) => {
         if (event.ctrlKey) {
@@ -63,6 +61,4 @@ export default function useZoomEvents(
       eventOptions: { passive: false },
     }
   )
-
-  return { ...bind() }
 }

lib/shape-utils/draw.tsx

@@ -53,7 +53,7 @@ const draw = registerShapeUtils<DrawShape>({
             size: +style.strokeWidth * 2,
             thinning: 0.9,
             end: { taper: 100 },
-            start: { taper: 100 },
+            start: { taper: 40 },
           })
         )
       )

state/sessions/draw-session.ts

@@ -2,34 +2,81 @@ import { current } from 'immer'
 import { Data, DrawShape } from 'types'
 import BaseSession from './base-session'
 import { getShapeUtils } from 'lib/shape-utils'
-import { getPage, simplify } from 'utils/utils'
+import { getPage } from 'utils/utils'
 import * as vec from 'utils/vec'
 import commands from 'state/commands'
 
+let prevEndPoint: number[]
+
 export default class BrushSession extends BaseSession {
   origin: number[]
   previous: number[]
   points: number[][]
   snapshot: DrawSnapshot
+  isLocked: boolean
+  lockedDirection: 'horizontal' | 'vertical'
 
-  constructor(data: Data, id: string, point: number[]) {
+  constructor(data: Data, id: string, point: number[], isLocked = false) {
     super(data)
     this.origin = point
     this.previous = point
     this.points = []
     this.snapshot = getDrawSnapshot(data, id)
 
+    // if (isLocked && prevEndPoint) {
+    //   const continuedPt = vec.sub([...prevEndPoint], this.origin)
+    //   this.points.push(continuedPt)
+    // }
+
     const page = getPage(data)
     const shape = page.shapes[id]
     getShapeUtils(shape).translateTo(shape, point)
   }
 
-  update = (data: Data, point: number[]) => {
+  update = (data: Data, point: number[], isLocked = false) => {
     const { snapshot } = this
 
-    const lp = vec.med(this.previous, vec.toPrecision(point))
-    this.points.push(vec.sub(lp, this.origin))
-    this.previous = lp
+    const delta = vec.vec(this.origin, point)
+
+    if (isLocked) {
+      if (!this.isLocked && this.points.length > 1) {
+        this.isLocked = true
+        const returning = [...this.previous]
+
+        if (Math.abs(delta[0]) < Math.abs(delta[1])) {
+          this.lockedDirection = 'vertical'
+          returning[0] = this.origin[0]
+        } else {
+          this.lockedDirection = 'horizontal'
+          returning[1] = this.origin[1]
+        }
+
+        this.previous = returning
+        this.points.push(vec.sub(returning, this.origin))
+      }
+    } else {
+      if (this.isLocked) {
+        this.isLocked = false
+      }
+    }
+
+    if (this.isLocked) {
+      if (this.lockedDirection === 'vertical') {
+        point[0] = this.origin[0]
+      } else {
+        point[1] = this.origin[1]
+      }
+    }
+
+    if (this.previous) {
+      point = vec.med(this.previous, point)
+    }
+
+    prevEndPoint = [...point]
+    const next = vec.sub(point, this.origin)
+
+    this.points.push(next)
+    this.previous = point
 
     const page = getPage(data)
     const shape = page.shapes[snapshot.id] as DrawShape

state/sessions/translate-session.ts

@@ -13,7 +13,7 @@ export default class TranslateSession extends BaseSession {
   snapshot: TranslateSnapshot
   isCloning = false
 
-  constructor(data: Data, point: number[], isCloning = false) {
+  constructor(data: Data, point: number[]) {
     super(data)
     this.origin = point
     this.snapshot = getTranslateSnapshot(data)

state/state.ts

@@ -335,6 +335,8 @@ const state = createState({
                       do: 'breakSession',
                       to: 'selecting',
                     },
+                    PRESSED_SHIFT: 'keyUpdateDrawSession',
+                    RELEASED_SHIFT: 'keyUpdateDrawSession',
                     MOVED_POINTER: 'updateDrawSession',
                     PANNED_CAMERA: 'updateDrawSession',
                   },
@@ -721,11 +723,10 @@ const state = createState({
     },
 
     // Dragging / Translating
-    startTranslateSession(data, payload: PointerInfo) {
+    startTranslateSession(data) {
       session = new Sessions.TranslateSession(
         data,
-        screenToWorld(inputs.pointer.origin, data),
-        payload.altKey
+        screenToWorld(inputs.pointer.origin, data)
       )
     },
     keyUpdateTranslateSession(
@@ -796,16 +797,24 @@ const state = createState({
     },
 
     // Drawing
-    startDrawSession(data) {
+    startDrawSession(data, payload: PointerInfo) {
       const id = Array.from(data.selectedIds.values())[0]
       session = new Sessions.DrawSession(
         data,
         id,
-        screenToWorld(inputs.pointer.origin, data)
+        screenToWorld(inputs.pointer.origin, data),
+        payload.shiftKey
+      )
+    },
+    keyUpdateDrawSession(data, payload: PointerInfo) {
+      session.update(
+        data,
+        screenToWorld(inputs.pointer.point, data),
+        payload.shiftKey
       )
     },
     updateDrawSession(data, payload: PointerInfo) {
-      session.update(data, screenToWorld(payload.point, data))
+      session.update(data, screenToWorld(payload.point, data), payload.shiftKey)
     },
 
     // Nudges

utils/utils.ts

@@ -1006,8 +1006,8 @@ export function getBoundsFromPoints(points: number[][], rotation = 0): Bounds {
     minY,
     maxX,
     maxY,
-    width: maxX - minX,
-    height: maxY - minY,
+    width: Math.max(1, maxX - minX),
+    height: Math.max(1, maxY - minY),
   }
 }