From df1aed7e0413edc0236db8cd674c82693c9c22dc Mon Sep 17 00:00:00 2001
From: wanglin2 <1013335014@qq.com>
Date: Fri, 18 Aug 2023 10:09:23 +0800
Subject: [PATCH] =?UTF-8?q?Fix=EF=BC=9A=E4=BC=98=E5=8C=96=E5=B1=95?=
 =?UTF-8?q?=E5=BC=80=E6=94=B6=E8=B5=B7=E6=8C=89=E9=92=AE=E7=9A=84=E5=8D=A0?=
 =?UTF-8?q?=E4=BD=8D=E5=85=83=E7=B4=A0=EF=BC=9A1.=E6=B2=A1=E6=9C=89?=
 =?UTF-8?q?=E5=AD=90=E8=8A=82=E7=82=B9=E7=9A=84=E8=8A=82=E7=82=B9=E4=B8=8D?=
 =?UTF-8?q?=E6=B8=B2=E6=9F=93=E8=AF=A5=E5=85=83=E7=B4=A0=EF=BC=9B2.?=
 =?UTF-8?q?=E6=A0=B9=E6=8D=AE=E6=98=AF=E5=90=A6=E5=AD=98=E5=9C=A8=E5=AD=90?=
 =?UTF-8?q?=E8=8A=82=E7=82=B9=E5=8A=A8=E6=80=81=E6=9B=B4=E6=96=B0=E8=AF=A5?=
 =?UTF-8?q?=E5=85=83=E7=B4=A0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 simple-mind-map/src/core/render/node/Node.js  | 33 ++--------
 .../node/nodeExpandBtnPlaceholderRect.js      | 66 +++++++++++++++++++
 2 files changed, 73 insertions(+), 26 deletions(-)
 create mode 100644 simple-mind-map/src/core/render/node/nodeExpandBtnPlaceholderRect.js

diff --git a/simple-mind-map/src/core/render/node/Node.js b/simple-mind-map/src/core/render/node/Node.js
index e614e36b..322d2cd6 100644
--- a/simple-mind-map/src/core/render/node/Node.js
+++ b/simple-mind-map/src/core/render/node/Node.js
@@ -1,10 +1,11 @@
 import Style from './Style'
 import Shape from './Shape'
-import { G, Rect, ForeignObject, SVG } from '@svgdotjs/svg.js'
+import { G, ForeignObject, SVG } from '@svgdotjs/svg.js'
 import nodeGeneralizationMethods from './nodeGeneralization'
 import nodeExpandBtnMethods from './nodeExpandBtn'
 import nodeCommandWrapsMethods from './nodeCommandWraps'
 import nodeCreateContentsMethods from './nodeCreateContents'
+import nodeExpandBtnPlaceholderRectMethods from './nodeExpandBtnPlaceholderRect'
 import { CONSTANTS } from '../../../constants/constant'
 
 //  节点类
@@ -107,6 +108,10 @@ class Node {
     Object.keys(nodeExpandBtnMethods).forEach(item => {
       this[item] = nodeExpandBtnMethods[item].bind(this)
     })
+    // 展开收起按钮占位元素相关方法
+    Object.keys(nodeExpandBtnPlaceholderRectMethods).forEach(item => {
+      this[item] = nodeExpandBtnPlaceholderRectMethods[item].bind(this)
+    })
     // 命令的相关方法
     Object.keys(nodeCommandWrapsMethods).forEach(item => {
       this[item] = nodeCommandWrapsMethods[item].bind(this)
@@ -358,27 +363,6 @@ class Node {
     this.group.add(textContentNested)
   }
 
-  // 渲染展开收起按钮的隐藏占位元素
-  renderExpandBtnPlaceholderRect() {
-    if (!this.mindMap.opt.alwaysShowExpandBtn) {
-      let { width, height } = this
-      if (!this._unVisibleRectRegionNode) {
-        this._unVisibleRectRegionNode = new Rect()
-        this._unVisibleRectRegionNode.fill({
-          color: 'transparent'
-        })
-      }
-      this.group.add(this._unVisibleRectRegionNode)
-      this.renderer.layout.renderExpandBtnRect(
-        this._unVisibleRectRegionNode,
-        this.expandBtnSize,
-        width,
-        height,
-        this
-      )
-    }
-  }
-
   // 给节点绑定事件
   bindGroupEvent() {
     // 单击事件，选中节点
@@ -588,10 +572,7 @@ class Node {
         this.needLayout = false
         this.layout()
       }
-      if (this.needRerenderExpandBtnPlaceholderRect) {
-        this.needRerenderExpandBtnPlaceholderRect = false
-        this.renderExpandBtnPlaceholderRect()
-      }
+      this.updateExpandBtnPlaceholderRect()
       this.update()
     }
     // 子节点
diff --git a/simple-mind-map/src/core/render/node/nodeExpandBtnPlaceholderRect.js b/simple-mind-map/src/core/render/node/nodeExpandBtnPlaceholderRect.js
new file mode 100644
index 00000000..23d51ff4
--- /dev/null
+++ b/simple-mind-map/src/core/render/node/nodeExpandBtnPlaceholderRect.js
@@ -0,0 +1,66 @@
+import { Rect } from '@svgdotjs/svg.js'
+
+// 渲染展开收起按钮的隐藏占位元素
+function renderExpandBtnPlaceholderRect() {
+  // 根节点或没有子节点不需要渲染
+  if (
+    !this.nodeData.children ||
+    this.nodeData.children.length <= 0 ||
+    this.isRoot
+  ) {
+    return
+  }
+  // 默认显示展开按钮的情况下也不需要渲染
+  if (!this.mindMap.opt.alwaysShowExpandBtn) {
+    let { width, height } = this
+    if (!this._unVisibleRectRegionNode) {
+      this._unVisibleRectRegionNode = new Rect()
+      this._unVisibleRectRegionNode.fill({
+        color: 'transparent'
+      })
+    }
+    this.group.add(this._unVisibleRectRegionNode)
+    this.renderer.layout.renderExpandBtnRect(
+      this._unVisibleRectRegionNode,
+      this.expandBtnSize,
+      width,
+      height,
+      this
+    )
+  }
+}
+
+// 删除展开收起按钮的隐藏占位元素
+function clearExpandBtnPlaceholderRect() {
+  if (!this._unVisibleRectRegionNode) {
+    return
+  }
+  this._unVisibleRectRegionNode.remove()
+  this._unVisibleRectRegionNode = null
+}
+
+// 更新展开收起按钮的隐藏占位元素
+function updateExpandBtnPlaceholderRect() {
+  // 布局改变需要重新渲染
+  if (this.needRerenderExpandBtnPlaceholderRect) {
+    this.needRerenderExpandBtnPlaceholderRect = false
+    this.renderExpandBtnPlaceholderRect()
+  }
+  // 没有子节点到有子节点需要渲染
+  if (this.nodeData.children && this.nodeData.children.length > 0) {
+    if (!this._unVisibleRectRegionNode) {
+      this.renderExpandBtnPlaceholderRect()
+    }
+  } else {
+    // 有子节点到没子节点，需要删除
+    if (this._unVisibleRectRegionNode) {
+      this.clearExpandBtnPlaceholderRect()
+    }
+  }
+}
+
+export default {
+  renderExpandBtnPlaceholderRect,
+  clearExpandBtnPlaceholderRect,
+  updateExpandBtnPlaceholderRect
+}