From 331f0bdf976b963cdfe9b95f3f945d785ddece0f Mon Sep 17 00:00:00 2001
From: wanglin2 <1013335014@qq.com>
Date: Thu, 30 Mar 2023 16:12:46 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96=E5=B1=95=E5=BC=80=E6=94=B6?=
 =?UTF-8?q?=E8=B5=B7=E6=8C=89=E9=92=AE=E7=9A=84=E9=80=BB=E8=BE=91?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 simple-mind-map/src/Node.js                | 12 ++---
 simple-mind-map/src/Style.js               |  5 +-
 simple-mind-map/src/utils/nodeExpandBtn.js | 53 ++++++++++++++++------
 3 files changed, 48 insertions(+), 22 deletions(-)

diff --git a/simple-mind-map/src/Node.js b/simple-mind-map/src/Node.js
index b1e4aecc..206e95d7 100644
--- a/simple-mind-map/src/Node.js
+++ b/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
   }
 
diff --git a/simple-mind-map/src/Style.js b/simple-mind-map/src/Style.js
index 8d5f81c2..35477d86 100644
--- a/simple-mind-map/src/Style.js
+++ b/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' })
   }
 }
diff --git a/simple-mind-map/src/utils/nodeExpandBtn.js b/simple-mind-map/src/utils/nodeExpandBtn.js
index e9f5ef06..3654fbdb 100644
--- a/simple-mind-map/src/utils/nodeExpandBtn.js
+++ b/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)
-  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)
+  if (this._expandBtn) this._expandBtn.add(this._fillExpandNode).add(node)
 }
 
 //  更新展开收缩按钮位置
@@ -77,8 +101,9 @@ function removeExpandBtn() {
 }
 
 export default {
-    updateExpandBtnNode,
-    updateExpandBtnPos,
-    renderExpandBtn,
-    removeExpandBtn
-}
\ No newline at end of file
+  createExpandNodeContent,
+  updateExpandBtnNode,
+  updateExpandBtnPos,
+  renderExpandBtn,
+  removeExpandBtn
+}