coosld/mind-map
1
0
Fork 0
mirror of https://github.com/wanglin2/mind-map.git synced 2026-02-27 21:37:54 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

新增支持节点横线风格

Browse Source
This commit is contained in:
wanglin25 2023-01-05 16:12:31 +08:00
parent 47328236f7
commit a837a6fb64
12 changed files with 148 additions and 38 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
simple-mind-map/src/Drag.js
View File

@ -274,7 +274,8 @@ class Drag extends Base {
}
}
// 检测兄弟节点位置
if (!this.prevNode && !this.nextNode && !node.isRoot) {// && this.node.isBrother(node)
if (!this.prevNode && !this.nextNode && !node.isRoot) {
// && this.node.isBrother(node)
if (left <= checkRight && right >= this.cloneNodeLeft) {
if (this.cloneNodeTop > bottom && this.cloneNodeTop <= bottom + 10) {
this.prevNode = node

25
simple-mind-map/src/Node.js
View File

@ -584,7 +584,10 @@ class Node {
* @Desc: 获取节点形状
*/
getShape() {
return this.style.getStyle('shape', false, false)
// 节点使用功能横线风格的话不支持设置形状，直接使用默认的矩形
return this.themeConfig.nodeUseLineStyle
? 'rectangle'
: this.style.getStyle('shape', false, false)
}
/**
@ -770,12 +773,28 @@ class Node {
}
this.renderGeneralization()
let t = this.group.transform()
// 节点使用横线风格，有两种结构需要调整节点的位置
let nodeUseLineStyleOffset = 0
if (
['logicalStructure', 'mindMap'].includes(this.mindMap.opt.layout) &&
!this.isRoot &&
!this.isGeneralization &&
this.themeConfig.nodeUseLineStyle
) {
nodeUseLineStyleOffset = this.height / 2
}
if (!layout) {
this.group
.animate(300)
.translate(this.left - t.translateX, this.top - t.translateY)
.translate(
this.left - t.translateX,
this.top - t.translateY - nodeUseLineStyleOffset
)
} else {
this.group.translate(this.left - t.translateX, this.top - t.translateY)
this.group.translate(
this.left - t.translateX,
this.top - t.translateY - nodeUseLineStyleOffset
)
}
}

2
simple-mind-map/src/Render.js
View File

@ -561,7 +561,6 @@ class Render {
nodeBorthers.splice(nodeIndex, 1)
nodeParent.nodeData.children.splice(nodeIndex, 1)
// 目标节点
let existParent = exist.parent
let existBorthers = existParent.children
@ -598,7 +597,6 @@ class Render {
nodeBorthers.splice(nodeIndex, 1)
nodeParent.nodeData.children.splice(nodeIndex, 1)
// 目标节点
let existParent = exist.parent
let existBorthers = existParent.children

26
simple-mind-map/src/Style.js
View File

@ -115,15 +115,23 @@ class Style {
* @Desc: 矩形外的其他形状
*/
shape(node) {
node
.fill({
color: this.merge('fillColor')
})
.stroke({
color: this.merge('borderColor'),
width: this.merge('borderWidth'),
dasharray: this.merge('borderDasharray')
})
node.fill({
color: this.merge('fillColor')
})
// 节点使用横线样式，不需要渲染非激活状态的边框样式
if (
!this.ctx.isRoot &&
!this.ctx.isGeneralization &&
this.themeConfig.nodeUseLineStyle &&
!this.ctx.nodeData.data.isActive
) {
return
}
node.stroke({
color: this.merge('borderColor'),
width: this.merge('borderWidth'),
dasharray: this.merge('borderDasharray')
})
}
/**

17
simple-mind-map/src/layouts/CatalogOrganization.js
View File

@ -299,9 +299,13 @@ class CatalogOrganization extends Base {
if (x2 > maxx) {
maxx = x2
}
let path = `M ${x2},${y1 + s1} L ${x2},${
y1 + s1 > y2 ? y2 + item.height : y2
}`
// 节点使用横线风格，需要额外渲染横线
let nodeUseLineStylePath = this.mindMap.themeConfig.nodeUseLineStyle
? ` L ${item.left},${y2} L ${item.left + item.width},${y2}`
: ''
let path =
`M ${x2},${y1 + s1} L ${x2},${y1 + s1 > y2 ? y2 + item.height : y2}` +
nodeUseLineStylePath
// 竖线
lines[index].plot(path)
style && style(lines[index], item)
@ -365,6 +369,13 @@ class CatalogOrganization extends Base {
}
path = `M ${x2},${y2} L ${_left},${y2}`
}
// 节点使用横线风格，需要额外渲染横线
let nodeUseLineStylePath = this.mindMap.themeConfig.nodeUseLineStyle
? ` L ${_left},${y2 - item.height / 2} L ${_left},${
y2 + item.height / 2
}`
: ''
path += nodeUseLineStylePath
lines[index].plot(path)
style && style(lines[index], item)
})

33
simple-mind-map/src/layouts/LogicalStructure.js
View File

@ -209,9 +209,13 @@ class LogicalStructure extends Base {
let y1 = top + height / 2
let x2 = item.left
let y2 = item.top + item.height / 2
let path = `M ${x1},${y1} L ${x1 + s1},${y1} L ${
x1 + s1
},${y2} L ${x2},${y2}`
// 节点使用横线风格，需要额外渲染横线
let nodeUseLineStyleOffset = this.mindMap.themeConfig.nodeUseLineStyle
? item.width
: 0
let path = `M ${x1},${y1} L ${x1 + s1},${y1} L ${x1 + s1},${y2} L ${
x2 + nodeUseLineStyleOffset
},${y2}`
lines[index].plot(path)
style && style(lines[index], item)
})
@ -234,7 +238,11 @@ class LogicalStructure extends Base {
let y1 = top + height / 2
let x2 = item.left
let y2 = item.top + item.height / 2
let path = `M ${x1},${y1} L ${x2},${y2}`
// 节点使用横线风格，需要额外渲染横线
let nodeUseLineStylePath = this.mindMap.themeConfig.nodeUseLineStyle
? ` L ${item.left + item.width},${y2}`
: ''
let path = `M ${x1},${y1} L ${x2},${y2}` + nodeUseLineStylePath
lines[index].plot(path)
style && style(lines[index], item)
})
@ -258,10 +266,14 @@ class LogicalStructure extends Base {
let x2 = item.left
let y2 = item.top + item.height / 2
let path = ''
// 节点使用横线风格，需要额外渲染横线
let nodeUseLineStylePath = this.mindMap.themeConfig.nodeUseLineStyle
? ` L ${item.left + item.width},${y2}`
: ''
if (node.isRoot) {
path = this.quadraticCurvePath(x1, y1, x2, y2)
path = this.quadraticCurvePath(x1, y1, x2, y2) + nodeUseLineStylePath
} else {
path = this.cubicBezierPath(x1, y1, x2, y2)
path = this.cubicBezierPath(x1, y1, x2, y2) + nodeUseLineStylePath
}
lines[index].plot(path)
style && style(lines[index], item)
@ -276,7 +288,14 @@ class LogicalStructure extends Base {
renderExpandBtn(node, btn) {
let { width, height } = node
let { translateX, translateY } = btn.transform()
btn.translate(width - translateX, height / 2 - translateY)
// 节点使用横线风格，需要调整展开收起按钮位置
let nodeUseLineStyleOffset = this.mindMap.themeConfig.nodeUseLineStyle
? height / 2
: 0
btn.translate(
width - translateX,
height / 2 - translateY + nodeUseLineStyleOffset
)
}
/**

41
simple-mind-map/src/layouts/MindMap.js
View File

@ -245,9 +245,14 @@ class MindMap extends Base {
node.children.forEach((item, index) => {
let x1 = 0
let _s = 0
// 节点使用横线风格，需要额外渲染横线
let nodeUseLineStyleOffset = this.mindMap.themeConfig.nodeUseLineStyle
? item.width
: 0
if (item.dir === 'left') {
_s = -s1
x1 = node.layerIndex === 0 ? left : left - expandBtnSize
nodeUseLineStyleOffset = -nodeUseLineStyleOffset
} else {
_s = s1
x1 = node.layerIndex === 0 ? left + width : left + width + expandBtnSize
@ -255,9 +260,9 @@ class MindMap extends Base {
let y1 = top + height / 2
let x2 = item.dir === 'left' ? item.left + item.width : item.left
let y2 = item.top + item.height / 2
let path = `M ${x1},${y1} L ${x1 + _s},${y1} L ${
x1 + _s
},${y2} L ${x2},${y2}`
let path = `M ${x1},${y1} L ${x1 + _s},${y1} L ${x1 + _s},${y2} L ${
x2 + nodeUseLineStyleOffset
},${y2}`
lines[index].plot(path)
style && style(lines[index], item)
})
@ -284,7 +289,16 @@ class MindMap extends Base {
let y1 = top + height / 2
let x2 = item.dir === 'left' ? item.left + item.width : item.left
let y2 = item.top + item.height / 2
let path = `M ${x1},${y1} L ${x2},${y2}`
// 节点使用横线风格，需要额外渲染横线
let nodeUseLineStylePath = ''
if (this.mindMap.themeConfig.nodeUseLineStyle) {
if (item.dir === 'left') {
nodeUseLineStylePath = ` L ${item.left},${y2}`
} else {
nodeUseLineStylePath = ` L ${item.left + item.width},${y2}`
}
}
let path = `M ${x1},${y1} L ${x2},${y2}` + nodeUseLineStylePath
lines[index].plot(path)
style && style(lines[index], item)
})
@ -312,10 +326,19 @@ class MindMap extends Base {
let x2 = item.dir === 'left' ? item.left + item.width : item.left
let y2 = item.top + item.height / 2
let path = ''
// 节点使用横线风格，需要额外渲染横线
let nodeUseLineStylePath = ''
if (this.mindMap.themeConfig.nodeUseLineStyle) {
if (item.dir === 'left') {
nodeUseLineStylePath = ` L ${item.left},${y2}`
} else {
nodeUseLineStylePath = ` L ${item.left + item.width},${y2}`
}
}
if (node.isRoot) {
path = this.quadraticCurvePath(x1, y1, x2, y2)
path = this.quadraticCurvePath(x1, y1, x2, y2) + nodeUseLineStylePath
} else {
path = this.cubicBezierPath(x1, y1, x2, y2)
path = this.cubicBezierPath(x1, y1, x2, y2) + nodeUseLineStylePath
}
lines[index].plot(path)
style && style(lines[index], item)
@ -330,8 +353,12 @@ class MindMap extends Base {
renderExpandBtn(node, btn) {
let { width, height, expandBtnSize } = node
let { translateX, translateY } = btn.transform()
// 节点使用横线风格，需要调整展开收起按钮位置
let nodeUseLineStyleOffset = this.mindMap.themeConfig.nodeUseLineStyle
? height / 2
: 0
let x = (node.dir === 'left' ? 0 - expandBtnSize : width) - translateX
let y = height / 2 - translateY
let y = height / 2 - translateY + nodeUseLineStyleOffset
btn.translate(x, y)
}

12
simple-mind-map/src/layouts/OrganizationStructure.js
View File

@ -205,7 +205,11 @@ class OrganizationStructure extends Base {
node.children.forEach((item, index) => {
let x2 = item.left + item.width / 2
let y2 = item.top
let path = `M ${x1},${y1} L ${x2},${y2}`
// 节点使用横线风格，需要额外渲染横线
let nodeUseLineStylePath = this.mindMap.themeConfig.nodeUseLineStyle
? ` L ${item.left},${y2} L ${item.left + item.width},${y2}`
: ''
let path = `M ${x1},${y1} L ${x2},${y2}` + nodeUseLineStylePath
lines[index].plot(path)
style && style(lines[index], item)
})
@ -238,7 +242,11 @@ class OrganizationStructure extends Base {
if (x2 > maxx) {
maxx = x2
}
let path = `M ${x2},${y1 + s1} L ${x2},${y2}`
// 节点使用横线风格，需要额外渲染横线
let nodeUseLineStylePath = this.mindMap.themeConfig.nodeUseLineStyle
? ` L ${item.left},${y2} L ${item.left + item.width},${y2}`
: ''
let path = `M ${x2},${y1 + s1} L ${x2},${y2}` + nodeUseLineStylePath
lines[index].plot(path)
style && style(lines[index], item)
})

2
simple-mind-map/src/themes/default.js
View File

@ -35,6 +35,8 @@ export default {
backgroundImage: 'none',
// 背景重复
backgroundRepeat: 'no-repeat',
// 节点使用横线样式
nodeUseLineStyle: false,
// 根节点样式
root: {
shape: 'rectangle',

4
web/src/lang/en_us.js
View File

@ -18,7 +18,9 @@ export default {
icon: 'Icon',
size: 'Size',
level2Node: 'Level2 node',
belowLevel2Node: 'Below level2 node'
belowLevel2Node: 'Below level2 node',
nodeBorderType: 'Node border style',
nodeUseLineStyle: 'Use only has bottom border style'
},
color: {
moreColor: 'More color'

4
web/src/lang/zh_cn.js
View File

@ -18,7 +18,9 @@ export default {
icon: '图标',
size: '大小',
level2Node: '二级节点',
belowLevel2Node: '三级及以下节点'
belowLevel2Node: '三级及以下节点',
nodeBorderType: '节点边框风格',
nodeUseLineStyle: '是否使用只有底边框的风格'
},
color: {
moreColor: '更多颜色'

17
web/src/pages/Edit/components/BaseStyle.vue
View File

@ -162,6 +162,17 @@
</el-select>
</div>
</div>
<!-- 节点边框风格 -->
<div class="title noTop">{{ $t('baseStyle.nodeBorderType') }}</div>
<div class="row">
<div class="rowItem">
<el-checkbox v-model="style.nodeUseLineStyle" @change="
value => {
update('nodeUseLineStyle', value)
}
">{{ $t('baseStyle.nodeUseLineStyle') }}</el-checkbox>
</div>
</div>
<!-- 内边距 -->
<div class="title noTop">{{ $t('baseStyle.nodePadding') }}</div>
<div class="row">
@ -341,7 +352,8 @@ export default {
backgroundImage: '',
backgroundRepeat: 'no-repeat',
marginX: 0,
marginY: 0
marginY: 0,
nodeUseLineStyle: false
}
}
},
@ -385,7 +397,8 @@ export default {
'imgMaxHeight',
'iconSize',
'backgroundImage',
'backgroundRepeat'
'backgroundRepeat',
'nodeUseLineStyle'
].forEach(key => {
this.style[key] = this.mindMap.getThemeConfig(key)
if (key === 'backgroundImage' && this.style[key] === 'none') {