Fix bug with mutating bound shapes

packages/tldraw/src/state/__snapshots__/tlstate.spec.ts.snap

@@ -0,0 +1,5 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[` 1`] = `"[]"`;
+
+exports[` 2`] = `undefined`;

packages/tldraw/src/state/tldr.ts

@@ -348,7 +348,7 @@ export class TLDR {
     return Object.values(page.bindings)
       .filter((binding) => binding.fromId === id || binding.toId === id)
       .reduce((cData, binding) => {
-        if (!beforeShapes[binding.id]) {
+        if (!beforeShapes[binding.fromId]) {
           beforeShapes[binding.fromId] = Utils.deepClone(
             this.getShape(cData, binding.fromId, pageId)
           )
@@ -422,7 +422,7 @@ export class TLDR {
       const shape = this.getShape<T>(data, id, pageId)
       const change = fn(shape, i)
       beforeShapes[id] = Object.fromEntries(
-        Object.keys(change).map((key) => [key, shape[key as keyof T]])
+        Object.keys(change).map((key) => [key, { ...shape[key as keyof T] }])
       ) as Partial<T>
       afterShapes[id] = change
     })

packages/tldraw/src/state/tlstate.spec.ts

@@ -1,5 +1,6 @@
 import { TLDrawState } from './tlstate'
 import { mockDocument, TLStateUtils } from '~test'
+import { ColorStyle, TLDrawShapeType } from '~types'
 
 describe('TLDrawState', () => {
   const tlstate = new TLDrawState()
@@ -229,11 +230,51 @@ describe('TLDrawState', () => {
 
   describe('Copies to JSON', () => {
     tlstate.selectAll()
-    tlstate.copyJson()
+    expect(tlstate.copyJson()).toMatchSnapshot('copied json')
   })
 
   describe('Copies to SVG', () => {
     tlstate.selectAll()
-    tlstate.copySvg()
+    expect(tlstate.copySvg()).toMatchSnapshot('copied svg')
+  })
+
+  describe('Mutates bound shapes', () => {
+    const tlstate = new TLDrawState()
+
+    tlstate
+      .createShapes(
+        {
+          id: 'rect',
+          point: [0, 0],
+          size: [100, 100],
+          childIndex: 1,
+          type: TLDrawShapeType.Rectangle,
+        },
+        {
+          id: 'arrow',
+          point: [200, 200],
+          childIndex: 2,
+          type: TLDrawShapeType.Arrow,
+        }
+      )
+      .select('arrow')
+      .startHandleSession([200, 200], 'start', 'arrow')
+      .updateHandleSession([10, 10])
+      .completeSession()
+      .selectAll()
+      .style({ color: ColorStyle.Red })
+
+    expect(tlstate.getShape('arrow').style.color).toBe(ColorStyle.Red)
+    expect(tlstate.getShape('rect').style.color).toBe(ColorStyle.Red)
+
+    tlstate.undo()
+
+    expect(tlstate.getShape('arrow').style.color).toBe(ColorStyle.Black)
+    expect(tlstate.getShape('rect').style.color).toBe(ColorStyle.Black)
+
+    tlstate.redo()
+
+    expect(tlstate.getShape('arrow').style.color).toBe(ColorStyle.Red)
+    expect(tlstate.getShape('rect').style.color).toBe(ColorStyle.Red)
   })
 })

packages/tldraw/src/state/tlstate.ts

@@ -1129,7 +1129,10 @@ export class TLDrawState extends StateManager<Data> {
     if (shapes.length === 0) return this
     return this.create(
       ...shapes.map((shape) => {
-        return TLDR.getShapeUtils(shape as TLDrawShape).create(shape)
+        return TLDR.getShapeUtils(shape as TLDrawShape).create({
+          ...shape,
+          parentId: shape.parentId || this.currentPageId,
+        })
       })
     )
   }