mirror of
https://gitee.com/antv/g6.git
synced 2024-12-15 18:11:08 +08:00
439 lines
9.1 KiB
Markdown
439 lines
9.1 KiB
Markdown
---
|
||
title: item.*
|
||
order: 0
|
||
---
|
||
|
||
Item is the object of node / edge in G6.
|
||
|
||
## Update
|
||
|
||
### item.update(model)
|
||
|
||
Update the item according to the data model.
|
||
|
||
**Parameters**
|
||
|
||
| Name | Type | Required | Description |
|
||
| ----- | ------ | -------- | --------------------------- |
|
||
| model | Object | true | The data model of the item. |
|
||
|
||
Tips: `model` contains:
|
||
|
||
| Name | Type | Required | Description |
|
||
| --- | --- | --- | --- |
|
||
| id | String | true | The unique id of the item. |
|
||
| style | Object | false | The style of the item. |
|
||
| type | String | false | The type of the item. The default type for edge is 'line', the default type for node is 'circle'. The default shapes will take effect when `type` is null. |
|
||
| label | String | false | The label of the item. A label will be rendered if it exists. |
|
||
|
||
**Usage**
|
||
|
||
```javascript
|
||
const model = {
|
||
id: 'node',
|
||
type: 'rect',
|
||
label: 'node',
|
||
style: {
|
||
fill: 'red',
|
||
},
|
||
};
|
||
|
||
item.update(model);
|
||
```
|
||
|
||
### item.refresh()
|
||
|
||
Refresh the item with its positions and style in the item's data model. This operation will clear the cache in the same time.
|
||
|
||
It is usually called after:
|
||
|
||
- The data model of item is changed;
|
||
- The positions of endpoints of an edge is changed.
|
||
|
||
**Usage**
|
||
|
||
```javascript
|
||
item.refresh();
|
||
```
|
||
|
||
### item.updatePosition(cfg)
|
||
|
||
Update the position of the item. We recommend to call this function for single item to avoid repainting the whole canvas.
|
||
|
||
**Parameters**
|
||
|
||
| Name | Type | Required | Description |
|
||
| --- | --- | --- | --- |
|
||
| cfg | Object | true | The configurations of the item, including `x` and `y`. The x and y value in source data model will take effect if there are no `x` and `y` in `cfg`. |
|
||
|
||
**Usage**
|
||
|
||
```javascript
|
||
const cfg = {
|
||
x: 100,
|
||
y: 200,
|
||
};
|
||
// There are x and y in cfg, so the operation below will update the position
|
||
item.updatePosition(cfg);
|
||
|
||
const cfg1 = {
|
||
name: 'abc',
|
||
dept: 'antv',
|
||
};
|
||
// There are no x and y in cfg, the operation below will use x and y in item.getModel()
|
||
item.updatePosition(cfg1);
|
||
```
|
||
|
||
## Destroy
|
||
|
||
### item.destroy()
|
||
|
||
Destroy an item, including stopping the animation, deleting the items in a group, clearing the configurations, setting the `destroyed` to be `true`, and so on.
|
||
|
||
**Usage**
|
||
|
||
```javascript
|
||
item.destroy();
|
||
```
|
||
|
||
## Common Usage
|
||
|
||
### item.getBBox()
|
||
|
||
Get the **bounding box** of the item.
|
||
|
||
**Return**
|
||
|
||
- The type of return value: Object.
|
||
|
||
The return value includes:
|
||
|
||
| Name | Type | Description |
|
||
| ------- | ------ | ------------------------------------------- |
|
||
| x | number | The x coordinate of view port. |
|
||
| y | number | The y coordinate of view port. |
|
||
| width | number | The width of the bbox. |
|
||
| height | number | The height of the bbox. |
|
||
| centerX | number | The x coordinate of the center of the bbox. |
|
||
| centerY | number | The y coordinate of the center of the bbox. |
|
||
|
||
**Usage**
|
||
|
||
```javascript
|
||
item.getBBox();
|
||
```
|
||
|
||
### item.getContainer()
|
||
|
||
Get the container of the item.
|
||
|
||
**Return**
|
||
|
||
- The type of return value: G.Group;
|
||
- Return the graphics group where the item in.
|
||
|
||
**Usage**
|
||
|
||
```javascript
|
||
// Get the container of the item
|
||
const group = item.getContainer();
|
||
|
||
// Equals to
|
||
const group = item.get('group');
|
||
```
|
||
|
||
### item.getKeyShape()
|
||
|
||
Get the key shape of the item. `keyShape` is used for calculating the node size, edge length, and so on.
|
||
|
||
**Return**
|
||
|
||
- The type of return value: G.Shape;
|
||
- Return the `keyShape` of the item.
|
||
|
||
**Usage**
|
||
|
||
```javascript
|
||
// Get the keyShape of the item
|
||
const keyShape = item.getKeyShape();
|
||
|
||
// Equals to
|
||
const keyShape = item.get('keyShape');
|
||
```
|
||
|
||
### item.getModel()
|
||
|
||
Get the data model of the item.
|
||
|
||
**Return**
|
||
|
||
- The type of return value: Object;
|
||
- Return the data model of the item.
|
||
|
||
**Usage**
|
||
|
||
```javascript
|
||
// Get the data model of the item
|
||
const model = item.getModel();
|
||
|
||
// Equals to
|
||
const model = item.get('model');
|
||
```
|
||
|
||
### item.getType()
|
||
|
||
Get the type of the item.
|
||
|
||
**Return**
|
||
|
||
- The type of return value: String;
|
||
- Return the type of the item. It might be `'node'` or `'edge'`.
|
||
|
||
**Usage**
|
||
|
||
```javascript
|
||
// Get the type of the item
|
||
const type = item.getType();
|
||
|
||
// Equals to
|
||
const type = item.get('type');
|
||
```
|
||
|
||
### item.enableCapture(enable)
|
||
|
||
Whether to enable the item to be picked and enable its interaction events.
|
||
|
||
**Parameters**
|
||
|
||
| Name | Type | Required | Description |
|
||
| ------ | ------- | -------- | ----------------------------------- |
|
||
| enable | Boolean | true | The flag to enable if it is `true`. |
|
||
|
||
**Usage**
|
||
|
||
```javascript
|
||
// Do not allow the item response interaction events
|
||
item.enableCapture(false);
|
||
|
||
// Allow the item to response the interaction events
|
||
item.enableCapture(true);
|
||
```
|
||
|
||
### item.clearCache()
|
||
|
||
Clear the cache. It is usually called after updating or refreshing operation.
|
||
|
||
**Usage**
|
||
|
||
```javascript
|
||
// Clear the cache
|
||
item.clearCache();
|
||
```
|
||
|
||
## State
|
||
|
||
### item.show()
|
||
|
||
Show the item. Show the item itself. Different from that, when the item is a node, [graph.showItem(item)](/en/docs/api/Graph#showitemitem) will show the node and its related edges in the same time.
|
||
|
||
**Usage**
|
||
|
||
```javascript
|
||
item.show();
|
||
```
|
||
|
||
### item.hide()
|
||
|
||
Hide the item. Hide the item itself. Different from that, when the item is a node, [graph.hideItem(item)](/en/docs/api/Graph#hideitemitem) will hide the node and its related edges in the same time.
|
||
|
||
**Usage**
|
||
|
||
```javascript
|
||
item.hide();
|
||
```
|
||
|
||
### item.changeVisibility(visible)
|
||
|
||
Change the visibility of the item.
|
||
|
||
**Parameters**
|
||
|
||
| Name | Type | Required | Description |
|
||
| --- | --- | --- | --- |
|
||
| visible | Boolean | true | The flag to hide or show the item. `true` means show the item, `false` means hide the item. |
|
||
|
||
**Usage**
|
||
|
||
```javascript
|
||
// Show the item
|
||
item.changeVisibility(true);
|
||
|
||
// Hide the item
|
||
item.changeVisibility(false);
|
||
```
|
||
|
||
### item.isVisible()
|
||
|
||
Query the visibility of the item.
|
||
|
||
**Return**
|
||
|
||
- The type of return value: Boolean;
|
||
- `true` means the item is visibile. The item is invisible otherwise.
|
||
|
||
**Usage**
|
||
|
||
```javascript
|
||
const visible = item.isVisible();
|
||
```
|
||
|
||
### item.toFront()
|
||
|
||
Set the visual level / zindex to the front to avoid being overlapped by other items.
|
||
|
||
**Usage**
|
||
|
||
```javascript
|
||
item.toFront();
|
||
```
|
||
|
||
### item.toBack()
|
||
|
||
Set the visual level / zindex to the back.
|
||
|
||
**Usage**
|
||
|
||
```javascript
|
||
item.toBack();
|
||
```
|
||
|
||
### item.setState(state, enable)
|
||
|
||
Update the state of the item.
|
||
|
||
**Parameters**
|
||
|
||
| Name | Type | Required | Description |
|
||
| ------ | ------- | -------- | --------------------------------------------------------- |
|
||
| state | String | true | The state name of the item, e.g. `'selected'`, `'hover'`. |
|
||
| enable | Boolean | true | The flag to enable the state if it is `true`. |
|
||
|
||
**Usage**
|
||
|
||
```javascript
|
||
item.setState('selected', true);
|
||
item.setState('actived', false);
|
||
```
|
||
|
||
### item.clearStates(states)
|
||
|
||
Clear all the states of the item. If the `states` is null, this operatcion will clear **the first** state of the item by default.
|
||
|
||
**Parameters**
|
||
|
||
| Name | Type | Required | Description |
|
||
| ------ | -------------- | -------- | -------------------------------------- |
|
||
| states | String / Array | true | The names of the states to be cleared. |
|
||
|
||
**Usage**
|
||
|
||
```javascript
|
||
// Clear the state 'selected'
|
||
item.clearStates('selected');
|
||
|
||
// Clear the states 'active' and 'hover'
|
||
item.clearStates(['actived', 'hover']);
|
||
```
|
||
|
||
### item.getStates()
|
||
|
||
Get all the states of the item.
|
||
|
||
**Return**
|
||
|
||
- The type of return value: Array;
|
||
- Returns an array of strings, which are the states of the item.
|
||
|
||
**Usage**
|
||
|
||
```javascript
|
||
// Get all the states of the item
|
||
const states = item.getStates();
|
||
```
|
||
|
||
### item.hasState(state)
|
||
|
||
Query the `state` value of the node.
|
||
|
||
**Parameters**
|
||
|
||
| Name | Type | Required | Description |
|
||
| ----- | ------ | -------- | --------------- |
|
||
| state | String | true | The state name. |
|
||
|
||
**Return**
|
||
|
||
- The type of return value: Boolean;
|
||
- Returns `true` if the item has the `state`. `false` otherwise.
|
||
|
||
**Usage**
|
||
|
||
```javascript
|
||
// Query value of state 'hover'
|
||
const state = item.hasState('hover');
|
||
```
|
||
|
||
## Style
|
||
|
||
### item.getStateStyle(state)
|
||
|
||
Get the style of the item. The global style, default style, and custom style will be mixed in the return value.
|
||
|
||
**Parameters**
|
||
|
||
| Name | Type | Required | Description |
|
||
| ----- | ------ | -------- | --------------- |
|
||
| state | String | true | The state name. |
|
||
|
||
**Return**
|
||
|
||
- The type of return value: Object；
|
||
- The global style, default style, and custom style will be mixed in the return value.
|
||
|
||
**Usage**
|
||
|
||
```javascript
|
||
// Get the item's style of state 'selected'
|
||
const style = item.getStateStyle('selected');
|
||
```
|
||
|
||
### item.getOriginStyle()
|
||
|
||
Get the keyShape's style of the item.
|
||
|
||
**Return**
|
||
|
||
- The type of return value: Object | undefined;
|
||
- Returns the style of the `keyShape` if it exists. Returns `undefined` otherwise.
|
||
|
||
**Usage**
|
||
|
||
```javascript
|
||
const style = item.getOriginStyle();
|
||
```
|
||
|
||
### item.getCurrentStatesStyle()
|
||
|
||
Get the item's styles of all the states.
|
||
|
||
**Return**
|
||
|
||
- The type of return value: Object；
|
||
- Returns the item's styles of all the states.
|
||
|
||
**Usage**
|
||
|
||
```javascript
|
||
const styles = item.getCurrentStatesStyle();
|
||
```
|