From 15d41fbe942aae74690018112051ef97528c8190 Mon Sep 17 00:00:00 2001 From: yvonneyx <55794321+yvonneyx@users.noreply.github.com> Date: Tue, 21 Nov 2023 14:56:48 +0800 Subject: [PATCH] docs: add docs of custom data tramsformer and theme; format docs of items api (#5169) * docs: add Custom Theme Extension * docs: add custom transform tutorial * docs: format docs of items (nodes, edges, combos) --------- Co-authored-by: yvonneyx --- .../docs/apis/item/combo/CircleCombo.en.md | 16 +- .../docs/apis/item/combo/CircleCombo.zh.md | 18 +- .../docs/apis/item/combo/CustomCombo.en.md | 165 ++++++++---- .../docs/apis/item/combo/CustomCombo.zh.md | 168 ++++++++---- .../site/docs/apis/item/combo/RectCombo.en.md | 22 +- .../site/docs/apis/item/combo/RectCombo.zh.md | 22 +- .../site/docs/apis/item/edge/CubicEdge.en.md | 16 +- .../site/docs/apis/item/edge/CubicEdge.zh.md | 18 +- .../apis/item/edge/CubicHorizontalEdge.en.md | 16 +- .../apis/item/edge/CubicHorizontalEdge.zh.md | 18 +- .../apis/item/edge/CubicVerticalEdge.en.md | 16 +- .../apis/item/edge/CubicVerticalEdge.zh.md | 16 +- .../site/docs/apis/item/edge/CustomEdge.en.md | 110 ++++++-- .../site/docs/apis/item/edge/CustomEdge.zh.md | 110 ++++++-- .../site/docs/apis/item/edge/EdgeIntro.en.md | 15 +- .../site/docs/apis/item/edge/EdgeIntro.zh.md | 15 +- .../site/docs/apis/item/edge/LineEdge.en.md | 6 +- .../site/docs/apis/item/edge/LineEdge.zh.md | 18 +- .../site/docs/apis/item/edge/LoopEdge.en.md | 16 +- .../site/docs/apis/item/edge/LoopEdge.zh.md | 16 +- .../docs/apis/item/edge/PolylineEdge.en.md | 18 +- .../docs/apis/item/edge/PolylineEdge.zh.md | 16 +- .../docs/apis/item/edge/QuadraticEdge.en.md | 16 +- .../docs/apis/item/edge/QuadraticEdge.zh.md | 16 +- .../site/docs/apis/item/node/CircleNode.en.md | 16 +- .../site/docs/apis/item/node/CircleNode.zh.md | 22 +- .../site/docs/apis/item/node/CubeNode.en.md | 16 +- .../site/docs/apis/item/node/CubeNode.zh.md | 16 +- .../site/docs/apis/item/node/CustomNode.en.md | 122 +++++++-- .../site/docs/apis/item/node/CustomNode.zh.md | 120 +++++++-- .../docs/apis/item/node/CustomNode3D.en.md | 189 +++++++++---- .../docs/apis/item/node/CustomNode3D.zh.md | 168 ++++++++---- .../docs/apis/item/node/DiamondNode.en.md | 16 +- .../docs/apis/item/node/DiamondNode.zh.md | 16 +- .../site/docs/apis/item/node/DonutNode.en.md | 68 +++-- .../site/docs/apis/item/node/DonutNode.zh.md | 68 +++-- .../docs/apis/item/node/EllipseNode.en.md | 16 +- .../docs/apis/item/node/EllipseNode.zh.md | 16 +- .../docs/apis/item/node/HexagonNode.en.md | 16 +- .../docs/apis/item/node/HexagonNode.zh.md | 16 +- .../site/docs/apis/item/node/ImageNode.en.md | 18 +- .../site/docs/apis/item/node/ImageNode.zh.md | 17 +- .../docs/apis/item/node/ModelRectNode.en.md | 26 +- .../docs/apis/item/node/ModelRectNode.zh.md | 26 +- .../site/docs/apis/item/node/RectNode.en.md | 16 +- .../site/docs/apis/item/node/RectNode.zh.md | 16 +- .../site/docs/apis/item/node/SphereNode.en.md | 16 +- .../site/docs/apis/item/node/SphereNode.zh.md | 16 +- .../site/docs/apis/item/node/StarNode.en.md | 16 +- .../site/docs/apis/item/node/StarNode.zh.md | 16 +- .../docs/apis/item/node/TriangleNode.en.md | 17 +- .../docs/apis/item/node/TriangleNode.zh.md | 16 +- packages/site/docs/common/ArrowStyle.en.md | 6 +- packages/site/docs/common/ArrowStyle.zh.md | 10 +- .../site/docs/common/ComboShapeStyles.en.md | 250 +++++++++++------- .../site/docs/common/ComboShapeStyles.zh.md | 237 ++++++++++------- .../site/docs/common/EdgeShapeStyles.en.md | 68 +++-- .../site/docs/common/EdgeShapeStyles.zh.md | 66 +++-- .../site/docs/common/NodeShapeStyles.en.md | 247 +++++++++-------- .../site/docs/common/NodeShapeStyles.zh.md | 126 +++++---- .../manual/customize/themeExtension.en.md | 134 +++++++++- .../manual/customize/themeExtension.zh.md | 134 +++++++++- .../manual/customize/transformExtension.en.md | 80 +++++- .../manual/customize/transformExtension.zh.md | 80 +++++- 64 files changed, 2567 insertions(+), 871 deletions(-) diff --git a/packages/site/docs/apis/item/combo/CircleCombo.en.md b/packages/site/docs/apis/item/combo/CircleCombo.en.md index 642e2dc5bf..772cb0fe13 100644 --- a/packages/site/docs/apis/item/combo/CircleCombo.en.md +++ b/packages/site/docs/apis/item/combo/CircleCombo.en.md @@ -9,7 +9,11 @@ This article demonstrates the configuration options for Circle Combo. [Circle Co ## keyShape -- **Type**: `KeyShapeStyle` +**Type**: `KeyShapeStyle` + +
+ +KeyShapeStyle ```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**: +
+ +**Default**:`object` + +
+ +object ```json { @@ -28,6 +38,6 @@ The related circle style can be referred to in [`CircleStyleProps`](../shape/Cir } ``` -- **Required**: No +
diff --git a/packages/site/docs/apis/item/combo/CircleCombo.zh.md b/packages/site/docs/apis/item/combo/CircleCombo.zh.md index 6d90db91e2..9a0ddc6d5e 100644 --- a/packages/site/docs/apis/item/combo/CircleCombo.zh.md +++ b/packages/site/docs/apis/item/combo/CircleCombo.zh.md @@ -9,7 +9,11 @@ order: 1 ## keyShape -- **类型**：`KeyShapeStyle` +**类型**：`KeyShapeStyle` + +
+ +KeyShapeStyle ```typescript type KeyShapeStyle = StyleProps & { @@ -20,7 +24,13 @@ type KeyShapeStyle = StyleProps & { 其中，相关的图形样式参考 [Circle 图形样式](../shape/CircleStyleProps.zh.md)。 -- **默认值**： +
+ +**默认值**：`object` + +
+ +object ```json { @@ -28,6 +38,8 @@ type KeyShapeStyle = StyleProps & { } ``` -- **是否必须**：否 +
+ +关键图形 diff --git a/packages/site/docs/apis/item/combo/CustomCombo.en.md b/packages/site/docs/apis/item/combo/CustomCombo.en.md index 0456b68cb9..3b9e419b3a 100644 --- a/packages/site/docs/apis/item/combo/CustomCombo.en.md +++ b/packages/site/docs/apis/item/combo/CustomCombo.en.md @@ -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 +
+ +draw + +```typescript type draw = ( displayModel: ComboDisplayModel, diffData?: { previous: ComboUserModelData; current: ComboUserModelData }, @@ -67,75 +72,111 @@ type draw = ( }; ``` -**Description**: Draw all shapes associated with a Combo. +
+ +Draw all shapes associated with a Combo. ### drawKeyShape -**Type**: +**Type**: `drawKeyShape` -```ts +
+ +drawKeyShape + +```typescript type drawKeyShape = (model: ComboDisplayModel, shapeMap: CombohapeMap) => DisplayObject; ``` -**Description**: Draw the key shape +
+ +Draw the key shape ### drawLabelShape -**类型**： +**Type**: `drawLabelShape` -```ts +
+ +drawLabelShape + +```typescript type drawLabelShape = ( model: ComboDisplayModel | ComboDisplayModel, shapeMap: CombohapeMap | CombohapeMap, ) => DisplayObject; ``` -**说明**：Draw the label shape of Combo. +
+ +Draw the label shape of Combo. ### drawLabelBackgroundShape -**类型**： +**Type**: `drawLabelBackgroundShape` -```ts +
+ +drawLabelBackgroundShape + +```typescript type drawLabelBackgroundShape = ( model: ComboDisplayModel | ComboDisplayModel, shapeMap: CombohapeMap | CombohapeMap, ) => DisplayObject; ``` -**说明**：Draw the label background shape of Combo. +
+ +Draw the label background shape of Combo. ### drawIconShape -**类型**： +**Type**: `drawIconShape` -```ts +
+ +drawIconShape + +```typescript type drawIconShape = ( model: ComboDisplayModel | ComboDisplayModel, shapeMap: CombohapeMap | CombohapeMap, ) => DisplayObject; ``` -**说明**：Draw the icon shape of Combo. +
+ +Draw the icon shape of Combo. ### drawHaloShape -**类型**： +**Type**: `drawHaloShape` -```ts +
+ +drawHaloShape + +```typescript type drawHaloShape = ( model: ComboDisplayModel | ComboDisplayModel, shapeMap: CombohapeMap | CombohapeMap, ) => DisplayObject; ``` -**说明**：Draw the halo shape of Combo. +
+ +Draw the halo shape of Combo. ### drawAnchorShapes -**类型**： +**Type**: `drawAnchorShapes` -```ts +
+ +drawAnchorShapes + +```typescript type drawAnchorShapes = ( model: ComboDisplayModel | ComboDisplayModel, shapeMap: CombohapeMap | CombohapeMap, @@ -144,13 +185,19 @@ type drawAnchorShapes = ( }; ``` -**说明**：Draw the anchors shape of Combo. +
+ +Draw the anchors shape of Combo. ### drawBadgeShapes -**类型**： +**Type**: `drawBadgeShapes` -```ts +
+ +drawBadgeShapes + +```typescript type drawBadgeShapes = ( model: ComboDisplayModel | ComboDisplayModel, shapeMap: CombohapeMap | CombohapeMap, @@ -159,26 +206,38 @@ type drawBadgeShapes = ( }; ``` -**说明**：Draw the badges shape of Combo. +
+ +Draw the badges shape of Combo. ### drawOtherShapes -**类型**： +**Type**: `drawOtherShapes` -```ts +
+ +drawOtherShapes + +```typescript type drawOtherShapes = ( model: ComboDisplayModel | ComboDisplayModel, shapeMap: CombohapeMap | CombohapeMap, ) => { [id: string]: DisplayObject }; ``` -**说明**：Draw other shapes(such as preRect,stateIcon) of Combo. +
+ +Draw other shapes(such as preRect,stateIcon) of Combo. ### afterDraw -**类型**： +**Type**: `afterDraw` -```ts +
+ +afterDraw + +```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. +
+ +Perform additional drawing operations or add custom shapes after drawing Combo. ### getMergedStyles -**类型**： +**Type**: `getMergedStyles` -```ts +
+ +getMergedStyles + +```typescript type getMergedStyles = (model: EdgeDisplayModel) => EdgeDisplayModel; ``` -**说明**：Merge style. +
+ +Merge style. ## Member Methods @@ -204,9 +271,13 @@ Inherited shapes provide the following method calls ### upsertShape -**Type**: +**Type**: `upsertShape` -```ts +
+ +upsertShape + +```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. +
+ +Create (if not existing in shapeMap) or update a shape based on configuration. diff --git a/packages/site/docs/apis/item/combo/CustomCombo.zh.md b/packages/site/docs/apis/item/combo/CustomCombo.zh.md index c82c6f2958..98573968f8 100644 --- a/packages/site/docs/apis/item/combo/CustomCombo.zh.md +++ b/packages/site/docs/apis/item/combo/CustomCombo.zh.md @@ -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 +
+ +draw + +```typescript type draw = ( displayModel: ComboDisplayModel, diffData?: { previous: ComboUserModelData; current: ComboUserModelData }, @@ -70,75 +72,111 @@ type draw = ( }; ``` -**说明**：用于绘制与 Combo 相关的所有图形 +
+ +用于绘制与 Combo 相关的所有图形 ### drawKeyShape -**类型**： +**类型**：`drawKeyShape` -```ts +
+ +drawKeyShape + +```typescript type drawKeyShape = (model: NodeDisplayModel, shapeMap: NodeShapeMap) => DisplayObject; ``` -**说明**：用于绘制关键图形 +
+ +用于绘制关键图形 ### drawLabelShape -**类型**： +**类型**：`drawLabelShape` -```ts +
+ +drawLabelShape + +```typescript type drawLabelShape = ( model: NodeDisplayModel | ComboDisplayModel, shapeMap: NodeShapeMap | ComboShapeMap, ) => DisplayObject; ``` -**说明**：绘制 Combo 的文本标签图形 +
+ +绘制 Combo 的文本标签图形 ### drawLabelBackgroundShape -**类型**： +**类型**：`drawLabelBackgroundShape` -```ts +
+ +drawLabelBackgroundShape + +```typescript type drawLabelBackgroundShape = ( model: NodeDisplayModel | ComboDisplayModel, shapeMap: NodeShapeMap | ComboShapeMap, ) => DisplayObject; ``` -**说明**：绘制 Combo 的文本的背景图形 +
+ +绘制 Combo 的文本的背景图形 ### drawIconShape -**类型**： +**类型**：`drawIconShape` -```ts +
+ +drawIconShape + +```typescript type drawIconShape = ( model: NodeDisplayModel | ComboDisplayModel, shapeMap: NodeShapeMap | ComboShapeMap, ) => DisplayObject; ``` -**说明**：绘制 Combo 的图标图形 +
+ +绘制 Combo 的图标图形 ### drawHaloShape -**类型**： +**类型**：`drawHaloShape` -```ts +
+ +drawHaloShape + +```typescript type drawHaloShape = ( model: NodeDisplayModel | ComboDisplayModel, shapeMap: NodeShapeMap | ComboShapeMap, ) => DisplayObject; ``` -**说明**：绘制 Combo 的光晕图形 +
+ +绘制 Combo 的光晕图形 ### drawAnchorShapes -**类型**： +**类型**：`drawAnchorShapes` -```ts +
+ +drawAnchorShapes + +```typescript type drawAnchorShapes = ( model: NodeDisplayModel | ComboDisplayModel, shapeMap: NodeShapeMap | ComboShapeMap, @@ -147,13 +185,19 @@ type drawAnchorShapes = ( }; ``` -**说明**：绘制 Combo 的锚点图形 +
+ +绘制 Combo 的锚点图形 ### drawBadgeShapes -**类型**： +**类型**：`drawBadgeShapes` -```ts +
+ +drawBadgeShapes + +```typescript type drawBadgeShapes = ( model: NodeDisplayModel | ComboDisplayModel, shapeMap: NodeShapeMap | ComboShapeMap, @@ -162,26 +206,38 @@ type drawBadgeShapes = ( }; ``` -**说明**：绘制 Combo 的徽标图形 +
+ +绘制 Combo 的徽标图形 ### drawOtherShapes -**类型**： +**类型**：`drawOtherShapes` -```ts +
+ +drawOtherShapes + +```typescript type drawOtherShapes = ( model: NodeDisplayModel | ComboDisplayModel, shapeMap: NodeShapeMap | ComboShapeMap, ) => { [id: string]: DisplayObject }; ``` -**说明**：绘制边的其他图形。自定义边中的其他图形应当定义和配置在 `otherShapes` 中。 +
+ +绘制边的其他图形。自定义边中的其他图形应当定义和配置在 `otherShapes` 中。 ### afterDraw -**类型**： +**类型**：`afterDraw` -```ts +
+ +afterDraw + +```typescript type afterDraw = ( model: EdgeDisplayModel, shapeMap: { [shapeId: string]: DisplayObject }, @@ -189,17 +245,25 @@ type afterDraw = ( ) => { [otherShapeId: string]: DisplayObject }; ``` -**说明**：绘制后执行其他绘图操作或添加自定义形状 +
+ +绘制后执行其他绘图操作或添加自定义形状 ### getMergedStyles -**类型**： +**类型**：`getMergedStyles` -```ts +
+ +getMergedStyles + +```typescript type getMergedStyles = (model: EdgeDisplayModel) => EdgeDisplayModel; ``` -**说明**：将 display model 数据中定义的样式与默认样式和主题样式合并 +
+ +将 display model 数据中定义的样式与默认样式和主题样式合并 ## 成员方法 @@ -207,9 +271,13 @@ type getMergedStyles = (model: EdgeDisplayModel) => EdgeDisplayModel; ### upsertShape -**类型**： +**类型**：`upsertShape` -```ts +
+ +upsertShape + +```typescript type upsertShape = ( type: SHAPE_TYPE | SHAPE_TYPE_3D, id: string, @@ -219,4 +287,6 @@ type upsertShape = ( ) => DisplayObject; ``` -**说明**：根据配置创建（如果在 shapeMap 中不存在）或更新形状 +
+ +根据配置创建（如果在 shapeMap 中不存在）或更新形状 diff --git a/packages/site/docs/apis/item/combo/RectCombo.en.md b/packages/site/docs/apis/item/combo/RectCombo.en.md index 37b54733e7..5d65eb9737 100644 --- a/packages/site/docs/apis/item/combo/RectCombo.en.md +++ b/packages/site/docs/apis/item/combo/RectCombo.en.md @@ -9,7 +9,11 @@ This article demonstrates the configuration options for Rect Combo. [Rect Combo ## keyShape -- **Type**: `KeyShapeStyle` +**Type**: `KeyShapeStyle` + +
+ +KeyShapeStyle ```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**: +
+ +**Default**:`object` + +
+ +object ```json { "width": "32", "height": "32" } -``` -- **Required**: No +``` +
+ + diff --git a/packages/site/docs/apis/item/combo/RectCombo.zh.md b/packages/site/docs/apis/item/combo/RectCombo.zh.md index df43638dd2..11d2b48d6a 100644 --- a/packages/site/docs/apis/item/combo/RectCombo.zh.md +++ b/packages/site/docs/apis/item/combo/RectCombo.zh.md @@ -9,7 +9,11 @@ order: 2 ## keyShape -- **类型**：`KeyShapeStyle` +**类型**：`KeyShapeStyle` + +
+ +KeyShapeStyle ```typescript type KeyShapeStyle = StyleProps & @@ -23,19 +27,29 @@ type KeyShapeStyle = StyleProps & */ height: number, }; + ``` + 其中，相关的图形样式参考 [Rect 图形样式](../shape/RectStyleProps.zh.md)。 -- **默认值**： +
+ +**默认值**：`object` + +
+ +object ```json { "width": "32", "height": "32" } -``` -- **是否必须**：否 +``` +
+ + diff --git a/packages/site/docs/apis/item/edge/CubicEdge.en.md b/packages/site/docs/apis/item/edge/CubicEdge.en.md index 3bdb52eb4d..1f39405fde 100644 --- a/packages/site/docs/apis/item/edge/CubicEdge.en.md +++ b/packages/site/docs/apis/item/edge/CubicEdge.en.md @@ -9,7 +9,11 @@ This article presents the general configuration options for drawing a Cubic thir ## keyShape -- **Type**: `KeyShapeStyle` +**Type**: `KeyShapeStyle` + +
+ +KeyShapeStyle ```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**: +
+ +**Default**:`object` + +
+ +object ```json { @@ -48,6 +58,6 @@ For more detailed style configuration, refer to [Path Graphic Style](../shape/Pa } ``` -- **Required**: No +
diff --git a/packages/site/docs/apis/item/edge/CubicEdge.zh.md b/packages/site/docs/apis/item/edge/CubicEdge.zh.md index cc051e2a9f..31b80c2b11 100644 --- a/packages/site/docs/apis/item/edge/CubicEdge.zh.md +++ b/packages/site/docs/apis/item/edge/CubicEdge.zh.md @@ -9,7 +9,11 @@ order: 4 ## keyShape -- **类型**：`KeyShapeStyle` +**类型**：`KeyShapeStyle` + +
+ +KeyShapeStyle ```typescript type Point = { @@ -39,7 +43,13 @@ type KeyShapeStyle = PathStyleProps & 其中，相关的图形样式参考 [Path 图形样式](../shape/PathStyleProps.zh.md)。 -- **默认值**： +
+ +**默认值**：`object` + +
+ +object ```json { @@ -48,8 +58,6 @@ type KeyShapeStyle = PathStyleProps & } ``` -- **是否必须**：否 +
- -- [PathStyleProps](../../shape/PathStyleProps.zh.md) diff --git a/packages/site/docs/apis/item/edge/CubicHorizontalEdge.en.md b/packages/site/docs/apis/item/edge/CubicHorizontalEdge.en.md index 56e917c47f..fd780eb2d9 100644 --- a/packages/site/docs/apis/item/edge/CubicHorizontalEdge.en.md +++ b/packages/site/docs/apis/item/edge/CubicHorizontalEdge.en.md @@ -9,7 +9,11 @@ This article presents the configuration options for drawing a Cubic Horizontal B ## keyShape -- **Type**: `KeyShapeStyle` +**Type**: `KeyShapeStyle` + +
+ +KeyShapeStyle ```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**: +
+ +**Default**:`object` + +
+ +object ```json { @@ -48,7 +58,7 @@ For more detailed style configuration, refer to [Path Graphic Style](../shape/Pa } ``` -- **Required**: No +
diff --git a/packages/site/docs/apis/item/edge/CubicHorizontalEdge.zh.md b/packages/site/docs/apis/item/edge/CubicHorizontalEdge.zh.md index efd2492d3e..0c2b92a11c 100644 --- a/packages/site/docs/apis/item/edge/CubicHorizontalEdge.zh.md +++ b/packages/site/docs/apis/item/edge/CubicHorizontalEdge.zh.md @@ -9,7 +9,11 @@ order: 5 ## keyShape -- **类型**：`KeyShapeStyle` +**类型**：`KeyShapeStyle` + +
+ +KeyShapeStyle ```typescript type Point = { @@ -39,7 +43,13 @@ type KeyShapeStyle = PathStyleProps & 其中，相关的图形样式参考 [Path 图形样式](../shape/PathStyleProps.zh.md)。 -- **默认值**： +
+ +**默认值**：`object` + +
+ +object ```json { @@ -48,8 +58,6 @@ type KeyShapeStyle = PathStyleProps & } ``` -- **是否必须**：否 +
- -- [PathStyleProps](../../shape/PathStyleProps.zh.md) diff --git a/packages/site/docs/apis/item/edge/CubicVerticalEdge.en.md b/packages/site/docs/apis/item/edge/CubicVerticalEdge.en.md index 9fa682623e..7383605253 100644 --- a/packages/site/docs/apis/item/edge/CubicVerticalEdge.en.md +++ b/packages/site/docs/apis/item/edge/CubicVerticalEdge.en.md @@ -9,7 +9,11 @@ This article presents the configuration options for drawing a Cubic Vertical Bé ## keyShape -- **Type**: `KeyShapeStyle` +**Type**: `KeyShapeStyle` + +
+ +KeyShapeStyle ```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**: +
+ +**Default**:`object` + +
+ +object ```json { @@ -48,7 +58,7 @@ For more detailed style configuration, refer to [Path Graphic Style](../shape/Pa } ``` -- **Required**: No +
diff --git a/packages/site/docs/apis/item/edge/CubicVerticalEdge.zh.md b/packages/site/docs/apis/item/edge/CubicVerticalEdge.zh.md index 7d4ba1021a..a41e879300 100644 --- a/packages/site/docs/apis/item/edge/CubicVerticalEdge.zh.md +++ b/packages/site/docs/apis/item/edge/CubicVerticalEdge.zh.md @@ -9,7 +9,11 @@ order: 6 ## keyShape -- **类型**：`KeyShapeStyle` +**类型**：`KeyShapeStyle` + +
+ +KeyShapeStyle ```typescript type Point = { @@ -39,7 +43,13 @@ type KeyShapeStyle = PathStyleProps & 其中，相关的图形样式参考 [Path 图形样式](../shape/PathStyleProps.zh.md)。 -- **默认值**： +
+ +**默认值**：`object` + +
+ +object ```json { @@ -48,6 +58,6 @@ type KeyShapeStyle = PathStyleProps & } ``` -- **是否必须**：否 +
diff --git a/packages/site/docs/apis/item/edge/CustomEdge.en.md b/packages/site/docs/apis/item/edge/CustomEdge.en.md index 95e40a1541..664aa5f1e7 100644 --- a/packages/site/docs/apis/item/edge/CustomEdge.en.md +++ b/packages/site/docs/apis/item/edge/CustomEdge.en.md @@ -51,7 +51,11 @@ const graph = new ExtGraph({ ### draw -**Type**: +**Type**: `draw` + +
+ +draw ```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. +
+ +Draw all elements related to the edge. ### drawKeyShape -**Type**: +**Type**: `drawKeyShape` + +
+ +drawKeyShape ```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. +
+ +Draw the key shape of the edge. ### drawLabelShape -**Type**: +**Type**: `drawLabelShape` + +
+ +drawLabelShape ```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. +
+ +Draw the label shape of the edge. ### drawLabelBackgroundShape -**Type**: +**Type**: `drawLabelBackgroundShape` + +
+ +drawLabelBackgroundShape ```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. +
+ +Draw the label background shape of the edge. ### drawIconShape -**Type**: +**Type**: `drawIconShape` + +
+ +drawIconShape ```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. +
+ +Draw the icon shape of the edge. ### drawHaloShape -**Type**: +**Type**: `drawHaloShape` + +
+ +drawHaloShape ```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. +
+ +Draw the halo shape of the edge. ### drawOtherShapes -**Type**: +**Type**: `drawOtherShapes` + +
+ +drawOtherShapes ```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`. +
+ +Draws other shapes of the edge. Other shapes in a custom edge should be defined and configured in `otherShapes`. ### afterDraw -**Type**: +**Type**: `afterDraw` + +
+ +afterDraw ```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. +
+ +Perform additional drawing operations or add custom shapes after drawing edge. ### getMergedStyles -**Type**: +**Type**: `getMergedStyles` + +
+ +getMergedStyles ```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 数据中定义的样式与边的默认和主题样式合并 +
+ +将 display model 数据中定义的样式与边的默认和主题样式合并 ## Member Methods @@ -182,7 +236,11 @@ Inherited shapes provide the following method calls ### upsertShape -**Type**: +**Type**: `upsertShape` + +
+ +upsertShape ```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. +
+ +Create (if not existing in shapeMap) or update a shape based on configuration. ### upsertArrow -**Type**: +**Type**: `upsertArrow` + +
+ +upsertArrow ```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. +
+ +Add or update an arrow marker at the specified position on the edge. diff --git a/packages/site/docs/apis/item/edge/CustomEdge.zh.md b/packages/site/docs/apis/item/edge/CustomEdge.zh.md index 01b919248e..978fb2063b 100644 --- a/packages/site/docs/apis/item/edge/CustomEdge.zh.md +++ b/packages/site/docs/apis/item/edge/CustomEdge.zh.md @@ -51,7 +51,11 @@ const graph = new ExtGraph({ ### draw -**类型**： +**类型**：`draw` + +
+ +draw ```typescript type draw = ( @@ -69,11 +73,17 @@ type draw = ( 其中，相关的数据类型定义参考 [EdgeDisplayModel 渲染数据](../../data/EdgeDisplayModel.zh.md)。 -**说明**：用于绘制与边相关的所有图形 +
+ +用于绘制与边相关的所有图形 ### drawKeyShape -**类型**： +**类型**：`drawKeyShape` + +
+ +drawKeyShape ```typescript type drawKeyShape = ( @@ -86,11 +96,17 @@ type drawKeyShape = ( 其中，相关的数据类型定义参考 [EdgeDisplayModel 渲染数据](../../data/EdgeDisplayModel.zh.md)。 -**说明**：用于绘制关键图形 +
+ +用于绘制关键图形 ### drawLabelShape -**类型**： +**类型**：`drawLabelShape` + +
+ +drawLabelShape ```typescript type drawLabelShape = (model: EdgeDisplayModel, shapeMap: EdgeShapeMap) => DisplayObject; @@ -98,11 +114,17 @@ type drawLabelShape = (model: EdgeDisplayModel, shapeMap: EdgeShapeMap) => Displ 其中，相关的数据类型定义参考 [EdgeDisplayModel 渲染数据](../../data/EdgeDisplayModel.zh.md)。 -**说明**：绘制边的标签图形 +
+ +绘制边的标签图形 ### drawLabelBackgroundShape -**类型**： +**类型**：`drawLabelBackgroundShape` + +
+ +drawLabelBackgroundShape ```typescript type drawLabelBackgroundShape = (model: EdgeDisplayModel, shapeMap: EdgeShapeMap) => DisplayObject; @@ -110,11 +132,17 @@ type drawLabelBackgroundShape = (model: EdgeDisplayModel, shapeMap: EdgeShapeMap 其中，相关的数据类型定义参考 [EdgeDisplayModel 渲染数据](../../data/EdgeDisplayModel.zh.md)。 -**说明**：绘制边的文本的背景图形 +
+ +绘制边的文本的背景图形 ### drawIconShape -**类型**： +**类型**：`drawIconShape` + +
+ +drawIconShape ```typescript type drawIconShape = (model: EdgeDisplayModel, shapeMap: EdgeShapeMap) => DisplayObject; @@ -122,11 +150,17 @@ type drawIconShape = (model: EdgeDisplayModel, shapeMap: EdgeShapeMap) => Displa 其中，相关的数据类型定义参考 [EdgeDisplayModel 渲染数据](../../data/EdgeDisplayModel.zh.md)。 -**说明**：绘制边的图标图形 +
+ +绘制边的图标图形 ### drawHaloShape -**类型**： +**类型**：`drawHaloShape` + +
+ +drawHaloShape ```typescript type drawHaloShape = (model: EdgeDisplayModel, shapeMap: EdgeShapeMap) => DisplayObject; @@ -134,11 +168,17 @@ type drawHaloShape = (model: EdgeDisplayModel, shapeMap: EdgeShapeMap) => Displa 其中，相关的数据类型定义参考 [EdgeDisplayModel 渲染数据](../../data/EdgeDisplayModel.zh.md)。 -**说明**：绘制边的光晕图形 +
+ +绘制边的光晕图形 ### drawOtherShapes -**类型**： +**类型**：`drawOtherShapes` + +
+ +drawOtherShapes ```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` 中。 +
+ +绘制边的其他图形。自定义边中的其他图形应当定义和配置在 `otherShapes` 中。 ### afterDraw -**类型**： +**类型**：`afterDraw` + +
+ +afterDraw ```typescript type afterDraw = ( @@ -162,11 +208,17 @@ type afterDraw = ( 其中，相关的数据类型定义参考 [EdgeDisplayModel 渲染数据](../../data/EdgeDisplayModel.zh.md)。 -**说明**：绘制边后执行其他绘图操作或添加自定义形状 +
+ +绘制边后执行其他绘图操作或添加自定义形状 ### getMergedStyles -**类型**： +**类型**：`getMergedStyles` + +
+ +getMergedStyles ```typescript type getMergedStyles = (model: EdgeDisplayModel) => EdgeDisplayModel; @@ -174,7 +226,9 @@ type getMergedStyles = (model: EdgeDisplayModel) => EdgeDisplayModel; 其中，相关的数据类型定义参考 [EdgeDisplayModel 渲染数据](../../data/EdgeDisplayModel.zh.md)。 -**说明**：将 display model 数据中定义的样式与边的默认和主题样式合并 +
+ +将 display model 数据中定义的样式与边的默认和主题样式合并 ## 成员方法 @@ -182,7 +236,11 @@ type getMergedStyles = (model: EdgeDisplayModel) => EdgeDisplayModel; ### upsertShape -**类型**： +**类型**：`upsertShape` + +
+ +upsertShape ```typescript type SHAPE_TYPE = 'line' | 'path'; @@ -198,11 +256,17 @@ type upsertShape = ( 其中，相关的数据类型定义参考 [EdgeDisplayModel 渲染数据](../../data/EdgeDisplayModel.zh.md)。 -**说明**：根据配置创建（如果在 shapeMap 中不存在）或更新形状 +
+ +根据配置创建（如果在 shapeMap 中不存在）或更新形状 ### upsertArrow -**类型**： +**类型**：`upsertArrow` + +
+ +upsertArrow ```typescript type upsertArrow = ( @@ -216,4 +280,6 @@ type upsertArrow = ( 其中，相关的数据类型定义参考 [EdgeDisplayModel 渲染数据](../../data/EdgeDisplayModel.zh.md)。 -**说明**：在边的指定位置添加或更新箭头标记 +
+ +在边的指定位置添加或更新箭头标记 diff --git a/packages/site/docs/apis/item/edge/EdgeIntro.en.md b/packages/site/docs/apis/item/edge/EdgeIntro.en.md index 8eb79e05f0..46ad0ded1c 100644 --- a/packages/site/docs/apis/item/edge/EdgeIntro.en.md +++ b/packages/site/docs/apis/item/edge/EdgeIntro.en.md @@ -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 + */ }, }); ``` diff --git a/packages/site/docs/apis/item/edge/EdgeIntro.zh.md b/packages/site/docs/apis/item/edge/EdgeIntro.zh.md index 7f02c197df..b5ebbe95de 100644 --- a/packages/site/docs/apis/item/edge/EdgeIntro.zh.md +++ b/packages/site/docs/apis/item/edge/EdgeIntro.zh.md @@ -21,15 +21,16 @@ const Graph = extend(BaseGraph, { */ const graph = new Graph({ /** - * ...其他配置项 - */ + * ...其他配置项 + */ edge: { - type: 'cubic-edge', /** - * type 与注册时命名的 key 一致 - */ + type: 'cubic-edge' /** - * ... 边的其他配置项详见具体边配置 - */ + * type 与注册时命名的 key 一致 + */, + /** + * ... 边的其他配置项详见具体边配置 + */ }, }); ``` diff --git a/packages/site/docs/apis/item/edge/LineEdge.en.md b/packages/site/docs/apis/item/edge/LineEdge.en.md index efe4de7ba1..c2011d169d 100644 --- a/packages/site/docs/apis/item/edge/LineEdge.en.md +++ b/packages/site/docs/apis/item/edge/LineEdge.en.md @@ -9,14 +9,12 @@ This article presents the configuration options for Line edges. [Line Edge DEMO] ## keyShape -- **Type**: `LineStyleProps & ArrowProps` +**Type**: `LineStyleProps & ArrowProps` For more detailed style configuration, refer to [Line Graphic Style](../shape/LineStyleProps.en.md). -- **Default**: undefined - -- **Required**: No +**Default**: undefined diff --git a/packages/site/docs/apis/item/edge/LineEdge.zh.md b/packages/site/docs/apis/item/edge/LineEdge.zh.md index 6a5d1c1359..6899ff3393 100644 --- a/packages/site/docs/apis/item/edge/LineEdge.zh.md +++ b/packages/site/docs/apis/item/edge/LineEdge.zh.md @@ -9,14 +9,24 @@ order: 1 ## keyShape -- **类型**：`LineStyleProps & ArrowProps` +**类型**：`KeyShapeStyle` - +
+ +KeyShapeStyle + +```typescript +type KeyShapeStyle = LineStyleProps & ArrowProps; +``` 其中，相关的图形样式参考 [Line 图形样式](../shape/LineStyleProps.zh.md)。 -- **默认值**：undefined + -- **是否必须**：否 +
+ +**默认值**：undefined + +关键图形 diff --git a/packages/site/docs/apis/item/edge/LoopEdge.en.md b/packages/site/docs/apis/item/edge/LoopEdge.en.md index 1a37163418..a393363be9 100644 --- a/packages/site/docs/apis/item/edge/LoopEdge.en.md +++ b/packages/site/docs/apis/item/edge/LoopEdge.en.md @@ -9,7 +9,11 @@ This article presents the configuration options for Loop self-loop edges. [Loop ## keyShape -- **Type**: `KeyShapeStyle` +**Type**: `KeyShapeStyle` + +
+ +KeyShapeStyle ```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**: +
+ +**Default**:`object` + +
+ +object ```json { @@ -59,6 +69,6 @@ For more detailed style configuration, refer to [Path Graphic Style](../shape/Pa } ``` -- **Required**: No +
diff --git a/packages/site/docs/apis/item/edge/LoopEdge.zh.md b/packages/site/docs/apis/item/edge/LoopEdge.zh.md index 4ac3fe0e76..3fd44bbf81 100644 --- a/packages/site/docs/apis/item/edge/LoopEdge.zh.md +++ b/packages/site/docs/apis/item/edge/LoopEdge.zh.md @@ -9,7 +9,11 @@ order: 7 ## keyShape -- **类型**：`KeyShapeStyle` +**类型**：`KeyShapeStyle` + +
+ +KeyShapeStyle ```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)。 -- **默认值**： +
+ +**默认值**：`object` + +
+ +object ```json { @@ -59,6 +69,6 @@ type KeyShapeStyle = PathStyleProps & } ``` -- **是否必须**：否 +
diff --git a/packages/site/docs/apis/item/edge/PolylineEdge.en.md b/packages/site/docs/apis/item/edge/PolylineEdge.en.md index e29af9ece3..d44ff73f1a 100644 --- a/packages/site/docs/apis/item/edge/PolylineEdge.en.md +++ b/packages/site/docs/apis/item/edge/PolylineEdge.en.md @@ -13,7 +13,11 @@ This article presents the configuration options for Polyline edges. [Polyline Ed ## keyShape -- **Type**: `KeyShapeStyle` +**Type**: `KeyShapeStyle` + +
+ +KeyShapeStyle ```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**: +
+ +**Default**:`object` + +
+ +object ```json { @@ -51,6 +61,8 @@ For more detailed style configuration, refer to [Path Graphic Style](../shape/Pa } ``` +
+ | 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 - diff --git a/packages/site/docs/apis/item/edge/PolylineEdge.zh.md b/packages/site/docs/apis/item/edge/PolylineEdge.zh.md index 321e86fff0..9a4fe46a5a 100644 --- a/packages/site/docs/apis/item/edge/PolylineEdge.zh.md +++ b/packages/site/docs/apis/item/edge/PolylineEdge.zh.md @@ -13,7 +13,11 @@ order: 2 ## keyShape -- **类型**：`KeyShapeStyle` +**类型**：`KeyShapeStyle` + +
+ +KeyShapeStyle ```typescript type KeyShapeStyle = PathStyleProps & @@ -53,7 +57,13 @@ type KeyShapeStyle = PathStyleProps & 其中，相关的图形样式参考 [Path 图形样式](../shape/PathStyleProps.zh.md)。 -- **默认值**： +
+ +**默认值**：`object` + +
+ +object ```json { @@ -61,6 +71,6 @@ type KeyShapeStyle = PathStyleProps & } ``` -- **是否必须**：否 +
diff --git a/packages/site/docs/apis/item/edge/QuadraticEdge.en.md b/packages/site/docs/apis/item/edge/QuadraticEdge.en.md index 067874770d..b509d268e3 100644 --- a/packages/site/docs/apis/item/edge/QuadraticEdge.en.md +++ b/packages/site/docs/apis/item/edge/QuadraticEdge.en.md @@ -9,7 +9,11 @@ This article presents the configuration options for Quadratic second-order Bézi ## keyShape -- **Type**: `KeyShapeStyle` +**Type**: `KeyShapeStyle` + +
+ +KeyShapeStyle ```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**: +
+ +**Default**:`object` + +
+ +object ```json { @@ -42,6 +52,8 @@ For more detailed style configuration, refer to [Path Graphic Style](../shape/Pa } ``` +
+ - **Required**: 否 diff --git a/packages/site/docs/apis/item/edge/QuadraticEdge.zh.md b/packages/site/docs/apis/item/edge/QuadraticEdge.zh.md index f34cdccdf8..4148774584 100644 --- a/packages/site/docs/apis/item/edge/QuadraticEdge.zh.md +++ b/packages/site/docs/apis/item/edge/QuadraticEdge.zh.md @@ -9,7 +9,11 @@ order: 3 ## keyShape -- **类型**：`KeyShapeStyle` +**类型**：`KeyShapeStyle` + +
+ +KeyShapeStyle ```typescript type KeyShapeStyle = PathStyleProps & @@ -33,7 +37,13 @@ type KeyShapeStyle = PathStyleProps & 其中，相关的图形样式参考 [Path 图形样式](../shape/PathStyleProps.zh.md)。 -- **默认值**： +
+ +**默认值**：`object` + +
+ +object ```json { @@ -42,6 +52,6 @@ type KeyShapeStyle = PathStyleProps & } ``` -- **是否必须**：否 +
diff --git a/packages/site/docs/apis/item/node/CircleNode.en.md b/packages/site/docs/apis/item/node/CircleNode.en.md index 4fc5ca265e..26735a9bf3 100644 --- a/packages/site/docs/apis/item/node/CircleNode.en.md +++ b/packages/site/docs/apis/item/node/CircleNode.en.md @@ -9,7 +9,11 @@ This section details all the configuration options for Circle-shaped nodes. [Cir ## keyShape -- **Type**: `KeyShapeStyle` +**Type**: `KeyShapeStyle` + +
+ +KeyShapeStyle ```typescript type KeyShapeStyle = StyleProps & { @@ -20,7 +24,13 @@ type KeyShapeStyle = StyleProps & { For more detailed style configuration, refer to [Circle](../shape/CircleStyleProps.en.md)。 -- **Default**: +
+ +**Default**:`object` + +
+ +object ```json { @@ -28,6 +38,6 @@ For more detailed style configuration, refer to [Circle](../shape/CircleStylePro } ``` -- **Required**: No +
diff --git a/packages/site/docs/apis/item/node/CircleNode.zh.md b/packages/site/docs/apis/item/node/CircleNode.zh.md index 8a861e9b1d..136ccc24f4 100644 --- a/packages/site/docs/apis/item/node/CircleNode.zh.md +++ b/packages/site/docs/apis/item/node/CircleNode.zh.md @@ -9,25 +9,39 @@ order: 1 ## keyShape -- **类型**：`KeyShapeStyle` +**类型**：`KeyShapeStyle` + +
+ +KeyShapeStyle ```typescript type KeyShapeStyle = StyleProps & { /** 圆的半径 */ r: number; }; + ``` + 其中，相关的图形样式参考 [Circle 图形样式](../shape/CircleStyleProps.zh.md)。 -- **默认值**： +
+ +**默认值**：`object` + +
+ +object ```json { "r": 16 } -``` -- **是否必须**：否 +``` +
+ + diff --git a/packages/site/docs/apis/item/node/CubeNode.en.md b/packages/site/docs/apis/item/node/CubeNode.en.md index 0bfc42a075..9399fd293b 100644 --- a/packages/site/docs/apis/item/node/CubeNode.en.md +++ b/packages/site/docs/apis/item/node/CubeNode.en.md @@ -9,7 +9,11 @@ The following section details the configuration options for Cube (立方体) nod ## keyShape -- **Type**: `KeyShapeStyle` +**Type**: `KeyShapeStyle` + +
+ +KeyShapeStyle ```typescript type KeyShapeStyle = { @@ -40,7 +44,13 @@ type KeyShapeStyle = { }; ``` -- **Default**: +
+ +**Default**:`object` + +
+ +object ```json { @@ -53,6 +63,6 @@ type KeyShapeStyle = { } ``` -- **Required**: No +
diff --git a/packages/site/docs/apis/item/node/CubeNode.zh.md b/packages/site/docs/apis/item/node/CubeNode.zh.md index 4b6102dec5..584134dd37 100644 --- a/packages/site/docs/apis/item/node/CubeNode.zh.md +++ b/packages/site/docs/apis/item/node/CubeNode.zh.md @@ -9,7 +9,11 @@ order: 11 ## keyShape -- **类型**：`KeyShapeStyle` +**类型**：`KeyShapeStyle` + +
+ +KeyShapeStyle ```typescript type KeyShapeStyle = { @@ -40,7 +44,13 @@ type KeyShapeStyle = { }; ``` -- **默认值**： +
+ +**默认值**：`object` + +
+ +object ```json { @@ -53,6 +63,6 @@ type KeyShapeStyle = { } ``` -- **是否必须**：否 +
diff --git a/packages/site/docs/apis/item/node/CustomNode.en.md b/packages/site/docs/apis/item/node/CustomNode.en.md index 7265d7d178..358bb4e546 100644 --- a/packages/site/docs/apis/item/node/CustomNode.en.md +++ b/packages/site/docs/apis/item/node/CustomNode.en.md @@ -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` + +
+ +draw ```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. +
+ +Draw all shapes associated with a node. ### drawKeyShape -**Type**: +**Type**: `drawKeyShape` + +
+ +drawKeyShape ```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 +
+ +Draw the key shape ### drawLabelShape -**Type**： +**Type**: `drawLabelShape` + +
+ +drawLabelShape ```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. +
+ +Draw the label shape of the node. ### drawLabelBackgroundShape -**Type**： +**Type**: `drawLabelBackgroundShape` + +
+ +drawLabelBackgroundShape ```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. +
+ +Draw the label background shape of the node. ### drawIconShape -**Type**： +**Type**: `drawIconShape` + +
+ +drawIconShape ```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. +
+ +Draw the icon shape of the node. ### drawHaloShape -**Type**： +**Type**: `drawHaloShape` + +
+ +drawHaloShape ```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. +
+ +Draw the halo shape of the node. ### drawAnchorShapes -**Type**： +**Type**: `drawAnchorShapes` + +
+ +drawAnchorShapes ```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. +
+ +Draw the anchors shape of the node. ### drawBadgeShapes -**Type**： +**Type**: `drawBadgeShapes` + +
+ +drawBadgeShapes ```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. +
+ +Draw the badges shape of the node. ### drawOtherShapes -**Type**： +**Type**: `drawOtherShapes` + +
+ +drawOtherShapes ```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. +
+ +Draw other shapes(such as preRect,stateIcon) of the node. ### afterDraw -**Type**： +**Type**: `afterDraw` + +
+ +afterDraw ```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. +
+ +Perform additional drawing operations or add custom shapes after drawing node. ### getMergedStyles -**Type**： +**Type**: `getMergedStyles` + +
+ +getMergedStyles ```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. +
+ +Merge style. ## Member Methods @@ -222,7 +288,11 @@ Inherited shapes provide the following method calls ### upsertShape -**Type**: +**Type**: `upsertShape` + +
+ +upsertShape ```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. +
+ +Create (if not existing in shapeMap) or update a shape based on configuration. diff --git a/packages/site/docs/apis/item/node/CustomNode.zh.md b/packages/site/docs/apis/item/node/CustomNode.zh.md index 9677938c16..eb4a080fca 100644 --- a/packages/site/docs/apis/item/node/CustomNode.zh.md +++ b/packages/site/docs/apis/item/node/CustomNode.zh.md @@ -51,7 +51,11 @@ const graph = new ExtGraph({ ### draw -**类型**： +**类型**：`draw` + +
+ +draw ```typescript type draw = ( @@ -67,11 +71,17 @@ type draw = ( 其中，相关的数据类型定义参考 [NodeDisplayModel 渲染数据](../../data/ComboDisplayModel.zh.md) 和 [ComboDisplayModel 渲染数据](../../data/ComboDisplayModel.zh.md)。 -**说明**：用于绘制与节点相关的所有图形 +
+ +用于绘制与节点相关的所有图形 ### drawKeyShape -**类型**： +**类型**：`drawKeyShape` + +
+ +drawKeyShape ```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)。 -**说明**：用于绘制关键图形 +
+ +用于绘制关键图形 ### drawLabelShape -**类型**： +**类型**：`drawLabelShape` + +
+ +drawLabelShape ```typescript type drawLabelShape = ( @@ -94,11 +110,17 @@ type drawLabelShape = ( 其中，相关的数据类型定义参考 [NodeDisplayModel 渲染数据](../../data/ComboDisplayModel.zh.md) 和 [ComboDisplayModel 渲染数据](../../data/ComboDisplayModel.zh.md)。 -**说明**：绘制节点的文本标签图形 +
+ +绘制节点的文本标签图形 ### drawLabelBackgroundShape -**类型**： +**类型**：`drawLabelBackgroundShape` + +
+ +drawLabelBackgroundShape ```typescript type drawLabelBackgroundShape = ( @@ -109,11 +131,17 @@ type drawLabelBackgroundShape = ( 其中，相关的数据类型定义参考 [NodeDisplayModel 渲染数据](../../data/ComboDisplayModel.zh.md) 和 [ComboDisplayModel 渲染数据](../../data/ComboDisplayModel.zh.md)。 -**说明**：绘制节点的文本的背景图形 +
+ +绘制节点的文本的背景图形 ### drawIconShape -**类型**： +**类型**：`drawIconShape` + +
+ +drawIconShape ```typescript type drawIconShape = ( @@ -124,11 +152,17 @@ type drawIconShape = ( 其中，相关的数据类型定义参考 [NodeDisplayModel 渲染数据](../../data/ComboDisplayModel.zh.md) 和 [ComboDisplayModel 渲染数据](../../data/ComboDisplayModel.zh.md)。 -**说明**：绘制节点的图标图形 +
+ +绘制节点的图标图形 ### drawHaloShape -**类型**： +**类型**：`drawHaloShape` + +
+ +drawHaloShape ```typescript type drawHaloShape = ( @@ -139,11 +173,17 @@ type drawHaloShape = ( 其中，相关的数据类型定义参考 [NodeDisplayModel 渲染数据](../../data/ComboDisplayModel.zh.md) 和 [ComboDisplayModel 渲染数据](../../data/ComboDisplayModel.zh.md)。 -**说明**：绘制节点的光晕图形 +
+ +绘制节点的光晕图形 ### drawAnchorShapes -**类型**： +**类型**：`drawAnchorShapes` + +
+ +drawAnchorShapes ```typescript type drawAnchorShapes = ( @@ -156,11 +196,17 @@ type drawAnchorShapes = ( 其中，相关的数据类型定义参考 [NodeDisplayModel 渲染数据](../../data/ComboDisplayModel.zh.md) 和 [ComboDisplayModel 渲染数据](../../data/ComboDisplayModel.zh.md)。 -**说明**：绘制节点的锚点图形 +
+ +绘制节点的锚点图形 ### drawBadgeShapes -**类型**： +**类型**：`drawBadgeShapes` + +
+ +drawBadgeShapes ```typescript type drawBadgeShapes = ( @@ -173,11 +219,17 @@ type drawBadgeShapes = ( 其中，相关的数据类型定义参考 [NodeDisplayModel 渲染数据](../../data/ComboDisplayModel.zh.md) 和 [ComboDisplayModel 渲染数据](../../data/ComboDisplayModel.zh.md)。 -**说明**：绘制节点的徽标图形 +
+ +绘制节点的徽标图形 ### drawOtherShapes -**类型**： +**类型**：`drawOtherShapes` + +
+ +drawOtherShapes ```typescript type drawOtherShapes = ( @@ -188,11 +240,17 @@ type drawOtherShapes = ( 其中，相关的数据类型定义参考 [NodeDisplayModel 渲染数据](../../data/ComboDisplayModel.zh.md) 和 [ComboDisplayModel 渲染数据](../../data/ComboDisplayModel.zh.md)。 -**说明**：绘制边的其他图形。自定义边中的其他图形应当定义和配置在 `otherShapes` 中。 +
+ +绘制边的其他图形。自定义边中的其他图形应当定义和配置在 `otherShapes` 中。 ### afterDraw -**类型**： +**类型**：`afterDraw` + +
+ +afterDraw ```typescript type afterDraw = ( @@ -204,11 +262,17 @@ type afterDraw = ( 其中，相关的数据类型定义参考 [NodeDisplayModel 渲染数据](../../data/ComboDisplayModel.zh.md) 和 [ComboDisplayModel 渲染数据](../../data/ComboDisplayModel.zh.md)。 -**说明**：绘制后执行其他绘图操作或添加自定义形状 +
+ +绘制后执行其他绘图操作或添加自定义形状 ### getMergedStyles -**类型**： +**类型**：`getMergedStyles` + +
+ +getMergedStyles ```typescript type getMergedStyles = (model: NodeDisplayModel) => NodeDisplayModel; @@ -216,7 +280,9 @@ type getMergedStyles = (model: NodeDisplayModel) => NodeDisplayModel; 其中，相关的数据类型定义参考 [NodeDisplayModel 渲染数据](../../data/ComboDisplayModel.zh.md)。 -**说明**：将 display model 数据中定义的样式与默认样式和主题样式合并 +
+ +将 display model 数据中定义的样式与默认样式和主题样式合并 ## 成员方法 @@ -224,7 +290,11 @@ type getMergedStyles = (model: NodeDisplayModel) => NodeDisplayModel; ### upsertShape -**类型**： +**类型**：`upsertShape` + +
+ +upsertShape ```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 中不存在）或更新形状 +
+ +根据配置创建（如果在 shapeMap 中不存在）或更新形状 diff --git a/packages/site/docs/apis/item/node/CustomNode3D.en.md b/packages/site/docs/apis/item/node/CustomNode3D.en.md index e9b42fd4b3..341d418824 100644 --- a/packages/site/docs/apis/item/node/CustomNode3D.en.md +++ b/packages/site/docs/apis/item/node/CustomNode3D.en.md @@ -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 +
+ +draw + +```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). + +
+ +Draw all shapes associated with a node. ### drawKeyShape -**Type**: +**Type**: `drawKeyShape` -```ts +
+ +drawKeyShape + +```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). + +
+ +Draw the key shape ### drawLabelShape -**类型**： +**Type**: `drawLabelShape` -```ts +
+ +drawLabelShape + +```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). + +
+ +Draw the label shape of the node. ### drawLabelBackgroundShape -**类型**： +**Type**: `drawLabelBackgroundShape` -```ts +
+ +drawLabelBackgroundShape + +```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). + +
+ +Draw the label background shape of the node. ### drawIconShape -**类型**： +**Type**: `drawIconShape` -```ts +
+ +drawIconShape + +```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). + +
+ +Draw the icon shape of the node. ### drawHaloShape -**类型**： +**Type**: `drawHaloShape` -```ts +
+ +drawHaloShape + +```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). + +
+ +Draw the halo shape of the node. ### drawAnchorShapes -**类型**： +**Type**: `drawAnchorShapes` -```ts +
+ +drawAnchorShapes + +```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). + +
+ +Draw the anchors shape of the node. ### drawBadgeShapes -**类型**： +**Type**: `drawBadgeShapes` -```ts +
+ +drawBadgeShapes + +```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). + +
+ +Draw the badges shape of the node. ### drawOtherShapes -**类型**： +**Type**: `drawOtherShapes` -```ts +
+ +drawOtherShapes + +```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). + +
+ +Draw other shapes(such as preRect,stateIcon) of the node. ### afterDraw -**类型**： +**Type**: `afterDraw` -```ts +
+ +afterDraw + +```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). + +
+ +Perform additional drawing operations or add custom shapes after drawing node. ### getMergedStyles -**类型**： +**Type**: `getMergedStyles` -```ts +
+ +getMergedStyles + +```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). + +
+ +Merge style. ## Member Methods @@ -201,9 +290,17 @@ Inherited shapes provide the following method calls ### upsertShape -**Type**: +**Type**: `upsertShape` + +
+ +upsertShape + +```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. +
+ +Create (if not existing in shapeMap) or update a shape based on configuration. diff --git a/packages/site/docs/apis/item/node/CustomNode3D.zh.md b/packages/site/docs/apis/item/node/CustomNode3D.zh.md index 6a50e1858d..92bef682d4 100644 --- a/packages/site/docs/apis/item/node/CustomNode3D.zh.md +++ b/packages/site/docs/apis/item/node/CustomNode3D.zh.md @@ -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 +
+ +draw + +```typescript type draw = ( model: NodeDisplayModel | ComboDisplayModel, shapeMap: { [shapeId: string]: DisplayObject }, @@ -67,75 +69,111 @@ type draw = ( }; ``` -**说明**：用于绘制与节点相关的所有图形 +
+ +用于绘制与节点相关的所有图形 ### drawKeyShape -**类型**： +**类型**：`drawKeyShape` -```ts +
+ +drawKeyShape + +```typescript type drawKeyShape = (model: NodeDisplayModel, shapeMap: NodeShapeMap) => DisplayObject; ``` -**说明**：用于绘制关键图形 +
+ +用于绘制关键图形 ### drawLabelShape -**类型**： +**类型**：`drawLabelShape` -```ts +
+ +drawLabelShape + +```typescript type drawLabelShape = ( model: NodeDisplayModel | ComboDisplayModel, shapeMap: NodeShapeMap | ComboShapeMap, ) => DisplayObject; ``` -**说明**：绘制节点的文本标签图形 +
+ +绘制节点的文本标签图形 ### drawLabelBackgroundShape -**类型**： +**类型**：`drawLabelBackgroundShape` -```ts +
+ +drawLabelBackgroundShape + +```typescript type drawLabelBackgroundShape = ( model: NodeDisplayModel | ComboDisplayModel, shapeMap: NodeShapeMap | ComboShapeMap, ) => DisplayObject; ``` -**说明**：绘制节点的文本的背景图形 +
+ +绘制节点的文本的背景图形 ### drawIconShape -**类型**： +**类型**：`drawIconShape` -```ts +
+ +drawIconShape + +```typescript type drawIconShape = ( model: NodeDisplayModel | ComboDisplayModel, shapeMap: NodeShapeMap | ComboShapeMap, ) => DisplayObject; ``` -**说明**：绘制节点的图标图形 +
+ +绘制节点的图标图形 ### drawHaloShape -**类型**： +**类型**：`drawHaloShape` -```ts +
+ +drawHaloShape + +```typescript type drawHaloShape = ( model: NodeDisplayModel | ComboDisplayModel, shapeMap: NodeShapeMap | ComboShapeMap, ) => DisplayObject; ``` -**说明**：绘制节点的光晕图形 +
+ +绘制节点的光晕图形 ### drawAnchorShapes -**类型**： +**类型**：`drawAnchorShapes` -```ts +
+ +drawAnchorShapes + +```typescript type drawAnchorShapes = ( model: NodeDisplayModel | ComboDisplayModel, shapeMap: NodeShapeMap | ComboShapeMap, @@ -144,13 +182,19 @@ type drawAnchorShapes = ( }; ``` -**说明**：绘制节点的锚点图形 +
+ +绘制节点的锚点图形 ### drawBadgeShapes -**类型**： +**类型**：`drawBadgeShapes` -```ts +
+ +drawBadgeShapes + +```typescript type drawBadgeShapes = ( model: NodeDisplayModel | ComboDisplayModel, shapeMap: NodeShapeMap | ComboShapeMap, @@ -159,26 +203,38 @@ type drawBadgeShapes = ( }; ``` -**说明**：绘制节点的徽标图形 +
+ +绘制节点的徽标图形 ### drawOtherShapes -**类型**： +**类型**：`drawOtherShapes` -```ts +
+ +drawOtherShapes + +```typescript type drawOtherShapes = ( model: NodeDisplayModel | ComboDisplayModel, shapeMap: NodeShapeMap | ComboShapeMap, ) => { [id: string]: DisplayObject }; ``` -**说明**：绘制边的其他图形。自定义边中的其他图形应当定义和配置在 `otherShapes` 中。 +
+ +绘制边的其他图形。自定义边中的其他图形应当定义和配置在 `otherShapes` 中。 ### afterDraw -**类型**： +**类型**：`afterDraw` -```ts +
+ +afterDraw + +```typescript type afterDraw = ( model: EdgeDisplayModel, shapeMap: { [shapeId: string]: DisplayObject }, @@ -186,17 +242,25 @@ type afterDraw = ( ) => { [otherShapeId: string]: DisplayObject }; ``` -**说明**：绘制后执行其他绘图操作或添加自定义形状 +
+ +绘制后执行其他绘图操作或添加自定义形状 ### getMergedStyles -**类型**： +**类型**：`getMergedStyles` -```ts +
+ +getMergedStyles + +```typescript type getMergedStyles = (model: EdgeDisplayModel) => EdgeDisplayModel; ``` -**说明**：将 display model 数据中定义的样式与默认样式和主题样式合并 +
+ +将 display model 数据中定义的样式与默认样式和主题样式合并 ## 成员方法 @@ -204,9 +268,13 @@ type getMergedStyles = (model: EdgeDisplayModel) => EdgeDisplayModel; ### upsertShape -**类型**： +**类型**：`upsertShape` -```ts +
+ +upsertShape + +```typescript type upsertShape = ( type: SHAPE_TYPE | SHAPE_TYPE_3D, id: string, @@ -216,4 +284,6 @@ type upsertShape = ( ) => DisplayObject; ``` -**说明**：根据配置创建（如果在 shapeMap 中不存在）或更新形状 +
+ +根据配置创建（如果在 shapeMap 中不存在）或更新形状 diff --git a/packages/site/docs/apis/item/node/DiamondNode.en.md b/packages/site/docs/apis/item/node/DiamondNode.en.md index a8b944c57e..2c20cc951e 100644 --- a/packages/site/docs/apis/item/node/DiamondNode.en.md +++ b/packages/site/docs/apis/item/node/DiamondNode.en.md @@ -9,7 +9,11 @@ This section details the configuration options for the keyShape of Diamond (菱 ## keyShape -- **Type**: `KeyShapeStyle` +**Type**: `KeyShapeStyle` + +
+ +KeyShapeStyle ```typescript type KeyShapeStyle = StyleProps & { @@ -22,7 +26,13 @@ type KeyShapeStyle = StyleProps & { For more detailed style configuration, refer to [Path](../shape/PathStyleProps.en.md)。 -- **Default**: +
+ +**Default**:`object` + +
+ +object ```json { @@ -30,6 +40,6 @@ For more detailed style configuration, refer to [Path](../shape/PathStyleProps.e } ``` -- **Required**: No +
diff --git a/packages/site/docs/apis/item/node/DiamondNode.zh.md b/packages/site/docs/apis/item/node/DiamondNode.zh.md index 5284feabfc..31db88335d 100644 --- a/packages/site/docs/apis/item/node/DiamondNode.zh.md +++ b/packages/site/docs/apis/item/node/DiamondNode.zh.md @@ -9,7 +9,11 @@ order: 5 ## keyShape -- **类型**：`KeyShapeStyle` +**类型**：`KeyShapeStyle` + +
+ +KeyShapeStyle ```typescript type KeyShapeStyle = StyleProps & { @@ -22,7 +26,13 @@ type KeyShapeStyle = StyleProps & { 其中，相关的图形样式参考 [Path 图形样式](../shape/PathStyleProps.zh.md)。 -- **默认值**： +
+ +**默认值**：`object` + +
+ +object ```json { @@ -30,6 +40,6 @@ type KeyShapeStyle = StyleProps & { } ``` -- **是否必须**：否 +
diff --git a/packages/site/docs/apis/item/node/DonutNode.en.md b/packages/site/docs/apis/item/node/DonutNode.en.md index 6361977d3d..de1369f789 100644 --- a/packages/site/docs/apis/item/node/DonutNode.en.md +++ b/packages/site/docs/apis/item/node/DonutNode.en.md @@ -9,7 +9,11 @@ This section provides details on the configuration options for Donut (甜甜圈) ## keyShape -- **Type**：`KeyShapeStyle` +**Type**：`KeyShapeStyle` + +
+ +KeyShapeStyle ```typescript type KeyShapeStyle = StyleProps & { @@ -22,7 +26,13 @@ type KeyShapeStyle = StyleProps & { For more detailed style configuration, refer to [Circle](../shape/CircleStyleProps.en.md)。 -- **Default**: +
+ +**Default**:`object` + +
+ +object ```json { @@ -30,42 +40,58 @@ For more detailed style configuration, refer to [Circle](../shape/CircleStylePro } ``` -- **Required**: No +
## donutShapes -- **Type**: `DonutShapesStyle` +**Type**: `DonutShapesStyle` + +
+ +DonutShapesStyle ```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; -}; -``` +
-- **Default**: +**Default**:`object` + +
+ +object ```json { @@ -74,6 +100,6 @@ type PropObject = { } ``` -- **Required**: Yes +
diff --git a/packages/site/docs/apis/item/node/DonutNode.zh.md b/packages/site/docs/apis/item/node/DonutNode.zh.md index cabf1fa7ba..d44f8535af 100644 --- a/packages/site/docs/apis/item/node/DonutNode.zh.md +++ b/packages/site/docs/apis/item/node/DonutNode.zh.md @@ -9,7 +9,11 @@ order: 3 ## keyShape -- **类型**：`KeyShapeStyle` +**类型**：`KeyShapeStyle` + +
+ +KeyShapeStyle ```typescript type KeyShapeStyle = StyleProps & { @@ -22,7 +26,13 @@ type KeyShapeStyle = StyleProps & { 其中，相关的图形样式参考 [Circle 图形样式](../shape/CircleStyleProps.zh.md)。 -- **默认值**： +
+ +默认值：`object` + +
+ +object ```json { @@ -30,42 +40,58 @@ type KeyShapeStyle = StyleProps & { } ``` -- **是否必须**：否 +
## donutShapes -- **类型**： +**类型**：`DonutShapesStyle` + +
+ +DonutShapesStyle ```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; -}; -``` +
-- **默认值**： +**默认值**：`object` + +
+ +object ```json { @@ -74,6 +100,6 @@ type PropObject = { } ``` -- **是否必须**：是 +
diff --git a/packages/site/docs/apis/item/node/EllipseNode.en.md b/packages/site/docs/apis/item/node/EllipseNode.en.md index ce615d7a34..49328973a2 100644 --- a/packages/site/docs/apis/item/node/EllipseNode.en.md +++ b/packages/site/docs/apis/item/node/EllipseNode.en.md @@ -9,7 +9,11 @@ This section outlines the configuration options for Ellipse (椭圆) nodes, as d ## keyShape -- **Type**：`KeyShapeStyle` +**Type**：`KeyShapeStyle` + +
+ +KeyShapeStyle ```typescript type KeyShapeStyle = StyleProps & { @@ -26,7 +30,13 @@ type KeyShapeStyle = StyleProps & { For more detailed style configuration, refer to [Ellipse](../shape/EllipseStyleProps.en.md)。 -- **Default**: +
+ +**Default**:`object` + +
+ +object ```json { @@ -35,6 +45,6 @@ For more detailed style configuration, refer to [Ellipse](../shape/EllipseStyleP } ``` -- **Required**: No +
diff --git a/packages/site/docs/apis/item/node/EllipseNode.zh.md b/packages/site/docs/apis/item/node/EllipseNode.zh.md index 8924f9ad1a..b1ca7cfeb1 100644 --- a/packages/site/docs/apis/item/node/EllipseNode.zh.md +++ b/packages/site/docs/apis/item/node/EllipseNode.zh.md @@ -9,7 +9,11 @@ order: 10 ## keyShape -- **类型**：`KeyShapeStyle` +**类型**：`KeyShapeStyle` + +
+ +KeyShapeStyle ```typescript type KeyShapeStyle = StyleProps & { @@ -26,7 +30,13 @@ type KeyShapeStyle = StyleProps & { 其中，相关的图形样式参考 [Ellipse 图形样式](../shape/EllipseStyleProps.zh.md)。 -- **默认值**： +
+ +**默认值**：`object` + +
+ +object ```json { @@ -35,6 +45,6 @@ type KeyShapeStyle = StyleProps & { } ``` -- **是否必须**：否 +
diff --git a/packages/site/docs/apis/item/node/HexagonNode.en.md b/packages/site/docs/apis/item/node/HexagonNode.en.md index 84f873f094..dc33db4f7d 100644 --- a/packages/site/docs/apis/item/node/HexagonNode.en.md +++ b/packages/site/docs/apis/item/node/HexagonNode.en.md @@ -9,7 +9,11 @@ This section details the configuration options for Hexagon (六边形) nodes, as ## keyShape -- **Type**：`KeyShapeStyle` +**Type**：`KeyShapeStyle` + +
+ +KeyShapeStyle ```typescript type KeyShapeStyle = StyleProps & { @@ -26,7 +30,13 @@ type KeyShapeStyle = StyleProps & { For more detailed style configuration, refer to [Polygon](../shape/PolygonStyleProps.en.md)。 -- **Default**: +
+ +**Default**:`object` + +
+ +object ```json { @@ -35,6 +45,6 @@ For more detailed style configuration, refer to [Polygon](../shape/PolygonStyleP } ``` -- **Required**: No +
diff --git a/packages/site/docs/apis/item/node/HexagonNode.zh.md b/packages/site/docs/apis/item/node/HexagonNode.zh.md index 3fe2fff402..19079fcba6 100644 --- a/packages/site/docs/apis/item/node/HexagonNode.zh.md +++ b/packages/site/docs/apis/item/node/HexagonNode.zh.md @@ -9,7 +9,11 @@ order: 6 ## keyShape -- **类型**：`KeyShapeStyle` +**类型**：`KeyShapeStyle` + +
+ +KeyShapeStyle ```typescript type KeyShapeStyle = StyleProps & { @@ -26,7 +30,13 @@ type KeyShapeStyle = StyleProps & { 其中，相关的图形样式参考 [Polygon 图形样式](../shape/PolygonStyleProps.zh.md)。 -- **默认值**： +
+ +**默认值**：`object` + +
+ +object ```json { @@ -35,6 +45,6 @@ type KeyShapeStyle = StyleProps & { } ``` -- **是否必须**：否 +
diff --git a/packages/site/docs/apis/item/node/ImageNode.en.md b/packages/site/docs/apis/item/node/ImageNode.en.md index ccfb1d87cb..1d0ec2c3a7 100644 --- a/packages/site/docs/apis/item/node/ImageNode.en.md +++ b/packages/site/docs/apis/item/node/ImageNode.en.md @@ -9,7 +9,11 @@ This section details the configuration options for Image nodes, as demonstrated ## keyShape -- **Type**：`KeyShapeStyle` +**Type**：`KeyShapeStyle` + +
+ +KeyShapeStyle ```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**: +
+ +**Default**:`object` + +
+ +object ```json { "width": "32", "height": "32 } + ``` -- **Required**: No +
diff --git a/packages/site/docs/apis/item/node/ImageNode.zh.md b/packages/site/docs/apis/item/node/ImageNode.zh.md index 78ebd521cb..8c697c4aed 100644 --- a/packages/site/docs/apis/item/node/ImageNode.zh.md +++ b/packages/site/docs/apis/item/node/ImageNode.zh.md @@ -9,7 +9,11 @@ order: 4 ## keyShape -- **类型**：`KeyShapeStyle` +**类型**：`KeyShapeStyle` + +
+ +KeyShapeStyle ```typescript type KeyShapeStyle = StyleProps & { @@ -49,15 +53,22 @@ type ClipCfg = { 可以指定裁剪图形的类型及其样式。根据不同的目标裁剪图形类型，样式配置项不同。例如 `type` 是 `'circle'` 参考 [Circle 图形样式](../shape/CircleStyleProps.zh.md)；`'rect'` 参考 [Rect 图形样式](../shape/RectStyleProps.zh.md)。 -- **默认值**： +
+ +**默认值**：`object` + +
+ +object ```json { "width": "32", "height": "32 } + ``` -- **是否必须**：否 +
diff --git a/packages/site/docs/apis/item/node/ModelRectNode.en.md b/packages/site/docs/apis/item/node/ModelRectNode.en.md index 0aac8d26b0..87efd72dbc 100644 --- a/packages/site/docs/apis/item/node/ModelRectNode.en.md +++ b/packages/site/docs/apis/item/node/ModelRectNode.en.md @@ -9,7 +9,11 @@ This section details the configuration options for ModelRect nodes, as demonstra ## keyShape -- **Type**：`KeyShapeStyle` +**Type**：`KeyShapeStyle` + +
+ +KeyShapeStyle ```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**: +
+ +**Default**:`object` + +
+ +object ```json { @@ -39,11 +49,11 @@ The related rect style can be referred to in [`RectStyleProps`](../shape/RectSty } ``` -- **Required**: No +
## otherShapes(extended) -- **Type**: `OtherShapesStyle` +**Type**: `OtherShapesStyle` ```typescript type OtherShapesStyle = { @@ -86,7 +96,11 @@ type OtherShapesStyle = { }; ``` -- **Default**: +**Default**:`object` + +
+ +object ```json { @@ -125,6 +139,6 @@ type OtherShapesStyle = { } ``` -- **Required**: No +
diff --git a/packages/site/docs/apis/item/node/ModelRectNode.zh.md b/packages/site/docs/apis/item/node/ModelRectNode.zh.md index 1e7c5e4efc..f0ebc0f8b5 100644 --- a/packages/site/docs/apis/item/node/ModelRectNode.zh.md +++ b/packages/site/docs/apis/item/node/ModelRectNode.zh.md @@ -9,7 +9,11 @@ order: 9 ## keyShape -- **类型**：`KeyShapeStyle` +**类型**：`KeyShapeStyle` + +
+ +KeyShapeStyle ```typescript type KeyShapeStyle = StyleProps & { @@ -26,7 +30,13 @@ type KeyShapeStyle = StyleProps & { 其中，相关的图形样式参考 [Rect 图形样式](../shape/RectStyleProps.zh.md)。 -- **默认值**： +
+ +**默认值**：`object` + +
+ +object ```json { @@ -39,11 +49,11 @@ type KeyShapeStyle = StyleProps & { } ``` -- **是否必须**：否 +
## otherShapes(extended) -- **类型**：`OtherShapesStyle` +**类型**：`OtherShapesStyle` ```typescript type OtherShapesStyle = { @@ -86,7 +96,11 @@ type OtherShapesStyle = { }; ``` -- **默认值**： +**默认值**：`object` + +
+ +object ```json { @@ -125,6 +139,6 @@ type OtherShapesStyle = { } ``` -- **是否必须**：否 +
diff --git a/packages/site/docs/apis/item/node/RectNode.en.md b/packages/site/docs/apis/item/node/RectNode.en.md index b2768681ec..bcec848dce 100644 --- a/packages/site/docs/apis/item/node/RectNode.en.md +++ b/packages/site/docs/apis/item/node/RectNode.en.md @@ -9,7 +9,11 @@ This section provides details on the configuration options for Rect (矩形) nod ## keyShape -- **Type**：`KeyShapeStyle` +**Type**：`KeyShapeStyle` + +
+ +KeyShapeStyle ```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**: +
+ +**Default**:`object` + +
+ +object ```json { @@ -35,6 +45,6 @@ For more detailed style configuration, refer to [Rect Graphic Style](../shape/Re } ``` -- **Required**: No +
diff --git a/packages/site/docs/apis/item/node/RectNode.zh.md b/packages/site/docs/apis/item/node/RectNode.zh.md index 6f7a380e78..88f9976602 100644 --- a/packages/site/docs/apis/item/node/RectNode.zh.md +++ b/packages/site/docs/apis/item/node/RectNode.zh.md @@ -9,7 +9,11 @@ order: 2 ## keyShape -- **类型**：`KeyShapeStyle` +**类型**：`KeyShapeStyle` + +
+ +KeyShapeStyle ```typescript type KeyShapeStyle = StyleProps & { @@ -26,7 +30,13 @@ type KeyShapeStyle = StyleProps & { 其中，相关的图形样式参考 [Rect 图形样式](../shape/RectStyleProps.zh.md)。 -- **默认值**： +
+ +**默认值**：`object` + +
+ +object ```json { @@ -35,6 +45,6 @@ type KeyShapeStyle = StyleProps & { } ``` -- **是否必须**：否 +
diff --git a/packages/site/docs/apis/item/node/SphereNode.en.md b/packages/site/docs/apis/item/node/SphereNode.en.md index 1ae038b6b0..9dbefd4845 100644 --- a/packages/site/docs/apis/item/node/SphereNode.en.md +++ b/packages/site/docs/apis/item/node/SphereNode.en.md @@ -9,7 +9,11 @@ This section details the configuration options for Sphere (球体) nodes, as sho ## keyShape -- **Type**: `KeyShapeStyle` +**Type**: `KeyShapeStyle` + +
+ +KeyShapeStyle ```typescript type KeyShapeStyle = { @@ -28,7 +32,13 @@ type KeyShapeStyle = { }; ``` -- **Default**: +
+ +**Default**:`object` + +
+ +object ```json { @@ -38,6 +48,6 @@ type KeyShapeStyle = { } ``` -- **Required**: No +
diff --git a/packages/site/docs/apis/item/node/SphereNode.zh.md b/packages/site/docs/apis/item/node/SphereNode.zh.md index 7f54d8c84b..9ce001e585 100644 --- a/packages/site/docs/apis/item/node/SphereNode.zh.md +++ b/packages/site/docs/apis/item/node/SphereNode.zh.md @@ -9,7 +9,11 @@ order: 12 ## keyShape -- **类型**：`KeyShapeStyle` +**类型**：`KeyShapeStyle` + +
+ +KeyShapeStyle ```typescript type KeyShapeStyle = { @@ -28,7 +32,13 @@ type KeyShapeStyle = { }; ``` -- **默认值**： +
+ +**默认值**：`object` + +
+ +object ```json { @@ -38,7 +48,7 @@ type KeyShapeStyle = { } ``` -- **是否必须**：否 +
diff --git a/packages/site/docs/apis/item/node/StarNode.en.md b/packages/site/docs/apis/item/node/StarNode.en.md index cc6508e0fc..0bc421fe99 100644 --- a/packages/site/docs/apis/item/node/StarNode.en.md +++ b/packages/site/docs/apis/item/node/StarNode.en.md @@ -9,7 +9,11 @@ This section outlines the configuration options for Star (星形) nodes, as demo ## keyShape -- **Type**：`KeyShapeStyle` +**Type**：`KeyShapeStyle` + +
+ +KeyShapeStyle ```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**: +
+ +**Default**:`object` + +
+ +object ```json { @@ -34,6 +44,6 @@ For more detailed style configuration, refer to [Path Graphic Style](../shape/Pa } ``` -- **Required**: No +
diff --git a/packages/site/docs/apis/item/node/StarNode.zh.md b/packages/site/docs/apis/item/node/StarNode.zh.md index 7187562e4c..65ea4b9d69 100644 --- a/packages/site/docs/apis/item/node/StarNode.zh.md +++ b/packages/site/docs/apis/item/node/StarNode.zh.md @@ -9,7 +9,11 @@ order: 8 ## keyShape -- **类型**：`KeyShapeStyle` +**类型**：`KeyShapeStyle` + +
+ +KeyShapeStyle ```typescript type KeyShapeStyle = StyleProps & { @@ -26,7 +30,13 @@ type KeyShapeStyle = StyleProps & { 其中，相关的图形样式参考 [Path 图形样式](../shape/PathStyleProps.zh.md)。 -- **默认值**： +
+ +**默认值**：`object` + +
+ +object ```json { @@ -34,6 +44,6 @@ type KeyShapeStyle = StyleProps & { } ``` -- **是否必须**：否 +
diff --git a/packages/site/docs/apis/item/node/TriangleNode.en.md b/packages/site/docs/apis/item/node/TriangleNode.en.md index 2b10934301..eb6d88687c 100644 --- a/packages/site/docs/apis/item/node/TriangleNode.en.md +++ b/packages/site/docs/apis/item/node/TriangleNode.en.md @@ -9,7 +9,11 @@ This section details the configuration options for Triangle (三角形) nodes, a ## keyShape -- **Type**：`KeyShapeStyle` +**Type**：`KeyShapeStyle` + +
+ +KeyShapeStyle ```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**: +
+ +**Default**:`object` + +
+ +object ```json { @@ -36,6 +45,6 @@ For more detailed style configuration, refer to [Path Graphic Style](../shape/Pa } ``` -- **Required**: No +
diff --git a/packages/site/docs/apis/item/node/TriangleNode.zh.md b/packages/site/docs/apis/item/node/TriangleNode.zh.md index 49873eedfd..e9956aa924 100644 --- a/packages/site/docs/apis/item/node/TriangleNode.zh.md +++ b/packages/site/docs/apis/item/node/TriangleNode.zh.md @@ -9,7 +9,11 @@ order: 7 ## keyShape -- **类型**：`KeyShapeStyle` +**类型**：`KeyShapeStyle` + +
+ +KeyShapeStyle ```typescript type KeyShapeStyle = StyleProps & { @@ -26,7 +30,13 @@ type KeyShapeStyle = StyleProps & { 其中，相关的图形样式参考 [Path 图形样式](../shape/PathStyleProps.zh.md)。 -- **默认值**： +
+ +**默认值**：`object` + +
+ +object ```json { @@ -35,6 +45,6 @@ type KeyShapeStyle = StyleProps & { } ``` -- **是否必须**：否 +
diff --git a/packages/site/docs/common/ArrowStyle.en.md b/packages/site/docs/common/ArrowStyle.en.md index 539b3f9bf0..c9d68c7144 100644 --- a/packages/site/docs/common/ArrowStyle.en.md +++ b/packages/site/docs/common/ArrowStyle.en.md @@ -1,11 +1,11 @@
-ArrowProps +ArrowProps -```ts +```typescript type ArrowType = 'triangle' | 'circle' | 'diamond' | 'rect' | 'vee' | 'triangle-rect' | 'simple'; -type ArrowStyle = PathStyleProps & { +type ArrowStyle = StyleProps & { type: ArrowType; width: number; height: number; diff --git a/packages/site/docs/common/ArrowStyle.zh.md b/packages/site/docs/common/ArrowStyle.zh.md index 575e3c1916..cd5641c96f 100644 --- a/packages/site/docs/common/ArrowStyle.zh.md +++ b/packages/site/docs/common/ArrowStyle.zh.md @@ -1,6 +1,6 @@
-ArrowProps +ArrowProps ```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; }; ``` diff --git a/packages/site/docs/common/ComboShapeStyles.en.md b/packages/site/docs/common/ComboShapeStyles.en.md index 73dd638a0e..080841b8e6 100644 --- a/packages/site/docs/common/ComboShapeStyles.en.md +++ b/packages/site/docs/common/ComboShapeStyles.en.md @@ -1,41 +1,58 @@ ## labelShape -The text shape of the Combo. +**Type**: `LabelShapeStyle` -- **Type**: +
+ +LabelShapeStyle ```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**: +
+ +**Default**: `object` + +
+ +object ```json { @@ -44,80 +61,64 @@ The related shape style can be referred to as [`TextStyleProps` Text Shape Style } ``` -- **Required**: No +
+ +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**: +
+ +LabelBackgroundShapeStyle ```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 +
-- **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` + +
+ +HaloShapeStyle + +```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)). + +
+ +**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**: +
+ +BadgeShapesStyle ```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 +
-- **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**: +
+ +AnchorShapesStyle ```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 +
-- **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**: +
+ +OtherShapesStyle ```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 +
-- **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`. diff --git a/packages/site/docs/common/ComboShapeStyles.zh.md b/packages/site/docs/common/ComboShapeStyles.zh.md index 6a0f42eb93..6bf539a295 100644 --- a/packages/site/docs/common/ComboShapeStyles.zh.md +++ b/packages/site/docs/common/ComboShapeStyles.zh.md @@ -1,37 +1,54 @@ ## labelShape -Combo 的文本图形。 +**类型**: `LabelShapeStyle` -- **类型**: +
+ +LabelShapeStyle ```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)。 -- **默认值**： +
+ +**默认值**：`object` + +
+ +object ```json { @@ -40,81 +57,64 @@ Combo 的文本图形。 } ``` -- **是否必须**：否 +
+ +Combo 的文本图形 ## labelBackgroundShape -Combo 的文本的背景图形，是一个矩形。若不设置则不显示。设置为 `{}` 将使用主题中默认的样式显示文本背景图形。 +**类型**: `LabelBackgroundShapeStyle` -- **类型**: +
+ +LabelBackgroundShapeStyle ```typescript -ShapeStyle & { - padding?: number | number[]; // 文本距离背景矩形四周的留白距离 +type LabelBackgroundShapeStyle = ShapeStyle & { + /** + * 文本距离背景矩形四周的留白距离 + */ + padding?: number | number[]; }; ``` 其中，相关的图形样式参考 [Rect 图形样式](../shape/RectStyleProps.zh.md)。 -- **默认值**： undefined +
-- **是否必须**：否 +**默认值**：undefined + +Combo 的文本的背景图形，是一个矩形。若不设置则不显示。设置为 `{}` 将使用主题中默认的样式显示文本背景图形。 ## haloShape +**类型**: `HaloShapeStyle` + +
+ +HaloShapeStyle + +```typescript +type HaloShapeStyle = ShapeStyle; +``` + +`haloShape` 的图形类型跟随主图形(`keyShape`)。根据不同的主图形，图形样式配置项不同。例如 `'circle-combo'` 的主图形是 `'circle'` 参考 [Circle 图形样式](../shape/CircleStyleProps.zh.md)；`'rect-combo'` 的主图形是 `'rect'` 参考 [Rect 图形样式](../shape/RectStyleProps.zh.md)。 + +
+ +**默认值**：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` -- **是否必须**: 否； -- **类型**: +
+ +BadgeShapesStyle ```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 +
-- **是否必须**：否 +**默认值**：undefined + +Combo 四周的徽标，单个徽标包括了 Combo 和背景图形，badgeShapes 配置的是多个徽标。 ## anchorShapes -Combo 四周的边连入位置圆形图形（连接桩），anchorShapes 配置的是多个连接桩。 +**类型**: `AnchorShapesStyle` -- **类型**: +
+ +AnchorShapesStyle ```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 +
-- **是否必须**：否 +**默认值**：undefined + +Combo 四周的边连入位置圆形图形（连接桩），anchorShapes 配置的是多个连接桩。 ## otherShapes -上面所有的 xxShape(s) 均为 G6 定义的规范 Combo 中可能存在的图形。自定义 Combo 中的其他图形应当定义和配置在 `otherShapes` 中。 +**类型**：`OtherShapeStyle` -- **类型**： +
+ +OtherShapeStyle ```typescript -{ +type OtherShapeStyle = { // key 为图形 id，规范格式为 xxShape // value 为图形样式配置（不同图形配置不同，见图形相关文档），以及图形的动画 [shapeId: string]: ShapeStyleProps; -} +}; ``` 其中，不同的图形样式参考[图形样式](../shape/BaseStyleProps.zh.md)目录下对应的图形类型文档。 -- **默认值**： undefined +
-- **是否必须**：否 +**默认值**：undefined + +上面所有的 xxShape(s) 均为 G6 定义的规范 Combo 中可能存在的图形。自定义 Combo 中的其他图形应当定义和配置在 `otherShapes` 中。 diff --git a/packages/site/docs/common/EdgeShapeStyles.en.md b/packages/site/docs/common/EdgeShapeStyles.en.md index 35556e4726..184ad97dce 100644 --- a/packages/site/docs/common/EdgeShapeStyles.en.md +++ b/packages/site/docs/common/EdgeShapeStyles.en.md @@ -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` +
+ +IconShapeType ```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 +
-- **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` + +
+ +HaloShapeStyle + +`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 + 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` +
+ +LabelShapeStyle ```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**: +
+ +**Default**: `object` + +
+ +object ```json { @@ -82,13 +100,19 @@ For more detailed style configuration, refer to [Text Graphic Style](../shape/Te } ``` -- **Required**: No +
+ +The text shape of the edge. ## labelBackgroundShape The background shape of the text of the edge. -- **Type**: `LabelBackgroundShapeStyle` +**Type**: `LabelBackgroundShapeStyle` + +
+ +LabelBackgroundShapeStyle ```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 +
-- **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` + +
+ +OtherShapesStyle ```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 +
-- **Required**: No +**Default**: undefined diff --git a/packages/site/docs/common/EdgeShapeStyles.zh.md b/packages/site/docs/common/EdgeShapeStyles.zh.md index b990add10d..1b3247cc62 100644 --- a/packages/site/docs/common/EdgeShapeStyles.zh.md +++ b/packages/site/docs/common/EdgeShapeStyles.zh.md @@ -1,8 +1,10 @@ ## iconShape -边的图标图形，位于文本前方。 +**类型**：`IconShapeStyle` -- **类型**：`IconShapeStyle` +
+ +IconShapeStyle ```typescript type IconShapeStyle = Partial< @@ -24,27 +26,35 @@ type IconShapeStyle = Partial< `iconShape` 根据不同的展示形式，图形样式配置项不同。例如图标为文本，支持 **iconfont**，参考 [Text 图形样式](../../shape/TextStyleProps.zh.md)；图标为图片。参考 [Image 图形样式](../../shape/ImageStyleProps.zh.md)。 -- **默认值**：undefined +
-- **是否必须**：否 +**默认值**：undefined + +边的图标图形，位于文本前方。 ## haloShape -在内置的边和主题中，`haloShape` 指的是边在 `active`（一般在鼠标 hover 时该状态被触发） 和 `selected`（一般在选中状态下该状态被触发） 状态下，主图形 (`keyShape`) 周围展示的光晕效果的图形。在内置边的逻辑中，`haloShape` 的图形类型、颜色跟随主图形 (`keyShape`)。 +**类型**: `HaloShapeStyle` -**类型**: `ShapeStyle` +
+ +HaloShapeStyle 说明，`haloShape` 的图形类型跟随主图形(`keyShape`)。根据不同的主图形，图形样式配置项不同。例如 `'line-edge'` 的主图形是 `'line'` 参考 [Line 图形样式](../shape/LineStyleProps.zh.md)；`'cubic-edge'` 的主图形是 `'path'` 参考 [Path 图形样式](../shape/PathStyleProps.zh.md)。 -- **默认值**：undefined +
-- **是否必须**：否 +**默认值**：undefined + +在内置的边和主题中，`haloShape` 指的是边在 `active`（一般在鼠标 hover 时该状态被触发） 和 `selected`（一般在选中状态下该状态被触发） 状态下，主图形 (`keyShape`) 周围展示的光晕效果的图形。在内置边的逻辑中，`haloShape` 的图形类型、颜色跟随主图形 (`keyShape`)。 ## labelShape -边的文本图形，内置边或继承内置边（未复写相关内容）的自定义边均支持。 +**类型**：`LabelShapeStyle` -- **类型**：`LabelShapeStyle` +
+ +LabelShapeStyle ```typescript type LabelShapeStyle = TextStyleProps & { @@ -78,7 +88,13 @@ type LabelShapeStyle = TextStyleProps & { }; ``` -- **默认值**： +
+ +**默认值**：`object` + +
+ +object ```json { @@ -90,13 +106,17 @@ type LabelShapeStyle = TextStyleProps & { } ``` -- **是否必须**：否 +
+ +边的文本图形，内置边或继承内置边（未复写相关内容）的自定义边均支持。 ## labelBackgroundShape -边的文本的背景图形，是一个矩形。若不设置则不显示。设置为 `{}` 将使用主题中默认的样式显示文本背景图形。 +**类型**：`LabelShapeStyle` -- **类型**：`LabelShapeStyle` +
+ +LabelShapeStyle ```typescript type LabelShapeStyle = RectStyleProps & { @@ -109,15 +129,19 @@ type LabelShapeStyle = RectStyleProps & { 其中，相关的图形样式参考 [Rect 图形样式](../shape/RectStyleProps.zh.md)。 -- **默认值**：undefined +
-- **是否必须**：否 +**默认值**：undefined + +边的文本的背景图形，是一个矩形。若不设置则不显示。设置为 `{}` 将使用主题中默认的样式显示文本背景图形。 ## otherShapes -上面所有的 xxShape(s) 均为 G6 定义的规范边中可能存在的图形。自定义边中的其他图形应当定义和配置在 `otherShapes` 中。 +**类型**: `OtherShapesStyle` -- **类型**: `OtherShapesStyle` +
+ +OtherShapesStyle ```typescript type OtherShapesStyle = { @@ -133,6 +157,8 @@ type OtherShapesStyle = { 其中，不同的图形样式参考[图形样式](../shape/BaseStyleProps.zh.md)目录下对应的图形类型文档。 -- **默认值**：undefined +
-- **是否必须**：否 +**默认值**：undefined + +上面所有的 xxShape(s) 均为 G6 定义的规范边中可能存在的图形。自定义边中的其他图形应当定义和配置在 `otherShapes` 中。 diff --git a/packages/site/docs/common/NodeShapeStyles.en.md b/packages/site/docs/common/NodeShapeStyles.en.md index b120d54b26..b28391536c 100644 --- a/packages/site/docs/common/NodeShapeStyles.en.md +++ b/packages/site/docs/common/NodeShapeStyles.en.md @@ -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**: +
+ +IconShapeStyle ```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 +
-- **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` + +
+ +HaloShapeStyle + +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 + 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` +
+ +LabelShapeStyle ```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**: +
+ +**Default**:`object` + +
+ +object ```json { @@ -82,74 +100,41 @@ For more detailed style configuration, refer to [Text Graphic Style](../shape/Te } ``` -- **Required**: No +
+ +The text shape of the node. ## labelBackgroundShape -The background shape of the text of the node. +**Type**: `LabelBackgroundShapeStyle` -- **Type**: +
+ +LabelBackgroundShapeStyle ```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 +
-- **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**: +
+ +BadgeShapesStyle ```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 +
-- **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` + +
+ +KeyShapeStyle ```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). +
+ +**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**: +
+ +KeyShapeStyle ```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 +
-- **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`. diff --git a/packages/site/docs/common/NodeShapeStyles.zh.md b/packages/site/docs/common/NodeShapeStyles.zh.md index 5a0cad072c..2165156676 100644 --- a/packages/site/docs/common/NodeShapeStyles.zh.md +++ b/packages/site/docs/common/NodeShapeStyles.zh.md @@ -1,8 +1,10 @@ ## labelShape -节点的文本图形。 +**类型**：`LabelShapeStyle` -- **类型**：`LabelShapeStyle` +
+ +LabelShapeStyle ```typescript type LabelShapeStyle = StyleProps & { @@ -35,7 +37,13 @@ type LabelShapeStyle = StyleProps & { 其中，相关的图形样式参考 [Text 图形样式](../shape/TextStyleProps.zh.md)。 -- **默认值**： +
+ +**默认值**：`object` + +
+ +object ```json { @@ -44,13 +52,17 @@ type LabelShapeStyle = StyleProps & { } ``` -- **是否必须**：否 +
+ +节点的文本图形 ## labelBackgroundShape -节点的文本的背景图形，是一个矩形。若不设置则不显示。设置为 `{}` 将使用主题中默认的样式显示文本背景图形。 +**类型**：`LabelBackgroundShapeStyle` -- **类型**：`LabelBackgroundShapeStyle` +
+ +LabelBackgroundShapeStyle ```typescript type LabelBackgroundShapeStyle = ShapeStyle & { @@ -63,15 +75,19 @@ type LabelBackgroundShapeStyle = ShapeStyle & { 其中，相关的图形样式参考 [Rect 图形样式](../shape/RectStyleProps.zh.md)。 -- **默认值**： undefined +
-- **是否必须**：否 +**默认值**： undefined + +节点的文本的背景图形，是一个矩形。若不设置则不显示。设置为 `{}` 将使用主题中默认的样式显示文本背景图形。 ## iconShape -节点中心的图标图形（除 `'modelRect-node'` 以外的内置节点支持，继承这些内置节点的自定义节点在无复写相关内容的情况下同样支持），可以是图片或文本，文本支持 iconfont (设置 `fontFamily: 'iconfont'`)。 +**类型**: `IconShapeStyle` -- **类型**: `IconShapeStyle` +
+ +IconShapeStyle ```typescript type IconShapeStyle = Partial< @@ -87,29 +103,55 @@ type IconShapeStyle = Partial< 其中，相关的图形样式参考 [Text 图形样式](../shape/TextStyleProps.zh.md)，和 [Image 图形样式](../shape/ImageStyleProps.zh.md)。 -- **默认值**：undefined +
-- **是否必须**：否 +**默认值**：undefined + +节点中心的图标图形（除 `'modelRect-node'` 以外的内置节点支持，继承这些内置节点的自定义节点在无复写相关内容的情况下同样支持），可以是图片或文本，文本支持 iconfont (设置 `fontFamily: 'iconfont'`)。 ## haloShape -在内置的节点和主题中，`haloShape` 指的是节点在 `active`（一般在鼠标 hover 时该状态被触发） 和 `selected`（一般在选中状态下该状态被触发） 状态下，主图形 (`keyShape`) 周围展示的光晕效果的图形。在内置节点的逻辑中，`haloShape` 的图形类型、颜色跟随主图形 (`keyShape`)。 +**类型**: `HaloShapeStyle` -- **类型**: `ShapeStyle` +
+ +HaloShapeStyle + +```typescript +type HaloShapeStyle = ShapeStyle; +``` 说明，`haloShape` 的图形类型跟随主图形(`keyShape`)。根据不同的主图形，图形样式配置项不同。例如 `'circle-node'` 的主图形是 `'circle'` 参考 [Circle 图形样式](../shape/CircleStyleProps.zh.md)；`'image-node'` 的主图形是 `'image'` 参考 [Image 图形样式](../shape/ImageStyleProps.zh.md)。 -- **默认值**：undefined +
-- **是否必须**：否 +**默认值**：undefined + +在内置的节点和主题中，`haloShape` 指的是节点在 `active`（一般在鼠标 hover 时该状态被触发） 和 `selected`（一般在选中状态下该状态被触发） 状态下，主图形 (`keyShape`) 周围展示的光晕效果的图形。在内置节点的逻辑中，`haloShape` 的图形类型、颜色跟随主图形 (`keyShape`)。 ## badgeShapes -节点四周的徽标，单个徽标包括了文本和背景图形，`badgeShapes` 配置的是多个徽标。[节点徽标 DEMO](/zh/examples/item/defaultNodes/#circle)。 +**类型**：`BadgeShapesStyle` -- **类型**：`BadgeShapesStyle` +
+ +BadgeShapesStyle ```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 +
-- **是否必须**：否 +**默认值**： undefined + +节点四周的徽标，单个徽标包括了文本和背景图形，`badgeShapes` 配置的是多个徽标。[节点徽标 DEMO](/zh/examples/item/defaultNodes/#circle)。 ## anchorShapes -节点四周的边连入位置圆形图形（连接桩），anchorShapess 配置的是多个连接桩。[节点连接桩 DEMO](/zh/examples/item/defaultNodes/#circle)。 +**类型**：`AnchorShapesStyle` -- **类型**：`AnchorShapesStyle` +
+ +AnchorShapesStyle ```typescript /** @@ -193,15 +221,19 @@ type AnchorShapesStyle = StyleProps & { 其中，相关的图形样式参考 [Circle 图形样式](../shape/CircleStyleProps.zh.md)。 -- **默认值**： undefined +
-- **是否必须**：否 +**默认值**： undefined + +节点四周的边连入位置圆形图形（连接桩），anchorShapess 配置的是多个连接桩。[节点连接桩 DEMO](/zh/examples/item/defaultNodes/#circle)。 ## otherShapes -上面所有的 xxShape(s) 均为 G6 定义的规范节点中可能存在的图形。自定义节点中的其他图形应当定义和配置在 `otherShapes` 中 +**类型**：`OtherShapesStyle` -- **类型**：`OtherShapesStyle` +
+ +OtherShapesStyle ```typescript type OtherShapesStyle = { @@ -217,6 +249,8 @@ type OtherShapesStyle = { 其中，不同的图形样式参考[图形样式](../shape/BaseStyleProps.zh.md)目录下对应的图形类型文档。 -- **默认值**： undefined +
-- **是否必须**：否 +**默认值**： undefined + +上面所有的 xxShape(s) 均为 G6 定义的规范节点中可能存在的图形。自定义节点中的其他图形应当定义和配置在 `otherShapes` 中 diff --git a/packages/site/docs/manual/customize/themeExtension.en.md b/packages/site/docs/manual/customize/themeExtension.en.md index fe10d581d2..b756720f81 100644 --- a/packages/site/docs/manual/customize/themeExtension.en.md +++ b/packages/site/docs/manual/customize/themeExtension.en.md @@ -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` | + +
+ +SpecThemeCfg + +```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; + }; + }; +}; +``` + +
+ +
+ +SubjectThemeCfg + +```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; + }; + }; +}; +``` + +
+ +## 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'], + }, + }, + }, +}); +``` diff --git a/packages/site/docs/manual/customize/themeExtension.zh.md b/packages/site/docs/manual/customize/themeExtension.zh.md index fadde97680..9d928c0d25 100644 --- a/packages/site/docs/manual/customize/themeExtension.zh.md +++ b/packages/site/docs/manual/customize/themeExtension.zh.md @@ -3,4 +3,136 @@ title: 自定义主题 order: 5 --- -文档正在开发中... +G6 允许扩展已有的主题。 + +- **主题（Theme）** 负责定义图的视觉样式。 +- **主题处理器（ThemeSolver）** 则是一个功能组件，负责根据提供的配置生成最终的主题样式规格。 + +以下是两种内置的主题处理器类型及其配置选项示例： + +| 特征 | SpecThemeSolver（规范主题处理器） | SubjectThemeSolver（主题主题处理器） | +| -------------- | ------------------------------------------------------ | ---------------------------------------------- | +| **定制层级** | 细粒度，针对具体组件（如节点、边） | 粗粒度，整体图表主题 | +| **色板应用** | 根据数据类型动态应用色板和样式 | 应用基础颜色及简化的色板配置 | +| **样式定义** | 详细定义每种数据类型的视觉样式 | 统一定义整体主题的视觉样式 | +| **适用场景** | 数据驱动的样式定制，适合复杂和具体的视觉需求 | 主题风格一致性，适合简单的视觉需求 | +| **区别** | 提供详尽的自定义能力，针对数据不同细分有不同的视觉展示 | 提供宏观的主题调整能力，着重于整体外观而非细节 | +| **配置项类型** | `SpecThemeCfg` | `SubjectThemeCfg` | + +
+ +SpecThemeCfg + +```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; + }; + }; +}; +``` + +
+ +
+ +SubjectThemeCfg + +```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; + }; + }; +}; +``` + +
+ +## 示例 + +这里以实现一个简单的主题为例，主题基调为蓝色。 + +```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'], + }, + }, + }, +}); +``` diff --git a/packages/site/docs/manual/customize/transformExtension.en.md b/packages/site/docs/manual/customize/transformExtension.en.md index 0f68d84487..3a665bc0c5 100644 --- a/packages/site/docs/manual/customize/transformExtension.en.md +++ b/packages/site/docs/manual/customize/transformExtension.en.md @@ -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, + 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'], + }, + ], +}); +``` diff --git a/packages/site/docs/manual/customize/transformExtension.zh.md b/packages/site/docs/manual/customize/transformExtension.zh.md index 7144ad2186..022a6b2b9e 100644 --- a/packages/site/docs/manual/customize/transformExtension.zh.md +++ b/packages/site/docs/manual/customize/transformExtension.zh.md @@ -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, + 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'], + }, + ], +}); +```