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

Feat:鱼骨图支持设置节点margin

Browse Source
This commit is contained in:
wanglin2 2023-09-02 20:58:20 +08:00
parent 075e578bb4
commit 5d1f460a94
3 changed files with 32 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -56,10 +56,11 @@ class Fishbone extends Base {
}
// 计算二级节点的top值
if (parent._node.isRoot) {
let marginY = this.getMarginY(layerIndex)
if (this.checkIsTop(newNode)) {
newNode.top = parent._node.top - newNode.height
newNode.top = parent._node.top - newNode.height - marginY
} else {
newNode.top = parent._node.top + parent._node.height
newNode.top = parent._node.top + parent._node.height + marginY
}
}
}
@ -80,15 +81,16 @@ class Fishbone extends Base {
null,
(node, parent, isRoot, layerIndex) => {
if (node.isRoot) {
let topTotalLeft = node.left + node.width + node.height
let bottomTotalLeft = node.left + node.width + node.height
let marginX = this.getMarginX(layerIndex + 1)
let topTotalLeft = node.left + node.width + node.height + marginX
let bottomTotalLeft = node.left + node.width + node.height + marginX
node.children.forEach(item => {
if (this.checkIsTop(item)) {
item.left = topTotalLeft
topTotalLeft += item.width
topTotalLeft += item.width + marginX
} else {
item.left = bottomTotalLeft + 20
bottomTotalLeft += item.width
bottomTotalLeft += item.width + marginX
}
})
}
@ -154,9 +156,10 @@ class Fishbone extends Base {
getNodeAreaHeight(node) {
let totalHeight = 0
let loop = node => {
let marginY = this.getMarginY(node.layerIndex)
totalHeight +=
node.height +
(this.getNodeActChildrenLength(node) > 0 ? node.expandBtnSize : 0)
(this.getNodeActChildrenLength(node) > 0 ? node.expandBtnSize : 0) + marginY
if (node.children.length) {
node.children.forEach(item => {
loop(item)
@ -244,8 +247,9 @@ class Fishbone extends Base {
maxx = item.left
}
// 水平线段到二级节点的连线
let marginY = this.getMarginY(item.layerIndex)
let nodeLineX = item.left
let offset = node.height / 2
let offset = node.height / 2 + marginY
let offsetX = offset / Math.tan(degToRad(this.mindMap.opt.fishboneDeg))
let line = this.draw.path()
if (this.checkIsTop(item)) {
@ -267,7 +271,7 @@ class Fishbone extends Base {
})
// 从根节点出发的水平线
let nodeHalfTop = node.top + node.height / 2
let offset = node.height / 2
let offset = node.height / 2 + this.getMarginY(node.layerIndex + 1)
let line = this.draw.path()
line.plot(
`M ${node.left + node.width},${nodeHalfTop} L ${

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

@ -47,30 +47,32 @@ export default {
computedLeftTopValue({ layerIndex, node, ctx }) {
if (layerIndex >= 1 && node.children) {
// 遍历三级及以下节点的子节点
let marginY = ctx.getMarginY(layerIndex + 1)
let startLeft = node.left + node.width * ctx.childIndent
let totalTop =
node.top +
node.height +
(ctx.getNodeActChildrenLength(node) > 0 ? node.expandBtnSize : 0)
(ctx.getNodeActChildrenLength(node) > 0 ? node.expandBtnSize : 0) + marginY
node.children.forEach(item => {
item.left = startLeft
item.top += totalTop
totalTop +=
item.height +
(ctx.getNodeActChildrenLength(item) > 0 ? item.expandBtnSize : 0)
(ctx.getNodeActChildrenLength(item) > 0 ? item.expandBtnSize : 0) + marginY
})
}
},
adjustLeftTopValueBefore({ node, parent, ctx }) {
adjustLeftTopValueBefore({ node, parent, ctx, layerIndex }) {
// 调整top
let len = node.children.length
let marginY = ctx.getMarginY(layerIndex + 1)
// 调整三级及以下节点的top
if (parent && !parent.isRoot && len > 0) {
let totalHeight = node.children.reduce((h, item) => {
return (
h +
item.height +
(ctx.getNodeActChildrenLength(item) > 0 ? item.expandBtnSize : 0)
(ctx.getNodeActChildrenLength(item) > 0 ? item.expandBtnSize : 0) + marginY
)
}, 0)
ctx.updateBrothersTop(node, totalHeight)
@ -80,7 +82,8 @@ export default {
// 将二级节点的子节点移到上方
if (parent && parent.isRoot) {
// 遍历二级节点的子节点
let totalHeight = node.expandBtnSize
let marginY = ctx.getMarginY(node.layerIndex + 1)
let totalHeight = node.expandBtnSize + marginY
node.children.forEach(item => {
// 调整top
let nodeTotalHeight = ctx.getNodeAreaHeight(item)
@ -134,13 +137,14 @@ export default {
}
},
computedLeftTopValue({ layerIndex, node, ctx }) {
let marginY = ctx.getMarginY(layerIndex + 1)
if (layerIndex === 1 && node.children) {
// 遍历二级节点的子节点
let startLeft = node.left + node.width * ctx.childIndent
let totalTop =
node.top +
node.height +
(ctx.getNodeActChildrenLength(node) > 0 ? node.expandBtnSize : 0)
(ctx.getNodeActChildrenLength(node) > 0 ? node.expandBtnSize : 0) + marginY
node.children.forEach(item => {
item.left = startLeft
@ -149,7 +153,7 @@ export default {
(ctx.getNodeActChildrenLength(item) > 0 ? item.expandBtnSize : 0)
totalTop +=
item.height +
(ctx.getNodeActChildrenLength(item) > 0 ? item.expandBtnSize : 0)
(ctx.getNodeActChildrenLength(item) > 0 ? item.expandBtnSize : 0) + marginY
})
}
if (layerIndex > 1 && node.children) {
@ -157,25 +161,26 @@ export default {
let startLeft = node.left + node.width * ctx.childIndent
let totalTop =
node.top -
(ctx.getNodeActChildrenLength(node) > 0 ? node.expandBtnSize : 0)
(ctx.getNodeActChildrenLength(node) > 0 ? node.expandBtnSize : 0) - marginY
node.children.forEach(item => {
item.left = startLeft
item.top = totalTop - item.height
totalTop -=
item.height +
(ctx.getNodeActChildrenLength(item) > 0 ? item.expandBtnSize : 0)
(ctx.getNodeActChildrenLength(item) > 0 ? item.expandBtnSize : 0) + marginY
})
}
},
adjustLeftTopValueBefore({ node, ctx, layerIndex }) {
// 调整top
let marginY = ctx.getMarginY(layerIndex + 1)
let len = node.children.length
if (layerIndex > 2 && len > 0) {
let totalHeight = node.children.reduce((h, item) => {
return (
h +
item.height +
(ctx.getNodeActChildrenLength(item) > 0 ? item.expandBtnSize : 0)
(ctx.getNodeActChildrenLength(item) > 0 ? item.expandBtnSize : 0) + marginY
)
}, 0)
ctx.updateBrothersTop(node, -totalHeight)
@ -185,6 +190,7 @@ export default {
// 将二级节点的子节点移到上方
if (parent && parent.isRoot) {
// 遍历二级节点的子节点
let marginY = ctx.getMarginY(node.layerIndex + 1)
let totalHeight = 0
let totalHeight2 = node.expandBtnSize
node.children.forEach(item => {
@ -192,11 +198,12 @@ export default {
let hasChildren = ctx.getNodeActChildrenLength(item) > 0
let nodeTotalHeight = ctx.getNodeAreaHeight(item)
let offset =
hasChildren > 0
hasChildren
? nodeTotalHeight -
item.height -
(hasChildren ? item.expandBtnSize : 0)
: 0
offset -= (hasChildren ? marginY : 0)
let _top = totalHeight + offset
let _left = item.left
item.top += _top

1
simple-mind-map/src/themes/classic.js
View File

@ -18,6 +18,7 @@ export default merge(defaultTheme, {
'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAIAAAACDbGyAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyRpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoTWFjaW50b3NoKSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDowQzg5QTQ0NDhENzgxMUUzOENGREE4QTg0RDgzRTZDNyIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDowQzg5QTQ0NThENzgxMUUzOENGREE4QTg0RDgzRTZDNyI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOkMwOEQ1NDRGOEQ3NzExRTM4Q0ZEQThBODREODNFNkM3IiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOkMwOEQ1NDUwOEQ3NzExRTM4Q0ZEQThBODREODNFNkM3Ii8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+e9P33AAAACVJREFUeNpisXJ0YUACTAyoAMr/+eM7EGGRZ4FQ7BycEAZAgAEAHbEGtkoQm/wAAAAASUVORK5CYII=',
// 背景重复
backgroundRepeat: 'repeat',
backgroundSize: 'auto',
// 根节点样式
root: {
fillColor: 'rgb(233, 223, 152)',