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: add docs of custom data tramsformer and theme; format docs of items api (#5169)

Browse Source 
* docs: add Custom Theme Extension

* docs: add custom transform tutorial

* docs: format docs of items (nodes, edges, combos)

---------

Co-authored-by: yvonneyx <banxuan.zyx@antgroup.com>
This commit is contained in:
yvonneyx 2023-11-21 14:56:48 +08:00 committed by GitHub
parent 3468c0d0cb
commit 15d41fbe94
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
64 changed files with 2567 additions and 871 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
packages/site/docs/apis/item/combo/CircleCombo.en.md
View File

@ -9,7 +9,11 @@ This article demonstrates the configuration options for Circle Combo. [Circle Co
## keyShape
- **Type**: `KeyShapeStyle`
**Type**: `KeyShapeStyle`
<details>
<summary style="color: #873bf4; cursor: pointer">KeyShapeStyle</summary>
```typescript
type KeyShapeStyle = StyleProps & {
@ -20,7 +24,13 @@ type KeyShapeStyle = StyleProps & {
The related circle style can be referred to in [`CircleStyleProps`](../shape/CircleStyleProps.en.md).
- **Default**:
</details>
**Default**:`object`
<details>
<summary style="color: #873bf4; cursor: pointer">object</summary>
```json
{
@ -28,6 +38,6 @@ The related circle style can be referred to in [`CircleStyleProps`](../shape/Cir
}
```
- **Required**: No
</details>
<embed src="../../../common/ComboShapeStyles.en.md"></embed>

18
packages/site/docs/apis/item/combo/CircleCombo.zh.md
View File

@ -9,7 +9,11 @@ order: 1
## keyShape
- **类型**：`KeyShapeStyle`
**类型**：`KeyShapeStyle`
<details>
<summary style="color: #873bf4; cursor: pointer">KeyShapeStyle</summary>
```typescript
type KeyShapeStyle = StyleProps & {
@ -20,7 +24,13 @@ type KeyShapeStyle = StyleProps & {
其中，相关的图形样式参考 [Circle 图形样式](../shape/CircleStyleProps.zh.md)。
- **默认值**：
</details>
**默认值**：`object`
<details>
<summary style="color: #873bf4; cursor: pointer">object</summary>
```json
{
@ -28,6 +38,8 @@ type KeyShapeStyle = StyleProps & {
}
```
- **是否必须**：否
</details>
关键图形
<embed src="../../../common/ComboShapeStyles.zh.md"></embed>

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

@ -7,7 +7,7 @@ In G6, if a built-in Combo does not meet a specific need, you can create a custo
Custom Combo can be created by inheriting from built-in Combo such as CircleCombo. See [ComboType](/en/manual/customize/extension-cats#3-combos) for a graphical representation of what can be inherited.
```ts
```typescript
import { Graph, Extensions, extend } from '@antv/g6';
/**
@ -15,8 +15,8 @@ import { Graph, Extensions, extend } from '@antv/g6';
*/
class CustomCombo extends Extensions.CircleCombo {
/**
* Override member method to customize the drawing logic.
*/
* Override member method to customize the drawing logic.
*/
}
/**
@ -33,15 +33,16 @@ const ExtGraph = extend(Graph, {
*/
const graph = new ExtGraph({
/**
* ... Other configuration items
*/
* ... Other configuration items
*/
combo: {
type: 'custom-combo', /**
* Specify custom Combo
*/
/**
* ... See Combo-specific configuration for additional configuration items
*/
* Specify custom Combo
*/
type: 'custom-combo',
/**
* ... See Combo-specific configuration for additional configuration items
*/
},
});
```
@ -50,9 +51,13 @@ const graph = new ExtGraph({
### draw
**Type**:
**Type**: `draw`
```ts
<details>
<summary style="color: #873bf4; cursor: pointer">draw</summary>
```typescript
type draw = (
displayModel: ComboDisplayModel,
diffData?: { previous: ComboUserModelData; current: ComboUserModelData },
@ -67,75 +72,111 @@ type draw = (
};
```
**Description**: Draw all shapes associated with a Combo.
</details>
Draw all shapes associated with a Combo.
### drawKeyShape
**Type**:
**Type**: `drawKeyShape`
```ts
<details>
<summary style="color: #873bf4; cursor: pointer">drawKeyShape</summary>
```typescript
type drawKeyShape = (model: ComboDisplayModel, shapeMap: CombohapeMap) => DisplayObject;
```
**Description**: Draw the key shape
</details>
Draw the key shape
### drawLabelShape
**类型**：
**Type**: `drawLabelShape`
```ts
<details>
<summary style="color: #873bf4; cursor: pointer">drawLabelShape</summary>
```typescript
type drawLabelShape = (
model: ComboDisplayModel | ComboDisplayModel,
shapeMap: CombohapeMap | CombohapeMap,
) => DisplayObject;
```
**说明**：Draw the label shape of Combo.
</details>
Draw the label shape of Combo.
### drawLabelBackgroundShape
**类型**：
**Type**: `drawLabelBackgroundShape`
```ts
<details>
<summary style="color: #873bf4; cursor: pointer">drawLabelBackgroundShape</summary>
```typescript
type drawLabelBackgroundShape = (
model: ComboDisplayModel | ComboDisplayModel,
shapeMap: CombohapeMap | CombohapeMap,
) => DisplayObject;
```
**说明**：Draw the label background shape of Combo.
</details>
Draw the label background shape of Combo.
### drawIconShape
**类型**：
**Type**: `drawIconShape`
```ts
<details>
<summary style="color: #873bf4; cursor: pointer">drawIconShape</summary>
```typescript
type drawIconShape = (
model: ComboDisplayModel | ComboDisplayModel,
shapeMap: CombohapeMap | CombohapeMap,
) => DisplayObject;
```
**说明**：Draw the icon shape of Combo.
</details>
Draw the icon shape of Combo.
### drawHaloShape
**类型**：
**Type**: `drawHaloShape`
```ts
<details>
<summary style="color: #873bf4; cursor: pointer">drawHaloShape</summary>
```typescript
type drawHaloShape = (
model: ComboDisplayModel | ComboDisplayModel,
shapeMap: CombohapeMap | CombohapeMap,
) => DisplayObject;
```
**说明**：Draw the halo shape of Combo.
</details>
Draw the halo shape of Combo.
### drawAnchorShapes
**类型**：
**Type**: `drawAnchorShapes`
```ts
<details>
<summary style="color: #873bf4; cursor: pointer">drawAnchorShapes</summary>
```typescript
type drawAnchorShapes = (
model: ComboDisplayModel | ComboDisplayModel,
shapeMap: CombohapeMap | CombohapeMap,
@ -144,13 +185,19 @@ type drawAnchorShapes = (
};
```
**说明**：Draw the anchors shape of Combo.
</details>
Draw the anchors shape of Combo.
### drawBadgeShapes
**类型**：
**Type**: `drawBadgeShapes`
```ts
<details>
<summary style="color: #873bf4; cursor: pointer">drawBadgeShapes</summary>
```typescript
type drawBadgeShapes = (
model: ComboDisplayModel | ComboDisplayModel,
shapeMap: CombohapeMap | CombohapeMap,
@ -159,26 +206,38 @@ type drawBadgeShapes = (
};
```
**说明**：Draw the badges shape of Combo.
</details>
Draw the badges shape of Combo.
### drawOtherShapes
**类型**：
**Type**: `drawOtherShapes`
```ts
<details>
<summary style="color: #873bf4; cursor: pointer">drawOtherShapes</summary>
```typescript
type drawOtherShapes = (
model: ComboDisplayModel | ComboDisplayModel,
shapeMap: CombohapeMap | CombohapeMap,
) => { [id: string]: DisplayObject };
```
**说明**：Draw other shapes(such as preRect,stateIcon) of Combo.
</details>
Draw other shapes(such as preRect,stateIcon) of Combo.
### afterDraw
**类型**：
**Type**: `afterDraw`
```ts
<details>
<summary style="color: #873bf4; cursor: pointer">afterDraw</summary>
```typescript
type afterDraw = (
model: EdgeDisplayModel,
shapeMap: { [shapeId: string]: DisplayObject },
@ -186,17 +245,25 @@ type afterDraw = (
) => { [otherShapeId: string]: DisplayObject };
```
**说明**：Perform additional drawing operations or add custom shapes after drawing Combo.
</details>
Perform additional drawing operations or add custom shapes after drawing Combo.
### getMergedStyles
**类型**：
**Type**: `getMergedStyles`
```ts
<details>
<summary style="color: #873bf4; cursor: pointer">getMergedStyles</summary>
```typescript
type getMergedStyles = (model: EdgeDisplayModel) => EdgeDisplayModel;
```
**说明**：Merge style.
</details>
Merge style.
## Member Methods
@ -204,9 +271,13 @@ Inherited shapes provide the following method calls
### upsertShape
**Type**:
**Type**: `upsertShape`
```ts
<details>
<summary style="color: #873bf4; cursor: pointer">upsertShape</summary>
```typescript
type upsertShape = (
type: SHAPE_TYPE | SHAPE_TYPE_3D,
id: string,
@ -216,4 +287,6 @@ type upsertShape = (
) => DisplayObject;
```
**Description**: Create (if not existing in shapeMap) or update a shape based on configuration.
</details>
Create (if not existing in shapeMap) or update a shape based on configuration.

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

@ -7,7 +7,7 @@ order: 3
可以通过继承内置的 Combo （例如 CircleCombo），来创建自定义 Combo 。可继承图形参见： [Combo 类型](/manual/customize/extension-cats#3-combo-类型-combos)
```ts
```typescript
import { Graph, Extensions, extend } from '@antv/g6';
/**
@ -15,11 +15,8 @@ import { Graph, Extensions, extend } from '@antv/g6';
*/
class CustomCombo extends Extensions.CircleCombo {
/**
* overwrite member method
*/
/**
* 重载成员方法，自定义绘制逻辑
*/
* 重载成员方法，自定义绘制逻辑
*/
}
/**
@ -36,15 +33,16 @@ const ExtGraph = extend(Graph, {
*/
const graph = new ExtGraph({
/**
* ...其他配置项
*/
* ...其他配置项
*/
combo: {
type: 'custom-combo', /**
* 指定自定义 Combo
*/
/**
* ...其他配置项详见具体 Combo 配置
*/
* 指定自定义 Combo
*/
type: 'custom-combo',
/**
* ...其他配置项详见具体 Combo 配置
*/
},
});
```
@ -53,9 +51,13 @@ const graph = new ExtGraph({
### draw
**类型**：
**类型**：`draw`
```ts
<details>
<summary style="color: #873bf4; cursor: pointer">draw</summary>
```typescript
type draw = (
displayModel: ComboDisplayModel,
diffData?: { previous: ComboUserModelData; current: ComboUserModelData },
@ -70,75 +72,111 @@ type draw = (
};
```
**说明**：用于绘制与 Combo 相关的所有图形
</details>
用于绘制与 Combo 相关的所有图形
### drawKeyShape
**类型**：
**类型**：`drawKeyShape`
```ts
<details>
<summary style="color: #873bf4; cursor: pointer">drawKeyShape</summary>
```typescript
type drawKeyShape = (model: NodeDisplayModel, shapeMap: NodeShapeMap) => DisplayObject;
```
**说明**：用于绘制关键图形
</details>
用于绘制关键图形
### drawLabelShape
**类型**：
**类型**：`drawLabelShape`
```ts
<details>
<summary style="color: #873bf4; cursor: pointer">drawLabelShape</summary>
```typescript
type drawLabelShape = (
model: NodeDisplayModel | ComboDisplayModel,
shapeMap: NodeShapeMap | ComboShapeMap,
) => DisplayObject;
```
**说明**：绘制 Combo 的文本标签图形
</details>
绘制 Combo 的文本标签图形
### drawLabelBackgroundShape
**类型**：
**类型**：`drawLabelBackgroundShape`
```ts
<details>
<summary style="color: #873bf4; cursor: pointer">drawLabelBackgroundShape</summary>
```typescript
type drawLabelBackgroundShape = (
model: NodeDisplayModel | ComboDisplayModel,
shapeMap: NodeShapeMap | ComboShapeMap,
) => DisplayObject;
```
**说明**：绘制 Combo 的文本的背景图形
</details>
绘制 Combo 的文本的背景图形
### drawIconShape
**类型**：
**类型**：`drawIconShape`
```ts
<details>
<summary style="color: #873bf4; cursor: pointer">drawIconShape</summary>
```typescript
type drawIconShape = (
model: NodeDisplayModel | ComboDisplayModel,
shapeMap: NodeShapeMap | ComboShapeMap,
) => DisplayObject;
```
**说明**：绘制 Combo 的图标图形
</details>
绘制 Combo 的图标图形
### drawHaloShape
**类型**：
**类型**：`drawHaloShape`
```ts
<details>
<summary style="color: #873bf4; cursor: pointer">drawHaloShape</summary>
```typescript
type drawHaloShape = (
model: NodeDisplayModel | ComboDisplayModel,
shapeMap: NodeShapeMap | ComboShapeMap,
) => DisplayObject;
```
**说明**：绘制 Combo 的光晕图形
</details>
绘制 Combo 的光晕图形
### drawAnchorShapes
**类型**：
**类型**：`drawAnchorShapes`
```ts
<details>
<summary style="color: #873bf4; cursor: pointer">drawAnchorShapes</summary>
```typescript
type drawAnchorShapes = (
model: NodeDisplayModel | ComboDisplayModel,
shapeMap: NodeShapeMap | ComboShapeMap,
@ -147,13 +185,19 @@ type drawAnchorShapes = (
};
```
**说明**：绘制 Combo 的锚点图形
</details>
绘制 Combo 的锚点图形
### drawBadgeShapes
**类型**：
**类型**：`drawBadgeShapes`
```ts
<details>
<summary style="color: #873bf4; cursor: pointer">drawBadgeShapes</summary>
```typescript
type drawBadgeShapes = (
model: NodeDisplayModel | ComboDisplayModel,
shapeMap: NodeShapeMap | ComboShapeMap,
@ -162,26 +206,38 @@ type drawBadgeShapes = (
};
```
**说明**：绘制 Combo 的徽标图形
</details>
绘制 Combo 的徽标图形
### drawOtherShapes
**类型**：
**类型**：`drawOtherShapes`
```ts
<details>
<summary style="color: #873bf4; cursor: pointer">drawOtherShapes</summary>
```typescript
type drawOtherShapes = (
model: NodeDisplayModel | ComboDisplayModel,
shapeMap: NodeShapeMap | ComboShapeMap,
) => { [id: string]: DisplayObject };
```
**说明**：绘制边的其他图形。自定义边中的其他图形应当定义和配置在 `otherShapes` 中。
</details>
绘制边的其他图形。自定义边中的其他图形应当定义和配置在 `otherShapes` 中。
### afterDraw
**类型**：
**类型**：`afterDraw`
```ts
<details>
<summary style="color: #873bf4; cursor: pointer">afterDraw</summary>
```typescript
type afterDraw = (
model: EdgeDisplayModel,
shapeMap: { [shapeId: string]: DisplayObject },
@ -189,17 +245,25 @@ type afterDraw = (
) => { [otherShapeId: string]: DisplayObject };
```
**说明**：绘制后执行其他绘图操作或添加自定义形状
</details>
绘制后执行其他绘图操作或添加自定义形状
### getMergedStyles
**类型**：
**类型**：`getMergedStyles`
```ts
<details>
<summary style="color: #873bf4; cursor: pointer">getMergedStyles</summary>
```typescript
type getMergedStyles = (model: EdgeDisplayModel) => EdgeDisplayModel;
```
**说明**：将 display model 数据中定义的样式与默认样式和主题样式合并
</details>
将 display model 数据中定义的样式与默认样式和主题样式合并
## 成员方法
@ -207,9 +271,13 @@ type getMergedStyles = (model: EdgeDisplayModel) => EdgeDisplayModel;
### upsertShape
**类型**：
**类型**：`upsertShape`
```ts
<details>
<summary style="color: #873bf4; cursor: pointer">upsertShape</summary>
```typescript
type upsertShape = (
type: SHAPE_TYPE | SHAPE_TYPE_3D,
id: string,
@ -219,4 +287,6 @@ type upsertShape = (
) => DisplayObject;
```
**说明**：根据配置创建（如果在 shapeMap 中不存在）或更新形状
</details>
根据配置创建（如果在 shapeMap 中不存在）或更新形状

22
packages/site/docs/apis/item/combo/RectCombo.en.md
View File

@ -9,7 +9,11 @@ This article demonstrates the configuration options for Rect Combo. [Rect Combo
## keyShape
- **Type**: `KeyShapeStyle`
**Type**: `KeyShapeStyle`
<details>
<summary style="color: #873bf4; cursor: pointer">KeyShapeStyle</summary>
```typescript
type KeyShapeStyle = StyleProps & {
@ -22,19 +26,29 @@ type KeyShapeStyle = StyleProps & {
*/
height: number;
};
```
The related rect style can be referred to in [`RectStyleProps`](../shape/RectStyleProps.en.md).
- **Default**:
</details>
**Default**:`object`
<details>
<summary style="color: #873bf4; cursor: pointer">object</summary>
```json
{
"width": "32",
"height": "32"
}
```
- **Required**: No
```
</details>
<embed src="../../../common/ComboShapeStyles.en.md"></embed>

22
packages/site/docs/apis/item/combo/RectCombo.zh.md
View File

@ -9,7 +9,11 @@ order: 2
## keyShape
- **类型**：`KeyShapeStyle`
**类型**：`KeyShapeStyle`
<details>
<summary style="color: #873bf4; cursor: pointer">KeyShapeStyle</summary>
```typescript
type KeyShapeStyle = StyleProps &
@ -23,19 +27,29 @@ type KeyShapeStyle = StyleProps &
*/
height: number,
};
```
其中，相关的图形样式参考 [Rect 图形样式](../shape/RectStyleProps.zh.md)。
- **默认值**：
</details>
**默认值**：`object`
<details>
<summary style="color: #873bf4; cursor: pointer">object</summary>
```json
{
"width": "32",
"height": "32"
}
```
- **是否必须**：否
```
</details>
<embed src="../../../common/ComboShapeStyles.zh.md"></embed>

16
packages/site/docs/apis/item/edge/CubicEdge.en.md
View File

@ -9,7 +9,11 @@ This article presents the general configuration options for drawing a Cubic thir
## keyShape
- **Type**: `KeyShapeStyle`
**Type**: `KeyShapeStyle`
<details>
<summary style="color: #873bf4; cursor: pointer">KeyShapeStyle</summary>
```typescript
type Point = {
@ -39,7 +43,13 @@ type KeyShapeStyle = PathStyleProps &
For more detailed style configuration, refer to [Path Graphic Style](../shape/PathStyleProps.en.md).
- **Default**:
</details>
**Default**:`object`
<details>
<summary style="color: #873bf4; cursor: pointer">object</summary>
```json
{
@ -48,6 +58,6 @@ For more detailed style configuration, refer to [Path Graphic Style](../shape/Pa
}
```
- **Required**: No
</details>
<embed src="../../../common/EdgeShapeStyles.en.md"></embed>

18
packages/site/docs/apis/item/edge/CubicEdge.zh.md
View File

@ -9,7 +9,11 @@ order: 4
## keyShape
- **类型**：`KeyShapeStyle`
**类型**：`KeyShapeStyle`
<details>
<summary style="color: #873bf4; cursor: pointer">KeyShapeStyle</summary>
```typescript
type Point = {
@ -39,7 +43,13 @@ type KeyShapeStyle = PathStyleProps &
其中，相关的图形样式参考 [Path 图形样式](../shape/PathStyleProps.zh.md)。
- **默认值**：
</details>
**默认值**：`object`
<details>
<summary style="color: #873bf4; cursor: pointer">object</summary>
```json
{
@ -48,8 +58,6 @@ type KeyShapeStyle = PathStyleProps &
}
```
- **是否必须**：否
</details>
<embed src="../../../common/EdgeShapeStyles.zh.md"></embed>
- [PathStyleProps](../../shape/PathStyleProps.zh.md)

16
packages/site/docs/apis/item/edge/CubicHorizontalEdge.en.md
View File

@ -9,7 +9,11 @@ This article presents the configuration options for drawing a Cubic Horizontal B
## keyShape
- **Type**: `KeyShapeStyle`
**Type**: `KeyShapeStyle`
<details>
<summary style="color: #873bf4; cursor: pointer">KeyShapeStyle</summary>
```typescript
type Point = {
@ -39,7 +43,13 @@ type KeyShapeStyle = PathStyleProps &
For more detailed style configuration, refer to [Path Graphic Style](../shape/PathStyleProps.en.md).
- **Default**:
</details>
**Default**:`object`
<details>
<summary style="color: #873bf4; cursor: pointer">object</summary>
```json
{
@ -48,7 +58,7 @@ For more detailed style configuration, refer to [Path Graphic Style](../shape/Pa
}
```
- **Required**: No
</details>
<embed src="../../../common/EdgeShapeStyles.en.md"></embed>

18
packages/site/docs/apis/item/edge/CubicHorizontalEdge.zh.md
View File

@ -9,7 +9,11 @@ order: 5
## keyShape
- **类型**：`KeyShapeStyle`
**类型**：`KeyShapeStyle`
<details>
<summary style="color: #873bf4; cursor: pointer">KeyShapeStyle</summary>
```typescript
type Point = {
@ -39,7 +43,13 @@ type KeyShapeStyle = PathStyleProps &
其中，相关的图形样式参考 [Path 图形样式](../shape/PathStyleProps.zh.md)。
- **默认值**：
</details>
**默认值**：`object`
<details>
<summary style="color: #873bf4; cursor: pointer">object</summary>
```json
{
@ -48,8 +58,6 @@ type KeyShapeStyle = PathStyleProps &
}
```
- **是否必须**：否
</details>
<embed src="../../../common/EdgeShapeStyles.zh.md"></embed>
- [PathStyleProps](../../shape/PathStyleProps.zh.md)

16
packages/site/docs/apis/item/edge/CubicVerticalEdge.en.md
View File

@ -9,7 +9,11 @@ This article presents the configuration options for drawing a Cubic Vertical Bé
## keyShape
- **Type**: `KeyShapeStyle`
**Type**: `KeyShapeStyle`
<details>
<summary style="color: #873bf4; cursor: pointer">KeyShapeStyle</summary>
```typescript
type Point = {
@ -39,7 +43,13 @@ type KeyShapeStyle = PathStyleProps &
For more detailed style configuration, refer to [Path Graphic Style](../shape/PathStyleProps.en.md).
- **Default**:
</details>
**Default**:`object`
<details>
<summary style="color: #873bf4; cursor: pointer">object</summary>
```json
{
@ -48,7 +58,7 @@ For more detailed style configuration, refer to [Path Graphic Style](../shape/Pa
}
```
- **Required**: No
</details>
<embed src="../../../common/EdgeShapeStyles.en.md"></embed>

16
packages/site/docs/apis/item/edge/CubicVerticalEdge.zh.md
View File

@ -9,7 +9,11 @@ order: 6
## keyShape
- **类型**：`KeyShapeStyle`
**类型**：`KeyShapeStyle`
<details>
<summary style="color: #873bf4; cursor: pointer">KeyShapeStyle</summary>
```typescript
type Point = {
@ -39,7 +43,13 @@ type KeyShapeStyle = PathStyleProps &
其中，相关的图形样式参考 [Path 图形样式](../shape/PathStyleProps.zh.md)。
- **默认值**：
</details>
**默认值**：`object`
<details>
<summary style="color: #873bf4; cursor: pointer">object</summary>
```json
{
@ -48,6 +58,6 @@ type KeyShapeStyle = PathStyleProps &
}
```
- **是否必须**：否
</details>
<embed src="../../../common/EdgeShapeStyles.zh.md"></embed>

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

@ -51,7 +51,11 @@ const graph = new ExtGraph({
### draw
**Type**:
**Type**: `draw`
<details>
<summary style="color: #873bf4; cursor: pointer">draw</summary>
```typescript
type draw = (
@ -69,11 +73,17 @@ type draw = (
For more detailed data configuration, refer to [EdgeDisplayModel](../../data/EdgeDisplayModel.en.md).
**Description**: Draw all elements related to the edge.
</details>
Draw all elements related to the edge.
### drawKeyShape
**Type**:
**Type**: `drawKeyShape`
<details>
<summary style="color: #873bf4; cursor: pointer">drawKeyShape</summary>
```typescript
type drawKeyShape = (
@ -86,11 +96,17 @@ type drawKeyShape = (
For more detailed data configuration, refer to [EdgeDisplayModel](../../data/EdgeDisplayModel.en.md).
**Description**: Draw the key shape of the edge.
</details>
Draw the key shape of the edge.
### drawLabelShape
**Type**:
**Type**: `drawLabelShape`
<details>
<summary style="color: #873bf4; cursor: pointer">drawLabelShape</summary>
```typescript
type drawLabelShape = (model: EdgeDisplayModel, shapeMap: EdgeShapeMap) => DisplayObject;
@ -98,11 +114,17 @@ type drawLabelShape = (model: EdgeDisplayModel, shapeMap: EdgeShapeMap) => Displ
For more detailed data configuration, refer to [EdgeDisplayModel](../../data/EdgeDisplayModel.en.md).
**Description**: Draw the label shape of the edge.
</details>
Draw the label shape of the edge.
### drawLabelBackgroundShape
**Type**:
**Type**: `drawLabelBackgroundShape`
<details>
<summary style="color: #873bf4; cursor: pointer">drawLabelBackgroundShape</summary>
```typescript
type drawLabelBackgroundShape = (model: EdgeDisplayModel, shapeMap: EdgeShapeMap) => DisplayObject;
@ -110,11 +132,17 @@ type drawLabelBackgroundShape = (model: EdgeDisplayModel, shapeMap: EdgeShapeMap
For more detailed data configuration, refer to [EdgeDisplayModel](../../data/EdgeDisplayModel.en.md).
**Description**: Draw the label background shape of the edge.
</details>
Draw the label background shape of the edge.
### drawIconShape
**Type**:
**Type**: `drawIconShape`
<details>
<summary style="color: #873bf4; cursor: pointer">drawIconShape</summary>
```typescript
type drawIconShape = (model: EdgeDisplayModel, shapeMap: EdgeShapeMap) => DisplayObject;
@ -122,11 +150,17 @@ type drawIconShape = (model: EdgeDisplayModel, shapeMap: EdgeShapeMap) => Displa
For more detailed data configuration, refer to [EdgeDisplayModel](../../data/EdgeDisplayModel.en.md).
**Description**: Draw the icon shape of the edge.
</details>
Draw the icon shape of the edge.
### drawHaloShape
**Type**:
**Type**: `drawHaloShape`
<details>
<summary style="color: #873bf4; cursor: pointer">drawHaloShape</summary>
```typescript
type drawHaloShape = (model: EdgeDisplayModel, shapeMap: EdgeShapeMap) => DisplayObject;
@ -134,11 +168,17 @@ type drawHaloShape = (model: EdgeDisplayModel, shapeMap: EdgeShapeMap) => Displa
For more detailed data configuration, refer to [EdgeDisplayModel](../../data/EdgeDisplayModel.en.md).
**Description**: Draw the halo shape of the edge.
</details>
Draw the halo shape of the edge.
### drawOtherShapes
**Type**:
**Type**: `drawOtherShapes`
<details>
<summary style="color: #873bf4; cursor: pointer">drawOtherShapes</summary>
```typescript
type drawOtherShapes = (model: EdgeDisplayModel, shapeMap: EdgeShapeMap) => { [id: string]: DisplayObject };
@ -146,11 +186,17 @@ type drawOtherShapes = (model: EdgeDisplayModel, shapeMap: EdgeShapeMap) => { [i
For more detailed data configuration, refer to [EdgeDisplayModel](../../data/EdgeDisplayModel.en.md).
**Description**: Draws other shapes of the edge. Other shapes in a custom edge should be defined and configured in `otherShapes`.
</details>
Draws other shapes of the edge. Other shapes in a custom edge should be defined and configured in `otherShapes`.
### afterDraw
**Type**:
**Type**: `afterDraw`
<details>
<summary style="color: #873bf4; cursor: pointer">afterDraw</summary>
```typescript
type afterDraw = (
@ -162,11 +208,17 @@ type afterDraw = (
For more detailed data configuration, refer to [EdgeDisplayModel](../../data/EdgeDisplayModel.en.md).
**Description**: Perform additional drawing operations or add custom shapes after drawing edge.
</details>
Perform additional drawing operations or add custom shapes after drawing edge.
### getMergedStyles
**Type**:
**Type**: `getMergedStyles`
<details>
<summary style="color: #873bf4; cursor: pointer">getMergedStyles</summary>
```typescript
type getMergedStyles = (model: EdgeDisplayModel) => EdgeDisplayModel;
@ -174,7 +226,9 @@ type getMergedStyles = (model: EdgeDisplayModel) => EdgeDisplayModel;
For more detailed data configuration, refer to [EdgeDisplayModel](../../data/EdgeDisplayModel.en.md).
**Description**: 将 display model 数据中定义的样式与边的默认和主题样式合并
</details>
将 display model 数据中定义的样式与边的默认和主题样式合并
## Member Methods
@ -182,7 +236,11 @@ Inherited shapes provide the following method calls
### upsertShape
**Type**:
**Type**: `upsertShape`
<details>
<summary style="color: #873bf4; cursor: pointer">upsertShape</summary>
```typescript
type SHAPE_TYPE = 'line' | 'path';
@ -198,11 +256,17 @@ type upsertShape = (
For more detailed data configuration, refer to [EdgeDisplayModel](../../data/EdgeDisplayModel.en.md).
**Description**: Create (if not existing in shapeMap) or update a shape based on configuration.
</details>
Create (if not existing in shapeMap) or update a shape based on configuration.
### upsertArrow
**Type**:
**Type**: `upsertArrow`
<details>
<summary style="color: #873bf4; cursor: pointer">upsertArrow</summary>
```typescript
type upsertArrow = (
@ -216,4 +280,6 @@ type upsertArrow = (
For more detailed data configuration, refer to [EdgeDisplayModel](../../data/EdgeDisplayModel.en.md).
**Description**: Add or update an arrow marker at the specified position on the edge.
</details>
Add or update an arrow marker at the specified position on the edge.

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

@ -51,7 +51,11 @@ const graph = new ExtGraph({
### draw
**类型**：
**类型**：`draw`
<details>
<summary style="color: #873bf4; cursor: pointer">draw</summary>
```typescript
type draw = (
@ -69,11 +73,17 @@ type draw = (
其中，相关的数据类型定义参考 [EdgeDisplayModel 渲染数据](../../data/EdgeDisplayModel.zh.md)。
**说明**：用于绘制与边相关的所有图形
</details>
用于绘制与边相关的所有图形
### drawKeyShape
**类型**：
**类型**：`drawKeyShape`
<details>
<summary style="color: #873bf4; cursor: pointer">drawKeyShape</summary>
```typescript
type drawKeyShape = (
@ -86,11 +96,17 @@ type drawKeyShape = (
其中，相关的数据类型定义参考 [EdgeDisplayModel 渲染数据](../../data/EdgeDisplayModel.zh.md)。
**说明**：用于绘制关键图形
</details>
用于绘制关键图形
### drawLabelShape
**类型**：
**类型**：`drawLabelShape`
<details>
<summary style="color: #873bf4; cursor: pointer">drawLabelShape</summary>
```typescript
type drawLabelShape = (model: EdgeDisplayModel, shapeMap: EdgeShapeMap) => DisplayObject;
@ -98,11 +114,17 @@ type drawLabelShape = (model: EdgeDisplayModel, shapeMap: EdgeShapeMap) => Displ
其中，相关的数据类型定义参考 [EdgeDisplayModel 渲染数据](../../data/EdgeDisplayModel.zh.md)。
**说明**：绘制边的标签图形
</details>
绘制边的标签图形
### drawLabelBackgroundShape
**类型**：
**类型**：`drawLabelBackgroundShape`
<details>
<summary style="color: #873bf4; cursor: pointer">drawLabelBackgroundShape</summary>
```typescript
type drawLabelBackgroundShape = (model: EdgeDisplayModel, shapeMap: EdgeShapeMap) => DisplayObject;
@ -110,11 +132,17 @@ type drawLabelBackgroundShape = (model: EdgeDisplayModel, shapeMap: EdgeShapeMap
其中，相关的数据类型定义参考 [EdgeDisplayModel 渲染数据](../../data/EdgeDisplayModel.zh.md)。
**说明**：绘制边的文本的背景图形
</details>
绘制边的文本的背景图形
### drawIconShape
**类型**：
**类型**：`drawIconShape`
<details>
<summary style="color: #873bf4; cursor: pointer">drawIconShape</summary>
```typescript
type drawIconShape = (model: EdgeDisplayModel, shapeMap: EdgeShapeMap) => DisplayObject;
@ -122,11 +150,17 @@ type drawIconShape = (model: EdgeDisplayModel, shapeMap: EdgeShapeMap) => Displa
其中，相关的数据类型定义参考 [EdgeDisplayModel 渲染数据](../../data/EdgeDisplayModel.zh.md)。
**说明**：绘制边的图标图形
</details>
绘制边的图标图形
### drawHaloShape
**类型**：
**类型**：`drawHaloShape`
<details>
<summary style="color: #873bf4; cursor: pointer">drawHaloShape</summary>
```typescript
type drawHaloShape = (model: EdgeDisplayModel, shapeMap: EdgeShapeMap) => DisplayObject;
@ -134,11 +168,17 @@ type drawHaloShape = (model: EdgeDisplayModel, shapeMap: EdgeShapeMap) => Displa
其中，相关的数据类型定义参考 [EdgeDisplayModel 渲染数据](../../data/EdgeDisplayModel.zh.md)。
**说明**：绘制边的光晕图形
</details>
绘制边的光晕图形
### drawOtherShapes
**类型**：
**类型**：`drawOtherShapes`
<details>
<summary style="color: #873bf4; cursor: pointer">drawOtherShapes</summary>
```typescript
type drawOtherShapes = (model: EdgeDisplayModel, shapeMap: EdgeShapeMap) => { [id: string]: DisplayObject };
@ -146,11 +186,17 @@ type drawOtherShapes = (model: EdgeDisplayModel, shapeMap: EdgeShapeMap) => { [i
其中，相关的数据类型定义参考 [EdgeDisplayModel 渲染数据](../../data/EdgeDisplayModel.zh.md)。
**说明**：绘制边的其他图形。自定义边中的其他图形应当定义和配置在 `otherShapes` 中。
</details>
绘制边的其他图形。自定义边中的其他图形应当定义和配置在 `otherShapes` 中。
### afterDraw
**类型**：
**类型**：`afterDraw`
<details>
<summary style="color: #873bf4; cursor: pointer">afterDraw</summary>
```typescript
type afterDraw = (
@ -162,11 +208,17 @@ type afterDraw = (
其中，相关的数据类型定义参考 [EdgeDisplayModel 渲染数据](../../data/EdgeDisplayModel.zh.md)。
**说明**：绘制边后执行其他绘图操作或添加自定义形状
</details>
绘制边后执行其他绘图操作或添加自定义形状
### getMergedStyles
**类型**：
**类型**：`getMergedStyles`
<details>
<summary style="color: #873bf4; cursor: pointer">getMergedStyles</summary>
```typescript
type getMergedStyles = (model: EdgeDisplayModel) => EdgeDisplayModel;
@ -174,7 +226,9 @@ type getMergedStyles = (model: EdgeDisplayModel) => EdgeDisplayModel;
其中，相关的数据类型定义参考 [EdgeDisplayModel 渲染数据](../../data/EdgeDisplayModel.zh.md)。
**说明**：将 display model 数据中定义的样式与边的默认和主题样式合并
</details>
将 display model 数据中定义的样式与边的默认和主题样式合并
## 成员方法
@ -182,7 +236,11 @@ type getMergedStyles = (model: EdgeDisplayModel) => EdgeDisplayModel;
### upsertShape
**类型**：
**类型**：`upsertShape`
<details>
<summary style="color: #873bf4; cursor: pointer">upsertShape</summary>
```typescript
type SHAPE_TYPE = 'line' | 'path';
@ -198,11 +256,17 @@ type upsertShape = (
其中，相关的数据类型定义参考 [EdgeDisplayModel 渲染数据](../../data/EdgeDisplayModel.zh.md)。
**说明**：根据配置创建（如果在 shapeMap 中不存在）或更新形状
</details>
根据配置创建（如果在 shapeMap 中不存在）或更新形状
### upsertArrow
**类型**：
**类型**：`upsertArrow`
<details>
<summary style="color: #873bf4; cursor: pointer">upsertArrow</summary>
```typescript
type upsertArrow = (
@ -216,4 +280,6 @@ type upsertArrow = (
其中，相关的数据类型定义参考 [EdgeDisplayModel 渲染数据](../../data/EdgeDisplayModel.zh.md)。
**说明**：在边的指定位置添加或更新箭头标记
</details>
在边的指定位置添加或更新箭头标记

15
packages/site/docs/apis/item/edge/EdgeIntro.en.md
View File

@ -21,15 +21,16 @@ const Graph = extend(BaseGraph, {
*/
const graph = new Graph({
/**
* ...other configuration options
*/
* ...other configuration options
*/
edge: {
type: 'cubic-edge', /**
* type corresponds to the key named at registration
*/
type: 'cubic-edge'
/**
* ... see specific edge configurations for other edge options
*/
* type corresponds to the key named at registration
*/,
/**
* ... see specific edge configurations for other edge options
*/
},
});
```

15
packages/site/docs/apis/item/edge/EdgeIntro.zh.md
View File

@ -21,15 +21,16 @@ const Graph = extend(BaseGraph, {
*/
const graph = new Graph({
/**
* ...其他配置项
*/
* ...其他配置项
*/
edge: {
type: 'cubic-edge', /**
* type 与注册时命名的 key 一致
*/
type: 'cubic-edge'
/**
* ... 边的其他配置项详见具体边配置
*/
* type 与注册时命名的 key 一致
*/,
/**
* ... 边的其他配置项详见具体边配置
*/
},
});
```

6
packages/site/docs/apis/item/edge/LineEdge.en.md
View File

@ -9,14 +9,12 @@ This article presents the configuration options for Line edges. [Line Edge DEMO]
## keyShape
- **Type**: `LineStyleProps & ArrowProps`
**Type**: `LineStyleProps & ArrowProps`
<embed src="../../../common/ArrowStyle.en.md"></embed>
For more detailed style configuration, refer to [Line Graphic Style](../shape/LineStyleProps.en.md).
- **Default**: undefined
- **Required**: No
**Default**: undefined
<embed src="../../../common/EdgeShapeStyles.en.md"></embed>

18
packages/site/docs/apis/item/edge/LineEdge.zh.md
View File

@ -9,14 +9,24 @@ order: 1
## keyShape
- **类型**：`LineStyleProps & ArrowProps`
**类型**：`KeyShapeStyle`
<embed src="../../../common/ArrowStyle.zh.md"></embed>
<details>
<summary style="color: #873bf4; cursor: pointer">KeyShapeStyle</summary>
```typescript
type KeyShapeStyle = LineStyleProps & ArrowProps;
```
其中，相关的图形样式参考 [Line 图形样式](../shape/LineStyleProps.zh.md)。
- **默认值**：undefined
<embed src="../../../common/ArrowStyle.zh.md"></embed>
- **是否必须**：否
</details>
**默认值**：undefined
关键图形
<embed src="../../../common/EdgeShapeStyles.zh.md"></embed>

16
packages/site/docs/apis/item/edge/LoopEdge.en.md
View File

@ -9,7 +9,11 @@ This article presents the configuration options for Loop self-loop edges. [Loop
## keyShape
- **Type**: `KeyShapeStyle`
**Type**: `KeyShapeStyle`
<details>
<summary style="color: #873bf4; cursor: pointer">KeyShapeStyle</summary>
```typescript
type LoopPosition = 'top' | 'top-right' | 'right' | 'bottom-right' | 'bottom' | 'bottom-left' | 'left' | 'top-left';
@ -46,7 +50,13 @@ type KeyShapeStyle = PathStyleProps &
For more detailed style configuration, refer to [Path Graphic Style](../shape/PathStyleProps.en.md).
- **Default**:
</details>
**Default**:`object`
<details>
<summary style="color: #873bf4; cursor: pointer">object</summary>
```json
{
@ -59,6 +69,6 @@ For more detailed style configuration, refer to [Path Graphic Style](../shape/Pa
}
```
- **Required**: No
</details>
<embed src="../../../common/EdgeShapeStyles.en.md"></embed>

16
packages/site/docs/apis/item/edge/LoopEdge.zh.md
View File

@ -9,7 +9,11 @@ order: 7
## keyShape
- **类型**：`KeyShapeStyle`
**类型**：`KeyShapeStyle`
<details>
<summary style="color: #873bf4; cursor: pointer">KeyShapeStyle</summary>
```typescript
type LoopPosition = 'top' | 'top-right' | 'right' | 'bottom-right' | 'bottom' | 'bottom-left' | 'left' | 'top-left';
@ -46,7 +50,13 @@ type KeyShapeStyle = PathStyleProps &
其中，相关的图形样式参考 [Path 图形样式](../shape/PathStyleProps.zh.md)。
- **默认值**：
</details>
**默认值**：`object`
<details>
<summary style="color: #873bf4; cursor: pointer">object</summary>
```json
{
@ -59,6 +69,6 @@ type KeyShapeStyle = PathStyleProps &
}
```
- **是否必须**：否
</details>
<embed src="../../../common/EdgeShapeStyles.zh.md"></embed>

18
packages/site/docs/apis/item/edge/PolylineEdge.en.md
View File

@ -13,7 +13,11 @@ This article presents the configuration options for Polyline edges. [Polyline Ed
## keyShape
- **Type**: `KeyShapeStyle`
**Type**: `KeyShapeStyle`
<details>
<summary style="color: #873bf4; cursor: pointer">KeyShapeStyle</summary>
```typescript
type KeyShapeStyle = PathStyleProps &
@ -43,7 +47,13 @@ type KeyShapeStyle = PathStyleProps &
For more detailed style configuration, refer to [Path Graphic Style](../shape/PathStyleProps.en.md).
- **Default**:
</details>
**Default**:`object`
<details>
<summary style="color: #873bf4; cursor: pointer">object</summary>
```json
{
@ -51,6 +61,8 @@ For more detailed style configuration, refer to [Path Graphic Style](../shape/Pa
}
```
</details>
| Props | Type | Default | Required | Description |
| ------------------------- | ------------------ | --------- | -------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| name | `'orth'` \| `'er'` | `'orth'` | No | Currently, two built-in routing methods `orth` and `er` are supported |
@ -61,6 +73,4 @@ For more detailed style configuration, refer to [Path Graphic Style](../shape/Pa
Note that, if not specified `controlPoints`, polyline control points are automatically generated based on the [A\* algorithm](https://www.yuque.com/antv/blog/eyi70n). If specified, the polyline will bend at the locations specified by `controlPoints`.
- **Required**: No
<embed src="../../../common/EdgeShapeStyles.en.md"></embed>

16
packages/site/docs/apis/item/edge/PolylineEdge.zh.md
View File

@ -13,7 +13,11 @@ order: 2
## keyShape
- **类型**：`KeyShapeStyle`
**类型**：`KeyShapeStyle`
<details>
<summary style="color: #873bf4; cursor: pointer">KeyShapeStyle</summary>
```typescript
type KeyShapeStyle = PathStyleProps &
@ -53,7 +57,13 @@ type KeyShapeStyle = PathStyleProps &
其中，相关的图形样式参考 [Path 图形样式](../shape/PathStyleProps.zh.md)。
- **默认值**：
</details>
**默认值**：`object`
<details>
<summary style="color: #873bf4; cursor: pointer">object</summary>
```json
{
@ -61,6 +71,6 @@ type KeyShapeStyle = PathStyleProps &
}
```
- **是否必须**：否
</details>
<embed src="../../../common/EdgeShapeStyles.zh.md"></embed>

16
packages/site/docs/apis/item/edge/QuadraticEdge.en.md
View File

@ -9,7 +9,11 @@ This article presents the configuration options for Quadratic second-order Bézi
## keyShape
- **Type**: `KeyShapeStyle`
**Type**: `KeyShapeStyle`
<details>
<summary style="color: #873bf4; cursor: pointer">KeyShapeStyle</summary>
```typescript
type KeyShapeStyle = PathStyleProps &
@ -33,7 +37,13 @@ type KeyShapeStyle = PathStyleProps &
For more detailed style configuration, refer to [Path Graphic Style](../shape/PathStyleProps.en.md).
- **Default**:
</details>
**Default**:`object`
<details>
<summary style="color: #873bf4; cursor: pointer">object</summary>
```json
{
@ -42,6 +52,8 @@ For more detailed style configuration, refer to [Path Graphic Style](../shape/Pa
}
```
</details>
- **Required**: 否
<embed src="../../../common/EdgeShapeStyles.en.md"></embed>

16
packages/site/docs/apis/item/edge/QuadraticEdge.zh.md
View File

@ -9,7 +9,11 @@ order: 3
## keyShape
- **类型**：`KeyShapeStyle`
**类型**：`KeyShapeStyle`
<details>
<summary style="color: #873bf4; cursor: pointer">KeyShapeStyle</summary>
```typescript
type KeyShapeStyle = PathStyleProps &
@ -33,7 +37,13 @@ type KeyShapeStyle = PathStyleProps &
其中，相关的图形样式参考 [Path 图形样式](../shape/PathStyleProps.zh.md)。
- **默认值**：
</details>
**默认值**：`object`
<details>
<summary style="color: #873bf4; cursor: pointer">object</summary>
```json
{
@ -42,6 +52,6 @@ type KeyShapeStyle = PathStyleProps &
}
```
- **是否必须**：否
</details>
<embed src="../../../common/EdgeShapeStyles.zh.md"></embed>

16
packages/site/docs/apis/item/node/CircleNode.en.md
View File

@ -9,7 +9,11 @@ This section details all the configuration options for Circle-shaped nodes. [Cir
## keyShape
- **Type**: `KeyShapeStyle`
**Type**: `KeyShapeStyle`
<details>
<summary style="color: #873bf4; cursor: pointer">KeyShapeStyle</summary>
```typescript
type KeyShapeStyle = StyleProps & {
@ -20,7 +24,13 @@ type KeyShapeStyle = StyleProps & {
For more detailed style configuration, refer to [Circle](../shape/CircleStyleProps.en.md)。
- **Default**:
</details>
**Default**:`object`
<details>
<summary style="color: #873bf4; cursor: pointer">object</summary>
```json
{
@ -28,6 +38,6 @@ For more detailed style configuration, refer to [Circle](../shape/CircleStylePro
}
```
- **Required**: No
</details>
<embed src="../../../common/NodeShapeStyles.en.md"></embed>

22
packages/site/docs/apis/item/node/CircleNode.zh.md
View File

@ -9,25 +9,39 @@ order: 1
## keyShape
- **类型**：`KeyShapeStyle`
**类型**：`KeyShapeStyle`
<details>
<summary style="color: #873bf4; cursor: pointer">KeyShapeStyle</summary>
```typescript
type KeyShapeStyle = StyleProps & {
/** 圆的半径 */
r: number;
};
```
其中，相关的图形样式参考 [Circle 图形样式](../shape/CircleStyleProps.zh.md)。
- **默认值**：
</details>
**默认值**：`object`
<details>
<summary style="color: #873bf4; cursor: pointer">object</summary>
```json
{
"r": 16
}
```
- **是否必须**：否
```
</details>
<embed src="../../../common/NodeShapeStyles.zh.md"></embed>

16
packages/site/docs/apis/item/node/CubeNode.en.md
View File

@ -9,7 +9,11 @@ The following section details the configuration options for Cube (立方体) nod
## keyShape
- **Type**: `KeyShapeStyle`
**Type**: `KeyShapeStyle`
<details>
<summary style="color: #873bf4; cursor: pointer">KeyShapeStyle</summary>
```typescript
type KeyShapeStyle = {
@ -40,7 +44,13 @@ type KeyShapeStyle = {
};
```
- **Default**:
</details>
**Default**:`object`
<details>
<summary style="color: #873bf4; cursor: pointer">object</summary>
```json
{
@ -53,6 +63,6 @@ type KeyShapeStyle = {
}
```
- **Required**: No
</details>
<embed src="../../../common/NodeShapeStyles.en.md"></embed>

16
packages/site/docs/apis/item/node/CubeNode.zh.md
View File

@ -9,7 +9,11 @@ order: 11
## keyShape
- **类型**：`KeyShapeStyle`
**类型**：`KeyShapeStyle`
<details>
<summary style="color: #873bf4; cursor: pointer">KeyShapeStyle</summary>
```typescript
type KeyShapeStyle = {
@ -40,7 +44,13 @@ type KeyShapeStyle = {
};
```
- **默认值**：
</details>
**默认值**：`object`
<details>
<summary style="color: #873bf4; cursor: pointer">object</summary>
```json
{
@ -53,6 +63,6 @@ type KeyShapeStyle = {
}
```
- **是否必须**：否
</details>
<embed src="../../../common/NodeShapeStyles.zh.md"></embed>

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

@ -34,10 +34,10 @@ const graph = new ExtGraph({
* ... Other configuration items
*/
node: {
type: 'custom-node',
/**
* Specify custom node
*/
type: 'custom-node',
/**
* ... See node-specific configuration for additional configuration items
*/
@ -49,7 +49,11 @@ const graph = new ExtGraph({
### draw
**Type**:
**Type**: `draw`
<details>
<summary style="color: #873bf4; cursor: pointer">draw</summary>
```typescript
type draw = (
@ -65,11 +69,17 @@ type draw = (
For more detailed data configuration, refer to [NodeDisplayModel](../../data/NodeDisplayModel.en.md) or [ComboDisplayModel](../../data/ComboDisplayModel.en.md).
**Description**: Draw all shapes associated with a node.
</details>
Draw all shapes associated with a node.
### drawKeyShape
**Type**:
**Type**: `drawKeyShape`
<details>
<summary style="color: #873bf4; cursor: pointer">drawKeyShape</summary>
```typescript
type drawKeyShape = (model: NodeDisplayModel, shapeMap: NodeShapeMap) => DisplayObject;
@ -77,11 +87,17 @@ type drawKeyShape = (model: NodeDisplayModel, shapeMap: NodeShapeMap) => Display
For more detailed data configuration, refer to [NodeDisplayModel](../../data/NodeDisplayModel.en.md) or [ComboDisplayModel](../../data/ComboDisplayModel.en.md).
**Description**: Draw the key shape
</details>
Draw the key shape
### drawLabelShape
**Type**：
**Type**: `drawLabelShape`
<details>
<summary style="color: #873bf4; cursor: pointer">drawLabelShape</summary>
```typescript
type drawLabelShape = (
@ -92,11 +108,17 @@ type drawLabelShape = (
For more detailed data configuration, refer to [NodeDisplayModel](../../data/NodeDisplayModel.en.md) or [ComboDisplayModel](../../data/ComboDisplayModel.en.md).
**Description**：Draw the label shape of the node.
</details>
Draw the label shape of the node.
### drawLabelBackgroundShape
**Type**：
**Type**: `drawLabelBackgroundShape`
<details>
<summary style="color: #873bf4; cursor: pointer">drawLabelBackgroundShape</summary>
```typescript
type drawLabelBackgroundShape = (
@ -107,11 +129,17 @@ type drawLabelBackgroundShape = (
For more detailed data configuration, refer to [NodeDisplayModel](../../data/NodeDisplayModel.en.md) or [ComboDisplayModel](../../data/ComboDisplayModel.en.md).
**Description**：Draw the label background shape of the node.
</details>
Draw the label background shape of the node.
### drawIconShape
**Type**：
**Type**: `drawIconShape`
<details>
<summary style="color: #873bf4; cursor: pointer">drawIconShape</summary>
```typescript
type drawIconShape = (
@ -122,11 +150,17 @@ type drawIconShape = (
For more detailed data configuration, refer to [NodeDisplayModel](../../data/NodeDisplayModel.en.md) or [ComboDisplayModel](../../data/ComboDisplayModel.en.md).
**Description**：Draw the icon shape of the node.
</details>
Draw the icon shape of the node.
### drawHaloShape
**Type**：
**Type**: `drawHaloShape`
<details>
<summary style="color: #873bf4; cursor: pointer">drawHaloShape</summary>
```typescript
type drawHaloShape = (
@ -137,11 +171,17 @@ type drawHaloShape = (
For more detailed data configuration, refer to [NodeDisplayModel](../../data/NodeDisplayModel.en.md) or [ComboDisplayModel](../../data/ComboDisplayModel.en.md).
**Description**：Draw the halo shape of the node.
</details>
Draw the halo shape of the node.
### drawAnchorShapes
**Type**：
**Type**: `drawAnchorShapes`
<details>
<summary style="color: #873bf4; cursor: pointer">drawAnchorShapes</summary>
```typescript
type drawAnchorShapes = (
@ -154,11 +194,17 @@ type drawAnchorShapes = (
For more detailed data configuration, refer to [NodeDisplayModel](../../data/NodeDisplayModel.en.md) or [ComboDisplayModel](../../data/ComboDisplayModel.en.md).
**Description**：Draw the anchors shape of the node.
</details>
Draw the anchors shape of the node.
### drawBadgeShapes
**Type**：
**Type**: `drawBadgeShapes`
<details>
<summary style="color: #873bf4; cursor: pointer">drawBadgeShapes</summary>
```typescript
type drawBadgeShapes = (
@ -171,11 +217,17 @@ type drawBadgeShapes = (
For more detailed data configuration, refer to [NodeDisplayModel](../../data/NodeDisplayModel.en.md) or [ComboDisplayModel](../../data/ComboDisplayModel.en.md).
**Description**：Draw the badges shape of the node.
</details>
Draw the badges shape of the node.
### drawOtherShapes
**Type**：
**Type**: `drawOtherShapes`
<details>
<summary style="color: #873bf4; cursor: pointer">drawOtherShapes</summary>
```typescript
type drawOtherShapes = (
@ -186,11 +238,17 @@ type drawOtherShapes = (
For more detailed data configuration, refer to [NodeDisplayModel](../../data/NodeDisplayModel.en.md) or [ComboDisplayModel](../../data/ComboDisplayModel.en.md).
**Description**：Draw other shapes(such as preRect,stateIcon) of the node.
</details>
Draw other shapes(such as preRect,stateIcon) of the node.
### afterDraw
**Type**：
**Type**: `afterDraw`
<details>
<summary style="color: #873bf4; cursor: pointer">afterDraw</summary>
```typescript
type afterDraw = (
@ -202,11 +260,17 @@ type afterDraw = (
For more detailed data configuration, refer to [NodeDisplayModel](../../data/NodeDisplayModel.en.md) or [ComboDisplayModel](../../data/ComboDisplayModel.en.md).
**Description**：Perform additional drawing operations or add custom shapes after drawing node.
</details>
Perform additional drawing operations or add custom shapes after drawing node.
### getMergedStyles
**Type**：
**Type**: `getMergedStyles`
<details>
<summary style="color: #873bf4; cursor: pointer">getMergedStyles</summary>
```typescript
type getMergedStyles = (model: EdgeDisplayModel) => EdgeDisplayModel;
@ -214,7 +278,9 @@ type getMergedStyles = (model: EdgeDisplayModel) => EdgeDisplayModel;
For more detailed data configuration, refer to [NodeDisplayModel](../../data/NodeDisplayModel.en.md) or [ComboDisplayModel](../../data/ComboDisplayModel.en.md).
**Description**：Merge style.
</details>
Merge style.
## Member Methods
@ -222,7 +288,11 @@ Inherited shapes provide the following method calls
### upsertShape
**Type**:
**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';
@ -238,4 +308,6 @@ type upsertShape = (
) => DisplayObject;
```
**Description**: Create (if not existing in shapeMap) or update a shape based on configuration.
</details>
Create (if not existing in shapeMap) or update a shape based on configuration.

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

@ -51,7 +51,11 @@ const graph = new ExtGraph({
### draw
**类型**：
**类型**：`draw`
<details>
<summary style="color: #873bf4; cursor: pointer">draw</summary>
```typescript
type draw = (
@ -67,11 +71,17 @@ type draw = (
其中，相关的数据类型定义参考 [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;
@ -79,11 +89,17 @@ type drawKeyShape = (model: NodeDisplayModel, shapeMap: NodeShapeMap) => Display
其中，相关的数据类型定义参考 [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 = (
@ -94,11 +110,17 @@ type drawLabelShape = (
其中，相关的数据类型定义参考 [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 = (
@ -109,11 +131,17 @@ type drawLabelBackgroundShape = (
其中，相关的数据类型定义参考 [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 = (
@ -124,11 +152,17 @@ type drawIconShape = (
其中，相关的数据类型定义参考 [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 = (
@ -139,11 +173,17 @@ type drawHaloShape = (
其中，相关的数据类型定义参考 [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 = (
@ -156,11 +196,17 @@ type drawAnchorShapes = (
其中，相关的数据类型定义参考 [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 = (
@ -173,11 +219,17 @@ type drawBadgeShapes = (
其中，相关的数据类型定义参考 [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 = (
@ -188,11 +240,17 @@ type drawOtherShapes = (
其中，相关的数据类型定义参考 [NodeDisplayModel 渲染数据](../../data/ComboDisplayModel.zh.md) 和 [ComboDisplayModel 渲染数据](../../data/ComboDisplayModel.zh.md)。
**说明**：绘制边的其他图形。自定义边中的其他图形应当定义和配置在 `otherShapes` 中。
</details>
绘制边的其他图形。自定义边中的其他图形应当定义和配置在 `otherShapes` 中。
### afterDraw
**类型**：
**类型**：`afterDraw`
<details>
<summary style="color: #873bf4; cursor: pointer">afterDraw</summary>
```typescript
type afterDraw = (
@ -204,11 +262,17 @@ type afterDraw = (
其中，相关的数据类型定义参考 [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;
@ -216,7 +280,9 @@ type getMergedStyles = (model: NodeDisplayModel) => NodeDisplayModel;
其中，相关的数据类型定义参考 [NodeDisplayModel 渲染数据](../../data/ComboDisplayModel.zh.md)。
**说明**：将 display model 数据中定义的样式与默认样式和主题样式合并
</details>
将 display model 数据中定义的样式与默认样式和主题样式合并
## 成员方法
@ -224,7 +290,11 @@ type getMergedStyles = (model: NodeDisplayModel) => NodeDisplayModel;
### 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';
@ -242,4 +312,6 @@ type upsertShape = (
其中，相关的数据类型定义参考 [NodeDisplayModel 渲染数据](../../data/ComboDisplayModel.zh.md) 和 [ComboDisplayModel 渲染数据](../../data/ComboDisplayModel.zh.md)。
**说明**：根据配置创建（如果在 shapeMap 中不存在）或更新形状
</details>
根据配置创建（如果在 shapeMap 中不存在）或更新形状

189
packages/site/docs/apis/item/node/CustomNode3D.en.md
View File

@ -15,8 +15,8 @@ import { Graph, Extensions, extend } from '@antv/g6';
*/
class CustomNode extends Extensions.SphereNode {
/**
* Override member method to customize the drawing logic.
*/
* Override member method to customize the drawing logic.
*/
}
/**
@ -33,15 +33,16 @@ const ExtGraph = extend(Graph, {
*/
const graph = new ExtGraph({
/**
* ... Other configuration items
*/
* ... Other configuration items
*/
node: {
type: 'custom-node', /**
* Specify custom node
*/
type: 'custom-node',
/**
* ... See node-specific configuration for additional configuration items
*/
* Specify custom node
*/
/**
* ... See node-specific configuration for additional configuration items
*/
},
});
```
@ -50,9 +51,13 @@ const graph = new ExtGraph({
### draw
**Type**:
**Type**: `draw`
```ts
<details>
<summary style="color: #873bf4; cursor: pointer">draw</summary>
```typescript
type draw = (
model: NodeDisplayModel | ComboDisplayModel,
shapeMap: { [shapeId: string]: DisplayObject },
@ -64,75 +69,123 @@ type draw = (
};
```
**Description**: Draw all shapes associated with a node.
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**:
**Type**: `drawKeyShape`
```ts
<details>
<summary style="color: #873bf4; cursor: pointer">drawKeyShape</summary>
```typescript
type drawKeyShape = (model: NodeDisplayModel, shapeMap: NodeShapeMap) => DisplayObject;
```
**Description**: Draw the key shape
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`
```ts
<details>
<summary style="color: #873bf4; cursor: pointer">drawLabelShape</summary>
```typescript
type drawLabelShape = (
model: NodeDisplayModel | ComboDisplayModel,
shapeMap: NodeShapeMap | ComboShapeMap,
) => DisplayObject;
```
**说明**：Draw the label shape of the node.
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`
```ts
<details>
<summary style="color: #873bf4; cursor: pointer">drawLabelBackgroundShape</summary>
```typescript
type drawLabelBackgroundShape = (
model: NodeDisplayModel | ComboDisplayModel,
shapeMap: NodeShapeMap | ComboShapeMap,
) => DisplayObject;
```
**说明**：Draw the label background shape of the node.
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`
```ts
<details>
<summary style="color: #873bf4; cursor: pointer">drawIconShape</summary>
```typescript
type drawIconShape = (
model: NodeDisplayModel | ComboDisplayModel,
shapeMap: NodeShapeMap | ComboShapeMap,
) => DisplayObject;
```
**说明**：Draw the icon shape of the node.
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`
```ts
<details>
<summary style="color: #873bf4; cursor: pointer">drawHaloShape</summary>
```typescript
type drawHaloShape = (
model: NodeDisplayModel | ComboDisplayModel,
shapeMap: NodeShapeMap | ComboShapeMap,
) => DisplayObject;
```
**说明**：Draw the halo shape of the node.
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`
```ts
<details>
<summary style="color: #873bf4; cursor: pointer">drawAnchorShapes</summary>
```typescript
type drawAnchorShapes = (
model: NodeDisplayModel | ComboDisplayModel,
shapeMap: NodeShapeMap | ComboShapeMap,
@ -141,13 +194,21 @@ type drawAnchorShapes = (
};
```
**说明**：Draw the anchors shape of the node.
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`
```ts
<details>
<summary style="color: #873bf4; cursor: pointer">drawBadgeShapes</summary>
```typescript
type drawBadgeShapes = (
model: NodeDisplayModel | ComboDisplayModel,
shapeMap: NodeShapeMap | ComboShapeMap,
@ -156,26 +217,42 @@ type drawBadgeShapes = (
};
```
**说明**：Draw the badges shape of the node.
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`
```ts
<details>
<summary style="color: #873bf4; cursor: pointer">drawOtherShapes</summary>
```typescript
type drawOtherShapes = (
model: NodeDisplayModel | ComboDisplayModel,
shapeMap: NodeShapeMap | ComboShapeMap,
) => { [id: string]: DisplayObject };
```
**说明**：Draw other shapes(such as preRect,stateIcon) of the node.
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`
```ts
<details>
<summary style="color: #873bf4; cursor: pointer">afterDraw</summary>
```typescript
type afterDraw = (
model: EdgeDisplayModel,
shapeMap: { [shapeId: string]: DisplayObject },
@ -183,17 +260,29 @@ type afterDraw = (
) => { [otherShapeId: string]: DisplayObject };
```
**说明**：Perform additional drawing operations or add custom shapes after drawing node.
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`
```ts
<details>
<summary style="color: #873bf4; cursor: pointer">getMergedStyles</summary>
```typescript
type getMergedStyles = (model: EdgeDisplayModel) => EdgeDisplayModel;
```
**说明**：Merge style.
For more detailed data configuration, refer to [NodeDisplayModel](../../data/NodeDisplayModel.en.md) or [ComboDisplayModel](../../data/ComboDisplayModel.en.md).
</details>
Merge style.
## Member Methods
@ -201,9 +290,17 @@ Inherited shapes provide the following method calls
### upsertShape
**Type**:
**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';
```ts
type upsertShape = (
type: SHAPE_TYPE | SHAPE_TYPE_3D,
id: string,
@ -213,4 +310,6 @@ type upsertShape = (
) => DisplayObject;
```
**Description**: Create (if not existing in shapeMap) or update a shape based on configuration.
</details>
Create (if not existing in shapeMap) or update a shape based on configuration.

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

@ -7,7 +7,7 @@ order: 14
可以通过继承内置的节点（例如 SphereNode），来创建自定义 3D 节点。可继承图形参见： [节点类型](/manual/customize/extension-cats#1-%E8%8A%82%E7%82%B9%E7%B1%BB%E5%9E%8Bnodes)
```ts
```typescript
import { Graph, Extensions, extend } from '@antv/g6';
/**
@ -15,11 +15,8 @@ import { Graph, Extensions, extend } from '@antv/g6';
*/
class CustomNode extends Extensions.SphereNode {
/**
* overwrite member method
*/
/**
* 重载成员方法，自定义绘制逻辑
*/
* 重载成员方法，自定义绘制逻辑
*/
}
/**
@ -36,15 +33,16 @@ const ExtGraph = extend(Graph, {
*/
const graph = new ExtGraph({
/**
* ...其他配置项
*/
* ...其他配置项
*/
node: {
type: 'custom-node', /**
* 指定自定义节点
*/
/**
* ...其他配置项详见具体节点配置
*/
* 指定自定义节点
*/
type: 'custom-node',
/**
* ...其他配置项详见具体节点配置
*/
},
});
```
@ -53,9 +51,13 @@ const graph = new ExtGraph({
### draw
**类型**：
**类型**：`draw`
```ts
<details>
<summary style="color: #873bf4; cursor: pointer">draw</summary>
```typescript
type draw = (
model: NodeDisplayModel | ComboDisplayModel,
shapeMap: { [shapeId: string]: DisplayObject },
@ -67,75 +69,111 @@ type draw = (
};
```
**说明**：用于绘制与节点相关的所有图形
</details>
用于绘制与节点相关的所有图形
### drawKeyShape
**类型**：
**类型**：`drawKeyShape`
```ts
<details>
<summary style="color: #873bf4; cursor: pointer">drawKeyShape</summary>
```typescript
type drawKeyShape = (model: NodeDisplayModel, shapeMap: NodeShapeMap) => DisplayObject;
```
**说明**：用于绘制关键图形
</details>
用于绘制关键图形
### drawLabelShape
**类型**：
**类型**：`drawLabelShape`
```ts
<details>
<summary style="color: #873bf4; cursor: pointer">drawLabelShape</summary>
```typescript
type drawLabelShape = (
model: NodeDisplayModel | ComboDisplayModel,
shapeMap: NodeShapeMap | ComboShapeMap,
) => DisplayObject;
```
**说明**：绘制节点的文本标签图形
</details>
绘制节点的文本标签图形
### drawLabelBackgroundShape
**类型**：
**类型**：`drawLabelBackgroundShape`
```ts
<details>
<summary style="color: #873bf4; cursor: pointer">drawLabelBackgroundShape</summary>
```typescript
type drawLabelBackgroundShape = (
model: NodeDisplayModel | ComboDisplayModel,
shapeMap: NodeShapeMap | ComboShapeMap,
) => DisplayObject;
```
**说明**：绘制节点的文本的背景图形
</details>
绘制节点的文本的背景图形
### drawIconShape
**类型**：
**类型**：`drawIconShape`
```ts
<details>
<summary style="color: #873bf4; cursor: pointer">drawIconShape</summary>
```typescript
type drawIconShape = (
model: NodeDisplayModel | ComboDisplayModel,
shapeMap: NodeShapeMap | ComboShapeMap,
) => DisplayObject;
```
**说明**：绘制节点的图标图形
</details>
绘制节点的图标图形
### drawHaloShape
**类型**：
**类型**：`drawHaloShape`
```ts
<details>
<summary style="color: #873bf4; cursor: pointer">drawHaloShape</summary>
```typescript
type drawHaloShape = (
model: NodeDisplayModel | ComboDisplayModel,
shapeMap: NodeShapeMap | ComboShapeMap,
) => DisplayObject;
```
**说明**：绘制节点的光晕图形
</details>
绘制节点的光晕图形
### drawAnchorShapes
**类型**：
**类型**：`drawAnchorShapes`
```ts
<details>
<summary style="color: #873bf4; cursor: pointer">drawAnchorShapes</summary>
```typescript
type drawAnchorShapes = (
model: NodeDisplayModel | ComboDisplayModel,
shapeMap: NodeShapeMap | ComboShapeMap,
@ -144,13 +182,19 @@ type drawAnchorShapes = (
};
```
**说明**：绘制节点的锚点图形
</details>
绘制节点的锚点图形
### drawBadgeShapes
**类型**：
**类型**：`drawBadgeShapes`
```ts
<details>
<summary style="color: #873bf4; cursor: pointer">drawBadgeShapes</summary>
```typescript
type drawBadgeShapes = (
model: NodeDisplayModel | ComboDisplayModel,
shapeMap: NodeShapeMap | ComboShapeMap,
@ -159,26 +203,38 @@ type drawBadgeShapes = (
};
```
**说明**：绘制节点的徽标图形
</details>
绘制节点的徽标图形
### drawOtherShapes
**类型**：
**类型**：`drawOtherShapes`
```ts
<details>
<summary style="color: #873bf4; cursor: pointer">drawOtherShapes</summary>
```typescript
type drawOtherShapes = (
model: NodeDisplayModel | ComboDisplayModel,
shapeMap: NodeShapeMap | ComboShapeMap,
) => { [id: string]: DisplayObject };
```
**说明**：绘制边的其他图形。自定义边中的其他图形应当定义和配置在 `otherShapes` 中。
</details>
绘制边的其他图形。自定义边中的其他图形应当定义和配置在 `otherShapes` 中。
### afterDraw
**类型**：
**类型**：`afterDraw`
```ts
<details>
<summary style="color: #873bf4; cursor: pointer">afterDraw</summary>
```typescript
type afterDraw = (
model: EdgeDisplayModel,
shapeMap: { [shapeId: string]: DisplayObject },
@ -186,17 +242,25 @@ type afterDraw = (
) => { [otherShapeId: string]: DisplayObject };
```
**说明**：绘制后执行其他绘图操作或添加自定义形状
</details>
绘制后执行其他绘图操作或添加自定义形状
### getMergedStyles
**类型**：
**类型**：`getMergedStyles`
```ts
<details>
<summary style="color: #873bf4; cursor: pointer">getMergedStyles</summary>
```typescript
type getMergedStyles = (model: EdgeDisplayModel) => EdgeDisplayModel;
```
**说明**：将 display model 数据中定义的样式与默认样式和主题样式合并
</details>
将 display model 数据中定义的样式与默认样式和主题样式合并
## 成员方法
@ -204,9 +268,13 @@ type getMergedStyles = (model: EdgeDisplayModel) => EdgeDisplayModel;
### upsertShape
**类型**：
**类型**：`upsertShape`
```ts
<details>
<summary style="color: #873bf4; cursor: pointer">upsertShape</summary>
```typescript
type upsertShape = (
type: SHAPE_TYPE | SHAPE_TYPE_3D,
id: string,
@ -216,4 +284,6 @@ type upsertShape = (
) => DisplayObject;
```
**说明**：根据配置创建（如果在 shapeMap 中不存在）或更新形状
</details>
根据配置创建（如果在 shapeMap 中不存在）或更新形状

16
packages/site/docs/apis/item/node/DiamondNode.en.md
View File

@ -9,7 +9,11 @@ This section details the configuration options for the keyShape of Diamond (菱
## keyShape
- **Type**: `KeyShapeStyle`
**Type**: `KeyShapeStyle`
<details>
<summary style="color: #873bf4; cursor: pointer">KeyShapeStyle</summary>
```typescript
type KeyShapeStyle = StyleProps & {
@ -22,7 +26,13 @@ type KeyShapeStyle = StyleProps & {
For more detailed style configuration, refer to [Path](../shape/PathStyleProps.en.md)。
- **Default**:
</details>
**Default**:`object`
<details>
<summary style="color: #873bf4; cursor: pointer">object</summary>
```json
{
@ -30,6 +40,6 @@ For more detailed style configuration, refer to [Path](../shape/PathStyleProps.e
}
```
- **Required**: No
</details>
<embed src="../../../common/NodeShapeStyles.en.md"></embed>

16
packages/site/docs/apis/item/node/DiamondNode.zh.md
View File

@ -9,7 +9,11 @@ order: 5
## keyShape
- **类型**：`KeyShapeStyle`
**类型**：`KeyShapeStyle`
<details>
<summary style="color: #873bf4; cursor: pointer">KeyShapeStyle</summary>
```typescript
type KeyShapeStyle = StyleProps & {
@ -22,7 +26,13 @@ type KeyShapeStyle = StyleProps & {
其中，相关的图形样式参考 [Path 图形样式](../shape/PathStyleProps.zh.md)。
- **默认值**：
</details>
**默认值**：`object`
<details>
<summary style="color: #873bf4; cursor: pointer">object</summary>
```json
{
@ -30,6 +40,6 @@ type KeyShapeStyle = StyleProps & {
}
```
- **是否必须**：否
</details>
<embed src="../../../common/NodeShapeStyles.zh.md"></embed>

68
packages/site/docs/apis/item/node/DonutNode.en.md
View File

@ -9,7 +9,11 @@ This section provides details on the configuration options for Donut (甜甜圈)
## keyShape
- **Type**：`KeyShapeStyle`
**Type**：`KeyShapeStyle`
<details>
<summary style="color: #873bf4; cursor: pointer">KeyShapeStyle</summary>
```typescript
type KeyShapeStyle = StyleProps & {
@ -22,7 +26,13 @@ type KeyShapeStyle = StyleProps & {
For more detailed style configuration, refer to [Circle](../shape/CircleStyleProps.en.md)。
- **Default**:
</details>
**Default**:`object`
<details>
<summary style="color: #873bf4; cursor: pointer">object</summary>
```json
{
@ -30,42 +40,58 @@ For more detailed style configuration, refer to [Circle](../shape/CircleStylePro
}
```
- **Required**: No
</details>
## donutShapes
- **Type**: `DonutShapesStyle`
**Type**: `DonutShapesStyle`
<details>
<summary style="color: #873bf4; cursor: pointer">DonutShapesStyle</summary>
```typescript
type DonutShapesStyle = PathStyleProps & {
type DonutShapesStyle = TextStyleProps & {
/**
* The size of the donut's inner diameter relative to the overall radius. This value determines the size of the central empty area of the donut. A larger ratio means a larger central empty area and a relatively narrower ring. The value ranges from `0` to `1`.
* The position of the text relative to the key shape (keyShape) of the node, supports above, below, left, right, and center
*/
innerSize?: number;
position?: 'top' | 'bottom' | 'left' | 'right' | 'center';
/**
* Defines the data for the donut node. Each field corresponds to a segment of the donut, with the field value indicating the size of that segment. These values are used to calculate the proportion of each segment in the donut.
* The x offset of the text shape relative to the key shape (keyShape)
*/
attrs?: PropObject;
offsetX?: number;
/**
* Defines the colors for each segment of the donut. Color mapping, where the field names correspond to the field names in `attrs`. If not specified, the default color palette is used.
* The y offset of the text shape relative to the key shape (keyShape)
*/
colorMap?: PropObject;
offsetY?: number;
/**
* Defines the stacking order (z-index) of the donut shape. This property can be used to control the overlap between different shapes.
* The z offset of the text shape relative to the key shape (keyShape)
*/
zIndex?: number;
offsetZ?: number;
/**
* The maximum width allowed for the text.
* If specified as a number, it represents the pixel value.
* If specified as a text with '%', it represents a percentage of the key shape (keyShape) bounding box size.
* The default value is '200%', which means the maximum width of the text shape cannot exceed twice the width of the key shape.
* If it exceeds, it will be automatically truncated and an ellipsis '...' will be added at the end.
*/
maxWidth?: string | number;
/**
* The rotation angle of the text (in radians)
*/
angle?: number;
};
```
`PropObject` as follows:
For more detailed style configuration, refer to [Text Graphic Style](../shape/TextStyleProps.en.md).
```typescript
type PropObject = {
[propKey: string]: number;
};
```
</details>
- **Default**:
**Default**:`object`
<details>
<summary style="color: #873bf4; cursor: pointer">object</summary>
```json
{
@ -74,6 +100,6 @@ type PropObject = {
}
```
- **Required**: Yes
</details>
<embed src="../../../common/NodeShapeStyles.en.md"></embed>

68
packages/site/docs/apis/item/node/DonutNode.zh.md
View File

@ -9,7 +9,11 @@ order: 3
## keyShape
- **类型**：`KeyShapeStyle`
**类型**：`KeyShapeStyle`
<details>
<summary style="color: #873bf4; cursor: pointer">KeyShapeStyle</summary>
```typescript
type KeyShapeStyle = StyleProps & {
@ -22,7 +26,13 @@ type KeyShapeStyle = StyleProps & {
其中，相关的图形样式参考 [Circle 图形样式](../shape/CircleStyleProps.zh.md)。
- **默认值**：
</details>
默认值：`object`
<details>
<summary style="color: #873bf4; cursor: pointer">object</summary>
```json
{
@ -30,42 +40,58 @@ type KeyShapeStyle = StyleProps & {
}
```
- **是否必须**：否
</details>
## donutShapes
- **类型**：
**类型**：`DonutShapesStyle`
<details>
<summary style="color: #873bf4; cursor: pointer">DonutShapesStyle</summary>
```typescript
PathStyleProps & {
type DonutShapesStyle = TextStyleProps & {
/**
* 甜甜圈内径大小相对于整体半径的比例。此值决定了甜甜圈中心空白区域的大小观。比例值越大，甜甜圈中心的空白区域越大，环形部分相对越窄。值为 `0-1`
* The position of the text relative to the key shape (keyShape) of the node, supports above, below, left, right, and center
*/
innerSize?: number;
position?: 'top' | 'bottom' | 'left' | 'right' | 'center';
/**
* 定义甜甜圈节点的数据。每个字段对应甜甜圈的一个部分，字段的值为该部分的数值大小。这些数值将用于计算甜甜圈中每个部分所占的比例
* The x offset of the text shape relative to the key shape (keyShape)
*/
attrs?: PropObject;
offsetX?: number;
/**
* 定义甜甜圈每个部分的颜色。颜色映射，字段名与 attrs 中的字段名对应。不指定则使用默认色板
* The y offset of the text shape relative to the key shape (keyShape)
*/
colorMap?: PropObject;
offsetY?: number;
/**
* 定义甜甜圈形状的堆叠顺序（z 轴索引）。这个属性可以用来控制不同形状之间的覆盖关系
* The z offset of the text shape relative to the key shape (keyShape)
*/
zIndex?: number;
offsetZ?: number;
/**
* The maximum width allowed for the text.
* If specified as a number, it represents the pixel value.
* If specified as a text with '%', it represents a percentage of the key shape (keyShape) bounding box size.
* The default value is '200%', which means the maximum width of the text shape cannot exceed twice the width of the key shape.
* If it exceeds, it will be automatically truncated and an ellipsis '...' will be added at the end.
*/
maxWidth?: string | number;
/**
* The rotation angle of the text (in radians)
*/
angle?: number;
};
```
`PropObject` 定义如下：
For more detailed style configuration, refer to [Text Graphic Style](../shape/TextStyleProps.en.md).
```typescript
type PropObject = {
[propKey: string]: number;
};
```
</details>
- **默认值**：
**默认值**：`object`
<details>
<summary style="color: #873bf4; cursor: pointer">object</summary>
```json
{
@ -74,6 +100,6 @@ type PropObject = {
}
```
- **是否必须**：是
</details>
<embed src="../../../common/NodeShapeStyles.zh.md"></embed>

16
packages/site/docs/apis/item/node/EllipseNode.en.md
View File

@ -9,7 +9,11 @@ This section outlines the configuration options for Ellipse (椭圆) nodes, as d
## keyShape
- **Type**：`KeyShapeStyle`
**Type**：`KeyShapeStyle`
<details>
<summary style="color: #873bf4; cursor: pointer">KeyShapeStyle</summary>
```typescript
type KeyShapeStyle = StyleProps & {
@ -26,7 +30,13 @@ type KeyShapeStyle = StyleProps & {
For more detailed style configuration, refer to [Ellipse](../shape/EllipseStyleProps.en.md)。
- **Default**:
</details>
**Default**:`object`
<details>
<summary style="color: #873bf4; cursor: pointer">object</summary>
```json
{
@ -35,6 +45,6 @@ For more detailed style configuration, refer to [Ellipse](../shape/EllipseStyleP
}
```
- **Required**: No
</details>
<embed src="../../../common/NodeShapeStyles.en.md"></embed>

16
packages/site/docs/apis/item/node/EllipseNode.zh.md
View File

@ -9,7 +9,11 @@ order: 10
## keyShape
- **类型**：`KeyShapeStyle`
**类型**：`KeyShapeStyle`
<details>
<summary style="color: #873bf4; cursor: pointer">KeyShapeStyle</summary>
```typescript
type KeyShapeStyle = StyleProps & {
@ -26,7 +30,13 @@ type KeyShapeStyle = StyleProps & {
其中，相关的图形样式参考 [Ellipse 图形样式](../shape/EllipseStyleProps.zh.md)。
- **默认值**：
</details>
**默认值**：`object`
<details>
<summary style="color: #873bf4; cursor: pointer">object</summary>
```json
{
@ -35,6 +45,6 @@ type KeyShapeStyle = StyleProps & {
}
```
- **是否必须**：否
</details>
<embed src="../../../common/NodeShapeStyles.zh.md"></embed>

16
packages/site/docs/apis/item/node/HexagonNode.en.md
View File

@ -9,7 +9,11 @@ This section details the configuration options for Hexagon (六边形) nodes, as
## keyShape
- **Type**：`KeyShapeStyle`
**Type**：`KeyShapeStyle`
<details>
<summary style="color: #873bf4; cursor: pointer">KeyShapeStyle</summary>
```typescript
type KeyShapeStyle = StyleProps & {
@ -26,7 +30,13 @@ type KeyShapeStyle = StyleProps & {
For more detailed style configuration, refer to [Polygon](../shape/PolygonStyleProps.en.md)。
- **Default**:
</details>
**Default**:`object`
<details>
<summary style="color: #873bf4; cursor: pointer">object</summary>
```json
{
@ -35,6 +45,6 @@ For more detailed style configuration, refer to [Polygon](../shape/PolygonStyleP
}
```
- **Required**: No
</details>
<embed src="../../../common/NodeShapeStyles.en.md"></embed>

16
packages/site/docs/apis/item/node/HexagonNode.zh.md
View File

@ -9,7 +9,11 @@ order: 6
## keyShape
- **类型**：`KeyShapeStyle`
**类型**：`KeyShapeStyle`
<details>
<summary style="color: #873bf4; cursor: pointer">KeyShapeStyle</summary>
```typescript
type KeyShapeStyle = StyleProps & {
@ -26,7 +30,13 @@ type KeyShapeStyle = StyleProps & {
其中，相关的图形样式参考 [Polygon 图形样式](../shape/PolygonStyleProps.zh.md)。
- **默认值**：
</details>
**默认值**：`object`
<details>
<summary style="color: #873bf4; cursor: pointer">object</summary>
```json
{
@ -35,6 +45,6 @@ type KeyShapeStyle = StyleProps & {
}
```
- **是否必须**：否
</details>
<embed src="../../../common/NodeShapeStyles.zh.md"></embed>

18
packages/site/docs/apis/item/node/ImageNode.en.md
View File

@ -9,7 +9,11 @@ This section details the configuration options for Image nodes, as demonstrated
## keyShape
- **Type**：`KeyShapeStyle`
**Type**：`KeyShapeStyle`
<details>
<summary style="color: #873bf4; cursor: pointer">KeyShapeStyle</summary>
```typescript
type KeyShapeStyle = StyleProps & {
@ -30,7 +34,6 @@ type KeyShapeStyle = StyleProps & {
*/
clipCfg?: ClipCfg;
};
```
For more detailed style configuration, refer to [Image Graphic Style](../shape/ImageStyleProps.en.md).
@ -50,15 +53,22 @@ type ClipCfg = {
This allows specifying the shape type for image clipping and its style. Depending on the target clipping shape type, style configurations vary. For example, for type as `'circle'`, refer to [Circle Graphic Style](../shape/CircleStyleProps.en.md); for `'rect'`, refer to [Rect Graphic Style](../shape/RectStyleProps.en.md).
- **Default**:
</details>
**Default**:`object`
<details>
<summary style="color: #873bf4; cursor: pointer">object</summary>
```json
{
"width": "32",
"height": "32
}
```
- **Required**: No
</details>
<embed src="../../../common/NodeShapeStyles.en.md"></embed>

17
packages/site/docs/apis/item/node/ImageNode.zh.md
View File

@ -9,7 +9,11 @@ order: 4
## keyShape
- **类型**：`KeyShapeStyle`
**类型**：`KeyShapeStyle`
<details>
<summary style="color: #873bf4; cursor: pointer">KeyShapeStyle</summary>
```typescript
type KeyShapeStyle = StyleProps & {
@ -49,15 +53,22 @@ type ClipCfg = {
可以指定裁剪图形的类型及其样式。根据不同的目标裁剪图形类型，样式配置项不同。例如 `type` 是 `'circle'` 参考 [Circle 图形样式](../shape/CircleStyleProps.zh.md)；`'rect'` 参考 [Rect 图形样式](../shape/RectStyleProps.zh.md)。
- **默认值**：
</details>
**默认值**：`object`
<details>
<summary style="color: #873bf4; cursor: pointer">object</summary>
```json
{
"width": "32",
"height": "32
}
```
- **是否必须**：否
</details>
<embed src="../../../common/NodeShapeStyles.zh.md"></embed>

26
packages/site/docs/apis/item/node/ModelRectNode.en.md
View File

@ -9,7 +9,11 @@ This section details the configuration options for ModelRect nodes, as demonstra
## keyShape
- **Type**：`KeyShapeStyle`
**Type**：`KeyShapeStyle`
<details>
<summary style="color: #873bf4; cursor: pointer">KeyShapeStyle</summary>
```typescript
type KeyShapeStyle = StyleProps & {
@ -26,7 +30,13 @@ type KeyShapeStyle = StyleProps & {
The related rect style can be referred to in [`RectStyleProps`](../shape/RectStyleProps.en.md).
- **Default**:
</details>
**Default**:`object`
<details>
<summary style="color: #873bf4; cursor: pointer">object</summary>
```json
{
@ -39,11 +49,11 @@ The related rect style can be referred to in [`RectStyleProps`](../shape/RectSty
}
```
- **Required**: No
</details>
## otherShapes(extended)
- **Type**: `OtherShapesStyle`
**Type**: `OtherShapesStyle`
```typescript
type OtherShapesStyle = {
@ -86,7 +96,11 @@ type OtherShapesStyle = {
};
```
- **Default**:
**Default**:`object`
<details>
<summary style="color: #873bf4; cursor: pointer">object</summary>
```json
{
@ -125,6 +139,6 @@ type OtherShapesStyle = {
}
```
- **Required**: No
</details>
<embed src="../../../common/NodeShapeStyles.en.md"></embed>

26
packages/site/docs/apis/item/node/ModelRectNode.zh.md
View File

@ -9,7 +9,11 @@ order: 9
## keyShape
- **类型**：`KeyShapeStyle`
**类型**：`KeyShapeStyle`
<details>
<summary style="color: #873bf4; cursor: pointer">KeyShapeStyle</summary>
```typescript
type KeyShapeStyle = StyleProps & {
@ -26,7 +30,13 @@ type KeyShapeStyle = StyleProps & {
其中，相关的图形样式参考 [Rect 图形样式](../shape/RectStyleProps.zh.md)。
- **默认值**：
</details>
**默认值**：`object`
<details>
<summary style="color: #873bf4; cursor: pointer">object</summary>
```json
{
@ -39,11 +49,11 @@ type KeyShapeStyle = StyleProps & {
}
```
- **是否必须**：否
</details>
## otherShapes(extended)
- **类型**：`OtherShapesStyle`
**类型**：`OtherShapesStyle`
```typescript
type OtherShapesStyle = {
@ -86,7 +96,11 @@ type OtherShapesStyle = {
};
```
- **默认值**：
**默认值**：`object`
<details>
<summary style="color: #873bf4; cursor: pointer">object</summary>
```json
{
@ -125,6 +139,6 @@ type OtherShapesStyle = {
}
```
- **是否必须**：否
</details>
<embed src="../../../common/NodeShapeStyles.zh.md"></embed>

16
packages/site/docs/apis/item/node/RectNode.en.md
View File

@ -9,7 +9,11 @@ This section provides details on the configuration options for Rect (矩形) nod
## keyShape
- **Type**：`KeyShapeStyle`
**Type**：`KeyShapeStyle`
<details>
<summary style="color: #873bf4; cursor: pointer">KeyShapeStyle</summary>
```typescript
type KeyShapeStyle = StyleProps & {
@ -26,7 +30,13 @@ type KeyShapeStyle = StyleProps & {
For more detailed style configuration, refer to [Rect Graphic Style](../shape/RectStyleProps.en.md).
- **Default**:
</details>
**Default**:`object`
<details>
<summary style="color: #873bf4; cursor: pointer">object</summary>
```json
{
@ -35,6 +45,6 @@ For more detailed style configuration, refer to [Rect Graphic Style](../shape/Re
}
```
- **Required**: No
</details>
<embed src="../../../common/NodeShapeStyles.en.md"></embed>

16
packages/site/docs/apis/item/node/RectNode.zh.md
View File

@ -9,7 +9,11 @@ order: 2
## keyShape
- **类型**：`KeyShapeStyle`
**类型**：`KeyShapeStyle`
<details>
<summary style="color: #873bf4; cursor: pointer">KeyShapeStyle</summary>
```typescript
type KeyShapeStyle = StyleProps & {
@ -26,7 +30,13 @@ type KeyShapeStyle = StyleProps & {
其中，相关的图形样式参考 [Rect 图形样式](../shape/RectStyleProps.zh.md)。
- **默认值**：
</details>
**默认值**：`object`
<details>
<summary style="color: #873bf4; cursor: pointer">object</summary>
```json
{
@ -35,6 +45,6 @@ type KeyShapeStyle = StyleProps & {
}
```
- **是否必须**：否
</details>
<embed src="../../../common/NodeShapeStyles.zh.md"></embed>

16
packages/site/docs/apis/item/node/SphereNode.en.md
View File

@ -9,7 +9,11 @@ This section details the configuration options for Sphere (球体) nodes, as sho
## keyShape
- **Type**: `KeyShapeStyle`
**Type**: `KeyShapeStyle`
<details>
<summary style="color: #873bf4; cursor: pointer">KeyShapeStyle</summary>
```typescript
type KeyShapeStyle = {
@ -28,7 +32,13 @@ type KeyShapeStyle = {
};
```
- **Default**:
</details>
**Default**:`object`
<details>
<summary style="color: #873bf4; cursor: pointer">object</summary>
```json
{
@ -38,6 +48,6 @@ type KeyShapeStyle = {
}
```
- **Required**: No
</details>
<embed src="../../../common/NodeShapeStyles.en.md"></embed>

16
packages/site/docs/apis/item/node/SphereNode.zh.md
View File

@ -9,7 +9,11 @@ order: 12
## keyShape
- **类型**：`KeyShapeStyle`
**类型**：`KeyShapeStyle`
<details>
<summary style="color: #873bf4; cursor: pointer">KeyShapeStyle</summary>
```typescript
type KeyShapeStyle = {
@ -28,7 +32,13 @@ type KeyShapeStyle = {
};
```
- **默认值**：
</details>
**默认值**：`object`
<details>
<summary style="color: #873bf4; cursor: pointer">object</summary>
```json
{
@ -38,7 +48,7 @@ type KeyShapeStyle = {
}
```
- **是否必须**：否
</details>
<embed src="../../../common/NodeShapeStyles.zh.md"></embed>

16
packages/site/docs/apis/item/node/StarNode.en.md
View File

@ -9,7 +9,11 @@ This section outlines the configuration options for Star (星形) nodes, as demo
## keyShape
- **Type**：`KeyShapeStyle`
**Type**：`KeyShapeStyle`
<details>
<summary style="color: #873bf4; cursor: pointer">KeyShapeStyle</summary>
```typescript
type KeyShapeStyle = StyleProps & {
@ -26,7 +30,13 @@ type KeyShapeStyle = StyleProps & {
For more detailed style configuration, refer to [Path Graphic Style](../shape/PathStyleProps.en.md).
- **Default**:
</details>
**Default**:`object`
<details>
<summary style="color: #873bf4; cursor: pointer">object</summary>
```json
{
@ -34,6 +44,6 @@ For more detailed style configuration, refer to [Path Graphic Style](../shape/Pa
}
```
- **Required**: No
</details>
<embed src="../../../common/NodeShapeStyles.en.md"></embed>

16
packages/site/docs/apis/item/node/StarNode.zh.md
View File

@ -9,7 +9,11 @@ order: 8
## keyShape
- **类型**：`KeyShapeStyle`
**类型**：`KeyShapeStyle`
<details>
<summary style="color: #873bf4; cursor: pointer">KeyShapeStyle</summary>
```typescript
type KeyShapeStyle = StyleProps & {
@ -26,7 +30,13 @@ type KeyShapeStyle = StyleProps & {
其中，相关的图形样式参考 [Path 图形样式](../shape/PathStyleProps.zh.md)。
- **默认值**：
</details>
**默认值**：`object`
<details>
<summary style="color: #873bf4; cursor: pointer">object</summary>
```json
{
@ -34,6 +44,6 @@ type KeyShapeStyle = StyleProps & {
}
```
- **是否必须**：否
</details>
<embed src="../../../common/NodeShapeStyles.zh.md"></embed>

17
packages/site/docs/apis/item/node/TriangleNode.en.md
View File

@ -9,7 +9,11 @@ This section details the configuration options for Triangle (三角形) nodes, a
## keyShape
- **Type**：`KeyShapeStyle`
**Type**：`KeyShapeStyle`
<details>
<summary style="color: #873bf4; cursor: pointer">KeyShapeStyle</summary>
```typescript
type KeyShapeStyle = StyleProps & {
@ -22,12 +26,17 @@ type KeyShapeStyle = StyleProps & {
*/
direction?: 'up' | 'left' | 'right' | 'down';
};
```
For more detailed style configuration, refer to [Path Graphic Style](../shape/PathStyleProps.en.md).
- **Default**:
</details>
**Default**:`object`
<details>
<summary style="color: #873bf4; cursor: pointer">object</summary>
```json
{
@ -36,6 +45,6 @@ For more detailed style configuration, refer to [Path Graphic Style](../shape/Pa
}
```
- **Required**: No
</details>
<embed src="../../../common/NodeShapeStyles.en.md"></embed>

16
packages/site/docs/apis/item/node/TriangleNode.zh.md
View File

@ -9,7 +9,11 @@ order: 7
## keyShape
- **类型**：`KeyShapeStyle`
**类型**：`KeyShapeStyle`
<details>
<summary style="color: #873bf4; cursor: pointer">KeyShapeStyle</summary>
```typescript
type KeyShapeStyle = StyleProps & {
@ -26,7 +30,13 @@ type KeyShapeStyle = StyleProps & {
其中，相关的图形样式参考 [Path 图形样式](../shape/PathStyleProps.zh.md)。
- **默认值**：
</details>
**默认值**：`object`
<details>
<summary style="color: #873bf4; cursor: pointer">object</summary>
```json
{
@ -35,6 +45,6 @@ type KeyShapeStyle = StyleProps & {
}
```
- **是否必须**：否
</details>
<embed src="../../../common/NodeShapeStyles.zh.md"></embed>

6
packages/site/docs/common/ArrowStyle.en.md
View File

@ -1,11 +1,11 @@
<details>
<summary><span style="color: #873bf4; cursor: pointer">ArrowProps</span></summary>
<summary style="color: #873bf4; cursor: pointer">ArrowProps</summary>
```ts
```typescript
type ArrowType = 'triangle' | 'circle' | 'diamond' | 'rect' | 'vee' | 'triangle-rect' | 'simple';
type ArrowStyle = PathStyleProps & {
type ArrowStyle = StyleProps & {
type: ArrowType;
width: number;
height: number;

10
packages/site/docs/common/ArrowStyle.zh.md
View File

@ -1,6 +1,6 @@
<details>
<summary><span style="color: #873bf4; cursor: pointer">ArrowProps</span></summary>
<summary style="color: #873bf4; cursor: pointer">ArrowProps</summary>
```typescript
type ArrowType = 'triangle' | 'circle' | 'diamond' | 'rect' | 'vee' | 'triangle-rect' | 'simple';
@ -13,9 +13,13 @@ type ArrowStyle = PathStyleProps & {
};
type ArrowProps = {
// 边的起始端箭头
/**
* 边的起始端箭头
*/
startArrow?: boolean | ArrowStyle;
// 边的结束端箭头
/**
* 边的结束端箭头
*/
endArrow?: boolean | ArrowStyle;
};
```

250
packages/site/docs/common/ComboShapeStyles.en.md
View File

@ -1,41 +1,58 @@
## labelShape
The text shape of the Combo.
**Type**: `LabelShapeStyle`
- **Type**:
<details>
<summary style="color: #873bf4; cursor: pointer">LabelShapeStyle</summary>
```typescript
TextStyleProps & {
/**
* The position of the text relative to the key shape (keyShape) of the Combo. It can specify the position and whether it is inside or outside the combo.
*/
position?: 'top' | 'bottom' | 'left' | 'right' | 'left-top' | 'ouside-top'| 'ouside-left' | 'ouside-right' | 'ouside-bottom';
/**
* The offset of the text shape from the key shape (keyShape) in the x-direction.
*/
offsetX?: number;
/**
* The offset of the text shape from the key shape (keyShape) in the y-direction.
*/
offsetY?: number;
/**
* The offset of the text shape from the key shape (keyShape) in the z-direction.
*/
offsetZ?: number;
/**
* The maximum width allowed for the text. If specified as a number, it represents the pixel value. If specified as text with '%', it represents the percentage relative to the size of the key shape (keyShape). The default value is '200%', which means that the maximum width of the text shape cannot exceed twice the width of the key shape. If it exceeds, it will be automatically truncated and ellipsis '...' will be added at the end.
*/
maxWidth?: string | number;
/**
* The rotation angle of the text (in radians).
*/
angle?: number;
};
type LabelShapeStyle = TextStyleProps & {
/**
* The position of the text relative to the key shape (keyShape) of the Combo. It can specify the position and whether it is inside or outside the combo.
*/
position?:
| 'top'
| 'bottom'
| 'left'
| 'right'
| 'left-top'
| 'ouside-top'
| 'ouside-left'
| 'ouside-right'
| 'ouside-bottom';
/**
* The offset of the text shape from the key shape (keyShape) in the x-direction.
*/
offsetX?: number;
/**
* The offset of the text shape from the key shape (keyShape) in the y-direction.
*/
offsetY?: number;
/**
* The offset of the text shape from the key shape (keyShape) in the z-direction.
*/
offsetZ?: number;
/**
* The maximum width allowed for the text. If specified as a number, it represents the pixel value. If specified as text with '%', it represents the percentage relative to the size of the key shape (keyShape). The default value is '200%', which means that the maximum width of the text shape cannot exceed twice the width of the key shape. If it exceeds, it will be automatically truncated and ellipsis '...' will be added at the end.
*/
maxWidth?: string | number;
/**
* The rotation angle of the text (in radians).
*/
angle?: number;
};
```
The related shape style can be referred to as [`TextStyleProps` Text Shape Style](../shape/TextStyleProps.en.md)。
- **Default**:
</details>
**Default**: `object`
<details>
<summary style="color: #873bf4; cursor: pointer">object</summary>
```json
{
@ -44,80 +61,64 @@ The related shape style can be referred to as [`TextStyleProps` Text Shape Style
}
```
- **Required**: No
</details>
The text shape of the Combo.
## labelBackgroundShape
The background shape of the text in the Combo, which is a rectangle. If not set, it will not be displayed. Setting it as `{}` will use the default style in the theme to display the text background shape.
**Type**: `LabelBackgroundShapeStyle`
- **Type**:
<details>
<summary style="color: #873bf4; cursor: pointer">LabelBackgroundShapeStyle</summary>
```typescript
ShapeStyle & {
padding?: number | number[]; // The padding distance between the text and the background rectangle in all directions
type LabelBackgroundShapeStyle = ShapeStyle & {
/**
* The padding distance between the text and the background rectangle in all directions
*/
padding?: number | number[];
};
```
The related shape style can be referred to as RectStyleProps [`RectStyleProps`](../shape/RectStyleProps.en.md).
- **Default**: undefined
</details>
- **Required**: No
**Default**: undefined
The background shape of the text in the Combo, which is a rectangle. If not set, it will not be displayed. Setting it as `{}` will use the default style in the theme to display the text background shape.
## haloShape
**Type**: `HaloShapeStyle`
<details>
<summary style="color: #873bf4; cursor: pointer">HaloShapeStyle</summary>
```typescript
type HaloShapeStyle = ShapeStyle;
```
`ShapeStyle`, where the type of haloShape follows the key shape (keyShape). The configuration options for different key shapes are different. For example, the key shape of `'circle-combo'` is `'circle'` (refer to [Circle Shape Style](../shape/CircleStyleProps.en.md)), and the key shape of `'rect-combo'` is `'rect'` (refer to [Rect Shape Style](../shape/RectStyleProps.en.md)).
</details>
**Default**: undefined
In the built-in Combo and themes, `haloShape` refers to the halo effect displayed around the key shape (`keyShape`) of the Combo in the `active` state (usually triggered when the mouse hovers) and `selected` state (usually triggered when selected). In the logic of the built-in Combo, the type and color of the `haloShape` follow the key shape (`keyShape`).
- **Type**: `ShapeStyle`, where the type of haloShape follows the key shape (keyShape). The configuration options for different key shapes are different. For example, the key shape of `'circle-combo'` is `'circle'` (refer to [Circle Shape Style](../shape/CircleStyleProps.en.md)), and the key shape of `'rect-combo'` is `'rect'` (refer to [Rect Shape Style](../shape/RectStyleProps.en.md)).
- **Default**: undefined
- **Required**: No
## badgeShapes
The badges on the four sides of the Combo, where a single badge includes the Combo and background shape. `badgeShapes` configures multiple badges.
**Type**: `BadgeShapesStyle`
- **Type**:
<details>
<summary style="color: #873bf4; cursor: pointer">BadgeShapesStyle</summary>
```typescript
{
/**
* The background color of the badge (applies to all badges, lower priority than the color setting of individual badges below)
*/
color?: string;
/**
* The color palette of the badge background, which means that the badges below will automatically take colors from this palette.
* Lower priority than the color setting of individual badges below.
*/
palette?: string[];
/**
* The text color of the badge (applies to all badges, lower priority than the textColor setting of individual badges below)
*/
textColor?: string;
/**
* The style configuration of individual badges, which overrides the above configurations.
*/
[key: number]: ShapeStyle & {
/**
* The position of the badge, supported values are described below
*/
position?: IBadgePosition;
/**
* The background color of the badge
*/
color?: string;
/**
* The text color of the badge
*/
textColor?: string;
};
}
```
`IBadgePosition` Definition:
```ts
type IBadgePosition =
| 'rightTop'
| 'right'
@ -131,24 +132,67 @@ type IBadgePosition =
| 'topLeft'
| 'top'
| 'topRight';
type BadgeShapesStyle = {
/**
* The background color of the badge (applies to all badges, lower priority than the color setting of individual badges below)
*/
color?: string;
/**
* The color palette of the badge background, which means that the badges below will automatically take colors from this palette.
* Lower priority than the color setting of individual badges below.
*/
palette?: string[];
/**
* The text color of the badge (applies to all badges, lower priority than the textColor setting of individual badges below)
*/
textColor?: string;
/**
* The style configuration of individual badges, which overrides the above configurations.
*/
[key: number]: ShapeStyle & {
/**
* The position of the badge, supported values are described below
*/
position?: IBadgePosition;
/**
* The background color of the badge
*/
color?: string;
/**
* The text color of the badge
*/
textColor?: string;
};
};
```
- **Default**: undefined
</details>
- **Required**: No
**Default**: undefined
The badges on the four sides of the Combo, where a single badge includes the Combo and background shape. `badgeShapes` configures multiple badges.
## anchorShapes
The circular shapes (anchor shapes) at the four sides of the Combo represent the entry points for connections. The anchorShapes configuration specifies multiple anchor shapes.
**Type**: `AnchorShapesStyle`
- **Type**:
<details>
<summary style="color: #873bf4; cursor: pointer">AnchorShapesStyle</summary>
```typescript
// The outer layer configures the style of all anchor shapes (circles), with lower priority than the individual anchor shape configurations.
CircleStyleProps & {
// Individual anchor shape configurations, with higher priority than the outer CircleStyleProps.
/**
* The outer layer configures the style of all anchor shapes (circles), with lower priority than the individual anchor shape configurations.
*/
type AnchorShapesStyle = StyleProps & {
/**
* Individual anchor shape configurations, with higher priority than the outer CircleStyleProps.
*/
[key: number]: CircleStyleProps & {
// The position of the anchor shape, can be configured as a string or a number array representing the percentage position relative to the bounding box of the key shape (keyShape). For example, [0.5, 1] means it is located at the right center of the key shape.
/**
* The position of the anchor shape, can be configured as a string or a number array representing the percentage position relative to the bounding box of the key shape (keyShape). For example, [0.5, 1] means it is located at the right center of the key shape.
*/
position?: 'top' | 'left' | 'bottom' | 'right' | [number, number];
};
};
@ -156,26 +200,34 @@ CircleStyleProps & {
The style of the anchor shapes can be referred to as [CircleStyleProps](../shape/CircleStyleProps.en.md).
- **Default**: undefined
</details>
- **Required**: No
**Default**: undefined
The circular shapes (anchor shapes) at the four sides of the Combo represent the entry points for connections. The anchorShapes configuration specifies multiple anchor shapes.
## otherShapes
The xxShape(s) mentioned above are the predefined shapes in the G6 Combo specification. Other custom shapes in the Combo should be defined and configured in `otherShapes`.
**Type**: `OtherShapesStyle`
- **Type**:
<details>
<summary style="color: #873bf4; cursor: pointer">OtherShapesStyle</summary>
```typescript
{
// The key is the shape id, in the format of xxShape
// The value is the shape style configuration (which varies depending on the shape, see the relevant documentation for each shape), as well as the animation of the shape
type OtherShapesStyle = {
/**
* The key is the shape id, in the format of xxShape.
* The value is the shape style configuration (which varies depending on the shape, see the relevant documentation for each shape), as well as the animation of the shape.
*/
[shapeId: string]: ShapeStyleProps;
}
};
```
The style configurations for different shapes can be referred to in the corresponding documentation under the [Shape Style](../shape/BaseStyleProps.en.md) directory.
- **Default**: undefined
</details>
- **Required**: No
**Default**: undefined
The xxShape(s) mentioned above are the predefined shapes in the G6 Combo specification. Other custom shapes in the Combo should be defined and configured in `otherShapes`.

237
packages/site/docs/common/ComboShapeStyles.zh.md
View File

@ -1,37 +1,54 @@
## labelShape
Combo 的文本图形。
**类型**: `LabelShapeStyle`
- **类型**:
<details>
<summary style="color: #873bf4; cursor: pointer">LabelShapeStyle</summary>
```typescript
TextStyleProps & {
/**
* 文本相对于 Combo 主图形 (keyShape) 的位置，可指定方位以及在 combo 的内部或外部
*/
position?: 'top' | 'bottom' | 'left' | 'right' | 'left-top' | 'ouside-top'| 'ouside-left' | 'ouside-right' | 'ouside-bottom';
/**
* 文本图形相对于主图形 (keyShape) 在 x 方向上的偏移量
*/
offsetX?: number;
/**
* 文本图形相对于主图形 (keyShape) 在 y 方向上的偏移量
*/
offsetY?: number;
/**
* 文本图形相对于主图形 (keyShape) 在 z 方向上的偏移量
*/
offsetZ?: number;
/**
* 允许文本的最大宽度，若指定为数字，则表示像素值，若指定为带有 '%' 的文本，代表相对于主图形 (keyShape) 包围盒大小的百分比。默认值为 '200%'，表示文本图形的最大宽度不可以超过主图形宽度的两倍。若超过，则自动截断并在末尾增加省略号 '...'
*/
maxWidth?: string | number;
};
type LabelShapeStyle = TextStyleProps & {
/**
* 文本相对于 Combo 主图形 (keyShape) 的位置，可指定方位以及在 combo 的内部或外部
*/
position?:
| 'top'
| 'bottom'
| 'left'
| 'right'
| 'left-top'
| 'ouside-top'
| 'ouside-left'
| 'ouside-right'
| 'ouside-bottom';
/**
* 文本图形相对于主图形 (keyShape) 在 x 方向上的偏移量
*/
offsetX?: number;
/**
* 文本图形相对于主图形 (keyShape) 在 y 方向上的偏移量
*/
offsetY?: number;
/**
* 文本图形相对于主图形 (keyShape) 在 z 方向上的偏移量
*/
offsetZ?: number;
/**
* 允许文本的最大宽度，若指定为数字，则表示像素值，若指定为带有 '%' 的文本，代表相对于主图形 (keyShape) 包围盒大小的百分比。默认值为 '200%'，表示文本图形的最大宽度不可以超过主图形宽度的两倍。若超过，则自动截断并在末尾增加省略号 '...'
*/
maxWidth?: string | number;
};
```
其中，相关的图形样式参考 [Text 图形样式](../shape/TextStyleProps.zh.md)。
- **默认值**：
</details>
**默认值**：`object`
<details>
<summary style="color: #873bf4; cursor: pointer">object</summary>
```json
{
@ -40,81 +57,64 @@ Combo 的文本图形。
}
```
- **是否必须**：否
</details>
Combo 的文本图形
## labelBackgroundShape
Combo 的文本的背景图形，是一个矩形。若不设置则不显示。设置为 `{}` 将使用主题中默认的样式显示文本背景图形。
**类型**: `LabelBackgroundShapeStyle`
- **类型**:
<details>
<summary style="color: #873bf4; cursor: pointer">LabelBackgroundShapeStyle</summary>
```typescript
ShapeStyle & {
padding?: number | number[]; // 文本距离背景矩形四周的留白距离
type LabelBackgroundShapeStyle = ShapeStyle & {
/**
* 文本距离背景矩形四周的留白距离
*/
padding?: number | number[];
};
```
其中，相关的图形样式参考 [Rect 图形样式](../shape/RectStyleProps.zh.md)。
- **默认值**： undefined
</details>
- **是否必须**：否
**默认值**：undefined
Combo 的文本的背景图形，是一个矩形。若不设置则不显示。设置为 `{}` 将使用主题中默认的样式显示文本背景图形。
## haloShape
**类型**: `HaloShapeStyle`
<details>
<summary style="color: #873bf4; cursor: pointer">HaloShapeStyle</summary>
```typescript
type HaloShapeStyle = ShapeStyle;
```
`haloShape` 的图形类型跟随主图形(`keyShape`)。根据不同的主图形，图形样式配置项不同。例如 `'circle-combo'` 的主图形是 `'circle'` 参考 [Circle 图形样式](../shape/CircleStyleProps.zh.md)；`'rect-combo'` 的主图形是 `'rect'` 参考 [Rect 图形样式](../shape/RectStyleProps.zh.md)。
</details>
**默认值**：undefined
在内置的 Combo 和主题中，`haloShape` 指的是 Combo 在 `active`（一般在鼠标 hover 时该状态被触发） 和 `selected`（一般在选中状态下该状态被触发） 状态下，主图形 (`keyShape`) 周围展示的光晕效果的图形。在内置 Combo 的逻辑中，`haloShape` 的图形类型、颜色跟随主图形 (`keyShape`)。
- **类型**: `ShapeStyle`，`haloShape` 的图形类型跟随主图形(`keyShape`)。根据不同的主图形，图形样式配置项不同。例如 `'circle-combo'` 的主图形是 `'circle'` 参考 [Circle 图形样式](../shape/CircleStyleProps.zh.md)；`'rect-combo'` 的主图形是 `'rect'` 参考 [Rect 图形样式](../shape/RectStyleProps.zh.md)。
- **默认值**：undefined
- **是否必须**：否
## badgeShapes
Combo 四周的徽标，单个徽标包括了 Combo 和背景图形，badgeShapes 配置的是多个徽标。
**类型**: `BadgeShapesStyle`
- **是否必须**: 否；
- **类型**:
<details>
<summary style="color: #873bf4; cursor: pointer">BadgeShapesStyle</summary>
```typescript
{
/**
* 徽标的背景颜色（对所有徽标生效，优先级低于下面单个徽标的 color 设置）
*/
color?: string;
/**
* 徽标背景颜色的色板，意味着下面各个徽标将自动取用该色板中的颜色。
* 优先级低于下面单个徽标的 color 设置
*/
palette?: string[];
/**
* 徽标上文本的颜色（对所有徽标生效，优先级低于下面单个徽标的 textColor 设置）
*/
textColor?: string;
/**
* 单个徽标的样式配置，由县局高于上面的配置
*/
[key: number]: ShapeStyle & {
/**
* 该徽标的位置，支持的取值见下文
*/
position?: IBadgePosition;
/**
* 该徽标的背景色
*/
color?: string;
/**
* 该徽标的文本色
*/
textColor?: string;
};
}
```
`IBadgePosition` 定义如下：
```ts
type IBadgePosition =
| 'rightTop'
| 'right'
@ -128,26 +128,69 @@ type IBadgePosition =
| 'topLeft'
| 'top'
| 'topRight';
type BadgeShapesStyle = {
/**
* 徽标的背景颜色（对所有徽标生效，优先级低于下面单个徽标的 color 设置）
*/
color?: string;
/**
* 徽标背景颜色的色板，意味着下面各个徽标将自动取用该色板中的颜色。
* 优先级低于下面单个徽标的 color 设置
*/
palette?: string[];
/**
* 徽标上文本的颜色（对所有徽标生效，优先级低于下面单个徽标的 textColor 设置）
*/
textColor?: string;
/**
* 单个徽标的样式配置，由县局高于上面的配置
*/
[key: number]: ShapeStyle & {
/**
* 该徽标的位置，支持的取值见下文
*/
position?: IBadgePosition;
/**
* 该徽标的背景色
*/
color?: string;
/**
* 该徽标的文本色
*/
textColor?: string;
};
};
```
其中，相关的图形样式参考 [Rect 图形样式](../shape/RectStyleProps.zh.md)。
- **默认值**： undefined
</details>
- **是否必须**：否
**默认值**：undefined
Combo 四周的徽标，单个徽标包括了 Combo 和背景图形，badgeShapes 配置的是多个徽标。
## anchorShapes
Combo 四周的边连入位置圆形图形（连接桩），anchorShapes 配置的是多个连接桩。
**类型**: `AnchorShapesStyle`
- **类型**:
<details>
<summary style="color: #873bf4; cursor: pointer">AnchorShapesStyle</summary>
```typescript
// 外层可配置对所有连接桩（圆形）的样式，优先级低于单独的连接桩配置
StyleProps & {
// 单独的连接桩图形配置，优先级高于外层的 CircleStyleProps
/**
* 外层可配置对所有连接桩（圆形）的样式，优先级低于单独的连接桩配置
*/
type AnchorShapesStyle = StyleProps & {
/**
* 单独的连接桩图形配置，优先级高于外层的 CircleStyleProps
*/
[key: number]: StyleProps & {
// 该连接桩的位置，可配置字符串或数字数组表示相对于主图形 (keyShape) 包围盒的百分比位置，例如 [0.5, 1] 表示位于主图形的右侧中间
/**
* 该连接桩的位置，可配置字符串或数字数组表示相对于主图形 (keyShape) 包围盒的百分比位置，例如 [0.5, 1] 表示位于主图形的右侧中间
*/
position?: 'top' | 'left' | 'bottom' | 'right' | [number, number];
};
};
@ -155,26 +198,32 @@ StyleProps & {
其中，相关的图形样式参考 [Circle 图形样式](../shape/CircleStyleProps.zh.md)。
- **默认值**： undefined
</details>
- **是否必须**：否
**默认值**：undefined
Combo 四周的边连入位置圆形图形（连接桩），anchorShapes 配置的是多个连接桩。
## otherShapes
上面所有的 xxShape(s) 均为 G6 定义的规范 Combo 中可能存在的图形。自定义 Combo 中的其他图形应当定义和配置在 `otherShapes` 中。
**类型**：`OtherShapeStyle`
- **类型**：
<details>
<summary style="color: #873bf4; cursor: pointer">OtherShapeStyle</summary>
```typescript
{
type OtherShapeStyle = {
// key 为图形 id，规范格式为 xxShape
// value 为图形样式配置（不同图形配置不同，见图形相关文档），以及图形的动画
[shapeId: string]: ShapeStyleProps;
}
};
```
其中，不同的图形样式参考[图形样式](../shape/BaseStyleProps.zh.md)目录下对应的图形类型文档。
- **默认值**： undefined
</details>
- **是否必须**：否
**默认值**：undefined
上面所有的 xxShape(s) 均为 G6 定义的规范 Combo 中可能存在的图形。自定义 Combo 中的其他图形应当定义和配置在 `otherShapes` 中。

68
packages/site/docs/common/EdgeShapeStyles.en.md
View File

@ -1,8 +1,10 @@
## iconShape
The icon shape of the edge (built-in edge support, custom edges that inherit these built-in edges also support it without overriding the relevant content). It is located in front of the text. It can be an image or text, and text supports iconfont.
**Type**: `IconShapeType`
- **Type**: `IconShapeType`
<details>
<summary style="color: #873bf4; cursor: pointer">IconShapeType</summary>
```typescript
type IconShapeType = Partial<
@ -18,25 +20,35 @@ type IconShapeType = Partial<
Where the relevant graphic styles refer to [`TextStyleProps` Text Shape Style](../shape/TextStyleProps.en.md) and [`ImageStyleProps` Image Shape Style](../shape/ImageStyleProps.en.md).
- **Default**: undefined
</details>
- **Required**: No
**Default**: undefined
The icon shape of the edge (built-in edge support, custom edges that inherit these built-in edges also support it without overriding the relevant content). It is located in front of the text. It can be an image or text, and text supports iconfont.
## haloShape
**Type**: `HaloShapeStyle`
<details>
<summary style="color: #873bf4; cursor: pointer">HaloShapeStyle</summary>
`ShapeStyle`. The graphic type of `haloShape` follows the main graphic (`keyShape`). The graphic style configuration varies depending on the main graphic. For example, the main graphic of `'line-edge'` is `'line'`, refer to [Line Graphic Style](../shape/LineStyleProps.en.md); the main graphic of `'cubic-edge'` is `'path'`, refer to [Path Graphic Style](../shape/PathStyleProps.en.md).
</details>
**Default**: undefined
In built-in edges and themes, haloShape refers to the halo effect graphic displayed around the main graphic (keyShape) of the edge in active (usually triggered when the mouse hovers) and selected (usually triggered in the selected state) states. In the logic of built-in edges, the graphic type and color of haloShape follow the main graphic (keyShape).
**Type**: `ShapeStyle`. The graphic type of `haloShape` follows the main graphic (`keyShape`). The graphic style configuration varies depending on the main graphic. For example, the main graphic of `'line-edge'` is `'line'`, refer to [Line Graphic Style](../shape/LineStyleProps.en.md); the main graphic of `'cubic-edge'` is `'path'`, refer to [Path Graphic Style](../shape/PathStyleProps.en.md).
- **Default**: undefined
- **Required**: No
## labelShape
The text shape of the edge.
**Type**: `LabelShapeStyle`
- **Type**: `LabelShapeStyle`
<details>
<summary style="color: #873bf4; cursor: pointer">LabelShapeStyle</summary>
```typescript
type LabelShapeStyle = TextStyleProps & {
@ -73,7 +85,13 @@ type LabelShapeStyle = TextStyleProps & {
For more detailed style configuration, refer to [Text Graphic Style](../shape/TextStyleProps.en.md).
- **Default**:
</details>
**Default**: `object`
<details>
<summary style="color: #873bf4; cursor: pointer">object</summary>
```json
{
@ -82,13 +100,19 @@ For more detailed style configuration, refer to [Text Graphic Style](../shape/Te
}
```
- **Required**: No
</details>
The text shape of the edge.
## labelBackgroundShape
The background shape of the text of the edge.
- **Type**: `LabelBackgroundShapeStyle`
**Type**: `LabelBackgroundShapeStyle`
<details>
<summary style="color: #873bf4; cursor: pointer">LabelBackgroundShapeStyle</summary>
```typescript
type LabelBackgroundShapeStyle = ShapeStyle & {
@ -101,15 +125,19 @@ type LabelBackgroundShapeStyle = ShapeStyle & {
The related rectangle style type can be referred to in [`RectStyleProps`](../shape/RectStyleProps.en.md).
- **Default**: undefined
</details>
- **Required**: No
**Default**: undefined
## otherShapes
All the xxShape(s) above are the possible shapes that exist in the G6 defined standard edge. Other shapes in custom nodes should be defined and configured in `otherShapes`.
- **Type**: `OtherShapesStyle`
**Type**: `OtherShapesStyle`
<details>
<summary style="color: #873bf4; cursor: pointer">OtherShapesStyle</summary>
```typescript
type OtherShapesStyle = {
@ -125,6 +153,6 @@ type OtherShapesStyle = {
The different shape styles can be referred to in the corresponding shape type documentation under the [Shape Style](../shape/BaseStyleProps.en.md) directory.
- **Default**: undefined
</details>
- **Required**: No
**Default**: undefined

66
packages/site/docs/common/EdgeShapeStyles.zh.md
View File

@ -1,8 +1,10 @@
## iconShape
边的图标图形，位于文本前方。
**类型**：`IconShapeStyle`
- **类型**：`IconShapeStyle`
<details>
<summary style="color: #873bf4; cursor: pointer">IconShapeStyle</summary>
```typescript
type IconShapeStyle = Partial<
@ -24,27 +26,35 @@ type IconShapeStyle = Partial<
`iconShape` 根据不同的展示形式，图形样式配置项不同。例如图标为文本，支持 **iconfont**，参考 [Text 图形样式](../../shape/TextStyleProps.zh.md)；图标为图片。参考 [Image 图形样式](../../shape/ImageStyleProps.zh.md)。
- **默认值**：undefined
</details>
- **是否必须**：否
**默认值**：undefined
边的图标图形，位于文本前方。
## haloShape
在内置的边和主题中，`haloShape` 指的是边在 `active`（一般在鼠标 hover 时该状态被触发） 和 `selected`（一般在选中状态下该状态被触发） 状态下，主图形 (`keyShape`) 周围展示的光晕效果的图形。在内置边的逻辑中，`haloShape` 的图形类型、颜色跟随主图形 (`keyShape`)。
**类型**: `HaloShapeStyle`
**类型**: `ShapeStyle`
<details>
<summary style="color: #873bf4; cursor: pointer">HaloShapeStyle</summary>
说明，`haloShape` 的图形类型跟随主图形(`keyShape`)。根据不同的主图形，图形样式配置项不同。例如 `'line-edge'` 的主图形是 `'line'` 参考 [Line 图形样式](../shape/LineStyleProps.zh.md)；`'cubic-edge'` 的主图形是 `'path'` 参考 [Path 图形样式](../shape/PathStyleProps.zh.md)。
- **默认值**：undefined
</details>
- **是否必须**：否
**默认值**：undefined
在内置的边和主题中，`haloShape` 指的是边在 `active`（一般在鼠标 hover 时该状态被触发） 和 `selected`（一般在选中状态下该状态被触发） 状态下，主图形 (`keyShape`) 周围展示的光晕效果的图形。在内置边的逻辑中，`haloShape` 的图形类型、颜色跟随主图形 (`keyShape`)。
## labelShape
边的文本图形，内置边或继承内置边（未复写相关内容）的自定义边均支持。
**类型**：`LabelShapeStyle`
- **类型**：`LabelShapeStyle`
<details>
<summary style="color: #873bf4; cursor: pointer">LabelShapeStyle</summary>
```typescript
type LabelShapeStyle = TextStyleProps & {
@ -78,7 +88,13 @@ type LabelShapeStyle = TextStyleProps & {
};
```
- **默认值**：
</details>
**默认值**：`object`
<details>
<summary style="color: #873bf4; cursor: pointer">object</summary>
```json
{
@ -90,13 +106,17 @@ type LabelShapeStyle = TextStyleProps & {
}
```
- **是否必须**：否
</details>
边的文本图形，内置边或继承内置边（未复写相关内容）的自定义边均支持。
## labelBackgroundShape
边的文本的背景图形，是一个矩形。若不设置则不显示。设置为 `{}` 将使用主题中默认的样式显示文本背景图形。
**类型**：`LabelShapeStyle`
- **类型**：`LabelShapeStyle`
<details>
<summary style="color: #873bf4; cursor: pointer">LabelShapeStyle</summary>
```typescript
type LabelShapeStyle = RectStyleProps & {
@ -109,15 +129,19 @@ type LabelShapeStyle = RectStyleProps & {
其中，相关的图形样式参考 [Rect 图形样式](../shape/RectStyleProps.zh.md)。
- **默认值**：undefined
</details>
- **是否必须**：否
**默认值**：undefined
边的文本的背景图形，是一个矩形。若不设置则不显示。设置为 `{}` 将使用主题中默认的样式显示文本背景图形。
## otherShapes
上面所有的 xxShape(s) 均为 G6 定义的规范边中可能存在的图形。自定义边中的其他图形应当定义和配置在 `otherShapes` 中。
**类型**: `OtherShapesStyle`
- **类型**: `OtherShapesStyle`
<details>
<summary style="color: #873bf4; cursor: pointer">OtherShapesStyle</summary>
```typescript
type OtherShapesStyle = {
@ -133,6 +157,8 @@ type OtherShapesStyle = {
其中，不同的图形样式参考[图形样式](../shape/BaseStyleProps.zh.md)目录下对应的图形类型文档。
- **默认值**：undefined
</details>
- **是否必须**：否
**默认值**：undefined
上面所有的 xxShape(s) 均为 G6 定义的规范边中可能存在的图形。自定义边中的其他图形应当定义和配置在 `otherShapes` 中。

247
packages/site/docs/common/NodeShapeStyles.en.md
View File

@ -1,11 +1,13 @@
## iconShape
The icon graphic at the center of the node (except for the built-in node type `'modelRect-node'`, which is supported by other built-in nodes and custom nodes that inherit from them without overriding the relevant content). It can be an image or text, with text supporting iconfont (assign `fontFamily: 'iconfont'`).
**Type**: `IconShapeStyle`
- **Type**:
<details>
<summary style="color: #873bf4; cursor: pointer">IconShapeStyle</summary>
```typescript
Partial<
type IconShapeStyle = type Partial<
TextStyleProps &
ImageStyleProps &
ShapeStyle & {
@ -18,62 +20,78 @@ Partial<
Where the relevant graphic styles refer to [`TextStyleProps` Text Shape Style](../shape/TextStyleProps.en.md) and [`ImageStyleProps` Image Shape Style](../shape/ImageStyleProps.en.md).
- **Default**: undefined
</details>
- **Required**: No
**Default**: undefined
The icon graphic at the center of the node (except for the built-in node type `'modelRect-node'`, which is supported by other built-in nodes and custom nodes that inherit from them without overriding the relevant content). It can be an image or text, with text supporting iconfont (assign `fontFamily: 'iconfont'`).
## haloShape
**Type**: `HaloShapeStyle`
<details>
<summary style="color: #873bf4; cursor: pointer">HaloShapeStyle</summary>
The graphic type of `haloShape` follows the main graphic (`keyShape`). The graphic style configuration varies depending on the main graphic. For example, the main graphic of `'circle-node'` is `'circle'`, refer to [Circle Shape Style](../shape/CircleStyleProps.en.md); the main graphic of `'image-node'` is `'image'`, refer to [Image Shape Style](../shape/ImageStyleProps.en.md).
</details>
**Default**: undefined
In built-in nodes and themes, `haloShape` refers to the halo effect graphic displayed around the main graphic (keyShape) of a node when it is in the `active` state (usually triggered when the mouse hovers) or `selected` state (usually triggered when it is selected). In the logic of built-in nodes, the graphic type and color of `haloShape` follow the main graphic (`keyShape`).
- **Type**: `ShapeStyle`, the graphic type of `haloShape` follows the main graphic (`keyShape`). The graphic style configuration varies depending on the main graphic. For example, the main graphic of `'circle-node'` is `'circle'`, refer to [Circle Shape Style](../shape/CircleStyleProps.en.md); the main graphic of `'image-node'` is `'image'`, refer to [Image Shape Style](../shape/ImageStyleProps.en.md).
- **Default**: undefined
- **Required**: No
## labelShape
The text shape of the node.
**Type**: `LabelShapeStyle`
- **Type**: `LabelShapeStyle`
<details>
<summary style="color: #873bf4; cursor: pointer">LabelShapeStyle</summary>
```typescript
TextStyleProps & {
/**
* The position of the text relative to the key shape (keyShape) of the node, supports above, below, left, right, and center
*/
position?: 'top' | 'bottom' | 'left' | 'right' | 'center';
/**
* The x offset of the text shape relative to the key shape (keyShape)
*/
offsetX?: number;
/**
* The y offset of the text shape relative to the key shape (keyShape)
*/
offsetY?: number;
/**
* The z offset of the text shape relative to the key shape (keyShape)
*/
offsetZ?: number;
/**
* The maximum width allowed for the text.
* If specified as a number, it represents the pixel value.
* If specified as a text with '%', it represents a percentage of the key shape (keyShape) bounding box size.
* The default value is '200%', which means the maximum width of the text shape cannot exceed twice the width of the key shape.
* If it exceeds, it will be automatically truncated and an ellipsis '...' will be added at the end.
*/
maxWidth?: string | number;
/**
* The rotation angle of the text (in radians)
*/
angle?: number;
};
type LabelShapeStyle = TextStyleProps & {
/**
* The position of the text relative to the key shape (keyShape) of the node, supports above, below, left, right, and center
*/
position?: 'top' | 'bottom' | 'left' | 'right' | 'center';
/**
* The x offset of the text shape relative to the key shape (keyShape)
*/
offsetX?: number;
/**
* The y offset of the text shape relative to the key shape (keyShape)
*/
offsetY?: number;
/**
* The z offset of the text shape relative to the key shape (keyShape)
*/
offsetZ?: number;
/**
* The maximum width allowed for the text.
* If specified as a number, it represents the pixel value.
* If specified as a text with '%', it represents a percentage of the key shape (keyShape) bounding box size.
* The default value is '200%', which means the maximum width of the text shape cannot exceed twice the width of the key shape.
* If it exceeds, it will be automatically truncated and an ellipsis '...' will be added at the end.
*/
maxWidth?: string | number;
/**
* The rotation angle of the text (in radians)
*/
angle?: number;
};
```
For more detailed style configuration, refer to [Text Graphic Style](../shape/TextStyleProps.en.md).
- **Default**:
</details>
**Default**:`object`
<details>
<summary><span style="color: #873bf4; cursor: pointer">object</span></summary>
```json
{
@ -82,74 +100,41 @@ For more detailed style configuration, refer to [Text Graphic Style](../shape/Te
}
```
- **Required**: No
</details>
The text shape of the node.
## labelBackgroundShape
The background shape of the text of the node.
**Type**: `LabelBackgroundShapeStyle`
- **Type**:
<details>
<summary style="color: #873bf4; cursor: pointer">LabelBackgroundShapeStyle</summary>
```typescript
ShapeStyle & {
type LabelBackgroundShapeStyle = ShapeStyle & {
padding?: number | number[]; // The padding distance between the text and the background rectangle
};
```
The related rectangle style type can be referred to in [`RectStyleProps`](../shape/RectStyleProps.en.md).
- **Default**: undefined
</details>
- **Required**: No
**Default**: undefined
The background shape of the text of the node.
## badgeShapes
The badges around the node. A single badge includes text and background shape. The badgeShapes configuration is for multiple badges. [Node Badge Example](/en/examples/item/defaultNodes/#circle).
**Type**: `BadgeShapesStyle`
- **Type**:
<details>
<summary style="color: #873bf4; cursor: pointer">BadgeShapesStyle</summary>
```typescript
{
/**
* The background color of the badge
* (works for all badges, lower priority than the color setting of individual badges)
*/
color?: string;
/**
* 徽标背景颜色的色板，意味着下面各个徽标将自动取用该色板中的颜色。
* 优先级低于下面单个徽标的 color 设置
*/
palette?: string[];
/**
* The color palette for the badge background color,
* which means the individual badges below will automatically use the colors in the palette.
* Lower priority than the color setting of individual badges
*/
textColor?: string;
/**
* The text color of the badge (works for all badges,
* lower priority than the textColor setting of individual badges)
*/
[key: number]: ShapeStyle & {
/**
* The position of this badge, supporting the values below
*/
position?: IBadgePosition;
/**
* The background color of this badge
*/
color?: string;
/**
* The text color of this badge
*/
textColor?: string;
};
}
```
`IBadgePosition` Definition:
```ts
type IBadgePosition =
| 'rightTop'
| 'right'
@ -163,22 +148,64 @@ type IBadgePosition =
| 'topLeft'
| 'top'
| 'topRight';
type BadgeShapesStyle = {
/**
* The background color of the badge
* (works for all badges, lower priority than the color setting of individual badges)
*/
color?: string;
/**
* 徽标背景颜色的色板，意味着下面各个徽标将自动取用该色板中的颜色。
* 优先级低于下面单个徽标的 color 设置
*/
palette?: string[];
/**
* The color palette for the badge background color,
* which means the individual badges below will automatically use the colors in the palette.
* Lower priority than the color setting of individual badges
*/
textColor?: string;
/**
* The text color of the badge (works for all badges,
* lower priority than the textColor setting of individual badges)
*/
[key: number]: ShapeStyle & {
/**
* The position of this badge, supporting the values below
*/
position?: IBadgePosition;
/**
* The background color of this badge
*/
color?: string;
/**
* The text color of this badge
*/
textColor?: string;
};
};
```
Graphic Style Reference refer to [Rect](../shape/RectStyleProps.en.md).
- **Default**: undefined
</details>
- **Required**: No
**Default**: undefined
The badges around the node. A single badge includes text and background shape. The badgeShapes configuration is for multiple badges. [Node Badge Example](/en/examples/item/defaultNodes/#circle).
## anchorShapes
The circular shapes (anchor shapes) of the edges entering each side of the node. The anchorShapes configuration is for multiple anchor shapes. [Node Anchor Example](/en/examples/item/defaultNodes/#circle).
**类型**：`AnchorShapesStyle`
<details>
<summary style="color: #873bf4; cursor: pointer">KeyShapeStyle</summary>
```typescript
// The outer circleStyleProps can be used to configure the style of all anchor shapes (circles),
// with lower priority than the individual anchor shape configuration
CircleStyleProps & {
type AnchorShapesStyle = CircleStyleProps & {
// Individual anchor shape configuration,
// with higher priority than the outer circleStyleProps
[key: number]: CircleStyleProps & {
@ -189,28 +216,34 @@ CircleStyleProps & {
};
```
- **Default**: undefined
- **Required**: No
The related circle style can be referred to in [`CircleStyleProps`](../shape/CircleStyleProps.en.md).
</details>
**Default**: undefined
The circular shapes (anchor shapes) of the edges entering each side of the node. The anchorShapes configuration is for multiple anchor shapes. [Node Anchor Example](/en/examples/item/defaultNodes/#circle).
## otherShapes
All the xxShape(s) above are the possible shapes that exist in the G6 defined standard node. Other shapes in custom nodes should be defined and configured in `otherShapes`.
**Type**: `OtherShapesStyle`
- **Type**:
<details>
<summary style="color: #873bf4; cursor: pointer">KeyShapeStyle</summary>
```typescript
{
type OtherShapesStyle = {
// key is the shape id, in the format of xxShape specified by the specification
// value is the shape style configuration (different shapes have different configurations, see the relevant shape documents), and the animation of the shape
[shapeId: string]: ShapeStyleProps;
}
};
```
The different shape styles can be referred to in the corresponding shape type documentation under the [Shape Style](../shape/BaseStyleProps.en.md) directory.
- **Default**: undefined
</details>
- **Required**: No
**Default**: undefined
All the xxShape(s) above are the possible shapes that exist in the G6 defined standard node. Other shapes in custom nodes should be defined and configured in `otherShapes`.

126
packages/site/docs/common/NodeShapeStyles.zh.md
View File

@ -1,8 +1,10 @@
## labelShape
节点的文本图形。
**类型**：`LabelShapeStyle`
- **类型**：`LabelShapeStyle`
<details>
<summary style="color: #873bf4; cursor: pointer">LabelShapeStyle</summary>
```typescript
type LabelShapeStyle = StyleProps & {
@ -35,7 +37,13 @@ type LabelShapeStyle = StyleProps & {
其中，相关的图形样式参考 [Text 图形样式](../shape/TextStyleProps.zh.md)。
- **默认值**：
</details>
**默认值**：`object`
<details>
<summary><span style="color: #873bf4; cursor: pointer">object</span></summary>
```json
{
@ -44,13 +52,17 @@ type LabelShapeStyle = StyleProps & {
}
```
- **是否必须**：否
</details>
节点的文本图形
## labelBackgroundShape
节点的文本的背景图形，是一个矩形。若不设置则不显示。设置为 `{}` 将使用主题中默认的样式显示文本背景图形。
**类型**：`LabelBackgroundShapeStyle`
- **类型**：`LabelBackgroundShapeStyle`
<details>
<summary style="color: #873bf4; cursor: pointer">LabelBackgroundShapeStyle</summary>
```typescript
type LabelBackgroundShapeStyle = ShapeStyle & {
@ -63,15 +75,19 @@ type LabelBackgroundShapeStyle = ShapeStyle & {
其中，相关的图形样式参考 [Rect 图形样式](../shape/RectStyleProps.zh.md)。
- **默认值**： undefined
</details>
- **是否必须**：否
**默认值**： undefined
节点的文本的背景图形，是一个矩形。若不设置则不显示。设置为 `{}` 将使用主题中默认的样式显示文本背景图形。
## iconShape
节点中心的图标图形（除 `'modelRect-node'` 以外的内置节点支持，继承这些内置节点的自定义节点在无复写相关内容的情况下同样支持），可以是图片或文本，文本支持 iconfont (设置 `fontFamily: 'iconfont'`)。
**类型**: `IconShapeStyle`
- **类型**: `IconShapeStyle`
<details>
<summary style="color: #873bf4; cursor: pointer">IconShapeStyle</summary>
```typescript
type IconShapeStyle = Partial<
@ -87,29 +103,55 @@ type IconShapeStyle = Partial<
其中，相关的图形样式参考 [Text 图形样式](../shape/TextStyleProps.zh.md)，和 [Image 图形样式](../shape/ImageStyleProps.zh.md)。
- **默认值**：undefined
</details>
- **是否必须**：否
**默认值**：undefined
节点中心的图标图形（除 `'modelRect-node'` 以外的内置节点支持，继承这些内置节点的自定义节点在无复写相关内容的情况下同样支持），可以是图片或文本，文本支持 iconfont (设置 `fontFamily: 'iconfont'`)。
## haloShape
在内置的节点和主题中，`haloShape` 指的是节点在 `active`（一般在鼠标 hover 时该状态被触发） 和 `selected`（一般在选中状态下该状态被触发） 状态下，主图形 (`keyShape`) 周围展示的光晕效果的图形。在内置节点的逻辑中，`haloShape` 的图形类型、颜色跟随主图形 (`keyShape`)。
**类型**: `HaloShapeStyle`
- **类型**: `ShapeStyle`
<details>
<summary style="color: #873bf4; cursor: pointer">HaloShapeStyle</summary>
```typescript
type HaloShapeStyle = ShapeStyle;
```
说明，`haloShape` 的图形类型跟随主图形(`keyShape`)。根据不同的主图形，图形样式配置项不同。例如 `'circle-node'` 的主图形是 `'circle'` 参考 [Circle 图形样式](../shape/CircleStyleProps.zh.md)；`'image-node'` 的主图形是 `'image'` 参考 [Image 图形样式](../shape/ImageStyleProps.zh.md)。
- **默认值**：undefined
</details>
- **是否必须**：否
**默认值**：undefined
在内置的节点和主题中，`haloShape` 指的是节点在 `active`（一般在鼠标 hover 时该状态被触发） 和 `selected`（一般在选中状态下该状态被触发） 状态下，主图形 (`keyShape`) 周围展示的光晕效果的图形。在内置节点的逻辑中，`haloShape` 的图形类型、颜色跟随主图形 (`keyShape`)。
## badgeShapes
节点四周的徽标，单个徽标包括了文本和背景图形，`badgeShapes` 配置的是多个徽标。[节点徽标 DEMO](/zh/examples/item/defaultNodes/#circle)。
**类型**：`BadgeShapesStyle`
- **类型**：`BadgeShapesStyle`
<details>
<summary style="color: #873bf4; cursor: pointer">BadgeShapesStyle</summary>
```typescript
type IBadgePosition =
| 'rightTop'
| 'right'
| 'rightBottom'
| 'bottomRight'
| 'bottom'
| 'bottomLeft'
| 'leftBottom'
| 'left'
| 'leftTop'
| 'topLeft'
| 'top'
| 'topRight';
type BadgeShapesStyle = {
/**
* 徽标的背景颜色（对所有徽标生效，优先级低于下面单个徽标的 color 设置）
@ -144,35 +186,21 @@ type BadgeShapesStyle = {
};
```
`IBadgePosition` 定义如下：
```ts
type IBadgePosition =
| 'rightTop'
| 'right'
| 'rightBottom'
| 'bottomRight'
| 'bottom'
| 'bottomLeft'
| 'leftBottom'
| 'left'
| 'leftTop'
| 'topLeft'
| 'top'
| 'topRight';
```
其中，相关的图形样式参考 [Rect 图形样式](../shape/RectStyleProps.zh.md)。
- **默认值**： undefined
</details>
- **是否必须**：否
**默认值**： undefined
节点四周的徽标，单个徽标包括了文本和背景图形，`badgeShapes` 配置的是多个徽标。[节点徽标 DEMO](/zh/examples/item/defaultNodes/#circle)。
## anchorShapes
节点四周的边连入位置圆形图形（连接桩），anchorShapess 配置的是多个连接桩。[节点连接桩 DEMO](/zh/examples/item/defaultNodes/#circle)。
**类型**：`AnchorShapesStyle`
- **类型**：`AnchorShapesStyle`
<details>
<summary style="color: #873bf4; cursor: pointer">AnchorShapesStyle</summary>
```typescript
/**
@ -193,15 +221,19 @@ type AnchorShapesStyle = StyleProps & {
其中，相关的图形样式参考 [Circle 图形样式](../shape/CircleStyleProps.zh.md)。
- **默认值**： undefined
</details>
- **是否必须**：否
**默认值**： undefined
节点四周的边连入位置圆形图形（连接桩），anchorShapess 配置的是多个连接桩。[节点连接桩 DEMO](/zh/examples/item/defaultNodes/#circle)。
## otherShapes
上面所有的 xxShape(s) 均为 G6 定义的规范节点中可能存在的图形。自定义节点中的其他图形应当定义和配置在 `otherShapes` 中
**类型**：`OtherShapesStyle`
- **类型**：`OtherShapesStyle`
<details>
<summary style="color: #873bf4; cursor: pointer">OtherShapesStyle</summary>
```typescript
type OtherShapesStyle = {
@ -217,6 +249,8 @@ type OtherShapesStyle = {
其中，不同的图形样式参考[图形样式](../shape/BaseStyleProps.zh.md)目录下对应的图形类型文档。
- **默认值**： undefined
</details>
- **是否必须**：否
**默认值**： undefined
上面所有的 xxShape(s) 均为 G6 定义的规范节点中可能存在的图形。自定义节点中的其他图形应当定义和配置在 `otherShapes` 中

134
packages/site/docs/manual/customize/themeExtension.en.md
View File

@ -3,4 +3,136 @@ title: Custom Theme Extension
order: 5
---
Coming soon...
G6 allows extension of existing themes.
- **Theme** is responsible for defining the visual style of the diagram.
- **Theme Processor (ThemeSolver)** is a functional component responsible for generating the final theme style specifications based on the provided configuration.
The following are examples of the two built-in topic processor types and their configuration options:
| Features | SpecThemeSolver (Specification Theme Processor) | SubjectThemeSolver (Subject Theme Processor) |
| --------------------------- | -------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------- |
| **Customization level** | Fine-grained, for specific components (such as nodes, edges) | Coarse-grained, overall chart theme |
| **Swatch Application** | Dynamically apply color swatches and styles based on data type | Apply basic colors and simplified swatch configurations |
| **Style Definition** | Define the visual style of each data type in detail | Unify the visual style of the overall theme |
| **Applicable scenarios** | Data-driven style customization, suitable for complex and specific visual needs | Theme style consistency, suitable for simple visual needs |
| **Difference** | Provides detailed customization capabilities, with different visual displays for different data segments | Provides macro theme adjustment capabilities, focusing on the overall appearance rather than details |
| **Configuration item type** | `SpecThemeCfg` | `SubjectThemeCfg` |
<details>
<summary style="color: #873bf4; cursor: pointer">SpecThemeCfg</summary>
```typescript
type SpecThemeCfg = { type: 'spec' } & SpecThemeSolverOptions;
/**
* The type of color palette can be a hexadecimal color string array or an object. The key is the data type name, and the value is the hexadecimal color value.
*/
type Palette = string[] | { [dataType: string]: string };
type ITEM_TYPE = 'node' | 'edge' | 'combo';
type SpecThemeSolverOptions = {
/**
* The built-in theme that the custom theme is based on, defaults to 'light'
*/
base: 'light' | 'dark';
specification: {
[itemType: ITEM_TYPE]: {
/**
* The data type field of node/edge/combo. For example, if the node is classified according to the 'cluster' field, you can specify dataTypeField: 'cluster', and then the color will be selected from the color palette based on this classification.
*/
dataTypeField: string;
/**
* Swatches
*/
palette: Palette;
/**
* Customize the style of the graphics corresponding to the color palette
*/
getStyleSets: (palette: Palette) => {
default: {
[shapeId: string]: ShapeStyle;
};
[stateName: string]: {
[shapeId: string]: ShapeStyle;
};
};
};
canvas?: {
/**
* Configuration of the canvas background color. If not configured, it will follow the default color of base.
*/
backgroundColor: string;
[cssName: string]: unknown;
};
};
};
```
</details>
<details>
<summary style="color: #873bf4; cursor: pointer">SubjectThemeCfg</summary>
```typescript
type SubjectThemeCfg = { type: 'subject' } & SubjectThemeSolverOptions;
/**
* The type of color palette can be a hexadecimal color string array or an object. The key is the data type name, and the value is the hexadecimal color value.
*/
type Palette = string[] | { [dataType: string]: string };
type ITEM_TYPE = 'node' | 'edge' | 'combo';
type SubjectThemeSolverOptions = {
/**
* The built-in theme that the custom theme is based on, defaults to 'light'
*/
base: 'light' | 'dark';
baseColor: string;
specification?: {
[itemType: ITEM_TYPE]: {
/**
* The data type field of node/edge/combo. For example, if the node is classified according to the 'cluster' field, you can specify dataTypeField: 'cluster', and then the color will be selected from the color palette based on this classification.
*/
dataTypeField: string;
/**
* Swatches
*/
palette: Palette;
};
canvas?: {
/**
* Configuration of the canvas background color. If not configured, it will follow the default color of base.
*/
backgroundColor: string;
[cssName: string]: unknown;
};
};
};
```
</details>
## Example
Here we take the implementation of a simple theme as an example, and the theme tone is blue.
```javascript
import { Graph } from '@antv/g6';
const graph = new Graph({
theme: {
type: 'spec',
base: 'light',
specification: {
canvas: {
backgroundColor: '#f3faff',
},
node: {
dataTypeField: 'cluster',
palette: ['#bae0ff', '#91caff', '#69b1ff', '#4096ff', '#1677ff', '#0958d9', '#003eb3', '#002c8c', '#001d66'],
},
},
},
});
```

134
packages/site/docs/manual/customize/themeExtension.zh.md
View File

@ -3,4 +3,136 @@ title: 自定义主题
order: 5
---
文档正在开发中...
G6 允许扩展已有的主题。
- **主题（Theme）** 负责定义图的视觉样式。
- **主题处理器（ThemeSolver）** 则是一个功能组件，负责根据提供的配置生成最终的主题样式规格。
以下是两种内置的主题处理器类型及其配置选项示例：
| 特征 | SpecThemeSolver（规范主题处理器） | SubjectThemeSolver（主题主题处理器） |
| -------------- | ------------------------------------------------------ | ---------------------------------------------- |
| **定制层级** | 细粒度，针对具体组件（如节点、边） | 粗粒度，整体图表主题 |
| **色板应用** | 根据数据类型动态应用色板和样式 | 应用基础颜色及简化的色板配置 |
| **样式定义** | 详细定义每种数据类型的视觉样式 | 统一定义整体主题的视觉样式 |
| **适用场景** | 数据驱动的样式定制，适合复杂和具体的视觉需求 | 主题风格一致性，适合简单的视觉需求 |
| **区别** | 提供详尽的自定义能力，针对数据不同细分有不同的视觉展示 | 提供宏观的主题调整能力，着重于整体外观而非细节 |
| **配置项类型** | `SpecThemeCfg` | `SubjectThemeCfg` |
<details>
<summary style="color: #873bf4; cursor: pointer">SpecThemeCfg</summary>
```typescript
type SpecThemeCfg = { type: 'spec' } & SpecThemeSolverOptions;
/**
* 色板的类型，可以是十六进制颜色字符串数组，也可以是对象形式 key 为数据类型名，value 为十六进制颜色值
*/
type Palette = string[] | { [dataType: string]: string };
type ITEM_TYPE = 'node' | 'edge' | 'combo';
type SpecThemeSolverOptions = {
/**
* 自定义主题基于的内置主题，默认为 'light'
*/
base: 'light' | 'dark';
specification: {
[itemType: ITEM_TYPE]: {
/**
* 节点/边/ combo 的数据类型字段，例如节点根据 'cluster' 字段分类，则可指定 dataTypeField: 'cluster'，后续将根据此分类从色板中取色
*/
dataTypeField: string;
/**
* 色板
*/
palette: Palette;
/**
* 自定义色板对应图形的样式
*/
getStyleSets: (palette: Palette) => {
default: {
[shapeId: string]: ShapeStyle;
};
[stateName: string]: {
[shapeId: string]: ShapeStyle;
};
};
};
canvas?: {
/**
* 画布背景色的配置，不配置则跟随 base 的默认色
*/
backgroundColor: string;
[cssName: string]: unknown;
};
};
};
```
</details>
<details>
<summary style="color: #873bf4; cursor: pointer">SubjectThemeCfg</summary>
```typescript
type SubjectThemeCfg = { type: 'subject' } & SubjectThemeSolverOptions;
/**
* 色板的类型，可以是十六进制颜色字符串数组，也可以是对象形式 key 为数据类型名，value 为十六进制颜色值
*/
type Palette = string[] | { [dataType: string]: string };
type ITEM_TYPE = 'node' | 'edge' | 'combo';
type SubjectThemeSolverOptions = {
/**
* 自定义主题基于的内置主题，默认为 'light'
*/
base: 'light' | 'dark';
baseColor: string;
specification?: {
[itemType: ITEM_TYPE]: {
/**
* 节点/边/ combo 的数据类型字段，例如节点根据 'cluster' 字段分类，则可指定 dataTypeField: 'cluster'，后续将根据此分类从色板中取色
*/
dataTypeField: string;
/**
* 色板
*/
palette: Palette;
};
canvas?: {
/**
* 画布背景色的配置，不配置则跟随 base 的默认色
*/
backgroundColor: string;
[cssName: string]: unknown;
};
};
};
```
</details>
## 示例
这里以实现一个简单的主题为例，主题基调为蓝色。
```javascript
import { Graph } from '@antv/g6';
const graph = new Graph({
theme: {
type: 'spec',
base: 'light',
specification: {
canvas: {
backgroundColor: '#f3faff',
},
node: {
dataTypeField: 'cluster',
palette: ['#bae0ff', '#91caff', '#69b1ff', '#4096ff', '#1677ff', '#0958d9', '#003eb3', '#002c8c', '#001d66'],
},
},
},
});
```

80
packages/site/docs/manual/customize/transformExtension.en.md
View File

@ -3,4 +3,82 @@ title: Custom Transform Extension
order: 4
---
Coming soon...
> Before customizing the data processor, make sure you are familiar with G6 data flows and data structures. For relevant content, please refer to [Data Introduction Document](../../apis/data/DataIntro.zh.md).
A custom data processor is essentially a function that is responsible for converting user data into a format that G6 can understand and process internally (inner data).
**Type**: `CustomDataTransformFn`
```typescript
type CustomDataTransformFn = (
data: GraphDataChanges,
options: Record<string, any>,
graphCore?: GraphCore,
) => GraphDataChanges;
```
`GraphDataChanges` is defined as follows:
G6 will automatically divide data changes into three parts based on the type of operation: data to be added (`dataAdded`), updated (`dataUpdated`) and deleted (`dataRemoved`).
```typescript
typeGraphData = {
nodes?: NodeUserModel[];
edges?: EdgeUserModel[];
combos?: ComboUserModel[];
};
type GraphDataChanges = {
dataAdded: GraphData;
dataUpdated: GraphData;
dataRemoved: GraphData;
};
```
Among them, the input data types refer to [NodeUserModel input data](./NodeUserModel.zh.md), [EdgeUserModel input data](./EdgeUserModel.zh.md) and [ComboUserModel input data](./ComboUserModel.zh.md) .
Please ensure that the data returned by your processor strictly adheres to the `GraphDataChanges` type definition to ensure that the processor can be smoothly embedded in G6's data processing flow.
## Example
Here we take the implementation of a simple data processing as an example. The purpose of the data processor is to cluster the given node data.
```typescript
const clusteringNodes = (dataAUR = {}, options = {}, graphCore) => {
const { dataAdded = {}, dataUpdated = {}, dataRemoved = {} } = dataAUR;
const handler = (data = {}, options = {}, core) => {
if (!Algorithm?.labelPropagation || !data.nodes?.length) return data;
const nodes = graphCore ? core.getAllNodes() : data.nodes;
const edges = graphCore ? core.getAllEdges() : data.edges;
const clusteredData = Algorithm.labelPropagation({ nodes, edges }, false);
clusteredData.clusters.forEach((cluster, i) => {
cluster.nodes.forEach((node) => {
node.data.cluster = `c${i}`;
});
});
return data;
};
return {
dataAdded: handler(dataAdded, options, graphCore),
dataUpdated: handler(dataUpdated, options, graphCore),
dataRemoved: dataRemoved || {},
};
};
const ExtGraph = extend(Graph, {
transforms: {
'clustering-node': clusteringNodes,
},
});
const graph = new ExtGraph({
// ...other configuration
transforms: [
'map-node-size',
{
type: 'clustering-node',
activeLifecycle: ['read', 'changeData'],
},
],
});
```

80
packages/site/docs/manual/customize/transformExtension.zh.md
View File

@ -3,4 +3,82 @@ title: 自定义数据处理
order: 4
---
文档正在开发中...
> 在进行自定义数据处理器之前，请确保您已经熟悉了 G6 数据流和数据结构。相关内容可以参考[数据介绍文档](../../apis/data/DataIntro.zh.md)。
自定义数据处理器本质上是一个函数，它负责将用户数据 (user data) 转换为 G6 内部可以理解和处理的格式 (inner data)。
**类型**：`CustomDataTransformFn`
```typescript
type CustomDataTransformFn = (
data: GraphDataChanges,
options: Record<string, any>,
graphCore?: GraphCore,
) => GraphDataChanges;
```
`GraphDataChanges` 定义如下：
G6 会根据操作类型，将数据变更自动划分为三个部分：待添加（`dataAdded`）、更新（`dataUpdated`）和删除（`dataRemoved`）数据。
```typescript
type GraphData = {
nodes?: NodeUserModel[];
edges?: EdgeUserModel[];
combos?: ComboUserModel[];
};
type GraphDataChanges = {
dataAdded: GraphData;
dataUpdated: GraphData;
dataRemoved: GraphData;
};
```
其中，输入数据类型参考 [NodeUserModel 输入数据](./NodeUserModel.zh.md)，[EdgeUserModel 输入数据](./EdgeUserModel.zh.md) 和 [ComboUserModel 输入数据](./ComboUserModel.zh.md)。
请确保您的处理器返回的数据严格遵守 `GraphDataChanges` 类型定义，以保证处理器能顺利嵌入 G6 的数据处理流程中。
## 示例
这里以实现一个简单的数据处理为例，该数据处理器目的是对给定的节点数据进行聚类处理。
```typescript
const clusteringNodes = (dataAUR = {}, options = {}, graphCore) => {
const { dataAdded = {}, dataUpdated = {}, dataRemoved = {} } = dataAUR;
const handler = (data = {}, options = {}, core) => {
if (!Algorithm?.labelPropagation || !data.nodes?.length) return data;
const nodes = graphCore ? core.getAllNodes() : data.nodes;
const edges = graphCore ? core.getAllEdges() : data.edges;
const clusteredData = Algorithm.labelPropagation({ nodes, edges }, false);
clusteredData.clusters.forEach((cluster, i) => {
cluster.nodes.forEach((node) => {
node.data.cluster = `c${i}`;
});
});
return data;
};
return {
dataAdded: handler(dataAdded, options, graphCore),
dataUpdated: handler(dataUpdated, options, graphCore),
dataRemoved: dataRemoved || {},
};
};
const ExtGraph = extend(Graph, {
transforms: {
'clustering-node': clusteringNodes,
},
});
const graph = new ExtGraph({
// ...其他配置
transforms: [
'map-node-size',
{
type: 'clustering-node',
activeLifecycle: ['read', 'changeData'],
},
],
});
```