From d14d887c1a4f03b2f78f5248793d22e96e7531c1 Mon Sep 17 00:00:00 2001
From: wanglin2 <1013335014@qq.com>
Date: Mon, 28 Aug 2023 09:11:39 +0800
Subject: [PATCH] =?UTF-8?q?Feat=EF=BC=9A=E4=BC=98=E5=8C=96=E9=BC=A0?=
 =?UTF-8?q?=E6=A0=87hover=E5=92=8C=E6=BF=80=E6=B4=BB=E8=8A=82=E7=82=B9?=
 =?UTF-8?q?=E7=9F=A9=E5=BD=A2=EF=BC=8C=E5=A2=9E=E5=8A=A0=E5=92=8C=E5=86=85?=
 =?UTF-8?q?=E5=AE=B9=E7=9A=84=E8=B7=9D=E7=A6=BB?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 simple-mind-map/src/constants/defaultOptions.js |  6 ++++--
 simple-mind-map/src/core/render/node/Node.js    | 13 ++++++++-----
 simple-mind-map/src/core/render/node/Shape.js   |  7 ++++---
 simple-mind-map/src/core/render/node/Style.js   |  5 +----
 4 files changed, 17 insertions(+), 14 deletions(-)

diff --git a/simple-mind-map/src/constants/defaultOptions.js b/simple-mind-map/src/constants/defaultOptions.js
index 9cd26ce9..111d8ac6 100644
--- a/simple-mind-map/src/constants/defaultOptions.js
+++ b/simple-mind-map/src/constants/defaultOptions.js
@@ -169,6 +169,8 @@ export const defaultOpt = {
   enableDblclickReset: true,
   // 导出图片时canvas的缩放倍数，该配置会和window.devicePixelRatio值取最大值
   minExportImgCanvasScale: 2,
-  // 节点鼠标hover和激活时显示的矩形边框颜色
-  hoverRectColor: 'rgb(94, 200, 248)'
+  // 节点鼠标hover和激活时显示的矩形边框的颜色
+  hoverRectColor: 'rgb(94, 200, 248)',
+  // 节点鼠标hover和激活时显示的矩形边框距节点内容的距离
+  hoverRectPadding: 2
 }
diff --git a/simple-mind-map/src/core/render/node/Node.js b/simple-mind-map/src/core/render/node/Node.js
index 11eed5f9..b19b7b51 100644
--- a/simple-mind-map/src/core/render/node/Node.js
+++ b/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,
-      height: _height + paddingY * 2 + margin + shapePaddingY * 2 + borderWidth
+      width: _width + paddingX * 2 + shapePaddingX * 2 + borderWidth + hoverRectPadding * 2,
+      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)
diff --git a/simple-mind-map/src/core/render/node/Shape.js b/simple-mind-map/src/core/render/node/Shape.js
index 217a8ae6..ef85c3b0 100644
--- a/simple-mind-map/src/core/render/node/Shape.js
+++ b/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
-    height -= borderWidth
+    const { hoverRectPadding } = this.node.mindMap.opt
+    width -= borderWidth + hoverRectPadding * 2
+    height -= borderWidth + hoverRectPadding * 2
     return {
       width,
       height
diff --git a/simple-mind-map/src/core/render/node/Style.js b/simple-mind-map/src/core/render/node/Style.js
index 325b8989..2f8ab7f0 100644
--- a/simple-mind-map/src/core/render/node/Style.js
+++ b/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({