refactor: drag canvas can be triggered on elements (#6108)

* refactor(behaviors): drag canvas can trigger on elements

* test: add test snapshots

packages/g6/__tests__/bugs/focus-element.spec.ts

@@ -1,5 +1,5 @@
-import { CanvasEvent, CommonEvent, NodeEvent } from '@/src';
-import { createGraph } from '@@/utils';
+import { CommonEvent, NodeEvent } from '@/src';
+import { createGraph, dispatchCanvasEvent } from '@@/utils';
 
 describe('focus element', () => {
   it('focus after drag', async () => {
@@ -17,9 +17,9 @@ describe('focus element', () => {
 
     await graph.draw();
 
-    graph.emit(CanvasEvent.DRAG_START, { targetType: 'canvas' });
-    graph.emit(CanvasEvent.DRAG, { movement: { x: 100, y: 100 }, targetType: 'canvas' });
-    graph.emit(CanvasEvent.DRAG_END);
+    dispatchCanvasEvent(graph, CommonEvent.DRAG_START, { targetType: 'canvas' });
+    dispatchCanvasEvent(graph, CommonEvent.DRAG, { movement: { x: 100, y: 100 }, targetType: 'canvas' });
+    dispatchCanvasEvent(graph, CommonEvent.DRAG_END);
 
     await expect(graph).toMatchSnapshot(__filename, 'focus-before-drag');
 

packages/g6/__tests__/unit/behaviors/drag-canvas.spec.ts

@@ -1,7 +1,7 @@
 import { behaviorDragCanvas } from '@/__tests__/demos';
 import type { Graph } from '@/src';
-import { CanvasEvent, CommonEvent } from '@/src';
-import { createDemoGraph, sleep } from '@@/utils';
+import { CommonEvent } from '@/src';
+import { createDemoGraph, createGraph, dispatchCanvasEvent, sleep } from '@@/utils';
 
 describe('behavior drag canvas', () => {
   let graph: Graph;
@@ -61,9 +61,11 @@ describe('behavior drag canvas', () => {
 
   it('drag', () => {
     const [x, y] = graph.getPosition();
-    graph.emit(CanvasEvent.DRAG_START, { targetType: 'canvas' });
-    graph.emit(CanvasEvent.DRAG, { movement: { x: 10, y: 10 }, targetType: 'canvas' });
-    graph.emit(CanvasEvent.DRAG_END);
+
+    dispatchCanvasEvent(graph, CommonEvent.DRAG_START, { targetType: 'canvas' });
+    dispatchCanvasEvent(graph, CommonEvent.DRAG, { movement: { x: 10, y: 10 }, targetType: 'canvas' });
+    dispatchCanvasEvent(graph, CommonEvent.DRAG_END);
+
     expect(graph.getPosition()).toBeCloseTo([x + 10, y + 10]);
   });
 
@@ -105,9 +107,34 @@ describe('behavior drag canvas', () => {
     const onFinish = jest.fn();
     graph.updateBehavior({ key: 'drag-canvas', trigger: 'drag', onFinish });
 
-    graph.emit(CanvasEvent.DRAG_START, { targetType: 'canvas' });
-    graph.emit(CanvasEvent.DRAG, { movement: { x: 10, y: 10 }, targetType: 'canvas' });
-    graph.emit(CanvasEvent.DRAG_END);
+    dispatchCanvasEvent(graph, CommonEvent.DRAG_START, { targetType: 'canvas' });
+    dispatchCanvasEvent(graph, CommonEvent.DRAG, { movement: { x: 10, y: 10 }, targetType: 'canvas' });
+    dispatchCanvasEvent(graph, CommonEvent.DRAG_END);
+
     expect(onFinish).toHaveBeenCalledTimes(1);
   });
+
+  it('trigger on element', async () => {
+    const graph = createGraph({
+      data: {
+        nodes: [{ id: 'node-1', style: { x: 100, y: 100 } }],
+      },
+      node: {
+        style: {
+          size: 20,
+        },
+      },
+      behaviors: [{ type: 'drag-canvas', enable: true }],
+    });
+
+    await graph.draw();
+
+    await expect(graph).toMatchSnapshot(__filename, 'drag-on-element-default');
+
+    dispatchCanvasEvent(graph, CommonEvent.DRAG_START, { targetType: 'node' });
+    dispatchCanvasEvent(graph, CommonEvent.DRAG, { movement: { x: -50, y: -50 }, targetType: 'node' });
+    dispatchCanvasEvent(graph, CommonEvent.DRAG_END);
+
+    await expect(graph).toMatchSnapshot(__filename, 'drag-on-element');
+  });
 });

packages/g6/__tests__/utils/canvas.ts

@@ -0,0 +1,8 @@
+import type { Graph } from '@/src';
+import { CustomEvent } from '@antv/g';
+
+export function dispatchCanvasEvent(graph: Graph, type: string, data?: any) {
+  // @ts-expect-error private method
+  const canvas = graph.context.canvas.document;
+  canvas.dispatchEvent(new CustomEvent(type, data));
+}

packages/g6/__tests__/utils/index.ts

@@ -1,3 +1,4 @@
+export { dispatchCanvasEvent } from './canvas';
 export { createDemoGraph, createEdgeNode, createGraph, createGraphCanvas } from './create';
 export { createDeterministicRandom } from './random';
 export { sleep } from './sleep';

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

@@ -1,6 +1,6 @@
 import type { Cursor } from '@antv/g';
-import { debounce, isFunction, isObject } from '@antv/util';
-import { CanvasEvent } from '../constants';
+import { debounce, isObject } from '@antv/util';
+import { CanvasEvent, CommonEvent } from '../constants';
 import type { RuntimeContext } from '../runtime/types';
 import type { IKeyboardEvent, IPointerEvent, Vector2, ViewportAnimationEffectTiming } from '../types';
 import type { ShortcutKey } from '../utils/shortcut';
@@ -61,14 +61,21 @@ export interface DragCanvasOptions extends BaseBehaviorOptions {
  */
 export class DragCanvas extends BaseBehavior<DragCanvasOptions> {
   static defaultOptions: Partial<DragCanvasOptions> = {
-    enable: true,
+    enable: (event) => {
+      if ('targetType' in event) return event.targetType === 'canvas';
+      return true;
+    },
     sensitivity: 10,
   };
 
   private shortcut: Shortcut;
 
   private defaultCursor: Cursor;
 
+  private get canvas() {
+    return this.context.canvas.getLayer();
+  }
+
   constructor(context: RuntimeContext, options: DragCanvasOptions) {
     super(context, Object.assign({}, DragCanvas.defaultOptions, options));
 
@@ -93,27 +100,25 @@ export class DragCanvas extends BaseBehavior<DragCanvasOptions> {
 
   private bindEvents() {
     const { trigger } = this.options;
-    const { graph } = this.context;
 
     if (isObject(trigger)) {
       const { up = [], down = [], left = [], right = [] } = trigger;
-
       this.shortcut.bind(up, (event) => this.onTranslate([0, 1], event));
       this.shortcut.bind(down, (event) => this.onTranslate([0, -1], event));
       this.shortcut.bind(left, (event) => this.onTranslate([1, 0], event));
       this.shortcut.bind(right, (event) => this.onTranslate([-1, 0], event));
     } else {
-      graph.on(CanvasEvent.DRAG_START, this.onDragStart);
-      graph.on(CanvasEvent.DRAG, this.onDrag);
-      graph.on(CanvasEvent.DRAG_END, this.onDragEnd);
+      const canvas = this.canvas;
+      canvas.addEventListener(CommonEvent.DRAG_START, this.onDragStart);
+      canvas.addEventListener(CommonEvent.DRAG, this.onDrag);
+      canvas.addEventListener(CommonEvent.DRAG_END, this.onDragEnd);
     }
   }
 
   private isDragging = false;
 
   private onDragStart = (event: IPointerEvent) => {
     if (!this.validate(event)) return;
-    if (event.targetType !== 'canvas') return;
     this.isDragging = true;
     this.context.canvas.setCursor('grabbing');
   };
@@ -160,16 +165,16 @@ export class DragCanvas extends BaseBehavior<DragCanvasOptions> {
   private validate(event: IPointerEvent | IKeyboardEvent) {
     if (this.destroyed) return false;
     const { enable } = this.options;
-    if (isFunction(enable)) return enable(event);
+    if (typeof enable === 'function') return enable(event);
     return !!enable;
   }
 
   private unbindEvents() {
     this.shortcut.unbindAll();
-    const { graph } = this.context;
-    graph.off(CanvasEvent.DRAG_START, this.onDragStart);
-    graph.off(CanvasEvent.DRAG, this.onDrag);
-    graph.off(CanvasEvent.DRAG_END, this.onDragEnd);
+    const canvas = this.canvas;
+    canvas.removeEventListener(CanvasEvent.DRAG_START, this.onDragStart);
+    canvas.removeEventListener(CanvasEvent.DRAG, this.onDrag);
+    canvas.removeEventListener(CanvasEvent.DRAG_END, this.onDragEnd);
   }
 
   public destroy(): void {