Skip to content

Commit 79afc94

Browse files
DymoneLewisDymoneLewis
committed
docs: 文档Theme类型说明-箭头类型新增参数
1 parent 44c22a1 commit 79afc94

2 files changed

Lines changed: 22 additions & 13 deletions

File tree

‎sites/docs/docs/api/type/Theme.en.md‎

Lines changed: 12 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -4,8 +4,9 @@ title: Theme
44
toc: content
55
order: 0
66
---
7-
This article mainly introduces the type definitions of LogicFlow theme styles. Let's start with the `style` parameter used to control the overall style of the canvas when creating a LogicFlow instance, which is of type `Theme`:
7+
This article mainly introduces the type definitions of LogicFlow theme styles.
88

9+
## Theme
910
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.
1011

1112
| Property Name | Type | Description |
@@ -166,12 +167,16 @@ The `OutlineTheme` type defines the theme for the outline of nodes when selected
166167
### ArrowTheme
167168
The `ArrowTheme` type defines the theme for arrows on edges. It inherits from [CommonTheme](#commontheme) and adds some properties specific to arrows:
168169

169-
| Property Name | Type | Description |
170-
| -------------- | ----------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------- |
171-
| offset | number | The length of the arrow. For example, for the symbol "->", offset represents the width of the greater-than sign. |
172-
| refX | number (optional) | The distance of the arrow perpendicular to the edge. For example, for the symbol "->", refX represents the height of the greater-than sign. |
173-
| refY | number (optional) | The distance of the arrow perpendicular to the edge. For example, for the symbol "->", refY represents the height of the greater-than sign. |
174-
| verticalLength | number | The distance of the arrow perpendicular to the edge. For example, for the symbol "->", verticalLength represents the height of the greater-than sign. |
170+
| Property Name | Type | Description |
171+
| -------------- | ----------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
172+
| offset | number | The length of the arrow. For example, for the symbol "->", offset represents the width of the greater-than sign. |
173+
| refX | number (optional) | The distance of the arrow perpendicular to the edge. For example, for the symbol "->", refX represents the height of the greater-than sign. |
174+
| refY | number (optional) | The distance of the arrow perpendicular to the edge. For example, for the symbol "->", refY represents the height of the greater-than sign. |
175+
| verticalLength | number | The distance of the arrow perpendicular to the edge. For example, for the symbol "->", verticalLength represents the height of the greater-than sign. |
176+
| endArrowType | string (optional) | The end arrow type. LogicFlow internally supports the following 4 types of arrows: <br/>`solid`: Solid arrow (default)<br/>`hollow`: Line arrow<br/>`diamond`: Diamond arrow<br/>`circle`: Circle arrow |
177+
| startArrowType | string (optional) | The start arrow type. LogicFlow internally supports the following 4 types of arrows: <br/>`solid`: Solid arrow (default)<br/>`hollow`: Line arrow<br/>`diamond`: Diamond arrow<br/>`circle`: Circle arrow |
178+
| strokeLinecap | string (optional) | The end style of the line, same as SVG strokeLinecap, supports three values: 'butt', 'round', 'square' |
179+
| strokeLinejoin | string (optional) | The join style of the line, same as SVG strokeLinejoin, supports three values: 'miter', 'round', 'bevel' |
175180

176181
### AnchorLineTheme
177182
The `AnchorLineTheme` type represents the theme for lines drawn from anchors. It inherits from [EdgeTheme](#edgetheme) and `EdgeAnimation`.

‎sites/docs/docs/api/type/Theme.zh.md‎

Lines changed: 10 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -166,12 +166,16 @@ LogicFlow 中定义的各种边主题类型都扩展自 [CommonTheme](#commonthe
166166
### ArrowTheme
167167
`ArrowTheme` 类型定义了边上箭头的主题样式。它继承自 [CommonTheme](#commontheme)，并添加了一些特定于箭头的属性：
168168

169-
| 属性名 | 类型 | 描述 |
170-
| -------------- | ------------- | ------------------------------------------------------------------------------ |
171-
| offset | number | 箭头长度。例如，对于符号 "->"，offset 表示箭头大于号的宽度。 |
172-
| refX | number (可选) | 箭头垂直于边的距离。例如，对于符号 "->"，refX 表示箭头大于号的高度。 |
173-
| refY | number (可选) | 箭头垂直于边的距离。例如，对于符号 "->"，refY 表示箭头大于号的高度。 |
174-
| verticalLength | number | 箭头垂直于边的距离。例如，对于符号 "->"，verticalLength 表示箭头大于号的高度。 |
169+
| 属性名 | 类型 | 描述 |
170+
| -------------- | ------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
171+
| offset | number | 箭头长度。例如，对于符号 "->"，offset 表示箭头大于号的宽度。 |
172+
| refX | number (可选) | 箭头垂直于边的距离。例如，对于符号 "->"，refX 表示箭头大于号的高度。 |
173+
| refY | number (可选) | 箭头垂直于边的距离。例如，对于符号 "->"，refY 表示箭头大于号的高度。 |
174+
| verticalLength | number | 箭头垂直于边的距离。例如，对于符号 "->"，verticalLength 表示箭头大于号的高度。 |
175+
| endArrowType | string (可选) | 终点箭头类型，目前LogicFlow内置支持用户设置以下4种箭头：<br/>`solid`: 实心箭头<br/>`hollow`: 线条箭头<br/>`diamond`: 菱形箭头<br/>`circle`: 圆形箭头<br/>内部默认会用`solid` |
176+
| startArrowType | string (可选) | 起点箭头类型，目前LogicFlow内置支持用户设置以下4种箭头：<br/>`solid`: 实心箭头<br/>`hollow`: 线条箭头<br/>`diamond`: 菱形箭头<br/>`circle`: 圆形箭头<br/>内部默认会用`solid` |
177+
| strokeLinecap | string (可选) | 线条的端点样式，作用同SVG strokeLinecap，支持传入：'butt'、'round'、'square' 三个值 |
178+
| strokeLinejoin | string (可选) | 线条的连接样式，作用同SVG strokeLinecap，支持传入：'miter'、'round'、'bevel' 三个值 |
175179

176180
### AnchorLineTheme
177181
`AnchorLineTheme`类型表示节点锚点拖出的连线的主题，它继承自 [EdgeTheme](#edgetheme) 和 `EdgeAnimation`。

0 commit comments

Comments
 (0)