diff --git a/simple-mind-map/src/Node.js b/simple-mind-map/src/Node.js index 7f1ec286..789c00d5 100644 --- a/simple-mind-map/src/Node.js +++ b/simple-mind-map/src/Node.js @@ -68,6 +68,7 @@ class Node { this.noteEl = null this._expandBtn = null this._lastExpandBtnType = null + this._showExpandBtn = false this._openExpandNode = null this._closeExpandNode = null this._fillExpandNode = null @@ -75,6 +76,7 @@ class Node { this._generalizationLine = null this._generalizationNode = null this._unVisibleRectRegionNode = null + this._isMouseenter = false // 尺寸信息 this._rectInfo = { imgContentWidth: 0, @@ -385,11 +387,13 @@ class Node { this.mindMap.emit('node_mouseup', this, e) }) this.group.on('mouseenter', e => { + this._isMouseenter = true // 显示展开收起按钮 this.showExpandBtn() this.mindMap.emit('node_mouseenter', this, e) }) this.group.on('mouseleave', e => { + this._isMouseenter = false this.hideExpandBtn() this.mindMap.emit('node_mouseleave', this, e) }) @@ -449,8 +453,11 @@ class Node { this.renderExpandBtn() } } else { - // 如果是收起状态,那么显示展开收起按钮 - if (!this.nodeData.data.expand) { + let { isActive, expand } = this.nodeData.data + // 展开状态且非激活状态,且当前鼠标不在它上面,才隐藏 + if (expand && !isActive && !this._isMouseenter) { + this.hideExpandBtn() + } else { this.showExpandBtn() } } diff --git a/simple-mind-map/src/Render.js b/simple-mind-map/src/Render.js index dde1609c..f2335c22 100644 --- a/simple-mind-map/src/Render.js +++ b/simple-mind-map/src/Render.js @@ -757,14 +757,14 @@ class Render { item.render() }) node.renderLine() - node.updateExpandBtnNode() + // node.updateExpandBtnNode() } else { // 收缩 node.children.forEach(item => { item.remove() }) node.removeLine() - node.updateExpandBtnNode() + // node.updateExpandBtnNode() } this.mindMap.render() } diff --git a/simple-mind-map/src/utils/nodeExpandBtn.js b/simple-mind-map/src/utils/nodeExpandBtn.js index 85587d72..650417b5 100644 --- a/simple-mind-map/src/utils/nodeExpandBtn.js +++ b/simple-mind-map/src/utils/nodeExpandBtn.js @@ -98,14 +98,16 @@ function renderExpandBtn() { }) this.group.add(this._expandBtn) } + this._showExpandBtn = true this.updateExpandBtnNode() this.updateExpandBtnPos() } // 移除展开收缩按钮 function removeExpandBtn() { - if (this._expandBtn) { + if (this._expandBtn && this._showExpandBtn) { this._expandBtn.remove() + this._showExpandBtn = false } } @@ -119,7 +121,7 @@ function showExpandBtn() { // 隐藏展开收起按钮 function hideExpandBtn() { - if (this.mindMap.opt.alwaysShowExpandBtn) return + if (this.mindMap.opt.alwaysShowExpandBtn || this._isMouseenter) return // 非激活状态且展开状态鼠标移出才隐藏按钮 let { isActive, expand } = this.nodeData.data if (!isActive && expand) {