diff --git a/docs/api/Event.en.md b/docs/api/Event.en.md
index a635f65b0a..897d1045e3 100644
--- a/docs/api/Event.en.md
+++ b/docs/api/Event.en.md
@@ -110,13 +110,21 @@ Before and after being called some functions, G6 exports the timing events.
| afteritemrefresh | Activated after `refreshItem` being called. |
| beforeitemstatesclear | Activated before `clearItemStates` being called. |
| afteritemstatesclear | Activated after `clearItemStates` being called. |
+| beforemodechange | Activated before `setMode` / `addBehaviors` / `removeBehaviors` being called. |
+| aftermodechange | Activated after `setMode` / `addBehaviors` / `removeBehaviors` being called. |
| beforelayout | Activated before graph layout. `render` will layout the graph, so `render` will activate this event as well. |
| afterlayout | Activated after graph layout being done. `render` will layout the graph, so `render` will activate this event as well. |
+| afteractivaterelations | Activated while activating a node by `'activate-relations'` Behavior which is assigned to the the instance of Graph. |
+| nodeselectchange | Activated while the selected items are changed by `'brush-select'` or `'click-select'` Behavior which is assigned to the instance of Graph. |
+| itemcollapsed | Activated while a node is clicked to collapse or expand by `'collapse-expand'` Behavior which is assigned to the instance of TreeGraph. |
+| tooltipchange | Activated after the show/hide state is changed by `'tooltip'` or `'edge-tooltip'` Behavior which is assigned to the instance of Graph. |
+| wheelzoom | Activated after the canvas being zoomed by `'zoom-canvas'` Behavior which is assigned to the instance of Graph. |
+### Callback Parameters
The callback paramters are different from custom events.
-### beforeadditem
+#### beforeadditem
| Name | Type | Description |
| --- | --- | --- |
@@ -124,7 +132,7 @@ The callback paramters are different from custom events.
| model | Object | The data model of the item to be added. |
-### afteradditem
+#### afteradditem
| Name | Type | Description |
| --- | --- | --- |
@@ -132,14 +140,14 @@ The callback paramters are different from custom events.
| model | Object | The data model of the added item. |
-### beforeremoveitem / afterremoveitem
+#### beforeremoveitem / afterremoveitem
| Name | Type | Description |
| --- | --- | --- |
| item | Item | The removed item. |
-### beforeupdateitem / afterupdateitem
+#### beforeupdateitem / afterupdateitem
| Name | Type | Description |
| --- | --- | --- |
@@ -147,7 +155,7 @@ The callback paramters are different from custom events.
| model | Object | The data model of the item to be updated. |
-### beforeitemvisibilitychange / afteritemvisibilitychange
+#### beforeitemvisibilitychange / afteritemvisibilitychange
| Name | Type | Description |
| --- | --- | --- |
@@ -155,7 +163,7 @@ The callback paramters are different from custom events.
| visible | Boolean | Whether the item is visible. `true` for visible, `false` for invisible. |
-### beforeitemstatechange / afteritemstatechange
+#### beforeitemstatechange / afteritemstatechange
| Name | Type | Description |
| --- | --- | --- |
@@ -164,7 +172,7 @@ The callback paramters are different from custom events.
| enabled | Boolean | Wheter the state is enabled. `true` for enabled, `false` for unabled. |
-### beforeitemstatesclear / afteritemstatesclear
+#### beforeitemstatesclear / afteritemstatesclear
| Name | Type | Description |
| --- | --- | --- |
@@ -172,8 +180,61 @@ The callback paramters are different from custom events.
| states | Array / String | The states to be cleared. |
-### beforeitemrefresh / afteritemrefresh
+#### beforemodechange / aftermodechange
+
+| Name | Type | Description |
+| --- | --- | --- |
+| mode | String | The name of current mode. |
+
+
+#### beforeitemrefresh / afteritemrefresh
| Name | Type | Description |
| --- | --- | --- |
| item | Item | The manipulated item. |
+
+
+#### beforelayout / afterlayout
+
+No parameters.
+
+
+#### afteractivaterelations
+
+| Name | Type | Description |
+| --- | --- | --- |
+| item | Item | The manipulated item. |
+| action | String | The name of the manipulation. |
+
+
+#### nodeselectchange
+
+| Name | Type | Description |
+| --- | --- | --- |
+| target | Item | The manipulated item. |
+| selectedItems | Object | All selected items, formed as `{ nodes: [...], edges: [...]}`. |
+
+
+#### itemcollapsed
+
+| Name | Type | Description |
+| --- | --- | --- |
+| item | Item | The manipulated item. |
+| collapsed | Boolean | The collapsed state of the manipulated item after this operation. |
+
+
+#### tooltipchange
+
+| Name | Type | Description |
+| --- | --- | --- |
+| item | Item | The manipulated item. |
+| action | String | The `'show'` or `'hide'` state of this tooltip. |
+
+
+#### wheelzoom
+
+| Name | Type | Description |
+| --- | --- | --- |
+| deltaX | Number | The x-axis direction of the wheel scroll, value is `1`, `0`, or `-1`, where `0` means no scrolling on this direction. |
+| deltaY | Number | The y-axis direction of the wheel scroll, value is `1`, `0`, or `-1`, where `0` means no scrolling on this direction. |
+| ... Other parameters of wheel event. | | |
diff --git a/docs/api/Event.zh.md b/docs/api/Event.zh.md
index e8c10ab9e7..8a00cca668 100644
--- a/docs/api/Event.zh.md
+++ b/docs/api/Event.zh.md
@@ -110,13 +110,22 @@ order: 6
| afteritemrefresh | 调用 `refreshItem` 方法之后触发 |
| beforeitemstatesclear | 调用 `clearItemStates` 方法之前触发 |
| afteritemstatesclear | 调用 `clearItemStates` 方法之后触发 |
+| beforemodechange | 调用 `setMode` / `addBehaviors` / `removeBehaviors` 方法之前触发 |
+| aftermodechange | 调用 `setMode` / `addBehaviors` / `removeBehaviors` 方法之后触发 |
| beforelayout | 布局前触发。调用 `render` 时会进行布局,因此 `render` 时会触发。或用户主动调用图的 `layout` 时触发。 |
| afterlayout | 布局完成后触发。调用 `render` 时会进行布局,因此 `render` 时布局完成后会触发。或用户主动调用图的 `layout` 时布局完成后触发。 |
+| afteractivaterelations | 使用了 `'activate-relations'` Behavior 并触发了该行为后,该事件被触发 |
+| nodeselectchange | 使用了 `'brush-select'` 或 `'click-select'` Behavior 且选中元素发生变化时,该事件被触发 |
+| itemcollapsed | 在 TreeGraph 上使用了 `'collapse-expand'` Behavior 并触发了该行为后,该事件被触发 |
+| tooltipchange | 使用了 `'tooltip'` 或 `'edge-tooltip'` Behavior 且 tooltip 的显示/隐藏被改变后,该事件被触发 |
+| wheelzoom | 使用了 `'zoom-canvas'` Behavior 并用滚轮对图进行缩放后,该事件被触发 |
-不同自定义事件的回调参数不同,下面针对各个自定义事件的回调参数进行说明。
+### 回调参数
-### beforeadditem
+不同时机监听事件的回调参数不同,下面针对各个自定义事件的回调参数进行说明。
+
+#### beforeadditem
| 名称 | 类型 | 描述 |
| --- | --- | --- |
@@ -124,7 +133,7 @@ order: 6
| model | Object | item 数据模型 |
-### afteradditem
+#### afteradditem
| 名称 | 类型 | 描述 |
| --- | --- | --- |
@@ -132,14 +141,14 @@ order: 6
| model | Object | item 数据模型 |
-### beforeremoveitem / afterremoveitem
+#### beforeremoveitem / afterremoveitem
| 名称 | 类型 | 描述 |
| --- | --- | --- |
| item | Item | 要删除的 item 实例 |
-### beforeupdateitem / afterupdateitem
+#### beforeupdateitem / afterupdateitem
| 名称 | 类型 | 描述 |
| --- | --- | --- |
@@ -147,7 +156,7 @@ order: 6
| model | Object | item 数据模型 |
-### beforeitemvisibilitychange / afteritemvisibilitychange
+#### beforeitemvisibilitychange / afteritemvisibilitychange
| 名称 | 类型 | 描述 |
| --- | --- | --- |
@@ -155,7 +164,7 @@ order: 6
| visible | Boolean | 是否可见,`true` 为可见,`false` 为不可见 |
-### beforeitemstatechange / afteritemstatechange
+#### beforeitemstatechange / afteritemstatechange
| 名称 | 类型 | 描述 |
| --- | --- | --- |
@@ -164,7 +173,7 @@ order: 6
| enalbed | Boolean | 状态是否可用,`true` 可用,`false` 不可用 |
-### beforeitemstatesclear / afteritemstatesclear
+#### beforeitemstatesclear / afteritemstatesclear
| 名称 | 类型 | 描述 |
| --- | --- | --- |
@@ -172,8 +181,61 @@ order: 6
| states | Array / String | 需要批量清除的状态 |
-### beforeitemrefresh / afteritemrefresh
+#### beforemodechange / aftermodechange
+
+| 名称 | 类型 | 描述 |
+| --- | --- | --- |
+| mode | String | 当前的模式名称 |
+
+
+#### beforeitemrefresh / afteritemrefresh
| 名称 | 类型 | 描述 |
| --- | --- | --- |
| item | Item | 当前操作的 item 实例 |
+
+
+#### beforelayout / afterlayout
+
+无参数
+
+
+#### afteractivaterelations
+
+| 名称 | 类型 | 描述 |
+| --- | --- | --- |
+| item | Item | 当前操作的 item 实例 |
+| action | String | 当前操作名 |
+
+
+#### nodeselectchange
+
+| 名称 | 类型 | 描述 |
+| --- | --- | --- |
+| target | Item | 当前操作的 item 实例 |
+| selectedItems | Object | 当前被选中的所有 item 实例,形如 `{ nodes: [...], edges: [...]}` |
+
+
+#### itemcollapsed
+
+| 名称 | 类型 | 描述 |
+| --- | --- | --- |
+| item | Item | 当前操作的 item 实例 |
+| collapsed | Boolean | 当前操作后,操作对象的 collapsed 状态 |
+
+
+#### tooltipchange
+
+| 名称 | 类型 | 描述 |
+| --- | --- | --- |
+| item | Item | 当前操作的 item 实例 |
+| action | String | tooltip 当前是显示 `'show'` 还是隐藏 `'hide'` |
+
+
+#### wheelzoom
+
+| 名称 | 类型 | 描述 |
+| --- | --- | --- |
+| deltaX | Number | 滚动的 x 方向,取值 `1`,`0`,`-1`,`0` 代表没有该方向的滚动 |
+| deltaY | Number | 滚动的 y 方向,取值 `1`,`0`,`-1`,`0` 代表没有该方向的滚动 |
+| ... 其他滚轮事件的回调参数 | | |
diff --git a/docs/manual/middle/elements/nodes/modelRect.en.md b/docs/manual/middle/elements/nodes/modelRect.en.md
index cd5ff92331..d0423cc8e5 100644
--- a/docs/manual/middle/elements/nodes/modelRect.en.md
+++ b/docs/manual/middle/elements/nodes/modelRect.en.md
@@ -67,7 +67,7 @@ The [Node Common Properties](/en/docs/manual/middle/elements/nodes/defaultNode/#
| **logoIcon** | **The left logo icon** | **Object** | **Special property for modelRect** |
| **stateIcon** | **The right state icon** | **Object** | **Special property for modelRect** |
| **description** | **The description text below the label** | **String** | **Special property for modelRect** |
-| ~~**descriptionCfg**~~
*It will be supported after V3.3* | ~~**The configuration for description text**~~ | ~~**Object**~~ | ~~**Special property for modelRect**~~ |
+| **descriptionCfg**
*It is supported after V3.3* | **The configuration for description text** | **Object** | **Special property for modelRect** |
```javascript
@@ -152,7 +152,7 @@ const graph = new G6.Graph({
```
-### ~~descriptionCfg~~
+### descriptionCfg
⚠️**Attension:** *It will be supported after V3.3.*
`descriptionCfg` is an object to configure the label of the node. The [Node Common Label Configurations](/en/docs/manual/middle/elements/nodes/defaultNode/#label-and-labelcfg) are available. Besides, descriptionCfg has special attribute:
diff --git a/docs/manual/middle/elements/nodes/modelRect.zh.md b/docs/manual/middle/elements/nodes/modelRect.zh.md
index 478a0ec5f8..a43bcff057 100644
--- a/docs/manual/middle/elements/nodes/modelRect.zh.md
+++ b/docs/manual/middle/elements/nodes/modelRect.zh.md
@@ -66,7 +66,7 @@ modelRect 节点支持 [节点通用配置](/zh/docs/manual/middle/elements/node
| **logoIcon** | **左侧的 logo 图标** | **Object** | **modelRect 节点特有** |
| **stateIcon** | **右侧的状态图标** | **Object** | **modelRect 节点特有** |
| **description** | **节点主要文本下方的描述文本** | **String** | **modelRect 节点特有** |
-| ~~**descriptionCfg**~~
*将在 V3.3 版本后支持* | ~~**描述文本的配置项**~~ | ~~**Object**~~ | ~~**modelRect 节点特有**~~ |
+| **descriptionCfg**
*在 V3.3 版本后支持* | **描述文本的配置项** | **Object** | **modelRect 节点特有** |
```javascript
@@ -151,7 +151,7 @@ const graph = new G6.Graph({
```
-### ~~描述文本配置 descriptionCfg~~
+### 描述文本配置 descriptionCfg
⚠️**注意:** *将在 V3.3 版本后支持。*
Object 类型。通过 `descriptionCfg` 配置标签文本。支持 [节点通用标签配置](/zh/docs/manual/middle/elements/nodes/defaultNode/#标签文本-label-及其配置-labelcfg)。此外,还有一个特殊属性:
diff --git a/examples/case/decisionBubbles/index.zh.md b/examples/case/decisionBubbles/index.zh.md
index a2046995a8..a65352e98d 100644
--- a/examples/case/decisionBubbles/index.zh.md
+++ b/examples/case/decisionBubbles/index.zh.md
@@ -3,4 +3,4 @@ title: 图表决策
order: 1
---
-这是一个带交互的图表决策图,辅助用户“按使用目的”寻找合适的可视化方式。该 dmeo 结合了自定义节点、自定义边、力导向布局、数据切换、交互等功能,已应用在 AntV 官网。
\ No newline at end of file
+这是一个带交互的图表决策图,辅助用户“按使用目的”寻找合适的可视化方式。该 demo 结合了自定义节点、自定义边、力导向布局、数据切换、交互等功能,已应用在 AntV 官网。
\ No newline at end of file
diff --git a/package.json b/package.json
index 706c42e763..c901859db6 100644
--- a/package.json
+++ b/package.json
@@ -50,7 +50,7 @@
"site:develop": "GATSBY=true gatsby develop --open",
"start": "npm run site:develop",
"test": "jest",
- "test-live": "DEBUG_MODE=1 jest --watch ./tests/unit/plugins/minimap-spec.ts",
+ "test-live": "DEBUG_MODE=1 jest --watch ./tests/unit/behavior/zoom-spec.ts",
"lint-staged:js": "eslint --ext .js,.jsx,.ts,.tsx",
"watch": "father build -w"
},
diff --git a/src/interface/graph.ts b/src/interface/graph.ts
index f6294a2a54..579e57dcad 100644
--- a/src/interface/graph.ts
+++ b/src/interface/graph.ts
@@ -11,6 +11,8 @@ export interface IModeOption {
updateEdge?: boolean;
trigger?: string;
enableDelegate?: boolean;
+ maxZoom?: number;
+ minZoom?: number;
shouldUpdate?: (e: IG6GraphEvent) => boolean;
shouldBegin?: (e: IG6GraphEvent) => boolean;
}