fix(behaviors): fix drag element, drag canvas conflict (#6125)

Co-authored-by: antv <antv@antfin.com>

packages/g6/__tests__/bugs/behaviors-multiple-conflict.spec.ts

@@ -0,0 +1,29 @@
+import { createGraph, dispatchCanvasEvent } from '@@/utils';
+import { CommonEvent, NodeEvent } from '@antv/g6';
+
+describe('bugs:multiple-conflict', () => {
+  it('drag element, drag canvas', async () => {
+    const graph = createGraph({
+      data: {
+        nodes: [{ id: 'node-1', style: { x: 50, y: 50, size: 20 } }],
+      },
+      behaviors: ['drag-element', 'drag-canvas'],
+    });
+
+    await graph.render();
+
+    await expect(graph).toMatchSnapshot(__filename);
+
+    // drag canvas
+    dispatchCanvasEvent(graph, CommonEvent.DRAG_START, { targetType: 'canvas' });
+    dispatchCanvasEvent(graph, CommonEvent.DRAG, { movement: { x: 10, y: 10 }, targetType: 'canvas' });
+    dispatchCanvasEvent(graph, CommonEvent.DRAG_END);
+    await expect(graph).toMatchSnapshot(__filename, 'drag-canvas');
+
+    // drag element
+    graph.emit(NodeEvent.DRAG_START, { target: { id: 'node-1' }, targetType: 'node' });
+    graph.emit(NodeEvent.DRAG, { dx: 10, dy: 10 });
+    graph.emit(NodeEvent.DRAG_END);
+    await expect(graph).toMatchSnapshot(__filename, 'drag-element');
+  });
+});

packages/g6/src/behaviors/drag-canvas.ts

@@ -1,6 +1,6 @@
 import type { Cursor } from '@antv/g';
 import { debounce, isObject } from '@antv/util';
-import { CanvasEvent, CommonEvent } from '../constants';
+import { CanvasEvent } from '../constants';
 import type { RuntimeContext } from '../runtime/types';
 import type { IKeyboardEvent, IPointerEvent, Vector2, ViewportAnimationEffectTiming } from '../types';
 import type { ShortcutKey } from '../utils/shortcut';
@@ -108,10 +108,9 @@ export class DragCanvas extends BaseBehavior<DragCanvasOptions> {
       this.shortcut.bind(left, (event) => this.onTranslate([1, 0], event));
       this.shortcut.bind(right, (event) => this.onTranslate([-1, 0], event));
     } else {
-      const canvas = this.canvas;
-      canvas.addEventListener(CommonEvent.DRAG_START, this.onDragStart);
-      canvas.addEventListener(CommonEvent.DRAG, this.onDrag);
-      canvas.addEventListener(CommonEvent.DRAG_END, this.onDragEnd);
+      this.context.graph.on(CanvasEvent.DRAG_START, this.onDragStart);
+      this.context.graph.on(CanvasEvent.DRAG, this.onDrag);
+      this.context.graph.on(CanvasEvent.DRAG_END, this.onDragEnd);
     }
   }