diff --git a/simple-mind-map/src/layouts/LogicalStructure.js b/simple-mind-map/src/layouts/LogicalStructure.js index a5043994..fccb4e23 100644 --- a/simple-mind-map/src/layouts/LogicalStructure.js +++ b/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 diff --git a/simple-mind-map/src/layouts/MindMap.js b/simple-mind-map/src/layouts/MindMap.js index f3f7bfa1..b7ce0968 100644 --- a/simple-mind-map/src/layouts/MindMap.js +++ b/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 diff --git a/simple-mind-map/src/themes/default.js b/simple-mind-map/src/themes/default.js index f22d1fc8..032a896c 100644 --- a/simple-mind-map/src/themes/default.js +++ b/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', diff --git a/web/src/lang/en_us.js b/web/src/lang/en_us.js index 9f2edbe5..7a3624e7 100644 --- a/web/src/lang/en_us.js +++ b/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' diff --git a/web/src/lang/zh_cn.js b/web/src/lang/zh_cn.js index b4a3d804..36adaab2 100644 --- a/web/src/lang/zh_cn.js +++ b/web/src/lang/zh_cn.js @@ -59,7 +59,10 @@ export default { fontFamily: '字体', fontSize: '字号', isShowScrollbar: '是否显示滚动条', - isUseHandDrawnLikeStyle: '是否开启手绘风格' + isUseHandDrawnLikeStyle: '是否开启手绘风格', + rootLineStartPos: '根节点连线起始位置', + center: '中心', + right: '右侧' }, color: { moreColor: '更多颜色' diff --git a/web/src/pages/Edit/components/BaseStyle.vue b/web/src/pages/Edit/components/BaseStyle.vue index 29e742f0..4bf7e056 100644 --- a/web/src/pages/Edit/components/BaseStyle.vue +++ b/web/src/pages/Edit/components/BaseStyle.vue @@ -148,6 +148,7 @@
+
{{ $t('baseStyle.style') }}
+
+ {{ $t('baseStyle.lineRadius') }}
+
+ +
+ {{ $t('baseStyle.rootLineStartPos') }} + + + + + + +
+