fix: 🐛 lost remove batch event when cell was removed

The model will be null after cell removed, so we should temporary save the model to trigger
batch-event.

examples/x6-example-features/src/pages/dnd/index.tsx

@@ -1,18 +1,21 @@
 import React from 'react'
+import { Button } from 'antd'
 import { Graph, $ } from '@antv/x6'
 import { Dnd } from '@antv/x6/es/addon/dnd'
 import { Rect, Circle } from '@antv/x6/es/shape/standard'
 import '../index.less'
 
 export default class Example extends React.Component {
+  private graph: Graph
   private container: HTMLDivElement
   private stencilContainer: HTMLDivElement
 
   componentDidMount() {
-    const graph = new Graph({
+    const graph = (this.graph = new Graph({
       container: this.container,
       width: 800,
       height: 800,
+      history: true,
       snapline: {
         enabled: true,
         sharp: true,
@@ -28,7 +31,7 @@ export default class Example extends React.Component {
         pageBreak: false,
         pannable: true,
       },
-    })
+    }))
 
     graph.addNode({
       x: 130,
@@ -88,6 +91,17 @@ export default class Example extends React.Component {
         dnd.start(node, e)
       })
     })
+
+    // const history = graph.history
+    // history.on('change', () => {})
+  }
+
+  onUndo = () => {
+    this.graph.undo()
+  }
+
+  onRedo = () => {
+    this.graph.redo()
   }
 
   refContainer = (container: HTMLDivElement) => {
@@ -148,6 +162,12 @@ export default class Example extends React.Component {
             Circle
           </div>
         </div>
+        <div className="x6-graph-tools">
+          <Button.Group>
+            <Button onClick={this.onUndo}>Undo</Button>
+            <Button onClick={this.onRedo}>Redo</Button>
+          </Button.Group>
+        </div>
         <div ref={this.refContainer} className="x6-graph" />
       </div>
     )

packages/x6/src/graph/history.ts

@@ -14,9 +14,9 @@ export class HistoryManager extends Basecoat<HistoryManager.EventArgs>
   protected redoStack: HistoryManager.Commands[]
   protected undoStack: HistoryManager.Commands[]
 
-  protected batchCommands: HistoryManager.Command[] | null
-  protected batchLevel: number
-  protected lastBatchIndex: number
+  protected batchCommands: HistoryManager.Command[] | null = null
+  protected batchLevel: number = 0
+  protected lastBatchIndex: number = -1
 
   protected freezed: boolean = false
   protected readonly handlers: (<T extends HistoryManager.ModelEvents>(
@@ -358,13 +358,12 @@ export class HistoryManager extends Basecoat<HistoryManager.EventArgs>
   }
 
   /**
-   * Function `initBatchCommand()` gives you the ability to gather multiple
-   * changes into a single command. These commands could be revert with
-   * single `undo()` call. From the moment the function is called every
-   * change made on model is not stored into the undoStack. Changes are
-   * temporarily kept until `storeBatchCommand()` is called.
+   * Gather multiple changes into a single command. These commands could
+   * be reverted with single `undo()` call. From the moment the function
+   * is called every change made on model is not stored into the undoStack.
+   * Changes are temporarily kept until `storeBatchCommand()` is called.
    */
-  protected initBatchCommand() {
+  protected initBatchCommand(options: KeyValue) {
     if (this.batchCommands) {
       this.batchLevel += 1
     } else {
@@ -375,10 +374,8 @@ export class HistoryManager extends Basecoat<HistoryManager.EventArgs>
   }
 
   /**
-   * Calling function `storeBatchCommand()` tells the CommandManager
-   * to store all changes temporarily kept in the undoStack. In order
-   * to store changes you have to call this function as many times as
-   * `initBatchCommand()` had been called.
+   * Store changes temporarily kept in the undoStack. You have to call this
+   * function as many times as `initBatchCommand()` been called.
    */
   protected storeBatchCommand(options: KeyValue) {
     if (this.batchCommands && this.batchLevel <= 0) {

packages/x6/src/model/cell.ts

@@ -1201,24 +1201,35 @@ export class Cell<
 
   // #region batch
 
-  startBatch(name: Model.BatchName, data: KeyValue = {}) {
-    if (this.model) {
-      this.model.startBatch(name, { ...data, cell: this })
+  startBatch(
+    name: Model.BatchName,
+    data: KeyValue = {},
+    model: Model | null = this.model,
+  ) {
+    if (model) {
+      model.startBatch(name, { ...data, cell: this })
     }
     return this
   }
 
-  stopBatch(name: Model.BatchName, data: KeyValue = {}) {
-    if (this.model) {
-      this.model.stopBatch(name, { ...data, cell: this })
+  stopBatch(
+    name: Model.BatchName,
+    data: KeyValue = {},
+    model: Model | null = this.model,
+  ) {
+    if (model) {
+      model.stopBatch(name, { ...data, cell: this })
     }
     return this
   }
 
   batchUpdate<T>(name: Model.BatchName, execute: () => T, data?: KeyValue): T {
-    this.startBatch(name, data)
+    // The model is null after cell was removed(remove batch).
+    // So we should temp save model to trigger pairing batch event.
+    const model = this.model
+    this.startBatch(name, data, model)
     const result = execute()
-    this.stopBatch(name, data)
+    this.stopBatch(name, data, model)
     return result
   }