diff --git a/index.html b/index.html index de42302b..f6d0b991 100644 --- a/index.html +++ b/index.html @@ -1 +1 @@ -一个简单的web思维导图实现
\ No newline at end of file +一个简单的web思维导图实现
\ No newline at end of file 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/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/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..9130e73e 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.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] // 保存该节点上一次的数据 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 @@