['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文件。
开发
如果你只是使用库的话可以不用阅读此小节。
本地开发
From 11538d1789f5275e33107e5e39efae9dd74cd9bf Mon Sep 17 00:00:00 2001
From: wanglin2 <1013335014@qq.com>
Date: Sun, 9 Apr 2023 08:52:43 +0800
Subject: [PATCH 3/6] =?UTF-8?q?=E6=89=93=E5=8C=850.5.3-fix.2=EF=BC=9A?=
=?UTF-8?q?=E4=BF=AE=E5=A4=8D=E5=AF=BC=E5=87=BA=E5=9B=BE=E7=89=87=E6=97=B6?=
=?UTF-8?q?=E8=8A=82=E7=82=B9=E4=B8=AD=E7=9A=84=E5=9B=BE=E7=89=87=E6=97=A0?=
=?UTF-8?q?=E6=B3=95=E6=98=BE=E7=A4=BA=E7=9A=84=E9=97=AE=E9=A2=98=EF=BC=9B?=
=?UTF-8?q?=E6=9B=B4=E6=96=B0=E6=96=87=E6=A1=A3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
index.html | 2 +-
simple-mind-map/package.json | 2 +-
simple-mind-map/src/Export.js | 3 ++
web/src/pages/Doc/catalogList.js | 2 +-
web/src/pages/Doc/en/changelog/index.md | 4 ++
web/src/pages/Doc/en/changelog/index.vue | 4 ++
web/src/pages/Doc/routerList.js | 2 +-
web/src/pages/Doc/zh/changelog/index.md | 4 ++
web/src/pages/Doc/zh/changelog/index.vue | 4 ++
web/src/pages/Doc/zh/course1/index.md | 6 ++-
web/src/pages/Doc/zh/course1/index.vue | 4 +-
web/src/pages/Doc/zh/course3/index.md | 60 ++++++++++++++++++++++++
web/src/pages/Doc/zh/course3/index.vue | 49 +++++++++++++++++++
13 files changed, 140 insertions(+), 6 deletions(-)
create mode 100644 web/src/pages/Doc/zh/course3/index.md
create mode 100644 web/src/pages/Doc/zh/course3/index.vue
diff --git a/index.html b/index.html
index 75fab367..993aff82 100644
--- a/index.html
+++ b/index.html
@@ -1 +1 @@
-一个简单的web思维导图实现
\ No newline at end of file
+一个简单的web思维导图实现
\ No newline at end of file
diff --git a/simple-mind-map/package.json b/simple-mind-map/package.json
index 7be104b9..950399a2 100644
--- a/simple-mind-map/package.json
+++ b/simple-mind-map/package.json
@@ -1,6 +1,6 @@
{
"name": "simple-mind-map",
- "version": "0.5.3-fix.1",
+ "version": "0.5.3-fix.2",
"description": "一个简单的web在线思维导图",
"authors": [
{
diff --git a/simple-mind-map/src/Export.js b/simple-mind-map/src/Export.js
index 0f890fbd..27fd84b7 100644
--- a/simple-mind-map/src/Export.js
+++ b/simple-mind-map/src/Export.js
@@ -37,6 +37,9 @@ class Export {
item.attr('href', imgData)
})
await Promise.all(task)
+ if (imageList.length > 0) {
+ svgHTML = svg.svg()
+ }
// 如果开启了富文本编辑，需要把svg中的dom元素转换成图片
let nodeWithDomToImg = null
if (domToImage && this.mindMap.richText) {
diff --git a/web/src/pages/Doc/catalogList.js b/web/src/pages/Doc/catalogList.js
index 6df78bde..fd699a46 100644
--- a/web/src/pages/Doc/catalogList.js
+++ b/web/src/pages/Doc/catalogList.js
@@ -11,7 +11,7 @@ let langList = [
}
]
let StartList = ['introduction', 'start', 'translate', 'changelog']
-let CourseList = new Array(2).fill(0).map((_, index) => {
+let CourseList = new Array(3).fill(0).map((_, index) => {
return 'course' + (index + 1)
})
let APIList = [
diff --git a/web/src/pages/Doc/en/changelog/index.md b/web/src/pages/Doc/en/changelog/index.md
index b6447756..5127e6e3 100644
--- a/web/src/pages/Doc/en/changelog/index.md
+++ b/web/src/pages/Doc/en/changelog/index.md
@@ -10,6 +10,10 @@ New: 1.Support setting the position of the initial central node.
Fix: 1.Fix the issue where setting the position of the initial central node does not take effect.
+### 0.5.3-fix.2
+
+Fix: 1.Fix the issue of not displaying images in nodes when exporting as images.
+
## 0.5.2
Fix: 1.Remove `uid` from exported `JSON` data; 2.Clear the node cache pool when re rendering.
diff --git a/web/src/pages/Doc/en/changelog/index.vue b/web/src/pages/Doc/en/changelog/index.vue
index 83f89526..5e597103 100644
--- a/web/src/pages/Doc/en/changelog/index.vue
+++ b/web/src/pages/Doc/en/changelog/index.vue
@@ -4,6 +4,10 @@
0.5.3
Fix: 1.Fixed the issue of setting the text style when multiple nodes were selected in rich text mode, which would change the text of all selected nodes to the text of the last selected node.
New: 1.Support setting the position of the initial central node.
+0.5.3-fix.1
+Fix: 1.Fix the issue where setting the position of the initial central node does not take effect.
+0.5.3-fix.2
+Fix: 1.Fix the issue of not displaying images in nodes when exporting as images.
0.5.2
Fix: 1.Remove uid from exported JSON data; 2.Clear the node cache pool when re rendering.
0.5.1
diff --git a/web/src/pages/Doc/routerList.js b/web/src/pages/Doc/routerList.js
index 16946338..bd5b465f 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":"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"}]}]
+ 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":"course3","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 482f8167..b6ac2b92 100644
--- a/web/src/pages/Doc/zh/changelog/index.md
+++ b/web/src/pages/Doc/zh/changelog/index.md
@@ -10,6 +10,10 @@
修复：1.修复设置初始中心节点的位置不生效的问题。
+### 0.5.3-fix.2
+
+修复：1.修复导出为图片时，节点中的图片显示不出来的问题。
+
## 0.5.2
修复：1.导出的`json`数据中去除`uid`；2.重新渲染时清空节点缓存池。
diff --git a/web/src/pages/Doc/zh/changelog/index.vue b/web/src/pages/Doc/zh/changelog/index.vue
index 10667b26..d410ad7f 100644
--- a/web/src/pages/Doc/zh/changelog/index.vue
+++ b/web/src/pages/Doc/zh/changelog/index.vue
@@ -4,6 +4,10 @@
0.5.3
修复：1.修复富文本模式下，如果选择了多个节点时设置文本样式，会将所有多选节点的文本改成最后一个多选节点的文本的问题。
新增：1.支持设置初始中心节点的位置。
+0.5.3-fix.1
+修复：1.修复设置初始中心节点的位置不生效的问题。
+0.5.3-fix.2
+修复：1.修复导出为图片时，节点中的图片显示不出来的问题。
0.5.2
修复：1.导出的json数据中去除uid；2.重新渲染时清空节点缓存池。
0.5.1
diff --git a/web/src/pages/Doc/zh/course1/index.md b/web/src/pages/Doc/zh/course1/index.md
index 71806718..1a9123a0 100644
--- a/web/src/pages/Doc/zh/course1/index.md
+++ b/web/src/pages/Doc/zh/course1/index.md
@@ -1,6 +1,10 @@
# 基本使用
-> 重要说明：本教程中的在线编辑器中使用的是完整版的simple-mind-map，即包含所有插件，如果你是通过`npm`方式使用的话，需要自己手动注册相关插件。
+> 重要说明：
+>
+> 1.本教程中的在线编辑器中使用的是完整版的simple-mind-map，即包含所有插件，如果你是通过`npm`方式使用的话，需要自己手动注册相关插件。
+>
+> 2.本教程的代码示例基于Vue3.x，但是您不必担心，因为simple-mind-map本身是框架无关的，所以即使某些Vue3的语法您看不懂也不会影响对于逻辑的理解。
`simple-mind-map`的使用非常简单，提供一个宽高不为0的元素，然后创建一个实例即可：
diff --git a/web/src/pages/Doc/zh/course1/index.vue b/web/src/pages/Doc/zh/course1/index.vue
index 6e3d3eff..20acb226 100644
--- a/web/src/pages/Doc/zh/course1/index.vue
+++ b/web/src/pages/Doc/zh/course1/index.vue
@@ -2,7 +2,9 @@
基本使用
-重要说明：本教程中的在线编辑器中使用的是完整版的simple-mind-map，即包含所有插件，如果你是通过npm方式使用的话，需要自己手动注册相关插件。
+重要说明：
+1.本教程中的在线编辑器中使用的是完整版的simple-mind-map，即包含所有插件，如果你是通过npm方式使用的话，需要自己手动注册相关插件。
+2.本教程的代码示例基于Vue3.x，但是您不必担心，因为simple-mind-map本身是框架无关的，所以即使某些Vue3的语法您看不懂也不会影响对于逻辑的理解。
simple-mind-map的使用非常简单，提供一个宽高不为0的元素，然后创建一个实例即可：
diff --git a/web/src/pages/Doc/zh/course3/index.md b/web/src/pages/Doc/zh/course3/index.md
new file mode 100644
index 00000000..60b214d2
--- /dev/null
+++ b/web/src/pages/Doc/zh/course3/index.md
@@ -0,0 +1,60 @@
+# 插入/删除节点、前进回退
+
+首先和操作节点内容一样，也需要监听节点的激活事件，然后禁用相关按钮。
+
+## 插入子节点
+
+插入子节点很节点，执行`INSERT_CHILD_NODE`命令即可：
+
+```js
+mindMap.execCommand('INSERT_CHILD_NODE')
+```
+
+这样就会在当前激活节点（如果存在多个激活节点，默认会操作第一个激活节点）下添加一个子节点。
+
+`INSERT_CHILD_NODE`命令还支持传入几个参数，详细详细请阅读【API】-【构造函数】-【execCommand方法】。
+
+## 插入兄弟节点
+
+插入兄弟节点和插入子节点方式完全一致：
+
+```js
+mindMap.execCommand('INSERT_NODE')
+```
+
+## 删除节点
+
+删除节点也是执行命令：
+
+```js
+mindMap.execCommand('REMOVE_NODE')
+```
+
+会删除当前激活的所有节点。
+
+## 前进回退
+
+首先需要监听`back_forward`事件，事件回调中可以获取当前的历史记录总数，以及当前所在的历史记录索引，那么就可以判断当前是否处于历史记录的最开始，还是最后，然后对前进回退按钮进行禁用。
+
+```js
+const isStart = ref(true)
+const isEnd = ref(true)
+mindMap.on('back_forward', (index, len) => {
+ isStart.value = index <= 0
+ isEnd.value = index >= len - 1
+})
+```
+
+然后前进回退调用相关命令即可：
+
+```js
+// 回退一次
+mindMap.execCommand('BACK')
+
+// 前进一次
+mindMap.execCommand('FORWARD')
+```
+
+## 完整示例
+
+
\ No newline at end of file
diff --git a/web/src/pages/Doc/zh/course3/index.vue b/web/src/pages/Doc/zh/course3/index.vue
new file mode 100644
index 00000000..b502c9cf
--- /dev/null
+++ b/web/src/pages/Doc/zh/course3/index.vue
@@ -0,0 +1,49 @@
+
+
+ 插入/删除节点、前进回退
+首先和操作节点内容一样，也需要监听节点的激活事件，然后禁用相关按钮。
+插入子节点
+插入子节点很节点，执行INSERT_CHILD_NODE命令即可：
+mindMap.execCommand('INSERT_CHILD_NODE')
+
+这样就会在当前激活节点（如果存在多个激活节点，默认会操作第一个激活节点）下添加一个子节点。
+INSERT_CHILD_NODE命令还支持传入几个参数，详细详细请阅读【API】-【构造函数】-【execCommand方法】。
+插入兄弟节点
+插入兄弟节点和插入子节点方式完全一致：
+mindMap.execCommand('INSERT_NODE')
+
+删除节点
+删除节点也是执行命令：
+mindMap.execCommand('REMOVE_NODE')
+
+会删除当前激活的所有节点。
+前进回退
+首先需要监听back_forward事件，事件回调中可以获取当前的历史记录总数，以及当前所在的历史记录索引，那么就可以判断当前是否处于历史记录的最开始，还是最后，然后对前进回退按钮进行禁用。
+const isStart = ref(true)
+const isEnd = ref(true)
+mindMap.on('back_forward', (index, len) => {
+ isStart.value = index <= 0
+ isEnd.value = index >= len - 1
+})
+
+然后前进回退调用相关命令即可：
+// 回退一次
+mindMap.execCommand('BACK')
+
+// 前进一次
+mindMap.execCommand('FORWARD')
+
+完整示例
+
+
+
+
+
+
+
\ No newline at end of file
From 04566080e0158a59119cefe0c512c3807ada1345 Mon Sep 17 00:00:00 2001
From: wanglin2 <1013335014@qq.com>
Date: Sun, 9 Apr 2023 22:10:13 +0800
Subject: [PATCH 4/6] =?UTF-8?q?=E6=9B=B4=E6=96=B0=E6=96=87=E6=A1=A3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
index.html | 2 +-
web/src/pages/Doc/catalogList.js | 2 +-
web/src/pages/Doc/routerList.js | 2 +-
web/src/pages/Doc/zh/course2/index.md | 2 +-
web/src/pages/Doc/zh/course2/index.vue | 2 +-
web/src/pages/Doc/zh/course4/index.md | 235 ++++++++++++++++++
web/src/pages/Doc/zh/course4/index.vue | 203 +++++++++++++++
web/src/pages/Doc/zh/course5/index.md | 219 ++++++++++++++++
web/src/pages/Doc/zh/course5/index.vue | 182 ++++++++++++++
.../pages/Edit/components/RichTextToolbar.vue | 2 +-
10 files changed, 845 insertions(+), 6 deletions(-)
create mode 100644 web/src/pages/Doc/zh/course4/index.md
create mode 100644 web/src/pages/Doc/zh/course4/index.vue
create mode 100644 web/src/pages/Doc/zh/course5/index.md
create mode 100644 web/src/pages/Doc/zh/course5/index.vue
diff --git a/index.html b/index.html
index 993aff82..0a5d358d 100644
--- a/index.html
+++ b/index.html
@@ -1 +1 @@
-一个简单的web思维导图实现
\ No newline at end of file
+一个简单的web思维导图实现
\ No newline at end of file
diff --git a/web/src/pages/Doc/catalogList.js b/web/src/pages/Doc/catalogList.js
index fd699a46..5fc706e4 100644
--- a/web/src/pages/Doc/catalogList.js
+++ b/web/src/pages/Doc/catalogList.js
@@ -11,7 +11,7 @@ let langList = [
}
]
let StartList = ['introduction', 'start', 'translate', 'changelog']
-let CourseList = new Array(3).fill(0).map((_, index) => {
+let CourseList = new Array(5).fill(0).map((_, index) => {
return 'course' + (index + 1)
})
let APIList = [
diff --git a/web/src/pages/Doc/routerList.js b/web/src/pages/Doc/routerList.js
index bd5b465f..928a6247 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":"course1","title":"基本使用"},{"path":"course2","title":"操作节点内容"},{"path":"course3","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"}]}]
+ 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":"course3","title":"插入/删除节点、前进回退"},{"path":"course4","title":"设置节点样式"},{"path":"course5","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/course2/index.md b/web/src/pages/Doc/zh/course2/index.md
index cf761871..21b99590 100644
--- a/web/src/pages/Doc/zh/course2/index.md
+++ b/web/src/pages/Doc/zh/course2/index.md
@@ -178,6 +178,6 @@ 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
index 3505e517..6de6d034 100644
--- a/web/src/pages/Doc/zh/course2/index.vue
+++ b/web/src/pages/Doc/zh/course2/index.vue
@@ -115,7 +115,7 @@ activeNodes.value.forEach(
mindMap.associativeLine.createLineFromActiveNode()
然后会从激活的节点（如果有多个激活节点，默认是第一个）到鼠标的实时位置生成一条曲线，点击某个目标节点后就会创建一条从激活节点到目标节点的关联线。
-完整实例
+完整示例
diff --git a/web/src/pages/Doc/zh/course4/index.md b/web/src/pages/Doc/zh/course4/index.md
new file mode 100644
index 00000000..92ad279f
--- /dev/null
+++ b/web/src/pages/Doc/zh/course4/index.md
@@ -0,0 +1,235 @@
+# 设置节点样式
+
+本节将介绍如何更新当前激活节点的样式。
+
+样式总体上分为两类，一是常态的样式，二是激活的样式。设置的方法都是`setStyle`方法，通过第三个参数进行指定：
+
+```js
+// 设置常态样式
+node.setStyle('样式属性', '样式值')
+
+// 设置激活样式
+node.setStyle('样式属性', '样式值', true)
+```
+
+## 设置常态样式
+
+### 设置文字样式
+
+文字样式目前支持：`字体`、`字号`、`行高`、`颜色`、`加粗`、`斜体`、`划线`。
+
+这些样式选择的UI界面都需要你自行开发，然后调用节点的`setStyle`方法更新。
+
+同样首先需要监听节点的激活事件来换取当前激活的节点：
+
+```js
+const activeNodes = shallowRef([])
+mindMap.on('node_active', (node, activeNodeList) => {
+ activeNodes.value = activeNodeList
+})
+```
+
+```js
+// 设置字体
+activeNodes.value.forEach(node => {
+ node.setStyle('fontFamily', '宋体, SimSun, Songti SC')
+})
+
+// 设置字号
+activeNodes.value.forEach(node => {
+ node.setStyle('fontSize', 16)
+})
+
+// 设置行高
+activeNodes.value.forEach(node => {
+ node.setStyle('lineHeight', 1.5)
+})
+
+// 设置颜色
+activeNodes.value.forEach(node => {
+ node.setStyle('color', '#fff')
+})
+
+// 设置加粗
+activeNodes.value.forEach(node => {
+ node.setStyle('fontWeight', 'bold')// node.setStyle('fontWeight', 'normal')
+})
+
+// 设置划线
+activeNodes.value.forEach(node => {
+ // 下划线
+ node.setStyle('textDecoration', 'underline')
+ // 删除线
+ node.setStyle('textDecoration', 'line-through')
+ // 上划线
+ node.setStyle('textDecoration', 'overline')
+})
+```
+
+### 设置边框样式
+
+边框样式支持设置：`颜色`、`虚线`、`线宽`、`圆角`。
+
+设置边框样式前请先检查线宽是否被设置成了0。
+
+```js
+// 设置边框颜色
+activeNodes.value.forEach(node => {
+ node.setStyle('borderColor', '#000')
+})
+
+// 设置边框虚线
+activeNodes.value.forEach(node => {
+ node.setStyle('borderDasharray', '5,5')// node.setStyle('borderDasharray', 'none')
+})
+
+// 设置边框宽度
+activeNodes.value.forEach(node => {
+ node.setStyle('borderWidth', 2)
+})
+
+// 设置边框圆角
+activeNodes.value.forEach(node => {
+ node.setStyle('borderRadius', 5)
+})
+```
+
+### 设置背景样式
+
+背景样式也就是背景颜色。
+
+```js
+activeNodes.value.forEach(node => {
+ node.setStyle('fillColor', '#fff')
+})
+```
+
+### 设置形状样式
+
+目前支持以下形状：
+
+```js
+[
+ {
+ name: '矩形',
+ value: 'rectangle'
+ },
+ {
+ name: '菱形',
+ value: 'diamond'
+ },
+ {
+ name: '平行四边形',
+ value: 'parallelogram'
+ },
+ {
+ name: '圆角矩形',
+ value: 'roundedRectangle'
+ },
+ {
+ name: '八角矩形',
+ value: 'octagonalRectangle'
+ },
+ {
+ name: '外三角矩形',
+ value: 'outerTriangularRectangle'
+ },
+ {
+ name: '内三角矩形',
+ value: 'innerTriangularRectangle'
+ },
+ {
+ name: '椭圆',
+ value: 'ellipse'
+ },
+ {
+ name: '圆',
+ value: 'circle'
+ }
+]
+```
+
+设置形状前请先确认边框宽度是否被设置成了0。
+
+```js
+activeNodes.value.forEach(node => {
+ node.setStyle('shape', 'circle')
+})
+```
+
+### 设置线条样式
+
+节点线条支持设置：`颜色`、`虚线`、`线宽`。
+
+```js
+// 设置线条颜色
+activeNodes.value.forEach(node => {
+ node.setStyle('lineColor', '#000')
+})
+
+// 设置线条虚线
+activeNodes.value.forEach(node => {
+ node.setStyle('lineDasharray', '5, 5, 1, 5')// node.setStyle('lineDasharray', 'none')
+})
+
+// 设置线条宽度
+activeNodes.value.forEach(node => {
+ node.setStyle('lineWidth', 3)
+})
+```
+
+### 设置节点内边距
+
+节点内边距支持设置水平和垂直方向的内边距。
+
+```js
+activeNodes.value.forEach(node => {
+ node.setStyle('paddingX', 50)
+ node.setStyle('paddingY', 50)
+})
+```
+
+## 设置激活样式
+
+激活样式只支持设置边框相关样式和背景。可以通过如下方式获取支持的属性：
+
+```js
+import { supportActiveStyle } from 'simple-mind-map/src/themes/default'
+
+const checkIsSupportActive = (prop) => {
+ return supportActiveStyle.includes(prop)
+}
+```
+
+其他和数值常态样式是一样的，只需要给`setStyle`方法传入第三个参数：
+
+```js
+// 设置边框颜色
+activeNodes.value.forEach(node => {
+ node.setStyle('borderColor', '#000', true)
+})
+
+// 设置边框虚线
+activeNodes.value.forEach(node => {
+ node.setStyle('borderDasharray', '5,5', true)// node.setStyle('borderDasharray', 'none', true)
+})
+
+// 设置边框宽度
+activeNodes.value.forEach(node => {
+ node.setStyle('borderWidth', 2, true)
+})
+
+// 设置边框圆角
+activeNodes.value.forEach(node => {
+ node.setStyle('borderRadius', 5, true)
+})
+
+// 设置背景颜色
+activeNodes.value.forEach(node => {
+ node.setStyle('fillColor', '#fff', true)
+})
+```
+
+## 完整示例
+
+
\ No newline at end of file
diff --git a/web/src/pages/Doc/zh/course4/index.vue b/web/src/pages/Doc/zh/course4/index.vue
new file mode 100644
index 00000000..e18e08b8
--- /dev/null
+++ b/web/src/pages/Doc/zh/course4/index.vue
@@ -0,0 +1,203 @@
+
+
+ 设置节点样式
+本节将介绍如何更新当前激活节点的样式。
+样式总体上分为两类，一是常态的样式，二是激活的样式。设置的方法都是setStyle方法，通过第三个参数进行指定：
+// 设置常态样式
+node.setStyle('样式属性', '样式值')
+
+// 设置激活样式
+node.setStyle('样式属性', '样式值', true)
+
+设置常态样式
+设置文字样式
+文字样式目前支持：字体、字号、行高、颜色、加粗、斜体、划线。
+这些样式选择的UI界面都需要你自行开发，然后调用节点的setStyle方法更新。
+同样首先需要监听节点的激活事件来换取当前激活的节点：
+const activeNodes = shallowRef([])
+mindMap.on('node_active', (node, activeNodeList) => {
+ activeNodes.value = activeNodeList
+})
+
+// 设置字体
+activeNodes.value.forEach(node => {
+ node.setStyle('fontFamily', '宋体, SimSun, Songti SC')
+})
+
+// 设置字号
+activeNodes.value.forEach(node => {
+ node.setStyle('fontSize', 16)
+})
+
+// 设置行高
+activeNodes.value.forEach(node => {
+ node.setStyle('lineHeight', 1.5)
+})
+
+// 设置颜色
+activeNodes.value.forEach(node => {
+ node.setStyle('color', '#fff')
+})
+
+// 设置加粗
+activeNodes.value.forEach(node => {
+ node.setStyle('fontWeight', 'bold')// node.setStyle('fontWeight', 'normal')
+})
+
+// 设置划线
+activeNodes.value.forEach(node => {
+ // 下划线
+ node.setStyle('textDecoration', 'underline')
+ // 删除线
+ node.setStyle('textDecoration', 'line-through')
+ // 上划线
+ node.setStyle('textDecoration', 'overline')
+})
+
+设置边框样式
+边框样式支持设置：颜色、虚线、线宽、圆角。
+设置边框样式前请先检查线宽是否被设置成了0。
+// 设置边框颜色
+activeNodes.value.forEach(node => {
+ node.setStyle('borderColor', '#000')
+})
+
+// 设置边框虚线
+activeNodes.value.forEach(node => {
+ node.setStyle('borderDasharray', '5,5')// node.setStyle('borderDasharray', 'none')
+})
+
+// 设置边框宽度
+activeNodes.value.forEach(node => {
+ node.setStyle('borderWidth', 2)
+})
+
+// 设置边框圆角
+activeNodes.value.forEach(node => {
+ node.setStyle('borderRadius', 5)
+})
+
+设置背景样式
+背景样式也就是背景颜色。
+activeNodes.value.forEach(node => {
+ node.setStyle('fillColor', '#fff')
+})
+
+设置形状样式
+目前支持以下形状：
+[
+ {
+ name: '矩形',
+ value: 'rectangle'
+ },
+ {
+ name: '菱形',
+ value: 'diamond'
+ },
+ {
+ name: '平行四边形',
+ value: 'parallelogram'
+ },
+ {
+ name: '圆角矩形',
+ value: 'roundedRectangle'
+ },
+ {
+ name: '八角矩形',
+ value: 'octagonalRectangle'
+ },
+ {
+ name: '外三角矩形',
+ value: 'outerTriangularRectangle'
+ },
+ {
+ name: '内三角矩形',
+ value: 'innerTriangularRectangle'
+ },
+ {
+ name: '椭圆',
+ value: 'ellipse'
+ },
+ {
+ name: '圆',
+ value: 'circle'
+ }
+]
+
+设置形状前请先确认边框宽度是否被设置成了0。
+activeNodes.value.forEach(node => {
+ node.setStyle('shape', 'circle')
+})
+
+设置线条样式
+节点线条支持设置：颜色、虚线、线宽。
+// 设置线条颜色
+activeNodes.value.forEach(node => {
+ node.setStyle('lineColor', '#000')
+})
+
+// 设置线条虚线
+activeNodes.value.forEach(node => {
+ node.setStyle('lineDasharray', '5, 5, 1, 5')// node.setStyle('lineDasharray', 'none')
+})
+
+// 设置线条宽度
+activeNodes.value.forEach(node => {
+ node.setStyle('lineWidth', 3)
+})
+
+设置节点内边距
+节点内边距支持设置水平和垂直方向的内边距。
+activeNodes.value.forEach(node => {
+ node.setStyle('paddingX', 50)
+ node.setStyle('paddingY', 50)
+})
+
+设置激活样式
+激活样式只支持设置边框相关样式和背景。可以通过如下方式获取支持的属性：
+import { supportActiveStyle } from 'simple-mind-map/src/themes/default'
+
+const checkIsSupportActive = (prop) => {
+ return supportActiveStyle.includes(prop)
+}
+
+其他和数值常态样式是一样的，只需要给setStyle方法传入第三个参数：
+// 设置边框颜色
+activeNodes.value.forEach(node => {
+ node.setStyle('borderColor', '#000', true)
+})
+
+// 设置边框虚线
+activeNodes.value.forEach(node => {
+ node.setStyle('borderDasharray', '5,5', true)// node.setStyle('borderDasharray', 'none', true)
+})
+
+// 设置边框宽度
+activeNodes.value.forEach(node => {
+ node.setStyle('borderWidth', 2, true)
+})
+
+// 设置边框圆角
+activeNodes.value.forEach(node => {
+ node.setStyle('borderRadius', 5, true)
+})
+
+// 设置背景颜色
+activeNodes.value.forEach(node => {
+ node.setStyle('fillColor', '#fff', true)
+})
+
+完整示例
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/web/src/pages/Doc/zh/course5/index.md b/web/src/pages/Doc/zh/course5/index.md
new file mode 100644
index 00000000..6b9422aa
--- /dev/null
+++ b/web/src/pages/Doc/zh/course5/index.md
@@ -0,0 +1,219 @@
+# 设置基础样式
+
+基础样式修改的其实是主题配置，所以会通过`setThemeConfig`方法设置。
+
+## 设置背景
+
+画布背景可以设置颜色或图片。
+
+### 设置画布背景颜色
+
+```js
+mindMap.setThemeConfig({
+ backgroundColor: '#A4DD00'
+})
+```
+
+### 设置背景图片
+
+背景图片还支持设置三个属性：`图片重复`、`图片位置`、`图片大小`。其实就是`css`的`background-repeat`、`background-position`、`background-size`三个属性。
+
+不过导出为图片的时候背景图片的行为和`css`并不完全一致，因为导出是通过`canvas`实现的，而`canvas`并不存在这三个属性，所以是通过有限模拟`css`这三个属性行为实现的，详情可以阅读文章[如何在canvas中模拟css的背景图片样式](https://juejin.cn/post/7204854015463538744)。
+
+```js
+mindMap.setThemeConfig({
+ backgroundImage: 'xxx.png',
+ backgroundRepeat: 'no-repeat',
+ backgroundPosition: 'center center',
+ backgroundSize: 'cover'
+})
+```
+
+`backgroundRepeat`支持设置的值如下：
+
+```js
+[
+ {
+ name: '不重复',
+ value: 'no-repeat'
+ },
+ {
+ name: '重复',
+ value: 'repeat'
+ },
+ {
+ name: '水平方向重复',
+ value: 'repeat-x'
+ },
+ {
+ name: '垂直方向重复',
+ value: 'repeat-y'
+ }
+]
+```
+
+`backgroundPosition`支持设置的值如下：
+
+```js
+[
+ {
+ name: '默认',
+ value: '0% 0%'
+ },
+ {
+ name: '左上',
+ value: 'left top'
+ },
+ {
+ name: '左中',
+ value: 'left center'
+ },
+ {
+ name: '左下',
+ value: 'left bottom'
+ },
+ {
+ name: '右上',
+ value: 'right top'
+ },
+ {
+ name: '右中',
+ value: 'right center'
+ },
+ {
+ name: '右下',
+ value: 'right bottom'
+ },
+ {
+ name: '中上',
+ value: 'center top'
+ },
+ {
+ name: '居中',
+ value: 'center center'
+ },
+ {
+ name: '中下',
+ value: 'center bottom'
+ }
+]
+```
+
+`backgroundSize`支持设置的值如下：
+
+```js
+[
+ {
+ name: '自动',
+ value: 'auto'
+ },
+ {
+ name: '覆盖',
+ value: 'cover'
+ },
+ {
+ name: '保持',
+ value: 'contain'
+ }
+]
+```
+
+## 设置连线样式
+
+设置节点间的连线样式，支持：`颜色`、`粗细`、`虚线`、`风格`。
+
+目前支持三种连线风格，分别是：曲线（curve）、直线（straight）、直连（direct），其中曲线只在`logicalStructure`逻辑结构图和`mindMap`思维导图两种结构时生效。
+
+```js
+mindMap.setThemeConfig({
+ lineColor: '#009CE0',
+ lineWidth: 3,
+ lineDasharray: '15, 10, 5, 10, 15',
+ lineStyle: 'curve'
+})
+```
+
+## 设置概要的连线样式
+
+概要节点前面会有一条弧线，它的颜色和粗细可以修改。
+
+```js
+mindMap.setThemeConfig({
+ generalizationLineColor: '#FA28FF',
+ generalizationLineWidth: 4
+})
+```
+
+## 设置关联线的样式
+
+> 关联线需要使用关联线插件
+
+关联线支持设置颜色和粗细，因为它还可以被激活选中，所以还可以设置激活时的颜色和粗细。
+
+```js
+mindMap.setThemeConfig({
+ associativeLineColor: '#FA28FF',
+ associativeLineWidth: 4,
+ associativeLineActiveColor: '#9F0500',
+ associativeLineActiveWidth: 6
+})
+```
+
+## 设置节点边框风格
+
+默认节点的边框时封闭图形，不过也提供了一种只有底边边框的风格。
+
+```js
+mindMap.setThemeConfig({
+ nodeUseLineStyle: true
+})
+```
+
+## 设置节点内边距
+
+```js
+mindMap.setThemeConfig({
+ paddingX: 30,
+ paddingY: 20
+})
+```
+
+## 设置节点内的图片最大的显示宽高
+
+```js
+mindMap.setThemeConfig({
+ imgMaxWidth: 100,
+ imgMaxHeight: 50
+})
+```
+
+## 设置节点内图标的显示大小
+
+```js
+mindMap.setThemeConfig({
+ iconSize: 30,
+})
+```
+
+## 设置节点外边距
+
+设置节点外边距稍微麻烦一点，需要针对不同层级的节点进行设置。
+
+```js
+mindMap.setThemeConfig({
+ // 二级节点样式
+ second: {
+ marginX: 30,
+ marginY: 20
+ },
+ // 三级及以下节点样式
+ node: {
+ marginX: 40,
+ marginY: 30
+ }
+})
+```
+
+## 完整示例
+
+
\ No newline at end of file
diff --git a/web/src/pages/Doc/zh/course5/index.vue b/web/src/pages/Doc/zh/course5/index.vue
new file mode 100644
index 00000000..6d4e7cf3
--- /dev/null
+++ b/web/src/pages/Doc/zh/course5/index.vue
@@ -0,0 +1,182 @@
+
+
+ 设置基础样式
+基础样式修改的其实是主题配置，所以会通过setThemeConfig方法设置。
+设置背景
+画布背景可以设置颜色或图片。
+设置画布背景颜色
+mindMap.setThemeConfig({
+ backgroundColor: '#A4DD00'
+})
+
+设置背景图片
+背景图片还支持设置三个属性：图片重复、图片位置、图片大小。其实就是css的background-repeat、background-position、background-size三个属性。
+不过导出为图片的时候背景图片的行为和css并不完全一致，因为导出是通过canvas实现的，而canvas并不存在这三个属性，所以是通过有限模拟css这三个属性行为实现的，详情可以阅读文章如何在canvas中模拟css的背景图片样式。
+mindMap.setThemeConfig({
+ backgroundImage: 'xxx.png',
+ backgroundRepeat: 'no-repeat',
+ backgroundPosition: 'center center',
+ backgroundSize: 'cover'
+})
+
+backgroundRepeat支持设置的值如下：
+[
+ {
+ name: '不重复',
+ value: 'no-repeat'
+ },
+ {
+ name: '重复',
+ value: 'repeat'
+ },
+ {
+ name: '水平方向重复',
+ value: 'repeat-x'
+ },
+ {
+ name: '垂直方向重复',
+ value: 'repeat-y'
+ }
+]
+
+backgroundPosition支持设置的值如下：
+[
+ {
+ name: '默认',
+ value: '0% 0%'
+ },
+ {
+ name: '左上',
+ value: 'left top'
+ },
+ {
+ name: '左中',
+ value: 'left center'
+ },
+ {
+ name: '左下',
+ value: 'left bottom'
+ },
+ {
+ name: '右上',
+ value: 'right top'
+ },
+ {
+ name: '右中',
+ value: 'right center'
+ },
+ {
+ name: '右下',
+ value: 'right bottom'
+ },
+ {
+ name: '中上',
+ value: 'center top'
+ },
+ {
+ name: '居中',
+ value: 'center center'
+ },
+ {
+ name: '中下',
+ value: 'center bottom'
+ }
+]
+
+backgroundSize支持设置的值如下：
+[
+ {
+ name: '自动',
+ value: 'auto'
+ },
+ {
+ name: '覆盖',
+ value: 'cover'
+ },
+ {
+ name: '保持',
+ value: 'contain'
+ }
+]
+
+设置连线样式
+设置节点间的连线样式，支持：颜色、粗细、虚线、风格。
+目前支持三种连线风格，分别是：曲线（curve）、直线（straight）、直连（direct），其中曲线只在logicalStructure逻辑结构图和mindMap思维导图两种结构时生效。
+mindMap.setThemeConfig({
+ lineColor: '#009CE0',
+ lineWidth: 3,
+ lineDasharray: '15, 10, 5, 10, 15',
+ lineStyle: 'curve'
+})
+
+设置概要的连线样式
+概要节点前面会有一条弧线，它的颜色和粗细可以修改。
+mindMap.setThemeConfig({
+ generalizationLineColor: '#FA28FF',
+ generalizationLineWidth: 4
+})
+
+设置关联线的样式
+
+关联线需要使用关联线插件
+
+关联线支持设置颜色和粗细，因为它还可以被激活选中，所以还可以设置激活时的颜色和粗细。
+mindMap.setThemeConfig({
+ associativeLineColor: '#FA28FF',
+ associativeLineWidth: 4,
+ associativeLineActiveColor: '#9F0500',
+ associativeLineActiveWidth: 6
+})
+
+设置节点边框风格
+默认节点的边框时封闭图形，不过也提供了一种只有底边边框的风格。
+mindMap.setThemeConfig({
+ nodeUseLineStyle: true
+})
+
+设置节点内边距
+mindMap.setThemeConfig({
+ paddingX: 30,
+ paddingY: 20
+})
+
+设置节点内的图片最大的显示宽高
+mindMap.setThemeConfig({
+ imgMaxWidth: 100,
+ imgMaxHeight: 50
+})
+
+设置节点内图标的显示大小
+mindMap.setThemeConfig({
+ iconSize: 30,
+})
+
+设置节点外边距
+设置节点外边距稍微麻烦一点，需要针对不同层级的节点进行设置。
+mindMap.setThemeConfig({
+ // 二级节点样式
+ second: {
+ marginX: 30,
+ marginY: 20
+ },
+ // 三级及以下节点样式
+ node: {
+ marginX: 40,
+ marginY: 30
+ }
+})
+
+完整示例
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/web/src/pages/Edit/components/RichTextToolbar.vue b/web/src/pages/Edit/components/RichTextToolbar.vue
index 81fc8620..4949152f 100644
--- a/web/src/pages/Edit/components/RichTextToolbar.vue
+++ b/web/src/pages/Edit/components/RichTextToolbar.vue
@@ -227,7 +227,7 @@ export default {
\ No newline at end of file
diff --git a/web/src/pages/Doc/zh/course11/index.md b/web/src/pages/Doc/zh/course11/index.md
new file mode 100644
index 00000000..9856a3d4
--- /dev/null
+++ b/web/src/pages/Doc/zh/course11/index.md
@@ -0,0 +1,3 @@
+# 结构
+
+编写中。。。
\ No newline at end of file
diff --git a/web/src/pages/Doc/zh/course11/index.vue b/web/src/pages/Doc/zh/course11/index.vue
new file mode 100644
index 00000000..df7ae86c
--- /dev/null
+++ b/web/src/pages/Doc/zh/course11/index.vue
@@ -0,0 +1,17 @@
+
+
+ 结构
+编写中。。。
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/web/src/pages/Doc/zh/course12/index.md b/web/src/pages/Doc/zh/course12/index.md
new file mode 100644
index 00000000..9fcc8d4d
--- /dev/null
+++ b/web/src/pages/Doc/zh/course12/index.md
@@ -0,0 +1,3 @@
+# 如何渲染一个大纲
+
+编写中。。。
\ No newline at end of file
diff --git a/web/src/pages/Doc/zh/course12/index.vue b/web/src/pages/Doc/zh/course12/index.vue
new file mode 100644
index 00000000..f7f7092b
--- /dev/null
+++ b/web/src/pages/Doc/zh/course12/index.vue
@@ -0,0 +1,17 @@
+
+
+ 如何渲染一个大纲
+编写中。。。
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/web/src/pages/Doc/zh/course13/index.md b/web/src/pages/Doc/zh/course13/index.md
new file mode 100644
index 00000000..a5f0507a
--- /dev/null
+++ b/web/src/pages/Doc/zh/course13/index.md
@@ -0,0 +1,3 @@
+# 快捷键
+
+编写中。。。
\ No newline at end of file
diff --git a/web/src/pages/Doc/zh/course13/index.vue b/web/src/pages/Doc/zh/course13/index.vue
new file mode 100644
index 00000000..147e9ece
--- /dev/null
+++ b/web/src/pages/Doc/zh/course13/index.vue
@@ -0,0 +1,17 @@
+
+
+ 快捷键
+编写中。。。
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/web/src/pages/Doc/zh/course14/index.md b/web/src/pages/Doc/zh/course14/index.md
new file mode 100644
index 00000000..ef64ce1d
--- /dev/null
+++ b/web/src/pages/Doc/zh/course14/index.md
@@ -0,0 +1,3 @@
+# 如何渲染一个小地图
+
+编写中。。。
\ No newline at end of file
diff --git a/web/src/pages/Doc/zh/course14/index.vue b/web/src/pages/Doc/zh/course14/index.vue
new file mode 100644
index 00000000..1e9fc591
--- /dev/null
+++ b/web/src/pages/Doc/zh/course14/index.vue
@@ -0,0 +1,17 @@
+
+
+ 如何渲染一个小地图
+编写中。。。
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/web/src/pages/Doc/zh/course15/index.md b/web/src/pages/Doc/zh/course15/index.md
new file mode 100644
index 00000000..9e7b5c95
--- /dev/null
+++ b/web/src/pages/Doc/zh/course15/index.md
@@ -0,0 +1,3 @@
+# 如何渲染一个右键菜单
+
+编写中。。。
\ No newline at end of file
diff --git a/web/src/pages/Doc/zh/course15/index.vue b/web/src/pages/Doc/zh/course15/index.vue
new file mode 100644
index 00000000..863660da
--- /dev/null
+++ b/web/src/pages/Doc/zh/course15/index.vue
@@ -0,0 +1,17 @@
+
+
+ 如何渲染一个右键菜单
+编写中。。。
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/web/src/pages/Doc/zh/course16/index.md b/web/src/pages/Doc/zh/course16/index.md
new file mode 100644
index 00000000..0b42cb9d
--- /dev/null
+++ b/web/src/pages/Doc/zh/course16/index.md
@@ -0,0 +1,3 @@
+# 如何渲染富文本的悬浮工具栏
+
+编写中。。。
\ No newline at end of file
diff --git a/web/src/pages/Doc/zh/course16/index.vue b/web/src/pages/Doc/zh/course16/index.vue
new file mode 100644
index 00000000..b0246026
--- /dev/null
+++ b/web/src/pages/Doc/zh/course16/index.vue
@@ -0,0 +1,17 @@
+
+
+ 如何渲染富文本的悬浮工具栏
+编写中。。。
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/web/src/pages/Doc/zh/course17/index.md b/web/src/pages/Doc/zh/course17/index.md
new file mode 100644
index 00000000..411280cf
--- /dev/null
+++ b/web/src/pages/Doc/zh/course17/index.md
@@ -0,0 +1,3 @@
+# 导入和导出
+
+编写中。。。
\ No newline at end of file
diff --git a/web/src/pages/Doc/zh/course17/index.vue b/web/src/pages/Doc/zh/course17/index.vue
new file mode 100644
index 00000000..e10d512b
--- /dev/null
+++ b/web/src/pages/Doc/zh/course17/index.vue
@@ -0,0 +1,17 @@
+
+
+ 导入和导出
+编写中。。。
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/web/src/pages/Doc/zh/course18/index.md b/web/src/pages/Doc/zh/course18/index.md
new file mode 100644
index 00000000..8d79a512
--- /dev/null
+++ b/web/src/pages/Doc/zh/course18/index.md
@@ -0,0 +1,3 @@
+# 如何持久化数据
+
+编写中。。。
\ No newline at end of file
diff --git a/web/src/pages/Doc/zh/course18/index.vue b/web/src/pages/Doc/zh/course18/index.vue
new file mode 100644
index 00000000..bfd22976
--- /dev/null
+++ b/web/src/pages/Doc/zh/course18/index.vue
@@ -0,0 +1,17 @@
+
+
+ 如何持久化数据
+编写中。。。
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/web/src/pages/Doc/zh/course6/index.md b/web/src/pages/Doc/zh/course6/index.md
new file mode 100644
index 00000000..701ea1d1
--- /dev/null
+++ b/web/src/pages/Doc/zh/course6/index.md
@@ -0,0 +1,44 @@
+# 显示水印
+
+> 要使用水印需要注册水印插件
+
+`simple-mind-map`提供了水印的插件，使用非常简单，首先可以在实例化`simple-mind-map`时提供水印的选项配置来直接显示水印：
+
+```js
+new MindMap({
+ // ...
+ watermarkConfig: {
+ text: '水印文字',
+ lineSpacing: 100,
+ textSpacing: 100,
+ angle: 30,
+ textStyle: {
+ color: '#999',
+ opacity: 0.5,
+ fontSize: 14
+ }
+ }
+})
+```
+
+详细字段含义可以阅读【API】-【构造函数】-【实例化选项】小节。
+
+此外也可以动态更新水印，`watermarkConfig`的所有配置都可以修改，如果不想再显示水印将`text`传入空字符串即可。
+
+```js
+mindMap.watermark.updateWatermark({
+ text: '街角小林',
+ lineSpacing: 50,
+ textSpacing: 50,
+ angle: 45,
+ textStyle: {
+ color: '#73D8FF',
+ opacity: 1,
+ fontSize: 12
+ }
+})
+```
+
+## 完整示例
+
+
\ No newline at end of file
diff --git a/web/src/pages/Doc/zh/course6/index.vue b/web/src/pages/Doc/zh/course6/index.vue
new file mode 100644
index 00000000..bcdc3b5c
--- /dev/null
+++ b/web/src/pages/Doc/zh/course6/index.vue
@@ -0,0 +1,50 @@
+
+
+ 显示水印
+
+要使用水印需要注册水印插件
+
+simple-mind-map提供了水印的插件，使用非常简单，首先可以在实例化simple-mind-map时提供水印的选项配置来直接显示水印：
+new MindMap({
+ // ...
+ watermarkConfig: {
+ text: '水印文字',
+ lineSpacing: 100,
+ textSpacing: 100,
+ angle: 30,
+ textStyle: {
+ color: '#999',
+ opacity: 0.5,
+ fontSize: 14
+ }
+ }
+})
+
+详细字段含义可以阅读【API】-【构造函数】-【实例化选项】小节。
+此外也可以动态更新水印，watermarkConfig的所有配置都可以修改，如果不想再显示水印将text传入空字符串即可。
+mindMap.watermark.updateWatermark({
+ text: '街角小林',
+ lineSpacing: 50,
+ textSpacing: 50,
+ angle: 45,
+ textStyle: {
+ color: '#73D8FF',
+ opacity: 1,
+ fontSize: 12
+ }
+})
+
+完整示例
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/web/src/pages/Doc/zh/course7/index.md b/web/src/pages/Doc/zh/course7/index.md
new file mode 100644
index 00000000..a7e51a4b
--- /dev/null
+++ b/web/src/pages/Doc/zh/course7/index.md
@@ -0,0 +1,30 @@
+# 开启节点自由拖拽
+
+节点支持自由拖拽，也就是可以把它拖动到你指定的位置，默认是不开启的，如果需要开启可以在实例化`simple-mind-map`时传入开启的选项：
+
+```js
+new MindMap({
+ // ...
+ enableFreeDrag: true
+})
+```
+
+也可以动态切换是否开启：
+
+```js
+mindMap.updateConfig({
+ enableFreeDrag: true// false
+})
+```
+
+自由拖拽很容器将节点拖的乱七八糟，所以也可以通过命令回到默认的位置：
+
+```js
+mindMap.execCommand('RESET_LAYOUT')
+```
+
+也可以使用快捷键`Ctrl + L`来恢复。
+
+## 完整示例
+
+
\ No newline at end of file
diff --git a/web/src/pages/Doc/zh/course7/index.vue b/web/src/pages/Doc/zh/course7/index.vue
new file mode 100644
index 00000000..f89cbe41
--- /dev/null
+++ b/web/src/pages/Doc/zh/course7/index.vue
@@ -0,0 +1,32 @@
+
+
+ 开启节点自由拖拽
+节点支持自由拖拽，也就是可以把它拖动到你指定的位置，默认是不开启的，如果需要开启可以在实例化simple-mind-map时传入开启的选项：
+new MindMap({
+ // ...
+ enableFreeDrag: true
+})
+
+也可以动态切换是否开启：
+mindMap.updateConfig({
+ enableFreeDrag: true// false
+})
+
+自由拖拽很容器将节点拖的乱七八糟，所以也可以通过命令回到默认的位置：
+mindMap.execCommand('RESET_LAYOUT')
+
+也可以使用快捷键Ctrl + L来恢复。
+完整示例
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/web/src/pages/Doc/zh/course8/index.md b/web/src/pages/Doc/zh/course8/index.md
new file mode 100644
index 00000000..b9c866ba
--- /dev/null
+++ b/web/src/pages/Doc/zh/course8/index.md
@@ -0,0 +1,20 @@
+# 开启节点富文本编辑
+
+默认节点编辑是不支持富文本模式的，如果要开启需要使用富文本编辑插件，但是富文本编辑模式目前存在缺陷，详情可以阅读[richText](https://wanglin2.github.io/mind-map/#/doc/zh/richText)。
+
+富文本编辑的优势就是可以对一个节点内的部分文本设置样式，所以通常来说还需要搭配一个悬浮的工具栏，这个功能默认也是没有的，涉及到UI的功能一般都不提供，所以也需要你自行开发，如何渲染这个悬浮工具栏可以阅读[如何渲染富文本的悬浮工具栏](https://wanglin2.github.io/mind-map/#/doc/zh/course16)。
+
+如果也你需要动态切换是否开启富文本编辑的功能可以参考如下代码：
+
+```js
+import MindMap from 'simple-mind-map'
+import RichText from 'simple-mind-map/src/RichText.js'
+
+// 动态开启富文本编辑
+mindMap.addPlugin(RichText)
+
+// 动态关闭富文本编辑
+mindMap.removePlugin(RichText)
+```
+
+如果你使用的是`simpleMindMap.umd.js`或`simpleMindMap.esm.js`这种打包后的完整版，那么是不支持切换的，默认是就是开启的，如有相关需求可以提[issue](https://github.com/wanglin2/mind-map/issues)。
\ No newline at end of file
diff --git a/web/src/pages/Doc/zh/course8/index.vue b/web/src/pages/Doc/zh/course8/index.vue
new file mode 100644
index 00000000..89d9465d
--- /dev/null
+++ b/web/src/pages/Doc/zh/course8/index.vue
@@ -0,0 +1,29 @@
+
+
+ 开启节点富文本编辑
+默认节点编辑是不支持富文本模式的，如果要开启需要使用富文本编辑插件，但是富文本编辑模式目前存在缺陷，详情可以阅读richText。
+富文本编辑的优势就是可以对一个节点内的部分文本设置样式，所以通常来说还需要搭配一个悬浮的工具栏，这个功能默认也是没有的，涉及到UI的功能一般都不提供，所以也需要你自行开发，如何渲染这个悬浮工具栏可以阅读如何渲染富文本的悬浮工具栏。
+如果也你需要动态切换是否开启富文本编辑的功能可以参考如下代码：
+import MindMap from 'simple-mind-map'
+import RichText from 'simple-mind-map/src/RichText.js'
+
+// 动态开启富文本编辑
+mindMap.addPlugin(RichText)
+
+// 动态关闭富文本编辑
+mindMap.removePlugin(RichText)
+
+如果你使用的是simpleMindMap.umd.js或simpleMindMap.esm.js这种打包后的完整版，那么是不支持切换的，默认是就是开启的，如有相关需求可以提issue。
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/web/src/pages/Doc/zh/course9/index.md b/web/src/pages/Doc/zh/course9/index.md
new file mode 100644
index 00000000..26dc6fbc
--- /dev/null
+++ b/web/src/pages/Doc/zh/course9/index.md
@@ -0,0 +1,37 @@
+# 修改鼠标滚轮的行为
+
+鼠标滚轮的行为支持放大缩小画布和上下移动画布，可以在实例化时通过配置指定：
+
+```js
+new MindMap({
+ // ...
+ mousewheelAction: 'zoom'// zoom（放大缩小）、move（上下移动）
+ // 当mousewheelAction设为move时，可以通过该属性控制鼠标滚动一下视图移动的步长，单位px
+ mousewheelMoveStep: 100,
+})
+```
+
+如果需要动态的切换行为可以使用`updateConfig`方法：
+
+```js
+mindMap.updateConfig({
+ mousewheelAction: 'move'
+})
+```
+
+此外也支持让你自行处理鼠标滚轮事件：
+
+```js
+new MindMap({
+ // ...
+ customHandleMousewheel: (e) => {
+ // 你的自定义逻辑
+ }
+})
+```
+
+当传了`customHandleMousewheel`选项，`mousewheelAction`选项将不生效。
+
+## 完整示例
+
+
diff --git a/web/src/pages/Doc/zh/course9/index.vue b/web/src/pages/Doc/zh/course9/index.vue
new file mode 100644
index 00000000..d16828fd
--- /dev/null
+++ b/web/src/pages/Doc/zh/course9/index.vue
@@ -0,0 +1,40 @@
+
+
+ 修改鼠标滚轮的行为
+鼠标滚轮的行为支持放大缩小画布和上下移动画布，可以在实例化时通过配置指定：
+new MindMap({
+ // ...
+ mousewheelAction: 'zoom'// zoom（放大缩小）、move（上下移动）
+ // 当mousewheelAction设为move时，可以通过该属性控制鼠标滚动一下视图移动的步长，单位px
+ mousewheelMoveStep: 100,
+})
+
+如果需要动态的切换行为可以使用updateConfig方法：
+mindMap.updateConfig({
+ mousewheelAction: 'move'
+})
+
+此外也支持让你自行处理鼠标滚轮事件：
+new MindMap({
+ // ...
+ customHandleMousewheel: (e) => {
+ // 你的自定义逻辑
+ }
+})
+
+当传了customHandleMousewheel选项，mousewheelAction选项将不生效。
+完整示例
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/web/src/pages/Edit/components/Edit.vue b/web/src/pages/Edit/components/Edit.vue
index 4aca91a2..f6e16f70 100644
--- a/web/src/pages/Edit/components/Edit.vue
+++ b/web/src/pages/Edit/components/Edit.vue
@@ -60,9 +60,9 @@ MindMap
.usePlugin(AssociativeLine)
// 注册自定义主题
-customThemeList.forEach((item) => {
- MindMap.defineTheme(item.value, item.theme)
-})
+// customThemeList.forEach((item) => {
+// MindMap.defineTheme(item.value, item.theme)
+// })
/**
* @Author: 王林
diff --git a/web/src/pages/Edit/components/Theme.vue b/web/src/pages/Edit/components/Theme.vue
index d377f5af..bfb3a37b 100644
--- a/web/src/pages/Edit/components/Theme.vue
+++ b/web/src/pages/Edit/components/Theme.vue
@@ -42,7 +42,7 @@ export default {
},
data() {
return {
- themeList: [...themeList, ...customThemeList],
+ themeList: [...themeList],// ...customThemeList
themeMap,
theme: ''
}