From 8a8cc26c1d3468f0470fdfe30aead49aa44fbd82 Mon Sep 17 00:00:00 2001
From: wanglin2 <1013335014@qq.com>
Date: Sun, 30 Jul 2023 10:51:38 +0800
Subject: [PATCH] =?UTF-8?q?Feat:=E4=BC=98=E5=8C=96=E5=B0=8F=E5=9C=B0?=
 =?UTF-8?q?=E5=9B=BE,=E5=8E=BB=E9=99=A4=E5=B0=8F=E5=9C=B0=E5=9B=BE?=
 =?UTF-8?q?=E5=86=85=E7=9A=84=E8=8A=82=E7=82=B9=E5=86=85=E5=AE=B9,?=
 =?UTF-8?q?=E4=BC=98=E5=8C=96=E6=80=A7=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 simple-mind-map/src/core/render/node/Node.js |  2 +
 simple-mind-map/src/plugins/MiniMap.js       | 40 +++++++++++++++++++-
 simple-mind-map/src/utils/index.js           | 12 ++++++
 3 files changed, 52 insertions(+), 2 deletions(-)

diff --git a/simple-mind-map/src/core/render/node/Node.js b/simple-mind-map/src/core/render/node/Node.js
index 4dd66d84..4a5a6ac2 100644
--- a/simple-mind-map/src/core/render/node/Node.js
+++ b/simple-mind-map/src/core/render/node/Node.js
@@ -266,6 +266,7 @@ class Node {
     paddingY += this.shapePadding.paddingY
     // 节点形状
     this.shapeNode = this.shapeInstance.createShape()
+    this.shapeNode.addClass('smm-node-shape')
     this.group.add(this.shapeNode)
     this.updateNodeShape()
     // 渲染一个隐藏的矩形区域，用来触发展开收起按钮的显示
@@ -531,6 +532,7 @@ class Node {
       isLayout = true
       // 创建组
       this.group = new G()
+      this.group.addClass('smm-node')
       this.group.css({
         cursor: 'default'
       })
diff --git a/simple-mind-map/src/plugins/MiniMap.js b/simple-mind-map/src/plugins/MiniMap.js
index 78198685..ed4a99d3 100644
--- a/simple-mind-map/src/plugins/MiniMap.js
+++ b/simple-mind-map/src/plugins/MiniMap.js
@@ -1,3 +1,5 @@
+import { isWhite, isTransparent } from '../utils/index'
+
 // 小地图插件
 class MiniMap {
   //  构造函数
@@ -20,7 +22,7 @@ class MiniMap {
    * boxHeight：小地图容器的高度
    */
   calculationMiniMap(boxWidth, boxHeight) {
-    let { svgHTML, rect, origWidth, origHeight, scaleX, scaleY } =
+    let { svg, rect, origWidth, origHeight, scaleX, scaleY } =
       this.mindMap.getSvgData()
     // 计算数据
     let boxRatio = boxWidth / boxHeight
@@ -65,8 +67,10 @@ class MiniMap {
       Math.max(0, ((_rectY2 - origHeight) / _rectHeight) * actHeight) +
       miniMapBoxTop +
       'px'
+    
+    this.removeNodeContent(svg)
     return {
-      svgHTML, // 小地图html
+      svgHTML: svg.svg(), // 小地图html
       viewBoxStyle, // 视图框的位置信息
       miniMapBoxScale, // 视图框的缩放值
       miniMapBoxLeft, // 视图框的left值
@@ -74,6 +78,38 @@ class MiniMap {
     }
   }
 
+  // 移除节点的内容
+  removeNodeContent(svg) {
+    if (svg.hasClass('smm-node')) {
+      let shape = svg.findOne('.smm-node-shape')
+      let fill = shape.attr('fill')
+      if (isWhite(fill) || isTransparent(fill)) {
+        shape.attr('fill', this.getDefaultFill())
+      }
+      svg.clear()
+      svg.add(shape)
+      return
+    }
+    let children = svg.children()
+    if (children && children.length > 0) {
+      children.forEach((node) => {
+        this.removeNodeContent(node)
+      })
+    }
+  }
+
+  // 计算默认的填充颜色
+  getDefaultFill() {
+    let { lineColor, root, second, node } = this.mindMap.themeConfig
+    let list = [lineColor, root.fillColor, root.color, second.fillColor, second.color, node.fillColor, node.color, root.borderColor, second.borderColor, node.borderColor]
+    for(let i = 0; i < list.length; i++) {
+      let color = list[i]
+      if (!isTransparent(color) && !isWhite(color)) {
+        return color
+      }
+    }
+  }
+
   //  小地图鼠标按下事件
   onMousedown(e) {
     this.isMousedown = true
diff --git a/simple-mind-map/src/utils/index.js b/simple-mind-map/src/utils/index.js
index 5488e394..68cc323a 100644
--- a/simple-mind-map/src/utils/index.js
+++ b/simple-mind-map/src/utils/index.js
@@ -515,4 +515,16 @@ export const replaceHtmlText = (html, searchText, replaceText) => {
   }
   walk(replaceHtmlTextEl)
   return replaceHtmlTextEl.innerHTML
+}
+
+// 判断一个颜色是否是白色
+export const isWhite = (color) => {
+  color = String(color).replaceAll(/\s+/g, '')
+  return ['#fff', '#ffffff', '#FFF', '#FFFFFF', 'rgb(255,255,255)'].includes(color) || /rgba\(255,255,255,[^)]+\)/.test(color)
+}
+
+// 判断一个颜色是否是透明
+export const isTransparent = (color) => {
+  color = String(color).replaceAll(/\s+/g, '')
+  return ['', 'transparent'].includes(color) || /rgba\(\d+,\d+,\d+,0\)/.test(color)
 }
\ No newline at end of file