Feat：1.去除highlightNodeBoxStyle选项；2.highlightNode方法新增参数；3.概要区间高亮框的颜色由主题的hoverRectColor选项和hoverRectColor实例化选项确定

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

@@ -174,11 +174,6 @@ export const defaultOpt = {
   addHistoryTime: 100,
   // 是否禁止拖动画布
   isDisableDrag: false,
-  // 鼠标移入概要高亮所属节点时的高亮框样式
-  highlightNodeBoxStyle: {
-    stroke: 'rgb(94, 200, 248)',
-    fill: 'transparent'
-  },
   // 创建新节点时的行为
   /*
     DEFAULT  ：默认会激活新创建的节点，并且进入编辑模式。如果同时创建了多个新节点，那么只会激活而不会进入编辑模式

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

@@ -99,6 +99,7 @@ class Render {
     this.currentBeingPasteType = ''
     // 节点高亮框
     this.highlightBoxNode = null
+    this.highlightBoxNodeStyle = null
     // 上一次节点激活数据
     this.lastActiveNode = null
     this.lastActiveNodeList = []
@@ -1624,7 +1625,7 @@ class Render {
       }
     }
     _walk(this.renderTree, !uid)
-    
+
     this.mindMap.render()
   }
 
@@ -2061,19 +2062,39 @@ class Render {
   }
 
   // 高亮节点或子节点
-  highlightNode(node, range) {
+  highlightNode(node, range, style) {
     // 如果当前正在渲染，那么不进行高亮，因为节点位置可能不正确
     if (this.isRendering) return
-    const { highlightNodeBoxStyle = {} } = this.mindMap.opt
+    style = {
+      stroke: 'rgb(94, 200, 248)',
+      fill: 'transparent',
+      ...(style || {})
+    }
+    // 尚未创建
     if (!this.highlightBoxNode) {
       this.highlightBoxNode = new Polygon()
         .stroke({
-          color: highlightNodeBoxStyle.stroke || 'transparent'
+          color: style.stroke || 'transparent'
         })
         .fill({
-          color: highlightNodeBoxStyle.fill || 'transparent'
+          color: style.fill || 'transparent'
         })
+    } else if (this.highlightBoxNodeStyle) {
+      // 样式更新了
+      if (
+        this.highlightBoxNodeStyle.stroke !== style.stroke ||
+        this.highlightBoxNodeStyle.fill !== style.fill
+      ) {
+        this.highlightBoxNode
+          .stroke({
+            color: style.stroke || 'transparent'
+          })
+          .fill({
+            color: style.fill || 'transparent'
+          })
+      }
     }
+    this.highlightBoxNodeStyle = { ...style }
     let minx = Infinity,
       miny = Infinity,
       maxx = -Infinity,

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

@@ -186,15 +186,29 @@ function handleGeneralizationMouseenter() {
   const list = belongNode.formatGetGeneralization()
   const index = belongNode.getGeneralizationNodeIndex(this)
   const generalizationData = list[index]
+  // 如果主题中设置了hoverRectColor颜色，那么使用该颜色
+  // 否则使用hoverRectColor实例化选项的颜色
+  // 兜底使用highlightNode方法的默认颜色
+  const hoverRectColor = this.getStyle('hoverRectColor')
+  const color = hoverRectColor || this.mindMap.opt.hoverRectColor
+  const style = color
+    ? {
+        stroke: color
+      }
+    : null
   // 区间概要，框子节点
   if (
     Array.isArray(generalizationData.range) &&
     generalizationData.range.length > 0
   ) {
-    this.mindMap.renderer.highlightNode(belongNode, generalizationData.range)
+    this.mindMap.renderer.highlightNode(
+      belongNode,
+      generalizationData.range,
+      style
+    )
   } else {
     // 否则框自己
-    this.mindMap.renderer.highlightNode(belongNode)
+    this.mindMap.renderer.highlightNode(belongNode, null, style)
   }
 }