Feat：新增对编号插件的支持

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

@@ -326,7 +326,8 @@ export const nodeDataNoStylePropList = [
   'attachmentUrl',
   'attachmentName',
   'notation',
-  'outerFrame'
+  'outerFrame',
+  'number'
 ]
 
 // 错误类型

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

@@ -1,6 +1,6 @@
 import Style from './Style'
 import Shape from './Shape'
-import { G, Rect } from '@svgdotjs/svg.js'
+import { G, Rect, Text } from '@svgdotjs/svg.js'
 import nodeGeneralizationMethods from './nodeGeneralization'
 import nodeExpandBtnMethods from './nodeExpandBtn'
 import nodeCommandWrapsMethods from './nodeCommandWraps'
@@ -82,6 +82,7 @@ class Node {
     this.noteEl = null
     this.noteContentIsShow = false
     this._attachmentData = null
+    this._numberData = null
     this._prefixData = null
     this._postfixData = null
     this._expandBtn = null
@@ -105,6 +106,8 @@ class Node {
     // 概要节点的宽高
     this._generalizationNodeWidth = 0
     this._generalizationNodeHeight = 0
+    // 编号字符
+    this.number = opt.number || ''
     // 各种文字信息的间距
     this.textContentItemMargin = this.mindMap.opt.textContentMargin
     // 图片和文字节点的间距
@@ -215,6 +218,9 @@ class Node {
     this._tagData = this.createTagNode()
     this._noteData = this.createNoteNode()
     this._attachmentData = this.createAttachmentNode()
+    if (this.mindMap.number) {
+      this._numberData = this.mindMap.number.createNumberContent(this)
+    }
     this._prefixData = createNodePrefixContent
       ? createNodePrefixContent(this)
       : null
@@ -267,6 +273,11 @@ class Node {
       this._rectInfo.imgContentWidth = imgContentWidth = this._imgData.width
       this._rectInfo.imgContentHeight = imgContentHeight = this._imgData.height
     }
+    // 编号内容
+    if (this._numberData) {
+      textContentWidth += this._numberData.width
+      textContentHeight = Math.max(textContentHeight, this._numberData.height)
+    }
     // 自定义前置内容
     if (this._prefixData) {
       textContentWidth += this._prefixData.width
@@ -417,6 +428,14 @@ class Node {
     // 内容节点
     let textContentNested = new G()
     let textContentOffsetX = 0
+    // 编号内容
+    if (this._numberData) {
+      this._numberData.node
+        .x(textContentOffsetX)
+        .y((textContentHeight - this._numberData.height) / 2)
+      textContentNested.add(this._numberData.node)
+      textContentOffsetX += this._numberData.width + textContentItemMargin
+    }
     // 自定义前置内容
     if (this._prefixData) {
       const foreignObject = createForeignObjectNode({
@@ -1270,6 +1289,11 @@ class Node {
     })
     return newNode
   }
+
+  // 创建SVG文本节点
+  createSvgTextNode(text = '') {
+    return new Text().text(text)
+  }
 }
 
 export default Node

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

@@ -69,8 +69,37 @@ class Base {
     }
   }
 
+  // 获取节点编号信息
+  getNumberInfo({ parent, ancestors, layerIndex, index }) {
+    // 编号
+    const hasNumberPlugin = !!this.mindMap.number
+    const parentNumberStr =
+      hasNumberPlugin && parent && parent._node.number
+        ? parent._node.number
+        : ''
+    const newNumberStr = hasNumberPlugin
+      ? this.mindMap.number.getNodeNumberStr({
+          ancestors,
+          layerIndex,
+          num: index + 1,
+          parentNumberStr
+        })
+      : ''
+    return {
+      hasNumberPlugin,
+      newNumberStr
+    }
+  }
+
   //  创建节点实例
-  createNode(data, parent, isRoot, layerIndex) {
+  createNode(data, parent, isRoot, layerIndex, index, ancestors) {
+    // 编号
+    const { hasNumberPlugin, newNumberStr } = this.getNumberInfo({
+      parent,
+      ancestors,
+      layerIndex,
+      index
+    })
     // 创建节点
     const uid = data.data.uid
     let newNode = null
@@ -90,11 +119,17 @@ class Base {
       }
       this.cacheNode(data._node.uid, newNode)
       this.checkIsLayoutChangeRerenderExpandBtnPlaceholderRect(newNode)
+      // 判断编号是否改变
+      let isNumberChange = false
+      if (hasNumberPlugin) {
+        isNumberChange = this.mindMap.number.updateNumber(newNode, newNumberStr)
+      }
       // 主题或主题配置改变了、节点层级改变了，需要重新渲染节点文本等情况需要重新计算节点大小和布局
       if (
         this.checkIsNeedResizeSources() ||
         isLayerTypeChange ||
-        newNode.getData('resetRichText')
+        newNode.getData('resetRichText') ||
+        isNumberChange
       ) {
         newNode.getSize()
         newNode.needLayout = true
@@ -129,11 +164,17 @@ class Base {
       const isResizeSource = this.checkIsNeedResizeSources()
       // 主题或主题配置改变了、节点层级改变了，需要重新渲染节点文本，节点数据改变了等情况需要重新计算节点大小和布局
       const isNodeDataChange = lastData !== JSON.stringify(data.data)
+      // 判断编号是否改变
+      let isNumberChange = false
+      if (hasNumberPlugin) {
+        isNumberChange = this.mindMap.number.updateNumber(newNode, newNumberStr)
+      }
       if (
         isResizeSource ||
         isNodeDataChange ||
         isLayerTypeChange ||
-        newNode.getData('resetRichText')
+        newNode.getData('resetRichText') ||
+        isNumberChange
       ) {
         newNode.getSize()
         newNode.needLayout = true
@@ -149,7 +190,8 @@ class Base {
         draw: this.draw,
         layerIndex,
         isRoot,
-        parent: !isRoot ? parent._node : null
+        parent: !isRoot ? parent._node : null,
+        number: newNumberStr
       })
       // uid保存到数据上，为了节点复用
       data.data.uid = newUid