feat(behavior): scroll-canvas/drag-canvas support range (#6266)

* feat: scroll-canvas supports range

* feat: drag-canvas supports range

* test: add range tests

* fix: fix cr issue

Author: yvonneyx

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

@@ -184,4 +184,24 @@ describe('behavior drag canvas', () => {
 
     await expect(graph).toMatchSnapshot(__filename, 'drag-on-element');
   });
+
+  it('range', () => {
+    graph.updateBehavior({ key: 'drag-canvas', trigger: 'drag', direction: 'both', range: 0.5 });
+
+    const emitDragEvent = (dx: number, dy: number, count: number) => {
+      for (let i = 0; i < count; i++) {
+        dispatchCanvasEvent(graph, CommonEvent.DRAG_START, { targetType: 'canvas' });
+        dispatchCanvasEvent(graph, CommonEvent.DRAG, { movement: { x: dx, y: dy }, targetType: 'canvas' });
+        dispatchCanvasEvent(graph, CommonEvent.DRAG_END);
+      }
+    };
+
+    const [canvasWidth, canvasHeight] = graph.getCanvas().getSize();
+    emitDragEvent(10, 0, 60);
+    expect(graph.getPosition()[0]).toBeCloseTo(canvasWidth / 2);
+    emitDragEvent(-10, 0, 60);
+    expect(graph.getPosition()[0]).toBeCloseTo(-canvasWidth / 2);
+    emitDragEvent(0, -10, 60);
+    expect(graph.getPosition()[0]).toBeCloseTo(-canvasHeight / 2);
+  });
 });

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

