openSourceRemote/mind-map
2
0
Fork 0
Code Issues Pull Requests 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值 // 计算二级节点的top值
if (parent._node.isRoot) { if (parent._node.isRoot) {
let marginY = this.getMarginY(layerIndex)
if (this.checkIsTop(newNode)) { if (this.checkIsTop(newNode)) {
newNode.top = parent._node.top - newNode.height newNode.top = parent._node.top - newNode.height - marginY
} else { } 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, null,
(node, parent, isRoot, layerIndex) => { (node, parent, isRoot, layerIndex) => {
if (node.isRoot) { if (node.isRoot) {
let topTotalLeft = node.left + node.width + node.height let marginX = this.getMarginX(layerIndex + 1)
let bottomTotalLeft = node.left + node.width + node.height let topTotalLeft = node.left + node.width + node.height + marginX
let bottomTotalLeft = node.left + node.width + node.height + marginX
node.children.forEach(item => { node.children.forEach(item => {
if (this.checkIsTop(item)) { if (this.checkIsTop(item)) {
item.left = topTotalLeft item.left = topTotalLeft
topTotalLeft += item.width topTotalLeft += item.width + marginX
} else { } else {
item.left = bottomTotalLeft + 20 item.left = bottomTotalLeft + 20
bottomTotalLeft += item.width bottomTotalLeft += item.width + marginX
} }
}) })
} }
@ -154,9 +156,10 @@ class Fishbone extends Base {
getNodeAreaHeight(node) { getNodeAreaHeight(node) {
let totalHeight = 0 let totalHeight = 0
let loop = node => { let loop = node => {
let marginY = this.getMarginY(node.layerIndex)
totalHeight += totalHeight +=
node.height + node.height +
(this.getNodeActChildrenLength(node) > 0 ? node.expandBtnSize : 0) (this.getNodeActChildrenLength(node) > 0 ? node.expandBtnSize : 0) + marginY
if (node.children.length) { if (node.children.length) {
node.children.forEach(item => { node.children.forEach(item => {
loop(item) loop(item)
@ -244,8 +247,9 @@ class Fishbone extends Base {
maxx = item.left maxx = item.left
} }
// 水平线段到二级节点的连线 // 水平线段到二级节点的连线
let marginY = this.getMarginY(item.layerIndex)
let nodeLineX = item.left 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 offsetX = offset / Math.tan(degToRad(this.mindMap.opt.fishboneDeg))
let line = this.draw.path() let line = this.draw.path()
if (this.checkIsTop(item)) { if (this.checkIsTop(item)) {
@ -267,7 +271,7 @@ class Fishbone extends Base {
}) })
// 从根节点出发的水平线 // 从根节点出发的水平线
let nodeHalfTop = node.top + node.height / 2 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() let line = this.draw.path()
line.plot( line.plot(
`M ${node.left + node.width},${nodeHalfTop} L ${ `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 }) { computedLeftTopValue({ layerIndex, node, ctx }) {
if (layerIndex >= 1 && node.children) { if (layerIndex >= 1 && node.children) {
// 遍历三级及以下节点的子节点 // 遍历三级及以下节点的子节点
let marginY = ctx.getMarginY(layerIndex + 1)
let startLeft = node.left + node.width * ctx.childIndent let startLeft = node.left + node.width * ctx.childIndent
let totalTop = let totalTop =
node.top + node.top +
node.height + node.height +
(ctx.getNodeActChildrenLength(node) > 0 ? node.expandBtnSize : 0) (ctx.getNodeActChildrenLength(node) > 0 ? node.expandBtnSize : 0) + marginY
node.children.forEach(item => { node.children.forEach(item => {
item.left = startLeft item.left = startLeft
item.top += totalTop item.top += totalTop
totalTop += totalTop +=
item.height + 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 // 调整top
let len = node.children.length let len = node.children.length
let marginY = ctx.getMarginY(layerIndex + 1)
// 调整三级及以下节点的top // 调整三级及以下节点的top
if (parent && !parent.isRoot && len > 0) { if (parent && !parent.isRoot && len > 0) {
let totalHeight = node.children.reduce((h, item) => { let totalHeight = node.children.reduce((h, item) => {
return ( return (
h + h +
item.height + item.height +
(ctx.getNodeActChildrenLength(item) > 0 ? item.expandBtnSize : 0) (ctx.getNodeActChildrenLength(item) > 0 ? item.expandBtnSize : 0) + marginY
) )
}, 0) }, 0)
ctx.updateBrothersTop(node, totalHeight) ctx.updateBrothersTop(node, totalHeight)
@ -80,7 +82,8 @@ export default {
// 将二级节点的子节点移到上方 // 将二级节点的子节点移到上方
if (parent && parent.isRoot) { if (parent && parent.isRoot) {
// 遍历二级节点的子节点 // 遍历二级节点的子节点
let totalHeight = node.expandBtnSize let marginY = ctx.getMarginY(node.layerIndex + 1)
let totalHeight = node.expandBtnSize + marginY
node.children.forEach(item => { node.children.forEach(item => {
// 调整top // 调整top
let nodeTotalHeight = ctx.getNodeAreaHeight(item) let nodeTotalHeight = ctx.getNodeAreaHeight(item)
@ -134,13 +137,14 @@ export default {
} }
}, },
computedLeftTopValue({ layerIndex, node, ctx }) { computedLeftTopValue({ layerIndex, node, ctx }) {
let marginY = ctx.getMarginY(layerIndex + 1)
if (layerIndex === 1 && node.children) { if (layerIndex === 1 && node.children) {
// 遍历二级节点的子节点 // 遍历二级节点的子节点
let startLeft = node.left + node.width * ctx.childIndent let startLeft = node.left + node.width * ctx.childIndent
let totalTop = let totalTop =
node.top + node.top +
node.height + node.height +
(ctx.getNodeActChildrenLength(node) > 0 ? node.expandBtnSize : 0) (ctx.getNodeActChildrenLength(node) > 0 ? node.expandBtnSize : 0) + marginY
node.children.forEach(item => { node.children.forEach(item => {
item.left = startLeft item.left = startLeft
@ -149,7 +153,7 @@ export default {
(ctx.getNodeActChildrenLength(item) > 0 ? item.expandBtnSize : 0) (ctx.getNodeActChildrenLength(item) > 0 ? item.expandBtnSize : 0)
totalTop += totalTop +=
item.height + item.height +
(ctx.getNodeActChildrenLength(item) > 0 ? item.expandBtnSize : 0) (ctx.getNodeActChildrenLength(item) > 0 ? item.expandBtnSize : 0) + marginY
}) })
} }
if (layerIndex > 1 && node.children) { if (layerIndex > 1 && node.children) {
@ -157,25 +161,26 @@ export default {
let startLeft = node.left + node.width * ctx.childIndent let startLeft = node.left + node.width * ctx.childIndent
let totalTop = let totalTop =
node.top - node.top -
(ctx.getNodeActChildrenLength(node) > 0 ? node.expandBtnSize : 0) (ctx.getNodeActChildrenLength(node) > 0 ? node.expandBtnSize : 0) - marginY
node.children.forEach(item => { node.children.forEach(item => {
item.left = startLeft item.left = startLeft
item.top = totalTop - item.height item.top = totalTop - item.height
totalTop -= totalTop -=
item.height + item.height +
(ctx.getNodeActChildrenLength(item) > 0 ? item.expandBtnSize : 0) (ctx.getNodeActChildrenLength(item) > 0 ? item.expandBtnSize : 0) + marginY
}) })
} }
}, },
adjustLeftTopValueBefore({ node, ctx, layerIndex }) { adjustLeftTopValueBefore({ node, ctx, layerIndex }) {
// 调整top // 调整top
let marginY = ctx.getMarginY(layerIndex + 1)
let len = node.children.length let len = node.children.length
if (layerIndex > 2 && len > 0) { if (layerIndex > 2 && len > 0) {
let totalHeight = node.children.reduce((h, item) => { let totalHeight = node.children.reduce((h, item) => {
return ( return (
h + h +
item.height + item.height +
(ctx.getNodeActChildrenLength(item) > 0 ? item.expandBtnSize : 0) (ctx.getNodeActChildrenLength(item) > 0 ? item.expandBtnSize : 0) + marginY
) )
}, 0) }, 0)
ctx.updateBrothersTop(node, -totalHeight) ctx.updateBrothersTop(node, -totalHeight)
@ -185,6 +190,7 @@ export default {
// 将二级节点的子节点移到上方 // 将二级节点的子节点移到上方
if (parent && parent.isRoot) { if (parent && parent.isRoot) {
// 遍历二级节点的子节点 // 遍历二级节点的子节点
let marginY = ctx.getMarginY(node.layerIndex + 1)
let totalHeight = 0 let totalHeight = 0
let totalHeight2 = node.expandBtnSize let totalHeight2 = node.expandBtnSize
node.children.forEach(item => { node.children.forEach(item => {
@ -192,11 +198,12 @@ export default {
let hasChildren = ctx.getNodeActChildrenLength(item) > 0 let hasChildren = ctx.getNodeActChildrenLength(item) > 0
let nodeTotalHeight = ctx.getNodeAreaHeight(item) let nodeTotalHeight = ctx.getNodeAreaHeight(item)
let offset = let offset =
hasChildren > 0 hasChildren
? nodeTotalHeight - ? nodeTotalHeight -
item.height - item.height -
(hasChildren ? item.expandBtnSize : 0) (hasChildren ? item.expandBtnSize : 0)
: 0 : 0
offset -= (hasChildren ? marginY : 0)
let _top = totalHeight + offset let _top = totalHeight + offset
let _left = item.left let _left = item.left
item.top += _top 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=', 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAIAAAACDbGyAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyRpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoTWFjaW50b3NoKSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDowQzg5QTQ0NDhENzgxMUUzOENGREE4QTg0RDgzRTZDNyIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDowQzg5QTQ0NThENzgxMUUzOENGREE4QTg0RDgzRTZDNyI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOkMwOEQ1NDRGOEQ3NzExRTM4Q0ZEQThBODREODNFNkM3IiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOkMwOEQ1NDUwOEQ3NzExRTM4Q0ZEQThBODREODNFNkM3Ii8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+e9P33AAAACVJREFUeNpisXJ0YUACTAyoAMr/+eM7EGGRZ4FQ7BycEAZAgAEAHbEGtkoQm/wAAAAASUVORK5CYII=',
// 背景重复 // 背景重复
backgroundRepeat: 'repeat', backgroundRepeat: 'repeat',
backgroundSize: 'auto',
// 根节点样式 // 根节点样式
root: { root: {
fillColor: 'rgb(233, 223, 152)', fillColor: 'rgb(233, 223, 152)',