mirror of
https://gitee.com/antv/g6.git
synced 2024-12-09 15:18:08 +08:00
203 lines
5.9 KiB
Markdown
203 lines
5.9 KiB
Markdown
---
|
|
title: Behavior and RegisterBehavior
|
|
order: 13
|
|
---
|
|
|
|
Behavior is the compound interactions in G6. In general, a Behavior includes one or more event listeners and a set of item operations.
|
|
|
|
By default, Behavior has three callbacks: `shouldBegin`, `shouldUpdate`, and `shouldEnd`, representing the beginning of the behavior, whether to update the items, the ending of the behavior respectively. If they return `false`, the default behavior will be prevented.
|
|
|
|
This document is going to introduce how to customize a behavior. The infomation about the built-in behaviors can be found in the [Built-in Behaviors](/en/docs/manual/middle/states/defaultBehavior). When the [built-in Behaviors](/en/docs/manual/middle/states/defaultBehavior) cannot satisfy your requirments, custom a type of Behavior by `G6.registerBehavior(behaviorName, behavior)`. See [Behavior API](/en/docs/api/Behavior) for detail.
|
|
|
|
```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
|
|
},
|
|
});
|
|
```
|
|
|
|
## Parameters
|
|
|
|
| Name | Type | Required | Description |
|
|
| --- | --- | --- | --- |
|
|
| behaviorName | String | true | The name of custom Behavior. |
|
|
| behavior | BehaviorOption | true | The configurations of custom Behavior. For more information, please refer to [Behavior API](/en/docs/api/Behavior). |
|
|
|
|
### BehaviorOption.getEvents()
|
|
|
|
Define and handle events when user customize a Behavior.
|
|
|
|
The usage of `getEvents()` can be refered to [Event](/en/docs/api/Event)。
|
|
|
|
**Usage**
|
|
|
|
```javascript
|
|
G6.registerBehavior('behaviorName', {
|
|
getEvents() {
|
|
return {
|
|
'node:click': 'onNodeClick',
|
|
'edge:click': 'onEdgeClick',
|
|
'mousemove': 'onMouseMove'
|
|
}
|
|
}
|
|
}
|
|
```
|
|
|
|
### BehaviorOption.onNodeClick(evt)
|
|
|
|
`onNodeClick`, `onEdgeClick`, and `onMouseMove` are custom events for handling `node:click`, `edge:click`, and `mousemove`.
|
|
|
|
**Parameters**
|
|
|
|
| Name | Type | Required | Description |
|
|
| ---- | ----- | -------- | -------------------------------------------------------- |
|
|
| evt | Event | false | contains event handler, current target, and coordinates. |
|
|
|
|
**The parameter `evt` contains:**
|
|
|
|
| Name | Type | Description |
|
|
| ---------------- | ---------- | ------------------------------------------ |
|
|
| x | Number | x coordinate of view port. |
|
|
| y | Number | y coordinate of view port. |
|
|
| canvasX | Number | x coordinate of the canvas. |
|
|
| canvasY | Number | y coordinate of the canvas. |
|
|
| clientX | Number | x coordinate of the client / screen. |
|
|
| clientY | Number | y coordinate of the client / screen. |
|
|
| event | MouseEvent | Event handler. |
|
|
| target | Shape | The target. |
|
|
| type | String | Operation type. |
|
|
| currentTarget | Object | |
|
|
| item | Shape | The target item. |
|
|
| removed | Boolean | Whether the target is removed / destroyed. |
|
|
| timeStamp | Number | The time stamp. |
|
|
| bubbles | Boolean | Whether it is a bubbled event. |
|
|
| defaultPrevented | Boolean | Whether to prevent the default event. |
|
|
| cancelable | Boolean | Whether it is cancelable. |
|
|
|
|
**Usage**
|
|
|
|
```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()
|
|
|
|
Default configurations while customing a Behavior. The configurations will be mixed by the configurations from user.
|
|
|
|
**Tips: This function is not required**.
|
|
|
|
**Usage**
|
|
|
|
```javascript
|
|
G6.registerBehavior('behaviorName', {
|
|
getDefaultCfg() {
|
|
return {
|
|
trigger: 'click' // mouseneter or click
|
|
}
|
|
}
|
|
}
|
|
```
|
|
|
|
### BehaviorOption.shouldBegin(evt)
|
|
|
|
Whether to prevent the behavior. Return `true` by default, which means do not prevent the behavior. User should call it by themselves.
|
|
|
|
**Usage**
|
|
|
|
```javascript
|
|
G6.registerBehavior('behaviorName', {
|
|
shouldBegin() {
|
|
// Customize it according to your scenario
|
|
return true;
|
|
},
|
|
});
|
|
```
|
|
|
|
### BehaviorOption.shouldUpdate(evt)
|
|
|
|
Whether to update the data and the view. Returns `true` by default, which means allow updating.
|
|
|
|
**Usage**
|
|
|
|
```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)
|
|
|
|
Whether to end the behavior. Returns `true` by default.
|