Feat:新增销毁思维导图的方法

simple-mind-map/index.js

@@ -484,6 +484,21 @@ class MindMap {
       pluginOpt: plugin.pluginOpt
     })
   }
+
+  // 销毁
+  destroy() {
+    // 移除插件
+    [...MindMap.pluginList].forEach((plugin) => {
+      this[plugin.instanceName] = null
+    })
+    // 解绑事件
+    this.event.unbind()
+    // 移除画布节点
+    this.svg.remove()
+    // 去除给容器元素设置的背景样式
+    Style.removeBackgroundStyle(this.el)
+    this.el = null
+  }
 }
 
 // 插件列表

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

@@ -1,10 +1,20 @@
 import { tagColorList } from '../../../constants/constant'
 const rootProp = ['paddingX', 'paddingY']
+const backgroundStyleProps = ['backgroundColor', 'backgroundImage', 'backgroundRepeat', 'backgroundPosition', 'backgroundSize']
 
 //  样式类
 class Style {
   //   设置背景样式
   static setBackgroundStyle(el, themeConfig) {
+    // 缓存容器元素原本的样式
+    if (!Style.cacheStyle) {
+      Style.cacheStyle = {}
+      let style = window.getComputedStyle(el)
+      backgroundStyleProps.forEach((prop) => {
+        Style.cacheStyle[prop] = style[prop]
+      })
+    }
+    // 设置新样式
     let { backgroundColor, backgroundImage, backgroundRepeat, backgroundPosition, backgroundSize } = themeConfig
     el.style.backgroundColor = backgroundColor
     if (backgroundImage) {
@@ -17,6 +27,14 @@ class Style {
     }
   }
 
+  // 移除背景样式
+  static removeBackgroundStyle(el) {
+    backgroundStyleProps.forEach((prop) => {
+      el.style[prop] = Style.cacheStyle[prop]
+    })
+    Style.cacheStyle = null
+  }
+
   //  构造函数
   constructor(ctx) {
     this.ctx = ctx
@@ -192,4 +210,6 @@ class Style {
   }
 }
 
+Style.cacheStyle = null
+
 export default Style

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

@@ -91,12 +91,7 @@ class AssociativeLine {
     this.mindMap.on('node_dragging', this.onNodeDragging.bind(this))
     this.mindMap.on('node_dragend', this.onNodeDragend.bind(this))
     // 拖拽控制点
-    window.addEventListener('mousemove', e => {
-      this.onControlPointMousemove(e)
-    })
-    window.addEventListener('mouseup', e => {
-      this.onControlPointMouseup(e)
-    })
+    this.mindMap.on('mouseup', this.onControlPointMouseup.bind(this))
     // 缩放事件
     this.mindMap.on('scale', this.onScale)
   }
@@ -266,12 +261,13 @@ class AssociativeLine {
 
   // 鼠标移动事件
   onMousemove(e) {
-    if (!this.isCreatingLine) return
+    this.onControlPointMousemove(e)
     this.updateCreatingLine(e)
   }
 
   // 更新创建过程中的连接线
   updateCreatingLine(e) {
+    if (!this.isCreatingLine) return
     let { x, y } = this.getTransformedEventPos(e)
     let startPoint = getNodePoint(this.creatingStartNode)
     let offsetX = x > startPoint.x ? -10 : 10

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

@@ -4,7 +4,7 @@
 
 Breaking change: Adjusted the directory structure of the simple-mind-map source code, Main impact: 1. The introduction path of the plugin needs to be modified. The constant file path needs to be modified.
 
-New: 1.Supports one click zoom to fit the canvas function. 2.Press and hold the Ctrl key to activate the multi selection function on demand through configuration. 3.Support setting to left click to select multiple nodes and right click to drag the canvas. 4. Support controlling whether nodes are allowed to be edited.
+New: 1.Supports one click zoom to fit the canvas function. 2.Press and hold the Ctrl key to activate the multi selection function on demand through configuration. 3.Support setting to left click to select multiple nodes and right click to drag the canvas. 4. Support controlling whether nodes are allowed to be edited. 5.Add a method for destroying mind maps.
 
 Fix: 1.Fix the issue where holding down the Ctrl key to select multiple nodes does not trigger the click event for the node.
 

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

@@ -3,7 +3,7 @@
     <h1>Changelog</h1>
 <h2>0.6.0</h2>
 <p>Breaking change: Adjusted the directory structure of the simple-mind-map source code, Main impact: 1. The introduction path of the plugin needs to be modified. The constant file path needs to be modified.</p>
-<p>New: 1.Supports one click zoom to fit the canvas function. 2.Press and hold the Ctrl key to activate the multi selection function on demand through configuration. 3.Support setting to left click to select multiple nodes and right click to drag the canvas. 4. Support controlling whether nodes are allowed to be edited.</p>
+<p>New: 1.Supports one click zoom to fit the canvas function. 2.Press and hold the Ctrl key to activate the multi selection function on demand through configuration. 3.Support setting to left click to select multiple nodes and right click to drag the canvas. 4. Support controlling whether nodes are allowed to be edited. 5.Add a method for destroying mind maps.</p>
 <p>Fix: 1.Fix the issue where holding down the Ctrl key to select multiple nodes does not trigger the click event for the node.</p>
 <h2>0.5.11</h2>
 <p>New: Supports associative text editing.</p>

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

@@ -145,6 +145,12 @@ List of all currently registered plugins.
 
 ## Instance methods
 
+### destroy()
+
+> v0.6.0+
+
+Destroy mind maps. It will remove registered plugins, remove listening events, and delete all nodes on the canvas.
+
 ### getSvgData({ paddingX = 0, paddingY = 0 })
 
 > v0.3.0+

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

@@ -448,6 +448,11 @@ mindMap.setTheme(<span class="hljs-string">&#x27;Theme name&#x27;</span>)
 </blockquote>
 <p>List of all currently registered plugins.</p>
 <h2>Instance methods</h2>
+<h3>destroy()</h3>
+<blockquote>
+<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 })</h3>
 <blockquote>
 <p>v0.3.0+</p>

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

@@ -4,7 +4,7 @@
 
 破坏性更新：调整了simple-mind-map源码的目录结构，主要影响：1.插件的引入路径需要修改。2.constant文件路径需要修改。
 
-新增：1.支持一键缩放至适应画布功能。 2.按住Ctrl键多选功能可通过配置按需开启。 3.支持设置为左键多选节点，右键拖动画布。 4.支持控制节点是否允许编辑。
+新增：1.支持一键缩放至适应画布功能。 2.按住Ctrl键多选功能可通过配置按需开启。 3.支持设置为左键多选节点，右键拖动画布。 4.支持控制节点是否允许编辑。 5.新增销毁思维导图的方法。
 
 修复：1.修复按住ctrl键多选节点时不会触发节点的click事件的问题。
 

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

@@ -3,7 +3,7 @@
     <h1>Changelog</h1>
 <h2>0.6.0</h2>
 <p>破坏性更新：调整了simple-mind-map源码的目录结构，主要影响：1.插件的引入路径需要修改。2.constant文件路径需要修改。</p>
-<p>新增：1.支持一键缩放至适应画布功能。 2.按住Ctrl键多选功能可通过配置按需开启。 3.支持设置为左键多选节点，右键拖动画布。 4.支持控制节点是否允许编辑。</p>
+<p>新增：1.支持一键缩放至适应画布功能。 2.按住Ctrl键多选功能可通过配置按需开启。 3.支持设置为左键多选节点，右键拖动画布。 4.支持控制节点是否允许编辑。 5.新增销毁思维导图的方法。</p>
 <p>修复：1.修复按住ctrl键多选节点时不会触发节点的click事件的问题。</p>
 <h2>0.5.11</h2>
 <p>新增：支持关联性文本编辑。</p>

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

@@ -143,6 +143,12 @@ mindMap.setTheme('主题名称')
 
 ## 实例方法
 
+### destroy()
+
+> v0.6.0+
+
+销毁思维导图。会移除注册的插件、移除监听的事件、删除画布的所有节点。
+
 ### getSvgData({ paddingX = 0, paddingY = 0 })
 
 > v0.3.0+

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

@@ -448,6 +448,11 @@ mindMap.setTheme(<span class="hljs-string">&#x27;主题名称&#x27;</span>)
 </blockquote>
 <p>当前注册的所有插件列表。</p>
 <h2>实例方法</h2>
+<h3>destroy()</h3>
+<blockquote>
+<p>v0.6.0+</p>
+</blockquote>
+<p>销毁思维导图。会移除注册的插件、移除监听的事件、删除画布的所有节点。</p>
 <h3>getSvgData({ paddingX = 0, paddingY = 0 })</h3>
 <blockquote>
 <p>v0.3.0+</p>