From 5d1f460a94fff36065f124303d8e7daecfa3e697 Mon Sep 17 00:00:00 2001 From: wanglin2 <1013335014@qq.com> Date: Sat, 2 Sep 2023 20:58:20 +0800 Subject: [PATCH] =?UTF-8?q?Feat:=E9=B1=BC=E9=AA=A8=E5=9B=BE=E6=94=AF?= =?UTF-8?q?=E6=8C=81=E8=AE=BE=E7=BD=AE=E8=8A=82=E7=82=B9margin?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- simple-mind-map/src/layouts/Fishbone.js | 22 +++++++++------ simple-mind-map/src/layouts/fishboneUtils.js | 29 ++++++++++++-------- simple-mind-map/src/themes/classic.js | 1 + 3 files changed, 32 insertions(+), 20 deletions(-) diff --git a/simple-mind-map/src/layouts/Fishbone.js b/simple-mind-map/src/layouts/Fishbone.js index b11c2634..0706caba 100644 --- a/simple-mind-map/src/layouts/Fishbone.js +++ b/simple-mind-map/src/layouts/Fishbone.js @@ -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 ${ diff --git a/simple-mind-map/src/layouts/fishboneUtils.js b/simple-mind-map/src/layouts/fishboneUtils.js index ec47f1e5..e95e2ec2 100644 --- a/simple-mind-map/src/layouts/fishboneUtils.js +++ b/simple-mind-map/src/layouts/fishboneUtils.js @@ -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 diff --git a/simple-mind-map/src/themes/classic.js b/simple-mind-map/src/themes/classic.js index e58a7d3d..792026cf 100644 --- a/simple-mind-map/src/themes/classic.js +++ b/simple-mind-map/src/themes/classic.js @@ -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)',