diff --git a/README.md b/README.md
index cc6c0df4..f09cb4d2 100644
--- a/README.md
+++ b/README.md
@@ -93,7 +93,7 @@ npm run build
# 安装
-> 当前仓库版本：0.2.15，当前npm版本：0.2.15
+> 当前仓库版本：0.2.16，当前npm版本：0.2.16
```bash
npm i simple-mind-map
@@ -205,31 +205,32 @@ v0.1.7+。切换模式为只读或编辑。
监听事件，事件列表：
-| 事件名称 | 描述 | 回调参数 |
-| ----------------------------- | ------------------------------------------ | ------------------------------------------------------------ |
-| data_change | 渲染树数据变化，可以监听该方法获取最新数据 | data（当前渲染树数据） |
-| view_data_change（v0.1.1+） | 视图变化数据，比如拖动或缩放时会触发 | data（当前视图状态数据） |
-| back_forward | 前进或回退 | activeHistoryIndex（当前在历史数据数组里的索引）、length（当前历史数据数组的长度） |
-| draw_click | *画布的单击事件* | e（事件对象） |
-| svg_mousedown | svg画布的鼠标按下事件 | e（事件对象） |
-| mousedown | el元素的鼠标按下事件 | e（事件对象）、this（Event事件类实例） |
-| mousemove | el元素的鼠标移动事件 | e（事件对象）、this（Event事件类实例） |
-| drag | 如果是按住左键拖动的话会触发拖动事件 | e（事件对象）、this（Event事件类实例） |
-| mouseup | el元素的鼠标松开事件 | e（事件对象）、this（Event事件类实例） |
-| mousewheel | 鼠标滚动事件 | e（事件对象）、dir（向上up还是向下down滚动）、this（Event事件类实例） |
-| contextmenu | svg画布的鼠标右键菜单事件 | e（事件对象） |
-| node_click | 节点的单击事件 | this（节点实例）、e（事件对象） |
-| node_mousedown | 节点的鼠标按下事件 | this（节点实例）、e（事件对象） |
-| node_mouseup | 节点的鼠标松开事件 | this（节点实例）、e（事件对象） |
-| node_dblclick | 节点的双击事件 | this（节点实例）、e（事件对象） |
-| node_contextmenu | 节点的右键菜单事件 | e（事件对象）、this（节点实例） |
-| before_node_active | 节点激活前事件 | this（节点实例）、activeNodeList（当前激活的所有节点列表） |
-| node_active | 节点激活事件 | this（节点实例）、activeNodeList（当前激活的所有节点列表） |
-| expand_btn_click | 节点展开或收缩事件 | this（节点实例） |
-| before_show_text_edit | 节点文本编辑框即将打开事件 | |
-| hide_text_edit | 节点文本编辑框关闭事件 | textEditNode（文本编辑框DOM节点）、activeNodeList（当前激活的所有节点列表） |
-| scale | 放大缩小事件 | scale（缩放比例） |
-| node_img_dblclick（v0.2.15+） | 节点内图片的双击事件 | this（节点实例）、e（事件对象） |
+| 事件名称 | 描述 | 回调参数 |
+| -------------------------------- | ------------------------------------------ | ------------------------------------------------------------ |
+| data_change | 渲染树数据变化，可以监听该方法获取最新数据 | data（当前渲染树数据） |
+| view_data_change（v0.1.1+） | 视图变化数据，比如拖动或缩放时会触发 | data（当前视图状态数据） |
+| back_forward | 前进或回退 | activeHistoryIndex（当前在历史数据数组里的索引）、length（当前历史数据数组的长度） |
+| draw_click | *画布的单击事件* | e（事件对象） |
+| svg_mousedown | svg画布的鼠标按下事件 | e（事件对象） |
+| mousedown | el元素的鼠标按下事件 | e（事件对象）、this（Event事件类实例） |
+| mousemove | el元素的鼠标移动事件 | e（事件对象）、this（Event事件类实例） |
+| drag | 如果是按住左键拖动的话会触发拖动事件 | e（事件对象）、this（Event事件类实例） |
+| mouseup | el元素的鼠标松开事件 | e（事件对象）、this（Event事件类实例） |
+| mousewheel | 鼠标滚动事件 | e（事件对象）、dir（向上up还是向下down滚动）、this（Event事件类实例） |
+| contextmenu | svg画布的鼠标右键菜单事件 | e（事件对象） |
+| node_click | 节点的单击事件 | this（节点实例）、e（事件对象） |
+| node_mousedown | 节点的鼠标按下事件 | this（节点实例）、e（事件对象） |
+| node_mouseup | 节点的鼠标松开事件 | this（节点实例）、e（事件对象） |
+| node_dblclick | 节点的双击事件 | this（节点实例）、e（事件对象） |
+| node_contextmenu | 节点的右键菜单事件 | e（事件对象）、this（节点实例） |
+| before_node_active | 节点激活前事件 | this（节点实例）、activeNodeList（当前激活的所有节点列表） |
+| node_active | 节点激活事件 | this（节点实例）、activeNodeList（当前激活的所有节点列表） |
+| expand_btn_click | 节点展开或收缩事件 | this（节点实例） |
+| before_show_text_edit | 节点文本编辑框即将打开事件 | |
+| hide_text_edit | 节点文本编辑框关闭事件 | textEditNode（文本编辑框DOM节点）、activeNodeList（当前激活的所有节点列表） |
+| scale | 放大缩小事件 | scale（缩放比例） |
+| node_img_dblclick（v0.2.15+） | 节点内图片的双击事件 | this（节点实例）、e（事件对象） |
+| node_tree_render_end（v0.2.16+） | 节点树渲染完毕事件 | |
#### emit(event, ...args)
diff --git a/index.html b/index.html
index c098abc8..c234e2f3 100644
--- a/index.html
+++ b/index.html
@@ -1 +1 @@
-一个简单的web思维导图实现
\ No newline at end of file
+一个简单的web思维导图实现
\ No newline at end of file
diff --git a/simple-mind-map/package.json b/simple-mind-map/package.json
index 7d62b0ba..a11e2561 100644
--- a/simple-mind-map/package.json
+++ b/simple-mind-map/package.json
@@ -1,6 +1,6 @@
{
"name": "simple-mind-map",
- "version": "0.2.15",
+ "version": "0.2.16",
"description": "一个简单的web在线思维导图",
"authors": [
{
diff --git a/simple-mind-map/src/Node.js b/simple-mind-map/src/Node.js
index b44501d7..364a53d6 100644
--- a/simple-mind-map/src/Node.js
+++ b/simple-mind-map/src/Node.js
@@ -754,7 +754,7 @@ class Node {
* @Date: 2021-04-07 13:55:58
* @Desc: 递归渲染
*/
- render() {
+ render(callback = () => {}) {
// 节点
if (this.initRender) {
this.initRender = false
@@ -766,11 +766,19 @@ class Node {
}
// 子节点
if (this.children && this.children.length && this.nodeData.data.expand !== false) {
+ let index = 0
asyncRun(this.children.map((item) => {
return () =>{
- item.render()
+ item.render(() => {
+ index++
+ if (index >= this.children.length) {
+ callback()
+ }
+ })
}
}))
+ } else {
+ callback()
}
// 手动插入的节点立即获得焦点并且开启编辑模式
if (this.nodeData.inserting) {
diff --git a/simple-mind-map/src/Render.js b/simple-mind-map/src/Render.js
index 33a09ca3..c4a18689 100644
--- a/simple-mind-map/src/Render.js
+++ b/simple-mind-map/src/Render.js
@@ -271,7 +271,9 @@ class Render {
}
this.layout.doLayout((root) => {
this.root = root
- this.root.render()
+ this.root.render(() => {
+ this.mindMap.emit('node_tree_render_end')
+ })
})
this.mindMap.emit('node_active', null, this.activeNodeList)
}
diff --git a/simple-mind-map/src/View.js b/simple-mind-map/src/View.js
index 9bc9bfd5..d72f8e63 100644
--- a/simple-mind-map/src/View.js
+++ b/simple-mind-map/src/View.js
@@ -57,7 +57,9 @@ class View {
if (this.firstDrag) {
this.firstDrag = false
// 清除激活节点
- this.mindMap.execCommand('CLEAR_ACTIVE_NODE')
+ if (this.mindMap.renderer.activeNodeList.length > 0) {
+ this.mindMap.execCommand('CLEAR_ACTIVE_NODE')
+ }
}
this.x = this.sx + event.mousemoveOffset.x
this.y = this.sy + event.mousemoveOffset.y
diff --git a/web/src/pages/Edit/components/Edit.vue b/web/src/pages/Edit/components/Edit.vue
index a86aef79..5d7fdfb1 100644
--- a/web/src/pages/Edit/components/Edit.vue
+++ b/web/src/pages/Edit/components/Edit.vue
@@ -202,7 +202,8 @@ export default {
'expand_btn_click',
'svg_mousedown',
'mouseup',
- 'mode_change'
+ 'mode_change',
+ 'node_tree_render_end'
].forEach((event) => {
this.mindMap.on(event, (...args) => {
this.$bus.$emit(event, ...args)
diff --git a/web/src/pages/Edit/components/Navigator.vue b/web/src/pages/Edit/components/Navigator.vue
index 96bde5c6..d9bad52b 100644
--- a/web/src/pages/Edit/components/Navigator.vue
+++ b/web/src/pages/Edit/components/Navigator.vue
@@ -47,12 +47,14 @@ export default {
mounted() {
this.$bus.$on("toggle_mini_map", this.toggle_mini_map);
this.$bus.$on("data_change", this.data_change);
- this.$bus.$on("view_data_change", this.view_data_change);
+ this.$bus.$on("view_data_change", this.data_change);
+ this.$bus.$on("node_tree_render_end", this.data_change);
},
destroyed() {
this.$bus.$off("toggle_mini_map", this.toggle_mini_map);
this.$bus.$off("data_change", this.data_change);
- this.$bus.$off("view_data_change", this.view_data_change);
+ this.$bus.$off("view_data_change", this.data_change);
+ this.$bus.$off("node_tree_render_end", this.data_change);
},
methods: {
toggle_mini_map(show) {
@@ -75,15 +77,6 @@ export default {
this.drawMiniMap();
}, 500);
},
- view_data_change() {
- if (!this.showMiniMap) {
- return;
- }
- clearTimeout(this.timer);
- this.timer = setTimeout(() => {
- this.drawMiniMap();
- }, 500);
- },
init() {
let { width, height } = this.$refs.navigatorBox.getBoundingClientRect();
this.boxWidth = width;