mirror of
https://gitee.com/antv/g6.git
synced 2024-12-05 13:18:40 +08:00
203 lines
5.4 KiB
Markdown
203 lines
5.4 KiB
Markdown
---
|
||
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`。
|