coosld/mind-map
1
0
Fork 0
mirror of https://github.com/wanglin2/mind-map.git synced 2026-02-23 11:27:41 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

完善文档

Browse Source
This commit is contained in:
wanglin2 2023-03-17 16:24:22 +08:00
parent be1b3dffce
commit 0d29e29162
19 changed files with 413 additions and 47 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
README.md
View File

@ -26,6 +26,7 @@ Demo：[https://wanglin2.github.io/mind-map/](https://wanglin2.github.io/mind-ma
- [x] 支持多种节点形状
- [x] 支持导出为`json`、`png`、`svg`、`pdf`，支持从`json`、`xmind`导入
- [x] 支持小地图
- [x] 支持关联线
# 安装

1
web/src/pages/Doc/catalogList.js
View File

@ -26,6 +26,7 @@ let APIList = [
'doExport',
'miniMap',
'watermark',
'associativeLine',
'xmind',
'utils'
]

87
web/src/pages/Doc/en/associativeLine/index.md Normal file
View File

@ -0,0 +1,87 @@
# AssociativeLine plugin
> v0.4.5+
This plugin is used to support the addition of associative lines.
The plugin currently has relatively simple functions, and does not support modifying the control points of association lines or adding text to association lines.
## Register
```js
import MindMap from 'simple-mind-map'
import AssociativeLine from 'simple-mind-map/src/AssociativeLine.js'
MindMap.usePlugin(AssociativeLine)
```
After registration and instantiation of `MindMap`, the instance can be obtained through `mindMap.associativeLine`.
## Config
Support for modifying the thickness and color of associated lines, divided into default and active states. The configuration is as follows:
- `associativeLineWidth`: The thickness of the default state of the associated line. The default value is `2`
- `associativeLineColor`: Color of the default state of associative lines. The default value is `rgb(51, 51, 51)`
- `associativeLineActiveWidth`: The thickness of the active state of the associated line. The default value is `8`
- `associativeLineActiveColor`: The color of the active state of the associated line. The default value is `rgba(2, 167, 240, 1)`
The configuration is provided as a theme, so if you want to modify these four properties, you can modify them using the `mindMap.setThemeConfig(config)` method.
## Props
### mindMap.associativeLine.lineList
Currently, all connection line data, array types, and each item of the array are also an array:
```js
[
path, // Connector node
clickPath, // Invisible click line node
node, // Start node
toNode // Target node
]
```
### mindMap.associativeLine.activeLine
The currently active connection line and array type are the same as the structure of each item in the `lineList` array.
## Methods
### renderAllLines()
Re-render all associated lines.
### removeAllLines()
Remove all associated lines.
### createLineFromActiveNode()
Create an associated line from the current active node. If there are multiple active nodes, the default is the first node.
After calling this method, an association line will be rendered from the first active node to the current mouse real-time position. When a target node is clicked, it represents completion of creation. An association line will be rendered between the first active node and the clicked node.
### createLine(fromNode)
Creates an associative line starting at the specified node.
After calling this method, an association line will be rendered from the specified node to the current mouse real-time position. When a target node is clicked, it represents completion of creation, and an association line will be rendered between the specified node and the clicked node.
### addLine(fromNode, toNode)
Add an associative line directly.
Calling this method will directly create an association line from the `fromNode` to the `toNode` node.
### removeLine()
Deletes the currently active associative line. Clicking on an associated line is considered active.
### clearActiveLine()
Clears the active state of the currently active association line.

75
web/src/pages/Doc/en/associativeLine/index.vue Normal file
View File

@ -0,0 +1,75 @@
<template>
<div>
<h1>AssociativeLine plugin</h1>
<blockquote>
<p>v0.4.5+</p>
</blockquote>
<p>This plugin is used to support the addition of associative lines.</p>
<p>The plugin currently has relatively simple functions, and does not support modifying the control points of association lines or adding text to association lines.</p>
<h2>Register</h2>
<pre class="hljs"><code><span class="hljs-keyword">import</span> MindMap <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;simple-mind-map&#x27;</span>
<span class="hljs-keyword">import</span> AssociativeLine <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;simple-mind-map/src/AssociativeLine.js&#x27;</span>
MindMap.usePlugin(AssociativeLine)
</code></pre>
<p>After registration and instantiation of <code>MindMap</code>, the instance can be obtained through <code>mindMap.associativeLine</code>.</p>
<h2>Config</h2>
<p>Support for modifying the thickness and color of associated lines, divided into default and active states. The configuration is as follows:</p>
<ul>
<li>
<p><code>associativeLineWidth</code>: The thickness of the default state of the associated line. The default value is <code>2</code></p>
</li>
<li>
<p><code>associativeLineColor</code>: Color of the default state of associative lines. The default value is <code>rgb(51, 51, 51)</code></p>
</li>
<li>
<p><code>associativeLineActiveWidth</code>: The thickness of the active state of the associated line. The default value is <code>8</code></p>
</li>
<li>
<p><code>associativeLineActiveColor</code>: The color of the active state of the associated line. The default value is <code>rgba(2, 167, 240, 1)</code></p>
</li>
</ul>
<p>The configuration is provided as a theme, so if you want to modify these four properties, you can modify them using the <code>mindMap.setThemeConfig(config)</code> method.</p>
<h2>Props</h2>
<h3>mindMap.associativeLine.lineList</h3>
<p>Currently, all connection line data, array types, and each item of the array are also an array:</p>
<pre class="hljs"><code>[
path, <span class="hljs-comment">// Connector node</span>
clickPath, <span class="hljs-comment">// Invisible click line node</span>
node, <span class="hljs-comment">// Start node</span>
toNode <span class="hljs-comment">// Target node</span>
]
</code></pre>
<h3>mindMap.associativeLine.activeLine</h3>
<p>The currently active connection line and array type are the same as the structure of each item in the <code>lineList</code> array.</p>
<h2>Methods</h2>
<h3>renderAllLines()</h3>
<p>Re-render all associated lines.</p>
<h3>removeAllLines()</h3>
<p>Remove all associated lines.</p>
<h3>createLineFromActiveNode()</h3>
<p>Create an associated line from the current active node. If there are multiple active nodes, the default is the first node.</p>
<p>After calling this method, an association line will be rendered from the first active node to the current mouse real-time position. When a target node is clicked, it represents completion of creation. An association line will be rendered between the first active node and the clicked node.</p>
<h3>createLine(fromNode)</h3>
<p>Creates an associative line starting at the specified node.</p>
<p>After calling this method, an association line will be rendered from the specified node to the current mouse real-time position. When a target node is clicked, it represents completion of creation, and an association line will be rendered between the specified node and the clicked node.</p>
<h3>addLine(fromNode, toNode)</h3>
<p>Add an associative line directly.</p>
<p>Calling this method will directly create an association line from the <code>fromNode</code> to the <code>toNode</code> node.</p>
<h3>removeLine()</h3>
<p>Deletes the currently active associative line. Clicking on an associated line is considered active.</p>
<h3>clearActiveLine()</h3>
<p>Clears the active state of the currently active association line.</p>
</div>
</template>
<script>
export default {
}
</script>
<style>
</style>

4
web/src/pages/Doc/en/changelog/index.md
View File

@ -1,5 +1,9 @@
# Changelog
## 0.4.5
New: Supports associative lines.
## 0.4.4
New: Support horizontal scrolling in response to the mouse.

2
web/src/pages/Doc/en/changelog/index.vue
View File

@ -1,6 +1,8 @@
<template>
<div>
<h1>Changelog</h1>
<h2>0.4.5</h2>
<p>New: Supports associative lines.</p>
<h2>0.4.4</h2>
<p>New: Support horizontal scrolling in response to the mouse.</p>
<h2>0.4.3</h2>

3
web/src/pages/Doc/en/constructor/index.md
View File

@ -193,6 +193,9 @@ Listen to an event. Event list:
| node_tree_render_end（v0.2.16+） | Node tree render end event | |
| rich_text_selection_change（v0.4.0+） | Available when the `RichText` plugin is registered. Triggered when the text selection area changes when the node is edited | hasRange（Whether there is a selection）、rectInfo（Size and location information of the selected area）、formatInfo（Text formatting information of the selected area） |
| transforming-dom-to-images（v0.4.0+） | Available when the `RichText` plugin is registered. When there is a `DOM` node in `svg`, the `DOM` node will be converted to an image when exporting to an image. This event will be triggered during the conversion process. You can use this event to prompt the user about the node to which you are currently converting | index（Index of the node currently converted to）、len（Total number of nodes to be converted） |
| node_dragging（v0.4.5+） | Triggered when a node is dragged | node(The currently dragged node) |
| node_dragend（v0.4.5+） | Triggered when the node is dragged and ends | |
| associative_line_click（v0.4.5+） | Triggered when an associated line is clicked | path(Connector node)、clickPath(Invisible click line node)、node(Start node)、toNode(Target node) |
### emit(event, ...args)

15
web/src/pages/Doc/en/constructor/index.vue
View File

@ -447,6 +447,21 @@ poor performance and should be used sparingly.</p>
<td>Available when the <code>RichText</code> plugin is registered. When there is a <code>DOM</code> node in <code>svg</code>, the <code>DOM</code> node will be converted to an image when exporting to an image. This event will be triggered during the conversion process. You can use this event to prompt the user about the node to which you are currently converting</td>
<td>index（Index of the node currently converted to）、len（Total number of nodes to be converted）</td>
</tr>
<tr>
<td>node_dragging（v0.4.5+）</td>
<td>Triggered when a node is dragged</td>
<td>node(The currently dragged node)</td>
</tr>
<tr>
<td>node_dragend（v0.4.5+）</td>
<td>Triggered when the node is dragged and ends</td>
<td></td>
</tr>
<tr>
<td>associative_line_click（v0.4.5+）</td>
<td>Triggered when an associated line is clicked</td>
<td>path(Connector node)、clickPath(Invisible click line node)、node(Start node)、toNode(Target node)</td>
</tr>
</tbody>
</table>
<h3>emit(event, ...args)</h3>

5
web/src/pages/Doc/en/introduction/index.md
View File

@ -18,6 +18,7 @@
- [x] Supports various node shapes
- [x] Supports export to json, png, svg, pdf, and import from json, xmind
- [x] Supports mini map、support watermark
- [x] Supports associative lines
## Table of Contents
@ -50,10 +51,6 @@ Provide document page service.
The folder containing the packaged resources for the `web` folder.
4.`docs`
Documentation, etc.
## Related Articles
[Technical Analysis of Web Mind Map Implementation (chi)](https://juejin.cn/post/6987711560521089061)

37
web/src/pages/Doc/en/introduction/index.vue
View File

@ -4,20 +4,21 @@
<p><code>simple-mind-map</code> is a simple and powerful web mind map library, not dependent on any specific framework.</p>
<h2>Features</h2>
<ul>
<li><input type="checkbox" id="checkbox17" checked="true"><label for="checkbox17">Plugin architecture. In addition to core functions, other functions are provided as plugins, which can be used as needed to reduce the overall volume</label></li>
<li><input type="checkbox" id="checkbox18" checked="true"><label for="checkbox18">Supports four types of structures: logical structure diagrams, mind maps,</label>
<li><input type="checkbox" id="checkbox36" checked="true"><label for="checkbox36">Plugin architecture. In addition to core functions, other functions are provided as plugins, which can be used as needed to reduce the overall volume</label></li>
<li><input type="checkbox" id="checkbox37" checked="true"><label for="checkbox37">Supports four types of structures: logical structure diagrams, mind maps,</label>
organizational structure diagrams, and directory organization diagrams</li>
<li><input type="checkbox" id="checkbox19" checked="true"><label for="checkbox19">Built-in multiple themes and allows for highly customized styles, and support register new themes</label></li>
<li><input type="checkbox" id="checkbox20" checked="true"><label for="checkbox20">Supports shortcuts</label></li>
<li><input type="checkbox" id="checkbox21" checked="true"><label for="checkbox21">Node content supports images, icons, hyperlinks, notes, tags, and</label>
<li><input type="checkbox" id="checkbox38" checked="true"><label for="checkbox38">Built-in multiple themes and allows for highly customized styles, and support register new themes</label></li>
<li><input type="checkbox" id="checkbox39" checked="true"><label for="checkbox39">Supports shortcuts</label></li>
<li><input type="checkbox" id="checkbox40" checked="true"><label for="checkbox40">Node content supports images, icons, hyperlinks, notes, tags, and</label>
summaries</li>
<li><input type="checkbox" id="checkbox22" checked="true"><label for="checkbox22">Supports forward and backward navigation</label></li>
<li><input type="checkbox" id="checkbox23" checked="true"><label for="checkbox23">Supports dragging and scaling</label></li>
<li><input type="checkbox" id="checkbox24" checked="true"><label for="checkbox24">Supports right-click and Ctrl + left-click to select multiple items</label></li>
<li><input type="checkbox" id="checkbox25" checked="true"><label for="checkbox25">Supports free dragging and dragging to adjust nodes</label></li>
<li><input type="checkbox" id="checkbox26" checked="true"><label for="checkbox26">Supports various node shapes</label></li>
<li><input type="checkbox" id="checkbox27" checked="true"><label for="checkbox27">Supports export to json, png, svg, pdf, and import from json, xmind</label></li>
<li><input type="checkbox" id="checkbox28" checked="true"><label for="checkbox28">Supports mini map、support watermark</label></li>
<li><input type="checkbox" id="checkbox41" checked="true"><label for="checkbox41">Supports forward and backward navigation</label></li>
<li><input type="checkbox" id="checkbox42" checked="true"><label for="checkbox42">Supports dragging and scaling</label></li>
<li><input type="checkbox" id="checkbox43" checked="true"><label for="checkbox43">Supports right-click and Ctrl + left-click to select multiple items</label></li>
<li><input type="checkbox" id="checkbox44" checked="true"><label for="checkbox44">Supports free dragging and dragging to adjust nodes</label></li>
<li><input type="checkbox" id="checkbox45" checked="true"><label for="checkbox45">Supports various node shapes</label></li>
<li><input type="checkbox" id="checkbox46" checked="true"><label for="checkbox46">Supports export to json, png, svg, pdf, and import from json, xmind</label></li>
<li><input type="checkbox" id="checkbox47" checked="true"><label for="checkbox47">Supports mini map、support watermark</label></li>
<li><input type="checkbox" id="checkbox48" checked="true"><label for="checkbox48">Supports associative lines</label></li>
</ul>
<h2>Table of Contents</h2>
<p>1.<code>simple-mind-map</code></p>
@ -27,24 +28,22 @@ frameworks such as Vue and React, or without a framework.</p>
<p>This is an online mind map built using the <code>simple-mind-map</code> library and based
on <code>Vue2.x</code> and <code>ElementUI</code>. Features include:</p>
<ul>
<li><input type="checkbox" id="checkbox29" checked="true"><label for="checkbox29">Toolbar, which supports inserting and deleting nodes, and editing node</label>
<li><input type="checkbox" id="checkbox49" checked="true"><label for="checkbox49">Toolbar, which supports inserting and deleting nodes, and editing node</label>
images, icons, hyperlinks, notes, tags, and summaries</li>
<li><input type="checkbox" id="checkbox30" checked="true"><label for="checkbox30">Sidebar, with panels for basic style settings, node style settings,</label>
<li><input type="checkbox" id="checkbox50" checked="true"><label for="checkbox50">Sidebar, with panels for basic style settings, node style settings,</label>
outline, theme selection, and structure selection</li>
<li><input type="checkbox" id="checkbox31" checked="true"><label for="checkbox31">Import and export functionality; data is saved in the browser's local</label>
<li><input type="checkbox" id="checkbox51" checked="true"><label for="checkbox51">Import and export functionality; data is saved in the browser's local</label>
storage by default, but it also supports creating, opening, and editing
local files on the computer directly</li>
<li><input type="checkbox" id="checkbox32" checked="true"><label for="checkbox32">Right-click menu, which supports operations such as expanding, collapsing,</label>
<li><input type="checkbox" id="checkbox52" checked="true"><label for="checkbox52">Right-click menu, which supports operations such as expanding, collapsing,</label>
and organizing layout</li>
<li><input type="checkbox" id="checkbox33" checked="true"><label for="checkbox33">Bottom bar, which supports node and word count statistics, switching</label>
<li><input type="checkbox" id="checkbox53" checked="true"><label for="checkbox53">Bottom bar, which supports node and word count statistics, switching</label>
between edit and read-only modes, zooming in and out, and switching to
full screen, support mini map</li>
</ul>
<p>Provide document page service.</p>
<p>3.<code>dist</code></p>
<p>The folder containing the packaged resources for the <code>web</code> folder.</p>
<p>4.<code>docs</code></p>
<p>Documentation, etc.</p>
<h2>Related Articles</h2>
<p><a href="https://juejin.cn/post/6987711560521089061">Technical Analysis of Web Mind Map Implementation (chi)</a></p>
<p><a href="https://juejin.cn/post/7157681502506090510">Only a hundred lines of code are needed to add local file operation capability to your Web page. Are you sure not to try?</a></p>

2
web/src/pages/Doc/routerList.js
View File

@ -1,3 +1,3 @@
export default [{"lang":"zh","children":[{"path":"batchExecution","title":"BatchExecution实例"},{"path":"changelog","title":"Changelog"},{"path":"command","title":"Command实例"},{"path":"constructor","title":"构造函数"},{"path":"doExport","title":"Export 插件"},{"path":"drag","title":"Drag插件"},{"path":"introduction","title":"简介"},{"path":"keyboardNavigation","title":"KeyboardNavigation插件"},{"path":"keyCommand","title":"KeyCommand实例"},{"path":"miniMap","title":"MiniMap插件"},{"path":"node","title":"Node实例"},{"path":"render","title":"Render实例"},{"path":"richText","title":"RichText插件"},{"path":"select","title":"Select 插件 "},{"path":"start","title":"开始"},{"path":"translate","title":"参与翻译"},{"path":"utils","title":"内置工具方法"},{"path":"view","title":"View实例"},{"path":"watermark","title":"Watermark插件"},{"path":"xmind","title":"XMind解析"}]},{"lang":"en","children":[{"path":"batchExecution","title":"batchExecution instance"},{"path":"changelog","title":"Changelog"},{"path":"command","title":"command instance"},{"path":"constructor","title":"Constructor"},{"path":"doExport","title":"Export plugin"},{"path":"drag","title":"Drag plugin"},{"path":"introduction","title":"Introduction"},{"path":"keyboardNavigation","title":"KeyboardNavigation plugin"},{"path":"keyCommand","title":"KeyCommand instance"},{"path":"miniMap","title":"MiniMap plugin"},{"path":"node","title":"Node instance"},{"path":"render","title":"Render instance"},{"path":"richText","title":"RichText plugin"},{"path":"select","title":"Select plugin"},{"path":"start","title":"Start"},{"path":"translate","title":"Participate in translation"},{"path":"utils","title":"Utility Methods"},{"path":"view","title":"View instance"},{"path":"watermark","title":"Watermark plugin"},{"path":"xmind","title":"XMind parse"}]}]
export default [{"lang":"zh","children":[{"path":"associativeLine","title":"AssociativeLine 插件"},{"path":"batchExecution","title":"BatchExecution实例"},{"path":"changelog","title":"Changelog"},{"path":"command","title":"Command实例"},{"path":"constructor","title":"构造函数"},{"path":"doExport","title":"Export 插件"},{"path":"drag","title":"Drag插件"},{"path":"introduction","title":"简介"},{"path":"keyboardNavigation","title":"KeyboardNavigation插件"},{"path":"keyCommand","title":"KeyCommand实例"},{"path":"miniMap","title":"MiniMap插件"},{"path":"node","title":"Node实例"},{"path":"render","title":"Render实例"},{"path":"richText","title":"RichText插件"},{"path":"select","title":"Select 插件 "},{"path":"start","title":"开始"},{"path":"translate","title":"参与翻译"},{"path":"utils","title":"内置工具方法"},{"path":"view","title":"View实例"},{"path":"watermark","title":"Watermark插件"},{"path":"xmind","title":"XMind解析"}]},{"lang":"en","children":[{"path":"associativeLine","title":"AssociativeLine plugin"},{"path":"batchExecution","title":"batchExecution instance"},{"path":"changelog","title":"Changelog"},{"path":"command","title":"command instance"},{"path":"constructor","title":"Constructor"},{"path":"doExport","title":"Export plugin"},{"path":"drag","title":"Drag plugin"},{"path":"introduction","title":"Introduction"},{"path":"keyboardNavigation","title":"KeyboardNavigation plugin"},{"path":"keyCommand","title":"KeyCommand instance"},{"path":"miniMap","title":"MiniMap plugin"},{"path":"node","title":"Node instance"},{"path":"render","title":"Render instance"},{"path":"richText","title":"RichText plugin"},{"path":"select","title":"Select plugin"},{"path":"start","title":"Start"},{"path":"translate","title":"Participate in translation"},{"path":"utils","title":"Utility Methods"},{"path":"view","title":"View instance"},{"path":"watermark","title":"Watermark plugin"},{"path":"xmind","title":"XMind parse"}]}]

87
web/src/pages/Doc/zh/associativeLine/index.md Normal file
View File

@ -0,0 +1,87 @@
# AssociativeLine 插件
> v0.4.5+
该插件用于支持添加关联线。
该插件目前功能比较简陋，不支持修改关联线的控制点，不支持在关联线上添加文字。
## 注册
```js
import MindMap from 'simple-mind-map'
import AssociativeLine from 'simple-mind-map/src/AssociativeLine.js'
MindMap.usePlugin(AssociativeLine)
```
注册完且实例化`MindMap`后可通过`mindMap.associativeLine`获取到该实例。
## 配置
支持修改关联线的粗细和颜色，分为默认状态和激活状态。配置如下：
- `associativeLineWidth`：关联线默认状态的粗细，默认值为`2`
- `associativeLineColor`：关联线默认状态的颜色，默认值为`rgb(51, 51, 51)`
- `associativeLineActiveWidth`：关联线激活状态的粗细，默认值为`8`
- `associativeLineActiveColor`：关联线激活状态的颜色，默认值为`rgba(2, 167, 240, 1)`
配置以主题的方式提供，所以如果想要修改这四个属性，可以通过`mindMap.setThemeConfig(config)`方法进行修改。
## 属性
### mindMap.associativeLine.lineList
当前所有连接线数据，数组类型，数组的每一项也是一个数组：
```js
[
path, // 连接线节点
clickPath, // 不可见的点击线节点
node, // 起始节点
toNode // 目标节点
]
```
### mindMap.associativeLine.activeLine
当前激活的连接线，数组类型，同`lineList`数组的每一项的结构。
## 方法
### renderAllLines()
重新渲染所有关联线。
### removeAllLines()
移除所有关联线。
### createLineFromActiveNode()
从当前激活节点开始创建关联线，如果有多个激活节点，默认为第一个节点。
调用该方法后，会从第一个激活节点到当前鼠标实时位置渲染一条关联线，当点击某个目标节点后则代表创建完成，会在第一个激活节点和点击节点之间渲染一条关联线。
### createLine(fromNode)
从指定节点开始创建关联线。
调用该方法后，会从指定节点到当前鼠标实时位置渲染一条关联线，当点击某个目标节点后则代表创建完成，会在指定节点和点击节点之间渲染一条关联线。
### addLine(fromNode, toNode)
直接添加一条关联线。
调用该方法，会直接创建一条从`fromNode`到`toNode`节点的关联线。
### removeLine()
删除当前激活的关联线。点击某条关联线则视为激活。
### clearActiveLine()
清除当前激活的关联线的激活状态。

75
web/src/pages/Doc/zh/associativeLine/index.vue Normal file
View File

@ -0,0 +1,75 @@
<template>
<div>
<h1>AssociativeLine 插件</h1>
<blockquote>
<p>v0.4.5+</p>
</blockquote>
<p>该插件用于支持添加关联线。</p>
<p>该插件目前功能比较简陋，不支持修改关联线的控制点，不支持在关联线上添加文字。</p>
<h2>注册</h2>
<pre class="hljs"><code><span class="hljs-keyword">import</span> MindMap <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;simple-mind-map&#x27;</span>
<span class="hljs-keyword">import</span> AssociativeLine <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;simple-mind-map/src/AssociativeLine.js&#x27;</span>
MindMap.usePlugin(AssociativeLine)
</code></pre>
<p>注册完且实例化<code>MindMap</code>后可通过<code>mindMap.associativeLine</code>获取到该实例。</p>
<h2>配置</h2>
<p>支持修改关联线的粗细和颜色，分为默认状态和激活状态。配置如下：</p>
<ul>
<li>
<p><code>associativeLineWidth</code>：关联线默认状态的粗细，默认值为<code>2</code></p>
</li>
<li>
<p><code>associativeLineColor</code>：关联线默认状态的颜色，默认值为<code>rgb(51, 51, 51)</code></p>
</li>
<li>
<p><code>associativeLineActiveWidth</code>：关联线激活状态的粗细，默认值为<code>8</code></p>
</li>
<li>
<p><code>associativeLineActiveColor</code>：关联线激活状态的颜色，默认值为<code>rgba(2, 167, 240, 1)</code></p>
</li>
</ul>
<p>配置以主题的方式提供，所以如果想要修改这四个属性，可以通过<code>mindMap.setThemeConfig(config)</code>方法进行修改。</p>
<h2>属性</h2>
<h3>mindMap.associativeLine.lineList</h3>
<p>当前所有连接线数据，数组类型，数组的每一项也是一个数组：</p>
<pre class="hljs"><code>[
path, <span class="hljs-comment">// 连接线节点</span>
clickPath, <span class="hljs-comment">// 不可见的点击线节点</span>
node, <span class="hljs-comment">// 起始节点</span>
toNode <span class="hljs-comment">// 目标节点</span>
]
</code></pre>
<h3>mindMap.associativeLine.activeLine</h3>
<p>当前激活的连接线，数组类型，同<code>lineList</code>数组的每一项的结构。</p>
<h2>方法</h2>
<h3>renderAllLines()</h3>
<p>重新渲染所有关联线。</p>
<h3>removeAllLines()</h3>
<p>移除所有关联线。</p>
<h3>createLineFromActiveNode()</h3>
<p>从当前激活节点开始创建关联线，如果有多个激活节点，默认为第一个节点。</p>
<p>调用该方法后，会从第一个激活节点到当前鼠标实时位置渲染一条关联线，当点击某个目标节点后则代表创建完成，会在第一个激活节点和点击节点之间渲染一条关联线。</p>
<h3>createLine(fromNode)</h3>
<p>从指定节点开始创建关联线。</p>
<p>调用该方法后，会从指定节点到当前鼠标实时位置渲染一条关联线，当点击某个目标节点后则代表创建完成，会在指定节点和点击节点之间渲染一条关联线。</p>
<h3>addLine(fromNode, toNode)</h3>
<p>直接添加一条关联线。</p>
<p>调用该方法，会直接创建一条从<code>fromNode</code>到<code>toNode</code>节点的关联线。</p>
<h3>removeLine()</h3>
<p>删除当前激活的关联线。点击某条关联线则视为激活。</p>
<h3>clearActiveLine()</h3>
<p>清除当前激活的关联线的激活状态。</p>
</div>
</template>
<script>
export default {
}
</script>
<style>
</style>

4
web/src/pages/Doc/zh/changelog/index.md
View File

@ -1,5 +1,9 @@
# Changelog
## 0.4.5
新增：支持关联线。
## 0.4.4
新增：支持响应鼠标的横向滚动。

2
web/src/pages/Doc/zh/changelog/index.vue
View File

@ -1,6 +1,8 @@
<template>
<div>
<h1>Changelog</h1>
<h2>0.4.5</h2>
<p>新增：支持关联线。</p>
<h2>0.4.4</h2>
<p>新增：支持响应鼠标的横向滚动。</p>
<h2>0.4.3</h2>

3
web/src/pages/Doc/zh/constructor/index.md
View File

@ -190,6 +190,9 @@ mindMap.setTheme('主题名称')
| node_tree_render_end（v0.2.16+） | 节点树渲染完毕事件 | |
| rich_text_selection_change（v0.4.0+） | 当注册了`RichText`插件时可用。当节点编辑时，文本选区发生改变时触发 | hasRange（是否存在选区）、rectInfo（选区的尺寸和位置信息）、formatInfo（选区的文本格式化信息） |
| transforming-dom-to-images（v0.4.0+） | 当注册了`RichText`插件时可用。当`svg`中存在`DOM`节点时，导出为图片时会将`DOM`节点转换为图片，转换过程中会触发该事件，可用通过该事件给用户提示，告知目前转换到的节点 | index（当前转换到的节点索引）、len（一共需要转换的节点数量） |
| node_dragging（v0.4.5+） | 当某个节点被拖拽时触发 | node（当前被拖拽的节点） |
| node_dragend（v0.4.5+） | 节点被拖拽结束时触发 | |
| associative_line_click（v0.4.5+） | 点击某条关联线时触发 | path（连接线节点）、clickPath（不可见的点击线节点）、node（起始节点）、toNode（目标节点） |
### emit(event, ...args)

15
web/src/pages/Doc/zh/constructor/index.vue
View File

@ -440,6 +440,21 @@ mindMap.setTheme(<span class="hljs-string">&#x27;主题名称&#x27;</span>)
<td>当注册了<code>RichText</code>插件时可用。当<code>svg</code>中存在<code>DOM</code>节点时，导出为图片时会将<code>DOM</code>节点转换为图片，转换过程中会触发该事件，可用通过该事件给用户提示，告知目前转换到的节点</td>
<td>index（当前转换到的节点索引）、len（一共需要转换的节点数量）</td>
</tr>
<tr>
<td>node_dragging（v0.4.5+）</td>
<td>当某个节点被拖拽时触发</td>
<td>node（当前被拖拽的节点）</td>
</tr>
<tr>
<td>node_dragend（v0.4.5+）</td>
<td>节点被拖拽结束时触发</td>
<td></td>
</tr>
<tr>
<td>associative_line_click（v0.4.5+）</td>
<td>点击某条关联线时触发</td>
<td>path（连接线节点）、clickPath（不可见的点击线节点）、node（起始节点）、toNode（目标节点）</td>
</tr>
</tbody>
</table>
<h3>emit(event, ...args)</h3>

5
web/src/pages/Doc/zh/introduction/index.md
View File

@ -16,6 +16,7 @@
- [x] 支持多种节点形状
- [x] 支持导出为`json`、`png`、`svg`、`pdf`，支持从`json`、`xmind`导入
- [x] 支持小地图、支持水印
- [x] 支持关联线
## 目录介绍
@ -39,10 +40,6 @@
打包`web`后的资源文件夹。
4.`docs`
文档等。
## 相关文章
[Web思维导图实现的技术点分析](https://juejin.cn/post/6987711560521089061)

37
web/src/pages/Doc/zh/introduction/index.vue
View File

@ -4,18 +4,19 @@
<p><code>simple-mind-map</code>是一个简单&amp;强大的Web思维导图库，不依赖任何特定框架。</p>
<h2>特性</h2>
<ul>
<li><input type="checkbox" id="checkbox0" checked="true"><label for="checkbox0">插件化架构，除核心功能外，其他功能作为插件提供，按需使用，减小整体体积</label></li>
<li><input type="checkbox" id="checkbox1" checked="true"><label for="checkbox1">支持逻辑结构图、思维导图、组织结构图、目录组织图四种结构</label></li>
<li><input type="checkbox" id="checkbox2" checked="true"><label for="checkbox2">内置多种主题，允许高度自定义样式，支持注册新主题</label></li>
<li><input type="checkbox" id="checkbox3" checked="true"><label for="checkbox3">支持快捷键</label></li>
<li><input type="checkbox" id="checkbox4" checked="true"><label for="checkbox4">节点内容支持图片、图标、超链接、备注、标签、概要</label></li>
<li><input type="checkbox" id="checkbox5" checked="true"><label for="checkbox5">支持前进后退</label></li>
<li><input type="checkbox" id="checkbox6" checked="true"><label for="checkbox6">支持拖动、缩放</label></li>
<li><input type="checkbox" id="checkbox7" checked="true"><label for="checkbox7">支持右键和Ctrl+左键两种多选方式</label></li>
<li><input type="checkbox" id="checkbox8" checked="true"><label for="checkbox8">支持节点自由拖拽、拖拽调整</label></li>
<li><input type="checkbox" id="checkbox9" checked="true"><label for="checkbox9">支持多种节点形状</label></li>
<li><input type="checkbox" id="checkbox10" checked="true"><label for="checkbox10">支持导出为</label><code>json</code>、<code>png</code>、<code>svg</code>、<code>pdf</code>，支持从<code>json</code>、<code>xmind</code>导入</li>
<li><input type="checkbox" id="checkbox11" checked="true"><label for="checkbox11">支持小地图、支持水印</label></li>
<li><input type="checkbox" id="checkbox54" checked="true"><label for="checkbox54">插件化架构，除核心功能外，其他功能作为插件提供，按需使用，减小整体体积</label></li>
<li><input type="checkbox" id="checkbox55" checked="true"><label for="checkbox55">支持逻辑结构图、思维导图、组织结构图、目录组织图四种结构</label></li>
<li><input type="checkbox" id="checkbox56" checked="true"><label for="checkbox56">内置多种主题，允许高度自定义样式，支持注册新主题</label></li>
<li><input type="checkbox" id="checkbox57" checked="true"><label for="checkbox57">支持快捷键</label></li>
<li><input type="checkbox" id="checkbox58" checked="true"><label for="checkbox58">节点内容支持图片、图标、超链接、备注、标签、概要</label></li>
<li><input type="checkbox" id="checkbox59" checked="true"><label for="checkbox59">支持前进后退</label></li>
<li><input type="checkbox" id="checkbox60" checked="true"><label for="checkbox60">支持拖动、缩放</label></li>
<li><input type="checkbox" id="checkbox61" checked="true"><label for="checkbox61">支持右键和Ctrl+左键两种多选方式</label></li>
<li><input type="checkbox" id="checkbox62" checked="true"><label for="checkbox62">支持节点自由拖拽、拖拽调整</label></li>
<li><input type="checkbox" id="checkbox63" checked="true"><label for="checkbox63">支持多种节点形状</label></li>
<li><input type="checkbox" id="checkbox64" checked="true"><label for="checkbox64">支持导出为</label><code>json</code>、<code>png</code>、<code>svg</code>、<code>pdf</code>，支持从<code>json</code>、<code>xmind</code>导入</li>
<li><input type="checkbox" id="checkbox65" checked="true"><label for="checkbox65">支持小地图、支持水印</label></li>
<li><input type="checkbox" id="checkbox66" checked="true"><label for="checkbox66">支持关联线</label></li>
</ul>
<h2>目录介绍</h2>
<p>1.<code>simple-mind-map</code></p>
@ -23,17 +24,15 @@
<p>2.<code>web</code></p>
<p>使用<code>simple-mind-map</code>工具库，基于<code>vue2.x</code>、<code>ElementUI</code>搭建的在线思维导图。特性：</p>
<ul>
<li><input type="checkbox" id="checkbox12" checked="true"><label for="checkbox12">工具栏，支持插入节点、删除节点；编辑节点图片、图标、超链接、备注、标签、概要</label></li>
<li><input type="checkbox" id="checkbox13" checked="true"><label for="checkbox13">侧边栏，基础样式设置面板、节点样式设置面板、大纲面板、主题选择面板、结构选择面板</label></li>
<li><input type="checkbox" id="checkbox14" checked="true"><label for="checkbox14">导入导出功能；数据默认保存在浏览器本地存储，也支持直接创建、打开、编辑电脑本地文件</label></li>
<li><input type="checkbox" id="checkbox15" checked="true"><label for="checkbox15">右键菜单，支持展开、收起、整理布局等操作</label></li>
<li><input type="checkbox" id="checkbox16" checked="true"><label for="checkbox16">底部栏，支持节点数量、字数统计；支持切换编辑和只读模式；支持放大缩小；支持全屏切换；支持小地图</label></li>
<li><input type="checkbox" id="checkbox67" checked="true"><label for="checkbox67">工具栏，支持插入节点、删除节点；编辑节点图片、图标、超链接、备注、标签、概要</label></li>
<li><input type="checkbox" id="checkbox68" checked="true"><label for="checkbox68">侧边栏，基础样式设置面板、节点样式设置面板、大纲面板、主题选择面板、结构选择面板</label></li>
<li><input type="checkbox" id="checkbox69" checked="true"><label for="checkbox69">导入导出功能；数据默认保存在浏览器本地存储，也支持直接创建、打开、编辑电脑本地文件</label></li>
<li><input type="checkbox" id="checkbox70" checked="true"><label for="checkbox70">右键菜单，支持展开、收起、整理布局等操作</label></li>
<li><input type="checkbox" id="checkbox71" checked="true"><label for="checkbox71">底部栏，支持节点数量、字数统计；支持切换编辑和只读模式；支持放大缩小；支持全屏切换；支持小地图</label></li>
</ul>
<p>提供文档页面服务。</p>
<p>3.<code>dist</code></p>
<p>打包<code>web</code>后的资源文件夹。</p>
<p>4.<code>docs</code></p>
<p>文档等。</p>
<h2>相关文章</h2>
<p><a href="https://juejin.cn/post/6987711560521089061">Web思维导图实现的技术点分析</a></p>
<p><a href="https://juejin.cn/post/7157681502506090510">只需百来行代码，为你的Web页面增加本地文件操作能力，确定不试试吗？</a></p>