Fix：修复部分事件在思维导图卸载后未取消监听的问题

simple-mind-map/index.js

@@ -486,6 +486,7 @@ class MindMap {
 
   // 销毁
   destroy() {
+    this.emit('beforeDestroy')
     // 移除插件
     ;[...MindMap.pluginList].forEach(plugin => {
       if (this[plugin.instanceName].beforePluginDestroy) {

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

@@ -38,6 +38,7 @@ export default class KeyCommand {
 
   //  绑定事件
   bindEvent() {
+    this.onKeydown = this.onKeydown.bind(this)
     // 只有当鼠标在画布内才响应快捷键
     this.mindMap.on('svg_mouseenter', () => {
       this.isInSvg = true
@@ -55,25 +56,36 @@ export default class KeyCommand {
       }
       this.isInSvg = false
     })
-    window.addEventListener('keydown', e => {
+    window.addEventListener('keydown', this.onKeydown)
-      if (
+    this.mindMap.on('beforeDestroy', () => {
-        this.isPause ||
+      this.unBindEvent()
-        (this.mindMap.opt.enableShortcutOnlyWhenMouseInSvg && !this.isInSvg)
+    })
-      ) {
+  }
-        return
+
-      }
+  // 解绑事件
-      Object.keys(this.shortcutMap).forEach(key => {
+  unBindEvent() {
-        if (this.checkKey(e, key)) {
+    window.removeEventListener('keydown', this.onKeydown)
-          // 粘贴事件不组织，因为要监听paste事件
+  }
-          if (!this.checkKey(e, 'Control+v')) {
+
-            e.stopPropagation()
+  // 按键事件
-            e.preventDefault()
+  onKeydown(e) {
-          }
+    if (
-          this.shortcutMap[key].forEach(fn => {
+      this.isPause ||
-            fn()
+      (this.mindMap.opt.enableShortcutOnlyWhenMouseInSvg && !this.isInSvg)
-          })
+    ) {
+      return
+    }
+    Object.keys(this.shortcutMap).forEach(key => {
+      if (this.checkKey(e, key)) {
+        // 粘贴事件不组织，因为要监听paste事件
+        if (!this.checkKey(e, 'Control+v')) {
+          e.stopPropagation()
+          e.preventDefault()
         }
-      })
+        this.shortcutMap[key].forEach(fn => {
+          fn()
+        })
+      }
     })
   }
 

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

@@ -28,6 +28,7 @@ export default class TextEdit {
   bindEvent() {
     this.show = this.show.bind(this)
     this.onScale = this.onScale.bind(this)
+    this.onKeydown = this.onKeydown.bind(this)
     // 节点双击事件
     this.mindMap.on('node_dblclick', this.show)
     // 点击事件
@@ -63,15 +64,26 @@ export default class TextEdit {
     this.mindMap.on('scale', this.onScale)
     // // 监听按键事件，判断是否自动进入文本编辑模式
     if (this.mindMap.opt.enableAutoEnterTextEditWhenKeydown) {
-      window.addEventListener('keydown', e => {
+      window.addEventListener('keydown', this.onKeydown)
-        const activeNodeList = this.mindMap.renderer.activeNodeList
+    }
-        if (activeNodeList.length <= 0 || activeNodeList.length > 1) return
+    this.mindMap.on('beforeDestroy', () => {
-        const node = activeNodeList[0]
+      this.unBindEvent()
-        // 当正在输入中文或英文或数字时，如果没有按下组合键，那么自动进入文本编辑模式
+    })
-        if (node && this.checkIsAutoEnterTextEditKey(e)) {
+  }
-          this.show(node, e, false, true)
+
-        }
+  // 解绑事件
-      })
+  unBindEvent() {
+    window.removeEventListener('keydown', this.onKeydown)
+  }
+
+  // 按键事件
+  onKeydown(e) {
+    const activeNodeList = this.mindMap.renderer.activeNodeList
+    if (activeNodeList.length <= 0 || activeNodeList.length > 1) return
+    const node = activeNodeList[0]
+    // 当正在输入中文或英文或数字时，如果没有按下组合键，那么自动进入文本编辑模式
+    if (node && this.checkIsAutoEnterTextEditKey(e)) {
+      this.show(node, e, false, true)
     }
   }
 

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

@@ -651,11 +651,13 @@ class RichText {
   beforePluginRemove() {
     this.transformAllNodesToNormalNode()
     document.head.removeChild(this.styleEl)
+    this.unbindEvent()
   }
 
   // 插件被卸载前做的事情
   beforePluginDestroy() {
     document.head.removeChild(this.styleEl)
+    this.unbindEvent()
   }
 }
 

web/src/pages/Edit/components/Edit.vue

@@ -308,11 +308,15 @@ export default {
         enableAutoEnterTextEditWhenKeydown: true,
         customHandleClipboardText: handleClipboardText,
         handleIsSplitByWrapOnPasteCreateNewNode: () => {
-          return this.$confirm(this.$t('edit.splitByWrap'), this.$t('edit.tip'), {
+          return this.$confirm(
-            confirmButtonText: this.$t('edit.yes'),
+            this.$t('edit.splitByWrap'),
-            cancelButtonText: this.$t('edit.no'),
+            this.$t('edit.tip'),
-            type: 'warning'
+            {
-          })
+              confirmButtonText: this.$t('edit.yes'),
+              cancelButtonText: this.$t('edit.no'),
+              type: 'warning'
+            }
+          )
         }
         // isUseCustomNodeContent: true,
         // 示例1：组件里用到了router、store、i18n等实例化vue组件时需要用到的东西
@@ -399,6 +403,11 @@ export default {
       }
       // 协同测试
       this.cooperateTest()
+      // 销毁
+      // setTimeout(() => {
+      //   console.log('销毁')
+      //   this.mindMap.destroy()
+      // }, 10000)
     },
 
     // url中是否存在要打开的文件