feat: support drag canvas on mobile (#6770)

antvis · Feb 13, 2025 · aef338d · aef338d
1 parent a82674b
commit aef338d
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 4 deletions.
diff --git a/packages/g6/__tests__/unit/behaviors/drag-canvas.spec.ts b/packages/g6/__tests__/unit/behaviors/drag-canvas.spec.ts
@@ -69,6 +69,22 @@ describe('behavior drag canvas', () => {
     expect(graph.getPosition()).toBeCloseTo([x + 10, y + 10]);
   });
 
+  it('drag for mobile', () => {
+    const [x, y] = graph.getPosition();
+
+    dispatchCanvasEvent(graph, CommonEvent.DRAG_START, { targetType: 'canvas' });
+    dispatchCanvasEvent(graph, CommonEvent.DRAG, { dx: 10, dy: 10, targetType: 'canvas' });
+    dispatchCanvasEvent(graph, CommonEvent.DRAG_END);
+
+    expect(graph.getPosition()).toBeCloseTo([x + 10, y + 10]);
+
+    dispatchCanvasEvent(graph, CommonEvent.DRAG_START, { targetType: 'canvas' });
+    dispatchCanvasEvent(graph, CommonEvent.DRAG, { dx: -10, dy: -10, targetType: 'canvas' });
+    dispatchCanvasEvent(graph, CommonEvent.DRAG_END);
+
+    expect(graph.getPosition()).toBeCloseTo([x, y]);
+  });
+
   it('sensitivity', async () => {
     graph.updateBehavior({ key: 'drag-canvas', sensitivity: 20 });
 

diff --git a/packages/g6/src/behaviors/drag-canvas.ts b/packages/g6/src/behaviors/drag-canvas.ts
@@ -2,7 +2,7 @@ import type { Cursor } from '@antv/g';
 import { debounce, isObject } from '@antv/util';
 import { CommonEvent } from '../constants';
 import type { RuntimeContext } from '../runtime/types';
-import type { IKeyboardEvent, IPointerEvent, Vector2, ViewportAnimationEffectTiming } from '../types';
+import type { IDragEvent, IKeyboardEvent, IPointerEvent, Vector2, ViewportAnimationEffectTiming } from '../types';
 import { getExpandedBBox, getPointBBox, isPointInBBox } from '../utils/bbox';
 import { parsePadding } from '../utils/padding';
 import type { ShortcutKey } from '../utils/shortcut';
@@ -137,15 +137,16 @@ export class DragCanvas extends BaseBehavior<DragCanvasOptions> {
 
   private isDragging = false;
 
-  private onDragStart = (event: IPointerEvent) => {
+  private onDragStart = (event: IDragEvent) => {
     if (!this.validate(event)) return;
     this.isDragging = true;
     this.context.canvas.setCursor('grabbing');
   };
 
-  private onDrag = (event: IPointerEvent) => {
+  private onDrag = (event: IDragEvent) => {
     if (!this.isDragging) return;
-    const { x, y } = event.movement;
+    const x = event.movement?.x ?? event.dx;
+    const y = event.movement?.y ?? event.dy;
     if ((x | y) !== 0) {
       this.translate([x, y], false);
     }