优化鱼骨图布局

simple-mind-map/src/layouts/Fishbone.js

@@ -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 nodeLineX = item.left
-        let offset = item.height + node.height / 2
+        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},${
+            `M ${nodeLineX - offsetX},${item.top + item.height + offset} L ${item.left},${
-              item.top
+              item.top + item.height
             }`
           )
         } else {
           line.plot(
             `M ${nodeLineX - offsetX},${
-              item.top + item.height - offset
+              item.top - offset
-            } L ${nodeLineX},${item.top + item.height}`
+            } 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,

simple-mind-map/src/layouts/fishboneUtils.js

@@ -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 =
+          item.left = node.left + node.width * ctx.indent + (nodeTotalHeight + totalHeight) / Math.tan(degToRad(ctx.mindMap.opt.fishboneDeg))
-            (nodeTotalHeight + totalHeight) / Math.tan(degToRad(ctx.mindMap.opt.fishboneDeg))
-          item.left += offsetLeft
           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 =
+          item.left = node.left + node.width * ctx.indent + (nodeTotalHeight + totalHeight2) / Math.tan(degToRad(ctx.mindMap.opt.fishboneDeg))
-            (totalHeight2 + nodeTotalHeight) / Math.tan(degToRad(ctx.mindMap.opt.fishboneDeg))
-          item.left += offsetLeft
           totalHeight += offset
           totalHeight2 += nodeTotalHeight
           // 同步更新后代节点
           ctx.updateChildrenPro(item.children, {
             top: _top,
-            left: offsetLeft
+            left: item.left - _left
           })
         })
       }