From 5e84bcf859dfa1471aa278d0021aa0c619767076 Mon Sep 17 00:00:00 2001 From: Yanyan-Wang Date: Tue, 13 Apr 2021 11:42:02 +0800 Subject: [PATCH] docs: update the scroll-canvas docs --- CHANGELOG.md | 1 + .../middle/states/defaultBehavior.en.md | 51 ++++++++++++++++++- .../middle/states/defaultBehavior.zh.md | 49 +++++++++++++++++- .../algorithm/algoDemos/demo/louvain.js | 2 +- 4 files changed, 100 insertions(+), 3 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 221aa0ef999..373d2e7ff5a 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -4,6 +4,7 @@ - feat: scroll-canvas behavior; - feat: iconfont for node icon; +- feat: percentage of scalable range for drag-canvas; - fix: missing brushStyle in type ModeOption; - fix: the comboId remains in the node after uncombo(), closes #2801; - fix: disappearing edges when combos are expanded/collapsed, closes #2798; diff --git a/packages/site/docs/manual/middle/states/defaultBehavior.en.md b/packages/site/docs/manual/middle/states/defaultBehavior.en.md index 69eb57a6e9a..bfcbbd6db67 100644 --- a/packages/site/docs/manual/middle/states/defaultBehavior.en.md +++ b/packages/site/docs/manual/middle/states/defaultBehavior.en.md @@ -106,7 +106,10 @@ const graph = new G6.Graph({ - `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); - - `scalableRange`: scaleable range when drag canvas, `zero` by default; + - `scalableRange`: scalable range when drag canvas, `zero` by default. -1 to 1 means the scalable percentage of the viewport; the image bellow illustrate the situation when it is smaller than -1 or bigger than 1: + + + - `allowDragOnItem`: whether response when the users drag on items(node/edge/combo), `false` by default; - Related timing events: - `canvas:dragstart`: Triggered when drag start. Listened by `graph.on('canvas:dragstart', e => {...})`; @@ -142,6 +145,51 @@ const graph = new G6.Graph({ The canvas can be dragged along x direction only.
img + +### scroll-canvas + +- Description: Scroll the canvas by wheeling, *supported after v4.2.6*; +- Configurations: + - `type: 'scroll-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; + - `zoomKey`: switch to zooming while pressing the key and wheeling. Options: `'shift'`, `'ctrl'`, `'alt'`, `'control'`; + - `scalableRange`: scalable range when drag canvas, `zero` by default. -1 to 1 means the scalable percentage of the viewport; the image bellow illustrate the situation when it is smaller than -1 or bigger than 1: + + + +- Related timing events: + - `wheel`: Triggered when wheeling. Listened by `graph.on('wheel', e => {...})`. + +**Using Default Configuration** + +```javascript +const graph = new G6.Graph({ + modes: { + default: ['drag-canvas'], + }, +}); +``` + +By default, the x and y directions are both allowed. + +**Using Customized Configuration** + +```javascript +const graph = new G6.Graph({ + modes: { + default: [ + { + type: 'drag-canvas', + direction: 'x', + }, + ], + }, +}); +``` + +The canvas can be dragged along x direction only.
img + ### zoom-canvas - Description: Zoom the canvas; @@ -163,6 +211,7 @@ The canvas can be dragged along x direction only.
@@ -146,6 +146,53 @@ const graph = new G6.Graph({ 此时只能在 x 方向上面拖动，y 方向上不允许拖动。
img + +### scroll-canvas + +- 含义：滚轮滚动画布，*v4.2.6 起支持*； +- 配置项： + + - `type: 'scroll-canvas'`； + - `direction`：允许拖拽方向，支持`'x'`，`'y'`，`'both'`，默认方向为 `'both'`； + - `enableOptimize`：是否开启优化，开启后拖动画布过程中隐藏所有的边及节点上非 keyShape 部分，默认关闭； + - `zoomKey`：切换为滚动缩放的键盘按钮，按住该键并滚动滚轮，则切换为滚轮缩放画布，可选项为：`'shift'`，`'ctrl'`，`'alt'`，`'control'`； + - `scalableRange`：拖动 canvas 可扩展的范围，默认为 0，值为 -1 ～ 1 代表可超出视口的范围的比例值（相对于视口大小）。值小于 -1 或大于 1 时，为正和负数时的效果如下图所示。 + + + +- 相关时机事件： + - `onWheel`：滚轮滚动时触发，使用 `graph.on('onWheel', e => {...})` 监听。 + +**使用默认配置** + +```javascript +const graph = new G6.Graph({ + modes: { + default: ['scroll-canvas'], + }, +}); +``` + +默认配置下，可以在 x 和 y 两个方向上滚动画布。 + +**使用自定义参数** + +```javascript +const graph = new G6.Graph({ + modes: { + default: [ + { + type: 'scroll-canvas', + direction: 'x', + }, + ], + }, +}); +``` + +此时只能在 x 方向上面滚动，y 方向上不允许滚动。
img + + ### zoom-canvas - 含义：缩放画布； diff --git a/packages/site/examples/algorithm/algoDemos/demo/louvain.js b/packages/site/examples/algorithm/algoDemos/demo/louvain.js index a6b5b20b1bf..79e0be306fb 100644 --- a/packages/site/examples/algorithm/algoDemos/demo/louvain.js +++ b/packages/site/examples/algorithm/algoDemos/demo/louvain.js @@ -34,7 +34,7 @@ const graph = new G6.Graph({ default: ['drag-canvas', 'drag-node', 'zoom-canvas'], }, layout: { - // type: 'gForce', + type: 'gForce', minMovement: 0.1, }, });