refactor(behaviors): adjust scroll-canvas (#5686)

antvis · Apr 28, 2024 · 6986bb6 · 6986bb6
1 parent d4891f7
commit 6986bb6
Show file tree

Hide file tree

Showing 3 changed files with 31 additions and 20 deletions.
diff --git a/packages/g6/__tests__/demos/behavior-scroll-canvas.ts b/packages/g6/__tests__/demos/behavior-scroll-canvas.ts
@@ -15,20 +15,28 @@ export const behaviorScrollCanvas: TestCase = async (context) => {
     },
     behaviors: [
       {
+        key: 'scroll-canvas',
         type: 'scroll-canvas',
-        // direction: 'x',
-        // direction: 'y',
-        // sensitivity: 5,
-        // trigger: {
-        //   up: ['ArrowUp'],
-        //   down: ['ArrowDown'],
-        //   right: ['ArrowRight'],
-        //   left: ['ArrowLeft'],
-        // },
       },
     ],
   });
 
+  behaviorScrollCanvas.form = (panel) => {
+    const config = {
+      direction: '',
+      sensitivity: 1,
+    };
+
+    panel.onChange(() => {
+      graph.updateBehavior({
+        key: 'scroll-canvas',
+        ...config,
+      });
+    });
+
+    return [panel.add(config, 'direction', ['xy', 'x', 'y']), panel.add(config, 'sensitivity', 1, 10, 1)];
+  };
+
   await graph.render();
 
   return graph;

diff --git a/packages/g6/__tests__/unit/behaviors/scroll-canvas.spec.ts b/packages/g6/__tests__/unit/behaviors/scroll-canvas.spec.ts
@@ -26,6 +26,7 @@ describe('behavior scroll canvas', () => {
   it('default status', () => {
     expect(graph.getBehaviors()).toEqual([
       {
+        key: 'scroll-canvas',
         type: 'scroll-canvas',
       },
     ]);

diff --git a/packages/g6/src/behaviors/scroll-canvas.ts b/packages/g6/src/behaviors/scroll-canvas.ts
@@ -11,6 +11,7 @@ export interface ScrollCanvasOptions extends BaseBehaviorOptions {
    * <zh/> 是否启用滚动画布的功能
    *
    * <en/> Whether to enable the function of scrolling the canvas
+   * @defaultValue true
    */
   enable?: boolean | ((event: WheelEvent | IKeyboardEvent) => boolean);
   /**
@@ -20,23 +21,30 @@ export interface ScrollCanvasOptions extends BaseBehaviorOptions {
    */
   trigger?: CombinationKey;
   /**
-   * <zh/> 允许的滚动方向。选项有："x"、"y"，默认情况下没有限制
+   * <zh/> 允许的滚动方向
+   * - 默认情况下没有限制
+   * - x : 只允许水平滚动
+   * - y : 只允许垂直滚动
    *
-   * <en/> The allowed rolling direction. The options are "x" and "y", with no restrictions by default
+   * <en/> The allowed rolling direction
+   * - by default, there is no restriction
+   * - x: only allow horizontal scrolling
+   * - y: only allow vertical scrolling
    */
   direction?: 'x' | 'y';
   /**
    * <zh/> 滚动灵敏度
    *
    * <en/> Scroll sensitivity
+   * @defaultValue 1
    */
   sensitivity?: number;
   /**
    * <zh/> 完成滚动时的回调
    *
    * <en/> Callback when scrolling is completed
    */
-  onfinish?: () => void;
+  onFinish?: () => void;
 }
 
 type CombinationKey = {
@@ -46,12 +54,6 @@ type CombinationKey = {
   right: ShortcutKey;
 };
 
-type EnableOptions = {
-  node?: boolean;
-  edge?: boolean;
-  combo?: boolean;
-};
-
 export class ScrollCanvas extends BaseBehavior<ScrollCanvasOptions> {
   static defaultOptions: ScrollCanvasOptions = {
     enable: true,
@@ -118,11 +120,11 @@ export class ScrollCanvas extends BaseBehavior<ScrollCanvasOptions> {
 
   private async scroll(value: Point, event: WheelEvent | IKeyboardEvent) {
     if (!this.validate(event)) return;
-    const { onfinish } = this.options;
+    const { onFinish } = this.options;
     const graph = this.context.graph;
     const formattedValue = this.formatDisplacement(value);
     await graph.translateBy(formattedValue, false);
-    onfinish?.();
+    onFinish?.();
   }
 
   private validate(event: WheelEvent | IKeyboardEvent) {