From 5b9cd336c1cee66733f5fbd803bbb5266fbe1104 Mon Sep 17 00:00:00 2001 From: hizzgdev Date: Sun, 23 Jun 2024 04:37:48 +0800 Subject: [PATCH] add more docs --- docs2/en/options/index.md | 2 +- docs2/en/options/option.view.line_style.md | 39 ++++++++++++++++++++ docs2/zh/options/index.md | 2 +- docs2/zh/options/option.view.line_style.md | 41 ++++++++++++++++++++++ 4 files changed, 82 insertions(+), 2 deletions(-) create mode 100644 docs2/en/options/option.view.line_style.md create mode 100644 docs2/zh/options/option.view.line_style.md diff --git a/docs2/en/options/index.md b/docs2/en/options/index.md index 0b2dbd1a..ee27245f 100644 --- 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 new file mode 100644 index 00000000..aef75a35 --- /dev/null +++ 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. + +image + +## 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 index 182a56cb..836e9321 100644 --- 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 new file mode 100644 index 00000000..742432c8 --- /dev/null +++ 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）。这个设置将影响思维导图中各节点之间连线的样式。 + +image + +## 相关选项和设置 + +### custom_line_render + +`custom_line_render` 选项允许用户自定义思维导图线条的渲染方法。通过此选项，用户可以完全控制线条的绘制过程。 + +更多信息请参考 [custom_line_render 选项](option.view.custom_line_render.md)。