From 983e55bd1dfa985c43e1ef5add7a243e9b186c0b Mon Sep 17 00:00:00 2001 From: wanglin2 <1013335014@qq.com> Date: Tue, 4 Apr 2023 22:53:38 +0800 Subject: [PATCH 1/7] =?UTF-8?q?=E4=BC=98=E5=8C=96:=E5=8F=AA=E6=9C=89?= =?UTF-8?q?=E5=BD=93=E9=BC=A0=E6=A0=87=E5=9C=A8=E7=94=BB=E5=B8=83=E5=86=85?= =?UTF-8?q?=E6=89=8D=E5=93=8D=E5=BA=94=E5=BF=AB=E6=8D=B7=E9=94=AE?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- simple-mind-map/src/Event.js | 16 ++++++++++++++++ simple-mind-map/src/KeyCommand.js | 16 +++++++++++++++- 2 files changed, 31 insertions(+), 1 deletion(-) diff --git a/simple-mind-map/src/Event.js b/simple-mind-map/src/Event.js index 39374272..917f51b8 100644 --- a/simple-mind-map/src/Event.js +++ b/simple-mind-map/src/Event.js @@ -35,6 +35,8 @@ class Event extends EventEmitter { this.onContextmenu = this.onContextmenu.bind(this) this.onSvgMousedown = this.onSvgMousedown.bind(this) this.onKeyup = this.onKeyup.bind(this) + this.onMouseenter = this.onMouseenter.bind(this) + this.onMouseleave = this.onMouseleave.bind(this) } // 绑定事件 @@ -46,6 +48,8 @@ class Event extends EventEmitter { window.addEventListener('mouseup', this.onMouseup) this.mindMap.el.addEventListener('wheel', this.onMousewheel) this.mindMap.svg.on('contextmenu', this.onContextmenu) + this.mindMap.svg.on('mouseenter', this.onMouseenter) + this.mindMap.svg.on('mouseleave', this.onMouseleave) window.addEventListener('keyup', this.onKeyup) } @@ -57,6 +61,8 @@ class Event extends EventEmitter { window.removeEventListener('mouseup', this.onMouseup) this.mindMap.el.removeEventListener('wheel', this.onMousewheel) this.mindMap.svg.off('contextmenu', this.onContextmenu) + this.mindMap.svg.off('mouseenter', this.onMouseenter) + this.mindMap.svg.off('mouseleave', this.onMouseleave) window.removeEventListener('keyup', this.onKeyup) } @@ -130,6 +136,16 @@ class Event extends EventEmitter { onKeyup(e) { this.emit('keyup', e) } + + // 进入 + onMouseenter(e) { + this.emit('svg_mouseenter', e) + } + + // 离开 + onMouseleave(e) { + this.emit('svg_mouseleave', e) + } } export default Event diff --git a/simple-mind-map/src/KeyCommand.js b/simple-mind-map/src/KeyCommand.js index 79aad141..5405ee02 100644 --- a/simple-mind-map/src/KeyCommand.js +++ b/simple-mind-map/src/KeyCommand.js @@ -10,6 +10,7 @@ export default class KeyCommand { } this.shortcutMapCache = {} this.isPause = false + this.isInSvg = false this.bindEvent() } @@ -37,8 +38,21 @@ export default class KeyCommand { // 绑定事件 bindEvent() { + // 只有当鼠标在画布内才响应快捷键 + this.mindMap.on('svg_mouseenter', () => { + this.isInSvg = true + }) + this.mindMap.on('svg_mouseleave', () => { + if (this.mindMap.richText && this.mindMap.richText.showTextEdit) { + return + } + if (this.mindMap.renderer.textEdit.showTextEdit) { + return + } + this.isInSvg = false + }) window.addEventListener('keydown', e => { - if (this.isPause) { + if (this.isPause || !this.isInSvg) { return } Object.keys(this.shortcutMap).forEach(key => { From af148fef27583e472dd539b655ba0047fb977245 Mon Sep 17 00:00:00 2001 From: wanglin2 <1013335014@qq.com> Date: Tue, 4 Apr 2023 22:54:24 +0800 Subject: [PATCH 2/7] =?UTF-8?q?Demo:=E4=BF=AE=E5=A4=8D=E5=9C=A8=E5=A4=A7?= =?UTF-8?q?=E7=BA=B2=E5=86=85=E6=B7=BB=E5=8A=A0=E6=96=B0=E8=8A=82=E7=82=B9?= =?UTF-8?q?=E6=97=B6=E8=8A=82=E7=82=B9=E9=94=99=E4=B9=B1=E7=9A=84=E9=97=AE?= =?UTF-8?q?=E9=A2=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- web/src/pages/Edit/components/Outline.vue | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/web/src/pages/Edit/components/Outline.vue b/web/src/pages/Edit/components/Outline.vue index 2859ff2d..158371e7 100644 --- a/web/src/pages/Edit/components/Outline.vue +++ b/web/src/pages/Edit/components/Outline.vue @@ -50,6 +50,7 @@ export default { } }, notHandleDataChange: false, + isCreateNode: false } }, computed: { @@ -76,6 +77,10 @@ export default { }, methods: { onBlur(e, node) { + if (this.isCreateNode) { + this.isCreateNode = false + return + } node.data._node.setText(e.target.innerText) }, @@ -97,12 +102,14 @@ export default { // 插入兄弟节点 insertNode() { this.notHandleDataChange = false + this.isCreateNode = true this.mindMap.execCommand('INSERT_NODE', false) }, // 插入下级节点 insertChildNode() { this.notHandleDataChange = false + this.isCreateNode = true this.mindMap.execCommand('INSERT_CHILD_NODE', false) }, From 388594e29afc51857726a2357a363b65895ac493 Mon Sep 17 00:00:00 2001 From: wanglin2 <1013335014@qq.com> Date: Wed, 5 Apr 2023 08:45:23 +0800 Subject: [PATCH 3/7] =?UTF-8?q?Fix:=E4=BF=AE=E5=A4=8D=E5=BF=AB=E9=80=9F?= =?UTF-8?q?=E6=93=8D=E4=BD=9C=E6=97=B6=E8=8A=82=E7=82=B9=E4=BD=8D=E7=BD=AE?= =?UTF-8?q?=E4=B8=8D=E6=AD=A3=E7=A1=AE=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 | 8 +++++++- simple-mind-map/src/KeyCommand.js | 2 +- simple-mind-map/src/Node.js | 18 ++++++++++++++---- simple-mind-map/src/layouts/Base.js | 2 +- 4 files changed, 23 insertions(+), 7 deletions(-) diff --git a/simple-mind-map/index.js b/simple-mind-map/index.js index 022c7f68..c97dac8f 100644 --- a/simple-mind-map/index.js +++ b/simple-mind-map/index.js @@ -82,7 +82,13 @@ const defaultOpt = { expandBtnIcon: { open: '',// svg字符串 close: '' - } + }, + // 是否只有当鼠标在画布内才响应快捷键事件 + enableShortcutOnlyWhenMouseInSvg: true, + // 是否开启节点动画过渡 + enableNodeTransitionMove: true, + // 如果开启节点动画过渡，可以通过该属性设置过渡的时间，单位ms + nodeTransitionMoveDuration: 300 } // 思维导图 diff --git a/simple-mind-map/src/KeyCommand.js b/simple-mind-map/src/KeyCommand.js index 5405ee02..9130e73e 100644 --- a/simple-mind-map/src/KeyCommand.js +++ b/simple-mind-map/src/KeyCommand.js @@ -52,7 +52,7 @@ export default class KeyCommand { this.isInSvg = false }) window.addEventListener('keydown', e => { - if (this.isPause || !this.isInSvg) { + if (this.isPause || (this.mindMap.opt.enableShortcutOnlyWhenMouseInSvg && !this.isInSvg)) { return } Object.keys(this.shortcutMap).forEach(key => { diff --git a/simple-mind-map/src/Node.js b/simple-mind-map/src/Node.js index 287fe21b..fa208f11 100644 --- a/simple-mind-map/src/Node.js +++ b/simple-mind-map/src/Node.js @@ -414,6 +414,7 @@ class Node { if (!this.group) { return } + let { enableNodeTransitionMove, nodeTransitionMoveDuration } = this.mindMap.opt // 需要移除展开收缩按钮 if (this._expandBtn && this.nodeData.children.length <= 0) { this.removeExpandBtn() @@ -425,9 +426,9 @@ class Node { this.renderGeneralization() // 更新节点位置 let t = this.group.transform() - if (!isLayout) { + if (!isLayout && enableNodeTransitionMove) { this.group - .animate(300) + .animate(nodeTransitionMoveDuration) .translate( this.left - t.translateX, this.top - t.translateY @@ -457,10 +458,13 @@ class Node { // 递归渲染 render(callback = () => {}) { + let { enableNodeTransitionMove, nodeTransitionMoveDuration } = this.mindMap.opt // 节点 // 重新渲染连线 this.renderLine() + let isLayout = false if (!this.group) { + isLayout = true // 创建组 this.group = new G() this.group.css({ @@ -469,7 +473,7 @@ class Node { this.bindGroupEvent() this.draw.add(this.group) this.layout() - this.update(true) + this.update(isLayout) } else { this.draw.add(this.group) if (this.needLayout) { @@ -498,7 +502,13 @@ class Node { }) ) } else { - callback() + if (enableNodeTransitionMove && !isLayout) { + setTimeout(() => { + callback() + }, nodeTransitionMoveDuration) + } else { + callback() + } } // 手动插入的节点立即获得焦点并且开启编辑模式 if (this.nodeData.inserting) { diff --git a/simple-mind-map/src/layouts/Base.js b/simple-mind-map/src/layouts/Base.js index 70569c31..e6827e1e 100644 --- a/simple-mind-map/src/layouts/Base.js +++ b/simple-mind-map/src/layouts/Base.js @@ -67,7 +67,7 @@ class Base { newNode.getSize() newNode.needLayout = true } - } else if (this.nodePool[data.data.uid]) { + } else if (this.nodePool[data.data.uid] && !this.renderer.reRender) { // 数据上没有保存节点引用，但是通过uid找到了缓存的节点，也可以复用 newNode = this.nodePool[data.data.uid] // 保存该节点上一次的数据 From 633ed68f9265a4d08ca9f8e0f1b9464d4d624fc3 Mon Sep 17 00:00:00 2001 From: wanglin2 <1013335014@qq.com> Date: Wed, 5 Apr 2023 08:49:36 +0800 Subject: [PATCH 4/7] =?UTF-8?q?Demo:=E5=AF=BC=E5=85=A5=E6=95=B0=E6=8D=AE?= =?UTF-8?q?=E5=90=8E=E5=A4=8D=E4=BD=8D=E7=94=BB=E5=B8=83=E5=8F=98=E6=8D=A2?= =?UTF-8?q?=E6=95=88=E6=9E=9C,=E8=A7=A3=E5=86=B3=E5=AF=BC=E5=85=A5?= =?UTF-8?q?=E5=90=8E=E6=96=B0=E8=8A=82=E7=82=B9=E5=9C=A8=E7=94=BB=E5=B8=83?= =?UTF-8?q?=E5=A4=96=E7=9A=84=E9=97=AE=E9=A2=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- web/src/pages/Edit/components/Edit.vue | 1 + 1 file changed, 1 insertion(+) diff --git a/web/src/pages/Edit/components/Edit.vue b/web/src/pages/Edit/components/Edit.vue index 751abfbe..f97921c8 100644 --- a/web/src/pages/Edit/components/Edit.vue +++ b/web/src/pages/Edit/components/Edit.vue @@ -336,6 +336,7 @@ export default { } else { this.mindMap.setData(data) } + this.mindMap.view.reset() // this.manualSave() }, From 52d094a7c726dc2d2290038b96cc9757d2064bcb Mon Sep 17 00:00:00 2001 From: wanglin2 <1013335014@qq.com> Date: Wed, 5 Apr 2023 09:55:39 +0800 Subject: [PATCH 5/7] =?UTF-8?q?Demo:=E7=AA=97=E5=8F=A3=E5=A4=A7=E5=B0=8F?= =?UTF-8?q?=E6=94=B9=E5=8F=98=E5=90=8E=E4=BF=AE=E6=94=B9=E7=94=BB=E5=B8=83?= =?UTF-8?q?=E5=A4=A7=E5=B0=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- web/src/pages/Edit/components/Edit.vue | 3 +++ 1 file changed, 3 insertions(+) diff --git a/web/src/pages/Edit/components/Edit.vue b/web/src/pages/Edit/components/Edit.vue index f97921c8..04769ba8 100644 --- a/web/src/pages/Edit/components/Edit.vue +++ b/web/src/pages/Edit/components/Edit.vue @@ -126,6 +126,9 @@ export default { this.$bus.$on('createAssociativeLine', () => { this.mindMap.associativeLine.createLineFromActiveNode() }) + window.addEventListener('resize', () => { + this.mindMap.resize() + }) if (this.openTest) { setTimeout(() => { this.test() From 5675e29df3d9ac8d776ad6a9dd229c114895ec79 Mon Sep 17 00:00:00 2001 From: wanglin2 <1013335014@qq.com> Date: Wed, 5 Apr 2023 16:40:29 +0800 Subject: [PATCH 6/7] =?UTF-8?q?=E6=9B=B4=E6=96=B0=E6=96=87=E6=A1=A3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- simple-mind-map/package.json | 2 +- web/src/pages/Doc/en/changelog/index.md | 6 +++++ web/src/pages/Doc/en/changelog/index.vue | 3 +++ web/src/pages/Doc/en/constructor/index.md | 5 ++++ web/src/pages/Doc/en/constructor/index.vue | 31 ++++++++++++++++++++++ web/src/pages/Doc/zh/changelog/index.md | 6 +++++ web/src/pages/Doc/zh/changelog/index.vue | 3 +++ web/src/pages/Doc/zh/constructor/index.md | 5 ++++ web/src/pages/Doc/zh/constructor/index.vue | 31 ++++++++++++++++++++++ 9 files changed, 91 insertions(+), 1 deletion(-) diff --git a/simple-mind-map/package.json b/simple-mind-map/package.json index 2b1ee325..d89d0a40 100644 --- a/simple-mind-map/package.json +++ b/simple-mind-map/package.json @@ -1,6 +1,6 @@ { "name": "simple-mind-map", - "version": "0.5.0", + "version": "0.5.1", "description": "一个简单的web在线思维导图", "authors": [ { diff --git a/web/src/pages/Doc/en/changelog/index.md b/web/src/pages/Doc/en/changelog/index.md index e2bb042d..2a5ff6b7 100644 --- a/web/src/pages/Doc/en/changelog/index.md +++ b/web/src/pages/Doc/en/changelog/index.md @@ -1,5 +1,11 @@ # Changelog +## 0.5.1 + +optimization: 1.Only respond to shortcut key events when the mouse is inside the canvas + +Fix: 1.Fix the issue of incorrect node position during fast operation + ## 0.5.0 This version is mainly about code level changes and optimization, with the core goal of improving rendering performance and reducing stuck issues. diff --git a/web/src/pages/Doc/en/changelog/index.vue b/web/src/pages/Doc/en/changelog/index.vue index 170d400d..99bac2ee 100644 --- a/web/src/pages/Doc/en/changelog/index.vue +++ b/web/src/pages/Doc/en/changelog/index.vue @@ -1,6 +1,9 @@