Feat：主题新增字段用于设置曲线连接下根节点连线的起始位置

simple-mind-map/src/layouts/LogicalStructure.js

@@ -224,10 +224,19 @@ class LogicalStructure extends Base {
     if (!this.mindMap.opt.alwaysShowExpandBtn) {
       expandBtnSize = 0
     }
-    let nodeUseLineStyle = this.mindMap.themeConfig.nodeUseLineStyle
+    const {
+      nodeUseLineStyle,
+      rootLineStartPositionKeepSameInCurve,
+      rootLineKeepSameInCurve
+    } = this.mindMap.themeConfig
     node.children.forEach((item, index) => {
+      if (node.layerIndex === 0) {
+        expandBtnSize = 0
+      }
       let x1 =
-        node.layerIndex === 0 ? left + width / 2 : left + width + expandBtnSize
+        node.layerIndex === 0 && !rootLineStartPositionKeepSameInCurve
+          ? left + width / 2
+          : left + width + expandBtnSize
       let y1 = top + height / 2
       let x2 = item.left
       let y2 = item.top + item.height / 2
@@ -238,7 +247,7 @@ class LogicalStructure extends Base {
       let nodeUseLineStylePath = nodeUseLineStyle
         ? ` L ${item.left + item.width},${y2}`
         : ''
-      if (node.isRoot && !this.mindMap.themeConfig.rootLineKeepSameInCurve) {
+      if (node.isRoot && !rootLineKeepSameInCurve) {
         path = this.quadraticCurvePath(x1, y1, x2, y2) + nodeUseLineStylePath
       } else {
         path = this.cubicBezierPath(x1, y1, x2, y2) + nodeUseLineStylePath

simple-mind-map/src/layouts/MindMap.js

@@ -298,10 +298,17 @@ class MindMap extends Base {
     if (!this.mindMap.opt.alwaysShowExpandBtn) {
       expandBtnSize = 0
     }
-    let nodeUseLineStyle = this.mindMap.themeConfig.nodeUseLineStyle
+    const {
+      nodeUseLineStyle,
+      rootLineKeepSameInCurve,
+      rootLineStartPositionKeepSameInCurve
+    } = this.mindMap.themeConfig
     node.children.forEach((item, index) => {
+      if (node.layerIndex === 0) {
+        expandBtnSize = 0
+      }
       let x1 =
-        node.layerIndex === 0
+        node.layerIndex === 0 && !rootLineStartPositionKeepSameInCurve
           ? left + width / 2
           : item.dir === CONSTANTS.LAYOUT_GROW_DIR.LEFT
           ? left - expandBtnSize
@@ -317,14 +324,14 @@ class MindMap extends Base {
       y2 = nodeUseLineStyle ? y2 + item.height / 2 : y2
       // 节点使用横线风格，需要额外渲染横线
       let nodeUseLineStylePath = ''
-      if (this.mindMap.themeConfig.nodeUseLineStyle) {
+      if (nodeUseLineStyle) {
         if (item.dir === CONSTANTS.LAYOUT_GROW_DIR.LEFT) {
           nodeUseLineStylePath = ` L ${item.left},${y2}`
         } else {
           nodeUseLineStylePath = ` L ${item.left + item.width},${y2}`
         }
       }
-      if (node.isRoot && !this.mindMap.themeConfig.rootLineKeepSameInCurve) {
+      if (node.isRoot && !rootLineKeepSameInCurve) {
         path = this.quadraticCurvePath(x1, y1, x2, y2) + nodeUseLineStylePath
       } else {
         path = this.cubicBezierPath(x1, y1, x2, y2) + nodeUseLineStylePath

simple-mind-map/src/themes/default.js

@@ -20,6 +20,8 @@ export default {
   lineStyle: 'straight', // 曲线（curve）【仅支持logicalStructure、mindMap、verticalTimeline三种结构】、直线（straight）、直连（direct）【仅支持logicalStructure、mindMap、organizationStructure、verticalTimeline四种结构】
   // 曲线连接时，根节点和其他节点的连接线样式保持统一，默认根节点为 ( 型，其他节点为 { 型，设为true后，都为 { 型。仅支持logicalStructure、mindMap两种结构
   rootLineKeepSameInCurve: true,
+  // 曲线连接时，根节点和其他节点的连线起始位置保持统一，默认根节点的连线起始位置在节点中心，其他节点在节点右侧，如果该配置设为true，那么根节点的连线起始位置也会在节点右侧
+  rootLineStartPositionKeepSameInCurve: false,
   // 直线连接(straight)时，连线的圆角大小，设置为0代表没有圆角，仅支持logicalStructure、mindMap、verticalTimeline三种结构
   lineRadius: 5,
   // 连线是否显示标记，目前只支持箭头
@@ -180,6 +182,7 @@ const nodeSizeIndependenceList = [
   'backgroundPosition',
   'backgroundSize',
   'rootLineKeepSameInCurve',
+  'rootLineStartPositionKeepSameInCurve',
   'showLineMarker',
   'gradientStyle',
   'lineRadius',

web/src/lang/en_us.js

@@ -59,7 +59,10 @@ export default {
     fontFamily: 'Font family',
     fontSize: 'Font size',
     isShowScrollbar: 'Is show scrollbar',
-    isUseHandDrawnLikeStyle: 'Is use hand drawn like style'
+    isUseHandDrawnLikeStyle: 'Is use hand drawn like style',
+    rootLineStartPos: 'Root line start pos',
+    center: 'Center',
+    right: 'Right'
   },
   color: {
     moreColor: 'More color'

web/src/lang/zh_cn.js

@@ -59,7 +59,10 @@ export default {
     fontFamily: '字体',
     fontSize: '字号',
     isShowScrollbar: '是否显示滚动条',
-    isUseHandDrawnLikeStyle: '是否开启手绘风格'
+    isUseHandDrawnLikeStyle: '是否开启手绘风格',
+    rootLineStartPos: '根节点连线起始位置',
+    center: '中心',
+    right: '右侧'
   },
   color: {
     moreColor: '更多颜色'

web/src/pages/Edit/components/BaseStyle.vue

@@ -148,6 +148,7 @@
         </div>
       </div>
       <div class="row">
+        <!-- 线宽 -->
         <div class="rowItem" v-if="lineStyleListShow.length > 1">
           <span class="name">{{ $t('baseStyle.style') }}</span>
           <el-select
@@ -176,6 +177,7 @@
             </el-option>
           </el-select>
         </div>
+        <!-- 根节点连线样式 -->
         <div
           class="rowItem"
           v-if="
@@ -204,6 +206,7 @@
           </el-select>
         </div>
         <div class="rowItem" v-if="showLineRadius">
+          <!-- 连线圆角大小 -->
           <span class="name">{{ $t('baseStyle.lineRadius') }}</span>
           <el-select
             size="mini"
@@ -226,6 +229,37 @@
           </el-select>
         </div>
       </div>
+      <div class="row">
+        <!-- 根节点连线起始位置 -->
+        <div
+          class="rowItem"
+          v-if="
+            style.lineStyle === 'curve' && showRootLineKeepSameInCurveLayouts
+          "
+        >
+          <span class="name">{{ $t('baseStyle.rootLineStartPos') }}</span>
+          <el-select
+            size="mini"
+            style="width: 80px"
+            v-model="style.rootLineStartPositionKeepSameInCurve"
+            placeholder=""
+            @change="
+              value => {
+                update('rootLineStartPositionKeepSameInCurve', value)
+              }
+            "
+          >
+            <el-option
+              key="center"
+              :label="$t('baseStyle.center')"
+              :value="false"
+            >
+            </el-option>
+            <el-option key="right" :label="$t('baseStyle.right')" :value="true">
+            </el-option>
+          </el-select>
+        </div>
+      </div>
       <div class="row">
         <div class="rowItem">
           <el-checkbox
@@ -917,6 +951,7 @@ export default {
         lineStyle: '',
         showLineMarker: '',
         rootLineKeepSameInCurve: '',
+        rootLineStartPositionKeepSameInCurve: '',
         lineRadius: 0,
         generalizationLineWidth: '',
         generalizationLineColor: '',
@@ -1076,6 +1111,7 @@ export default {
         'lineStyle',
         'showLineMarker',
         'rootLineKeepSameInCurve',
+        'rootLineStartPositionKeepSameInCurve',
         'lineRadius',
         'lineColor',
         'generalizationLineWidth',