优化：提取结构类公共方法

2026-02-17 22:08:25 +08:00 · 2023-04-14 10:40:01 +08:00
parent d959420d6e
commit 3b7cea9ee3
6 changed files with 35 additions and 102 deletions
--- a/simple-mind-map/src/layouts/Base.js
+++ b/simple-mind-map/src/layouts/Base.js
@@ -170,6 +170,24 @@ class Base {
    })
  }

+  //  递归计算节点的宽度
+  getNodeAreaWidth(node) {
+    let widthArr = []
+    let loop = (node, width) => {
+      if (node.children.length) {
+        width += node.width / 2
+        node.children.forEach(item => {
+          loop(item, width)
+        })
+      } else {
+        width += node.width
+        widthArr.push(width)
+      }
+    }
+    loop(node, 0)
+    return Math.max(...widthArr)
+  }
+
  //  二次贝塞尔曲线
  quadraticCurvePath(x1, y1, x2, y2) {
    let cx = x1 + (x2 - x1) * 0.2
--- a/simple-mind-map/src/layouts/CatalogOrganization.js
+++ b/simple-mind-map/src/layouts/CatalogOrganization.js
@@ -135,24 +135,6 @@ class CatalogOrganization extends Base {
    )
  }

-  //  递归计算节点的宽度
-  getNodeAreaWidth(node) {
-    let widthArr = []
-    let loop = (node, width) => {
-      if (node.children.length) {
-        width += node.width / 2
-        node.children.forEach(item => {
-          loop(item, width)
-        })
-      } else {
-        width += node.width
-        widthArr.push(width)
-      }
-    }
-    loop(node, 0)
-    return Math.max(...widthArr)
-  }
-
  //  调整兄弟节点的left
  updateBrothersLeft(node, addWidth) {
    if (node.parent) {
--- a/simple-mind-map/src/layouts/Fishbone.js
+++ b/simple-mind-map/src/layouts/Fishbone.js
@@ -54,7 +54,7 @@ class Fishbone extends Base {
          }
          // 计算二级节点的top值
          if (parent._node.isRoot) {
-            if (newNode.dir === 'top') {
+            if (this.checkIsTop(newNode)) {
              newNode.top = parent._node.top - newNode.height
            } else {
              newNode.top = parent._node.top + parent._node.height
@@ -81,7 +81,7 @@ class Fishbone extends Base {
          let topTotalLeft = node.left + node.width + node.height
          let bottomTotalLeft = node.left + node.width + node.height
          node.children.forEach(item => {
-            if (item.dir === 'top') {
+            if (this.checkIsTop(item)) {
              item.left = topTotalLeft
              topTotalLeft += item.width
            } else {
@@ -91,7 +91,7 @@ class Fishbone extends Base {
          })
        }
        let params = { layerIndex, node, ctx: this }
-        if (node.dir === 'top') {
+        if (this.checkIsTop(node)) {
          utils.top.computedLeftTopValue(params)
        } else {
          utils.bottom.computedLeftTopValue(params)
@@ -112,7 +112,7 @@ class Fishbone extends Base {
          return
        }
        let params = { node, parent, layerIndex, ctx: this }
-        if (node.dir === 'top') {
+        if (this.checkIsTop(node)) {
          utils.top.adjustLeftTopValueBefore(params)
        } else {
          utils.bottom.adjustLeftTopValueBefore(params)
@@ -120,7 +120,7 @@ class Fishbone extends Base {
      },
      (node, parent) => {
        let params = { parent, node, ctx: this }
-        if (node.dir === 'top') {
+        if (this.checkIsTop(node)) {
          utils.top.adjustLeftTopValueAfter(params)
        } else {
          utils.bottom.adjustLeftTopValueAfter(params)
@@ -130,7 +130,7 @@ class Fishbone extends Base {
          let topTotalLeft = 0
          let bottomTotalLeft = 0
          node.children.forEach(item => {
-            if (item.dir === 'top') {
+            if (this.checkIsTop(item)) {
              item.left += topTotalLeft
              this.updateChildren(item.children, 'left', topTotalLeft)
              let { left, right } = this.getNodeBoundaries(item, 'h')
@@ -148,24 +148,6 @@ class Fishbone extends Base {
    )
  }

-  //  递归计算节点的宽度
-  getNodeAreaWidth(node) {
-    let widthArr = []
-    let loop = (node, width) => {
-      if (node.children.length) {
-        width += node.width / 2
-        node.children.forEach(item => {
-          loop(item, width)
-        })
-      } else {
-        width += node.width
-        widthArr.push(width)
-      }
-    }
-    loop(node, 0)
-    return Math.max(...widthArr)
-  }
-
  //  递归计算节点的宽度
  getNodeAreaHeight(node) {
    let totalHeight = 0
@@ -226,7 +208,7 @@ class Fishbone extends Base {
        }
      })
      // 更新父节点的位置
-      if (node.dir === 'top') {
+      if (this.checkIsTop(node)) {
        this.updateBrothersTop(node.parent, addHeight)
      } else {
        this.updateBrothersTop(
@@ -237,6 +219,11 @@ class Fishbone extends Base {
    }
  }

+  // 检查节点是否是上方节点
+  checkIsTop(node) {
+    return node.dir === CONSTANTS.TIMELINE_DIR.TOP
+  }
+
  //  绘制连线，连接该节点到其子节点
  renderLine(node, lines, style) {
    if (node.layerIndex !== 1 && node.children.length <= 0) {
@@ -257,7 +244,7 @@ class Fishbone extends Base {
        let offset = item.height + node.height / 2
        let offsetX = offset / Math.tan(degToRad(45))
        let line = this.draw.path()
-        if (item.dir === 'top') {
+        if (this.checkIsTop(item)) {
          line.plot(
            `M ${nodeLineX - offsetX},${item.top + offset} L ${nodeLineX},${
              item.top
@@ -327,7 +314,7 @@ class Fishbone extends Base {
          maxy,
          miny
        }
-        if (node.dir === 'top') {
+        if (this.checkIsTop(node)) {
          utils.top.renderLine(params)
        } else {
          utils.bottom.renderLine(params)
@@ -353,7 +340,7 @@ class Fishbone extends Base {
        width,
        height
      }
-      if (node.dir === 'top') {
+      if (this.checkIsTop(node)) {
        utils.top.renderExpandBtn(params)
      } else {
        utils.bottom.renderExpandBtn(params)
--- a/simple-mind-map/src/layouts/FishboneBottom.js
+++ b/simple-mind-map/src/layouts/FishboneBottom.js
@@ -6,7 +6,7 @@ const degToRad = deg => {
  return (Math.PI / 180) * deg
 }

-//  鱼骨图
+//  下方鱼骨图
 class Fishbone extends Base {
  //  构造函数
  constructor(opt = {}) {
@@ -196,24 +196,6 @@ class Fishbone extends Base {
    )
  }

-  //  递归计算节点的宽度
-  getNodeAreaWidth(node) {
-    let widthArr = []
-    let loop = (node, width) => {
-      if (node.children.length) {
-        width += node.width / 2
-        node.children.forEach(item => {
-          loop(item, width)
-        })
-      } else {
-        width += node.width
-        widthArr.push(width)
-      }
-    }
-    loop(node, 0)
-    return Math.max(...widthArr)
-  }
-
  //  递归计算节点的宽度
  getNodeAreaHeight(node) {
    let totalHeight = 0
--- a/simple-mind-map/src/layouts/FishboneTop.js
+++ b/simple-mind-map/src/layouts/FishboneTop.js
@@ -6,7 +6,7 @@ const degToRad = deg => {
  return (Math.PI / 180) * deg
 }

-//  鱼骨图
+//  上方鱼骨图
 class Fishbone extends Base {
  //  构造函数
  constructor(opt = {}) {
@@ -165,24 +165,6 @@ class Fishbone extends Base {
    )
  }

-  //  递归计算节点的宽度
-  getNodeAreaWidth(node) {
-    let widthArr = []
-    let loop = (node, width) => {
-      if (node.children.length) {
-        width += node.width / 2
-        node.children.forEach(item => {
-          loop(item, width)
-        })
-      } else {
-        width += node.width
-        widthArr.push(width)
-      }
-    }
-    loop(node, 0)
-    return Math.max(...widthArr)
-  }
-
  //  递归计算节点的宽度
  getNodeAreaHeight(node) {
    let totalHeight = 0
--- a/simple-mind-map/src/layouts/Timeline.js
+++ b/simple-mind-map/src/layouts/Timeline.js
@@ -167,24 +167,6 @@ class Timeline extends Base {
    )
  }

-  //  递归计算节点的宽度
-  getNodeAreaWidth(node) {
-    let widthArr = []
-    let loop = (node, width) => {
-      if (node.children.length) {
-        width += node.width / 2
-        node.children.forEach(item => {
-          loop(item, width)
-        })
-      } else {
-        width += node.width
-        widthArr.push(width)
-      }
-    }
-    loop(node, 0)
-    return Math.max(...widthArr)
-  }
-
  //  递归计算节点的宽度
  getNodeAreaHeight(node) {
    let totalHeight = 0