Feat：支持不显示展开收起按钮的实例化选项

2026-02-17 22:08:25 +08:00 · 2024-08-12 10:36:05 +08:00
parent d82cedcbdd
commit 1cd4705ad8
12 changed files with 61 additions and 39 deletions
--- a/simple-mind-map/src/constants/defaultOptions.js
+++ b/simple-mind-map/src/constants/defaultOptions.js
@@ -86,6 +86,8 @@ export const defaultOpt = {
  maxHistoryCount: 500,
  // 是否一直显示节点的展开收起按钮，默认为鼠标移上去和激活时才显示
  alwaysShowExpandBtn: false,
+  // 不显示展开收起按钮，优先级比alwaysShowExpandBtn配置高
+  notShowExpandBtn: false,
  // 扩展节点可插入的图标
  iconList: [
    // {
@@ -232,9 +234,9 @@ export const defaultOpt = {
  openPerformance: false,
  // 性能优化模式配置
  performanceConfig: {
-    time: 250,// 当视图改变后多久刷新一次节点，单位：ms，
-    padding: 100,// 超出画布四周指定范围内依旧渲染节点
-    removeNodeWhenOutCanvas: true,// 节点移除画布可视区域后从画布删除
+    time: 250, // 当视图改变后多久刷新一次节点，单位：ms，
+    padding: 100, // 超出画布四周指定范围内依旧渲染节点
+    removeNodeWhenOutCanvas: true // 节点移除画布可视区域后从画布删除
  },

  // 【Select插件】
--- a/simple-mind-map/src/core/render/node/Node.js
+++ b/simple-mind-map/src/core/render/node/Node.js
@@ -688,25 +688,28 @@ class Node {
      return
    }
    this.updateNodeActiveClass()
-    let { alwaysShowExpandBtn } = this.mindMap.opt
-    const childrenLength = this.nodeData.children.length
-    if (alwaysShowExpandBtn) {
-      // 需要移除展开收缩按钮
-      if (this._expandBtn && childrenLength <= 0) {
-        this.removeExpandBtn()
+    const { alwaysShowExpandBtn, notShowExpandBtn } = this.mindMap.opt
+    // 不显示展开收起按钮则不需要处理
+    if (!notShowExpandBtn) {
+      const childrenLength = this.nodeData.children.length
+      if (alwaysShowExpandBtn) {
+        // 需要移除展开收缩按钮
+        if (this._expandBtn && childrenLength <= 0) {
+          this.removeExpandBtn()
+        } else {
+          // 更新展开收起按钮
+          this.renderExpandBtn()
+        }
      } else {
-        // 更新展开收起按钮
-        this.renderExpandBtn()
-      }
-    } else {
-      let { isActive, expand } = this.getData()
-      // 展开状态且非激活状态，且当前鼠标不在它上面，才隐藏
-      if (childrenLength <= 0) {
-        this.removeExpandBtn()
-      } else if (expand && !isActive && !this._isMouseenter) {
-        this.hideExpandBtn()
-      } else {
-        this.showExpandBtn()
+        let { isActive, expand } = this.getData()
+        // 展开状态且非激活状态，且当前鼠标不在它上面，才隐藏
+        if (childrenLength <= 0) {
+          this.removeExpandBtn()
+        } else if (expand && !isActive && !this._isMouseenter) {
+          this.hideExpandBtn()
+        } else {
+          this.showExpandBtn()
+        }
      }
    }
    // 更新概要
--- a/simple-mind-map/src/core/render/node/nodeExpandBtn.js
+++ b/simple-mind-map/src/core/render/node/nodeExpandBtn.js
@@ -148,7 +148,8 @@ function removeExpandBtn() {

 // 显示展开收起按钮
 function showExpandBtn() {
-  if (this.mindMap.opt.alwaysShowExpandBtn) return
+  const { alwaysShowExpandBtn, notShowExpandBtn } = this.mindMap.opt
+  if (alwaysShowExpandBtn || notShowExpandBtn) return
  setTimeout(() => {
    this.renderExpandBtn()
  }, 0)
@@ -156,7 +157,8 @@ function showExpandBtn() {

 // 隐藏展开收起按钮
 function hideExpandBtn() {
-  if (this.mindMap.opt.alwaysShowExpandBtn || this._isMouseenter) return
+  const { alwaysShowExpandBtn, notShowExpandBtn } = this.mindMap.opt
+  if (alwaysShowExpandBtn || this._isMouseenter || notShowExpandBtn) return
  // 非激活状态且展开状态鼠标移出才隐藏按钮
  let { isActive, expand } = this.getData()
  if (!isActive && expand) {
--- a/simple-mind-map/src/core/render/node/nodeExpandBtnPlaceholderRect.js
+++ b/simple-mind-map/src/core/render/node/nodeExpandBtnPlaceholderRect.js
@@ -10,8 +10,9 @@ function renderExpandBtnPlaceholderRect() {
  ) {
    return
  }
-  // 默认显示展开按钮的情况下也不需要渲染
-  if (!this.mindMap.opt.alwaysShowExpandBtn) {
+  // 默认显示展开按钮的情况下或不显示展开收起按钮的情况下不需要渲染
+  const { alwaysShowExpandBtn, notShowExpandBtn } = this.mindMap.opt
+  if (!alwaysShowExpandBtn && !notShowExpandBtn) {
    let { width, height } = this
    if (!this._unVisibleRectRegionNode) {
      this._unVisibleRectRegionNode = new Rect()
--- a/simple-mind-map/src/layouts/CatalogOrganization.js
+++ b/simple-mind-map/src/layouts/CatalogOrganization.js
@@ -204,7 +204,8 @@ class CatalogOrganization extends Base {
      return []
    }
    let { left, top, width, height, expandBtnSize } = node
-    if (!this.mindMap.opt.alwaysShowExpandBtn) {
+    const { alwaysShowExpandBtn, notShowExpandBtn } = this.mindMap.opt
+    if (!alwaysShowExpandBtn || notShowExpandBtn) {
      expandBtnSize = 0
    }
    let len = node.children.length
--- a/simple-mind-map/src/layouts/Fishbone.js
+++ b/simple-mind-map/src/layouts/Fishbone.js
@@ -233,7 +233,8 @@ class Fishbone extends Base {
      return []
    }
    let { top, height, expandBtnSize } = node
-    if (!this.mindMap.opt.alwaysShowExpandBtn) {
+    const { alwaysShowExpandBtn, notShowExpandBtn } = this.mindMap.opt
+    if (!alwaysShowExpandBtn || notShowExpandBtn) {
      expandBtnSize = 0
    }
    let len = node.children.length
--- a/simple-mind-map/src/layouts/LogicalStructure.js
+++ b/simple-mind-map/src/layouts/LogicalStructure.js
@@ -174,7 +174,8 @@ class LogicalStructure extends Base {
      return []
    }
    let { left, top, width, height, expandBtnSize } = node
-    if (!this.mindMap.opt.alwaysShowExpandBtn) {
+    const { alwaysShowExpandBtn, notShowExpandBtn } = this.mindMap.opt
+    if (!alwaysShowExpandBtn || notShowExpandBtn) {
      expandBtnSize = 0
    }
    let marginX = this.getMarginX(node.layerIndex + 1)
@@ -215,7 +216,8 @@ class LogicalStructure extends Base {
      return []
    }
    let { left, top, width, height, expandBtnSize } = node
-    if (!this.mindMap.opt.alwaysShowExpandBtn) {
+    const { alwaysShowExpandBtn, notShowExpandBtn } = this.mindMap.opt
+    if (!alwaysShowExpandBtn || notShowExpandBtn) {
      expandBtnSize = 0
    }
    const { nodeUseLineStyle } = this.mindMap.themeConfig
@@ -246,7 +248,8 @@ class LogicalStructure extends Base {
      return []
    }
    let { left, top, width, height, expandBtnSize } = node
-    if (!this.mindMap.opt.alwaysShowExpandBtn) {
+    const { alwaysShowExpandBtn, notShowExpandBtn } = this.mindMap.opt
+    if (!alwaysShowExpandBtn || notShowExpandBtn) {
      expandBtnSize = 0
    }
    const {
--- a/simple-mind-map/src/layouts/MindMap.js
+++ b/simple-mind-map/src/layouts/MindMap.js
@@ -213,7 +213,8 @@ class MindMap extends Base {
      return []
    }
    let { left, top, width, height, expandBtnSize } = node
-    if (!this.mindMap.opt.alwaysShowExpandBtn) {
+    const { alwaysShowExpandBtn, notShowExpandBtn } = this.mindMap.opt
+    if (!alwaysShowExpandBtn || notShowExpandBtn) {
      expandBtnSize = 0
    }
    let marginX = this.getMarginX(node.layerIndex + 1)
@@ -256,7 +257,8 @@ class MindMap extends Base {
      return []
    }
    let { left, top, width, height, expandBtnSize } = node
-    if (!this.mindMap.opt.alwaysShowExpandBtn) {
+    const { alwaysShowExpandBtn, notShowExpandBtn } = this.mindMap.opt
+    if (!alwaysShowExpandBtn || notShowExpandBtn) {
      expandBtnSize = 0
    }
    const { nodeUseLineStyle } = this.mindMap.themeConfig
@@ -296,7 +298,8 @@ class MindMap extends Base {
      return []
    }
    let { left, top, width, height, expandBtnSize } = node
-    if (!this.mindMap.opt.alwaysShowExpandBtn) {
+    const { alwaysShowExpandBtn, notShowExpandBtn } = this.mindMap.opt
+    if (!alwaysShowExpandBtn || notShowExpandBtn) {
      expandBtnSize = 0
    }
    const {
--- a/simple-mind-map/src/layouts/OrganizationStructure.js
+++ b/simple-mind-map/src/layouts/OrganizationStructure.js
@@ -182,7 +182,8 @@ class OrganizationStructure extends Base {
      return []
    }
    let { left, top, width, height, expandBtnSize, isRoot } = node
-    if (!this.mindMap.opt.alwaysShowExpandBtn) {
+    const { alwaysShowExpandBtn, notShowExpandBtn } = this.mindMap.opt
+    if (!alwaysShowExpandBtn || notShowExpandBtn) {
      expandBtnSize = 0
    }
    let x1 = left + width / 2
--- a/simple-mind-map/src/layouts/Timeline.js
+++ b/simple-mind-map/src/layouts/Timeline.js
@@ -232,7 +232,8 @@ class Timeline extends Base {
      return []
    }
    let { left, top, width, height, expandBtnSize } = node
-    if (!this.mindMap.opt.alwaysShowExpandBtn) {
+    const { alwaysShowExpandBtn, notShowExpandBtn } = this.mindMap.opt
+    if (!alwaysShowExpandBtn || notShowExpandBtn) {
      expandBtnSize = 0
    }
    let len = node.children.length
--- a/simple-mind-map/src/layouts/VerticalTimeline.js
+++ b/simple-mind-map/src/layouts/VerticalTimeline.js
@@ -234,7 +234,8 @@ class VerticalTimeline extends Base {
      return []
    }
    let { expandBtnSize } = node
-    if (!this.mindMap.opt.alwaysShowExpandBtn) {
+    const { alwaysShowExpandBtn, notShowExpandBtn } = this.mindMap.opt
+    if (!alwaysShowExpandBtn || notShowExpandBtn) {
      expandBtnSize = 0
    }
    if (node.isRoot) {
@@ -293,7 +294,8 @@ class VerticalTimeline extends Base {
      return []
    }
    let { left, top, width, height, expandBtnSize } = node
-    if (!this.mindMap.opt.alwaysShowExpandBtn) {
+    const { alwaysShowExpandBtn, notShowExpandBtn } = this.mindMap.opt
+    if (!alwaysShowExpandBtn || notShowExpandBtn) {
      expandBtnSize = 0
    }
    node.children.forEach((item, index) => {
@@ -331,7 +333,8 @@ class VerticalTimeline extends Base {
      return []
    }
    let { left, top, width, height, expandBtnSize } = node
-    if (!this.mindMap.opt.alwaysShowExpandBtn) {
+    const { alwaysShowExpandBtn, notShowExpandBtn } = this.mindMap.opt
+    if (!alwaysShowExpandBtn || notShowExpandBtn) {
      expandBtnSize = 0
    }
    node.children.forEach((item, index) => {
--- a/simple-mind-map/src/plugins/Export.js
+++ b/simple-mind-map/src/plugins/Export.js
@@ -288,7 +288,8 @@ class Export {
  handleNodeExport(node) {
    if (node && node.getData('isActive')) {
      node.deactivate()
-      if (!this.mindMap.opt.alwaysShowExpandBtn && node.getData('expand')) {
+      const { alwaysShowExpandBtn, notShowExpandBtn } = this.mindMap.opt
+      if (!alwaysShowExpandBtn && !notShowExpandBtn && node.getData('expand')) {
        node.removeExpandBtn()
      }
    }