@@ -46,10 +46,15 @@ describe('behavior scroll canvas', () => {
 
   it('direction', async () => {
     setBehavior({ direction: 'x' });
-    const [x, y] = graph.getPosition();
+    let [x, y] = graph.getPosition();
     emitWheelEvent({ deltaX: -10, deltaY: -10 });
     expect(graph.getPosition()).toBeCloseTo([x + 10, y]);
 
+    setBehavior({ direction: 'y' });
+    [x, y] = graph.getPosition();
+    emitWheelEvent({ deltaX: -10, deltaY: -10 });
+    expect(graph.getPosition()).toBeCloseTo([x, y + 10]);
+
     setBehavior({ direction: undefined });
   });
 
@@ -98,6 +103,25 @@ describe('behavior scroll canvas', () => {
     expect(graph.getPosition()).toBeCloseTo([x + 10, y]);
   });
 
+  it('range', () => {
+    graph.setBehaviors((behavior) => [...behavior, { ...shortcutScrollCanvasOptions, range: 0.5 }]);
+
+    const emitArrow = (key: 'ArrowRight' | 'ArrowLeft' | 'ArrowUp' | 'ArrowDown', count: number) => {
+      for (let i = 0; i < count; i++) {
+        graph.emit(CommonEvent.KEY_DOWN, { key });
+        graph.emit(CommonEvent.KEY_UP, { key });
+      }
+    };
+
+    const [canvasWidth, canvasHeight] = graph.getCanvas().getSize();
+    emitArrow('ArrowRight', 50);
+    expect(graph.getPosition()[0]).toBeCloseTo(canvasWidth / 2);
+    emitArrow('ArrowLeft', 50);
+    expect(graph.getPosition()[0]).toBeCloseTo(-canvasWidth / 2);
+    emitArrow('ArrowUp', 50);
+    expect(graph.getPosition()[1]).toBeCloseTo(-canvasHeight / 2);
+  });
+
   it('destroy', () => {
     graph.destroy();
   });

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

@@ -3,9 +3,11 @@ 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 { getExpandedBBox, getPointBBox, isPointInBBox } from '../utils/bbox';
+import { parsePadding } from '../utils/padding';
 import type { ShortcutKey } from '../utils/shortcut';
 import { Shortcut } from '../utils/shortcut';
-import { multiply } from '../utils/vector';
+import { multiply, subtract } from '../utils/vector';
 import type { BaseBehaviorOptions } from './base-behavior';
 import { BaseBehavior } from './base-behavior';
 
@@ -41,6 +43,13 @@ export interface DragCanvasOptions extends BaseBehaviorOptions {
    * @defaultValue `'both'`
    */
   direction?: 'x' | 'y' | 'both';
+  /**
+   * <zh/> 可拖拽的视口范围，默认最多可拖拽一屏。可以分别设置上、右、下、左四个方向的范围，每个方向的范围在 [0, Infinity] 之间
+   *
+   * <en/> The draggable viewport range allows you to drag up to one screen by default. You can set the range for each direction (top, right, bottom, left) individually, with each direction's range between [0, Infinity]
+   * @defaultValue 1
+   */
+  range?: number | number[];
   /**
    * <zh/> 触发拖拽的方式，默认使用指针按下拖拽
    *
@@ -80,6 +89,7 @@ export class DragCanvas extends BaseBehavior<DragCanvasOptions> {
     },
     sensitivity: 10,
     direction: 'both',
+    range: 1,
   };
 
   private shortcut: Shortcut;
@@ -169,16 +179,45 @@ export class DragCanvas extends BaseBehavior<DragCanvasOptions> {
    * @internal
    */
   protected async translate(offset: Vector2, animation?: ViewportAnimationEffectTiming) {
-    let [dx, dy] = offset;
+    offset = this.clampByDirection(offset);
+    offset = this.clampByRange(offset);
 
+    await this.context.graph.translateBy(offset, animation);
+  }
+
+  private clampByDirection([dx, dy]: Vector2): Vector2 {
     const { direction } = this.options;
     if (direction === 'x') {
       dy = 0;
     } else if (direction === 'y') {
       dx = 0;
     }
+    return [dx, dy];
+  }
 
-    await this.context.graph.translateBy([dx, dy], animation);
+  private clampByRange([dx, dy]: Vector2): Vector2 {
+    const { viewport, canvas } = this.context;
+
+    const [canvasWidth, canvasHeight] = canvas.getSize();
+    const [top, right, bottom, left] = parsePadding(this.options.range);
+    const range = [canvasHeight * top, canvasWidth * right, canvasHeight * bottom, canvasWidth * left];
+    const draggableArea = getExpandedBBox(getPointBBox(viewport!.getCanvasCenter()), range);
+
+    const nextViewportCenter = subtract(viewport!.getViewportCenter(), [dx, dy, 0]);
+    if (!isPointInBBox(nextViewportCenter, draggableArea)) {
+      const {
+        min: [minX, minY],
+        max: [maxX, maxY],
+      } = draggableArea;
+
+      if ((nextViewportCenter[0] < minX && dx > 0) || (nextViewportCenter[0] > maxX && dx < 0)) {
+        dx = 0;
+      }
+      if ((nextViewportCenter[1] < minY && dy > 0) || (nextViewportCenter[1] > maxY && dy < 0)) {
+        dy = 0;
+      }
+    }
+    return [dx, dy];
   }
 
   private validate(event: IPointerEvent | IKeyboardEvent) {

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

@@ -2,7 +2,10 @@ import { isFunction, isObject } from '@antv/util';
 import { CommonEvent } from '../constants';
 import type { RuntimeContext } from '../runtime/types';
 import type { IKeyboardEvent, Point } from '../types';
+import { getExpandedBBox, getPointBBox, isPointInBBox } from '../utils/bbox';
+import { parsePadding } from '../utils/padding';
 import { Shortcut, ShortcutKey } from '../utils/shortcut';
+import { multiply, subtract } from '../utils/vector';
 import type { BaseBehaviorOptions } from './base-behavior';
 import { BaseBehavior } from './base-behavior';
 
@@ -42,6 +45,13 @@ export interface ScrollCanvasOptions extends BaseBehaviorOptions {
    * - `'y'`: only allow vertical scrolling
    */
   direction?: 'x' | 'y';
+  /**
+   * <zh/> 可滚动的视口范围，默认最多可滚动一屏。可以分别设置上、右、下、左四个方向的范围，每个方向的范围在 [0, Infinity] 之间
+   *
+   * <en/> The scrollable viewport range allows you to scroll up to one screen by default. You can set the range for each direction (top, right, bottom, left) individually, with each direction's range between [0, Infinity]
+   * @defaultValue 1
+   */
+  range?: number | number[];
   /**
    * <zh/> 滚动灵敏度
    *
@@ -74,6 +84,7 @@ export class ScrollCanvas extends BaseBehavior<ScrollCanvasOptions> {
     enable: true,
     sensitivity: 1,
     preventDefault: true,
+    range: 0.5,
   };
 
   private shortcut: Shortcut;
@@ -130,18 +141,48 @@ export class ScrollCanvas extends BaseBehavior<ScrollCanvasOptions> {
     await this.scroll([-diffX, -diffY], event);
   };
 
-  private formatDisplacement([dx, dy]: Point) {
-    const { direction, sensitivity } = this.options;
+  private formatDisplacement(d: Point) {
+    const { sensitivity } = this.options;
 
-    dx = dx * sensitivity;
-    dy = dy * sensitivity;
+    d = multiply(d, sensitivity);
+    d = this.clampByDirection(d);
+    d = this.clampByRange(d);
 
+    return d;
+  }
+
+  private clampByDirection([dx, dy]: Point) {
+    const { direction } = this.options;
     if (direction === 'x') {
       dy = 0;
     } else if (direction === 'y') {
       dx = 0;
     }
+    return [dx, dy] as Point;
+  }
 
+  private clampByRange([dx, dy]: Point) {
+    const { viewport, canvas } = this.context;
+
+    const [canvasWidth, canvasHeight] = canvas.getSize();
+    const [top, right, bottom, left] = parsePadding(this.options.range);
+    const range = [canvasHeight * top, canvasWidth * right, canvasHeight * bottom, canvasWidth * left];
+    const scrollableArea = getExpandedBBox(getPointBBox(viewport!.getCanvasCenter()), range);
+
+    const nextViewportCenter = subtract(viewport!.getViewportCenter(), [dx, dy, 0]);
+    if (!isPointInBBox(nextViewportCenter, scrollableArea)) {
+      const {
+        min: [minX, minY],
+        max: [maxX, maxY],
+      } = scrollableArea;
+
+      if ((nextViewportCenter[0] < minX && dx > 0) || (nextViewportCenter[0] > maxX && dx < 0)) {
+        dx = 0;
+      }
+      if ((nextViewportCenter[1] < minY && dy > 0) || (nextViewportCenter[1] > maxY && dy < 0)) {
+        dy = 0;
+      }
+    }
     return [dx, dy] as Point;
   }