优化：getSize以后不需要调用renderNode方法，直接layout即可

simple-mind-map/src/Node.js

@@ -9,7 +9,6 @@ import iconsSvg from './svg/icons'
 
 class Node {
   //  构造函数
-
   constructor(opt = {}) {
     // 节点数据
     this.nodeData = this.handleData(opt.data || {})
@@ -87,7 +86,6 @@ class Node {
     // 初始渲染
     this.initRender = true
     // 初始化
-    // this.createNodeData()
     this.getSize()
   }
 
@@ -109,7 +107,6 @@ class Node {
   }
 
   //  复位部分布局时会重新设置的数据
-
   reset() {
     this.children = []
     this.parent = null
@@ -120,7 +117,6 @@ class Node {
   }
 
   //  处理数据
-
   handleData(data) {
     data.data.expand = data.data.expand === false ? false : true
     data.data.isActive = data.data.isActive === true ? true : false
@@ -129,13 +125,11 @@ class Node {
   }
 
   //  检查节点是否存在自定义数据
-
   hasCustomPosition() {
     return this.customLeft !== undefined && this.customTop !== undefined
   }
 
   //  检查节点是否存在自定义位置的祖先节点
-
   ancestorHasCustomPosition() {
     let node = this
     while (node) {
@@ -148,13 +142,11 @@ class Node {
   }
 
   //  添加子节点
-
   addChildren(node) {
     this.children.push(node)
   }
 
   //  创建节点的各个内容对象数据
-
   createNodeData() {
     this._imgData = this.createImgNode()
     this._iconData = this.createIconNode()
@@ -166,7 +158,6 @@ class Node {
   }
 
   //  解绑所有事件
-
   removeAllEvent() {
     if (this._noteData) {
       this._noteData.node.off(['mouseover', 'mouseout'])
@@ -188,7 +179,6 @@ class Node {
   }
 
   //  移除节点内容
-
   removeAllNode() {
     // 节点内的内容
     ;[
@@ -223,8 +213,8 @@ class Node {
   }
 
   //  计算节点的宽高
-
   getSize() {
+    this.removeAllEvent()
     this.removeAllNode()
     this.createNodeData()
     let { width, height } = this.getNodeRect()
@@ -236,7 +226,6 @@ class Node {
   }
 
   //  计算节点尺寸信息
-
   getNodeRect() {
     // 宽高
     let imgContentWidth = 0
@@ -304,7 +293,6 @@ class Node {
   }
 
   //  创建图片节点
-
   createImgNode() {
     let img = this.nodeData.data.image
     if (!img) {
@@ -326,7 +314,6 @@ class Node {
   }
 
   //  获取图片显示宽高
-
   getImgShowSize() {
     return resizeImgSize(
       this.nodeData.data.imageSize.width,
@@ -337,7 +324,6 @@ class Node {
   }
 
   //  创建icon节点
-
   createIconNode() {
     let _data = this.nodeData.data
     if (!_data.icon || _data.icon.length <= 0) {
@@ -384,7 +370,6 @@ class Node {
   }
 
   //  创建文本节点
-
   createTextNode() {
     if (this.nodeData.data.richText) {
       return this.createRichTextNode()
@@ -472,7 +457,6 @@ class Node {
   }
 
   //  创建标签节点
-
   createTagNode() {
     let tagData = this.nodeData.data.tag
     if (!tagData || tagData.length <= 0) {
@@ -499,7 +483,6 @@ class Node {
   }
 
   //  创建备注节点
-
   createNoteNode() {
     if (!this.nodeData.data.note) {
       return null
@@ -557,7 +540,6 @@ class Node {
   }
 
   //  获取节点形状
-
   getShape() {
     // 节点使用功能横线风格的话不支持设置形状，直接使用默认的矩形
     return this.mindMap.themeConfig.nodeUseLineStyle
@@ -566,7 +548,6 @@ class Node {
   }
 
   //  定位节点内容
-
   layout() {
     let { width, textContentItemMargin } = this
     let { paddingY } = this.getPaddingVale()
@@ -714,7 +695,6 @@ class Node {
   }
 
   //  激活节点
-
   active(e) {
     if (this.mindMap.opt.readonly) {
       return
@@ -731,7 +711,6 @@ class Node {
   }
 
   //  渲染节点到画布，会移除旧的，创建新的
-
   renderNode() {
     // 连线
     this.renderLine()
@@ -742,7 +721,6 @@ class Node {
   }
 
   //  更新节点
-
   update(isLayout = false) {
     if (!this.group) {
       return
@@ -774,7 +752,6 @@ class Node {
   }
 
   //  递归渲染
-
   render(callback = () => {}) {
     // 节点
     if (this.initRender) {
@@ -818,7 +795,6 @@ class Node {
   }
 
   //  递归删除
-
   remove() {
     this.initRender = true
     this.removeAllEvent()
@@ -837,7 +813,6 @@ class Node {
   }
 
   //  隐藏节点
-
   hide() {
     this.group.hide()
     this.hideGeneralization()
@@ -858,7 +833,6 @@ class Node {
   }
 
   //  显示节点
-
   show() {
     if (!this.group) {
       return
@@ -882,7 +856,6 @@ class Node {
   }
 
   //  连线
-
   renderLine(deep = false) {
     if (this.nodeData.data.expand === false) {
       return
@@ -919,7 +892,6 @@ class Node {
   }
 
   //  设置连线样式
-
   styleLine(line, node) {
     let width =
       node.getSelfInhertStyle('lineWidth') || node.getStyle('lineWidth', true)
@@ -936,7 +908,6 @@ class Node {
   }
 
   //  移除连线
-
   removeLine() {
     this._lines.forEach(line => {
       line.remove()
@@ -945,13 +916,11 @@ class Node {
   }
 
   //  检查是否存在概要
-
   checkHasGeneralization() {
     return !!this.nodeData.data.generalization
   }
 
   //  创建概要节点
-
   createGeneralizationNode() {
     if (this.isGeneralization || !this.checkHasGeneralization()) {
       return
@@ -980,14 +949,12 @@ class Node {
   }
 
   //  更新概要节点
-
   updateGeneralization() {
     this.removeGeneralization()
     this.createGeneralizationNode()
   }
 
   //  渲染概要节点
-
   renderGeneralization() {
     if (this.isGeneralization) {
       return
@@ -1013,7 +980,6 @@ class Node {
   }
 
   //  删除概要节点
-
   removeGeneralization() {
     if (this._generalizationLine) {
       this._generalizationLine.remove()
@@ -1034,7 +1000,6 @@ class Node {
   }
 
   //  隐藏概要节点
-
   hideGeneralization() {
     if (this._generalizationLine) {
       this._generalizationLine.hide()
@@ -1045,7 +1010,6 @@ class Node {
   }
 
   //  显示概要节点
-
   showGeneralization() {
     if (this._generalizationLine) {
       this._generalizationLine.show()
@@ -1056,7 +1020,6 @@ class Node {
   }
 
   //  创建或更新展开收缩按钮内容
-
   updateExpandBtnNode() {
     if (this._expandBtn) {
       this._expandBtn.clear()
@@ -1076,7 +1039,6 @@ class Node {
   }
 
   //  更新展开收缩按钮位置
-
   updateExpandBtnPos() {
     if (!this._expandBtn) {
       return
@@ -1085,7 +1047,6 @@ class Node {
   }
 
   //  展开收缩按钮
-
   renderExpandBtn() {
     if (
       !this.nodeData.children ||
@@ -1123,7 +1084,6 @@ class Node {
   }
 
   //  移除展开收缩按钮
-
   removeExpandBtn() {
     if (this._expandBtn) {
       this._expandBtn.off(['mouseover', 'mouseout', 'click'])
@@ -1134,7 +1094,6 @@ class Node {
   }
 
   //  检测当前节点是否是某个节点的祖先节点
-
   isParent(node) {
     if (this === node) {
       return false
@@ -1150,7 +1109,6 @@ class Node {
   }
 
   //  检测当前节点是否是某个节点的兄弟节点
-
   isBrother(node) {
     if (!this.parent || this === node) {
       return false
@@ -1161,7 +1119,6 @@ class Node {
   }
 
   //  获取padding值
-
   getPaddingVale() {
     return {
       paddingX: this.getStyle('paddingX', true, this.nodeData.data.isActive),
@@ -1170,20 +1127,17 @@ class Node {
   }
 
   //  获取某个样式
-
   getStyle(prop, root, isActive) {
     let v = this.style.merge(prop, root, isActive)
     return v === undefined ? '' : v
   }
 
   //  获取自定义样式
-
   getSelfStyle(prop) {
     return this.style.getSelfStyle(prop)
   }
 
   //   获取最近一个存在自身自定义样式的祖先节点的自定义样式
-
   getParentSelfStyle(prop) {
     if (this.parent) {
       return (
@@ -1194,7 +1148,6 @@ class Node {
   }
 
   //  获取自身可继承的自定义样式
-
   getSelfInhertStyle(prop) {
     return (
       this.getSelfStyle(prop) || // 自身
@@ -1203,61 +1156,51 @@ class Node {
   }
 
   //  修改某个样式
-
   setStyle(prop, value, isActive) {
     this.mindMap.execCommand('SET_NODE_STYLE', this, prop, value, isActive)
   }
 
   //  获取数据
-
   getData(key) {
     return key ? this.nodeData.data[key] || '' : this.nodeData.data
   }
 
   //  设置数据
-
   setData(data = {}) {
     this.mindMap.execCommand('SET_NODE_DATA', this, data)
   }
 
   //  设置文本
-
   setText(text, richText) {
     this.mindMap.execCommand('SET_NODE_TEXT', this, text, richText)
   }
 
   //  设置图片
-
   setImage(imgData) {
     this.mindMap.execCommand('SET_NODE_IMAGE', this, imgData)
   }
 
   //  设置图标
-
   setIcon(icons) {
     this.mindMap.execCommand('SET_NODE_ICON', this, icons)
   }
 
   //  设置超链接
-
   setHyperlink(link, title) {
     this.mindMap.execCommand('SET_NODE_HYPERLINK', this, link, title)
   }
 
   //  设置备注
-
   setNote(note) {
     this.mindMap.execCommand('SET_NODE_NOTE', this, note)
   }
 
   //  设置标签
-
   setTag(tag) {
     this.mindMap.execCommand('SET_NODE_TAG', this, tag)
   }
 
   //  设置形状
-
   setShape(shape) {
     this.mindMap.execCommand('SET_NODE_SHAPE', this, shape)
   }

simple-mind-map/src/Render.js

@@ -515,7 +515,7 @@ class Render {
     this.mindMap.render(() => {
       if (nodeLayerChanged) {
         node.getSize()
-        node.renderNode()
+        node.layout()
       }
     })
   }
@@ -555,7 +555,7 @@ class Render {
     this.mindMap.render(() => {
       if (nodeLayerChanged) {
         node.getSize()
-        node.renderNode()
+        node.layout()
       }
     })
   }
@@ -964,7 +964,7 @@ class Render {
   setNodeDataRender(node, data) {
     this.setNodeData(node, data)
     let changed = node.getSize()
-    node.renderNode()
+    node.layout()
     if (changed) {
       if (node.isGeneralization) {
         // 概要节点

simple-mind-map/src/Style.js

@@ -2,10 +2,8 @@ import { tagColorList } from './utils/constant'
 const rootProp = ['paddingX', 'paddingY']
 
 //  样式类
-
 class Style {
   //   设置背景样式
-
   static setBackgroundStyle(el, themeConfig) {
     let { backgroundColor, backgroundImage, backgroundRepeat, backgroundPosition, backgroundSize } = themeConfig
     el.style.backgroundColor = backgroundColor
@@ -20,13 +18,11 @@ class Style {
   }
 
   //  构造函数
-
   constructor(ctx) {
     this.ctx = ctx
   }
 
   //  合并样式
-
   merge(prop, root, isActive) {
     let themeConfig = this.ctx.mindMap.themeConfig
     // 三级及以下节点
@@ -62,26 +58,22 @@ class Style {
   }
 
   //  获取某个样式值
-
   getStyle(prop, root, isActive) {
     return this.merge(prop, root, isActive)
   }
 
   //  获取自身自定义样式
-
   getSelfStyle(prop) {
     return this.ctx.nodeData.data[prop]
   }
 
   //  矩形
-
   rect(node) {
     this.shape(node)
     node.radius(this.merge('borderRadius'))
   }
 
   //   矩形外的其他形状
-
   shape(node) {
     node.fill({
       color: this.merge('fillColor')
@@ -103,7 +95,6 @@ class Style {
   }
 
   //  文字
-
   text(node) {
     node
       .fill({
@@ -129,7 +120,6 @@ class Style {
   }
 
   //  html文字节点
-
   domText(node, fontSizeScale = 1) {
     node.style.fontFamily = this.merge('fontFamily')
     node.style.fontSize = this.merge('fontSize') * fontSizeScale + 'px'
@@ -139,7 +129,6 @@ class Style {
   }
 
   //  标签文字
-
   tagText(node, index) {
     node
       .fill({
@@ -151,7 +140,6 @@ class Style {
   }
 
   //  标签矩形
-
   tagRect(node, index) {
     node.fill({
       color: tagColorList[index].background
@@ -159,7 +147,6 @@ class Style {
   }
 
   //  内置图标
-
   iconNode(node) {
     node.attr({
       fill: this.merge('color')
@@ -167,13 +154,11 @@ class Style {
   }
 
   //  连线
-
   line(node, { width, color, dasharray } = {}) {
     node.stroke({ width, color, dasharray }).fill({ color: 'none' })
   }
 
   //  概要连线
-
   generalizationLine(node) {
     node
       .stroke({
@@ -184,7 +169,6 @@ class Style {
   }
 
   //  按钮
-
   iconBtn(node, fillNode) {
     node.fill({ color: '#808080' })
     fillNode.fill({ color: '#fff' })