diff --git a/simple-mind-map/index.js b/simple-mind-map/index.js index 90ab5156..8cc6b91c 100644 --- a/simple-mind-map/index.js +++ b/simple-mind-map/index.js @@ -194,7 +194,7 @@ class MindMap { this.opt.layout = layout this.view.reset() this.renderer.setLayout() - this.render() + this.render(null, CONSTANTS.CHANGE_LAYOUT) } // 执行命令 diff --git a/simple-mind-map/src/constants/constant.js b/simple-mind-map/src/constants/constant.js index a0e6b386..64826939 100644 --- a/simple-mind-map/src/constants/constant.js +++ b/simple-mind-map/src/constants/constant.js @@ -157,6 +157,7 @@ export const themeList = [ // 常量 export const CONSTANTS = { CHANGE_THEME: 'changeTheme', + CHANGE_LAYOUT: 'changeLayout', SET_DATA: 'setData', TRANSFORM_TO_NORMAL_NODE: 'transformAllNodesToNormalNode', MODE: { diff --git a/simple-mind-map/src/core/render/node/Node.js b/simple-mind-map/src/core/render/node/Node.js index ac71371c..e0f36761 100644 --- a/simple-mind-map/src/core/render/node/Node.js +++ b/simple-mind-map/src/core/render/node/Node.js @@ -269,16 +269,7 @@ class Node { this.group.add(this.shapeNode) this.updateNodeShape() // 渲染一个隐藏的矩形区域,用来触发展开收起按钮的显示 - if (!this.mindMap.opt.alwaysShowExpandBtn) { - if (!this._unVisibleRectRegionNode) { - this._unVisibleRectRegionNode = new Rect() - } - this._unVisibleRectRegionNode.fill({ - color: 'transparent' - }) - this.renderer.layout.renderExpandBtnRect(this._unVisibleRectRegionNode, this.expandBtnSize, width, height, this) - this.group.add(this._unVisibleRectRegionNode) - } + this.renderExpandBtnPlaceholderRect() // 概要节点添加一个带所属节点id的类名 if (this.isGeneralization && this.generalizationBelongNode) { this.group.addClass('generalization_' + this.generalizationBelongNode.uid) @@ -365,6 +356,21 @@ class Node { this.group.add(textContentNested) } + // 渲染展开收起按钮的隐藏占位元素 + renderExpandBtnPlaceholderRect() { + if (!this.mindMap.opt.alwaysShowExpandBtn) { + let { width, height } = this + if (!this._unVisibleRectRegionNode) { + this._unVisibleRectRegionNode = new Rect() + this._unVisibleRectRegionNode.fill({ + color: 'transparent' + }) + this.group.add(this._unVisibleRectRegionNode) + } + this.renderer.layout.renderExpandBtnRect(this._unVisibleRectRegionNode, this.expandBtnSize, width, height, this) + } + } + // 给节点绑定事件 bindGroupEvent() { // 单击事件,选中节点 @@ -548,6 +554,10 @@ class Node { this.needLayout = false this.layout() } + if (this.needRerenderExpandBtnPlaceholderRect) { + this.needRerenderExpandBtnPlaceholderRect = false + this.renderExpandBtnPlaceholderRect() + } this.update() } // 子节点 diff --git a/simple-mind-map/src/layouts/Base.js b/simple-mind-map/src/layouts/Base.js index 29646e88..ca27fcd4 100644 --- a/simple-mind-map/src/layouts/Base.js +++ b/simple-mind-map/src/layouts/Base.js @@ -55,6 +55,13 @@ class Base { if (oldIndex < 2 && newIndex >= 2) return true } + // 检查是否是结构布局改变重新渲染展开收起按钮占位元素 + checkIsLayoutChangeRerenderExpandBtnPlaceholderRect(node) { + if (this.renderer.renderSource === CONSTANTS.CHANGE_LAYOUT) { + node.needRerenderExpandBtnPlaceholderRect = true + } + } + // 创建节点实例 createNode(data, parent, isRoot, layerIndex) { // 创建节点 @@ -66,6 +73,7 @@ class Base { newNode.reset() newNode.layerIndex = layerIndex this.cacheNode(data._node.uid, newNode) + this.checkIsLayoutChangeRerenderExpandBtnPlaceholderRect(newNode) // 主题或主题配置改变了需要重新计算节点大小和布局 if (this.checkIsNeedResizeSources() || isLayerTypeChange) { newNode.getSize() @@ -81,6 +89,7 @@ class Base { newNode.nodeData = newNode.handleData(data || {}) newNode.layerIndex = layerIndex this.cacheNode(data.data.uid, newNode) + this.checkIsLayoutChangeRerenderExpandBtnPlaceholderRect(newNode) data._node = newNode // 主题或主题配置改变了需要重新计算节点大小和布局 let isResizeSource = this.checkIsNeedResizeSources()