Fix:1.修复内部数据深拷贝位置不正确的问题;2.修复富文本节点换行不生效的问题;3.修复切换主题等场景时节点换行会丢失的问题;

simple-mind-map/index.js

@@ -81,6 +81,8 @@ class MindMap {
 
   //  配置参数处理
   handleOpt(opt) {
+    // 深拷贝一份节点数据
+    opt.data = simpleDeepClone(opt.data || {})
     // 检查布局配置
     if (!layoutValueList.includes(opt.layout)) {
       opt.layout = CONSTANTS.LAYOUT.LOGICAL_STRUCTURE

simple-mind-map/src/core/render/Render.js

@@ -48,7 +48,7 @@ class Render {
     this.themeConfig = this.mindMap.themeConfig
     this.draw = this.mindMap.draw
     // 渲染树，操作过程中修改的都是这里的数据
-    this.renderTree = merge({}, simpleDeepClone(this.mindMap.opt.data) || {})
+    this.renderTree = merge({},this.mindMap.opt.data || {})
     // 是否重新渲染
     this.reRender = false
     // 是否正在渲染中
@@ -972,11 +972,11 @@ class Render {
   }
 
   //  设置节点文本
-  setNodeText(node, text, richText) {
+  setNodeText(node, text, richText, resetRichText) {
     this.setNodeDataRender(node, {
       text,
       richText,
-      resetRichText: richText
+      resetRichText
     })
   }
 

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

@@ -4,8 +4,8 @@ function setData(data = {}) {
 }
 
 //  设置文本
-function setText(text, richText) {
-  this.mindMap.execCommand('SET_NODE_TEXT', this, text, richText)
+function setText(text, richText, resetRichText) {
+  this.mindMap.execCommand('SET_NODE_TEXT', this, text, richText, resetRichText)
 }
 
 //  设置图片

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

@@ -1,4 +1,4 @@
-import { measureText, resizeImgSize, getTextFromHtml } from '../../../utils'
+import { measureText, resizeImgSize, removeHtmlStyle, addHtmlStyle, checkIsRichText } from '../../../utils'
 import { Image, SVG, A, G, Rect, Text, ForeignObject } from '@svgdotjs/svg.js'
 import iconsSvg from '../../../svg/icons'
 import { CONSTANTS, commonCaches } from '../../../constants/constant'
@@ -64,6 +64,9 @@ function createIconNode() {
       node = new Image().load(src)
     }
     node.size(iconSize, iconSize)
+    node.on('click', e => {
+      this.mindMap.emit('node_icon_click', this, e)
+    })
     return {
       node,
       width: iconSize,
@@ -88,8 +91,21 @@ function createRichTextNode() {
     }
   }
   if (recoverText) {
-    let text = getTextFromHtml(this.nodeData.data.text)
-    this.nodeData.data.text = `<p><span style="${this.style.createStyleText()}">${text}</span></p>`
+    let text = this.nodeData.data.text
+    // 判断节点内容是否是富文本
+    let isRichText = checkIsRichText(text)
+    // 样式字符串
+    let style = this.style.createStyleText()
+    if (isRichText) {
+      // 如果是富文本那么线移除内联样式
+      text = removeHtmlStyle(text)
+      // 再添加新的内联样式
+      text = addHtmlStyle(text, 'span', style)
+    } else {
+      // 非富文本
+      text = `<p><span style="${style}">${text}</span></p>`
+    }
+    this.nodeData.data.text = text
   }
   let html = `<div>${this.nodeData.data.text}</div>`
   let div = document.createElement('div')

simple-mind-map/src/plugins/Search.js

@@ -100,7 +100,7 @@ class Search {
     if (!currentNode) return
     let text = this.getReplacedText(currentNode, this.searchText, replaceText)
     this.notResetSearchText = true
-    currentNode.setText(text, currentNode.nodeData.data.richText)
+    currentNode.setText(text, currentNode.nodeData.data.richText, true)
     this.matchNodeList = this.matchNodeList.filter(node => {
       return currentNode !== node
     })

simple-mind-map/src/utils/index.js

@@ -470,4 +470,28 @@ export const getType = (data) => {
 // 判断一个数据是否是null和undefined和空字符串
 export const isUndef = (data) => {
   return data === null || data === undefined || data === ''
+}
+
+// 移除html字符串中节点的内联样式
+export const removeHtmlStyle = (html) => {
+  return html.replaceAll(/(<[^\s]+)\s+style=["'][^'"]+["']\s*(>)/g, '$1$2')
+}
+
+// 给html标签中指定的标签添加内联样式
+export const addHtmlStyle = (html, tag, style) => {
+  const reg = new RegExp(`(<${tag}[^>]*)(>[^<>]*</${tag}>)`, 'g')
+  return html.replaceAll(reg, `$1 style="${style}"$2`)
+}
+
+// 检查一个字符串是否是富文本字符
+let checkIsRichTextEl = null
+export const checkIsRichText = (str) => {
+  if (!checkIsRichTextEl) {
+    checkIsRichTextEl = document.createElement('div')
+  }
+  checkIsRichTextEl.innerHTML = str
+  for (let c = checkIsRichTextEl.childNodes, i = c.length; i--;) {
+    if (c[i].nodeType == 1) return true
+  }
+  return false
 }