Feat:优化小地图,去除小地图内的节点内容,优化性能

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'
       })

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

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

@@ -516,3 +516,15 @@ 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)
+}