Fix undo/redo on deleted handles

packages/tldraw/src/state/command/delete/delete.command.spec.ts

@@ -56,6 +56,20 @@ describe('Delete command', () => {
     expect(tlstate.getShape('rect2')).toBe(undefined)
   })
 
+  it('deletes bound shapes, undoes and redoes', () => {
+    const tlstate = new TLDrawState()
+      .createShapes(
+        { type: TLDrawShapeType.Rectangle, id: 'target1', point: [0, 0], size: [100, 100] },
+        { type: TLDrawShapeType.Arrow, id: 'arrow1', point: [200, 200] }
+      )
+      .select('arrow1')
+      .startHandleSession([200, 200], 'start')
+      .updateHandleSession([50, 50])
+      .completeSession()
+      .delete()
+      .undo()
+  })
+
   it('deletes bound shapes', () => {
     expect(Object.values(tlstate.page.bindings)[0]).toBe(undefined)
 

packages/tldraw/src/state/command/utils/removeShapesFromPage.ts

@@ -1,5 +1,5 @@
 import { TLDR } from '~state/tldr'
-import type { Data, GroupShape, PagePartial } from '~types'
+import type { ArrowShape, Data, GroupShape, PagePartial } from '~types'
 
 export function removeShapesFromPage(data: Data, ids: string[], pageId: string) {
   const before: PagePartial = {
@@ -75,7 +75,10 @@ export function removeShapesFromPage(data: Data, ids: string[], pageId: string)
                   ...before.shapes[id],
                   handles: {
                     ...before.shapes[id]?.handles,
-                    [handle.id]: { bindingId: binding.id },
+                    [handle.id]: {
+                      ...before.shapes[id]?.handles?.[handle.id as keyof ArrowShape['handles']],
+                      bindingId: binding.id,
+                    },
                   },
                 }
 
@@ -86,7 +89,10 @@ export function removeShapesFromPage(data: Data, ids: string[], pageId: string)
                     ...after.shapes[id],
                     handles: {
                       ...after.shapes[id]?.handles,
-                      [handle.id]: { bindingId: undefined },
+                      [handle.id]: {
+                        ...after.shapes[id]?.handles?.[handle.id as keyof ArrowShape['handles']],
+                        bindingId: undefined,
+                      },
                     },
                   }
                 }

packages/tldraw/src/state/tlstate.ts

@@ -244,26 +244,38 @@ export class TLDrawState extends StateManager<Data> {
           bindingsToUpdate.forEach((binding) => {
             const toShape = page.shapes[binding.toId]
             const fromShape = page.shapes[binding.fromId]
+
             const toUtils = TLDR.getShapeUtils(toShape)
 
             // We only need to update the binding's "from" shape
             const util = TLDR.getShapeUtils(fromShape)
 
-            const fromDelta = util.onBindingChange(
+            try {
-              fromShape,
+              const fromDelta = util.onBindingChange(
-              binding,
+                fromShape,
-              toShape,
+                binding,
-              toUtils.getBounds(toShape),
+                toShape,
-              toUtils.getCenter(toShape)
+                toUtils.getBounds(toShape),
-            )
+                toUtils.getCenter(toShape)
+              )
 
-            if (fromDelta) {
+              if (fromDelta) {
-              const nextShape = {
+                const nextShape = {
-                ...fromShape,
+                  ...fromShape,
-                ...fromDelta,
+                  ...fromDelta,
-              } as TLDrawShape
+                } as TLDrawShape
 
-              page.shapes[fromShape.id] = nextShape
+                page.shapes[fromShape.id] = nextShape
+              }
+            } catch (e) {
+              console.log(
+                fromShape,
+                binding,
+                toShape,
+                toUtils.getBounds(toShape),
+                toUtils.getCenter(toShape)
+              )
+              throw Error('something went wrong')
             }
           })