From 4c9698a147ffcd2c318c4de93c103d5fce2c4187 Mon Sep 17 00:00:00 2001
From: wanglin2 <1013335014@qq.com>
Date: Sat, 29 Jul 2023 14:23:57 +0800
Subject: [PATCH] =?UTF-8?q?Fix:1.=E4=BF=AE=E5=A4=8D=E5=86=85=E9=83=A8?=
=?UTF-8?q?=E6=95=B0=E6=8D=AE=E6=B7=B1=E6=8B=B7=E8=B4=9D=E4=BD=8D=E7=BD=AE?=
=?UTF-8?q?=E4=B8=8D=E6=AD=A3=E7=A1=AE=E7=9A=84=E9=97=AE=E9=A2=98;2.?=
=?UTF-8?q?=E4=BF=AE=E5=A4=8D=E5=AF=8C=E6=96=87=E6=9C=AC=E8=8A=82=E7=82=B9?=
=?UTF-8?q?=E6=8D=A2=E8=A1=8C=E4=B8=8D=E7=94=9F=E6=95=88=E7=9A=84=E9=97=AE?=
=?UTF-8?q?=E9=A2=98;3.=E4=BF=AE=E5=A4=8D=E5=88=87=E6=8D=A2=E4=B8=BB?=
=?UTF-8?q?=E9=A2=98=E7=AD=89=E5=9C=BA=E6=99=AF=E6=97=B6=E8=8A=82=E7=82=B9?=
=?UTF-8?q?=E6=8D=A2=E8=A1=8C=E4=BC=9A=E4=B8=A2=E5=A4=B1=E7=9A=84=E9=97=AE?=
=?UTF-8?q?=E9=A2=98;?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
simple-mind-map/index.js | 2 ++
simple-mind-map/src/core/render/Render.js | 6 ++---
.../src/core/render/node/nodeCommandWraps.js | 4 ++--
.../core/render/node/nodeCreateContents.js | 22 ++++++++++++++---
simple-mind-map/src/plugins/Search.js | 2 +-
simple-mind-map/src/utils/index.js | 24 +++++++++++++++++++
6 files changed, 51 insertions(+), 9 deletions(-)
diff --git a/simple-mind-map/index.js b/simple-mind-map/index.js
index babb799c..9f373ebe 100644
--- a/simple-mind-map/index.js
+++ b/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
diff --git a/simple-mind-map/src/core/render/Render.js b/simple-mind-map/src/core/render/Render.js
index 0ae17ed6..bc2c4439 100644
--- a/simple-mind-map/src/core/render/Render.js
+++ b/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
})
}
diff --git a/simple-mind-map/src/core/render/node/nodeCommandWraps.js b/simple-mind-map/src/core/render/node/nodeCommandWraps.js
index ceb66ad2..3ef043e9 100644
--- a/simple-mind-map/src/core/render/node/nodeCommandWraps.js
+++ b/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)
}
// 设置图片
diff --git a/simple-mind-map/src/core/render/node/nodeCreateContents.js b/simple-mind-map/src/core/render/node/nodeCreateContents.js
index c521d2d4..c870d953 100644
--- a/simple-mind-map/src/core/render/node/nodeCreateContents.js
+++ b/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 = `${text}
`
+ 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 = `${text}
`
+ }
+ this.nodeData.data.text = text
}
let html = `${this.nodeData.data.text}
`
let div = document.createElement('div')
diff --git a/simple-mind-map/src/plugins/Search.js b/simple-mind-map/src/plugins/Search.js
index b83f7272..5844ff00 100644
--- a/simple-mind-map/src/plugins/Search.js
+++ b/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
})
diff --git a/simple-mind-map/src/utils/index.js b/simple-mind-map/src/utils/index.js
index 453f2259..b6befddd 100644
--- a/simple-mind-map/src/utils/index.js
+++ b/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}[^>]*)(>[^<>]*)`, '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
}
\ No newline at end of file