From 6986bb61b7390962f41c571a6c844980e66e2962 Mon Sep 17 00:00:00 2001
From: Aaron <yangtao.yangtao@antgroup.com>
Date: Sun, 28 Apr 2024 13:44:01 +0800
Subject: [PATCH] refactor(behaviors): adjust scroll-canvas (#5686)

---
 .../__tests__/demos/behavior-scroll-canvas.ts | 26 ++++++++++++-------
 .../unit/behaviors/scroll-canvas.spec.ts      |  1 +
 packages/g6/src/behaviors/scroll-canvas.ts    | 24 +++++++++--------
 3 files changed, 31 insertions(+), 20 deletions(-)

diff --git a/packages/g6/__tests__/demos/behavior-scroll-canvas.ts b/packages/g6/__tests__/demos/behavior-scroll-canvas.ts
index 0a321d170d3..8a2d6268a29 100644
--- 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
index 834983d6da6..3c84a309cb1 100644
--- 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
index 5493c6c599c..85c89048f66 100644
--- 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,15 +21,22 @@ 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;
   /**
@@ -36,7 +44,7 @@ export interface ScrollCanvasOptions extends BaseBehaviorOptions {
    *
    * <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) {