fix: drag-canvas support scalable range

CHANGELOG.md

@@ -1,5 +1,9 @@
 # ChangeLog
 
+#### 3.8.2
+- fix: drag-canvas behavior support scalable range, closes: #2136;
+- chore: auto zoom tooltip & contextMenu component when zoom-canvas;
+
 #### 3.8.1
 - fix: update edge states with updateItem problem, closes: #2142;
 - fix: create-edge behavior with polyline problem, closes: #2165;

docs/manual/middle/plugins/autoZoomTooltip.en.md

@@ -12,7 +12,7 @@ In G6, zooming the canvas is achieved through zoom-canvas Behavior. The wheelzoo
 ```javascript
 graph.on("wheelzoom", (e) => {
   e.stopPropagation();
-  // className default by g6-component-tooltip
+  // className g6-component-tooltip by default 
   const tooltips = Array.from(document.getElementsByClassName("g6-component-tooltip"));
   tooltips.forEach((tooltip) => {
     if (tooltip && tooltip.style) {

docs/manual/middle/states/defaultBehavior.en.md

@@ -105,7 +105,8 @@ const graph = new G6.Graph({
   - `type: 'drag-canvas'`;
   - `direction`: The direction of dragging that is allowed. Options: `'x'`, `'y'`, `'both'`. `'both'` by default;
   - `enableOptimize`: whether enable optimization, `false` by default. `enableOptimize: true` means hiding all edges and the shapes beside keyShapes of nodes while dragging canvas;
-  - `shouldBegin(e)`: Whether allow the behavior happen on the current item (e.item).
+  - `shouldBegin(e)`: Whether allow the behavior happen on the current item (e.item);
+  - `scalableRange`: scaleable range when drag canvas, `zero` by default.
 - Related timing events:
   - `canvas:dragstart`: Triggered when drag start. Listened by `graph.on('canvas:dragstart', e => {...})`;
   - `canvas:drag`: Triggered when dragging. Listened by `graph.on('canvas:drag', e => {...})`;

docs/manual/middle/states/defaultBehavior.zh.md

@@ -105,7 +105,11 @@ const graph = new G6.Graph({
   - `type: 'drag-canvas'`；
   - `direction`：允许拖拽方向，支持`'x'`，`'y'`，`'both'`，默认方向为 `'both'`；
   - `enableOptimize`：是否开启优化，开启后拖动画布过程中隐藏所有的边及节点上非 keyShape 部分，默认关闭；
-  - `shouldBegin(e)`：是否允许触发该操作。
+  - `shouldBegin(e)`：是否允许触发该操作；
+  - `scalableRange`：拖动 canvas 可扩展的范围，默认为 0，取值为正和负数时的效果如下图所示。
+  
+  <img src='https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*IFfoS67_HssAAAAAAAAAAAAAARQnAQ' width='650' />
+
 - 相关时机事件：
   - `canvas:dragstart`：画布拖拽开始时触发，使用 `graph.on('canvas:dragstart', e => {...})` 监听；
   - `canvas:drag`：画布拖拽中触发，使用 `graph.on('canvas:drag', e => {...})` 监听；

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@antv/g6",
-  "version": "3.8.1",
+  "version": "3.8.2",
   "description": "A Graph Visualization Framework in JavaScript",
   "keywords": [
     "antv",
@@ -50,7 +50,7 @@
     "site:deploy": "npm run site:build && gh-pages -d public",
     "start": "npm run site:develop",
     "test": "jest",
-    "test-live": "DEBUG_MODE=1 jest --watch  ./tests/unit/plugins/timebar-spec.ts",
+    "test-live": "DEBUG_MODE=1 jest --watch  ./tests/unit/behavior/drag-canvas-spec.ts",
     "lint-staged:js": "eslint --ext .js,.jsx,.ts,.tsx",
     "watch": "father build -w",
     "cdn": "antv-bin upload -n @antv/g6"

src/behavior/drag-canvas.ts

@@ -11,6 +11,11 @@ export default {
     return {
       direction: 'both',
       enableOptimize: false,
+      // drag-canvas 可拖动的扩展范围，默认为 0，即最多可以拖动一屏的位置
+      // 当设置的值大于 0 时，即拖动可以超过一屏
+      // 当设置的值小于 0 时，相当于缩小了可拖动范围
+      // 具体实例可参考：https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*IFfoS67_HssAAAAAAAAAAAAAARQnAQ
+      scalableRange: 0
     };
   },
   getEvents(): { [key in G6Event]?: string } {
@@ -39,6 +44,7 @@ export default {
     }
     let dx = clientX - origin.x;
     let dy = clientY - origin.y;
+ 
     if (this.get('direction') === 'x') {
       dy = 0;
     } else if (this.get('direction') === 'y') {
@@ -51,15 +57,16 @@ export default {
     const width = this.graph.get('width');
     const height = this.graph.get('height');
     const graphCanvasBBox = this.graph.get('canvas').getCanvasBBox();
+
     if (
-      (graphCanvasBBox.minX <= width && graphCanvasBBox.minX + dx > width) ||
-      (graphCanvasBBox.maxX >= 0 && graphCanvasBBox.maxX + dx < 0)
+      (graphCanvasBBox.minX <= width + this.scalableRange && graphCanvasBBox.minX + dx > width + this.scalableRange) ||
+      (graphCanvasBBox.maxX + this.scalableRange >= 0 && graphCanvasBBox.maxX + this.scalableRange + dx < 0)
     ) {
       dx = 0;
     }
     if (
-      (graphCanvasBBox.minY <= height && graphCanvasBBox.minY + dy > height) ||
-      (graphCanvasBBox.maxY >= 0 && graphCanvasBBox.maxY + dy < 0)
+      (graphCanvasBBox.minY <= height + this.scalableRange && graphCanvasBBox.minY + dy > height + this.scalableRange) ||
+      (graphCanvasBBox.maxY + this.scalableRange >= 0 && graphCanvasBBox.maxY + this.scalableRange + dy < 0)
     ) {
       dy = 0;
     }

src/global.ts

@@ -1,5 +1,5 @@
 export default {
-  version: '3.8.1',
+  version: '3.8.2',
   rootContainerClassName: 'root-container',
   nodeContainerClassName: 'node-container',
   edgeContainerClassName: 'edge-container',

src/types/index.ts

@@ -128,6 +128,7 @@ export interface ModeOption {
   onlyChangeComboSize?: boolean;
   includeEdges?: boolean;
   direction?: 'x' | 'y';
+  scalableRange?: number;
   offset?: number;
   fixSelectedItems?: Partial<{
     fixAll: boolean;

tests/unit/behavior/drag-canvas-spec.ts

@@ -419,7 +419,6 @@ describe('drag-canvas', () => {
     edges.forEach(edge => {
       const children = edge.getContainer().get('children');
       children.forEach(child => {
-        console.log(child)
         expect(child.get('visible')).toEqual(false);
       });
     })
@@ -442,4 +441,53 @@ describe('drag-canvas', () => {
       });
     })
   });
+
+  it('drag canvas with scalableRange', () => {
+    const graph = new Graph({
+      container: div,
+      width: 500,
+      height: 500,
+      modes: {
+        default: [{
+          type: 'drag-canvas',
+          scalableRange: -150
+        }],
+      },
+    });
+    graph.data(data);
+    graph.render();
+    let start = false;
+    graph.on('canvas:dragstart', () => {
+      start = true;
+    });
+    graph.on('canvas:dragend', () => {
+      start = false;
+    });
+    graph.paint();
+    graph.emit('dragstart', { clientX: 150, clientY: 150 });
+    graph.emit('drag', { clientX: 200, clientY: 200 });
+    expect(start).toBe(true);
+    graph.emit('drag', { clientX: 250, clientY: 250 });
+    expect(start).toBe(true);
+    let matrix = graph.get('group').getMatrix();
+    expect(matrix[6]).toEqual(100);
+    expect(matrix[7]).toEqual(100);
+
+    graph.emit('drag', { clientX: 400, clientY: 350 });
+    matrix = graph.get('group').getMatrix();
+    expect(matrix[6]).toEqual(250);
+    expect(matrix[7]).toEqual(200);
+    expect(start).toBe(true);
+
+    // 超过了设置的范围，则不再移动
+    graph.emit('drag', { clientX: 550, clientY: 550 });
+    matrix = graph.get('group').getMatrix();
+    expect(matrix[6]).toEqual(250);
+    expect(matrix[7]).toEqual(200);
+    expect(start).toBe(true);
+
+    graph.emit('dragend', {});
+    expect(start).toBe(false);
+    graph.destroy();
+  });
 });

tests/unit/behavior/index-spec.ts

@@ -99,7 +99,7 @@ describe('Default Behavior', () => {
 
     const dragCanvas: IBehavior = new DragCanvas();
     const config = dragCanvas.getDefaultCfg();
-    expect(config).toEqual({ direction: 'both', enableOptimize: false });
+    expect(config).toEqual({ direction: 'both', enableOptimize: false, scalableRange: 0 });
 
     const events = dragCanvas.getEvents();
     const keys = Object.keys(events);