update

feat: 配置平移步长和扩缩最值，解决触控板灵敏度问题

README.md

@@ -44,7 +44,7 @@ Github：[releases](https://github.com/wanglin2/mind-map/releases)。百度云
 
 官方提供了如下插件，可根据需求按需引入（某个功能不生效大概率是因为你没有引入对应的插件），具体使用方式请查看文档：
 
-> RichText（节点富文本插件）、Select（鼠标多选节点插件）、Drag（节点拖拽插件）、AssociativeLine（关联线插件）、Export（导出插件）、KeyboardNavigation（键盘导航插件）、MiniMap（小地图插件）、Watermark（水印插件）、TouchEvent（移动端触摸事件支持插件）、NodeImgAdjust（拖拽调整节点图片大小插件）、Search（搜索插件）、Painter（节点格式刷插件）、Scrollbar（滚动条插件）、Formula（数学公式插件）、Cooperate（协同编辑插件）、RainbowLines（彩虹线条插件）、Demonstrate（演示模式插件）、OuterFrame（外框插件）、HandDrawnLikeStyle（手绘风格插件）[收费]、Notation（节点标记插件）[收费]、Numbers（节点编号插件）[收费]
+> RichText（节点富文本插件）、Select（鼠标多选节点插件）、Drag（节点拖拽插件）、AssociativeLine（关联线插件）、Export（导出插件）、KeyboardNavigation（键盘导航插件）、MiniMap（小地图插件）、Watermark（水印插件）、TouchEvent（移动端触摸事件支持插件）、NodeImgAdjust（拖拽调整节点图片大小插件）、Search（搜索插件）、Painter（节点格式刷插件）、Scrollbar（滚动条插件）、Formula（数学公式插件）、Cooperate（协同编辑插件）、RainbowLines（彩虹线条插件）、Demonstrate（演示模式插件）、OuterFrame（外框插件）、HandDrawnLikeStyle（手绘风格插件）[收费]、Notation（节点标记插件）[收费]、Numbers（节点编号插件）[收费]、Freemind（Freemind格式导入导出插件）[收费]、Excel（Excel格式导入导出插件）[收费]
 
 本项目不会实现的特性：
 
@@ -103,9 +103,7 @@ const mindMap = new MindMap({
 
 # 微信交流群
 
-一群已满，可以扫描如下二维码进入二群，如已过期，可以微信添加`wanglinguanfang`拉你入群。思维导图相关问题皆可在群里提问，不必私聊作者。
-
-<img src="./qrcode.jpg" style="width: 300px" />
+微信添加`wanglinguanfang`拉你入群。根据过往的经验，大部分问题都可以通过查看issue列表或文档解决，所以提问前请确保你已经阅读完了所有文档，文档里没有的可在群里提问，不必私聊作者。
 
 # star
 
@@ -122,6 +120,8 @@ const mindMap = new MindMap({
 开源不易，如果本项目有帮助到你的话，可以考虑请作者喝杯咖啡，你的支持是开发者持续维护的最大动力~
 
 > 推荐使用支付宝，微信获取不到头像。转账请备注【思维导图】。
+>
+> 也可以通过购买付费插件来支持我们：[付费插件](https://wanglin2.github.io/mind-map-docs/plugins/about.html)。
 
 <p>
   <img src="./web/src/assets/img/alipay.jpg" style="width: 300px" />
@@ -457,4 +457,36 @@ const mindMap = new MindMap({
         <img src="./web/src/assets/avatar/炫.jpg" style="width: 50px;height: 50px;" />
         <span>炫</span>
     </span>
+    <span>
+        <img src="./web/src/assets/avatar/Lawliet.jpg" style="width: 50px;height: 50px;" />
+        <span>Lawliet</span>
+    </span>
+    <span>
+        <img src="./web/src/assets/avatar/一叶孤舟.jpg" style="width: 50px;height: 50px;" />
+        <span>一叶孤舟</span>
+    </span>
+    <span>
+        <img src="./web/src/assets/avatar/default.png" style="width: 50px;height: 50px;" />
+        <span>晏江</span>
+    </span>
+    <span>
+        <img src="./web/src/assets/avatar/default.png" style="width: 50px;height: 50px;" />
+        <span>Eric</span>
+    </span>
+    <span>
+        <img src="./web/src/assets/avatar/Joe.jpg" style="width: 50px;height: 50px;" />
+        <span>Joe</span>
+    </span>
+    <span>
+        <img src="./web/src/assets/avatar/default.png" style="width: 50px;height: 50px;" />
+        <span>中文网字计划-江夏尧</span>
+    </span>
+    <span>
+        <img src="./web/src/assets/avatar/梁辉.jpg" style="width: 50px;height: 50px;" />
+        <span>梁辉</span>
+    </span>
+    <span>
+        <img src="./web/src/assets/avatar/海云.jpg" style="width: 50px;height: 50px;" />
+        <span>海云</span>
+    </span>
 </p>

copy.js

@@ -13,4 +13,4 @@ if (fs.existsSync(src)) {
     fs.unlinkSync(src)
 }
 
-console.warn('请检查手绘风格、标记插件、编号插件是否启用！！！')
+console.warn('请检查付费插件是否启用！！！')

dist/css/app.css

@@ -1 +1 @@
-*{margin:0;padding:0;box-sizing:border-box}#app{font-family:Avenir,Helvetica,Arial,sans-serif;color:#2c3e50}@font-face{font-family:iconfont;src:url(../fonts/iconfont.woff2) format("woff2"),url(../fonts/iconfont.woff) format("woff"),url(../fonts/iconfont.ttf) format("truetype")}#app,.iconfont{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.iconfont{font-family:iconfont!important;font-size:16px;font-style:normal}.iconwaikuang:before{content:"\e640"}.iconhighlight:before{content:"\e6b8"}.iconyanshibofang:before{content:"\e648"}.iconfujian:before{content:"\e88a"}.icongeshihua:before{content:"\e7a3"}.iconyuanma:before{content:"\e658"}.icongundongtiao:before{content:"\e670"}.iconxietongwendang:before{content:"\e60d"}.iconTXT:before{content:"\e6e1"}.iconwenjian1:before{content:"\e69f"}.icondodeparent:before{content:"\e70f"}.icongongshi:before{content:"\e617"}.icontouming:before{content:"\e60c"}.iconlieri:before{content:"\e60b"}.iconmoon_line:before{content:"\e745"}.iconsousuo:before{content:"\e693"}.iconjiantouyou:before{content:"\e62d"}.iconbianji1:before{content:"\e60a"}.icondaohang1:before{content:"\e632"}.iconyanjing:before{content:"\e8bf"}.iconwangzhan:before{content:"\e628"}.iconcsdn:before{content:"\e608"}.iconshejiaotubiao-10:before{content:"\e644"}.iconstar:before{content:"\e7df"}.iconfork:before{content:"\e641"}.iconxiazai:before{content:"\e613"}.iconteamwork:before{content:"\e870"}.iconshuiyin:before{content:"\e67a"}.iconxmind:before{content:"\ea57"}.iconmouseR:before{content:"\e6bd"}.iconmouseL:before{content:"\e6c0"}.iconwenjian:before{content:"\e607"}.iconpdf:before{content:"\e740"}.iconPNG:before{content:"\ec18"}.iconSVG:before{content:"\e621"}.iconmarkdown:before{content:"\ec04"}.iconjson:before{content:"\ea42"}.iconlianjiexian:before{content:"\e75b"}.iconbangzhu:before{content:"\e620"}.iconshezhi:before{content:"\e8b7"}.iconwushuju:before{content:"\e643"}.iconzuijinliulan:before{content:"\e62f"}.icon3zuidahua-3:before{content:"\e692"}.iconzuixiaohua:before{content:"\e650"}.iconzuidahua:before{content:"\e651"}.iconguanbi:before{content:"\e652"}.icondiannao:before{content:"\eac0"}.iconzhuye:before{content:"\e65c"}.iconbendi1x:before{content:"\e606"}.iconbeijingyanse:before{content:"\e6f8"}.iconqingchu:before{content:"\e605"}.iconcase:before{content:"\e6c6"}.iconxingzhuang-wenzi:before{content:"\eb99"}.iconzitijiacu:before{content:"\ec83"}.iconzitixiahuaxian:before{content:"\ec85"}.iconzitixieti:before{content:"\ec86"}.iconshanchuxian:before{content:"\e612"}.iconzitiyanse:before{content:"\e854"}.icongithub:before{content:"\e64f"}.iconchoose1:before{content:"\e6c5"}.iconzhuti:before{content:"\e7aa"}.icondaochu1:before{content:"\e63e"}.iconlingcunwei:before{content:"\e657"}.iconexport:before{content:"\e642"}.icondakai:before{content:"\ebdf"}.iconxinjian:before{content:"\e64e"}.iconjianqie:before{content:"\e601"}.iconzhengli:before{content:"\e83b"}.iconfuzhi:before{content:"\e604"}.iconniantie:before{content:"\e63f"}.iconshangyi:before{content:"\e6be"}.iconxiayi:before{content:"\e6bf"}.icongaikuozonglan:before{content:"\e609"}.iconquanxuan:before{content:"\f199"}.icondaoru:before{content:"\e6a3"}.iconhoutui-shi:before{content:"\e656"}.iconqianjin1:before{content:"\e654"}.iconwithdraw:before{content:"\e603"}.iconqianjin:before{content:"\e600"}.iconhuifumoren:before{content:"\e60e"}.iconhuanhang:before{content:"\e61e"}.iconsuoxiao:before{content:"\ec13"}.iconbianji:before{content:"\e626"}.iconfangda:before{content:"\e663"}.iconquanping1:before{content:"\e664"}.icondingwei:before{content:"\e616"}.icondaohang:before{content:"\e611"}.iconjianpan:before{content:"\e64d"}.iconquanping:before{content:"\e602"}.icondaochu:before{content:"\e63d"}.iconbiaoqian:before{content:"\e63c"}.iconflow-Mark:before{content:"\e65b"}.iconchaolianjie:before{content:"\e6f4"}.iconjingzi:before{content:"\e610"}.iconxiaolian:before{content:"\e60f"}.iconimage:before{content:"\e629"}.iconjiegou:before{content:"\e61d"}.iconyangshi:before{content:"\e631"}.iconfuhao-dagangshu:before{content:"\e71f"}.icontianjiazijiedian:before{content:"\e622"}.iconjiedian:before{content:"\e655"}.iconshanchu:before{content:"\e696"}.iconzhankai:before{content:"\e64c"}.iconzhankai1:before{content:"\e673"}
+*{margin:0;padding:0;box-sizing:border-box}#app{font-family:Avenir,Helvetica,Arial,sans-serif;color:#2c3e50}@font-face{font-family:iconfont;src:url(../fonts/iconfont.woff2) format("woff2"),url(../fonts/iconfont.woff) format("woff"),url(../fonts/iconfont.ttf) format("truetype")}#app,.iconfont{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.iconfont{font-family:iconfont!important;font-size:16px;font-style:normal}.iconfile-excel:before{content:"\e7b7"}.iconfreemind:before{content:"\e97d"}.iconwaikuang:before{content:"\e640"}.iconhighlight:before{content:"\e6b8"}.iconyanshibofang:before{content:"\e648"}.iconfujian:before{content:"\e88a"}.icongeshihua:before{content:"\e7a3"}.iconyuanma:before{content:"\e658"}.icongundongtiao:before{content:"\e670"}.iconxietongwendang:before{content:"\e60d"}.iconTXT:before{content:"\e6e1"}.iconwenjian1:before{content:"\e69f"}.icondodeparent:before{content:"\e70f"}.icongongshi:before{content:"\e617"}.icontouming:before{content:"\e60c"}.iconlieri:before{content:"\e60b"}.iconmoon_line:before{content:"\e745"}.iconsousuo:before{content:"\e693"}.iconjiantouyou:before{content:"\e62d"}.iconbianji1:before{content:"\e60a"}.icondaohang1:before{content:"\e632"}.iconyanjing:before{content:"\e8bf"}.iconwangzhan:before{content:"\e628"}.iconcsdn:before{content:"\e608"}.iconshejiaotubiao-10:before{content:"\e644"}.iconstar:before{content:"\e7df"}.iconfork:before{content:"\e641"}.iconxiazai:before{content:"\e613"}.iconteamwork:before{content:"\e870"}.iconshuiyin:before{content:"\e67a"}.iconxmind:before{content:"\ea57"}.iconmouseR:before{content:"\e6bd"}.iconmouseL:before{content:"\e6c0"}.iconwenjian:before{content:"\e607"}.iconpdf:before{content:"\e740"}.iconPNG:before{content:"\ec18"}.iconSVG:before{content:"\e621"}.iconmarkdown:before{content:"\ec04"}.iconjson:before{content:"\ea42"}.iconlianjiexian:before{content:"\e75b"}.iconbangzhu:before{content:"\e620"}.iconshezhi:before{content:"\e8b7"}.iconwushuju:before{content:"\e643"}.iconzuijinliulan:before{content:"\e62f"}.icon3zuidahua-3:before{content:"\e692"}.iconzuixiaohua:before{content:"\e650"}.iconzuidahua:before{content:"\e651"}.iconguanbi:before{content:"\e652"}.icondiannao:before{content:"\eac0"}.iconzhuye:before{content:"\e65c"}.iconbendi1x:before{content:"\e606"}.iconbeijingyanse:before{content:"\e6f8"}.iconqingchu:before{content:"\e605"}.iconcase:before{content:"\e6c6"}.iconxingzhuang-wenzi:before{content:"\eb99"}.iconzitijiacu:before{content:"\ec83"}.iconzitixiahuaxian:before{content:"\ec85"}.iconzitixieti:before{content:"\ec86"}.iconshanchuxian:before{content:"\e612"}.iconzitiyanse:before{content:"\e854"}.icongithub:before{content:"\e64f"}.iconchoose1:before{content:"\e6c5"}.iconzhuti:before{content:"\e7aa"}.icondaochu1:before{content:"\e63e"}.iconlingcunwei:before{content:"\e657"}.iconexport:before{content:"\e642"}.icondakai:before{content:"\ebdf"}.iconxinjian:before{content:"\e64e"}.iconjianqie:before{content:"\e601"}.iconzhengli:before{content:"\e83b"}.iconfuzhi:before{content:"\e604"}.iconniantie:before{content:"\e63f"}.iconshangyi:before{content:"\e6be"}.iconxiayi:before{content:"\e6bf"}.icongaikuozonglan:before{content:"\e609"}.iconquanxuan:before{content:"\f199"}.icondaoru:before{content:"\e6a3"}.iconhoutui-shi:before{content:"\e656"}.iconqianjin1:before{content:"\e654"}.iconwithdraw:before{content:"\e603"}.iconqianjin:before{content:"\e600"}.iconhuifumoren:before{content:"\e60e"}.iconhuanhang:before{content:"\e61e"}.iconsuoxiao:before{content:"\ec13"}.iconbianji:before{content:"\e626"}.iconfangda:before{content:"\e663"}.iconquanping1:before{content:"\e664"}.icondingwei:before{content:"\e616"}.icondaohang:before{content:"\e611"}.iconjianpan:before{content:"\e64d"}.iconquanping:before{content:"\e602"}.icondaochu:before{content:"\e63d"}.iconbiaoqian:before{content:"\e63c"}.iconflow-Mark:before{content:"\e65b"}.iconchaolianjie:before{content:"\e6f4"}.iconjingzi:before{content:"\e610"}.iconxiaolian:before{content:"\e60f"}.iconimage:before{content:"\e629"}.iconjiegou:before{content:"\e61d"}.iconyangshi:before{content:"\e631"}.iconfuhao-dagangshu:before{content:"\e71f"}.icontianjiazijiedian:before{content:"\e622"}.iconjiedian:before{content:"\e655"}.iconshanchu:before{content:"\e696"}.iconzhankai:before{content:"\e64c"}.iconzhankai1:before{content:"\e673"}

index.html

@@ -9,7 +9,7 @@
         })
       } catch (error) {
         console.log(error)
-      }</script><link href="dist/css/chunk-vendors.css?1c8f9269e64b9476f0c7" rel="stylesheet"><link href="dist/css/app.css?1c8f9269e64b9476f0c7" rel="stylesheet"></head><body><noscript><strong>We're sorry but thoughts doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id="app"></div><script>const getDataFromBackend = () => {
+      }</script><link href="dist/css/chunk-vendors.css?63f5fae2a1a38e74b08f" rel="stylesheet"><link href="dist/css/app.css?63f5fae2a1a38e74b08f" rel="stylesheet"></head><body><noscript><strong>We're sorry but thoughts doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id="app"></div><script>const getDataFromBackend = () => {
         return new Promise((resolve, reject) => {
           setTimeout(() => {
             resolve({
@@ -74,4 +74,4 @@
         // 可以通过window.$bus.$on()来监听应用的一些事件
         // 实例化页面
         window.initApp()
-      }</script><script src="dist/js/chunk-vendors.js?1c8f9269e64b9476f0c7"></script><script src="dist/js/app.js?1c8f9269e64b9476f0c7"></script></body></html>
+      }</script><script src="dist/js/chunk-vendors.js?63f5fae2a1a38e74b08f"></script><script src="dist/js/app.js?63f5fae2a1a38e74b08f"></script></body></html>

simple-mind-map/full.js

@@ -22,16 +22,14 @@ import xmind from './src/parse/xmind.js'
 import markdown from './src/parse/markdown.js'
 import icons from './src/svg/icons.js'
 import * as constants from './src/constants/constant.js'
-import themes from './src/themes/index.js'
-import * as defaultTheme from './src/themes/default.js'
+import * as defaultTheme from './src/theme/default.js'
 
 MindMap.xmind = xmind
 MindMap.markdown = markdown
 MindMap.iconList = icons.nodeIconList
 MindMap.constants = constants
-MindMap.themes = themes
 MindMap.defaultTheme = defaultTheme
-MindMap.version = '0.11.0'
+MindMap.version = '0.12.0'
 
 MindMap.usePlugin(MiniMap)
   .usePlugin(Watermark)

simple-mind-map/index.js

@@ -2,7 +2,7 @@ import View from './src/core/view/View'
 import Event from './src/core/event/Event'
 import Render from './src/core/render/Render'
 import merge from 'deepmerge'
-import theme from './src/themes'
+import theme from './src/theme'
 import Style from './src/core/render/node/Style'
 import KeyCommand from './src/core/command/KeyCommand'
 import Command from './src/core/command/Command'
@@ -19,11 +19,12 @@ import {
   getObjectChangedProps,
   isUndef,
   handleGetSvgDataExtraContent,
-  getNodeTreeBoundingRect
+  getNodeTreeBoundingRect,
+  mergeTheme
 } from './src/utils'
 import defaultTheme, {
   checkIsNodeSizeIndependenceConfig
-} from './src/themes/default'
+} from './src/theme/default'
 import { defaultOpt } from './src/constants/defaultOptions'
 
 //  思维导图
@@ -34,6 +35,7 @@ class MindMap {
    * @param {defaultOpt} opt
    */
   constructor(opt = {}) {
+    MindMap.instanceCount++
     // 合并选项
     this.opt = this.handleOpt(merge(defaultOpt, opt))
     // 预处理节点数据
@@ -50,9 +52,9 @@ class MindMap {
     this.initWidth = this.width
     this.initHeight = this.height
 
-    // 添加css
+    // 必要的css样式
     this.cssEl = null
-    this.addCss()
+    this.cssTextMap = {} // 该样式在实例化时会动态添加到页面，同时导出为svg时也会添加到svg源码中
 
     // 画布
     this.initContainer()
@@ -96,6 +98,9 @@ class MindMap {
       this.initPlugin(plugin)
     })
 
+    // 添加必要的css样式
+    this.addCss()
+
     // 初始渲染
     this.render(this.opt.fit ? () => this.view.fit() : () => {})
     setTimeout(() => {
@@ -168,17 +173,46 @@ class MindMap {
     this.otherDraw.clear()
   }
 
+  // 追加必要的css样式
+  // 该样式在实例化时会动态添加到页面，同时导出为svg时也会添加到svg源码中
+  appendCss(key, str) {
+    this.cssTextMap[key] = str
+    this.removeCss()
+    this.addCss()
+  }
+
+  // 移除追加的css样式
+  removeAppendCss(key) {
+    if (this.cssTextMap[key]) {
+      delete this.cssTextMap[key]
+      this.removeCss()
+      this.addCss()
+    }
+  }
+
+  // 拼接必要的css样式
+  joinCss() {
+    return (
+      cssContent +
+      Object.keys(this.cssTextMap)
+        .map(key => {
+          return this.cssTextMap[key]
+        })
+        .join('\n')
+    )
+  }
+
   // 添加必要的css样式到页面
   addCss() {
     this.cssEl = document.createElement('style')
     this.cssEl.type = 'text/css'
-    this.cssEl.innerHTML = cssContent
+    this.cssEl.innerHTML = this.joinCss()
     document.head.appendChild(this.cssEl)
   }
 
   // 移除css
   removeCss() {
-    document.head.removeChild(this.cssEl)
+    if (this.cssEl) document.head.removeChild(this.cssEl)
   }
 
   //  渲染，部分渲染
@@ -252,7 +286,10 @@ class MindMap {
   //  设置主题
   initTheme() {
     // 合并主题配置
-    this.themeConfig = merge(theme[this.opt.theme], this.opt.themeConfig)
+    this.themeConfig = mergeTheme(
+      theme[this.opt.theme] || theme.default,
+      this.opt.themeConfig
+    )
     // 设置背景样式
     Style.setBackgroundStyle(this.el, this.themeConfig)
   }
@@ -509,7 +546,7 @@ class MindMap {
       this.watermark.isInExport = false
     }
     // 添加必要的样式
-    ;[cssContent, ...cssTextList].forEach(s => {
+    ;[this.joinCss(), ...cssTextList].forEach(s => {
       clone.add(SVG(`<style>${s}</style>`))
     })
     // 附加内容
@@ -563,8 +600,8 @@ class MindMap {
     let index = MindMap.hasPlugin(plugin)
     if (index === -1) {
       MindMap.usePlugin(plugin, opt)
-      this.initPlugin(plugin)
     }
+    this.initPlugin(plugin)
   }
 
   // 移除插件
@@ -583,6 +620,7 @@ class MindMap {
 
   // 实例化插件
   initPlugin(plugin) {
+    if (this[plugin.instanceName]) return
     this[plugin.instanceName] = new plugin({
       mindMap: this,
       pluginOpt: plugin.pluginOpt
@@ -616,6 +654,7 @@ class MindMap {
     this.el.innerHTML = ''
     this.el = null
     this.removeCss()
+    MindMap.instanceCount--
   }
 }
 
@@ -632,13 +671,20 @@ MindMap.hasPlugin = plugin => {
     return item === plugin
   })
 }
+MindMap.instanceCount = 0
 
 // 定义新主题
 MindMap.defineTheme = (name, config = {}) => {
   if (theme[name]) {
     return new Error('该主题名称已存在')
   }
-  theme[name] = merge(defaultTheme, config)
+  theme[name] = mergeTheme(defaultTheme, config)
+}
+// 移除主题
+MindMap.removeTheme = name => {
+  if (theme[name]) {
+    theme[name] = null
+  }
 }
 
 export default MindMap

simple-mind-map/package.json

@@ -1,6 +1,6 @@
 {
   "name": "simple-mind-map",
-  "version": "0.11.0",
+  "version": "0.12.0",
   "description": "一个简单的web在线思维导图",
   "authors": [
     {

simple-mind-map/src/constants/constant.js

@@ -1,167 +1,3 @@
-//  主题列表
-export const themeList = [
-  {
-    name: '默认',
-    value: 'default',
-    dark: false
-  },
-  {
-    name: '暗色2',
-    value: 'dark2',
-    dark: true
-  },
-  {
-    name: '天清绿',
-    value: 'skyGreen',
-    dark: false
-  },
-  {
-    name: '脑图经典2',
-    value: 'classic2',
-    dark: false
-  },
-  {
-    name: '脑图经典3',
-    value: 'classic3',
-    dark: false
-  },
-  {
-    name: '经典绿',
-    value: 'classicGreen',
-    dark: false
-  },
-  {
-    name: '经典蓝',
-    value: 'classicBlue',
-    dark: false
-  },
-  {
-    name: '天空蓝',
-    value: 'blueSky',
-    dark: false
-  },
-  {
-    name: '脑残粉',
-    value: 'brainImpairedPink',
-    dark: false
-  },
-  {
-    name: '暗色',
-    value: 'dark',
-    dark: true
-  },
-  {
-    name: '泥土黄',
-    value: 'earthYellow',
-    dark: false
-  },
-  {
-    name: '清新绿',
-    value: 'freshGreen',
-    dark: false
-  },
-  {
-    name: '清新红',
-    value: 'freshRed',
-    dark: false
-  },
-  {
-    name: '浪漫紫',
-    value: 'romanticPurple',
-    dark: false
-  },
-  {
-    name: '粉红葡萄',
-    value: 'pinkGrape',
-    dark: false
-  },
-  {
-    name: '薄荷',
-    value: 'mint',
-    dark: false
-  },
-  {
-    name: '金色vip',
-    value: 'gold',
-    dark: false
-  },
-  {
-    name: '活力橙',
-    value: 'vitalityOrange',
-    dark: false
-  },
-  {
-    name: '绿叶',
-    value: 'greenLeaf',
-    dark: false
-  },
-  {
-    name: '脑图经典',
-    value: 'classic',
-    dark: true
-  },
-  {
-    name: '脑图经典4',
-    value: 'classic4',
-    dark: false
-  },
-  {
-    name: '小黄人',
-    value: 'minions',
-    dark: false
-  },
-  {
-    name: '简约黑',
-    value: 'simpleBlack',
-    dark: false
-  },
-  {
-    name: '课程绿',
-    value: 'courseGreen',
-    dark: false
-  },
-  {
-    name: '咖啡',
-    value: 'coffee',
-    dark: false
-  },
-  {
-    name: '红色精神',
-    value: 'redSpirit',
-    dark: false
-  },
-  {
-    name: '黑色幽默',
-    value: 'blackHumour',
-    dark: true
-  },
-  {
-    name: '深夜办公室',
-    value: 'lateNightOffice',
-    dark: true
-  },
-  {
-    name: '黑金',
-    value: 'blackGold',
-    dark: true
-  },
-  {
-    name: '牛油果',
-    value: 'avocado',
-    dark: false
-  },
-  {
-    name: '秋天',
-    value: 'autumn',
-    dark: false
-  },
-  {
-    name: '橙汁',
-    value: 'orangeJuice',
-    dark: true
-  }
-]
-
 // 常量
 export const CONSTANTS = {
   CHANGE_THEME: 'changeTheme',
@@ -328,7 +164,10 @@ export const nodeDataNoStylePropList = [
   'notation',
   'outerFrame',
   'number',
-  'range'
+  'range',
+  'customLeft',
+  'customTop',
+  'customTextWidth'
 ]
 
 // 错误类型

simple-mind-map/src/constants/defaultOptions.js

@@ -7,6 +7,8 @@ export const defaultOpt = {
   el: null,
   // 思维导图回显数据
   data: null,
+  // 要恢复的视图数据，一般通过mindMap.view.getTransformData()方法获取
+  viewData: null,
   // 是否只读
   readonly: false,
   // 布局
@@ -19,6 +21,16 @@ export const defaultOpt = {
   themeConfig: {},
   // 放大缩小的增量比例
   scaleRatio: 0.2,
+  // 平移的步长比例，只在鼠标滚轮和触控板触发的平移中应用
+  translateRatio: 1,
+  // 最小缩小值，百分数，最小为0，该选项只会影响view.narrow方法（影响的行为为Ctrl+-快捷键、鼠标滚轮及触控板），不会影响其他方法，比如view.setScale，所以需要你自行限制大小
+  minZoomRatio: 20,
+  // 最大放大值，百分数，传-1代表不限制，否则传0以上数字，，该选项只会影响view.enlarge方法
+  maxZoomRatio: 400,
+  // 自定义判断wheel事件是否来自电脑的触控板
+  // 默认是通过判断e.deltaY的值是否小于10，显然这种方法是不准确的，当鼠标滚动的很慢，或者触摸移动的很快时判断就失效了，如果你有更好的方法，欢迎提交issue
+  // 如果你希望自己来判断，那么传递一个函数，接收一个参数e（事件对象），需要返回true或false，代表是否是来自触控板
+  customCheckIsTouchPad: null,
   // 鼠标缩放是否以鼠标当前位置为中心点，否则以画布中心点
   mouseScaleCenterUseMousePosition: true,
   // 最多显示几个标签
@@ -67,9 +79,7 @@ export const defaultOpt = {
     close: ''
   },
   // 处理收起节点数量
-  expandBtnNumHandler: num => {
-    return num
-  },
+  expandBtnNumHandler: null,
   // 是否显示带数量的收起按钮
   isShowExpandNum: true,
   // 是否只有当鼠标在画布内才响应快捷键事件
@@ -176,11 +186,6 @@ export const defaultOpt = {
   addHistoryTime: 100,
   // 是否禁止拖动画布
   isDisableDrag: false,
-  // 鼠标移入概要高亮所属节点时的高亮框样式
-  highlightNodeBoxStyle: {
-    stroke: 'rgb(94, 200, 248)',
-    fill: 'transparent'
-  },
   // 创建新节点时的行为
   /*
     DEFAULT  ：默认会激活新创建的节点，并且进入编辑模式。如果同时创建了多个新节点，那么只会激活而不会进入编辑模式
@@ -238,6 +243,20 @@ export const defaultOpt = {
     padding: 100, // 超出画布四周指定范围内依旧渲染节点
     removeNodeWhenOutCanvas: true // 节点移除画布可视区域后从画布删除
   },
+  // 如果节点文本为空，那么为了避免空白节点高度塌陷，会用该字段指定的文本测量一个高度
+  emptyTextMeasureHeightText: 'abc123我和你',
+  // 是否在进行节点文本编辑时实时更新节点大小和节点位置，开启后当节点数量比较多时可能会造成卡顿
+  openRealtimeRenderOnNodeTextEdit: false,
+  // 默认会给容器元素el绑定mousedown事件，并且会阻止其默认事件，这会带来一定问题，比如你聚焦在思维导图外的其他输入框，点击画布就不会触发其失焦，可以通过该选项关闭阻止。关闭后也会带来一定问题，比如鼠标框选节点时可能会选中节点文字，看你如何取舍
+  mousedownEventPreventDefault: true,
+  // 在激活上粘贴用户剪贴板中的数据时，如果同时存在文本和图片，那么只粘贴文本，忽略图片
+  onlyPasteTextWhenHasImgAndText: true,
+  // 是否允许拖拽调整节点的宽度，实际上压缩的是节点里面文本内容的宽度，当节点文本内容宽度压缩到最小时无法继续压缩。如果节点存在图片，那么最小值以图片宽度和文本内容最小宽度的最大值为准（目前该特性仅在两种情况下可用：1.开启了富文本模式，即注册了RichText插件；2.自定义节点内容）
+  enableDragModifyNodeWidth: true,
+  // 当允许拖拽调整节点的宽度时，可以通过该选项设置节点文本内容允许压缩的最小宽度
+  minNodeTextModifyWidth: 20,
+  // 同minNodeTextModifyWidth，最大值，传-1代表不限制
+  maxNodeTextModifyWidth: -1,
 
   // 【Select插件】
   // 多选节点时鼠标移动到边缘时的画布移动偏移量
@@ -321,6 +340,8 @@ export const defaultOpt = {
   // 导出png、svg、pdf时会获取画布上的svg数据进行克隆，然后通过该克隆的元素进行导出，如果你想对该克隆元素做一些处理，比如新增、替换、修改其中的一些元素，那么可以通过该参数传递一个处理函数，接收svg元素对象，处理后，需要返回原svg元素对象。
   // 需要注意的是svg对象指的是@svgdotjs/svg.js库的元素对象，所以你需要阅读该库的文档来操作该对象
   handleBeingExportSvg: null,
+  // 导出图片或pdf都是通过canvas将svg绘制出来，再导出，所以如果思维导图特别大，宽高可能会超出canvas支持的上限，所以会进行缩放，这个上限可以通过该参数设置，代表canvas宽和高的最大宽度
+  maxCanvasSize: 16384,
 
   // 【AssociativeLine插件】
   // 关联线默认文字
@@ -337,6 +358,8 @@ export const defaultOpt = {
   },
   // 是否允许调整关联线两个端点的位置
   enableAdjustAssociativeLinePoints: true,
+  // 关联线连接即将完成时执行，如果要阻止本次连接可以返回true，函数接收一个参数：node（目标节点实例）
+  beforeAssociativeLineConnection: null,
 
   // 【TouchEvent插件】
   // 禁止双指缩放，你仍旧可以使用api进行缩放
@@ -409,5 +432,23 @@ export const defaultOpt = {
 
   // 【OuterFrame】插件
   outerFramePaddingX: 10,
-  outerFramePaddingY: 10
+  outerFramePaddingY: 10,
+
+  // 【Painter】插件
+  // 是否只格式刷节点手动设置的样式，不考虑节点通过主题的应用的样式
+  onlyPainterNodeCustomStyles: false,
+
+  // 【NodeImgAdjust】插件
+  // 拦截节点图片的删除，点击节点图片上的删除按钮删除图片前会调用该函数，如果函数返回true则取消删除
+  beforeDeleteNodeImg: null,
+  // 删除和调整两个按钮的大小
+  imgResizeBtnSize: 25,
+  // 最小允许缩放的尺寸，请传入>=0的数字
+  minImgResizeWidth: 50,
+  minImgResizeHeight: 50,
+  // 最大允许缩放的尺寸依据主题的配置，即主题的imgMaxWidth和imgMaxHeight配置，如果设置为false，那么使用maxImgResizeWidth和maxImgResizeHeight选项
+  maxImgResizeWidthInheritTheme: false,
+  // 最大允许缩放的尺寸，maxImgResizeWidthInheritTheme选项设置为false时生效，不限制最大值可传递Infinity
+  maxImgResizeWidth: Infinity,
+  maxImgResizeHeight: Infinity
 }

simple-mind-map/src/core/event/Event.js

@@ -156,8 +156,14 @@ class Event extends EventEmitter {
     // 判断是否是触控板
     let isTouchPad = false
     // mac、windows
-    if (e.wheelDeltaY === e.deltaY * -3 || Math.abs(e.wheelDeltaY) <= 10) {
-      isTouchPad = true
+    // if (e.wheelDeltaY === e.deltaY * -3 || Math.abs(e.wheelDeltaY) <= 10) {
+    //   isTouchPad = true
+    // }
+    const { customCheckIsTouchPad } = this.mindMap.opt
+    if (typeof customCheckIsTouchPad === 'function') {
+      isTouchPad = customCheckIsTouchPad(e)
+    } else {
+      isTouchPad = Math.abs(e.deltaY) <= 10
     }
     this.emit('mousewheel', e, dirs, this, isTouchPad)
   }

simple-mind-map/src/core/render/Render.js

@@ -36,7 +36,7 @@ import {
   throttle
 } from '../../utils'
 import { shapeList } from './node/Shape'
-import { lineStyleProps } from '../../themes/default'
+import { lineStyleProps } from '../../theme/default'
 import { CONSTANTS, ERROR_TYPES } from '../../constants/constant'
 import { Polygon } from '@svgdotjs/svg.js'
 
@@ -97,10 +97,11 @@ class Render {
     this.beingPasteText = ''
     this.beingPasteImgSize = 0
     this.currentBeingPasteType = ''
+    this.pasteData = { text: null, img: null }
     // 节点高亮框
     this.highlightBoxNode = null
+    this.highlightBoxNodeStyle = null
     // 上一次节点激活数据
-    this.lastActiveNode = null
     this.lastActiveNodeList = []
     // 布局
     this.setLayout()
@@ -123,7 +124,7 @@ class Render {
 
   // 重新设置思维导图数据
   setData(data) {
-    if (this.mindMap.richText) {
+    if (this.hasRichTextPlugin()) {
       this.renderTree = data ? this.mindMap.richText.handleSetData(data) : null
     } else {
       this.renderTree = data
@@ -147,6 +148,28 @@ class Render {
     })
     // 性能模式
     this.performanceMode()
+    // 实时渲染当节点文本编辑时
+    if (this.mindMap.opt.openRealtimeRenderOnNodeTextEdit) {
+      this.mindMap.on('node_text_edit_change', ({ node, text }) => {
+        node._textData = node.createTextNode(text)
+        const { width, height } = node.getNodeRect()
+        node.width = width
+        node.height = height
+        node.layout()
+        this.mindMap.render(() => {
+          this.textEdit.updateTextEditNode()
+        })
+      })
+    }
+    // 处理非https下的复制黏贴问题
+    // 暂时不启用，因为给页面的其他输入框（比如节点文本编辑框）粘贴内容也会触发，冲突问题暂时没有想到好的解决方法，不可能要求所有输入框都阻止冒泡
+    // if (!navigator.clipboard) {
+    //   this.handlePaste = this.handlePaste.bind(this)
+    //   window.addEventListener('paste', this.handlePaste)
+    //   this.mindMap.on('beforeDestroy', () => {
+    //     window.removeEventListener('paste', this.handlePaste)
+    //   })
+    // }
   }
 
   // 性能模式，懒加载节点
@@ -391,7 +414,7 @@ class Render {
     this.mindMap.keyCommand.addShortcut('Control+Down', () => {
       this.mindMap.execCommand('DOWN_NODE')
     })
-    // 复制节点、
+    // 复制节点
     this.mindMap.keyCommand.addShortcut('Control+c', () => {
       this.copy()
     })
@@ -401,7 +424,7 @@ class Render {
     })
     // 粘贴节点
     this.mindMap.keyCommand.addShortcut('Control+v', () => {
-      this.paste()
+      if (navigator.clipboard) this.paste()
     })
     // 根节点居中显示
     this.mindMap.keyCommand.addShortcut('Control+Enter', () => {
@@ -411,13 +434,11 @@ class Render {
 
   // 派发节点激活事件
   emitNodeActiveEvent(node = null, activeNodeList = [...this.activeNodeList]) {
-    let isChange = false
-    isChange = this.lastActiveNode !== node
-    if (!isChange) {
-      isChange = !checkNodeListIsEqual(this.lastActiveNodeList, activeNodeList)
-    }
+    const isChange = !checkNodeListIsEqual(
+      this.lastActiveNodeList,
+      activeNodeList
+    )
     if (!isChange) return
-    this.lastActiveNode = node
     this.lastActiveNodeList = [...activeNodeList]
     this.mindMap.batchExecution.push('emitNodeActiveEvent', () => {
       this.mindMap.emit('node_active', node, activeNodeList)
@@ -525,7 +546,7 @@ class Render {
           }
           // 触发一次保存，因为修改了渲染树的数据
           if (
-            this.mindMap.richText &&
+            this.hasRichTextPlugin() &&
             [CONSTANTS.CHANGE_THEME, CONSTANTS.SET_DATA].includes(source)
           ) {
             this.mindMap.command.addHistory()
@@ -539,7 +560,7 @@ class Render {
 
   // 给当前被收起来的节点数据添加文本复位标志
   resetUnExpandNodeStyle() {
-    if (!this.renderTree) return
+    if (!this.renderTree || !this.hasRichTextPlugin()) return
     walk(this.renderTree, null, node => {
       if (!node.data.expand) {
         walk(node, null, node2 => {
@@ -716,7 +737,7 @@ class Render {
     } = this.mindMap.opt
     const list = appointNodes.length > 0 ? appointNodes : this.activeNodeList
     const handleMultiNodes = list.length > 1
-    const isRichText = !!this.mindMap.richText
+    const isRichText = this.hasRichTextPlugin()
     const { focusNewNode, inserting } = this.getNewNodeBehavior(
       openEdit,
       handleMultiNodes
@@ -724,9 +745,9 @@ class Render {
     const params = {
       expand: true,
       richText: isRichText,
-      resetRichText: isRichText,
       isActive: focusNewNode // 如果同时对多个节点插入子节点，那么需要把新增的节点设为激活状态。如果不进入编辑状态，那么也需要手动设为激活状态
     }
+    if (isRichText) params.resetRichText = isRichText
     // 动态指定的子节点数据也需要添加相关属性
     appointChildren = addDataToAppointNodes(appointChildren, {
       ...params
@@ -771,14 +792,14 @@ class Render {
     }
     this.textEdit.hideEditTextBox()
     const list = appointNodes.length > 0 ? appointNodes : this.activeNodeList
-    const isRichText = !!this.mindMap.richText
+    const isRichText = this.hasRichTextPlugin()
     const { focusNewNode } = this.getNewNodeBehavior(false, true)
     const params = {
       expand: true,
       richText: isRichText,
-      resetRichText: isRichText,
       isActive: focusNewNode
     }
+    if (isRichText) params.resetRichText = isRichText
     nodeList = addDataToAppointNodes(nodeList, params)
     list.forEach(node => {
       if (node.isGeneralization || node.isRoot) {
@@ -814,7 +835,7 @@ class Render {
     } = this.mindMap.opt
     const list = appointNodes.length > 0 ? appointNodes : this.activeNodeList
     const handleMultiNodes = list.length > 1
-    const isRichText = !!this.mindMap.richText
+    const isRichText = this.hasRichTextPlugin()
     const { focusNewNode, inserting } = this.getNewNodeBehavior(
       openEdit,
       handleMultiNodes
@@ -822,9 +843,9 @@ class Render {
     const params = {
       expand: true,
       richText: isRichText,
-      resetRichText: isRichText,
       isActive: focusNewNode
     }
+    if (isRichText) params.resetRichText = isRichText
     // 动态指定的子节点数据也需要添加相关属性
     appointChildren = addDataToAppointNodes(appointChildren, {
       ...params
@@ -871,14 +892,14 @@ class Render {
     }
     this.textEdit.hideEditTextBox()
     const list = appointNodes.length > 0 ? appointNodes : this.activeNodeList
-    const isRichText = !!this.mindMap.richText
+    const isRichText = this.hasRichTextPlugin()
     const { focusNewNode } = this.getNewNodeBehavior(false, true)
     const params = {
       expand: true,
       richText: isRichText,
-      resetRichText: isRichText,
       isActive: focusNewNode
     }
+    if (isRichText) params.resetRichText = isRichText
     childList = addDataToAppointNodes(childList, params)
     list.forEach(node => {
       if (node.isGeneralization) {
@@ -913,7 +934,7 @@ class Render {
     } = this.mindMap.opt
     const list = appointNodes.length > 0 ? appointNodes : this.activeNodeList
     const handleMultiNodes = list.length > 1
-    const isRichText = !!this.mindMap.richText
+    const isRichText = this.hasRichTextPlugin()
     const { focusNewNode, inserting } = this.getNewNodeBehavior(
       openEdit,
       handleMultiNodes
@@ -921,9 +942,9 @@ class Render {
     const params = {
       expand: true,
       richText: isRichText,
-      resetRichText: isRichText,
       isActive: focusNewNode
     }
+    if (isRichText) params.resetRichText = isRichText
     list.forEach(node => {
       if (node.isGeneralization || node.isRoot) {
         return
@@ -942,9 +963,11 @@ class Render {
         },
         children: [node.nodeData]
       }
-      node.setData({
-        resetRichText: true
-      })
+      if (isRichText) {
+        node.setData({
+          resetRichText: true
+        })
+      }
       const parent = node.parent
       // 获取当前节点所在位置
       const index = getNodeDataIndex(node)
@@ -1034,7 +1057,7 @@ class Render {
       }
     })
     // 如果是富文本，那么还要处理富文本内容
-    if (hasCustomStyles && this.mindMap.richText) {
+    if (hasCustomStyles && this.hasRichTextPlugin()) {
       nodeData.resetRichText = true
       nodeData.text = removeRichTextStyes(nodeData.text)
     }
@@ -1104,20 +1127,45 @@ class Render {
     })
   }
 
+  // 非https下复制黏贴，获取内容方法
+  handlePaste(event) {
+    const { disabledClipboard } = this.mindMap.opt
+    if (disabledClipboard) return
+    const clipboardData =
+      event.clipboardData || event.originalEvent.clipboardData
+    const items = clipboardData.items
+    let img = null
+    let text = ''
+    Array.from(items).forEach(item => {
+      if (item.type.indexOf('image') > -1) {
+        img = item.getAsFile()
+      }
+      if (item.type.indexOf('text') > -1) {
+        text = clipboardData.getData('text')
+      }
+    })
+    this.pasteData.img = img
+    this.pasteData.text = text
+    this.paste()
+  }
+
   // 粘贴
   async paste() {
     const {
       errorHandler,
       handleIsSplitByWrapOnPasteCreateNewNode,
       handleNodePasteImg,
-      disabledClipboard
+      disabledClipboard,
+      onlyPasteTextWhenHasImgAndText
     } = this.mindMap.opt
     // 读取剪贴板的文字和图片
     let text = ''
     let img = null
     if (!disabledClipboard) {
       try {
-        const res = await getDataFromClipboard()
+        const res = navigator.clipboard
+          ? await getDataFromClipboard()
+          : this.pasteData
         text = res.text || ''
         img = res.img || null
       } catch (error) {
@@ -1213,7 +1261,7 @@ class Render {
         }
       }
       // 存在图片，则添加到当前激活节点
-      if (img) {
+      if (img && (!text || !onlyPasteTextWhenHasImgAndText)) {
         try {
           let imgData = null
           // 自定义图片处理函数
@@ -1293,7 +1341,7 @@ class Render {
 
   // 如果是富文本模式，那么某些层级变化需要更新样式
   checkNodeLayerChange(node, toNode, toNodeIsParent = false) {
-    if (this.mindMap.richText) {
+    if (this.hasRichTextPlugin()) {
       // 如果设置了自定义样式那么不需要更新
       if (this.mindMap.richText.checkNodeHasCustomRichTextStyle(node)) {
         return
@@ -1520,7 +1568,7 @@ class Render {
           const newData = simpleDeepClone(item)
           createUidForAppointNodes([newData], true, node => {
             // 可能跨层级复制，那么富文本样式需要更新
-            if (this.mindMap.richText) {
+            if (this.hasRichTextPlugin()) {
               // 如果设置了自定义样式那么不需要更新
               if (
                 this.mindMap.richText.checkNodeHasCustomRichTextStyle(node.data)
@@ -1543,7 +1591,7 @@ class Render {
       [prop]: value
     }
     // 如果开启了富文本，则需要应用到富文本上
-    if (this.mindMap.richText) {
+    if (this.hasRichTextPlugin()) {
       this.mindMap.richText.setNotActiveNodeStyle(node, {
         [prop]: value
       })
@@ -1559,7 +1607,7 @@ class Render {
   setNodeStyles(node, style) {
     let data = { ...style }
     // 如果开启了富文本，则需要应用到富文本上
-    if (this.mindMap.richText) {
+    if (this.hasRichTextPlugin()) {
       this.mindMap.richText.setNotActiveNodeStyle(node, style)
     }
     this.setNodeDataRender(node, data)
@@ -1593,40 +1641,53 @@ class Render {
   }
 
   //  展开所有
-  expandAllNode() {
+  expandAllNode(uid = '') {
     if (!this.renderTree) return
-    walk(
-      this.renderTree,
-      null,
-      node => {
-        if (!node.data.expand) {
-          node.data.expand = true
-        }
-      },
-      null,
-      true,
-      0,
-      0
-    )
+
+    const _walk = (node, enableExpand) => {
+      // 如果该节点为目标节点，那么修改允许展开的标志
+      if (!enableExpand && node.data.uid === uid) {
+        enableExpand = true
+      }
+      if (enableExpand && !node.data.expand) {
+        node.data.expand = true
+      }
+      if (node.children && node.children.length > 0) {
+        node.children.forEach(child => {
+          _walk(child, enableExpand)
+        })
+      }
+    }
+    _walk(this.renderTree, !uid)
+
     this.mindMap.render()
   }
 
   //  收起所有
-  unexpandAllNode(isSetRootNodeCenter = true) {
+  unexpandAllNode(isSetRootNodeCenter = true, uid = '') {
     if (!this.renderTree) return
-    walk(
-      this.renderTree,
-      null,
-      (node, parent, isRoot) => {
-        if (!isRoot && node.children && node.children.length > 0) {
-          node.data.expand = false
-        }
-      },
-      null,
-      true,
-      0,
-      0
-    )
+
+    const _walk = (node, isRoot, enableUnExpand) => {
+      // 如果该节点为目标节点，那么修改允许展开的标志
+      if (!enableUnExpand && node.data.uid === uid) {
+        enableUnExpand = true
+      }
+      if (
+        enableUnExpand &&
+        !isRoot &&
+        node.children &&
+        node.children.length > 0
+      ) {
+        node.data.expand = false
+      }
+      if (node.children && node.children.length > 0) {
+        node.children.forEach(child => {
+          _walk(child, false, enableUnExpand)
+        })
+      }
+    }
+    _walk(this.renderTree, true, !uid)
+
     this.mindMap.render(() => {
       if (isSetRootNodeCenter) {
         this.setRootNodeCenter()
@@ -1741,7 +1802,7 @@ class Render {
   // 设置节点公式
   insertFormula(formula, appointNodes = []) {
     // 只在富文本模式下可用，并且需要注册Formula插件
-    if (!this.mindMap.richText || !this.mindMap.formula) return
+    if (!this.hasRichTextPlugin() || !this.mindMap.formula) return
     appointNodes = formatDataToArray(appointNodes)
     const list = appointNodes.length > 0 ? appointNodes : this.activeNodeList
     list.forEach(node => {
@@ -1763,7 +1824,7 @@ class Render {
     })
     const list = parseAddGeneralizationNodeList(nodeList)
     if (list.length <= 0) return
-    const isRichText = !!this.mindMap.richText
+    const isRichText = this.hasRichTextPlugin()
     const { focusNewNode, inserting } = this.getNewNodeBehavior(
       openEdit,
       list.length > 1
@@ -1778,9 +1839,9 @@ class Render {
         range: item.range || null,
         uid: createUid(),
         richText: isRichText,
-        resetRichText: isRichText,
         isActive: focusNewNode
       }
+      if (isRichText) newData.resetRichText = isRichText
       let generalization = item.node.getData('generalization')
       generalization = generalization
         ? Array.isArray(generalization)
@@ -2035,19 +2096,39 @@ class Render {
   }
 
   // 高亮节点或子节点
-  highlightNode(node, range) {
+  highlightNode(node, range, style) {
     // 如果当前正在渲染，那么不进行高亮，因为节点位置可能不正确
     if (this.isRendering) return
-    const { highlightNodeBoxStyle = {} } = this.mindMap.opt
+    style = {
+      stroke: 'rgb(94, 200, 248)',
+      fill: 'transparent',
+      ...(style || {})
+    }
+    // 尚未创建
     if (!this.highlightBoxNode) {
       this.highlightBoxNode = new Polygon()
         .stroke({
-          color: highlightNodeBoxStyle.stroke || 'transparent'
+          color: style.stroke || 'transparent'
         })
         .fill({
-          color: highlightNodeBoxStyle.fill || 'transparent'
+          color: style.fill || 'transparent'
         })
+    } else if (this.highlightBoxNodeStyle) {
+      // 样式更新了
+      if (
+        this.highlightBoxNodeStyle.stroke !== style.stroke ||
+        this.highlightBoxNodeStyle.fill !== style.fill
+      ) {
+        this.highlightBoxNode
+          .stroke({
+            color: style.stroke || 'transparent'
+          })
+          .fill({
+            color: style.fill || 'transparent'
+          })
+      }
     }
+    this.highlightBoxNodeStyle = { ...style }
     let minx = Infinity,
       miny = Infinity,
       maxx = -Infinity,
@@ -2090,6 +2171,11 @@ class Render {
     if (!this.highlightBoxNode) return
     this.highlightBoxNode.remove()
   }
+
+  // 是否存在富文本插件
+  hasRichTextPlugin() {
+    return !!this.mindMap.richText
+  }
 }
 
 export default Render

simple-mind-map/src/core/render/TextEdit.js

@@ -25,6 +25,8 @@ export default class TextEdit {
     // 如果编辑过程中缩放画布了，那么缓存当前编辑的内容
     this.cacheEditingText = ''
     this.hasBodyMousedown = false
+    this.textNodePaddingX = 5
+    this.textNodePaddingY = 3
     this.bindEvent()
   }
 
@@ -214,7 +216,8 @@ export default class TextEdit {
     this.registerTmpShortcut()
     if (!this.textEditNode) {
       this.textEditNode = document.createElement('div')
-      this.textEditNode.style.cssText = `position:fixed;box-sizing: border-box;background-color:#fff;box-shadow: 0 0 20px rgba(0,0,0,.5);padding: 3px 5px;margin-left: -5px;margin-top: -3px;outline: none; word-break: break-all;`
+      this.textEditNode.classList.add('smm-node-edit-wrap')
+      this.textEditNode.style.cssText = `position:fixed;box-sizing: border-box;background-color:#fff;box-shadow: 0 0 20px rgba(0,0,0,.5);padding: ${this.textNodePaddingY}px ${this.textNodePaddingX}px;margin-left: -5px;margin-top: -3px;outline: none; word-break: break-all;`
       this.textEditNode.setAttribute('contenteditable', true)
       this.textEditNode.addEventListener('keyup', e => {
         e.stopPropagation()
@@ -240,6 +243,13 @@ export default class TextEdit {
           handleInputPasteText(e)
         }
       })
+      this.textEditNode.addEventListener('input', () => {
+        this.mindMap.emit('node_text_edit_change', {
+          node: this.currentNode,
+          text: this.getEditText(),
+          richText: false
+        })
+      })
       const targetNode =
         this.mindMap.opt.customInnerElsAppendTo || document.body
       targetNode.appendChild(this.textEditNode)
@@ -256,8 +266,10 @@ export default class TextEdit {
     node.style.domText(this.textEditNode, scale, isMultiLine)
     this.textEditNode.style.zIndex = nodeTextEditZIndex
     this.textEditNode.innerHTML = textLines.join('<br>')
-    this.textEditNode.style.minWidth = rect.width + 10 + 'px'
-    this.textEditNode.style.minHeight = rect.height + 6 + 'px'
+    this.textEditNode.style.minWidth =
+      rect.width + this.textNodePaddingX * 2 + 'px'
+    this.textEditNode.style.minHeight =
+      rect.height + this.textNodePaddingY * 2 + 'px'
     this.textEditNode.style.left = rect.left + 'px'
     this.textEditNode.style.top = rect.top + 'px'
     this.textEditNode.style.display = 'block'
@@ -280,6 +292,24 @@ export default class TextEdit {
     this.cacheEditingText = ''
   }
 
+  // 更新文本编辑框的大小和位置
+  updateTextEditNode() {
+    if (this.mindMap.richText) {
+      this.mindMap.richText.updateTextEditNode()
+      return
+    }
+    if (!this.showTextEdit || !this.currentNode) {
+      return
+    }
+    const rect = this.currentNode._textData.node.node.getBoundingClientRect()
+    this.textEditNode.style.minWidth =
+      rect.width + this.textNodePaddingX * 2 + 'px'
+    this.textEditNode.style.minHeight =
+      rect.height + this.textNodePaddingY * 2 + 'px'
+    this.textEditNode.style.left = rect.left + 'px'
+    this.textEditNode.style.top = rect.top + 'px'
+  }
+
   // 删除文本编辑元素
   removeTextEditEl() {
     if (this.mindMap.richText) {
@@ -304,21 +334,17 @@ export default class TextEdit {
     if (!this.showTextEdit) {
       return
     }
-    this.renderer.activeNodeList.forEach(node => {
-      let str = this.getEditText()
-      this.mindMap.execCommand('SET_NODE_TEXT', node, str)
-      if (node.isGeneralization) {
-        // 概要节点
-        node.generalizationBelongNode.updateGeneralization()
-      }
-      this.mindMap.render()
-    })
-    this.mindMap.emit(
-      'hide_text_edit',
-      this.textEditNode,
-      this.renderer.activeNodeList,
-      this.currentNode
+    this.mindMap.execCommand(
+      'SET_NODE_TEXT',
+      this.currentNode,
+      this.getEditText()
     )
+    if (this.currentNode.isGeneralization) {
+      // 概要节点
+      this.currentNode.generalizationBelongNode.updateGeneralization()
+    }
+    this.mindMap.render()
+    const currentNode = this.currentNode
     this.currentNode = null
     this.textEditNode.style.display = 'none'
     this.textEditNode.innerHTML = ''
@@ -327,6 +353,12 @@ export default class TextEdit {
     this.textEditNode.style.fontWeight = 'normal'
     this.textEditNode.style.transform = 'translateY(0)'
     this.showTextEdit = false
+    this.mindMap.emit(
+      'hide_text_edit',
+      this.textEditNode,
+      this.renderer.activeNodeList,
+      currentNode
+    )
   }
 
   // 获取当前正在编辑中的节点实例

simple-mind-map/src/core/render/node/MindMapNode.js

@@ -6,6 +6,7 @@ import nodeExpandBtnMethods from './nodeExpandBtn'
 import nodeCommandWrapsMethods from './nodeCommandWraps'
 import nodeCreateContentsMethods from './nodeCreateContents'
 import nodeExpandBtnPlaceholderRectMethods from './nodeExpandBtnPlaceholderRect'
+import nodeModifyWidthMethods from './nodeModifyWidth'
 import nodeCooperateMethods from './nodeCooperate'
 import { CONSTANTS } from '../../../constants/constant'
 import {
@@ -22,6 +23,8 @@ class MindMapNode {
     this.opt = opt
     // 节点数据
     this.nodeData = this.handleData(opt.data || {})
+    // 保存本次更新时的节点数据快照
+    this.nodeDataSnapshot = ''
     // uid
     this.uid = opt.uid
     // 控制实例
@@ -34,6 +37,8 @@ class MindMapNode {
     this.lineDraw = this.mindMap.lineDraw
     // 样式实例
     this.style = new Style(this)
+    // 节点当前生效的全部样式
+    this.effectiveStyles = {}
     // 形状实例
     this.shapeInstance = new Shape(this)
     this.shapePadding = {
@@ -52,6 +57,8 @@ class MindMapNode {
     this.width = opt.width || 0
     // 节点高
     this.height = opt.height || 0
+    // 自定义文本的宽度
+    this.customTextWidth = opt.data.data.customTextWidth || undefined
     // left
     this._left = opt.left || 0
     // top
@@ -148,10 +155,15 @@ class MindMapNode {
           proto[item] = nodeCooperateMethods[item]
         })
       }
+      // 拖拽调整节点宽度
+      Object.keys(nodeModifyWidthMethods).forEach(item => {
+        proto[item] = nodeModifyWidthMethods[item]
+      })
       proto.bindEvent = true
     }
     // 初始化
     this.getSize()
+    this.initDragHandle()
   }
 
   // 支持自定义位置
@@ -195,7 +207,8 @@ class MindMapNode {
   }
 
   //  创建节点的各个内容对象数据
-  createNodeData() {
+  // recreateTypes：[] custom、image、icon、text、hyperlink、tag、note、attachment、numbers、prefix、postfix
+  createNodeData(recreateTypes) {
     // 自定义节点内容
     let {
       isUseCustomNodeContent,
@@ -203,7 +216,39 @@ class MindMapNode {
       createNodePrefixContent,
       createNodePostfixContent
     } = this.mindMap.opt
-    if (isUseCustomNodeContent && customCreateNodeContent) {
+    // 需要创建的内容类型
+    const typeList = [
+      'custom',
+      'image',
+      'icon',
+      'text',
+      'hyperlink',
+      'tag',
+      'note',
+      'attachment',
+      'numbers',
+      'prefix',
+      'postfix'
+    ]
+    const createTypes = {}
+    if (Array.isArray(recreateTypes)) {
+      // 重新创建指定的内容类型
+      typeList.forEach(item => {
+        if (recreateTypes.includes(item)) {
+          createTypes[item] = true
+        }
+      })
+    } else {
+      // 创建所有类型
+      typeList.forEach(item => {
+        createTypes[item] = true
+      })
+    }
+    if (
+      isUseCustomNodeContent &&
+      customCreateNodeContent &&
+      createTypes.custom
+    ) {
       this._customNodeContent = customCreateNodeContent(this)
     }
     // 如果没有返回内容，那么还是使用内置的节点内容
@@ -211,37 +256,42 @@ class MindMapNode {
       addXmlns(this._customNodeContent)
       return
     }
-    this._imgData = this.createImgNode()
-    this._iconData = this.createIconNode()
-    this._textData = this.createTextNode()
-    this._hyperlinkData = this.createHyperlinkNode()
-    this._tagData = this.createTagNode()
-    this._noteData = this.createNoteNode()
-    this._attachmentData = this.createAttachmentNode()
-    if (this.mindMap.numbers) {
+    if (createTypes.image) this._imgData = this.createImgNode()
+    if (createTypes.icon) this._iconData = this.createIconNode()
+    if (createTypes.text) this._textData = this.createTextNode()
+    if (createTypes.hyperlink) this._hyperlinkData = this.createHyperlinkNode()
+    if (createTypes.tag) this._tagData = this.createTagNode()
+    if (createTypes.note) this._noteData = this.createNoteNode()
+    if (createTypes.attachment)
+      this._attachmentData = this.createAttachmentNode()
+    if (this.mindMap.numbers && createTypes.numbers) {
       this._numberData = this.mindMap.numbers.createNumberContent(this)
     }
-    this._prefixData = createNodePrefixContent
-      ? createNodePrefixContent(this)
-      : null
-    if (this._prefixData && this._prefixData.el) {
-      addXmlns(this._prefixData.el)
+    if (createTypes.prefix) {
+      this._prefixData = createNodePrefixContent
+        ? createNodePrefixContent(this)
+        : null
+      if (this._prefixData && this._prefixData.el) {
+        addXmlns(this._prefixData.el)
+      }
     }
-    this._postfixData = createNodePostfixContent
-      ? createNodePostfixContent(this)
-      : null
-    if (this._postfixData && this._postfixData.el) {
-      addXmlns(this._postfixData.el)
+    if (createTypes.postfix) {
+      this._postfixData = createNodePostfixContent
+        ? createNodePostfixContent(this)
+        : null
+      if (this._postfixData && this._postfixData.el) {
+        addXmlns(this._postfixData.el)
+      }
     }
   }
 
   //  计算节点的宽高
-  getSize() {
+  getSize(recreateTypes) {
     this.customLeft = this.getData('customLeft') || undefined
     this.customTop = this.getData('customTop') || undefined
     // 这里不要更新概要，不然即使概要没修改，每次也会重新渲染
     // this.updateGeneralization()
-    this.createNodeData()
+    this.createNodeData(recreateTypes)
     let { width, height } = this.getNodeRect()
     // 判断节点尺寸是否有变化
     let changed = this.width !== width || this.height !== height
@@ -256,7 +306,7 @@ class MindMapNode {
     if (this.isUseCustomNodeContent()) {
       let rect = this.measureCustomNodeContentSize(this._customNodeContent)
       return {
-        width: rect.width,
+        width: this.hasCustomWidth() ? this.customTextWidth : rect.width,
         height: rect.height
       }
     }
@@ -580,12 +630,15 @@ class MindMapNode {
       this.active(e)
     })
     this.group.on('mousedown', e => {
-      e.preventDefault()
       const {
         readonly,
         enableCtrlKeyNodeSelection,
-        useLeftKeySelectionRightKeyDrag
+        useLeftKeySelectionRightKeyDrag,
+        mousedownEventPreventDefault
       } = this.mindMap.opt
+      if (mousedownEventPreventDefault) {
+        e.preventDefault()
+      }
       // 只读模式不需要阻止冒泡
       if (!readonly) {
         if (this.isRoot) {
@@ -733,15 +786,20 @@ class MindMapNode {
         }
       }
     }
+    // 更新拖拽手柄的显示与否
+    this.updateDragHandle()
     // 更新概要
     this.renderGeneralization(forceRender)
     // 更新协同头像
     if (this.updateUserListNode) this.updateUserListNode()
     // 更新节点位置
     let t = this.group.transform()
-    // 如果节点位置没有变化，则返回
-    if (this.left === t.translateX && this.top === t.translateY) return
-    this.group.translate(this.left - t.translateX, this.top - t.translateY)
+    // 保存一份当前节点数据快照
+    this.nodeDataSnapshot = JSON.stringify(this.getData())
+    // 节点位置变化才更新，因为即使值没有变化属性设置操作也是耗时的
+    if (this.left !== t.translateX || this.top !== t.translateY) {
+      this.group.translate(this.left - t.translateX, this.top - t.translateY)
+    }
   }
 
   // 获取节点相当于画布的位置
@@ -768,8 +826,8 @@ class MindMapNode {
   }
 
   // 重新渲染节点，即重新创建节点内容、计算节点大小、计算节点内容布局、更新展开收起按钮，概要及位置
-  reRender() {
-    let sizeChange = this.getSize()
+  reRender(recreateTypes) {
+    let sizeChange = this.getSize(recreateTypes)
     this.layout()
     this.update()
     return sizeChange
@@ -792,6 +850,7 @@ class MindMapNode {
         this.hideExpandBtn()
       }
       this.updateNodeActiveClass()
+      this.updateDragHandle()
     }
   }
 
@@ -915,7 +974,7 @@ class MindMapNode {
 
   //  隐藏节点
   hide() {
-    this.group.hide()
+    if (this.group) this.group.hide()
     this.hideGeneralization()
     if (this.parent) {
       let index = this.parent.children.indexOf(this)
@@ -958,7 +1017,7 @@ class MindMapNode {
   // 包括连接线和下级节点
   setOpacity(val) {
     // 自身及连线
-    this.group.opacity(val)
+    if (this.group) this.group.opacity(val)
     this._lines.forEach(line => {
       line.opacity(val)
     })
@@ -997,13 +1056,13 @@ class MindMapNode {
   // 被拖拽中
   startDrag() {
     this.isDrag = true
-    this.group.addClass('smm-node-dragging')
+    if (this.group) this.group.addClass('smm-node-dragging')
   }
 
   // 拖拽结束
   endDrag() {
     this.isDrag = false
-    this.group.removeClass('smm-node-dragging')
+    if (this.group) this.group.removeClass('smm-node-dragging')
   }
 
   //  连线
@@ -1178,10 +1237,9 @@ class MindMapNode {
 
   //  获取padding值
   getPaddingVale() {
-    let { isActive } = this.getData()
     return {
-      paddingX: this.getStyle('paddingX', true, isActive),
-      paddingY: this.getStyle('paddingY', true, isActive)
+      paddingX: this.getStyle('paddingX'),
+      paddingY: this.getStyle('paddingY')
     }
   }
 
@@ -1247,7 +1305,7 @@ class MindMapNode {
 
   // 获取节点的尺寸和位置信息，宽高是应用了缩放效果后的实际宽高，位置是相对于浏览器窗口左上角的位置
   getRect() {
-    return this.group.rbox()
+    return this.group ? this.group.rbox() : null
   }
 
   // 获取节点的尺寸和位置信息，宽高是应用了缩放效果后的实际宽高，位置信息相对于画布
@@ -1296,6 +1354,30 @@ class MindMapNode {
   createSvgTextNode(text = '') {
     return new Text().text(text)
   }
+
+  // 检查是否支持拖拽调整宽度
+  // 1.富文本模式
+  // 2.自定义节点内容
+  checkEnableDragModifyNodeWidth() {
+    const {
+      enableDragModifyNodeWidth,
+      isUseCustomNodeContent,
+      customCreateNodeContent
+    } = this.mindMap.opt
+    return (
+      enableDragModifyNodeWidth &&
+      (this.mindMap.richText ||
+        (isUseCustomNodeContent && customCreateNodeContent))
+    )
+  }
+
+  // 是否存在自定义宽度
+  hasCustomWidth() {
+    return (
+      this.checkEnableDragModifyNodeWidth() &&
+      this.customTextWidth !== undefined
+    )
+  }
 }
 
 export default MindMapNode

simple-mind-map/src/core/render/node/Style.js

@@ -1,6 +1,5 @@
 import { checkIsNodeStyleDataKey } from '../../../utils/index'
 
-const rootProp = ['paddingX', 'paddingY']
 const backgroundStyleProps = [
   'backgroundColor',
   'backgroundImage',
@@ -62,10 +61,11 @@ class Style {
   //  合并样式
   merge(prop, root) {
     let themeConfig = this.ctx.mindMap.themeConfig
-    // 三级及以下节点
-    let defaultConfig = themeConfig.node
-    if (root || rootProp.includes(prop)) {
-      // 直接使用最外层样式
+    let defaultConfig = null
+    let useRoot = false
+    if (root) {
+      // 使用最外层样式
+      useRoot = true
       defaultConfig = themeConfig
     } else if (this.ctx.isGeneralization) {
       // 概要节点
@@ -76,11 +76,27 @@ class Style {
     } else if (this.ctx.layerIndex === 1) {
       // 二级节点
       defaultConfig = themeConfig.second
+    } else {
+      // 三级及以下节点
+      defaultConfig = themeConfig.node
     }
+    let value = ''
     // 优先使用节点本身的样式
-    return this.getSelfStyle(prop) !== undefined
-      ? this.getSelfStyle(prop)
-      : defaultConfig[prop]
+    if (this.getSelfStyle(prop) !== undefined) {
+      value = this.getSelfStyle(prop)
+    } else if (defaultConfig[prop] !== undefined) {
+      // 否则使用对应层级的样式
+      value = defaultConfig[prop]
+    } else {
+      // 否则使用最外层样式
+      value = themeConfig[prop]
+    }
+    if (!useRoot) {
+      this.addToEffectiveStyles({
+        [prop]: value
+      })
+    }
+    return value
   }
 
   //  获取某个样式值
@@ -93,6 +109,14 @@ class Style {
     return this.ctx.getData(prop)
   }
 
+  // 更新当前节点生效的样式数据
+  addToEffectiveStyles(styles) {
+    this.ctx.effectiveStyles = {
+      ...this.ctx.effectiveStyles,
+      ...styles
+    }
+  }
+
   //  矩形
   rect(node) {
     this.shape(node)
@@ -101,18 +125,30 @@ class Style {
 
   // 形状
   shape(node) {
-    if (this.merge('gradientStyle')) {
+    const styles = {
+      gradientStyle: this.merge('gradientStyle'),
+      startColor: this.merge('startColor'),
+      endColor: this.merge('endColor'),
+      startDir: this.merge('startDir'),
+      endDir: this.merge('endDir'),
+      fillColor: this.merge('fillColor'),
+      borderColor: this.merge('borderColor'),
+      borderWidth: this.merge('borderWidth'),
+      borderDasharray: this.merge('borderDasharray')
+    }
+    if (styles.gradientStyle) {
       if (!this._gradient) {
         this._gradient = this.ctx.nodeDraw.gradient('linear')
       }
       this._gradient.update(add => {
-        add.stop(0, this.merge('startColor'))
-        add.stop(1, this.merge('endColor'))
+        add.stop(0, styles.startColor)
+        add.stop(1, styles.endColor)
       })
+      this._gradient.from(...styles.startDir).to(...styles.endDir)
       node.fill(this._gradient)
     } else {
       node.fill({
-        color: this.merge('fillColor')
+        color: styles.fillColor
       })
     }
     // 节点使用横线样式，不需要渲染非激活状态的边框样式
@@ -125,56 +161,89 @@ class Style {
     //   return
     // }
     node.stroke({
-      color: this.merge('borderColor'),
-      width: this.merge('borderWidth'),
-      dasharray: this.merge('borderDasharray')
+      color: styles.borderColor,
+      width: styles.borderWidth,
+      dasharray: styles.borderDasharray
     })
   }
 
   //  文字
   text(node) {
+    const styles = {
+      color: this.merge('color'),
+      fontFamily: this.merge('fontFamily'),
+      fontSize: this.merge('fontSize'),
+      fontWeight: this.merge('fontWeight'),
+      fontStyle: this.merge('fontStyle'),
+      textDecoration: this.merge('textDecoration')
+    }
     node
       .fill({
-        color: this.merge('color')
+        color: styles.color
       })
       .css({
-        'font-family': this.merge('fontFamily'),
-        'font-size': this.merge('fontSize'),
-        'font-weight': this.merge('fontWeight'),
-        'font-style': this.merge('fontStyle'),
-        'text-decoration': this.merge('textDecoration')
+        'font-family': styles.fontFamily,
+        'font-size': styles.fontSize,
+        'font-weight': styles.fontWeight,
+        'font-style': styles.fontStyle,
+        'text-decoration': styles.textDecoration
       })
   }
 
   // 生成内联样式
   createStyleText() {
+    const styles = {
+      color: this.merge('color'),
+      fontFamily: this.merge('fontFamily'),
+      fontSize: this.merge('fontSize'),
+      fontWeight: this.merge('fontWeight'),
+      fontStyle: this.merge('fontStyle'),
+      textDecoration: this.merge('textDecoration')
+    }
     return `
-      color: ${this.merge('color')};
-      font-family: ${this.merge('fontFamily')};
-      font-size: ${this.merge('fontSize') + 'px'};
-      font-weight: ${this.merge('fontWeight')};
-      font-style: ${this.merge('fontStyle')};
-      text-decoration: ${this.merge('textDecoration')}
+      color: ${styles.color};
+      font-family: ${styles.fontFamily};
+      font-size: ${styles.fontSize + 'px'};
+      font-weight: ${styles.fontWeight};
+      font-style: ${styles.fontStyle};
+      text-decoration: ${styles.textDecoration}
     `
   }
 
   // 获取文本样式
   getTextFontStyle() {
-    return {
-      italic: this.merge('fontStyle') === 'italic',
-      bold: this.merge('fontWeight'),
+    const styles = {
+      color: this.merge('color'),
+      fontFamily: this.merge('fontFamily'),
       fontSize: this.merge('fontSize'),
-      fontFamily: this.merge('fontFamily')
+      fontWeight: this.merge('fontWeight'),
+      fontStyle: this.merge('fontStyle'),
+      textDecoration: this.merge('textDecoration')
+    }
+    return {
+      italic: styles.fontStyle === 'italic',
+      bold: styles.fontWeight,
+      fontSize: styles.fontSize,
+      fontFamily: styles.fontFamily
     }
   }
 
   //  html文字节点
   domText(node, fontSizeScale = 1, isMultiLine) {
-    node.style.fontFamily = this.merge('fontFamily')
-    node.style.fontSize = this.merge('fontSize') * fontSizeScale + 'px'
-    node.style.fontWeight = this.merge('fontWeight') || 'normal'
-    node.style.lineHeight = !isMultiLine ? 'normal' : this.merge('lineHeight')
-    node.style.fontStyle = this.merge('fontStyle')
+    const styles = {
+      color: this.merge('color'),
+      fontFamily: this.merge('fontFamily'),
+      fontSize: this.merge('fontSize'),
+      fontWeight: this.merge('fontWeight'),
+      fontStyle: this.merge('fontStyle'),
+      textDecoration: this.merge('textDecoration'),
+      lineHeight: this.merge('lineHeight')
+    }
+    node.style.fontFamily = styles.fontFamily
+    node.style.fontSize = styles.fontSize * fontSizeScale + 'px'
+    node.style.fontWeight = styles.fontWeight || 'normal'
+    node.style.lineHeight = !isMultiLine ? 'normal' : styles.lineHeight
+    node.style.fontStyle = styles.fontStyle
   }
 
   //  标签文字
@@ -286,8 +355,10 @@ class Style {
 
   // hover和激活节点
   hoverNode(node) {
-    const { hoverRectColor } = this.ctx.mindMap.opt
-    node.radius(5).fill('none').stroke({
+    const hoverRectColor =
+      this.merge('hoverRectColor') || this.ctx.mindMap.opt.hoverRectColor
+    const hoverRectRadius = this.merge('hoverRectRadius')
+    node.radius(hoverRectRadius).fill('none').stroke({
       color: hoverRectColor
     })
   }

simple-mind-map/src/core/render/node/nodeCreateContents.js

@@ -114,8 +114,12 @@ function createIconNode() {
 }
 
 // 创建富文本节点
-function createRichTextNode() {
-  const { textAutoWrapWidth } = this.mindMap.opt
+function createRichTextNode(specifyText) {
+  const hasCustomWidth = this.hasCustomWidth()
+  let text =
+    typeof specifyText === 'string' ? specifyText : this.getData('text')
+  let { textAutoWrapWidth, emptyTextMeasureHeightText } = this.mindMap.opt
+  textAutoWrapWidth = hasCustomWidth ? this.customTextWidth : textAutoWrapWidth
   let g = new G()
   // 重新设置富文本节点内容
   let recoverText = false
@@ -129,7 +133,6 @@ function createRichTextNode() {
       recoverText = true
     }
   }
-  let text = this.getData('text')
   if (recoverText && !isUndef(text)) {
     // 判断节点内容是否是富文本
     let isRichText = checkIsRichText(text)
@@ -153,7 +156,7 @@ function createRichTextNode() {
       text: text
     })
   }
-  let html = `<div>${this.getData('text')}</div>`
+  let html = `<div>${text}</div>`
   if (!this.mindMap.commonCaches.measureRichtextNodeTextSizeEl) {
     this.mindMap.commonCaches.measureRichtextNodeTextSizeEl =
       document.createElement('div')
@@ -171,10 +174,15 @@ function createRichTextNode() {
   el.classList.add('smm-richtext-node-wrap')
   addXmlns(el)
   el.style.maxWidth = textAutoWrapWidth + 'px'
+  if (hasCustomWidth) {
+    el.style.width = this.customTextWidth + 'px'
+  } else {
+    el.style.width = ''
+  }
   let { width, height } = el.getBoundingClientRect()
   // 如果文本为空，那么需要计算一个默认高度
   if (height <= 0) {
-    div.innerHTML = '<p>abc123我和你</p>'
+    div.innerHTML = `<p>${emptyTextMeasureHeightText}</p>`
     let elTmp = div.children[0]
     elTmp.classList.add('smm-richtext-node-wrap')
     height = elTmp.getBoundingClientRect().height
@@ -199,10 +207,12 @@ function createRichTextNode() {
 }
 
 //  创建文本节点
-function createTextNode() {
+function createTextNode(specifyText) {
   if (this.getData('richText')) {
-    return this.createRichTextNode()
+    return this.createRichTextNode(specifyText)
   }
+  const text =
+    typeof specifyText === 'string' ? specifyText : this.getData('text')
   if (this.getData('resetRichText')) {
     delete this.nodeData.data.resetRichText
   }
@@ -212,10 +222,11 @@ function createTextNode() {
   // 文本超长自动换行
   let textStyle = this.style.getTextFontStyle()
   let textArr = []
-  if (!isUndef(this.getData('text'))) {
-    textArr = String(this.getData('text')).split(/\n/gim)
+  if (!isUndef(text)) {
+    textArr = String(text).split(/\n/gim)
   }
-  let maxWidth = this.mindMap.opt.textAutoWrapWidth
+  const { textAutoWrapWidth: maxWidth, emptyTextMeasureHeightText } =
+    this.mindMap.opt
   let isMultiLine = false
   textArr.forEach((item, index) => {
     let arr = item.split('')
@@ -247,6 +258,13 @@ function createTextNode() {
     g.add(node)
   })
   let { width, height } = g.bbox()
+  // 如果文本为空，那么需要计算一个默认高度
+  if (height <= 0) {
+    const tmpNode = new Text().text(emptyTextMeasureHeightText)
+    this.style.text(tmpNode)
+    const tmpBbox = tmpNode.bbox()
+    height = tmpBbox.height
+  }
   width = Math.min(Math.ceil(width), maxWidth)
   height = Math.ceil(height)
   g.attr('data-width', width)

simple-mind-map/src/core/render/node/nodeExpandBtn.js

@@ -1,5 +1,6 @@
 import btnsSvg from '../../../svg/btns'
 import { SVG, Circle, G, Text } from '@svgdotjs/svg.js'
+import { isUndef } from '../../../utils'
 
 // 创建展开收起按钮的内容节点
 function createExpandNodeContent() {
@@ -78,7 +79,12 @@ function updateExpandBtnNode() {
         })
         // 计算子节点数量
         let count = this.sumNode(this.nodeData.children)
-        count = expandBtnNumHandler(count)
+        if (typeof expandBtnNumHandler === 'function') {
+          const res = expandBtnNumHandler(count, this)
+          if (!isUndef(res)) {
+            count = res
+          }
+        }
         node.text(String(count))
       } else {
         this._fillExpandNode.stroke('none')

simple-mind-map/src/core/render/node/nodeGeneralization.js

@@ -186,15 +186,29 @@ function handleGeneralizationMouseenter() {
   const list = belongNode.formatGetGeneralization()
   const index = belongNode.getGeneralizationNodeIndex(this)
   const generalizationData = list[index]
+  // 如果主题中设置了hoverRectColor颜色，那么使用该颜色
+  // 否则使用hoverRectColor实例化选项的颜色
+  // 兜底使用highlightNode方法的默认颜色
+  const hoverRectColor = this.getStyle('hoverRectColor')
+  const color = hoverRectColor || this.mindMap.opt.hoverRectColor
+  const style = color
+    ? {
+        stroke: color
+      }
+    : null
   // 区间概要，框子节点
   if (
     Array.isArray(generalizationData.range) &&
     generalizationData.range.length > 0
   ) {
-    this.mindMap.renderer.highlightNode(belongNode, generalizationData.range)
+    this.mindMap.renderer.highlightNode(
+      belongNode,
+      generalizationData.range,
+      style
+    )
   } else {
     // 否则框自己
-    this.mindMap.renderer.highlightNode(belongNode)
+    this.mindMap.renderer.highlightNode(belongNode, null, style)
   }
 }
 

simple-mind-map/src/core/render/node/nodeModifyWidth.js

@@ -0,0 +1,151 @@
+import { Rect } from '@svgdotjs/svg.js'
+
+// 初始化拖拽
+function initDragHandle() {
+  if (!this.checkEnableDragModifyNodeWidth()) {
+    return
+  }
+  // 拖拽手柄元素
+  this._dragHandleNodes = null
+  // 手柄元素的宽度
+  this.dragHandleWidth = 2
+  // 鼠标按下时的x坐标
+  this.dragHandleMousedownX = 0
+  // 鼠标是否处于按下状态
+  this.isDragHandleMousedown = false
+  // 当前拖拽的手柄序号
+  this.dragHandleIndex = 0
+  // 鼠标按下时记录当前的customTextWidth值
+  this.dragHandleMousedownCustomTextWidth = 0
+  // 鼠标按下时记录当前的手型样式
+  this.dragHandleMousedownBodyCursor = ''
+  // 鼠标按下时记录当前节点的left值
+  this.dragHandleMousedownLeft = 0
+
+  this.onDragMousemoveHandle = this.onDragMousemoveHandle.bind(this)
+  window.addEventListener('mousemove', this.onDragMousemoveHandle)
+  this.onDragMouseupHandle = this.onDragMouseupHandle.bind(this)
+  window.addEventListener('mouseup', this.onDragMouseupHandle)
+  this.mindMap.on('node_mouseup', this.onDragMouseupHandle)
+}
+
+// 鼠标移动事件
+function onDragMousemoveHandle(e) {
+  if (!this.isDragHandleMousedown) return
+  e.stopPropagation()
+  e.preventDefault()
+  let {
+    minNodeTextModifyWidth,
+    maxNodeTextModifyWidth,
+    isUseCustomNodeContent,
+    customCreateNodeContent
+  } = this.mindMap.opt
+  const useCustomContent =
+    isUseCustomNodeContent && customCreateNodeContent && this._customNodeContent
+  document.body.style.cursor = 'ew-resize'
+  this.group.css({
+    cursor: 'ew-resize'
+  })
+  const { scaleX } = this.mindMap.draw.transform()
+  const ox = e.clientX - this.dragHandleMousedownX
+  let newWidth =
+    this.dragHandleMousedownCustomTextWidth +
+    (this.dragHandleIndex === 0 ? -ox : ox) / scaleX
+  newWidth = Math.max(newWidth, minNodeTextModifyWidth)
+  if (maxNodeTextModifyWidth !== -1) {
+    newWidth = Math.min(newWidth, maxNodeTextModifyWidth)
+  }
+  // 如果存在图片，那么最小值需要考虑图片宽度
+  if (!useCustomContent && this.getData('image')) {
+    const imgSize = this.getImgShowSize()
+    if (
+      this._rectInfo.textContentWidth - this.customTextWidth + newWidth <=
+      imgSize[0]
+    ) {
+      newWidth =
+        imgSize[0] + this.customTextWidth - this._rectInfo.textContentWidth
+    }
+  }
+  this.customTextWidth = newWidth
+  if (this.dragHandleIndex === 0) {
+    this.left = this.dragHandleMousedownLeft + ox / scaleX
+  }
+  // 自定义内容不重新渲染，交给开发者
+  this.reRender(useCustomContent ? [] : ['text'])
+}
+
+// 鼠标松开事件
+function onDragMouseupHandle() {
+  if (!this.isDragHandleMousedown) return
+  document.body.style.cursor = this.dragHandleMousedownBodyCursor
+  this.group.css({
+    cursor: 'default'
+  })
+  this.isDragHandleMousedown = false
+  this.dragHandleMousedownX = 0
+  this.dragHandleIndex = 0
+  this.dragHandleMousedownCustomTextWidth = 0
+  this.setData({
+    customTextWidth: this.customTextWidth
+  })
+  this.mindMap.render()
+  this.mindMap.emit('dragModifyNodeWidthEnd', this)
+}
+
+// 插件拖拽手柄元素
+function createDragHandleNode() {
+  const list = [new Rect(), new Rect()]
+  list.forEach((node, index) => {
+    node
+      .size(this.dragHandleWidth, this.height)
+      .fill({
+        color: 'transparent'
+      })
+      .css({
+        cursor: 'ew-resize'
+      })
+    node.on('mousedown', e => {
+      e.stopPropagation()
+      e.preventDefault()
+      this.dragHandleMousedownX = e.clientX
+      this.dragHandleIndex = index
+      this.dragHandleMousedownCustomTextWidth =
+        this.customTextWidth === undefined
+          ? this._textData
+            ? this._textData.width
+            : this.width
+          : this.customTextWidth
+      this.dragHandleMousedownBodyCursor = document.body.style.cursor
+      this.dragHandleMousedownLeft = this.left
+      this.isDragHandleMousedown = true
+    })
+  })
+  return list
+}
+
+// 更新拖拽按钮的显隐和位置尺寸
+function updateDragHandle() {
+  if (!this.checkEnableDragModifyNodeWidth()) return
+  if (!this._dragHandleNodes) {
+    this._dragHandleNodes = this.createDragHandleNode()
+  }
+  if (this.getData('isActive')) {
+    this._dragHandleNodes.forEach(node => {
+      node.height(this.height)
+      this.group.add(node)
+    })
+    this._dragHandleNodes[1].x(this.width - this.dragHandleWidth)
+  } else {
+    this._dragHandleNodes.forEach(node => {
+      node.remove()
+    })
+  }
+}
+
+export default {
+  initDragHandle,
+  onDragMousemoveHandle,
+  onDragMouseupHandle,
+  createDragHandleNode,
+  updateDragHandle
+}

simple-mind-map/src/core/view/View.js

@@ -30,8 +30,11 @@ class View {
     })
     // 拖动视图
     this.mindMap.event.on('mousedown', e => {
-      if (this.mindMap.opt.isDisableDrag) return
-      e.preventDefault()
+      const { isDisableDrag, mousedownEventPreventDefault } = this.mindMap.opt
+      if (isDisableDrag) return
+      if (mousedownEventPreventDefault) {
+        e.preventDefault()
+      }
       this.sx = this.x
       this.sy = this.y
     })
@@ -63,7 +66,8 @@ class View {
         mouseScaleCenterUseMousePosition,
         mousewheelMoveStep,
         mousewheelZoomActionReverse,
-        disableMouseWheelZoom
+        disableMouseWheelZoom,
+        translateRatio
       } = this.mindMap.opt
       // 是否自定义鼠标滚轮事件
       if (
@@ -111,26 +115,34 @@ class View {
         }
       } else {
         // 2.鼠标滚轮事件控制画布移动
-        const step = isTouchPad ? 10 : mousewheelMoveStep
+        let stepX = 0
+        let stepY = 0
+        if (isTouchPad) {
+          // 如果是触控板，那么直接使用触控板滑动距离
+          stepX = Math.abs(e.wheelDeltaX)
+          stepY = Math.abs(e.wheelDeltaY)
+        } else {
+          stepX = stepY = mousewheelMoveStep
+        }
         let mx = 0
         let my = 0
         // 上移
         if (dirs.includes(CONSTANTS.DIR.DOWN)) {
-          my = -step
+          my = -stepY
         }
         // 下移
         if (dirs.includes(CONSTANTS.DIR.UP)) {
-          my = step
+          my = stepY
         }
         // 右移
         if (dirs.includes(CONSTANTS.DIR.LEFT)) {
-          mx = step
+          mx = stepX
         }
         // 左移
         if (dirs.includes(CONSTANTS.DIR.RIGHT)) {
-          mx = -step
+          mx = -stepX
         }
-        this.translateXY(mx, my)
+        this.translateXY(mx * translateRatio, my * translateRatio)
       }
     })
     this.mindMap.on('resize', () => {
@@ -238,8 +250,9 @@ class View {
 
   //  缩小
   narrow(cx, cy, isTouchPad) {
-    const scaleRatio = this.mindMap.opt.scaleRatio / (isTouchPad ? 5 : 1)
-    const scale = Math.max(this.scale - scaleRatio, 0.1)
+    let { scaleRatio, minZoomRatio } = this.mindMap.opt
+    scaleRatio = scaleRatio / (isTouchPad ? 5 : 1)
+    const scale = Math.max(this.scale - scaleRatio, minZoomRatio / 100)
     this.scaleInCenter(scale, cx, cy)
     this.transform()
     this.emitEvent('scale')
@@ -247,8 +260,14 @@ class View {
 
   //  放大
   enlarge(cx, cy, isTouchPad) {
-    const scaleRatio = this.mindMap.opt.scaleRatio / (isTouchPad ? 5 : 1)
-    const scale = this.scale + scaleRatio
+    let { scaleRatio, maxZoomRatio } = this.mindMap.opt
+    scaleRatio = scaleRatio / (isTouchPad ? 5 : 1)
+    let scale = 0
+    if (maxZoomRatio === -1) {
+      scale = this.scale + scaleRatio
+    } else {
+      scale = Math.min(this.scale + scaleRatio, maxZoomRatio / 100)
+    }
     this.scaleInCenter(scale, cx, cy)
     this.transform()
     this.emitEvent('scale')

simple-mind-map/src/layouts/Base.js

@@ -91,6 +91,18 @@ class Base {
     }
   }
 
+  // 节点节点数据是否发生了改变
+  checkIsNodeDataChange(lastData, curData) {
+    if (lastData) {
+      // 对比忽略激活状态和展开收起状态
+      lastData = typeof lastData === 'string' ? JSON.parse(lastData) : lastData
+      lastData.isActive = curData.isActive
+      lastData.expand = curData.expand
+      lastData = JSON.stringify(lastData)
+    }
+    return lastData !== JSON.stringify(curData)
+  }
+
   //  创建节点实例
   createNode(data, parent, isRoot, layerIndex, index, ancestors) {
     // 编号
@@ -106,6 +118,7 @@ class Base {
     // 数据上保存了节点引用，那么直接复用节点
     if (data && data._node && !this.renderer.reRender) {
       newNode = data._node
+      // 节点层级改变了
       const isLayerTypeChange = this.checkIsLayerTypeChange(
         newNode.layerIndex,
         layerIndex
@@ -127,9 +140,17 @@ class Base {
           newNumberStr
         )
       }
-      // 主题或主题配置改变了、节点层级改变了，需要重新渲染节点文本等情况需要重新计算节点大小和布局
+      // 主题或主题配置改变了
+      const isResizeSource = this.checkIsNeedResizeSources()
+      // 节点数据改变了
+      const isNodeDataChange = this.checkIsNodeDataChange(
+        data._node.nodeDataSnapshot,
+        data.data
+      )
+      // 重新计算节点大小和布局
       if (
-        this.checkIsNeedResizeSources() ||
+        isResizeSource ||
+        isNodeDataChange ||
         isLayerTypeChange ||
         newNode.getData('resetRichText') ||
         isNumberChange
@@ -137,7 +158,7 @@ class Base {
         newNode.getSize()
         newNode.needLayout = true
       }
-      this.checkGetGeneralizationChange(newNode)
+      this.checkGetGeneralizationChange(newNode, isResizeSource)
     } else if (
       (this.lru.has(uid) || this.renderer.lastNodeCache[uid]) &&
       !this.renderer.reRender
@@ -149,6 +170,7 @@ class Base {
       newNode = this.lru.get(uid) || this.renderer.lastNodeCache[uid]
       // 保存该节点上一次的数据
       const lastData = JSON.stringify(newNode.getData())
+      // 节点层级改变了
       const isLayerTypeChange = this.checkIsLayerTypeChange(
         newNode.layerIndex,
         layerIndex
@@ -166,8 +188,8 @@ class Base {
       data._node = newNode
       // 主题或主题配置改变了需要重新计算节点大小和布局
       const isResizeSource = this.checkIsNeedResizeSources()
-      // 主题或主题配置改变了、节点层级改变了，需要重新渲染节点文本，节点数据改变了等情况需要重新计算节点大小和布局
-      const isNodeDataChange = lastData !== JSON.stringify(data.data)
+      // 点数据改变了
+      const isNodeDataChange = this.checkIsNodeDataChange(lastData, data.data)
       // 判断编号是否改变
       let isNumberChange = false
       if (hasNumberPlugin) {
@@ -176,6 +198,7 @@ class Base {
           newNumberStr
         )
       }
+      // 重新计算节点大小和布局
       if (
         isResizeSource ||
         isNodeDataChange ||
@@ -186,7 +209,7 @@ class Base {
         newNode.getSize()
         newNode.needLayout = true
       }
-      this.checkGetGeneralizationChange(newNode)
+      this.checkGetGeneralizationChange(newNode, isResizeSource)
     } else {
       // 创建新节点
       const newUid = uid || createUid()
@@ -228,7 +251,7 @@ class Base {
   }
 
   // 检查概要节点是否需要更新
-  checkGetGeneralizationChange(node) {
+  checkGetGeneralizationChange(node, isResizeSource) {
     const generalizationList = node.getData('generalization')
     if (
       generalizationList &&
@@ -239,8 +262,13 @@ class Base {
         const gNode = item.generalizationNode
         const oldData = gNode.getData()
         const newData = generalizationList[index]
-        if (newData && JSON.stringify(oldData) !== JSON.stringify(newData)) {
-          gNode.nodeData.data = newData
+        if (
+          isResizeSource ||
+          (newData && JSON.stringify(oldData) !== JSON.stringify(newData))
+        ) {
+          if (newData) {
+            gNode.nodeData.data = newData
+          }
           gNode.getSize()
           gNode.needLayout = true
         }
@@ -371,18 +399,32 @@ class Base {
   }
 
   //  二次贝塞尔曲线
-  quadraticCurvePath(x1, y1, x2, y2) {
-    let cx = x1 + (x2 - x1) * 0.2
-    let cy = y1 + (y2 - y1) * 0.8
+  quadraticCurvePath(x1, y1, x2, y2, v = false) {
+    let cx, cy
+    if (v) {
+      cx = x1 + (x2 - x1) * 0.8
+      cy = y1 + (y2 - y1) * 0.2
+    } else {
+      cx = x1 + (x2 - x1) * 0.2
+      cy = y1 + (y2 - y1) * 0.8
+    }
     return `M ${x1},${y1} Q ${cx},${cy} ${x2},${y2}`
   }
 
   //  三次贝塞尔曲线
-  cubicBezierPath(x1, y1, x2, y2) {
-    let cx1 = x1 + (x2 - x1) / 2
-    let cy1 = y1
-    let cx2 = cx1
-    let cy2 = y2
+  cubicBezierPath(x1, y1, x2, y2, v = false) {
+    let cx1, cy1, cx2, cy2
+    if (v) {
+      cx1 = x1
+      cy1 = y1 + (y2 - y1) / 2
+      cx2 = x2
+      cy2 = cy1
+    } else {
+      cx1 = x1 + (x2 - x1) / 2
+      cy1 = y1
+      cx2 = cx1
+      cy2 = y2
+    }
     return `M ${x1},${y1} C ${cx1},${cy1} ${cx2},${cy2} ${x2},${y2}`
   }
 

simple-mind-map/src/layouts/OrganizationStructure.js

@@ -34,7 +34,14 @@ class OrganizationStructure extends Base {
       this.renderer.renderTree,
       null,
       (cur, parent, isRoot, layerIndex, index, ancestors) => {
-        let newNode = this.createNode(cur, parent, isRoot, layerIndex, index, ancestors)
+        let newNode = this.createNode(
+          cur,
+          parent,
+          isRoot,
+          layerIndex,
+          index,
+          ancestors
+        )
         // 根节点定位在画布中心位置
         if (isRoot) {
           this.setNodeCenter(newNode)
@@ -148,13 +155,56 @@ class OrganizationStructure extends Base {
 
   //  绘制连线，连接该节点到其子节点
   renderLine(node, lines, style, lineStyle) {
-    if (lineStyle === 'direct') {
+    if (lineStyle === 'curve') {
+      this.renderLineCurve(node, lines, style)
+    } else if (lineStyle === 'direct') {
       this.renderLineDirect(node, lines, style)
     } else {
       this.renderLineStraight(node, lines, style)
     }
   }
 
+  //  曲线风格连线
+  renderLineCurve(node, lines, style) {
+    if (node.children.length <= 0) {
+      return []
+    }
+    let { left, top, width, height, expandBtnSize } = node
+    const { alwaysShowExpandBtn, notShowExpandBtn } = this.mindMap.opt
+    if (!alwaysShowExpandBtn || notShowExpandBtn) {
+      expandBtnSize = 0
+    }
+    const {
+      nodeUseLineStyle,
+      rootLineStartPositionKeepSameInCurve,
+      rootLineKeepSameInCurve
+    } = this.mindMap.themeConfig
+    node.children.forEach((item, index) => {
+      if (node.layerIndex === 0) {
+        expandBtnSize = 0
+      }
+      let x1 = left + width / 2
+      let y1 =
+        node.layerIndex === 0 && !rootLineStartPositionKeepSameInCurve
+          ? top + height / 2
+          : top + height + expandBtnSize
+      let x2 = item.left + item.width / 2
+      let y2 = item.top
+      let path = ''
+      // 节点使用横线风格，需要额外渲染横线
+      let nodeUseLineStylePath = nodeUseLineStyle
+        ? ` L ${item.left},${y2} L ${item.left + item.width},${y2}`
+        : ''
+      if (node.isRoot && !rootLineKeepSameInCurve) {
+        path =
+          this.quadraticCurvePath(x1, y1, x2, y2, true) + nodeUseLineStylePath
+      } else {
+        path = this.cubicBezierPath(x1, y1, x2, y2, true) + nodeUseLineStylePath
+      }
+      this.setLineStyle(style, lines[index], path, item)
+    })
+  }
+
   //  直连风格
   renderLineDirect(node, lines, style) {
     if (node.children.length <= 0) {

simple-mind-map/src/plugins/AssociativeLine.js

@@ -446,6 +446,12 @@ class AssociativeLine {
   // 完成创建连接线
   completeCreateLine(node) {
     if (this.creatingStartNode.uid === node.uid) return
+    const { beforeAssociativeLineConnection } = this.mindMap.opt
+    let stop = false
+    if (typeof beforeAssociativeLineConnection === 'function') {
+      stop = beforeAssociativeLineConnection(node)
+    }
+    if (stop) return
     this.addLine(this.creatingStartNode, node)
     if (this.overlapNode && this.overlapNode.getData('isActive')) {
       this.mindMap.execCommand('SET_NODE_ACTIVE', this.overlapNode, false)

simple-mind-map/src/plugins/Drag.js

@@ -93,7 +93,6 @@ class Drag extends Base {
     ) {
       return
     }
-    e.preventDefault()
     this.isMousedown = true
     // 记录鼠标按下时的节点
     this.mousedownNode = node

simple-mind-map/src/plugins/Export.js

@@ -129,6 +129,7 @@ class Export {
 
   //   svg转png
   svgToPng(svgSrc, transparent, clipData = null) {
+    const { maxCanvasSize, minExportImgCanvasScale } = this.mindMap.opt
     return new Promise((resolve, reject) => {
       const img = new Image()
       // 跨域图片需要添加这个属性，否则画布被污染了无法导出图片
@@ -136,10 +137,7 @@ class Export {
       img.onload = async () => {
         try {
           const canvas = document.createElement('canvas')
-          const dpr = Math.max(
-            window.devicePixelRatio,
-            this.mindMap.opt.minExportImgCanvasScale
-          )
+          const dpr = Math.max(window.devicePixelRatio, minExportImgCanvasScale)
           let imgWidth = img.width
           let imgHeight = img.height
           // 如果是裁减操作的话，那么需要手动添加内边距，及调整图片大小为实际的裁减区域的大小，不要忘了内边距哦
@@ -152,29 +150,40 @@ class Export {
             imgHeight = clipData.height + paddingY * 2
           }
           // 检查是否超出canvas支持的像素上限
-          const maxSize = 16384 / dpr
-          const maxArea = maxSize * maxSize
-          if (imgWidth * imgHeight > maxArea) {
+          // canvas大小需要乘以dpr
+          let canvasWidth = imgWidth * dpr
+          let canvasHeight = imgHeight * dpr
+          if (canvasWidth > maxCanvasSize || canvasHeight > maxCanvasSize) {
             let newWidth = null
             let newHeight = null
-            if (imgWidth > maxSize) {
-              newWidth = maxArea / imgHeight
-            } else if (imgHeight > maxSize) {
-              newHeight = maxArea / imgWidth
+            if (canvasWidth > maxCanvasSize) {
+              // 如果宽度超出限制，那么调整为上限值
+              newWidth = maxCanvasSize
+            } else if (canvasHeight > maxCanvasSize) {
+              // 高度同理
+              newHeight = maxCanvasSize
             }
-            const res = resizeImgSize(imgWidth, imgHeight, newWidth, newHeight)
-            imgWidth = res[0]
-            imgHeight = res[1]
+            // 计算缩放后的宽高
+            const res = resizeImgSize(
+              canvasWidth,
+              canvasHeight,
+              newWidth,
+              newHeight
+            )
+            canvasWidth = res[0]
+            canvasHeight = res[1]
           }
-          canvas.width = imgWidth * dpr
-          canvas.height = imgHeight * dpr
-          canvas.style.width = imgWidth + 'px'
-          canvas.style.height = imgHeight + 'px'
+          canvas.width = canvasWidth
+          canvas.height = canvasHeight
+          const styleWidth = canvasWidth / dpr
+          const styleHeight = canvasHeight / dpr
+          canvas.style.width = styleWidth + 'px'
+          canvas.style.height = styleHeight + 'px'
           const ctx = canvas.getContext('2d')
           ctx.scale(dpr, dpr)
           // 绘制背景
           if (!transparent) {
-            await this.drawBackgroundToCanvas(ctx, imgWidth, imgHeight)
+            await this.drawBackgroundToCanvas(ctx, styleWidth, styleHeight)
           }
           // 图片绘制到canvas里
           // 如果有裁减数据，那么需要进行裁减
@@ -191,7 +200,7 @@ class Export {
               clipData.height
             )
           } else {
-            ctx.drawImage(img, 0, 0, imgWidth, imgHeight)
+            ctx.drawImage(img, 0, 0, styleWidth, styleHeight)
           }
           resolve(canvas.toDataURL())
         } catch (error) {

simple-mind-map/src/plugins/Formula.js

@@ -1,8 +1,11 @@
 import katex from 'katex'
 import Quill from 'quill'
-import { getChromeVersion } from '../utils/index'
+import { getChromeVersion, htmlEscape } from '../utils/index'
 import { getBaseStyleText, getFontStyleText } from './FormulaStyle'
 
+let extended = false
+const QuillFormula = Quill.import('formats/formula')
+
 // 数学公式支持插件
 // 该插件在富文本模式下可用
 class Formula {
@@ -16,6 +19,18 @@ class Formula {
     this.cssEl = null
     this.addStyle()
     this.extendQuill()
+    this.onDestroy = this.onDestroy.bind(this)
+    this.mindMap.on('beforeDestroy', this.onDestroy)
+  }
+
+  onDestroy() {
+    const instanceCount = Object.getPrototypeOf(this.mindMap).constructor
+      .instanceCount
+    // 如果思维导图实例数量变成0了，那么就恢复成默认的
+    if (instanceCount <= 1) {
+      extended = false
+      Quill.register('formats/formula', QuillFormula, true)
+    }
   }
 
   init() {
@@ -50,7 +65,9 @@ class Formula {
 
   // 修改formula格式工具
   extendQuill() {
-    const QuillFormula = Quill.import('formats/formula')
+    if (extended) return
+    extended = true
+
     const self = this
 
     class CustomFormulaBlot extends QuillFormula {
@@ -58,7 +75,7 @@ class Formula {
         let node = super.create(value)
         if (typeof value === 'string') {
           katex.render(value, node, self.config)
-          node.setAttribute('data-value', value)
+          node.setAttribute('data-value', htmlEscape(value))
         }
         return node
       }
@@ -110,11 +127,7 @@ class Formula {
       for (const el of els)
         nodeText = nodeText.replace(
           el.outerHTML,
-          `\$${el
-            .getAttribute('data-value')
-            .replaceAll('&', '&amp;')
-            .replaceAll('<', '&lt;')
-            .replaceAll('>', '&gt;')}\$`
+          `\$${el.getAttribute('data-value')}\$`
         )
     }
     return nodeText
@@ -172,11 +185,13 @@ class Formula {
   // 插件被移除前做的事情
   beforePluginRemove() {
     this.removeStyle()
+    this.mindMap.off('beforeDestroy', this.onDestroy)
   }
 
   // 插件被卸载前做的事情
   beforePluginDestroy() {
     this.removeStyle()
+    this.mindMap.off('beforeDestroy', this.onDestroy)
   }
 }
 

simple-mind-map/src/plugins/NodeImgAdjust.js

@@ -6,13 +6,18 @@ class NodeImgAdjust {
   //  构造函数
   constructor({ mindMap }) {
     this.mindMap = mindMap
-    this.resizeBtnSize = 26 // 调整按钮的大小
     this.handleEl = null // 自定义元素，用来渲染临时图片、调整按钮
     this.isShowHandleEl = false // 自定义元素是否在显示中
     this.node = null // 当前节点实例
     this.img = null // 当前节点的图片节点
     this.rect = null // 当前图片节点的尺寸信息
     this.isMousedown = false // 当前是否是按住调整按钮状态
+    this.mousedownDrawTransform = null //鼠标按下时对当前画布的变换
+    this.mousedownOffset = {
+      // 鼠标按下时位置和图片右下角相差的距离
+      x: 0,
+      y: 0
+    }
     this.currentImgWidth = 0 // 当前拖拽实时图片的大小
     this.currentImgHeight = 0
     this.isAdjusted = false // 是否是拖拽结束后的渲染期间
@@ -78,6 +83,7 @@ class NodeImgAdjust {
 
   // 显示自定义元素
   showHandleEl() {
+    if (this.isShowHandleEl) return
     if (!this.handleEl) {
       this.createResizeBtnEl()
     }
@@ -116,6 +122,7 @@ class NodeImgAdjust {
 
   // 创建调整按钮元素
   createResizeBtnEl() {
+    const { imgResizeBtnSize } = this.mindMap.opt
     // 容器元素
     this.handleEl = document.createElement('div')
     this.handleEl.style.cssText = `
@@ -134,8 +141,8 @@ class NodeImgAdjust {
       bottom: 0;
       pointer-events: auto;
       background-color: rgba(0, 0, 0, 0.3);
-      width: ${this.resizeBtnSize}px;
-      height: ${this.resizeBtnSize}px;
+      width: ${imgResizeBtnSize}px;
+      height: ${imgResizeBtnSize}px;
       display: flex;
       justify-content: center;
       align-items: center;
@@ -178,8 +185,8 @@ class NodeImgAdjust {
       right: 0;top:0;color:#fff;
       pointer-events: auto;
       background-color: rgba(0, 0, 0, 0.3);
-      width: ${this.resizeBtnSize}px;
-      height: ${this.resizeBtnSize}px;
+      width: ${imgResizeBtnSize}px;
+      height: ${imgResizeBtnSize}px;
       display: flex;
       justify-content: center;
       align-items: center;
@@ -192,8 +199,14 @@ class NodeImgAdjust {
       if (this.isMousedown) return
       this.hideHandleEl()
     })
-    btnRemove.addEventListener('click', e => {
-      this.mindMap.execCommand('SET_NODE_IMAGE', this.node, { url: null })
+    btnRemove.addEventListener('click', async e => {
+      let stop = false
+      if (typeof this.mindMap.opt.beforeDeleteNodeImg === 'function') {
+        stop = await this.mindMap.opt.beforeDeleteNodeImg(this.node)
+      }
+      if (!stop) {
+        this.mindMap.execCommand('SET_NODE_IMAGE', this.node, { url: null })
+      }
     })
     // 添加元素到页面
     const targetNode = this.mindMap.opt.customInnerElsAppendTo || document.body
@@ -201,10 +214,13 @@ class NodeImgAdjust {
   }
 
   // 鼠标按钮按下事件
-  onMousedown() {
+  onMousedown(e) {
     this.isMousedown = true
+    this.mousedownDrawTransform = this.mindMap.draw.transform()
     // 隐藏节点实际图片
     this.hideNodeImage()
+    this.mousedownOffset.x = e.clientX - this.rect.x2
+    this.mousedownOffset.y = e.clientY - this.rect.y2
     // 将节点图片渲染到自定义元素上
     this.handleEl.style.backgroundImage = `url(${this.node.getData('image')})`
   }
@@ -213,13 +229,48 @@ class NodeImgAdjust {
   onMousemove(e) {
     if (!this.isMousedown) return
     e.preventDefault()
-    // 计算当前拖拽位置对应的图片的实时大小
-    let { width: imageOriginWidth, height: imageOriginHeight } =
+    const { scaleX, scaleY } = this.mousedownDrawTransform
+    // 图片原始大小
+    const { width: imageOriginWidth, height: imageOriginHeight } =
       this.node.getData('imageSize')
-    let newWidth = e.clientX - this.rect.x
-    let newHeight = e.clientY - this.rect.y
-    if (newWidth <= 0 || newHeight <= 0) return
-    let [actWidth, actHeight] = resizeImgSizeByOriginRatio(
+    let {
+      minImgResizeWidth,
+      minImgResizeHeight,
+      maxImgResizeWidthInheritTheme,
+      maxImgResizeWidth,
+      maxImgResizeHeight
+    } = this.mindMap.opt
+    // 主题设置的最小图片宽高
+    const minRatio = minImgResizeWidth / minImgResizeHeight
+    const oRatio = imageOriginWidth / imageOriginHeight
+    if (minRatio > oRatio) {
+      // 如果最小值比例大于图片原始比例，那么要调整高度最小值
+      minImgResizeHeight = minImgResizeWidth / oRatio
+    } else {
+      // 否则调整宽度最小值
+      minImgResizeWidth = minImgResizeHeight * oRatio
+    }
+    // 主题设置的最大图片宽高
+    let imgMaxWidth, imgMaxHeight
+    if (maxImgResizeWidthInheritTheme) {
+      imgMaxWidth = this.mindMap.getThemeConfig('imgMaxWidth')
+      imgMaxHeight = this.mindMap.getThemeConfig('imgMaxHeight')
+    } else {
+      imgMaxWidth = maxImgResizeWidth
+      imgMaxHeight = maxImgResizeHeight
+    }
+    imgMaxWidth = imgMaxWidth * scaleX
+    imgMaxHeight = imgMaxHeight * scaleY
+    // 计算当前拖拽位置对应的图片的实时大小
+    let newWidth = Math.abs(e.clientX - this.rect.x - this.mousedownOffset.x)
+    let newHeight = Math.abs(e.clientY - this.rect.y - this.mousedownOffset.y)
+    // 限制最小值
+    if (newWidth < minImgResizeWidth) newWidth = minImgResizeWidth
+    if (newHeight < minImgResizeHeight) newHeight = minImgResizeHeight
+    // 限制最大值
+    if (newWidth > imgMaxWidth) newWidth = imgMaxWidth
+    if (newHeight > imgMaxHeight) newHeight = imgMaxHeight
+    const [actWidth, actHeight] = resizeImgSizeByOriginRatio(
       imageOriginWidth,
       imageOriginHeight,
       newWidth,
@@ -238,17 +289,24 @@ class NodeImgAdjust {
     // 隐藏自定义元素
     this.hideHandleEl()
     // 更新节点图片为新的大小
-    let { image, imageTitle } = this.node.getData()
-    let { scaleX, scaleY } = this.mindMap.draw.transform()
-    this.mindMap.execCommand('SET_NODE_IMAGE', this.node, {
-      url: image,
-      title: imageTitle,
-      width: this.currentImgWidth / scaleX,
-      height: this.currentImgHeight / scaleY,
-      custom: true // 代表自定义了图片大小
-    })
-    this.isAdjusted = true
+    const { image, imageTitle, imageSize } = this.node.getData()
+    const { scaleX, scaleY } = this.mousedownDrawTransform
+    const newWidth = this.currentImgWidth / scaleX
+    const newHeight = this.currentImgHeight / scaleY
+    if (newWidth !== imageSize.width || newHeight !== imageSize.height) {
+      this.mindMap.execCommand('SET_NODE_IMAGE', this.node, {
+        url: image,
+        title: imageTitle,
+        width: newWidth,
+        height: newHeight,
+        custom: true // 代表自定义了图片大小
+      })
+      this.isAdjusted = true
+    }
     this.isMousedown = false
+    this.mousedownDrawTransform = null
+    this.mousedownOffset.x = 0
+    this.mousedownOffset.y = 0
   }
 
   // 渲染完成事件

simple-mind-map/src/plugins/Painter.js

@@ -53,17 +53,22 @@ class Painter {
       node.uid === this.painterNode.uid
     )
       return
-    const style = {}
+    let style = {}
+    // 格式刷节点所有生效的样式
+    if (!this.mindMap.opt.onlyPainterNodeCustomStyles) {
+      style = {
+        ...this.painterNode.effectiveStyles
+      }
+    }
     const painterNodeData = this.painterNode.getData()
     Object.keys(painterNodeData).forEach(key => {
       if (checkIsNodeStyleDataKey(key)) {
         style[key] = painterNodeData[key]
       }
     })
+    // 先去除目标节点的样式
+    this.mindMap.renderer._handleRemoveCustomStyles(node.getData())
     node.setStyles(style)
-    if (painterNodeData.activeStyle) {
-      node.setStyles(painterNodeData.activeStyle, true)
-    }
   }
 
   // 插件被移除前做的事情

simple-mind-map/src/plugins/RichText.js

@@ -57,6 +57,8 @@ class RichText {
     this.cacheEditingText = ''
     this.lostStyle = false
     this.isCompositing = false
+    this.textNodePaddingX = 6
+    this.textNodePaddingY = 4
     this.initOpt()
     this.extendQuill()
     this.appendCss()
@@ -71,19 +73,34 @@ class RichText {
   // 绑定事件
   bindEvent() {
     this.onCompositionStart = this.onCompositionStart.bind(this)
+    this.onCompositionUpdate = this.onCompositionUpdate.bind(this)
     this.onCompositionEnd = this.onCompositionEnd.bind(this)
     window.addEventListener('compositionstart', this.onCompositionStart)
+    window.addEventListener('compositionupdate', this.onCompositionUpdate)
     window.addEventListener('compositionend', this.onCompositionEnd)
   }
 
   // 解绑事件
   unbindEvent() {
     window.removeEventListener('compositionstart', this.onCompositionStart)
+    window.removeEventListener('compositionupdate', this.onCompositionUpdate)
     window.removeEventListener('compositionend', this.onCompositionEnd)
   }
 
   // 插入样式
   appendCss() {
+    this.mindMap.appendCss(
+      'richText',
+      `
+      .smm-richtext-node-wrap {
+        word-break: break-all;
+      }
+
+      .smm-richtext-node-wrap p {
+        font-family: auto;
+      }
+      `
+    )
     let cssText = `
       .ql-editor {
         overflow: hidden;
@@ -102,15 +119,6 @@ class RichText {
         border: none;
       }
 
-      .smm-richtext-node-wrap {
-        word-break: break-all;
-      }
-
-      .smm-richtext-node-wrap p {
-        font-family: auto;
-        
-      }
-
       .smm-richtext-node-edit-wrap p {
         font-family: auto;
       }
@@ -175,7 +183,7 @@ class RichText {
     if (this.showTextEdit) {
       return
     }
-    const {
+    let {
       richTextEditFakeInPlace,
       customInnerElsAppendTo,
       nodeTextEditZIndex,
@@ -183,6 +191,9 @@ class RichText {
       selectTextOnEnterEditText,
       transformRichTextOnEnterEdit
     } = this.mindMap.opt
+    textAutoWrapWidth = node.hasCustomWidth()
+      ? node.customTextWidth
+      : textAutoWrapWidth
     this.node = node
     this.isInserting = isInserting
     if (!rect) rect = node._textData.node.node.getBoundingClientRect()
@@ -198,8 +209,8 @@ class RichText {
     let scaleX = rect.width / originWidth
     let scaleY = rect.height / originHeight
     // 内边距
-    let paddingX = 6
-    let paddingY = 4
+    let paddingX = this.textNodePaddingX
+    let paddingY = this.textNodePaddingY
     if (richTextEditFakeInPlace) {
       let paddingValue = node.getPaddingVale()
       paddingX = paddingValue.paddingX
@@ -287,6 +298,20 @@ class RichText {
     this.cacheEditingText = ''
   }
 
+  // 更新文本编辑框的大小和位置
+  updateTextEditNode() {
+    if (!this.node) return
+    const rect = this.node._textData.node.node.getBoundingClientRect()
+    const g = this.node._textData.node
+    const originWidth = g.attr('data-width')
+    const originHeight = g.attr('data-height')
+    this.textEditNode.style.minWidth =
+      originWidth + this.textNodePaddingX * 2 + 'px'
+    this.textEditNode.style.minHeight = originHeight + 'px'
+    this.textEditNode.style.left = rect.left + 'px'
+    this.textEditNode.style.top = rect.top + 'px'
+  }
+
   // 删除文本编辑框元素
   removeTextEditEl() {
     if (!this.textEditNode) return
@@ -340,6 +365,18 @@ class RichText {
     return html.replace(/<p><br><\/p>$/, '')
   }
 
+  // 给html字符串中的节点样式按样式名首字母排序
+  sortHtmlNodeStyles(html) {
+    return html.replace(/(<[^<>]+\s+style=")([^"]+)("\s*>)/g, (_, a, b, c) => {
+      let arr = b.match(/[^:]+:[^:]+;/g) || []
+      arr = arr.map(item => {
+        return item.trim()
+      })
+      arr.sort()
+      return a + arr.join('') + c
+    })
+  }
+
   // 隐藏文本编辑控件，即完成编辑
   hideEditText(nodes) {
     if (!this.showTextEdit) {
@@ -350,8 +387,8 @@ class RichText {
       beforeHideRichTextEdit(this)
     }
     let html = this.getEditText()
-    let list =
-      nodes && nodes.length > 0 ? nodes : this.mindMap.renderer.activeNodeList
+    html = this.sortHtmlNodeStyles(html)
+    const list = nodes && nodes.length > 0 ? nodes : [this.node]
     list.forEach(node => {
       this.mindMap.execCommand('SET_NODE_TEXT', node, html, true)
       // if (node.isGeneralization) {
@@ -360,12 +397,13 @@ class RichText {
       // }
       this.mindMap.render()
     })
-    this.mindMap.emit('hide_text_edit', this.textEditNode, list, this.node)
+    const node = this.node
     this.textEditNode.style.display = 'none'
     this.showTextEdit = false
     this.mindMap.emit('rich_text_selection_change', false)
     this.node = null
     this.isInserting = false
+    this.mindMap.emit('hide_text_edit', this.textEditNode, list, node)
   }
 
   // 初始化Quill富文本编辑器
@@ -490,12 +528,18 @@ class RichText {
         this.setTextStyleIfNotRichText(this.node)
         this.lostStyle = false
       }
+      this.mindMap.emit('node_text_edit_change', {
+        node: this.node,
+        text: this.getEditText(),
+        richText: true
+      })
     })
     // 拦截粘贴，只允许粘贴纯文本
     // this.quill.clipboard.addMatcher(Node.TEXT_NODE, node => {
     //   let style = this.getPasteTextStyle()
     //   return new Delta().insert(this.formatPasteText(node.data), style)
     // })
+    // 剪贴板里只要存在文本就会走这里，所以当剪贴板里是纯文本，或文本+图片都可以监听到和拦截，但是只有纯图片时不会走这里，所以无法拦截
     this.quill.clipboard.addMatcher(Node.ELEMENT_NODE, (node, delta) => {
       let ops = []
       let style = this.getPasteTextStyle()
@@ -511,6 +555,20 @@ class RichText {
       delta.ops = ops
       return delta
     })
+    // 拦截图片的粘贴，当剪贴板里是纯图片，或文本+图片都可以拦截到，但是带来的问题是文本+图片时里面的文本也无法粘贴
+    this.quill.root.addEventListener(
+      'paste',
+      e => {
+        if (
+          e.clipboardData &&
+          e.clipboardData.files &&
+          e.clipboardData.files.length
+        ) {
+          e.preventDefault()
+        }
+      },
+      true
+    )
   }
 
   // 获取粘贴的文本的样式
@@ -544,6 +602,16 @@ class RichText {
     this.isCompositing = true
   }
 
+  // 中文输入中
+  onCompositionUpdate() {
+    if (!this.showTextEdit || !this.node) return
+    this.mindMap.emit('node_text_edit_change', {
+      node: this.node,
+      text: this.getEditText(),
+      richText: true
+    })
+  }
+
   // 中文输入结束
   onCompositionEnd() {
     if (!this.showTextEdit) {
@@ -798,6 +866,7 @@ class RichText {
     this.transformAllNodesToNormalNode()
     document.head.removeChild(this.styleEl)
     this.unbindEvent()
+    this.mindMap.removeAppendCss('richText')
   }
 
   // 插件被卸载前做的事情

simple-mind-map/src/plugins/Search.js

@@ -224,9 +224,15 @@ class Search {
     replaceText = String(replaceText)
     let currentNode = this.matchNodeList[this.currentIndex]
     if (!currentNode) return
-    let text = this.getReplacedText(currentNode, this.searchText, replaceText)
+    // 如果当前搜索文本是替换文本的子串，那么该节点还是符合搜索结果的
+    const keep = replaceText.includes(this.searchText)
+    const text = this.getReplacedText(currentNode, this.searchText, replaceText)
     this.notResetSearchText = true
     currentNode.setText(text, currentNode.getData('richText'), true)
+    if (keep) {
+      this.updateMatchNodeList(this.matchNodeList)
+      return
+    }
     const newList = this.matchNodeList.filter(node => {
       return currentNode !== node
     })
@@ -249,25 +255,29 @@ class Search {
     )
       return
     replaceText = String(replaceText)
+    // 如果当前搜索文本是替换文本的子串，那么该节点还是符合搜索结果的
+    const keep = replaceText.includes(this.searchText)
+    const hasRichTextPlugin = this.mindMap.renderer.hasRichTextPlugin()
     this.matchNodeList.forEach(node => {
       const text = this.getReplacedText(node, this.searchText, replaceText)
       if (this.isNodeInstance(node)) {
-        this.mindMap.renderer.setNodeDataRender(
-          node,
-          {
-            text,
-            resetRichText: !!node.getData('richText')
-          },
-          true
-        )
+        const data = {
+          text
+        }
+        if (hasRichTextPlugin) data.resetRichText = !!node.getData('richText')
+        this.mindMap.renderer.setNodeDataRender(node, data, true)
       } else {
         node.data.text = text
-        node.data.resetRichText = !!node.data.richText
+        if (hasRichTextPlugin) node.data.resetRichText = !!node.data.richText
       }
     })
     this.mindMap.render()
     this.mindMap.command.addHistory()
-    this.endSearch()
+    if (keep) {
+      this.updateMatchNodeList(this.matchNodeList)
+    } else {
+      this.endSearch()
+    }
   }
 
   // 获取某个节点替换后的文本

simple-mind-map/src/plugins/Select.js

@@ -41,7 +41,8 @@ class Select {
 
   // 鼠标按下
   onMousedown(e) {
-    if (this.mindMap.opt.readonly) {
+    const { readonly, mousedownEventPreventDefault } = this.mindMap.opt
+    if (readonly) {
       return
     }
     let { useLeftKeySelectionRightKeyDrag } = this.mindMap.opt
@@ -51,7 +52,9 @@ class Select {
     ) {
       return
     }
-    e.preventDefault()
+    if (mousedownEventPreventDefault) {
+      e.preventDefault()
+    }
     this.isMousedown = true
     this.cacheActiveList = [...this.mindMap.renderer.activeNodeList]
     let { x, y } = this.mindMap.toPos(e.clientX, e.clientY)

simple-mind-map/src/theme/default.js

@@ -1,11 +1,10 @@
 //  默认主题
-
 export default {
   // 节点内边距
   paddingX: 15,
   paddingY: 5,
   // 图片显示的最大宽度
-  imgMaxWidth: 100,
+  imgMaxWidth: 200,
   // 图片显示的最大高度
   imgMaxHeight: 100,
   // icon的大小
@@ -82,8 +81,16 @@ export default {
     gradientStyle: false,
     startColor: '#549688',
     endColor: '#fff',
+    startDir: [0, 0],
+    endDir: [1, 0],
     // 连线标记的位置，start（头部）、end（尾部），该配置在showLineMarker配置为true时生效
-    lineMarkerDir: 'end'
+    lineMarkerDir: 'end',
+    // 节点鼠标hover和激活时显示的矩形边框的颜色，主题里不设置，默认会取hoverRectColor实例化选项的值
+    hoverRectColor: '',
+    // 点鼠标hover和激活时显示的矩形边框的圆角大小
+    hoverRectRadius: 5
+    // paddingX: 15,
+    // paddingY: 5
   },
   // 二级节点样式
   second: {
@@ -94,7 +101,7 @@ export default {
     fontFamily: '微软雅黑, Microsoft YaHei',
     color: '#565656',
     fontSize: 16,
-    fontWeight: 'noraml',
+    fontWeight: 'normal',
     fontStyle: 'normal',
     lineHeight: 1.5,
     borderColor: '#549688',
@@ -105,7 +112,13 @@ export default {
     gradientStyle: false,
     startColor: '#549688',
     endColor: '#fff',
-    lineMarkerDir: 'end'
+    startDir: [0, 0],
+    endDir: [1, 0],
+    lineMarkerDir: 'end',
+    hoverRectColor: '',
+    hoverRectRadius: 5
+    // paddingX: 15,
+    // paddingY: 5
   },
   // 三级及以下节点样式
   node: {
@@ -116,7 +129,7 @@ export default {
     fontFamily: '微软雅黑, Microsoft YaHei',
     color: '#6a6d6c',
     fontSize: 14,
-    fontWeight: 'noraml',
+    fontWeight: 'normal',
     fontStyle: 'normal',
     lineHeight: 1.5,
     borderColor: 'transparent',
@@ -127,7 +140,13 @@ export default {
     gradientStyle: false,
     startColor: '#549688',
     endColor: '#fff',
-    lineMarkerDir: 'end'
+    startDir: [0, 0],
+    endDir: [1, 0],
+    lineMarkerDir: 'end',
+    hoverRectColor: '',
+    hoverRectRadius: 5
+    // paddingX: 15,
+    // paddingY: 5
   },
   // 概要节点样式
   generalization: {
@@ -138,7 +157,7 @@ export default {
     fontFamily: '微软雅黑, Microsoft YaHei',
     color: '#565656',
     fontSize: 16,
-    fontWeight: 'noraml',
+    fontWeight: 'normal',
     fontStyle: 'normal',
     lineHeight: 1.5,
     borderColor: '#549688',
@@ -148,7 +167,13 @@ export default {
     textDecoration: 'none',
     gradientStyle: false,
     startColor: '#549688',
-    endColor: '#fff'
+    endColor: '#fff',
+    startDir: [0, 0],
+    endDir: [1, 0],
+    hoverRectColor: '',
+    hoverRectRadius: 5
+    // paddingX: 15,
+    // paddingY: 5
   }
 }
 
@@ -179,7 +204,11 @@ const nodeSizeIndependenceList = [
   'gradientStyle',
   'lineRadius',
   'startColor',
-  'endColor'
+  'endColor',
+  'startDir',
+  'endDir',
+  'hoverRectColor',
+  'hoverRectRadius'
 ]
 export const checkIsNodeSizeIndependenceConfig = config => {
   let keys = Object.keys(config)

simple-mind-map/src/theme/index.js

@@ -0,0 +1,5 @@
+import defaultTheme from './default'
+
+export default {
+  default: defaultTheme
+}

simple-mind-map/src/themes/autumn.js

@@ -1,44 +0,0 @@
-import defaultTheme from './default'
-import merge from 'deepmerge'
-
-// 秋天
-export default merge(defaultTheme, {
-  // 背景颜色
-  backgroundColor: '#fff2df',
-  // 连线的颜色
-  lineColor: '#b0bc47',
-  lineWidth: 3,
-  // 概要连线的粗细
-  generalizationLineWidth: 3,
-  // 概要连线的颜色
-  generalizationLineColor: '#b0bc47',
-  // 根节点样式
-  root: {
-    fillColor: '#e68112',
-    color: '#fff',
-    borderColor: '#e68112',
-    borderWidth: 0,
-    fontSize: 24
-  },
-  // 二级节点样式
-  second: {
-    fillColor: '#ffd683',
-    color: '#8c5416',
-    borderColor: '#b0bc47',
-    borderWidth: 2,
-    fontSize: 18
-  },
-  // 三级及以下节点样式
-  node: {
-    fontSize: 14,
-    color: '#8c5416'
-  },
-  // 概要节点样式
-  generalization: {
-    fontSize: 14,
-    fillColor: '#ffd683',
-    borderColor: '#b0bc47',
-    borderWidth: 2,
-    color: '#8c5416'
-  }
-})

simple-mind-map/src/themes/avocado.js

@@ -1,44 +0,0 @@
-import defaultTheme from './default'
-import merge from 'deepmerge'
-
-// 牛油果
-export default merge(defaultTheme, {
-  // 背景颜色
-  backgroundColor: '#e6f1de',
-  // 连线的颜色
-  lineColor: '#f5ffad',
-  lineWidth: 4,
-  // 概要连线的粗细
-  generalizationLineWidth: 3,
-  // 概要连线的颜色
-  generalizationLineColor: '#749336',
-  // 根节点样式
-  root: {
-    fillColor: '#94c143',
-    color: '#fff',
-    borderColor: '#94c143',
-    borderWidth: 0,
-    fontSize: 24
-  },
-  // 二级节点样式
-  second: {
-    fillColor: '#cee498',
-    color: '#749336',
-    borderColor: '#aec668',
-    borderWidth: 2,
-    fontSize: 18
-  },
-  // 三级及以下节点样式
-  node: {
-    fontSize: 14,
-    color: '#749336'
-  },
-  // 概要节点样式
-  generalization: {
-    fontSize: 14,
-    fillColor: '#cee498',
-    borderColor: '#aec668',
-    borderWidth: 2,
-    color: '#749336'
-  }
-})

simple-mind-map/src/themes/blackGold.js

@@ -1,44 +0,0 @@
-import defaultTheme from './default'
-import merge from 'deepmerge'
-
-// 黑金
-export default merge(defaultTheme, {
-  // 背景颜色
-  backgroundColor: 'rgb(18, 20, 20)',
-  // 连线的颜色
-  lineColor: 'rgb(205, 186, 156)',
-  lineWidth: 3,
-  // 概要连线的粗细
-  generalizationLineWidth: 3,
-  // 概要连线的颜色
-  generalizationLineColor: 'rgb(245, 224, 191)',
-  // 根节点样式
-  root: {
-    fillColor: 'rgb(255, 208, 124)',
-    color: 'rgb(111, 61, 6)',
-    borderColor: '',
-    borderWidth: 0,
-    fontSize: 24
-  },
-  // 二级节点样式
-  second: {
-    fillColor: 'rgb(66, 57, 46)',
-    color: 'rgb(225, 201, 158)',
-    borderColor: 'rgb(245, 224, 191)',
-    borderWidth: 2,
-    fontSize: 18
-  },
-  // 三级及以下节点样式
-  node: {
-    fontSize: 14,
-    color: 'rgb(231, 203, 155)'
-  },
-  // 概要节点样式
-  generalization: {
-    fontSize: 14,
-    fillColor: 'rgb(56, 45, 34)',
-    borderColor: 'rgb(104, 84, 61)',
-    borderWidth: 2,
-    color: 'rgb(242, 216, 176)'
-  }
-})

simple-mind-map/src/themes/blackHumour.js

@@ -1,44 +0,0 @@
-import defaultTheme from './default'
-import merge from 'deepmerge'
-
-// 黑色幽默
-export default merge(defaultTheme, {
-  // 背景颜色
-  backgroundColor: 'rgb(27, 31, 34)',
-  // 连线的颜色
-  lineColor: 'rgb(75, 81, 78)',
-  lineWidth: 3,
-  // 概要连线的粗细
-  generalizationLineWidth: 3,
-  // 概要连线的颜色
-  generalizationLineColor: 'rgb(255, 119, 34)',
-  // 根节点样式
-  root: {
-    fillColor: 'rgb(36, 179, 96)',
-    color: '#fff',
-    borderColor: '',
-    borderWidth: 0,
-    fontSize: 24
-  },
-  // 二级节点样式
-  second: {
-    fillColor: 'rgb(254, 199, 13)',
-    color: 'rgb(0, 0, 0)',
-    borderColor: '',
-    borderWidth: 0,
-    fontSize: 18
-  },
-  // 三级及以下节点样式
-  node: {
-    fontSize: 14,
-    color: 'rgb(204, 204, 204)'
-  },
-  // 概要节点样式
-  generalization: {
-    fontSize: 14,
-    fillColor: 'rgb(27, 31, 34)',
-    borderColor: 'rgb(255, 119, 34)',
-    borderWidth: 2,
-    color: 'rgb(204, 204, 204)'
-  }
-})

simple-mind-map/src/themes/blueSky.js

@@ -1,37 +0,0 @@
-import defaultTheme from './default'
-import merge from 'deepmerge'
-
-//  天空蓝
-export default merge(defaultTheme, {
-  // 连线的颜色
-  lineColor: 'rgb(115, 161, 191)',
-  // 背景颜色
-  backgroundColor: 'rgb(251, 251, 251)',
-  // 概要连线的粗细
-  generalizationLineWidth: 1,
-  // 概要连线的颜色
-  generalizationLineColor: '#333',
-  // 根节点样式
-  root: {
-    fillColor: 'rgb(115, 161, 191)'
-  },
-  // 二级节点样式
-  second: {
-    fillColor: 'rgb(238, 243, 246)',
-    color: '#333',
-    borderColor: 'rgb(115, 161, 191)',
-    borderWidth: 1,
-    fontSize: 14
-  },
-  // 三级及以下节点样式
-  node: {
-    fontSize: 12,
-    color: '#333'
-  },
-  // 概要节点样式
-  generalization: {
-    fillColor: '#fff',
-    borderColor: '#333',
-    color: '#333'
-  }
-})

simple-mind-map/src/themes/brainImpairedPink.js

@@ -1,37 +0,0 @@
-import defaultTheme from './default'
-import merge from 'deepmerge'
-
-//  脑残粉
-export default merge(defaultTheme, {
-  // 连线的颜色
-  lineColor: 'rgb(191, 115, 148)',
-  // 背景颜色
-  backgroundColor: 'rgb(251, 251, 251)',
-  // 概要连线的粗细
-  generalizationLineWidth: 1,
-  // 概要连线的颜色
-  generalizationLineColor: '#333',
-  // 根节点样式
-  root: {
-    fillColor: 'rgb(191, 115, 148)'
-  },
-  // 二级节点样式
-  second: {
-    fillColor: 'rgb(246, 238, 242)',
-    color: '#333',
-    borderColor: 'rgb(191, 115, 148)',
-    borderWidth: 1,
-    fontSize: 14
-  },
-  // 三级及以下节点样式
-  node: {
-    fontSize: 12,
-    color: '#333'
-  },
-  // 概要节点样式
-  generalization: {
-    fillColor: '#fff',
-    borderColor: '#333',
-    color: '#333'
-  }
-})

simple-mind-map/src/themes/classic.js

@@ -1,49 +0,0 @@
-import defaultTheme from './default'
-import merge from 'deepmerge'
-
-//  脑图经典
-export default merge(defaultTheme, {
-  // 连线的颜色
-  lineColor: '#fff',
-  // 连线的粗细
-  lineWidth: 3,
-  // 概要连线的粗细
-  generalizationLineWidth: 3,
-  // 概要连线的颜色
-  generalizationLineColor: '#fff',
-  // 背景颜色
-  backgroundColor: 'rgb(58, 65, 68)',
-  // 背景图片
-  backgroundImage:
-    'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAIAAAACDbGyAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyRpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoTWFjaW50b3NoKSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDowQzg5QTQ0NDhENzgxMUUzOENGREE4QTg0RDgzRTZDNyIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDowQzg5QTQ0NThENzgxMUUzOENGREE4QTg0RDgzRTZDNyI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOkMwOEQ1NDRGOEQ3NzExRTM4Q0ZEQThBODREODNFNkM3IiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOkMwOEQ1NDUwOEQ3NzExRTM4Q0ZEQThBODREODNFNkM3Ii8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+e9P33AAAACVJREFUeNpisXJ0YUACTAyoAMr/+eM7EGGRZ4FQ7BycEAZAgAEAHbEGtkoQm/wAAAAASUVORK5CYII=',
-  // 背景重复
-  backgroundRepeat: 'repeat',
-  backgroundSize: 'auto',
-  // 根节点样式
-  root: {
-    fillColor: 'rgb(233, 223, 152)',
-    color: '#333',
-    fontSize: 24,
-    borderRadius: 21
-  },
-  // 二级节点样式
-  second: {
-    fillColor: 'rgb(164, 197, 192)',
-    borderColor: 'transparent',
-    color: '#333',
-    fontSize: 16,
-    borderRadius: 10
-  },
-  // 三级及以下节点样式
-  node: {
-    fontSize: 12,
-    color: '#fff',
-    fontWeight: 'bold'
-  },
-  // 概要节点样式
-  generalization: {
-    fillColor: '#fff',
-    borderColor: 'transparent',
-    color: '#333'
-  }
-})

simple-mind-map/src/themes/classic2.js

@@ -1,43 +0,0 @@
-import defaultTheme from './default'
-import merge from 'deepmerge'
-
-//  经典2
-export default merge(defaultTheme, {
-  // 连线的颜色
-  lineColor: 'rgb(51, 51, 51)',
-  // 连线的粗细
-  lineWidth: 2,
-  // 概要连线的粗细
-  generalizationLineWidth: 3,
-  // 概要连线的颜色
-  generalizationLineColor: 'rgb(51, 51, 51)',
-  // 背景颜色
-  backgroundColor: '#fff',
-  // 根节点样式
-  root: {
-    fillColor: 'rgb(18, 187, 55)',
-    color: '#fff',
-    fontSize: 24,
-    borderRadius: 10
-  },
-  // 二级节点样式
-  second: {
-    fillColor: 'rgb(241, 242, 241)',
-    borderColor: 'transparent',
-    color: '#1a1a1a',
-    fontSize: 18,
-    borderRadius: 10
-  },
-  // 三级及以下节点样式
-  node: {
-    fontSize: 14,
-    color: '#1a1a1a'
-  },
-  // 概要节点样式
-  generalization: {
-    fillColor: '#fff',
-    borderColor: 'rgb(51, 51, 51)',
-    borderWidth: 2,
-    color: '#1a1a1a'
-  }
-})

simple-mind-map/src/themes/classic3.js

@@ -1,46 +0,0 @@
-import defaultTheme from './default'
-import merge from 'deepmerge'
-
-//  经典3
-export default merge(defaultTheme, {
-  // 连线的颜色
-  lineColor: 'rgb(94, 202, 110)',
-  // 连线的粗细
-  lineWidth: 2,
-  // 概要连线的粗细
-  generalizationLineWidth: 3,
-  // 概要连线的颜色
-  generalizationLineColor: '#1a1a1a',
-  // 背景颜色
-  backgroundColor: 'rgb(241, 241, 241)',
-  // 根节点样式
-  root: {
-    fillColor: 'rgb(255, 245, 214)',
-    color: '#1a1a1a',
-    fontSize: 24,
-    borderRadius: 10,
-    borderColor: 'rgb(249, 199, 84)',
-    borderWidth: 1
-  },
-  // 二级节点样式
-  second: {
-    fillColor: 'rgb(255, 245, 214)',
-    borderColor: 'rgb(249, 199, 84)',
-    borderWidth: 1,
-    color: '#1a1a1a',
-    fontSize: 18,
-    borderRadius: 10
-  },
-  // 三级及以下节点样式
-  node: {
-    fontSize: 14,
-    color: '#1a1a1a'
-  },
-  // 概要节点样式
-  generalization: {
-    fillColor: '#fff',
-    borderColor: '#1a1a1a',
-    color: '#1a1a1a',
-    borderWidth: 2
-  }
-})

simple-mind-map/src/themes/classic4.js

@@ -1,49 +0,0 @@
-import defaultTheme from './default'
-import merge from 'deepmerge'
-
-//  经典4
-export default merge(defaultTheme, {
-  // 连线的颜色
-  lineColor: 'rgb(30, 53, 86)',
-  // 连线的粗细
-  lineWidth: 2,
-  // 概要连线的粗细
-  generalizationLineWidth: 2,
-  // 概要连线的颜色
-  generalizationLineColor: 'rgb(56, 123, 233)',
-  // 背景颜色
-  backgroundColor: 'rgb(241, 241, 241)',
-  // 根节点样式
-  root: {
-    fillColor: 'rgb(30, 53, 86)',
-    color: '#fff',
-    fontSize: 24,
-    borderRadius: 10,
-    borderColor: 'rgb(189, 197, 201)',
-    borderWidth: 2
-  },
-  // 二级节点样式
-  second: {
-    fillColor: 'rgb(169, 218, 218)',
-    borderColor: 'rgb(30, 53, 86)',
-    borderWidth: 2,
-    color: '#fff',
-    fontSize: 18,
-    borderRadius: 10
-  },
-  // 三级及以下节点样式
-  node: {
-    fontSize: 14,
-    color: 'rgb(30, 53, 86)',
-    borderColor: 'rgb(30, 53, 86)',
-    borderWidth: 1,
-    marginY: 20
-  },
-  // 概要节点样式
-  generalization: {
-    fillColor: 'rgb(56, 123, 233)',
-    borderColor: 'rgb(56, 123, 233)',
-    color: '#fff',
-    borderWidth: 0
-  }
-})

simple-mind-map/src/themes/classicBlue.js

@@ -1,40 +0,0 @@
-import defaultTheme from './default'
-import merge from 'deepmerge'
-
-//  经典蓝
-export default merge(defaultTheme, {
-  // 连线的颜色
-  lineColor: 'rgb(51, 51, 51)',
-  // 连线的粗细
-  lineWidth: 2,
-  // 概要连线的粗细
-  generalizationLineWidth: 2,
-  // 概要连线的颜色
-  generalizationLineColor: 'rgb(51, 51, 51)',
-  // 背景颜色
-  backgroundColor: 'rgb(239, 248, 250)',
-  // 根节点样式
-  root: {
-    fillColor: 'rgb(255, 255, 255)',
-    color: '#222'
-  },
-  // 二级节点样式
-  second: {
-    fillColor: 'rgb(255, 255, 255)',
-    color: '#222',
-    borderColor: 'rgb(255, 255, 255)',
-    borderWidth: 1,
-    fontSize: 14
-  },
-  // 三级及以下节点样式
-  node: {
-    fontSize: 12,
-    color: '#333'
-  },
-  // 概要节点样式
-  generalization: {
-    fillColor: '#fff',
-    borderColor: 'rgb(51, 51, 51)',
-    color: '#333'
-  }
-})

simple-mind-map/src/themes/classicGreen.js

@@ -1,39 +0,0 @@
-import defaultTheme from './default'
-import merge from 'deepmerge'
-
-//  经典绿
-export default merge(defaultTheme, {
-  // 连线的颜色
-  lineColor: 'rgb(123, 199, 120)',
-  // 背景颜色
-  backgroundColor: 'rgb(236, 245, 231)',
-  // 概要连线的粗细
-  generalizationLineWidth: 2,
-  // 概要连线的颜色
-  generalizationLineColor: 'rgb(123, 199, 120)',
-  // 根节点样式
-  root: {
-    fillColor: 'rgb(253, 244, 217)',
-    color: '#222'
-  },
-  // 二级节点样式
-  second: {
-    fillColor: 'rgb(253, 244, 217)',
-    color: '#222',
-    borderColor: 'rgb(242, 200, 104)',
-    borderWidth: 1,
-    fontSize: 14
-  },
-  // 三级及以下节点样式
-  node: {
-    fontSize: 12,
-    color: '#333'
-  },
-  // 概要节点样式
-  generalization: {
-    fillColor: 'rgb(123, 199, 120)',
-    borderColor: 'transparent',
-    borderWidth: 2,
-    color: '#fff'
-  }
-})

simple-mind-map/src/themes/coffee.js

@@ -1,42 +0,0 @@
-import defaultTheme from './default'
-import merge from 'deepmerge'
-
-// 咖啡
-export default merge(defaultTheme, {
-  // 连线的颜色
-  lineColor: 'rgb(173, 123, 91)',
-  lineWidth: 4,
-  // 概要连线的粗细
-  generalizationLineWidth: 4,
-  // 概要连线的颜色
-  generalizationLineColor: 'rgb(173, 123, 91)',
-  // 根节点样式
-  root: {
-    fillColor: 'rgb(202, 117, 79)',
-    color: '#fff',
-    borderColor: '',
-    borderWidth: 0,
-    fontSize: 24
-  },
-  // 二级节点样式
-  second: {
-    fillColor: 'rgb(245, 231, 216)',
-    color: 'rgb(125, 86, 42)',
-    borderColor: '',
-    borderWidth: 0,
-    fontSize: 18
-  },
-  // 三级及以下节点样式
-  node: {
-    fontSize: 14,
-    color: 'rgb(96, 71, 47)'
-  },
-  // 概要节点样式
-  generalization: {
-    fontSize: 14,
-    fillColor: 'rgb(255, 249, 239)',
-    borderColor: 'rgb(173, 123, 91)',
-    borderWidth: 2,
-    color: 'rgb(122, 83, 44)'
-  }
-})

simple-mind-map/src/themes/courseGreen.js

@@ -1,42 +0,0 @@
-import defaultTheme from './default'
-import merge from 'deepmerge'
-
-// 课程绿
-export default merge(defaultTheme, {
-  // 连线的颜色
-  lineColor: 'rgb(113, 195, 169)',
-  lineWidth: 3,
-  // 概要连线的粗细
-  generalizationLineWidth: 3,
-  // 概要连线的颜色
-  generalizationLineColor: 'rgb(113, 195, 169)',
-  // 根节点样式
-  root: {
-    fillColor: 'rgb(16, 160, 121)',
-    color: '#fff',
-    borderColor: '',
-    borderWidth: 0,
-    fontSize: 24
-  },
-  // 二级节点样式
-  second: {
-    fillColor: 'rgb(240, 252, 249)',
-    color: 'rgb(50, 113, 96)',
-    borderColor: 'rgb(113, 195, 169)',
-    borderWidth: 2,
-    fontSize: 18
-  },
-  // 三级及以下节点样式
-  node: {
-    fontSize: 14,
-    color: 'rgb(10, 59, 43)'
-  },
-  // 概要节点样式
-  generalization: {
-    fontSize: 14,
-    fillColor: 'rgb(246, 238, 211)',
-    borderColor: '',
-    borderWidth: 0,
-    color: 'rgb(173, 91, 12)'
-  }
-})

simple-mind-map/src/themes/dark.js

@@ -1,42 +0,0 @@
-import defaultTheme from './default'
-import merge from 'deepmerge'
-
-//  暗色
-export default merge(defaultTheme, {
-  // 连线的颜色
-  lineColor: 'rgb(17, 68, 23)',
-  // 连线的粗细
-  lineWidth: 2,
-  // 概要连线的粗细
-  generalizationLineWidth: 2,
-  // 概要连线的颜色
-  generalizationLineColor: '#fff',
-  // 背景颜色
-  backgroundColor: 'rgb(15, 16, 17)',
-  // 根节点样式
-  root: {
-    fillColor: 'rgb(28, 178, 43)',
-    color: '#fff',
-    fontSize: 24,
-    borderRadius: 10
-  },
-  // 二级节点样式
-  second: {
-    fillColor: 'rgb(55, 56, 58)',
-    color: 'rgb(147,148,149)',
-    fontSize: 18,
-    borderRadius: 10,
-    borderWidth: 0
-  },
-  // 三级及以下节点样式
-  node: {
-    fontSize: 14,
-    color: 'rgb(147, 148, 149)'
-  },
-  // 概要节点样式
-  generalization: {
-    fillColor: '#fff',
-    borderColor: 'transparent',
-    color: '#333'
-  }
-})

simple-mind-map/src/themes/dark2.js

@@ -1,42 +0,0 @@
-import defaultTheme from './default'
-import merge from 'deepmerge'
-
-//  暗色2
-export default merge(defaultTheme, {
-  // 连线的颜色
-  lineColor: 'rgb(75, 81, 78)',
-  lineWidth: 3,
-  // 概要连线的粗细
-  generalizationLineWidth: 3,
-  // 概要连线的颜色
-  generalizationLineColor: 'rgb(255, 119, 34)',
-  // 背景颜色
-  backgroundColor: 'rgb(27, 31, 34)',
-  // 根节点样式
-  root: {
-    fillColor: 'rgb(36, 179, 96)',
-    color: '#fff',
-    borderColor: '',
-    borderWidth: 0
-  },
-  // 二级节点样式
-  second: {
-    fillColor: 'rgb(254, 199, 13)',
-    color: 'rgb(0, 0, 0)',
-    borderColor: '',
-    borderWidth: 0,
-    fontSize: 14
-  },
-  // 三级及以下节点样式
-  node: {
-    fontSize: 12,
-    color: 'rgb(204, 204, 204)'
-  },
-  // 概要节点样式
-  generalization: {
-    fillColor: 'transparent',
-    borderColor: 'rgb(255, 119, 34)',
-    borderWidth: 2,
-    color: 'rgb(204, 204, 204)'
-  }
-})

simple-mind-map/src/themes/earthYellow.js

@@ -1,37 +0,0 @@
-import defaultTheme from './default'
-import merge from 'deepmerge'
-
-//  泥土黄
-export default merge(defaultTheme, {
-  // 连线的颜色
-  lineColor: 'rgb(191, 147, 115)',
-  // 背景颜色
-  backgroundColor: 'rgb(251, 251, 251)',
-  // 概要连线的粗细
-  generalizationLineWidth: 1,
-  // 概要连线的颜色
-  generalizationLineColor: '#333',
-  // 根节点样式
-  root: {
-    fillColor: 'rgb(191, 147, 115)'
-  },
-  // 二级节点样式
-  second: {
-    fillColor: 'rgb(246, 242, 238)',
-    color: '#333',
-    borderColor: 'rgb(191, 147, 115)',
-    borderWidth: 1,
-    fontSize: 14
-  },
-  // 三级及以下节点样式
-  node: {
-    fontSize: 12,
-    color: '#333'
-  },
-  // 概要节点样式
-  generalization: {
-    fillColor: '#fff',
-    borderColor: '#333',
-    color: '#333'
-  }
-})

simple-mind-map/src/themes/freshGreen.js

@@ -1,31 +0,0 @@
-import defaultTheme from './default'
-import merge from 'deepmerge'
-
-//  清新绿
-export default merge(defaultTheme, {
-  // 连线的颜色
-  lineColor: '#333',
-  // 背景颜色
-  backgroundColor: '#d1f6ec',
-  // 概要连线的粗细
-  generalizationLineWidth: 1,
-  // 概要连线的颜色
-  generalizationLineColor: '#333',
-  // 根节点样式
-  root: {
-    fillColor: '#1fb27d'
-  },
-  // 二级节点样式
-  second: {
-    fillColor: '#fff',
-    color: '#565656',
-    borderColor: 'transparent',
-    borderWidth: 0
-  },
-  // 概要节点样式
-  generalization: {
-    fillColor: '#fff',
-    borderColor: '#333',
-    color: '#333'
-  }
-})

simple-mind-map/src/themes/freshRed.js

@@ -1,37 +0,0 @@
-import defaultTheme from './default'
-import merge from 'deepmerge'
-
-//  清新红
-export default merge(defaultTheme, {
-  // 连线的颜色
-  lineColor: 'rgb(191, 115, 115)',
-  // 背景颜色
-  backgroundColor: 'rgb(251, 251, 251)',
-  // 概要连线的粗细
-  generalizationLineWidth: 1,
-  // 概要连线的颜色
-  generalizationLineColor: '#333',
-  // 根节点样式
-  root: {
-    fillColor: 'rgb(191, 115, 115)'
-  },
-  // 二级节点样式
-  second: {
-    fillColor: 'rgb(246, 238, 238)',
-    color: '#333',
-    borderColor: 'rgb(191, 115, 115)',
-    borderWidth: 1,
-    fontSize: 14
-  },
-  // 三级及以下节点样式
-  node: {
-    fontSize: 12,
-    color: '#333'
-  },
-  // 概要节点样式
-  generalization: {
-    fillColor: '#fff',
-    borderColor: '#333',
-    color: '#333'
-  }
-})

simple-mind-map/src/themes/gold.js

@@ -1,41 +0,0 @@
-import defaultTheme from './default'
-import merge from 'deepmerge'
-
-//  金色vip
-export default merge(defaultTheme, {
-  // 连线的颜色
-  lineColor: 'rgb(51, 56, 62)',
-  lineWidth: 3,
-  // 概要连线的粗细
-  generalizationLineWidth: 3,
-  // 概要连线的颜色
-  generalizationLineColor: 'rgb(127, 93, 64)',
-  // 背景颜色
-  backgroundColor: '#fff',
-  // 根节点样式
-  root: {
-    fillColor: 'rgb(51, 56, 62)',
-    color: 'rgb(247, 208, 160)',
-    borderColor: '',
-    borderWidth: 0
-  },
-  // 二级节点样式
-  second: {
-    fillColor: 'rgb(239, 209, 176)',
-    color: 'rgb(81, 58, 42)',
-    borderColor: '',
-    borderWidth: 0,
-    fontSize: 14
-  },
-  // 三级及以下节点样式
-  node: {
-    fontSize: 12,
-    color: '#222'
-  },
-  // 概要节点样式
-  generalization: {
-    fillColor: 'rgb(127, 93, 64)',
-    borderColor: 'transparent',
-    color: 'rgb(255, 214, 175)'
-  }
-})

simple-mind-map/src/themes/greenLeaf.js

@@ -1,42 +0,0 @@
-import defaultTheme from './default'
-import merge from 'deepmerge'
-
-//  绿叶
-export default merge(defaultTheme, {
-  // 连线的颜色
-  lineColor: 'rgb(40, 193, 84)',
-  lineWidth: 3,
-  // 概要连线的粗细
-  generalizationLineWidth: 3,
-  // 概要连线的颜色
-  generalizationLineColor: 'rgb(251, 158, 0)',
-  // 背景颜色
-  backgroundColor: 'rgb(238, 255, 243)',
-  // 根节点样式
-  root: {
-    fillColor: 'rgb(25, 193, 73)',
-    color: '#fff',
-    borderColor: '',
-    borderWidth: 0
-  },
-  // 二级节点样式
-  second: {
-    fillColor: '#fff',
-    color: 'rgb(69, 149, 96)',
-    borderColor: '',
-    borderWidth: 0,
-    fontSize: 14
-  },
-  // 三级及以下节点样式
-  node: {
-    fontSize: 12,
-    color: '#222'
-  },
-  // 概要节点样式
-  generalization: {
-    fillColor: '#fff',
-    borderColor: 'rgb(251, 158, 0)',
-    borderWidth: 2,
-    color: 'rgb(51, 51, 51)'
-  }
-})

simple-mind-map/src/themes/index.js

@@ -1,67 +0,0 @@
-import defaultTheme from './default'
-import freshGreen from './freshGreen'
-import blueSky from './blueSky'
-import brainImpairedPink from './brainImpairedPink'
-import romanticPurple from './romanticPurple'
-import freshRed from './freshRed'
-import earthYellow from './earthYellow'
-import classic from './classic'
-import classic2 from './classic2'
-import classic3 from './classic3'
-import classic4 from './classic4'
-import dark from './dark'
-import classicGreen from './classicGreen'
-import classicBlue from './classicBlue'
-import minions from './minions'
-import pinkGrape from './pinkGrape'
-import mint from './mint'
-import gold from './gold'
-import vitalityOrange from './vitalityOrange'
-import greenLeaf from './greenLeaf'
-import dark2 from './dark2'
-import skyGreen from './skyGreen'
-import simpleBlack from './simpleBlack'
-import courseGreen from './courseGreen'
-import coffee from './coffee'
-import redSpirit from './redSpirit'
-import blackHumour from './blackHumour'
-import lateNightOffice from './lateNightOffice'
-import blackGold from './blackGold'
-import avocado from './avocado'
-import autumn from './autumn'
-import orangeJuice from './orangeJuice'
-
-export default {
-  default: defaultTheme,
-  freshGreen,
-  blueSky,
-  brainImpairedPink,
-  romanticPurple,
-  freshRed,
-  earthYellow,
-  classic,
-  classic2,
-  classic3,
-  classic4,
-  dark,
-  classicGreen,
-  classicBlue,
-  minions,
-  pinkGrape,
-  mint,
-  gold,
-  vitalityOrange,
-  greenLeaf,
-  dark2,
-  skyGreen,
-  simpleBlack,
-  courseGreen,
-  coffee,
-  redSpirit,
-  blackHumour,
-  lateNightOffice,
-  blackGold,
-  avocado,
-  autumn,
-  orangeJuice
-}

simple-mind-map/src/themes/lateNightOffice.js

@@ -1,44 +0,0 @@
-import defaultTheme from './default'
-import merge from 'deepmerge'
-
-// 深夜办公室
-export default merge(defaultTheme, {
-  // 背景颜色
-  backgroundColor: 'rgb(32, 37, 49)',
-  // 连线的颜色
-  lineColor: 'rgb(137, 167, 196)',
-  lineWidth: 3,
-  // 概要连线的粗细
-  generalizationLineWidth: 3,
-  // 概要连线的颜色
-  generalizationLineColor: 'rgb(255, 119, 34)',
-  // 根节点样式
-  root: {
-    fillColor: 'rgb(23, 153, 243)',
-    color: 'rgb(255, 255, 255)',
-    borderColor: '',
-    borderWidth: 0,
-    fontSize: 24
-  },
-  // 二级节点样式
-  second: {
-    fillColor: 'rgb(70, 78, 94)',
-    color: 'rgb(209, 210, 210)',
-    borderColor: '',
-    borderWidth: 0,
-    fontSize: 18
-  },
-  // 三级及以下节点样式
-  node: {
-    fontSize: 14,
-    color: 'rgb(204, 204, 204)'
-  },
-  // 概要节点样式
-  generalization: {
-    fontSize: 14,
-    fillColor: 'rgb(255, 119, 34)',
-    borderColor: '',
-    borderWidth: 2,
-    color: '#fff'
-  }
-})

simple-mind-map/src/themes/minions.js

@@ -1,40 +0,0 @@
-import defaultTheme from './default'
-import merge from 'deepmerge'
-
-//  小黄人
-export default merge(defaultTheme, {
-  // 连线的颜色
-  lineColor: 'rgb(51, 51, 51)',
-  lineWidth: 3,
-  // 概要连线的粗细
-  generalizationLineWidth: 3,
-  // 概要连线的颜色
-  generalizationLineColor: '#222',
-  // 背景颜色
-  backgroundColor: 'rgb(248, 215, 49)',
-  // 根节点样式
-  root: {
-    fillColor: 'rgb(55, 165, 255)',
-    borderColor: 'rgb(51, 51, 51)',
-    borderWidth: 3
-  },
-  // 二级节点样式
-  second: {
-    fillColor: 'rgb(255, 160, 36)',
-    color: '#222',
-    borderColor: 'rgb(51, 51, 51)',
-    borderWidth: 3,
-    fontSize: 14
-  },
-  // 三级及以下节点样式
-  node: {
-    fontSize: 12,
-    color: '#222'
-  },
-  // 概要节点样式
-  generalization: {
-    borderColor: '#222',
-    borderWidth: 3,
-    color: '#222'
-  }
-})

simple-mind-map/src/themes/mint.js

@@ -1,40 +0,0 @@
-import defaultTheme from './default'
-import merge from 'deepmerge'
-
-//  薄荷
-export default merge(defaultTheme, {
-  // 连线的颜色
-  lineColor: 'rgb(104, 204, 202)',
-  lineWidth: 3,
-  // 概要连线的粗细
-  generalizationLineWidth: 3,
-  // 概要连线的颜色
-  generalizationLineColor: 'rgb(90, 206, 241)',
-  // 背景颜色
-  backgroundColor: 'rgb(239, 255, 255)',
-  // 根节点样式
-  root: {
-    fillColor: 'rgb(0, 192, 184)',
-    borderColor: '',
-    borderWidth: 0
-  },
-  // 二级节点样式
-  second: {
-    fillColor: '#fff',
-    color: '#222',
-    borderColor: 'rgb(184, 235, 233)',
-    borderWidth: 2,
-    fontSize: 14
-  },
-  // 三级及以下节点样式
-  node: {
-    fontSize: 12,
-    color: '#222'
-  },
-  // 概要节点样式
-  generalization: {
-    fillColor: 'rgb(90, 206, 241)',
-    borderColor: 'transparent',
-    color: '#fff'
-  }
-})

simple-mind-map/src/themes/orangeJuice.js

@@ -1,44 +0,0 @@
-import defaultTheme from './default'
-import merge from 'deepmerge'
-
-// 橙汁
-export default merge(defaultTheme, {
-  // 背景颜色
-  backgroundColor: '#070616',
-  // 连线的颜色
-  lineColor: '#fff',
-  lineWidth: 3,
-  // 概要连线的粗细
-  generalizationLineWidth: 3,
-  // 概要连线的颜色
-  generalizationLineColor: '#fff',
-  // 根节点样式
-  root: {
-    fillColor: '#ff6811',
-    color: '#110501',
-    borderColor: '#ff6811',
-    borderWidth: 0,
-    fontSize: 24
-  },
-  // 二级节点样式
-  second: {
-    fillColor: '#070616',
-    color: '#a9a4a9',
-    borderColor: '#ff6811',
-    borderWidth: 2,
-    fontSize: 18
-  },
-  // 三级及以下节点样式
-  node: {
-    fontSize: 14,
-    color: '#a9a4a9'
-  },
-  // 概要节点样式
-  generalization: {
-    fontSize: 14,
-    fillColor: '',
-    borderColor: '#ff6811',
-    borderWidth: 2,
-    color: '#a9a4a9'
-  }
-})

simple-mind-map/src/themes/pinkGrape.js

@@ -1,40 +0,0 @@
-import defaultTheme from './default'
-import merge from 'deepmerge'
-
-//  粉红葡萄
-export default merge(defaultTheme, {
-  // 连线的颜色
-  lineColor: 'rgb(166, 101, 106)',
-  lineWidth: 3,
-  // 概要连线的粗细
-  generalizationLineWidth: 3,
-  // 概要连线的颜色
-  generalizationLineColor: '#fff',
-  // 背景颜色
-  backgroundColor: 'rgb(255, 208, 211)',
-  // 根节点样式
-  root: {
-    fillColor: 'rgb(139, 109, 225)',
-    borderColor: '',
-    borderWidth: 0
-  },
-  // 二级节点样式
-  second: {
-    fillColor: 'rgb(243, 104, 138)',
-    color: '#fff',
-    borderColor: '',
-    borderWidth: 0,
-    fontSize: 14
-  },
-  // 三级及以下节点样式
-  node: {
-    fontSize: 12,
-    color: '#222'
-  },
-  // 概要节点样式
-  generalization: {
-    fillColor: '#fff',
-    borderColor: 'transparent',
-    color: '#222'
-  }
-})

simple-mind-map/src/themes/redSpirit.js

@@ -1,44 +0,0 @@
-import defaultTheme from './default'
-import merge from 'deepmerge'
-
-// 红色精神
-export default merge(defaultTheme, {
-  // 背景颜色
-  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
-  },
-  // 二级节点样式
-  second: {
-    fillColor: 'rgb(255, 255, 255)',
-    color: 'rgb(211, 58, 21)',
-    borderColor: 'rgb(222, 101, 85)',
-    borderWidth: 2,
-    fontSize: 18
-  },
-  // 三级及以下节点样式
-  node: {
-    fontSize: 14,
-    color: 'rgb(144, 71, 43)'
-  },
-  // 概要节点样式
-  generalization: {
-    fontSize: 14,
-    fillColor: 'rgb(255, 247, 211)',
-    borderColor: 'rgb(255, 202, 162)',
-    borderWidth: 2,
-    color: 'rgb(187, 101, 69)'
-  }
-})

simple-mind-map/src/themes/romanticPurple.js

@@ -1,37 +0,0 @@
-import defaultTheme from './default'
-import merge from 'deepmerge'
-
-//  浪漫紫
-export default merge(defaultTheme, {
-  // 连线的颜色
-  lineColor: 'rgb(123, 115, 191)',
-  // 背景颜色
-  backgroundColor: 'rgb(251, 251, 251)',
-  // 概要连线的粗细
-  generalizationLineWidth: 1,
-  // 概要连线的颜色
-  generalizationLineColor: '#333',
-  // 根节点样式
-  root: {
-    fillColor: 'rgb(123, 115, 191)'
-  },
-  // 二级节点样式
-  second: {
-    fillColor: 'rgb(239, 238, 246)',
-    color: '#333',
-    borderColor: 'rgb(123, 115, 191)',
-    borderWidth: 1,
-    fontSize: 14
-  },
-  // 三级及以下节点样式
-  node: {
-    fontSize: 12,
-    color: '#333'
-  },
-  // 概要节点样式
-  generalization: {
-    fillColor: '#fff',
-    borderColor: '#333',
-    color: '#333'
-  }
-})

simple-mind-map/src/themes/simpleBlack.js

@@ -1,42 +0,0 @@
-import defaultTheme from './default'
-import merge from 'deepmerge'
-
-// 简约黑
-export default merge(defaultTheme, {
-  // 连线的颜色
-  lineColor: 'rgb(34, 34, 34)',
-  lineWidth: 4,
-  // 概要连线的粗细
-  generalizationLineWidth: 4,
-  // 概要连线的颜色
-  generalizationLineColor: 'rgb(34, 34, 34)',
-  // 根节点样式
-  root: {
-    fillColor: '#fff',
-    color: 'rgb(34, 34, 34)',
-    borderColor: 'rgb(34, 34, 34)',
-    borderWidth: 3,
-    fontSize: 24
-  },
-  // 二级节点样式
-  second: {
-    fillColor: 'rgb(241, 246, 248)',
-    color: 'rgb(34, 34, 34)',
-    borderColor: 'rgb(34, 34, 34)',
-    borderWidth: 3,
-    fontSize: 18
-  },
-  // 三级及以下节点样式
-  node: {
-    fontSize: 14,
-    color: 'rgb(34, 34, 34)'
-  },
-  // 概要节点样式
-  generalization: {
-    fontSize: 14,
-    fillColor: 'transparent',
-    borderColor: 'rgb(34, 34, 34)',
-    borderWidth: 2,
-    color: 'rgb(34, 34, 34)'
-  }
-})

simple-mind-map/src/themes/skyGreen.js

@@ -1,41 +0,0 @@
-import defaultTheme from './default'
-import merge from 'deepmerge'
-
-//  天清绿
-export default merge(defaultTheme, {
-  // 连线的颜色
-  lineColor: '#fff',
-  lineWidth: 3,
-  // 概要连线的粗细
-  generalizationLineWidth: 3,
-  // 概要连线的颜色
-  generalizationLineColor: '#fff',
-  // 背景颜色
-  backgroundColor: 'rgb(80, 156, 170)',
-  // 根节点样式
-  root: {
-    fillColor: '#fff',
-    borderColor: '',
-    borderWidth: 0,
-    color: 'rgb(65, 89, 158)'
-  },
-  // 二级节点样式
-  second: {
-    fillColor: 'rgb(251, 227, 188)',
-    color: 'rgb(65, 89, 158)',
-    borderColor: '',
-    borderWidth: 0,
-    fontSize: 14
-  },
-  // 三级及以下节点样式
-  node: {
-    fontSize: 12,
-    color: 'rgb(65, 89, 158)'
-  },
-  // 概要节点样式
-  generalization: {
-    fillColor: '#fff',
-    borderColor: 'transparent',
-    color: 'rgb(65, 89, 158)'
-  }
-})

simple-mind-map/src/themes/vitalityOrange.js

@@ -1,41 +0,0 @@
-import defaultTheme from './default'
-import merge from 'deepmerge'
-
-//  活力橙
-export default merge(defaultTheme, {
-  // 连线的颜色
-  lineColor: 'rgb(254, 146, 0)',
-  lineWidth: 3,
-  // 概要连线的粗细
-  generalizationLineWidth: 3,
-  // 概要连线的颜色
-  generalizationLineColor: 'rgb(255, 222, 69)',
-  // 背景颜色
-  backgroundColor: 'rgb(255, 246, 243)',
-  // 根节点样式
-  root: {
-    fillColor: 'rgb(255, 112, 52)',
-    color: '#fff',
-    borderColor: '',
-    borderWidth: 0
-  },
-  // 二级节点样式
-  second: {
-    fillColor: '#fff',
-    color: 'rgb(51, 51, 51)',
-    borderColor: '',
-    borderWidth: 0,
-    fontSize: 14
-  },
-  // 三级及以下节点样式
-  node: {
-    fontSize: 12,
-    color: '#222'
-  },
-  // 概要节点样式
-  generalization: {
-    fillColor: 'rgb(255, 222, 69)',
-    borderColor: 'transparent',
-    color: 'rgb(51, 51, 51)'
-  }
-})

simple-mind-map/src/utils/index.js

@@ -5,6 +5,7 @@ import {
 } from '../constants/constant'
 import MersenneTwister from './mersenneTwister'
 import { ForeignObject } from '@svgdotjs/svg.js'
+import merge from 'deepmerge'
 
 //  深度优先遍历树
 export const walk = (
@@ -75,11 +76,11 @@ export const resizeImgSizeByOriginRatio = (
   let nRatio = width / height
   let mRatio = newWidth / newHeight
   if (nRatio > mRatio) {
-    // 固定高度
-    arr = [nRatio * newHeight, newHeight]
-  } else {
     // 固定宽度
     arr = [newWidth, newWidth / nRatio]
+  } else {
+    // 固定高度
+    arr = [nRatio * newHeight, newHeight]
   }
   return arr
 }
@@ -94,11 +95,11 @@ export const resizeImgSize = (width, height, maxWidth, maxHeight) => {
     } else {
       let mRatio = maxWidth / maxHeight
       if (nRatio > mRatio) {
-        // 固定高度
-        arr = [nRatio * maxHeight, maxHeight]
-      } else {
         // 固定宽度
         arr = [maxWidth, maxWidth / nRatio]
+      } else {
+        // 固定高度
+        arr = [nRatio * maxHeight, maxHeight]
       }
     }
   } else if (maxWidth) {
@@ -1184,9 +1185,18 @@ export const handleInputPasteText = (e, text) => {
   // 去除格式
   text = getTextFromHtml(text)
   // 去除换行
-  text = text.replaceAll(/\n/g, '')
-  const node = document.createTextNode(text)
-  selection.getRangeAt(0).insertNode(node)
+  // text = text.replaceAll(/\n/g, '')
+  const textArr = text.split(/\n/g)
+  const fragment = document.createDocumentFragment()
+  textArr.forEach((item, index) => {
+    const node = document.createTextNode(item)
+    fragment.appendChild(node)
+    if (index < textArr.length - 1) {
+      const br = document.createElement('br')
+      fragment.appendChild(br)
+    }
+  })
+  selection.getRangeAt(0).insertNode(fragment)
   selection.collapseToEnd()
 }
 
@@ -1601,3 +1611,12 @@ export const sortNodeList = nodeList => {
   })
   return nodeList
 }
+
+// 合并主题配置
+export const mergeTheme = (dest, source) => {
+  return merge(dest, source, {
+    arrayMerge: (destinationArray, sourceArray) => {
+      return sourceArray
+    }
+  })
+}

web/package-lock.json

@@ -14,6 +14,7 @@
         "element-ui": "^2.15.1",
         "highlight.js": "^10.7.3",
         "katex": "^0.16.9",
+        "simple-mind-map-plugin-themes": "^1.0.0",
         "v-viewer": "^1.6.4",
         "vue": "^2.6.11",
         "vue-i18n": "^8.27.2",
@@ -1812,7 +1813,6 @@
       "cpu": [
         "arm"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "android"
@@ -1828,7 +1828,6 @@
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "android"
@@ -1844,7 +1843,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "android"
@@ -1860,7 +1858,6 @@
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "darwin"
@@ -1876,7 +1873,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "darwin"
@@ -1892,7 +1888,6 @@
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "freebsd"
@@ -1908,7 +1903,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "freebsd"
@@ -1924,7 +1918,6 @@
       "cpu": [
         "arm"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "linux"
@@ -1940,7 +1933,6 @@
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "linux"
@@ -1956,7 +1948,6 @@
       "cpu": [
         "ia32"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "linux"
@@ -1972,7 +1963,6 @@
       "cpu": [
         "loong64"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "linux"
@@ -1988,7 +1978,6 @@
       "cpu": [
         "mips64el"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "linux"
@@ -2004,7 +1993,6 @@
       "cpu": [
         "ppc64"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "linux"
@@ -2020,7 +2008,6 @@
       "cpu": [
         "riscv64"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "linux"
@@ -2036,7 +2023,6 @@
       "cpu": [
         "s390x"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "linux"
@@ -2052,7 +2038,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "linux"
@@ -2068,7 +2053,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "netbsd"
@@ -2084,7 +2068,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "openbsd"
@@ -2100,7 +2083,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "sunos"
@@ -2116,7 +2098,6 @@
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "win32"
@@ -2132,7 +2113,6 @@
       "cpu": [
         "ia32"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "win32"
@@ -2148,7 +2128,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "optional": true,
       "os": [
         "win32"
@@ -6847,7 +6826,6 @@
       "version": "0.17.19",
       "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.17.19.tgz",
       "integrity": "sha512-XQ0jAPFkK/u3LcVRcvVHQcTIqD6E2H1fvZMA5dQPSOWb3suUbWbfbRf94pjc0bNzRYLfIrDRQXr7X+LHIm5oHw==",
-      "dev": true,
       "hasInstallScript": true,
       "bin": {
         "esbuild": "bin/esbuild"
@@ -13616,6 +13594,14 @@
       "integrity": "sha512-wnD2ZE+l+SPC/uoS0vXeE9L1+0wuaMqKlfz9AMUo38JsyLSBWSFcHR1Rri62LZc12vLr1gb3jl7iwQhgwpAbGQ==",
       "dev": true
     },
+    "node_modules/simple-mind-map-plugin-themes": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/simple-mind-map-plugin-themes/-/simple-mind-map-plugin-themes-1.0.0.tgz",
+      "integrity": "sha512-v+L28HfRK1B+qw+76ueRGbbAxnKmGhVNuHL+oCWTE0qbdvaqSAszI+yOxqeTNXJmBgzrjeJXpJ831/gDiWUKaQ==",
+      "dependencies": {
+        "esbuild": "^0.17.15"
+      }
+    },
     "node_modules/simple-swizzle": {
       "version": "0.2.2",
       "resolved": "https://registry.npmjs.org/simple-swizzle/-/simple-swizzle-0.2.2.tgz",
@@ -18560,154 +18546,132 @@
       "version": "0.17.19",
       "resolved": "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.17.19.tgz",
       "integrity": "sha512-rIKddzqhmav7MSmoFCmDIb6e2W57geRsM94gV2l38fzhXMwq7hZoClug9USI2pFRGL06f4IOPHHpFNOkWieR8A==",
-      "dev": true,
       "optional": true
     },
     "@esbuild/android-arm64": {
       "version": "0.17.19",
       "resolved": "https://registry.npmjs.org/@esbuild/android-arm64/-/android-arm64-0.17.19.tgz",
       "integrity": "sha512-KBMWvEZooR7+kzY0BtbTQn0OAYY7CsiydT63pVEaPtVYF0hXbUaOyZog37DKxK7NF3XacBJOpYT4adIJh+avxA==",
-      "dev": true,
       "optional": true
     },
     "@esbuild/android-x64": {
       "version": "0.17.19",
       "resolved": "https://registry.npmjs.org/@esbuild/android-x64/-/android-x64-0.17.19.tgz",
       "integrity": "sha512-uUTTc4xGNDT7YSArp/zbtmbhO0uEEK9/ETW29Wk1thYUJBz3IVnvgEiEwEa9IeLyvnpKrWK64Utw2bgUmDveww==",
-      "dev": true,
       "optional": true
     },
     "@esbuild/darwin-arm64": {
       "version": "0.17.19",
       "resolved": "https://registry.npmjs.org/@esbuild/darwin-arm64/-/darwin-arm64-0.17.19.tgz",
       "integrity": "sha512-80wEoCfF/hFKM6WE1FyBHc9SfUblloAWx6FJkFWTWiCoht9Mc0ARGEM47e67W9rI09YoUxJL68WHfDRYEAvOhg==",
-      "dev": true,
       "optional": true
     },
     "@esbuild/darwin-x64": {
       "version": "0.17.19",
       "resolved": "https://registry.npmjs.org/@esbuild/darwin-x64/-/darwin-x64-0.17.19.tgz",
       "integrity": "sha512-IJM4JJsLhRYr9xdtLytPLSH9k/oxR3boaUIYiHkAawtwNOXKE8KoU8tMvryogdcT8AU+Bflmh81Xn6Q0vTZbQw==",
-      "dev": true,
       "optional": true
     },
     "@esbuild/freebsd-arm64": {
       "version": "0.17.19",
       "resolved": "https://registry.npmjs.org/@esbuild/freebsd-arm64/-/freebsd-arm64-0.17.19.tgz",
       "integrity": "sha512-pBwbc7DufluUeGdjSU5Si+P3SoMF5DQ/F/UmTSb8HXO80ZEAJmrykPyzo1IfNbAoaqw48YRpv8shwd1NoI0jcQ==",
-      "dev": true,
       "optional": true
     },
     "@esbuild/freebsd-x64": {
       "version": "0.17.19",
       "resolved": "https://registry.npmjs.org/@esbuild/freebsd-x64/-/freebsd-x64-0.17.19.tgz",
       "integrity": "sha512-4lu+n8Wk0XlajEhbEffdy2xy53dpR06SlzvhGByyg36qJw6Kpfk7cp45DR/62aPH9mtJRmIyrXAS5UWBrJT6TQ==",
-      "dev": true,
       "optional": true
     },
     "@esbuild/linux-arm": {
       "version": "0.17.19",
       "resolved": "https://registry.npmjs.org/@esbuild/linux-arm/-/linux-arm-0.17.19.tgz",
       "integrity": "sha512-cdmT3KxjlOQ/gZ2cjfrQOtmhG4HJs6hhvm3mWSRDPtZ/lP5oe8FWceS10JaSJC13GBd4eH/haHnqf7hhGNLerA==",
-      "dev": true,
       "optional": true
     },
     "@esbuild/linux-arm64": {
       "version": "0.17.19",
       "resolved": "https://registry.npmjs.org/@esbuild/linux-arm64/-/linux-arm64-0.17.19.tgz",
       "integrity": "sha512-ct1Tg3WGwd3P+oZYqic+YZF4snNl2bsnMKRkb3ozHmnM0dGWuxcPTTntAF6bOP0Sp4x0PjSF+4uHQ1xvxfRKqg==",
-      "dev": true,
       "optional": true
     },
     "@esbuild/linux-ia32": {
       "version": "0.17.19",
       "resolved": "https://registry.npmjs.org/@esbuild/linux-ia32/-/linux-ia32-0.17.19.tgz",
       "integrity": "sha512-w4IRhSy1VbsNxHRQpeGCHEmibqdTUx61Vc38APcsRbuVgK0OPEnQ0YD39Brymn96mOx48Y2laBQGqgZ0j9w6SQ==",
-      "dev": true,
       "optional": true
     },
     "@esbuild/linux-loong64": {
       "version": "0.17.19",
       "resolved": "https://registry.npmjs.org/@esbuild/linux-loong64/-/linux-loong64-0.17.19.tgz",
       "integrity": "sha512-2iAngUbBPMq439a+z//gE+9WBldoMp1s5GWsUSgqHLzLJ9WoZLZhpwWuym0u0u/4XmZ3gpHmzV84PonE+9IIdQ==",
-      "dev": true,
       "optional": true
     },
     "@esbuild/linux-mips64el": {
       "version": "0.17.19",
       "resolved": "https://registry.npmjs.org/@esbuild/linux-mips64el/-/linux-mips64el-0.17.19.tgz",
       "integrity": "sha512-LKJltc4LVdMKHsrFe4MGNPp0hqDFA1Wpt3jE1gEyM3nKUvOiO//9PheZZHfYRfYl6AwdTH4aTcXSqBerX0ml4A==",
-      "dev": true,
       "optional": true
     },
     "@esbuild/linux-ppc64": {
       "version": "0.17.19",
       "resolved": "https://registry.npmjs.org/@esbuild/linux-ppc64/-/linux-ppc64-0.17.19.tgz",
       "integrity": "sha512-/c/DGybs95WXNS8y3Ti/ytqETiW7EU44MEKuCAcpPto3YjQbyK3IQVKfF6nbghD7EcLUGl0NbiL5Rt5DMhn5tg==",
-      "dev": true,
       "optional": true
     },
     "@esbuild/linux-riscv64": {
       "version": "0.17.19",
       "resolved": "https://registry.npmjs.org/@esbuild/linux-riscv64/-/linux-riscv64-0.17.19.tgz",
       "integrity": "sha512-FC3nUAWhvFoutlhAkgHf8f5HwFWUL6bYdvLc/TTuxKlvLi3+pPzdZiFKSWz/PF30TB1K19SuCxDTI5KcqASJqA==",
-      "dev": true,
       "optional": true
     },
     "@esbuild/linux-s390x": {
       "version": "0.17.19",
       "resolved": "https://registry.npmjs.org/@esbuild/linux-s390x/-/linux-s390x-0.17.19.tgz",
       "integrity": "sha512-IbFsFbxMWLuKEbH+7sTkKzL6NJmG2vRyy6K7JJo55w+8xDk7RElYn6xvXtDW8HCfoKBFK69f3pgBJSUSQPr+4Q==",
-      "dev": true,
       "optional": true
     },
     "@esbuild/linux-x64": {
       "version": "0.17.19",
       "resolved": "https://registry.npmjs.org/@esbuild/linux-x64/-/linux-x64-0.17.19.tgz",
       "integrity": "sha512-68ngA9lg2H6zkZcyp22tsVt38mlhWde8l3eJLWkyLrp4HwMUr3c1s/M2t7+kHIhvMjglIBrFpncX1SzMckomGw==",
-      "dev": true,
       "optional": true
     },
     "@esbuild/netbsd-x64": {
       "version": "0.17.19",
       "resolved": "https://registry.npmjs.org/@esbuild/netbsd-x64/-/netbsd-x64-0.17.19.tgz",
       "integrity": "sha512-CwFq42rXCR8TYIjIfpXCbRX0rp1jo6cPIUPSaWwzbVI4aOfX96OXY8M6KNmtPcg7QjYeDmN+DD0Wp3LaBOLf4Q==",
-      "dev": true,
       "optional": true
     },
     "@esbuild/openbsd-x64": {
       "version": "0.17.19",
       "resolved": "https://registry.npmjs.org/@esbuild/openbsd-x64/-/openbsd-x64-0.17.19.tgz",
       "integrity": "sha512-cnq5brJYrSZ2CF6c35eCmviIN3k3RczmHz8eYaVlNasVqsNY+JKohZU5MKmaOI+KkllCdzOKKdPs762VCPC20g==",
-      "dev": true,
       "optional": true
     },
     "@esbuild/sunos-x64": {
       "version": "0.17.19",
       "resolved": "https://registry.npmjs.org/@esbuild/sunos-x64/-/sunos-x64-0.17.19.tgz",
       "integrity": "sha512-vCRT7yP3zX+bKWFeP/zdS6SqdWB8OIpaRq/mbXQxTGHnIxspRtigpkUcDMlSCOejlHowLqII7K2JKevwyRP2rg==",
-      "dev": true,
       "optional": true
     },
     "@esbuild/win32-arm64": {
       "version": "0.17.19",
       "resolved": "https://registry.npmjs.org/@esbuild/win32-arm64/-/win32-arm64-0.17.19.tgz",
       "integrity": "sha512-yYx+8jwowUstVdorcMdNlzklLYhPxjniHWFKgRqH7IFlUEa0Umu3KuYplf1HUZZ422e3NU9F4LGb+4O0Kdcaag==",
-      "dev": true,
       "optional": true
     },
     "@esbuild/win32-ia32": {
       "version": "0.17.19",
       "resolved": "https://registry.npmjs.org/@esbuild/win32-ia32/-/win32-ia32-0.17.19.tgz",
       "integrity": "sha512-eggDKanJszUtCdlVs0RB+h35wNlb5v4TWEkq4vZcmVt5u/HiDZrTXe2bWFQUez3RgNHwx/x4sk5++4NSSicKkw==",
-      "dev": true,
       "optional": true
     },
     "@esbuild/win32-x64": {
       "version": "0.17.19",
       "resolved": "https://registry.npmjs.org/@esbuild/win32-x64/-/win32-x64-0.17.19.tgz",
       "integrity": "sha512-lAhycmKnVOuRYNtRtatQR1LPQf2oYCkRGkSFnseDAKPl8lu5SOsK/e1sXe5a0Pc5kHIHe6P2I/ilntNv2xf3cA==",
-      "dev": true,
       "optional": true
     },
     "@hapi/address": {
@@ -22487,7 +22451,6 @@
       "version": "0.17.19",
       "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.17.19.tgz",
       "integrity": "sha512-XQ0jAPFkK/u3LcVRcvVHQcTIqD6E2H1fvZMA5dQPSOWb3suUbWbfbRf94pjc0bNzRYLfIrDRQXr7X+LHIm5oHw==",
-      "dev": true,
       "requires": {
         "@esbuild/android-arm": "0.17.19",
         "@esbuild/android-arm64": "0.17.19",
@@ -27888,6 +27851,14 @@
       "integrity": "sha512-wnD2ZE+l+SPC/uoS0vXeE9L1+0wuaMqKlfz9AMUo38JsyLSBWSFcHR1Rri62LZc12vLr1gb3jl7iwQhgwpAbGQ==",
       "dev": true
     },
+    "simple-mind-map-plugin-themes": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/simple-mind-map-plugin-themes/-/simple-mind-map-plugin-themes-1.0.0.tgz",
+      "integrity": "sha512-v+L28HfRK1B+qw+76ueRGbbAxnKmGhVNuHL+oCWTE0qbdvaqSAszI+yOxqeTNXJmBgzrjeJXpJ831/gDiWUKaQ==",
+      "requires": {
+        "esbuild": "^0.17.15"
+      }
+    },
     "simple-swizzle": {
       "version": "0.2.2",
       "resolved": "https://registry.npmjs.org/simple-swizzle/-/simple-swizzle-0.2.2.tgz",

web/package.json

@@ -17,6 +17,7 @@
     "element-ui": "^2.15.1",
     "highlight.js": "^10.7.3",
     "katex": "^0.16.9",
+    "simple-mind-map-plugin-themes": "^1.0.0",
     "v-viewer": "^1.6.4",
     "vue": "^2.6.11",
     "vue-i18n": "^8.27.2",

web/scripts/transformMdToVue.js

@@ -1,33 +0,0 @@
-const path = require('path')
-const fs = require('fs')
-const hljs = require('highlight.js')
-const md = require('markdown-it')({
-  html: true,
-  xhtmlOut: true,
-  highlight: function(str, lang) {
-    if (lang && hljs.getLanguage(lang)) {
-      try {
-        return (
-          '<pre class="hljs"><code>' +
-          hljs.highlight(str, {
-            language: lang, 
-            ignoreIllegals: true
-          }).value +
-          '</code></pre>'
-        )
-      } catch (__) {}
-    }
-
-    return (
-      '<pre class="hljs"><code>' + md.utils.escapeHtml(str) + '</code></pre>'
-    )
-  }
-}).use(require('markdown-it-checkbox'))
-
-const templatePath = path.join(__dirname, '../src/pages/Doc/Template.vue')
-
-exports.transformMdToVue = (content) => {
-    let result = md.render(content)
-    let template = fs.readFileSync(templatePath, 'utf-8')
-    return template.replace('$$$$', result)
-}

web/src/assets/icon-font/iconfont.css

@@ -1,8 +1,8 @@
 @font-face {
   font-family: "iconfont"; /* Project id 2479351 */
-  src: url('iconfont.woff2?t=1719815803051') format('woff2'),
-       url('iconfont.woff?t=1719815803051') format('woff'),
-       url('iconfont.ttf?t=1719815803051') format('truetype');
+  src: url('iconfont.woff2?t=1726022313538') format('woff2'),
+       url('iconfont.woff?t=1726022313538') format('woff'),
+       url('iconfont.ttf?t=1726022313538') format('truetype');
 }
 
 .iconfont {
@@ -13,6 +13,14 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
+.iconfile-excel:before {
+  content: "\e7b7";
+}
+
+.iconfreemind:before {
+  content: "\e97d";
+}
+
 .iconwaikuang:before {
   content: "\e640";
 }