Update command ids, add undo/redo stack

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

@@ -3,3 +3,66 @@
 exports[` 1`] = `"[]"`;
 
 exports[` 2`] = `undefined`;
+
+exports[`TLDrawState Exposes undo/redo stack: history 1`] = `
+Array [
+  Object {
+    "after": Object {
+      "document": Object {
+        "pageStates": Object {
+          "page1": Object {
+            "selectedIds": Array [
+              "rect1",
+            ],
+          },
+        },
+        "pages": Object {
+          "page1": Object {
+            "shapes": Object {
+              "rect1": Object {
+                "childIndex": 1,
+                "id": "rect1",
+                "name": "Rectangle",
+                "parentId": "page1",
+                "point": Array [
+                  0,
+                  0,
+                ],
+                "rotation": 0,
+                "size": Array [
+                  100,
+                  200,
+                ],
+                "style": Object {
+                  "color": "Black",
+                  "dash": "Draw",
+                  "isFilled": false,
+                  "size": "Medium",
+                },
+                "type": "rectangle",
+              },
+            },
+          },
+        },
+      },
+    },
+    "before": Object {
+      "document": Object {
+        "pageStates": Object {
+          "page1": Object {
+            "selectedIds": Array [],
+          },
+        },
+        "pages": Object {
+          "page1": Object {
+            "shapes": Object {
+              "rect1": undefined,
+            },
+          },
+        },
+      },
+    },
+    "id": "create",
+  },
+]
+`;

packages/tldraw/src/state/command/align/align.command.ts

@@ -50,7 +50,7 @@ export function align(data: Data, ids: string[], type: AlignType): TLDrawCommand
   )
 
   return {
-    id: 'align_shapes',
+    id: 'align',
     before: {
       document: {
         pages: {

packages/tldraw/src/state/command/create/create.command.ts

@@ -14,7 +14,7 @@ export function create(data: Data, shapes: TLDrawShape[]): TLDrawCommand {
   })
 
   return {
-    id: 'toggle_shapes',
+    id: 'create',
     before: {
       document: {
         pages: {

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

@@ -12,7 +12,7 @@ export function deleteShapes(
   const { before, after } = removeShapesFromPage(data, ids, pageId)
 
   return {
-    id: 'delete_shapes',
+    id: 'delete',
     before: {
       document: {
         pages: {

packages/tldraw/src/state/command/distribute/distribute.command.ts

@@ -18,7 +18,7 @@ export function distribute(data: Data, ids: string[], type: DistributeType): TLD
   )
 
   return {
-    id: 'distribute_shapes',
+    id: 'distribute',
     before: {
       document: {
         pages: {

packages/tldraw/src/state/command/flip/flip.command.ts

@@ -58,7 +58,7 @@ export function flip(data: Data, ids: string[], type: FlipType): TLDrawCommand {
   )
 
   return {
-    id: 'flip_shapes',
+    id: 'flip',
     before: {
       document: {
         pages: {

packages/tldraw/src/state/command/group/group.command.ts

@@ -188,7 +188,7 @@ export function group(
   })
 
   return {
-    id: 'group_shapes',
+    id: 'group',
     before: {
       document: {
         pages: {

packages/tldraw/src/state/command/move/move.command.ts

@@ -217,7 +217,7 @@ export function move(data: Data, ids: string[], type: MoveType): TLDrawCommand {
   })
 
   return {
-    id: 'move_shapes',
+    id: 'move',
     before: {
       document: {
         pages: {

packages/tldraw/src/state/command/rotate/rotate.command.ts

@@ -44,7 +44,7 @@ export function rotate(data: Data, ids: string[], delta = -PI2 / 4): TLDrawComma
   )
 
   return {
-    id: 'toggle_shapes',
+    id: 'rotate',
     before: {
       document: {
         pages: {

packages/tldraw/src/state/command/stretch/stretch.command.ts

@@ -57,7 +57,7 @@ export function stretch(data: Data, ids: string[], type: StretchType): TLDrawCom
   )
 
   return {
-    id: 'stretch_shapes',
+    id: 'stretch',
     before: {
       document: {
         pages: {

packages/tldraw/src/state/command/style/style.command.ts

@@ -14,7 +14,7 @@ export function style(data: Data, ids: string[], changes: Partial<ShapeStyles>):
   )
 
   return {
-    id: 'style_shapes',
+    id: 'style',
     before: {
       document: {
         pages: {

packages/tldraw/src/state/command/toggle/toggle.command.ts

@@ -16,7 +16,7 @@ export function toggle(data: Data, ids: string[], prop: keyof TLDrawShape): TLDr
   )
 
   return {
-    id: 'toggle_shapes',
+    id: 'toggle',
     before: {
       document: {
         pages: {

packages/tldraw/src/state/command/translate/translate.command.ts

@@ -63,7 +63,7 @@ export function translate(data: Data, ids: string[], delta: number[]): TLDrawCom
   })
 
   return {
-    id: 'translate_shapes',
+    id: 'translate',
     before: {
       document: {
         pages: {

packages/tldraw/src/state/command/ungroup/ungroup.command.ts

@@ -99,7 +99,7 @@ export function ungroup(data: Data, groupId: string, pageId: string): TLDrawComm
     })
 
   return {
-    id: 'ungroup_shapes',
+    id: 'ungroup',
     before: {
       document: {
         pages: {

packages/tldraw/src/state/command/update/update.command.ts

@@ -28,7 +28,7 @@ export function update(
   after.shapes = change.after
 
   return {
-    id: 'translate_shapes',
+    id: 'update',
     before: {
       document: {
         pages: {

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

@@ -359,4 +359,16 @@ describe('TLDrawState', () => {
       expect(tlstate.getShape('rect5').childIndex).toBe(3)
     })
   })
+
+  it('Exposes undo/redo stack', () => {
+    const tlstate = new TLDrawState().loadDocument(mockDocument).createShapes({
+      id: 'rect1',
+      type: TLDrawShapeType.Rectangle,
+      point: [0, 0],
+      size: [100, 200],
+    })
+
+    expect(tlstate.history).toBeDefined()
+    expect(tlstate.history).toMatchSnapshot('history')
+  })
 })

packages/tldraw/src/state/tlstate.ts

@@ -646,6 +646,13 @@ export class TLDrawState extends StateManager<Data> {
     return Vec.sub(Vec.div(point, camera.zoom), camera.point)
   }
 
+  /**
+   * Get the current undo/redo stack.
+   */
+  get history() {
+    return this.stack
+  }
+
   /**
    * The current document.
    */