From c6c1ef21170a228323930ec9af92b6b9207ecae1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=A1=97=E8=A7=92=E5=B0=8F=E6=9E=97?= <1013335014@qq.com>
Date: Thu, 18 Jul 2024 13:45:50 +0800
Subject: [PATCH] =?UTF-8?q?Feat=EF=BC=9A=E6=96=B0=E5=A2=9E=E8=AE=BE?=
 =?UTF-8?q?=E7=BD=AE=E5=A4=96=E6=A1=86=E5=86=85=E8=BE=B9=E8=B7=9D=E7=9A=84?=
 =?UTF-8?q?=E5=AE=9E=E4=BE=8B=E5=8C=96=E9=80=89=E9=A1=B9?=
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/plugins/OuterFrame.js       | 17 +++++++++++------
 2 files changed, 16 insertions(+), 7 deletions(-)

diff --git a/simple-mind-map/src/constants/defaultOptions.js b/simple-mind-map/src/constants/defaultOptions.js
index 6e67a896..fd8ff017 100644
--- a/simple-mind-map/src/constants/defaultOptions.js
+++ b/simple-mind-map/src/constants/defaultOptions.js
@@ -395,5 +395,9 @@ export const defaultOpt = {
   beforeHideRichTextEdit: null,
   // 设置富文本节点编辑框和节点大小一致，形成伪原地编辑的效果
   // 需要注意的是，只有当节点内只有文本、且形状是矩形才会有比较好的效果
-  richTextEditFakeInPlace: false
+  richTextEditFakeInPlace: false,
+
+  // 【OuterFrame】插件
+  outerFramePaddingX: 10,
+  outerFramePaddingY: 10
 }
diff --git a/simple-mind-map/src/plugins/OuterFrame.js b/simple-mind-map/src/plugins/OuterFrame.js
index 91ccecf8..e0c1e4b6 100644
--- a/simple-mind-map/src/plugins/OuterFrame.js
+++ b/simple-mind-map/src/plugins/OuterFrame.js
@@ -144,8 +144,6 @@ class OuterFrame {
     this.createDrawContainer()
     this.outerFrameElList = []
     this.activeOuterFrame = null
-    this.paddingX = 10
-    this.paddingY = 10
     this.bindEvent()
   }
 
@@ -287,6 +285,7 @@ class OuterFrame {
     let tree = this.mindMap.renderer.root
     if (!tree) return
     const t = this.mindMap.draw.transform()
+    const { outerFramePaddingX, outerFramePaddingY } = this.mindMap.opt
     walk(
       tree,
       null,
@@ -299,12 +298,18 @@ class OuterFrame {
             const { left, top, width, height } =
               getNodeListBoundingRect(nodeList)
             const el = this.createOuterFrameEl(
-              (left - this.paddingX - this.mindMap.elRect.left - t.translateX) /
+              (left -
+                outerFramePaddingX -
+                this.mindMap.elRect.left -
+                t.translateX) /
                 t.scaleX,
-              (top - this.paddingY - this.mindMap.elRect.top - t.translateY) /
+              (top -
+                outerFramePaddingY -
+                this.mindMap.elRect.top -
+                t.translateY) /
                 t.scaleY,
-              (width + this.paddingX * 2) / t.scaleX,
-              (height + this.paddingY * 2) / t.scaleY,
+              (width + outerFramePaddingX * 2) / t.scaleX,
+              (height + outerFramePaddingY * 2) / t.scaleY,
               nodeList[0].getData('outerFrame') // 使用第一个节点的外框样式
             )
             el.on('click', e => {