diff --git a/simple-mind-map/index.js b/simple-mind-map/index.js index cd9cd531..9b3dc452 100644 --- a/simple-mind-map/index.js +++ b/simple-mind-map/index.js @@ -486,6 +486,7 @@ class MindMap { // 销毁 destroy() { + this.emit('beforeDestroy') // 移除插件 ;[...MindMap.pluginList].forEach(plugin => { if (this[plugin.instanceName].beforePluginDestroy) { diff --git a/simple-mind-map/src/core/command/KeyCommand.js b/simple-mind-map/src/core/command/KeyCommand.js index 39abc3c6..331c4a2d 100644 --- a/simple-mind-map/src/core/command/KeyCommand.js +++ b/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 => { - if ( - this.isPause || - (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() - }) + window.addEventListener('keydown', this.onKeydown) + this.mindMap.on('beforeDestroy', () => { + this.unBindEvent() + }) + } + + // 解绑事件 + unBindEvent() { + window.removeEventListener('keydown', this.onKeydown) + } + + // 按键事件 + onKeydown(e) { + if ( + this.isPause || + (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() + }) + } }) } diff --git a/simple-mind-map/src/core/render/TextEdit.js b/simple-mind-map/src/core/render/TextEdit.js index da828cdf..f364ed7d 100644 --- a/simple-mind-map/src/core/render/TextEdit.js +++ b/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 => { - 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) - } - }) + window.addEventListener('keydown', this.onKeydown) + } + this.mindMap.on('beforeDestroy', () => { + this.unBindEvent() + }) + } + + // 解绑事件 + 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) } } diff --git a/simple-mind-map/src/plugins/RichText.js b/simple-mind-map/src/plugins/RichText.js index 41541e24..36c19d84 100644 --- a/simple-mind-map/src/plugins/RichText.js +++ b/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() } } diff --git a/web/src/pages/Edit/components/Edit.vue b/web/src/pages/Edit/components/Edit.vue index 4b668ba1..215ae601 100644 --- a/web/src/pages/Edit/components/Edit.vue +++ b/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'), { - confirmButtonText: this.$t('edit.yes'), - cancelButtonText: this.$t('edit.no'), - type: 'warning' - }) + return this.$confirm( + this.$t('edit.splitByWrap'), + this.$t('edit.tip'), + { + 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中是否存在要打开的文件