[feature] Shift drag arrow functionality (#319)

* Shift drag arrow functionality

* fix

* Remove shift effect in onHandleChange

Co-authored-by: Steve Ruiz <steveruizok@gmail.com>

packages/tldraw/src/hooks/useKeyboardShortcuts.tsx

@@ -172,8 +172,6 @@ export function useKeyboardShortcuts(ref: React.RefObject<HTMLDivElement>) {
     () => {
       if (!canHandleEvent()) return
 
-      console.log('Hello')
-
       if (app.session) {
         app.cancelSession()
       } else {

packages/tldraw/src/state/sessions/ArrowSession/ArrowSession.ts

@@ -85,8 +85,16 @@ export class ArrowSession extends BaseSession {
     if (!handles[handleId].canBind) return
 
     // First update the handle's next point
+    let delta = Vec.sub(currentPoint, handles[handleId].point)
 
-    const delta = Vec.sub(currentPoint, handles[handleId].point)
+    if (shiftKey) {
+      const A = handles[handleId === 'start' ? 'end' : 'start'].point
+      const B = handles[handleId].point
+      const C = Vec.round(Vec.sub(Vec.add(B, delta), shape.point))
+      const angle = Vec.angle(A, C)
+      const adjusted = Vec.rotWith(C, A, Utils.snapAngleToSegments(angle, 24) - angle)
+      delta = Vec.add(delta, Vec.sub(adjusted, C))
+    }
 
     const handle = {
       ...handles[handleId],
@@ -96,13 +104,9 @@ export class ArrowSession extends BaseSession {
 
     const utils = shapeUtils[TDShapeType.Arrow]
 
-    const change = utils.onHandleChange?.(
-      shape,
-      {
-        [handleId]: handle,
-      },
-      { delta, shiftKey, altKey, metaKey }
-    )
+    const change = utils.onHandleChange?.(shape, {
+      [handleId]: handle,
+    })
 
     // If the handle changed produced no change, bail here
     if (!change) return

packages/tldraw/src/state/shapes/ArrowUtil/ArrowUtil.tsx

@@ -511,45 +511,18 @@ export class ArrowUtil extends TDShapeUtil<T, E> {
       }
     }
 
-    return this.onHandleChange(
-      shape,
-      {
-        [handle.id]: {
-          ...handle,
-          point: Vec.round(handlePoint),
-        },
+    return this.onHandleChange(shape, {
+      [handle.id]: {
+        ...handle,
+        point: Vec.round(handlePoint),
       },
-      { shiftKey: false }
-    )
+    })
   }
 
-  onHandleChange = (
-    shape: T,
-    handles: Partial<T['handles']>,
-    { shiftKey }: Partial<TLPointerInfo>
-  ): Partial<T> | void => {
+  onHandleChange = (shape: T, handles: Partial<T['handles']>): Partial<T> | void => {
     let nextHandles = Utils.deepMerge<ArrowShape['handles']>(shape.handles, handles)
     let nextBend = shape.bend
 
-    // If the user is holding shift, we want to snap the handles to angles
-    Object.values(handles).forEach((handle) => {
-      if (!handle) return
-
-      if ((handle.id === 'start' || handle.id === 'end') && shiftKey) {
-        const point = handle.point
-
-        const other = handle.id === 'start' ? shape.handles.end : shape.handles.start
-
-        const angle = Vec.angle(other.point, point)
-
-        const distance = Vec.dist(other.point, point)
-
-        const newAngle = Utils.snapAngleToSegments(angle, 24)
-
-        handle.point = Vec.nudgeAtAngle(other.point, newAngle, distance)
-      }
-    })
-
     nextHandles = {
       ...nextHandles,
       start: {