From 69cb961cc1cd902846e96f4fd2b932ce630532e2 Mon Sep 17 00:00:00 2001 From: wanglin25 Date: Tue, 2 Aug 2022 08:59:05 +0800 Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E5=A4=8D=E6=A6=82=E8=A6=81=E7=9A=84?= =?UTF-8?q?=E4=B8=80=E4=BA=9Bbug?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- simple-mind-map/example/exampleData.js | 33 +------------------------- simple-mind-map/src/Node.js | 26 ++++++++++++++++++-- simple-mind-map/src/TextEdit.js | 4 ++++ simple-mind-map/src/layouts/Base.js | 10 ++++---- 4 files changed, 35 insertions(+), 38 deletions(-) diff --git a/simple-mind-map/example/exampleData.js b/simple-mind-map/example/exampleData.js index 7c7fd82e..29c56c2c 100644 --- a/simple-mind-map/example/exampleData.js +++ b/simple-mind-map/example/exampleData.js @@ -879,18 +879,6 @@ const data5 = { } }, "children": [ - { - "data": { - "text": "子节点" - }, - "children": [] - }, - { - "data": { - "text": "子节点" - }, - "children": [] - }, { "data": { "text": "子节点" @@ -905,25 +893,6 @@ const data5 = { } ] }, - { - "data": { - "text": "二级节点2" - }, - "children": [ - { - "data": { - "text": "子节点" - }, - "children": [] - }, - { - "data": { - "text": "子节点" - }, - "children": [] - } - ] - } ] } } @@ -945,7 +914,7 @@ export default { ...data5, // ...rootData, "theme": { - "template": "minions", + "template": "classic4", "config": { // 自定义配置... } diff --git a/simple-mind-map/src/Node.js b/simple-mind-map/src/Node.js index 081fd9c7..3c383ae3 100644 --- a/simple-mind-map/src/Node.js +++ b/simple-mind-map/src/Node.js @@ -208,6 +208,8 @@ class Node { this.group.remove() this.group = null } + // 概要 + this.removeGeneralization() } /** @@ -508,6 +510,10 @@ class Node { let { paddingY } = this.getPaddingVale() // 创建组 this.group = new G() + // 概要节点添加一个带所属节点id的类名 + if (this.isGeneralization && this.generalizationBelongNode) { + this.group.addClass('generalization_' + this.generalizationBelongNode.uid) + } this.draw.add(this.group) this.update(true) // 节点矩形 @@ -700,7 +706,6 @@ class Node { this.removeAllEvent() this.removeAllNode() this.removeLine() - this.removeGeneralization() // 子节点 if (this.children && this.children.length) { asyncRun(this.children.map((item) => { @@ -844,10 +849,21 @@ class Node { } } + /** + * javascript comment + * @Author: 王林25 + * @Date: 2022-08-01 15:38:52 + * @Desc: 更新概要节点 + */ + updateGeneralization() { + this.removeGeneralization() + this.createGeneralizationNode() + } + /** * @Author: 王林 * @Date: 2022-07-30 08:35:51 - * @Desc: 创建概要节点 + * @Desc: 渲染概要节点 */ renderGeneralization() { if (this.isGeneralization) { @@ -880,9 +896,15 @@ class Node { this._generalizationLine = null } if (this._generalizationNode) { + // 删除概要节点时要同步从激活节点里删除 + this.renderer.removeActiveNode(this._generalizationNode) this._generalizationNode.remove() this._generalizationNode = null } + // hack修复当激活一个节点时创建概要，然后立即激活创建的概要节点后会重复创建概要节点并且无法删除的问题 + if (this.generalizationBelongNode) { + this.draw.find('.generalization_' + this.generalizationBelongNode.uid).remove() + } } /** diff --git a/simple-mind-map/src/TextEdit.js b/simple-mind-map/src/TextEdit.js index f7523eba..f9c42ae0 100644 --- a/simple-mind-map/src/TextEdit.js +++ b/simple-mind-map/src/TextEdit.js @@ -119,6 +119,10 @@ export default class TextEdit { this.renderer.activeNodeList.forEach((node) => { let str = getStrWithBrFromHtml(this.textEditNode.innerHTML) this.mindMap.execCommand('SET_NODE_TEXT', node, str) + if (node.isGeneralization) { + // 概要节点 + node.generalizationBelongNode.updateGeneralization() + } this.mindMap.render() }) this.mindMap.emit('hide_text_edit', this.textEditNode, this.renderer.activeNodeList) diff --git a/simple-mind-map/src/layouts/Base.js b/simple-mind-map/src/layouts/Base.js index 92e88688..b57ca829 100644 --- a/simple-mind-map/src/layouts/Base.js +++ b/simple-mind-map/src/layouts/Base.js @@ -189,6 +189,8 @@ class Base { * @Author: 王林 * @Date: 2022-07-31 09:14:03 * @Desc: 获取节点的边界值 + * dir：生长方向，h（水平）、v（垂直） + * isLeft：是否向左生长 */ getNodeBoundaries(node, dir, isLeft) { let { generalizationLineMargin, generalizationNodeMargin } = this.mindMap.themeConfig @@ -201,11 +203,11 @@ class Base { root.children.forEach((child) => { let {left, right, top, bottom} = walk(child) // 概要内容的宽度 - let generalizationWidth = child.checkHasGeneralization() ? child._generalizationNodeWidth + generalizationNodeMargin : 0 + let generalizationWidth = child.checkHasGeneralization() && child.nodeData.data.expand ? child._generalizationNodeWidth + generalizationNodeMargin : 0 // 概要内容的高度 - let generalizationHeight = child.checkHasGeneralization() ? child._generalizationNodeHeight + generalizationNodeMargin : 0 - if (left < _left) { - _left = left - (isLeft ? generalizationWidth : 0) + let generalizationHeight = child.checkHasGeneralization() && child.nodeData.data.expand ? child._generalizationNodeHeight + generalizationNodeMargin : 0 + if (left - (dir === 'h' ? generalizationWidth : 0) < _left) { + _left = left - (dir === 'h' ? generalizationWidth : 0) } if (right + (dir === 'h' ? generalizationWidth : 0) > _right) { _right = right + (dir === 'h' ? generalizationWidth : 0)