From 3b7cea9ee307cbb2531c5ebd38288d06ec17b2f8 Mon Sep 17 00:00:00 2001 From: wanglin2 <1013335014@qq.com> Date: Fri, 14 Apr 2023 10:40:01 +0800 Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96=EF=BC=9A=E6=8F=90=E5=8F=96?= =?UTF-8?q?=E7=BB=93=E6=9E=84=E7=B1=BB=E5=85=AC=E5=85=B1=E6=96=B9=E6=B3=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- simple-mind-map/src/layouts/Base.js | 18 ++++++++ .../src/layouts/CatalogOrganization.js | 18 -------- simple-mind-map/src/layouts/Fishbone.js | 43 +++++++------------ .../{Fishbone copy.js => FishboneBottom.js} | 20 +-------- .../{Fishbone copy 2.js => FishboneTop.js} | 20 +-------- simple-mind-map/src/layouts/Timeline.js | 18 -------- 6 files changed, 35 insertions(+), 102 deletions(-) rename simple-mind-map/src/layouts/{Fishbone copy.js => FishboneBottom.js} (96%) rename simple-mind-map/src/layouts/{Fishbone copy 2.js => FishboneTop.js} (95%) diff --git a/simple-mind-map/src/layouts/Base.js b/simple-mind-map/src/layouts/Base.js index 6b485878..56213d58 100644 --- 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 diff --git a/simple-mind-map/src/layouts/CatalogOrganization.js b/simple-mind-map/src/layouts/CatalogOrganization.js index 3030e5f9..3b46f912 100644 --- 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) { diff --git a/simple-mind-map/src/layouts/Fishbone.js b/simple-mind-map/src/layouts/Fishbone.js index 7f63e236..db786e2d 100644 --- 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) diff --git a/simple-mind-map/src/layouts/Fishbone copy.js b/simple-mind-map/src/layouts/FishboneBottom.js similarity index 96% rename from simple-mind-map/src/layouts/Fishbone copy.js rename to simple-mind-map/src/layouts/FishboneBottom.js index b6fd9187..898d46e8 100644 --- a/simple-mind-map/src/layouts/Fishbone copy.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 diff --git a/simple-mind-map/src/layouts/Fishbone copy 2.js b/simple-mind-map/src/layouts/FishboneTop.js similarity index 95% rename from simple-mind-map/src/layouts/Fishbone copy 2.js rename to simple-mind-map/src/layouts/FishboneTop.js index 36d1afdf..147e8eab 100644 --- a/simple-mind-map/src/layouts/Fishbone copy 2.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 diff --git a/simple-mind-map/src/layouts/Timeline.js b/simple-mind-map/src/layouts/Timeline.js index 85912d7e..6b792f7d 100644 --- 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