fix: correct the point after canvas rotation (#7235) (#7236)

Co-authored-by: JK <[email protected]>
Co-authored-by: wangyun <[email protected]>

Author: 3 people

packages/g6/__tests__/bugs/behaviors-drag-rotated-canvas.spec.ts

@@ -0,0 +1,64 @@
+import type { Graph } from '@/src';
+import { CommonEvent } from '@/src';
+import { bugDragRotatedCanvas } from '@@/demos';
+import { createDemoGraph, dispatchCanvasEvent } from '@@/utils';
+
+describe('behavior drag rotated canvas', () => {
+  let graph: Graph;
+
+  beforeAll(async () => {
+    graph = await createDemoGraph(bugDragRotatedCanvas, { animation: false });
+  });
+
+  afterAll(() => {
+    graph.destroy();
+  });
+
+  it('drag 30 rotated canvas', async () => {
+    await graph.rotateTo(30);
+    const [x, y] = graph.getPosition();
+
+    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.getRotation()).toBe(30);
+    expect(graph.getPosition()).toBeCloseTo([x + 3.66, y + 13.66]);
+  });
+
+  it('drag 90 rotated canvas', async () => {
+    await graph.rotateTo(90);
+    const [x, y] = graph.getPosition();
+
+    dispatchCanvasEvent(graph, CommonEvent.DRAG_START, { targetType: 'canvas' });
+    dispatchCanvasEvent(graph, CommonEvent.DRAG, { movement: { x: 10, y: 20 }, targetType: 'canvas' });
+    dispatchCanvasEvent(graph, CommonEvent.DRAG_END);
+
+    expect(graph.getRotation()).toBe(90);
+    expect(graph.getPosition()).toBeCloseTo([x - 20, y + 10]);
+  });
+
+  it('drag 180 rotated canvas', async () => {
+    await graph.rotateTo(180);
+    const [x, y] = graph.getPosition();
+
+    dispatchCanvasEvent(graph, CommonEvent.DRAG_START, { targetType: 'canvas' });
+    dispatchCanvasEvent(graph, CommonEvent.DRAG, { movement: { x: 10, y: 20 }, targetType: 'canvas' });
+    dispatchCanvasEvent(graph, CommonEvent.DRAG_END);
+
+    expect(graph.getRotation()).toBe(180);
+    expect(graph.getPosition()).toBeCloseTo([x - 10, y - 20]);
+  });
+
+  it('drag 270 rotated canvas', async () => {
+    await graph.rotateTo(270);
+    const [x, y] = graph.getPosition();
+
+    dispatchCanvasEvent(graph, CommonEvent.DRAG_START, { targetType: 'canvas' });
+    dispatchCanvasEvent(graph, CommonEvent.DRAG, { movement: { x: 10, y: 20 }, targetType: 'canvas' });
+    dispatchCanvasEvent(graph, CommonEvent.DRAG_END);
+
+    expect(graph.getRotation()).toBe(270);
+    expect(graph.getPosition()).toBeCloseTo([x + 20, y - 10]);
+  });
+});

packages/g6/__tests__/demos/bug-drag-rotated-canvas.ts

@@ -0,0 +1,28 @@
+import { Graph } from '@antv/g6';
+
+export const bugDragRotatedCanvas: TestCase = async (context) => {
+  const graph = new Graph({
+    ...context,
+    data: {
+      nodes: [{ id: 'node1' }, { id: 'node2' }, { id: 'node3' }, { id: 'node4' }, { id: 'node5' }],
+      edges: [
+        { source: 'node1', target: 'node2' },
+        { source: 'node1', target: 'node3' },
+        { source: 'node1', target: 'node4' },
+        { source: 'node2', target: 'node3' },
+        { source: 'node3', target: 'node4' },
+        { source: 'node4', target: 'node5' },
+      ],
+    },
+    layout: {
+      type: 'grid',
+    },
+    behaviors: ['drag-canvas'],
+  });
+
+  await graph.render();
+
+  graph.rotateTo(2160 + 60);
+
+  return graph;
+};

packages/g6/__tests__/demos/index.ts

@@ -20,6 +20,7 @@ export { behaviorLassoSelect } from './behavior-lasso-select';
 export { behaviorOptimizeViewportTransform } from './behavior-optimize-viewport-transform';
 export { behaviorScrollCanvas } from './behavior-scroll-canvas';
 export { behaviorZoomCanvas } from './behavior-zoom-canvas';
+export { bugDragRotatedCanvas } from './bug-drag-rotated-canvas';
 export { bugTooltipResize } from './bug-tooltip-resize';
 export { canvasCursor } from './canvas-cursor';
 export { caseFishbone } from './case-fishbone';

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

@@ -183,10 +183,20 @@ export class DragCanvas extends BaseBehavior<DragCanvasOptions> {
   protected async translate(offset: Vector2, animation?: ViewportAnimationEffectTiming) {
     offset = this.clampByDirection(offset);
     offset = this.clampByRange(offset);
+    offset = this.clampByRotation(offset);
 
     await this.context.graph.translateBy(offset, animation);
   }
 
+  private clampByRotation([dx, dy]: Vector2): Vector2 {
+    const rotation = this.context.graph.getRotation();
+    if (rotation % 360 === 0) return [dx, dy];
+    const rad = (rotation * Math.PI) / 180;
+    const cos = Math.cos(rad);
+    const sin = Math.sin(rad);
+    return [dx * cos - dy * sin, dx * sin + dy * cos];
+  }
+
   private clampByDirection([dx, dy]: Vector2): Vector2 {
     const { direction } = this.options;
     if (direction === 'x') {