fix: correct drag node position at rotated canvas (#7310)

* fix: correct drag node position at rotated canvas

* fix: correct force drag node position at rotated canvas

* fix: type check & code review suggestion

---------

Co-authored-by: hustcc <i@hust.cc>

Author: Sloth9527

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

@@ -1,8 +1,12 @@
 import type { Graph } from '@/src';
-import { CommonEvent } from '@/src';
+import { CommonEvent, NodeEvent } from '@/src';
 import { bugDragRotatedCanvas } from '@@/demos';
 import { createDemoGraph, dispatchCanvasEvent } from '@@/utils';
 
+const fixed2 = (num: number): number => {
+  return parseFloat(num.toFixed(2));
+};
+
 describe('behavior drag rotated canvas', () => {
   let graph: Graph;
 
@@ -61,4 +65,22 @@ describe('behavior drag rotated canvas', () => {
     expect(graph.getRotation()).toBe(270);
     expect(graph.getPosition()).toBeCloseTo([x + 20, y - 10]);
   });
+
+  it.each([
+    { name: 'element', id: 'node1', targetType: 'node' },
+    { name: 'combo', id: 'comboA', targetType: 'combo' },
+  ])('drag $name when 30 rotated canvas', async ({ id, targetType }) => {
+    await graph.rotateTo(30);
+
+    const [x, y] = graph.getElementPosition(id);
+
+    graph.emit(NodeEvent.DRAG_START, { target: { id: id }, targetType });
+    graph.emit(NodeEvent.DRAG, { dx: 10, dy: 10 });
+    graph.emit(NodeEvent.DRAG_END, { target: { id: id }, targetType });
+
+    expect(graph.getRotation()).toBe(30);
+    const [nextX, nextY] = graph.getElementPosition(id);
+    expect(fixed2(nextX)).toBeCloseTo(fixed2(x + 3.66));
+    expect(fixed2(nextY)).toBeCloseTo(fixed2(y + 13.66));
+  });
 });

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

@@ -4,7 +4,14 @@ export const bugDragRotatedCanvas: TestCase = async (context) => {
   const graph = new Graph({
     ...context,
     data: {
-      nodes: [{ id: 'node1' }, { id: 'node2' }, { id: 'node3' }, { id: 'node4' }, { id: 'node5' }],
+      nodes: [
+        { id: 'node1', combo: 'comboA' },
+        { id: 'node2', combo: 'comboA' },
+        { id: 'node3' },
+        { id: 'node4' },
+        { id: 'node5' },
+      ],
+      combos: [{ id: 'comboA' }],
       edges: [
         { source: 'node1', target: 'node2' },
         { source: 'node1', target: 'node3' },
@@ -17,7 +24,7 @@ export const bugDragRotatedCanvas: TestCase = async (context) => {
     layout: {
       type: 'grid',
     },
-    behaviors: ['drag-canvas'],
+    behaviors: ['drag-canvas', 'drag-element'],
   });
 
   await graph.render();

packages/g6/__tests__/demos/bug-drag-rotated-element-force.ts

@@ -0,0 +1,50 @@
+// ref: https://observablehq.com/@d3/force-directed-lattice
+import { Graph } from '@antv/g6';
+
+export const bugDragRotatedElementForce: TestCase = async (context) => {
+  const graph = new Graph({
+    ...context,
+    data: getData(),
+    layout: {
+      type: 'd3-force',
+      manyBody: {
+        strength: -30,
+      },
+      link: {
+        strength: 1,
+        distance: 20,
+        iterations: 10,
+      },
+    },
+    node: {
+      style: {
+        size: 10,
+        fill: '#000',
+      },
+    },
+    edge: {
+      style: {
+        stroke: '#000',
+      },
+    },
+    behaviors: [{ type: 'drag-element-force' }, 'zoom-canvas'],
+  });
+
+  await graph.render();
+
+  graph.rotateTo(2160 + 60);
+
+  return graph;
+};
+
+function getData(size = 10) {
+  const nodes = Array.from({ length: size * size }, (_, i) => ({ id: `${i}` }));
+  const edges = [];
+  for (let y = 0; y < size; ++y) {
+    for (let x = 0; x < size; ++x) {
+      if (y > 0) edges.push({ source: `${(y - 1) * size + x}`, target: `${y * size + x}` });
+      if (x > 0) edges.push({ source: `${y * size + (x - 1)}`, target: `${y * size + x}` });
+    }
+  }
+  return { nodes, edges };
+}

packages/g6/__tests__/demos/index.ts

@@ -21,6 +21,7 @@ export { behaviorOptimizeViewportTransform } from './behavior-optimize-viewport-
 export { behaviorScrollCanvas } from './behavior-scroll-canvas';
 export { behaviorZoomCanvas } from './behavior-zoom-canvas';
 export { bugDragRotatedCanvas } from './bug-drag-rotated-canvas';
+export { bugDragRotatedElementForce } from './bug-drag-rotated-element-force';
 export { bugProcessParallelEdgesComboFixed } from './bug-process-parallel-edges-combo-fixed';
 export { bugTooltipResize } from './bug-tooltip-resize';
 export { canvasCursor } from './canvas-cursor';

packages/g6/__tests__/unit/utils/vector.spec.ts

@@ -12,6 +12,7 @@ import {
   normalize,
   perpendicular,
   rad,
+  rotate,
   scale,
   subtract,
   toVector2,
@@ -111,4 +112,11 @@ describe('Vector Functions', () => {
     expect(rad([1, 0])).toEqual(0);
     expect(rad([0, 1])).toEqual(Math.PI / 2);
   });
+
+  it('rotate', () => {
+    expect(rotate([10, 10], 30)).toBeCloseTo([3.66, 13.66]);
+    expect(rotate([10, 20], 90)).toBeCloseTo([-20, 10]);
+    expect(rotate([10, 20], 180)).toBeCloseTo([-10, -20]);
+    expect(rotate([10, 20], 270)).toBeCloseTo([20, -10]);
+  });
 });

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

@@ -8,7 +8,7 @@ import { parsePadding } from '../utils/padding';
 import { PinchHandler } from '../utils/pinch';
 import type { ShortcutKey } from '../utils/shortcut';
 import { Shortcut } from '../utils/shortcut';
-import { multiply, subtract } from '../utils/vector';
+import { multiply, rotate, subtract } from '../utils/vector';
 import type { BaseBehaviorOptions } from './base-behavior';
 import { BaseBehavior } from './base-behavior';
 
@@ -190,11 +190,7 @@ export class DragCanvas extends BaseBehavior<DragCanvasOptions> {
 
   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];
+    return rotate([dx, dy], rotation);
   }
 
   private clampByDirection([dx, dy]: Vector2): Vector2 {

packages/g6/src/behaviors/drag-element-force.ts

@@ -66,7 +66,8 @@ export class DragElementForce extends DragElement {
     const layout = this.forceLayoutInstance;
     this.context.graph.getNodeData(ids).forEach((element, index) => {
       const { x = 0, y = 0 } = element.style || {};
-      if (layout) invokeLayoutMethod(layout, 'setFixedPosition', ids[index], [...add([+x, +y], offset)]);
+      if (layout)
+        invokeLayoutMethod(layout, 'setFixedPosition', ids[index], [...add([+x, +y], this.clampByRotation(offset))]);
     });
   }
 

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

@@ -3,12 +3,12 @@ import { Rect } from '@antv/g';
 import { isFunction } from '@antv/util';
 import { COMBO_KEY, CanvasEvent, ComboEvent, CommonEvent } from '../constants';
 import type { RuntimeContext } from '../runtime/types';
-import type { EdgeDirection, ID, IElementDragEvent, IPointerEvent, Point, Prefix, State } from '../types';
+import type { EdgeDirection, ID, IElementDragEvent, IPointerEvent, Point, Prefix, State, Vector2 } from '../types';
 import { getBBoxSize, getCombinedBBox } from '../utils/bbox';
 import { isToBeDestroyed } from '../utils/element';
 import { idOf } from '../utils/id';
 import { subStyleProps } from '../utils/prefix';
-import { divide, subtract } from '../utils/vector';
+import { divide, rotate, subtract } from '../utils/vector';
 import type { BaseBehaviorOptions } from './base-behavior';
 import { BaseBehavior } from './base-behavior';
 
@@ -354,6 +354,11 @@ export class DragElement extends BaseBehavior<DragElementOptions> {
     return !!enable;
   }
 
+  protected clampByRotation([dx, dy]: Point): Vector2 {
+    const rotation = this.context.graph.getRotation();
+    return rotate([dx, dy], rotation);
+  }
+
   /**
    * <zh/> 移动元素
    *
@@ -367,7 +372,7 @@ export class DragElement extends BaseBehavior<DragElementOptions> {
     const { dropEffect } = this.options;
 
     if (dropEffect === 'move') ids.forEach((id) => model.refreshComboData(id));
-    graph.translateElementBy(Object.fromEntries(ids.map((id) => [id, offset])), false);
+    graph.translateElementBy(Object.fromEntries(ids.map((id) => [id, this.clampByRotation(offset)])), false);
   }
 
   private moveShadow(offset: Point) {

packages/g6/src/utils/vector.ts

@@ -219,3 +219,20 @@ export function rad(a: Vector2 | Vector3): number {
   if (!x && !y) return 0;
   return Math.atan2(y, x);
 }
+
+/**
+ * <zh/> 旋转向量（角度制）
+ *
+ * <en/> Rotational vector (Angle system)
+ * @param a - <zh/> 向量 | <en/> The vector
+ * @param angle - <zh/> 旋转角度 | <en/> The rotation angle
+ * @returns <zh/> 向量 | <en/> The vector
+ */
+export function rotate(a: Vector2, angle: number): Vector2 {
+  const [dx, dy] = a;
+  if (angle % 360 === 0) return [dx, dy];
+  const rad = (angle * Math.PI) / 180;
+  const cos = Math.cos(rad);
+  const sin = Math.sin(rad);
+  return [dx * cos - dy * sin, dx * sin + dy * cos];
+}