优化展开收起按钮的逻辑

simple-mind-map/src/Node.js

@@ -68,6 +68,9 @@ class Node {
     this._noteData = null
     this.noteEl = null
     this._expandBtn = null
+    this._openExpandNode = null
+    this._closeExpandNode = null
+    this._fillExpandNode = null
     this._lines = []
     this._generalizationLine = null
     this._generalizationNode = null
@@ -242,8 +245,6 @@ class Node {
     let { width, textContentItemMargin } = this
     let { paddingY } = this.getPaddingVale()
     paddingY += this.shapePadding.paddingY
-    // 展开收起按钮
-    this.renderExpandBtn()
     // 节点形状
     this.shapeNode = this.shapeInstance.createShape()
     this.group.add(this.shapeNode)
@@ -416,12 +417,9 @@ class Node {
     // 需要移除展开收缩按钮
     if (this._expandBtn && this.nodeData.children.length <= 0) {
       this.removeExpandBtn()
-    } else if (!this._expandBtn && this.nodeData.children.length > 0) {
-      // 需要添加展开收缩按钮
-      this.renderExpandBtn()
     } else {
       // 更新展开收起按钮
-      this.updateExpandBtnPos()
+      this.renderExpandBtn()
     }
     // 更新概要
     this.renderGeneralization()
@@ -530,6 +528,8 @@ class Node {
   destroy() {
     if (!this.group) return
     this.group.remove()
+    this.removeGeneralization()
+    this.removeLine()
     this.group = null
   }
 

simple-mind-map/src/Style.js

@@ -168,9 +168,10 @@ class Style {
       .fill({ color: 'none' })
   }
 
-  //  按钮
+  //  展开收起按钮
-  iconBtn(node, fillNode) {
+  iconBtn(node, node2, fillNode) {
     node.fill({ color: '#808080' })
+    node2.fill({ color: '#808080' })
     fillNode.fill({ color: '#fff' })
   }
 }

simple-mind-map/src/utils/nodeExpandBtn.js

@@ -1,23 +1,47 @@
 import btnsSvg from '../svg/btns'
 import { SVG, Circle, G } from '@svgdotjs/svg.js'
 
+// 创建展开收起按钮的内容节点
+function createExpandNodeContent() {
+  if (this._openExpandNode) {
+    return
+  }
+  // 展开的节点
+  this._openExpandNode = SVG(btnsSvg.open).size(
+    this.expandBtnSize,
+    this.expandBtnSize
+  )
+  this._openExpandNode.x(0).y(-this.expandBtnSize / 2)
+  // 收起的节点
+  this._closeExpandNode = SVG(btnsSvg.close).size(
+    this.expandBtnSize,
+    this.expandBtnSize
+  )
+  this._closeExpandNode.x(0).y(-this.expandBtnSize / 2)
+  // 填充节点
+  this._fillExpandNode = new Circle().size(this.expandBtnSize)
+  this._fillExpandNode.x(0).y(-this.expandBtnSize / 2)
+  // 设置样式
+  this.style.iconBtn(
+    this._openExpandNode,
+    this._closeExpandNode,
+    this._fillExpandNode
+  )
+}
+
 //  创建或更新展开收缩按钮内容
 function updateExpandBtnNode() {
   if (this._expandBtn) {
     this._expandBtn.clear()
   }
-  let iconSvg
+  this.createExpandNodeContent()
+  let node
   if (this.nodeData.data.expand === false) {
-    iconSvg = btnsSvg.open
+    node = this._openExpandNode
   } else {
-    iconSvg = btnsSvg.close
+    node = this._closeExpandNode
   }
-  let node = SVG(iconSvg).size(this.expandBtnSize, this.expandBtnSize)
+  if (this._expandBtn) this._expandBtn.add(this._fillExpandNode).add(node)
-  let fillNode = new Circle().size(this.expandBtnSize)
-  node.x(0).y(-this.expandBtnSize / 2)
-  fillNode.x(0).y(-this.expandBtnSize / 2)
-  this.style.iconBtn(node, fillNode)
-  if (this._expandBtn) this._expandBtn.add(fillNode).add(node)
 }
 
 //  更新展开收缩按钮位置
@@ -77,8 +101,9 @@ function removeExpandBtn() {
 }
 
 export default {
-    updateExpandBtnNode,
+  createExpandNodeContent,
-    updateExpandBtnPos,
+  updateExpandBtnNode,
-    renderExpandBtn,
+  updateExpandBtnPos,
-    removeExpandBtn
+  renderExpandBtn,
-}
+  removeExpandBtn
+}