@logicflow/core 2.2.0 → 2.2.2

package/dist/docs/api/type/Theme.en.md

@@ -0,0 +1,187 @@
+---
+nav: API
+group:
+  title: 类型字典
+  order: 3
+title: Theme Types
+toc: content
+order: 2
+---
+This article mainly introduces the type definitions of LogicFlow theme styles.
+
+## Theme
+The `Theme` type defines the theme styles for various elements in LogicFlow. It includes the style configurations for nodes, edges, text, anchors, arrows, and other elements.
+
+| Property Name | Type                                    | Description                               |
+| ------------- | --------------------------------------- | ----------------------------------------- |
+| baseNode      | [CommonTheme](#commontheme)             | General theme settings for all nodes.     |
+| baseEdge      | [EdgeTheme](#edgetheme)                 | General theme settings for all edges.     |
+| rect          | [RectTheme](#recttheme)                 | Rectangle style.                          |
+| circle        | [CircleTheme](#circletheme)             | Circle style.                             |
+| diamond       | [PolygonTheme](#polygontheme)           | Diamond style.                            |
+| ellipse       | [EllipseTheme](#ellipsetheme)           | Ellipse style.                            |
+| polygon       | [PolygonTheme](#polygontheme)           | Polygon style.                            |
+| line          | [EdgeTheme](#edgetheme)                 | Straight line style.                      |
+| polyline      | [EdgePolylineTheme](#edgepolylinetheme) | Polyline style.                           |
+| bezier        | [EdgeBezierTheme](#edgebeziertheme)     | Bezier curve style.                       |
+| anchorLine    | [AnchorLineTheme](#anchorlinetheme)     | Style for lines drawn from anchors.       |
+| text          | [TextNodeTheme](#textnodetheme)         | Text node style.                          |
+| nodeText      | [NodeTextTheme](#nodetexttheme)         | Node text style.                          |
+| edgeText      | [EdgeTextTheme](#edgetexttheme)         | Edge text style.                          |
+| inputText     | [CommonTheme](#commontheme)             | Input text style.                         |
+| anchor        | [AnchorTheme](#anchortheme)             | Anchor style.                             |
+| arrow         | [ArrowTheme](#arrowtheme)               | Arrow style on edges.                     |
+| snapline      | [EdgeTheme](#edgetheme)                 | Snapline style.                           |
+| rotateControl | [CommonTheme](#commontheme)             | Node rotation control point style.        |
+| resizeControl | [CommonTheme](#commontheme)             | Node resize control point style.          |
+| resizeOutline | [CommonTheme](#commontheme)             | Outline style when resizing nodes.        |
+| edgeAdjust    | [CircleTheme](#circletheme)             | Adjustment point style for edge segments. |
+| outline       | [OutlineTheme](#outlinetheme)           | Outline style when nodes are selected.    |
+| edgeAnimation | [EdgeAnimation](#edgeanimation)         | Edge animation style.                     |
+
+## CommonTheme
+The `CommonTheme` type defines the common properties that can be applied to various graphical elements in the LogicFlow framework. This type serves as the foundation for other theme types, ensuring consistent styles across different components.
+
+| Property Name | Type             | Description                                                                                                                                                                                                                                                         |
+| ------------- | ---------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| fill          | string \| 'none' | The fill color of the shape. It can be a CSS color string (e.g., #000000, rgba(0, 0, 0, 0)), or the string 'none' to indicate transparency.                                                                                                                         |
+| stroke        | string \| 'none' | The stroke color of the shape. Similar to fill, it can be a CSS color string or 'none'.                                                                                                                                                                             |
+| strokeWidth   | number           | The width of the stroke. Defines the thickness of the shape's border. Note: In SVG, acceptable values can be either numbers or percentages (e.g., 10%).                                                                                                             |
+| radius        | number           | The corner radius of the shape, only rect, diamond and polygon can set radius. This property is optional.                                                                                                                                                           |
+| rx            | number           | The x-axis radius of the corners. This property is optional.                                                                                                                                                                                                        |
+| ry            | number           | The y-axis radius of the corners. This property is optional.                                                                                                                                                                                                        |
+| width         | number           | The width of the shape. This property is optional.                                                                                                                                                                                                                  |
+| height        | number           | The height of the shape. This property is optional.                                                                                                                                                                                                                 |
+| path          | string           | The SVG path string that defines a custom shape. This property is optional.                                                                                                                                                                                         |
+| [key: string] | unknown          | Allows additional custom properties to be included in the theme and passed to the DOM. This provides flexibility for extending the theme. For more details, refer to the [SVG attribute specification](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute). |
+
+## Node-Related Theme Types
+
+### RectTheme
+
+The `RectTheme` type represents the theme for rectangle nodes, inheriting from [CommonTheme](#commontheme) without additional extensions.
+
+### CircleTheme
+
+The `CircleTheme` type represents the theme for circle nodes, inheriting from [CommonTheme](#commontheme) without additional extensions.
+
+### PolygonTheme
+
+The `PolygonTheme` type represents the theme for polygon nodes. It inherits from [CommonTheme](#commontheme) without additional extensions.
+
+### EllipseTheme
+
+The `EllipseTheme` type represents the theme for ellipse nodes. It inherits from [CommonTheme](#commontheme) without additional extensions.
+
+## Edge-Related Theme Types
+
+Various edge theme types defined in LogicFlow extend from [CommonTheme](#commontheme). They are used to define the styles and properties of edges in the flowchart.
+
+### EdgeTheme
+The `EdgeTheme` type represents the theme for straight edges. In addition to the common properties from [CommonTheme](#commontheme), it extends with the following specific properties:
+
+| Property Name   | Type                            | Description                                                                                                  |
+| --------------- | ------------------------------- | ------------------------------------------------------------------------------------------------------------ |
+| strokeDasharray | string                          | Defines the dash pattern used for the stroke path, including the pattern of dashes and gaps.                 |
+| animation       | [EdgeAnimation](#edgeanimation) | Defines the animation properties for the edge, including stroke color, dash pattern, and animation duration. |
+
+### EdgePolylineTheme
+The `EdgePolylineTheme` type represents the theme for polyline edges. It is the same as the [EdgeTheme](#edgetheme) type without additional extensions.
+
+### EdgeBezierTheme
+The `EdgeBezierTheme` type represents the theme for bezier curve edges. It extends the straight edge with the following specific properties:
+
+| Property Name | Type                        | Description                                         |
+| ------------- | --------------------------- | --------------------------------------------------- |
+| adjustLine    | [EdgeTheme](#edgetheme)     | Defines the theme for the bezier adjustment line.   |
+| adjustAnchor  | [CircleTheme](#circletheme) | Defines the theme for the bezier adjustment anchor. |
+
+### EdgeAnimation
+The `EdgeAnimation` type defines the animation style for edges. It includes the following properties:
+
+| Property Name           | Type                      | Description                                                                |
+| ----------------------- | ------------------------- | -------------------------------------------------------------------------- |
+| stroke                  | string \| 'none'          | The stroke color for the animation.                                        |
+| strokeDasharray         | string                    | The dash pattern for the animation.                                        |
+| strokeDashoffset        | ${number}% \| number      | The dash offset for the animation.                                         |
+| animationName           | string                    | The name of the animation.                                                 |
+| animationDuration       | ${number}s \| ${number}ms | The duration of the animation.                                             |
+| animationIterationCount | 'infinite' \| number      | The number of iterations for the animation, can be a number or 'infinite'. |
+| animationTimingFunction | string                    | The timing function for the animation.                                     |
+| animationDirection      | string                    | The direction of the animation.                                            |
+
+## Text-Related Theme Types
+
+### TextTheme
+The `TextTheme` type represents the most basic theme for text. It inherits from [CommonTheme](#commontheme) and extends with the following properties:
+
+| Property Name    | Type                                                                                                                                      | Description            |
+| ---------------- | ----------------------------------------------------------------------------------------------------------------------------------------- | ---------------------- |
+| color            | string \| 'none'                                                                                                                          | The color of the text. |
+| fontSize         | number                                                                                                                                    | The font size.         |
+| textWidth        | number (optional)                                                                                                                         | The width of the text. |
+| lineHeight       | number (optional)                                                                                                                         | The line height.       |
+| textAnchor       | 'start' \| 'middle' \| 'end' (optional)                                                                                                   | The text anchor.       |
+| dominantBaseline | 'auto' \| 'text-bottom' \| 'alphabetic' \| 'ideographic' \| 'middle' \| 'central' \| 'mathematical' \| 'hanging' \| 'text-top' (optional) | The dominant baseline. |
+
+### TextNodeTheme
+The `TextNodeTheme` type defines the theme for text nodes. It inherits from `TextTheme` and extends with the following property:
+
+| Property Name | Type                               | Description                             |
+| ------------- | ---------------------------------- | --------------------------------------- |
+| background    | [RectTheme](#recttheme) (optional) | The background style for the text node. |
+
+### NodeTextTheme
+The `NodeTextTheme` type defines the theme for text on nodes. It inherits from `TextTheme` and extends with the following properties:
+
+| Property Name | Type                                             | Description                                                                                                                                                                                                              |
+| ------------- | ------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| overflowMode  | 'default' \| 'autoWrap' \| 'ellipsis' (optional) | The handling of text overflow: <br> - 'default': No special handling, allows overflow. <br> - 'autoWrap': Automatically wraps text when it overflows. <br> - 'ellipsis': Truncates text with ellipsis when it overflows. |
+| textWidth     | number (optional)                                | The width of the text.                                                                                                                                                                                                   |
+| background    | [RectTheme](#recttheme) (optional)               | The background style for the text.                                                                                                                                                                                       |
+| wrapPadding   | string (optional)                                | The padding for the background area, e.g., '5px,10px'.                                                                                                                                                                   |
+
+### EdgeTextTheme
+The `EdgeTextTheme` type defines the theme for text on edges. It inherits from `NodeTextTheme` and `TextTheme`, and adds some properties specific to edge text:
+
+| Property Name | Type                                                          | Description                                                                                                                                                         |
+| ------------- | ------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| textWidth     | number                                                        | The width of the text.                                                                                                                                              |
+| background    | { wrapPadding?: string } & [RectTheme](#recttheme) (optional) | The background style for the text, including padding for the background area. <br> - wrapPadding (optional): The padding for the background area, e.g., '5px,10px'. |
+| hover         | [EdgeTextTheme](#edgetexttheme) (optional)                    | The text style when hovered.                                                                                                                                        |
+
+## Other Theme Types
+
+### AnchorTheme
+The `AnchorTheme` type represents the theme for anchors. It inherits from [CommonTheme](#commontheme) and extends with the following specific properties:
+
+| Property Name | Type                                                    | Description                              |
+| ------------- | ------------------------------------------------------- | ---------------------------------------- |
+| r             | number (optional)                                       | The radius of the anchor.                |
+| hover         | { r?: number } & [CommonTheme](#commontheme) (optional) | Defines the hover effect for the anchor. |
+
+### OutlineTheme
+The `OutlineTheme` type defines the theme for the outline of nodes when selected. It inherits from [CommonTheme](#commontheme) and `EdgeAnimation`, and extends with the following specific property:
+
+| Property Name | Type                                   | Description             |
+| ------------- | -------------------------------------- | ----------------------- |
+| hover         | [CommonTheme](#commontheme) (optional) | The style when hovered. |
+
+### ArrowTheme
+The `ArrowTheme` type defines the theme for arrows on edges. It inherits from [CommonTheme](#commontheme) and adds some properties specific to arrows:
+
+| Property Name  | Type              | Description                                                                                                                                                                                                                    |
+| -------------- | ----------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| offset         | number            | The length of the arrow. For example, for the symbol "->", offset represents the width of the greater-than sign.                                                                                                               |
+| refX           | number (optional) | The x-axis reference point of the SVG marker, used to control the arrow's horizontal offset relative to the edge endpoint.                                                                                                     |
+| refY           | number (optional) | The y-axis reference point of the SVG marker, used to control the arrow's vertical offset relative to the edge endpoint.                                                                                                       |
+| verticalLength | number            | The arrow length perpendicular to the edge direction. For example, for the symbol "->", verticalLength represents the height of the greater-than sign.                                                                         |
+| endArrowType   | string (optional) | The end arrow type. LogicFlow internally supports the following 5 types of arrows: <br/>`solid`: Solid arrow (default)<br/>`hollow`: Line arrow<br/>`diamond`: Diamond arrow<br/>`circle`: Circle arrow<br/>`none`: No arrow   |
+| startArrowType | string (optional) | The start arrow type. LogicFlow internally supports the following 5 types of arrows: <br/>`solid`: Solid arrow (default)<br/>`hollow`: Line arrow<br/>`diamond`: Diamond arrow<br/>`circle`: Circle arrow<br/>`none`: No arrow |
+| strokeLinecap  | string (optional) | The end style of the line, same as SVG strokeLinecap, supports three values: 'butt', 'round', 'square'                                                                                                                         |
+| strokeLinejoin | string (optional) | The join style of the line, same as SVG strokeLinejoin, supports three values: 'miter', 'round', 'bevel'                                                                                                                       |
+
+### AnchorLineTheme
+The `AnchorLineTheme` type represents the theme for lines drawn from anchors. It inherits from [EdgeTheme](#edgetheme) and `EdgeAnimation`.
+
+These node theme types allow for the customization of node appearances in the LogicFlow library while maintaining a consistent theme structure through the inheritance of [CommonTheme](#commontheme), providing flexible visual representations.

package/dist/docs/api/type/Theme.zh.md

@@ -0,0 +1,187 @@
+---
+nav: API
+group:
+  title: 类型字典
+  order: 3
+title: 主题相关
+toc: content
+order: 5
+---
+本文主要介绍 LogicFlow 主题样式的类型定义。
+
+## Theme（主题配置）
+`Theme` 类型定义了 LogicFlow 中各种元素的主题样式。它包含了节点、边、文本、锚点、箭头等元素的样式配置。
+
+| 属性名        | 类型                                    | 描述                           |
+| ------------- | --------------------------------------- | ------------------------------ |
+| baseNode      | [CommonTheme](#commontheme)             | 所有节点的通用主题设置。       |
+| baseEdge      | [EdgeTheme](#edgetheme)                 | 所有边的通用主题设置。         |
+| rect          | [RectTheme](#recttheme)                 | 矩形样式。                     |
+| circle        | [CircleTheme](#circletheme)             | 圆形样式。                     |
+| diamond       | [PolygonTheme](#polygontheme)           | 菱形样式。                     |
+| ellipse       | [EllipseTheme](#ellipsetheme)           | 椭圆样式。                     |
+| polygon       | [PolygonTheme](#polygontheme)           | 多边形样式。                   |
+| line          | [EdgeTheme](#edgetheme)                 | 直线样式。                     |
+| polyline      | [EdgePolylineTheme](#edgepolylinetheme) | 折线样式。                     |
+| bezier        | [EdgeBezierTheme](#edgebeziertheme)     | 贝塞尔曲线样式。               |
+| anchorLine    | [AnchorLineTheme](#anchorlinetheme)     | 从锚点拉出的边的样式。         |
+| text          | [TextNodeTheme](#textnodetheme)         | 文本节点样式。                 |
+| nodeText      | [NodeTextTheme](#nodetexttheme)         | 节点文本样式。                 |
+| edgeText      | [EdgeTextTheme](#edgetexttheme)         | 边文本样式。                   |
+| inputText     | [CommonTheme](#commontheme)(可选)       | 输入文本样式。                 |
+| anchor        | [AnchorTheme](#anchortheme)             | 锚点样式。                     |
+| arrow         | [ArrowTheme](#arrowtheme)               | 边上箭头的样式。               |
+| snapline      | [EdgeTheme](#edgetheme)                 | 对齐线样式。                   |
+| rotateControl | [CommonTheme](#commontheme)             | 节点旋转控制点样式。           |
+| resizeControl | [CommonTheme](#commontheme)             | 节点缩放控制点样式。           |
+| resizeOutline | [CommonTheme](#commontheme)             | 节点调整大小时的外框样式。     |
+| edgeAdjust    | [CircleTheme](#circletheme)             | 边连段的调整点样式。           |
+| outline       | [OutlineTheme](#outlinetheme)           | 节点选择状态下外侧的选框样式。 |
+| edgeAnimation | [EdgeAnimation](#edgeanimation)         | 边动画样式。                   |
+
+## CommonTheme（通用主题）
+`CommonTheme` 类型定义了 LogicFlow 框架中各种图形元素可应用的通用属性。该类型作为其他主题类型的基础，使不同组件之间的样式保持一致。
+
+| 属性名        | 类型             | 描述                                                                                                                                                                |
+| ------------- | ---------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| fill          | string \| 'none' | 形状的填充颜色。可以是 CSS 颜色字符串（如 #000000、rgba(0, 0, 0, 0)），或者字符串 'none' 表示透明。                                                                 |
+| stroke        | string \| 'none' | 形状的描边颜色。与 fill 类似，可以是 CSS 颜色字符串或 'none'。                                                                                                      |
+| strokeWidth   | number           | 描边的宽度。定义形状边框的厚度。注意：在 SVG 中可接受的值既可以是数字，也可以是百分比（如 10%）。                                                                   |
+| radius        | number           | 形状的圆角半径，目前矩形、多边形和菱形支持设置圆角。此属性为可选项。                                                                                                |
+| rx            | number           | x 轴方向的圆角半径。此属性为可选项。                                                                                                                                |
+| ry            | number           | y 轴方向的圆角半径。此属性为可选项。                                                                                                                                |
+| width         | number           | 形状的宽度。此属性为可选项。                                                                                                                                        |
+| height        | number           | 形状的高度。此属性为可选项。                                                                                                                                        |
+| path          | string           | 定义自定义形状的 SVG 路径字符串。此属性为可选项。                                                                                                                   |
+| [key: string] | unknown          | 允许在主题中包含额外的自定义属性，并将其传递给 DOM。这为扩展主题提供了灵活性。详情请参考 [svg 属性规范](https://developer.mozilla.org/zh-CN/docs/Web/SVG/Attribute) |
+
+## NodeTheme（节点主题）
+
+### RectTheme
+
+`RectTheme` 类型表示矩形节点的主题，它继承自 [CommonTheme](#commontheme)，没有做额外的扩展；
+
+### CircleTheme
+
+`CircleTheme` 类型表示圆形节点的主题，它同样继承自 [CommonTheme](#commontheme)，没有做额外的扩展；
+
+### PolygonTheme
+
+`PolygonTheme` 类型表示多边形节点的主题。它继承自 [CommonTheme](#commontheme)，没有做额外的扩展；
+
+### EllipseTheme
+
+`EllipseTheme` 类型表示椭圆形节点的主题。它继承自 [CommonTheme](#commontheme)，没有做额外的扩展；
+
+## EdgeTheme（边主题）
+
+LogicFlow 中定义的各种边主题类型都扩展自 [CommonTheme](#commontheme)。它用于定义流程图中边的样式和属性。
+
+`EdgeTheme` 类型表示直线边的主题，除了[CommonTheme](#commontheme)中的通用属性外，还扩展了以下特定的属性：
+
+| 属性名          | 类型                            | 描述                                                   |
+| --------------- | ------------------------------- | ------------------------------------------------------ |
+| strokeDasharray | string                          | 定义用于描边路径的虚线模式，包括短划线和间隙的模式。   |
+| animation       | [EdgeAnimation](#edgeanimation) | 定义边的动画属性，包括描边颜色、虚线模式和动画时长等。 |
+
+### EdgePolylineTheme
+`EdgePolylineTheme`表示折线边的主题，它与[EdgeTheme](#edgetheme)类型相同，且没有做额外扩展。
+
+### EdgeBezierTheme
+`EdgeBezierTheme` 表示曲线边的主题，曲线边在直线边的基础上扩展了以下特定属性：
+
+| 属性名       | 类型                        | 描述                     |
+| ------------ | --------------------------- | ------------------------ |
+| adjustLine   | [EdgeTheme](#edgetheme)     | 定义贝塞尔调整线主题。   |
+| adjustAnchor | [CircleTheme](#circletheme) | 定义贝塞尔调整锚点主题。 |
+
+### EdgeAnimation
+`EdgeAnimation` 类型定义了边的动画样式，它包含以下属性：
+
+| 属性名                  | 类型                      | 描述                                    |
+| ----------------------- | ------------------------- | --------------------------------------- |
+| stroke                  | string \| 'none'          | 动画的边框颜色。                        |
+| strokeDasharray         | string                    | 动画的虚线样式。                        |
+| strokeDashoffset        | ${number}% \| number      | 动画的虚线偏移量。                      |
+| animationName           | string                    | 动画名称。                              |
+| animationDuration       | ${number}s \| ${number}ms | 动画持续时间。                          |
+| animationIterationCount | 'infinite' \| number      | 动画循环次数，可以是数字或 'infinite'。 |
+| animationTimingFunction | string                    | 动画的时间函数。                        |
+| animationDirection      | string                    | 动画的方向。                            |
+
+## TextTheme（文本主题）
+
+`TextTheme`表示文本最基础的主题，它继承自 [CommonTheme](#commontheme)，额外扩展了以下属性：
+
+| 属性名           | 类型                                                                                                                                  | 描述           |
+| ---------------- | ------------------------------------------------------------------------------------------------------------------------------------- | -------------- |
+| color            | string \| 'none'                                                                                                                      | 文本颜色。     |
+| fontSize         | number                                                                                                                                | 字体大小。     |
+| textWidth        | number (可选)                                                                                                                         | 文本宽度。     |
+| lineHeight       | number (可选)                                                                                                                         | 行高。         |
+| textAnchor       | 'start' \| 'middle' \| 'end' (可选)                                                                                                   | 文本锚点。     |
+| dominantBaseline | 'auto' \| 'text-bottom' \| 'alphabetic' \| 'ideographic' \| 'middle' \| 'central' \| 'mathematical' \| 'hanging' \| 'text-top' (可选) | 基线对齐方式。 |
+
+### TextNodeTheme
+`TextNodeTheme` 类型定义了文本节点的主题样式。它继承自 `TextTheme`，额外扩展了以下属性：
+
+| 属性名     | 类型                           | 描述                 |
+| ---------- | ------------------------------ | -------------------- |
+| background | [RectTheme](#recttheme) (可选) | 文本节点的背景样式。 |
+
+### NodeTextTheme
+`NodeTextTheme` 类型定义了节点上文本的主题样式。它继承自 `TextTheme`，额外扩展了以下属性：
+
+| 属性名       | 类型                                         | 描述                                                                                                                               |
+| ------------ | -------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------- |
+| overflowMode | 'default' \| 'autoWrap' \| 'ellipsis' (可选) | 文本超出指定宽度的处理方式：<br> - 'default': 不特殊处理，允许超出。<br> - 'autoWrap': 超出自动换行。<br> - 'ellipsis': 超出省略。 |
+| textWidth    | number (可选)                                | 文本宽度。                                                                                                                         |
+| background   | [RectTheme](#recttheme) (可选)               | 文本背景样式。                                                                                                                     |
+| wrapPadding  | string (可选)                                | 背景区域的内边距，例如 '5px,10px'。                                                                                                |
+
+### EdgeTextTheme
+`EdgeTextTheme` 类型定义了边上文本的主题样式。它继承自 `NodeTextTheme` 和 `TextTheme`，并添加了一些特定于边文本的属性：
+
+| 属性名     | 类型                                                      | 描述                                                                                               |
+| ---------- | --------------------------------------------------------- | -------------------------------------------------------------------------------------------------- |
+| textWidth  | number                                                    | 文本宽度。                                                                                         |
+| background | { wrapPadding?: string } & [RectTheme](#recttheme) (可选) | 文本背景样式，包含背景区域的内边距。<br> - wrapPadding (可选): 背景区域的内边距，例如 '5px,10px'。 |
+| hover      | [EdgeTextTheme](#edgetexttheme) (可选)                    | 悬停状态下的文本样式。                                                                             |
+
+
+## 其他主题类型
+
+### AnchorTheme
+`AnchorTheme`类型表示锚点的主题，它继承自 [CommonTheme](#commontheme)，扩展了以下特定属性：
+
+| 属性名 | 类型                                                | 描述                    |
+| ------ | --------------------------------------------------- | ----------------------- |
+| r      | number (可选)                                       | 锚点半径。              |
+| hover  | { r?: number } & [CommonTheme](#commontheme) (可选) | 定义锚点的 hover 效果。 |
+
+### OutlineTheme
+`OutlineTheme` 类型定义了节点选择状态下外侧选框的主题样式。它继承自 [CommonTheme](#commontheme) 和 `EdgeAnimation`，扩展了以下特定属性：
+
+| 属性名 | 类型                               | 描述               |
+| ------ | ---------------------------------- | ------------------ |
+| hover  | [CommonTheme](#commontheme) (可选) | 悬停状态下的样式。 |
+
+### ArrowTheme
+`ArrowTheme` 类型定义了边上箭头的主题样式。它继承自 [CommonTheme](#commontheme)，并添加了一些特定于箭头的属性：
+
+| 属性名         | 类型          | 描述                                                                                                                                                                                            |
+| -------------- | ------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| offset         | number        | 箭头长度。例如，对于符号 "->"，offset 表示箭头大于号的宽度。                                                                                                                                    |
+| refX           | number (可选) | SVG marker 的 x 轴参考点，用于控制箭头相对边终点的水平偏移。                                                                                                           |
+| refY           | number (可选) | SVG marker 的 y 轴参考点，用于控制箭头相对边终点的垂直偏移。                                                                                                           |
+| verticalLength | number        | 箭头垂直于边方向的长度。例如，对于符号 "->"，verticalLength 表示箭头大于号的高度。                                                                                       |
+| endArrowType   | string (可选) | 终点箭头类型，目前 LogicFlow 内置支持用户设置以下 5 种箭头：<br/>`solid`: 实心箭头<br/>`hollow`: 线条箭头<br/>`diamond`: 菱形箭头<br/>`circle`: 圆形箭头<br/>`none`: 无箭头<br/>内部默认会用 `solid` |
+| startArrowType | string (可选) | 起点箭头类型，目前 LogicFlow 内置支持用户设置以下 5 种箭头：<br/>`solid`: 实心箭头<br/>`hollow`: 线条箭头<br/>`diamond`: 菱形箭头<br/>`circle`: 圆形箭头<br/>`none`: 无箭头<br/>内部默认会用 `solid` |
+| strokeLinecap  | string (可选) | 线条的端点样式，作用同SVG strokeLinecap，支持传入：'butt'、'round'、'square' 三个值                                                                                                             |
+| strokeLinejoin | string (可选) | 线条的连接样式，作用同SVG strokeLinecap，支持传入：'miter'、'round'、'bevel' 三个值                                                                                                             |
+
+### AnchorLineTheme
+`AnchorLineTheme`类型表示节点锚点拖出的连线的主题，它继承自 [EdgeTheme](#edgetheme) 和 `EdgeAnimation`。
+
+这些节点主题类型允许在 LogicFlow 库中自定义节点的外观，同时通过继承 [CommonTheme](#commontheme) 保持一致的主题结构，从而提供灵活的可视化表现。
+

package/dist/docs/api/type/canvas-types.en.md

@@ -0,0 +1,25 @@
+---
+nav: API
+group:
+  title: Type dictionary
+  order: 3
+title: Canvas-related types
+toc: content
+order: 2
+---
+
+This page indexes graph, coordinate, and interaction types used when rendering or exporting data. See [`MainTypes.en.md`](./MainTypes.en.md) for full definitions.
+
+| Type | Description |
+| :--- | :--- |
+| [`GraphConfigData`](./MainTypes.en.md#graphconfigdata) | Input shape for `render` |
+| [`GraphData`](./MainTypes.en.md#graphdata) | Native LogicFlow graph snapshot |
+| [`GraphElement`](./MainTypes.en.md#graphelement) | Node-or-edge union |
+| [`GraphElementCtor`](./MainTypes.en.md#graphelementctor) | Element constructor typing |
+| [`Position`](./MainTypes.en.md#position) | 2D coordinate |
+| [`Point`](./MainTypes.en.md#point) | Point struct |
+| [`PointTuple`](./MainTypes.en.md#pointtuple) | Tuple pair |
+| [`PropertiesType`](./MainTypes.en.md#propertiestype) | Custom properties bag |
+| [`TextConfig`](./MainTypes.en.md#textconfig) | Text configuration |
+| [`ClientPosition`](./MainTypes.en.md#clientposition) | Pointer payload for events |
+| [`ElementState`](./MainTypes.en.md#elementstate) | Element state codes |

package/dist/docs/api/type/canvas-types.zh.md

@@ -0,0 +1,25 @@
+---
+nav: API
+group:
+  title: 类型字典
+  order: 3
+title: 画布相关
+toc: content
+order: 2
+---
+
+本页汇总画布渲染、读写与坐标相关类型。详细定义见 [`配置相关`](./MainTypes.zh.md) 对应章节。
+
+| 类型 | 说明 |
+| :--- | :--- |
+| [`GraphConfigData`](./MainTypes.zh.md#graphconfigdata流程图渲染数据类型) | 流程图渲染入参类型。 |
+| [`GraphData`](./MainTypes.zh.md#graphdata画布数据) | 画布导出数据类型。 |
+| [`GraphElement`](./MainTypes.zh.md#graphelement) | 画布元素（节点或边）联合类型。 |
+| [`GraphElementCtor`](./MainTypes.zh.md#graphelementctor画布元素构造函数) | 画布元素构造函数类型。 |
+| [`Position`](./MainTypes.zh.md#position坐标类型) | 二维坐标基础类型。 |
+| [`Point`](./MainTypes.zh.md#point点类型) | 点结构类型。 |
+| [`PointTuple`](./MainTypes.zh.md#pointtuple点坐标组) | 点坐标元组类型。 |
+| [`PropertiesType`](./MainTypes.zh.md#propertiestype元素属性) | 元素属性类型。 |
+| [`TextConfig`](./MainTypes.zh.md#textconfig文本配置) | 文本配置类型。 |
+| [`ClientPosition`](./MainTypes.zh.md#clientposition元素位置) | 事件坐标位置类型。 |
+| [`ElementState`](./MainTypes.zh.md#elementstate元素状态) | 元素状态码类型。 |

package/dist/docs/api/type/index.en.md

@@ -0,0 +1,96 @@
+---
+nav: API
+group:
+  title: 类型字典
+  order: 3
+title: 类型定义字典
+toc: content
+order: 0
+---
+
+Welcome to the LogicFlow type reference for **API**. This section indexes types used by constructor options and runtime APIs.
+
+**Documents in this group**
+
+- Theme style types: [`Theme Types`](./Theme.en.md)
+- Full type dictionary: [`Core Types (MainTypes)`](./MainTypes.en.md)
+- Canvas-related index: [`Canvas-related types`](./canvas-types.en.md)
+- Node-related index: [`Node-related types`](./node-types.en.md)
+- Plugin-related index: [`Built-in plugin types`](./plugin-types.en.md)
+
+Below is an overview of the types defined in LogicFlow:
+
+## Theme Style Related Types
+
+- [Theme](Theme.en.md#theme): The LogicFlow theme configuration for styling supported elements.
+- [CommonTheme](Theme.en.md#commontheme): The base for all theme variants, providing common properties such as `fill`, `stroke`, and `strokeWidth`.
+- [Node-related themes](Theme.en.md#node-related-theme-types): Shape themes such as `RectTheme`, `CircleTheme`, `PolygonTheme`, and `EllipseTheme`, inheriting from `CommonTheme`.
+- [EdgeTheme](Theme.en.md#edgetheme): Extends `CommonTheme` and adds edge-specific styling properties for fine-grained control.
+- [TextTheme](Theme.en.md#texttheme): Text styling properties including `color`, `fontSize`, and `textAnchor`; extends `CommonTheme`.
+
+## Instance Related
+
+- [Common](MainTypes.en.md#common): Basic LogicFlow instance configuration, including the canvas DOM node, width, height, etc.
+- [BackgroundConfig](MainTypes.en.md#backgroundconfig): Canvas background configuration, including background image and tiling mode.
+- [GridOptions](MainTypes.en.md#gridoptions): Canvas grid configuration, including grid size, visibility, and grid type.
+- [KeyboardDef](MainTypes.en.md#keyboarddef): Keyboard shortcut configuration, including enable state and key combinations.
+- [EdgeType](MainTypes.en.md#edgetype): Edge types including straight line, polyline, and bezier curve.
+- [AnimationConfig](MainTypes.en.md#animationconfig): Animation configuration, including whether node and edge animations are enabled.
+- [EdgeGeneratorType](MainTypes.en.md#edgegeneratortype): Custom edge generator type, used to generate different edge types based on node type.
+- [customTargetAnchorType](MainTypes.en.md#customtargetanchortype): Custom anchor connection rule function type, used to decide which anchor to connect when a manual connection drops on the target node.
+- [GuardsConfig](MainTypes.en.md#guardsconfig): Guard configuration for intercepting clone or delete actions.
+- [AppendConfig](MainTypes.en.md#appendconfig): Polyline segment selection info, including start and end indices, direction, and whether it is draggable.
+- [ArrowConfig](MainTypes.en.md#arrowconfig): Arrow configuration, including styles for arrow start and end.
+- [AttributesType](MainTypes.en.md#attributestype): Generic attribute type, allowing custom properties to be attached to LogicFlow elements.
+- [RegisterConfig](MainTypes.en.md#registerconfig): Configuration for registering new elements, including element type, view component, and model constructor.
+- [RegisterElement](MainTypes.en.md#registerelement): Configuration for registering new element types, including view component and data model.
+- [RegisterElementFunc](MainTypes.en.md#registerelementfunc): Function type for registering elements; accepts registration parameters and returns the registered element object.
+- [RegisterParam](MainTypes.en.md#registerparam): Parameter type for registering elements, including hyperscript function and other custom properties.
+- [BaseNodeModelCtor](MainTypes.en.md#basenodemodelctor): Constructor type for base node models, used to create node model instances.
+- [BaseEdgeModelCtor](MainTypes.en.md#baseedgemodelctor): Constructor type for base edge models, used to create edge model instances.
+
+## Canvas Related
+
+- [GraphConfigData](MainTypes.en.md#graphconfigdata): Flowchart rendering data type, including node and edge configurations.
+- [GraphData](MainTypes.en.md#graphdata): Canvas data type, including the data structures of nodes and edges.
+- [GraphElement](MainTypes.en.md#graphelement): Element type on the canvas, including nodes and edges.
+- [GraphElementCtor](MainTypes.en.md#graphelementctor): Constructor type for canvas elements, used to create node or edge instances.
+- [Position](MainTypes.en.md#position): Coordinate type for a point in 2D space, including x and y.
+- [Point](MainTypes.en.md#point): Extends `Position`, represents a point in 2D space with optional id and other attributes.
+- [PointTuple](MainTypes.en.md#pointtuple): A tuple representing a point in 2D space, with two numeric values for x and y.
+- [PropertiesType](MainTypes.en.md#propertiestype): Element property type, including width, height, style, and text style.
+- [TextConfig](MainTypes.en.md#textconfig): Configuration for text elements, including content, position, editing, and drag options.
+- [ClientPosition](MainTypes.en.md#clientposition): Represents event positions relative to the DOM overlay and the canvas overlay.
+
+## Node Related
+
+- [NodeConfig](MainTypes.en.md#nodeconfig): Node configuration structure, including identity, position, and behavior.
+- [OffsetData](MainTypes.en.md#offsetdata): Data structure representing node drag offset.
+- [FakeNodeConfig](MainTypes.en.md#fakenodeconfig): Configuration for a temporary node used during drag-create.
+- [VectorData](MainTypes.en.md#vectordata): Vector data, including changes along the x and y axes.
+- [DomAttributes](MainTypes.en.md#domattributes): DOM attributes for nodes, including CSS class name and other custom attributes.
+
+## Edge Related
+
+- [EdgeConfig](MainTypes.en.md#edgeconfig): Edge configuration structure, including edge properties, source, and target.
+- [EdgeData](MainTypes.en.md#edgedata): Extends `EdgeConfig`, representing edge data structure and behavior.
+
+## Plugin Related
+
+- [Extension](MainTypes.en.md#extension): Defines the structure and behavior of extensions in the LogicFlow framework, including render and destroy methods.
+- [ExtensionRenderFunc](MainTypes.en.md#extensionrenderfunc): Render function type for plugins, used to render extension content in LogicFlow.
+- [ExtensionType](MainTypes.en.md#extensiontype): Different forms of extensions available in LogicFlow, including constructor and object definitions.
+- [ExtensionConfig](MainTypes.en.md#extensionconfig): Configuration for extensions, including plugin identifier, extension behavior, and extra properties.
+- [IExtensionProps](MainTypes.en.md#iextensionprops): Parameter type for plugins, including LogicFlow instance and extension properties.
+- [ExtensionConstructor](MainTypes.en.md#extensionconstructor): Constructor type for creating plugin instances.
+- [ExtensionDefinition](MainTypes.en.md#extensiondefinition): Object form definition for plugins, including plugin name, install, and render methods.
+- [LabelConfig](MainTypes.en.md#labelconfig): Render data structure supported by the Label plugin, including label position, content, and style.
+- [LabelOption](MainTypes.en.md#labeloption): Configuration settings for the Label plugin, including label direction and maximum count.
+- [MenuConfig](MainTypes.en.md#menuconfig): Menu item configuration in the Menu plugin, including display text, CSS class name, icon, and callback function.
+
+For detailed information on each type, please refer to the corresponding documentation linked above.
+
+## See also
+
+- Runtime theme APIs: [`LogicFlow Instance > Theme`](../logicflow-instance/theme.en.md)
+- Constructor options: [`LogicFlow Constructor`](../logicflow-constructor/index.en.md)