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

优化鱼骨图布局

Browse Source
This commit is contained in:
wanglin2 2023-04-15 09:51:12 +08:00
parent 16fb8eb092
commit ab931901e2
2 changed files with 21 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
simple-mind-map/src/layouts/Fishbone.js
View File

@ -8,6 +8,8 @@ class Fishbone extends Base {
// 构造函数
constructor(opt = {}) {
super(opt)
this.indent = 0.3
this.childIndent = 0.5
}
// 布局
@ -239,21 +241,21 @@ class Fishbone extends Base {
maxx = item.left
}
// 水平线段到二级节点的连线
let nodeLineX = item.left + item.width * 0.3
let offset = item.height + node.height / 2
let nodeLineX = item.left
let offset = node.height / 2
let offsetX = offset / Math.tan(degToRad(this.mindMap.opt.fishboneDeg))
let line = this.draw.path()
if (this.checkIsTop(item)) {
line.plot(
`M ${nodeLineX - offsetX},${item.top + offset} L ${nodeLineX},${
item.top
`M ${nodeLineX - offsetX},${item.top + item.height + offset} L ${item.left},${
item.top + item.height
}`
)
} else {
line.plot(
`M ${nodeLineX - offsetX},${
item.top + item.height - offset
} L ${nodeLineX},${item.top + item.height}`
item.top - offset
} L ${nodeLineX},${item.top}`
)
}
node.style.line(line)
@ -277,7 +279,7 @@ class Fishbone extends Base {
let maxy = -Infinity
let miny = Infinity
let maxx = -Infinity
let x = node.left + node.width * 0.3
let x = node.left + node.width * this.indent
node.children.forEach((item, index) => {
if (item.left > maxx) {
maxx = item.left
@ -300,7 +302,7 @@ class Fishbone extends Base {
if (len >= 0) {
let line = this.draw.path()
expandBtnSize = len > 0 ? expandBtnSize : 0
let lineLength = maxx - node.left - node.width * 0.3
let lineLength = maxx - node.left - node.width * this.indent
lineLength = Math.max(lineLength, 0)
let params = {
node,

24
simple-mind-map/src/layouts/fishboneUtils.js
View File

@ -47,7 +47,7 @@ export default {
computedLeftTopValue({ layerIndex, node, ctx }) {
if (layerIndex >= 1 && node.children) {
// 遍历三级及以下节点的子节点
let startLeft = node.left + node.width * 0.5
let startLeft = node.left + node.width * ctx.childIndent
let totalTop =
node.top +
node.height +
@ -80,22 +80,21 @@ export default {
// 将二级节点的子节点移到上方
if (parent && parent.isRoot) {
// 遍历二级节点的子节点
let totalHeight = 0
let totalHeight = node.expandBtnSize
node.children.forEach(item => {
// 调整top
let nodeTotalHeight = ctx.getNodeAreaHeight(item)
let _top = item.top
let _left = item.left
item.top =
node.top - (item.top - node.top) - nodeTotalHeight + node.height
// 调整left
let offsetLeft =
(nodeTotalHeight + totalHeight) / Math.tan(degToRad(ctx.mindMap.opt.fishboneDeg))
item.left += offsetLeft
item.left = node.left + node.width * ctx.indent + (nodeTotalHeight + totalHeight) / Math.tan(degToRad(ctx.mindMap.opt.fishboneDeg))
totalHeight += nodeTotalHeight
// 同步更新后代节点
ctx.updateChildrenPro(item.children, {
top: item.top - _top,
left: offsetLeft
left: item.left - _left
})
})
}
@ -137,7 +136,7 @@ export default {
computedLeftTopValue({ layerIndex, node, ctx }) {
if (layerIndex === 1 && node.children) {
// 遍历二级节点的子节点
let startLeft = node.left + node.width * 0.5
let startLeft = node.left + node.width * ctx.childIndent
let totalTop =
node.top +
node.height +
@ -155,7 +154,7 @@ export default {
}
if (layerIndex > 1 && node.children) {
// 遍历三级及以下节点的子节点
let startLeft = node.left + node.width * 0.5
let startLeft = node.left + node.width * ctx.childIndent
let totalTop =
node.top -
(ctx.getNodeActChildrenLength(node) > 0 ? node.expandBtnSize : 0)
@ -187,7 +186,7 @@ export default {
if (parent && parent.isRoot) {
// 遍历二级节点的子节点
let totalHeight = 0
let totalHeight2 = 0
let totalHeight2 = node.expandBtnSize
node.children.forEach(item => {
// 调整top
let hasChildren = ctx.getNodeActChildrenLength(item) > 0
@ -199,17 +198,16 @@ export default {
(hasChildren ? item.expandBtnSize : 0)
: 0
let _top = totalHeight + offset
let _left = item.left
item.top += _top
// 调整left
let offsetLeft =
(totalHeight2 + nodeTotalHeight) / Math.tan(degToRad(ctx.mindMap.opt.fishboneDeg))
item.left += offsetLeft
item.left = node.left + node.width * ctx.indent + (nodeTotalHeight + totalHeight2) / Math.tan(degToRad(ctx.mindMap.opt.fishboneDeg))
totalHeight += offset
totalHeight2 += nodeTotalHeight
// 同步更新后代节点
ctx.updateChildrenPro(item.children, {
top: _top,
left: offsetLeft
left: item.left - _left
})
})
}