From 7f9a1e93093f64294db5023c8aca5a652c34572f Mon Sep 17 00:00:00 2001 From: wanglin2 <1013335014@qq.com> Date: Wed, 22 Nov 2023 16:23:04 +0800 Subject: [PATCH] =?UTF-8?q?Fix=EF=BC=9A=E4=BF=AE=E5=A4=8D=E9=83=A8?= =?UTF-8?q?=E5=88=86=E4=BA=8B=E4=BB=B6=E5=9C=A8=E6=80=9D=E7=BB=B4=E5=AF=BC?= =?UTF-8?q?=E5=9B=BE=E5=8D=B8=E8=BD=BD=E5=90=8E=E6=9C=AA=E5=8F=96=E6=B6=88?= =?UTF-8?q?=E7=9B=91=E5=90=AC=E7=9A=84=E9=97=AE=E9=A2=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- simple-mind-map/index.js | 1 + .../src/core/command/KeyCommand.js | 48 ++++++++++++------- simple-mind-map/src/core/render/TextEdit.js | 30 ++++++++---- simple-mind-map/src/plugins/RichText.js | 2 + web/src/pages/Edit/components/Edit.vue | 19 ++++++-- 5 files changed, 68 insertions(+), 32 deletions(-) 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中是否存在要打开的文件