test/g6
1
0
Fork 0
mirror of https://gitee.com/antv/g6.git synced 2024-12-02 19:58:46 +08:00
Code Issues Actions 4 Packages Projects Releases Wiki Activity

docs: complete docs of custom node,edge,combo (#5171)

Browse Source 
* docs: update docs of extension list

* docs: complete docs of custom node,edge,combo

* docs: remove node edge extension

---------

Co-authored-by: yvonneyx <banxuan.zyx@antgroup.com>
This commit is contained in:
yvonneyx 2023-11-22 10:36:13 +08:00 committed by GitHub
parent eb7fbb41cc
commit 62bab14689
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
19 changed files with 1115 additions and 2320 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

268
packages/site/docs/apis/item/combo/CustomCombo.en.md
View File

@ -10,283 +10,35 @@ Custom Combo can be created by inheriting from built-in Combo such as CircleComb
```typescript
import { Graph, Extensions, extend } from '@antv/g6';
/**
* Create custom edges, inheriting from CircleCombo
*/
// Create custom edges, inheriting from CircleCombo
class CustomCombo extends Extensions.CircleCombo {
/**
* Override member method to customize the drawing logic.
*/
// Override member method to customize the drawing logic.
}
/**
* Extend the Graph class with the extend method to register the custom edge.
*/
// Extend the Graph class with the extend method to register the custom edge.
const ExtGraph = extend(Graph, {
combos: {
'custom-combo': CustomCombo,
},
});
/**
* Create a graph instance using the extended Graph class, specifying ComboType as a custom Combo
*/
// Create a graph instance using the extended Graph class, specifying ComboType as a custom Combo
const graph = new ExtGraph({
/**
* ... Other configuration items
*/
// Other configuration items
combo: {
/**
* Specify custom Combo
*/
type: 'custom-combo',
/**
* ... See Combo-specific configuration for additional configuration items
*/
type: 'custom-combo', //Specify custom Combo
},
});
```
## Override methods
### draw
**Type**: `draw`
<details>
<summary style="color: #873bf4; cursor: pointer">draw</summary>
```typescript
type draw = (
displayModel: ComboDisplayModel,
diffData?: { previous: ComboUserModelData; current: ComboUserModelData },
diffState?: { previous: State[]; current: State[] },
animate = true,
onfinish: Function = () => {},
) => {
keyShape: DisplayObject;
labelShape?: DisplayObject;
iconShape?: DisplayObject;
[otherShapeId: string]: DisplayObject;
};
```
</details>
Draw all shapes associated with a Combo.
### drawKeyShape
**Type**: `drawKeyShape`
<details>
<summary style="color: #873bf4; cursor: pointer">drawKeyShape</summary>
```typescript
type drawKeyShape = (model: ComboDisplayModel, shapeMap: CombohapeMap) => DisplayObject;
```
</details>
Draw the key shape
### drawLabelShape
**Type**: `drawLabelShape`
<details>
<summary style="color: #873bf4; cursor: pointer">drawLabelShape</summary>
```typescript
type drawLabelShape = (
model: ComboDisplayModel | ComboDisplayModel,
shapeMap: CombohapeMap | CombohapeMap,
) => DisplayObject;
```
</details>
Draw the label shape of Combo.
### drawLabelBackgroundShape
**Type**: `drawLabelBackgroundShape`
<details>
<summary style="color: #873bf4; cursor: pointer">drawLabelBackgroundShape</summary>
```typescript
type drawLabelBackgroundShape = (
model: ComboDisplayModel | ComboDisplayModel,
shapeMap: CombohapeMap | CombohapeMap,
) => DisplayObject;
```
</details>
Draw the label background shape of Combo.
### drawIconShape
**Type**: `drawIconShape`
<details>
<summary style="color: #873bf4; cursor: pointer">drawIconShape</summary>
```typescript
type drawIconShape = (
model: ComboDisplayModel | ComboDisplayModel,
shapeMap: CombohapeMap | CombohapeMap,
) => DisplayObject;
```
</details>
Draw the icon shape of Combo.
### drawHaloShape
**Type**: `drawHaloShape`
<details>
<summary style="color: #873bf4; cursor: pointer">drawHaloShape</summary>
```typescript
type drawHaloShape = (
model: ComboDisplayModel | ComboDisplayModel,
shapeMap: CombohapeMap | CombohapeMap,
) => DisplayObject;
```
</details>
Draw the halo shape of Combo.
### drawAnchorShapes
**Type**: `drawAnchorShapes`
<details>
<summary style="color: #873bf4; cursor: pointer">drawAnchorShapes</summary>
```typescript
type drawAnchorShapes = (
model: ComboDisplayModel | ComboDisplayModel,
shapeMap: CombohapeMap | CombohapeMap,
) => {
[shapeId: string]: DisplayObject;
};
```
</details>
Draw the anchors shape of Combo.
### drawBadgeShapes
**Type**: `drawBadgeShapes`
<details>
<summary style="color: #873bf4; cursor: pointer">drawBadgeShapes</summary>
```typescript
type drawBadgeShapes = (
model: ComboDisplayModel | ComboDisplayModel,
shapeMap: CombohapeMap | CombohapeMap,
) => {
[shapeId: string]: DisplayObject;
};
```
</details>
Draw the badges shape of Combo.
### drawOtherShapes
**Type**: `drawOtherShapes`
<details>
<summary style="color: #873bf4; cursor: pointer">drawOtherShapes</summary>
```typescript
type drawOtherShapes = (
model: ComboDisplayModel | ComboDisplayModel,
shapeMap: CombohapeMap | CombohapeMap,
) => { [id: string]: DisplayObject };
```
</details>
Draw other shapes(such as preRect,stateIcon) of Combo.
### afterDraw
**Type**: `afterDraw`
<details>
<summary style="color: #873bf4; cursor: pointer">afterDraw</summary>
```typescript
type afterDraw = (
model: EdgeDisplayModel,
shapeMap: { [shapeId: string]: DisplayObject },
shapesChanged?: string[],
) => { [otherShapeId: string]: DisplayObject };
```
</details>
Perform additional drawing operations or add custom shapes after drawing Combo.
### getMergedStyles
**Type**: `getMergedStyles`
<details>
<summary style="color: #873bf4; cursor: pointer">getMergedStyles</summary>
```typescript
type getMergedStyles = (model: EdgeDisplayModel) => EdgeDisplayModel;
```
</details>
Merge style.
<embed src="../../../common/BaseNodeOverrideMethod.en.md"></embed>
## Member Methods
Inherited shapes provide the following method calls
`BaseNode` and its subclasses provide some member properties and methods for easily adding or updating shapes.
### upsertShape
<embed src="../../../common/PluginMergedStyles.en.md"></embed>
**Type**: `upsertShape`
<details>
<summary style="color: #873bf4; cursor: pointer">upsertShape</summary>
```typescript
type upsertShape = (
type: SHAPE_TYPE | SHAPE_TYPE_3D,
id: string,
style: ShapeStyle,
shapeMap: CombohapeMap | CombohapeMap,
model: ComboDisplayModel | ComboDisplayModel,
) => DisplayObject;
```
</details>
Create (if not existing in shapeMap) or update a shape based on configuration.
<embed src="../../../common/PluginUpsertShape.en.md"></embed>

273
packages/site/docs/apis/item/combo/CustomCombo.zh.md
View File

@ -7,286 +7,41 @@ order: 3
可以通过继承内置的 Combo （例如 CircleCombo），来创建自定义 Combo 。可继承图形参见： [Combo 类型](/manual/customize/extension-cats#3-combo-类型-combos)
## 示例
```typescript
import { Graph, Extensions, extend } from '@antv/g6';
/**
* 创建自定义边，继承自 CircleCombo
*/
// 自定义节点类型，继承一个已有的 Combo 类型或节点基类 Extensions.BaseNode
class CustomCombo extends Extensions.CircleCombo {
/**
* 重载成员方法，自定义绘制逻辑
*/
// 覆写方法，可覆写的类方法见下文
}
/**
* 使用 extend 方法扩展 Graph 类，注册自定义边
*/
const ExtGraph = extend(Graph, {
// 注册自定义节点
combos: {
'custom-combo': CustomCombo,
},
});
/**
* 使用扩展后的 Graph 类创建图实例，指定 Combo 类型为自定义 Combo
*/
const graph = new ExtGraph({
/**
* ...其他配置项
*/
// ... 其他配置
combo: {
/**
* 指定自定义 Combo
*/
type: 'custom-combo',
/**
* ...其他配置项详见具体 Combo 配置
*/
type: 'custom-combo', // 使用注册的 Combo
},
});
```
## 重载方法
## 覆写方法
### draw
> ⚠️ 注意：`Combo` 的实现继承自基类 `BaseNode`，可以看作是一个 “特殊” 的节点。
**类型**：`draw`
<embed src="../../../common/BaseNodeOverrideMethod.zh.md"></embed>
<details>
## 成员属性及方法
<summary style="color: #873bf4; cursor: pointer">draw</summary>
`BaseNode` 及其子类提供了一些成员属性和方法，用于方便地新增或更新图形。
```typescript
type draw = (
displayModel: ComboDisplayModel,
diffData?: { previous: ComboUserModelData; current: ComboUserModelData },
diffState?: { previous: State[]; current: State[] },
animate = true,
onfinish: Function = () => {},
) => {
keyShape: DisplayObject;
labelShape?: DisplayObject;
iconShape?: DisplayObject;
[otherShapeId: string]: DisplayObject;
};
```
<embed src="../../../common/PluginMergedStyles.zh.md"></embed>
</details>
用于绘制与 Combo 相关的所有图形
### drawKeyShape
**类型**：`drawKeyShape`
<details>
<summary style="color: #873bf4; cursor: pointer">drawKeyShape</summary>
```typescript
type drawKeyShape = (model: NodeDisplayModel, shapeMap: NodeShapeMap) => DisplayObject;
```
</details>
用于绘制关键图形
### drawLabelShape
**类型**：`drawLabelShape`
<details>
<summary style="color: #873bf4; cursor: pointer">drawLabelShape</summary>
```typescript
type drawLabelShape = (
model: NodeDisplayModel | ComboDisplayModel,
shapeMap: NodeShapeMap | ComboShapeMap,
) => DisplayObject;
```
</details>
绘制 Combo 的文本标签图形
### drawLabelBackgroundShape
**类型**：`drawLabelBackgroundShape`
<details>
<summary style="color: #873bf4; cursor: pointer">drawLabelBackgroundShape</summary>
```typescript
type drawLabelBackgroundShape = (
model: NodeDisplayModel | ComboDisplayModel,
shapeMap: NodeShapeMap | ComboShapeMap,
) => DisplayObject;
```
</details>
绘制 Combo 的文本的背景图形
### drawIconShape
**类型**：`drawIconShape`
<details>
<summary style="color: #873bf4; cursor: pointer">drawIconShape</summary>
```typescript
type drawIconShape = (
model: NodeDisplayModel | ComboDisplayModel,
shapeMap: NodeShapeMap | ComboShapeMap,
) => DisplayObject;
```
</details>
绘制 Combo 的图标图形
### drawHaloShape
**类型**：`drawHaloShape`
<details>
<summary style="color: #873bf4; cursor: pointer">drawHaloShape</summary>
```typescript
type drawHaloShape = (
model: NodeDisplayModel | ComboDisplayModel,
shapeMap: NodeShapeMap | ComboShapeMap,
) => DisplayObject;
```
</details>
绘制 Combo 的光晕图形
### drawAnchorShapes
**类型**：`drawAnchorShapes`
<details>
<summary style="color: #873bf4; cursor: pointer">drawAnchorShapes</summary>
```typescript
type drawAnchorShapes = (
model: NodeDisplayModel | ComboDisplayModel,
shapeMap: NodeShapeMap | ComboShapeMap,
) => {
[shapeId: string]: DisplayObject;
};
```
</details>
绘制 Combo 的锚点图形
### drawBadgeShapes
**类型**：`drawBadgeShapes`
<details>
<summary style="color: #873bf4; cursor: pointer">drawBadgeShapes</summary>
```typescript
type drawBadgeShapes = (
model: NodeDisplayModel | ComboDisplayModel,
shapeMap: NodeShapeMap | ComboShapeMap,
) => {
[shapeId: string]: DisplayObject;
};
```
</details>
绘制 Combo 的徽标图形
### drawOtherShapes
**类型**：`drawOtherShapes`
<details>
<summary style="color: #873bf4; cursor: pointer">drawOtherShapes</summary>
```typescript
type drawOtherShapes = (
model: NodeDisplayModel | ComboDisplayModel,
shapeMap: NodeShapeMap | ComboShapeMap,
) => { [id: string]: DisplayObject };
```
</details>
绘制边的其他图形。自定义边中的其他图形应当定义和配置在 `otherShapes` 中。
### afterDraw
**类型**：`afterDraw`
<details>
<summary style="color: #873bf4; cursor: pointer">afterDraw</summary>
```typescript
type afterDraw = (
model: EdgeDisplayModel,
shapeMap: { [shapeId: string]: DisplayObject },
shapesChanged?: string[],
) => { [otherShapeId: string]: DisplayObject };
```
</details>
绘制后执行其他绘图操作或添加自定义形状
### getMergedStyles
**类型**：`getMergedStyles`
<details>
<summary style="color: #873bf4; cursor: pointer">getMergedStyles</summary>
```typescript
type getMergedStyles = (model: EdgeDisplayModel) => EdgeDisplayModel;
```
</details>
将 display model 数据中定义的样式与默认样式和主题样式合并
## 成员方法
继承的图形提供下列方法调用
### upsertShape
**类型**：`upsertShape`
<details>
<summary style="color: #873bf4; cursor: pointer">upsertShape</summary>
```typescript
type upsertShape = (
type: SHAPE_TYPE | SHAPE_TYPE_3D,
id: string,
style: ShapeStyle,
shapeMap: NodeShapeMap | ComboShapeMap,
model: NodeDisplayModel | ComboDisplayModel,
) => DisplayObject;
```
</details>
根据配置创建（如果在 shapeMap 中不存在）或更新形状
<embed src="../../../common/PluginUpsertShape.zh.md"></embed>

236
packages/site/docs/apis/item/edge/CustomEdge.en.md
View File

@ -7,42 +7,27 @@ In G6, if a built-in edge does not meet a specific need, you can create a custom
Custom edges can be created by inheriting from built-in edges, such as LineEdge. For inheritable graphics, see: [Edge Type](/en/manual/customize/extension-cats#2-边Typeedges).
```typescript
import { Graph, Extensions, extend } from '@antv/g6';
## Example
/**
* Create a custom edge, inheriting from LineEdge
*/
class CustomEdge extends Extensions.LineEdge {
/**
* Override member methods for custom drawing logic
*/
```js
import { Graph as BaseGraph, extend, Extensions } from '@antv/g6';
// Custom edge type, inherit an existing edge type or edge base class Extensions.BaseEdge
class CustomNode extends Extensions.LineEdge {
// Override methods, see the following section for methods that can be overridden
}
/**
* Use `extend` method to extend the Graph class and register the custom edge
*/
const ExtGraph = extend(Graph, {
const Graph = extend(BaseGraph, {
// Register custom edge
edges: {
'custom-edge': CustomEdge,
},
});
/**
* Use extended Graph class to create a graph instance
*/
const graph = new ExtGraph({
/**
* ...其他配置项
*/
const graph = new Graph({
// ... Other configurations
edge: {
type: 'custom-edge',
/**
* Specify the custom edge
*/
/**
* Other configuration options for the edge are detailed in the specific edge configuration
*/
type: 'custom-edge', // Use the registered edge
},
});
```
@ -51,6 +36,10 @@ const graph = new ExtGraph({
### draw
:::info
In most cases, there is no need to override the draw method. It is more common to override methods such as `drawKeyShape` and `drawLabelShape`, which will be introduced in the following section.
:::
**Type**: `draw`
<details>
@ -75,7 +64,33 @@ For more detailed data configuration, refer to [EdgeDisplayModel](../../data/Edg
</details>
Draw all elements related to the edge.
G5 5.0 removes the `update` and `afterUpdate` methods. Now you only need to override the `draw` method and the `afterDraw` method, and G6 will automatically update the shapes incrementally based on the updated attributes.
The `draw` method draws each part of the edge by calling methods such as `this.drawKeyShape`.
Refer to the [draw](https://github.com/antvis/G6/blob/6be8f9810ec3b9310371f37de1a2591f14db67f1/packages/g6/src/stdlib/item/edge/line.ts#L28) method of the `line-edge` type edge for overriding.
### afterDraw
**Type**: `afterDraw`
<details>
<summary style="color: #873bf4; cursor: pointer">afterDraw</summary>
```typescript
type afterDraw = (
model: EdgeDisplayModel,
shapeMap: { [shapeId: string]: DisplayObject },
shapesChanged?: string[],
) => { [otherShapeId: string]: DisplayObject };
```
For more detailed data configuration, refer to [EdgeDisplayModel](../../data/EdgeDisplayModel.en.md).
</details>
The logic executed after the `draw` function is completed can also be used to draw more shapes. The return value is the same as the `draw` method. It is not implemented in the built-in edge types.
### drawKeyShape
@ -98,7 +113,7 @@ For more detailed data configuration, refer to [EdgeDisplayModel](../../data/Edg
</details>
Draw the key shape of the edge.
Draw the main shape (`keyShape`), which is required.
### drawLabelShape
@ -116,7 +131,9 @@ For more detailed data configuration, refer to [EdgeDisplayModel](../../data/Edg
</details>
Draw the label shape of the edge.
Draw the text shape (`labelShape`)
Refer to [BaseEdge.drawLabelShape](https://github.com/antvis/G6/blob/6be8f9810ec3b9310371f37de1a2591f14db67f1/packages/g6/src/stdlib/item/edge/base.ts#L194) for overriding.
### drawLabelBackgroundShape
@ -134,7 +151,9 @@ For more detailed data configuration, refer to [EdgeDisplayModel](../../data/Edg
</details>
Draw the label background shape of the edge.
Draw the background shape of the text shape (`labelBackgroundShape`)
Refer to [BaseEdge.drawLabelBackgroundShape](https://github.com/antvis/G6/blob/6be8f9810ec3b9310371f37de1a2591f14db67f1/packages/g6/src/stdlib/item/edge/base.ts#L311) for overriding.
### drawIconShape
@ -170,7 +189,9 @@ For more detailed data configuration, refer to [EdgeDisplayModel](../../data/Edg
</details>
Draw the halo shape of the edge.
Draw the main shape outline (`haloShape`), which is usually displayed in the `selected` and `active` states.
Refer to [BaseEdge.drawHaloShape](https://github.com/antvis/G6/blob/6be8f9810ec3b9310371f37de1a2591f14db67f1/packages/g6/src/stdlib/item/edge/base.ts#L464) for overriding.
### drawOtherShapes
@ -190,28 +211,6 @@ For more detailed data configuration, refer to [EdgeDisplayModel](../../data/Edg
Draws other shapes of the edge. Other shapes in a custom edge should be defined and configured in `otherShapes`.
### afterDraw
**Type**: `afterDraw`
<details>
<summary style="color: #873bf4; cursor: pointer">afterDraw</summary>
```typescript
type afterDraw = (
model: EdgeDisplayModel,
shapeMap: { [shapeId: string]: DisplayObject },
shapesChanged?: string[],
) => { [otherShapeId: string]: DisplayObject };
```
For more detailed data configuration, refer to [EdgeDisplayModel](../../data/EdgeDisplayModel.en.md).
</details>
Perform additional drawing operations or add custom shapes after drawing edge.
### getMergedStyles
**Type**: `getMergedStyles`
@ -230,35 +229,132 @@ For more detailed data configuration, refer to [EdgeDisplayModel](../../data/Edg
将 display model 数据中定义的样式与边的默认和主题样式合并
## Member Methods
## Member properties and methods
Inherited shapes provide the following method calls
`BaseEdge` and its subclasses provide some member properties and methods that can be used when customizing edges.
### upsertShape
### getControlPoints
**Type**: `upsertShape`
**Type**: `getControlPoints`
<details>
<summary style="color: #873bf4; cursor: pointer">upsertShape</summary>
<summary style="color: #873bf4; cursor: pointer">getControlPoints</summary>
The `getControlPoints` type of `Extensions.PolylineEdge` is:
```typescript
type SHAPE_TYPE = 'line' | 'path';
type upsertShape = (
type: SHAPE_TYPE,
id: string,
style: ShapeStyle,
shapeMap: { [shapeId: string]: DisplayObject },
model?: EdgeDisplayModel,
) => DisplayObject;
(
/** Edge rendering data */
model: EdgeDisplayModel,
/** Edge start point */
sourcePoint: Point,
/** Edge end point */
targetPoint: Point,
) =>
/** Calculated control points */
{
x: number;
y: number;
z?: number;
}[]
```
For more detailed data configuration, refer to [EdgeDisplayModel](../../data/EdgeDisplayModel.en.md).
The `getControlPoints` type of `Extensions.QuadraticEdge`、`Extensions.CubicEdge`、`Extensions.CubicHorizontalEdge`、`Extensions.CubicVerticalEdge` is:
```typescript
(
/** Edge start point */
startPoint: Point,
/** Edge end point */
endPoint: Point,
/** Percentage of the projection of the control point on the line connecting the two end points, ranging from 0 to 1 */
percent: number,
/** Control point configuration in data */
controlPoints: Point[],
/** Arc distance */
offset: number,
) =>
/** Calculated control points */
{
x: number;
y: number;
z?: number;
}[];
```
</details>
Create (if not existing in shapeMap) or update a shape based on configuration.
Get the control points, usually used to calculate the path. For example, the control points of the polyline edge are the turning points, and the control points of the curved edge are the control points of the curve.
When inheriting `Extensions.PolylineEdge`, `Extensions.QuadraticEdge`, `Extensions.CubicEdge`, `Extensions.CubicHorizontalEdge`, `Extensions.CubicVerticalEdge`, you can override `getControlPoints` to modify the logic of the control points.
### getPath
**Type**: `getPath`
<details>
<summary style="color: #873bf4; cursor: pointer">getPath</summary>
```typescript
(
/** Edge rendering data */
model: EdgeDisplayModel,
/** Edge start point */
points: Point[],
/** Radius of the polyline turning point */
radius: number,
/** Edge end point */
routeCfg?: RouterCfg,
/** Whether to use the A* algorithm */
auto?: boolean,
) =>
/** Path */
string;
```
<details>
<summary style="color: #873bf4; cursor: pointer;">RouterCfg</summary>
```ts
type RouterCfg = {
name: 'orth' | 'er';
/** Spacing between lines and points */
offset?: number;
/** Grid size */
gridSize?: number;
/** Maximum allowable rotation angle (radian) */
maxAllowedDirectionChange?: number;
/** Allowed edge directions */
directions?: any[];
/** Penalties */
penalties?: {};
/** Determine if use simple router for polyline when no obstacles */
simple?: boolean;
/** Function to calculate the distance between two points */
distFunc?: (p1: PolyPoint, p2: PolyPoint) => number;
/** Simplified function to find path */
fallbackRoute?: (p1: PolyPoint, p2: PolyPoint, startNode?: Node, endNode?: Node, cfg?: RouterCfg) => PolyPoint[];
/** Maximum loops */
maximumLoops?: number;
/**
* Whether to automatically avoid other nodes (obstacles) on the path
* Defaults to false.
*/
enableObstacleAvoidance?: boolean;
};
```
</details>
</details>
The member method of `Extensions.PolylineEdge` can only be overridden when inheriting it to implement a custom edge. Because the automatic path-finding algorithm of the polyline is more complicated, this function is extracted separately. Also because of the complexity of the algorithm, the performance of the polyline edge is slightly worse. If there is a certain rule for drawing the polyline edge, you can inherit the built-in polyline edge and customize the `getPath` method to override the automatic path-finding logic.
<embed src="../../../common/PluginMergedStyles.en.md"></embed>
<embed src="../../../common/PluginUpsertShape.en.md"></embed>
### upsertArrow

233
packages/site/docs/apis/item/edge/CustomEdge.zh.md
View File

@ -7,50 +7,39 @@ order: 8
可以通过继承内置的边（例如 LineEdge），来创建自定义边。可继承图形参见： [边类型](/manual/customize/extension-cats#2-边类型edges)
```typescript
import { Graph, Extensions, extend } from '@antv/g6';
## 示例
/**
* 创建自定义边，继承自 LineEdge
*/
class CustomEdge extends Extensions.LineEdge {
/**
* 重载成员方法，自定义绘制逻辑
*/
```js
import { Graph as BaseGraph, extend, Extensions } from '@antv/g6';
// 自定义边类型，继承一个已有的边类型或边基类 Extensions.BaseEdge
class CustomNode extends Extensions.LineEdge {
// 覆写方法，可覆写的类方法见下文
}
/**
* 使用 extend 方法扩展 Graph 类，注册自定义边
*/
const ExtGraph = extend(Graph, {
const Graph = extend(BaseGraph, {
// 注册自定义边
edges: {
'custom-edge': CustomEdge,
},
});
/**
* 使用扩展后的 Graph 类创建图实例，指定边类型为自定义边
*/
const graph = new ExtGraph({
/**
* ...其他配置项
*/
const graph = new Graph({
// ... 其他配置
edge: {
/**
* 指定自定义边
*/
type: 'custom-edge',
/**
* 边的其他配置项详见具体边配置
*/
type: 'custom-edge', // 使用注册的节点
},
});
```
## 重载方法
## 覆写方法
### draw
:::info{title=提示}
大多数情况下并不需要覆写 draw 方法，更常用的做法是覆写 `drawKeyShape`、`drawLabelShape` 等方法，这些方法将在下文介绍。
:::
**类型**：`draw`
<details>
@ -75,7 +64,33 @@ type draw = (
</details>
用于绘制与边相关的所有图形
G5 5.0 移除了 `update` 和 `afterUpdate` 方法。现在只需要复写 `draw` 方法和 `afterDraw` 方法，G6 将自动根据更新的属性增量更新图形。
draw 方法通过调用 `this.drawKeyShape` 等方法分别绘制边各部分。
你可以参考 `line-edge` 类型边的 [draw](https://github.com/antvis/G6/blob/6be8f9810ec3b9310371f37de1a2591f14db67f1/packages/g6/src/stdlib/item/edge/line.ts#L28) 方法进行覆写。
### afterDraw
**类型**：`afterDraw`
<details>
<summary style="color: #873bf4; cursor: pointer">afterDraw</summary>
```typescript
type afterDraw = (
model: EdgeDisplayModel,
shapeMap: { [shapeId: string]: DisplayObject },
shapesChanged?: string[],
) => { [otherShapeId: string]: DisplayObject };
```
其中，相关的数据类型定义参考 [EdgeDisplayModel 渲染数据](../../data/EdgeDisplayModel.zh.md)。
</details>
在 `draw` 函数完成之后执行的逻辑，也可以用于绘制更多的图形，返回值和 `draw` 方法一致。在内置的节点类型中，没有对它进行实现。
### drawKeyShape
@ -98,7 +113,7 @@ type drawKeyShape = (
</details>
用于绘制关键图形
绘制主图形(`keyShape`)，该图形是必须的，例如直线边的主图形是一条直线(`line`) 以及首尾箭头(`arrow`)，曲线边的主图形则将直线换成了曲线路径(`path`)。
### drawLabelShape
@ -116,7 +131,9 @@ type drawLabelShape = (model: EdgeDisplayModel, shapeMap: EdgeShapeMap) => Displ
</details>
绘制边的标签图形
绘制文本图形（`labelShape`）
若需要覆写，则可以参考 [BaseEdge.drawLabelShape](https://github.com/antvis/G6/blob/6be8f9810ec3b9310371f37de1a2591f14db67f1/packages/g6/src/stdlib/item/edge/base.ts#L194)
### drawLabelBackgroundShape
@ -134,7 +151,9 @@ type drawLabelBackgroundShape = (model: EdgeDisplayModel, shapeMap: EdgeShapeMap
</details>
绘制边的文本的背景图形
绘制文本图形的背景框图形（`labelBackgroundShape`）
若需要覆写，则可以参考 [BaseEdge.drawLabelBackgroundShape](https://github.com/antvis/G6/blob/6be8f9810ec3b9310371f37de1a2591f14db67f1/packages/g6/src/stdlib/item/edge/base.ts#L311)
### drawIconShape
@ -170,7 +189,9 @@ type drawHaloShape = (model: EdgeDisplayModel, shapeMap: EdgeShapeMap) => Displa
</details>
绘制边的光晕图形
绘制主图形轮廓图形(`haloShape`)，通常在 `selected`, `active` 状态下显示。
若需要覆写，则可以参考 [BaseEdge.drawHaloShape](https://github.com/antvis/G6/blob/6be8f9810ec3b9310371f37de1a2591f14db67f1/packages/g6/src/stdlib/item/edge/base.ts#L464)
### drawOtherShapes
@ -190,28 +211,6 @@ type drawOtherShapes = (model: EdgeDisplayModel, shapeMap: EdgeShapeMap) => { [i
绘制边的其他图形。自定义边中的其他图形应当定义和配置在 `otherShapes` 中。
### afterDraw
**类型**：`afterDraw`
<details>
<summary style="color: #873bf4; cursor: pointer">afterDraw</summary>
```typescript
type afterDraw = (
model: EdgeDisplayModel,
shapeMap: { [shapeId: string]: DisplayObject },
shapesChanged?: string[],
) => { [otherShapeId: string]: DisplayObject };
```
其中，相关的数据类型定义参考 [EdgeDisplayModel 渲染数据](../../data/EdgeDisplayModel.zh.md)。
</details>
绘制边后执行其他绘图操作或添加自定义形状
### getMergedStyles
**类型**：`getMergedStyles`
@ -230,35 +229,129 @@ type getMergedStyles = (model: EdgeDisplayModel) => EdgeDisplayModel;
将 display model 数据中定义的样式与边的默认和主题样式合并
## 成员方法
## 成员属性及方法
继承的图形提供下列方法调用
### upsertShape
### getControlPoints
**类型**：`upsertShape`
**类型**：`getControlPoints`
<details>
<summary style="color: #873bf4; cursor: pointer">upsertShape</summary>
<summary style="color: #873bf4; cursor: pointer">getControlPoints</summary>
`Extensions.PolylineEdge` 的 `getControlPoints` 类型为：
```typescript
type SHAPE_TYPE = 'line' | 'path';
type upsertShape = (
type: SHAPE_TYPE,
id: string,
style: ShapeStyle,
shapeMap: { [shapeId: string]: DisplayObject },
model?: EdgeDisplayModel,
) => DisplayObject;
(
/** 边的渲染数据 */
model: EdgeDisplayModel,
/** 边的起点 */
sourcePoint: Point,
/** 边的终点 */
targetPoint: Point,
) => /** 计算后的控制点 */
{
x: number;
y: number;
z?: number;
}[];
```
其中，相关的数据类型定义参考 [EdgeDisplayModel 渲染数据](../../data/EdgeDisplayModel.zh.md)。
`Extensions.QuadraticEdge`、`Extensions.CubicEdge`、`Extensions.CubicHorizontalEdge`、`Extensions.CubicVerticalEdge` 的 `getControlPoints` 类型为：
```typescript
(
/** 边的起点 */
startPoint: Point,
/** 边的终点 */
endPoint: Point,
/** 控制点的投影在两端点连线上的百分比，范围 0 到 1 */
percent: number,
/** 数据中控制点配置 */
controlPoints: Point[],
/** 弧度距离 */
offset: number,
) =>
/** 计算后的控制点 */
{
x: number;
y: number;
z?: number;
}[];
```
</details>
根据配置创建（如果在 shapeMap 中不存在）或更新形状
获取控制点，通常用于计算路径。例如折线边的控制点是拐点，曲线边的控制点是曲线的控制点。
当继承 Extensions.PolylineEdge、Extensions.QuadraticEdge、Extensions.CubicEdge、Extensions.CubicHorizontalEdge、Extensions.CubicVerticalEdge 时，可以通过复写 `getControlPoints` 来修改控制点的逻辑。
### getPath
**类型**：`getPath`
<details>
<summary style="color: #873bf4; cursor: pointer">draw</summary>
```typescript
(
/** 边的渲染数据 */
model: EdgeDisplayModel,
/** 起点和终点 */
points: Point[],
/** 折线拐点的弧度 */
radius: number,
/** 折线弯折的配置 */
routeCfg?: RouterCfg,
/** 是否使用 A* 算法 */
auto?: boolean,
) =>
/** 路径 */
string;
```
<details>
<summary style="color: #873bf4; cursor: pointer;">RouterCfg</summary>
```ts
type RouterCfg = {
name: 'orth' | 'er';
/** 线与点之间的间距 */
offset?: number;
/** 网格大小 */
gridSize?: number;
/** 最大旋转角度（弧度） */
maxAllowedDirectionChange?: number;
/** 允许的边的方向 */
directions?: any[];
/** 起点和终点的权重 */
penalties?: {};
/** 是否使用简单的折线拐点寻径算法 */
simple?: boolean;
/** 计算两点之间距离的函数 */
distFunc?: (p1: PolyPoint, p2: PolyPoint) => number;
/** 简化的寻径函数 */
fallbackRoute?: (p1: PolyPoint, p2: PolyPoint, startNode?: Node, endNode?: Node, cfg?: RouterCfg) => PolyPoint[];
/** 最大循环次数 */
maximumLoops?: number;
/** 是否自动避开障碍物，默认为 false */
enableObstacleAvoidance?: boolean;
};
```
</details>
</details>
`Extensions.PolylineEdge` 的成员方法，仅在继承它来实现自定义边时可复写。由于折线的自动寻径算法比较复杂，因此单独抽出了这个函数。也由于算法复杂性，折线边的性能稍差。如果有确定的折线边绘制规则，可以通过继承内置折线边，自定义 `getPath` 方法覆盖自动寻径的逻辑。
<embed src="../../../common/PluginMergedStyles.zh.md"></embed>
<embed src="../../../common/PluginUpsertShape.zh.md"></embed>
### upsertArrow

298
packages/site/docs/apis/item/node/CustomNode.en.md
View File

@ -7,307 +7,39 @@ In G6, if a built-in node does not meet a specific need, you can create a custom
Custom nodes can be created by inheriting from built-in nodes such as CircleNode. See [NodeType](/manual/customize/extension-cats#1-%E8%8A%82%E7%82%B9%E7%B1%BB%E5%9E%8Bnodes) for a graphical representation of what can be inherited.
```typescript
import { Graph, Extensions, extend } from '@antv/g6';
## Example
/** Create custom edges, inheriting from CircleNode */
```js
import { Graph as BaseGraph, extend, Extensions } from '@antv/g6';
// Custom node type, inherit an existing node type or node base class Extensions.BaseNode
class CustomNode extends Extensions.CircleNode {
/**
* Override member method to customize the drawing logic.
*/
// Override methods, see the following section for methods that can be overridden
}
/**
* Extend the Graph class with the extend method to register the custom edge.
*/
const ExtGraph = extend(Graph, {
const Graph = extend(BaseGraph, {
// Register custom node
nodes: {
'custom-node': CustomNode,
},
});
/**
* Create a graph instance using the extended Graph class, specifying the nodeType as a custom node
*/
const graph = new ExtGraph({
/**
* ... Other configuration items
*/
const graph = new Graph({
// ... Other configurations
node: {
/**
* Specify custom node
*/
type: 'custom-node',
/**
* ... See node-specific configuration for additional configuration items
*/
type: 'custom-node', // Use the registered node
},
});
```
## Override methods
### draw
**Type**: `draw`
<details>
<summary style="color: #873bf4; cursor: pointer">draw</summary>
```typescript
type draw = (
model: NodeDisplayModel | ComboDisplayModel,
shapeMap: { [shapeId: string]: DisplayObject },
) => {
keyShape: DisplayObject;
labelShape?: DisplayObject;
iconShape?: DisplayObject;
[otherShapeId: string]: DisplayObject;
};
```
For more detailed data configuration, refer to [NodeDisplayModel](../../data/NodeDisplayModel.en.md) or [ComboDisplayModel](../../data/ComboDisplayModel.en.md).
</details>
Draw all shapes associated with a node.
### drawKeyShape
**Type**: `drawKeyShape`
<details>
<summary style="color: #873bf4; cursor: pointer">drawKeyShape</summary>
```typescript
type drawKeyShape = (model: NodeDisplayModel, shapeMap: NodeShapeMap) => DisplayObject;
```
For more detailed data configuration, refer to [NodeDisplayModel](../../data/NodeDisplayModel.en.md) or [ComboDisplayModel](../../data/ComboDisplayModel.en.md).
</details>
Draw the key shape
### drawLabelShape
**Type**: `drawLabelShape`
<details>
<summary style="color: #873bf4; cursor: pointer">drawLabelShape</summary>
```typescript
type drawLabelShape = (
model: NodeDisplayModel | ComboDisplayModel,
shapeMap: NodeShapeMap | ComboShapeMap,
) => DisplayObject;
```
For more detailed data configuration, refer to [NodeDisplayModel](../../data/NodeDisplayModel.en.md) or [ComboDisplayModel](../../data/ComboDisplayModel.en.md).
</details>
Draw the label shape of the node.
### drawLabelBackgroundShape
**Type**: `drawLabelBackgroundShape`
<details>
<summary style="color: #873bf4; cursor: pointer">drawLabelBackgroundShape</summary>
```typescript
type drawLabelBackgroundShape = (
model: NodeDisplayModel | ComboDisplayModel,
shapeMap: NodeShapeMap | ComboShapeMap,
) => DisplayObject;
```
For more detailed data configuration, refer to [NodeDisplayModel](../../data/NodeDisplayModel.en.md) or [ComboDisplayModel](../../data/ComboDisplayModel.en.md).
</details>
Draw the label background shape of the node.
### drawIconShape
**Type**: `drawIconShape`
<details>
<summary style="color: #873bf4; cursor: pointer">drawIconShape</summary>
```typescript
type drawIconShape = (
model: NodeDisplayModel | ComboDisplayModel,
shapeMap: NodeShapeMap | ComboShapeMap,
) => DisplayObject;
```
For more detailed data configuration, refer to [NodeDisplayModel](../../data/NodeDisplayModel.en.md) or [ComboDisplayModel](../../data/ComboDisplayModel.en.md).
</details>
Draw the icon shape of the node.
### drawHaloShape
**Type**: `drawHaloShape`
<details>
<summary style="color: #873bf4; cursor: pointer">drawHaloShape</summary>
```typescript
type drawHaloShape = (
model: NodeDisplayModel | ComboDisplayModel,
shapeMap: NodeShapeMap | ComboShapeMap,
) => DisplayObject;
```
For more detailed data configuration, refer to [NodeDisplayModel](../../data/NodeDisplayModel.en.md) or [ComboDisplayModel](../../data/ComboDisplayModel.en.md).
</details>
Draw the halo shape of the node.
### drawAnchorShapes
**Type**: `drawAnchorShapes`
<details>
<summary style="color: #873bf4; cursor: pointer">drawAnchorShapes</summary>
```typescript
type drawAnchorShapes = (
model: NodeDisplayModel | ComboDisplayModel,
shapeMap: NodeShapeMap | ComboShapeMap,
) => {
[shapeId: string]: DisplayObject;
};
```
For more detailed data configuration, refer to [NodeDisplayModel](../../data/NodeDisplayModel.en.md) or [ComboDisplayModel](../../data/ComboDisplayModel.en.md).
</details>
Draw the anchors shape of the node.
### drawBadgeShapes
**Type**: `drawBadgeShapes`
<details>
<summary style="color: #873bf4; cursor: pointer">drawBadgeShapes</summary>
```typescript
type drawBadgeShapes = (
model: NodeDisplayModel | ComboDisplayModel,
shapeMap: NodeShapeMap | ComboShapeMap,
) => {
[shapeId: string]: DisplayObject;
};
```
For more detailed data configuration, refer to [NodeDisplayModel](../../data/NodeDisplayModel.en.md) or [ComboDisplayModel](../../data/ComboDisplayModel.en.md).
</details>
Draw the badges shape of the node.
### drawOtherShapes
**Type**: `drawOtherShapes`
<details>
<summary style="color: #873bf4; cursor: pointer">drawOtherShapes</summary>
```typescript
type drawOtherShapes = (
model: NodeDisplayModel | ComboDisplayModel,
shapeMap: NodeShapeMap | ComboShapeMap,
) => { [id: string]: DisplayObject };
```
For more detailed data configuration, refer to [NodeDisplayModel](../../data/NodeDisplayModel.en.md) or [ComboDisplayModel](../../data/ComboDisplayModel.en.md).
</details>
Draw other shapes(such as preRect,stateIcon) of the node.
### afterDraw
**Type**: `afterDraw`
<details>
<summary style="color: #873bf4; cursor: pointer">afterDraw</summary>
```typescript
type afterDraw = (
model: EdgeDisplayModel,
shapeMap: { [shapeId: string]: DisplayObject },
shapesChanged?: string[],
) => { [otherShapeId: string]: DisplayObject };
```
For more detailed data configuration, refer to [NodeDisplayModel](../../data/NodeDisplayModel.en.md) or [ComboDisplayModel](../../data/ComboDisplayModel.en.md).
</details>
Perform additional drawing operations or add custom shapes after drawing node.
### getMergedStyles
**Type**: `getMergedStyles`
<details>
<summary style="color: #873bf4; cursor: pointer">getMergedStyles</summary>
```typescript
type getMergedStyles = (model: EdgeDisplayModel) => EdgeDisplayModel;
```
For more detailed data configuration, refer to [NodeDisplayModel](../../data/NodeDisplayModel.en.md) or [ComboDisplayModel](../../data/ComboDisplayModel.en.md).
</details>
Merge style.
<embed src="../../../common/BaseNodeOverrideMethod.en.md"></embed>
## Member Methods
Inherited shapes provide the following method calls
`BaseNode` and its subclasses provide some member properties and methods for easily adding or updating shapes.
### upsertShape
<embed src="../../../common/PluginMergedStyles.en.md"></embed>
**Type**: `upsertShape`
<details>
<summary style="color: #873bf4; cursor: pointer">upsertShape</summary>
```typescript
type SHAPE_TYPE = 'rect' | 'circle' | 'ellipse' | 'polygon' | 'image' | 'polyline' | 'line' | 'path' | 'text' | 'group';
type SHAPE_TYPE_3D = 'sphere' | 'cube' | 'plane';
type upsertShape = (
type: SHAPE_TYPE | SHAPE_TYPE_3D,
id: string,
style: ShapeStyle,
shapeMap: NodeShapeMap | ComboShapeMap,
model: NodeDisplayModel | ComboDisplayModel,
) => DisplayObject;
```
</details>
Create (if not existing in shapeMap) or update a shape based on configuration.
<embed src="../../../common/PluginUpsertShape.en.md"></embed>

298
packages/site/docs/apis/item/node/CustomNode.zh.md
View File

@ -7,311 +7,39 @@ order: 13
可以通过继承内置的节点（例如 CircleNode），来创建自定义节点。可继承图形参见： [节点类型](/manual/customize/extension-cats#1-%E8%8A%82%E7%82%B9%E7%B1%BB%E5%9E%8Bnodes)
## 示例
```typescript
import { Graph, Extensions, extend } from '@antv/g6';
/**
* 创建自定义边，继承自 CircleNode
*/
// 自定义节点类型，继承一个已有的节点类型或节点基类 Extensions.BaseNode
class CustomNode extends Extensions.CircleNode {
/**
* 重载成员方法，自定义绘制逻辑
*/
// 覆写方法，可覆写的类方法见下文
}
/**
* 使用 extend 方法扩展 Graph 类，注册自定义边
*/
const ExtGraph = extend(Graph, {
// 注册自定义节点
nodes: {
'custom-node': CustomNode,
},
});
/**
* 使用扩展后的 Graph 类创建图实例，指定节点类型为自定义节点
*/
const graph = new ExtGraph({
/**
* ...其他配置项
*/
// ... 其他配置
node: {
/**
* 指定自定义节点
*/
type: 'custom-node',
/**
* ...其他配置项详见具体节点配置
*/
type: 'custom-node', // 使用注册的节点
},
});
```
## 重载方法
## 覆写方法
### draw
<embed src="../../../common/BaseNodeOverrideMethod.zh.md"></embed>
**类型**：`draw`
## 成员属性及方法
<details>
`BaseNode` 及其子类提供了一些成员属性和方法，用于方便地新增或更新图形。
<summary style="color: #873bf4; cursor: pointer">draw</summary>
<embed src="../../../common/PluginMergedStyles.zh.md"></embed>
```typescript
type draw = (
model: NodeDisplayModel | ComboDisplayModel,
shapeMap: { [shapeId: string]: DisplayObject },
) => {
keyShape: DisplayObject;
labelShape?: DisplayObject;
iconShape?: DisplayObject;
[otherShapeId: string]: DisplayObject;
};
```
其中，相关的数据类型定义参考 [NodeDisplayModel 渲染数据](../../data/ComboDisplayModel.zh.md) 和 [ComboDisplayModel 渲染数据](../../data/ComboDisplayModel.zh.md)。
</details>
用于绘制与节点相关的所有图形
### drawKeyShape
**类型**：`drawKeyShape`
<details>
<summary style="color: #873bf4; cursor: pointer">drawKeyShape</summary>
```typescript
type drawKeyShape = (model: NodeDisplayModel, shapeMap: NodeShapeMap) => DisplayObject;
```
其中，相关的数据类型定义参考 [NodeDisplayModel 渲染数据](../../data/ComboDisplayModel.zh.md) 和 [ComboDisplayModel 渲染数据](../../data/ComboDisplayModel.zh.md)。
</details>
用于绘制关键图形
### drawLabelShape
**类型**：`drawLabelShape`
<details>
<summary style="color: #873bf4; cursor: pointer">drawLabelShape</summary>
```typescript
type drawLabelShape = (
model: NodeDisplayModel | ComboDisplayModel,
shapeMap: NodeShapeMap | ComboShapeMap,
) => DisplayObject;
```
其中，相关的数据类型定义参考 [NodeDisplayModel 渲染数据](../../data/ComboDisplayModel.zh.md) 和 [ComboDisplayModel 渲染数据](../../data/ComboDisplayModel.zh.md)。
</details>
绘制节点的文本标签图形
### drawLabelBackgroundShape
**类型**：`drawLabelBackgroundShape`
<details>
<summary style="color: #873bf4; cursor: pointer">drawLabelBackgroundShape</summary>
```typescript
type drawLabelBackgroundShape = (
model: NodeDisplayModel | ComboDisplayModel,
shapeMap: NodeShapeMap | ComboShapeMap,
) => DisplayObject;
```
其中，相关的数据类型定义参考 [NodeDisplayModel 渲染数据](../../data/ComboDisplayModel.zh.md) 和 [ComboDisplayModel 渲染数据](../../data/ComboDisplayModel.zh.md)。
</details>
绘制节点的文本的背景图形
### drawIconShape
**类型**：`drawIconShape`
<details>
<summary style="color: #873bf4; cursor: pointer">drawIconShape</summary>
```typescript
type drawIconShape = (
model: NodeDisplayModel | ComboDisplayModel,
shapeMap: NodeShapeMap | ComboShapeMap,
) => DisplayObject;
```
其中，相关的数据类型定义参考 [NodeDisplayModel 渲染数据](../../data/ComboDisplayModel.zh.md) 和 [ComboDisplayModel 渲染数据](../../data/ComboDisplayModel.zh.md)。
</details>
绘制节点的图标图形
### drawHaloShape
**类型**：`drawHaloShape`
<details>
<summary style="color: #873bf4; cursor: pointer">drawHaloShape</summary>
```typescript
type drawHaloShape = (
model: NodeDisplayModel | ComboDisplayModel,
shapeMap: NodeShapeMap | ComboShapeMap,
) => DisplayObject;
```
其中，相关的数据类型定义参考 [NodeDisplayModel 渲染数据](../../data/ComboDisplayModel.zh.md) 和 [ComboDisplayModel 渲染数据](../../data/ComboDisplayModel.zh.md)。
</details>
绘制节点的光晕图形
### drawAnchorShapes
**类型**：`drawAnchorShapes`
<details>
<summary style="color: #873bf4; cursor: pointer">drawAnchorShapes</summary>
```typescript
type drawAnchorShapes = (
model: NodeDisplayModel | ComboDisplayModel,
shapeMap: NodeShapeMap | ComboShapeMap,
) => {
[shapeId: string]: DisplayObject;
};
```
其中，相关的数据类型定义参考 [NodeDisplayModel 渲染数据](../../data/ComboDisplayModel.zh.md) 和 [ComboDisplayModel 渲染数据](../../data/ComboDisplayModel.zh.md)。
</details>
绘制节点的锚点图形
### drawBadgeShapes
**类型**：`drawBadgeShapes`
<details>
<summary style="color: #873bf4; cursor: pointer">drawBadgeShapes</summary>
```typescript
type drawBadgeShapes = (
model: NodeDisplayModel | ComboDisplayModel,
shapeMap: NodeShapeMap | ComboShapeMap,
) => {
[shapeId: string]: DisplayObject;
};
```
其中，相关的数据类型定义参考 [NodeDisplayModel 渲染数据](../../data/ComboDisplayModel.zh.md) 和 [ComboDisplayModel 渲染数据](../../data/ComboDisplayModel.zh.md)。
</details>
绘制节点的徽标图形
### drawOtherShapes
**类型**：`drawOtherShapes`
<details>
<summary style="color: #873bf4; cursor: pointer">drawOtherShapes</summary>
```typescript
type drawOtherShapes = (
model: NodeDisplayModel | ComboDisplayModel,
shapeMap: NodeShapeMap | ComboShapeMap,
) => { [id: string]: DisplayObject };
```
其中，相关的数据类型定义参考 [NodeDisplayModel 渲染数据](../../data/ComboDisplayModel.zh.md) 和 [ComboDisplayModel 渲染数据](../../data/ComboDisplayModel.zh.md)。
</details>
绘制边的其他图形。自定义边中的其他图形应当定义和配置在 `otherShapes` 中。
### afterDraw
**类型**：`afterDraw`
<details>
<summary style="color: #873bf4; cursor: pointer">afterDraw</summary>
```typescript
type afterDraw = (
model: NodeDisplayModel | ComboDisplayModel,
shapeMap: { [shapeId: string]: DisplayObject },
shapesChanged?: string[],
) => { [otherShapeId: string]: DisplayObject };
```
其中，相关的数据类型定义参考 [NodeDisplayModel 渲染数据](../../data/ComboDisplayModel.zh.md) 和 [ComboDisplayModel 渲染数据](../../data/ComboDisplayModel.zh.md)。
</details>
绘制后执行其他绘图操作或添加自定义形状
### getMergedStyles
**类型**：`getMergedStyles`
<details>
<summary style="color: #873bf4; cursor: pointer">getMergedStyles</summary>
```typescript
type getMergedStyles = (model: NodeDisplayModel) => NodeDisplayModel;
```
其中，相关的数据类型定义参考 [NodeDisplayModel 渲染数据](../../data/ComboDisplayModel.zh.md)。
</details>
将 display model 数据中定义的样式与默认样式和主题样式合并
## 成员方法
继承的图形提供下列方法调用
### upsertShape
**类型**：`upsertShape`
<details>
<summary style="color: #873bf4; cursor: pointer">upsertShape</summary>
```typescript
type SHAPE_TYPE = 'rect' | 'circle' | 'ellipse' | 'polygon' | 'image' | 'polyline' | 'line' | 'path' | 'text' | 'group';
type SHAPE_TYPE_3D = 'sphere' | 'cube' | 'plane';
type upsertShape = (
type: SHAPE_TYPE | SHAPE_TYPE_3D,
id: string,
style: ShapeStyle,
shapeMap: NodeShapeMap | ComboShapeMap,
model: NodeDisplayModel | ComboDisplayModel,
) => DisplayObject;
```
其中，相关的数据类型定义参考 [NodeDisplayModel 渲染数据](../../data/ComboDisplayModel.zh.md) 和 [ComboDisplayModel 渲染数据](../../data/ComboDisplayModel.zh.md)。
</details>
根据配置创建（如果在 shapeMap 中不存在）或更新形状
<embed src="../../../common/PluginUpsertShape.zh.md"></embed>

2
packages/site/docs/apis/item/node/CustomNode3D.zh.md
View File

@ -47,7 +47,7 @@ const graph = new ExtGraph({
});
```
## 重载方法
## 覆写方法
### draw

260
packages/site/docs/common/BaseNodeOverrideMethod.en.md Normal file
View File

@ -0,0 +1,260 @@
### draw
:::info
In most cases, there is no need to override the draw method. It is more common to override methods such as `drawKeyShape` and `drawLabelShape`, which will be introduced in the following section.
:::
**Type**: `draw`
<details>
<summary style="color: #873bf4; cursor: pointer">draw</summary>
```typescript
type draw = (
model: NodeDisplayModel | ComboDisplayModel,
shapeMap: { [shapeId: string]: DisplayObject },
) => {
keyShape: DisplayObject;
labelShape?: DisplayObject;
iconShape?: DisplayObject;
[otherShapeId: string]: DisplayObject;
};
```
For more detailed data configuration, refer to [NodeDisplayModel](../../data/NodeDisplayModel.en.md) or [ComboDisplayModel](../../data/ComboDisplayModel.en.md).
</details>
G5 5.0 removes the `update` and `afterUpdate` methods. Now you only need to override the `draw` method and the `afterDraw` method, and G6 will automatically update the shapes incrementally based on the updated attributes.
The `draw` method draws each part of the edge by calling methods such as `this.drawKeyShape`.
Refer to the [draw](https://github.com/antvis/G6/blob/6be8f9810ec3b9310371f37de1a2591f14db67f1/packages/g6/src/stdlib/item/node/circle.ts#L25) method of the `circle-node` type node for overriding.
### afterDraw
**Type**: `afterDraw`
<details>
<summary style="color: #873bf4; cursor: pointer">afterDraw</summary>
```typescript
type afterDraw = (
model: EdgeDisplayModel,
shapeMap: { [shapeId: string]: DisplayObject },
shapesChanged?: string[],
) => { [otherShapeId: string]: DisplayObject };
```
For more detailed data configuration, refer to [NodeDisplayModel](../../data/NodeDisplayModel.en.md) or [ComboDisplayModel](../../data/ComboDisplayModel.en.md).
</details>
The logic executed after the `draw` function is completed can also be used to draw more shapes. The return value is the same as the `draw` method. It is not implemented in the built-in edge types.
### drawKeyShape
**Type**: `drawKeyShape`
<details>
<summary style="color: #873bf4; cursor: pointer">drawKeyShape</summary>
```typescript
type drawKeyShape = (model: NodeDisplayModel, shapeMap: NodeShapeMap) => DisplayObject;
```
For more detailed data configuration, refer to [NodeDisplayModel](../../data/NodeDisplayModel.en.md) or [ComboDisplayModel](../../data/ComboDisplayModel.en.md).
</details>
Draw the main shape (`keyShape`), which is required. For example, the main shape of a circle node is a circle (`circle`), and the main shape of a rectangular node is a rectangle (`rect`).
### drawLabelShape
**Type**: `drawLabelShape`
<details>
<summary style="color: #873bf4; cursor: pointer">drawLabelShape</summary>
```typescript
type drawLabelShape = (
model: NodeDisplayModel | ComboDisplayModel,
shapeMap: NodeShapeMap | ComboShapeMap,
) => DisplayObject;
```
For more detailed data configuration, refer to [NodeDisplayModel](../../data/NodeDisplayModel.en.md) or [ComboDisplayModel](../../data/ComboDisplayModel.en.md).
</details>
Draw the text shape (`labelShape`)
Refer to [BaseNode.drawLabelShape](https://github.com/antvis/G6/blob/fddf9a5c0f7933b4d704038a7474358cb47037d0/packages/g6/src/stdlib/item/node/base.ts#L277)。 for overriding.
### drawLabelBackgroundShape
**Type**: `drawLabelBackgroundShape`
<details>
<summary style="color: #873bf4; cursor: pointer">drawLabelBackgroundShape</summary>
```typescript
type drawLabelBackgroundShape = (
model: NodeDisplayModel | ComboDisplayModel,
shapeMap: NodeShapeMap | ComboShapeMap,
) => DisplayObject;
```
For more detailed data configuration, refer to [NodeDisplayModel](../../data/NodeDisplayModel.en.md) or [ComboDisplayModel](../../data/ComboDisplayModel.en.md).
</details>
Draw the background shape of the text shape (`labelBackgroundShape`)
Refer to [BaseNode.drawLabelBackgroundShape](https://github.com/antvis/G6/blob/fddf9a5c0f7933b4d704038a7474358cb47037d0/packages/g6/src/stdlib/item/node/base.ts#L383)。 for overriding.
### drawIconShape
**Type**: `drawIconShape`
<details>
<summary style="color: #873bf4; cursor: pointer">drawIconShape</summary>
```typescript
type drawIconShape = (
model: NodeDisplayModel | ComboDisplayModel,
shapeMap: NodeShapeMap | ComboShapeMap,
) => DisplayObject;
```
For more detailed data configuration, refer to [NodeDisplayModel](../../data/NodeDisplayModel.en.md) or [ComboDisplayModel](../../data/ComboDisplayModel.en.md).
</details>
Draw the icon shape of the text shape (`iconShape`)
Refer to [BaseNode.drawLabelIconShape](https://github.com/antvis/G6/blob/fddf9a5c0f7933b4d704038a7474358cb47037d0/packages/g6/src/stdlib/item/node/base.ts#L440) for overriding.
### drawHaloShape
**Type**: `drawHaloShape`
<details>
<summary style="color: #873bf4; cursor: pointer">drawHaloShape</summary>
```typescript
type drawHaloShape = (
model: NodeDisplayModel | ComboDisplayModel,
shapeMap: NodeShapeMap | ComboShapeMap,
) => DisplayObject;
```
For more detailed data configuration, refer to [NodeDisplayModel](../../data/NodeDisplayModel.en.md) or [ComboDisplayModel](../../data/ComboDisplayModel.en.md).
</details>
Draw the main shape outline (`haloShape`), which is usually displayed in the `selected` and `active` states.
Refer to [BaseNode.drawHaloShape](https://github.com/antvis/G6/blob/fddf9a5c0f7933b4d704038a7474358cb47037d0/packages/g6/src/stdlib/item/node/base.ts#L491) for overriding.
### drawAnchorShapes
**Type**: `drawAnchorShapes`
<details>
<summary style="color: #873bf4; cursor: pointer">drawAnchorShapes</summary>
```typescript
type drawAnchorShapes = (
model: NodeDisplayModel | ComboDisplayModel,
shapeMap: NodeShapeMap | ComboShapeMap,
) => {
[shapeId: string]: DisplayObject;
};
```
For more detailed data configuration, refer to [NodeDisplayModel](../../data/NodeDisplayModel.en.md) or [ComboDisplayModel](../../data/ComboDisplayModel.en.md).
</details>
Draw the port shape (`anchorShapes`)
Refer to [BaseNode.drawAnchorShapes](https://github.com/antvis/G6/blob/fddf9a5c0f7933b4d704038a7474358cb47037d0/packages/g6/src/stdlib/item/node/base.ts#L531) for overriding.
> ⚠️ Note: `drawAnchorShapes` returns a shape map, where the key is the id of the shape and the value is the shape object.
### drawBadgeShapes
**Type**: `drawBadgeShapes`
<details>
<summary style="color: #873bf4; cursor: pointer">drawBadgeShapes</summary>
```typescript
type drawBadgeShapes = (
model: NodeDisplayModel | ComboDisplayModel,
shapeMap: NodeShapeMap | ComboShapeMap,
) => {
[shapeId: string]: DisplayObject;
};
```
For more detailed data configuration, refer to [NodeDisplayModel](../../data/NodeDisplayModel.en.md) or [ComboDisplayModel](../../data/ComboDisplayModel.en.md).
</details>
Draw the badge shape (`badgeShapes`)
Refer to [BaseNode.drawBadgeShapes](https://github.com/antvis/G6/blob/fddf9a5c0f7933b4d704038a7474358cb47037d0/packages/g6/src/stdlib/item/node/base.ts#L629) for overriding.
> ⚠️ Note: `drawBadgeShapes` returns a shape map, where the key is the id of the shape and the value is the shape object.
### drawOtherShapes
**Type**: `drawOtherShapes`
<details>
<summary style="color: #873bf4; cursor: pointer">drawOtherShapes</summary>
```typescript
type drawOtherShapes = (
model: NodeDisplayModel | ComboDisplayModel,
shapeMap: NodeShapeMap | ComboShapeMap,
) => { [id: string]: DisplayObject };
```
For more detailed data configuration, refer to [NodeDisplayModel](../../data/NodeDisplayModel.en.md) or [ComboDisplayModel](../../data/ComboDisplayModel.en.md).
</details>
Draw shapes other than the above parts, which can be completed in `drawOtherShapes`, such as drawing an extra circle:
> ⚠️ Note: `drawOtherShapes` returns a shape map, where the key is the id of the shape and the value is the shape object.
### getMergedStyles
**Type**: `getMergedStyles`
<details>
<summary style="color: #873bf4; cursor: pointer">getMergedStyles</summary>
```typescript
type getMergedStyles = (model: EdgeDisplayModel) => EdgeDisplayModel;
```
For more detailed data configuration, refer to [NodeDisplayModel](../../data/NodeDisplayModel.en.md) or [ComboDisplayModel](../../data/ComboDisplayModel.en.md).
</details>
Merge style.

258
packages/site/docs/common/BaseNodeOverrideMethod.zh.md Normal file
View File

@ -0,0 +1,258 @@
### draw
:::info{title=提示}
大多数情况下并不需要覆写 draw 方法，更常用的做法是覆写 `drawKeyShape`、`drawLabelShape` 等方法，这些方法将在下文介绍。
:::
**类型**：`draw`
<details>
<summary style="color: #873bf4; cursor: pointer">draw</summary>
```typescript
type draw = (
model: NodeDisplayModel | ComboDisplayModel,
shapeMap: { [shapeId: string]: DisplayObject },
) => {
keyShape: DisplayObject;
labelShape?: DisplayObject;
iconShape?: DisplayObject;
[otherShapeId: string]: DisplayObject;
};
```
其中，相关的数据类型定义参考 [NodeDisplayModel 渲染数据](../../data/ComboDisplayModel.zh.md) 和 [ComboDisplayModel 渲染数据](../../data/ComboDisplayModel.zh.md)。
</details>
G5 5.0 移除了 `update` 和 `afterUpdate` 方法。现在只需要覆写 `draw` 方法和 `afterDraw` 方法，G6 将自动根据更新的属性增量更新图形。
draw 方法通过调用 `this.drawKeyShape` 等方法分别绘制节点各部分。
你可以参考 `circle-node` 类型节点的 [draw](https://github.com/antvis/G6/blob/6be8f9810ec3b9310371f37de1a2591f14db67f1/packages/g6/src/stdlib/item/node/circle.ts#L25) 方法进行覆写。
### afterDraw
**类型**：`afterDraw`
<details>
<summary style="color: #873bf4; cursor: pointer">afterDraw</summary>
```typescript
type afterDraw = (
model: NodeDisplayModel | ComboDisplayModel,
shapeMap: { [shapeId: string]: DisplayObject },
shapesChanged?: string[],
) => { [otherShapeId: string]: DisplayObject };
```
其中，相关的数据类型定义参考 [NodeDisplayModel 渲染数据](../../data/ComboDisplayModel.zh.md) 和 [ComboDisplayModel 渲染数据](../../data/ComboDisplayModel.zh.md)。
</details>
绘制后执行其他绘图操作或添加自定义形状。在 `draw` 函数完成之后执行的逻辑，例如根据 `draw` 中已绘制的图形的包围盒大小，调整其他相关的图形。也可以用于绘制更多的图形，返回值和 `draw` 方法一致。
### drawKeyShape
**类型**：`drawKeyShape`
<details>
<summary style="color: #873bf4; cursor: pointer">drawKeyShape</summary>
```typescript
type drawKeyShape = (model: NodeDisplayModel, shapeMap: NodeShapeMap) => DisplayObject;
```
其中，相关的数据类型定义参考 [NodeDisplayModel 渲染数据](../../data/ComboDisplayModel.zh.md) 和 [ComboDisplayModel 渲染数据](../../data/ComboDisplayModel.zh.md)。
</details>
绘制主图形(`keyShape`)，该图形是必须的，例如圆形节点的主图形是一个圆形(`circle`)，矩形节点的主图形是一个矩形(`rect`)。
### drawLabelShape
**类型**：`drawLabelShape`
<details>
<summary style="color: #873bf4; cursor: pointer">drawLabelShape</summary>
```typescript
type drawLabelShape = (
model: NodeDisplayModel | ComboDisplayModel,
shapeMap: NodeShapeMap | ComboShapeMap,
) => DisplayObject;
```
其中，相关的数据类型定义参考 [NodeDisplayModel 渲染数据](../../data/ComboDisplayModel.zh.md) 和 [ComboDisplayModel 渲染数据](../../data/ComboDisplayModel.zh.md)。
</details>
绘制文本图形（`labelShape`）
若需要覆写，则可以参考 [BaseNode.drawLabelShape](https://github.com/antvis/G6/blob/fddf9a5c0f7933b4d704038a7474358cb47037d0/packages/g6/src/stdlib/item/node/base.ts#L277)。
### drawLabelBackgroundShape
**类型**：`drawLabelBackgroundShape`
<details>
<summary style="color: #873bf4; cursor: pointer">drawLabelBackgroundShape</summary>
```typescript
type drawLabelBackgroundShape = (
model: NodeDisplayModel | ComboDisplayModel,
shapeMap: NodeShapeMap | ComboShapeMap,
) => DisplayObject;
```
其中，相关的数据类型定义参考 [NodeDisplayModel 渲染数据](../../data/ComboDisplayModel.zh.md) 和 [ComboDisplayModel 渲染数据](../../data/ComboDisplayModel.zh.md)。
</details>
绘制文本图形的背景框图形（`labelBackgroundShape`）
若需要覆写，则可以参考 [BaseNode.drawLabelBackgroundShape](https://github.com/antvis/G6/blob/fddf9a5c0f7933b4d704038a7474358cb47037d0/packages/g6/src/stdlib/item/node/base.ts#L383)。
### drawIconShape
**类型**：`drawIconShape`
<details>
<summary style="color: #873bf4; cursor: pointer">drawIconShape</summary>
```typescript
type drawIconShape = (
model: NodeDisplayModel | ComboDisplayModel,
shapeMap: NodeShapeMap | ComboShapeMap,
) => DisplayObject;
```
其中，相关的数据类型定义参考 [NodeDisplayModel 渲染数据](../../data/ComboDisplayModel.zh.md) 和 [ComboDisplayModel 渲染数据](../../data/ComboDisplayModel.zh.md)。
</details>
绘制文本图形的图标图形（`iconShape`）的方法
若需要覆写，则可以参考 [BaseNode.drawLabelIconShape](https://github.com/antvis/G6/blob/fddf9a5c0f7933b4d704038a7474358cb47037d0/packages/g6/src/stdlib/item/node/base.ts#L440)
### drawHaloShape
**类型**：`drawHaloShape`
<details>
<summary style="color: #873bf4; cursor: pointer">drawHaloShape</summary>
```typescript
type drawHaloShape = (
model: NodeDisplayModel | ComboDisplayModel,
shapeMap: NodeShapeMap | ComboShapeMap,
) => DisplayObject;
```
其中，相关的数据类型定义参考 [NodeDisplayModel 渲染数据](../../data/ComboDisplayModel.zh.md) 和 [ComboDisplayModel 渲染数据](../../data/ComboDisplayModel.zh.md)。
</details>
绘制节点的光晕图形
### drawAnchorShapes
**类型**：`drawAnchorShapes`
<details>
<summary style="color: #873bf4; cursor: pointer">drawAnchorShapes</summary>
```typescript
type drawAnchorShapes = (
model: NodeDisplayModel | ComboDisplayModel,
shapeMap: NodeShapeMap | ComboShapeMap,
) => {
[shapeId: string]: DisplayObject;
};
```
其中，相关的数据类型定义参考 [NodeDisplayModel 渲染数据](../../data/ComboDisplayModel.zh.md) 和 [ComboDisplayModel 渲染数据](../../data/ComboDisplayModel.zh.md)。
</details>
绘制连接桩图形（`anchorShapes`）的方法
若需要覆写，则可以参考 [BaseNode.drawAnchorShapes](https://github.com/antvis/G6/blob/fddf9a5c0f7933b4d704038a7474358cb47037d0/packages/g6/src/stdlib/item/node/base.ts#L531)
> ⚠️ 注意：`drawAnchorShapes` 返回一个图形 map，key 是图形的 id，value 是图形对象。
### drawBadgeShapes
**类型**：`drawBadgeShapes`
<details>
<summary style="color: #873bf4; cursor: pointer">drawBadgeShapes</summary>
```typescript
type drawBadgeShapes = (
model: NodeDisplayModel | ComboDisplayModel,
shapeMap: NodeShapeMap | ComboShapeMap,
) => {
[shapeId: string]: DisplayObject;
};
```
其中，相关的数据类型定义参考 [NodeDisplayModel 渲染数据](../../data/ComboDisplayModel.zh.md) 和 [ComboDisplayModel 渲染数据](../../data/ComboDisplayModel.zh.md)。
</details>
绘制徽标图形（`badgeShapes`）的方法
若需要覆写，则可以参考 [BaseNode.drawBadgeShapes](https://github.com/antvis/G6/blob/fddf9a5c0f7933b4d704038a7474358cb47037d0/packages/g6/src/stdlib/item/node/base.ts#L629)
> ⚠️ 注意：`drawBadgeShapes` 返回一个图形 map，key 是图形的 id，value 是图形对象。
### drawOtherShapes
**类型**：`drawOtherShapes`
<details>
<summary style="color: #873bf4; cursor: pointer">drawOtherShapes</summary>
```typescript
type drawOtherShapes = (
model: NodeDisplayModel | ComboDisplayModel,
shapeMap: NodeShapeMap | ComboShapeMap,
) => { [id: string]: DisplayObject };
```
其中，相关的数据类型定义参考 [NodeDisplayModel 渲染数据](../../data/ComboDisplayModel.zh.md) 和 [ComboDisplayModel 渲染数据](../../data/ComboDisplayModel.zh.md)。
</details>
绘制上述部分之外的图形，可以在 `drawOtherShapes` 中完成
> ⚠️ 注意：`drawOtherShapes` 返回一个图形 map，key 是图形的 id，value 是图形对象。
### getMergedStyles
**类型**：`getMergedStyles`
<details>
<summary style="color: #873bf4; cursor: pointer">getMergedStyles</summary>
```typescript
type getMergedStyles = (model: NodeDisplayModel) => NodeDisplayModel;
```
其中，相关的数据类型定义参考 [NodeDisplayModel 渲染数据](../../data/ComboDisplayModel.zh.md)。
</details>
将 display model 数据中定义的样式与默认样式和主题样式合并

14
packages/site/docs/common/PluginMergedStyles.en.md
View File

@ -1,9 +1,13 @@
### mergedStyles
Style which is merged from user configuration and default style.
**类型**：`MergedStyles`
<details>
<summary style="color: #873bf4; cursor: pointer">MergedStyles</summary>
```ts
{
type MergedStyles = {
/** Style of the main shape */
keyShape: ShapeStyle;
/** Style of the halo of the main shape */
@ -18,5 +22,9 @@ Style which is merged from user configuration and default style.
badge: ShapeStyle;
/** Port style */
anchor: ShapeStyle;
}
};
```
</details>
Style which is merged from user configuration and default style.

14
packages/site/docs/common/PluginMergedStyles.zh.md
View File

@ -1,9 +1,13 @@
### mergedStyles
由用户配置和默认样式合并得到的样式
**类型**：`MergedStyles`
<details>
<summary style="color: #873bf4; cursor: pointer">MergedStyles</summary>
```ts
{
type MergedStyles = {
/** 主图形的样式 */
keyShape: ShapeStyle;
/** 主图形的 halo 样式 */
@ -18,5 +22,9 @@
badge: ShapeStyle;
/** 连接桩样式 */
anchor: ShapeStyle;
}
};
```
</details>
由用户配置和默认样式合并得到的样式

18
packages/site/docs/common/PluginUpsertShape.en.md
View File

@ -1,9 +1,17 @@
### upsertShape
Add a [shape](/apis/shape) if it does not exist, or update it if it exists.
**Type**: `upsertShape`
```ts
(
<details>
<summary style="color: #873bf4; cursor: pointer">upsertShape</summary>
```typescript
type SHAPE_TYPE = 'rect' | 'circle' | 'ellipse' | 'polygon' | 'image' | 'polyline' | 'line' | 'path' | 'text' | 'group';
type SHAPE_TYPE_3D = 'sphere' | 'cube' | 'plane';
type upsertShape = (
/** Shape type, in lowercase */
shapeType: string,
/** Shape id */
@ -16,3 +24,7 @@ Add a [shape](/apis/shape) if it does not exist, or update it if it exists.
model: NodeDisplayModel | EdgeDisplayModel,
) => DisplayObject;
```
</details>
Add a [shape](/apis/shape) if it does not exist, or update it if it exists.

29
packages/site/docs/common/PluginUpsertShape.zh.md
View File

@ -1,20 +1,33 @@
### upsertShape
新增[图形](/apis/shape)，如果已存在则更新图形
**类型**：`upsertShape`
```ts
(
<details>
<summary style="color: #873bf4; cursor: pointer">upsertShape</summary>
```typescript
type SHAPE_TYPE = 'rect' | 'circle' | 'ellipse' | 'polygon' | 'image' | 'polyline' | 'line' | 'path' | 'text' | 'group';
type SHAPE_TYPE_3D = 'sphere' | 'cube' | 'plane';
type upsertShape = (
/** 图形类型，小写形式 */
shapeType: string,
type: SHAPE_TYPE | SHAPE_TYPE_3D,
/** 图形 id */
shapeId: string,
id: string,
/** 图形样式 */
style: object,
/** 图形 map，key 为图形 id，value 为图形对象 */
shapeMap: NodeShapeMap | EdgeShapeMap,
/** 渲染数据 */
model: NodeDisplayModel | EdgeDisplayModel,
) =>
/** 图形对象 */
DisplayObject;
) => /** 图形对象 */
DisplayObject;
```
其中，相关的数据类型定义参考 [NodeDisplayModel 渲染数据](../../data/ComboDisplayModel.zh.md) 和 [ComboDisplayModel 渲染数据](../../data/ComboDisplayModel.zh.md)。
</details>
新增[图形](/apis/shape)，如果已存在则更新图形

271
packages/site/docs/manual/customize/edgeExtension.en.md
View File

@ -1,271 +0,0 @@
---
title: Custom Edge
order: 2
---
## Example
```js
import { Graph as BaseGraph, extend, Extensions } from '@antv/g6';
// Custom edge type, inherit an existing edge type or edge base class Extensions.BaseEdge
class CustomNode extends Extensions.LineEdge {
// Override methods, see the following section for methods that can be overridden
}
const Graph = extend(BaseGraph, {
// Register custom edge
edges: {
'custom-edge': CustomEdge,
},
});
const graph = new Graph({
// ... Other configurations
edge: {
type: 'custom-edge', // Use the registered edge
},
});
```
## Override methods
### draw
:::info
In most cases, there is no need to override the draw method. It is more common to override methods such as `drawKeyShape` and `drawLabelShape`, which will be introduced in the following section.
:::
G5 5.0 removes the `update` and `afterUpdate` methods. Now you only need to override the `draw` method and the `afterDraw` method, and G6 will automatically update the shapes incrementally based on the updated attributes.
The `draw` method draws each part of the edge by calling methods such as `this.drawKeyShape`.
Refer to the [draw](https://github.com/antvis/G6/blob/6be8f9810ec3b9310371f37de1a2591f14db67f1/packages/g6/src/stdlib/item/edge/line.ts#L28) method of the `line-edge` type edge for overriding.
### afterDraw
The logic executed after the `draw` function is completed can also be used to draw more shapes. The return value is the same as the `draw` method. It is not implemented in the built-in edge types.
### drawKeyShape
Draw the main shape (`keyShape`), which is required. For example, the main shape of a line edge is a straight line (`line`) and the head and tail arrows (`arrow`), and the main shape of a curved edge replaces the straight line with a curved path (`path`).
The following example overrides the `drawKeyShape` method to draw a **straight edge**:
```typescript
public drawKeyShape(
model: EdgeDisplayModel,
sourcePoint: Point,
targetPoint: Point,
shapeMap: EdgeShapeMap,
) {
const { keyShape: keyShapeStyle } = this.mergedStyles;
const { startArrow, endArrow, ...others } = keyShapeStyle;
const lineStyle = {
...others,
x1: sourcePoint.x,
y1: sourcePoint.y,
z1: sourcePoint.z || 0,
x2: targetPoint.x,
y2: targetPoint.y,
z2: targetPoint.z || 0,
isBillboard: true,
};
// upsert arrow
this.upsertArrow('start', startArrow, others, model, lineStyle);
this.upsertArrow('end', endArrow, others, model, lineStyle);
// upsert and return shape
return this.upsertShape('line', 'keyShape', lineStyle, shapeMap, model);
}
```
If you want to draw a curve or polyline, you should calculate the path based on the control points in `drawKeyShape`. For example, the `drawKeyShape` method of the built-in `quadratic-edge`:
```typescript
public drawKeyShape(
model: EdgeDisplayModel,
sourcePoint: Point,
targetPoint: Point,
shapeMap: EdgeShapeMap,
) {
const { keyShape: keyShapeStyle } = this.mergedStyles as any;
const { startArrow, endArrow, ...others } = keyShapeStyle;
// Calculate control points based on arc position, arc, etc.
const controlPoint = this.getControlPoints(
sourcePoint,
targetPoint,
keyShapeStyle.curvePosition,
keyShapeStyle.controlPoints,
keyShapeStyle.curveOffset,
)[0];
const lineStyle = {
...others,
path: [
['M', sourcePoint.x, sourcePoint.y],
['Q', controlPoint.x, controlPoint.y, targetPoint.x, targetPoint.y],
],
};
// upsert arrow
this.upsertArrow('start', startArrow, others, model, lineStyle);
this.upsertArrow('end', endArrow, others, model, lineStyle);
// upsert and return shape
return this.upsertShape('path', 'keyShape', lineStyle, shapeMap, model);
}
```
The `this.getControlPoints` can be overridden to customize the control point calculation logic, see [getControlPoints](#getcontrolpoints).
### drawHaloShape
Draw the main shape outline (`haloShape`), which is usually displayed in the `selected` and `active` states.
Refer to [BaseEdge.drawHaloShape](https://github.com/antvis/G6/blob/6be8f9810ec3b9310371f37de1a2591f14db67f1/packages/g6/src/stdlib/item/edge/base.ts#L464) for overriding.
### drawLabelShape
Draw the text shape (`labelShape`)
Refer to [BaseEdge.drawLabelShape](https://github.com/antvis/G6/blob/6be8f9810ec3b9310371f37de1a2591f14db67f1/packages/g6/src/stdlib/item/edge/base.ts#L194) for overriding.
### drawLabelBackgroundShape
Draw the background shape of the text shape (`labelBackgroundShape`)
Refer to [BaseEdge.drawLabelBackgroundShape](https://github.com/antvis/G6/blob/6be8f9810ec3b9310371f37de1a2591f14db67f1/packages/g6/src/stdlib/item/edge/base.ts#L311) for overriding.
### drawOtherShapes
Draw shapes other than the above parts, which can be completed in `drawOtherShapes`, such as drawing an extra circle:
```typescript
public drawOtherShapes(
model: EdgeDisplayModel,
shapeMap: EdgeShapeMap,
) {
return {
extraShape: upsertShape(
'circle',
'other-circle-shape',
{
r: 4,
fill: '#0f0',
x: -20,
y: 0,
},
shapeMap,
),
};
}
```
## Member properties and methods
`BaseEdge` and its subclasses provide some member properties and methods that can be used when customizing edges.
### getControlPoints
Get the control points, usually used to calculate the path. For example, the control points of the polyline edge are the turning points, and the control points of the curved edge are the control points of the curve.
When inheriting `Extensions.PolylineEdge`, `Extensions.QuadraticEdge`, `Extensions.CubicEdge`, `Extensions.CubicHorizontalEdge`, `Extensions.CubicVerticalEdge`, you can override `getControlPoints` to modify the logic of the control points.
The `getControlPoints` type of `Extensions.PolylineEdge` is:
```typescript
(
/** Edge rendering data */
model: EdgeDisplayModel,
/** Edge start point */
sourcePoint: Point,
/** Edge end point */
targetPoint: Point,
) =>
/** Calculated control points */
{
x: number;
y: number;
z?: number;
}[]
```
The `getControlPoints` type of `Extensions.QuadraticEdge`、`Extensions.CubicEdge`、`Extensions.CubicHorizontalEdge`、`Extensions.CubicVerticalEdge` is:
```typescript
(
/** Edge start point */
startPoint: Point,
/** Edge end point */
endPoint: Point,
/** Percentage of the projection of the control point on the line connecting the two end points, ranging from 0 to 1 */
percent: number,
/** Control point configuration in data */
controlPoints: Point[],
/** Arc distance */
offset: number,
) =>
/** Calculated control points */
{
x: number;
y: number;
z?: number;
}[];
```
### getPath
The member method of `Extensions.PolylineEdge` can only be overridden when inheriting it to implement a custom edge. Because the automatic path-finding algorithm of the polyline is more complicated, this function is extracted separately. Also because of the complexity of the algorithm, the performance of the polyline edge is slightly worse. If there is a certain rule for drawing the polyline edge, you can inherit the built-in polyline edge and customize the `getPath` method to override the automatic path-finding logic. The function type is:
```typescript
(
/** Edge rendering data */
model: EdgeDisplayModel,
/** Edge start point */
points: Point[],
/** Radius of the polyline turning point */
radius: number,
/** Edge end point */
routeCfg?: RouterCfg,
/** Whether to use the A* algorithm */
auto?: boolean,
) =>
/** Path */
string;
```
<details>
<summary style="color: #873bf4; cursor: pointer;">RouterCfg</summary>
```ts
type RouterCfg = {
name: 'orth' | 'er';
/** Spacing between lines and points */
offset?: number;
/** Grid size */
gridSize?: number;
/** Maximum allowable rotation angle (radian) */
maxAllowedDirectionChange?: number;
/** Allowed edge directions */
directions?: any[];
/** Penalties */
penalties?: {};
/** Determine if use simple router for polyline when no obstacles */
simple?: boolean;
/** Function to calculate the distance between two points */
distFunc?: (p1: PolyPoint, p2: PolyPoint) => number;
/** Simplified function to find path */
fallbackRoute?: (p1: PolyPoint, p2: PolyPoint, startNode?: Node, endNode?: Node, cfg?: RouterCfg) => PolyPoint[];
/** Maximum loops */
maximumLoops?: number;
/**
* Whether to automatically avoid other nodes (obstacles) on the path
* Defaults to false.
*/
enableObstacleAvoidance?: boolean;
};
```
</details>
<embed src="../../common/PluginMergedStyles.en.md"></embed>
<embed src="../../common/PluginUpsertShape.en.md"></embed>

266
packages/site/docs/manual/customize/edgeExtension.zh.md
View File

@ -1,266 +0,0 @@
---
title: 自定义边
order: 2
---
## 示例
```js
import { Graph as BaseGraph, extend, Extensions } from '@antv/g6';
// 自定义变类型，继承一个已有的边类型或边基类 Extensions.BaseEdge
class CustomNode extends Extensions.LineEdge {
// 覆写方法，可覆写的类方法见下文
}
const Graph = extend(BaseGraph, {
// 注册自定义边
edges: {
'custom-edge': CustomEdge,
},
});
const graph = new Graph({
// ... 其他配置
edge: {
type: 'custom-edge', // 使用注册的节点
},
});
```
## 覆写方法
### draw
:::info{title=提示}
大多数情况下并不需要覆写 draw 方法，更常用的做法是覆写 `drawKeyShape`、`drawLabelShape` 等方法，这些方法将在下文介绍。
:::
G5 5.0 移除了 `update` 和 `afterUpdate` 方法。现在只需要复写 `draw` 方法和 `afterDraw` 方法，G6 将自动根据更新的属性增量更新图形。
draw 方法通过调用 `this.drawKeyShape` 等方法分别绘制边各部分。
你可以参考 `line-edge` 类型边的 [draw](https://github.com/antvis/G6/blob/6be8f9810ec3b9310371f37de1a2591f14db67f1/packages/g6/src/stdlib/item/edge/line.ts#L28) 方法进行覆写。
### afterDraw
在 `draw` 函数完成之后执行的逻辑，也可以用于绘制更多的图形，返回值和 `draw` 方法一致。在内置的节点类型中，没有对它进行实现。
### drawKeyShape
绘制主图形(`keyShape`)，该图形是必须的，例如直线边的主图形是一条直线(`line`) 以及首尾箭头(`arrow`)，曲线边的主图形则将直线换成了曲线路径(`path`)。
覆写 `drawKeyShape` 方法绘制**直线边**的示例如下：
```typescript
public drawKeyShape(
model: EdgeDisplayModel,
sourcePoint: Point,
targetPoint: Point,
shapeMap: EdgeShapeMap,
) {
const { keyShape: keyShapeStyle } = this.mergedStyles;
const { startArrow, endArrow, ...others } = keyShapeStyle;
const lineStyle = {
...others,
x1: sourcePoint.x,
y1: sourcePoint.y,
z1: sourcePoint.z || 0,
x2: targetPoint.x,
y2: targetPoint.y,
z2: targetPoint.z || 0,
isBillboard: true,
};
// 绘制箭头
this.upsertArrow('start', startArrow, others, model, lineStyle);
this.upsertArrow('end', endArrow, others, model, lineStyle);
// 绘制并返回图形
return this.upsertShape('line', 'keyShape', lineStyle, shapeMap, model);
}
```
若要绘制曲线或折线，`drawKeyShape` 中应当根据控制点，计算路径。例如内置的 `quadratic-edge` 的 `drawKeyShape` 方法：
```typescript
public drawKeyShape(
model: EdgeDisplayModel,
sourcePoint: Point,
targetPoint: Point,
shapeMap: EdgeShapeMap,
) {
const { keyShape: keyShapeStyle } = this.mergedStyles as any;
const { startArrow, endArrow, ...others } = keyShapeStyle;
// 根据弧度位置、弧度等信息计算控制点
const controlPoint = this.getControlPoints(
sourcePoint,
targetPoint,
keyShapeStyle.curvePosition,
keyShapeStyle.controlPoints,
keyShapeStyle.curveOffset,
)[0];
const lineStyle = {
...others,
path: [
['M', sourcePoint.x, sourcePoint.y],
['Q', controlPoint.x, controlPoint.y, targetPoint.x, targetPoint.y],
],
};
// 绘制箭头
this.upsertArrow('start', startArrow, others, model, lineStyle);
this.upsertArrow('end', endArrow, others, model, lineStyle);
// 绘制并返回图形
return this.upsertShape('path', 'keyShape', lineStyle, shapeMap, model);
}
```
其中，`this.getControlPoints` 可以进行复写，从而自定义控制点计算逻辑，见 [getControlPoints](#getcontrolpoints)。
### drawHaloShape
绘制主图形轮廓图形(`haloShape`)，通常在 `selected`, `active` 状态下显示。
若需要覆写，则可以参考 [BaseEdge.drawHaloShape](https://github.com/antvis/G6/blob/6be8f9810ec3b9310371f37de1a2591f14db67f1/packages/g6/src/stdlib/item/edge/base.ts#L464)
### drawLabelShape
绘制文本图形（`labelShape`）
若需要覆写，则可以参考 [BaseEdge.drawLabelShape](https://github.com/antvis/G6/blob/6be8f9810ec3b9310371f37de1a2591f14db67f1/packages/g6/src/stdlib/item/edge/base.ts#L194)
### drawLabelBackgroundShape
绘制文本图形的背景框图形（`labelBackgroundShape`）
若需要覆写，则可以参考 [BaseEdge.drawLabelBackgroundShape](https://github.com/antvis/G6/blob/6be8f9810ec3b9310371f37de1a2591f14db67f1/packages/g6/src/stdlib/item/edge/base.ts#L311)
### drawOtherShapes
绘制上述内容之外的图形，可以在 `drawOtherShapes` 中完成，例如额外创建一个圆形：
```typescript
public drawOtherShapes(
model: EdgeDisplayModel,
shapeMap: EdgeShapeMap,
) {
return {
extraShape: upsertShape(
'circle',
'other-circle-shape',
{
r: 4,
fill: '#0f0',
x: -20,
y: 0,
},
shapeMap,
),
};
}
```
## 成员属性及方法
### getControlPoints
获取控制点，通常用于计算路径。例如折线边的控制点是拐点，曲线边的控制点是曲线的控制点。
当继承 Extensions.PolylineEdge、Extensions.QuadraticEdge、Extensions.CubicEdge、Extensions.CubicHorizontalEdge、Extensions.CubicVerticalEdge 时，可以通过复写 `getControlPoints` 来修改控制点的逻辑。
`Extensions.PolylineEdge` 的 `getControlPoints` 类型为：
```typescript
(
/** 边的渲染数据 */
model: EdgeDisplayModel,
/** 边的起点 */
sourcePoint: Point,
/** 边的终点 */
targetPoint: Point,
) =>
/** 计算后的控制点 */
{
x: number;
y: number;
z?: number;
}[]
```
`Extensions.QuadraticEdge`、`Extensions.CubicEdge`、`Extensions.CubicHorizontalEdge`、`Extensions.CubicVerticalEdge` 的 `getControlPoints` 类型为：
```typescript
(
/** 边的起点 */
startPoint: Point,
/** 边的终点 */
endPoint: Point,
/** 控制点的投影在两端点连线上的百分比，范围 0 到 1 */
percent: number,
/** 数据中控制点配置 */
controlPoints: Point[],
/** 弧度距离 */
offset: number,
) =>
/** 计算后的控制点 */
{
x: number;
y: number;
z?: number;
}[];
```
### getPath
`Extensions.PolylineEdge` 的成员方法，仅在继承它来实现自定义边时可复写。由于折线的自动寻径算法比较复杂，因此单独抽出了这个函数。也由于算法复杂性，折线边的性能稍差。如果有确定的折线边绘制规则，可以通过继承内置折线边，自定义 `getPath` 方法覆盖自动寻径的逻辑。函数类型为：
```typescript
(
/** 边的渲染数据 */
model: EdgeDisplayModel,
/** 起点和终点 */
points: Point[],
/** 折线拐点的弧度 */
radius: number,
/** 折线弯折的配置 */
routeCfg?: RouterCfg,
/** 是否使用 A* 算法 */
auto?: boolean,
) =>
/** 路径 */
string;
```
<details>
<summary style="color: #873bf4; cursor: pointer;">RouterCfg</summary>
```ts
type RouterCfg = {
name: 'orth' | 'er';
/** 线与点之间的间距 */
offset?: number;
/** 网格大小 */
gridSize?: number;
/** 最大旋转角度（弧度） */
maxAllowedDirectionChange?: number;
/** 允许的边的方向 */
directions?: any[];
/** 起点和终点的权重 */
penalties?: {};
/** 是否使用简单的折线拐点寻径算法 */
simple?: boolean;
/** 计算两点之间距离的函数 */
distFunc?: (p1: PolyPoint, p2: PolyPoint) => number;
/** 简化的寻径函数 */
fallbackRoute?: (p1: PolyPoint, p2: PolyPoint, startNode?: Node, endNode?: Node, cfg?: RouterCfg) => PolyPoint[];
/** 最大循环次数 */
maximumLoops?: number;
/** 是否自动避开障碍物，默认为 false */
enableObstacleAvoidance?: boolean;
};
```
</details>
<embed src="../../common/PluginMergedStyles.zh.md"></embed>
<embed src="../../common/PluginUpsertShape.zh.md"></embed>

193
packages/site/docs/manual/customize/nodeExtension.en.md
View File

@ -1,193 +0,0 @@
---
title: Custom Node
order: 1
---
## Example
```js
import { Graph as BaseGraph, extend, Extensions } from '@antv/g6';
// Custom node type, inherit an existing node type or node base class Extensions.BaseNode
class CustomNode extends Extensions.CircleNode {
// Override methods, see the following section for methods that can be overridden
}
const Graph = extend(BaseGraph, {
// Register custom node
nodes: {
'custom-node': CustomNode,
},
});
const graph = new Graph({
// ... Other configurations
node: {
type: 'custom-node', // Use the registered node
},
});
```
## Override methods
### draw
:::info
In most cases, there is no need to override the draw method. It is more common to override methods such as `drawKeyShape` and `drawLabelShape`, which will be introduced in the following section.
:::
G5 5.0 removes the `update` and `afterUpdate` methods. Now you only need to override the `draw` method and the `afterDraw` method, and G6 will automatically update the shapes incrementally based on the updated attributes.
The `draw` method draws each part of the edge by calling methods such as `this.drawKeyShape`.
Refer to the [draw](https://github.com/antvis/G6/blob/6be8f9810ec3b9310371f37de1a2591f14db67f1/packages/g6/src/stdlib/item/node/circle.ts#L25) method of the `circle-node` type node for overriding.
### afterDraw
The logic executed after the `draw` function is completed can also be used to draw more shapes. The return value is the same as the `draw` method. It is not implemented in the built-in edge types.
### drawKeyShape
Draw the main shape (`keyShape`), which is required. For example, the main shape of a circle node is a circle (`circle`), and the main shape of a rectangular node is a rectangle (`rect`).
A simple example of overriding the `drawKeyShape` method is as follows:
```typescript
public drawKeyShape(
model: NodeDisplayModel,
shapeMap: NodeShapeMap,
): DisplayObject {
return this.upsertShape(
'circle',
'keyShape',
this.mergedStyles.keyShape,
shapeMap,
model,
);
}
```
### drawHaloShape
Draw the main shape outline (`haloShape`), which is usually displayed in the `selected` and `active` states.
Refer to [BaseNode.drawHaloShape](https://github.com/antvis/G6/blob/fddf9a5c0f7933b4d704038a7474358cb47037d0/packages/g6/src/stdlib/item/node/base.ts#L491) for overriding.
### drawLabelShape
Draw the text shape (`labelShape`)
Refer to [BaseNode.drawLabelShape](https://github.com/antvis/G6/blob/fddf9a5c0f7933b4d704038a7474358cb47037d0/packages/g6/src/stdlib/item/node/base.ts#L277)。 for overriding.
### drawLabelBackgroundShape
Draw the background shape of the text shape (`labelBackgroundShape`)
Refer to [BaseNode.drawLabelBackgroundShape](https://github.com/antvis/G6/blob/fddf9a5c0f7933b4d704038a7474358cb47037d0/packages/g6/src/stdlib/item/node/base.ts#L383)。 for overriding.
### drawLabelIconShape
Draw the icon shape of the text shape (`iconShape`)
Refer to [BaseNode.drawLabelIconShape](https://github.com/antvis/G6/blob/fddf9a5c0f7933b4d704038a7474358cb47037d0/packages/g6/src/stdlib/item/node/base.ts#L440) for overriding.
### drawAnchorShapes
Draw the port shape (`anchorShapes`)
Refer to [BaseNode.drawAnchorShapes](https://github.com/antvis/G6/blob/fddf9a5c0f7933b4d704038a7474358cb47037d0/packages/g6/src/stdlib/item/node/base.ts#L531) for overriding.
> ⚠️ Note: `drawAnchorShapes` returns a shape map, where the key is the id of the shape and the value is the shape object.
### drawBadgeShapes
Draw the badge shape (`badgeShapes`)
Refer to [BaseNode.drawBadgeShapes](https://github.com/antvis/G6/blob/fddf9a5c0f7933b4d704038a7474358cb47037d0/packages/g6/src/stdlib/item/node/base.ts#L629) for overriding.
> ⚠️ Note: `drawBadgeShapes` returns a shape map, where the key is the id of the shape and the value is the shape object.
### drawOtherShapes
Draw shapes other than the above parts, which can be completed in `drawOtherShapes`, such as drawing an extra circle:
For example, create an extra text:
```typescript
drawOtherShapes(model, shapeMap) {
const { data } = model;
const text = data.otherShapes.text;
return {
textShape: this.upsertShape(
'text',
'other-text-shape',
{
text,
fontSize: 12
},
shapeMap,
model,
),
// ... Other extra shapes
};
}
```
> ⚠️ Note: `drawOtherShapes` returns a shape map, where the key is the id of the shape and the value is the shape object.
#### Use G2 charts as custom nodes
By using `drawOtherShapes`, you can render many custom shapes, which are all based on `@antv/g` drawing. Therefore, you can use the shapes of any graphics library based on `@antv/g` as the shapes of custom nodes. For example, you can use the charts built by `@antv/g2` as the shapes of custom nodes. Here is a simple example:
```typescript
import { stdlib, renderToMountedElement } from '@antv/g2';
/** stdlib is the standard tool library of G2 */
const G2Library = { ...stdlib() };
// Here is the drawOtherShapes method of the custom node
drawOtherShapes(model, shapeMap) {
// Create a group
const group = this.upsertShape(
'group',
'g2-chart-group',
{},
shapeMap,
model,
);
// Make the group respond to events
group.isMutationObserved = true;
// When the group is mounted to the canvas, render the G2 chart
group.addEventListener('DOMNodeInsertedIntoDocument', () => {
// Render the G2 chart to the group
renderToMountedElement(
{
// Here fill in the G2 Specification
},
{
group,
library: G2Library,
},
);
});
return {
'g2-chart-group': group,
};
}
```
For more information about using G2 charts, please refer to [G2 website](https://g2.antv.antgroup.com/).
G6 5.0 also provides relevant examples:
- [G2 Bar Chart Node](/zh/examples/item/customNode/#g2BarChart)
- [G2 Lattice Node](/zh/examples/item/customNode/#g2LatticeChart)
- [G2 Active Node](/zh/examples/item/customNode/#g2ActiveChart)
## Member properties and methods
`BaseNode` and its subclasses provide some member properties and methods for easily adding or updating shapes.
<embed src="../../common/PluginMergedStyles.zh.md"></embed>
<embed src="../../common/PluginUpsertShape.zh.md"></embed>

195
packages/site/docs/manual/customize/nodeExtension.zh.md
View File

@ -1,195 +0,0 @@
---
title: 自定义节点
order: 1
---
## 示例
```js
import { Graph as BaseGraph, extend, Extensions } from '@antv/g6';
// 自定义节点类型，继承一个已有的节点类型或节点基类 Extensions.BaseNode
class CustomNode extends Extensions.CircleNode {
// 覆写方法，可覆写的类方法见下文
}
const Graph = extend(BaseGraph, {
// 注册自定义节点
nodes: {
'custom-node': CustomNode,
},
});
const graph = new Graph({
// ... 其他配置
node: {
type: 'custom-node', // 使用注册的节点
},
});
```
## 覆写方法
### draw
:::info{title=提示}
大多数情况下并不需要覆写 draw 方法，更常用的做法是覆写 `drawKeyShape`、`drawLabelShape` 等方法，这些方法将在下文介绍。
:::
G5 5.0 移除了 `update` 和 `afterUpdate` 方法。现在只需要覆写 `draw` 方法和 `afterDraw` 方法，G6 将自动根据更新的属性增量更新图形。
draw 方法通过调用 `this.drawKeyShape` 等方法分别绘制节点各部分。
你可以参考 `circle-node` 类型节点的 [draw](https://github.com/antvis/G6/blob/6be8f9810ec3b9310371f37de1a2591f14db67f1/packages/g6/src/stdlib/item/node/circle.ts#L25) 方法进行覆写。
### afterDraw
在 `draw` 函数完成之后执行的逻辑，例如根据 `draw` 中已绘制的图形的包围盒大小，调整其他相关的图形。也可以用于绘制更多的图形，返回值和 `draw` 方法一致。
在内置的节点类型中，没有对它进行实现。
### drawKeyShape
绘制主图形(`keyShape`)，该图形是必须的，例如圆形节点的主图形是一个圆形(`circle`)，矩形节点的主图形是一个矩形(`rect`)。
覆写 `drawKeyShape` 方法的示例如下：
```typescript
public drawKeyShape(
model: NodeDisplayModel,
shapeMap: NodeShapeMap,
): DisplayObject {
return this.upsertShape(
'circle',
'keyShape',
this.mergedStyles.keyShape,
shapeMap,
model,
);
}
```
### drawHaloShape
绘制主图形轮廓图形(`haloShape`)，通常在 `selected`, `active` 状态下显示。
若需要覆写，则可以参考 [BaseNode.drawHaloShape](https://github.com/antvis/G6/blob/fddf9a5c0f7933b4d704038a7474358cb47037d0/packages/g6/src/stdlib/item/node/base.ts#L491)
### drawLabelShape
绘制文本图形（`labelShape`）
若需要覆写，则可以参考 [BaseNode.drawLabelShape](https://github.com/antvis/G6/blob/fddf9a5c0f7933b4d704038a7474358cb47037d0/packages/g6/src/stdlib/item/node/base.ts#L277)。
### drawLabelBackgroundShape
绘制文本图形的背景框图形（`labelBackgroundShape`）
若需要覆写，则可以参考 [BaseNode.drawLabelBackgroundShape](https://github.com/antvis/G6/blob/fddf9a5c0f7933b4d704038a7474358cb47037d0/packages/g6/src/stdlib/item/node/base.ts#L383)。
### drawLabelIconShape
绘制文本图形的图标图形（`iconShape`）的方法
若需要覆写，则可以参考 [BaseNode.drawLabelIconShape](https://github.com/antvis/G6/blob/fddf9a5c0f7933b4d704038a7474358cb47037d0/packages/g6/src/stdlib/item/node/base.ts#L440)
### drawAnchorShapes
绘制连接桩图形（`anchorShapes`）的方法
若需要覆写，则可以参考 [BaseNode.drawAnchorShapes](https://github.com/antvis/G6/blob/fddf9a5c0f7933b4d704038a7474358cb47037d0/packages/g6/src/stdlib/item/node/base.ts#L531)
> ⚠️ 注意：`drawAnchorShapes` 返回一个图形 map，key 是图形的 id，value 是图形对象。
### drawBadgeShapes
绘制徽标图形（`badgeShapes`）的方法
若需要覆写，则可以参考 [BaseNode.drawBadgeShapes](https://github.com/antvis/G6/blob/fddf9a5c0f7933b4d704038a7474358cb47037d0/packages/g6/src/stdlib/item/node/base.ts#L629)
> ⚠️ 注意：`drawBadgeShapes` 返回一个图形 map，key 是图形的 id，value 是图形对象。
### drawOtherShapes
绘制上述部分之外的图形，可以在 `drawOtherShapes` 中完成
例如额外创建一个文本：
```typescript
drawOtherShapes(model, shapeMap) {
const { data } = model;
const text = data.otherShapes.text;
return {
textShape: this.upsertShape(
'text',
'other-text-shape',
{
text,
fontSize: 12
},
shapeMap,
model,
),
// ... 其他额外的图形
};
}
```
> ⚠️ 注意：`drawOtherShapes` 返回一个图形 map，key 是图形的 id，value 是图形对象。
#### 使用 G2 图表作为自定义节点
通过 `drawOtherShapes` 可以渲染许多自定义图形，这些图形底层都是基于 `@antv/g` 绘制的，因此可以将任何基于 `@antv/g` 构建的图形库的图形作为自定义节点的图形。例如，可以使用 `@antv/g2` 构建的图表作为自定义节点的图形，下面是一个简单的例子：
```typescript
import { stdlib, renderToMountedElement } from '@antv/g2';
/** stdlib 是 G2 的标准工具库 */
const G2Library = { ...stdlib() };
// 下面是自定义节点的 drawOtherShapes 方法
drawOtherShapes(model, shapeMap) {
// 创建一个 group
const group = this.upsertShape(
'group',
'g2-chart-group',
{},
shapeMap,
model,
);
// 让 group 响应事件
group.isMutationObserved = true;
// 当 group 挂载到画布上时，渲染 G2 图表
group.addEventListener('DOMNodeInsertedIntoDocument', () => {
// 将 G2 图表渲染到 group 里
renderToMountedElement(
{
// 这里填写 G2 的 Specification
},
{
group,
library: G2Library,
},
);
});
return {
'g2-chart-group': group,
};
}
```
更多的关于 G2 图表的使用，可以参考 [G2 官网](https://g2.antv.antgroup.com/)。
G6 5.0 也提供了相关案例：
- [使用 G2 自定义的条形图节点](/zh/examples/item/customNode/#g2BarChart)
- [使用 G2 自定义的点阵图节点](/zh/examples/item/customNode/#g2LatticeChart)
- [使用 G2 自定义的活动图节点](/zh/examples/item/customNode/#g2ActiveChart)
## 成员属性及方法
`BaseNode` 及其子类提供了一些成员属性和方法，用于方便地新增或更新图形。
<embed src="../../common/PluginMergedStyles.zh.md"></embed>
<embed src="../../common/PluginUpsertShape.zh.md"></embed>

155
packages/site/docs/manual/customize/overview.en.md
View File

@ -46,39 +46,39 @@ In addition to the default registered extensions, other extensions need to be re
### 1. nodes
| type | Import from | Registered by Default | Demo | Note |
| :--------------- | :----------------------- | :-------------------- | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :--------------------------------------- |
| 'circle-node' | Extensions.CircleNode | ✅ Yes | [DEMO](https://g6-next.antv.antgroup.com/en/examples/item/defaultNodes/#circle) | |
| 'rect-node' | Extensions.RectNode | ✅ Yes | [Rect DEMO](https://g6-next.antv.antgroup.com/en/examples/item/defaultNodes/#rect)，[Round Rect DEMO](https://g6-next.antv.antgroup.com/en/examples/item/defaultNodes/#radiusRect) | |
| 'image-node' | Extensions.ImageNode | ✅ Yes | [DEMO](https://g6-next.antv.antgroup.com/en/examples/item/defaultNodes/#image) | |
| 'donut-node' | Extensions.DonutNode | No | [DEMO](https://g6-next.antv.antgroup.com/en/examples/item/defaultNodes/#donut) | |
| 'diamond-node' | Extensions.DiamondNode | No | [DEMO](https://g6-next.antv.antgroup.com/en/examples/item/defaultNodes/#diamond) | |
| 'hexagon-node' | Extensions.HexagonNode | No | [DEMO](https://g6-next.antv.antgroup.com/en/examples/item/defaultNodes/#hexagon) | |
| 'star-node' | Extensions.StarNode | No | [DEMO](https://g6-next.antv.antgroup.com/en/examples/item/defaultNodes/#star) | |
| 'triangle-node' | Extensions.TriangleNode | No | [DEMO](https://g6-next.antv.antgroup.com/en/examples/item/defaultNodes/#triangle) | |
| 'ellipse-node' | Extensions.EllipseNode | No | [DEMO](https://g6-next.antv.antgroup.com/en/examples/item/defaultNodes/#ellipse) | |
| 'modelRect-node' | Extensions.ModelRectNode | No | [DEMO](https://g6-next.antv.antgroup.com/en/examples/item/defaultNodes/#modelRect) | |
| 'sphere-node' | Extensions.SphereNode | No | [DEMO](https://g6-next.antv.antgroup.com/en/examples/item/defaultNodes/#3d-node) | availabel only when renderer: 'webgl-3d' |
| 'cube-node' | Extensions.CubeNode | No | [DEMO](https://g6-next.antv.antgroup.com/en/examples/item/defaultNodes/#3d-node) | availabel only when renderer: 'webgl-3d' |
| type | Import from | Registered by Default | Demo | API | Note |
| :--------------- | :----------------------- | :-------------------- | :--------------------------------------------------------------------------------------------------------------- | :---------------------------------------- | :--------------------------- |
| 'circle-node' | Extensions.CircleNode | ✅ Yes | [DEMO](/en/examples/item/defaultNodes/#circle) | [API](/en/apis/item/node/circle-node) | |
| 'rect-node' | Extensions.RectNode | ✅ Yes | [Rect DEMO](/en/examples/item/defaultNodes/#rect)，[Round Rect DEMO](/en/examples/item/defaultNodes/#radiusRect) | [API](/en/apis/item/node/circle-node) | |
| 'image-node' | Extensions.ImageNode | ✅ Yes | [DEMO](/en/examples/item/defaultNodes/#image) | [API](/en/apis/item/node/image-node) | |
| 'donut-node' | Extensions.DonutNode | No | [DEMO](/en/examples/item/defaultNodes/#donut) | [API](/en/apis/item/node/donut-node) | |
| 'diamond-node' | Extensions.DiamondNode | No | [DEMO](/en/examples/item/defaultNodes/#diamond) | [API](/en/apis/item/node/diamond-node) | |
| 'hexagon-node' | Extensions.HexagonNode | No | [DEMO](/en/examples/item/defaultNodes/#hexagon) | [API](/en/apis/item/node/hexagon-node) | |
| 'star-node' | Extensions.StarNode | No | [DEMO](/en/examples/item/defaultNodes/#star) | [API](/en/apis/item/node/star-node) | |
| 'triangle-node' | Extensions.TriangleNode | No | [DEMO](/en/examples/item/defaultNodes/#triangle) | [API](/en/apis/item/node/triangle-node) | |
| 'ellipse-node' | Extensions.EllipseNode | No | [DEMO](/en/examples/item/defaultNodes/#ellipse) | [API](/en/apis/item/node/ellipse-node) | |
| 'modelRect-node' | Extensions.ModelRectNode | No | [DEMO](/en/examples/item/defaultNodes/#modelRect) | [API](/en/apis/item/node/model-rect-node) | |
| 'sphere-node' | Extensions.SphereNode | No | [DEMO](/en/examples/item/defaultNodes/#3d-node) | [API](/en/apis/item/node/sphere-node) | available only when renderer |
| 'cube-node' | Extensions.CubeNode | No | [DEMO](/en/examples/item/defaultNodes/#3d-node) | [API](/en/apis/item/node/cube-node) | available only when renderer |
### 2. edges
| type | Import from | Registered by Default | Demo | Note |
| :---------------------- | :----------------------------- | :-------------------- | :--------------------------------------------------------------------------------------- | :--- |
| 'line-edge' | Extensions.LineEdge | ✅ Yes | [DEMO](https://g6-next.antv.antgroup.com/en/examples/item/defaultEdges/#line) | |
| 'loop-edge' | Extensions.LineEdge | ✅ Yes | [DEMO](https://g6-next.antv.antgroup.com/en/examples/item/defaultEdges/#loop) | |
| 'quadratic-edge' | Extensions.QuadraticEdge | No | [DEMO](https://g6-next.antv.antgroup.com/en/examples/item/defaultEdges/#quadratic) | |
| 'cubic-edge' | Extensions.CubicEdge | No | [DEMO](https://g6-next.antv.antgroup.com/en/examples/item/defaultEdges/#cubic) | |
| 'polyline-edge' | Extensions.PolylineEdge | No | [DEMO](https://g6-next.antv.antgroup.com/en/examples/item/defaultEdges/#polyline) | |
| 'cubic-horizontal-edge' | Extensions.CubicHorizontalEdge | No | [DEMO](https://g6-next.antv.antgroup.com/en/examples/item/defaultEdges/#horizontalCubic) | |
| 'cubic-vertical-edge' | Extensions.CubicVerticalEdge | No | [DEMO](https://g6-next.antv.antgroup.com/en/examples/item/defaultEdges/#verticalCubic) | |
| type | Import from | Registered by Default | Demo | API | Note |
| :---------------------- | :----------------------------- | :-------------------- | :------------------------------------------------------ | :---------------------------------------------- | :--- |
| 'line-edge' | Extensions.LineEdge | ✅ Yes | [DEMO](/en/examples/item/defaultEdges/#line) | [API](/en/apis/item/edge/line-edge) | |
| 'loop-edge' | Extensions.LoopEdge | ✅ Yes | [DEMO](/en/examples/item/defaultEdges/#loop) | [API](/en/apis/item/edge/loop-edge) | |
| 'quadratic-edge' | Extensions.QuadraticEdge | No | [DEMO](/en/examples/item/defaultEdges/#quadratic) | [API](/en/apis/item/edge/quadratic-edge) | |
| 'cubic-edge' | Extensions.CubicEdge | No | [DEMO](/en/examples/item/defaultEdges/#cubic) | [API](/en/apis/item/edge/cubic-edge) | |
| 'polyline-edge' | Extensions.PolylineEdge | No | [DEMO](/en/examples/item/defaultEdges/#polyline) | [API](/en/apis/item/edge/polyline-edge) | |
| 'cubic-horizontal-edge' | Extensions.CubicHorizontalEdge | No | [DEMO](/en/examples/item/defaultEdges/#horizontalCubic) | [API](/en/apis/item/edge/cubic-horizontal-edge) | |
| 'cubic-vertical-edge' | Extensions.CubicVerticalEdge | No | [DEMO](/en/examples/item/defaultEdges/#verticalCubic) | [API](/en/apis/item/edge/cubic-vertical-edge) | |
### 3. combos
| type | Import from | Registered by Default | Demo | Note |
| :------------- | :--------------------- | :-------------------- | :------------------------------------------------------------------------------- | :--- |
| 'circle-combo' | Extensions.CircleCombo | ✅ Yes | [DEMO](https://g6-next.antv.antgroup.com/en/examples/item/defaultCombos/#circle) | |
| 'rect-combo' | Extensions.RectCombo | ✅ Yes | [DEMO](https://g6-next.antv.antgroup.com/en/examples/item/defaultCombos/#rect) | |
| type | Import from | Registered by Default | Demo | API | Note |
| :------------- | :--------------------- | :-------------------- | :---------------------------------------------- | :-------------------------------------- | :--- |
| 'circle-combo' | Extensions.CircleCombo | ✅ Yes | [DEMO](/en/examples/item/defaultCombos/#circle) | [API](/en/apis/item/combo/circle-combo) | |
| 'rect-combo' | Extensions.RectCombo | ✅ Yes | [DEMO](/en/examples/item/defaultCombos/#rect) | [API](/en/apis/item/combo/rect-combo) | |
### 4. transforms
@ -93,60 +93,63 @@ It is called after the raw data is input into the graph and is used for data pro
All built-in and custom interactions should inherit from `Extensions.BaseBehavior` or other existing interactions.
| type | Import from | Registered by Default | Demo | Note |
| :---------------------- | :----------------------------- | :-------------------- | :----------------------------------------------------------------------------------------------------- | :--------------------------------------- |
| 'drag-canvas' | Extensions.DragCanvas | ✅ Yes | [DEMO](https://g6-next.antv.antgroup.com/en/examples/interaction/moveCanvas/#dragCanvas) | |
| 'zoom-canvas' | Extensions.ZoomCanvas | ✅ Yes | [DEMO](https://g6-next.antv.antgroup.com/en/examples/interaction/dragCanvasHideItem/#hideItem) | |
| 'drag-node' | Extensions.DragNode | ✅ Yes | [DEMO](https://g6-next.antv.antgroup.com/en/examples/interaction/dragCanvasHideItem/#hideItem) | |
| 'drag-combo' | Extensions.DragCombo | ✅ Yes | [DEMO](https://g6-next.antv.antgroup.com/en/examples/net/comboLayout/#comboCombined) | |
| 'click-select' | Extensions.ClickSelect | ✅ Yes | [DEMO](https://g6-next.antv.antgroup.com/en/examples/interaction/select/#click) | |
| 'collapse-expand-combo' | Extensions.CollapseExpandCombo | ✅ Yes | [DEMO](https://g6-next.antv.antgroup.com/en/examples/interaction/combo/#circle) | |
| 'collapse-expand-tree' | Extensions.CollapseExpandTree | ✅ Yes | [DEMO](https://g6-next.antv.antgroup.com/en/examples/net/dendrogram/#basicDendrogram) | |
| 'activate-relations' | Extensions.ActivateRelations | No | [DEMO](https://g6-next.antv.antgroup.com/en/examples/interaction/highlight/#activateRelations) | |
| 'brush-select' | Extensions.BrushSelect | No | [DEMO](https://g6-next.antv.antgroup.com/en/examples/interaction/select/#brush) | |
| 'lasso-select' | Extensions.LassoSelect | No | [DEMO](https://g6-next.antv.antgroup.com/en/examples/interaction/select/#lasso) | |
| 'create-edge' | Extensions.CreateEdge | No | [DEMO](https://g6-next.antv.antgroup.com/en/examples/interaction/createEdge/#createEdgeByDragging) | |
| 'shortcuts-call' | Extensions.ShortcutsCall | No | [DEMO](https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*eUzrSq1VGi0AAAAAAAAAAAAADmJ7AQ/original) | |
| 'scroll-canvas' | Extensions.ScrollCanvas | No | [DEMO](https://g6-next.antv.antgroup.com/en/examples/interaction/shortcutsCall/#shortcuts-fitView) | |
| 'orbit-canvas-3d' | Extensions.OrbitCanvas3D | No | [DEMO](https://g6-next.antv.antgroup.com/en/examples/feature/features/#webgl3d) | availabel only when renderer: 'webgl-3d' |
| 'zoom-canvas-3d' | Extensions.ZoomCanvas3D | No | [DEMO](https://g6-next.antv.antgroup.com/en/examples/feature/features/#webgl3d) | availabel only when renderer: 'webgl-3d' |
| type | Import from | Registered by Default | Demo | API | Note |
| :---------------------- | :----------------------------- | :-------------------- | :----------------------------------------------------------------------------------------------------- | :------------------------------------------------------ | :--------------------------- |
| 'drag-canvas' | Extensions.DragCanvas | ✅ Yes | [DEMO](/en/examples/interaction/moveCanvas/#dragCanvas) | [API](/en/apis/behaviors/drag-canvas-options) | |
| 'zoom-canvas' | Extensions.ZoomCanvas | ✅ Yes | [DEMO](/en/examples/interaction/dragCanvasHideItem/#hideItem) | [API](/en/apis/behaviors/zoom-canvas-options) | |
| 'drag-node' | Extensions.DragNode | ✅ Yes | [DEMO](/en/examples/interaction/dragCanvasHideItem/#hideItem) | [API](/en/apis/behaviors/drag-node-options) | |
| 'drag-combo' | Extensions.DragCombo | ✅ Yes | [DEMO](/en/examples/net/comboLayout/#comboCombined) | [API](/en/apis/behaviors/drag-combo-options) | |
| 'click-select' | Extensions.ClickSelect | ✅ Yes | [DEMO](/en/examples/interaction/select/#click) | [API](/en/apis/behaviors/click-select-options) | |
| 'collapse-expand-combo' | Extensions.CollapseExpandCombo | ✅ Yes | [DEMO](/en/examples/interaction/combo/#circle) | [API](/en/apis/behaviors/collapse-expand-combo-options) | |
| 'collapse-expand-tree' | Extensions.CollapseExpandTree | ✅ Yes | [DEMO](/en/examples/net/dendrogram/#basicDendrogram) | [API](/en/apis/behaviors/collapse-expand-tree-options) | |
| 'activate-relations' | Extensions.ActivateRelations | No | [DEMO](/en/examples/interaction/highlight/#activateRelations) | [API](/en/apis/behaviors/activate-relations-options) |
| 'hover-activate' | Extensions.HoverActivate | No | [DEMO](/en/examples/interaction/label#update) | [API](/en/apis/behaviors/hover-activate-options) | |
| 'brush-select' | Extensions.BrushSelect | No | [DEMO](/en/examples/interaction/select/#brush) | [API](/en/apis/behaviors/brush-select-options) | |
| 'lasso-select' | Extensions.LassoSelect | No | [DEMO](/en/examples/interaction/select/#lasso) | [API](/en/apis/behaviors/lasso-select-options) | |
| 'create-edge' | Extensions.CreateEdge | No | [DEMO](/en/examples/interaction/createEdge/#createEdgeByDragging) | [API](/en/apis/behaviors/create-edge-options) | |
| 'shortcuts-call' | Extensions.ShortcutsCall | No | [DEMO](https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*eUzrSq1VGi0AAAAAAAAAAAAADmJ7AQ/original) | [API](/en/apis/behaviors/shortcuts-call-options) | |
| 'scroll-canvas' | Extensions.ScrollCanvas | No | [DEMO](/en/examples/interaction/shortcutsCall/#shortcuts-fitView) | [API](/en/apis/behaviors/scroll-canvas-options) | |
| 'orbit-canvas-3d' | Extensions.OrbitCanvas3D | No | [DEMO](/en/examples/feature/features/#webgl3d) | [API](/en/apis/behaviors/orbit-canvas3-d-options) | available only when renderer |
| 'track-canvas-3d' | Extensions.TrackCanvas3D | No | [DEMO](/en/examples/feature/features/#webgl3d) | [API](/en/apis/behaviors/track-canvas3-d-options) | available only when renderer |
| 'zoom-canvas-3d' | Extensions.ZoomCanvas3D | No | [DEMO](/en/examples/feature/features/#webgl3d) | [API](/en/apis/behaviors/zoom-canvas3-d-options) | available only when renderer |
### 5. layouts
| type | Import from | Registered by Default | Demo | Note |
| :-------------- | :----------------------------- | :-------------------- | :-------------------------------------------------------------------------------------------- | :--- |
| 'force' | Extensions.ForceLayout | ✅ Yes | [DEMO](https://g6-next.antv.antgroup.com/en/examples/net/forceDirected/#basicForce) | |
| 'grid' | Extensions.GridLayout | ✅ Yes | [DEMO](https://g6-next.antv.antgroup.com/en/examples/net/gridLayout/#grid) | |
| 'circular' | Extensions.CircularLayout | ✅ Yes | [DEMO](https://g6-next.antv.antgroup.com/en/examples/net/circular/#circular) | |
| 'concentric' | Extensions.ConcentricLayout | ✅ Yes | [DEMO](https://g6-next.antv.antgroup.com/en/examples/net/concentricLayout/#basicConcentric) | |
| 'random' | Extensions.RandomLayout | No | | |
| 'mds' | Extensions.MDSLayout | No | [DEMO](https://g6-next.antv.antgroup.com/en/examples/net/mdsLayout/#basicMDS) | |
| 'radial' | Extensions.RadialLayout | No | [DEMO](https://g6-next.antv.antgroup.com/en/examples/net/radialLayout/#basicRadial) | |
| 'fruchterman' | Extensions.FruchtermanLayout | No | [DEMO](https://g6-next.antv.antgroup.com/en/examples/net/furchtermanLayout/#basicFruchterman) | |
| 'd3-force' | Extensions.D3ForceLayout | No | | |
| 'force-atlas-2' | Extensions.ForceAtlas2Layout | No | [DEMO](https://g6-next.antv.antgroup.com/en/examples/net/forceDirected/#basicFA2) | |
| 'dagre' | Extensions.DagreLayout | No | [DEMO](https://g6-next.antv.antgroup.com/en/examples/net/dagreFlow/#dagre) | |
| 'comboCombined' | Extensions.ComboCombinedLayout | No | [DEMO](https://g6-next.antv.antgroup.com/en/examples/net/comboLayout/#comboCombined) | |
| 'compactBox' | Extensions.compactBox | No | [DEMO](https://g6-next.antv.antgroup.com/en/examples/net/compactBox/#basicCompactBox) | |
| 'dendrogram' | Extensions.compactBox | No | [DEMO](https://g6-next.antv.antgroup.com/en/examples/net/dendrogram/#basicDendrogramx) | |
| 'indented' | Extensions.compactBox | No | [DEMO](https://g6-next.antv.antgroup.com/en/examples/net/indented/#intendAlignTop) | |
| 'mindmap' | Extensions.mindmap | No | [DEMO](https://g6-next.antv.antgroup.com/en/examples/net/mindmap/#hMindmap) | |
| type | Import from | Registered by Default | Demo | API | Note |
| :-------------- | :----------------------------- | :-------------------- | :----------------------------------------------------------- | :--------------------------------------------------- | :--- |
| 'force' | Extensions.ForceLayout | ✅ Yes | [DEMO](/en/examples/net/forceDirected/#basicForce) | [API](/en/apis/layout/force-layout-options) | |
| 'grid' | Extensions.GridLayout | ✅ Yes | [DEMO](/en/examples/net/gridLayout/#grid) | [API](/en/apis/layout/grid-layout-options) | |
| 'circular' | Extensions.CircularLayout | ✅ Yes | [DEMO](/en/examples/net/circular/#circular) | [API](/en/apis/layout/circular-layout-options) | |
| 'concentric' | Extensions.ConcentricLayout | ✅ Yes | [DEMO](/en/examples/net/concentricLayout/#basicConcentric) | [API](/en/apis/layout/concentric-layout-options) | |
| 'random' | Extensions.RandomLayout | No | | [API]() | |
| 'mds' | Extensions.MDSLayout | No | [DEMO](/en/examples/net/mdsLayout/#basicMDS) | [API](/en/apis/layout/mds-layout-options) | |
| 'radial' | Extensions.RadialLayout | No | [DEMO](/en/examples/net/radialLayout/#basicRadial) | [API](/en/apis/layout/radial-layout-options) | |
| 'fruchterman' | Extensions.FruchtermanLayout | No | [DEMO](/en/examples/net/furchtermanLayout/#basicFruchterman) | [API](/en/apis/layout/fruchterman-layout-options) | |
| 'd3-force' | Extensions.D3ForceLayout | No | | [API](/en/apis/layout/d3-force-layout-options) | |
| 'force-atlas-2' | Extensions.ForceAtlas2Layout | No | [DEMO](/en/examples/net/forceDirected/#basicFA2) | [API](/en/apis/layout/force-atlas2-layout-options) | |
| 'dagre' | Extensions.DagreLayout | No | [DEMO](/en/examples/net/dagreFlow/#dagre) | [API](/en/apis/layout/dagre-layout-options) | |
| 'comboCombined' | Extensions.ComboCombinedLayout | No | [DEMO](/en/examples/net/comboLayout/#comboCombined) | [API](/en/apis/layout/combo-combined-layout-options) | |
| 'compactBox' | Extensions.compactBox | No | [DEMO](/en/examples/net/compactBox/#basicCompactBox) | [API](/en/apis/layout/compact-box-layout-options) | |
| 'dendrogram' | Extensions.compactBox | No | [DEMO](/en/examples/net/dendrogram/#basicDendrogramx) | [API](/en/apis/layout/dendrogram-layout-options) | |
| 'indented' | Extensions.compactBox | No | [DEMO](/en/examples/net/indented/#intendAlignTop) | [API](/en/apis/layout/indented-layout-options) | |
| 'mindmap' | Extensions.mindmap | No | [DEMO](/en/examples/net/mindmap/#hMindmap) | [API](/en/apis/layout/mindmap-layout-options) | |
| |
### 6. plugins
All built-in and custom plugins should inherit from Extensions.BasePlugin or other existing plugins.
| type | Import from | Registered by Default | Demo | Note |
| :------------ | :--------------------- | :-------------------- | :-------------------------------------------------------------------------------------- | :-------------------------------- |
| 'history' | Extensions.History | ✅ Yes | [DEMO](https://g6-next.antv.antgroup.com/en/examples/tool/history/#history) | |
| 'toolbar' | Extensions.Toolbar | No | [DEMO](https://g6-next.antv.antgroup.com/en/examples/tool/toolbar/#toolbar) | |
| 'tooltip' | Extensions.Tooltip | No | [DEMO](https://g6-next.antv.antgroup.com/en/examples/tool/tooltip/#tooltipPlugin) | |
| 'minimap' | Extensions.Minimap | No | [DEMO](https://g6-next.antv.antgroup.com/en/examples/tool/minimap/#minimap) | |
| 'grid' | Extensions.Grid | No | [DEMO](https://g6-next.antv.antgroup.com/en/examples/tool/grid/#default) | |
| 'menu' | Extensions.Menu | No | [DEMO](https://g6-next.antv.antgroup.com/en/examples/tool/contextMenu/#contextMenu) | |
| 'fisheye' | Extensions.Fisheye | No | [DEMO](https://g6-next.antv.antgroup.com/en/examples/tool/fisheye/#fisheye) | |
| 'legend' | Extensions.Legend | No | [DEMO](https://g6-next.antv.antgroup.com/en/examples/tool/legend/#legend) | |
| 'timebar' | Extensions.Timebar | No | [DEMO](https://g6-next.antv.antgroup.com/en/examples/tool/timebar/#timebar-time) | |
| 'hull' | Extensions.Hull | No | [DEMO](https://g6-next.antv.antgroup.com/en/examples/tool/hull/#hull) | |
| 'snapline' | Extensions.Snapline | No | [DEMO](https://g6-next.antv.antgroup.com/en/examples/tool/snapline/#snapline) | |
| 'watermarker' | Extensions.WaterMarker | No | [DEMO](https://g6-next.antv.antgroup.com/en/examples/tool/watermarker/#textWaterMarker) | Supports images or multiple texts |
| type | Import from | Registered by Default | Demo | API | Note |
| :------------ | :--------------------- | :-------------------- | :----------------------------------------------------- | :-------------------------------------- | :-------------------------------- |
| 'history' | Extensions.History | ✅ Yes | [DEMO](/en/examples/tool/history/#history) | [API](/en/apis/plugins/history-config) | |
| 'toolbar' | Extensions.Toolbar | No | [DEMO](/en/examples/tool/toolbar/#toolbar) | [API](/en/apis/plugins/toolbar-config) | |
| 'tooltip' | Extensions.Tooltip | No | [DEMO](/en/examples/tool/tooltip/#tooltipPlugin) | [API](/en/apis/plugins/tooltip-config) | |
| 'minimap' | Extensions.Minimap | No | [DEMO](/en/examples/tool/minimap/#minimap) | [API](/en/apis/plugins/mini-map-config) | |
| 'grid' | Extensions.Grid | No | [DEMO](/en/examples/tool/grid/#default) | [API](/en/apis/plugins/grid-config) | |
| 'menu' | Extensions.Menu | No | [DEMO](/en/examples/tool/contextMenu/#contextMenu) | [API](/en/apis/plugins/menu-config) | |
| 'fisheye' | Extensions.Fisheye | No | [DEMO](/en/examples/tool/fisheye/#fisheye) | [API](/en/apis/plugins/fisheye-config) | |
| 'legend' | Extensions.Legend | No | [DEMO](/en/examples/tool/legend/#legend) | [API](/en/apis/plugins/legend-config) | |
| 'timebar' | Extensions.Timebar | No | [DEMO](/en/examples/tool/timebar/#timebar-time) | [API](/en/apis/plugins/time-bar) | |
| 'hull' | Extensions.Hull | No | [DEMO](/en/examples/tool/hull/#hull) | [API](/en/apis/plugins/hull) | |
| 'snapline' | Extensions.Snapline | No | [DEMO](/en/examples/tool/snapline/#snapline) | [API](/en/apis/plugins/snapline) | |
| 'watermarker' | Extensions.WaterMarker | No | [DEMO](/en/examples/tool/watermarker/#textWaterMarker) | [API](/en/apis/plugins/water-marker) | Supports images or multiple texts |

154
packages/site/docs/manual/customize/overview.zh.md
View File

@ -44,39 +44,39 @@ const graph = new Graph({
### 1. 节点（nodes）
| type 名称 | 引入方式 | 是否默认注册 | Demo | 注释 |
| :--------------- | :----------------------- | :----------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :--------------------------------- |
| 'circle-node' | Extensions.CircleNode | ✅ 是 | [DEMO](https://g6-next.antv.antgroup.com/examples/item/defaultNodes/#circle) | |
| 'rect-node' | Extensions.RectNode | ✅ 是 | [矩形 DEMO](https://g6-next.antv.antgroup.com/examples/item/defaultNodes/#rect)，[圆角矩形 DEMO](https://g6-next.antv.antgroup.com/examples/item/defaultNodes/#radiusRect) | |
| 'image-node' | Extensions.ImageNode | ✅ 是 | [DEMO](https://g6-next.antv.antgroup.com/examples/item/defaultNodes/#image) | |
| 'donut-node' | Extensions.DonutNode | 否 | [DEMO](https://g6-next.antv.antgroup.com/examples/item/defaultNodes/#donut) | |
| 'diamond-node' | Extensions.DiamondNode | 否 | [DEMO](https://g6-next.antv.antgroup.com/examples/item/defaultNodes/#diamond) | |
| 'hexagon-node' | Extensions.HexagonNode | 否 | [DEMO](https://g6-next.antv.antgroup.com/examples/item/defaultNodes/#hexagon) | |
| 'star-node' | Extensions.StarNode | 否 | [DEMO](https://g6-next.antv.antgroup.com/examples/item/defaultNodes/#star) | |
| 'triangle-node' | Extensions.TriangleNode | 否 | [DEMO](https://g6-next.antv.antgroup.com/examples/item/defaultNodes/#triangle) | |
| 'ellipse-node' | Extensions.EllipseNode | 否 | [DEMO](https://g6-next.antv.antgroup.com/examples/item/defaultNodes/#ellipse) | |
| 'modelRect-node' | Extensions.ModelRectNode | 否 | [DEMO](https://g6-next.antv.antgroup.com/examples/item/defaultNodes/#modelRect) | |
| 'sphere-node' | Extensions.SphereNode | 否 | [DEMO](https://g6-next.antv.antgroup.com/examples/item/defaultNodes/#3d-node) | 仅在 renderer: 'webgl-3d' 时可使用 |
| 'cube-node' | Extensions.CubeNode | 否 | [DEMO](https://g6-next.antv.antgroup.com/examples/item/defaultNodes/#3d-node) | 仅在 renderer: 'webgl-3d' 时可使用 |
| type 名称 | 引入方式 | 是否默认注册 | Demo | API | 注释 |
| :--------------- | :----------------------- | :----------- | :------------------------------------------------------------------------------------------------------------- | :---------------------------------------- | :--------------------------------- |
| 'circle-node' | Extensions.CircleNode | ✅ 是 | [DEMO](/zh/examples/item/defaultNodes/#circle) | [API](/zh/apis/item/node/circle-node) | |
| 'rect-node' | Extensions.RectNode | ✅ 是 | [矩形 DEMO](/zh/examples/item/defaultNodes/#rect)，[圆角矩形 DEMO](/zh/examples/item/defaultNodes/#radiusRect) | [API](/zh/apis/item/node/circle-node) | |
| 'image-node' | Extensions.ImageNode | ✅ 是 | [DEMO](/zh/examples/item/defaultNodes/#image) | [API](/zh/apis/item/node/image-node) | |
| 'donut-node' | Extensions.DonutNode | 否 | [DEMO](/zh/examples/item/defaultNodes/#donut) | [API](/zh/apis/item/node/donut-node) | |
| 'diamond-node' | Extensions.DiamondNode | 否 | [DEMO](/zh/examples/item/defaultNodes/#diamond) | [API](/zh/apis/item/node/diamond-node) | |
| 'hexagon-node' | Extensions.HexagonNode | 否 | [DEMO](/zh/examples/item/defaultNodes/#hexagon) | [API](/zh/apis/item/node/hexagon-node) | |
| 'star-node' | Extensions.StarNode | 否 | [DEMO](/zh/examples/item/defaultNodes/#star) | [API](/zh/apis/item/node/star-node) | |
| 'triangle-node' | Extensions.TriangleNode | 否 | [DEMO](/zh/examples/item/defaultNodes/#triangle) | [API](/zh/apis/item/node/triangle-node) | |
| 'ellipse-node' | Extensions.EllipseNode | 否 | [DEMO](/zh/examples/item/defaultNodes/#ellipse) | [API](/zh/apis/item/node/ellipse-node) | |
| 'modelRect-node' | Extensions.ModelRectNode | 否 | [DEMO](/zh/examples/item/defaultNodes/#modelRect) | [API](/zh/apis/item/node/model-rect-node) | |
| 'sphere-node' | Extensions.SphereNode | 否 | [DEMO](/zh/examples/item/defaultNodes/#3d-node) | [API](/zh/apis/item/node/sphere-node) | 仅在 renderer: 'webgl-3d' 时可使用 |
| 'cube-node' | Extensions.CubeNode | 否 | [DEMO](/zh/examples/item/defaultNodes/#3d-node) | [API](/zh/apis/item/node/cube-node) | 仅在 renderer: 'webgl-3d' 时可使用 |
### 2. 边（edges）
| type 名称 | 引入方式 | 是否默认注册 | Demo | 注释 |
| :---------------------- | :----------------------------- | :----------- | :------------------------------------------------------------------------------------ | :--- |
| 'line-edge' | Extensions.LineEdge | ✅ 是 | [DEMO](https://g6-next.antv.antgroup.com/examples/item/defaultEdges/#line) | |
| 'loop-edge' | Extensions.LineEdge | ✅ 是 | [DEMO](https://g6-next.antv.antgroup.com/examples/item/defaultEdges/#loop) | |
| 'quadratic-edge' | Extensions.QuadraticEdge | 否 | [DEMO](https://g6-next.antv.antgroup.com/examples/item/defaultEdges/#quadratic) | |
| 'cubic-edge' | Extensions.CubicEdge | 否 | [DEMO](https://g6-next.antv.antgroup.com/examples/item/defaultEdges/#cubic) | |
| 'polyline-edge' | Extensions.PolylineEdge | 否 | [DEMO](https://g6-next.antv.antgroup.com/examples/item/defaultEdges/#polyline) | |
| 'cubic-horizontal-edge' | Extensions.CubicHorizontalEdge | 否 | [DEMO](https://g6-next.antv.antgroup.com/examples/item/defaultEdges/#horizontalCubic) | |
| 'cubic-vertical-edge' | Extensions.CubicVerticalEdge | 否 | [DEMO](https://g6-next.antv.antgroup.com/examples/item/defaultEdges/#verticalCubic) | |
| type 名称 | 引入方式 | 是否默认注册 | Demo | API | 注释 |
| :---------------------- | :----------------------------- | :----------- | :------------------------------------------------------ | :---------------------------------------------- | :--- |
| 'line-edge' | Extensions.LineEdge | ✅ 是 | [DEMO](/zh/examples/item/defaultEdges/#line) | [API](/zh/apis/item/edge/line-edge) | |
| 'loop-edge' | Extensions.LoopEdge | ✅ 是 | [DEMO](/zh/examples/item/defaultEdges/#loop) | [API](/zh/apis/item/edge/loop-edge) | |
| 'quadratic-edge' | Extensions.QuadraticEdge | 否 | [DEMO](/zh/examples/item/defaultEdges/#quadratic) | [API](/zh/apis/item/edge/quadratic-edge) | |
| 'cubic-edge' | Extensions.CubicEdge | 否 | [DEMO](/zh/examples/item/defaultEdges/#cubic) | [API](/zh/apis/item/edge/cubic-edge) | |
| 'polyline-edge' | Extensions.PolylineEdge | 否 | [DEMO](/zh/examples/item/defaultEdges/#polyline) | [API](/zh/apis/item/edge/polyline-edge) | |
| 'cubic-horizontal-edge' | Extensions.CubicHorizontalEdge | 否 | [DEMO](/zh/examples/item/defaultEdges/#horizontalCubic) | [API](/zh/apis/item/edge/cubic-horizontal-edge) | |
| 'cubic-vertical-edge' | Extensions.CubicVerticalEdge | 否 | [DEMO](/zh/examples/item/defaultEdges/#verticalCubic) | [API](/zh/apis/item/edge/cubic-vertical-edge) | |
### 3. Combo (combos)
| type 名称 | 引入方式 | 是否默认注册 | Demo | 注释 |
| :------------- | :--------------------- | :----------- | :------------------------------------------------------------------------------- | :--- |
| 'circle-combo' | Extensions.CircleCombo | ✅ 是 | [DEMO](https://g6-next.antv.antgroup.com/zh/examples/item/defaultCombos/#circle) | |
| 'rect-combo' | Extensions.RectCombo | ✅ 是 | [DEMO](https://g6-next.antv.antgroup.com/zh/examples/item/defaultCombos/#rect) | |
| type 名称 | 引入方式 | 是否默认注册 | Demo | API | 注释 |
| :------------- | :--------------------- | :----------- | :---------------------------------------------- | :-------------------------------------- | :--- |
| 'circle-combo' | Extensions.CircleCombo | ✅ 是 | [DEMO](/zh/examples/item/defaultCombos/#circle) | [API](/zh/apis/item/combo/circle-combo) | |
| 'rect-combo' | Extensions.RectCombo | ✅ 是 | [DEMO](/zh/examples/item/defaultCombos/#rect) | [API](/zh/apis/item/combo/rect-combo) | |
### 4. 数据转换器 (transforms)
@ -91,60 +91,62 @@ const graph = new Graph({
所有内置、自定义交互应当继承 `Extensions.BaseBehavior` 或其他已有的交互。
| type 名称 | 引入方式 | 是否默认注册 | Demo | 注释 |
| :---------------------- | :----------------------------- | :----------- | :----------------------------------------------------------------------------------------------------- | :--------------------------------- |
| 'drag-canvas' | Extensions.DragCanvas | ✅ 是 | [DEMO](https://g6-next.antv.antgroup.com/zh/examples/interaction/moveCanvas/#dragCanvas) | |
| 'zoom-canvas' | Extensions.ZoomCanvas | ✅ 是 | [DEMO](https://g6-next.antv.antgroup.com/zh/examples/interaction/dragCanvasHideItem/#hideItem) | |
| 'drag-node' | Extensions.DragNode | ✅ 是 | [DEMO](https://g6-next.antv.antgroup.com/zh/examples/interaction/dragCanvasHideItem/#hideItem) | |
| 'drag-combo' | Extensions.DragCombo | ✅ 是 | [DEMO](https://g6-next.antv.antgroup.com/zh/examples/net/comboLayout/#comboCombined) | |
| 'click-select' | Extensions.ClickSelect | ✅ 是 | [DEMO](https://g6-next.antv.antgroup.com/zh/examples/interaction/select/#click) | |
| 'collapse-expand-combo' | Extensions.CollapseExpandCombo | ✅ 是 | [DEMO](https://g6-next.antv.antgroup.com/zh/examples/interaction/combo/#circle) | |
| 'collapse-expand-tree' | Extensions.CollapseExpandTree | ✅ 是 | [DEMO](https://g6-next.antv.antgroup.com/zh/examples/net/dendrogram/#basicDendrogram) | |
| 'activate-relations' | Extensions.ActivateRelations | 否 | [DEMO](https://g6-next.antv.antgroup.com/zh/examples/interaction/highlight/#activateRelations) | |
| 'brush-select' | Extensions.BrushSelect | 否 | [DEMO](https://g6-next.antv.antgroup.com/zh/examples/interaction/select/#brush) | |
| 'lasso-select' | Extensions.LassoSelect | 否 | [DEMO](https://g6-next.antv.antgroup.com/zh/examples/interaction/select/#lasso) | |
| 'create-edge' | Extensions.CreateEdge | 否 | [DEMO](https://g6-next.antv.antgroup.com/zh/examples/interaction/createEdge/#createEdgeByDragging) | |
| 'shortcuts-call' | Extensions.ShortcutsCall | 否 | [DEMO](https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*eUzrSq1VGi0AAAAAAAAAAAAADmJ7AQ/original) | |
| 'scroll-canvas' | Extensions.ScrollCanvas | 否 | [DEMO](https://g6-next.antv.antgroup.com/zh/examples/interaction/shortcutsCall/#shortcuts-fitView) | |
| 'orbit-canvas-3d' | Extensions.OrbitCanvas3D | 否 | [DEMO](https://g6-next.antv.antgroup.com/zh/examples/feature/features/#webgl3d) | 仅在 renderer: 'webgl-3d' 时可使用 |
| 'zoom-canvas-3d' | Extensions.ZoomCanvas3D | 否 | [DEMO](https://g6-next.antv.antgroup.com/zh/examples/feature/features/#webgl3d) | 仅在 renderer: 'webgl-3d' 时可使用 |
| type 名称 | 引入方式 | 是否默认注册 | Demo | API | 注释 |
| :---------------------- | :----------------------------- | :----------- | :----------------------------------------------------------------------------------------------------- | :------------------------------------------------------ | :--------------------------------- |
| 'drag-canvas' | Extensions.DragCanvas | ✅ 是 | [DEMO](/zh/examples/interaction/moveCanvas/#dragCanvas) | [API](/zh/apis/behaviors/drag-canvas-options) | |
| 'zoom-canvas' | Extensions.ZoomCanvas | ✅ 是 | [DEMO](/zh/examples/interaction/dragCanvasHideItem/#hideItem) | [API](/zh/apis/behaviors/zoom-canvas-options) | |
| 'drag-node' | Extensions.DragNode | ✅ 是 | [DEMO](/zh/examples/interaction/dragCanvasHideItem/#hideItem) | [API](/zh/apis/behaviors/drag-node-options) | |
| 'drag-combo' | Extensions.DragCombo | ✅ 是 | [DEMO](/zh/examples/net/comboLayout/#comboCombined) | [API](/zh/apis/behaviors/drag-combo-options) | |
| 'click-select' | Extensions.ClickSelect | ✅ 是 | [DEMO](/zh/examples/interaction/select/#click) | [API](/zh/apis/behaviors/click-select-options) | |
| 'collapse-expand-combo' | Extensions.CollapseExpandCombo | ✅ 是 | [DEMO](/zh/examples/interaction/combo/#circle) | [API](/zh/apis/behaviors/collapse-expand-combo-options) | |
| 'collapse-expand-tree' | Extensions.CollapseExpandTree | ✅ 是 | [DEMO](/zh/examples/net/dendrogram/#basicDendrogram) | [API](/zh/apis/behaviors/collapse-expand-tree-options) | |
| 'activate-relations' | Extensions.ActivateRelations | 否 | [DEMO](/zh/examples/interaction/highlight/#activateRelations) | [API](/zh/apis/behaviors/activate-relations-options) |
| 'hover-activate' | Extensions.HoverActivate | 否 | [DEMO](/zh/examples/interaction/label#update) | [API](/zh/apis/behaviors/hover-activate-options) | |
| 'brush-select' | Extensions.BrushSelect | 否 | [DEMO](/zh/examples/interaction/select/#brush) | [API](/zh/apis/behaviors/brush-select-options) | |
| 'lasso-select' | Extensions.LassoSelect | 否 | [DEMO](/zh/examples/interaction/select/#lasso) | [API](/zh/apis/behaviors/lasso-select-options) | |
| 'create-edge' | Extensions.CreateEdge | 否 | [DEMO](/zh/examples/interaction/createEdge/#createEdgeByDragging) | [API](/zh/apis/behaviors/create-edge-options) | |
| 'shortcuts-call' | Extensions.ShortcutsCall | 否 | [DEMO](https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*eUzrSq1VGi0AAAAAAAAAAAAADmJ7AQ/original) | [API](/zh/apis/behaviors/shortcuts-call-options) | |
| 'scroll-canvas' | Extensions.ScrollCanvas | 否 | [DEMO](/zh/examples/interaction/shortcutsCall/#shortcuts-fitView) | [API](/zh/apis/behaviors/scroll-canvas-options) | |
| 'orbit-canvas-3d' | Extensions.OrbitCanvas3D | 否 | [DEMO](/zh/examples/feature/features/#webgl3d) | [API](/zh/apis/behaviors/orbit-canvas3-d-options) | 仅在 renderer: 'webgl-3d' 时可使用 |
| 'track-canvas-3d' | Extensions.TrackCanvas3D | 否 | [DEMO](/zh/examples/feature/features/#webgl3d) | [API](/zh/apis/behaviors/track-canvas3-d-options) | 仅在 renderer: 'webgl-3d' 时可使用 |
| 'zoom-canvas-3d' | Extensions.ZoomCanvas3D | 否 | [DEMO](/zh/examples/feature/features/#webgl3d) | [API](/zh/apis/behaviors/zoom-canvas3-d-options) | 仅在 renderer: 'webgl-3d' 时可使用 |
### 5. 布局算法 (layouts)
| type 名称 | 引入方式 | 是否默认注册 | Demo | 注释 |
| :-------------- | :----------------------------- | :----------- | :-------------------------------------------------------------------------------------------- | :--- |
| 'force' | Extensions.ForceLayout | ✅ 是 | [DEMO](https://g6-next.antv.antgroup.com/zh/examples/net/forceDirected/#basicForce) | |
| 'grid' | Extensions.GridLayout | ✅ 是 | [DEMO](https://g6-next.antv.antgroup.com/zh/examples/net/gridLayout/#grid) | |
| 'circular' | Extensions.CircularLayout | ✅ 是 | [DEMO](https://g6-next.antv.antgroup.com/zh/examples/net/circular/#circular) | |
| 'concentric' | Extensions.ConcentricLayout | ✅ 是 | [DEMO](https://g6-next.antv.antgroup.com/zh/examples/net/concentricLayout/#basicConcentric) | |
| 'random' | Extensions.RandomLayout | 否 | | |
| 'mds' | Extensions.MDSLayout | 否 | [DEMO](https://g6-next.antv.antgroup.com/examples/net/mdsLayout/#basicMDS) | |
| 'radial' | Extensions.RadialLayout | 否 | [DEMO](https://g6-next.antv.antgroup.com/zh/examples/net/radialLayout/#basicRadial) | |
| 'fruchterman' | Extensions.FruchtermanLayout | 否 | [DEMO](https://g6-next.antv.antgroup.com/zh/examples/net/furchtermanLayout/#basicFruchterman) | |
| 'd3-force' | Extensions.D3ForceLayout | 否 | | |
| 'force-atlas-2' | Extensions.ForceAtlas2Layout | 否 | [DEMO](https://g6-next.antv.antgroup.com/zh/examples/net/forceDirected/#basicFA2) | |
| 'dagre' | Extensions.DagreLayout | 否 | [DEMO](https://g6-next.antv.antgroup.com/zh/examples/net/dagreFlow/#dagre) | |
| 'comboCombined' | Extensions.ComboCombinedLayout | 否 | [DEMO](https://g6-next.antv.antgroup.com/zh/examples/net/comboLayout/#comboCombined) | |
| 'compactBox' | Extensions.compactBox | 否 | [DEMO](https://g6-next.antv.antgroup.com/zh/examples/net/compactBox/#basicCompactBox) | |
| 'dendrogram' | Extensions.compactBox | 否 | [DEMO](https://g6-next.antv.antgroup.com/zh/examples/net/dendrogram/#basicDendrogramx) | |
| 'indented' | Extensions.compactBox | 否 | [DEMO](https://g6-next.antv.antgroup.com/zh/examples/net/indented/#intendAlignTop) | |
| 'mindmap' | Extensions.mindmap | 否 | [DEMO](https://g6-next.antv.antgroup.com/zh/examples/net/mindmap/#hMindmap) | |
| type 名称 | 引入方式 | 是否默认注册 | Demo | API | 注释 |
| :-------------- | :----------------------------- | :----------- | :----------------------------------------------------------- | :--------------------------------------------------- | :--- |
| 'force' | Extensions.ForceLayout | ✅ 是 | [DEMO](/zh/examples/net/forceDirected/#basicForce) | [API](/zh/apis/layout/force-layout-options) | |
| 'grid' | Extensions.GridLayout | ✅ 是 | [DEMO](/zh/examples/net/gridLayout/#grid) | [API](/zh/apis/layout/grid-layout-options) | |
| 'circular' | Extensions.CircularLayout | ✅ 是 | [DEMO](/zh/examples/net/circular/#circular) | [API](/zh/apis/layout/circular-layout-options) | |
| 'concentric' | Extensions.ConcentricLayout | ✅ 是 | [DEMO](/zh/examples/net/concentricLayout/#basicConcentric) | [API](/zh/apis/layout/concentric-layout-options) | |
| 'random' | Extensions.RandomLayout | 否 | | [API]() | |
| 'mds' | Extensions.MDSLayout | 否 | [DEMO](/zh/examples/net/mdsLayout/#basicMDS) | [API](/zh/apis/layout/mds-layout-options) | |
| 'radial' | Extensions.RadialLayout | 否 | [DEMO](/zh/examples/net/radialLayout/#basicRadial) | [API](/zh/apis/layout/radial-layout-options) | |
| 'fruchterman' | Extensions.FruchtermanLayout | 否 | [DEMO](/zh/examples/net/furchtermanLayout/#basicFruchterman) | [API](/zh/apis/layout/fruchterman-layout-options) | |
| 'd3-force' | Extensions.D3ForceLayout | 否 | | [API](/zh/apis/layout/d3-force-layout-options) | |
| 'force-atlas-2' | Extensions.ForceAtlas2Layout | 否 | [DEMO](/zh/examples/net/forceDirected/#basicFA2) | [API](/zh/apis/layout/force-atlas2-layout-options) | |
| 'dagre' | Extensions.DagreLayout | 否 | [DEMO](/zh/examples/net/dagreFlow/#dagre) | [API](/zh/apis/layout/dagre-layout-options) | |
| 'comboCombined' | Extensions.ComboCombinedLayout | 否 | [DEMO](/zh/examples/net/comboLayout/#comboCombined) | [API](/zh/apis/layout/combo-combined-layout-options) | |
| 'compactBox' | Extensions.compactBox | 否 | [DEMO](/zh/examples/net/compactBox/#basicCompactBox) | [API](/zh/apis/layout/compact-box-layout-options) | |
| 'dendrogram' | Extensions.compactBox | 否 | [DEMO](/zh/examples/net/dendrogram/#basicDendrogramx) | [API](/zh/apis/layout/dendrogram-layout-options) | |
| 'indented' | Extensions.compactBox | 否 | [DEMO](/zh/examples/net/indented/#intendAlignTop) | [API](/zh/apis/layout/indented-layout-options) | |
| 'mindmap' | Extensions.mindmap | 否 | [DEMO](/zh/examples/net/mindmap/#hMindmap) | [API](/zh/apis/layout/mindmap-layout-options) | |
### 6. 插件 (plugins)
所有内置、自定义插件应当继承 `Extensions.BasePlugin` 或其他已有的插件。
| type 名称 | 引入方式 | 是否默认注册 | Demo | 注释 |
| :------------ | :--------------------- | :----------- | :-------------------------------------------------------------------------------------- | :--------------- |
| 'history' | Extensions.History | ✅ 是 | [DEMO](https://g6-next.antv.antgroup.com/zh/examples/tool/history/#history) | |
| 'toolbar' | Extensions.Toolbar | 否 | [DEMO](https://g6-next.antv.antgroup.com/zh/examples/tool/toolbar/#toolbar) | |
| 'tooltip' | Extensions.Tooltip | 否 | [DEMO](https://g6-next.antv.antgroup.com/zh/examples/tool/tooltip/#tooltipPlugin) | |
| 'minimap' | Extensions.Minimap | 否 | [DEMO](https://g6-next.antv.antgroup.com/zh/examples/tool/minimap/#minimap) | |
| 'grid' | Extensions.Grid | 否 | [DEMO](https://g6-next.antv.antgroup.com/zh/examples/tool/grid/#default) | |
| 'menu' | Extensions.Menu | 否 | [DEMO](https://g6-next.antv.antgroup.com/zh/examples/tool/contextMenu/#contextMenu) | |
| 'fisheye' | Extensions.Fisheye | 否 | [DEMO](https://g6-next.antv.antgroup.com/zh/examples/tool/fisheye/#fisheye) | |
| 'legend' | Extensions.Legend | 否 | [DEMO](https://g6-next.antv.antgroup.com/zh/examples/tool/legend/#legend) | |
| 'timebar' | Extensions.Timebar | 否 | [DEMO](https://g6-next.antv.antgroup.com/zh/examples/tool/timebar/#timebar-time) | |
| 'hull' | Extensions.Hull | 否 | [DEMO](https://g6-next.antv.antgroup.com/zh/examples/tool/hull/#hull) | |
| 'snapline' | Extensions.Snapline | 否 | [DEMO](https://g6-next.antv.antgroup.com/zh/examples/tool/snapline/#snapline) | |
| 'watermarker' | Extensions.WaterMarker | 否 | [DEMO](https://g6-next.antv.antgroup.com/zh/examples/tool/watermarker/#textWaterMarker) | 支持图片或多文本 |
| type 名称 | 引入方式 | 是否默认注册 | Demo | API | 注释 |
| :------------ | :--------------------- | :----------- | :----------------------------------------------------- | :-------------------------------------- | :--------------- |
| 'history' | Extensions.History | ✅ 是 | [DEMO](/zh/examples/tool/history/#history) | [API](/zh/apis/plugins/history-config) | |
| 'toolbar' | Extensions.Toolbar | 否 | [DEMO](/zh/examples/tool/toolbar/#toolbar) | [API](/zh/apis/plugins/toolbar-config) | |
| 'tooltip' | Extensions.Tooltip | 否 | [DEMO](/zh/examples/tool/tooltip/#tooltipPlugin) | [API](/zh/apis/plugins/tooltip-config) | |
| 'minimap' | Extensions.Minimap | 否 | [DEMO](/zh/examples/tool/minimap/#minimap) | [API](/zh/apis/plugins/mini-map-config) | |
| 'grid' | Extensions.Grid | 否 | [DEMO](/zh/examples/tool/grid/#default) | [API](/zh/apis/plugins/grid-config) | |
| 'menu' | Extensions.Menu | 否 | [DEMO](/zh/examples/tool/contextMenu/#contextMenu) | [API](/zh/apis/plugins/menu-config) | |
| 'fisheye' | Extensions.Fisheye | 否 | [DEMO](/zh/examples/tool/fisheye/#fisheye) | [API](/zh/apis/plugins/fisheye-config) | |
| 'legend' | Extensions.Legend | 否 | [DEMO](/zh/examples/tool/legend/#legend) | [API](/zh/apis/plugins/legend-config) | |
| 'timebar' | Extensions.Timebar | 否 | [DEMO](/zh/examples/tool/timebar/#timebar-time) | [API](/zh/apis/plugins/time-bar) | |
| 'hull' | Extensions.Hull | 否 | [DEMO](/zh/examples/tool/hull/#hull) | [API](/zh/apis/plugins/hull) | |
| 'snapline' | Extensions.Snapline | 否 | [DEMO](/zh/examples/tool/snapline/#snapline) | [API](/zh/apis/plugins/snapline) | |
| 'watermarker' | Extensions.WaterMarker | 否 | [DEMO](/zh/examples/tool/watermarker/#textWaterMarker) | [API](/zh/apis/plugins/water-marker) | 支持图片或多文本 |