Feat: 1.配置开启收起显示节点数量；2.支持配置传入一个函数，允许控制收起时显示的内容；3.支持配置expandBtnSize展开收起按钮的尺寸；4.收起时的样式可以使用expandBtnStyle配置颜色，字体，边框颜色。

simple-mind-map/src/constants/defaultOptions.js

@@ -68,13 +68,21 @@ export const defaultOpt = {
   // 展开收起按钮的颜色
   expandBtnStyle: {
     color: '#808080',
-    fill: '#fff'
+    fill: '#fff',
+    fontSize: 13,
+    strokeColor: '#333333'
   },
   // 自定义展开收起按钮的图标
   expandBtnIcon: {
     open: '', // svg字符串
     close: ''
   },
+  // 处理收起节点数量
+  expandBtnNumHandler: num => {
+    return num
+  },
+  // 是否显示带数量的收起按钮
+  isShowExpandNum: true,
   // 是否只有当鼠标在画布内才响应快捷键事件
   enableShortcutOnlyWhenMouseInSvg: true,
   // 初始根节点的位置

simple-mind-map/src/core/render/node/Style.js

@@ -1,6 +1,15 @@
-import { tagColorList, nodeDataNoStylePropList } from '../../../constants/constant'
+import {
+  tagColorList,
+  nodeDataNoStylePropList
+} from '../../../constants/constant'
 const rootProp = ['paddingX', 'paddingY']
-const backgroundStyleProps = ['backgroundColor', 'backgroundImage', 'backgroundRepeat', 'backgroundPosition', 'backgroundSize']
+const backgroundStyleProps = [
+  'backgroundColor',
+  'backgroundImage',
+  'backgroundRepeat',
+  'backgroundPosition',
+  'backgroundSize'
+]
 
 //  样式类
 class Style {
@@ -10,12 +19,18 @@ class Style {
     if (!Style.cacheStyle) {
       Style.cacheStyle = {}
       let style = window.getComputedStyle(el)
-      backgroundStyleProps.forEach((prop) => {
+      backgroundStyleProps.forEach(prop => {
         Style.cacheStyle[prop] = style[prop]
       })
     }
     // 设置新样式
-    let { backgroundColor, backgroundImage, backgroundRepeat, backgroundPosition, backgroundSize } = themeConfig
+    let {
+      backgroundColor,
+      backgroundImage,
+      backgroundRepeat,
+      backgroundPosition,
+      backgroundSize
+    } = themeConfig
     el.style.backgroundColor = backgroundColor
     if (backgroundImage && backgroundImage !== 'none') {
       el.style.backgroundImage = `url(${backgroundImage})`
@@ -30,7 +45,7 @@ class Style {
   // 移除背景样式
   static removeBackgroundStyle(el) {
     if (!Style.cacheStyle) return
-    backgroundStyleProps.forEach((prop) => {
+    backgroundStyleProps.forEach(prop => {
       el.style[prop] = Style.cacheStyle[prop]
     })
     Style.cacheStyle = null
@@ -142,10 +157,10 @@ class Style {
 
   // 获取文本样式
   getTextFontStyle() {
-    return { 
-      italic: this.merge('fontStyle') === 'italic', 
-      bold: this.merge('fontWeight'), 
-      fontSize: this.merge('fontSize'), 
+    return {
+      italic: this.merge('fontStyle') === 'italic',
+      bold: this.merge('fontWeight'),
+      fontSize: this.merge('fontSize'),
       fontFamily: this.merge('fontFamily')
     }
   }
@@ -201,19 +216,26 @@ class Style {
 
   //  展开收起按钮
   iconBtn(node, node2, fillNode) {
-    let { color, fill } = this.ctx.mindMap.opt.expandBtnStyle || {
+    let { color, fill, fontSize, fontColor } = this.ctx.mindMap.opt
+      .expandBtnStyle || {
       color: '#808080',
-      fill: '#fff'
+      fill: '#fff',
+      fontSize: 12,
+      strokeColor: '#333333',
+      fontColor: '#333333'
     }
     node.fill({ color: color })
     node2.fill({ color: color })
     fillNode.fill({ color: fill })
+    if (this.ctx.mindMap.opt.isShowExpandNum) {
+      node.attr({ 'font-size': fontSize, 'font-color': fontColor })
+    }
   }
 
   // 是否设置了自定义的样式
   hasCustomStyle() {
     let res = false
-    Object.keys(this.ctx.nodeData.data).forEach((item) => {
+    Object.keys(this.ctx.nodeData.data).forEach(item => {
       if (!nodeDataNoStylePropList.includes(item)) {
         res = true
       }

simple-mind-map/src/core/render/node/nodeExpandBtn.js

@@ -3,28 +3,32 @@ import { SVG, Circle, G } from '@svgdotjs/svg.js'
 
 // 创建展开收起按钮的内容节点
 function createExpandNodeContent() {
-  // 实时更新收起节点数字
-  // if (this._openExpandNode) {
-  //   return
-  // }
-  let { close } = this.mindMap.opt.expandBtnIcon || {}
-  // 计算子节点数量
-  const count = this.sumNode(this.nodeData.children)
-  // 生成按钮
-  const node = SVG()
-    .text(count)
-    .font({ family: 'Inconsolata' })
-  node.attr('font-size', 14)
-  // 展开的节点
-  this._openExpandNode = node.size(this.expandBtnSize, this.expandBtnSize)
-  // 数字不同偏移量大小处理
-  if (count < 10) {
-    this._openExpandNode.x(6).y(-this.expandBtnSize / 2)
-  } else if (count >= 10 && count < 100) {
-    this._openExpandNode.x(1).y(-this.expandBtnSize / 2)
+  if (this._openExpandNode && !this.mindMap.opt.isShowExpandNum) {
+    return
+  }
+  let { close, open } = this.mindMap.opt.expandBtnIcon || {}
+  // 根据配置判断是否显示数量按钮
+  if (this.mindMap.opt.isShowExpandNum) {
+    // 计算子节点数量
+    let count = this.sumNode(this.nodeData.children)
+    count = this.mindMap.opt.expandBtnNumHandler(count)
+    // 展开的节点
+    this._openExpandNode = SVG()
+      .text(count)
+      .size(this.expandBtnSize, this.expandBtnSize)
+    // 文本垂直居中
+    this._openExpandNode.attr({
+      'text-anchor': 'middle',
+      'dominant-baseline': 'middle',
+      x: this.expandBtnSize / 2,
+      y: 2
+    })
   } else {
+    this._openExpandNode = SVG(open || btnsSvg.open).size(
+      this.expandBtnSize,
+      this.expandBtnSize
+    )
     this._openExpandNode.x(0).y(-this.expandBtnSize / 2)
-    node.attr('font-size', 12)
   }
   // 收起的节点
   this._closeExpandNode = SVG(close || btnsSvg.close).size(
@@ -43,8 +47,6 @@ function createExpandNodeContent() {
     this._fillExpandNode
   )
 }
-
-// 统计折叠的子节点数量
 function sumNode(data = []) {
   return data.reduce(
     (total, cur) => total + this.sumNode(cur.children || []),
@@ -71,9 +73,11 @@ function updateExpandBtnNode() {
 
   if (this._expandBtn) {
     // 如果是收起按钮加上边框
-    if (!expand) {
+    let opt = this.mindMap.opt
+    if (!expand && opt.isShowExpandNum) {
+      // 数字按钮添加边框
       this._fillExpandNode.stroke({
-        color: '#333333'
+        color: opt.expandBtnStyle.strokeColor
       })
     }
     this._expandBtn.add(this._fillExpandNode).add(node)