Feat:曲线风格下,根节点的连接线样式支持和其他节点保持一致

This commit is contained in:
wanglin2 2023-08-04 09:39:21 +08:00
parent ef9d8b0ea4
commit 35bff6ab57
9 changed files with 68 additions and 5 deletions

View File

@ -234,7 +234,7 @@ class LogicalStructure extends Base {
let nodeUseLineStylePath = nodeUseLineStyle let nodeUseLineStylePath = nodeUseLineStyle
? ` L ${item.left + item.width},${y2}` ? ` L ${item.left + item.width},${y2}`
: '' : ''
if (node.isRoot) { if (node.isRoot && !this.mindMap.themeConfig.rootLineKeepSameInCurve) {
path = this.quadraticCurvePath(x1, y1, x2, y2) + nodeUseLineStylePath path = this.quadraticCurvePath(x1, y1, x2, y2) + nodeUseLineStylePath
} else { } else {
path = this.cubicBezierPath(x1, y1, x2, y2) + nodeUseLineStylePath path = this.cubicBezierPath(x1, y1, x2, y2) + nodeUseLineStylePath

View File

@ -315,7 +315,7 @@ class MindMap extends Base {
nodeUseLineStylePath = ` L ${item.left + item.width},${y2}` nodeUseLineStylePath = ` L ${item.left + item.width},${y2}`
} }
} }
if (node.isRoot) { if (node.isRoot && !this.mindMap.themeConfig.rootLineKeepSameInCurve) {
path = this.quadraticCurvePath(x1, y1, x2, y2) + nodeUseLineStylePath path = this.quadraticCurvePath(x1, y1, x2, y2) + nodeUseLineStylePath
} else { } else {
path = this.cubicBezierPath(x1, y1, x2, y2) + nodeUseLineStylePath path = this.cubicBezierPath(x1, y1, x2, y2) + nodeUseLineStylePath

View File

@ -18,6 +18,8 @@ export default {
lineDasharray: 'none', lineDasharray: 'none',
// 连线风格 // 连线风格
lineStyle: 'straight', // 针对logicalStructure、mindMap两种结构。曲线curve、直线straight、直连direct lineStyle: 'straight', // 针对logicalStructure、mindMap两种结构。曲线curve、直线straight、直连direct
// 曲线连接时,根节点和其他节点的连接线样式保持统一,默认根节点为 ( 型,其他节点为 { 型设为true后都为 { 型
rootLineKeepSameInCurve: true,
// 概要连线的粗细 // 概要连线的粗细
generalizationLineWidth: 1, generalizationLineWidth: 1,
// 概要连线的颜色 // 概要连线的颜色

View File

@ -102,6 +102,18 @@ export const lineStyleList = [
} }
] ]
// 曲线风格中,根节点样式是否和其他节点保持一致
export const rootLineKeepSameInCurveList = [
{
name: 'Bracket',
value: false
},
{
name: 'Brace',
value: true
}
]
// 图片重复方式 // 图片重复方式
export const backgroundRepeatList = [ export const backgroundRepeatList = [
{ {

View File

@ -10,6 +10,7 @@ import {
fontFamilyList as fontFamilyListZh, fontFamilyList as fontFamilyListZh,
borderDasharrayList as borderDasharrayListZh, borderDasharrayList as borderDasharrayListZh,
lineStyleList as lineStyleListZh, lineStyleList as lineStyleListZh,
rootLineKeepSameInCurveList as rootLineKeepSameInCurveListZh,
backgroundRepeatList as backgroundRepeatListZh, backgroundRepeatList as backgroundRepeatListZh,
backgroundPositionList as backgroundPositionListZh, backgroundPositionList as backgroundPositionListZh,
shortcutKeyList as shortcutKeyListZh, shortcutKeyList as shortcutKeyListZh,
@ -22,6 +23,7 @@ import {
fontFamilyList as fontFamilyListEn, fontFamilyList as fontFamilyListEn,
borderDasharrayList as borderDasharrayListEn, borderDasharrayList as borderDasharrayListEn,
lineStyleList as lineStyleListEn, lineStyleList as lineStyleListEn,
rootLineKeepSameInCurveList as rootLineKeepSameInCurveListEn,
backgroundRepeatList as backgroundRepeatListEn, backgroundRepeatList as backgroundRepeatListEn,
backgroundPositionList as backgroundPositionListEn, backgroundPositionList as backgroundPositionListEn,
shortcutKeyList as shortcutKeyListEn, shortcutKeyList as shortcutKeyListEn,
@ -46,6 +48,11 @@ const lineStyleList = {
en: lineStyleListEn en: lineStyleListEn
} }
const rootLineKeepSameInCurveList = {
zh: rootLineKeepSameInCurveListZh,
en: rootLineKeepSameInCurveListEn
}
const backgroundRepeatList = { const backgroundRepeatList = {
zh: backgroundRepeatListZh, zh: backgroundRepeatListZh,
en: backgroundRepeatListEn en: backgroundRepeatListEn
@ -93,6 +100,7 @@ export {
fontFamilyList, fontFamilyList,
borderDasharrayList, borderDasharrayList,
lineStyleList, lineStyleList,
rootLineKeepSameInCurveList,
backgroundRepeatList, backgroundRepeatList,
backgroundPositionList, backgroundPositionList,
backgroundSizeList, backgroundSizeList,

View File

@ -157,6 +157,18 @@ export const lineStyleList = [
} }
] ]
// 曲线风格中,根节点样式是否和其他节点保持一致
export const rootLineKeepSameInCurveList = [
{
name: '括号',
value: false
},
{
name: '大括号',
value: true
}
]
// 图片重复方式 // 图片重复方式
export const backgroundRepeatList = [ export const backgroundRepeatList = [
{ {

View File

@ -46,7 +46,8 @@ export default {
associativeLineActiveColor: 'Active color', associativeLineActiveColor: 'Active color',
mousewheelZoomActionReverse: 'Mouse Wheel Zoom', mousewheelZoomActionReverse: 'Mouse Wheel Zoom',
mousewheelZoomActionReverse1: 'Zoom out forward and zoom in back', mousewheelZoomActionReverse1: 'Zoom out forward and zoom in back',
mousewheelZoomActionReverse2: 'Zoom in forward and zoom out back' mousewheelZoomActionReverse2: 'Zoom in forward and zoom out back',
rootStyle: 'Root Node'
}, },
color: { color: {
moreColor: 'More color' moreColor: 'More color'

View File

@ -46,7 +46,8 @@ export default {
associativeLineActiveColor: '激活颜色', associativeLineActiveColor: '激活颜色',
mousewheelZoomActionReverse: '鼠标滚轮缩放', mousewheelZoomActionReverse: '鼠标滚轮缩放',
mousewheelZoomActionReverse1: '向前缩小向后放大', mousewheelZoomActionReverse1: '向前缩小向后放大',
mousewheelZoomActionReverse2: '向前放大向后缩小' mousewheelZoomActionReverse2: '向前放大向后缩小',
rootStyle: '根节点'
}, },
color: { color: {
moreColor: '更多颜色' moreColor: '更多颜色'

View File

@ -164,6 +164,28 @@
</el-option> </el-option>
</el-select> </el-select>
</div> </div>
<div class="rowItem" v-if="style.lineStyle === 'curve'">
<span class="name">{{ $t('baseStyle.rootStyle') }}</span>
<el-select
size="mini"
style="width: 80px"
v-model="style.rootLineKeepSameInCurve"
placeholder=""
@change="
value => {
update('rootLineKeepSameInCurve', value)
}
"
>
<el-option
v-for="item in rootLineKeepSameInCurveList"
:key="item.value"
:label="item.name"
:value="item.value"
>
</el-option>
</el-select>
</div>
</div> </div>
<!-- 概要连线 --> <!-- 概要连线 -->
<div class="title noTop">{{ $t('baseStyle.lineOfOutline') }}</div> <div class="title noTop">{{ $t('baseStyle.lineOfOutline') }}</div>
@ -630,7 +652,7 @@
<script> <script>
import Sidebar from './Sidebar' import Sidebar from './Sidebar'
import Color from './Color' import Color from './Color'
import { lineWidthList, lineStyleList, backgroundRepeatList, backgroundPositionList, backgroundSizeList, fontFamilyList, fontSizeList } from '@/config' import { lineWidthList, lineStyleList, backgroundRepeatList, backgroundPositionList, backgroundSizeList, fontFamilyList, fontSizeList, rootLineKeepSameInCurveList } from '@/config'
import ImgUpload from '@/components/ImgUpload' import ImgUpload from '@/components/ImgUpload'
import { storeConfig } from '@/api' import { storeConfig } from '@/api'
import { mapState, mapMutations } from 'vuex' import { mapState, mapMutations } from 'vuex'
@ -667,6 +689,7 @@ export default {
lineColor: '', lineColor: '',
lineWidth: '', lineWidth: '',
lineStyle: '', lineStyle: '',
rootLineKeepSameInCurve: '',
generalizationLineWidth: '', generalizationLineWidth: '',
generalizationLineColor: '', generalizationLineColor: '',
associativeLineColor: '', associativeLineColor: '',
@ -716,6 +739,9 @@ export default {
lineStyleList() { lineStyleList() {
return lineStyleList[this.$i18n.locale] || lineStyleList.zh return lineStyleList[this.$i18n.locale] || lineStyleList.zh
}, },
rootLineKeepSameInCurveList() {
return rootLineKeepSameInCurveList[this.$i18n.locale] || rootLineKeepSameInCurveList.zh
},
backgroundRepeatList() { backgroundRepeatList() {
return backgroundRepeatList[this.$i18n.locale] || backgroundRepeatList.zh return backgroundRepeatList[this.$i18n.locale] || backgroundRepeatList.zh
}, },
@ -759,6 +785,7 @@ export default {
'backgroundColor', 'backgroundColor',
'lineWidth', 'lineWidth',
'lineStyle', 'lineStyle',
'rootLineKeepSameInCurve',
'lineColor', 'lineColor',
'generalizationLineWidth', 'generalizationLineWidth',
'generalizationLineColor', 'generalizationLineColor',