From 95091af31832d5ccddfd414d08cb8c4774fa0ec6 Mon Sep 17 00:00:00 2001 From: Chushen Date: Fri, 1 Dec 2023 17:25:23 +0800 Subject: [PATCH] docs: update api docs --- packages/site/.dumirc.ts | 19 ++- .../docs/apis/data/ComboDisplayModel.en.md | 90 +++----------- .../docs/apis/data/ComboDisplayModel.zh.md | 92 +++----------- packages/site/docs/apis/data/ComboModel.en.md | 51 +------- packages/site/docs/apis/data/ComboModel.zh.md | 51 +------- .../site/docs/apis/data/ComboUserModel.en.md | 55 ++------- .../site/docs/apis/data/ComboUserModel.zh.md | 55 ++------- .../site/docs/apis/data/CustomTransform.en.md | 2 +- .../site/docs/apis/data/CustomTransform.zh.md | 2 +- packages/site/docs/apis/data/DataIntro.en.md | 2 +- .../docs/apis/data/EdgeDisplayModel.en.md | 112 +++-------------- .../docs/apis/data/EdgeDisplayModel.zh.md | 114 +++--------------- packages/site/docs/apis/data/EdgeModel.en.md | 73 ++--------- packages/site/docs/apis/data/EdgeModel.zh.md | 69 +---------- .../site/docs/apis/data/EdgeUserModel.en.md | 72 ++--------- .../site/docs/apis/data/EdgeUserModel.zh.md | 72 ++--------- .../docs/apis/data/NodeDisplayModel.en.md | 106 +++------------- .../docs/apis/data/NodeDisplayModel.zh.md | 107 +++------------- packages/site/docs/apis/data/NodeModel.en.md | 10 +- packages/site/docs/apis/data/NodeModel.zh.md | 10 +- .../site/docs/apis/data/NodeUserModel.en.md | 16 +-- .../site/docs/apis/data/NodeUserModel.zh.md | 16 +-- packages/site/docs/apis/data/TreeData.en.md | 8 +- packages/site/docs/apis/data/TreeData.zh.md | 6 +- .../docs/apis/item/combo/ComboIntro.en.md | 22 ++++ .../docs/apis/item/combo/ComboIntro.zh.md | 22 ++++ .../site/docs/apis/item/edge/EdgeIntro.en.md | 22 +++- .../site/docs/apis/item/edge/EdgeIntro.zh.md | 22 +++- .../site/docs/apis/item/node/NodeIntro.en.md | 24 ++++ .../site/docs/apis/item/node/NodeIntro.zh.md | 24 ++++ .../site/docs/common/ComboShapeStyles.en.md | 10 +- .../site/docs/common/ComboShapeStyles.zh.md | 10 +- .../site/docs/common/ComboUserModel.en.md | 31 +++++ .../site/docs/common/ComboUserModel.zh.md | 31 +++++ .../site/docs/common/DataAnchorShapes.en.md | 24 ++++ .../site/docs/common/DataAnchorShapes.zh.md | 24 ++++ packages/site/docs/common/DataAnimates.en.md | 7 ++ packages/site/docs/common/DataAnimates.zh.md | 7 ++ .../common/{Badge.en.md => DataBadge.en.md} | 2 +- .../common/{Badge.zh.md => DataBadge.zh.md} | 2 +- ...Position.en.md => DataBadgePosition.en.md} | 0 ...Position.zh.md => DataBadgePosition.zh.md} | 0 ...adgeShapes.en.md => DataBadgeShapes.en.md} | 2 +- ...adgeShapes.zh.md => DataBadgeShapes.zh.md} | 2 +- .../common/{Badges.en.md => DataBadges.en.md} | 2 +- .../common/{Badges.zh.md => DataBadges.zh.md} | 2 +- packages/site/docs/common/DataHaloShape.en.md | 9 ++ packages/site/docs/common/DataHaloShape.zh.md | 9 ++ packages/site/docs/common/DataID.en.md | 5 + packages/site/docs/common/DataID.zh.md | 5 + packages/site/docs/common/DataIconShape.en.md | 28 +++++ packages/site/docs/common/DataIconShape.zh.md | 28 +++++ .../common/DataLabelBackgroundShape.en.md | 21 ++++ .../common/DataLabelBackgroundShape.zh.md | 21 ++++ ...{LabelShape.en.md => DataLabelShape.en.md} | 0 ...{LabelShape.zh.md => DataLabelShape.zh.md} | 0 .../site/docs/common/DataOtherShapes.en.md | 21 ++++ .../site/docs/common/DataOtherShapes.zh.md | 21 ++++ .../site/docs/common/EdgeShapeStyles.en.md | 8 +- .../site/docs/common/EdgeShapeStyles.zh.md | 8 +- packages/site/docs/common/EdgeUserModel.en.md | 37 ++++++ packages/site/docs/common/EdgeUserModel.zh.md | 37 ++++++ .../site/docs/common/NodeShapeStyles.en.md | 12 +- .../site/docs/common/NodeShapeStyles.zh.md | 4 +- packages/site/docs/common/NodeUserModel.en.md | 2 +- packages/site/docs/common/NodeUserModel.zh.md | 2 +- 66 files changed, 735 insertions(+), 1045 deletions(-) create mode 100644 packages/site/docs/common/ComboUserModel.en.md create mode 100644 packages/site/docs/common/ComboUserModel.zh.md create mode 100644 packages/site/docs/common/DataAnchorShapes.en.md create mode 100644 packages/site/docs/common/DataAnchorShapes.zh.md create mode 100644 packages/site/docs/common/DataAnimates.en.md create mode 100644 packages/site/docs/common/DataAnimates.zh.md rename packages/site/docs/common/{Badge.en.md => DataBadge.en.md} (85%) rename packages/site/docs/common/{Badge.zh.md => DataBadge.zh.md} (85%) rename packages/site/docs/common/{BadgePosition.en.md => DataBadgePosition.en.md} (100%) rename packages/site/docs/common/{BadgePosition.zh.md => DataBadgePosition.zh.md} (100%) rename packages/site/docs/common/{BadgeShapes.en.md => DataBadgeShapes.en.md} (94%) rename packages/site/docs/common/{BadgeShapes.zh.md => DataBadgeShapes.zh.md} (93%) rename packages/site/docs/common/{Badges.en.md => DataBadges.en.md} (84%) rename packages/site/docs/common/{Badges.zh.md => DataBadges.zh.md} (80%) create mode 100644 packages/site/docs/common/DataHaloShape.en.md create mode 100644 packages/site/docs/common/DataHaloShape.zh.md create mode 100644 packages/site/docs/common/DataID.en.md create mode 100644 packages/site/docs/common/DataID.zh.md create mode 100644 packages/site/docs/common/DataIconShape.en.md create mode 100644 packages/site/docs/common/DataIconShape.zh.md create mode 100644 packages/site/docs/common/DataLabelBackgroundShape.en.md create mode 100644 packages/site/docs/common/DataLabelBackgroundShape.zh.md rename packages/site/docs/common/{LabelShape.en.md => DataLabelShape.en.md} (100%) rename packages/site/docs/common/{LabelShape.zh.md => DataLabelShape.zh.md} (100%) create mode 100644 packages/site/docs/common/DataOtherShapes.en.md create mode 100644 packages/site/docs/common/DataOtherShapes.zh.md create mode 100644 packages/site/docs/common/EdgeUserModel.en.md create mode 100644 packages/site/docs/common/EdgeUserModel.zh.md diff --git a/packages/site/.dumirc.ts b/packages/site/.dumirc.ts index 9d7d3d6a53e..2a19e276125 100644 --- a/packages/site/.dumirc.ts +++ b/packages/site/.dumirc.ts @@ -159,27 +159,34 @@ export default defineConfig({ }, order: 2, }, + { + slug: 'apis/item', + title: { + zh: '元素', + en: 'Elements', + }, + }, { slug: 'apis/item/node', title: { - zh: '元素 - 节点', - en: 'Item - Node', + zh: '节点', + en: 'Node', }, order: 3, }, { slug: 'apis/item/edge', title: { - zh: '元素 - 边', - en: 'Item - Edge', + zh: '边', + en: 'Edge', }, order: 4, }, { slug: 'apis/item/combo', title: { - zh: '元素 - Combo', - en: 'Item - Combo', + zh: 'Combo', + en: 'Combo', }, order: 5, }, diff --git a/packages/site/docs/apis/data/ComboDisplayModel.en.md b/packages/site/docs/apis/data/ComboDisplayModel.en.md index 4a1196a3b89..4c8f7bd404a 100644 --- a/packages/site/docs/apis/data/ComboDisplayModel.en.md +++ b/packages/site/docs/apis/data/ComboDisplayModel.en.md @@ -1,22 +1,11 @@ --- title: ComboDisplayModel -order: 12 +order: 11 --- -ComboDisplayModel（Combo Display/Rendering Data） is the result of mapping the ComboModel (inner model) through the mapper configuration specified on the graph instance ([specification.combo](../graph/Specification.en.md#combo)), and is only consumed for internal rendering. You won't consume it anywhere else. The data type inherits the ComboModel data type [ComboModel](./ComboModel.en.md) from the internal data flow and is extended as follows: +ComboDisplayModel (the rendering data of Combo) is the result of [data mapping](./DataIntro.en.md#mappers) of [ComboModel](./ComboModel.en.md), which can only be accessed by G6. -```typescript -interface ComboDisplayModel { - id: string | number; - data: ComboDisplayModelData; // extends ComboModelData -} -``` - -## id Required - -The unique ID of the Combo. The ID cannot be modified once the Combo is created. - -**Type**: `string | number` + ## data Required @@ -26,75 +15,30 @@ The data in ComboDisplayModelData is the result of mapping the ComboModel data t -### animates - -Configuration of shape animations when the node appears, disappears, shows, hides, or updates. Supports sequential execution of multiple animations (order). [Animation Demo](/en/examples/scatter/changePosition/#itemAnimates). - -**Type**: `IAnimates` - - + ### keyShape -The style configuration of the key shape of the Combo. The key shape of the Combo represents its primary form and is also used to calculate the incoming position of edges. - -**Type**: `ShapeStyle`, and the configuration options for different key shapes are different. For example, the key shape of `'circle-combo'` is `'circle'` (refer to [Circle Shape Style](/en/apis/shape/circle-style-props)), and the key shape of `'rect-combo'` is `'rect'` (refer to [Rect Shape Style](/en/apis/shape/rect-style-props)). - -### haloShape - -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](/en/apis/shape/circle-style-props)), and the key shape of `'rect-combo'` is `'rect'` (refer to [Rect Shape Style](/en/apis/shape/rect-style-props)). - - - -### 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**: - -```typescript -ShapeStyle & { - padding?: number | number[]; // The padding distance between the text and the background rectangle in all directions -}; -``` - -The related shape style can be referred to as RectStyleProps [RectStyleProps](/en/apis/shape/rect-style-props). - - +**Type**: `ShapeStyle` -### anchorShapes +The style configuration of the key shape of the Combo -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. +> The key shape of `'circle-combo'` is ['circle'](/apis/shape/circle-style-props); the key shape of `'rect-combo'` is ['rect'](/apis/shape/rect-style-props). -**Type**: + -```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. - [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. - position?: 'top' | 'left' | 'bottom' | 'right' | [number, number]; - }; -}; -``` + -The style of the anchor shapes can be referred to as [CircleStyleProps](/en/apis/shape/circle-style-props). + -### 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**: + -```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 - [shapeId: string]: ShapeStyleProps; -} -``` +:::info +The following attributes are inherited from [ComboModel](./ComboModel.en.md) +::: -The style configurations for different shapes can be referred to in the corresponding documentation under the [Shape Style](/en/apis/shape/overview) directory. + diff --git a/packages/site/docs/apis/data/ComboDisplayModel.zh.md b/packages/site/docs/apis/data/ComboDisplayModel.zh.md index 3e004e0279a..344da67ed00 100644 --- a/packages/site/docs/apis/data/ComboDisplayModel.zh.md +++ b/packages/site/docs/apis/data/ComboDisplayModel.zh.md @@ -1,100 +1,44 @@ --- title: ComboDisplayModel 渲染数据 -order: 12 +order: 11 --- -ComboDisplayModel（Combo 的渲染/展示数据） 由 ComboModel（内部流转数据）通过您配置在图实例上 mapper（[specification.combo](../graph/Specification.zh.md#combo)）映射后的结果，仅用于内部渲染时消费，您在其他任何地方不会消费它。数据类型继承自内部流转的 Combo 数据类型 [ComboModel](./ComboModel.zh.md)，扩展后定义如下： +ComboDisplayModel（Combo 的渲染数据）是 [ComboModel](./ComboModel.zh.md) 经过[数据映射](./DataIntro.zh.md#mappers-数据映射)后的结果，该数据仅能被 G6 访问。 -```typescript -interface ComboDisplayModel { - id: string | number; - data: ComboDisplayModelData; // 扩展了 ComboModelData -} -``` - -## id 必须 - -**类型**：`string | number` - -Combo 的唯一 ID，Combo 创建后，ID 不可被修改。 + ## data 必须 -ComboDisplayModelData 中的数据已经是 ComboModel 通过 Graph 实例上配置的对应 mapper（[specification.combo](../graph/Specification.zh.md#combo)）映射后的结果，这里面应当存储所有 ComboModel 的内容，再额外加上许多的图形样式配置。 +基于 [ComboModel](./ComboModel.zh.md) 的内容额外加上了图形样式配置。 -### animates - -**类型**：`IAnimates` - -出现、消失、显示、隐藏、更新时，各个图形动画配置。支持一次更新，多个动画的顺序执行（`order`）。[动画 DEMO](/zh/examples/scatter/changePosition/#itemAnimates) - - + ### keyShape -**类型**：`ShapeStyle`，根据不同的主图形，图形样式配置项不同。例如 - -Combo 主图形的样式配置。Combo 的主图形表达了 Combo 的主要形状。还用于计算边的连入位置。 `'circle-combo'` 的主图形是 `'circle'` 参考 [CircleStyleProps](/apis/shape/circle-style-props)；`'rect-combo'` 的主图形是 `'rect'` 参考 [RectStyleProps](/apis/shape/rect-style-props) - -### haloShape - -**类型**：`ShapeStyle`，`haloShape` - -在内置的 Combo 和主题中，`haloShape` 指的是 Combo 在 `active`（一般在鼠标 hover 时该状态被触发） 和 `selected`（一般在选中状态下该状态被触发） 状态下，主图形 (`keyShape`) 周围展示的光晕效果的图形。在内置 Combo 的逻辑中，`haloShape` 的图形类型、颜色跟随主图形 (`keyShape`) 的图形类型跟随主图形(`keyShape`)根据不同的主图形，图形样式配置项不同。例如 `'circle-combo'` 的主图形是 `'circle'` 参考 [CircleStyleProps](/apis/shape/circle-style-props)；`'rect-combo'` 的主图形是 `'rect'` 参考 [RectStyleProps](/apis/shape/rect-style-props) - - - -### labelBackgroundShape - -**类型**： - -```typescript -ShapeStyle & { - padding?: number | number[]; // 文本距离背景矩形四周的留白距离 -}; -``` - -> 其中，参考矩形样式类型 [RectStyleProps](/apis/shape/rect-style-props) - -Combo 的文本的背景图形，是一个矩形。若不设置则不显示。设置为 `{}` 将使用主题中默认的样式显示文本背景图形。 - - +**类型**：`ShapeStyle` -### anchorShapes +主图形的样式配置 -**类型**： +> `'circle-combo'` 的主图形是 ['circle'](/apis/shape/circle-style-props)；`'rect-combo'` 的主图形是 ['rect'](/apis/shape/rect-style-props) -```typescript -// 外层可配置对所有连接桩（圆形）的样式，优先级低于单独的连接桩配置 -CircleStyleProps & { - // 单独的连接桩图形配置，优先级高于外层的 CircleStyleProps - [key: number]: CircleStyleProps & { - // 该连接桩的位置，可配置字符串或数字数组表示相对于主图形 (keyShape) 包围盒的百分比位置，例如 [0.5, 1] 表示位于主图形的右侧中间 - position?: 'top' | 'left' | 'bottom' | 'right' | [number, number]; - }; -}; -``` + -- [CircleStyleProps](/apis/shape/circle-style-props) + -Combo 四周的边连入位置圆形图形（连接桩），anchorShapes 配置的是多个连接桩。 + -### otherShapes + -**类型**： + -```typescript -{ - // key 为图形 id，规范格式为 xxShape - // value 为图形样式配置（不同图形配置不同，见图形相关文档），以及图形的动画 - [shapeId: string]: ShapeStyleProps; -} -``` + -> 其中，不同的图形样式参考[图形样式](/apis/shape/overview)目录下对应的图形类型文档。 +:::info{title=提示} +下列属性继承自 [ComboModel](./ComboModel.zh.md) +::: -上面所有的 xxShape(s) 均为 G6 定义的规范 Combo 中可能存在的图形。自定义 Combo 中的其他图形应当定义和配置在 `otherShapes` 中。 + diff --git a/packages/site/docs/apis/data/ComboModel.en.md b/packages/site/docs/apis/data/ComboModel.en.md index 45f53e239d1..5ddedeee698 100644 --- a/packages/site/docs/apis/data/ComboModel.en.md +++ b/packages/site/docs/apis/data/ComboModel.en.md @@ -1,57 +1,14 @@ --- title: ComboModel -order: 8 +order: 10 --- -ComboModel is the combo data that is internally circulated, which is calculated from `ComboUserModel` through transformations on the graph instance. The data you consume anywhere later is based on this data. Each item in Combo inherits from [ComboUserModel](./ComboUserModel.en.md) and is defined as follows after extension: +ComboModel is the internal combo data, which is obtained by [ComboUserModel](./ComboUserModel.en.md) through [transforms](./DataIntro.en.md#transforms). This is the data you consume anywhere later. -```typescript -interface ComboModel { - id: string | number; - data: ComboModelData; // = ComboModelData -} -``` - -## id Required - -The unique ID of the combo. After the combo is created, the ID cannot be modified. - -**Type**: `string | number` + ## data Required -The data in InnerModelData has been generated from UserModelData through a series of transform functions on the graph instance. The business data may have been transformed, filtered, and merged. - -### type - -The rendering type of the combo, which can be a combo type registered on the graph class. The built-in and default registered types are `'circle-combo'` and `'rect-combo'`. The default is `'circle-combo'`. - -**Type**: `string` - -### visible - -Whether the combo is displayed by default. - -**Type**: `boolean` - -### color - -The theme color of the key shape (`keyShape`) of the combo, with a value in hexadecimal string format. Provided for simple configuration. More style configurations should be configured in the Combo mapper of the graph instance, including keyShape and various shape styles. - -**Type**: `string` - -### label - -The text content of the `labelShape` of the combo. Provided for simple configuration. More style configurations should be configured in the Combo mapper of the graph instance, including the `text` value of `labelShape` or other shape styles. - -**Type**: `string` - - - -### parentId - -The ID of the parent combo to which the combo belongs. `undefined` means it is a root. - -**Type**: `string | number` + diff --git a/packages/site/docs/apis/data/ComboModel.zh.md b/packages/site/docs/apis/data/ComboModel.zh.md index 3de555e26c8..33093ca18b2 100644 --- a/packages/site/docs/apis/data/ComboModel.zh.md +++ b/packages/site/docs/apis/data/ComboModel.zh.md @@ -1,57 +1,14 @@ --- title: ComboModel 内部数据 -order: 8 +order: 10 --- -ComboModel 为内部流转的 combo 数据，由 ComboUserModel 经过皮质在图实例上的 transforms 计算而得。后续您在任意地方消费的都是这一份数据。每一项 Combo 的类型继承自 [ComboUserModel](./ComboUserModel.zh.md)，扩展后定义如下： +ComboModel 为内部流转的 combo 数据，由 [ComboUserModel](./ComboUserModel.zh.md) 经过[数据转换](./DataIntro.zh.md#transforms-数据转换)后得到。后续您在任意地方消费的都是这一份数据。 -```typescript -interface ComboModel { - id: string | number; - data: ComboModelData; // = ComboModelData -} -``` - -## id 必须 - -节点的唯一 ID，节点创建后，ID 不可被修改。 - -**类型**：`string | number` + ## data 必须 -InnerModelData 中的数据已经是 UserModelData 通过 Graph 实例的一系列 transform 函数生成的结果，业务数据可能已经被转换、过滤、合并。 - -### type - -Combo 的渲染类型，可以是已经注册到图类上的 Combo 类型，内置并默认注册的有 `'circle-combo'`，`'rect-combo'`。默认为 `'circle-combo'`。 - -**类型**： `string` - -### visible - -Combo 是否默认展示出来。 - -**类型**： `boolean` - -### color - -该 Combo 的主图形（keyShape）的主题色，值为十六进制字符串。为方便简单配置而提供，更多的样式配置应当在 Graph 实例的 Combo mapper 中配置 keyShape 以及各种图形的图形样式。 - -**类型**： `string` - -### label - -Combo `labelShape` 的文本内容。为方便简单配置而提供，更多的样式配置应当在 Graph 实例的 Combo mapper 中配置 `labelShape` 的 `text` 值或其他图形样式。 - -**类型**： `string` - - - -### parentId - -在有 Combo 的图上表示该 Combo 所属的父亲 Combo 的 id。`undefined` 表示当前 Combo 是一个根。 - -**类型**： `string | number` + diff --git a/packages/site/docs/apis/data/ComboUserModel.en.md b/packages/site/docs/apis/data/ComboUserModel.en.md index 20bfac3f327..4e4be98d311 100644 --- a/packages/site/docs/apis/data/ComboUserModel.en.md +++ b/packages/site/docs/apis/data/ComboUserModel.en.md @@ -1,59 +1,22 @@ --- title: ComboUserModel -order: 5 +order: 9 --- -Data Type Definitions for Each Combo model is: +The `combos` part of the user input data. -```typescript -interface ComboUserModel { - id: string | number; - data: NodeUserModelData; -} -``` - -## id Required +An example of a data item: -The unique ID of the combo. Once the combo is created, the ID cannot be changed. +```json +{ "id": "combo-1", "data": {} } +``` -**Type**: `string | number`; + ## data Required -**Type**: `ComboUserModelData` - -The data of the combo, excluding the ID. It is recommended to store business data. If data conversion is needed, it can be done through the transform function configured in the Graph instance, see [Specification.transforms](../graph/Specification.en.md#transforms). The converted data becomes the internal data that circulates within the graph. All subsequent accesses will be based on this internal data. For rendering-related data, it can be mapped using the combo mapper of the Graph instance, see [Specification.combo](../graph/Specification.en.md#combo). The input of this mapper is the internal data, and the generated display data is only consumed by the renderer. Users will not obtain it anywhere. +The Combo data -### type - -Type: string The rendering type of the Combo, which can be a Combo type that has been registered with the graph class. Built-in and default registered types include `'circle-combo'`, `'rect-combo'`. - -**Type**: `string`; - -### visible - -Whether the Combo is displayed by default. - -**Type**: `boolean`; - -### color - -The theme color of the main shape (keyShape) of the Combo, represented as a hexadecimal string. This is provided for simple configuration convenience. More style configurations should be made in the Combo mapper of the Graph instance, where keyShape and various shapes styles can be configured. - -**Type**: `string`; - -### label - -The text content of the Combo labelShape. This is provided for simple configuration convenience. More style configurations should be made in the Combo mapper of the Graph instance, where the text value or other shape styles of the labelShape can be configured. - -**Type**: `string`; - - - -### parentId - -Represents the id of the parent Combo that the Combo belongs to on a graph with Combos. - -**Type**: `string | number`; + diff --git a/packages/site/docs/apis/data/ComboUserModel.zh.md b/packages/site/docs/apis/data/ComboUserModel.zh.md index fe35cf4d9da..b797a9f6864 100644 --- a/packages/site/docs/apis/data/ComboUserModel.zh.md +++ b/packages/site/docs/apis/data/ComboUserModel.zh.md @@ -1,59 +1,22 @@ --- title: ComboUserModel 输入数据 -order: 5 +order: 9 --- -用户输入数据中，每一项 Combo 数据类型说明如下。 +用户输入数据中的 `combos` 部分内容。 -```typescript -interface ComboUserModel { - id: string | number; - data: NodeUserModelData; -} -``` - -## id 必须 +下面是一个数据项实例： -Combo 的唯一 ID，Combo 创建后，ID 不可被修改。 +```json +{ "id": "combo-1", "data": {} } +``` -**类型**：`string | number` + ## data 必须 -**类型**：[ComboUserModelData](#combousermodeldatatype) - -Combo 除 ID 以外的的数据，建议存放业务数据。若需要进行数据转换，可通过 Graph 实例的 transform 配置转换函数，见 [Specification.transforms](../graph/Specification.zh.md#transforms)转换后的数据成为内部流通的数据 Inner Data，后续所有地方获取的都是这份内部数据。与渲染有关的可以通过 Graph 实例的 combo mapper 进行映射，见 [Specification.combo](../graph/Specification.zh.md#combo)，该 mapper 的输入是 Inner Data，生成的结果 Display Data 只交给渲染器消费，用户不会在任何地方获得。 +Combo 数据 -### type - -Combo 的渲染类型，可以是已经注册到图类上的 Combo 类型，内置并默认注册的有 `'circle-combo'`，`'rect-combo'`。 - -**类型**： `string` - -### visible - -Combo 是否默认展示出来。 - -**类型**： `boolean` - -### color - -该 Combo 的主图形（keyShape）的主题色，值为十六进制字符串。为方便简单配置而提供，更多的样式配置应当在 Graph 实例的 Combo mapper 中配置 keyShape 以及各种图形的图形样式。 - -**类型**： `string` - -### label - -Combo labelShape 的文本内容。为方便简单配置而提供，更多的样式配置应当在 Graph 实例的 Combo mapper 中配置 labelShape 的 text 值或其他图形样式。 - -**类型**： `string` - - - -### parentId - -在有 Combo 的图上表示该 Combo 所属的父亲 Combo 的 id。 - -**类型**： `string | number` + diff --git a/packages/site/docs/apis/data/CustomTransform.en.md b/packages/site/docs/apis/data/CustomTransform.en.md index 00f539b1f99..c74fd3d008b 100644 --- a/packages/site/docs/apis/data/CustomTransform.en.md +++ b/packages/site/docs/apis/data/CustomTransform.en.md @@ -1,6 +1,6 @@ --- title: Custom Data Processor -order: 13 +order: 12 --- > Before proceeding with a custom data processor, please ensure you are familiar with the G6 data flow and structure. Related content can be found in the [Data Introduction Document](./DataIntro.en.md). diff --git a/packages/site/docs/apis/data/CustomTransform.zh.md b/packages/site/docs/apis/data/CustomTransform.zh.md index bdd5c303215..8b0755fdc08 100644 --- a/packages/site/docs/apis/data/CustomTransform.zh.md +++ b/packages/site/docs/apis/data/CustomTransform.zh.md @@ -1,6 +1,6 @@ --- title: 自定义数据处理器 -order: 13 +order: 12 --- > 在进行自定义数据处理器之前，请确保您已经熟悉了 G6 数据流和数据结构。相关内容可以参考[数据介绍文档](./DataIntro.zh.md) diff --git a/packages/site/docs/apis/data/DataIntro.en.md b/packages/site/docs/apis/data/DataIntro.en.md index f83c563b6f2..f5cdea05ee0 100644 --- a/packages/site/docs/apis/data/DataIntro.en.md +++ b/packages/site/docs/apis/data/DataIntro.en.md @@ -1,5 +1,5 @@ --- -title: Data Intro +title: Data Introduction order: 0 --- diff --git a/packages/site/docs/apis/data/EdgeDisplayModel.en.md b/packages/site/docs/apis/data/EdgeDisplayModel.en.md index 0d36da418db..03c0298b51a 100644 --- a/packages/site/docs/apis/data/EdgeDisplayModel.en.md +++ b/packages/site/docs/apis/data/EdgeDisplayModel.en.md @@ -1,37 +1,24 @@ --- title: EdgeDisplayModel -order: 11 +order: 8 --- -EdgeDisplayModel (edge rendering/display data) is the result of mapping the EdgeModel (internal flow data) configured on the graph instance using the mapper ([specification.edge](../graph/Specification.en.md#edge)). It is only consumed internally for rendering and will not be consumed anywhere else. The data type inherits from the [EdgeModel](./EdgeModel.en.md) data type [EdgeModel](./EdgeModel.en.md) and is extended as follows: +EdgeDisplayModel (the rendering data of Edge) is the result of [data mapping](./DataIntro.en.md#mappers) of [EdgeModel](./EdgeModel.en.md), which can only be accessed by G6. -```typescript -interface EdgeDisplayModel { - id: string | number; - source: string | number; - target: string | number; - data: EdgeDisplayModelData; // extends EdgeModelData -} -``` + -## id Required - -The unique ID of the edge. Once the edge is created, the ID cannot be modified. +## source Required **Type**: `string | number` -## source Required - The ID of the source node of the edge. It should correspond to an item in `nodes`, otherwise the edge data will not be added to the graph. -**Type**: `string | number` - ## target Required -The ID of the target node of the edge. It should correspond to an item in `nodes`, otherwise the edge data will not be added to the graph. - **Type**: `string | number` +The ID of the target node of the edge. It should correspond to an item in `nodes`, otherwise the edge data will not be added to the graph. + ## data Required The data in EdgeDisplayModelData is the result of the EdgeModel being mapped through the mapper ([specification.edge](../graph/Specification.en.md#edge)) configured on the Graph instance. It should store all the contents of the EdgeModel, as well as many shape style configurations. @@ -40,13 +27,7 @@ The data in EdgeDisplayModelData is the result of the EdgeModel being mapped thr -### animates - -Animations for the appearance, disappearance, display, hiding, and updating of various shapes in the edge. Supports sequential execution of multiple animations in one update (order). [Animation Demo](/en/examples/scatter/changePosition/#itemAnimates). - -**Type**: `IAnimates` - - + ### keyShape @@ -54,79 +35,18 @@ The style configuration of the key shape of the edge. The key shape of the edge **Type**: `ShapeStyle`, the shape style configuration of the key shape depends on the different main shapes. For example, the key shape of `'line-edge'` is `'line'`, please refer to [LineStyleProps](/en/apis/shape/line-style-props); the key shape of `'cubic-edge'` is `'path'`, please refer to [PathStyleProps](/en/apis/shape/path-style-props). -### 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**: - -```typescript -Partial< - TextStyleProps & - ImageStyleProps & - ShapeStyle & { - offsetX?: number; - offsetY?: number; - lod?: number; - } ->; -``` - -Among them, the related shapes styles refer to [TextStyleProps](/en/apis/shape/text-style-props) and [ImageStyleProps](/en/apis/shape/image-style-props). - -### haloShape - -In built-in edges and themes, `haloShape` refers to the halo effect displayed around the key shape (`keyShape`) of the edge in the `active` state (usually triggered when the mouse hovers over) and the `selected` state (usually triggered in the selected state). In the logic of built-in edges, the shape type and color of `haloShape` follow the key shape (`keyShape`). - -**Type**: `ShapeStyle`, the shape type of haloShape follows the key shape (`keyShape`). The shape style configuration is different for different main shapes. For example, the key shape of `'line-edge'` is `'line'`, please refer to [LineStyleProps](/en/apis/shape/line-style-props); the key shape of `'cubic-edge'` is `'path'`, please refer to [PathStyleProps](/en/apis/shape/path-style-props). - - - -### labelBackgroundShape - -The background shape of the text of the edge, which is a rectangle. If not set, it will not be displayed. Setting it to `{}` will use the default style in the theme to display the background shape of the text. - -**Type**: - -```typescript -ShapeStyle & { - padding?: number | number[]; // The padding distance between the text and the background rectangle -}; -``` - -Among them, please refer to the rectangle style type [RectStyleProps](/en/apis/shape/rect-style-props). - -### - -The badge of the edge, including text and background shape. Unlike nodes that support multiple badges, the built-in edge only supports one badge, which is located behind the text. - -**Type**: + -```typescript - ShapeStyleProps & { - /** - * The background color of the badge - */ - color?: string; - /** - * The color of the text on the badge - */ - textColor?: string; - } -``` + -### otherShapes + -上面所有的 xxShape(s) 均为 G6 All the xxShape(s) mentioned above are possible shapes in the standard edge defined by G6. Other shapes in custom edges should be defined and configured in `otherShapes`. + -**Type**: + -```typescript -{ - // The key is the shape id, the format specified by the specification is xxShape - // The value is the shape style configuration (different shapes have different configurations, see the relevant shapes documentation) and the animation of the shape - [shapeId: string]: ShapeStyleProps; -} -``` +:::info +The following attributes are inherited from [EdgeModel](./EdgeModel.en.md) +::: -Among them, different shape styles refer to the corresponding shape type documents under the [ShapeStyleProps](/en/apis/shape/overview) directory. + diff --git a/packages/site/docs/apis/data/EdgeDisplayModel.zh.md b/packages/site/docs/apis/data/EdgeDisplayModel.zh.md index 2d8369661ce..5b438370e7e 100644 --- a/packages/site/docs/apis/data/EdgeDisplayModel.zh.md +++ b/packages/site/docs/apis/data/EdgeDisplayModel.zh.md @@ -1,24 +1,11 @@ --- title: EdgeDisplayModel 渲染数据 -order: 11 +order: 8 --- -EdgeDisplayModel（边的渲染/展示数据） 由 EdgeModel（内部流转数据）通过您配置在图实例上 mapper（[specification.edge](../graph/Specification.zh.md#edge)）映射后的结果，仅用于内部渲染时消费，您在其他任何地方不会消费它。数据类型继承自内部流转的边数据类型 [EdgeModel](./EdgeModel.zh.md)，扩展后定义如下： +EdgeDisplayModel（边的渲染数据）是 [EdgeModel](./EdgeModel.zh.md) 经过[数据映射](./DataIntro.zh.md#mappers-数据映射)后的结果，该数据仅能被 G6 访问。 -```typescript -interface EdgeDisplayModel { - id: string | number; - source: string | number; - target: string | number; - data: EdgeDisplayModelData; // 扩展了 EdgeModelData -} -``` - -## id 必须 - -边的唯一 ID，边创建后，ID 不可被修改。 - -**类型**：`string | number` + ## source 必须 @@ -34,101 +21,34 @@ interface EdgeDisplayModel { ## data 必须 -EdgeDisplayModelData 中的数据已经是 EdgeModel 通过 Graph 实例上配置的对应 mapper（[specification.edge](../graph/Specification.zh.md#edge)）映射后的结果，这里面应当存储所有 EdgeModel 的内容，再额外加上许多的图形样式配置。 +基于 [EdgeModel](./EdgeModel.zh.md) 的内容额外加上了图形样式配置。 -### animates - -出现、消失、显示、隐藏、更新时，各个图形动画配置。支持一次更新，多个动画的顺序执行（`order`）。[动画 DEMO](/zh/examples/scatter/changePosition/#itemAnimates) - -**类型**：`IAnimates` - - + ### keyShape -边主图形的样式配置。边的主图形是边的整体路径图形。 - -**类型**：`ShapeStyle`，根据不同的主图形，图形样式配置项不同。例如 `'line-edge'` 的主图形是 `'line'` 参考 [LineStyleProps](/apis/shape/line-style-props)；`'cubic-edge'` 的主图形是 `'path'` 参考 [PathStyleProps](/apis/shape/path-style-props) - -### iconShape - -边的图标图形（内置边支持，继承这些内置边的自定义边在无复写相关内容的情况下同样支持），位于文本前方。可以是图片或文本，文本支持 iconfont。 - -**类型**： - -```typescript -Partial< - TextStyleProps & - ImageStyleProps & - ShapeStyle & { - offsetX?: number; - offsetY?: number; - lod?: number; - } ->; -``` - -- [TextStyleProps](/apis/shape/text-style-props) - -- [ImageStyleProps](/apis/shape/image-style-props) - -### haloShape - -在内置的边和主题中，`haloShape` 指的是边在 `active`（一般在鼠标 hover 时该状态被触发） 和 `selected`（一般在选中状态下该状态被触发） 状态下，主图形 (`keyShape`) 周围展示的光晕效果的图形。在内置边的逻辑中，`haloShape` 的图形类型、颜色跟随主图形 (`keyShape`) - -**类型**：`ShapeStyle`，`haloShape` 的图形类型跟随主图形(`keyShape`)根据不同的主图形，图形样式配置项不同。例如 `'line-edge'` 的主图形是 `'line'` 参考 [LineStyleProps](/apis/shape/line-style-props)；`'cubic-edge'` 的主图形是 `'path'` 参考 [PathStyleProps](/apis/shape/path-style-props) - - - -### labelBackgroundShape - -边的文本的背景图形，是一个矩形。若不设置则不显示。设置为 `{}` 将使用主题中默认的样式显示文本背景图形。 - -**类型**： - -```typescript -ShapeStyle & { - padding?: number | number[]; // 文本距离背景矩形四周的留白距离 -}; -``` - -其中，参考矩形样式类型 [RectStyleProps](/apis/shape/rect-style-props) +**类型**：`ShapeStyle` -### badgeShape +> `'line-edge'` 的主图形是 ['line'](/apis/shape/line-style-props)；`'cubic-edge'` 的主图形是 ['path'](/apis/shape/path-style-props) -边的徽标，包括了文本和背景图形。和节点支持多个徽标不同，内置边仅支持一个徽标，位于文本后方。 +边主图形的样式配置。边的主图形是边的路径图形 -**类型**： + -```typescript - ShapeStyleProps & { - /** - * 徽标的背景颜色 - */ - color?: string; - /** - * 徽标上文本的颜色 - */ - textColor?: string; - } -``` + -### otherShapes + -上面所有的 xxShape(s) 均为 G6 定义的规范边中可能存在的图形。自定义边中的其他图形应当定义和配置在 `otherShapes` 中。 + -**类型**： + -```typescript -{ - // key 为图形 id，规范格式为 xxShape - // value 为图形样式配置（不同图形配置不同，见图形相关文档），以及图形的动画 - [shapeId: string]: ShapeStyleProps; -} -``` +:::info{title=提示} +下列属性继承自 [EdgeModel](./EdgeModel.zh.md) +::: -其中，不同的图形样式参考[图形样式](/apis/shape/overview)目录下对应的图形类型文档。 + diff --git a/packages/site/docs/apis/data/EdgeModel.en.md b/packages/site/docs/apis/data/EdgeModel.en.md index a72693b5fd9..f77153a84db 100644 --- a/packages/site/docs/apis/data/EdgeModel.en.md +++ b/packages/site/docs/apis/data/EdgeModel.en.md @@ -1,85 +1,26 @@ --- title: EdgeModel -order: 8 +order: 7 --- -EdgeModel represents the edge data that is internally passed through the `EdgeUserModel` and transformed on the graph instance. You consume this data anywhere afterwards. Each edge item extends from [EdgeUserModel](./EdgeUserModel.zh.md) and is defined as follows after expansion: +EdgeModel is the internal edge data, which is obtained by [EdgeUserModel](./EdgeUserModel.en.md) through [transforms](./DataIntro.en.md#transforms). This is the data you consume anywhere later. -```typescript -interface EdgeModel { - id: string | number; - source: string | number; - target: string | number; - data: EdgeModelData; // = EdgeModelData -} -``` + -## id Required - -The unique ID of the edge. Once the node is created, the ID cannot be modified. +## source Required **Type**: `string | number` -## source Required - The ID of the source node of the edge, which should correspond to an item in `nodes`. Otherwise, the edge data will not be added to the graph. -**Type**: `string | number` - ## target Required -The ID of the target node of the edge, which should correspond to an item in nodes. Otherwise, the edge data will not be added to the graph. - **Type**: `string | number` -## data Required +The ID of the target node of the edge, which should correspond to an item in nodes. Otherwise, the edge data will not be added to the graph. -The data in InnerModelData is the result of UserModelData transformed through a series of transform functions on the Graph instance. The business data may have been converted, filtered, and merged. +## data Required -### type - -The rendering type of the edge, which can be a registered edge type on the graph, with the built-in and default registered types being `'line-edge'` and `'loop-edge'`. The default value is `'line-edge'`. - -**Type**: `string`; - -### visible - -Whether the edge is displayed by default. - -**Type**: `boolean`; - -### color - -The theme color of the main shape (keyShape) of the edge, with a value in hexadecimal string format. This is provided for convenient simple configuration, and more style configurations should be configured in the edge mapper of the Graph instance for the keyShape and various shape styles. - -**Type**: `string`; - -### label - -The text content of the `labelShape` of the edge. This is provided for convenient simple configuration, and more style configurations should be configured in the edge mapper of the Graph instance for the text value or other shape styles of the `labelShape`. - -**Type**: `string`; - -### badge - -**Type**: `Badge` - - - -The configuration of the badge on the edge, with the built-in badge being drawn after the text. More style configurations should be configured in the edge mapper of the Graph instance for the shape styles of the `badgeShapes`. - - - -### sourceAnchor - -The `anchorPoints` on the source node indicate the allowed positions where related edges can connect, and is an array. The `sourceAnchor` of the edge indicates which anchor point to connect to when the edge connects to the starting point, corresponding to the index of the corresponding position in the `anchorPoints` of the source node. - -**Type**: `number`; - -### targetAnchor - -The `anchorPoints` on the target node indicate the allowed positions where related edges can connect, and is an array. The `targetAnchor` of the edge indicates which anchor point to connect to when the edge connects to the ending point, corresponding to the index of the corresponding position in the `anchorPoints` of the target node. - -**Type**: `number`; + diff --git a/packages/site/docs/apis/data/EdgeModel.zh.md b/packages/site/docs/apis/data/EdgeModel.zh.md index 5d0def90382..f8fa0e5582c 100644 --- a/packages/site/docs/apis/data/EdgeModel.zh.md +++ b/packages/site/docs/apis/data/EdgeModel.zh.md @@ -1,24 +1,11 @@ --- title: EdgeModel 内部数据 -order: 8 +order: 7 --- -EdgeModel 为内部流转的边数据，由 EdgeUserModel 经过皮质在图实例上的 transforms 计算而得。后续您在任意地方消费的都是这一份数据。每一项边的类型继承自 [EdgeUserModel](./EdgeUserModel.zh.md)，扩展后定义如下： +EdgeModel 为内部流转的边数据，由 [EdgeUserModel](./EdgeUserModel.zh.md) 经过[数据转换](./DataIntro.zh.md#transforms-数据转换)后得到。后续您在任意地方消费的都是这一份数据。 -```typescript -interface EdgeModel { - id: string | number; - source: string | number; - target: string | number; - data: EdgeModelData; // = EdgeModelData -} -``` - -## id 必须 - -**类型**：`string | number` - -边的唯一 ID，节点创建后，ID 不可被修改。 + ## source 必须 @@ -34,54 +21,6 @@ interface EdgeModel { ## data 必须 -InnerModelData 中的数据已经是 UserModelData 通过 Graph 实例的一系列 transform 函数生成的结果，业务数据可能已经被转换、过滤、合并。 - -### type - -**类型**：`string` - -边的渲染类型，可以是已经注册到图类上的边类型，内置并默认注册的有 `'line-edge'`，`'loop-edge'`。默认为 `'line-edge'`。 - -### visible - -**类型**：`boolean` - -边是否默认展示出来。 - -### color - -**类型**：`string` - -该边的主图形（keyShape）的主题色，值为十六进制字符串。为方便简单配置而提供，更多的样式配置应当在 Graph 实例的边 mapper 中配置 keyShape 以及各种图形的图形样式。 - -### label - -**类型**：`string` - -边 labelShape 的文本内容。为方便简单配置而提供，更多的样式配置应当在 Graph 实例的边 mapper 中配置 labelShape 的 text 值或其他图形样式。 - -### badge - -**类型**：`Badge` - - - -边上的徽标配置，内置边的徽标绘制在文本后方。更多的样式配置应当在 Graph 实例的边 mapper 中配置 badgeShapes 的图形样式。 - - - -边上的 icon 配置。内置边的 icon 绘制在文本后方。为方便简单配置而提供，更多的样式配置应当在 Graph 实例的边 mapper 中配置 iconShape 的图形样式。 - -### sourceAnchor - -**类型**：`number` - -起点节点上 `anchorPoints` 表示允许相关边连入的位置，是一个数组。而边的 `sourceAnchor` 表示了这条边连入起点时选择哪个锚点连入，对应了起点节点上 `anchorPoints` 对应位置的序号。 - -### targetAnchor - -**类型**：`number` - -终点节点上 `anchorPoints` 表示允许相关边连入的位置，是一个数组。而边的 `targetAnchor` 表示了这条边连入终点时选择哪个锚点连入，对应了起点节点上 `anchorPoints` 对应位置的序号。 + diff --git a/packages/site/docs/apis/data/EdgeUserModel.en.md b/packages/site/docs/apis/data/EdgeUserModel.en.md index 054c28ba06f..3862fc88011 100644 --- a/packages/site/docs/apis/data/EdgeUserModel.en.md +++ b/packages/site/docs/apis/data/EdgeUserModel.en.md @@ -1,24 +1,22 @@ --- title: EdgeUserModel -order: 4 +order: 6 --- -In the user input data, each edge model has the following type specifications. +The `edges` part of the user input data. -```typescript -interface EdgeUserModel { - id: string | number; - source: string | number; - target: string | number; - data: EdgeUserModelData; +An example of a data item: + +```json +{ + "id": "edge-1", + "source": "node-1", + "target": "node-2", + "data": {} } ``` -## id Required - -**Type**: `string | number` - -The unique ID of the edge. Once the edge is created, the ID cannot be changed. + ## source Required @@ -34,52 +32,8 @@ The ID of the target node of the edge. It should correspond to an item in `nodes ## data Required -The data of the edge, excluding the ID, source ID, and target ID. It is recommended to store business data. If data conversion is needed, it can be done through the transform function configured in the Graph instance, see [Specification.transforms](../graph/Specification.en.md#transforms). The converted data becomes the internal data that circulates within the graph. All subsequent accesses will be based on this internal data. For rendering-related data, it can be mapped using the edge mapper of the Graph instance, see [Specification.node](../graph/Specification.en.md#edge). The input of this mapper is the internal data, and the generated display data is only consumed by the renderer. Users will not obtain it anywhere. +The edge data. -### type - -**Type**: `string`; - -The rendering type of the edge. It can be a pre-registered edge type in the graph, with `'line-edge'` and `'loop-edge'` being the built-in and default options. - -### visible - -**Type**: `boolean`; - -Whether the edge is visible by default. - -### color - -**Type**: `string`; - -The main color of the key shape (main shape) of the edge. It is a hexadecimal string. This is provided for simple configuration purposes. More style configurations for the key shape and other shapes should be configured in the edge mapper of the graph instance. - -### label - -**Type**: `string`; - -The text content of the label shape on the edge. This is provided for simple configuration purposes. More style configurations for the label shape should be configured in the edge mapper of the graph instance. - -### badge - -**Type**: `Badge` - - - -The configuration of the badge on the edge. The built-in badge is drawn after the text. More style configurations for the badge shapes should be configured in the edge mapper of the graph instance. - - - -### sourceAnchor - -**Type**: `number`; - -The `anchorPoints` on the source node indicate the positions where the related edges can connect. It is an array. The `sourceAnchor` of the edge indicates which anchor point to connect when connecting to the source node. It corresponds to the index of the corresponding position in the `anchorPoints` array of the source node. - -### targetAnchor - -**Type**: `number`; - -The `anchorPoints` on the target node indicate the positions where the related edges can connect. It is an array. The `targetAnchor` of the edge indicates which anchor point to connect when connecting to the target node. It corresponds to the index of the corresponding position in the `anchorPoints` array of the target node. + diff --git a/packages/site/docs/apis/data/EdgeUserModel.zh.md b/packages/site/docs/apis/data/EdgeUserModel.zh.md index 7361611cc8f..7df7fb8879f 100644 --- a/packages/site/docs/apis/data/EdgeUserModel.zh.md +++ b/packages/site/docs/apis/data/EdgeUserModel.zh.md @@ -1,24 +1,22 @@ --- title: EdgeUserModel 输入数据 -order: 4 +order: 6 --- -用户输入数据中，每一项边数据类型说明如下。 +用户输入数据中的 `edges` 部分内容。 -```typescript -interface EdgeUserModel { - id: string | number; - source: string | number; - target: string | number; - data: EdgeUserModelData; +下面是一个数据项实例： + +```json +{ + "id": "edge-1", + "source": "node-1", + "target": "node-2", + "data": {} } ``` -## id 必须 - -边的唯一 ID，节点创建后，ID 不可被修改。 - -**类型**：`string | number` + ## source 必须 @@ -34,52 +32,8 @@ interface EdgeUserModel { ## data 必须 -边除 ID、起点 ID、终点 ID 以外的数据，建议存放业务数据。若需要进行数据转换，可通过 Graph 实例的 transform 配置转换函数，见 [Specification.transforms](../graph/Specification.zh.md#transforms)转换后的数据成为内部流通的数据 Inner Data，后续所有地方获取的都是这份内部数据。与渲染有关的可以通过 Graph 实例的边 mapper 进行映射，见 [Specification.edge](../graph/Specification.zh.md#edge)，该 mapper 的输入是 Inner Data，生成的结果 Display Data 只交给渲染器消费，用户不会在任何地方获得。 +边数据 -### type - -边的渲染类型，可以是已经注册到图类上的边类型，内置并默认注册的有 `'line-edge'`，`'loop-edge'`。 - -**类型**：`string` - -### visible - -边是否默认展示出来。 - -**类型**：`boolean` - -### color - -该边的主图形（keyShape）的主题色，值为十六进制字符串。为方便简单配置而提供，更多的样式配置应当在 Graph 实例的边 mapper 中配置 keyShape 以及各种图形的图形样式。 - -**类型**：`string` - -### label - -边 labelShape 的文本内容。为方便简单配置而提供，更多的样式配置应当在 Graph 实例的边 mapper 中配置 labelShape 的 text 值或其他图形样式。 - -**类型**：`string` - -### badge - -边上的徽标配置，内置边的徽标绘制在文本后方。更多的样式配置应当在 Graph 实例的边 mapper 中配置 badgeShapes 的图形样式。 - -**类型**：`Badge` - - - - - -### sourceAnchor - -起点节点上 `anchorPoints` 表示允许相关边连入的位置，是一个数组。而边的 `sourceAnchor` 表示了这条边连入起点时选择哪个锚点连入，对应了起点节点上 `anchorPoints` 对应位置的序号。 - -**类型**：`number` - -### targetAnchor - -终点节点上 `anchorPoints` 表示允许相关边连入的位置，是一个数组。而边的 `targetAnchor` 表示了这条边连入终点时选择哪个锚点连入，对应了起点节点上 `anchorPoints` 对应位置的序号。 - -**类型**：`number` + diff --git a/packages/site/docs/apis/data/NodeDisplayModel.en.md b/packages/site/docs/apis/data/NodeDisplayModel.en.md index f319d9b384b..945b7567b83 100644 --- a/packages/site/docs/apis/data/NodeDisplayModel.en.md +++ b/packages/site/docs/apis/data/NodeDisplayModel.en.md @@ -1,15 +1,11 @@ --- title: NodeDisplayModel -order: 10 +order: 5 --- -NodeDisplayModel is the result of NodeModel (internal data) through [data mapping](/en/apis/data/data-intro#mappers-data-mapping), which can only be accessed by G6. +NodeDisplayModel (the rendering data of Node) is the result of [data mapping](./DataIntro.en.md#mappers) of [NodeModel](./NodeModel.en.md), which can only be accessed by G6. -## id Required - -**Type**: `string | number` - -The unique ID of the node. Once the node is created, the ID cannot be modified. + ## data Required @@ -19,98 +15,32 @@ NodeDisplayModelData adds graphic style configuration on the basis of [NodeModel -### animates - -Configuration of shape animations when the node appears, disappears, shows, hides, or updates. Supports sequential execution of multiple animations (order). [Animation Demo](/en/examples/scatter/changePosition/#itemAnimates). - -**Type**: `IAnimates` - - + ### keyShape -Configuration of the main shape style of the node. The main shape of a node represents the primary shape of the node and is also used to calculate the position where edges connect. - -**Type**: `ShapeStyle`, which varies depending on the main shape. For example, the main shape of `'circle-node'` is `'circle'`, refer to [Circle Graphic Style](/en/apis/shape/circle-style-props); the main shape of `'image-node'` is `'image'`, refer to [Image Graphic Style](/en/apis/shape/image-style-props). - -### iconShape - -The icon shape 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**: - -```typescript -Partial< - TextStyleProps & - ImageStyleProps & - ShapeStyle & { - offsetX?: number; - offsetY?: number; - lod?: number; - } ->; -``` +**Type**: `ShapeStyle` -Where the relevant shape styles refer to [TextStyleProps](/en/apis/shape/text-style-props) and [ImageStyleProps](/en/apis/shape/image-style-props). +> Which varies depending on the main shape. For example, the main shape of `'circle-node'` is `'circle'`, refer to [Circle Graphic Style](/en/apis/shape/circle-style-props); the main shape of `'image-node'` is `'image'`, refer to [Image Graphic Style](/en/apis/shape/image-style-props). -### haloShape - -In built-in nodes and themes, `haloShape` refers to the halo effect shape displayed around the main shape (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 shape type and color of `haloShape` follow the main shape (`keyShape`). - -**Type**: `ShapeStyle`, the shape type of `haloShape` follows the main shape (`keyShape`). The shape style configuration varies depending on the main shape. - - - -### labelBackgroundShape - -The background shape of the text of the node, which is a rectangle. If not set, it will not be displayed. Setting it to `{}` will use the default style in the theme to display the background shape of the text. - -**Type**: - -```typescript -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](/en/apis/shape/rect-style-props). - - - -### anchorShapes +Configuration of the main shape style of the node. The main shape of a node represents the primary shape of the node and is also used to calculate the position where edges connect. -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). + -**Type**: + -```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 & { - // Individual anchor shape configuration, - // with higher priority than the outer circleStyleProps - [key: number]: CircleStyleProps & { - // The position of this anchor shape, can be configured as a string or number array representing the percentage position relative to the key shape (keyShape) bounding box, - // for example, [0.5, 1] means it is located in the middle right of the key shape - position?: 'top' | 'left' | 'bottom' | 'right' | [number, number]; - }; -}; -``` + -The related circle style can be referred to in [CircleStyleProps](/en/apis/shape/circle-style-props). + -### 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**: + -```typescript -{ - // 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; -} -``` +:::info +The following attributes are inherited from [NodeModel](./NodeModel.en.md) +::: -The different shape styles can be referred to in the corresponding shape type documentation under the [Shape Style](/en/apis/shape/overview) directory. + diff --git a/packages/site/docs/apis/data/NodeDisplayModel.zh.md b/packages/site/docs/apis/data/NodeDisplayModel.zh.md index bc77b738d81..14c8356cf91 100644 --- a/packages/site/docs/apis/data/NodeDisplayModel.zh.md +++ b/packages/site/docs/apis/data/NodeDisplayModel.zh.md @@ -1,115 +1,46 @@ --- title: NodeDisplayModel 渲染数据 -order: 10 +order: 5 --- -NodeDisplayModel（节点的渲染数据） 由 NodeModel（内部流转数据）通过[数据映射](/apis/data/data-intro#mappers-数据映射)得到的结果，该数据仅能被 G6 访问。 +NodeDisplayModel（节点的渲染数据）是 [NodeModel](./NodeModel.zh.md) 通过[数据映射](./DataIntro.zh.md#transforms-数据转换)后的结果，该数据仅能被 G6 访问。 -## id 必须 - -节点的唯一 ID，节点创建后，ID 不可被修改。 - -**类型**：`string | number` + ## data 必须 -NodeDisplayModelData 数据在 [NodeModel](./NodeModel.zh.md) 基础上额外添加了图形样式配置。 +基于 [NodeModel](./NodeModel.zh.md) 的内容额外加上了图形样式配置。 -### animates - -出现、消失、显示、隐藏、更新时，各个图形动画配置。支持一次更新，多个动画的顺序执行（`order`）。[动画 DEMO](/zh/examples/scatter/changePosition/#itemAnimates) - -**类型**：`IAnimates` - - + ### keyShape -节点主图形的样式配置。节点的主图形表达了节点的主要形状。还用于计算边的连入位置。 - -**类型**：`ShapeStyle`，根据不同的主图形，图形样式配置项不同。例如 `'circle-node'` 的主图形是 `'circle'` 参考 [CircleStyleProps](/apis/shape/circle-style-props)；`'image-node'` 的主图形是 `'image'` 参考 [ImageStyleProps](/apis/shape/image-style-props) - -### iconShape - -节点中心的图标图形（除 `'modelRect-node'` 以外的内置节点支持，继承这些内置节点的自定义节点在无复写相关内容的情况下同样支持），可以是图片或文本，文本支持 iconfont (设置 `fontFamily: 'iconfont'`) - -**类型**： - -```typescript -Partial< - TextStyleProps & - ImageStyleProps & - ShapeStyle & { - offsetX?: number; - offsetY?: number; - lod?: number; - } ->; -``` - -- [TextStyleProps](/apis/shape/text-style-props) +**类型**：`ShapeStyleProps` -- [ImageStyleProps](/apis/shape/image-style-props) +> `'circle-node'` 的主图形是 ['circle'](/apis/shape/circle-style-props)；`'image-node'` 的主图形是 ['image'](/apis/shape/image-style-props) -### haloShape - -在内置的节点和主题中，`haloShape` 指的是节点在 `active`（一般在鼠标 hover 时该状态被触发） 和 `selected`（一般在选中状态下该状态被触发） 状态下，主图形 (`keyShape`) 周围展示的光晕效果的图形。在内置节点的逻辑中，`haloShape` 的图形类型、颜色跟随主图形 (`keyShape`) - -**类型**：`ShapeStyle`，`haloShape` 的图形类型跟随主图形(`keyShape`)根据不同的主图形，图形样式配置项不同。 - - - -### labelBackgroundShape - -节点的文本的背景图形，是一个矩形。若不设置则不显示。设置为 `{}` 将使用主题中默认的样式显示文本背景图形。 - -**类型**： - -```typescript -ShapeStyle & { - padding?: number | number[]; // 文本距离背景矩形四周的留白距离 -}; -``` - -其中，参考矩形样式类型 [RectStyleProps](/apis/shape/rect-style-props) - - - -### anchorShapes +节点主图形的样式配置。节点的主图形表达了节点的主要形状。还用于计算边的连入位置。 -节点四周的边连入位置圆形图形（连接桩），anchorShapes 配置的是多个连接桩。[节点连接桩 DEMO](/zh/examples/item/defaultNodes/#circle) + -**类型**： + -```typescript -// 外层可配置对所有连接桩（圆形）的样式，优先级低于单独的连接桩配置 -CircleStyleProps & { - // 单独的连接桩图形配置，优先级高于外层的 CircleStyleProps - [key: number]: CircleStyleProps & { - // 该连接桩的位置，可配置字符串或数字数组表示相对于主图形 (keyShape) 包围盒的百分比位置，例如 [0.5, 1] 表示位于主图形的右侧中间 - position?: 'top' | 'left' | 'bottom' | 'right' | [number, number]; - }; -}; -``` + -- [CircleStyleProps](/apis/shape/circle-style-props) + -### otherShapes + -上面所有的 xxShape(s) 均为 G6 定义的规范节点中可能存在的图形。自定义节点中的其他图形应当定义和配置在 `otherShapes` 中。 + -**类型**： + -```typescript -{ - // key 为图形 id，规范格式为 xxShape - // value 为图形样式配置（不同图形配置不同，见图形相关文档），以及图形的动画 - [shapeId: string]: ShapeStyleProps; -} -``` +:::info{title=提示} +下列属性继承自 [NodeModel](./NodeModel.zh.md) +::: -其中，不同的图形样式参考[图形样式](/apis/shape/overview)目录下对应的图形类型文档。 + diff --git a/packages/site/docs/apis/data/NodeModel.en.md b/packages/site/docs/apis/data/NodeModel.en.md index e908c2210c6..82e54edb455 100644 --- a/packages/site/docs/apis/data/NodeModel.en.md +++ b/packages/site/docs/apis/data/NodeModel.en.md @@ -1,20 +1,14 @@ --- title: NodeModel -order: 6 +order: 4 --- NodeModel is the node data that flows internally, which is obtained by NodeUserModel through [data transforms](/en/apis/data/data-intro#transforms-数据转换). -## id Required - -The unique ID of the node. Once the node is created, the ID cannot be modified. - -**Type**: `string | number` + ## data Required -The data in InnerModelData has been processed by UserModelData. - diff --git a/packages/site/docs/apis/data/NodeModel.zh.md b/packages/site/docs/apis/data/NodeModel.zh.md index 8013a11fce6..48e7395b7c0 100644 --- a/packages/site/docs/apis/data/NodeModel.zh.md +++ b/packages/site/docs/apis/data/NodeModel.zh.md @@ -1,20 +1,14 @@ --- title: NodeModel 内部数据 -order: 6 +order: 4 --- NodeModel 为内部流转的节点数据，由 NodeUserModel 经过[数据转换](/apis/data/data-intro#transforms-数据转换)后得到。 -## id 必须 - -节点的唯一 ID，节点创建后，ID 不可被修改。 - -**类型**：`string | number` + ## data 必须 -InnerModelData 中的数据已经是 UserModelData 处理后的结果。 - diff --git a/packages/site/docs/apis/data/NodeUserModel.en.md b/packages/site/docs/apis/data/NodeUserModel.en.md index 2a1a9d10dce..de040e6b5d0 100644 --- a/packages/site/docs/apis/data/NodeUserModel.en.md +++ b/packages/site/docs/apis/data/NodeUserModel.en.md @@ -5,20 +5,16 @@ order: 3 The `nodes` part of the user input data. -An example of a data item: +An example of a data items: ```json -{ - "id": "node-1", - "data": {} -} +[ + { "id": "node-1", "data": {} }, + { "id": "node-2", "data": {} } +] ``` -## id Required - -The unique ID of the node. Once the node is created, the ID cannot be changed. - -**Type**: `string | number`; + ## data Required diff --git a/packages/site/docs/apis/data/NodeUserModel.zh.md b/packages/site/docs/apis/data/NodeUserModel.zh.md index db1a6b58846..609433d1d6b 100644 --- a/packages/site/docs/apis/data/NodeUserModel.zh.md +++ b/packages/site/docs/apis/data/NodeUserModel.zh.md @@ -5,20 +5,16 @@ order: 3 用户输入数据中的 `nodes` 部分内容。 -下面是一个数据项实例： +下面是数据实例： ```json -{ - "id": "node-1", - "data": {} -} +[ + { "id": "node-1", "data": {} }, + { "id": "node-2", "data": {} } +] ``` -## id 必须 - -节点的唯一 ID，节点创建后，ID 不可被修改。 - -**类型**：`string | number` + ## data 必须 diff --git a/packages/site/docs/apis/data/TreeData.en.md b/packages/site/docs/apis/data/TreeData.en.md index c71e0100797..06898d90c1f 100644 --- a/packages/site/docs/apis/data/TreeData.en.md +++ b/packages/site/docs/apis/data/TreeData.en.md @@ -37,11 +37,7 @@ G6 5.0 can read `TreeData`, `TreeData[]`, that is, **tree** and **forest**. ## Properties -### id Required - -**Type**: `string | number`; - -The unique ID of the node. After the node is created, the ID cannot be modified. + ### data Required @@ -51,6 +47,6 @@ The data of the node ### children -**Type**: `TreeData`; +**Type**: `TreeData` The array of child nodes of the current node diff --git a/packages/site/docs/apis/data/TreeData.zh.md b/packages/site/docs/apis/data/TreeData.zh.md index 81ce8d235d5..89552e5b5af 100644 --- a/packages/site/docs/apis/data/TreeData.zh.md +++ b/packages/site/docs/apis/data/TreeData.zh.md @@ -37,11 +37,7 @@ G6 5.0 可以读取 `TreeData`、`TreeData[]`，即**树**和**森林**。 ## 属性 -### id 必须 - -**类型**：`string | number` - -节点的唯一 ID。节点创建后，ID 不可修改 + ### data 必须 diff --git a/packages/site/docs/apis/item/combo/ComboIntro.en.md b/packages/site/docs/apis/item/combo/ComboIntro.en.md index 5e8c367eb2d..dfab6ed1929 100644 --- a/packages/site/docs/apis/item/combo/ComboIntro.en.md +++ b/packages/site/docs/apis/item/combo/ComboIntro.en.md @@ -3,6 +3,28 @@ title: Overview order: 0 --- +Combo is a special type of node in G6, which can contain multiple nodes and edges, and can be used to represent a complex node. + +## Composition of Combo + +In G6, a Combo is usually composed of `keyShape`, `labelShape`, `labelBackgroundShape`, `iconShape`, `badgeShapes`, and `otherShapes`. + +- `keyShape`: The main shape of the Combo, usually used to represent the main shape of the Combo, and also used to calculate the incoming position of the Combo. + +- `labelShape`: The text label shape of the Combo, usually used to display the name or description of the Combo. + +- `labelBackgroundShape`: The text label background shape of the Combo, usually used to provide a background color for the text label. + +- `iconShape`: The icon shape of the Combo, usually used to display the icon of the Combo. + +- `badgeShapes`: The badge shape of the Combo, usually used to display the badge of the Combo. + +- `otherShapes`: Other shapes of the Combo, usually used to display other information or status of the Combo. + +Taking the circular Combo as an example, its main shape is a [circle](/en/apis/shape/circle-style-props): + +node sketch + ## Registration and Usage of Combos This directory lists all the built-in Combos in G6. G6 registers `circle-combo` and `rect-combo` by default. Additionally, to use a custom Combo, it needs to be registered: diff --git a/packages/site/docs/apis/item/combo/ComboIntro.zh.md b/packages/site/docs/apis/item/combo/ComboIntro.zh.md index 99cb0f568c6..8ddb34be65e 100644 --- a/packages/site/docs/apis/item/combo/ComboIntro.zh.md +++ b/packages/site/docs/apis/item/combo/ComboIntro.zh.md @@ -3,6 +3,28 @@ title: 概述 order: 0 --- +Combo 是 G6 中的一种特殊的节点，它可以包含多个节点和边，可以用来表示一个复杂的节点。 + +## Combo 构成 + +在 G6 中，Combo 通常由 `keyShape`、`labelShape`、`labelBackgroundShape`、`iconShape`、`badgeShapes` 和 `otherShapes` 构成。 + +- `keyShape`：Combo 的主图形，通常用于表示 Combo 的主要形状，同时也用于计算 Combo 的入射位置。 + +- `labelShape`：Combo 的文本标签形状，通常用于展示 Combo 的名称或描述。 + +- `labelBackgroundShape`：Combo 的文本标签背景形状，通常用于为文本标签提供背景色。 + +- `iconShape`：Combo 的图标形状，通常用于展示 Combo 的图标。 + +- `badgeShapes`：Combo 的徽标形状，通常用于展示 Combo 的徽标。 + +- `otherShapes`：Combo 的其他形状，通常用于展示 Combo 的其他信息或状态。 + +下面以圆形 Combo 为例，其主图形是一个[圆形](/apis/shape/circle-style-props)： + +node sketch + ## Combo 的注册和使用 本目录列举了 G6 内置的所有 Combo。G6 默认注册了 `circle-combo` 和 `rect-combo`。此外，自定义 Combo 需注册： diff --git a/packages/site/docs/apis/item/edge/EdgeIntro.en.md b/packages/site/docs/apis/item/edge/EdgeIntro.en.md index 46ad0ded1cf..5eee3e98e3a 100644 --- a/packages/site/docs/apis/item/edge/EdgeIntro.en.md +++ b/packages/site/docs/apis/item/edge/EdgeIntro.en.md @@ -3,6 +3,24 @@ title: Overview order: 0 --- +## Composition of Edge + +In G6, an edge is usually composed of `keyShape`, `labelShape`, `labelBackgroundShape`, `iconShape`, and `otherShapes`. + +- `keyShape`: The main shape of the edge, usually used to represent the main shape of the edge, and also used to calculate the incoming position of the edge. + +- `labelShape`: The text label shape of the edge, usually used to display the name or description of the edge. + +- `labelBackgroundShape`: The text label background shape of the edge, usually used to provide a background color for the text label. + +- `iconShape`: The icon shape of the edge, usually used to display the icon of the edge. + +- `otherShapes`: Other shapes of the edge, usually used to display other information or status of the edge. + +Taking the polyline edge as an example, its main shape is a [polyline](/en/apis/shape/polyline-style-props): + +node sketch + ## Registration and Use of Edges This directory lists all the built-in edges in G6. To reduce the package size, G6 5.0 only registers `line-edge` and `loop-edge` by default. **Therefore, before using these built-in edges, you also need to register them in G6.** Similarly, custom edges should be registered as follows: @@ -24,10 +42,10 @@ const graph = new Graph({ * ...other configuration options */ edge: { - type: 'cubic-edge' + type: 'cubic-edge', /** * 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 b5ebbe95dee..7e140f64b6b 100644 --- a/packages/site/docs/apis/item/edge/EdgeIntro.zh.md +++ b/packages/site/docs/apis/item/edge/EdgeIntro.zh.md @@ -3,6 +3,24 @@ title: 概述 order: 0 --- +## 边构成 + +在 G6 中，边通常由 `keyShape`、`labelShape`、`labelBackgroundShape`、`iconShape`、`otherShapes` 构成。 + +- `keyShape`：边的主图形，通常用于表示边的主要形状，同时也用于计算边的入射位置。 + +- `labelShape`：边的文本标签形状，通常用于展示边的名称或描述。 + +- `labelBackgroundShape`：边的文本标签背景形状，通常用于为文本标签提供背景色。 + +- `iconShape`：边的图标形状，通常用于展示边的图标。 + +- `otherShapes`：边的其他形状，通常用于展示边的其他信息或状态。 + +以折线边为例，其主图形为一个[折线](/apis/shape/polyline-style-props)： + +node sketch + ## 边的注册和使用 本目录列举了 G6 内置的所有边。G6 5.0 为了减少包体积，仅默认注册了 `line-edge` 和 `loop-edge`。**因此，在使用这些内置节点之前，您也需要将其注册到 G6 中**。同样的，自定义节点也应当如下注册： @@ -24,10 +42,10 @@ const graph = new Graph({ * ...其他配置项 */ edge: { - type: 'cubic-edge' + type: 'cubic-edge', /** * type 与注册时命名的 key 一致 - */, + */ /** * ... 边的其他配置项详见具体边配置 */ diff --git a/packages/site/docs/apis/item/node/NodeIntro.en.md b/packages/site/docs/apis/item/node/NodeIntro.en.md index c1df14622aa..389a9434ced 100644 --- a/packages/site/docs/apis/item/node/NodeIntro.en.md +++ b/packages/site/docs/apis/item/node/NodeIntro.en.md @@ -3,6 +3,30 @@ title: Overview order: 0 --- +## Composition of Node + +In G6, a node is usually composed of `keyShape`, `haloShape`, `labelShape`, `labelBackgroundShape`, `iconShape`, `anchorShapes` and `otherShapes`. + +- `keyShape`: The main shape of the node, usually used to represent the main shape of the node, and also used to calculate the incoming position of the edge. + +- `haloShape`: The halo effect of the main shape (`keyShape`) of the node when the node is in `active` (such as **hover** state) and `selected` (such as **selected** state). + +- `labelShape`: The text label shape of the node, usually used to display the name or description of the node. + +- `labelBackgroundShape`: The text label background shape of the node, usually used to provide a background color for the text label. + +- `iconShape`: The icon shape of the node, usually used to display the icon of the node. + +- `badgeShapes`: The badge shape of the node, usually used to display the badge of the node. + +- `anchorShapes`: The circular shape (anchor) of the edge incoming position around the node, anchorShapes configures multiple anchors. [Node Anchor DEMO](/examples/item/defaultNodes/#circle) + +- `otherShapes`: Other shapes of the node, usually used to display other information or status of the node. + +Taking the circular node as an example, its key shape is a [circle](/en/apis/shape/circle-style-props): + +node sketch + ## Registration and Usage of Nodes This directory lists all built-in nodes in G6. To reduce package size, G6 version 5.0 only registers `circle-node` and `rect-node` by default. **Therefore, before using these built-in nodes, you need to register them in G6 as well.** Similarly, custom nodes should be registered as follows: diff --git a/packages/site/docs/apis/item/node/NodeIntro.zh.md b/packages/site/docs/apis/item/node/NodeIntro.zh.md index b541090ed3c..32ed381a6e2 100644 --- a/packages/site/docs/apis/item/node/NodeIntro.zh.md +++ b/packages/site/docs/apis/item/node/NodeIntro.zh.md @@ -3,6 +3,30 @@ title: 概述 order: 0 --- +## 节点构成 + +在 G6 中，节点通常由 `keyShape`、`haloShape`、`labelShape`、`labelBackgroundShape`、`iconShape`、`anchorShapes` 和 `otherShapes` 组成。 + +- `keyShape`：节点的主图形，通常用于表示节点的主要形状，也用于计算边的连入位置。 + +- `haloShape`：节点在 `active`（如**hover**状态）和 `selected`（如**选中**状态） 状态下，主图形 (`keyShape`) 周围展示的光晕效果的图形。 + +- `labelShape`：节点的文本标签图形，通常用于展示节点的名称或描述。 + +- `labelBackgroundShape`：节点的文本标签背景图形，通常用于为文本标签提供背景色。 + +- `iconShape`：节点的图标图形，通常用于展示节点的图标。 + +- `badgeShapes`：节点的徽标图形，通常用于展示节点的徽标。 + +- `anchorShapes`：节点四周的边连入位置圆形图形（连接桩），anchorShapes 配置的是多个连接桩。[节点连接桩 DEMO](/zh/examples/item/defaultNodes/#circle) + +- `otherShapes`：节点的其他图形，通常用于展示节点的其他信息或状态。 + +下面以圆形节点为例，其主图形是一个[圆形](/apis/shape/circle-style-props)： + +node sketch + ## 节点的注册和使用 本目录列举了 G6 内置的所有节点。G6 5.0 为了减少包体积，仅默认注册了 `circle-node` 和 `rect-node`。**因此，在使用这些内置节点之前，您也需要将其注册到 G6 中**。同样的，自定义节点也应当如下注册： diff --git a/packages/site/docs/common/ComboShapeStyles.en.md b/packages/site/docs/common/ComboShapeStyles.en.md index 6e61722e5a8..4dcda0e8323 100644 --- a/packages/site/docs/common/ComboShapeStyles.en.md +++ b/packages/site/docs/common/ComboShapeStyles.en.md @@ -86,7 +86,7 @@ The related shape style can be referred to as RectStyleProps [`RectStyleProps`]( -**Default**: undefined +**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. @@ -106,7 +106,7 @@ type HaloShapeStyle = ShapeStyle; -**Default**: undefined +**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`). @@ -169,7 +169,7 @@ type BadgeShapesStyle = { -**Default**: undefined +**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. @@ -202,7 +202,7 @@ The style of the anchor shapes can be referred to as [CircleStyleProps](../shape -**Default**: undefined +**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. @@ -228,6 +228,6 @@ The style configurations for different shapes can be referred to in the correspo -**Default**: undefined +**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 05c481ce43f..cd03fa2403c 100644 --- a/packages/site/docs/common/ComboShapeStyles.zh.md +++ b/packages/site/docs/common/ComboShapeStyles.zh.md @@ -82,7 +82,7 @@ type LabelBackgroundShapeStyle = ShapeStyle & { -**默认值**：undefined +**默认值**：`undefined` Combo 的文本的背景图形，是一个矩形。若不设置则不显示。设置为 `{}` 将使用主题中默认的样式显示文本背景图形。 @@ -102,7 +102,7 @@ type HaloShapeStyle = ShapeStyle; -**默认值**：undefined +**默认值**：`undefined` 在内置的 Combo 和主题中，`haloShape` 指的是 Combo 在 `active`（一般在鼠标 hover 时该状态被触发） 和 `selected`（一般在选中状态下该状态被触发） 状态下，主图形 (`keyShape`) 周围展示的光晕效果的图形。在内置 Combo 的逻辑中，`haloShape` 的图形类型、颜色跟随主图形 (`keyShape`)。 @@ -167,7 +167,7 @@ type BadgeShapesStyle = { -**默认值**：undefined +**默认值**：`undefined` Combo 四周的徽标，单个徽标包括了 Combo 和背景图形，badgeShapes 配置的是多个徽标。 @@ -200,7 +200,7 @@ type AnchorShapesStyle = StyleProps & { -**默认值**：undefined +**默认值**：`undefined` Combo 四周的边连入位置圆形图形（连接桩），anchorShapes 配置的是多个连接桩。 @@ -224,6 +224,6 @@ type OtherShapeStyle = { -**默认值**：undefined +**默认值**：`undefined` 上面所有的 xxShape(s) 均为 G6 定义的规范 Combo 中可能存在的图形。自定义 Combo 中的其他图形应当定义和配置在 `otherShapes` 中。 diff --git a/packages/site/docs/common/ComboUserModel.en.md b/packages/site/docs/common/ComboUserModel.en.md new file mode 100644 index 00000000000..69eb9c9bfd9 --- /dev/null +++ b/packages/site/docs/common/ComboUserModel.en.md @@ -0,0 +1,31 @@ +### type + +**Type**: `string` + +The rendering type of the combo, which can be a combo type registered on the graph class. The built-in and default registered types are `'circle-combo'` and `'rect-combo'`. The default is `'circle-combo'`. + +### visible + +**Type**: `boolean` + +Whether the combo is displayed by default. + +### color + +**Type**: `string` + +The theme color of the key shape (`keyShape`) of the combo, with a value in hexadecimal string format. Provided for simple configuration. More style configurations should be configured in the Combo mapper of the graph instance, including keyShape and various shape styles. + +### label + +**Type**: `string` + +The text content of the `labelShape` of the combo. More style configurations should be configured in the Combo mapper of the graph instance, including the `text` value of `labelShape` or other shape styles. + + + +### parentId + +**Type**: `string | number` + +The ID of the parent combo to which the combo belongs. `undefined` means it is a root. diff --git a/packages/site/docs/common/ComboUserModel.zh.md b/packages/site/docs/common/ComboUserModel.zh.md new file mode 100644 index 00000000000..7589303ef5b --- /dev/null +++ b/packages/site/docs/common/ComboUserModel.zh.md @@ -0,0 +1,31 @@ +### type + +**类型**： `string` + +Combo 的渲染类型，可以是已经注册到图类上的 Combo 类型，内置并默认注册的有 `'circle-combo'`，`'rect-combo'`。默认为 `'circle-combo'`。 + +### visible + +**类型**： `boolean` + +Combo 是否默认展示出来。 + +### color + +**类型**： `string` + +该 Combo 的主图形（keyShape）的主题色，值为十六进制字符串。为方便简单配置而提供，更多的样式配置应当在 Graph 实例的 Combo mapper 中配置 keyShape 以及各种图形的图形样式。 + +### label + +**类型**： `string` + +Combo `labelShape` 的文本内容。更多的样式配置应当在 Graph 实例的 Combo mapper 中配置 `labelShape` 的 `text` 值或其他图形样式。 + + + +### parentId + +**类型**： `string | number` + +在有 Combo 的图上表示该 Combo 所属的父亲 Combo 的 id。`undefined` 表示当前 Combo 是一个根。 diff --git a/packages/site/docs/common/DataAnchorShapes.en.md b/packages/site/docs/common/DataAnchorShapes.en.md new file mode 100644 index 00000000000..8b01366c936 --- /dev/null +++ b/packages/site/docs/common/DataAnchorShapes.en.md @@ -0,0 +1,24 @@ +### anchorShapes + +**Type**: `AnchorShapes` + +
+ + AnchorShapes + + +```ts +type AnchorShapes = CircleStyleProps & { + // 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. + position?: 'top' | 'left' | 'bottom' | 'right' | [number, number]; + }; +}; +``` + +
+ +- [CircleStyleProps](/en/apis/shape/circle-style-props) + +The shape of connecting ports diff --git a/packages/site/docs/common/DataAnchorShapes.zh.md b/packages/site/docs/common/DataAnchorShapes.zh.md new file mode 100644 index 00000000000..6220223f0d2 --- /dev/null +++ b/packages/site/docs/common/DataAnchorShapes.zh.md @@ -0,0 +1,24 @@ +### anchorShapes + +**类型**：`AnchorShapes` + +
+ + AnchorShapes + + +```ts +type AnchorShapes = CircleStyleProps & { + // 单独的连接桩图形配置，优先级高于外层的 CircleStyleProps + [key: number]: CircleStyleProps & { + // 该连接桩的位置，可配置字符串或数字数组表示相对于主图形 (keyShape) 包围盒的百分比位置，例如 [0.5, 1] 表示位于主图形的右侧中间 + position?: 'top' | 'left' | 'bottom' | 'right' | [number, number]; + }; +}; +``` + +
+ +- [CircleStyleProps](/apis/shape/circle-style-props) + +连接桩形状 diff --git a/packages/site/docs/common/DataAnimates.en.md b/packages/site/docs/common/DataAnimates.en.md new file mode 100644 index 00000000000..87778f70f68 --- /dev/null +++ b/packages/site/docs/common/DataAnimates.en.md @@ -0,0 +1,7 @@ +### animates + +**Type**: `IAnimates` + + + +Configuration of shape animations when the node appears, disappears, shows, hides, or updates. Supports sequential execution of multiple animations (order). [Animation Demo](/en/examples/scatter/changePosition/#itemAnimates). diff --git a/packages/site/docs/common/DataAnimates.zh.md b/packages/site/docs/common/DataAnimates.zh.md new file mode 100644 index 00000000000..5353179693e --- /dev/null +++ b/packages/site/docs/common/DataAnimates.zh.md @@ -0,0 +1,7 @@ +### animates + +**类型**：`IAnimates` + + + +出现、消失、显示、隐藏、更新时，各个图形动画配置。支持一次更新，多个动画的顺序执行（`order`）。[动画 DEMO](/zh/examples/scatter/changePosition/#itemAnimates) diff --git a/packages/site/docs/common/Badge.en.md b/packages/site/docs/common/DataBadge.en.md similarity index 85% rename from packages/site/docs/common/Badge.en.md rename to packages/site/docs/common/DataBadge.en.md index 3d7c4c867fc..0e1137377fe 100644 --- a/packages/site/docs/common/Badge.en.md +++ b/packages/site/docs/common/DataBadge.en.md @@ -12,6 +12,6 @@ type Badge = { }; ``` - + diff --git a/packages/site/docs/common/Badge.zh.md b/packages/site/docs/common/DataBadge.zh.md similarity index 85% rename from packages/site/docs/common/Badge.zh.md rename to packages/site/docs/common/DataBadge.zh.md index 1684ef03673..d12ce17b890 100644 --- a/packages/site/docs/common/Badge.zh.md +++ b/packages/site/docs/common/DataBadge.zh.md @@ -12,6 +12,6 @@ type Badge = { }; ``` - + \ No newline at end of file diff --git a/packages/site/docs/common/BadgePosition.en.md b/packages/site/docs/common/DataBadgePosition.en.md similarity index 100% rename from packages/site/docs/common/BadgePosition.en.md rename to packages/site/docs/common/DataBadgePosition.en.md diff --git a/packages/site/docs/common/BadgePosition.zh.md b/packages/site/docs/common/DataBadgePosition.zh.md similarity index 100% rename from packages/site/docs/common/BadgePosition.zh.md rename to packages/site/docs/common/DataBadgePosition.zh.md diff --git a/packages/site/docs/common/BadgeShapes.en.md b/packages/site/docs/common/DataBadgeShapes.en.md similarity index 94% rename from packages/site/docs/common/BadgeShapes.en.md rename to packages/site/docs/common/DataBadgeShapes.en.md index 593f6efb1c7..44737553f2b 100644 --- a/packages/site/docs/common/BadgeShapes.en.md +++ b/packages/site/docs/common/DataBadgeShapes.en.md @@ -27,7 +27,7 @@ type BadgeShapes = { }; ``` - + diff --git a/packages/site/docs/common/BadgeShapes.zh.md b/packages/site/docs/common/DataBadgeShapes.zh.md similarity index 93% rename from packages/site/docs/common/BadgeShapes.zh.md rename to packages/site/docs/common/DataBadgeShapes.zh.md index 3c214311340..effa7b3ffd0 100644 --- a/packages/site/docs/common/BadgeShapes.zh.md +++ b/packages/site/docs/common/DataBadgeShapes.zh.md @@ -27,7 +27,7 @@ type BadgeShapes = { }; ``` - + diff --git a/packages/site/docs/common/Badges.en.md b/packages/site/docs/common/DataBadges.en.md similarity index 84% rename from packages/site/docs/common/Badges.en.md rename to packages/site/docs/common/DataBadges.en.md index 3775a9da7cf..d3cb786b312 100644 --- a/packages/site/docs/common/Badges.en.md +++ b/packages/site/docs/common/DataBadges.en.md @@ -2,7 +2,7 @@ **Type**: `Badge[]` - + The configuration of the badges around the node diff --git a/packages/site/docs/common/Badges.zh.md b/packages/site/docs/common/DataBadges.zh.md similarity index 80% rename from packages/site/docs/common/Badges.zh.md rename to packages/site/docs/common/DataBadges.zh.md index 24a100490eb..352b2013d55 100644 --- a/packages/site/docs/common/Badges.zh.md +++ b/packages/site/docs/common/DataBadges.zh.md @@ -2,7 +2,7 @@ **类型**：`Badge[]` - + 节点四周的徽标配置 diff --git a/packages/site/docs/common/DataHaloShape.en.md b/packages/site/docs/common/DataHaloShape.en.md new file mode 100644 index 00000000000..c103aecff35 --- /dev/null +++ b/packages/site/docs/common/DataHaloShape.en.md @@ -0,0 +1,9 @@ +### haloShape + +**Type**: `ShapeStyleProps` + +- [ShapeStyleProps](/en/apis/shape/overview) + +The style configuration of the halo shape, the shape is the same as the main shape by default. + +> Usually, the halo effect is displayed around the key shape in the `active` and `selected` states. diff --git a/packages/site/docs/common/DataHaloShape.zh.md b/packages/site/docs/common/DataHaloShape.zh.md new file mode 100644 index 00000000000..51dd3adf571 --- /dev/null +++ b/packages/site/docs/common/DataHaloShape.zh.md @@ -0,0 +1,9 @@ +### haloShape + +**类型**：`ShapeStyleProps` + +- [ShapeStyleProps](/apis/shape/overview) + +光晕形状的样式配置，形状默认和主图形一致 + +> 通常在 `active` 和 `selected` 状态下，主图形周围会展示光晕效果。 diff --git a/packages/site/docs/common/DataID.en.md b/packages/site/docs/common/DataID.en.md new file mode 100644 index 00000000000..9bf46425f3d --- /dev/null +++ b/packages/site/docs/common/DataID.en.md @@ -0,0 +1,5 @@ +## id Required + +**Type**: `string | number` + +The unique ID of the element. Once the element is created, the ID cannot be changed. diff --git a/packages/site/docs/common/DataID.zh.md b/packages/site/docs/common/DataID.zh.md new file mode 100644 index 00000000000..80cadb6e3ca --- /dev/null +++ b/packages/site/docs/common/DataID.zh.md @@ -0,0 +1,5 @@ +## id 必须 + +**类型**：`string | number` + +元素的唯一 ID，元素创建后，ID 不可被修改。 diff --git a/packages/site/docs/common/DataIconShape.en.md b/packages/site/docs/common/DataIconShape.en.md new file mode 100644 index 00000000000..b467e535857 --- /dev/null +++ b/packages/site/docs/common/DataIconShape.en.md @@ -0,0 +1,28 @@ +### iconShape + +**Type**: `IconShape` + +
+ + IconShape + + +```ts +type IconShape = Partial< + TextStyleProps & + ImageStyleProps & + ShapeStyle & { + offsetX?: number; + offsetY?: number; + lod?: number; + } +>; +``` + +
+ +- [TextStyleProps](/en/apis/shape/text-style-props) + +- [ImageStyleProps](/en/apis/shape/image-style-props) + +Icon Shape, can be an image or text, with text supporting [iconfont](/en/manual/advanced/iconfont) diff --git a/packages/site/docs/common/DataIconShape.zh.md b/packages/site/docs/common/DataIconShape.zh.md new file mode 100644 index 00000000000..c3747a6e6b5 --- /dev/null +++ b/packages/site/docs/common/DataIconShape.zh.md @@ -0,0 +1,28 @@ +### iconShape + +**类型**：`IconShape` + +
+ + IconShape + + +```ts +type IconShape = Partial< + TextStyleProps & + ImageStyleProps & + ShapeStyle & { + offsetX?: number; + offsetY?: number; + lod?: number; + } +>; +``` + +
+ +- [TextStyleProps](/apis/shape/text-style-props) + +- [ImageStyleProps](/apis/shape/image-style-props) + +图标图形，可以是图片或文本，文本支持 [iconfont](/manual/advanced/iconfont) diff --git a/packages/site/docs/common/DataLabelBackgroundShape.en.md b/packages/site/docs/common/DataLabelBackgroundShape.en.md new file mode 100644 index 00000000000..075ab862e50 --- /dev/null +++ b/packages/site/docs/common/DataLabelBackgroundShape.en.md @@ -0,0 +1,21 @@ +### labelBackgroundShape + +**Type**: `LabelBackgroundShape` + +
+ + LabelBackgroundShape + + +```ts +type LabelBackgroundShape = RectStyleProps & { + /** Inner padding of the background */ + padding?: number | number[]; +}; +``` + +
+ +- [RectStyleProps](/apis/shape/rect-style-props) + +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. diff --git a/packages/site/docs/common/DataLabelBackgroundShape.zh.md b/packages/site/docs/common/DataLabelBackgroundShape.zh.md new file mode 100644 index 00000000000..3488f617f93 --- /dev/null +++ b/packages/site/docs/common/DataLabelBackgroundShape.zh.md @@ -0,0 +1,21 @@ +### labelBackgroundShape + +**类型**：`LabelBackgroundShape` + +
+ + LabelBackgroundShape + + +```ts +type LabelBackgroundShape = RectStyleProps & { + /** 背景内边距 */ + padding?: number | number[]; +}; +``` + +
+ +- [RectStyleProps](/apis/shape/rect-style-props) + +文本的背景图形，是一个矩形。若不设置则不显示。设置为 `{}` 将使用主题中默认的样式显示文本背景图形。 diff --git a/packages/site/docs/common/LabelShape.en.md b/packages/site/docs/common/DataLabelShape.en.md similarity index 100% rename from packages/site/docs/common/LabelShape.en.md rename to packages/site/docs/common/DataLabelShape.en.md diff --git a/packages/site/docs/common/LabelShape.zh.md b/packages/site/docs/common/DataLabelShape.zh.md similarity index 100% rename from packages/site/docs/common/LabelShape.zh.md rename to packages/site/docs/common/DataLabelShape.zh.md diff --git a/packages/site/docs/common/DataOtherShapes.en.md b/packages/site/docs/common/DataOtherShapes.en.md new file mode 100644 index 00000000000..bbf78488076 --- /dev/null +++ b/packages/site/docs/common/DataOtherShapes.en.md @@ -0,0 +1,21 @@ +### otherShapes + +**Type**: `OtherShapes` + +
+ + OtherShapes + + +```ts +type OtherShapes = { + // key is the shape id, with the format of xxShape + // value is the shape style configuration and animation configuration + [shapeId: string]: ShapeStyleProps; +} +``` +
+ +- [ShapeStyle](/en/apis/shape/overview) + +Shapes that may exist in custom nodes but not 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/DataOtherShapes.zh.md b/packages/site/docs/common/DataOtherShapes.zh.md new file mode 100644 index 00000000000..b888176f7f2 --- /dev/null +++ b/packages/site/docs/common/DataOtherShapes.zh.md @@ -0,0 +1,21 @@ +### otherShapes + +**类型**：`OtherShapes` + +
+ + OtherShapes + + +```ts +type OtherShapes = { + // key 为图形 id，规范格式为 xxShape + // value 为图形样式、动画配置 + [shapeId: string]: ShapeStyleProps; +} +``` +
+ +- [图形样式](/apis/shape/overview) + +不在 G6 定义的规范节点中可能存在的图形。自定义节点中的其他图形应当定义和配置在 `otherShapes` 中。 diff --git a/packages/site/docs/common/EdgeShapeStyles.en.md b/packages/site/docs/common/EdgeShapeStyles.en.md index 184ad97dceb..2dbbaf24eb4 100644 --- a/packages/site/docs/common/EdgeShapeStyles.en.md +++ b/packages/site/docs/common/EdgeShapeStyles.en.md @@ -22,7 +22,7 @@ Where the relevant graphic styles refer to [`TextStyleProps` Text Shape Style](. -**Default**: undefined +**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. @@ -38,7 +38,7 @@ The icon shape of the edge (built-in edge support, custom edges that inherit the -**Default**: undefined +**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). @@ -127,7 +127,7 @@ The related rectangle style type can be referred to in [`RectStyleProps`](../sha -**Default**: undefined +**Default**: `undefined` ## otherShapes @@ -155,4 +155,4 @@ The different shape styles can be referred to in the corresponding shape type do -**Default**: undefined +**Default**: `undefined` diff --git a/packages/site/docs/common/EdgeShapeStyles.zh.md b/packages/site/docs/common/EdgeShapeStyles.zh.md index 1b3247cc622..89dc03e0b32 100644 --- a/packages/site/docs/common/EdgeShapeStyles.zh.md +++ b/packages/site/docs/common/EdgeShapeStyles.zh.md @@ -28,7 +28,7 @@ type IconShapeStyle = Partial< -**默认值**：undefined +**默认值**：`undefined` 边的图标图形，位于文本前方。 @@ -44,7 +44,7 @@ type IconShapeStyle = Partial< -**默认值**：undefined +**默认值**：`undefined` 在内置的边和主题中，`haloShape` 指的是边在 `active`（一般在鼠标 hover 时该状态被触发） 和 `selected`（一般在选中状态下该状态被触发） 状态下，主图形 (`keyShape`) 周围展示的光晕效果的图形。在内置边的逻辑中，`haloShape` 的图形类型、颜色跟随主图形 (`keyShape`)。 @@ -131,7 +131,7 @@ type LabelShapeStyle = RectStyleProps & { -**默认值**：undefined +**默认值**：`undefined` 边的文本的背景图形，是一个矩形。若不设置则不显示。设置为 `{}` 将使用主题中默认的样式显示文本背景图形。 @@ -159,6 +159,6 @@ type OtherShapesStyle = { -**默认值**：undefined +**默认值**：`undefined` 上面所有的 xxShape(s) 均为 G6 定义的规范边中可能存在的图形。自定义边中的其他图形应当定义和配置在 `otherShapes` 中。 diff --git a/packages/site/docs/common/EdgeUserModel.en.md b/packages/site/docs/common/EdgeUserModel.en.md new file mode 100644 index 00000000000..6eae196f96a --- /dev/null +++ b/packages/site/docs/common/EdgeUserModel.en.md @@ -0,0 +1,37 @@ +### type + +**Type**: `string` + +The rendering type of the edge, which can be a registered edge type on the graph, with the built-in and default registered types being `'line-edge'` and `'loop-edge'`. The default value is `'line-edge'`. + +### visible + +**Type**: `boolean` + +Whether the edge is displayed by default. + +### color + +**Type**: `string` + +The theme color of the main shape (keyShape) of the edge, with a value in hexadecimal string format. + +### label + +**Type**: `string` + +The text content of the `labelShape` of the edge. + + + +### sourceAnchor + +**Type**: `number` + +The `anchorPoints` on the source node indicate the allowed positions where related edges can connect, and is an array. The `sourceAnchor` of the edge indicates which anchor point to connect to when the edge connects to the starting point, corresponding to the index of the corresponding position in the `anchorPoints` of the source node. + +### targetAnchor + +**Type**: `number` + +The `anchorPoints` on the target node indicate the allowed positions where related edges can connect, and is an array. The `targetAnchor` of the edge indicates which anchor point to connect to when the edge connects to the ending point, corresponding to the index of the corresponding position in the `anchorPoints` of the target node. diff --git a/packages/site/docs/common/EdgeUserModel.zh.md b/packages/site/docs/common/EdgeUserModel.zh.md new file mode 100644 index 00000000000..13abb921798 --- /dev/null +++ b/packages/site/docs/common/EdgeUserModel.zh.md @@ -0,0 +1,37 @@ +### type + +**类型**：`string` + +边的渲染类型，可以是已经注册到图类上的边类型，内置并默认注册的有 `'line-edge'`，`'loop-edge'`。默认为 `'line-edge'`。 + +### visible + +**类型**：`boolean` + +边是否默认展示出来。 + +### color + +**类型**：`string` + +该边的主图形（keyShape）的主题色，值为十六进制字符串。 + +### label + +**类型**：`string` + +边 labelShape 的文本内容。 + + + +### sourceAnchor + +**类型**：`number` + +起点节点上 `anchorPoints` 表示允许相关边连入的位置，是一个数组。而边的 `sourceAnchor` 表示了这条边连入起点时选择哪个锚点连入，对应了起点节点上 `anchorPoints` 对应位置的序号。 + +### targetAnchor + +**类型**：`number` + +终点节点上 `anchorPoints` 表示允许相关边连入的位置，是一个数组。而边的 `targetAnchor` 表示了这条边连入终点时选择哪个锚点连入，对应了起点节点上 `anchorPoints` 对应位置的序号。 diff --git a/packages/site/docs/common/NodeShapeStyles.en.md b/packages/site/docs/common/NodeShapeStyles.en.md index b28391536cd..af44707df4b 100644 --- a/packages/site/docs/common/NodeShapeStyles.en.md +++ b/packages/site/docs/common/NodeShapeStyles.en.md @@ -22,7 +22,7 @@ Where the relevant graphic styles refer to [`TextStyleProps` Text Shape Style](. -**Default**: undefined +**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'`). @@ -38,7 +38,7 @@ The graphic type of `haloShape` follows the main graphic (`keyShape`). The graph -**Default**: undefined +**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`). @@ -122,7 +122,7 @@ The related rectangle style type can be referred to in [`RectStyleProps`](../sha -**Default**: undefined +**Default**: `undefined` The background shape of the text of the node. @@ -190,7 +190,7 @@ Graphic Style Reference refer to [Rect](../shape/RectStyleProps.en.md). -**Default**: undefined +**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). @@ -220,7 +220,7 @@ The related circle style can be referred to in [`CircleStyleProps`](../shape/Cir -**Default**: undefined +**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). @@ -244,6 +244,6 @@ The different shape styles can be referred to in the corresponding shape type do -**Default**: undefined +**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 2165156676b..5daf754ce00 100644 --- a/packages/site/docs/common/NodeShapeStyles.zh.md +++ b/packages/site/docs/common/NodeShapeStyles.zh.md @@ -105,7 +105,7 @@ type IconShapeStyle = Partial< -**默认值**：undefined +**默认值**：`undefined` 节点中心的图标图形（除 `'modelRect-node'` 以外的内置节点支持，继承这些内置节点的自定义节点在无复写相关内容的情况下同样支持），可以是图片或文本，文本支持 iconfont (设置 `fontFamily: 'iconfont'`)。 @@ -125,7 +125,7 @@ type HaloShapeStyle = ShapeStyle; -**默认值**：undefined +**默认值**：`undefined` 在内置的节点和主题中，`haloShape` 指的是节点在 `active`（一般在鼠标 hover 时该状态被触发） 和 `selected`（一般在选中状态下该状态被触发） 状态下，主图形 (`keyShape`) 周围展示的光晕效果的图形。在内置节点的逻辑中，`haloShape` 的图形类型、颜色跟随主图形 (`keyShape`)。 diff --git a/packages/site/docs/common/NodeUserModel.en.md b/packages/site/docs/common/NodeUserModel.en.md index 8746fb8470e..254c23bae40 100644 --- a/packages/site/docs/common/NodeUserModel.en.md +++ b/packages/site/docs/common/NodeUserModel.en.md @@ -40,7 +40,7 @@ The main color of the primary shape (keyShape) of the node, expressed as a hexad The text content of the label shape of the node. This is provided for simple configuration. More style configurations should be done in the node mapper of the graph instance, where the text value of the labelShape or other shape styles are configured. - + diff --git a/packages/site/docs/common/NodeUserModel.zh.md b/packages/site/docs/common/NodeUserModel.zh.md index 5a4df36410b..7bdad1d74aa 100644 --- a/packages/site/docs/common/NodeUserModel.zh.md +++ b/packages/site/docs/common/NodeUserModel.zh.md @@ -40,7 +40,7 @@ 节点 labelShape 的文本内容。为方便简单配置而提供，更多的样式配置应当在 Graph 实例的节点 mapper 中配置 labelShape 的 text 值或其他图形样式。 - +