feat: support direction for drag-canvas behavior (#6199)

* feat: support direction for drag-canvas behavior * test: add unit test
antvis · Aug 20, 2024 · c9c1998 · c9c1998
1 parent 8155103
commit c9c1998
Show file tree

Hide file tree

Showing 2 changed files with 71 additions and 1 deletion.
diff --git a/packages/g6/__tests__/unit/behaviors/drag-canvas.spec.ts b/packages/g6/__tests__/unit/behaviors/drag-canvas.spec.ts
@@ -80,6 +80,31 @@ describe('behavior drag canvas', () => {
     await expect(graph).toMatchSnapshot(__filename);
   });
 
+  it('use shortcut to drag in the x-axis direction', () => {
+    graph.updateBehavior({ key: 'drag-canvas', direction: 'x' });
+
+    const [x, y] = graph.getPosition();
+    graph.emit(CommonEvent.KEY_DOWN, { key: 'ArrowRight' });
+    graph.emit(CommonEvent.KEY_UP, { key: 'ArrowRight' });
+    graph.emit(CommonEvent.KEY_DOWN, { key: 'ArrowDown' });
+    graph.emit(CommonEvent.KEY_UP, { key: 'ArrowDown' });
+
+    expect(graph.getPosition()).toBeCloseTo([x + 20, y]);
+  });
+
+  it('use shortcut to drag in the y-axis direction', () => {
+    graph.updateBehavior({ key: 'drag-canvas', direction: 'y' });
+
+    const [x, y] = graph.getPosition();
+    graph.emit(CommonEvent.KEY_DOWN, { key: 'ArrowRight' });
+    graph.emit(CommonEvent.KEY_UP, { key: 'ArrowRight' });
+    graph.emit(CommonEvent.KEY_DOWN, { key: 'ArrowDown' });
+    graph.emit(CommonEvent.KEY_UP, { key: 'ArrowDown' });
+
+    expect(graph.getPosition()).toBeCloseTo([x, y + 20]);
+    graph.updateBehavior({ key: 'drag-canvas', direction: 'both' });
+  });
+
   it('onFinish with key', async () => {
     const onFinish = jest.fn();
     graph.updateBehavior({ key: 'drag-canvas', onFinish });
@@ -114,6 +139,28 @@ describe('behavior drag canvas', () => {
     expect(onFinish).toHaveBeenCalledTimes(1);
   });
 
+  it('drag in the x-axis direction', () => {
+    graph.setBehaviors([{ type: 'drag-canvas', key: 'drag-canvas', trigger: 'drag', direction: 'x' }]);
+
+    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.getPosition()).toBeCloseTo([x + 10, y]);
+  });
+
+  it('drag in the y-axis direction', () => {
+    graph.updateBehavior({ key: 'drag-canvas', trigger: 'drag', direction: 'y' });
+
+    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.getPosition()).toBeCloseTo([x, y + 10]);
+  });
+
   it('trigger on element', async () => {
     const graph = createGraph({
       data: {

diff --git a/packages/g6/src/behaviors/drag-canvas.ts b/packages/g6/src/behaviors/drag-canvas.ts
@@ -28,6 +28,19 @@ export interface DragCanvasOptions extends BaseBehaviorOptions {
    * @defaultValue true
    */
   enable?: boolean | ((event: IPointerEvent | IKeyboardEvent) => boolean);
+  /**
+   * <zh/> 允许拖拽方向
+   * - `'x'`: 只允许水平拖拽
+   * - `'y'`: 只允许垂直拖拽
+   * - `'both'`: 不受限制，允许水平和垂直拖拽
+   *
+   * <en/> Allowed drag direction
+   * - `'x'`: Only allow horizontal drag
+   * - `'y'`: Only allow vertical drag
+   * - `'both'`: Allow horizontal and vertical drag
+   * @defaultValue `'both'`
+   */
+  direction?: 'x' | 'y' | 'both';
   /**
    * <zh/> 触发拖拽的方式，默认使用指针按下拖拽
    *
@@ -66,6 +79,7 @@ export class DragCanvas extends BaseBehavior<DragCanvasOptions> {
       return true;
     },
     sensitivity: 10,
+    direction: 'both',
   };
 
   private shortcut: Shortcut;
@@ -155,7 +169,16 @@ export class DragCanvas extends BaseBehavior<DragCanvasOptions> {
    * @internal
    */
   protected async translate(offset: Vector2, animation?: ViewportAnimationEffectTiming) {
-    await this.context.graph.translateBy(offset, animation);
+    let [dx, dy] = offset;
+
+    const { direction } = this.options;
+    if (direction === 'x') {
+      dy = 0;
+    } else if (direction === 'y') {
+      dx = 0;
+    }
+
+    await this.context.graph.translateBy([dx, dy], animation);
   }
 
   private validate(event: IPointerEvent | IKeyboardEvent) {