Feat：支持添加库后置内容

simple-mind-map/index.js

@@ -58,7 +58,7 @@ class MindMap {
     this.cssEl = null
     this.cssTextMap = {} // 该样式在实例化时会动态添加到页面，同时导出为svg时也会添加到svg源码中
 
-    // 节点前置内容列表
+    // 节点前置/后置内容列表
     /*
       {
         name: '',// 一个唯一的类型标识
@@ -77,6 +77,7 @@ class MindMap {
       }
     */
     this.nodeInnerPrefixList = []
+    this.nodeInnerPostfixList = []
 
     // 编辑节点的类名列表，快捷键响应会检查事件目标是否是body或该列表中的元素，是的话才会响应
     // 该检查可以通过customCheckEnableShortcut选项来覆盖

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

@@ -234,6 +234,9 @@ class MindMapNode {
       'postfix',
       ...this.mindMap.nodeInnerPrefixList.map(item => {
         return item.name
+      }),
+      ...this.mindMap.nodeInnerPostfixList.map(item => {
+        return item.name
       })
     ]
     const createTypes = {}
@@ -291,6 +294,11 @@ class MindMapNode {
         addXmlns(this._postfixData.el)
       }
     }
+    this.mindMap.nodeInnerPostfixList.forEach(item => {
+      if (createTypes[item.name]) {
+        this[`_${item.name}Data`] = item.createContent(this)
+      }
+    })
     if (
       addCustomContentToNode &&
       typeof addCustomContentToNode.create === 'function'

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

@@ -127,6 +127,15 @@ function getNodeRect() {
     textContentHeight = Math.max(textContentHeight, this._postfixData.height)
     spaceCount++
   }
+  // 库后置内容
+  this.mindMap.nodeInnerPostfixList.forEach(item => {
+    const itemData = this[`_${item.name}Data`]
+    if (itemData) {
+      textContentWidth += itemData.width
+      textContentHeight = Math.max(textContentHeight, itemData.height)
+      spaceCount++
+    }
+  })
   textContentWidth += (spaceCount - 1) * textContentMargin
   // 文字内容部分的尺寸
   if (tagIsBottom && textContentWidth > 0 && tagContentHeight > 0) {
@@ -401,8 +410,19 @@ function layout() {
       .x(textContentOffsetX)
       .y((textContentHeight - this._postfixData.height) / 2)
     textContentNested.add(foreignObject)
-    textContentOffsetX += this._postfixData.width
+    textContentOffsetX += this._postfixData.width + textContentMargin
   }
+  // 库后置内容
+  this.mindMap.nodeInnerPostfixList.forEach(item => {
+    const itemData = this[`_${item.name}Data`]
+    if (itemData) {
+      itemData.node
+        .x(textContentOffsetX)
+        .y((textContentHeight - itemData.height) / 2)
+      textContentNested.add(itemData.node)
+      textContentOffsetX += itemData.width + textContentMargin
+    }
+  })
   this.group.add(textContentNested)
   // 文字内容整体
   const { width: bboxWidth, height: bboxHeight } = textContentNested.bbox()

simple-mind-map/src/layouts/Base.js

@@ -81,6 +81,31 @@ class Base {
     return lastData !== JSON.stringify(curData)
   }
 
+  // 检查库前置或后置内容是否改变了
+  checkNodeFixChange(newNode, nodeInnerPrefixData, nodeInnerPostfixData) {
+    // 库前置内容是否改变了
+    let isNodeInnerPrefixChange = false
+    this.mindMap.nodeInnerPrefixList.forEach(item => {
+      if (item.updateNodeData) {
+        const isChange = item.updateNodeData(newNode, nodeInnerPrefixData)
+        if (isChange) {
+          isNodeInnerPrefixChange = isChange
+        }
+      }
+    })
+    // 库后置内容是否改变了
+    let isNodeInnerPostfixChange = false
+    this.mindMap.nodeInnerPostfixList.forEach(item => {
+      if (item.updateNodeData) {
+        const isChange = item.updateNodeData(newNode, nodeInnerPostfixData)
+        if (isChange) {
+          isNodeInnerPostfixChange = isChange
+        }
+      }
+    })
+    return isNodeInnerPrefixChange || isNodeInnerPostfixChange
+  }
+
   //  创建节点实例
   createNode(data, parent, isRoot, layerIndex, index, ancestors) {
     // 创建节点
@@ -98,6 +123,20 @@ class Base {
         nodeInnerPrefixData[key] = value
       }
     })
+    // 库后置内容数据
+    const nodeInnerPostfixData = {}
+    this.mindMap.nodeInnerPostfixList.forEach(item => {
+      if (item.createNodeData) {
+        const [key, value] = item.createNodeData({
+          data,
+          parent,
+          ancestors,
+          layerIndex,
+          index
+        })
+        nodeInnerPostfixData[key] = value
+      }
+    })
     const uid = data.data.uid
     let newNode = null
     // 数据上保存了节点引用，那么直接复用节点
@@ -117,16 +156,12 @@ class Base {
       }
       this.cacheNode(data._node.uid, newNode)
       this.checkIsLayoutChangeRerenderExpandBtnPlaceholderRect(newNode)
-      // 库前置内容是否改变了
+      // 库前置或后置内容是否改变了
-      let isNodeInnerPrefixChange = false
+      const isNodeInnerFixChange = this.checkNodeFixChange(
-      this.mindMap.nodeInnerPrefixList.forEach(item => {
+        newNode,
-        if (item.updateNodeData) {
+        nodeInnerPrefixData,
-          const isChange = item.updateNodeData(newNode, nodeInnerPrefixData)
+        nodeInnerPostfixData
-          if (isChange) {
+      )
-            isNodeInnerPrefixChange = isChange
-          }
-        }
-      })
       // 主题或主题配置改变了
       const isResizeSource = this.checkIsNeedResizeSources()
       // 节点数据改变了
@@ -141,7 +176,7 @@ class Base {
         isLayerTypeChange ||
         newNode.getData('resetRichText') ||
         newNode.getData('needUpdate') ||
-        isNodeInnerPrefixChange
+        isNodeInnerFixChange
       ) {
         newNode.getSize()
         newNode.needLayout = true
@@ -178,16 +213,12 @@ class Base {
       const isResizeSource = this.checkIsNeedResizeSources()
       // 点数据改变了
       const isNodeDataChange = this.checkIsNodeDataChange(lastData, data.data)
-      // 库前置内容是否改变了
+      // 库前置或后置内容是否改变了
-      let isNodeInnerPrefixChange = false
+      const isNodeInnerFixChange = this.checkNodeFixChange(
-      this.mindMap.nodeInnerPrefixList.forEach(item => {
+        newNode,
-        if (item.updateNodeData) {
+        nodeInnerPrefixData,
-          const isChange = item.updateNodeData(newNode, nodeInnerPrefixData)
+        nodeInnerPostfixData
-          if (isChange) {
+      )
-            isNodeInnerPrefixChange = isChange
-          }
-        }
-      })
       // 重新计算节点大小和布局
       if (
         isResizeSource ||
@@ -195,7 +226,7 @@ class Base {
         isLayerTypeChange ||
         newNode.getData('resetRichText') ||
         newNode.getData('needUpdate') ||
-        isNodeInnerPrefixChange
+        isNodeInnerFixChange
       ) {
         newNode.getSize()
         newNode.needLayout = true