Fix bug where handles are identical (#548)

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

@@ -123,7 +123,6 @@ export class ArrowSession extends BaseSession {
     })
     // 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
@@ -258,7 +257,7 @@ export class ArrowSession extends BaseSession {
         pages: {
           [this.app.currentPageId]: {
             shapes: {
-              [shape.id]: Utils.deepMerge(next.shape, change ?? {}),
+              [shape.id]: { ...next.shape, ...(change ?? {}) },
             },
             bindings: next.bindings,
           },

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

@@ -2,27 +2,14 @@ import * as React from 'react'
 import { Utils, TLBounds, SVGContainer } from '@tldraw/core'
 import { Vec } from '@tldraw/vec'
 import { defaultStyle } from '../shared/shape-styles'
-import {
+import { ArrowShape, TransformInfo, Decoration, TDShapeType, DashStyle, TDMeta } from '~types'
-  ArrowShape,
-  TransformInfo,
-  Decoration,
-  TDShapeType,
-  TDShape,
-  EllipseShape,
-  TDBinding,
-  DashStyle,
-  TDMeta,
-} from '~types'
 import { TDShapeUtil } from '../TDShapeUtil'
 import {
   intersectArcBounds,
   intersectLineSegmentBounds,
   intersectLineSegmentLineSegment,
-  intersectRayBounds,
-  intersectRayEllipse,
-  intersectRayLineSegment,
 } from '@tldraw/intersect'
-import { BINDING_DISTANCE, GHOSTED_OPACITY } from '~constants'
+import { GHOSTED_OPACITY } from '~constants'
 import {
   getArcLength,
   getArcPoints,
@@ -31,14 +18,12 @@ import {
   getCtp,
   isAngleBetween,
 } from './arrowHelpers'
-import { getTrianglePoints } from '../TriangleUtil/triangleHelpers'
 import { styled } from '~styles'
 import { TextLabel, getFontStyle, getShapeStyle } from '../shared'
 import { getTextLabelSize } from '../shared/getTextSize'
 import { StraightArrow } from './components/StraightArrow'
 import { CurvedArrow } from './components/CurvedArrow.tsx'
 import { LabelMask } from '../shared/LabelMask'
-import { TLDR } from '~state/TLDR'
 
 type T = ArrowShape
 type E = HTMLDivElement
@@ -417,17 +402,16 @@ 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 = {
+    nextHandles = Utils.deepMerge(nextHandles, {
-      ...nextHandles,
       start: {
-        ...nextHandles.start,
         point: Vec.toFixed(nextHandles.start.point),
       },
       end: {
-        ...nextHandles.end,
         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