[feature] hold alt to grow arrow from center (#635)

* Add alt-drag line/arrow handles

* add test

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

@@ -395,3 +395,44 @@ describe('When creating arrows inside of other shapes...', () => {
     expect(app.shapes.length).toBe(2)
   })
 })
+
+describe('When holding alt and dragging a handle', () => {
+  it('Applies a delta to both handles', () => {
+    const app = new TldrawTestApp()
+      .selectAll()
+      .delete()
+      .createShapes({ type: TDShapeType.Arrow, id: 'arrow1', point: [0, 0] })
+      .select('arrow1')
+      .movePointer([0, 0])
+      .startSession(SessionType.Arrow, 'arrow1', 'start')
+      .movePointer([-10, -10])
+
+    // Without alt...
+    expect(app.getShape('arrow1')).toMatchObject({
+      point: [-10, -10],
+      handles: {
+        start: {
+          point: [0, 0],
+        },
+        end: {
+          point: [11, 11],
+        },
+      },
+    })
+
+    // With alt...
+    app.movePointer({ x: -10, y: -10, altKey: true })
+
+    expect(app.getShape('arrow1')).toMatchObject({
+      point: [-10, -10],
+      handles: {
+        start: {
+          point: [0, 0],
+        },
+        end: {
+          point: [21, 21], // delta is applied to both handles
+        },
+      },
+    })
+  })
+})

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

