g6/docs/api/Behavior.zh.md
2020-11-13 22:33:15 +08:00

203 lines
5.4 KiB
Markdown
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

---
title: 复合交互及其自定义 Behavior
order: 13
---
Behavior 指 G6 中的复合交互,一般 Behavior 包含一个或多个事件的监听与处理以及一系列对图中元素的操作。
Behavior 默认包含 `shouldBegin``shouldUpdate``shouldEnd` 三个回调,代表是否开始行为,是否更新元素,是否进行结束行为,当返回值为 `false` 时阻止默认行为。
所有内置 Behavior 及其参数参见 [内置的 Behavior 教程](/zh/docs/manual/middle/states/defaultBehavior)。当 [内置 Behavior](/zh/docs/manual/middle/states/defaultBehavior) 不能满足需求时,使用 `registerBehavior(behaviorName, behavior)` 方法注册自定义的交互行为。详见 [Behavior API](/zh/docs/api/Behavior)。本文将介绍如何自定义 Behavior。
```ts
// highlight-start
G6.registerBehavior(behaviorName: string, behavior: BehaviorOption)
// highlight-end
// Custom a type of Behavior
G6.registerBehavior('behaviorName', {
// Bind the event and its callback
getEvents() {
return {
'node:click': 'onClick',
mousemove: 'onMousemove',
'edge:click': 'onEdgeClick',
};
},
/**
* Handle the callback for node:click
* @override
* @param {Object} evt The handler
*/
onClick(evt) {
const node = evt.item;
const graph = this.graph;
const point = { x: evt.x, y: evt.y };
const model = node.getModel();
// TODO
},
/**
* Handle the callback for mousemove
* @override
* @param {Object} evt The handler
*/
onMousemove(evt) {
// TODO
},
/**
* Handle the callback for :click
* @override
* @param {Object} evt The handler
*/
onEdgeClick(evt) {
// TODO
},
});
```
## 参数
| 名称 | 类型 | 是否必选 | 描述 |
| --- | --- | --- | --- |
| behaviorName | String | true | 自定义 Behavior 的名称。 |
| behavior | BehaviorOption | true | 自定义 behavior 时的配置项,配置项中包括的方法及作用具体请参考:[Behavior API](/zh/docs/api/Behavior)。 |
### BehaviorOption.getEvents()
自定义 Behavior 时,定义事件及处理事件的方法。
`getEvents()` 方法中可以使用的事件请参考[Event 文档](/zh/docs/api/Event)。
**用法**
```javascript
G6.registerBehavior('behaviorName', {
getEvents() {
return {
'node:click': 'onNodeClick',
'edge:click': 'onEdgeClick',
'mousemove': 'onMouseMove'
}
}
}
```
### BehaviorOption.onNodeClick(evt)
`onNodeClick`、`onEdgeClick` 和 `onMouseMove` 都属于自定义方法,用于处理 `node:click`、`edge:click`、`mousemove` 事件。
**参数**
| 名称 | 类型 | 是否必选 | 描述 |
| ---- | ----- | -------- | -------------------------------------- |
| evt | Event | 否 | 包含事件句柄、当前操作对象及各坐标值等 |
**参数 `evt` 包括以下属性:**
| 名称 | 类型 | 描述 |
| ---------------- | ---------- | ------------------ |
| x | Number | 元素视口 x 坐标 |
| y | Number | 元素视口 y 坐标 |
| canvasX | Number | 元素 Canvas x 坐标 |
| canvasY | Number | 元素 Canvas y 坐标 |
| clientX | Number | 屏幕/页面 x 坐标 |
| clientY | Number | 屏幕/页面 y 坐标 |
| event | MouseEvent | 事件句柄 |
| target | Shape | 当前对象 |
| type | String | 操作类型 |
| currentTarget | Object | |
| item | Shape | 操作的目标元素 |
| removed | Boolean | 是否删除/销毁 |
| timeStamp | Number | 时间戳 |
| bubbles | Boolean | 是否支持事件冒泡 |
| defaultPrevented | Boolean | 是否阻止默认事件 |
| cancelable | Boolean | 是否取消 |
**用法**
```javascript
G6.registerBehavior('behaviorName', {
getEvents() {
return {
'node:click': 'onNodeClick',
'edge:click': 'onEdgeClick',
mousemove: 'onMouseMove',
};
},
onNodeClick(evt) {
// TODO
},
onEdgeClick(evt) {
// TODO
},
onMouseMove(evt) {
// TODO
},
});
```
### BehaviorOption.getDefaultCfg()
定义自定义 Behavior 时的默认参数,会与用户传入的参数进行合并。
**提示:该方法是可选的**
**用法**
```javascript
G6.registerBehavior('behaviorName', {
getDefaultCfg() {
return {
trigger: 'click' // mouseneter or click
}
}
}
```
### BehaviorOption.shouldBegin(evt)
是否阻止行为发生,默认返回 `true`,不阻止行为,需要在处理逻辑中自行调用。
**用法**
```javascript
G6.registerBehavior('behaviorName', {
shouldBegin() {
// 这里可以根据业务自定义
return true
}
}
```
### BehaviorOption.shouldUpdate(evt)
是否更新数据及更改视图,默认返回 `true`,允许更新,如果返回 `false`,则不更新数据和视图。
**用法**
```javascript
const graph = new G6.Graph({
container: 'mountNode',
width: 500,
height: 500,
modes: {
default: [
'drag-canvas',
{
type: 'self-behavior',
shouldUpdate: (e) => {
if (e.target.type !== 'text') {
return false;
}
return true;
},
},
],
},
});
```
### BehaviorOption.shouldEnd(evt)
是否结束行为,默认返回 `true`