Changelog
+
0.5.4
+
New: 1.Add new themes.
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.
diff --git a/web/src/pages/Doc/en/constructor/index.md b/web/src/pages/Doc/en/constructor/index.md
index 0df8aa82..0a84f272 100644
--- a/web/src/pages/Doc/en/constructor/index.md
+++ b/web/src/pages/Doc/en/constructor/index.md
@@ -27,7 +27,7 @@ const mindMap = new MindMap({
| el | Element | | Container element, must be a DOM element | Yes |
| data | Object | {} | Mind map data, refer to: https://github.com/wanglin2/mind-map/blob/main/simple-mind-map/example/exampleData.js | |
| layout | String | logicalStructure | Layout type, options: logicalStructure (logical structure diagram), mindMap (mind map), catalogOrganization (catalog organization diagram), organizationStructure (organization structure diagram) | |
-| theme | String | default | Theme, options: default, classic, minions, pinkGrape, mint, gold, vitalityOrange, greenLeaf, dark2, skyGreen, classic2, classic3, classic4 (v0.2.0+), classicGreen, classicBlue, blueSky, brainImpairedPink, dark, earthYellow, freshGreen, freshRed, romanticPurple | |
+| theme | String | default | Theme, options: default, classic, minions, pinkGrape, mint, gold, vitalityOrange, greenLeaf, dark2, skyGreen, classic2, classic3, classic4(v0.2.0+), classicGreen, classicBlue, blueSky, brainImpairedPink, dark, earthYellow, freshGreen, freshRed, romanticPurple, simpleBlack(v0.5.4+), courseGreen(v0.5.4+), coffee(v0.5.4+), redSpirit(v0.5.4+), blackHumour(v0.5.4+), lateNightOffice(v0.5.4+), blackGold(v0.5.4+) | |
| themeConfig | Object | {} | Theme configuration, will be merged with the selected theme, available fields refer to: https://github.com/wanglin2/mind-map/blob/main/simple-mind-map/src/themes/default.js | |
| scaleRatio | Number | 0.1 | The incremental scaling ratio | |
| maxTag | Number | 5 | The maximum number of tags displayed in the node, any additional tags will be discarded | |
diff --git a/web/src/pages/Doc/en/constructor/index.vue b/web/src/pages/Doc/en/constructor/index.vue
index 2767aec4..a407759d 100644
--- a/web/src/pages/Doc/en/constructor/index.vue
+++ b/web/src/pages/Doc/en/constructor/index.vue
@@ -53,7 +53,7 @@
theme |
String |
default |
-
Theme, options: default, classic, minions, pinkGrape, mint, gold, vitalityOrange, greenLeaf, dark2, skyGreen, classic2, classic3, classic4 (v0.2.0+), classicGreen, classicBlue, blueSky, brainImpairedPink, dark, earthYellow, freshGreen, freshRed, romanticPurple |
+
Theme, options: default, classic, minions, pinkGrape, mint, gold, vitalityOrange, greenLeaf, dark2, skyGreen, classic2, classic3, classic4(v0.2.0+), classicGreen, classicBlue, blueSky, brainImpairedPink, dark, earthYellow, freshGreen, freshRed, romanticPurple, simpleBlack(v0.5.4+), courseGreen(v0.5.4+), coffee(v0.5.4+), redSpirit(v0.5.4+), blackHumour(v0.5.4+), lateNightOffice(v0.5.4+), blackGold(v0.5.4+) |
|
diff --git a/web/src/pages/Doc/routerList.js b/web/src/pages/Doc/routerList.js
index 928a6247..185bf6c9 100644
--- a/web/src/pages/Doc/routerList.js
+++ b/web/src/pages/Doc/routerList.js
@@ -1,3 +1,74 @@
-
- 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
+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: 'course6', title: '显示水印' },
+ { path: 'course7', title: '开启节点自由拖拽' },
+ { path: 'course8', title: '开启节点富文本编辑' },
+ { path: 'course9', title: '修改鼠标滚轮的行为' },
+ { path: 'course10', title: '主题' },
+ { path: 'course11', title: '结构' },
+ { path: 'course12', title: '如何渲染一个大纲' },
+ { path: 'course13', title: '快捷键' },
+ { path: 'course14', title: '如何渲染一个小地图' },
+ { path: 'course15', title: '如何渲染一个右键菜单' },
+ { path: 'course16', title: '如何渲染富文本的悬浮工具栏' },
+ { path: 'course17', title: '导入和导出' },
+ { path: 'course18', 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' }
+ ]
+ }
+]
diff --git a/web/src/pages/Doc/zh/changelog/index.md b/web/src/pages/Doc/zh/changelog/index.md
index b6ac2b92..45b81f14 100644
--- a/web/src/pages/Doc/zh/changelog/index.md
+++ b/web/src/pages/Doc/zh/changelog/index.md
@@ -1,5 +1,9 @@
# Changelog
+## 0.5.4
+
+新增：1.添加新主题。
+
## 0.5.3
修复：1.修复富文本模式下，如果选择了多个节点时设置文本样式，会将所有多选节点的文本改成最后一个多选节点的文本的问题。
diff --git a/web/src/pages/Doc/zh/changelog/index.vue b/web/src/pages/Doc/zh/changelog/index.vue
index d410ad7f..c4029fce 100644
--- a/web/src/pages/Doc/zh/changelog/index.vue
+++ b/web/src/pages/Doc/zh/changelog/index.vue
@@ -1,6 +1,8 @@
Changelog
+
0.5.4
+
新增：1.添加新主题。
0.5.3
修复：1.修复富文本模式下，如果选择了多个节点时设置文本样式，会将所有多选节点的文本改成最后一个多选节点的文本的问题。
新增：1.支持设置初始中心节点的位置。
diff --git a/web/src/pages/Doc/zh/constructor/index.md b/web/src/pages/Doc/zh/constructor/index.md
index 56be19c5..4a6337b0 100644
--- a/web/src/pages/Doc/zh/constructor/index.md
+++ b/web/src/pages/Doc/zh/constructor/index.md
@@ -27,7 +27,7 @@ const mindMap = new MindMap({
| el | Element | | 容器元素，必须为DOM元素 | 是 |
| data | Object | {} | 思维导图数据，可参考：[https://github.com/wanglin2/mind-map/blob/main/simple-mind-map/example/exampleData.js](https://github.com/wanglin2/mind-map/blob/main/simple-mind-map/example/exampleData.js) | |
| layout | String | logicalStructure | 布局类型，可选列表：logicalStructure（逻辑结构图）、mindMap（思维导图）、catalogOrganization（目录组织图）、organizationStructure（组织结构图） | |
-| theme | String | default | 主题，可选列表：default（默认）、classic（脑图经典）、minions（小黄人）、pinkGrape（粉红葡萄）、mint（薄荷）、gold（金色vip）、vitalityOrange（活力橙）、greenLeaf（绿叶）、dark2（暗色2）、skyGreen（天清绿）、classic2（脑图经典2）、classic3（脑图经典3）、classic4（脑图经典4，v0.2.0+）、classicGreen（经典绿）、classicBlue（经典蓝）、blueSky（天空蓝）、brainImpairedPink（脑残粉）、dark（暗色）、earthYellow（泥土黄）、freshGreen（清新绿）、freshRed（清新红）、romanticPurple（浪漫紫） | |
+| theme | String | default | 主题，可选列表：default（默认）、classic（脑图经典）、minions（小黄人）、pinkGrape（粉红葡萄）、mint（薄荷）、gold（金色vip）、vitalityOrange（活力橙）、greenLeaf（绿叶）、dark2（暗色2）、skyGreen（天清绿）、classic2（脑图经典2）、classic3（脑图经典3）、classic4（脑图经典4，v0.2.0+）、classicGreen（经典绿）、classicBlue（经典蓝）、blueSky（天空蓝）、brainImpairedPink（脑残粉）、dark（暗色）、earthYellow（泥土黄）、freshGreen（清新绿）、freshRed（清新红）、romanticPurple（浪漫紫）、simpleBlack（v0.5.4+简约黑）、courseGreen（v0.5.4+课程绿）、coffee（v0.5.4+咖啡）、redSpirit（v0.5.4+红色精神）、blackHumour（v0.5.4+黑色幽默）、lateNightOffice（v0.5.4+深夜办公室）、blackGold（v0.5.4+黑金） | |
| themeConfig | Object | {} | 主题配置，会和所选择的主题进行合并，可用字段可参考：[https://github.com/wanglin2/mind-map/blob/main/simple-mind-map/src/themes/default.js](https://github.com/wanglin2/mind-map/blob/main/simple-mind-map/src/themes/default.js) | |
| scaleRatio | Number | 0.1 | 放大缩小的增量比例 | |
| maxTag | Number | 5 | 节点里最多显示的标签数量，多余的会被丢弃 | |
diff --git a/web/src/pages/Doc/zh/constructor/index.vue b/web/src/pages/Doc/zh/constructor/index.vue
index 14aed26a..b39d2082 100644
--- a/web/src/pages/Doc/zh/constructor/index.vue
+++ b/web/src/pages/Doc/zh/constructor/index.vue
@@ -53,7 +53,7 @@
theme |
String |
default |
-
主题，可选列表：default（默认）、classic（脑图经典）、minions（小黄人）、pinkGrape（粉红葡萄）、mint（薄荷）、gold（金色vip）、vitalityOrange（活力橙）、greenLeaf（绿叶）、dark2（暗色2）、skyGreen（天清绿）、classic2（脑图经典2）、classic3（脑图经典3）、classic4（脑图经典4，v0.2.0+）、classicGreen（经典绿）、classicBlue（经典蓝）、blueSky（天空蓝）、brainImpairedPink（脑残粉）、dark（暗色）、earthYellow（泥土黄）、freshGreen（清新绿）、freshRed（清新红）、romanticPurple（浪漫紫） |
+
主题，可选列表：default（默认）、classic（脑图经典）、minions（小黄人）、pinkGrape（粉红葡萄）、mint（薄荷）、gold（金色vip）、vitalityOrange（活力橙）、greenLeaf（绿叶）、dark2（暗色2）、skyGreen（天清绿）、classic2（脑图经典2）、classic3（脑图经典3）、classic4（脑图经典4，v0.2.0+）、classicGreen（经典绿）、classicBlue（经典蓝）、blueSky（天空蓝）、brainImpairedPink（脑残粉）、dark（暗色）、earthYellow（泥土黄）、freshGreen（清新绿）、freshRed（清新红）、romanticPurple（浪漫紫）、simpleBlack（v0.5.4+简约黑）、courseGreen（v0.5.4+课程绿）、coffee（v0.5.4+咖啡）、redSpirit（v0.5.4+红色精神）、blackHumour（v0.5.4+黑色幽默）、lateNightOffice（v0.5.4+深夜办公室）、blackGold（v0.5.4+黑金） |
|
diff --git a/web/src/pages/Doc/zh/course10/index.md b/web/src/pages/Doc/zh/course10/index.md
new file mode 100644
index 00000000..542350d1
--- /dev/null
+++ b/web/src/pages/Doc/zh/course10/index.md
@@ -0,0 +1,114 @@
+# 主题
+
+## 使用和切换主题
+
+`simple-mind-map`内置了很多主题，可以通过如下方式获取到所有的内置主题列表：
+
+```js
+import { themeList } from 'simple-mind-map/src/utils/constant'
+```
+
+可以在实例化`simple-mind-map`时指定使用的主题：
+
+```js
+new MindMap({
+ theme: 'minions'
+})
+```
+
+如果想动态切换主题也很简单：
+
+```js
+mindMap.setTheme('classic')
+```
+
+如果要获取当前使用的主题名称可以使用：
+
+```js
+const theme = mindMap.getTheme()
+```
+
+## 定义新主题
+
+除了可以使用内置的主题外，你也可以自定义新主题：
+
+```js
+import MindMap from 'simple-mind-map'
+
+// 注册新主题
+MindMap.defineTheme('主题名称', {
+ // 主题配置
+})
+
+// 1.实例化时使用新注册的主题
+const mindMap = new MindMap({
+ theme: '主题名称'
+})
+
+// 2.动态切换新主题
+mindMap.setTheme('主题名称')
+```
+
+最好在实例化之前进行注册，这样在实例化时可以直接使用新注册的主题。
+
+一个主题其实就是一个普通的对象，完整配置可以参考[默认主题](https://github.com/wanglin2/mind-map/blob/main/simple-mind-map/src/themes/default.js)，`defineTheme`方法会把你传入的配置和默认配置做合并。大部分主题其实需要自定义的部分不是很多，一个典型的自定义主题配置可以参考[blueSky](https://github.com/wanglin2/mind-map/blob/main/simple-mind-map/src/themes/blueSky.js)。
+
+```js
+MindMap.defineTheme('redSpirit', {
+ // 背景颜色
+ backgroundColor: 'rgb(255, 238, 228)',
+ // 连线的颜色
+ lineColor: 'rgb(230, 138, 131)',
+ lineWidth: 3,
+ // 概要连线的粗细
+ generalizationLineWidth: 3,
+ // 概要连线的颜色
+ generalizationLineColor: 'rgb(222, 101, 85)',
+ // 根节点样式
+ root: {
+ fillColor: 'rgb(207, 44, 44)',
+ color: 'rgb(255, 233, 157)',
+ borderColor: '',
+ borderWidth: 0,
+ fontSize: 24,
+ active: {
+ borderColor: 'rgb(255, 233, 157)',
+ borderWidth: 3,
+ }
+ },
+ // 二级节点样式
+ second: {
+ fillColor: 'rgb(255, 255, 255)',
+ color: 'rgb(211, 58, 21)',
+ borderColor: 'rgb(222, 101, 85)',
+ borderWidth: 2,
+ fontSize: 18,
+ active: {
+ borderColor: 'rgb(255, 233, 157)',
+ }
+ },
+ // 三级及以下节点样式
+ node: {
+ fontSize: 14,
+ color: 'rgb(144, 71, 43)',
+ active: {
+ borderColor: 'rgb(255, 233, 157)'
+ }
+ },
+ // 概要节点样式
+ generalization: {
+ fontSize: 14,
+ fillColor: 'rgb(255, 247, 211)',
+ borderColor: 'rgb(255, 202, 162)',
+ borderWidth: 2,
+ color: 'rgb(187, 101, 69)',
+ active: {
+ borderColor: 'rgb(222, 101, 85)'
+ }
+ }
+})
+```
+
+## 完整示例
+
+
\ No newline at end of file
diff --git a/web/src/pages/Doc/zh/course10/index.vue b/web/src/pages/Doc/zh/course10/index.vue
new file mode 100644
index 00000000..99eae284
--- /dev/null
+++ b/web/src/pages/Doc/zh/course10/index.vue
@@ -0,0 +1,105 @@
+
+
+
主题
+
使用和切换主题
+
simple-mind-map内置了很多主题，可以通过如下方式获取到所有的内置主题列表：
+
import { themeList } from 'simple-mind-map/src/utils/constant'
+
+
可以在实例化simple-mind-map时指定使用的主题：
+
new MindMap({
+ theme: 'minions'
+})
+
+
如果想动态切换主题也很简单：
+
mindMap.setTheme('classic')
+
+
如果要获取当前使用的主题名称可以使用：
+
const theme = mindMap.getTheme()
+
+
定义新主题
+
除了可以使用内置的主题外，你也可以自定义新主题：
+
import MindMap from 'simple-mind-map'
+
+
+MindMap.defineTheme('主题名称', {
+
+})
+
+
+const mindMap = new MindMap({
+ theme: '主题名称'
+})
+
+
+mindMap.setTheme('主题名称')
+
+
最好在实例化之前进行注册，这样在实例化时可以直接使用新注册的主题。
+
一个主题其实就是一个普通的对象，完整配置可以参考默认主题，defineTheme方法会把你传入的配置和默认配置做合并。大部分主题其实需要自定义的部分不是很多，一个典型的自定义主题配置可以参考blueSky。
+
MindMap.defineTheme('redSpirit', {
+
+ backgroundColor: 'rgb(255, 238, 228)',
+
+ lineColor: 'rgb(230, 138, 131)',
+ lineWidth: 3,
+
+ generalizationLineWidth: 3,
+
+ generalizationLineColor: 'rgb(222, 101, 85)',
+
+ root: {
+ fillColor: 'rgb(207, 44, 44)',
+ color: 'rgb(255, 233, 157)',
+ borderColor: '',
+ borderWidth: 0,
+ fontSize: 24,
+ active: {
+ borderColor: 'rgb(255, 233, 157)',
+ borderWidth: 3,
+ }
+ },
+
+ second: {
+ fillColor: 'rgb(255, 255, 255)',
+ color: 'rgb(211, 58, 21)',
+ borderColor: 'rgb(222, 101, 85)',
+ borderWidth: 2,
+ fontSize: 18,
+ active: {
+ borderColor: 'rgb(255, 233, 157)',
+ }
+ },
+
+ node: {
+ fontSize: 14,
+ color: 'rgb(144, 71, 43)',
+ active: {
+ borderColor: 'rgb(255, 233, 157)'
+ }
+ },
+
+ generalization: {
+ fontSize: 14,
+ fillColor: 'rgb(255, 247, 211)',
+ borderColor: 'rgb(255, 202, 162)',
+ borderWidth: 2,
+ color: 'rgb(187, 101, 69)',
+ active: {
+ borderColor: 'rgb(222, 101, 85)'
+ }
+ }
+})
+
+
完整示例
+
+
+
如何渲染富文本的悬浮工具栏
+
编写中。。。
+
+
+
显示水印
+
+要使用水印需要注册水印插件
+
+
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
+ }
+})
+
+
完整示例
+
+
+
开启节点自由拖拽
+
节点支持自由拖拽，也就是可以把它拖动到你指定的位置，默认是不开启的，如果需要开启可以在实例化simple-mind-map时传入开启的选项：
+
new MindMap({
+
+ enableFreeDrag: true
+})
+
+
也可以动态切换是否开启：
+
mindMap.updateConfig({
+ enableFreeDrag: true
+})
+
+
自由拖拽很容器将节点拖的乱七八糟，所以也可以通过命令回到默认的位置：
+
mindMap.execCommand('RESET_LAYOUT')
+
+
也可以使用快捷键Ctrl + L来恢复。
+
完整示例
+
+
+
开启节点富文本编辑
+
默认节点编辑是不支持富文本模式的，如果要开启需要使用富文本编辑插件，但是富文本编辑模式目前存在缺陷，详情可以阅读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。
+
+
+
修改鼠标滚轮的行为
+
鼠标滚轮的行为支持放大缩小画布和上下移动画布，可以在实例化时通过配置指定：
+
new MindMap({
+
+ mousewheelAction: 'zoom'
+
+ mousewheelMoveStep: 100,
+})
+
+
如果需要动态的切换行为可以使用updateConfig方法：
+
mindMap.updateConfig({
+ mousewheelAction: 'move'
+})
+
+
此外也支持让你自行处理鼠标滚轮事件：
+
new MindMap({
+
+ customHandleMousewheel: (e) => {
+
+ }
+})
+
+
当传了customHandleMousewheel选项，mousewheelAction选项将不生效。
+
完整示例
+
+
+