feat: create-edge behavior supports history tracking

packages/g6/__tests__/unit/plugins/history/plugin-history.spec.ts

@@ -1,6 +1,6 @@
 import { pluginHistory } from '@/__tests__/demos';
 import type { History } from '@/src';
-import { Graph } from '@/src';
+import { ComboEvent, Graph, NodeEvent } from '@/src';
 import { createDemoGraph } from '@@/utils';
 
 describe('history plugin', () => {
@@ -106,6 +106,21 @@ describe('history plugin', () => {
     history.undo();
   });
 
+  it('create-edge', async () => {
+    graph.setBehaviors((prev) => [
+      ...prev,
+      { type: 'create-edge', trigger: 'click', style: { stroke: 'red', lineWidth: 2 } },
+    ]);
+    graph.emit(NodeEvent.CLICK, { target: { id: 'node-1' }, targetType: 'node' });
+    graph.emit(ComboEvent.CLICK, { target: { id: 'combo-2' }, targetType: 'combo' });
+    await expect(graph).toMatchSnapshot(__filename, 'create-edge');
+    history.undo();
+    await expect(graph).toMatchSnapshot(__filename, 'create-edge-undo');
+    history.redo();
+    await expect(graph).toMatchSnapshot(__filename, 'create-edge-redo');
+    history.undo();
+  });
+
   it('beforeAddCommand', async () => {
     const undoStackLen = history.undoStack.length;
 

packages/g6/src/behaviors/create-edge.ts

@@ -116,7 +116,7 @@ export class CreateEdge extends BaseBehavior<CreateEdgeOptions> {
 
   private handleCreateEdge = async (event: IElementEvent) => {
     if (!this.validate(event)) return;
-    const { graph, canvas } = this.context;
+    const { graph, canvas, batch, element } = this.context;
     const { style } = this.options;
 
     if (this.source) {
@@ -125,6 +125,7 @@ export class CreateEdge extends BaseBehavior<CreateEdgeOptions> {
       return;
     }
 
+    batch!.startBatch();
     canvas.setCursor('crosshair');
     this.source = this.getSelectedNodeIDs([event.target.id])[0];
 
@@ -149,6 +150,7 @@ export class CreateEdge extends BaseBehavior<CreateEdgeOptions> {
         },
       },
     ]);
+    await element!.draw({ animation: false })?.finished;
   };
 
   private updateAssistEdge = async (event: IPointerEvent) => {
@@ -176,14 +178,14 @@ export class CreateEdge extends BaseBehavior<CreateEdgeOptions> {
 
   private cancelEdge = async () => {
     if (!this.source) return;
-    const { graph, element, canvas } = this.context;
-    canvas.setCursor('default');
+    const { graph, element, batch } = this.context;
 
     graph.removeNodeData([ASSIST_NODE_ID]);
 
     this.source = undefined;
 
-    await element!.draw({ animation: false, silence: true })?.finished;
+    await element!.draw({ animation: false })?.finished;
+    batch!.endBatch();
   };
 
   private getSelectedNodeIDs(currTarget: ID[]) {