add more docs

hizzgdev · Jun 22, 2024 · 5b9cd33 · 5b9cd33
1 parent df8f221
commit 5b9cd33
Show file tree

Hide file tree

Showing 4 changed files with 82 additions and 2 deletions.
diff --git a/docs2/en/options/index.md b/docs2/en/options/index.md
@@ -26,7 +26,7 @@ jsMind provides various options to customize the behavior and appearance of mind
 | hide_scrollbars_when_draggable | bool  | false         | Whether to hide scrollbars when draggable is true | [Details](option.view.hide_scrollbars_when_draggable.md) |
 | hmargin                    | number    | Container's width | Minimum horizontal distance between the mind map and the container's outer frame (in pixels) | [Details](option.view.hmargin.vmargin.md)            |
 | line_color                 | string    | '#555'        | The color of the mind map lines (HTML color notation) | [Details](option.view.line_color.md)         |
-| line_style                 | string    | 'curved'      | Style of the lines, straight or curved           | [Details](option.view.line_style.md)         |
+| line_style                 | string    | 'curved'      | The style of the mind map lines, curved or straight | [Details](option.view.line_style.md)         |
 | line_width                 | number    | 2             | Width of the lines                               | [Details](option.view.line_width.md)         |
 | node_overflow              | string    | 'hidden'      | Style when node text is too long (Since 0.5.3) | [Details](option.view.node_overflow.md)      |
 | vmargin                    | number    | Container's height | Minimum vertical distance between the mind map and the container's outer frame (in pixels)| [Details](option.view.hmargin.vmargin.md)            |

diff --git a/docs2/en/options/option.view.line_style.md b/docs2/en/options/option.view.line_style.md
@@ -0,0 +1,39 @@
+# line_style Option
+
+| Option Name | Data Type | Default Value | Description |
+| --- | --- | --- | --- |
+| line_style | string | curved | The style of the mind map lines, curved or straight |
+
+## Option Description
+
+The `line_style` option is used to set the style of the lines connecting the nodes in the mind map. This option supports the following two styles:
+
+- `curved` - curved lines. This is the default value.
+- `straight` - straight lines
+
+## Usage Example
+
+Below is an example of setting the `line_style` option:
+
+```javascript
+var options = {
+    container: 'jsmind_container',
+    editable: true,
+    theme: 'primary',
+    view: {
+        line_style: 'straight', // Set the line style to straight
+    }
+};
+```
+
+In the example above, the `line_style` option is set to straight. This setting will affect the style of the lines connecting the nodes in the mind map.
+
+<img width="399" alt="image" src="https://github.com/hizzgdev/jsmind/assets/1690290/a21f82c7-1913-4fe1-b854-4921ea55523d">
+
+## Related Options and Settings
+
+### custom_line_render
+
+The `custom_line_render` option allows users to customize the rendering method of the mind map lines. With this option, users can have full control over the drawing process of the lines.
+
+For more information, please refer to the [custom_line_render option](option.view.custom_line_render.md).
diff --git a/docs2/zh/options/index.md b/docs2/zh/options/index.md
@@ -26,7 +26,7 @@ jsMind 提供了多种选项来定制思维导图的行为和外观。
 | hide_scrollbars_when_draggable | bool | false        | 当 draggable 为 true 时是否隐藏滚动条            | [详情](option.view.hide_scrollbars_when_draggable.md) |
 | hmargin                   | number   | 容器的宽度     | 思维导图距容器外框的最小水平距离（像素）             | [详情](option.view.hmargin.vmargin.md)            |
 | line_color                | string   | '#555'       | 思维导图线条的颜色（HTML颜色表示方法）              | [详情](option.view.line_color.md)         |
-| line_style                | string   | 'curved'     | 线条样式，直线或曲线                             | [详情](option.view.line_style.md)         |
+| line_style                | string   | 'curved'     | 思维导图线条样式，直线或曲线                     | [详情](option.view.line_style.md)         |
 | line_width                | number   | 2            | 线条宽度                                         | [详情](option.view.line_width.md)         |
 | node_overflow             | string   | 'hidden'     | 节点文本过长时的样式（从 0.5.3 版本开始支持）     | [详情](option.view.node_overflow.md)      |
 | vmargin                   | number   | 容器的高度     | 思维导图距容器外框的最小垂直距离（像素）           | [详情](option.view.hmargin.vmargin.md)            |

diff --git a/docs2/zh/options/option.view.line_style.md b/docs2/zh/options/option.view.line_style.md
@@ -0,0 +1,41 @@
+# line_style 选项
+
+| 选项名 | 数据类型 | 默认值 | 说明 |
+| --- | --- | --- | --- |
+| line_style | string | curved | 思维导图线条的样式，曲线或直线 |
+
+## 选项说明
+
+`line_style` 选项用于设置思维导图中各节点之间连线的样式。此选项支持以下两种样式：
+
+- `curved` - 曲线，这是默认值。
+- `straight` - 直线。
+
+需要注意的是，`line_style` 的样式可以被 `custom_line_render` 所覆盖。
+
+## 使用示例
+
+以下是一个设置 `line_style` 选项的示例：
+
+```javascript
+var options = {
+    container: 'jsmind_container',
+    editable: true,
+    theme: 'primary',
+    view: {
+        line_style: 'straight', // 设置线条样式为直线
+    }
+};
+```
+
+在上述示例中，`line_style` 选项被设置为直线（straight）。这个设置将影响思维导图中各节点之间连线的样式。
+
+<img width="399" alt="image" src="https://github.com/hizzgdev/jsmind/assets/1690290/a21f82c7-1913-4fe1-b854-4921ea55523d">
+
+## 相关选项和设置
+
+### custom_line_render
+
+`custom_line_render` 选项允许用户自定义思维导图线条的渲染方法。通过此选项，用户可以完全控制线条的绘制过程。
+
+更多信息请参考 [custom_line_render 选项](option.view.custom_line_render.md)。