打包0.9.10

README.md

@@ -11,19 +11,17 @@
 
 本项目包含两部分：
 
-1.一个 js 思维导图库，不依赖任何框架，你可以使用它来快速完成 Web 思维导图产品的开发。
+1.一个 js 思维导图库，不依赖任何框架，可以使用它来快速完成 Web 思维导图产品的开发。
 
 开发文档：[https://wanglin2.github.io/mind-map/#/doc/zh/](https://wanglin2.github.io/mind-map/#/doc/zh/)。
 
-2.一个 Web 思维导图，基于思维导图库、Vue2.x、ElementUI 开发，可以操作电脑本地文件，所以你可以直接把它当做一个在线版思维导图应用使用，如果觉得 github 的响应速度慢，你也可以部署到你的服务器上。
+2.一个 Web 思维导图，基于思维导图库、Vue2.x、ElementUI 开发，可以操作电脑本地文件，可以当做一个在线版思维导图应用使用，也可以自部署和二次开发。
 
 在线地址：[https://wanglin2.github.io/mind-map/](https://wanglin2.github.io/mind-map/)。
 
-另外也提供了客户端可供下载使用，支持`Windows`、`Mac`及`Linux`，下载地址：
+此外也提供了客户端可供下载使用，支持`Windows`、`Mac`及`Linux`，下载地址：
 
-Github：[releases](https://github.com/wanglin2/mind-map/releases)。
-
-百度云盘：[地址](https://pan.baidu.com/s/1huasEbKsGNH2Af68dvWiOg?pwd=3bp3)。
+Github：[releases](https://github.com/wanglin2/mind-map/releases)。百度云盘：[地址](https://pan.baidu.com/s/1huasEbKsGNH2Af68dvWiOg?pwd=3bp3)。
 
 > 客户端版本会落后于在线版本，尝试最新功能请优先使用在线版。
 
@@ -86,9 +84,7 @@ const mindMap = new MindMap({
 
 # License
 
-[MIT](./LICENSE)
-
-保留`mind-map`版权声明的情况下可随意商用。
+[MIT](./LICENSE)。保留`mind-map`版权声明的情况下可随意商用。
 
 # 微信交流群
 
@@ -104,8 +100,6 @@ const mindMap = new MindMap({
 
 开源不易，如果本项目有帮助到你的话，可以考虑请作者喝杯咖啡~
 
-> 厚椰乳一盒 + 纯牛奶半盒 + 冰块 + 咖啡液 = 生椰拿铁 yyds
-
 > 推荐使用支付宝，微信获取不到头像。转账请备注【思维导图】。
 
 <p>
@@ -298,4 +292,32 @@ const mindMap = new MindMap({
         <img src="./web/src/assets/avatar/pluvet.jpg" style="width: 50px;height: 50px;" />
         <span>pluvet</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>
+    <span>
+        <img src="./web/src/assets/avatar/default.png" style="width: 50px;height: 50px;" />
+        <span>SR</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>LiuJL</span>
+    </span>
+    <span>
+        <img src="./web/src/assets/avatar/L.jpg" style="width: 50px;height: 50px;" />
+        <span>L</span>
+    </span>
+    <span>
+        <img src="./web/src/assets/avatar/default.png" style="width: 50px;height: 50px;" />
+        <span>sunniberg</span>
+    </span>
 </p>

dist/js/chunk-2d0a4b03.js

@@ -0,0 +1 @@
+(window["webpackJsonp"]=window["webpackJsonp"]||[]).push([["chunk-2d0a4b03"],{"0805":function(t,s,_){"use strict";_.r(s);var a=function(){var t=this;t._self._c;return t._m(0)},v=[function(){var t=this,s=t._self._c;return s("div",[s("h1",[t._v("快捷键操作如何传递自定义参数")]),s("p",[t._v("库提供了很多命令，比如插入子节点的"),s("code",[t._v("INSERT_CHILD_NODE")]),t._v("等，这些命令大多可以接收一定参数，比如在插入节点时我想指定初始文本和节点uid，那么可以这样调用：")]),s("pre",{staticClass:"hljs"},[s("code",[t._v("mindMap.execCommand("),s("span",{staticClass:"hljs-string"},[t._v("'INSERT_CHILD_NODE'")]),t._v(", "),s("span",{staticClass:"hljs-literal"},[t._v("true")]),t._v(", [], {\n    "),s("span",{staticClass:"hljs-attr"},[t._v("text")]),t._v(": "),s("span",{staticClass:"hljs-string"},[t._v("'初始文本'")]),t._v(",\n    "),s("span",{staticClass:"hljs-attr"},[t._v("uid")]),t._v(": "),s("span",{staticClass:"hljs-string"},[t._v("'xxx'")]),t._v("\n})\n")])]),s("p",[t._v("但是同时库内部也默认注册了很多快捷键，比如插入下级节点的"),s("code",[t._v("Tab")]),t._v("快捷键，很遗憾，目前快捷键操作无法让你传入自定义的参数，那么该怎么办呢，可以这样处理，首先确定你要给什么快捷键传入参数，比如"),s("code",[t._v("Tab")]),t._v("，那么首先可以调用如下方法删除库默认注册的快捷键：")]),s("pre",{staticClass:"hljs"},[s("code",[s("span",{staticClass:"hljs-keyword"},[t._v("const")]),t._v(" keyName = "),s("span",{staticClass:"hljs-string"},[t._v("'Tab'")]),t._v("\nmindMap.keyCommand.removeShortcut(keyName)\n")])]),s("p",[t._v("然后再重新注册即可：")]),s("pre",{staticClass:"hljs"},[s("code",[t._v("mindMap.keyCommand.addShortcut(keyName, "),s("span",{staticClass:"hljs-function"},[t._v("() =>")]),t._v(" {\n    mindMap.execCommand("),s("span",{staticClass:"hljs-string"},[t._v("'INSERT_CHILD_NODE'")]),t._v(", "),s("span",{staticClass:"hljs-literal"},[t._v("true")]),t._v(", [], {\n        "),s("span",{staticClass:"hljs-attr"},[t._v("text")]),t._v(": "),s("span",{staticClass:"hljs-string"},[t._v("'初始文本'")]),t._v(",\n        "),s("span",{staticClass:"hljs-attr"},[t._v("uid")]),t._v(": "),s("span",{staticClass:"hljs-string"},[t._v("'xxx'")]),t._v("\n    })\n})\n")])]),s("p",[t._v("库内部默认注册的快捷键对应的命令一览：")]),s("table",[s("thead",[s("tr",[s("th",[t._v("快捷键")]),s("th",[t._v("命令")])])]),s("tbody",[s("tr",[s("td",[t._v("Control+z")]),s("td",[t._v("BACK")])]),s("tr",[s("td",[t._v("Control+y")]),s("td",[t._v("FORWARD")])]),s("tr",[s("td",[t._v("Tab")]),s("td",[t._v("INSERT_CHILD_NODE")])]),s("tr",[s("td",[t._v("Insert")]),s("td",[t._v("INSERT_CHILD_NODE")])]),s("tr",[s("td",[t._v("Enter")]),s("td",[t._v("INSERT_NODE")])]),s("tr",[s("td",[t._v("Shift+Tab")]),s("td",[t._v("INSERT_PARENT_NODE")])]),s("tr",[s("td",[t._v("Control+g")]),s("td",[t._v("ADD_GENERALIZATION")])]),s("tr",[s("td",[t._v("Del或Backspace")]),s("td",[t._v("REMOVE_NODE")])]),s("tr",[s("td",[t._v("Shift+Backspace")]),s("td",[t._v("REMOVE_CURRENT_NODE")])]),s("tr",[s("td",[t._v("Control+a")]),s("td",[t._v("SELECT_ALL")])]),s("tr",[s("td",[t._v("Control+l")]),s("td",[t._v("RESET_LAYOUT")])]),s("tr",[s("td",[t._v("Control+Up")]),s("td",[t._v("UP_NODE")])]),s("tr",[s("td",[t._v("Control+Down")]),s("td",[t._v("DOWN_NODE")])])])])])}],n={},l=n,r=_("2877"),d=Object(r["a"])(l,a,v,!1,null,null,null);s["default"]=d.exports}}]);

dist/js/chunk-2d0c213a.js

@@ -0,0 +1 @@
+(window["webpackJsonp"]=window["webpackJsonp"]||[]).push([["chunk-2d0c213a"],{4987:function(s,n,a){"use strict";a.r(n);var i=function(){var s=this;s._self._c;return s._m(0)},t=[function(){var s=this,n=s._self._c;return n("div",[n("h1",[s._v("RainbowLines插件")]),n("blockquote",[n("p",[s._v("v0.9.9+")])]),n("p",[s._v("该插件用于实现彩虹线条。")]),n("p",[s._v("开启彩虹线条及自定义颜色可以通过实例化选项"),n("code",[s._v("rainbowLinesConfig")]),s._v("设置。")]),n("p",[s._v("默认的颜色列表如下：")]),n("pre",{staticClass:"hljs"},[n("code",[s._v("[\n  'rgb(255, 213, 73)',\n  'rgb(255, 136, 126)',\n  'rgb(107, 225, 141)',\n  'rgb(151, 171, 255)',\n  'rgb(129, 220, 242)',\n  'rgb(255, 163, 125)',\n  'rgb(152, 132, 234)'\n]\n")])]),n("h2",[s._v("注册")]),n("pre",{staticClass:"hljs"},[n("code",[n("span",{staticClass:"hljs-keyword"},[s._v("import")]),s._v(" MindMap "),n("span",{staticClass:"hljs-keyword"},[s._v("from")]),s._v(" "),n("span",{staticClass:"hljs-string"},[s._v("'simple-mind-map'")]),s._v("\n"),n("span",{staticClass:"hljs-keyword"},[s._v("import")]),s._v(" RainbowLines "),n("span",{staticClass:"hljs-keyword"},[s._v("from")]),s._v(" "),n("span",{staticClass:"hljs-string"},[s._v("'simple-mind-map/src/plugins/RainbowLines.js'")]),s._v("\nMindMap.usePlugin(RainbowLines)\n")])]),n("p",[s._v("注册完且实例化"),n("code",[s._v("MindMap")]),s._v("后可通过"),n("code",[s._v("mindMap.rainbowLines")]),s._v("获取到该实例。")]),n("h2",[s._v("方法")]),n("h3",[s._v("updateRainLinesConfig(config = {})")]),n("p",[s._v("如果你在通过实例化选项"),n("code",[s._v("rainbowLinesConfig")]),s._v("设置了彩虹线条后想修改，那么可以使用该方法，参数"),n("code",[s._v("config")]),s._v("同"),n("code",[s._v("rainbowLinesConfig")]),s._v("。")]),n("pre",{staticClass:"hljs"},[n("code",[s._v("{\n    "),n("span",{staticClass:"hljs-attr"},[s._v("open")]),s._v(": "),n("span",{staticClass:"hljs-literal"},[s._v("false")]),s._v(","),n("span",{staticClass:"hljs-comment"},[s._v("// 是否开启彩虹线条")]),s._v("\n    "),n("span",{staticClass:"hljs-attr"},[s._v("colorsList")]),s._v(": []"),n("span",{staticClass:"hljs-comment"},[s._v("// 自定义彩虹线条的颜色列表，如果不设置，会使用默认颜色列表")]),s._v("\n}\n")])]),n("h3",[s._v("getColorsList()")]),n("p",[s._v("获取当前使用的彩虹线条颜色列表。")]),n("h3",[s._v("getNodeColor(node)")]),n("p",[s._v("获取指定的节点实例对应的彩虹线条颜色。")]),n("h3",[s._v("getSecondLayerAncestor(node)")]),n("p",[s._v("获取一个节点实例的第二层级的祖先节点实例。")])])}],v={},_=v,o=a("2877"),e=Object(o["a"])(_,i,t,!1,null,null,null);n["default"]=e.exports}}]);

dist/js/chunk-2d0dd7d2.js

@@ -0,0 +1 @@
+(window["webpackJsonp"]=window["webpackJsonp"]||[]).push([["chunk-2d0dd7d2"],{8235:function(n,s,t){"use strict";t.r(s);var i=function(){var n=this;n._self._c;return n._m(0)},e=[function(){var n=this,s=n._self._c;return s("div",[s("h1",[n._v("RainbowLines plugin")]),s("blockquote",[s("p",[n._v("v0.9.9+")])]),s("p",[n._v("This plugin is used to implement rainbow lines.")]),s("p",[n._v("Enabling rainbow lines and custom colors can be set through the instantiation option 'rainbowLinesConfig'.")]),s("p",[n._v("The default color list is as follows:")]),s("pre",{staticClass:"hljs"},[s("code",[n._v("[\n  'rgb(255, 213, 73)',\n  'rgb(255, 136, 126)',\n  'rgb(107, 225, 141)',\n  'rgb(151, 171, 255)',\n  'rgb(129, 220, 242)',\n  'rgb(255, 163, 125)',\n  'rgb(152, 132, 234)'\n]\n")])]),s("h2",[n._v("Register")]),s("pre",{staticClass:"hljs"},[s("code",[s("span",{staticClass:"hljs-keyword"},[n._v("import")]),n._v(" MindMap "),s("span",{staticClass:"hljs-keyword"},[n._v("from")]),n._v(" "),s("span",{staticClass:"hljs-string"},[n._v("'simple-mind-map'")]),n._v("\n"),s("span",{staticClass:"hljs-keyword"},[n._v("import")]),n._v(" RainbowLines "),s("span",{staticClass:"hljs-keyword"},[n._v("from")]),n._v(" "),s("span",{staticClass:"hljs-string"},[n._v("'simple-mind-map/src/plugins/RainbowLines.js'")]),n._v("\nMindMap.usePlugin(RainbowLines)\n")])]),s("p",[n._v("After registration and instantiation of "),s("code",[n._v("MindMap")]),n._v(", the instance can be obtained through "),s("code",[n._v("mindMap.rainbowLines")]),n._v(".")]),s("h2",[n._v("Method")]),s("h3",[n._v("updateRainLinesConfig(config = {})")]),s("p",[n._v("If you want to modify the rainbow lines after setting them through the instantiation option 'rainbowLinesConfig', you can use this method, option "),s("code",[n._v("config")]),n._v(" is same with "),s("code",[n._v("rainbowLinesConfig")]),n._v("。")]),s("pre",{staticClass:"hljs"},[s("code",[n._v("{\n    "),s("span",{staticClass:"hljs-attr"},[n._v("open")]),n._v(": "),s("span",{staticClass:"hljs-literal"},[n._v("false")]),n._v(","),s("span",{staticClass:"hljs-comment"},[n._v("// Is turn on rainbow lines")]),n._v("\n    "),s("span",{staticClass:"hljs-attr"},[n._v("colorsList")]),n._v(": []"),s("span",{staticClass:"hljs-comment"},[n._v("// Customize the color list for rainbow lines. If not set, the default color list will be used")]),n._v("\n}\n")])]),s("h3",[n._v("getColorsList()")]),s("p",[n._v("Get a list of currently used rainbow line colors.")]),s("h3",[n._v("getNodeColor(node)")]),s("p",[n._v("Retrieve the rainbow line color corresponding to the specified node instance.")]),s("h3",[n._v("getSecondLayerAncestor(node)")]),s("p",[n._v("Retrieve the second level ancestor node instance of a node instance.")])])}],o={},a=o,l=t("2877"),r=Object(l["a"])(a,i,e,!1,null,null,null);s["default"]=r.exports}}]);

dist/js/chunk-2d216037.js

@@ -1 +1 @@
-(window["webpackJsonp"]=window["webpackJsonp"]||[]).push([["chunk-2d216037"],{c13f:function(s,t,n){"use strict";n.r(t);var a=function(){var s=this;s._self._c;return s._m(0)},e=[function(){var s=this,t=s._self._c;return t("div",[t("h1",[s._v("开启节点自由拖拽")]),t("blockquote",[t("p",[s._v("节点自由拖拽的连线可能不会符合你的预期，这个问题基本上不会改，所以自由拖拽功能不建议使用。")])]),t("p",[s._v("节点支持自由拖拽，也就是可以把它拖动到你指定的位置，默认是不开启的，如果需要开启可以在实例化"),t("code",[s._v("simple-mind-map")]),s._v("时传入开启的选项：")]),t("pre",{staticClass:"hljs"},[t("code",[t("span",{staticClass:"hljs-keyword"},[s._v("new")]),s._v(" MindMap({\n    "),t("span",{staticClass:"hljs-comment"},[s._v("// ...")]),s._v("\n    "),t("span",{staticClass:"hljs-attr"},[s._v("enableFreeDrag")]),s._v(": "),t("span",{staticClass:"hljs-literal"},[s._v("true")]),s._v("\n})\n")])]),t("p",[s._v("也可以动态切换是否开启：")]),t("pre",{staticClass:"hljs"},[t("code",[s._v("mindMap.updateConfig({\n    "),t("span",{staticClass:"hljs-attr"},[s._v("enableFreeDrag")]),s._v(": "),t("span",{staticClass:"hljs-literal"},[s._v("true")]),t("span",{staticClass:"hljs-comment"},[s._v("// false")]),s._v("\n})\n")])]),t("p",[s._v("自由拖拽很容器将节点拖的乱七八糟，所以也可以通过命令回到默认的位置：")]),t("pre",{staticClass:"hljs"},[t("code",[s._v("mindMap.execCommand("),t("span",{staticClass:"hljs-string"},[s._v("'RESET_LAYOUT'")]),s._v(")\n")])]),t("p",[s._v("也可以使用快捷键"),t("code",[s._v("Ctrl + L")]),s._v("来恢复。")]),t("h2",[s._v("完整示例")]),t("iframe",{staticStyle:{width:"100%",height:"455px",border:"none"},attrs:{src:"https://wanglin2.github.io/playground/#eNrFVd1uG0UUfpVhEVoH2buuxJVxSksbJKSEolAuUDeqxrtje8rszLIzm8SyVgoF1EKIFASiFdxAVQFCQFWBEE2oeJmsnb4FZ3b2L44veldLa82c853znZnzM1PrchQ52wmxelZf+jGNFJJEJdFFj9MwErFCUxSTYRsJviESrkjQRnKMGRM7m2SIUjSMRYhs8GBXFhuUBxs4MirPkiBmpBOCtBPiyLM8jpDHGVFIyzRyFfGEMSN3XZQ9/Tr7/GD2397sr+P5d5+efnF7fvtJdvfe6Y+/eNwXXCqEfUW3yTsiIBKs64haN7ZWPF6iqLwWEf5WTMjVGI8ACEdpDTGTJAdpqrt3ZgcPZvcfZYc/Zf/uZYePTu/8Ov/m8Wz/29n+09KPEqMRIw0/rRW0ehFNdcRnOZxtzBICiJeWyTW+OLOTRAFW5IrgQzpq5Z4QIhwPap7eUt8QuEoh/LQ4wezjB9nDg2fH90//eJj980n2eK+MOiaQynU8EYk6G3IZAtkl/hURhpgHLXtz7b216zfXL39w7f3rdum/ynrrvLnOGtkps10dgfVQIPwkJFw5I6LWGNHLNydvA0dhCYdWmHIS2yttYwVXgXvGu/55lhZ4VkNkxIrsKi32rNkPT0xdmHrSv7RwpoH+mLIgJlyDb9Q+FtwtZVlkOjn6cn708yLZWcIlpFu1rol7QRGUy0JW2lFO1aYQSjfSu0JSRQUHS5uRobLbyPYhdZCmrQK+WJ95K2lVuvK66V6EoCTn33+VHf5m4jVdfHK0f3L8d7P2BG/ZHFhvmk4GspbetpH+X6dS1fWGmt1eNViJM/RQr/D1XTPDYHrBRhEYPNBjsEOoH9Bt5DMs5apnFUFcJaHwrFxdAGhQa6sqBUjfBW0TWHpSQrAB1hCj9FR/kCglOLrkM+p/mEOawwOQ0+niYHoD2dlnfz6793tz+NioB+JzM8lGadp3DUlBCjEtkjZ6HxjPz4gFD/X5ylXfbVwfbKWaMHOTl4ox71mOa2Z7MQIcIkPHl9KzqmJwGjddJnOHBmrcQxe63VdyHEJRVXkxAUZIda7Ii1Z/Ly9mpHRVG+KBFCxRxhAhXb891C12SkT15jz9mNDRGOCvdbvRbsm8nPfVkjnE8YgCb+k1wkFAObSEEVShO0WBPGfEF8oIiqCrPTiE4s5zYLUtkwH9mjq3pODweOfuvUIBGagmimfB22zGiOPC0olhntOQ6GR1BrHYkSQGJ55VtPiS91rbjpWKZM912e5HXE6kI6Ts+LwzIPQWHNvBjE4S7kvHF6ELnUGUXFIbmqY4TGql/wPpBfrv"}})])}],l={},r=l,i=n("2877"),p=Object(i["a"])(r,a,e,!1,null,null,null);t["default"]=p.exports}}]);
+(window["webpackJsonp"]=window["webpackJsonp"]||[]).push([["chunk-2d216037"],{c13f:function(s,t,a){"use strict";a.r(t);var n=function(){var s=this;s._self._c;return s._m(0)},e=[function(){var s=this,t=s._self._c;return t("div",[t("h1",[s._v("开启节点自由拖拽")]),t("blockquote",[t("p",[s._v("节点自由拖拽的连线可能不会符合你的预期，这个问题基本上不会改，所以自由拖拽功能不建议使用。")])]),t("blockquote",[t("p",[s._v("另外不要把节点拖拽和自由拖拽搞混，节点拖拽指拖动节点到其他节点上成为其子节点或兄弟节点，自由拖拽只是可以把节点放置在你拖动到的画布位置，并不能改变节点的层级。")])]),t("blockquote",[t("p",[s._v("最后要注意这两个功能都需要先注册Drag插件。")])]),t("p",[s._v("节点支持自由拖拽，也就是可以把它拖动到你指定的位置，默认是不开启的，如果需要开启可以在实例化"),t("code",[s._v("simple-mind-map")]),s._v("时传入开启的选项：")]),t("pre",{staticClass:"hljs"},[t("code",[t("span",{staticClass:"hljs-keyword"},[s._v("new")]),s._v(" MindMap({\n    "),t("span",{staticClass:"hljs-comment"},[s._v("// ...")]),s._v("\n    "),t("span",{staticClass:"hljs-attr"},[s._v("enableFreeDrag")]),s._v(": "),t("span",{staticClass:"hljs-literal"},[s._v("true")]),s._v("\n})\n")])]),t("p",[s._v("也可以动态切换是否开启：")]),t("pre",{staticClass:"hljs"},[t("code",[s._v("mindMap.updateConfig({\n    "),t("span",{staticClass:"hljs-attr"},[s._v("enableFreeDrag")]),s._v(": "),t("span",{staticClass:"hljs-literal"},[s._v("true")]),t("span",{staticClass:"hljs-comment"},[s._v("// false")]),s._v("\n})\n")])]),t("p",[s._v("自由拖拽很容器将节点拖的乱七八糟，所以也可以通过命令回到默认的位置：")]),t("pre",{staticClass:"hljs"},[t("code",[s._v("mindMap.execCommand("),t("span",{staticClass:"hljs-string"},[s._v("'RESET_LAYOUT'")]),s._v(")\n")])]),t("p",[s._v("也可以使用快捷键"),t("code",[s._v("Ctrl + L")]),s._v("来恢复。")]),t("h2",[s._v("完整示例")]),t("iframe",{staticStyle:{width:"100%",height:"455px",border:"none"},attrs:{src:"https://wanglin2.github.io/playground/#eNrFVd1uG0UUfpVhEVoH2buuxJVxSksbJKSEolAuUDeqxrtje8rszLIzm8SyVgoF1EKIFASiFdxAVQFCQFWBEE2oeJmsnb4FZ3b2L44veldLa82c853znZnzM1PrchQ52wmxelZf+jGNFJJEJdFFj9MwErFCUxSTYRsJviESrkjQRnKMGRM7m2SIUjSMRYhs8GBXFhuUBxs4MirPkiBmpBOCtBPiyLM8jpDHGVFIyzRyFfGEMSN3XZQ9/Tr7/GD2397sr+P5d5+efnF7fvtJdvfe6Y+/eNwXXCqEfUW3yTsiIBKs64haN7ZWPF6iqLwWEf5WTMjVGI8ACEdpDTGTJAdpqrt3ZgcPZvcfZYc/Zf/uZYePTu/8Ov/m8Wz/29n+09KPEqMRIw0/rRW0ehFNdcRnOZxtzBICiJeWyTW+OLOTRAFW5IrgQzpq5Z4QIhwPap7eUt8QuEoh/LQ4wezjB9nDg2fH90//eJj980n2eK+MOiaQynU8EYk6G3IZAtkl/hURhpgHLXtz7b216zfXL39w7f3rdum/ynrrvLnOGtkps10dgfVQIPwkJFw5I6LWGNHLNydvA0dhCYdWmHIS2yttYwVXgXvGu/55lhZ4VkNkxIrsKi32rNkPT0xdmHrSv7RwpoH+mLIgJlyDb9Q+FtwtZVlkOjn6cn708yLZWcIlpFu1rol7QRGUy0JW2lFO1aYQSjfSu0JSRQUHS5uRobLbyPYhdZCmrQK+WJ95K2lVuvK66V6EoCTn33+VHf5m4jVdfHK0f3L8d7P2BG/ZHFhvmk4GspbetpH+X6dS1fWGmt1eNViJM/RQr/D1XTPDYHrBRhEYPNBjsEOoH9Bt5DMs5apnFUFcJaHwrFxdAGhQa6sqBUjfBW0TWHpSQrAB1hCj9FR/kCglOLrkM+p/mEOawwOQ0+niYHoD2dlnfz6793tz+NioB+JzM8lGadp3DUlBCjEtkjZ6HxjPz4gFD/X5ylXfbVwfbKWaMHOTl4ox71mOa2Z7MQIcIkPHl9KzqmJwGjddJnOHBmrcQxe63VdyHEJRVXkxAUZIda7Ii1Z/Ly9mpHRVG+KBFCxRxhAhXb891C12SkT15jz9mNDRGOCvdbvRbsm8nPfVkjnE8YgCb+k1wkFAObSEEVShO0WBPGfEF8oIiqCrPTiE4s5zYLUtkwH9mjq3pODweOfuvUIBGagmimfB22zGiOPC0olhntOQ6GR1BrHYkSQGJ55VtPiS91rbjpWKZM912e5HXE6kI6Ts+LwzIPQWHNvBjE4S7kvHF6ELnUGUXFIbmqY4TGql/wPpBfrv"}})])}],l={},r=l,i=a("2877"),p=Object(i["a"])(r,n,e,!1,null,null,null);t["default"]=p.exports}}]);

index.html

@@ -1,7 +1,7 @@
 <!DOCTYPE html><html lang=""><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1,maximum-scale=1,minimum-scale=1"><link rel="icon" href="dist/logo.ico"><title>思绪思维导图</title><script>// 自定义静态资源的路径
       window.externalPublicPath = './dist/'
       // 接管应用
-      window.takeOverApp = false</script><link href="dist/css/chunk-vendors.css?97072371e55f8bd6a3b4" rel="stylesheet"><link href="dist/css/app.css?97072371e55f8bd6a3b4" 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 = () => {
+      window.takeOverApp = false</script><link href="dist/css/chunk-vendors.css?ac10265d54028b4359f6" rel="stylesheet"><link href="dist/css/app.css?ac10265d54028b4359f6" 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({
@@ -66,4 +66,4 @@
         // 可以通过window.$bus.$on()来监听应用的一些事件
         // 实例化页面
         window.initApp()
-      }</script><script src="dist/js/chunk-vendors.js?97072371e55f8bd6a3b4"></script><script src="dist/js/app.js?97072371e55f8bd6a3b4"></script></body></html>
+      }</script><script src="dist/js/chunk-vendors.js?ac10265d54028b4359f6"></script><script src="dist/js/app.js?ac10265d54028b4359f6"></script></body></html>

simple-mind-map/full.js

@@ -15,6 +15,7 @@ import Search from './src/plugins/Search.js'
 import Painter from './src/plugins/Painter.js'
 import Scrollbar from './src/plugins/Scrollbar.js'
 import Formula from './src/plugins/Formula.js'
+import RainbowLines from './src/plugins/RainbowLines.js'
 import xmind from './src/parse/xmind.js'
 import markdown from './src/parse/markdown.js'
 import icons from './src/svg/icons.js'
@@ -28,7 +29,7 @@ MindMap.iconList = icons.nodeIconList
 MindMap.constants = constants
 MindMap.themes = themes
 MindMap.defaultTheme = defaultTheme
-MindMap.version = '0.9.8'
+MindMap.version = '0.9.10'
 
 MindMap.usePlugin(MiniMap)
   .usePlugin(Watermark)
@@ -46,5 +47,6 @@ MindMap.usePlugin(MiniMap)
   .usePlugin(Painter)
   .usePlugin(Scrollbar)
   .usePlugin(Formula)
+  .usePlugin(RainbowLines)
 
 export default MindMap

simple-mind-map/index.js

@@ -15,7 +15,13 @@ import {
   cssContent
 } from './src/constants/constant'
 import { SVG } from '@svgdotjs/svg.js'
-import { simpleDeepClone, getType, getObjectChangedProps } from './src/utils'
+import {
+  simpleDeepClone,
+  getType,
+  getObjectChangedProps,
+  isUndef,
+  handleGetSvgDataExtraContent
+} from './src/utils'
 import defaultTheme, {
   checkIsNodeSizeIndependenceConfig
 } from './src/themes/default'
@@ -94,7 +100,7 @@ class MindMap {
     // 初始渲染
     this.render(this.opt.fit ? () => this.view.fit() : () => {})
     setTimeout(() => {
-      this.command.addHistory()
+      if (this.opt.data) this.command.addHistory()
     }, 0)
   }
 
@@ -111,6 +117,7 @@ class MindMap {
 
   // 预处理节点数据
   handleData(data) {
+    if (isUndef(data) || Object.keys(data).length <= 0) return null
     data = simpleDeepClone(data || {})
     // 根节点不能收起
     if (data.data && !data.data.expand) {
@@ -316,6 +323,13 @@ class MindMap {
     this.command.exec(...args)
   }
 
+  // 更新画布数据，如果新的数据是在当前画布节点数据基础上增删改查后形成的，那么可以使用该方法来更新画布数据
+  updateData(data) {
+    this.renderer.setData(data)
+    this.render()
+    this.command.addHistory()
+  }
+
   //  动态设置思维导图数据，纯节点数据
   setData(data) {
     data = this.handleData(data)
@@ -401,7 +415,18 @@ class MindMap {
   }
 
   // 获取svg数据
-  getSvgData({ paddingX = 0, paddingY = 0, ignoreWatermark = false } = {}) {
+  getSvgData({
+    paddingX = 0,
+    paddingY = 0,
+    ignoreWatermark = false,
+    addContentToHeader,
+    addContentToFooter
+  } = {}) {
+    const { cssTextList, header, headerHeight, footer, footerHeight } =
+      handleGetSvgDataExtraContent({
+        addContentToHeader,
+        addContentToFooter
+      })
     const svg = this.svg
     const draw = this.draw
     // 保存原始信息
@@ -414,8 +439,9 @@ class MindMap {
     // 获取变换后的位置尺寸信息，其实是getBoundingClientRect方法的包装方法
     const rect = draw.rbox()
     // 内边距
+    const fixHeight = 0
     rect.width += paddingX * 2
-    rect.height += paddingY * 2
+    rect.height += paddingY * 2 + fixHeight + headerHeight + footerHeight
     draw.translate(paddingX, paddingY)
     // 将svg设置为实际内容的宽高
     svg.size(rect.width, rect.height)
@@ -453,7 +479,21 @@ class MindMap {
       this.watermark.isInExport = false
     }
     // 添加必要的样式
-    clone.add(SVG(`<style>${cssContent}</style>`))
+    ;[cssContent, ...cssTextList].forEach(s => {
+      clone.add(SVG(`<style>${s}</style>`))
+    })
+    // 附加内容
+    if (header && headerHeight > 0) {
+      clone.findOne('.smm-container').translate(0, headerHeight)
+      header.width(rect.width)
+      header.y(paddingY)
+      clone.add(header, 0)
+    }
+    if (footer && footerHeight > 0) {
+      footer.width(rect.width)
+      footer.y(rect.height - paddingY - footerHeight)
+      clone.add(footer)
+    }
     // 修正defs里定义的元素的id，因为clone时defs里的元素的id会继续递增，导致和内容中引用的id对不上
     const defs = svg.find('defs')
     const defs2 = clone.find('defs')

simple-mind-map/package.json

@@ -1,6 +1,6 @@
 {
   "name": "simple-mind-map",
-  "version": "0.9.8",
+  "version": "0.9.10",
   "description": "一个简单的web在线思维导图",
   "authors": [
     {
@@ -38,6 +38,7 @@
     "quill": "^1.3.6",
     "tern": "^0.24.3",
     "uuid": "^9.0.0",
+    "ws": "^7.5.9",
     "xml-js": "^1.6.11",
     "y-webrtc": "^10.2.5",
     "yjs": "^13.6.8"

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

@@ -312,7 +312,9 @@ export const nodeDataNoStylePropList = [
   'associativeLineTargets',
   'associativeLineTargetControlOffsets',
   'associativeLinePoint',
-  'associativeLineText'
+  'associativeLineText',
+  'attachmentUrl',
+  'attachmentName'
 ]
 
 // 数据缓存

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

@@ -288,5 +288,35 @@ export const defaultOpt = {
       data: 1.当type=createOrUpdate时，代表被创建或被更新的节点数据，即将同步到其他客户端，所以你可以修改该数据；2.当type=delete时，代表被删除的节点数据
     }
   */
-  beforeCooperateUpdate: null
+  beforeCooperateUpdate: null,
+  // 快捷键操作即将执行前的生命周期函数，返回true可以阻止操作执行
+  // 函数接收两个参数：key（快捷键）、activeNodeList（当前激活的节点列表）
+  beforeShortcutRun: null,
+  // 彩虹线条配置，需要先注册RainbowLines插件
+  rainbowLinesConfig: {
+    open: false, // 是否开启彩虹线条
+    colorsList: [] // 自定义彩虹线条的颜色列表，如果不设置，会使用默认颜色列表
+    /*
+    [
+      'rgb(255, 213, 73)',
+      'rgb(255, 136, 126)',
+      'rgb(107, 225, 141)',
+      'rgb(151, 171, 255)',
+      'rgb(129, 220, 242)',
+      'rgb(255, 163, 125)',
+      'rgb(152, 132, 234)'
+    ]
+    */
+  },
+  // 导出png、svg、pdf时在头部和尾部添加自定义内容
+  // 可传递一个函数，这个函数可以返回null代表不添加内容，也可以返回如下数据：
+  /*
+    {
+      el,// 要追加的自定义DOM节点，样式可内联
+      cssText,// 可选，如果样式不想内联，可以传递该值，一个css字符串
+      height: 50// 返回的DOM节点的高度，必须传递
+    }
+  */
+  addContentToHeader: null,
+  addContentToFooter: null
 }

simple-mind-map/src/core/command/Command.js

@@ -95,6 +95,7 @@ class Command {
       this.history.length > 0 ? this.history[this.history.length - 1] : null
     const data = this.getCopyData()
     // 此次数据和上次一样则不重复添加
+    if (lastData === data) return
     if (lastData && JSON.stringify(lastData) === JSON.stringify(data)) {
       return
     }
@@ -158,6 +159,7 @@ class Command {
 
   //  获取渲染树数据副本
   getCopyData() {
+    if (!this.mindMap.renderer.renderTree) return null
     return copyRenderTree({}, this.mindMap.renderer.renderTree, true)
   }
 

simple-mind-map/src/core/command/KeyCommand.js

@@ -67,9 +67,10 @@ export default class KeyCommand {
 
   // 按键事件
   onKeydown(e) {
+    const { enableShortcutOnlyWhenMouseInSvg, beforeShortcutRun } = this.mindMap.opt
     if (
       this.isPause ||
-      (this.mindMap.opt.enableShortcutOnlyWhenMouseInSvg && !this.isInSvg)
+      (enableShortcutOnlyWhenMouseInSvg && !this.isInSvg)
     ) {
       return
     }
@@ -80,6 +81,10 @@ export default class KeyCommand {
           e.stopPropagation()
           e.preventDefault()
         }
+        if (typeof beforeShortcutRun === 'function') {
+          const isStop = beforeShortcutRun(key, [...this.mindMap.renderer.activeNodeList])
+          if (isStop) return
+        }
         this.shortcutMap[key].forEach(fn => {
           fn()
         })

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

@@ -65,7 +65,9 @@ class Render {
     this.mindMap = opt.mindMap
     this.themeConfig = this.mindMap.themeConfig
     // 渲染树，操作过程中修改的都是这里的数据
-    this.renderTree = merge({}, this.mindMap.opt.data || {})
+    this.renderTree = this.mindMap.opt.data
+      ? merge({}, this.mindMap.opt.data)
+      : null
     // 是否重新渲染
     this.reRender = false
     // 是否正在渲染中
@@ -117,7 +119,7 @@ class Render {
   // 重新设置思维导图数据
   setData(data) {
     if (this.mindMap.richText) {
-      this.renderTree = this.mindMap.richText.handleSetData(data)
+      this.renderTree = data ? this.mindMap.richText.handleSetData(data) : null
     } else {
       this.renderTree = data
     }
@@ -246,6 +248,9 @@ class Render {
     // 设置节点备注
     this.setNodeNote = this.setNodeNote.bind(this)
     this.mindMap.command.add('SET_NODE_NOTE', this.setNodeNote)
+    // 设置节点附件
+    this.setNodeAttachment = this.setNodeAttachment.bind(this)
+    this.mindMap.command.add('SET_NODE_ATTACHMENT', this.setNodeAttachment)
     // 设置节点标签
     this.setNodeTag = this.setNodeTag.bind(this)
     this.mindMap.command.add('SET_NODE_TAG', this.setNodeTag)
@@ -290,6 +295,10 @@ class Render {
     this.mindMap.keyCommand.addShortcut('Tab', () => {
       this.mindMap.execCommand('INSERT_CHILD_NODE')
     })
+    // 插入下级节点
+    this.mindMap.keyCommand.addShortcut('Insert', () => {
+      this.mindMap.execCommand('INSERT_CHILD_NODE')
+    })
     // 插入同级节点
     this.mindMap.keyCommand.addShortcut('Enter', () => {
       this.mindMap.execCommand('INSERT_NODE')
@@ -326,7 +335,7 @@ class Render {
     })
     // 一键整理布局
     this.mindMap.keyCommand.addShortcut('Control+l', () => {
-      this.mindMap.execCommand('RESET_LAYOUT', this.resetLayout)
+      this.mindMap.execCommand('RESET_LAYOUT')
     })
     // 上移节点
     this.mindMap.keyCommand.addShortcut('Control+Up', () => {
@@ -432,6 +441,12 @@ class Render {
     if (this.reRender) {
       this.clearActiveNodeList()
     }
+    // 如果没有节点数据
+    if (!this.renderTree) {
+      this.isRendering = false
+      this.mindMap.emit('node_tree_render_end')
+      return
+    }
     // 计算布局
     this.layout.doLayout(root => {
       // 删除本次渲染时不再需要的节点
@@ -476,6 +491,7 @@ class Render {
 
   // 给当前被收起来的节点数据添加文本复位标志
   resetUnExpandNodeStyle() {
+    if (!this.renderTree) return
     walk(this.renderTree, null, node => {
       if (!node.data.expand) {
         walk(node, null, node2 => {
@@ -845,6 +861,9 @@ class Render {
         },
         children: [node.nodeData]
       }
+      node.setData({
+        resetRichText: true
+      })
       const parent = node.parent
       // 获取当前节点所在位置
       const index = getNodeDataIndex(node)
@@ -965,6 +984,7 @@ class Render {
       })
     } else {
       // 否则遍历整棵树
+      if (!this.renderTree) return
       walk(this.renderTree, null, node => {
         const _hasCustomStyles = this._handleRemoveCustomStyles(node.data)
         if (_hasCustomStyles) hasCustomStyles = true
@@ -1458,6 +1478,7 @@ class Render {
 
   //  展开所有
   expandAllNode() {
+    if (!this.renderTree) return
     walk(
       this.renderTree,
       null,
@@ -1476,6 +1497,7 @@ class Render {
 
   //  收起所有
   unexpandAllNode() {
+    if (!this.renderTree) return
     walk(
       this.renderTree,
       null,
@@ -1496,6 +1518,7 @@ class Render {
 
   //  展开到指定层级
   expandToLevel(level) {
+    if (!this.renderTree) return
     walk(
       this.renderTree,
       null,
@@ -1582,6 +1605,14 @@ class Render {
     })
   }
 
+  //  设置节点附件
+  setNodeAttachment(node, url, name = '') {
+    this.setNodeDataRender(node, {
+      attachmentUrl: url,
+      attachmentName: name
+    })
+  }
+
   //  设置节点标签
   setNodeTag(node, tag) {
     this.setNodeDataRender(node, {
@@ -1767,6 +1798,10 @@ class Render {
 
   // 展开到指定uid的节点
   expandToNodeUid(uid, callback = () => {}) {
+    if (!this.renderTree) {
+      callback()
+      return
+    }
     let parentsList = []
     const cache = {}
     bfsWalk(this.renderTree, (node, parent) => {

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

@@ -75,6 +75,7 @@ class Node {
     this._noteData = null
     this.noteEl = null
     this.noteContentIsShow = false
+    this._attachmentData = null
     this._expandBtn = null
     this._lastExpandBtnType = null
     this._showExpandBtn = false
@@ -199,6 +200,7 @@ class Node {
     this._hyperlinkData = this.createHyperlinkNode()
     this._tagData = this.createTagNode()
     this._noteData = this.createNoteNode()
+    this._attachmentData = this.createAttachmentNode()
   }
 
   //  计算节点的宽高
@@ -267,6 +269,11 @@ class Node {
       textContentWidth += this._noteData.width
       textContentHeight = Math.max(textContentHeight, this._noteData.height)
     }
+    // 附件
+    if (this._attachmentData) {
+      textContentWidth += this._attachmentData.width
+      textContentHeight = Math.max(textContentHeight, this._attachmentData.height)
+    }
     // 文字内容部分的尺寸
     this._rectInfo.textContentWidth = textContentWidth
     this._rectInfo.textContentHeight = textContentHeight
@@ -399,6 +406,14 @@ class Node {
       textContentNested.add(this._noteData.node)
       textContentOffsetX += this._noteData.width
     }
+    // 附件
+    if (this._attachmentData) {
+      this._attachmentData.node
+        .x(textContentOffsetX)
+        .y((this._rectInfo.textContentHeight - this._attachmentData.height) / 2)
+      textContentNested.add(this._attachmentData.node)
+      textContentOffsetX += this._attachmentData.width
+    }
     // 文字内容整体
     textContentNested.translate(
       width / 2 - textContentNested.bbox().width / 2,
@@ -916,6 +931,7 @@ class Node {
       childNode.getStyle('lineWidth', true)
     const color =
       childNode.getSelfInhertStyle('lineColor') ||
+      this.getRainbowLineColor(childNode) ||
       childNode.getStyle('lineColor', true)
     const dasharray =
       childNode.getSelfInhertStyle('lineDasharray') ||
@@ -932,6 +948,13 @@ class Node {
     )
   }
 
+  // 获取彩虹线条颜色
+  getRainbowLineColor(node) {
+    return this.mindMap.rainbowLines
+      ? this.mindMap.rainbowLines.getNodeColor(node)
+      : ''
+  }
+
   //  移除连线
   removeLine() {
     this._lines.forEach(line => {
@@ -1039,6 +1062,17 @@ class Node {
     return copyNodeTree({}, this, removeActiveState, removeId)
   }
 
+  // 获取祖先节点列表
+  getAncestorNodes() {
+    const list = []
+    let parent = this.parent
+    while (parent) {
+      list.unshift(parent)
+      parent = parent.parent
+    }
+    return list
+  }
+
   // 是否存在自定义样式
   hasCustomStyle() {
     return this.style.hasCustomStyle()

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

@@ -28,6 +28,11 @@ function setNote(note) {
   this.mindMap.execCommand('SET_NODE_NOTE', this, note)
 }
 
+//  设置附件
+function setAttachment(url, name) {
+  this.mindMap.execCommand('SET_NODE_ATTACHMENT', this, url, name)
+}
+
 //  设置标签
 function setTag(tag) {
   this.mindMap.execCommand('SET_NODE_TAG', this, tag)
@@ -55,6 +60,7 @@ export default {
   setIcon,
   setHyperlink,
   setNote,
+  setAttachment,
   setTag,
   setShape,
   setStyle,

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

@@ -67,6 +67,15 @@ function updateUserListNode() {
     } else {
       node = this.createTextAvatar(item)
     }
+    node.on('click', (e) => {
+      this.mindMap.emit('node_cooperate_avatar_click', item, this, node, e)
+    })
+    node.on('mouseenter', (e) => {
+      this.mindMap.emit('node_cooperate_avatar_mouseenter', item, this, node, e)
+    })
+    node.on('mouseleave', (e) => {
+      this.mindMap.emit('node_cooperate_avatar_mouseleave', item, this, node, e)
+    })
     node.x(index * avatarSize).cy(-avatarSize / 2)
     this._userListGroup.add(node)
   })

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

@@ -92,7 +92,13 @@ function createIconNode() {
     }
     node.size(iconSize, iconSize)
     node.on('click', e => {
-      this.mindMap.emit('node_icon_click', this, item, e)
+      this.mindMap.emit('node_icon_click', this, item, e, node)
+    })
+    node.on('mouseenter', e => {
+      this.mindMap.emit('node_icon_mouseenter', this, item, e, node)
+    })
+    node.on('mouseleave', e => {
+      this.mindMap.emit('node_icon_mouseleave', this, item, e, node)
     })
     return {
       node,
@@ -256,7 +262,7 @@ function createHyperlinkNode() {
     e.stopPropagation()
   })
   if (hyperlinkTitle) {
-    a.attr('title', hyperlinkTitle)
+    node.add(SVG(`<title>${hyperlinkTitle}</title>`))
   }
   // 添加一个透明的层，作为鼠标区域
   a.rect(iconSize, iconSize).fill({ color: 'transparent' })
@@ -362,6 +368,36 @@ function createNoteNode() {
   }
 }
 
+//  创建附件节点
+function createAttachmentNode() {
+  const { attachmentUrl, attachmentName } = this.getData()
+  if (!attachmentUrl) {
+    return
+  }
+  const iconSize = this.mindMap.themeConfig.iconSize
+  const node = new SVG().attr('cursor', 'pointer').size(iconSize, iconSize)
+  if (attachmentName) {
+    node.add(SVG(`<title>${attachmentName}</title>`))
+  }
+  // 透明的层，用来作为鼠标区域
+  node.add(new Rect().size(iconSize, iconSize).fill({ color: 'transparent' }))
+  // 备注图标
+  const iconNode = SVG(iconsSvg.attachment).size(iconSize, iconSize)
+  this.style.iconNode(iconNode)
+  node.add(iconNode)
+  node.on('click', e => {
+    this.mindMap.emit('node_attachmentClick', this, e, node)
+  })
+  node.on('contextmenu', e => {
+    this.mindMap.emit('node_attachmentContextmenu', this, e, node)
+  })
+  return {
+    node,
+    width: iconSize,
+    height: iconSize
+  }
+}
+
 // 获取节点备注显示位置
 function getNoteContentPosition() {
   const iconSize = this.mindMap.themeConfig.iconSize
@@ -409,6 +445,7 @@ export default {
   createHyperlinkNode,
   createTagNode,
   createNoteNode,
+  createAttachmentNode,
   getNoteContentPosition,
   measureCustomNodeContentSize,
   isUseCustomNodeContent

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

@@ -158,7 +158,8 @@ class View {
         ...viewData.transform
       })
       this.mindMap.emit('view_data_change', this.getTransformData())
-      this.mindMap.emit('scale', this.scale)
+      this.emitEvent('scale')
+      this.emitEvent('translate')
     }
   }
 
@@ -168,6 +169,7 @@ class View {
     this.x += x
     this.y += y
     this.transform()
+    this.emitEvent('translate')
   }
 
   //  平移x方向
@@ -175,12 +177,14 @@ class View {
     if (step === 0) return
     this.x += step
     this.transform()
+    this.emitEvent('translate')
   }
 
   //  平移x方式到
   translateXTo(x) {
     this.x = x
     this.transform()
+    this.emitEvent('translate')
   }
 
   //  平移y方向
@@ -188,12 +192,14 @@ class View {
     if (step === 0) return
     this.y += step
     this.transform()
+    this.emitEvent('translate')
   }
 
   //  平移y方向到
   translateYTo(y) {
     this.y = y
     this.transform()
+    this.emitEvent('translate')
   }
 
   //   应用变换
@@ -211,13 +217,17 @@ class View {
 
   //  恢复
   reset() {
-    let scaleChange = this.scale !== 1
+    const scaleChange = this.scale !== 1
+    const translateChange = this.x !== 0 || this.y !== 0
     this.scale = 1
     this.x = 0
     this.y = 0
     this.transform()
     if (scaleChange) {
-      this.mindMap.emit('scale', this.scale)
+      this.emitEvent('scale')
+    }
+    if (translateChange) {
+      this.emitEvent('translate')
     }
   }
 
@@ -227,7 +237,7 @@ class View {
     const scale = Math.max(this.scale - scaleRatio, 0.1)
     this.scaleInCenter(scale, cx, cy)
     this.transform()
-    this.mindMap.emit('scale', this.scale)
+    this.emitEvent('scale')
   }
 
   //  放大
@@ -236,7 +246,7 @@ class View {
     const scale = this.scale + scaleRatio
     this.scaleInCenter(scale, cx, cy)
     this.transform()
-    this.mindMap.emit('scale', this.scale)
+    this.emitEvent('scale')
   }
 
   // 基于指定中心进行缩放，cx，cy 可不指定，此时会使用画布中心点
@@ -262,7 +272,7 @@ class View {
       this.scale = scale
     }
     this.transform()
-    this.mindMap.emit('scale', this.scale)
+    this.emitEvent('scale')
   }
 
   // 适应画布大小
@@ -394,6 +404,16 @@ class View {
       bottom
     }
   }
+
+  // 派发事件
+  emitEvent(type) {
+    switch (type) {
+      case 'scale':
+        this.mindMap.emit('scale', this.scale)
+      case 'translate':
+        this.mindMap.emit('translate', this.x, this.y)
+    }
+  }
 }
 
 export default View

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

@@ -339,6 +339,10 @@ class AssociativeLine {
         dasharray: [6, 4]
       })
       .fill({ color: 'none' })
+    // 箭头
+    this.markerPath
+      .stroke({ color: associativeLineColor })
+      .fill({ color: associativeLineColor })
     this.creatingLine.marker('end', this.marker)
   }
 

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

@@ -120,9 +120,7 @@ class Cooperate {
     const res = transformObjectToTreeData(data)
     if (!res) return
     // 更新思维导图画布
-    this.mindMap.renderer.setData(res)
-    this.mindMap.render()
-    this.mindMap.command.addHistory()
+    this.mindMap.updateData(res)
   }
 
   // 当前思维导图改变后的处理，触发同步

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

@@ -48,11 +48,13 @@ class Export {
 
   //  获取svg数据
   async getSvgData() {
-    let { exportPaddingX, exportPaddingY, errorHandler, resetCss } =
+    let { exportPaddingX, exportPaddingY, errorHandler, resetCss, addContentToHeader, addContentToFooter } =
       this.mindMap.opt
     let { svg, svgHTML } = this.mindMap.getSvgData({
       paddingX: exportPaddingX,
-      paddingY: exportPaddingY
+      paddingY: exportPaddingY,
+      addContentToHeader,
+      addContentToFooter
     })
     // svg的image标签，把图片的url转换成data:url类型，否则导出会丢失图片
     const task1 = this.createTransformImgTaskList(

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

@@ -93,10 +93,7 @@ class MiniMap {
 
     return {
       getImgUrl: async callback => {
-        const blob = new Blob([svgStr], {
-          type: 'image/svg+xml'
-        })
-        const res = await readBlob(blob)
+        const res = await this.mindMap.doExport.fixSvgStrAndToBlob(svgStr)
         callback(res)
       },
       svgHTML: svgStr, // 小地图html

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

@@ -0,0 +1,92 @@
+import { walk, getNodeDataIndex } from '../utils/index'
+
+const defaultColorsList = [
+  'rgb(255, 213, 73)',
+  'rgb(255, 136, 126)',
+  'rgb(107, 225, 141)',
+  'rgb(151, 171, 255)',
+  'rgb(129, 220, 242)',
+  'rgb(255, 163, 125)',
+  'rgb(152, 132, 234)'
+]
+
+// 彩虹线条插件
+class RainbowLines {
+  constructor({ mindMap }) {
+    this.mindMap = mindMap
+  }
+
+  // 更新彩虹线条配置
+  updateRainLinesConfig(config = {}) {
+    const newConfig = this.mindMap.opt.rainbowLinesConfig || {}
+    newConfig.open = !!config.open
+    newConfig.colorsList = Array.isArray(config.colorsList)
+      ? config.colorsList
+      : []
+    // 如果开启彩虹线条，那么先移除所有节点的自定义连线颜色配置
+    if (this.mindMap.opt.rainbowLinesConfig.open) {
+      this.removeNodeLineColor()
+    }
+    this.mindMap.render()
+  }
+
+  // 删除所有节点的连线颜色
+  removeNodeLineColor() {
+    const tree = this.mindMap.renderer.renderTree
+    if (!tree) return
+    walk(
+      tree,
+      null,
+      cur => {
+        delete cur.data.lineColor
+      },
+      null,
+      true
+    )
+    this.mindMap.command.addHistory()
+  }
+
+  // 获取一个节点的第二层级的祖先节点
+  getSecondLayerAncestor(node) {
+    if (node.layerIndex === 0) {
+      return null
+    } else if (node.layerIndex === 1) {
+      return node
+    } else {
+      let res = null
+      let parent = node.parent
+      while (parent) {
+        if (parent.layerIndex === 1) {
+          return parent
+        }
+        parent = parent.parent
+      }
+      return res
+    }
+  }
+
+  // 获取颜色列表
+  getColorsList() {
+    const { rainbowLinesConfig } = this.mindMap.opt
+    return rainbowLinesConfig &&
+      Array.isArray(rainbowLinesConfig.colorsList) &&
+      rainbowLinesConfig.colorsList.length > 0
+      ? rainbowLinesConfig.colorsList
+      : [...defaultColorsList]
+  }
+
+  // 获取一个节点的彩虹线条颜色
+  getNodeColor(node) {
+    const { rainbowLinesConfig } = this.mindMap.opt
+    if (!rainbowLinesConfig || !rainbowLinesConfig.open) return ''
+    const ancestor = this.getSecondLayerAncestor(node)
+    if (!ancestor) return
+    const index = getNodeDataIndex(ancestor)
+    const colorsList = this.getColorsList()
+    return colorsList[index % colorsList.length]
+  }
+}
+
+RainbowLines.instanceName = 'rainbowLines'
+
+export default RainbowLines

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

@@ -641,6 +641,7 @@ class RichText {
 
   // 将所有节点转换成非富文本节点
   transformAllNodesToNormalNode() {
+    if (!this.mindMap.renderer.renderTree) return
     walk(
       this.mindMap.renderer.renderTree,
       null,

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

@@ -86,9 +86,11 @@ class Search {
     this.matchNodeList = []
     this.currentIndex = -1
     const { isOnlySearchCurrentRenderNodes } = this.mindMap.opt
+    // 如果要搜索收起来的节点，那么要遍历渲染树而不是节点树
     const tree = isOnlySearchCurrentRenderNodes
       ? this.mindMap.renderer.root
       : this.mindMap.renderer.renderTree
+    if (!tree) return
     bfsWalk(tree, node => {
       let { richText, text } = isOnlySearchCurrentRenderNodes
         ? node.getData()
@@ -102,6 +104,11 @@ class Search {
     })
   }
 
+  // 判断对象是否是节点实例
+  isNodeInstance(node) {
+    return node instanceof Node
+  }
+
   // 搜索下一个，定位到下一个匹配节点
   searchNext(callback) {
     if (!this.isSearching || this.matchNodeList.length <= 0) return
@@ -112,13 +119,12 @@ class Search {
     }
     const currentNode = this.matchNodeList[this.currentIndex]
     this.notResetSearchText = true
-    const uid =
-      currentNode instanceof Node
-        ? currentNode.getData('uid')
-        : currentNode.data.uid
+    const uid = this.isNodeInstance(currentNode)
+      ? currentNode.getData('uid')
+      : currentNode.data.uid
     const targetNode = this.mindMap.renderer.findNodeByUid(uid)
     this.mindMap.execCommand('GO_TARGET_NODE', uid, node => {
-      if (!(currentNode instanceof Node)) {
+      if (!this.isNodeInstance(currentNode)) {
         this.matchNodeList[this.currentIndex] = node
       }
       callback()
@@ -172,15 +178,20 @@ class Search {
       return
     replaceText = String(replaceText)
     this.matchNodeList.forEach(node => {
-      let text = this.getReplacedText(node, this.searchText, replaceText)
-      this.mindMap.renderer.setNodeDataRender(
-        node,
-        {
-          text,
-          resetRichText: !!node.getData('richText')
-        },
-        true
-      )
+      const text = this.getReplacedText(node, this.searchText, replaceText)
+      if (this.isNodeInstance(node)) {
+        this.mindMap.renderer.setNodeDataRender(
+          node,
+          {
+            text,
+            resetRichText: !!node.getData('richText')
+          },
+          true
+        )
+      } else {
+        node.data.text = text
+        node.data.resetRichText = !!node.data.richText
+      }
     })
     this.mindMap.render()
     this.mindMap.command.addHistory()
@@ -189,7 +200,9 @@ class Search {
 
   // 获取某个节点替换后的文本
   getReplacedText(node, searchText, replaceText) {
-    let { richText, text } = node.getData()
+    let { richText, text } = this.isNodeInstance(node)
+      ? node.getData()
+      : node.data
     if (richText) {
       return replaceHtmlText(text, searchText, replaceText)
     } else {

simple-mind-map/src/svg/icons.js

@@ -8,6 +8,10 @@ const hyperlink =
 const note =
   '<svg t="1624195132675" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="8792" ><path d="M152.768 985.984 152.768 49.856l434.56 0 66.816 0 234.048 267.392 0 66.816 0 601.92L152.768 985.984 152.768 985.984zM654.144 193.088l0 124.16 108.736 0L654.144 193.088 654.144 193.088zM821.312 384.064l-167.168 0L587.328 384.064 587.328 317.312 587.328 116.736 219.584 116.736 219.584 919.04l601.728 0L821.312 384.064 821.312 384.064zM386.688 517.888 319.808 517.888 319.808 450.944l66.816 0L386.624 517.888 386.688 517.888zM386.688 651.584 319.808 651.584 319.808 584.704l66.816 0L386.624 651.584 386.688 651.584zM386.688 785.344 319.808 785.344l0-66.88 66.816 0L386.624 785.344 386.688 785.344zM721.024 517.888 453.632 517.888 453.632 450.944l267.392 0L721.024 517.888 721.024 517.888zM654.144 651.584 453.632 651.584 453.632 584.704l200.512 0L654.144 651.584 654.144 651.584zM620.672 785.344l-167.04 0 0-66.88 167.04 0L620.672 785.344 620.672 785.344z" p-id="8793"></path></svg>'
 
+// 附件图标
+const attachment =
+  '<svg t="1711935375590" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3864" xmlns:xlink="http://www.w3.org/1999/xlink" width="128" height="128"><path d="M516.373333 375.978667l136.576-136.576a147.797333 147.797333 0 0 1 208.853334-0.021334 147.690667 147.690667 0 0 1-0.042667 208.832l-204.8 204.778667v0.021333l-153.621333 153.6c-85.973333 85.973333-225.28 85.973333-311.253334 0.021334-85.994667-85.973333-85.973333-225.216 0.149334-311.36L431.146667 256.362667a21.333333 21.333333 0 0 0-30.165334-30.165334L162.069333 465.066667c-102.805333 102.826667-102.826667 269.056-0.149333 371.733333 102.613333 102.613333 268.970667 102.613333 371.584 0l153.6-153.642667h0.021333l0.021334-0.021333 204.778666-204.778667c74.325333-74.325333 74.346667-194.858667 0.021334-269.184-74.24-74.24-194.88-74.24-269.162667 0.042667l-136.576 136.554667-187.626667 187.626666a117.845333 117.845333 0 0 0-0.106666 166.826667 118.037333 118.037333 0 0 0 166.826666-0.106667l255.850667-255.829333a21.333333 21.333333 0 0 0-30.165333-30.165333L435.136 669.973333a75.370667 75.370667 0 0 1-106.496 0.106667 75.178667 75.178667 0 0 1 0.128-106.496l187.605333-187.605333z" p-id="3865"></path></svg>'
+
 // 节点icon
 export const nodeIconList = [
   {
@@ -303,6 +307,7 @@ const getNodeIconListIcon = (name, extendIconList = []) => {
 export default {
   hyperlink,
   note,
+  attachment,
   nodeIconList,
   getNodeIconListIcon
 }

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

@@ -4,6 +4,7 @@ import {
   selfCloseTagList
 } from '../constants/constant'
 import MersenneTwister from './mersenneTwister'
+import { ForeignObject } from '@svgdotjs/svg.js'
 
 //  深度优先遍历树
 export const walk = (
@@ -1315,3 +1316,48 @@ export const getRectRelativePosition = (rect1, rect2) => {
     return 'overlap'
   }
 }
+
+// 处理获取svg内容时添加额外内容
+export const handleGetSvgDataExtraContent = ({
+  addContentToHeader,
+  addContentToFooter
+}) => {
+  // 追加内容
+  const cssTextList = []
+  let header = null
+  let headerHeight = 0
+  let footer = null
+  let footerHeight = 0
+  const handle = (fn, callback) => {
+    if (typeof fn === 'function') {
+      const res = fn()
+      if (!res) return
+      const { el, cssText, height } = res
+      if (el instanceof HTMLElement) {
+        el.setAttribute('xmlns', 'http://www.w3.org/1999/xhtml')
+        const foreignObject = new ForeignObject()
+        foreignObject.height(height)
+        foreignObject.add(el)
+        callback(foreignObject, height)
+      }
+      if (cssText) {
+        cssTextList.push(cssText)
+      }
+    }
+  }
+  handle(addContentToHeader, (foreignObject, height) => {
+    header = foreignObject
+    headerHeight = height
+  })
+  handle(addContentToFooter, (foreignObject, height) => {
+    footer = foreignObject
+    footerHeight = height
+  })
+  return {
+    cssTextList,
+    header,
+    headerHeight,
+    footer,
+    footerHeight
+  }
+}

web/package.json

@@ -14,9 +14,11 @@
   },
   "dependencies": {
     "@toast-ui/editor": "^3.1.5",
+    "codemirror": "^5.65.16",
     "core-js": "^3.6.5",
     "element-ui": "^2.15.1",
     "highlight.js": "^10.7.3",
+    "katex": "^0.16.9",
     "v-viewer": "^1.6.4",
     "vue": "^2.6.11",
     "vue-i18n": "^8.27.2",

web/src/api/index.js

@@ -14,6 +14,7 @@ let mindMapData = null
  * @Desc: 克隆思维导图数据，去除激活状态
  */
 const copyMindMapTreeData = (tree, root) => {
+  if (!root) return null
   tree.data = simpleDeepClone(root.data)
   // tree.data.isActive = false
   tree.children = []

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

@@ -1,8 +1,8 @@
 @font-face {
   font-family: "iconfont"; /* Project id 2479351 */
-  src: url('iconfont.woff2?t=1709781789605') format('woff2'),
-       url('iconfont.woff?t=1709781789605') format('woff'),
-       url('iconfont.ttf?t=1709781789605') format('truetype');
+  src: url('iconfont.woff2?t=1711935414521') format('woff2'),
+       url('iconfont.woff?t=1711935414521') format('woff'),
+       url('iconfont.ttf?t=1711935414521') format('truetype');
 }
 
 .iconfont {
@@ -13,6 +13,26 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
+.iconfujian:before {
+  content: "\e88a";
+}
+
+.icongeshihua:before {
+  content: "\e7a3";
+}
+
+.iconyuanma:before {
+  content: "\e658";
+}
+
+.icongundongtiao:before {
+  content: "\e670";
+}
+
+.iconxietongwendang:before {
+  content: "\e60d";
+}
+
 .iconTXT:before {
   content: "\e6e1";
 }

web/src/config/constant.js

@@ -57,7 +57,7 @@ export const themeMap = {
   dark4: require('../assets/img/themes/dark4.jpg'),
   cactus: require('../assets/img/themes/cactus.jpg'),
   classic6: require('../assets/img/themes/classic6.jpg'),
-  classic7: require('../assets/img/themes/classic7.jpg'),
+  classic7: require('../assets/img/themes/classic7.jpg')
 }
 
 // 公式列表
@@ -111,3 +111,82 @@ export const supportRootLineKeepSameInCurveLayouts = [
   'logicalStructure',
   'mindMap'
 ]
+
+// 彩虹线条配置
+export const rainbowLinesOptions = [
+  {
+    value: 'close'
+  },
+  {
+    value: 'colors1',
+    list: [
+      'rgb(255, 213, 73)',
+      'rgb(255, 136, 126)',
+      'rgb(107, 225, 141)',
+      'rgb(151, 171, 255)',
+      'rgb(129, 220, 242)',
+      'rgb(255, 163, 125)',
+      'rgb(152, 132, 234)'
+    ]
+  },
+  {
+    value: 'colors2',
+    list: [
+      'rgb(248, 93, 93)',
+      'rgb(255, 151, 84)',
+      'rgb(255, 214, 69)',
+      'rgb(73, 205, 140)',
+      'rgb(64, 192, 255)',
+      'rgb(84, 110, 214)',
+      'rgb(164, 93, 220)'
+    ]
+  },
+  {
+    value: 'colors3',
+    list: [
+      'rgb(140, 240, 231)',
+      'rgb(74, 210, 255)',
+      'rgb(65, 168, 243)',
+      'rgb(49, 128, 205)',
+      'rgb(188, 226, 132)',
+      'rgb(113, 215, 123)',
+      'rgb(120, 191, 109)'
+    ]
+  },
+  {
+    value: 'colors4',
+    list: [
+      'rgb(169, 98, 99)',
+      'rgb(245, 125, 123)',
+      'rgb(254, 183, 168)',
+      'rgb(251, 218, 171)',
+      'rgb(138, 163, 181)',
+      'rgb(131, 127, 161)',
+      'rgb(84, 83, 140)'
+    ]
+  },
+  {
+    value: 'colors5',
+    list: [
+      'rgb(255, 229, 142)',
+      'rgb(254, 158, 41)',
+      'rgb(248, 119, 44)',
+      'rgb(232, 82, 80)',
+      'rgb(182, 66, 98)',
+      'rgb(99, 54, 99)',
+      'rgb(65, 40, 82)'
+    ]
+  },
+  {
+    value: 'colors6',
+    list: [
+      'rgb(171, 227, 209)',
+      'rgb(107, 201, 196)',
+      'rgb(55, 170, 169)',
+      'rgb(18, 135, 131)',
+      'rgb(74, 139, 166)',
+      'rgb(75, 105, 150)',
+      'rgb(57, 75, 133)'
+    ]
+  }
+]

web/src/config/zh.js

@@ -425,7 +425,7 @@ export const shortcutKeyList = [
         icon: 'icondodeparent',
         name: '上移一个层级',
         value: 'Shift + Tab'
-      },
+      }
     ]
   }
 ]
@@ -582,4 +582,4 @@ export const downTypeList = [
     icon: 'iconTXT',
     desc: '纯文本文件'
   }
-]
+]

web/src/lang/en_us.js

@@ -62,7 +62,9 @@ export default {
     isUseHandDrawnLikeStyle: 'Is use hand drawn like style',
     rootLineStartPos: 'Root line start pos',
     center: 'Center',
-    right: 'Right'
+    right: 'Right',
+    rainbowLines: 'Rainbow lines',
+    notUseRainbowLines: 'Not use rainbow lines'
   },
   color: {
     moreColor: 'More color'
@@ -128,7 +130,9 @@ export default {
     paddingX: 'Padding x',
     paddingY: 'Padding y',
     useMultiPageExport: 'Export multi page',
-    defaultFileName: 'Mind map'
+    defaultFileName: 'Mind map',
+    addFooterTextPlaceholder: 'For example: From simple-mind-map',
+    addFooterText: 'Add text at the footer'
   },
   fullscreen: {
     fullscreenShow: 'Full screen show',
@@ -150,7 +154,8 @@ export default {
     closeMiniMap: 'Close mini map',
     readonly: 'Change to eadonly',
     edit: 'Change to edit',
-    backToRoot: 'Back to root node'
+    backToRoot: 'Back to root node',
+    changeSourceCodeEdit: 'Switch to source code editing mode'
   },
   nodeHyperlink: {
     title: 'Link',
@@ -254,6 +259,7 @@ export default {
     associativeLine: 'Associative line',
     painter: 'Painter',
     formula: 'Formula',
+    attachment: 'Attachment',
     more: 'More',
     selectFileTip: 'Please select a file',
     notSupportTip:
@@ -275,7 +281,9 @@ export default {
     splitByWrap: 'Is automatically split nodes based on line breaks?',
     tip: 'Tip',
     yes: 'Yes',
-    no: 'No'
+    no: 'No',
+    exportError: 'Export failed',
+    dragTip: 'Release here to import the file'
   },
   mouseAction: {
     tip1:
@@ -315,5 +323,19 @@ export default {
   },
   other: {
     loading: 'Loading, please wait...'
+  },
+  sourceCodeEdit: {
+    sourceCodeTip: 'It is not recommended to modify the style in rich text mode because it requires synchronous modification of data and HTML structure.',
+    format: 'Format',
+    copy: 'Copy',
+    confirm: 'Complete',
+    close: 'Close',
+    formatErrorTip: 'The JSON format is incorrect. Please check and try again',
+    copyTip: 'Copied to clipboard',
+    formatTip: 'Format complete'
+  },
+  attachment: {
+    deleteAttachment: 'Delete attachment',
+    tip: 'The attachment function is only available on the client side'
   }
 }

web/src/lang/zh_cn.js

@@ -62,7 +62,9 @@ export default {
     isUseHandDrawnLikeStyle: '是否开启手绘风格',
     rootLineStartPos: '根节点连线起始位置',
     center: '中心',
-    right: '右侧'
+    right: '右侧',
+    rainbowLines: '彩虹线条',
+    notUseRainbowLines: '不使用彩虹线条'
   },
   color: {
     moreColor: '更多颜色'
@@ -126,7 +128,9 @@ export default {
     paddingX: '水平内边距',
     paddingY: '垂直内边距',
     useMultiPageExport: '是否多页导出',
-    defaultFileName: '思维导图'
+    defaultFileName: '思维导图',
+    addFooterText: '底部添加文字',
+    addFooterTextPlaceholder: '比如：来自simple-mind-map'
   },
   fullscreen: {
     fullscreenShow: '全屏查看',
@@ -148,7 +152,8 @@ export default {
     closeMiniMap: '关闭小地图',
     readonly: '切换为只读模式',
     edit: '切换为编辑模式',
-    backToRoot: '回到根节点'
+    backToRoot: '回到根节点',
+    changeSourceCodeEdit: '切换为源码编辑模式'
   },
   nodeHyperlink: {
     title: '超链接',
@@ -251,6 +256,7 @@ export default {
     associativeLine: '关联线',
     painter: '格式刷',
     formula: '公式',
+    attachment: '附件',
     more: '更多',
     selectFileTip: '请选择文件',
     notSupportTip: '你的浏览器不支持该功能，或者当前页面非https协议',
@@ -271,7 +277,9 @@ export default {
     splitByWrap: '是否按换行自动分割节点？',
     tip: '提示',
     yes: '是',
-    no: '否'
+    no: '否',
+    exportError: '导出失败',
+    dragTip: '在此释放以导入该文件'
   },
   mouseAction: {
     tip1: '当前：左键拖动画布，右键框选节点',
@@ -309,5 +317,19 @@ export default {
   },
   other: {
     loading: '正在加载，请稍后...'
+  },
+  sourceCodeEdit: {
+    sourceCodeTip: '富文本模式下不建议修改样式，因为需要同步修改数据及html结构。',
+    format: '格式化',
+    copy: '复制',
+    confirm: '完成',
+    close: '关闭',
+    formatErrorTip: 'JSON格式有误，请检查后再试',
+    copyTip: '已复制到剪贴板',
+    formatTip: '格式化完成'
+  },
+  attachment: {
+    deleteAttachment: '删除附件',
+    tip: '附件功能仅在客户端可用'
   }
 }

web/src/pages/Doc/catalogList.js

@@ -11,7 +11,7 @@ let langList = [
   }
 ]
 let StartList = ['introduction', 'start', 'deploy', 'client', 'translate', 'changelog']
-let CourseList = new Array(25).fill(0).map((_, index) => {
+let CourseList = new Array(27).fill(0).map((_, index) => {
   return 'course' + (index + 1)
 })
 let APIList = [
@@ -38,6 +38,7 @@ let APIList = [
   'scrollbar',
   'formula',
   'cooperate',
+  'rainbowLines',
   'handDrawnLikeStyle',
   'xmind',
   'markdown',

web/src/pages/Doc/en/changelog/index.md

@@ -1,5 +1,85 @@
 # Changelog
 
+## 0.9.10
+
+Fix:
+
+> 1.Fix the issue of all replace operation error during search;
+>
+> 2.Fix the issue of rendering the mini map with entity characters that are not supported by SVG in node text;
+
+New:
+
+> 1.Add an event translate when moving the canvas;
+>
+> 2.Node content supports setting attachments;
+
+Demo：
+
+> 1.Support dragging and dropping files onto the page for import;
+
+Client:
+
+> 1.Nodes support adding attachments;
+
+## 0.9.9-fix.2
+
+Fix:
+
+> 1.Fix the issue of the original node style not being updated during the insertion of the parent node operation;
+>
+> 2.Fix the issue of errors when switching structures when opening rainbow lines;
+
+Demo:
+
+> 1.Fix the issue where the side bar outline opens in source code editing mode when clicking full screen editing;
+
+## 0.9.9-fix.1
+
+Fix the issue where the search plugin was unable to search due to changes in the previous version.
+
+## 0.9.9
+
+Fix:
+
+> 1.Fix the issue of incorrect arrow color when creating association lines for the first time;
+
+New:
+
+> 1.Support inserting child nodes with the insert key;
+>
+> 2.Add the beforeShortcutRun instantiation option to intercept shortcut key operations;
+>
+> 3.The method of incrementally updating canvas data by adding root instances, updateData;
+>
+> 4.Add a rainbow line plugin;
+>
+> 5.Add mouse in and out events to icons in nodes;
+>
+> 6.Add the getAncestorNodes method to the node instance to obtain the list of ancestor nodes;
+>
+> 7.Adding mouse events to personnel avatars during collaborative editing;
+>
+> 8.Instantiation and setData methods support passing in empty data;
+>
+> 9.Add an instantiation option for adding custom content when exporting images;
+
+Demo:
+
+> 1.Support configuration of rainbow lines;
+>
+> 2.Add source code editing mode;
+>
+> 3.Exporting PNG, PDF, and SVG supports setting custom text at the bottom;
+
+Client:
+
+> 1.Double click the file to open the application without opening the workbench page;
+>
+> 2.Fix the issue of multiple editing windows opening when repeatedly opening the same file;
+>
+> 3.Prompt for modifying and deleting files being edited;
+
 ## 0.9.8
 
 Fix:

web/src/pages/Doc/en/changelog/index.vue

@@ -1,6 +1,66 @@
 <template>
   <div>
     <h1>Changelog</h1>
+<h2>0.9.10</h2>
+<p>Fix:</p>
+<blockquote>
+<p>1.Fix the issue of all replace operation error during search;</p>
+<p>2.Fix the issue of rendering the mini map with entity characters that are not supported by SVG in node text;</p>
+</blockquote>
+<p>New:</p>
+<blockquote>
+<p>1.Add an event translate when moving the canvas;</p>
+<p>2.Node content supports setting attachments;</p>
+</blockquote>
+<p>Demo：</p>
+<blockquote>
+<p>1.Support dragging and dropping files onto the page for import;</p>
+</blockquote>
+<p>Client:</p>
+<blockquote>
+<p>1.Nodes support adding attachments;</p>
+</blockquote>
+<h2>0.9.9-fix.2</h2>
+<p>Fix:</p>
+<blockquote>
+<p>1.Fix the issue of the original node style not being updated during the insertion of the parent node operation;</p>
+<p>2.Fix the issue of errors when switching structures when opening rainbow lines;</p>
+</blockquote>
+<p>Demo:</p>
+<blockquote>
+<p>1.Fix the issue where the side bar outline opens in source code editing mode when clicking full screen editing;</p>
+</blockquote>
+<h2>0.9.9-fix.1</h2>
+<p>Fix the issue where the search plugin was unable to search due to changes in the previous version.</p>
+<h2>0.9.9</h2>
+<p>Fix:</p>
+<blockquote>
+<p>1.Fix the issue of incorrect arrow color when creating association lines for the first time;</p>
+</blockquote>
+<p>New:</p>
+<blockquote>
+<p>1.Support inserting child nodes with the insert key;</p>
+<p>2.Add the beforeShortcutRun instantiation option to intercept shortcut key operations;</p>
+<p>3.The method of incrementally updating canvas data by adding root instances, updateData;</p>
+<p>4.Add a rainbow line plugin;</p>
+<p>5.Add mouse in and out events to icons in nodes;</p>
+<p>6.Add the getAncestorNodes method to the node instance to obtain the list of ancestor nodes;</p>
+<p>7.Adding mouse events to personnel avatars during collaborative editing;</p>
+<p>8.Instantiation and setData methods support passing in empty data;</p>
+<p>9.Add an instantiation option for adding custom content when exporting images;</p>
+</blockquote>
+<p>Demo:</p>
+<blockquote>
+<p>1.Support configuration of rainbow lines;</p>
+<p>2.Add source code editing mode;</p>
+<p>3.Exporting PNG, PDF, and SVG supports setting custom text at the bottom;</p>
+</blockquote>
+<p>Client:</p>
+<blockquote>
+<p>1.Double click the file to open the application without opening the workbench page;</p>
+<p>2.Fix the issue of multiple editing windows opening when repeatedly opening the same file;</p>
+<p>3.Prompt for modifying and deleting files being edited;</p>
+</blockquote>
 <h2>0.9.8</h2>
 <p>Fix:</p>
 <blockquote>

web/src/pages/Doc/en/constructor/index.md

@@ -25,7 +25,7 @@ const mindMap = new MindMap({
 | Field Name                       | Type    | Default Value    | Description                                                  | Required |
 | -------------------------------- | ------- | ---------------- | ------------------------------------------------------------ | -------- |
 | el                               | Element |                  | Container element, must be a DOM element                     | Yes      |
-| data                             | Object  | {}               | Mind map data, Please refer to the introduction of 【Data structure】 below |          |
+| data                             | Object 、null  |     | Mind map data, Please refer to the introduction of 【Data structure】 below. V0.9.9+supports passing empty objects or null, and the canvas will display blank space |          |
 | layout                           | String  | logicalStructure | Layout type, options: logicalStructure (logical structure diagram), mindMap (mind map), catalogOrganization (catalog organization diagram), organizationStructure (organization structure diagram)、timeline（v0.5.4+, timeline）、timeline2（v0.5.4+, up down alternating timeline）、fishbone（v0.5.4+, fishbone diagram） |          |
 | fishboneDeg（v0.5.4+）                      | Number |  45          |    Set the diagonal angle of the fishbone structure diagram        |        |
 | theme                            | String  | default          | Theme, options: default, classic, minions, pinkGrape, mint, gold, vitalityOrange, greenLeaf, dark2, skyGreen, classic2, classic3, classic4(v0.2.0+), classicGreen, classicBlue, blueSky, brainImpairedPink, dark, earthYellow, freshGreen, freshRed, romanticPurple, simpleBlack(v0.5.4+), courseGreen(v0.5.4+), coffee(v0.5.4+), redSpirit(v0.5.4+), blackHumour(v0.5.4+), lateNightOffice(v0.5.4+), blackGold(v0.5.4+)、、avocado(v.5.10-fix.2+)、autumn(v.5.10-fix.2+)、orangeJuice(v.5.10-fix.2+) |          |
@@ -114,6 +114,10 @@ const mindMap = new MindMap({
 | isOnlySearchCurrentRenderNodes（v0.9.8+）     | Boolean | false  | Is it necessary to only search for the current rendered node, and nodes that have been collapsed will not be searched for |         |
 | onlyOneEnableActiveNodeOnCooperate（v0.9.8+）     | Boolean | false  | During collaborative editing, the same node cannot be selected by multiple people at the same time |         |
 | beforeCooperateUpdate（v0.9.8+）     | Function、null | null  | During collaborative editing, node operations are about to be updated to the lifecycle functions of other clients. The function takes an object as a parameter:{ type: 【createOrUpdate（Create or update nodes）、delete（Delete node）】, list: 【Array type, 1.When type=createOrUpdate, it represents the node data that has been created or updated, which will be synchronized to other clients, so you can modify the data; 2.When type=delete, represents the deleted node data】 } |         |
+| beforeShortcutRun（v0.9.9+）     | Function、null | null  | The lifecycle function before the shortcut operation is about to be executed, returning true can prevent the operation from executing. The function takes two parameters: key（Shortcut key）、activeNodeList（List of currently activated nodes） |         |
+| rainbowLinesConfig（v0.9.9+）     | Object | { open: false, colorsList: [] }  | Rainbow line configuration requires registering the RainbowLines plugin first. Object type, Structure: { open: false【Is turn on rainbow lines】, colorsList: []【Customize the color list for rainbow lines. If not set, the default color list will be used】 } |         |
+| addContentToHeader（v0.9.9+）     | Function、null | null  | Add custom content to the header when exporting PNG, SVG, and PDF. Can pass a function that can return null to indicate no content is added, or it can return an object, For a detailed introduction, please refer to section 【How to add custom content when exporting】 below |         |
+| addContentToFooter（v0.9.9+）     | Function、null | null  | The basic definition is the same as addContentToHeader, adding custom content at the end |         |
 
 ### Data structure
 
@@ -175,6 +179,41 @@ If you want to add custom fields, you can add them to the same level as 'data' a
 | type        | String |                                           | Values for icon grouping |
 | list        | Array  |                                           | A list of icons under grouping, with each item in the array being an object, `{ name: '', icon: '' }`，`name`represents the name of the icon, `icon`represents the icon, Can be an `svg` icon, such as `<svg ...><path></path></svg>`, also can be a image `url`, or `base64` icon, such as `data:image/png;base64,...` |
 
+### How to add custom content when exporting
+
+The two instantiation options `addContentToHeader` and `addContentToFooter` can be used to add custom content at the beginning and end when exporting `png`、`svg`、`pdf`, The default value is `null`, which means no configuration. A function can be passed and can return `null`, which means no content will be added. If you want to add content, you need to return the following structure:
+
+```
+{
+  el,// Custom DOM node to be added, styles can be inline
+  cssText,// Optional, if the style does not want to be inlined, you can pass this value as a CSS string
+  height: 50// The height of the returned DOM node must be passed
+}
+```
+
+A simple example:
+
+```js
+new MindMap({
+  addContentToFooter: () => {
+    const el = document.createElement('div')
+    el.className = 'footer'
+    el.innerHTML = 'From: simple-mind-map'
+    const cssText = `
+      .footer {
+        width: 100%;
+        height: 30px;
+      }
+    `
+    return {
+      el,
+      cssText,
+      height: 30
+    }
+  }
+})
+```
+
 ## Static methods
 
 ### defineTheme(name, config)
@@ -314,6 +353,12 @@ Current Theme Configuration.
 
 ## Instance methods
 
+### updateData(data)
+
+> v0.9.9+
+
+Update canvas data. If the new data is formed by adding, deleting, modifying, and querying based on the current canvas node data, this method can be used to update the canvas data. The performance will be better, and not all nodes will be recreated, but rather reused as much as possible.
+
 ### clearDraw()
 
 > v0.8.0+
@@ -326,7 +371,7 @@ Clear `lineDraw`、`associativeLineDraw`、`nodeDraw`、`otherDraw` containers.
 
 Destroy mind maps. It will remove registered plugins, remove listening events, and delete all nodes on the canvas.
 
-### getSvgData({ paddingX = 0, paddingY = 0, ignoreWatermark = false })
+### getSvgData({ paddingX = 0, paddingY = 0, ignoreWatermark = false, addContentToHeader, addContentToFooter })
 
 > v0.3.0+
 
@@ -336,6 +381,10 @@ Destroy mind maps. It will remove registered plugins, remove listening events, a
 
 `ignoreWatermark`：v0.8.0+, Do not draw watermarks. If you do not need to draw watermarks, you can pass 'true' because drawing watermarks is very slow
 
+`addContentToHeader`：v0.9.9+, Function, You can return the custom content to be added to the header, as detailed in the configuration in 【Instantiation options】
+
+`addContentToFooter`：v0.9.9+, Function, You can return the custom content to be added to the tail, as detailed in the configuration in 【Instantiation options】
+
 Get the `svg` data and return an object. The detailed structure is as follows:
 
 ```js
@@ -406,7 +455,8 @@ Listen to an event. Event list:
 | expand_btn_click                 | Node expand or collapse event                                            | this (node instance)                                                                                            |
 | before_show_text_edit            | Event before node text edit box opens                                    |                                                                                                                 |
 | hide_text_edit                   | Node text edit box close event                                           | textEditNode (text edit box DOM node), activeNodeList (current list of active nodes)                            |
-| scale                            | Zoom event                                                               | scale (zoom ratio)                                                                                              |
+| scale                            | Canvas zoom event                                                               | scale (zoom ratio)                                            |
+| translate（v0.9.10+）         |   Canvas movement event           | x（translate x）、y（translate y）                     |
 | node_img_dblclick（v0.2.15+）    | Node image double-click event                                            | this (node instance), e (event object)                                                                          |
 | node_img_mouseenter（v0.6.5+）    |  Node image mouseenter event                    | this（node instance）、imgNode（img node）、e（event object）                              |
 | node_img_mouseleave（v0.6.5+）    |  Node image mouseleave event                    | this（node instance）、imgNode（img node）、e（event object）                              |
@@ -419,7 +469,9 @@ Listen to an event. Event list:
 | associative_line_click（v0.4.5+）    |  Triggered when an associated line is clicked  |  path(Connector node)、clickPath(Invisible click line node)、node(Start node)、toNode(Target node)          |
 | svg_mouseenter（v0.5.1+）    | Triggered when the mouse moves into the SVG canvas   | e（event object）  |
 | svg_mouseleave（v0.5.1+）    | Triggered when the mouse moves out of the SVG canvas   | e（event object）  |
-| node_icon_click（v0.6.10+）    | Triggered when clicking on an icon within a node   | this（node instance）、item（Click on the icon name）、e（event object）  |
+| node_icon_click（v0.6.10+）    | Triggered when clicking on an icon within a node   | this（node instance）、item（Click on the icon name）、e（event object）、node(Icon node, v0.9.9+)   |
+| node_icon_mouseenter（v0.9.9+）    |  Triggered when the mouse moves into an icon within a node  | this（node instance）、item（Click on the icon name）、e（event object）、node(Icon node)  |
+| node_icon_mouseleave（v0.9.9+）    |  Triggered when the mouse moves out of the icon within the node  | this（node instance）、item（Click on the icon name）、e（event object）、node(Icon node)  |
 | view_theme_change（v0.6.12+）    | Triggered after calling the setTheme method to set the theme   | theme（theme name）  |
 | set_data（v0.7.3+）    |  Triggered when the setData method is called to dynamically set mind map data  | data（New Mind Map Data）  |
 | resize（v0.8.0+）    | Triggered after the container size changes, actually when the 'resize' method of the mind map instance is called   |   |
@@ -428,6 +480,9 @@ Listen to an event. Event list:
 | body_click    | Click event of document.body                       | e（event object）      |
 | data_change_detail（v0.9.3+）    |  The detailed changes in rendering tree data will return an array, with each item representing an update point and each item being an object, There is a 'type' attribute that represents the type of detail, Including 'create' (create node), 'update' (update node), 'delete' (delete node), There is a 'data' attribute that represents the current updated node data. If it is of the 'update' type, there will also be an 'oldData' attribute that saves the data of the node before the update  | arr（Detail data）      |
 | layout_change（v0.9.4+）    |  Triggered when modifying the structure, i.e. when the mindMap.setLayout() method is called | layout（New layout）      |
+| node_cooperate_avatar_click（v0.9.9+）    | Triggered when the mouse clicks on a person's avatar during collaborative editing  |  userInfo(User info)、 this(Current node instance)、 node(Avatar node)、 e(Event Object)      |
+| node_cooperate_avatar_mouseenter（v0.9.9+）    |  Triggered when the mouse moves over a person's avatar during collaborative editing |  userInfo(User info)、 this(Current node instance)、 node(Avatar node)、 e(Event Object)    |
+| node_cooperate_avatar_mouseleave（v0.9.9+）    |  Triggered when removing personnel avatars with the mouse during collaborative editing |  userInfo(User info)、 this(Current node instance)、 node(Avatar node)、 e(Event Object)   |
 
 ### emit(event, ...args)
 
@@ -527,6 +582,7 @@ redo. All commands are as follows:
 | SET_NODE_ICON                      | Set Node Icon                                                | node (node to set), icons (array, predefined image names array, available icons can be obtained in the nodeIconList list in the [icons.js](https://github.com/wanglin2/mind-map/blob/main/simple-mind-map/src/svg/icons.js) file, icon name is type_name, such as ['priority_1']) |
 | SET_NODE_HYPERLINK                 | Set Node Hyperlink                                           | node (node to set), link (hyperlink address), title (hyperlink name, optional) |
 | SET_NODE_NOTE                      | Set Node Note                                                | node (node to set), note (note text)                         |
+| SET_NODE_ATTACHMENT（v0.9.10+）                       |   Set node attachment               | node（node to set）、url（attachment url）、name（attachment name, optional）                       |
 | SET_NODE_TAG                       | Set Node Tag                                                 | node (node to set), tag (string array, built-in color information can be obtained in [constant.js](https://github.com/wanglin2/mind-map/blob/main/simple-mind-map/src/constants/constant.js)) |
 | INSERT_AFTER (v0.1.5+)             | Move Node to After Another Node | node (node to move, (v0.7.2+supports passing node arrays to move multiple nodes simultaneously)), exist (target node)                     |
 | INSERT_BEFORE (v0.1.5+)            | Move Node to Before Another Node | node (node to move, (v0.7.2+supports passing node arrays to move multiple nodes simultaneously)), exist (target node)                     |
@@ -550,7 +606,7 @@ redo. All commands are as follows:
 
 Dynamic setting of mind map data, pure node data
 
-`data`: mind map structure data
+`data`: mind map structure data. V0.9.9+ supports passing empty objects or null, and the canvas will display blank space.
 
 ### setFullData(_data_)
 

web/src/pages/Doc/en/constructor/index.vue

@@ -37,9 +37,9 @@
 </tr>
 <tr>
 <td>data</td>
-<td>Object</td>
-<td>{}</td>
-<td>Mind map data, Please refer to the introduction of 【Data structure】 below</td>
+<td>Object 、null</td>
+<td></td>
+<td>Mind map data, Please refer to the introduction of 【Data structure】 below. V0.9.9+supports passing empty objects or null, and the canvas will display blank space</td>
 <td></td>
 </tr>
 <tr>
@@ -658,6 +658,34 @@
 <td>During collaborative editing, node operations are about to be updated to the lifecycle functions of other clients. The function takes an object as a parameter:{ type: 【createOrUpdate（Create or update nodes）、delete（Delete node）】, list: 【Array type, 1.When type=createOrUpdate, it represents the node data that has been created or updated, which will be synchronized to other clients, so you can modify the data; 2.When type=delete, represents the deleted node data】 }</td>
 <td></td>
 </tr>
+<tr>
+<td>beforeShortcutRun（v0.9.9+）</td>
+<td>Function、null</td>
+<td>null</td>
+<td>The lifecycle function before the shortcut operation is about to be executed, returning true can prevent the operation from executing. The function takes two parameters: key（Shortcut key）、activeNodeList（List of currently activated nodes）</td>
+<td></td>
+</tr>
+<tr>
+<td>rainbowLinesConfig（v0.9.9+）</td>
+<td>Object</td>
+<td>{ open: false, colorsList: [] }</td>
+<td>Rainbow line configuration requires registering the RainbowLines plugin first. Object type, Structure: { open: false【Is turn on rainbow lines】, colorsList: []【Customize the color list for rainbow lines. If not set, the default color list will be used】 }</td>
+<td></td>
+</tr>
+<tr>
+<td>addContentToHeader（v0.9.9+）</td>
+<td>Function、null</td>
+<td>null</td>
+<td>Add custom content to the header when exporting PNG, SVG, and PDF. Can pass a function that can return null to indicate no content is added, or it can return an object, For a detailed introduction, please refer to section 【How to add custom content when exporting】 below</td>
+<td></td>
+</tr>
+<tr>
+<td>addContentToFooter（v0.9.9+）</td>
+<td>Function、null</td>
+<td>null</td>
+<td>The basic definition is the same as addContentToHeader, adding custom content at the end</td>
+<td></td>
+</tr>
 </tbody>
 </table>
 <h3>Data structure</h3>
@@ -776,6 +804,34 @@
 </tr>
 </tbody>
 </table>
+<h3>How to add custom content when exporting</h3>
+<p>The two instantiation options <code>addContentToHeader</code> and <code>addContentToFooter</code> can be used to add custom content at the beginning and end when exporting <code>png</code>、<code>svg</code>、<code>pdf</code>, The default value is <code>null</code>, which means no configuration. A function can be passed and can return <code>null</code>, which means no content will be added. If you want to add content, you need to return the following structure:</p>
+<pre class="hljs"><code>{
+  el,// Custom DOM node to be added, styles can be inline
+  cssText,// Optional, if the style does not want to be inlined, you can pass this value as a CSS string
+  height: 50// The height of the returned DOM node must be passed
+}
+</code></pre>
+<p>A simple example:</p>
+<pre class="hljs"><code><span class="hljs-keyword">new</span> MindMap({
+  <span class="hljs-attr">addContentToFooter</span>: <span class="hljs-function">() =&gt;</span> {
+    <span class="hljs-keyword">const</span> el = <span class="hljs-built_in">document</span>.createElement(<span class="hljs-string">&#x27;div&#x27;</span>)
+    el.className = <span class="hljs-string">&#x27;footer&#x27;</span>
+    el.innerHTML = <span class="hljs-string">&#x27;From: simple-mind-map&#x27;</span>
+    <span class="hljs-keyword">const</span> cssText = <span class="hljs-string">`
+      .footer {
+        width: 100%;
+        height: 30px;
+      }
+    `</span>
+    <span class="hljs-keyword">return</span> {
+      el,
+      cssText,
+      <span class="hljs-attr">height</span>: <span class="hljs-number">30</span>
+    }
+  }
+})
+</code></pre>
 <h2>Static methods</h2>
 <h3>defineTheme(name, config)</h3>
 <blockquote>
@@ -872,6 +928,11 @@ mindMap.setTheme(<span class="hljs-string">&#x27;Theme name&#x27;</span>)
 <h3>themeConfig</h3>
 <p>Current Theme Configuration.</p>
 <h2>Instance methods</h2>
+<h3>updateData(data)</h3>
+<blockquote>
+<p>v0.9.9+</p>
+</blockquote>
+<p>Update canvas data. If the new data is formed by adding, deleting, modifying, and querying based on the current canvas node data, this method can be used to update the canvas data. The performance will be better, and not all nodes will be recreated, but rather reused as much as possible.</p>
 <h3>clearDraw()</h3>
 <blockquote>
 <p>v0.8.0+</p>
@@ -882,13 +943,15 @@ mindMap.setTheme(<span class="hljs-string">&#x27;Theme name&#x27;</span>)
 <p>v0.6.0+</p>
 </blockquote>
 <p>Destroy mind maps. It will remove registered plugins, remove listening events, and delete all nodes on the canvas.</p>
-<h3>getSvgData({ paddingX = 0, paddingY = 0, ignoreWatermark = false })</h3>
+<h3>getSvgData({ paddingX = 0, paddingY = 0, ignoreWatermark = false, addContentToHeader, addContentToFooter })</h3>
 <blockquote>
 <p>v0.3.0+</p>
 </blockquote>
 <p><code>paddingX</code>: Padding x</p>
 <p><code>paddingY</code>: Padding y</p>
 <p><code>ignoreWatermark</code>：v0.8.0+, Do not draw watermarks. If you do not need to draw watermarks, you can pass 'true' because drawing watermarks is very slow</p>
+<p><code>addContentToHeader</code>：v0.9.9+, Function, You can return the custom content to be added to the header, as detailed in the configuration in 【Instantiation options】</p>
+<p><code>addContentToFooter</code>：v0.9.9+, Function, You can return the custom content to be added to the tail, as detailed in the configuration in 【Instantiation options】</p>
 <p>Get the <code>svg</code> data and return an object. The detailed structure is as follows:</p>
 <pre class="hljs"><code>{
   svg, <span class="hljs-comment">// Element, the overall svg element of the mind map graphics, including: svg (canvas container), g (actual mind map group)</span>
@@ -1053,10 +1116,15 @@ poor performance and should be used sparingly.</p>
 </tr>
 <tr>
 <td>scale</td>
-<td>Zoom event</td>
+<td>Canvas zoom event</td>
 <td>scale (zoom ratio)</td>
 </tr>
 <tr>
+<td>translate（v0.9.10+）</td>
+<td>Canvas movement event</td>
+<td>x（translate x）、y（translate y）</td>
+</tr>
+<tr>
 <td>node_img_dblclick（v0.2.15+）</td>
 <td>Node image double-click event</td>
 <td>this (node instance), e (event object)</td>
@@ -1119,7 +1187,17 @@ poor performance and should be used sparingly.</p>
 <tr>
 <td>node_icon_click（v0.6.10+）</td>
 <td>Triggered when clicking on an icon within a node</td>
-<td>this（node instance）、item（Click on the icon name）、e（event object）</td>
+<td>this（node instance）、item（Click on the icon name）、e（event object）、node(Icon node, v0.9.9+)</td>
+</tr>
+<tr>
+<td>node_icon_mouseenter（v0.9.9+）</td>
+<td>Triggered when the mouse moves into an icon within a node</td>
+<td>this（node instance）、item（Click on the icon name）、e（event object）、node(Icon node)</td>
+</tr>
+<tr>
+<td>node_icon_mouseleave（v0.9.9+）</td>
+<td>Triggered when the mouse moves out of the icon within the node</td>
+<td>this（node instance）、item（Click on the icon name）、e（event object）、node(Icon node)</td>
 </tr>
 <tr>
 <td>view_theme_change（v0.6.12+）</td>
@@ -1161,6 +1239,21 @@ poor performance and should be used sparingly.</p>
 <td>Triggered when modifying the structure, i.e. when the mindMap.setLayout() method is called</td>
 <td>layout（New layout）</td>
 </tr>
+<tr>
+<td>node_cooperate_avatar_click（v0.9.9+）</td>
+<td>Triggered when the mouse clicks on a person's avatar during collaborative editing</td>
+<td>userInfo(User info)、 this(Current node instance)、 node(Avatar node)、 e(Event Object)</td>
+</tr>
+<tr>
+<td>node_cooperate_avatar_mouseenter（v0.9.9+）</td>
+<td>Triggered when the mouse moves over a person's avatar during collaborative editing</td>
+<td>userInfo(User info)、 this(Current node instance)、 node(Avatar node)、 e(Event Object)</td>
+</tr>
+<tr>
+<td>node_cooperate_avatar_mouseleave（v0.9.9+）</td>
+<td>Triggered when removing personnel avatars with the mouse during collaborative editing</td>
+<td>userInfo(User info)、 this(Current node instance)、 node(Avatar node)、 e(Event Object)</td>
+</tr>
 </tbody>
 </table>
 <h3>emit(event, ...args)</h3>
@@ -1337,6 +1430,11 @@ redo. All commands are as follows:</p>
 <td>node (node to set), note (note text)</td>
 </tr>
 <tr>
+<td>SET_NODE_ATTACHMENT（v0.9.10+）</td>
+<td>Set node attachment</td>
+<td>node（node to set）、url（attachment url）、name（attachment name, optional）</td>
+</tr>
+<tr>
 <td>SET_NODE_TAG</td>
 <td>Set Node Tag</td>
 <td>node (node to set), tag (string array, built-in color information can be obtained in <a href="https://github.com/wanglin2/mind-map/blob/main/simple-mind-map/src/constants/constant.js">constant.js</a>)</td>
@@ -1430,7 +1528,7 @@ redo. All commands are as follows:</p>
 </table>
 <h3>setData(data)</h3>
 <p>Dynamic setting of mind map data, pure node data</p>
-<p><code>data</code>: mind map structure data</p>
+<p><code>data</code>: mind map structure data. V0.9.9+ supports passing empty objects or null, and the canvas will display blank space.</p>
 <h3>setFullData(<em>data</em>)</h3>
 <blockquote>
 <p>v0.2.7+</p>

web/src/pages/Doc/en/introduction/index.md

@@ -327,4 +327,34 @@ Open source is not easy. If this project is helpful to you, you can invite the a
         <img src="../../../../assets/avatar/pluvet.jpg" style="width: 50px;height: 50px;object-fit: cover;border-radius: 50%;" />
         <p>pluvet</p>
     </div>
+    <div style="display: flex; flex-direction: column; align-items: center; width: fit-content; margin: 5px;">
+        <img src="../../../../assets/avatar/皇登攀.jpg" style="width: 50px;height: 50px;object-fit: cover;border-radius: 50%;" />
+        <p>皇登攀</p>
+    </div>
+    <div style="display: flex; flex-direction: column; align-items: center; width: fit-content; margin: 5px;">
+        <img src="../../../../assets/avatar/风格.jpg" style="width: 50px;height: 50px;object-fit: cover;border-radius: 50%;" />
+        <p>风格</p>
+    </div>
+    <div style="display: flex; flex-direction: column; align-items: center; width: fit-content; margin: 5px;">
+        <img src="../../../../assets/avatar/default.png" style="width: 50px;height: 50px;object-fit: cover;border-radius: 50%;" />
+        <p>SR</p>
+    </div>
+    <div style="display: flex; flex-direction: column; align-items: center; width: fit-content; margin: 5px;">
+        <img src="../../../../assets/avatar/逆水行舟.jpg" style="width: 50px;height: 50px;object-fit: cover;border-radius: 50%;" />
+        <p>逆水行舟</p>
+    </div>
+    <div style="display: flex; flex-direction: column; align-items: center; width: fit-content; margin: 5px;">
+        <img src="../../../../assets/avatar/default.png" style="width: 50px;height: 50px;object-fit: cover;border-radius: 50%;" />
+        <p>LiuJL</p>
+    </div>
+    <div style="display: flex; flex-direction: column; align-items: center; width: fit-content; margin: 5px;">
+        <img src="../../../../assets/avatar/L.jpg" style="width: 50px;height: 50px;object-fit: cover;border-radius: 50%;" />
+        <p>L</p>
+    </div>
+</div>
+<div style="display: flex;">
+    <div style="display: flex; flex-direction: column; align-items: center; width: fit-content; margin: 5px;">
+        <img src="../../../../assets/avatar/default.png" style="width: 50px;height: 50px;object-fit: cover;border-radius: 50%;" />
+        <p>sunniberg</p>
+    </div>
 </div>

web/src/pages/Doc/en/introduction/index.vue

@@ -8,17 +8,17 @@
 </blockquote>
 <h2>Features</h2>
 <ul>
-<li><input type="checkbox" id="checkbox80" checked="true" /><label for="checkbox80">Pluggable architecture, in addition to core functions, other functions are provided as plugins, which can be used as needed to reduce packaging volume</label></li>
-<li><input type="checkbox" id="checkbox81" checked="true" /><label for="checkbox81">Support logical structure chart, mind map, Organizational chart, directory organization chart, timeline (horizontal and vertical), fishbone chart and other structures</label></li>
-<li><input type="checkbox" id="checkbox82" checked="true" /><label for="checkbox82">Built-in multiple themes, allowing for highly customizable styles, and supporting registration of new themes</label></li>
-<li><input type="checkbox" id="checkbox83" checked="true" /><label for="checkbox83">Node content supports text (regular text, rich text), images, icons, hyperlinks, notes, labels, summaries, and math formulas</label></li>
-<li><input type="checkbox" id="checkbox84" checked="true" /><label for="checkbox84">Nodes support drag and drop (drag and move, freely adjust), multiple node shapes, and fully customize node content using DDM</label></li>
-<li><input type="checkbox" id="checkbox85" checked="true" /><label for="checkbox85">Support canvas dragging and scaling</label></li>
-<li><input type="checkbox" id="checkbox86" checked="true" /><label for="checkbox86">Supports two multi node selection methods: mouse button drag selection and Ctrl+left button selection</label></li>
-<li><input type="checkbox" id="checkbox87" checked="true" /><label for="checkbox87">Supoorts to export as </label><code>json</code>、<code>png</code>、<code>svg</code>、<code>pdf</code>、<code>markdown</code>、<code>xmind</code>, support import from <code>json</code>、<code>xmind</code>、<code>markdown</code></li>
-<li><input type="checkbox" id="checkbox88" checked="true" /><label for="checkbox88">Support shortcut keys, forward and backward, correlation lines, search and replacement, small maps, watermarks, and scrollbar</label></li>
-<li><input type="checkbox" id="checkbox89" checked="true" /><label for="checkbox89">Provide rich configurations to meet various scenarios and usage habits</label></li>
-<li><input type="checkbox" id="checkbox90" checked="true" /><label for="checkbox90">Support collaborative editing</label></li>
+<li><input type="checkbox" id="checkbox32" checked="true" /><label for="checkbox32">Pluggable architecture, in addition to core functions, other functions are provided as plugins, which can be used as needed to reduce packaging volume</label></li>
+<li><input type="checkbox" id="checkbox33" checked="true" /><label for="checkbox33">Support logical structure chart, mind map, Organizational chart, directory organization chart, timeline (horizontal and vertical), fishbone chart and other structures</label></li>
+<li><input type="checkbox" id="checkbox34" checked="true" /><label for="checkbox34">Built-in multiple themes, allowing for highly customizable styles, and supporting registration of new themes</label></li>
+<li><input type="checkbox" id="checkbox35" checked="true" /><label for="checkbox35">Node content supports text (regular text, rich text), images, icons, hyperlinks, notes, labels, summaries, and math formulas</label></li>
+<li><input type="checkbox" id="checkbox36" checked="true" /><label for="checkbox36">Nodes support drag and drop (drag and move, freely adjust), multiple node shapes, and fully customize node content using DDM</label></li>
+<li><input type="checkbox" id="checkbox37" checked="true" /><label for="checkbox37">Support canvas dragging and scaling</label></li>
+<li><input type="checkbox" id="checkbox38" checked="true" /><label for="checkbox38">Supports two multi node selection methods: mouse button drag selection and Ctrl+left button selection</label></li>
+<li><input type="checkbox" id="checkbox39" checked="true" /><label for="checkbox39">Supoorts to export as </label><code>json</code>、<code>png</code>、<code>svg</code>、<code>pdf</code>、<code>markdown</code>、<code>xmind</code>, support import from <code>json</code>、<code>xmind</code>、<code>markdown</code></li>
+<li><input type="checkbox" id="checkbox40" checked="true" /><label for="checkbox40">Support shortcut keys, forward and backward, correlation lines, search and replacement, small maps, watermarks, and scrollbar</label></li>
+<li><input type="checkbox" id="checkbox41" checked="true" /><label for="checkbox41">Provide rich configurations to meet various scenarios and usage habits</label></li>
+<li><input type="checkbox" id="checkbox42" checked="true" /><label for="checkbox42">Support collaborative editing</label></li>
 </ul>
 <blockquote>
 <p>Features that will not be implemented:</p>
@@ -34,16 +34,16 @@ frameworks such as Vue and React, or without a framework.</p>
 <p>This is an online mind map built using the <code>simple-mind-map</code> library and based
 on <code>Vue2.x</code> and <code>ElementUI</code>. Features include:</p>
 <ul>
-<li><input type="checkbox" id="checkbox91" checked="true" /><label for="checkbox91">Toolbar, which supports inserting and deleting nodes, and editing node</label>
+<li><input type="checkbox" id="checkbox43" checked="true" /><label for="checkbox43">Toolbar, which supports inserting and deleting nodes, and editing node</label>
 images, icons, hyperlinks, notes, tags, and summaries</li>
-<li><input type="checkbox" id="checkbox92" checked="true" /><label for="checkbox92">Sidebar, with panels for basic style settings, node style settings,</label>
+<li><input type="checkbox" id="checkbox44" checked="true" /><label for="checkbox44">Sidebar, with panels for basic style settings, node style settings,</label>
 outline, theme selection, and structure selection</li>
-<li><input type="checkbox" id="checkbox93" checked="true" /><label for="checkbox93">Import and export functionality; data is saved in the browser's local</label>
+<li><input type="checkbox" id="checkbox45" checked="true" /><label for="checkbox45">Import and export functionality; data is saved in the browser's local</label>
 storage by default, but it also supports creating, opening, and editing
 local files on the computer directly</li>
-<li><input type="checkbox" id="checkbox94" checked="true" /><label for="checkbox94">Right-click menu, which supports operations such as expanding, collapsing,</label>
+<li><input type="checkbox" id="checkbox46" checked="true" /><label for="checkbox46">Right-click menu, which supports operations such as expanding, collapsing,</label>
 and organizing layout</li>
-<li><input type="checkbox" id="checkbox95" checked="true" /><label for="checkbox95">Bottom bar, which supports node and word count statistics, switching</label>
+<li><input type="checkbox" id="checkbox47" checked="true" /><label for="checkbox47">Bottom bar, which supports node and word count statistics, switching</label>
 between edit and read-only modes, zooming in and out, and switching to
 full screen, support mini map</li>
 </ul>
@@ -281,6 +281,36 @@ full screen, support mini map</li>
         <img src="../../../../assets/avatar/pluvet.jpg" style="width: 50px;height: 50px;object-fit: cover;border-radius: 50%;" />
         <p>pluvet</p>
     </div>
+    <div style="display: flex; flex-direction: column; align-items: center; width: fit-content; margin: 5px;">
+        <img src="../../../../assets/avatar/皇登攀.jpg" style="width: 50px;height: 50px;object-fit: cover;border-radius: 50%;" />
+        <p>皇登攀</p>
+    </div>
+    <div style="display: flex; flex-direction: column; align-items: center; width: fit-content; margin: 5px;">
+        <img src="../../../../assets/avatar/风格.jpg" style="width: 50px;height: 50px;object-fit: cover;border-radius: 50%;" />
+        <p>风格</p>
+    </div>
+    <div style="display: flex; flex-direction: column; align-items: center; width: fit-content; margin: 5px;">
+        <img src="../../../../assets/avatar/default.png" style="width: 50px;height: 50px;object-fit: cover;border-radius: 50%;" />
+        <p>SR</p>
+    </div>
+    <div style="display: flex; flex-direction: column; align-items: center; width: fit-content; margin: 5px;">
+        <img src="../../../../assets/avatar/逆水行舟.jpg" style="width: 50px;height: 50px;object-fit: cover;border-radius: 50%;" />
+        <p>逆水行舟</p>
+    </div>
+    <div style="display: flex; flex-direction: column; align-items: center; width: fit-content; margin: 5px;">
+        <img src="../../../../assets/avatar/default.png" style="width: 50px;height: 50px;object-fit: cover;border-radius: 50%;" />
+        <p>LiuJL</p>
+    </div>
+    <div style="display: flex; flex-direction: column; align-items: center; width: fit-content; margin: 5px;">
+        <img src="../../../../assets/avatar/L.jpg" style="width: 50px;height: 50px;object-fit: cover;border-radius: 50%;" />
+        <p>L</p>
+    </div>
+</div>
+<div style="display: flex;">
+    <div style="display: flex; flex-direction: column; align-items: center; width: fit-content; margin: 5px;">
+        <img src="../../../../assets/avatar/default.png" style="width: 50px;height: 50px;object-fit: cover;border-radius: 50%;" />
+        <p>sunniberg</p>
+    </div>
 </div>
   </div>
 </template>

web/src/pages/Doc/en/node/index.md

@@ -56,6 +56,12 @@ Whether the node is currently being dragged
 
 ## Methods
 
+### getAncestorNodes()
+
+> v0.9.9+
+
+Obtain a list of ancestor node instances.
+
 ### highlight()
 
 > v0.9.8+
@@ -255,9 +261,19 @@ Setting the node hyperlink, a shortcut for the `SET_NODE_HYPERLINK` command
 
 Setting the node note, a shortcut for the `SET_NODE_NOTE` command
 
+### setAttachment(url, name)
+
+> v0.9.10+
+
+- `url`：Attachment url；
+
+- `name`：Attachment name, optional
+
+Set node attachments, a shortcut for the `SET_NODE_ATTACHMENT` command
+
 ### setTag(tag)
 
-Setting the node tag, a shortcut for the `SET_NODE_TAG` command"
+Setting the node tag, a shortcut for the `SET_NODE_TAG` command
 
 ### hide()
 

web/src/pages/Doc/en/node/index.vue

@@ -31,6 +31,11 @@
 </blockquote>
 <p>Whether the node is currently being dragged</p>
 <h2>Methods</h2>
+<h3>getAncestorNodes()</h3>
+<blockquote>
+<p>v0.9.9+</p>
+</blockquote>
+<p>Obtain a list of ancestor node instances.</p>
 <h3>highlight()</h3>
 <blockquote>
 <p>v0.9.8+</p>
@@ -190,8 +195,21 @@ nodeData, <code>SET_NODE_DATA</code> command's shortcut method. This method and
 <p>Setting the node hyperlink, a shortcut for the <code>SET_NODE_HYPERLINK</code> command</p>
 <h3>setNote(note)</h3>
 <p>Setting the node note, a shortcut for the <code>SET_NODE_NOTE</code> command</p>
+<h3>setAttachment(url, name)</h3>
+<blockquote>
+<p>v0.9.10+</p>
+</blockquote>
+<ul>
+<li>
+<p><code>url</code>：Attachment url；</p>
+</li>
+<li>
+<p><code>name</code>：Attachment name, optional</p>
+</li>
+</ul>
+<p>Set node attachments, a shortcut for the <code>SET_NODE_ATTACHMENT</code> command</p>
 <h3>setTag(tag)</h3>
-<p>Setting the node tag, a shortcut for the <code>SET_NODE_TAG</code> command&quot;</p>
+<p>Setting the node tag, a shortcut for the <code>SET_NODE_TAG</code> command</p>
 <h3>hide()</h3>
 <blockquote>
 <p>v0.1.5+</p>

web/src/pages/Doc/en/rainbowLines/index.md

@@ -0,0 +1,56 @@
+# RainbowLines plugin
+
+> v0.9.9+
+
+This plugin is used to implement rainbow lines.
+
+Enabling rainbow lines and custom colors can be set through the instantiation option 'rainbowLinesConfig'.
+
+The default color list is as follows:
+
+```
+[
+  'rgb(255, 213, 73)',
+  'rgb(255, 136, 126)',
+  'rgb(107, 225, 141)',
+  'rgb(151, 171, 255)',
+  'rgb(129, 220, 242)',
+  'rgb(255, 163, 125)',
+  'rgb(152, 132, 234)'
+]
+```
+
+## Register
+
+```js
+import MindMap from 'simple-mind-map'
+import RainbowLines from 'simple-mind-map/src/plugins/RainbowLines.js'
+MindMap.usePlugin(RainbowLines)
+```
+
+After registration and instantiation of `MindMap`, the instance can be obtained through `mindMap.rainbowLines`.
+
+## Method
+
+### updateRainLinesConfig(config = {})
+
+If you want to modify the rainbow lines after setting them through the instantiation option 'rainbowLinesConfig', you can use this method, option `config` is same with `rainbowLinesConfig`。
+
+```js
+{
+    open: false,// Is turn on rainbow lines
+    colorsList: []// Customize the color list for rainbow lines. If not set, the default color list will be used
+}
+```
+
+### getColorsList()
+
+Get a list of currently used rainbow line colors.
+
+### getNodeColor(node)
+
+Retrieve the rainbow line color corresponding to the specified node instance.
+
+### getSecondLayerAncestor(node)
+
+Retrieve the second level ancestor node instance of a node instance.

web/src/pages/Doc/en/rainbowLines/index.vue

@@ -0,0 +1,52 @@
+<template>
+  <div>
+    <h1>RainbowLines plugin</h1>
+<blockquote>
+<p>v0.9.9+</p>
+</blockquote>
+<p>This plugin is used to implement rainbow lines.</p>
+<p>Enabling rainbow lines and custom colors can be set through the instantiation option 'rainbowLinesConfig'.</p>
+<p>The default color list is as follows:</p>
+<pre class="hljs"><code>[
+  'rgb(255, 213, 73)',
+  'rgb(255, 136, 126)',
+  'rgb(107, 225, 141)',
+  'rgb(151, 171, 255)',
+  'rgb(129, 220, 242)',
+  'rgb(255, 163, 125)',
+  'rgb(152, 132, 234)'
+]
+</code></pre>
+<h2>Register</h2>
+<pre class="hljs"><code><span class="hljs-keyword">import</span> MindMap <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;simple-mind-map&#x27;</span>
+<span class="hljs-keyword">import</span> RainbowLines <span class="hljs-keyword">from</span> <span class="hljs-string">&#x27;simple-mind-map/src/plugins/RainbowLines.js&#x27;</span>
+MindMap.usePlugin(RainbowLines)
+</code></pre>
+<p>After registration and instantiation of <code>MindMap</code>, the instance can be obtained through <code>mindMap.rainbowLines</code>.</p>
+<h2>Method</h2>
+<h3>updateRainLinesConfig(config = {})</h3>
+<p>If you want to modify the rainbow lines after setting them through the instantiation option 'rainbowLinesConfig', you can use this method, option <code>config</code> is same with <code>rainbowLinesConfig</code>。</p>
+<pre class="hljs"><code>{
+    <span class="hljs-attr">open</span>: <span class="hljs-literal">false</span>,<span class="hljs-comment">// Is turn on rainbow lines</span>
+    <span class="hljs-attr">colorsList</span>: []<span class="hljs-comment">// Customize the color list for rainbow lines. If not set, the default color list will be used</span>
+}
+</code></pre>
+<h3>getColorsList()</h3>
+<p>Get a list of currently used rainbow line colors.</p>
+<h3>getNodeColor(node)</h3>
+<p>Retrieve the rainbow line color corresponding to the specified node instance.</p>
+<h3>getSecondLayerAncestor(node)</h3>
+<p>Retrieve the second level ancestor node instance of a node instance.</p>
+
+  </div>
+</template>
+
+<script>
+export default {
+
+}
+</script>
+
+<style>
+
+</style>

web/src/pages/Doc/routerList.js

@@ -32,6 +32,8 @@ export default [
       { path: 'course23', title: '如何渲染滚动条' },
       { path: 'course24', title: '如何开发一个插件' },
       { path: 'course25', title: '关于概要' },
+      { path: 'course26', title: '如何实现AI生成节点内容' },
+      { path: 'course27', title: '快捷键操作如何传递自定义参数' },
       { path: 'doExport', title: 'Export 插件' },
       { path: 'drag', title: 'Drag插件' },
       { path: 'introduction', title: '简介' },
@@ -60,6 +62,7 @@ export default [
       { path: 'scrollbar', title: 'Scrollbar插件' },
       { path: 'formula', title: 'Formula插件' },
       { path: 'cooperate', title: 'Cooperate插件' },
+      { path: 'rainbowLines', title: 'RainbowLines插件' },
       { path: 'handDrawnLikeStyle', title: 'HandDrawnLikeStyle收费插件' },
       { path: 'help1', title: '概要/关联线' },
       { path: 'help2', title: '客户端' },
@@ -102,6 +105,7 @@ export default [
       { path: 'scrollbar', title: 'Scrollbar plugin' },
       { path: 'formula', title: 'Formula plugin' },
       { path: 'cooperate', title: 'Cooperate plugin' },
+      { path: 'rainbowLines', title: 'RainbowLines plugin' },
       { path: 'handDrawnLikeStyle', title: 'HandDrawnLikeStyle chargeable plugin' },
       { path: 'client', title: 'Client' }
     ]

web/src/pages/Doc/zh/changelog/index.md

@@ -1,5 +1,85 @@
 # Changelog
 
+## 0.9.10
+
+修复：
+
+> 1.修复搜索时全部替换操作报错的问题；
+>
+> 2.修复节点文本存在svg不支持的实体字符时小地图无法渲染的问题；
+
+新增：
+
+> 1.新增画布移动时的事件translate；
+>
+> 2.节点内容支持设置附件；
+
+Demo：
+
+> 1.支持拖拽文件到页面进行导入；
+
+客户端：
+
+> 1.节点支持添加附件；
+
+## 0.9.9-fix.2
+
+修复：
+
+> 1.修复插入父节点操作时原节点样式未更新的问题；
+>
+> 2.修复开启彩虹线条时切换结构会报错的问题；
+
+Demo：
+
+> 1.修复侧边栏大纲点击全屏编辑时打开的是源码编辑模式的问题；
+
+## 0.9.9-fix.1
+
+修复上个版本的改动造成搜索插件无法搜索的问题。
+
+## 0.9.9
+
+修复：
+
+> 1.修复第一次创建关联线时，箭头颜色不正确的问题；
+
+新增：
+
+> 1.支持insert键插入下级节点；
+>
+> 2.增加beforeShortcutRun实例化选项用于拦截快捷键操作；
+>
+> 3.根实例增加增量更新画布数据的方法updateData；
+>
+> 4.新增彩虹线条插件；
+>
+> 5.节点中的图标添加鼠标移入和移出事件；
+>
+> 6.节点实例新增getAncestorNodes方法用于获取祖先节点列表；
+>
+> 7.协同编辑时的人员头像增加鼠标事件；
+>
+> 8.实例化及setData方法支持传入空的data；
+>
+> 9.新增导出图片时添加自定义内容的实例化选项；
+
+Demo：
+
+> 1.支持配置彩虹线条；
+>
+> 2.新增源码编辑模式；
+>
+> 3.导出png、pdf、svg支持设置底部自定义文字；
+
+客户端:
+
+> 1.双击文件打开应用时不打开工作台页面；
+>
+> 2.修复重复打开同一个文件会打开多个编辑窗口的问题；
+>
+> 3.修改删除正在编辑的文件的提示；
+
 ## 0.9.8
 
 修复：

web/src/pages/Doc/zh/changelog/index.vue

@@ -1,6 +1,66 @@
 <template>
   <div>
     <h1>Changelog</h1>
+<h2>0.9.10</h2>
+<p>修复：</p>
+<blockquote>
+<p>1.修复搜索时全部替换操作报错的问题；</p>
+<p>2.修复节点文本存在svg不支持的实体字符时小地图无法渲染的问题；</p>
+</blockquote>
+<p>新增：</p>
+<blockquote>
+<p>1.新增画布移动时的事件translate；</p>
+<p>2.节点内容支持设置附件；</p>
+</blockquote>
+<p>Demo：</p>
+<blockquote>
+<p>1.支持拖拽文件到页面进行导入；</p>
+</blockquote>
+<p>客户端：</p>
+<blockquote>
+<p>1.节点支持添加附件；</p>
+</blockquote>
+<h2>0.9.9-fix.2</h2>
+<p>修复：</p>
+<blockquote>
+<p>1.修复插入父节点操作时原节点样式未更新的问题；</p>
+<p>2.修复开启彩虹线条时切换结构会报错的问题；</p>
+</blockquote>
+<p>Demo：</p>
+<blockquote>
+<p>1.修复侧边栏大纲点击全屏编辑时打开的是源码编辑模式的问题；</p>
+</blockquote>
+<h2>0.9.9-fix.1</h2>
+<p>修复上个版本的改动造成搜索插件无法搜索的问题。</p>
+<h2>0.9.9</h2>
+<p>修复：</p>
+<blockquote>
+<p>1.修复第一次创建关联线时，箭头颜色不正确的问题；</p>
+</blockquote>
+<p>新增：</p>
+<blockquote>
+<p>1.支持insert键插入下级节点；</p>
+<p>2.增加beforeShortcutRun实例化选项用于拦截快捷键操作；</p>
+<p>3.根实例增加增量更新画布数据的方法updateData；</p>
+<p>4.新增彩虹线条插件；</p>
+<p>5.节点中的图标添加鼠标移入和移出事件；</p>
+<p>6.节点实例新增getAncestorNodes方法用于获取祖先节点列表；</p>
+<p>7.协同编辑时的人员头像增加鼠标事件；</p>
+<p>8.实例化及setData方法支持传入空的data；</p>
+<p>9.新增导出图片时添加自定义内容的实例化选项；</p>
+</blockquote>
+<p>Demo：</p>
+<blockquote>
+<p>1.支持配置彩虹线条；</p>
+<p>2.新增源码编辑模式；</p>
+<p>3.导出png、pdf、svg支持设置底部自定义文字；</p>
+</blockquote>
+<p>客户端:</p>
+<blockquote>
+<p>1.双击文件打开应用时不打开工作台页面；</p>
+<p>2.修复重复打开同一个文件会打开多个编辑窗口的问题；</p>
+<p>3.修改删除正在编辑的文件的提示；</p>
+</blockquote>
 <h2>0.9.8</h2>
 <p>修复：</p>
 <blockquote>

web/src/pages/Doc/zh/constructor/index.md

@@ -25,7 +25,7 @@ const mindMap = new MindMap({
 | 字段名称                         | 类型    | 默认值           | 描述                                                         |
 | -------------------------------- | ------- | ---------------- | ------------------------------------------------------------ |
 | el                               | Element |                  | 容器元素，必传，必须为DOM元素                                      |
-| data                             | Object  | {}               | 思维导图数据，可参考下方【数据结构】介绍 |
+| data                             | Object 、 null  |   | 思维导图数据，可参考下方【数据结构】介绍。v0.9.9+支持传空对象或者null，画布会显示空白 |
 | layout                           | String  | logicalStructure | 布局类型，可选列表：logicalStructure（逻辑结构图）、mindMap（思维导图）、catalogOrganization（目录组织图）、organizationStructure（组织结构图）、timeline（v0.5.4+，时间轴）、timeline2（v0.5.4+，上下交替型时间轴）、fishbone（v0.5.4+，鱼骨图） |
 | fishboneDeg（v0.5.4+）                      | Number |  45          |  设置鱼骨结构图的斜线角度               |
 | theme                            | String  | default          | 主题，可选列表：default（默认）、classic（脑图经典）、minions（小黄人）、pinkGrape（粉红葡萄）、mint（薄荷）、gold（金色vip）、vitalityOrange（活力橙）、greenLeaf（绿叶）、dark2（暗色2）、skyGreen（天清绿）、classic2（脑图经典2）、classic3（脑图经典3）、classic4（脑图经典4，v0.2.0+）、classicGreen（经典绿）、classicBlue（经典蓝）、blueSky（天空蓝）、brainImpairedPink（脑残粉）、dark（暗色）、earthYellow（泥土黄）、freshGreen（清新绿）、freshRed（清新红）、romanticPurple（浪漫紫）、simpleBlack（v0.5.4+简约黑）、courseGreen（v0.5.4+课程绿）、coffee（v0.5.4+咖啡）、redSpirit（v0.5.4+红色精神）、blackHumour（v0.5.4+黑色幽默）、lateNightOffice（v0.5.4+深夜办公室）、blackGold（v0.5.4+黑金）、avocado（v.5.10-fix.2+牛油果）、autumn（v.5.10-fix.2+秋天）、orangeJuice（v.5.10-fix.2+橙汁） |
@@ -113,6 +113,11 @@ const mindMap = new MindMap({
 | isOnlySearchCurrentRenderNodes（v0.9.8+）     | Boolean | false  | 是否仅搜索当前渲染的节点，被收起的节点不会被搜索到 |
 | onlyOneEnableActiveNodeOnCooperate（v0.9.8+）     | Boolean | false  | 协同编辑时，同一个节点不能同时被多人选中 |
 | beforeCooperateUpdate（v0.9.8+）     | Function、null | null  | 协同编辑时，节点操作即将更新到其他客户端前的生命周期函数。函数接收一个对象作为参数：{ type: 【createOrUpdate（创建节点或更新节点）、delete（删除节点）】, list: 【数组类型，1.当type=createOrUpdate时，代表被创建或被更新的节点数据，即将同步到其他客户端，所以你可以修改该数据；2.当type=delete时，代表被删除的节点数据】 } |
+| beforeShortcutRun（v0.9.9+）     | Function、null | null  | 快捷键操作即将执行前的生命周期函数，返回true可以阻止操作执行。函数接收两个参数：key（快捷键）、activeNodeList（当前激活的节点列表） |
+| rainbowLinesConfig（v0.9.9+）     | Object | { open: false, colorsList: [] }  | 彩虹线条配置，需要先注册RainbowLines插件。对象类型，结构：{ open: false【是否开启彩虹线条】, colorsList: []【自定义彩虹线条的颜色列表，如果不设置，会使用默认颜色列表】 } |
+| addContentToHeader（v0.9.9+）     | Function、null | null  | 导出png、svg、pdf时在头部添加自定义内容。可传递一个函数，这个函数可以返回null代表不添加内容，也可以返回一个对象，详细介绍请参考下方【导出时如何添加自定义内容】 |
+| addContentToFooter（v0.9.9+）     | Function、null | null  | 基本释义同addContentToHeader，在尾部添加自定义内容 |
+
 
 ### 数据结构
 
@@ -136,6 +141,8 @@ const mindMap = new MindMap({
     hyperlink: '', // 超链接地址
     hyperlinkTitle: '', // 超链接的标题
     note: '', // 备注的内容
+    attachmentUrl: '',// v0.9.10+，附件url
+    attachmentName: '',// v0.9.10+，附件名称
     tag: [], // 标签列表
     generalization: {// 节点的概要，如果没有概要generalization设为null即可
       text: ''// 概要的文本
@@ -174,6 +181,41 @@ const mindMap = new MindMap({
 | type        | String |                                           | 图标分组的值 |
 | list        | Array  |                                           | 分组下的图标列表，数组的每一项为一个对象，`{ name: '', icon: '' }`，`name`代表图标的名称，`icon`代表图标，可以是`svg`图标，比如`<svg ...><path></path></svg>`，也可以是图片`url`，或者是`base64`图标，比如`data:image/png;base64,...` |
 
+### 导出时如何添加自定义内容
+
+`addContentToHeader`和`addContentToFooter`两个实例化选项可以用于在导出`png`、`svg`、`pdf`时在头部和尾部添加自定义的内容，默认为`null`，代表不配置，可以传递一个函数，函数可以返回`null`，代表不添加内容，如果要添加内容那么需要返回如下的结构：
+
+```
+{
+  el,// 要追加的自定义DOM节点，样式可内联
+  cssText,// 可选，如果样式不想内联，可以传递该值，一个css字符串
+  height: 50// 返回的DOM节点的高度，必须传递
+}
+```
+
+一个简单的示例：
+
+```js
+new MindMap({
+  addContentToFooter: () => {
+    const el = document.createElement('div')
+    el.className = 'footer'
+    el.innerHTML = '来自：simple-mind-map'
+    const cssText = `
+      .footer {
+        width: 100%;
+        height: 30px;
+      }
+    `
+    return {
+      el,
+      cssText,
+      height: 30
+    }
+  }
+})
+```
+
 ## 静态方法
 
 ### defineTheme(name, config)
@@ -313,6 +355,12 @@ mindMap.setTheme('主题名称')
 
 ## 实例方法
 
+### updateData(data)
+
+> v0.9.9+
+
+更新画布数据，如果新的数据是在当前画布节点数据基础上增删改查后形成的，那么可以使用该方法来更新画布数据。性能会更好，不会重新创建所有节点，而是会尽可能的复用。
+
 ### clearDraw()
 
 > v0.8.0+
@@ -325,7 +373,7 @@ mindMap.setTheme('主题名称')
 
 销毁思维导图。会移除注册的插件、移除监听的事件、删除画布的所有节点。
 
-### getSvgData({ paddingX = 0, paddingY = 0, ignoreWatermark = false })
+### getSvgData({ paddingX = 0, paddingY = 0, ignoreWatermark = false, addContentToHeader, addContentToFooter })
 
 > v0.3.0+
 
@@ -335,6 +383,10 @@ mindMap.setTheme('主题名称')
 
 `ignoreWatermark`：v0.8.0+，不要绘制水印，如果不需要绘制水印的场景可以传`true`，因为绘制水印非常慢
 
+`addContentToHeader`：v0.9.9+，Function，可以返回要追加到头部的自定义内容，详细介绍见【实例化选项】中的该配置
+
+`addContentToFooter`：v0.9.9+，Function，可以返回要追加到尾部的自定义内容，详细介绍见【实例化选项】中的该配置
+
 获取`svg`数据，返回一个对象，详细结构如下：
 
 ```js
@@ -402,7 +454,8 @@ mindMap.setTheme('主题名称')
 | expand_btn_click                 | 节点展开或收缩事件                         | this（节点实例）                                             |
 | before_show_text_edit            | 节点文本编辑框即将打开事件                 |                                                              |
 | hide_text_edit                   | 节点文本编辑框关闭事件                     | textEditNode（文本编辑框DOM节点）、activeNodeList（当前激活的所有节点列表） |
-| scale                            | 放大缩小事件                               | scale（缩放比例）                                            |
+| scale                            | 画布放大缩小事件                               | scale（缩放比例）                                            |
+| translate（v0.9.10+）               | 画布移动事件              | x（水平位移）、y（垂直位移）                     |
 | node_img_dblclick（v0.2.15+）    | 节点内图片的双击事件                       | this（节点实例）、e（事件对象）                              |
 | node_img_mouseenter（v0.6.5+）    |  节点内图片的鼠标移入事件                      | this（节点实例）、imgNode（图片节点）、e（事件对象）                              |
 | node_img_mouseleave（v0.6.5+）    |  节点内图片的鼠标移出事件                      | this（节点实例）、imgNode（图片节点）、e（事件对象）                              |
@@ -415,7 +468,9 @@ mindMap.setTheme('主题名称')
 | associative_line_click（v0.4.5+）    |  点击某条关联线时触发  |  path（连接线节点）、clickPath（不可见的点击线节点）、node（起始节点）、toNode（目标节点）           |
 | svg_mouseenter（v0.5.1+）    | 鼠标移入svg画布时触发   | e（事件对象）  |
 | svg_mouseleave（v0.5.1+）    | 鼠标移出svg画布时触发   | e（事件对象）  |
-| node_icon_click（v0.6.10+）    | 点击节点内的图标时触发   | this（节点实例）、item（点击的图标名称）、e（事件对象）  |
+| node_icon_click（v0.6.10+）    | 点击节点内的图标时触发   | this（节点实例）、item（点击的图标名称）、e（事件对象）、node(图标节点，v0.9.9+)  |
+| node_icon_mouseenter（v0.9.9+）    |  鼠标移入节点内的图标时触发  | this（节点实例）、item（点击的图标名称）、e（事件对象）、node(图标节点)  |
+| node_icon_mouseleave（v0.9.9+）    |  鼠标移出节点内的图标时触发  | this（节点实例）、item（点击的图标名称）、e（事件对象）、node(图标节点)  |
 | view_theme_change（v0.6.12+）    | 调用了setTheme方法设置主题后触发   | theme（设置的新主题名称）  |
 | set_data（v0.7.3+）    | 调用了setData方法动态设置思维导图数据时触发   | data（新的思维导图数据）  |
 | resize（v0.8.0+）    |  容器尺寸改变后触发，实际上是当思维导图实例的`resize`方法被调用后触发  |   |
@@ -424,6 +479,9 @@ mindMap.setTheme('主题名称')
 | body_click    | document.body的点击事件                      | e（事件对象）      |
 | data_change_detail（v0.9.3+）    |  渲染树数据变化的明细，会返回一个数组，每一项代表一个更新点，每一项都是一个对象，存在一个`type`属性，代表明细的类型，包含`create`（创建节点）、`update`（更新节点）、`delete`（删除节点），存在一个`data`属性，代表当前更新的节点数据，如果是`update`类型，还会存在一个`oldData`属性，保存了更新前该节点的数据  | arr（明细数据）      |
 | layout_change（v0.9.4+）    | 修改结构时触发，即调用了mindMap.setLayout()方法时触发  | layout（新的结构）      |
+| node_cooperate_avatar_click（v0.9.9+）    | 协同编辑时，鼠标点击人员头像时触发  |  userInfo(人员信息)、 this(当前节点实例)、 node(头像节点)、 e(事件对象)      |
+| node_cooperate_avatar_mouseenter（v0.9.9+）    | 协同编辑时，鼠标移入人员头像时触发  |  userInfo(人员信息)、 this(当前节点实例)、 node(头像节点)、 e(事件对象)     |
+| node_cooperate_avatar_mouseleave（v0.9.9+）    | 协同编辑时，鼠标移除人员头像时触发  |  userInfo(人员信息)、 this(当前节点实例)、 node(头像节点)、 e(事件对象)      |
 
 ### emit(event, ...args)
 
@@ -521,6 +579,7 @@ mindMap.updateConfig({
 | SET_NODE_ICON                       | 设置节点图标                                                 | node（要设置的节点）、icons（数组，预定义的图片名称组成的数组，可用图标可在[icons.js](https://github.com/wanglin2/mind-map/blob/main/simple-mind-map/src/svg/icons.js)文件里的`nodeIconList`列表里获取到，图标名称为`type_name`，如`['priority_1']`） |
 | SET_NODE_HYPERLINK                  | 设置节点超链接                                               | node（要设置的节点）、link（超链接地址）、title（超链接名称，可选） |
 | SET_NODE_NOTE                       | 设置节点备注                                                 | node（要设置的节点）、note（备注文字）                       |
+| SET_NODE_ATTACHMENT（v0.9.10+）                       | 设置节点附件                                                 | node（要设置的节点）、url（附件url）、name（附件名称，可选）                       |
 | SET_NODE_TAG                        | 设置节点标签                                                 | node（要设置的节点）、tag（字符串数组，内置颜色信息可在[constant.js](https://github.com/wanglin2/mind-map/blob/main/simple-mind-map/src/constants/constant.js)里获取到） |
 | INSERT_AFTER（v0.1.5+）             | 将节点移动到另一个节点的后面    | node（要移动的节点，（v0.7.2+支持传递节点数组实现同时移动多个节点））、 exist（目标节点）                     |
 | INSERT_BEFORE（v0.1.5+）            | 将节点移动到另一个节点的前面，（v0.7.2+支持传递节点数组实现同时移动多个节点）   | node（要移动的节点）、 exist（目标节点）                     |
@@ -544,7 +603,7 @@ mindMap.updateConfig({
 
 动态设置思维导图数据，纯节点数据
 
-`data`：思维导图结构数据
+`data`：思维导图结构数据。v0.9.9+支持传空对象或者null，画布会显示空白。
 
 ### setFullData(*data*)
 

web/src/pages/Doc/zh/constructor/index.vue

@@ -35,9 +35,9 @@
 </tr>
 <tr>
 <td>data</td>
-<td>Object</td>
-<td>{}</td>
-<td>思维导图数据，可参考下方【数据结构】介绍</td>
+<td>Object 、 null</td>
+<td></td>
+<td>思维导图数据，可参考下方【数据结构】介绍。v0.9.9+支持传空对象或者null，画布会显示空白</td>
 </tr>
 <tr>
 <td>layout</td>
@@ -561,6 +561,30 @@
 <td>null</td>
 <td>协同编辑时，节点操作即将更新到其他客户端前的生命周期函数。函数接收一个对象作为参数：{ type: 【createOrUpdate（创建节点或更新节点）、delete（删除节点）】, list: 【数组类型，1.当type=createOrUpdate时，代表被创建或被更新的节点数据，即将同步到其他客户端，所以你可以修改该数据；2.当type=delete时，代表被删除的节点数据】 }</td>
 </tr>
+<tr>
+<td>beforeShortcutRun（v0.9.9+）</td>
+<td>Function、null</td>
+<td>null</td>
+<td>快捷键操作即将执行前的生命周期函数，返回true可以阻止操作执行。函数接收两个参数：key（快捷键）、activeNodeList（当前激活的节点列表）</td>
+</tr>
+<tr>
+<td>rainbowLinesConfig（v0.9.9+）</td>
+<td>Object</td>
+<td>{ open: false, colorsList: [] }</td>
+<td>彩虹线条配置，需要先注册RainbowLines插件。对象类型，结构：{ open: false【是否开启彩虹线条】, colorsList: []【自定义彩虹线条的颜色列表，如果不设置，会使用默认颜色列表】 }</td>
+</tr>
+<tr>
+<td>addContentToHeader（v0.9.9+）</td>
+<td>Function、null</td>
+<td>null</td>
+<td>导出png、svg、pdf时在头部添加自定义内容。可传递一个函数，这个函数可以返回null代表不添加内容，也可以返回一个对象，详细介绍请参考下方【导出时如何添加自定义内容】</td>
+</tr>
+<tr>
+<td>addContentToFooter（v0.9.9+）</td>
+<td>Function、null</td>
+<td>null</td>
+<td>基本释义同addContentToHeader，在尾部添加自定义内容</td>
+</tr>
 </tbody>
 </table>
 <h3>数据结构</h3>
@@ -582,6 +606,8 @@
     <span class="hljs-attr">hyperlink</span>: <span class="hljs-string">&#x27;&#x27;</span>, <span class="hljs-comment">// 超链接地址</span>
     <span class="hljs-attr">hyperlinkTitle</span>: <span class="hljs-string">&#x27;&#x27;</span>, <span class="hljs-comment">// 超链接的标题</span>
     <span class="hljs-attr">note</span>: <span class="hljs-string">&#x27;&#x27;</span>, <span class="hljs-comment">// 备注的内容</span>
+    <span class="hljs-attr">attachmentUrl</span>: <span class="hljs-string">&#x27;&#x27;</span>,<span class="hljs-comment">// v0.9.10+，附件url</span>
+    <span class="hljs-attr">attachmentName</span>: <span class="hljs-string">&#x27;&#x27;</span>,<span class="hljs-comment">// v0.9.10+，附件名称</span>
     <span class="hljs-attr">tag</span>: [], <span class="hljs-comment">// 标签列表</span>
     <span class="hljs-attr">generalization</span>: {<span class="hljs-comment">// 节点的概要，如果没有概要generalization设为null即可</span>
       <span class="hljs-attr">text</span>: <span class="hljs-string">&#x27;&#x27;</span><span class="hljs-comment">// 概要的文本</span>
@@ -679,6 +705,34 @@
 </tr>
 </tbody>
 </table>
+<h3>导出时如何添加自定义内容</h3>
+<p><code>addContentToHeader</code>和<code>addContentToFooter</code>两个实例化选项可以用于在导出<code>png</code>、<code>svg</code>、<code>pdf</code>时在头部和尾部添加自定义的内容，默认为<code>null</code>，代表不配置，可以传递一个函数，函数可以返回<code>null</code>，代表不添加内容，如果要添加内容那么需要返回如下的结构：</p>
+<pre class="hljs"><code>{
+  el,// 要追加的自定义DOM节点，样式可内联
+  cssText,// 可选，如果样式不想内联，可以传递该值，一个css字符串
+  height: 50// 返回的DOM节点的高度，必须传递
+}
+</code></pre>
+<p>一个简单的示例：</p>
+<pre class="hljs"><code><span class="hljs-keyword">new</span> MindMap({
+  <span class="hljs-attr">addContentToFooter</span>: <span class="hljs-function">() =&gt;</span> {
+    <span class="hljs-keyword">const</span> el = <span class="hljs-built_in">document</span>.createElement(<span class="hljs-string">&#x27;div&#x27;</span>)
+    el.className = <span class="hljs-string">&#x27;footer&#x27;</span>
+    el.innerHTML = <span class="hljs-string">&#x27;来自：simple-mind-map&#x27;</span>
+    <span class="hljs-keyword">const</span> cssText = <span class="hljs-string">`
+      .footer {
+        width: 100%;
+        height: 30px;
+      }
+    `</span>
+    <span class="hljs-keyword">return</span> {
+      el,
+      cssText,
+      <span class="hljs-attr">height</span>: <span class="hljs-number">30</span>
+    }
+  }
+})
+</code></pre>
 <h2>静态方法</h2>
 <h3>defineTheme(name, config)</h3>
 <blockquote>
@@ -775,6 +829,11 @@ mindMap.setTheme(<span class="hljs-string">&#x27;主题名称&#x27;</span>)
 <h3>themeConfig</h3>
 <p>当前主题配置。</p>
 <h2>实例方法</h2>
+<h3>updateData(data)</h3>
+<blockquote>
+<p>v0.9.9+</p>
+</blockquote>
+<p>更新画布数据，如果新的数据是在当前画布节点数据基础上增删改查后形成的，那么可以使用该方法来更新画布数据。性能会更好，不会重新创建所有节点，而是会尽可能的复用。</p>
 <h3>clearDraw()</h3>
 <blockquote>
 <p>v0.8.0+</p>
@@ -785,13 +844,15 @@ mindMap.setTheme(<span class="hljs-string">&#x27;主题名称&#x27;</span>)
 <p>v0.6.0+</p>
 </blockquote>
 <p>销毁思维导图。会移除注册的插件、移除监听的事件、删除画布的所有节点。</p>
-<h3>getSvgData({ paddingX = 0, paddingY = 0, ignoreWatermark = false })</h3>
+<h3>getSvgData({ paddingX = 0, paddingY = 0, ignoreWatermark = false, addContentToHeader, addContentToFooter })</h3>
 <blockquote>
 <p>v0.3.0+</p>
 </blockquote>
 <p><code>paddingX</code>：水平内边距</p>
 <p><code>paddingY</code>：垂直内边距</p>
 <p><code>ignoreWatermark</code>：v0.8.0+，不要绘制水印，如果不需要绘制水印的场景可以传<code>true</code>，因为绘制水印非常慢</p>
+<p><code>addContentToHeader</code>：v0.9.9+，Function，可以返回要追加到头部的自定义内容，详细介绍见【实例化选项】中的该配置</p>
+<p><code>addContentToFooter</code>：v0.9.9+，Function，可以返回要追加到尾部的自定义内容，详细介绍见【实例化选项】中的该配置</p>
 <p>获取<code>svg</code>数据，返回一个对象，详细结构如下：</p>
 <pre class="hljs"><code>{
   svg, <span class="hljs-comment">// Element，思维导图图形的整体svg元素，包括：svg（画布容器）、g（实际的思维导图组）</span>
@@ -949,10 +1010,15 @@ mindMap.setTheme(<span class="hljs-string">&#x27;主题名称&#x27;</span>)
 </tr>
 <tr>
 <td>scale</td>
-<td>放大缩小事件</td>
+<td>画布放大缩小事件</td>
 <td>scale（缩放比例）</td>
 </tr>
 <tr>
+<td>translate（v0.9.10+）</td>
+<td>画布移动事件</td>
+<td>x（水平位移）、y（垂直位移）</td>
+</tr>
+<tr>
 <td>node_img_dblclick（v0.2.15+）</td>
 <td>节点内图片的双击事件</td>
 <td>this（节点实例）、e（事件对象）</td>
@@ -1015,7 +1081,17 @@ mindMap.setTheme(<span class="hljs-string">&#x27;主题名称&#x27;</span>)
 <tr>
 <td>node_icon_click（v0.6.10+）</td>
 <td>点击节点内的图标时触发</td>
-<td>this（节点实例）、item（点击的图标名称）、e（事件对象）</td>
+<td>this（节点实例）、item（点击的图标名称）、e（事件对象）、node(图标节点，v0.9.9+)</td>
+</tr>
+<tr>
+<td>node_icon_mouseenter（v0.9.9+）</td>
+<td>鼠标移入节点内的图标时触发</td>
+<td>this（节点实例）、item（点击的图标名称）、e（事件对象）、node(图标节点)</td>
+</tr>
+<tr>
+<td>node_icon_mouseleave（v0.9.9+）</td>
+<td>鼠标移出节点内的图标时触发</td>
+<td>this（节点实例）、item（点击的图标名称）、e（事件对象）、node(图标节点)</td>
 </tr>
 <tr>
 <td>view_theme_change（v0.6.12+）</td>
@@ -1057,6 +1133,21 @@ mindMap.setTheme(<span class="hljs-string">&#x27;主题名称&#x27;</span>)
 <td>修改结构时触发，即调用了mindMap.setLayout()方法时触发</td>
 <td>layout（新的结构）</td>
 </tr>
+<tr>
+<td>node_cooperate_avatar_click（v0.9.9+）</td>
+<td>协同编辑时，鼠标点击人员头像时触发</td>
+<td>userInfo(人员信息)、 this(当前节点实例)、 node(头像节点)、 e(事件对象)</td>
+</tr>
+<tr>
+<td>node_cooperate_avatar_mouseenter（v0.9.9+）</td>
+<td>协同编辑时，鼠标移入人员头像时触发</td>
+<td>userInfo(人员信息)、 this(当前节点实例)、 node(头像节点)、 e(事件对象)</td>
+</tr>
+<tr>
+<td>node_cooperate_avatar_mouseleave（v0.9.9+）</td>
+<td>协同编辑时，鼠标移除人员头像时触发</td>
+<td>userInfo(人员信息)、 this(当前节点实例)、 node(头像节点)、 e(事件对象)</td>
+</tr>
 </tbody>
 </table>
 <h3>emit(event, ...args)</h3>
@@ -1235,6 +1326,11 @@ mindMap.setTheme(<span class="hljs-string">&#x27;主题名称&#x27;</span>)
 <td>node（要设置的节点）、note（备注文字）</td>
 </tr>
 <tr>
+<td>SET_NODE_ATTACHMENT（v0.9.10+）</td>
+<td>设置节点附件</td>
+<td>node（要设置的节点）、url（附件url）、name（附件名称，可选）</td>
+</tr>
+<tr>
 <td>SET_NODE_TAG</td>
 <td>设置节点标签</td>
 <td>node（要设置的节点）、tag（字符串数组，内置颜色信息可在<a href="https://github.com/wanglin2/mind-map/blob/main/simple-mind-map/src/constants/constant.js">constant.js</a>里获取到）</td>
@@ -1328,7 +1424,7 @@ mindMap.setTheme(<span class="hljs-string">&#x27;主题名称&#x27;</span>)
 </table>
 <h3>setData(data)</h3>
 <p>动态设置思维导图数据，纯节点数据</p>
-<p><code>data</code>：思维导图结构数据</p>
+<p><code>data</code>：思维导图结构数据。v0.9.9+支持传空对象或者null，画布会显示空白。</p>
 <h3>setFullData(<em>data</em>)</h3>
 <blockquote>
 <p>v0.2.7+</p>

web/src/pages/Doc/zh/course1/index.md

@@ -25,33 +25,38 @@
 
 ```js
 {
-    data: {
-        // 节点文本
-        text: '根节点',
-        // 图片
-        image: 'xxx.jpg',
-        imageTitle: '图片名称',
-        imageSize: {
-            width: 1152,
-            height: 1152
-        },
-        // 图标
-        icon: ['priority_1'],
-        // 标签
-        tag: ['标签1', '标签2'],
-        // 链接
-        hyperlink: 'http://lxqnsys.com/',
-        hyperlinkTitle: '理想青年实验室',
-        // 备注内容
-        note: '理想青年实验室\n一个有意思的角落',
-        // 概要
-        generalization: {
-            text: '概要的内容'
-        },
-        // 节点是否展开
-        expand: true,
+  data: {
+    text: '', // 节点的文本，可以是富文本，也就是html格式的，此时richText要设为true
+    richText: false, // 节点的文本是否是富文本模式
+    expand: true, // 节点是否展开
+    uid: '',// 节点唯一的id，可不传，内部会生成
+    icon: [], // 图标，格式可参考教程里的【插入和扩展节点图标】章节
+    image: '', // 图片的url
+    imageTitle: '', // 图片的标题，可为空
+    imageSize: { // 图片的尺寸
+      width: 100, // 图片的宽度，必传
+      height: 100, // 图片的高度，必传
+      custom: false // 如果设为true，图片的显示大小不受主题控制，以imageSize.width和imageSize.height为准
     },
-    children: []// 子节点
+    hyperlink: '', // 超链接地址
+    hyperlinkTitle: '', // 超链接的标题
+    note: '', // 备注的内容
+    attachmentUrl: '',// v0.9.10+，附件url
+    attachmentName: '',// v0.9.10+，附件名称
+    tag: [], // 标签列表
+    generalization: {// 节点的概要，如果没有概要generalization设为null即可
+      text: ''// 概要的文本
+    },
+    associativeLineTargets: [''],// 如果存在关联线，那么为目标节点的uid列表
+    associativeLineText: '',// 关联线文本
+    // ...其他样式字段，可以参考主题
+  },
+  children [// 子节点，结构和根节点一致
+    {
+      data: {},
+      children: []
+    }
+  ]
 }
 ```
 

web/src/pages/Doc/zh/course1/index.vue

@@ -17,33 +17,38 @@
 <p>这是为了避免节点内的文字因为默认样式而出现偏移。</p>
 <p>一个节点的基本数据结构如下所示：</p>
 <pre class="hljs"><code>{
-    <span class="hljs-attr">data</span>: {
-        <span class="hljs-comment">// 节点文本</span>
-        <span class="hljs-attr">text</span>: <span class="hljs-string">&#x27;根节点&#x27;</span>,
-        <span class="hljs-comment">// 图片</span>
-        <span class="hljs-attr">image</span>: <span class="hljs-string">&#x27;xxx.jpg&#x27;</span>,
-        <span class="hljs-attr">imageTitle</span>: <span class="hljs-string">&#x27;图片名称&#x27;</span>,
-        <span class="hljs-attr">imageSize</span>: {
-            <span class="hljs-attr">width</span>: <span class="hljs-number">1152</span>,
-            <span class="hljs-attr">height</span>: <span class="hljs-number">1152</span>
-        },
-        <span class="hljs-comment">// 图标</span>
-        <span class="hljs-attr">icon</span>: [<span class="hljs-string">&#x27;priority_1&#x27;</span>],
-        <span class="hljs-comment">// 标签</span>
-        <span class="hljs-attr">tag</span>: [<span class="hljs-string">&#x27;标签1&#x27;</span>, <span class="hljs-string">&#x27;标签2&#x27;</span>],
-        <span class="hljs-comment">// 链接</span>
-        <span class="hljs-attr">hyperlink</span>: <span class="hljs-string">&#x27;http://lxqnsys.com/&#x27;</span>,
-        <span class="hljs-attr">hyperlinkTitle</span>: <span class="hljs-string">&#x27;理想青年实验室&#x27;</span>,
-        <span class="hljs-comment">// 备注内容</span>
-        <span class="hljs-attr">note</span>: <span class="hljs-string">&#x27;理想青年实验室\n一个有意思的角落&#x27;</span>,
-        <span class="hljs-comment">// 概要</span>
-        <span class="hljs-attr">generalization</span>: {
-            <span class="hljs-attr">text</span>: <span class="hljs-string">&#x27;概要的内容&#x27;</span>
-        },
-        <span class="hljs-comment">// 节点是否展开</span>
-        <span class="hljs-attr">expand</span>: <span class="hljs-literal">true</span>,
+  <span class="hljs-attr">data</span>: {
+    <span class="hljs-attr">text</span>: <span class="hljs-string">&#x27;&#x27;</span>, <span class="hljs-comment">// 节点的文本，可以是富文本，也就是html格式的，此时richText要设为true</span>
+    <span class="hljs-attr">richText</span>: <span class="hljs-literal">false</span>, <span class="hljs-comment">// 节点的文本是否是富文本模式</span>
+    <span class="hljs-attr">expand</span>: <span class="hljs-literal">true</span>, <span class="hljs-comment">// 节点是否展开</span>
+    <span class="hljs-attr">uid</span>: <span class="hljs-string">&#x27;&#x27;</span>,<span class="hljs-comment">// 节点唯一的id，可不传，内部会生成</span>
+    <span class="hljs-attr">icon</span>: [], <span class="hljs-comment">// 图标，格式可参考教程里的【插入和扩展节点图标】章节</span>
+    <span class="hljs-attr">image</span>: <span class="hljs-string">&#x27;&#x27;</span>, <span class="hljs-comment">// 图片的url</span>
+    <span class="hljs-attr">imageTitle</span>: <span class="hljs-string">&#x27;&#x27;</span>, <span class="hljs-comment">// 图片的标题，可为空</span>
+    <span class="hljs-attr">imageSize</span>: { <span class="hljs-comment">// 图片的尺寸</span>
+      <span class="hljs-attr">width</span>: <span class="hljs-number">100</span>, <span class="hljs-comment">// 图片的宽度，必传</span>
+      <span class="hljs-attr">height</span>: <span class="hljs-number">100</span>, <span class="hljs-comment">// 图片的高度，必传</span>
+      <span class="hljs-attr">custom</span>: <span class="hljs-literal">false</span> <span class="hljs-comment">// 如果设为true，图片的显示大小不受主题控制，以imageSize.width和imageSize.height为准</span>
     },
-    <span class="hljs-attr">children</span>: []<span class="hljs-comment">// 子节点</span>
+    <span class="hljs-attr">hyperlink</span>: <span class="hljs-string">&#x27;&#x27;</span>, <span class="hljs-comment">// 超链接地址</span>
+    <span class="hljs-attr">hyperlinkTitle</span>: <span class="hljs-string">&#x27;&#x27;</span>, <span class="hljs-comment">// 超链接的标题</span>
+    <span class="hljs-attr">note</span>: <span class="hljs-string">&#x27;&#x27;</span>, <span class="hljs-comment">// 备注的内容</span>
+    <span class="hljs-attr">attachmentUrl</span>: <span class="hljs-string">&#x27;&#x27;</span>,<span class="hljs-comment">// v0.9.10+，附件url</span>
+    <span class="hljs-attr">attachmentName</span>: <span class="hljs-string">&#x27;&#x27;</span>,<span class="hljs-comment">// v0.9.10+，附件名称</span>
+    <span class="hljs-attr">tag</span>: [], <span class="hljs-comment">// 标签列表</span>
+    <span class="hljs-attr">generalization</span>: {<span class="hljs-comment">// 节点的概要，如果没有概要generalization设为null即可</span>
+      <span class="hljs-attr">text</span>: <span class="hljs-string">&#x27;&#x27;</span><span class="hljs-comment">// 概要的文本</span>
+    },
+    <span class="hljs-attr">associativeLineTargets</span>: [<span class="hljs-string">&#x27;&#x27;</span>],<span class="hljs-comment">// 如果存在关联线，那么为目标节点的uid列表</span>
+    <span class="hljs-attr">associativeLineText</span>: <span class="hljs-string">&#x27;&#x27;</span>,<span class="hljs-comment">// 关联线文本</span>
+    <span class="hljs-comment">// ...其他样式字段，可以参考主题</span>
+  },
+  children [<span class="hljs-comment">// 子节点，结构和根节点一致</span>
+    {
+      <span class="hljs-attr">data</span>: {},
+      <span class="hljs-attr">children</span>: []
+    }
+  ]
 }
 </code></pre>
 <p><code>icon</code>可以使用内置的图标，完整图标可以在<a href="https://github.com/wanglin2/mind-map/blob/main/simple-mind-map/src/svg/icons.js">icons.js</a>文件中查看。也可以扩展图标，参考<a href="https://wanglin2.github.io/mind-map/#/doc/zh/course19/%E6%89%A9%E5%B1%95%E5%9B%BE%E6%A0%87">扩展图标</a>。</p>

web/src/pages/Doc/zh/course26/index.md

@@ -0,0 +1,255 @@
+# 如何实现AI生成节点内容
+
+目前AI能力非常流行，每个应用都给自己加上了AI的能力提高竞争力，那么在使用了`simple-mind-map`的情况下如何添加AI的能力呢，本教程会详细的教你如何实现。
+
+首先要说明的是本教程并不会真的实现一个可用的AI能力，只是在假设你要实现该功能的前提下来教你如何调用对应的API来实现你想要的效果。
+
+其次AI返回的数据结构不尽相同，你都需要自行转换成`simple-mind-map`的结构类型。
+
+## 自动生成整个思维导图
+
+### 一次生成
+
+通过AI生成整个思维导图并且一次直接生成，这个其实就是普通的回显功能，那么你可以在实例化时通过`data`传入生成的数据：
+
+```js
+const mindMap = new MindMap({
+    el,
+    data: {
+        data: {
+            text: '我是自动生成的节点'
+        },
+        children: [
+            {
+                data: {
+                    text: '子节点'
+                },
+                children: []
+            }
+        ]
+    }
+})
+```
+
+也可以在实例化之后使用`setData`方法设置：
+
+```js
+mindMap.setData({
+    data: {
+        text: '我是自动生成的节点'
+    },
+    children: [
+        {
+            data: {
+                text: '子节点'
+            },
+            children: []
+        }
+    ]
+})
+```
+
+### 依次生成节点
+
+如果你想像ChatGPT一样依次生成节点，那么推荐使用`updateData`方法增量更新节点数据，而不是手动获取到之前插入的节点实例，再调用命令来插入下级节点，这样会复杂很多，当然，如果你能轻松的知道当前创建到哪里了，并且下一个节点在哪个节点下创建，可以忽略。
+
+> updateData方法是v0.9.9+的方法，之前的版本可以使用下面的方法：
+
+```js
+const updateData = (data) => {
+    mindMap.renderer.setData(data)
+    mindMap.render()
+    mindMap.command.addHistory()
+}
+```
+
+增量更新的前提是之前生成的节点都存在`uid`，并且不会变化，这样调用`updateData`方法渲染时会根据`uid`来复用之前的节点，只创建新的节点，达到依次生成的目的。
+
+比如第一次返回的数据：
+
+```js
+const data = {
+    data: {
+        text: '根节点',
+        uid: '1'
+    },
+    children: []
+}
+
+mindMap.setData(data)
+```
+
+第二次返回的数据：
+
+```js
+const data = {
+    data: {
+        text: '根节点',
+        uid: '1'
+    },
+    children: [
+        {
+            data: {
+                text: '二级节点',
+                uid: '2'
+            },
+            children: []
+        }
+    ]
+}
+
+mindMap.updateData(data)
+```
+
+以此类推，这样虽然是整个数据更新，但是因为复用的原因画布呈现的是依次生成新节点的效果。
+
+当生成的节点多了会有个问题，就是新生成的节点在画布外看不见了，所以我们要将新生成的节点移动到画布中心，首先可以监听`data_change_detail`事件来获取到详细的更新数据，找出其中新创建的节点数据，然后使用`findNodeByUid`方法找出对应的节点实例，最后调用`moveNodeToCenter`方法将该节点移动到画布中心即可。
+
+```js
+mindMap.on('data_change_detail', (list) => {
+    // 找出新创建节点中的最后一个
+    const lastCreate = list.filter((item) => {
+        return item.action === 'create'
+    })[0]
+    if (lastCreate) {
+        const uid = lastCreate.data.data.uid
+        const node = mindMap.renderer.findNodeByUid(uid)
+        if (node) {
+            mindMap.renderer.moveNodeToCenter(node)
+        }
+    }
+})
+```
+
+当节点数据多了，可能`data_change_detail`事件触发时节点树还没渲染完毕，导致获取不到节点，解决这个问题可以通过监听`node_tree_render_end`事件：
+
+```js
+let waitUid = ''
+mindMap.on('data_change_detail', (list) => {
+    // ...
+    if (lastCreate) {
+        // ...
+        if (node) {
+            mindMap.renderer.moveNodeToCenter(node)
+        } else {
+            waitUid = uid
+        }
+    }
+})
+
+mindMap.on('node_tree_render_end', () =>{
+    if (waitUid) {
+        waitUid = ''
+        const node = mindMap.renderer.findNodeByUid(waitUid)
+        if (node) {
+            mindMap.renderer.moveNodeToCenter(node)
+        }
+    }
+})
+```
+
+当在`data_change_detail`事件中没有获取到节点实例就将该`uid`保存起来，然后在`node_tree_render_end`事件里判断是否有保存的`uid`，是的话就获取该节点实例并移动到画布中心。
+
+最后，当自动生成节点中最好禁止用户操作，否则可能会产生异常。
+
+### 完整示例
+
+<iframe style="width: 100%; height: 455px; border: none;" src="https://wanglin2.github.io/playground/#eNrtV19rHDcQ/ypiS9m95rx3bvN0vTOJnUILdVtC+uQNZr2ru1OqlZZdrc+HOQih0DT0IYUWSkto+9QSWvKSByct+TT2XT5GR7uS9t/ZxNBAoTHYXmlmfvObGWkkHVvX49g9zLA1sIZpkJBYoBSLLN7yGIlingh0jBI87iLOdnnGBA67KJ36lPLZTTxGCzROeIRsQLCNxS5h4a4fFyLPSmGa4o0IZjciP/YsjyHkMYoFknNSc4RYRqnHPBZwlgpwFuCdBPsCX6cUpE4HjbbQsTRUJi6wvOEL38knEQrhe1BoyB+Bj8QA2cv73y5/ePLyq8dnD35ffffz8v7D1Y9fvnxwb3XvGdCViotu8T+YEhommA3QnsYwYC30ioezPx/W8KqYDdzberaUX87Fu5fxUXzk40XHYzAuk4u355+y8xJcKEk6HxP4GOmEGGotpjrZvzxTqahwy0gIok3DvOTdZq1lr9FTqV7L9JrkG2enz79ZPf+t7a/0Wa1LvTLra2Oqo+rzv4q8ovMvEnnvTQkujrxu2nB2Docqj5Ovz+VRcrla49Lmc341ahWpVOW/vWTkv/xbnmVwLuEjaJf9sokmGav3VoTIGDmF5tbINFmXYjYR0w6ctCJLoFHnHHKIIEsAQivu5abKfQk1GoHbTpmJ5hkJIHAEFDJJdeYT8TkJAdg2SdA2nDm2dLcfTH02wfshFj6hdhc5FAhUQylJUj8VxWkCkFLNHRMqcOI4ROCoaYNUmEgKXT8QhEOaIAQ7yDGqp1xnr18pgIy49FUJuKQCtZUcjJIrYyn+gKitz3goSevooeYhTnACAbDwE5BtzyFRDpiaBGoi0rJBocyiwYn4IZY4t/gOhttTUpjVVh7CNMVNoLJEDdqVXWI+5QHfrqL0tC8SjPcLNvvwV9ZR1qPiTcaivDXCWbdMLps5jfzasndBOpqZ7fWMhyyGJYFbm6NFoL2DPFFXclrzAY8in4WuH4Yfwl7gyVzrKIYAeotEmGfCqfUGyIzczleu6CH0D2PaRZv9fj8f5TBKlt/rzN28ile5W+OZvpPr6zKmAxTyIIsgre4Eiw8olp/b849Cx1aWO5zB1mc4sTuqOTYarmfJCc9q9GDPkj1YTsNVP7/s1xusZ+n2KnWalz/CiLjJuZBl/4ynRHYH0LIpHgtYvXaQLwT7dq6+6LwPKYA0DHvF4wWeLTCAvhJTqC+MEBqG5BAF0BHSkWep0G7giHtWLlYKJCylJnBQGfZAWlXUSIJzeuBLFR3X8CATAlrZtYCS4AtQqb1iQPH05O7yj1+Ld8jy+6enJ4+Xdx+t/np69uTvs59eDHuF/UV4jYu7xHzx6NUxy2D017BXyRUMUzGnRdquqcecZ7m94gWnlpCL08gN0tSzIPfyIYeQW0mrXgszEorpQC7at3M9hGJTzQSDR3KIc0G+muXvW830a6jS0D9IOc1EYSjPsjGc9X01EjwuB233U0wmU1C/2u/HR9rzer/vaM+Rn0wI+NWoMexpwiZ6wlB31Wp4RcabmoEibcYACCs5r4HVtYoKyDezeyflDJ7oObynBFABs/M8C17gxZZze/DpQnsQ0GNksTYOEj5LoZndAQu1y9a8ygvbdqmlleK2sBb/AOBR7ZA=" />
+
+## 在某个节点下自动生成新节点
+
+在某个节点下自动生成新节点，如果也要依次生成，那么可以使用前面的增量更新数据的方式。如果一次生成，那么可以简单的调用插入新节点的命令即可。
+
+### 一次生成下级节点
+
+```js
+// 插入一个子节点
+mindMap.execCommand('INSERT_CHILD_NODE', 
+    false,
+    node,
+    {
+        data: {
+            text: '三级节点'
+        },
+        children: []
+    },
+    [
+        {
+            data: {
+                text: '三级节点的子节点'
+            },
+            children: []
+        }
+    ]
+)
+
+// 插入多个子节点
+mindMap.execCommand('INSERT_MULTI_CHILD_NODE', node, [
+    {
+        data: {
+            text: '三级节点'
+        },
+        children: []
+    },
+    {
+        data: {
+            text: '三级节点'
+        },
+        children: []
+    }
+])
+```
+
+### 一次生成兄弟节点
+
+```js
+// 插入一个兄弟节点
+mindMap.execCommand('INSERT_NODE', 
+    false,
+    node,
+    {
+        data: {
+            text: '二级节点'
+        },
+        children: []
+    },
+    [
+        {
+            data: {
+                text: '二级节点的子节点'
+            },
+            children: []
+        }
+    ]
+)
+
+// 插入多个兄弟节点
+mindMap.execCommand('INSERT_MULTI_NODE', node, [
+    {
+        data: {
+            text: '二级节点'
+        },
+        children: []
+    },
+    {
+        data: {
+            text: '二级节点'
+        },
+        children: []
+    }
+])
+```
+
+这样新创建的节点默认会被激活但不进入编辑，如果你连激活都不想要的话，那么可以通过将实例化选项`createNewNodeBehavior`设置为`notActive`。
+
+当自动生成结束后你又想恢复创建新节点时自动进入编辑状态，那么可以通过`updateConfig`方法修改`createNewNodeBehavior`：
+
+```js
+mindMap.updateConfig({
+    createNewNodeBehavior: 'default'
+})
+```
+
+### 完整示例
+
+<iframe style="width: 100%; height: 455px; border: none;" src="https://wanglin2.github.io/playground/#eNrtV19rG0cQ/yrLliK5yCcl9EmVQ2LZUEPkFDd5yppwvhtJm97tHnd7lo0RlJDSNu1DoH0KFLdQaAntu/Pn40hWPkZmb3dPfw35Q/ySHBzszs78Zm5+M7t7J/RGkniHOdAmbWVByhNFMlB5co0JHicyVeSEpNCtESk6MhcKwhrJ+n4UycEedMmQdFMZkwoiVEqLDhdhx0/MEqMZiiNYj1G6HvsJo0wQwkQEimiZ1twgIo8iJpgIpMgUOgugnYKv4JaAdp9HYQoCtaprZOMaOdEARlHIEFBucTzUCiGF1OuiYBfXNo/v8LB6dU1bOCU4gqAt49gXYbWys/vt9t7te+2vd25u3du9tbVdqWFsBJ+uH2VQM2Ptxg4L5+YJfeU3ZwX6UXCkmqQyOvt58vyfV48eTB48w8y41aFF0U9gv6tJ7u4bqVu9O1VaQF/p8gK3kycPx/8/XgphMYzVoRRaZogSzB9Oltnp5JHil8FP587N2zvzLBWcuFRdBisf1AcT+xclGVtgM5WqD+mHzPCn2n+X2r8EYkzpfxxFjzmaT6VLTJ6gd2hL0eW9qg0hKGjYhUGRTej7h1ymGEsIXR+5wTCGDr08vKrL2PrwgYE7tBw4RE0SyiCPQSivB2o7Aj3cPN5BZqwlhqN8LiCtrNnvXEgRo1rA6FzWGNU500JGz/98ZnLG6EymGM15qBWuONk0j4y6PGqFi5plpeNF56Pnv5aczfmfi+HqrHy+dxZiWe6eon9m7bjgak9KpRn7RmZccanroRJBV2F1VwJMMaZz36pfxLCQ6kag+KG+cyD42leG6lbd3GDw7oITBXjtQHOcEdIK+SEJIj/LNhi19G1BLBktlq0CD6erJbmo0qrj6qyiQ1JSRge+VnEf3DrIlZKCXA8iHnyHKiuvMmgwOvv+/L+/Jr+fnv/0GMejs6ejs19KPlp1g/MmuHOH8ALy+O8n74E8PXlWBjz+4eH45ek7Brwa2MT7dsC4aSDKqx+fjh/9a1AmL347/+N0wXJKohu16jM1gtNMHUemXK7bmyyjXt1cX+324EEWe0GWMYo1p2+xhHgz5eTabcBD1cf+bTQ+L/QIScpqTwE9Yu0WC0Wj6PezxbJzUFND/yCTUa6MISG6Z5qkYWdKJtPJsvs+8F4f1b9sNJIj53m13y+c59hPexz9OtTED0Muek5Qhu7ZLnjDiK+4CGzQ5RwBsYMLDmiNGgb0D4N3P5MC/08KeGYXkIFyc2MUfz/MnubVceiluNfzGDRZ6wepHGR47N5HC7utrPglMbbLVGsrG9uQDl8Db1FoOA==" />

web/src/pages/Doc/zh/course26/index.vue

@@ -0,0 +1,223 @@
+<template>
+  <div>
+    <h1>如何实现AI生成节点内容</h1>
+<p>目前AI能力非常流行，每个应用都给自己加上了AI的能力提高竞争力，那么在使用了<code>simple-mind-map</code>的情况下如何添加AI的能力呢，本教程会详细的教你如何实现。</p>
+<p>首先要说明的是本教程并不会真的实现一个可用的AI能力，只是在假设你要实现该功能的前提下来教你如何调用对应的API来实现你想要的效果。</p>
+<p>其次AI返回的数据结构不尽相同，你都需要自行转换成<code>simple-mind-map</code>的结构类型。</p>
+<h2>自动生成整个思维导图</h2>
+<h3>一次生成</h3>
+<p>通过AI生成整个思维导图并且一次直接生成，这个其实就是普通的回显功能，那么你可以在实例化时通过<code>data</code>传入生成的数据：</p>
+<pre class="hljs"><code><span class="hljs-keyword">const</span> mindMap = <span class="hljs-keyword">new</span> MindMap({
+    el,
+    <span class="hljs-attr">data</span>: {
+        <span class="hljs-attr">data</span>: {
+            <span class="hljs-attr">text</span>: <span class="hljs-string">&#x27;我是自动生成的节点&#x27;</span>
+        },
+        <span class="hljs-attr">children</span>: [
+            {
+                <span class="hljs-attr">data</span>: {
+                    <span class="hljs-attr">text</span>: <span class="hljs-string">&#x27;子节点&#x27;</span>
+                },
+                <span class="hljs-attr">children</span>: []
+            }
+        ]
+    }
+})
+</code></pre>
+<p>也可以在实例化之后使用<code>setData</code>方法设置：</p>
+<pre class="hljs"><code>mindMap.setData({
+    <span class="hljs-attr">data</span>: {
+        <span class="hljs-attr">text</span>: <span class="hljs-string">&#x27;我是自动生成的节点&#x27;</span>
+    },
+    <span class="hljs-attr">children</span>: [
+        {
+            <span class="hljs-attr">data</span>: {
+                <span class="hljs-attr">text</span>: <span class="hljs-string">&#x27;子节点&#x27;</span>
+            },
+            <span class="hljs-attr">children</span>: []
+        }
+    ]
+})
+</code></pre>
+<h3>依次生成节点</h3>
+<p>如果你想像ChatGPT一样依次生成节点，那么推荐使用<code>updateData</code>方法增量更新节点数据，而不是手动获取到之前插入的节点实例，再调用命令来插入下级节点，这样会复杂很多，当然，如果你能轻松的知道当前创建到哪里了，并且下一个节点在哪个节点下创建，可以忽略。</p>
+<blockquote>
+<p>updateData方法是v0.9.9+的方法，之前的版本可以使用下面的方法：</p>
+</blockquote>
+<pre class="hljs"><code><span class="hljs-keyword">const</span> updateData = <span class="hljs-function">(<span class="hljs-params">data</span>) =&gt;</span> {
+    mindMap.renderer.setData(data)
+    mindMap.render()
+    mindMap.command.addHistory()
+}
+</code></pre>
+<p>增量更新的前提是之前生成的节点都存在<code>uid</code>，并且不会变化，这样调用<code>updateData</code>方法渲染时会根据<code>uid</code>来复用之前的节点，只创建新的节点，达到依次生成的目的。</p>
+<p>比如第一次返回的数据：</p>
+<pre class="hljs"><code><span class="hljs-keyword">const</span> data = {
+    <span class="hljs-attr">data</span>: {
+        <span class="hljs-attr">text</span>: <span class="hljs-string">&#x27;根节点&#x27;</span>,
+        <span class="hljs-attr">uid</span>: <span class="hljs-string">&#x27;1&#x27;</span>
+    },
+    <span class="hljs-attr">children</span>: []
+}
+
+mindMap.setData(data)
+</code></pre>
+<p>第二次返回的数据：</p>
+<pre class="hljs"><code><span class="hljs-keyword">const</span> data = {
+    <span class="hljs-attr">data</span>: {
+        <span class="hljs-attr">text</span>: <span class="hljs-string">&#x27;根节点&#x27;</span>,
+        <span class="hljs-attr">uid</span>: <span class="hljs-string">&#x27;1&#x27;</span>
+    },
+    <span class="hljs-attr">children</span>: [
+        {
+            <span class="hljs-attr">data</span>: {
+                <span class="hljs-attr">text</span>: <span class="hljs-string">&#x27;二级节点&#x27;</span>,
+                <span class="hljs-attr">uid</span>: <span class="hljs-string">&#x27;2&#x27;</span>
+            },
+            <span class="hljs-attr">children</span>: []
+        }
+    ]
+}
+
+mindMap.updateData(data)
+</code></pre>
+<p>以此类推，这样虽然是整个数据更新，但是因为复用的原因画布呈现的是依次生成新节点的效果。</p>
+<p>当生成的节点多了会有个问题，就是新生成的节点在画布外看不见了，所以我们要将新生成的节点移动到画布中心，首先可以监听<code>data_change_detail</code>事件来获取到详细的更新数据，找出其中新创建的节点数据，然后使用<code>findNodeByUid</code>方法找出对应的节点实例，最后调用<code>moveNodeToCenter</code>方法将该节点移动到画布中心即可。</p>
+<pre class="hljs"><code>mindMap.on(<span class="hljs-string">&#x27;data_change_detail&#x27;</span>, <span class="hljs-function">(<span class="hljs-params">list</span>) =&gt;</span> {
+    <span class="hljs-comment">// 找出新创建节点中的最后一个</span>
+    <span class="hljs-keyword">const</span> lastCreate = list.filter(<span class="hljs-function">(<span class="hljs-params">item</span>) =&gt;</span> {
+        <span class="hljs-keyword">return</span> item.action === <span class="hljs-string">&#x27;create&#x27;</span>
+    })[<span class="hljs-number">0</span>]
+    <span class="hljs-keyword">if</span> (lastCreate) {
+        <span class="hljs-keyword">const</span> uid = lastCreate.data.data.uid
+        <span class="hljs-keyword">const</span> node = mindMap.renderer.findNodeByUid(uid)
+        <span class="hljs-keyword">if</span> (node) {
+            mindMap.renderer.moveNodeToCenter(node)
+        }
+    }
+})
+</code></pre>
+<p>当节点数据多了，可能<code>data_change_detail</code>事件触发时节点树还没渲染完毕，导致获取不到节点，解决这个问题可以通过监听<code>node_tree_render_end</code>事件：</p>
+<pre class="hljs"><code><span class="hljs-keyword">let</span> waitUid = <span class="hljs-string">&#x27;&#x27;</span>
+mindMap.on(<span class="hljs-string">&#x27;data_change_detail&#x27;</span>, <span class="hljs-function">(<span class="hljs-params">list</span>) =&gt;</span> {
+    <span class="hljs-comment">// ...</span>
+    <span class="hljs-keyword">if</span> (lastCreate) {
+        <span class="hljs-comment">// ...</span>
+        <span class="hljs-keyword">if</span> (node) {
+            mindMap.renderer.moveNodeToCenter(node)
+        } <span class="hljs-keyword">else</span> {
+            waitUid = uid
+        }
+    }
+})
+
+mindMap.on(<span class="hljs-string">&#x27;node_tree_render_end&#x27;</span>, <span class="hljs-function">() =&gt;</span>{
+    <span class="hljs-keyword">if</span> (waitUid) {
+        waitUid = <span class="hljs-string">&#x27;&#x27;</span>
+        <span class="hljs-keyword">const</span> node = mindMap.renderer.findNodeByUid(waitUid)
+        <span class="hljs-keyword">if</span> (node) {
+            mindMap.renderer.moveNodeToCenter(node)
+        }
+    }
+})
+</code></pre>
+<p>当在<code>data_change_detail</code>事件中没有获取到节点实例就将该<code>uid</code>保存起来，然后在<code>node_tree_render_end</code>事件里判断是否有保存的<code>uid</code>，是的话就获取该节点实例并移动到画布中心。</p>
+<p>最后，当自动生成节点中最好禁止用户操作，否则可能会产生异常。</p>
+<h3>完整示例</h3>
+<iframe style="width: 100%; height: 455px; border: none;" src="https://wanglin2.github.io/playground/#eNrtV19rHDcQ/ypiS9m95rx3bvN0vTOJnUILdVtC+uQNZr2ru1OqlZZdrc+HOQih0DT0IYUWSkto+9QSWvKSByct+TT2XT5GR7uS9t/ZxNBAoTHYXmlmfvObGWkkHVvX49g9zLA1sIZpkJBYoBSLLN7yGIlingh0jBI87iLOdnnGBA67KJ36lPLZTTxGCzROeIRsQLCNxS5h4a4fFyLPSmGa4o0IZjciP/YsjyHkMYoFknNSc4RYRqnHPBZwlgpwFuCdBPsCX6cUpE4HjbbQsTRUJi6wvOEL38knEQrhe1BoyB+Bj8QA2cv73y5/ePLyq8dnD35ffffz8v7D1Y9fvnxwb3XvGdCViotu8T+YEhommA3QnsYwYC30ioezPx/W8KqYDdzberaUX87Fu5fxUXzk40XHYzAuk4u355+y8xJcKEk6HxP4GOmEGGotpjrZvzxTqahwy0gIok3DvOTdZq1lr9FTqV7L9JrkG2enz79ZPf+t7a/0Wa1LvTLra2Oqo+rzv4q8ovMvEnnvTQkujrxu2nB2Docqj5Ovz+VRcrla49Lmc341ahWpVOW/vWTkv/xbnmVwLuEjaJf9sokmGav3VoTIGDmF5tbINFmXYjYR0w6ctCJLoFHnHHKIIEsAQivu5abKfQk1GoHbTpmJ5hkJIHAEFDJJdeYT8TkJAdg2SdA2nDm2dLcfTH02wfshFj6hdhc5FAhUQylJUj8VxWkCkFLNHRMqcOI4ROCoaYNUmEgKXT8QhEOaIAQ7yDGqp1xnr18pgIy49FUJuKQCtZUcjJIrYyn+gKitz3goSevooeYhTnACAbDwE5BtzyFRDpiaBGoi0rJBocyiwYn4IZY4t/gOhttTUpjVVh7CNMVNoLJEDdqVXWI+5QHfrqL0tC8SjPcLNvvwV9ZR1qPiTcaivDXCWbdMLps5jfzasndBOpqZ7fWMhyyGJYFbm6NFoL2DPFFXclrzAY8in4WuH4Yfwl7gyVzrKIYAeotEmGfCqfUGyIzczleu6CH0D2PaRZv9fj8f5TBKlt/rzN28ile5W+OZvpPr6zKmAxTyIIsgre4Eiw8olp/b849Cx1aWO5zB1mc4sTuqOTYarmfJCc9q9GDPkj1YTsNVP7/s1xusZ+n2KnWalz/CiLjJuZBl/4ynRHYH0LIpHgtYvXaQLwT7dq6+6LwPKYA0DHvF4wWeLTCAvhJTqC+MEBqG5BAF0BHSkWep0G7giHtWLlYKJCylJnBQGfZAWlXUSIJzeuBLFR3X8CATAlrZtYCS4AtQqb1iQPH05O7yj1+Ld8jy+6enJ4+Xdx+t/np69uTvs59eDHuF/UV4jYu7xHzx6NUxy2D017BXyRUMUzGnRdquqcecZ7m94gWnlpCL08gN0tSzIPfyIYeQW0mrXgszEorpQC7at3M9hGJTzQSDR3KIc0G+muXvW830a6jS0D9IOc1EYSjPsjGc9X01EjwuB233U0wmU1C/2u/HR9rzer/vaM+Rn0wI+NWoMexpwiZ6wlB31Wp4RcabmoEibcYACCs5r4HVtYoKyDezeyflDJ7oObynBFABs/M8C17gxZZze/DpQnsQ0GNksTYOEj5LoZndAQu1y9a8ygvbdqmlleK2sBb/AOBR7ZA=" />
+<h2>在某个节点下自动生成新节点</h2>
+<p>在某个节点下自动生成新节点，如果也要依次生成，那么可以使用前面的增量更新数据的方式。如果一次生成，那么可以简单的调用插入新节点的命令即可。</p>
+<h3>一次生成下级节点</h3>
+<pre class="hljs"><code><span class="hljs-comment">// 插入一个子节点</span>
+mindMap.execCommand(<span class="hljs-string">&#x27;INSERT_CHILD_NODE&#x27;</span>, 
+    <span class="hljs-literal">false</span>,
+    node,
+    {
+        <span class="hljs-attr">data</span>: {
+            <span class="hljs-attr">text</span>: <span class="hljs-string">&#x27;三级节点&#x27;</span>
+        },
+        <span class="hljs-attr">children</span>: []
+    },
+    [
+        {
+            <span class="hljs-attr">data</span>: {
+                <span class="hljs-attr">text</span>: <span class="hljs-string">&#x27;三级节点的子节点&#x27;</span>
+            },
+            <span class="hljs-attr">children</span>: []
+        }
+    ]
+)
+
+<span class="hljs-comment">// 插入多个子节点</span>
+mindMap.execCommand(<span class="hljs-string">&#x27;INSERT_MULTI_CHILD_NODE&#x27;</span>, node, [
+    {
+        <span class="hljs-attr">data</span>: {
+            <span class="hljs-attr">text</span>: <span class="hljs-string">&#x27;三级节点&#x27;</span>
+        },
+        <span class="hljs-attr">children</span>: []
+    },
+    {
+        <span class="hljs-attr">data</span>: {
+            <span class="hljs-attr">text</span>: <span class="hljs-string">&#x27;三级节点&#x27;</span>
+        },
+        <span class="hljs-attr">children</span>: []
+    }
+])
+</code></pre>
+<h3>一次生成兄弟节点</h3>
+<pre class="hljs"><code><span class="hljs-comment">// 插入一个兄弟节点</span>
+mindMap.execCommand(<span class="hljs-string">&#x27;INSERT_NODE&#x27;</span>, 
+    <span class="hljs-literal">false</span>,
+    node,
+    {
+        <span class="hljs-attr">data</span>: {
+            <span class="hljs-attr">text</span>: <span class="hljs-string">&#x27;二级节点&#x27;</span>
+        },
+        <span class="hljs-attr">children</span>: []
+    },
+    [
+        {
+            <span class="hljs-attr">data</span>: {
+                <span class="hljs-attr">text</span>: <span class="hljs-string">&#x27;二级节点的子节点&#x27;</span>
+            },
+            <span class="hljs-attr">children</span>: []
+        }
+    ]
+)
+
+<span class="hljs-comment">// 插入多个兄弟节点</span>
+mindMap.execCommand(<span class="hljs-string">&#x27;INSERT_MULTI_NODE&#x27;</span>, node, [
+    {
+        <span class="hljs-attr">data</span>: {
+            <span class="hljs-attr">text</span>: <span class="hljs-string">&#x27;二级节点&#x27;</span>
+        },
+        <span class="hljs-attr">children</span>: []
+    },
+    {
+        <span class="hljs-attr">data</span>: {
+            <span class="hljs-attr">text</span>: <span class="hljs-string">&#x27;二级节点&#x27;</span>
+        },
+        <span class="hljs-attr">children</span>: []
+    }
+])
+</code></pre>
+<p>这样新创建的节点默认会被激活但不进入编辑，如果你连激活都不想要的话，那么可以通过将实例化选项<code>createNewNodeBehavior</code>设置为<code>notActive</code>。</p>
+<p>当自动生成结束后你又想恢复创建新节点时自动进入编辑状态，那么可以通过<code>updateConfig</code>方法修改<code>createNewNodeBehavior</code>：</p>
+<pre class="hljs"><code>mindMap.updateConfig({
+    <span class="hljs-attr">createNewNodeBehavior</span>: <span class="hljs-string">&#x27;default&#x27;</span>
+})
+</code></pre>
+<h3>完整示例</h3>
+<iframe style="width: 100%; height: 455px; border: none;" src="https://wanglin2.github.io/playground/#eNrtV19rG0cQ/yrLliK5yCcl9EmVQ2LZUEPkFDd5yppwvhtJm97tHnd7lo0RlJDSNu1DoH0KFLdQaAntu/Pn40hWPkZmb3dPfw35Q/ySHBzszs78Zm5+M7t7J/RGkniHOdAmbWVByhNFMlB5co0JHicyVeSEpNCtESk6MhcKwhrJ+n4UycEedMmQdFMZkwoiVEqLDhdhx0/MEqMZiiNYj1G6HvsJo0wQwkQEimiZ1twgIo8iJpgIpMgUOgugnYKv4JaAdp9HYQoCtaprZOMaOdEARlHIEFBucTzUCiGF1OuiYBfXNo/v8LB6dU1bOCU4gqAt49gXYbWys/vt9t7te+2vd25u3du9tbVdqWFsBJ+uH2VQM2Ptxg4L5+YJfeU3ZwX6UXCkmqQyOvt58vyfV48eTB48w8y41aFF0U9gv6tJ7u4bqVu9O1VaQF/p8gK3kycPx/8/XgphMYzVoRRaZogSzB9Oltnp5JHil8FP587N2zvzLBWcuFRdBisf1AcT+xclGVtgM5WqD+mHzPCn2n+X2r8EYkzpfxxFjzmaT6VLTJ6gd2hL0eW9qg0hKGjYhUGRTej7h1ymGEsIXR+5wTCGDr08vKrL2PrwgYE7tBw4RE0SyiCPQSivB2o7Aj3cPN5BZqwlhqN8LiCtrNnvXEgRo1rA6FzWGNU500JGz/98ZnLG6EymGM15qBWuONk0j4y6PGqFi5plpeNF56Pnv5aczfmfi+HqrHy+dxZiWe6eon9m7bjgak9KpRn7RmZccanroRJBV2F1VwJMMaZz36pfxLCQ6kag+KG+cyD42leG6lbd3GDw7oITBXjtQHOcEdIK+SEJIj/LNhi19G1BLBktlq0CD6erJbmo0qrj6qyiQ1JSRge+VnEf3DrIlZKCXA8iHnyHKiuvMmgwOvv+/L+/Jr+fnv/0GMejs6ejs19KPlp1g/MmuHOH8ALy+O8n74E8PXlWBjz+4eH45ek7Brwa2MT7dsC4aSDKqx+fjh/9a1AmL347/+N0wXJKohu16jM1gtNMHUemXK7bmyyjXt1cX+324EEWe0GWMYo1p2+xhHgz5eTabcBD1cf+bTQ+L/QIScpqTwE9Yu0WC0Wj6PezxbJzUFND/yCTUa6MISG6Z5qkYWdKJtPJsvs+8F4f1b9sNJIj53m13y+c59hPexz9OtTED0Muek5Qhu7ZLnjDiK+4CGzQ5RwBsYMLDmiNGgb0D4N3P5MC/08KeGYXkIFyc2MUfz/MnubVceiluNfzGDRZ6wepHGR47N5HC7utrPglMbbLVGsrG9uQDl8Db1FoOA==" />
+  </div>
+</template>
+
+<script>
+export default {
+
+}
+</script>
+
+<style>
+
+</style>

web/src/pages/Doc/zh/course27/index.md

@@ -0,0 +1,49 @@
+# 快捷键操作如何传递自定义参数
+
+库提供了很多命令，比如插入子节点的`INSERT_CHILD_NODE`等，这些命令大多可以接收一定参数，比如在插入节点时我想指定初始文本和节点uid，那么可以这样调用：
+
+```js
+mindMap.execCommand('INSERT_CHILD_NODE', true, [], {
+    text: '初始文本',
+    uid: 'xxx'
+})
+```
+
+但是同时库内部也默认注册了很多快捷键，比如插入下级节点的`Tab`快捷键，很遗憾，目前快捷键操作无法让你传入自定义的参数，那么该怎么办呢，可以这样处理，首先确定你要给什么快捷键传入参数，比如`Tab`，那么首先可以调用如下方法删除库默认注册的快捷键：
+
+```js
+const keyName = 'Tab'
+mindMap.keyCommand.removeShortcut(keyName)
+```
+
+然后再重新注册即可：
+
+```js
+mindMap.keyCommand.addShortcut(keyName, () => {
+    mindMap.execCommand('INSERT_CHILD_NODE', true, [], {
+        text: '初始文本',
+        uid: 'xxx'
+    })
+})
+```
+
+库内部默认注册的快捷键对应的命令一览：
+
+| 快捷键          | 命令                |
+| --------------- | ------------------- |
+| Control+z       | BACK                |
+| Control+y       | FORWARD             |
+| Tab             | INSERT_CHILD_NODE   |
+| Insert          | INSERT_CHILD_NODE   |
+| Enter           | INSERT_NODE         |
+| Shift+Tab       | INSERT_PARENT_NODE  |
+| Control+g       | ADD_GENERALIZATION  |
+| Del或Backspace  | REMOVE_NODE         |
+| Shift+Backspace | REMOVE_CURRENT_NODE |
+| Control+a       | SELECT_ALL          |
+| Control+l       | RESET_LAYOUT        |
+| Control+Up      | UP_NODE             |
+| Control+Down    | DOWN_NODE           |
+
+
+

web/src/pages/Doc/zh/course27/index.vue

@@ -0,0 +1,97 @@
+<template>
+  <div>
+    <h1>快捷键操作如何传递自定义参数</h1>
+<p>库提供了很多命令，比如插入子节点的<code>INSERT_CHILD_NODE</code>等，这些命令大多可以接收一定参数，比如在插入节点时我想指定初始文本和节点uid，那么可以这样调用：</p>
+<pre class="hljs"><code>mindMap.execCommand(<span class="hljs-string">&#x27;INSERT_CHILD_NODE&#x27;</span>, <span class="hljs-literal">true</span>, [], {
+    <span class="hljs-attr">text</span>: <span class="hljs-string">&#x27;初始文本&#x27;</span>,
+    <span class="hljs-attr">uid</span>: <span class="hljs-string">&#x27;xxx&#x27;</span>
+})
+</code></pre>
+<p>但是同时库内部也默认注册了很多快捷键，比如插入下级节点的<code>Tab</code>快捷键，很遗憾，目前快捷键操作无法让你传入自定义的参数，那么该怎么办呢，可以这样处理，首先确定你要给什么快捷键传入参数，比如<code>Tab</code>，那么首先可以调用如下方法删除库默认注册的快捷键：</p>
+<pre class="hljs"><code><span class="hljs-keyword">const</span> keyName = <span class="hljs-string">&#x27;Tab&#x27;</span>
+mindMap.keyCommand.removeShortcut(keyName)
+</code></pre>
+<p>然后再重新注册即可：</p>
+<pre class="hljs"><code>mindMap.keyCommand.addShortcut(keyName, <span class="hljs-function">() =&gt;</span> {
+    mindMap.execCommand(<span class="hljs-string">&#x27;INSERT_CHILD_NODE&#x27;</span>, <span class="hljs-literal">true</span>, [], {
+        <span class="hljs-attr">text</span>: <span class="hljs-string">&#x27;初始文本&#x27;</span>,
+        <span class="hljs-attr">uid</span>: <span class="hljs-string">&#x27;xxx&#x27;</span>
+    })
+})
+</code></pre>
+<p>库内部默认注册的快捷键对应的命令一览：</p>
+<table>
+<thead>
+<tr>
+<th>快捷键</th>
+<th>命令</th>
+</tr>
+</thead>
+<tbody>
+<tr>
+<td>Control+z</td>
+<td>BACK</td>
+</tr>
+<tr>
+<td>Control+y</td>
+<td>FORWARD</td>
+</tr>
+<tr>
+<td>Tab</td>
+<td>INSERT_CHILD_NODE</td>
+</tr>
+<tr>
+<td>Insert</td>
+<td>INSERT_CHILD_NODE</td>
+</tr>
+<tr>
+<td>Enter</td>
+<td>INSERT_NODE</td>
+</tr>
+<tr>
+<td>Shift+Tab</td>
+<td>INSERT_PARENT_NODE</td>
+</tr>
+<tr>
+<td>Control+g</td>
+<td>ADD_GENERALIZATION</td>
+</tr>
+<tr>
+<td>Del或Backspace</td>
+<td>REMOVE_NODE</td>
+</tr>
+<tr>
+<td>Shift+Backspace</td>
+<td>REMOVE_CURRENT_NODE</td>
+</tr>
+<tr>
+<td>Control+a</td>
+<td>SELECT_ALL</td>
+</tr>
+<tr>
+<td>Control+l</td>
+<td>RESET_LAYOUT</td>
+</tr>
+<tr>
+<td>Control+Up</td>
+<td>UP_NODE</td>
+</tr>
+<tr>
+<td>Control+Down</td>
+<td>DOWN_NODE</td>
+</tr>
+</tbody>
+</table>
+
+  </div>
+</template>
+
+<script>
+export default {
+
+}
+</script>
+
+<style>
+
+</style>

web/src/pages/Doc/zh/course7/index.md

@@ -2,6 +2,10 @@
 
 > 节点自由拖拽的连线可能不会符合你的预期，这个问题基本上不会改，所以自由拖拽功能不建议使用。
 
+> 另外不要把节点拖拽和自由拖拽搞混，节点拖拽指拖动节点到其他节点上成为其子节点或兄弟节点，自由拖拽只是可以把节点放置在你拖动到的画布位置，并不能改变节点的层级。
+
+> 最后要注意这两个功能都需要先注册Drag插件。
+
 节点支持自由拖拽，也就是可以把它拖动到你指定的位置，默认是不开启的，如果需要开启可以在实例化`simple-mind-map`时传入开启的选项：
 
 ```js

web/src/pages/Doc/zh/course7/index.vue

@@ -4,6 +4,12 @@
 <blockquote>
 <p>节点自由拖拽的连线可能不会符合你的预期，这个问题基本上不会改，所以自由拖拽功能不建议使用。</p>
 </blockquote>
+<blockquote>
+<p>另外不要把节点拖拽和自由拖拽搞混，节点拖拽指拖动节点到其他节点上成为其子节点或兄弟节点，自由拖拽只是可以把节点放置在你拖动到的画布位置，并不能改变节点的层级。</p>
+</blockquote>
+<blockquote>
+<p>最后要注意这两个功能都需要先注册Drag插件。</p>
+</blockquote>
 <p>节点支持自由拖拽，也就是可以把它拖动到你指定的位置，默认是不开启的，如果需要开启可以在实例化<code>simple-mind-map</code>时传入开启的选项：</p>
 <pre class="hljs"><code><span class="hljs-keyword">new</span> MindMap({
     <span class="hljs-comment">// ...</span>

web/src/pages/Doc/zh/introduction/index.md

@@ -320,4 +320,34 @@
         <img src="../../../../assets/avatar/pluvet.jpg" style="width: 50px;height: 50px;object-fit: cover;border-radius: 50%;" />
         <p>pluvet</p>
     </div>
+    <div style="display: flex; flex-direction: column; align-items: center; width: fit-content; margin: 5px;">
+        <img src="../../../../assets/avatar/皇登攀.jpg" style="width: 50px;height: 50px;object-fit: cover;border-radius: 50%;" />
+        <p>皇登攀</p>
+    </div>
+    <div style="display: flex; flex-direction: column; align-items: center; width: fit-content; margin: 5px;">
+        <img src="../../../../assets/avatar/风格.jpg" style="width: 50px;height: 50px;object-fit: cover;border-radius: 50%;" />
+        <p>风格</p>
+    </div>
+    <div style="display: flex; flex-direction: column; align-items: center; width: fit-content; margin: 5px;">
+        <img src="../../../../assets/avatar/default.png" style="width: 50px;height: 50px;object-fit: cover;border-radius: 50%;" />
+        <p>SR</p>
+    </div>
+    <div style="display: flex; flex-direction: column; align-items: center; width: fit-content; margin: 5px;">
+        <img src="../../../../assets/avatar/逆水行舟.jpg" style="width: 50px;height: 50px;object-fit: cover;border-radius: 50%;" />
+        <p>逆水行舟</p>
+    </div>
+    <div style="display: flex; flex-direction: column; align-items: center; width: fit-content; margin: 5px;">
+        <img src="../../../../assets/avatar/default.png" style="width: 50px;height: 50px;object-fit: cover;border-radius: 50%;" />
+        <p>LiuJL</p>
+    </div>
+    <div style="display: flex; flex-direction: column; align-items: center; width: fit-content; margin: 5px;">
+        <img src="../../../../assets/avatar/L.jpg" style="width: 50px;height: 50px;object-fit: cover;border-radius: 50%;" />
+        <p>L</p>
+    </div>
+</div>
+<div style="display: flex;">
+    <div style="display: flex; flex-direction: column; align-items: center; width: fit-content; margin: 5px;">
+        <img src="../../../../assets/avatar/default.png" style="width: 50px;height: 50px;object-fit: cover;border-radius: 50%;" />
+        <p>sunniberg</p>
+    </div>
 </div>

web/src/pages/Doc/zh/introduction/index.vue

@@ -8,17 +8,17 @@
 </blockquote>
 <h2>特性</h2>
 <ul>
-<li><input type="checkbox" id="checkbox64" checked="true" /><label for="checkbox64">插件化架构，除核心功能外，其他功能作为插件提供，按需使用，减小打包体积</label></li>
-<li><input type="checkbox" id="checkbox65" checked="true" /><label for="checkbox65">支持逻辑结构图、思维导图、组织结构图、目录组织图、时间轴（横向、竖向）、鱼骨图等结构</label></li>
-<li><input type="checkbox" id="checkbox66" checked="true" /><label for="checkbox66">内置多种主题，允许高度自定义样式，支持注册新主题</label></li>
-<li><input type="checkbox" id="checkbox67" checked="true" /><label for="checkbox67">节点内容支持文本（普通文本、富文本）、图片、图标、超链接、备注、标签、概要、数学公式</label></li>
-<li><input type="checkbox" id="checkbox68" checked="true" /><label for="checkbox68">节点支持拖拽（拖拽移动、自由调整）、多种节点形状，支持使用 DDM 完全自定义节点内容</label></li>
-<li><input type="checkbox" id="checkbox69" checked="true" /><label for="checkbox69">支持画布拖动、缩放</label></li>
-<li><input type="checkbox" id="checkbox70" checked="true" /><label for="checkbox70">支持鼠标按键拖动选择和Ctrl+左键两种多选节点方式</label></li>
-<li><input type="checkbox" id="checkbox71" checked="true" /><label for="checkbox71">支持导出为</label><code>json</code>、<code>png</code>、<code>svg</code>、<code>pdf</code>、<code>markdown</code>、<code>xmind</code>，支持从<code>json</code>、<code>xmind</code>、<code>markdown</code>导入</li>
-<li><input type="checkbox" id="checkbox72" checked="true" /><label for="checkbox72">支持快捷键、前进后退、关联线、搜索替换、小地图、水印、滚动条</label></li>
-<li><input type="checkbox" id="checkbox73" checked="true" /><label for="checkbox73">提供丰富的配置，满足各种场景各种使用习惯</label></li>
-<li><input type="checkbox" id="checkbox74" checked="true" /><label for="checkbox74">支持协同编辑</label></li>
+<li><input type="checkbox" id="checkbox16" checked="true" /><label for="checkbox16">插件化架构，除核心功能外，其他功能作为插件提供，按需使用，减小打包体积</label></li>
+<li><input type="checkbox" id="checkbox17" checked="true" /><label for="checkbox17">支持逻辑结构图、思维导图、组织结构图、目录组织图、时间轴（横向、竖向）、鱼骨图等结构</label></li>
+<li><input type="checkbox" id="checkbox18" checked="true" /><label for="checkbox18">内置多种主题，允许高度自定义样式，支持注册新主题</label></li>
+<li><input type="checkbox" id="checkbox19" checked="true" /><label for="checkbox19">节点内容支持文本（普通文本、富文本）、图片、图标、超链接、备注、标签、概要、数学公式</label></li>
+<li><input type="checkbox" id="checkbox20" checked="true" /><label for="checkbox20">节点支持拖拽（拖拽移动、自由调整）、多种节点形状，支持使用 DDM 完全自定义节点内容</label></li>
+<li><input type="checkbox" id="checkbox21" checked="true" /><label for="checkbox21">支持画布拖动、缩放</label></li>
+<li><input type="checkbox" id="checkbox22" checked="true" /><label for="checkbox22">支持鼠标按键拖动选择和Ctrl+左键两种多选节点方式</label></li>
+<li><input type="checkbox" id="checkbox23" checked="true" /><label for="checkbox23">支持导出为</label><code>json</code>、<code>png</code>、<code>svg</code>、<code>pdf</code>、<code>markdown</code>、<code>xmind</code>，支持从<code>json</code>、<code>xmind</code>、<code>markdown</code>导入</li>
+<li><input type="checkbox" id="checkbox24" checked="true" /><label for="checkbox24">支持快捷键、前进后退、关联线、搜索替换、小地图、水印、滚动条</label></li>
+<li><input type="checkbox" id="checkbox25" checked="true" /><label for="checkbox25">提供丰富的配置，满足各种场景各种使用习惯</label></li>
+<li><input type="checkbox" id="checkbox26" checked="true" /><label for="checkbox26">支持协同编辑</label></li>
 </ul>
 <blockquote>
 <p>不会实现的特性：</p>
@@ -32,11 +32,11 @@
 <p>2.<code>web</code></p>
 <p>使用<code>simple-mind-map</code>库，基于<code>vue2.x</code>、<code>ElementUI</code>搭建的在线思维导图。特性：</p>
 <ul>
-<li><input type="checkbox" id="checkbox75" checked="true" /><label for="checkbox75">工具栏，支持插入节点、删除节点；编辑节点图片、图标、超链接、备注、标签、概要</label></li>
-<li><input type="checkbox" id="checkbox76" checked="true" /><label for="checkbox76">侧边栏，基础样式设置面板、节点样式设置面板、大纲面板、主题选择面板、结构选择面板</label></li>
-<li><input type="checkbox" id="checkbox77" checked="true" /><label for="checkbox77">导入导出功能；数据默认保存在浏览器本地存储，也支持直接创建、打开、编辑电脑本地文件</label></li>
-<li><input type="checkbox" id="checkbox78" checked="true" /><label for="checkbox78">右键菜单，支持展开、收起、整理布局等操作</label></li>
-<li><input type="checkbox" id="checkbox79" checked="true" /><label for="checkbox79">底部栏，支持节点数量、字数统计；支持切换编辑和只读模式；支持放大缩小；支持全屏切换；支持小地图</label></li>
+<li><input type="checkbox" id="checkbox27" checked="true" /><label for="checkbox27">工具栏，支持插入节点、删除节点；编辑节点图片、图标、超链接、备注、标签、概要</label></li>
+<li><input type="checkbox" id="checkbox28" checked="true" /><label for="checkbox28">侧边栏，基础样式设置面板、节点样式设置面板、大纲面板、主题选择面板、结构选择面板</label></li>
+<li><input type="checkbox" id="checkbox29" checked="true" /><label for="checkbox29">导入导出功能；数据默认保存在浏览器本地存储，也支持直接创建、打开、编辑电脑本地文件</label></li>
+<li><input type="checkbox" id="checkbox30" checked="true" /><label for="checkbox30">右键菜单，支持展开、收起、整理布局等操作</label></li>
+<li><input type="checkbox" id="checkbox31" checked="true" /><label for="checkbox31">底部栏，支持节点数量、字数统计；支持切换编辑和只读模式；支持放大缩小；支持全屏切换；支持小地图</label></li>
 </ul>
 <p>提供文档页面服务。</p>
 <p>3.<code>dist</code></p>
@@ -275,6 +275,36 @@
         <img src="../../../../assets/avatar/pluvet.jpg" style="width: 50px;height: 50px;object-fit: cover;border-radius: 50%;" />
         <p>pluvet</p>
     </div>
+    <div style="display: flex; flex-direction: column; align-items: center; width: fit-content; margin: 5px;">
+        <img src="../../../../assets/avatar/皇登攀.jpg" style="width: 50px;height: 50px;object-fit: cover;border-radius: 50%;" />
+        <p>皇登攀</p>
+    </div>
+    <div style="display: flex; flex-direction: column; align-items: center; width: fit-content; margin: 5px;">
+        <img src="../../../../assets/avatar/风格.jpg" style="width: 50px;height: 50px;object-fit: cover;border-radius: 50%;" />
+        <p>风格</p>
+    </div>
+    <div style="display: flex; flex-direction: column; align-items: center; width: fit-content; margin: 5px;">
+        <img src="../../../../assets/avatar/default.png" style="width: 50px;height: 50px;object-fit: cover;border-radius: 50%;" />
+        <p>SR</p>
+    </div>
+    <div style="display: flex; flex-direction: column; align-items: center; width: fit-content; margin: 5px;">
+        <img src="../../../../assets/avatar/逆水行舟.jpg" style="width: 50px;height: 50px;object-fit: cover;border-radius: 50%;" />
+        <p>逆水行舟</p>
+    </div>
+    <div style="display: flex; flex-direction: column; align-items: center; width: fit-content; margin: 5px;">
+        <img src="../../../../assets/avatar/default.png" style="width: 50px;height: 50px;object-fit: cover;border-radius: 50%;" />
+        <p>LiuJL</p>
+    </div>
+    <div style="display: flex; flex-direction: column; align-items: center; width: fit-content; margin: 5px;">
+        <img src="../../../../assets/avatar/L.jpg" style="width: 50px;height: 50px;object-fit: cover;border-radius: 50%;" />
+        <p>L</p>
+    </div>
+</div>
+<div style="display: flex;">
+    <div style="display: flex; flex-direction: column; align-items: center; width: fit-content; margin: 5px;">
+        <img src="../../../../assets/avatar/default.png" style="width: 50px;height: 50px;object-fit: cover;border-radius: 50%;" />
+        <p>sunniberg</p>
+    </div>
 </div>
   </div>
 </template>

web/src/pages/Doc/zh/node/index.md

@@ -56,6 +56,12 @@
 
 ## 方法
 
+### getAncestorNodes()
+
+> v0.9.9+
+
+获取祖先节点实例列表。
+
 ### highlight()
 
 > v0.9.8+
@@ -252,6 +258,16 @@
 
 设置节点备注，`SET_NODE_NOTE`命令的快捷方法
 
+### setAttachment(url, name)
+
+> v0.9.10+
+
+- `url`：附件的url；
+
+- `name`：附件的名称，可选
+
+设置节点附件，`SET_NODE_ATTACHMENT`命令的快捷方法
+
 ### setTag(tag)
 
 设置节点标签，`SET_NODE_TAG`的快捷方法

web/src/pages/Doc/zh/node/index.vue

@@ -31,6 +31,11 @@
 </blockquote>
 <p>节点是否正在拖拽中</p>
 <h2>方法</h2>
+<h3>getAncestorNodes()</h3>
+<blockquote>
+<p>v0.9.9+</p>
+</blockquote>
+<p>获取祖先节点实例列表。</p>
 <h3>highlight()</h3>
 <blockquote>
 <p>v0.9.8+</p>
@@ -183,6 +188,19 @@
 <p>设置节点超链接，<code>SET_NODE_HYPERLINK</code>命令的快捷方法</p>
 <h3>setNote(note)</h3>
 <p>设置节点备注，<code>SET_NODE_NOTE</code>命令的快捷方法</p>
+<h3>setAttachment(url, name)</h3>
+<blockquote>
+<p>v0.9.10+</p>
+</blockquote>
+<ul>
+<li>
+<p><code>url</code>：附件的url；</p>
+</li>
+<li>
+<p><code>name</code>：附件的名称，可选</p>
+</li>
+</ul>
+<p>设置节点附件，<code>SET_NODE_ATTACHMENT</code>命令的快捷方法</p>
 <h3>setTag(tag)</h3>
 <p>设置节点标签，<code>SET_NODE_TAG</code>的快捷方法</p>
 <h3>hide()</h3>