['center', 'center'], Represents the root node at the center of the canvas, In addition to center, keywords can also be set to left, top, right, and bottom, In addition to passing keywords, each item in the array can also pass a number representing a specific pixel, Can pass a percentage string, such as ['40%', '60%'], Represents a horizontal position at 40% of the canvas width, and a vertical position at 60% of the canvas height1.simple-mind-map
This is an online mind map built using the simple-mind-map library and based
on Vue2.x and ElementUI. Features include:
Firstly, provide a container element with a width and height not equal to 0:
<div id="mindMapContainer"></div>
Also, set the CSS style again:
#mindMapContainer * {
+ margin: 0;
+ padding: 0;
+}
+Then introduce the simple-mind-map library and create an instance:
import MindMap from "simple-mind-map";
@@ -47,11 +53,13 @@ compile this dependency:
If you want to implement a complete mind map, you usually need to develop some UI interfaces to achieve more functions through the interfaces provided by the simple-mind-map library.
simple-mind-map supports rich configurations, events, commands, and some additional plugin extensions. Read the subsequent documentation to learn more.
The non-packaged 'ES' module is introduced by default, and only contains core functions, not unregistered plugin content, which can effectively reduce the size. However, you need to configure the babel compilation simple mind-map in your project to prevent some newer js syntax some browsers not supporting it.
-If you need a file in the format of umd module, such as CDN in the browser, Then you can find the simpleMindMap.umd.min.js file in the /simple-mind-map/dist/ directory, copy it to your project, and then import it into the page:
-<script scr="simpleMindMap.umd.min.js"></script>
+If you need a file in the format of umd module, such as CDN in the browser, Then you can find the simpleMindMap.umd.min.js file and simpleMindMap.css file in the /simple-mind-map/dist/ directory, copy it to your project, and then import it into the page:
+<link rel="stylesheet" href="simpleMindMap.css">
+<script scr="simpleMindMap.umd.min.js"></script>
A global variable window.simpleMindMap will be created.
The disadvantage of this method is that it will contain all the content, including the plugins you have not registered, so the overall volume will be relatively large.
+（v0.5.4+）If you want to use the ES module directly on the browser side, you can find the simpleMindMap.esm.js and simpleMindMap.esm.css files in the /simple-mind-map/dist/ directory.
Development
If you only use library, you don't need to read this section.
Local Development
diff --git a/web/src/pages/Doc/routerList.js b/web/src/pages/Doc/routerList.js
index dfb7372f..16946338 100644
--- a/web/src/pages/Doc/routerList.js
+++ b/web/src/pages/Doc/routerList.js
@@ -1,3 +1,3 @@
- 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解析"},{"path":"markdown","title":"Markdown解析"}]},{"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"},{"path":"markdown","title":"Markdown 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":"course1","title":"基本使用"},{"path":"course2","title":"操作节点内容"},{"path":"doExport","title":"Export 插件"},{"path":"drag","title":"Drag插件"},{"path":"introduction","title":"简介"},{"path":"keyCommand","title":"KeyCommand实例"},{"path":"keyboardNavigation","title":"KeyboardNavigation插件"},{"path":"markdown","title":"Markdown解析"},{"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":"keyCommand","title":"KeyCommand instance"},{"path":"keyboardNavigation","title":"KeyboardNavigation plugin"},{"path":"markdown","title":"Markdown parse"},{"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"}]}]
\ No newline at end of file
diff --git a/web/src/pages/Doc/zh/changelog/index.md b/web/src/pages/Doc/zh/changelog/index.md
index ee2db01a..482f8167 100644
--- a/web/src/pages/Doc/zh/changelog/index.md
+++ b/web/src/pages/Doc/zh/changelog/index.md
@@ -6,6 +6,10 @@
新增：1.支持设置初始中心节点的位置。
+### 0.5.3-fix.1
+
+修复：1.修复设置初始中心节点的位置不生效的问题。
+
## 0.5.2
修复：1.导出的`json`数据中去除`uid`；2.重新渲染时清空节点缓存池。
diff --git a/web/src/pages/Doc/zh/constructor/index.md b/web/src/pages/Doc/zh/constructor/index.md
index d3b69053..56be19c5 100644
--- a/web/src/pages/Doc/zh/constructor/index.md
+++ b/web/src/pages/Doc/zh/constructor/index.md
@@ -51,7 +51,7 @@ const mindMap = new MindMap({
| enableShortcutOnlyWhenMouseInSvg（v0.5.1+） | Boolean | true | 是否只有当鼠标在画布内才响应快捷键事件 | |
| enableNodeTransitionMove（v0.5.1+） | Boolean | true | 是否开启节点动画过渡 | |
| nodeTransitionMoveDuration（v0.5.1+） | Number | 300 | 如果开启节点动画过渡，可以通过该属性设置过渡的时间，单位ms | |
-| initRootNodePosition（v0.5.3+） | Array | ['center', 'center'] | 初始根节点的位置，可传一个数组，默认为`['center', 'center']`，代表根节点处于画布中心位置，除了`center`，关键词还可以设置`left`、`top`、`right`、`bottom`，除了可以传关键词，数组的每项还可以传递一个数字，代表具体的像素，可以传递一个百分比字符串，比如`['40%', '60%']`，代表水平位置在画布宽度的`40%`的位置，垂直位置在画布高度的`60%`的位置 | |
+| initRootNodePosition（v0.5.3+） | Array | null | 初始根节点的位置，可传一个数组，默认为`['center', 'center']`，代表根节点处于画布中心位置，除了`center`，关键词还可以设置`left`、`top`、`right`、`bottom`，除了可以传关键词，数组的每项还可以传递一个数字，代表具体的像素，可以传递一个百分比字符串，比如`['40%', '60%']`，代表水平位置在画布宽度的`40%`的位置，垂直位置在画布高度的`60%`的位置 | |
### 水印配置
diff --git a/web/src/pages/Doc/zh/constructor/index.vue b/web/src/pages/Doc/zh/constructor/index.vue
index 5048e4ee..14aed26a 100644
--- a/web/src/pages/Doc/zh/constructor/index.vue
+++ b/web/src/pages/Doc/zh/constructor/index.vue
@@ -220,7 +220,7 @@
initRootNodePosition（v0.5.3+）
Array
-['center', 'center']
+null
初始根节点的位置，可传一个数组，默认为['center', 'center']，代表根节点处于画布中心位置，除了center，关键词还可以设置left、top、right、bottom，除了可以传关键词，数组的每项还可以传递一个数字，代表具体的像素，可以传递一个百分比字符串，比如['40%', '60%']，代表水平位置在画布宽度的40%的位置，垂直位置在画布高度的60%的位置
diff --git a/web/src/pages/Doc/zh/course1/index.md b/web/src/pages/Doc/zh/course1/index.md
new file mode 100644
index 00000000..71806718
--- /dev/null
+++ b/web/src/pages/Doc/zh/course1/index.md
@@ -0,0 +1,60 @@
+# 基本使用
+
+> 重要说明：本教程中的在线编辑器中使用的是完整版的simple-mind-map，即包含所有插件，如果你是通过`npm`方式使用的话，需要自己手动注册相关插件。
+
+`simple-mind-map`的使用非常简单，提供一个宽高不为0的元素，然后创建一个实例即可：
+
+
+
+注意，我们还给容器元素设置了样式：
+
+```css
+#mindMapContainer * {
+ margin: 0;
+ padding: 0;
+}
+```
+
+这是为了避免节点内的文字因为默认样式而出现偏移。
+
+一个节点的基本数据结构如下所示：
+
+```js
+{
+ data: {
+ // 节点文本
+ text: '根节点',
+ // 图片
+ image: 'xxx.jpg',
+ imageTitle: '图片名称',
+ imageSize: {
+ width: 1152,
+ height: 1152
+ },
+ // 图标
+ icon: ['priority_1'],
+ // 标签
+ tag: ['标签1', '标签2'],
+ // 链接
+ hyperlink: 'http://lxqnsys.com/',
+ hyperlinkTitle: '理想青年实验室',
+ // 备注内容
+ note: '理想青年实验室\n一个有意思的角落',
+ // 概要
+ generalization: {
+ text: '概要的内容'
+ },
+ // 节点是否展开
+ expand: true,
+ },
+ children: []// 子节点
+}
+```
+
+`icon`目前只能使用内置的图标，完整图标可以在[icons.js](https://github.com/wanglin2/mind-map/blob/main/simple-mind-map/src/svg/icons.js)文件中查看。
+
+创建实例时还支持传递其他很多选项参数，完整选项列表可以在[实例化选项](https://wanglin2.github.io/mind-map/#/doc/zh/constructor/%E5%AE%9E%E4%BE%8B%E5%8C%96%E9%80%89%E9%A1%B9)查看。
+
+这样得到的思维导图可以通过鼠标和快捷键进行操作，比如单击某个节点可以激活它，双击某个节点可以编辑节点文本，按下`Tab`键会给当前激活的节点添加一个子节点，按下`Enter`键会给当前激活的节点添加一个兄弟节点等等，完整的快捷键列表可以参考[快捷键列表](https://github.com/wanglin2/mind-map/blob/main/web/src/config/zh.js#L246)。
+
+当然有些功能还是需要UI界面的，比如图标列表、编辑超链接等等，需要注意的是`simple-mind-map`库并不包含UI界面，所以需要你自己开发，然后通过`simple-mind-map`提供的相关API来操作，本教程的其他章节会向你介绍如何使用。
\ No newline at end of file
diff --git a/web/src/pages/Doc/zh/course1/index.vue b/web/src/pages/Doc/zh/course1/index.vue
new file mode 100644
index 00000000..6e3d3eff
--- /dev/null
+++ b/web/src/pages/Doc/zh/course1/index.vue
@@ -0,0 +1,63 @@
+
+
+ 基本使用
+
+重要说明：本教程中的在线编辑器中使用的是完整版的simple-mind-map，即包含所有插件，如果你是通过npm方式使用的话，需要自己手动注册相关插件。
+
+simple-mind-map的使用非常简单，提供一个宽高不为0的元素，然后创建一个实例即可：
+
+注意，我们还给容器元素设置了样式：
+#mindMapContainer * {
+ margin: 0;
+ padding: 0;
+}
+
+这是为了避免节点内的文字因为默认样式而出现偏移。
+一个节点的基本数据结构如下所示：
+{
+ data: {
+ // 节点文本
+ text: '根节点',
+ // 图片
+ image: 'xxx.jpg',
+ imageTitle: '图片名称',
+ imageSize: {
+ width: 1152,
+ height: 1152
+ },
+ // 图标
+ icon: ['priority_1'],
+ // 标签
+ tag: ['标签1', '标签2'],
+ // 链接
+ hyperlink: 'http://lxqnsys.com/',
+ hyperlinkTitle: '理想青年实验室',
+ // 备注内容
+ note: '理想青年实验室\n一个有意思的角落',
+ // 概要
+ generalization: {
+ text: '概要的内容'
+ },
+ // 节点是否展开
+ expand: true,
+ },
+ children: []// 子节点
+}
+
+icon目前只能使用内置的图标，完整图标可以在icons.js文件中查看。
+创建实例时还支持传递其他很多选项参数，完整选项列表可以在实例化选项查看。
+这样得到的思维导图可以通过鼠标和快捷键进行操作，比如单击某个节点可以激活它，双击某个节点可以编辑节点文本，按下Tab键会给当前激活的节点添加一个子节点，按下Enter键会给当前激活的节点添加一个兄弟节点等等，完整的快捷键列表可以参考快捷键列表。
+当然有些功能还是需要UI界面的，比如图标列表、编辑超链接等等，需要注意的是simple-mind-map库并不包含UI界面，所以需要你自己开发，然后通过simple-mind-map提供的相关API来操作，本教程的其他章节会向你介绍如何使用。
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/web/src/pages/Doc/zh/course2/index.md b/web/src/pages/Doc/zh/course2/index.md
new file mode 100644
index 00000000..cf761871
--- /dev/null
+++ b/web/src/pages/Doc/zh/course2/index.md
@@ -0,0 +1,183 @@
+# 操作节点内容
+
+目前支持在节点中插入`图片`、`图标`、`超链接`、`备注`、`标签`、`概要`、`关联线`，本节教程会介绍如何通过UI界面来完成这些内容的插入。
+
+## 监听节点激活事件
+
+首先我们要监听节点的激活事件，如果当前没有激活节点，那么对应的UI界面肯定是禁用状态。可以通过`node_active`事件来监听节点激活事件：
+
+```js
+const activeNodes = shallowRef([])
+mindMap.on('node_active', (node, activeNodeList) => {
+ activeNodes.value = activeNodeList
+})
+```
+
+你还可以进一步判断当前激活的节点中是否操作根节点，是否存在概要节点，因为根节点肯定不能添加兄弟节点，概要节点则子节点、兄弟节点、概要节点、关联线都不能添加。
+
+```js
+const hasRoot = computed(() => {
+ return activeNodes.value.findIndex(node => {
+ return node.isRoot
+ }) !== -1
+})
+
+
+const hasGeneralization = computed(() => {
+ return activeNodes.value.findIndex(node => {
+ return node.isGeneralization
+ }) !== -1
+})
+```
+
+有了这些判断以后，我们就可以对工具按钮进行控制了，接下来就是实现按钮的相关功能。
+
+## 插入图片
+
+选择图片和上传图片的功能需要你自行开发，假设我们已经上传了一张图片，我们就可以遍历当前激活的节点，挨个调用节点的`setImage`方法设置图片：
+
+```js
+activeNodes.value.forEach((node) => {
+ node.setImage({
+ url: '图片url',
+ title: '图片的标题或描述',
+ width: 100,// 图片的宽高也不能少
+ height: 100
+ })
+})
+```
+
+图片回显也很简单，可以使用节点的`getData`方法获取节点的图片：
+
+```js
+const img = activeNode.getData('image')
+const imgTitle = activeNode.getData('imageTitle')
+```
+
+## 插入图标
+
+整体逻辑和插入图片是一样的，不过你需要显示所有可插入的图标，目前只能使用库里自带的一些图标，然后将选择的图标插入到节点中：
+
+```js
+const iconList = ['priority_1', '...']// 选择的图标
+activeNodes.value.forEach(node => {
+ node.setIcon(iconList)
+})
+```
+
+获取节点的图标数据：
+
+```js
+const iconList = activeNode.getData('icon') || []
+```
+
+## 插入超链接
+
+对于超链接，你需要实现两个输入框，分别输入`url`和名称，然后插入到节点：
+
+```js
+activeNodes.value.forEach(node => {
+ node.setHyperlink('url', '名称')
+})
+```
+
+获取节点超链接数据：
+
+```js
+const url = activeNode.getData('hyperlink')
+const name = activeNode.getData('hyperlinkTitle')
+```
+
+## 插入备注
+
+备注会稍微复杂一点，因为支持两种方式。
+
+### 使用内置逻辑
+
+使用内置的逻辑，只能插入纯文本备注，所以你只需要显示一个输入框用来输入文本，然后插入到节点：
+
+```js
+activeNodes.value.forEach(node => {
+ node.setNote('备注内容')
+})
+```
+
+这样在鼠标移入节点内的备注图标时会显示你插入的备注内容。
+
+### 自定义显示备注
+
+如果你想显示更丰富的备注内容，比如支持`markdown`，那么你可以在实例化`simple-mind-map`时插入`customNoteContentShow`选项。
+
+设置备注内容还是使用`setNote`方法，只不过现在插入的是`markdown`字符串，因为内置的备注弹窗只能处理纯文本内容，所以你需要自己来渲染`markdown`：
+
+```js
+const mindMap = new MindMap({
+ // ...
+ customNoteContentShow: {
+ show: (content, left, top) => {
+ // 在这里显示你的自定义弹窗
+ // content表示你插入的备注的内容，left和top时弹窗应该显示的位置，你需要将你的弹窗元素设置成fixed定位
+ },
+ hide: () => {
+ // 在这里隐藏你的自定义弹窗
+ // 你也可以选择不在鼠标移出备注图标时隐藏弹窗，比如可以在画布被点击时隐藏
+ }
+ },
+})
+```
+
+获取节点的备注内容可以通过`getData`方法：
+
+```js
+const note = activeNode.getData('note')
+```
+
+## 插入标签
+
+标签其实就是一个个带背景颜色的文本块，你需要实现的就是一个可以输入多个文本的输入框，然后插入到节点：
+
+```js
+activeNodes.value.forEach(node => {
+ node.setTag(['标签1', '...'])
+})
+```
+
+获取节点标签数据：
+
+```js
+const tagArr = activeNode.getData('tag') || []
+```
+
+## 插入概要
+
+插入概要可以不需要实现UI，直接调用插入概要的命令即可：
+
+```js
+mindMap.execCommand('ADD_GENERALIZATION', data)
+```
+
+会给当前激活的节点插入一个概要节点，第二个参数`data`可以不传，默认为：
+
+```js
+{
+ text: '概要'
+}
+```
+
+概要节点本质上也是一个节点，所以普通节点支持的内容它也支持。
+
+## 插入关联线
+
+> 要支持关联线需要使用关联线插件
+
+关联线也不需要UI，调用一个方法即可：
+
+```js
+mindMap.associativeLine.createLineFromActiveNode()
+```
+
+然后会从激活的节点（如果有多个激活节点，默认是第一个）到鼠标的实时位置生成一条曲线，点击某个目标节点后就会创建一条从激活节点到目标节点的关联线。
+
+## 完整实例
+
+
\ No newline at end of file
diff --git a/web/src/pages/Doc/zh/course2/index.vue b/web/src/pages/Doc/zh/course2/index.vue
new file mode 100644
index 00000000..3505e517
--- /dev/null
+++ b/web/src/pages/Doc/zh/course2/index.vue
@@ -0,0 +1,131 @@
+
+
+ 操作节点内容
+目前支持在节点中插入图片、图标、超链接、备注、标签、概要、关联线，本节教程会介绍如何通过UI界面来完成这些内容的插入。
+监听节点激活事件
+首先我们要监听节点的激活事件，如果当前没有激活节点，那么对应的UI界面肯定是禁用状态。可以通过node_active事件来监听节点激活事件：
+const activeNodes = shallowRef([])
+mindMap.on('node_active', (node, activeNodeList) => {
+ activeNodes.value = activeNodeList
+})
+
+你还可以进一步判断当前激活的节点中是否操作根节点，是否存在概要节点，因为根节点肯定不能添加兄弟节点，概要节点则子节点、兄弟节点、概要节点、关联线都不能添加。
+const hasRoot = computed(() => {
+ return activeNodes.value.findIndex(node => {
+ return node.isRoot
+ }) !== -1
+})
+
+
+const hasGeneralization = computed(() => {
+ return activeNodes.value.findIndex(node => {
+ return node.isGeneralization
+ }) !== -1
+})
+
+有了这些判断以后，我们就可以对工具按钮进行控制了，接下来就是实现按钮的相关功能。
+插入图片
+选择图片和上传图片的功能需要你自行开发，假设我们已经上传了一张图片，我们就可以遍历当前激活的节点，挨个调用节点的setImage方法设置图片：
+activeNodes.value.forEach((node) => {
+ node.setImage({
+ url: '图片url',
+ title: '图片的标题或描述',
+ width: 100,// 图片的宽高也不能少
+ height: 100
+ })
+})
+
+图片回显也很简单，可以使用节点的getData方法获取节点的图片：
+const img = activeNode.getData('image')
+const imgTitle = activeNode.getData('imageTitle')
+
+插入图标
+整体逻辑和插入图片是一样的，不过你需要显示所有可插入的图标，目前只能使用库里自带的一些图标，然后将选择的图标插入到节点中：
+const iconList = ['priority_1', '...']// 选择的图标
+activeNodes.value.forEach(node => {
+ node.setIcon(iconList)
+})
+
+获取节点的图标数据：
+const iconList = activeNode.getData('icon') || []
+
+插入超链接
+对于超链接，你需要实现两个输入框，分别输入url和名称，然后插入到节点：
+activeNodes.value.forEach(node => {
+ node.setHyperlink('url', '名称')
+})
+
+获取节点超链接数据：
+const url = activeNode.getData('hyperlink')
+const name = activeNode.getData('hyperlinkTitle')
+
+插入备注
+备注会稍微复杂一点，因为支持两种方式。
+使用内置逻辑
+使用内置的逻辑，只能插入纯文本备注，所以你只需要显示一个输入框用来输入文本，然后插入到节点：
+activeNodes.value.forEach(node => {
+ node.setNote('备注内容')
+})
+
+这样在鼠标移入节点内的备注图标时会显示你插入的备注内容。
+自定义显示备注
+如果你想显示更丰富的备注内容，比如支持markdown，那么你可以在实例化simple-mind-map时插入customNoteContentShow选项。
+设置备注内容还是使用setNote方法，只不过现在插入的是markdown字符串，因为内置的备注弹窗只能处理纯文本内容，所以你需要自己来渲染markdown：
+const mindMap = new MindMap({
+ // ...
+ customNoteContentShow: {
+ show: (content, left, top) => {
+ // 在这里显示你的自定义弹窗
+ // content表示你插入的备注的内容，left和top时弹窗应该显示的位置，你需要将你的弹窗元素设置成fixed定位
+ },
+ hide: () => {
+ // 在这里隐藏你的自定义弹窗
+ // 你也可以选择不在鼠标移出备注图标时隐藏弹窗，比如可以在画布被点击时隐藏
+ }
+ },
+})
+
+获取节点的备注内容可以通过getData方法：
+const note = activeNode.getData('note')
+
+插入标签
+标签其实就是一个个带背景颜色的文本块，你需要实现的就是一个可以输入多个文本的输入框，然后插入到节点：
+activeNodes.value.forEach(node => {
+ node.setTag(['标签1', '...'])
+})
+
+获取节点标签数据：
+const tagArr = activeNode.getData('tag') || []
+
+插入概要
+插入概要可以不需要实现UI，直接调用插入概要的命令即可：
+mindMap.execCommand('ADD_GENERALIZATION', data)
+
+会给当前激活的节点插入一个概要节点，第二个参数data可以不传，默认为：
+{
+ text: '概要'
+}
+
+概要节点本质上也是一个节点，所以普通节点支持的内容它也支持。
+插入关联线
+
+要支持关联线需要使用关联线插件
+
+关联线也不需要UI，调用一个方法即可：
+mindMap.associativeLine.createLineFromActiveNode()
+
+然后会从激活的节点（如果有多个激活节点，默认是第一个）到鼠标的实时位置生成一条曲线，点击某个目标节点后就会创建一条从激活节点到目标节点的关联线。
+完整实例
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/web/src/pages/Doc/zh/introduction/index.vue b/web/src/pages/Doc/zh/introduction/index.vue
index c5903fa7..a6c2c05e 100644
--- a/web/src/pages/Doc/zh/introduction/index.vue
+++ b/web/src/pages/Doc/zh/introduction/index.vue
@@ -7,19 +7,19 @@
特性
-
-
-
-
-
-
-
-
-
-
-json、png、svg、pdf、markdown，支持从json、xmind、markdown导入json、png、svg、pdf、markdown，支持从json、xmind、markdown导入
仓库目录介绍
1.simple-mind-map
@@ -27,11 +27,11 @@
2.web
使用simple-mind-map库，基于vue2.x、ElementUI搭建的在线思维导图。特性：
-
-
-
-
-
+
+
+
+
+
提供文档页面服务。
3.dist
diff --git a/web/src/pages/Doc/zh/start/index.md b/web/src/pages/Doc/zh/start/index.md
index 5b314a19..8b0bc883 100644
--- a/web/src/pages/Doc/zh/start/index.md
+++ b/web/src/pages/Doc/zh/start/index.md
@@ -32,6 +32,15 @@ npm i simple-mind-map
```
+另外再设置一下`css`样式：
+
+```css
+#mindMapContainer * {
+ margin: 0;
+ padding: 0;
+}
+```
+
然后引入`simple-mind-map`库，创建一个实例：
```js
@@ -56,9 +65,10 @@ const mindMap = new MindMap({
默认引入的是未打包的`ES`模块，且只包含核心功能，不包含未注册的插件内容，能有效减小体积，不过你需要在你的项目中配置`babel`编译`simple-mind-map`，防止一些较新的`js`语法部分浏览器不支持。
-如果你需要`umd`模块格式的文件，比如以`CDN`的方式在浏览器上使用，那么你可以从`/simple-mind-map/dist/`目录中找到`simpleMindMap.umd.min.js`文件，复制到你的项目中，然后在页面中引入：
+如果你需要`umd`模块格式的文件，比如以`CDN`的方式在浏览器上使用，那么你可以从`/simple-mind-map/dist/`目录中找到`simpleMindMap.umd.min.js`文件和`simpleMindMap.css`文件，复制到你的项目中，然后在页面中引入：
```html
+
```
@@ -66,6 +76,8 @@ const mindMap = new MindMap({
这种方式的缺点是会包含所有的内容，包括你没有注册的插件，所以整体体积会比较大。
+（v0.5.4+）如果你想直接在浏览器端通过`ES`模块的方式来使用，你可以在`/simple-mind-map/dist/`目录中找到`simpleMindMap.esm.js`和`simpleMindMap.esm.css`文件。
+
## 开发
如果你只是使用库的话可以不用阅读此小节。
diff --git a/web/src/pages/Doc/zh/start/index.vue b/web/src/pages/Doc/zh/start/index.vue
index 5cff9176..11e5cebd 100644
--- a/web/src/pages/Doc/zh/start/index.vue
+++ b/web/src/pages/Doc/zh/start/index.vue
@@ -24,6 +24,12 @@
首先提供一个宽高不为0的容器元素：
<div id="mindMapContainer"></div>
+另外再设置一下css样式：
+#mindMapContainer * {
+ margin: 0;
+ padding: 0;
+}
+
然后引入simple-mind-map库，创建一个实例：
import MindMap from "simple-mind-map";
@@ -41,11 +47,13 @@
如果你想要实现一个完整思维导图，那么通常你需要开发一些ui界面，通过simple-mind-map库提供的接口来实现更多功能。
simple-mind-map支持丰富的配置、事件、命令，以及一些额外的插件扩展，阅读后续的文档来了解更多吧。
默认引入的是未打包的ES模块，且只包含核心功能，不包含未注册的插件内容，能有效减小体积，不过你需要在你的项目中配置babel编译simple-mind-map，防止一些较新的js语法部分浏览器不支持。
-如果你需要umd模块格式的文件，比如以CDN的方式在浏览器上使用，那么你可以从/simple-mind-map/dist/目录中找到simpleMindMap.umd.min.js文件，复制到你的项目中，然后在页面中引入：
-<script scr="simpleMindMap.umd.min.js"></script>
+如果你需要umd模块格式的文件，比如以CDN的方式在浏览器上使用，那么你可以从/simple-mind-map/dist/目录中找到simpleMindMap.umd.min.js文件和simpleMindMap.css文件，复制到你的项目中，然后在页面中引入：
+<link rel="stylesheet" href="simpleMindMap.css">
+<script scr="simpleMindMap.umd.min.js"></script>
会创建一个全局变量window.simpleMindMap。
这种方式的缺点是会包含所有的内容，包括你没有注册的插件，所以整体体积会比较大。
+（v0.5.4+）如果你想直接在浏览器端通过ES模块的方式来使用，你可以在/simple-mind-map/dist/目录中找到simpleMindMap.esm.js和simpleMindMap.esm.css文件。
开发
如果你只是使用库的话可以不用阅读此小节。
本地开发