diff --git a/simple-mind-map/src/core/render/node/Node.js b/simple-mind-map/src/core/render/node/Node.js index e614e36b..322d2cd6 100644 --- a/simple-mind-map/src/core/render/node/Node.js +++ b/simple-mind-map/src/core/render/node/Node.js @@ -1,10 +1,11 @@ import Style from './Style' import Shape from './Shape' -import { G, Rect, ForeignObject, SVG } from '@svgdotjs/svg.js' +import { G, ForeignObject, SVG } from '@svgdotjs/svg.js' import nodeGeneralizationMethods from './nodeGeneralization' import nodeExpandBtnMethods from './nodeExpandBtn' import nodeCommandWrapsMethods from './nodeCommandWraps' import nodeCreateContentsMethods from './nodeCreateContents' +import nodeExpandBtnPlaceholderRectMethods from './nodeExpandBtnPlaceholderRect' import { CONSTANTS } from '../../../constants/constant' // 节点类 @@ -107,6 +108,10 @@ class Node { Object.keys(nodeExpandBtnMethods).forEach(item => { this[item] = nodeExpandBtnMethods[item].bind(this) }) + // 展开收起按钮占位元素相关方法 + Object.keys(nodeExpandBtnPlaceholderRectMethods).forEach(item => { + this[item] = nodeExpandBtnPlaceholderRectMethods[item].bind(this) + }) // 命令的相关方法 Object.keys(nodeCommandWrapsMethods).forEach(item => { this[item] = nodeCommandWrapsMethods[item].bind(this) @@ -358,27 +363,6 @@ 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() { // 单击事件,选中节点 @@ -588,10 +572,7 @@ class Node { this.needLayout = false this.layout() } - if (this.needRerenderExpandBtnPlaceholderRect) { - this.needRerenderExpandBtnPlaceholderRect = false - this.renderExpandBtnPlaceholderRect() - } + this.updateExpandBtnPlaceholderRect() this.update() } // 子节点 diff --git a/simple-mind-map/src/core/render/node/nodeExpandBtnPlaceholderRect.js b/simple-mind-map/src/core/render/node/nodeExpandBtnPlaceholderRect.js new file mode 100644 index 00000000..23d51ff4 --- /dev/null +++ b/simple-mind-map/src/core/render/node/nodeExpandBtnPlaceholderRect.js @@ -0,0 +1,66 @@ +import { Rect } from '@svgdotjs/svg.js' + +// 渲染展开收起按钮的隐藏占位元素 +function renderExpandBtnPlaceholderRect() { + // 根节点或没有子节点不需要渲染 + if ( + !this.nodeData.children || + this.nodeData.children.length <= 0 || + this.isRoot + ) { + return + } + // 默认显示展开按钮的情况下也不需要渲染 + 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 + ) + } +} + +// 删除展开收起按钮的隐藏占位元素 +function clearExpandBtnPlaceholderRect() { + if (!this._unVisibleRectRegionNode) { + return + } + this._unVisibleRectRegionNode.remove() + this._unVisibleRectRegionNode = null +} + +// 更新展开收起按钮的隐藏占位元素 +function updateExpandBtnPlaceholderRect() { + // 布局改变需要重新渲染 + if (this.needRerenderExpandBtnPlaceholderRect) { + this.needRerenderExpandBtnPlaceholderRect = false + this.renderExpandBtnPlaceholderRect() + } + // 没有子节点到有子节点需要渲染 + if (this.nodeData.children && this.nodeData.children.length > 0) { + if (!this._unVisibleRectRegionNode) { + this.renderExpandBtnPlaceholderRect() + } + } else { + // 有子节点到没子节点,需要删除 + if (this._unVisibleRectRegionNode) { + this.clearExpandBtnPlaceholderRect() + } + } +} + +export default { + renderExpandBtnPlaceholderRect, + clearExpandBtnPlaceholderRect, + updateExpandBtnPlaceholderRect +}