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; }