修改鱼骨结构

simple-mind-map/index.js

@@ -18,6 +18,8 @@ const defaultOpt = {
   readonly: false,
   // 布局
   layout: CONSTANTS.LAYOUT.LOGICAL_STRUCTURE,
+  // 如果结构为鱼骨图，那么可以通过该选项控制倾斜角度
+  fishboneDeg: 45,
   // 主题
   theme: 'default', // 内置主题：default（默认主题）
   // 主题配置，会和所选择的主题进行合并

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

@@ -54,11 +54,10 @@ class Fishbone extends Base {
           }
           // 计算二级节点的top值
           if (parent._node.isRoot) {
-            let marginY = this.getMarginY(layerIndex + 1)
             if (this.checkIsTop(newNode)) {
-              newNode.top = parent._node.top - newNode.height - marginY
+              newNode.top = parent._node.top - newNode.height
             } else {
-              newNode.top = parent._node.top + parent._node.height + marginY
+              newNode.top = parent._node.top + parent._node.height
             }
           }
         }
@@ -77,23 +76,21 @@ class Fishbone extends Base {
     walk(
       this.root,
       null,
-      (node, parent, isRoot, layerIndex, index) => {
+      (node, parent, isRoot, layerIndex) => {
-        let marginX = this.getMarginX(layerIndex + 1)
-        let marginY = this.getMarginY(layerIndex + 1)
         if (node.isRoot) {
-          let topTotalLeft = node.left + node.width + node.height + marginX
+          let topTotalLeft = node.left + node.width + node.height
-          let bottomTotalLeft = node.left + node.width + node.height + marginX
+          let bottomTotalLeft = node.left + node.width + node.height
           node.children.forEach(item => {
             if (this.checkIsTop(item)) {
               item.left = topTotalLeft
-              topTotalLeft += item.width + marginX
+              topTotalLeft += item.width
             } else {
               item.left = bottomTotalLeft + 20
-              bottomTotalLeft += item.width + marginX
+              bottomTotalLeft += item.width
             }
           })
         }
-        let params = { layerIndex, node, ctx: this, marginY }
+        let params = { layerIndex, node, ctx: this }
         if (this.checkIsTop(node)) {
           utils.top.computedLeftTopValue(params)
         } else {
@@ -114,17 +111,15 @@ class Fishbone extends Base {
         if (!node.nodeData.data.expand) {
           return
         }
-        let marginY = this.getMarginY(layerIndex + 1)
+        let params = { node, parent, layerIndex, ctx: this }
-        let params = { node, parent, layerIndex, ctx: this, marginY }
         if (this.checkIsTop(node)) {
           utils.top.adjustLeftTopValueBefore(params)
         } else {
           utils.bottom.adjustLeftTopValueBefore(params)
         }
       },
-      (node, parent, isRoot, layerIndex) => {
+      (node, parent) => {
-        let marginY = this.getMarginY(layerIndex + 1)
+        let params = { parent, node, ctx: this }
-        let params = { parent, node, ctx: this, marginY }
         if (this.checkIsTop(node)) {
           utils.top.adjustLeftTopValueAfter(params)
         } else {
@@ -159,8 +154,7 @@ class Fishbone extends Base {
     let loop = node => {
       totalHeight +=
         node.height +
-        (this.getNodeActChildrenLength(node) > 0 ? node.expandBtnSize : 0) +
+        (this.getNodeActChildrenLength(node) > 0 ? node.expandBtnSize : 0)
-        this.getMarginY(node.layerIndex)
       if (node.children.length) {
         node.children.forEach(item => {
           loop(item)
@@ -180,7 +174,6 @@ class Fishbone extends Base {
       if (item.children && item.children.length) {
         this.updateChildren(item.children, 'left', totalAddWidth)
       }
-      // let areaWidth = this.getNodeAreaWidth(item)
       let { left, right } = this.getNodeBoundaries(item, 'h')
       let areaWidth = right - left
       let difference = areaWidth - item.width
@@ -235,20 +228,20 @@ class Fishbone extends Base {
     if (node.layerIndex !== 1 && node.children.length <= 0) {
       return []
     }
-    let { left, top, width, height, expandBtnSize } = node
+    let { top, height, expandBtnSize } = node
     let len = node.children.length
     if (node.isRoot) {
       // 当前节点是根节点
       // 根节点的子节点是和根节点同一水平线排列
       let maxx = -Infinity
-      node.children.forEach((item, index) => {
+      node.children.forEach((item) => {
         if (item.left > maxx) {
           maxx = item.left
         }
         // 水平线段到二级节点的连线
         let nodeLineX = item.left + item.width * 0.3
-        let offset = item.height + node.height / 2 + this.getMarginY(item.layerIndex + 1)
+        let offset = item.height + node.height / 2
-        let offsetX = offset / Math.tan(degToRad(45))
+        let offsetX = offset / Math.tan(degToRad(this.mindMap.opt.fishboneDeg))
         let line = this.draw.path()
         if (this.checkIsTop(item)) {
           line.plot(
@@ -269,11 +262,11 @@ class Fishbone extends Base {
       })
       // 从根节点出发的水平线
       let nodeHalfTop = node.top + node.height / 2
-      let offset = node.height / 2 + this.getMarginY(node.layerIndex + 2)
+      let offset = node.height / 2
       let line = this.draw.path()
       line.plot(
         `M ${node.left + node.width},${nodeHalfTop} L ${
-          maxx - offset / Math.tan(degToRad(45))
+          maxx - offset / Math.tan(degToRad(this.mindMap.opt.fishboneDeg))
         },${nodeHalfTop}`
       )
       node.style.line(line)
@@ -318,7 +311,8 @@ class Fishbone extends Base {
           height,
           expandBtnSize,
           maxy,
-          miny
+          miny,
+          ctx: this
         }
         if (this.checkIsTop(node)) {
           utils.top.renderLine(params)

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

@@ -170,7 +170,7 @@ class Fishbone extends Base {
             item.top += _top
             // 调整left
             let offsetLeft =
-              (totalHeight2 + nodeTotalHeight) / Math.tan(degToRad(45))
+              (totalHeight2 + nodeTotalHeight) / Math.tan(degToRad(this.mindMap.opt.fishboneDeg))
             item.left += offsetLeft
             totalHeight += offset
             totalHeight2 += nodeTotalHeight
@@ -312,7 +312,7 @@ class Fishbone extends Base {
         if (node.parent && node.parent.isRoot) {
           line.plot(
             `M ${x},${top + height} L ${x + lineLength},${
-              top + height + Math.tan(degToRad(45)) * lineLength
+              top + height + Math.tan(degToRad(this.mindMap.opt.fishboneDeg)) * lineLength
             }`
           )
         } else {

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

@@ -140,7 +140,7 @@ class Fishbone extends Base {
               node.top - (item.top - node.top) - nodeTotalHeight + node.height
             // 调整left
             let offsetLeft =
-              (nodeTotalHeight + totalHeight) / Math.tan(degToRad(45))
+              (nodeTotalHeight + totalHeight) / Math.tan(degToRad(this.mindMap.opt.fishboneDeg))
             item.left += offsetLeft
             totalHeight += nodeTotalHeight
             // 同步更新后代节点
@@ -285,14 +285,14 @@ class Fishbone extends Base {
         ) {
           line.plot(
             `M ${x},${top} L ${x + lineLength},${
-              top - Math.tan(degToRad(45)) * lineLength
+              top - Math.tan(degToRad(this.mindMap.opt.fishboneDeg)) * lineLength
             }`
           )
         } else {
           if (node.parent && node.parent.isRoot) {
             line.plot(
               `M ${x},${top} L ${x + lineLength},${
-                top - Math.tan(degToRad(45)) * lineLength
+                top - Math.tan(degToRad(this.mindMap.opt.fishboneDeg)) * lineLength
               }`
             )
           } else {

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

@@ -31,38 +31,37 @@ export default {
       lineLength,
       height,
       expandBtnSize,
-      maxy
+      maxy,
+      ctx
     }) {
       if (node.parent && node.parent.isRoot) {
         line.plot(
           `M ${x},${top} L ${x + lineLength},${
-            top - Math.tan(degToRad(45)) * lineLength
+            top - Math.tan(degToRad(ctx.mindMap.opt.fishboneDeg)) * lineLength
           }`
         )
       } else {
         line.plot(`M ${x},${top + height + expandBtnSize} L ${x},${maxy}`)
       }
     },
-    computedLeftTopValue({ layerIndex, node, ctx, marginY }) {
+    computedLeftTopValue({ layerIndex, node, ctx }) {
       if (layerIndex >= 1 && node.children) {
         // 遍历三级及以下节点的子节点
         let startLeft = node.left + node.width * 0.5
         let totalTop =
           node.top +
           node.height +
-          marginY +
           (ctx.getNodeActChildrenLength(node) > 0 ? node.expandBtnSize : 0)
         node.children.forEach(item => {
           item.left = startLeft
           item.top += totalTop
           totalTop +=
             item.height +
-            marginY +
             (ctx.getNodeActChildrenLength(item) > 0 ? item.expandBtnSize : 0)
         })
       }
     },
-    adjustLeftTopValueBefore({ node, parent, ctx, marginY }) {
+    adjustLeftTopValueBefore({ node, parent, ctx }) {
       // 调整top
       let len = node.children.length
       // 调整三级及以下节点的top
@@ -73,11 +72,11 @@ export default {
             item.height +
             (ctx.getNodeActChildrenLength(item) > 0 ? item.expandBtnSize : 0)
           )
-        }, 0) + len * marginY
+        }, 0)
         ctx.updateBrothersTop(node, totalHeight)
       }
     },
-    adjustLeftTopValueAfter({ parent, node, ctx, marginY }) {
+    adjustLeftTopValueAfter({ parent, node, ctx }) {
       // 将二级节点的子节点移到上方
       if (parent && parent.isRoot) {
         // 遍历二级节点的子节点
@@ -87,10 +86,10 @@ export default {
           let nodeTotalHeight = ctx.getNodeAreaHeight(item)
           let _top = item.top
           item.top =
-            node.top - (item.top - node.top) - nodeTotalHeight + node.height + marginY
+            node.top - (item.top - node.top) - nodeTotalHeight + node.height
           // 调整left
           let offsetLeft =
-            (nodeTotalHeight + totalHeight) / Math.tan(degToRad(45))
+            (nodeTotalHeight + totalHeight) / Math.tan(degToRad(ctx.mindMap.opt.fishboneDeg))
           item.left += offsetLeft
           totalHeight += nodeTotalHeight
           // 同步更新后代节点
@@ -124,25 +123,24 @@ export default {
         )
       }
     },
-    renderLine({ node, line, top, x, lineLength, height, miny }) {
+    renderLine({ node, line, top, x, lineLength, height, miny, ctx }) {
       if (node.parent && node.parent.isRoot) {
         line.plot(
           `M ${x},${top + height} L ${x + lineLength},${
-            top + height + Math.tan(degToRad(45)) * lineLength
+            top + height + Math.tan(degToRad(ctx.mindMap.opt.fishboneDeg)) * lineLength
           }`
         )
       } else {
         line.plot(`M ${x},${top} L ${x},${miny}`)
       }
     },
-    computedLeftTopValue({ layerIndex, node, ctx, marginY }) {
+    computedLeftTopValue({ layerIndex, node, ctx }) {
       if (layerIndex === 1 && node.children) {
         // 遍历二级节点的子节点
         let startLeft = node.left + node.width * 0.5
         let totalTop =
           node.top +
           node.height +
-          marginY +
           (ctx.getNodeActChildrenLength(node) > 0 ? node.expandBtnSize : 0)
 
         node.children.forEach(item => {
@@ -152,7 +150,6 @@ export default {
             (ctx.getNodeActChildrenLength(item) > 0 ? item.expandBtnSize : 0)
           totalTop +=
             item.height +
-            marginY +
             (ctx.getNodeActChildrenLength(item) > 0 ? item.expandBtnSize : 0)
         })
       }
@@ -161,19 +158,17 @@ export default {
         let startLeft = node.left + node.width * 0.5
         let totalTop =
           node.top -
-          marginY -
           (ctx.getNodeActChildrenLength(node) > 0 ? node.expandBtnSize : 0)
         node.children.forEach(item => {
           item.left = startLeft
           item.top = totalTop - item.height
           totalTop -=
             item.height +
-            marginY +
             (ctx.getNodeActChildrenLength(item) > 0 ? item.expandBtnSize : 0)
         })
       }
     },
-    adjustLeftTopValueBefore({ node, ctx, layerIndex, marginY }) {
+    adjustLeftTopValueBefore({ node, ctx, layerIndex }) {
       // 调整top
       let len = node.children.length
       if (layerIndex > 2 && len > 0) {
@@ -183,12 +178,11 @@ export default {
             item.height +
             (ctx.getNodeActChildrenLength(item) > 0 ? item.expandBtnSize : 0)
           )
-        }, 0) + 
+        }, 0)
-        len * marginY
         ctx.updateBrothersTop(node, -totalHeight)
       }
     },
-    adjustLeftTopValueAfter({ parent, node, ctx, marginY }) {
+    adjustLeftTopValueAfter({ parent, node, ctx }) {
       // 将二级节点的子节点移到上方
       if (parent && parent.isRoot) {
         // 遍历二级节点的子节点
@@ -205,10 +199,10 @@ export default {
                 (hasChildren ? item.expandBtnSize : 0)
               : 0
           let _top = totalHeight + offset
-          item.top += _top - marginY
+          item.top += _top
           // 调整left
           let offsetLeft =
-            (totalHeight2 + nodeTotalHeight) / Math.tan(degToRad(45))
+            (totalHeight2 + nodeTotalHeight) / Math.tan(degToRad(ctx.mindMap.opt.fishboneDeg))
           item.left += offsetLeft
           totalHeight += offset
           totalHeight2 += nodeTotalHeight

web/src/config/constant.js

@@ -3,7 +3,10 @@ export const layoutImgMap = {
     logicalStructure: require('../assets/img/logicalStructure.jpg'),
     mindMap: require('../assets/img/mindMap.jpg'),
     organizationStructure: require('../assets/img/organizationStructure.jpg'),
-    catalogOrganization: require('../assets/img/catalogOrganization.jpg')
+    catalogOrganization: require('../assets/img/catalogOrganization.jpg'),
+    timeline: require('../assets/img/timeline.jpg'),
+    timeline2: require('../assets/img/timeline2.jpg'),
+    fishbone: require('../assets/img/fishbone.jpg'),
 }
 
 //  主题图片映射