Feat：支持设置节点连线箭头的显示位置，头部或者尾部

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

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'
+]

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',

web/src/lang/zh_cn.js

@@ -206,7 +206,10 @@ export default {
     vertical: '垂直',
     gradientStyle: '渐变',
     startColor: '起始',
-    endColor: '结束'
+    endColor: '结束',
+    arrowDir: '箭头位置',
+    arrowDirStart: '头部',
+    arrowDirEnd: '尾部'
   },
   theme: {
     title: '主题',

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'