@@ -34,25 +34,34 @@ export class ArrowSession extends BaseSession {
 
   constructor(app: TldrawApp, shapeId: string, handleId: 'start' | 'end', isCreate = false) {
     super(app)
+
     this.isCreate = isCreate
+
     const { currentPageId } = app.state.appState
+
     const page = app.state.document.pages[currentPageId]
+
     this.handleId = handleId
+
     this.initialShape = deepCopy(page.shapes[shapeId] as ArrowShape)
 
     this.bindableShapeIds = TLDR.getBindableShapeIds(app.state).filter(
       (id) => !(id === this.initialShape.id || id === this.initialShape.parentId)
     )
+
     // TODO: find out why this the oppositeHandleBindingId is sometimes missing
     const oppositeHandleBindingId =
       this.initialShape.handles[handleId === 'start' ? 'end' : 'start']?.bindingId
+
     if (oppositeHandleBindingId) {
       const oppositeToId = page.bindings[oppositeHandleBindingId]?.toId
       if (oppositeToId) {
         this.bindableShapeIds = this.bindableShapeIds.filter((id) => id !== oppositeToId)
       }
     }
+
     const { originPoint } = this.app
+
     if (this.isCreate) {
       // If we're creating a new shape, should we bind its first point?
       // The method may return undefined, which is correct if there is no
@@ -66,6 +75,7 @@ export class ArrowSession extends BaseSession {
           // TODO - We should be smarter here, what's the right logic?
           return b.childIndex - a.childIndex
         })[0]?.id
+
       if (this.startBindingShapeId) {
         this.bindableShapeIds.splice(this.bindableShapeIds.indexOf(this.startBindingShapeId), 1)
       }
@@ -73,6 +83,7 @@ export class ArrowSession extends BaseSession {
       // If we're editing an existing line, is there a binding already
       // for the dragging handle?
       const initialBindingId = this.initialShape.handles[this.handleId].bindingId
+
       if (initialBindingId) {
         this.initialBinding = page.bindings[initialBindingId]
       } else {
@@ -94,35 +105,65 @@ export class ArrowSession extends BaseSession {
       currentGrid,
       settings: { showGrid },
     } = this.app
+
     const shape = this.app.getShape<ArrowShape>(initialShape.id)
+
     if (shape.isLocked) return
-    const handles = shape.handles
+
+    const { handles } = initialShape
+
     const handleId = this.handleId as keyof typeof handles
     // If the handle can bind, then we need to search bindable shapes for
     // a binding.
     if (!handles[handleId].canBind) return
-    // First update the handle's next point
+
-    let delta = Vec.sub(currentPoint, handles[handleId].point)
+    // Find the delta (in shape space)
+    let delta = Vec.sub(currentPoint, Vec.add(handles[handleId].point, initialShape.point))
+
     if (shiftKey) {
-      const A = handles[handleId === 'start' ? 'end' : 'start'].point
+      const A = altKey
+        ? Vec.med(handles.start.point, handles.end.point)
+        : handles[handleId === 'start' ? 'end' : 'start'].point
       const B = handles[handleId].point
-      const C = Vec.toFixed(Vec.sub(Vec.add(B, delta), shape.point))
+      const C = Vec.add(B, delta)
+
       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 nextPoint = Vec.sub(Vec.add(handles[handleId].point, delta), shape.point)
+
-    const draggedHandle = {
+    const nextPoint = Vec.add(handles[handleId].point, delta)
+
+    const handleChanges = {
+      [handleId]: {
         ...handles[handleId],
         point: showGrid ? Vec.snap(nextPoint, currentGrid) : Vec.toFixed(nextPoint),
         bindingId: undefined,
+      },
     }
+
+    if (altKey) {
+      // If the user is holding alt key, apply the inverse delta
+      // to the oppoosite handle.
+      const oppositeHandleId = handleId === 'start' ? 'end' : 'start'
+
+      const nextPoint = Vec.sub(handles[oppositeHandleId].point, delta)
+
+      handleChanges[oppositeHandleId] = {
+        ...handles[oppositeHandleId],
+        point: showGrid ? Vec.snap(nextPoint, currentGrid) : Vec.toFixed(nextPoint),
+        bindingId: undefined,
+      }
+    }
+
     const utils = shapeUtils[TDShapeType.Arrow]
-    const handleChange = utils.onHandleChange?.(shape, {
+    const handleChange = utils.onHandleChange?.(initialShape, handleChanges)
-      [handleId]: draggedHandle,
+
-    })
     // If the handle changed produced no change, bail here
     if (!handleChange) return
+
     // If nothing changes, we want these to be the same object reference as
     // before. If it does change, we'll redefine this later on. And if we've
     // made it this far, the shape should be a new object reference that
@@ -131,8 +172,11 @@ export class ArrowSession extends BaseSession {
       shape: Utils.deepMerge(shape, handleChange),
       bindings: {},
     }
+
     let draggedBinding: ArrowBinding | undefined
+
     const draggingHandle = next.shape.handles[this.handleId]
+
     const oppositeHandle = next.shape.handles[this.handleId === 'start' ? 'end' : 'start']
 
     // START BINDING
@@ -140,17 +184,29 @@ export class ArrowSession extends BaseSession {
     // point based on the current end handle position
     if (this.startBindingShapeId) {
       let nextStartBinding: ArrowBinding | undefined
+
       const startTarget = this.app.page.shapes[this.startBindingShapeId]
+
       const startTargetUtils = TLDR.getShapeUtil(startTarget)
+
       const center = startTargetUtils.getCenter(startTarget)
+
       const startHandle = next.shape.handles.start
+
       const endHandle = next.shape.handles.end
+
       const rayPoint = Vec.add(startHandle.point, next.shape.point)
+
       if (Vec.isEqual(rayPoint, center)) rayPoint[1]++ // Fix bug where ray and center are identical
+
       const rayOrigin = center
+
       const isInsideShape = startTargetUtils.hitTestPoint(startTarget, currentPoint)
+
       const rayDirection = Vec.uni(Vec.sub(rayPoint, rayOrigin))
+
       const hasStartBinding = this.app.getBinding(this.newStartBindingId) !== undefined
+
       // Don't bind the start handle if both handles are inside of the target shape.
       if (
         !metaKey &&
@@ -167,10 +223,13 @@ export class ArrowSession extends BaseSession {
           isInsideShape
         )
       }
+
       if (nextStartBinding && !hasStartBinding) {
         // Bind the arrow's start handle to the start target
         this.didBind = true
+
         next.bindings[this.newStartBindingId] = nextStartBinding
+
         next.shape = Utils.deepMerge(next.shape, {
           handles: {
             start: {
@@ -181,7 +240,9 @@ export class ArrowSession extends BaseSession {
       } else if (!nextStartBinding && hasStartBinding) {
         // Remove the start binding
         this.didBind = false
+
         next.bindings[this.newStartBindingId] = undefined
+
         next.shape = Utils.deepMerge(initialShape, {
           handles: {
             start: {
@@ -195,10 +256,15 @@ export class ArrowSession extends BaseSession {
     // DRAGGED POINT BINDING
     if (!metaKey) {
       const rayOrigin = Vec.add(oppositeHandle.point, next.shape.point)
+
       const rayPoint = Vec.add(draggingHandle.point, next.shape.point)
+
       const rayDirection = Vec.uni(Vec.sub(rayPoint, rayOrigin))
+
       const startPoint = Vec.add(next.shape.point!, next.shape.handles!.start.point!)
+
       const endPoint = Vec.add(next.shape.point!, next.shape.handles!.end.point!)
+
       const targets = this.bindableShapeIds
         .map((id) => this.app.page.shapes[id])
         .sort((a, b) => b.childIndex - a.childIndex)
@@ -206,6 +272,7 @@ export class ArrowSession extends BaseSession {
           const utils = TLDR.getShapeUtil(shape)
           return ![startPoint, endPoint].every((point) => utils.hitTestPoint(shape, point))
         })
+
       for (const target of targets) {
         draggedBinding = this.findBindingPoint(
           shape,
@@ -217,13 +284,16 @@ export class ArrowSession extends BaseSession {
           rayDirection,
           altKey
         )
+
         if (draggedBinding) break
       }
     }
     if (draggedBinding) {
       // Create the dragged point binding
       this.didBind = true
+
       next.bindings[this.draggedBindingId] = draggedBinding
+
       next.shape = Utils.deepMerge(next.shape, {
         handles: {
           [this.handleId]: {
@@ -234,9 +304,12 @@ export class ArrowSession extends BaseSession {
     } else {
       // Remove the dragging point binding
       this.didBind = this.didBind || false
+
       const currentBindingId = shape.handles[this.handleId].bindingId
+
       if (currentBindingId !== undefined) {
         next.bindings[currentBindingId] = undefined
+
         next.shape = Utils.deepMerge(next.shape, {
           handles: {
             [this.handleId]: {
@@ -316,20 +389,29 @@ export class ArrowSession extends BaseSession {
 
   complete = (): TldrawPatch | TldrawCommand | undefined => {
     const { initialShape, initialBinding, newStartBindingId, startBindingShapeId, handleId } = this
+
     const currentShape = TLDR.onSessionComplete(this.app.page.shapes[initialShape.id]) as ArrowShape
+
     const currentBindingId = currentShape.handles[handleId].bindingId
+
     const length = Vec.dist(currentShape.handles.start.point, currentShape.handles.end.point)
+
     if (!(currentBindingId || initialBinding) && length < 4) return this.cancel()
+
     const beforeBindings: Partial<Record<string, TDBinding>> = {}
+
     const afterBindings: Partial<Record<string, TDBinding>> = {}
+
     if (initialBinding) {
       beforeBindings[initialBinding.id] = this.isCreate ? undefined : initialBinding
       afterBindings[initialBinding.id] = undefined
     }
+
     if (currentBindingId) {
       beforeBindings[currentBindingId] = undefined
       afterBindings[currentBindingId] = this.app.page.bindings[currentBindingId]
     }
+
     if (startBindingShapeId) {
       beforeBindings[newStartBindingId] = undefined
       afterBindings[newStartBindingId] = this.app.page.bindings[newStartBindingId]

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

@@ -3,7 +3,6 @@ import { SessionType, ShapesWithProp, TldrawCommand, TldrawPatch, TDStatus } fro
 import { TLDR } from '~state/TLDR'
 import { BaseSession } from '../BaseSession'
 import type { TldrawApp } from '../../internal'
-import { TLPerformanceMode } from '@tldraw/core'
 
 export class HandleSession extends BaseSession {
   type = SessionType.Handle
@@ -29,7 +28,7 @@ export class HandleSession extends BaseSession {
   update = (): TldrawPatch | undefined => {
     const {
       initialShape,
-      app: { currentPageId, currentPoint, shiftKey, altKey, metaKey },
+      app: { currentPageId, currentPoint },
     } = this
 
     const shape = this.app.getShape<ShapesWithProp<'handles'>>(initialShape.id)
@@ -42,15 +41,15 @@ export class HandleSession extends BaseSession {
 
     const delta = Vec.sub(currentPoint, handles[handleId].point)
 
-    const handle = {
+    const handleChanges = {
+      [handleId]: {
         ...handles[handleId],
         point: Vec.sub(Vec.add(handles[handleId].point, delta), shape.point),
+      },
     }
 
     // First update the handle's next point
-    const change = TLDR.getShapeUtil(shape).onHandleChange?.(shape, {
+    const change = TLDR.getShapeUtil(shape).onHandleChange?.(shape, handleChanges)
-      [handleId]: handle,
-    })
 
     if (!change) return
 

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

@@ -405,6 +405,7 @@ export class ArrowUtil extends TDShapeUtil<T, E> {
   onHandleChange = (shape: T, handles: Partial<T['handles']>): Partial<T> | void => {
     let nextHandles = Utils.deepMerge<ArrowShape['handles']>(shape.handles, handles)
     let nextBend = shape.bend
+
     nextHandles = Utils.deepMerge(nextHandles, {
       start: {
         point: Vec.toFixed(nextHandles.start.point),
@@ -413,31 +414,43 @@ export class ArrowUtil extends TDShapeUtil<T, E> {
         point: Vec.toFixed(nextHandles.end.point),
       },
     })
+
     // This will produce NaN values
     if (Vec.isEqual(nextHandles.start.point, nextHandles.end.point)) return
+
     // If the user is moving the bend handle, we want to move the bend point
     if ('bend' in handles) {
       const { start, end, bend } = nextHandles
+
       const distance = Vec.dist(start.point, end.point)
       const midPoint = Vec.med(start.point, end.point)
       const angle = Vec.angle(start.point, end.point)
       const u = Vec.uni(Vec.vec(start.point, end.point))
+
       // Create a line segment perendicular to the line between the start and end points
-      const ap = Vec.add(midPoint, Vec.mul(Vec.per(u), distance / 2))
+      const ap = Vec.add(midPoint, Vec.mul(Vec.per(u), distance))
-      const bp = Vec.sub(midPoint, Vec.mul(Vec.per(u), distance / 2))
+      const bp = Vec.sub(midPoint, Vec.mul(Vec.per(u), distance))
+
       const bendPoint = Vec.nearestPointOnLineSegment(ap, bp, bend.point, true)
+
       // Find the distance between the midpoint and the nearest point on the
       // line segment to the bend handle's dragged point
       const bendDist = Vec.dist(midPoint, bendPoint)
+
       // The shape's "bend" is the ratio of the bend to the distance between
       // the start and end points. If the bend is below a certain amount, the
       // bend should be zero.
-      nextBend = Utils.clamp(bendDist / (distance / 2), -0.99, 0.99)
+      const realBend = bendDist / (distance / 2)
+
+      nextBend = Utils.clamp(realBend, -0.99, 0.99)
+
       // If the point is to the left of the line segment, we make the bend
       // negative, otherwise it's positive.
       const angleToBend = Vec.angle(start.point, bendPoint)
+
       // If resulting bend is low enough that the handle will snap to center,
       // then also snap the bend to center
+
       if (Vec.isEqual(midPoint, getBendPoint(nextHandles, nextBend))) {
         nextBend = 0
       } else if (isAngleBetween(angle, angle + Math.PI, angleToBend)) {
@@ -445,6 +458,7 @@ export class ArrowUtil extends TDShapeUtil<T, E> {
         nextBend *= -1
       }
     }
+
     const nextShape = {
       point: shape.point,
       bend: nextBend,
@@ -456,20 +470,22 @@ export class ArrowUtil extends TDShapeUtil<T, E> {
         },
       },
     }
+
     // Zero out the handles to prevent handles with negative points. If a handle's x or y
     // is below zero, we need to move the shape left or up to make it zero.
     const topLeft = shape.point
+
     const nextBounds = this.getBounds({ ...nextShape } as ArrowShape)
+
     const offset = Vec.sub([nextBounds.minX, nextBounds.minY], topLeft)
+
     if (!Vec.isEqual(offset, [0, 0])) {
       Object.values(nextShape.handles).forEach((handle) => {
         handle.point = Vec.toFixed(Vec.sub(handle.point, offset))
       })
       nextShape.point = Vec.toFixed(Vec.add(nextShape.point, offset))
-      if (Vec.isEqual(nextShape.point, [0, 0])) {
-        throw Error('here!')
-      }
     }
+
     return nextShape
   }
 }