Feat：优化鼠标hover和激活节点矩形，增加和内容的距离

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

@@ -169,6 +169,8 @@ export const defaultOpt = {
   enableDblclickReset: true,
   // 导出图片时canvas的缩放倍数，该配置会和window.devicePixelRatio值取最大值
   minExportImgCanvasScale: 2,
-  // 节点鼠标hover和激活时显示的矩形边框颜色
+  // 节点鼠标hover和激活时显示的矩形边框的颜色
-  hoverRectColor: 'rgb(94, 200, 248)'
+  hoverRectColor: 'rgb(94, 200, 248)',
+  // 节点鼠标hover和激活时显示的矩形边框距节点内容的距离
+  hoverRectPadding: 2
 }

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

@@ -260,9 +260,11 @@ class Node {
     this.shapePadding.paddingY = shapePaddingY
     // 边框宽度，因为边框是以中线向两端发散，所以边框会超出节点
     const borderWidth = this.getBorderWidth()
+    const { hoverRectPadding } = this.mindMap.opt
     return {
-      width: _width + paddingX * 2 + shapePaddingX * 2 + borderWidth,
+      width: _width + paddingX * 2 + shapePaddingX * 2 + borderWidth + hoverRectPadding * 2,
-      height: _height + paddingY * 2 + margin + shapePaddingY * 2 + borderWidth
+      height:
+        _height + paddingY * 2 + margin + shapePaddingY * 2 + borderWidth + hoverRectPadding * 2
     }
   }
 
@@ -270,14 +272,15 @@ class Node {
   layout() {
     // 清除之前的内容
     this.group.clear()
+    const { hoverRectPadding } = this.mindMap.opt
     let { width, height, textContentItemMargin } = this
     let { paddingY } = this.getPaddingVale()
     const halfBorderWidth = this.getBorderWidth() / 2
-    paddingY += this.shapePadding.paddingY + halfBorderWidth
+    paddingY += this.shapePadding.paddingY + halfBorderWidth + hoverRectPadding
     // 节点形状
     this.shapeNode = this.shapeInstance.createShape()
     this.shapeNode.addClass('smm-node-shape')
-    this.shapeNode.translate(halfBorderWidth, halfBorderWidth)
+    this.shapeNode.translate(halfBorderWidth + hoverRectPadding, halfBorderWidth + hoverRectPadding)
     this.style.shape(this.shapeNode)
     this.group.add(this.shapeNode)
     // 渲染一个隐藏的矩形区域，用来触发展开收起按钮的显示
@@ -367,7 +370,7 @@ class Node {
     )
     this.group.add(textContentNested)
     // 激活hover和激活边框
-    this.hoverNode = new Rect()
+    this.hoverNode = new Rect().size(width, height).x(0).y(0)
     this.hoverNode.addClass('smm-hover-node')
     this.style.hoverNode(this.hoverNode, width, height)
     this.group.add(this.hoverNode)

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

@@ -94,12 +94,13 @@ export default class Shape {
     return node
   }
 
-  // 获取节点减去边框宽度的尺寸
+  // 获取节点减去节点边框宽度、hover节点边框宽度后的尺寸
   getNodeSize() {
     const borderWidth = this.node.getBorderWidth()
     let { width, height } = this.node
-    width -= borderWidth
+    const { hoverRectPadding } = this.node.mindMap.opt
-    height -= borderWidth
+    width -= borderWidth + hoverRectPadding * 2
+    height -= borderWidth + hoverRectPadding * 2
     return {
       width,
       height

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

@@ -211,12 +211,9 @@ class Style {
   }
 
   // hover和激活节点
-  hoverNode(node, width, height) {
+  hoverNode(node) {
     const { hoverRectColor } = this.ctx.mindMap.opt
     node
-      .size(width + 0, height + 0)
-      .x(-0)
-      .y(-0)
       .radius(5)
       .fill('none')
       .stroke({