鱼骨结构开发中

simple-mind-map/src/Render.js

@@ -4,6 +4,7 @@ import MindMap from './layouts/MindMap'
 import CatalogOrganization from './layouts/CatalogOrganization'
 import OrganizationStructure from './layouts/OrganizationStructure'
 import Timeline from './layouts/Timeline'
+import Fishbone from './layouts/Fishbone'
 import TextEdit from './TextEdit'
 import { copyNodeTree, simpleDeepClone, walk } from './utils'
 import { shapeList } from './Shape'
@@ -23,7 +24,9 @@ const layouts = {
   // 时间轴
   [CONSTANTS.LAYOUT.TIMELINE]: Timeline,
   // 时间轴2
-  [CONSTANTS.LAYOUT.TIMELINE2]: Timeline
+  [CONSTANTS.LAYOUT.TIMELINE2]: Timeline,
+  // 鱼骨图
+  [CONSTANTS.LAYOUT.FISHBONE]: Fishbone,
 }
 
 //  渲染

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

@@ -6,12 +6,11 @@ const degToRad = (deg) => {
   return Math.PI / 180 * deg
 }
 
-//  时间轴
+//  鱼骨图
-class CatalogOrganization extends Base {
+class Fishbone extends Base {
   //  构造函数
-  constructor(opt = {}, layout) {
+  constructor(opt = {}) {
     super(opt)
-    this.layout = layout
   }
 
   //  布局
@@ -45,21 +44,17 @@ class CatalogOrganization extends Base {
           this.setNodeCenter(newNode)
         } else {
           // 非根节点
-          // 时间轴2类型需要交替显示
+          // 三级及以下节点以上级为准
-          if (this.layout === CONSTANTS.LAYOUT.TIMELINE2) {
+          if (parent._node.dir) {
-            // 三级及以下节点以上级为准
+            newNode.dir = parent._node.dir
-            if (parent._node.dir) {
-              newNode.dir = parent._node.dir
-            } else {
-              // 节点生长方向
-              newNode.dir =
-                index % 2 === 0
-                  ? CONSTANTS.TIMELINE_DIR.BOTTOM
-                  : CONSTANTS.TIMELINE_DIR.TOP
-            }
           } else {
-            newNode.dir = ''
+            // 节点生长方向
+            newNode.dir =
+              index % 2 === 0
+                ? CONSTANTS.TIMELINE_DIR.BOTTOM
+                : CONSTANTS.TIMELINE_DIR.TOP
           }
+          // 计算二级节点的top值
           if (parent._node.isRoot) {
             newNode.top =
               parent._node.top +
@@ -89,35 +84,44 @@ class CatalogOrganization extends Base {
           node.children &&
           node.children.length
         ) {
-          let marginX = this.getMarginX(layerIndex + 1)
-          let marginY = this.getMarginY(layerIndex + 1)
           if (isRoot) {
-            let left = node.left + node.width + marginX
+            let left = node.left + node.width
             let topTotalLeft = left
             let bottomTotalLeft = left
             node.children.forEach((cur) => {
               if (cur.dir === 'top') {
                 cur.left = topTotalLeft
-                topTotalLeft += cur.width + marginX
+                topTotalLeft += cur.width
               } else {
                 cur.left = bottomTotalLeft
-                bottomTotalLeft += cur.width + marginX
+                bottomTotalLeft += cur.width
               }
             })
           } else {
-            let totalTop =
+            if (node.dir === 'top' || node.layerIndex < 2) {
-              node.top +
+              let totalTop =
-              node.height +
+                node.top +
-              marginY +
+                node.height +
-              (this.getNodeActChildrenLength(node) > 0 ? node.expandBtnSize : 0)
+                (this.getNodeActChildrenLength(node) > 0 ? node.expandBtnSize : 0)
-            node.children.forEach(cur => {
+              node.children.forEach(cur => {
-              cur.left = node.left + node.width * 0.5
+                cur.left = node.left + node.width * 0.5
-              cur.top = totalTop
+                cur.top = totalTop
-              totalTop +=
+                totalTop +=
-                cur.height +
+                  cur.height +
-                marginY +
+                  (this.getNodeActChildrenLength(cur) > 0 ? cur.expandBtnSize : 0)
-                (this.getNodeActChildrenLength(cur) > 0 ? cur.expandBtnSize : 0)
+              })
-            })
+            } else {
+              let totalTop =
+                node.top -
+                (this.getNodeActChildrenLength(node) > 0 ? node.expandBtnSize : 0)
+              node.children.forEach(cur => {
+                cur.left = node.left + node.width * 0.5
+                cur.top = totalTop - cur.height
+                totalTop -=
+                  cur.height +
+                  (this.getNodeActChildrenLength(cur) > 0 ? cur.expandBtnSize : 0)
+              })
+            }
           }
         }
       },
@@ -137,12 +141,11 @@ class CatalogOrganization extends Base {
         }
         // 调整left
         if (node.isRoot) {
-          // this.updateBrothersLeft(node)
+          this.updateBrothersLeft(node)
         }
         // 调整top
         let len = node.children.length
         if (parent && !parent.isRoot && len > 0) {
-          let marginY = this.getMarginY(layerIndex + 1)
           let totalHeight =
             node.children.reduce((h, item) => {
               return (
@@ -152,12 +155,11 @@ class CatalogOrganization extends Base {
                   ? item.expandBtnSize
                   : 0)
               )
-            }, 0) +
+            }, 0)
-            (len + 1) * marginY
+          this.updateBrothersTop(node, node.dir !== 'top' && node.layerIndex > 2 ? -totalHeight : totalHeight)
-          this.updateBrothersTop(node, totalHeight)
         }
       },
-      (node, parent, isRoot, layerIndex) => {
+      (node, parent) => {
         if (
           parent &&
           parent.isRoot &&
@@ -172,6 +174,19 @@ class CatalogOrganization extends Base {
             this.updateChildren(item.children, 'top', item.top - _top)
           })
         }
+        if (
+          parent &&
+          parent.isRoot &&
+          node.dir === CONSTANTS.TIMELINE_DIR.BOTTOM
+        ) {
+          // 遍历二级节点的子节点
+          node.children.forEach(item => {
+            let totalHeight = this.getNodeAreaHeight(item)
+            let _top = item.top
+            item.top += totalHeight
+            this.updateChildren(item.children, 'top', item.top - _top)
+          })
+        }
       },
       true
     )
@@ -184,12 +199,10 @@ class CatalogOrganization extends Base {
         }
         // 调整left
         if (node.layerIndex === 1) {
-          let totalX = 0
           let totalHeight = 0
           node.children.forEach((item) => {
             let h = this.getNodeAreaHeight(item)
-            let x = (h+ totalHeight) / Math.tan(degToRad(45))
+            let x = (h + totalHeight) / Math.tan(degToRad(45))
-            totalX += x
             totalHeight += h
             item.left += x
             this.updateChildren(item.children, 'left', x)
@@ -225,8 +238,7 @@ class CatalogOrganization 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)
@@ -318,9 +330,11 @@ class CatalogOrganization extends Base {
           miny = y
         }
         // 水平线
-        let path = `M ${x},${y} L ${item.left},${y}`
+        if (node.layerIndex > 1) {
-        lines[index].plot(path)
+          let path = `M ${x},${y} L ${item.left},${y}`
-        style && style(lines[index], item)
+          lines[index].plot(path)
+          style && style(lines[index], item)
+        }
       })
       // 竖线
       if (len > 0) {
@@ -331,9 +345,13 @@ class CatalogOrganization extends Base {
           node.parent.isRoot &&
           node.dir === CONSTANTS.TIMELINE_DIR.TOP
         ) {
-          line.plot(`M ${x},${top} L ${x + 500},${top - Math.tan(degToRad(45)) * 500}`)
+          line.plot(`M ${x},${top} L ${x + 1000},${top - Math.tan(degToRad(45)) * 1000}`)
         } else {
-          line.plot(`M ${x},${top + height + expandBtnSize} L ${x},${maxy}`)
+          if (node.parent && node.parent.isRoot) {
+            line.plot(`M ${x},${top + height + expandBtnSize} L ${x + 1000},${top + Math.tan(degToRad(45)) * 1000}`)
+          } else {
+            line.plot(`M ${x},${top + height + expandBtnSize} L ${x},${maxy}`)
+          }
         }
         node.style.line(line)
         node._lines.push(line)
@@ -387,4 +405,4 @@ class CatalogOrganization extends Base {
   }
 }
 
-export default CatalogOrganization
+export default Fishbone

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

@@ -3,7 +3,7 @@ import { walk, asyncRun } from '../utils'
 import { CONSTANTS } from '../utils/constant'
 
 //  时间轴
-class CatalogOrganization extends Base {
+class Timeline extends Base {
   //  构造函数
   constructor(opt = {}, layout) {
     super(opt)
@@ -353,4 +353,4 @@ class CatalogOrganization extends Base {
   }
 }
 
-export default CatalogOrganization
+export default Timeline

simple-mind-map/src/utils/constant.js

@@ -156,7 +156,8 @@ export const CONSTANTS = {
     ORGANIZATION_STRUCTURE: 'organizationStructure',
     CATALOG_ORGANIZATION: 'catalogOrganization',
     TIMELINE: 'timeline',
-    TIMELINE2: 'timeline2'
+    TIMELINE2: 'timeline2',
+    FISHBONE: 'fishbone'
   },
   DIR: {
     UP: 'up',
@@ -231,6 +232,10 @@ export const layoutList = [
   {
     name: '时间轴2',
     value: CONSTANTS.LAYOUT.TIMELINE2,
+  },
+  {
+    name: '鱼骨图',
+    value: CONSTANTS.LAYOUT.FISHBONE,
   }
 ]
 export const layoutValueList = [
@@ -239,5 +244,6 @@ export const layoutValueList = [
   CONSTANTS.LAYOUT.CATALOG_ORGANIZATION,
   CONSTANTS.LAYOUT.ORGANIZATION_STRUCTURE,
   CONSTANTS.LAYOUT.TIMELINE,
-  CONSTANTS.LAYOUT.TIMELINE2
+  CONSTANTS.LAYOUT.TIMELINE2,
+  CONSTANTS.LAYOUT.FISHBONE
 ]