修复二级节点拖拽到其他节点或其他节点拖拽到二级节点时节点样式没有更新的问题

simple-mind-map/index.js

@@ -142,21 +142,21 @@ class MindMap {
   }
 
   //  渲染，部分渲染
-  render() {
+  render(callback) {
     this.batchExecution.push('render', () => {
       this.initTheme()
       this.renderer.reRender = false
-      this.renderer.render()
+      this.renderer.render(callback)
     })
   }
 
   //  重新渲染
-  reRender() {
+  reRender(callback) {
     this.batchExecution.push('render', () => {
       this.draw.clear()
       this.initTheme()
       this.renderer.reRender = true
-      this.renderer.render()
+      this.renderer.render(callback)
     })
   }
 

simple-mind-map/package.json

@@ -1,6 +1,6 @@
 {
   "name": "simple-mind-map",
-  "version": "0.3.1",
+  "version": "0.3.2",
   "description": "一个简单的web在线思维导图",
   "authors": [
     {

simple-mind-map/src/Render.js

@@ -239,7 +239,7 @@ class Render {
 
   //   渲染
 
-  render() {
+  render(callback = () => {}) {
     if (this.reRender) {
       this.clearActive()
     }
@@ -247,6 +247,7 @@ class Render {
       this.root = root
       this.root.render(() => {
         this.mindMap.emit('node_tree_render_end')
+        callback()
       })
     })
     this.mindMap.emit('node_active', null, this.activeNodeList)
@@ -472,6 +473,8 @@ class Render {
     if (node.isRoot) {
       return
     }
+    // 如果是二级节点变成了下级节点，或是下级节点变成了二级节点，节点样式需要更新
+    let nodeLayerChanged = (node.layerIndex === 1 && exist.layerIndex !== 1) || (node.layerIndex !== 1 && exist.layerIndex === 1)
     // 移动节点
     let nodeParent = node.parent
     let nodeBorthers = nodeParent.children
@@ -495,7 +498,12 @@ class Render {
     }
     existBorthers.splice(existIndex, 0, node)
     existParent.nodeData.children.splice(existIndex, 0, node.nodeData)
-    this.mindMap.render()
+    this.mindMap.render(() => {
+      if (nodeLayerChanged) {
+        node.getSize()
+        node.renderNode()
+      }
+    })
   }
 
   //  将节点移动到另一个节点的后面
@@ -504,6 +512,8 @@ class Render {
     if (node.isRoot) {
       return
     }
+    // 如果是二级节点变成了下级节点，或是下级节点变成了二级节点，节点样式需要更新
+    let nodeLayerChanged = (node.layerIndex === 1 && exist.layerIndex !== 1) || (node.layerIndex !== 1 && exist.layerIndex === 1)
     // 移动节点
     let nodeParent = node.parent
     let nodeBorthers = nodeParent.children
@@ -528,7 +538,12 @@ class Render {
     existIndex++
     existBorthers.splice(existIndex, 0, node)
     existParent.nodeData.children.splice(existIndex, 0, node.nodeData)
-    this.mindMap.render()
+    this.mindMap.render(() => {
+      if (nodeLayerChanged) {
+        node.getSize()
+        node.renderNode()
+      }
+    })
   }
 
   //  移除节点

web/src/pages/Doc/en/changelog/index.md

@@ -1,5 +1,9 @@
 # Changelog
 
+## 0.3.2
+
+Fix: 1.Fix the problem that the node style is not updated when the secondary node is dragged to other nodes or other nodes are dragged to the secondary node;
+
 ## 0.3.1
 
 Fix: 1.The problem that deleting the background image does not take effect; 2.The problem that the connector runs above the root node when the node is dragged to the root node.

web/src/pages/Doc/en/changelog/index.vue

@@ -1,6 +1,8 @@
 <template>
   <div>
     <h1>Changelog</h1>
+<h2>0.3.2</h2>
+<p>Fix: 1.Fix the problem that the node style is not updated when the secondary node is dragged to other nodes or other nodes are dragged to the secondary node;</p>
 <h2>0.3.1</h2>
 <p>Fix: 1.The problem that deleting the background image does not take effect; 2.The problem that the connector runs above the root node when the node is dragged to the root node.</p>
 <p>New: Add position and size settings for background image display. This setting is also supported for exported pictures.</p>

web/src/pages/Doc/en/constructor/index.md

@@ -119,12 +119,16 @@ Get the `svg` data and return an object. The detailed structure is as follows:
 }
 ```
 
-### render()
+### render(callback)
+
+- `callback`: `v0.3.2+`, `Function`, Called when the re-rendering is complete
 
 Triggers a full rendering, which will reuse nodes for better performance. If
 only the node positions have changed, this method can be called to `reRender`.
 
-### reRender()
+### reRender(callback)
+
+- `callback`: `v0.3.2+`, `Function`, Called when the re-rendering is complete
 
 Performs a full re-render, clearing the canvas and creating new nodes. This has
 poor performance and should be used sparingly.

web/src/pages/Doc/en/constructor/index.vue

@@ -235,10 +235,16 @@ mindMap.setTheme(<span class="hljs-string">&#x27;Theme name&#x27;</span>)
   scaleY, <span class="hljs-comment">// Number, vertical zoom value of mind map graphics</span>
 }
 </code></pre>
-<h3>render()</h3>
+<h3>render(callback)</h3>
+<ul>
+<li><code>callback</code>: <code>v0.3.2+</code>, <code>Function</code>, Called when the re-rendering is complete</li>
+</ul>
 <p>Triggers a full rendering, which will reuse nodes for better performance. If
 only the node positions have changed, this method can be called to <code>reRender</code>.</p>
-<h3>reRender()</h3>
+<h3>reRender(callback)</h3>
+<ul>
+<li><code>callback</code>: <code>v0.3.2+</code>, <code>Function</code>, Called when the re-rendering is complete</li>
+</ul>
 <p>Performs a full re-render, clearing the canvas and creating new nodes. This has
 poor performance and should be used sparingly.</p>
 <h3>resize()</h3>

web/src/pages/Doc/zh/changelog/index.md

@@ -1,5 +1,9 @@
 # Changelog
 
+## 0.3.2
+
+修复：1.修复二级节点拖拽到其他节点或其他节点拖拽到二级节点时节点样式没有更新的问题；
+
 ## 0.3.1
 
 修复：1.删除背景图片不生效的问题；2.节点拖拽到根节点时连接线跑到根节点上方的问题。

web/src/pages/Doc/zh/changelog/index.vue

@@ -1,6 +1,8 @@
 <template>
   <div>
     <h1>Changelog</h1>
+<h2>0.3.2</h2>
+<p>修复：1.修复二级节点拖拽到其他节点或其他节点拖拽到二级节点时节点样式没有更新的问题；</p>
 <h2>0.3.1</h2>
 <p>修复：1.删除背景图片不生效的问题；2.节点拖拽到根节点时连接线跑到根节点上方的问题。</p>
 <p>新增：背景图片展示增加位置和大小设置。导出的图片也同步支持该设置。</p>

web/src/pages/Doc/zh/constructor/index.md

@@ -119,11 +119,15 @@ mindMap.setTheme('主题名称')
 }
 ```
 
-### render()
+### render(callback)
+
+- `callback`：`v0.3.2+`，`Function`，当重新渲染完成时调用
 
 触发整体渲染，会进行节点复用，性能较`reRender`会更好一点，如果只是节点位置变化了可以调用该方法进行渲染
 
-### reRender()
+### reRender(callback)
+
+- `callback`：`v0.3.2+`，`Function`，当重新渲染完成时调用
 
 整体重新渲染，会清空画布，节点也会重新创建，性能不好，慎重使用
 

web/src/pages/Doc/zh/constructor/index.vue

@@ -235,9 +235,15 @@ mindMap.setTheme(<span class="hljs-string">&#x27;主题名称&#x27;</span>)
   scaleY, <span class="hljs-comment">// Number，思维导图图形的垂直缩放值</span>
 }
 </code></pre>
-<h3>render()</h3>
+<h3>render(callback)</h3>
+<ul>
+<li><code>callback</code>：<code>v0.3.2+</code>，<code>Function</code>，当重新渲染完成时调用</li>
+</ul>
 <p>触发整体渲染，会进行节点复用，性能较<code>reRender</code>会更好一点，如果只是节点位置变化了可以调用该方法进行渲染</p>
-<h3>reRender()</h3>
+<h3>reRender(callback)</h3>
+<ul>
+<li><code>callback</code>：<code>v0.3.2+</code>，<code>Function</code>，当重新渲染完成时调用</li>
+</ul>
 <p>整体重新渲染，会清空画布，节点也会重新创建，性能不好，慎重使用</p>
 <h3>resize()</h3>
 <p>容器尺寸变化后，需要调用该方法进行适应</p>