From 990a4e5c4c664373581df655c7c7d4a563cde3af Mon Sep 17 00:00:00 2001 From: wanglin <1013335014@qq.com> Date: Sun, 31 Jul 2022 20:46:40 +0800 Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E5=A4=8D=E6=A6=82=E8=A6=81=E5=AE=9A?= =?UTF-8?q?=E4=BD=8D=E9=97=AE=E9=A2=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- simple-mind-map/src/Render.js | 3 + simple-mind-map/src/layouts/Base.js | 59 +++++++++++++------ .../src/layouts/CatalogOrganization.js | 13 ++-- .../src/layouts/LogicalStructure.js | 11 ++-- simple-mind-map/src/layouts/MindMap.js | 10 ++-- .../src/layouts/OrganizationStructure.js | 13 ++-- simple-mind-map/src/themes/default.js | 4 ++ 7 files changed, 70 insertions(+), 43 deletions(-) diff --git a/simple-mind-map/src/Render.js b/simple-mind-map/src/Render.js index 37782bd8..d6527121 100644 --- a/simple-mind-map/src/Render.js +++ b/simple-mind-map/src/Render.js @@ -592,6 +592,7 @@ class Render { this.setNodeData(node.generalizationBelongNode, { generalization: null }) + node.generalizationBelongNode.update() this.removeActiveNode(node) i-- } else if (node.isRoot) { @@ -888,6 +889,7 @@ class Render { text: '概要' } }) + node.update() }) this.mindMap.render() } @@ -908,6 +910,7 @@ class Render { this.setNodeData(node, { generalization: null }) + node.update() }) this.mindMap.render() } diff --git a/simple-mind-map/src/layouts/Base.js b/simple-mind-map/src/layouts/Base.js index 483a3ff2..58747abf 100644 --- a/simple-mind-map/src/layouts/Base.js +++ b/simple-mind-map/src/layouts/Base.js @@ -172,30 +172,55 @@ class Base { * @Date: 2022-07-31 09:14:03 * @Desc: 获取节点的边界值 */ - getNodeBoundaries(node) { - let top = Infinity - let bottom = -Infinity - let left = Infinity - let right = -Infinity - walk(node, null, (root) => { - if (root.top < top) { - top = root.top + getNodeBoundaries(node, dir, isLeft) { + let { generalizationLineMargin, generalizationNodeMargin } = this.mindMap.themeConfig + let walk = (root) => { + let _left = Infinity + let _right = -Infinity + let _top = Infinity + let _bottom = -Infinity + if (root.children && root.children.length > 0) { + root.children.forEach((child) => { + let {left, right, top, bottom} = walk(child) + // 概要内容的宽度 + let generalizationWidth = child._generalizationNode ? child._generalizationNode.width + generalizationNodeMargin : 0 + // 概要内容的高度 + let generalizationHeight = child._generalizationNode ? child._generalizationNode.height + generalizationNodeMargin : 0 + if (left < _left) { + _left = left - (isLeft ? generalizationWidth : 0) + } + if (right + (dir === 'h' ? generalizationWidth : 0) > _right) { + _right = right + (dir === 'h' ? generalizationWidth : 0) + } + if (top < _top) { + _top = top + } + if (bottom + (dir === 'v' ? generalizationHeight : 0) > _bottom) { + _bottom = bottom + (dir === 'v' ? generalizationHeight : 0) + } + }) } - if (root.top + root.height > bottom) { - bottom = root.top + root.height + let cur = { + left: root.left, + right: root.left + root.width, + top: root.top, + bottom: root.top + root.height } - if (root.left < left) { - left = root.left + return { + left: cur.left < _left ? cur.left : _left, + right: cur.right > _right ? cur.right : _right, + top: cur.top < _top ? cur.top : _top, + bottom: cur.bottom > _bottom ? cur.bottom : _bottom } - if (root.left + root.width > right) { - right = root.left + root.width - } - }, null, true) + } + let {left, right, top, bottom} = walk(node) return { left, right, top, - bottom + bottom, + generalizationLineMargin, + generalizationNodeMargin }; } } diff --git a/simple-mind-map/src/layouts/CatalogOrganization.js b/simple-mind-map/src/layouts/CatalogOrganization.js index 75895ceb..d3e8b95e 100644 --- a/simple-mind-map/src/layouts/CatalogOrganization.js +++ b/simple-mind-map/src/layouts/CatalogOrganization.js @@ -145,7 +145,7 @@ class CatalogOrganization extends Base { loop(item, width) }) } else { - width += node.width + width += node.width + (node._generalizationNode ? node._generalizationNode.width + this.mindMap.themeConfig.generalizationNodeMargin : 0) widthArr.push(width) } } @@ -317,17 +317,16 @@ class CatalogOrganization extends Base { * @Desc: 创建概要节点 */ renderGeneralization(node, gLine, gNode) { - let { top, bottom, right } = this.getNodeBoundaries(node) - let space = 20 - let x1 = right + let { top, bottom, right, generalizationLineMargin, generalizationNodeMargin } = this.getNodeBoundaries(node, 'h') + let x1 = right + generalizationLineMargin let y1 = top - let x2 = right + let x2 = right + generalizationLineMargin let y2 = bottom - let cx = x1 + space + let cx = x1 + 20 let cy = y1 + (y2 - y1) / 2 let path = `M ${x1},${y1} Q ${cx},${cy} ${x2},${y2}` gLine.plot(path) - gNode.left = right + space + gNode.left = right + generalizationNodeMargin gNode.top = top + (bottom - top - gNode.height) / 2 } } diff --git a/simple-mind-map/src/layouts/LogicalStructure.js b/simple-mind-map/src/layouts/LogicalStructure.js index 4953bc7b..ccd85a26 100644 --- a/simple-mind-map/src/layouts/LogicalStructure.js +++ b/simple-mind-map/src/layouts/LogicalStructure.js @@ -195,17 +195,16 @@ class LogicalStructure extends Base { * @Desc: 创建概要节点 */ renderGeneralization(node, gLine, gNode) { - let { top, bottom, right } = this.getNodeBoundaries(node) - let space = 20 - let x1 = right + let { top, bottom, right, generalizationLineMargin, generalizationNodeMargin } = this.getNodeBoundaries(node, 'h') + let x1 = right + generalizationLineMargin let y1 = top - let x2 = right + let x2 = right + generalizationLineMargin let y2 = bottom - let cx = x1 + space + let cx = x1 + 20 let cy = y1 + (y2 - y1) / 2 let path = `M ${x1},${y1} Q ${cx},${cy} ${x2},${y2}` gLine.plot(path) - gNode.left = right + space + gNode.left = right + generalizationNodeMargin gNode.top = top + (bottom - top - gNode.height) / 2 } } diff --git a/simple-mind-map/src/layouts/MindMap.js b/simple-mind-map/src/layouts/MindMap.js index 86ac410b..72277893 100644 --- a/simple-mind-map/src/layouts/MindMap.js +++ b/simple-mind-map/src/layouts/MindMap.js @@ -231,20 +231,18 @@ class MindMap extends Base { * @Desc: 创建概要节点 */ renderGeneralization(node, gLine, gNode) { - let { top, bottom, left, right } = this.getNodeBoundaries(node) let isLeft = node.dir === 'left' - let space = 20 - let x = isLeft ? left : right - space = (isLeft ? -space : space) + let { top, bottom, left, right, generalizationLineMargin, generalizationNodeMargin } = this.getNodeBoundaries(node, 'h', isLeft) + let x = isLeft ? left - generalizationLineMargin : right + generalizationLineMargin let x1 = x let y1 = top let x2 = x let y2 = bottom - let cx = x1 + space + let cx = x1 + (isLeft ? -20 : 20) let cy = y1 + (y2 - y1) / 2 let path = `M ${x1},${y1} Q ${cx},${cy} ${x2},${y2}` gLine.plot(path) - gNode.left = x + space - (isLeft ? gNode.width : 0) + gNode.left = x + (isLeft ? -generalizationNodeMargin : generalizationNodeMargin) - (isLeft ? gNode.width : 0) gNode.top = top + (bottom - top - gNode.height) / 2 } } diff --git a/simple-mind-map/src/layouts/OrganizationStructure.js b/simple-mind-map/src/layouts/OrganizationStructure.js index 828ea22e..331e2676 100644 --- a/simple-mind-map/src/layouts/OrganizationStructure.js +++ b/simple-mind-map/src/layouts/OrganizationStructure.js @@ -213,17 +213,16 @@ class OrganizationStructure extends Base { * @Desc: 创建概要节点 */ renderGeneralization(node, gLine, gNode) { - let { bottom, left, right } = this.getNodeBoundaries(node) - let space = 20 + let { bottom, left, right, generalizationLineMargin, generalizationNodeMargin } = this.getNodeBoundaries(node, 'v') let x1 = left - let y1 = bottom + let y1 = bottom + generalizationLineMargin let x2 = right - let y2 = bottom - let cx = left + (right - left) / 2 - let cy = bottom + space + let y2 = bottom + generalizationLineMargin + let cx = x1 + (x2 - x1) / 2 + let cy = y1 + 20 let path = `M ${x1},${y1} Q ${cx},${cy} ${x2},${y2}` gLine.plot(path) - gNode.top = bottom + space + gNode.top = bottom + generalizationNodeMargin gNode.left = left + (right - left - gNode.width) / 2 } } diff --git a/simple-mind-map/src/themes/default.js b/simple-mind-map/src/themes/default.js index c9225905..03d6d65e 100644 --- a/simple-mind-map/src/themes/default.js +++ b/simple-mind-map/src/themes/default.js @@ -21,6 +21,10 @@ export default { generalizationLineWidth: 1, // 概要连线的颜色 generalizationLineColor: '#549688', + // 概要曲线距节点的距离 + generalizationLineMargin: 0, + // 概要节点距节点的距离 + generalizationNodeMargin: 20, // 背景颜色 backgroundColor: '#fafafa', // 背景图片