From 7d18f98a3321910ccf2f1e0af70571d7c3133179 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: Wed, 24 Jan 2024 17:52:48 +0800
Subject: [PATCH] =?UTF-8?q?Feat=EF=BC=9A=E6=94=AF=E6=8C=81=E8=AE=BE?=
 =?UTF-8?q?=E7=BD=AE=E8=8A=82=E7=82=B9=E8=BF=9E=E7=BA=BF=E7=AE=AD=E5=A4=B4?=
 =?UTF-8?q?=E7=9A=84=E6=98=BE=E7=A4=BA=E4=BD=8D=E7=BD=AE=EF=BC=8C=E5=A4=B4?=
 =?UTF-8?q?=E9=83=A8=E6=88=96=E8=80=85=E5=B0=BE=E9=83=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 simple-mind-map/src/core/render/node/Style.js |  7 +++++-
 simple-mind-map/src/themes/default.js         | 19 +++++++++++----
 web/src/lang/en_us.js                         |  5 +++-
 web/src/lang/zh_cn.js                         |  5 +++-
 web/src/pages/Edit/components/Style.vue       | 23 +++++++++++++++++++
 5 files changed, 51 insertions(+), 8 deletions(-)

diff --git a/simple-mind-map/src/core/render/node/Style.js b/simple-mind-map/src/core/render/node/Style.js
index af1f3a10..2f033692 100644
--- a/simple-mind-map/src/core/render/node/Style.js
+++ b/simple-mind-map/src/core/render/node/Style.js
@@ -220,9 +220,14 @@ class Style {
           childNodeStyle._marker || childNodeStyle.createMarker()
         // 设置样式
         childNodeStyle._markerPath.stroke({ color }).fill({ color })
-        line.marker('end', childNodeStyle._marker)
+        // 箭头位置可能会发生改变，所以需要先删除
+        line.attr('marker-start', '')
+        line.attr('marker-end', '')
+        const dir = childNodeStyle.merge('lineMarkerDir')
+        line.marker(dir, childNodeStyle._marker)
       } else if (childNodeStyle._marker) {
         // 不显示箭头，则删除该子节点的箭头标记
+        line.attr('marker-start', '')
         line.attr('marker-end', '')
         childNodeStyle._marker.remove()
         childNodeStyle._marker = null
diff --git a/simple-mind-map/src/themes/default.js b/simple-mind-map/src/themes/default.js
index 8613f63c..f22d1fc8 100644
--- a/simple-mind-map/src/themes/default.js
+++ b/simple-mind-map/src/themes/default.js
@@ -22,7 +22,7 @@ export default {
   rootLineKeepSameInCurve: true,
   // 直线连接(straight)时，连线的圆角大小，设置为0代表没有圆角，仅支持logicalStructure、mindMap、verticalTimeline三种结构
   lineRadius: 5,
-  // 连线尾部是否显示标记，目前只支持箭头
+  // 连线是否显示标记，目前只支持箭头
   showLineMarker: false,
   // 概要连线的粗细
   generalizationLineWidth: 1,
@@ -77,7 +77,9 @@ export default {
     textDecoration: 'none',
     gradientStyle: false,
     startColor: '#549688',
-    endColor: '#fff'
+    endColor: '#fff',
+    // 连线标记的位置，start（头部）、end（尾部），该配置在showLineMarker配置为true时生效
+    lineMarkerDir: 'end'
   },
   // 二级节点样式
   second: {
@@ -98,7 +100,8 @@ export default {
     textDecoration: 'none',
     gradientStyle: false,
     startColor: '#549688',
-    endColor: '#fff'
+    endColor: '#fff',
+    lineMarkerDir: 'end'
   },
   // 三级及以下节点样式
   node: {
@@ -119,7 +122,8 @@ export default {
     textDecoration: 'none',
     gradientStyle: false,
     startColor: '#549688',
-    endColor: '#fff'
+    endColor: '#fff',
+    lineMarkerDir: 'end'
   },
   // 概要节点样式
   generalization: {
@@ -196,4 +200,9 @@ export const checkIsNodeSizeIndependenceConfig = config => {
   return true
 }
 
-export const lineStyleProps = ['lineColor', 'lineDasharray', 'lineWidth']
+export const lineStyleProps = [
+  'lineColor',
+  'lineDasharray',
+  'lineWidth',
+  'lineMarkerDir'
+]
diff --git a/web/src/lang/en_us.js b/web/src/lang/en_us.js
index 6286843b..9f2edbe5 100644
--- a/web/src/lang/en_us.js
+++ b/web/src/lang/en_us.js
@@ -208,7 +208,10 @@ export default {
     vertical: 'Vertical',
     gradientStyle: 'Gradient',
     startColor: 'Start',
-    endColor: 'End'
+    endColor: 'End',
+    arrowDir: 'Arrow dir',
+    arrowDirStart: 'Start',
+    arrowDirEnd: 'End'
   },
   theme: {
     title: 'Theme',
diff --git a/web/src/lang/zh_cn.js b/web/src/lang/zh_cn.js
index 631f4bb4..b4a3d804 100644
--- a/web/src/lang/zh_cn.js
+++ b/web/src/lang/zh_cn.js
@@ -206,7 +206,10 @@ export default {
     vertical: '垂直',
     gradientStyle: '渐变',
     startColor: '起始',
-    endColor: '结束'
+    endColor: '结束',
+    arrowDir: '箭头位置',
+    arrowDirStart: '头部',
+    arrowDirEnd: '尾部'
   },
   theme: {
     title: '主题',
diff --git a/web/src/pages/Edit/components/Style.vue b/web/src/pages/Edit/components/Style.vue
index 68af7489..e4163db0 100644
--- a/web/src/pages/Edit/components/Style.vue
+++ b/web/src/pages/Edit/components/Style.vue
@@ -394,6 +394,27 @@
               </el-option>
             </el-select>
           </div>
+          <div class="rowItem">
+            <span class="name">{{ $t('style.arrowDir') }}</span>
+            <el-select
+              size="mini"
+              style="width: 80px"
+              v-model="style.lineMarkerDir"
+              placeholder=""
+              @change="update('lineMarkerDir')"
+            >
+              <el-option
+                key="start"
+                :label="$t('style.arrowDirStart')"
+                value="start"
+              ></el-option>
+              <el-option
+                key="end"
+                :label="$t('style.arrowDirEnd')"
+                value="end"
+              ></el-option>
+            </el-select>
+          </div>
         </div>
         <!-- 节点内边距 -->
         <div class="title noTop">{{ $t('style.nodePadding') }}</div>
@@ -478,6 +499,7 @@ export default {
         lineColor: '',
         lineDasharray: '',
         lineWidth: '',
+        lineMarkerDir: '',
         gradientStyle: false,
         startColor: '',
         endColor: ''
@@ -556,6 +578,7 @@ export default {
         'lineColor',
         'lineDasharray',
         'lineWidth',
+        'lineMarkerDir',
         'gradientStyle',
         'startColor',
         'endColor'