FE/mind-map
1
0
Fork 0
mirror of https://github.com/wanglin2/mind-map.git synced 2026-02-17 22:08:25 +08:00
Code Issues Packages Projects Releases Wiki Activity

优化小地图、优化拖拽性能

Browse Source
This commit is contained in:
wanglin2
2022-10-19 09:54:38 +08:00
parent 140e9cf893
commit 0aeee0ff28
8 changed files with 51 additions and 44 deletions
Download Patch File Download Diff File Expand all files Collapse all files

53
README.md
View File

@@ -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)

2
index.html
View File

@@ -1 +1 @@
<!DOCTYPE html><html lang=""><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1"><title>一个简单的web思维导图实现</title><link href="dist/js/chunk-2d20ec02.81d632f4.js" rel="prefetch"><link href="dist/js/chunk-2d216b67.228f2009.js" rel="prefetch"><link href="dist/js/chunk-35b0a040.cb76da7d.js" rel="prefetch"><link href="dist/css/app.c8de1c03.css" rel="preload" as="style"><link href="dist/css/chunk-vendors.faba1249.css" rel="preload" as="style"><link href="dist/js/app.9bc33d3c.js" rel="preload" as="script"><link href="dist/js/chunk-vendors.ce9e5522.js" rel="preload" as="script"><link href="dist/css/chunk-vendors.faba1249.css" rel="stylesheet"><link href="dist/css/app.c8de1c03.css" rel="stylesheet"></head><body><noscript><strong>We're sorry but thoughts doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id="app"></div><script src="dist/js/chunk-vendors.ce9e5522.js"></script><script src="dist/js/app.9bc33d3c.js"></script></body></html>
<!DOCTYPE html><html lang=""><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1"><title>一个简单的web思维导图实现</title><link href="dist/js/chunk-2d20ec02.81d632f4.js" rel="prefetch"><link href="dist/js/chunk-2d216b67.228f2009.js" rel="prefetch"><link href="dist/js/chunk-35b0a040.cb76da7d.js" rel="prefetch"><link href="dist/css/app.679e49ae.css" rel="preload" as="style"><link href="dist/css/chunk-vendors.faba1249.css" rel="preload" as="style"><link href="dist/js/app.0e82fdf1.js" rel="preload" as="script"><link href="dist/js/chunk-vendors.ce9e5522.js" rel="preload" as="script"><link href="dist/css/chunk-vendors.faba1249.css" rel="stylesheet"><link href="dist/css/app.679e49ae.css" rel="stylesheet"></head><body><noscript><strong>We're sorry but thoughts doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id="app"></div><script src="dist/js/chunk-vendors.ce9e5522.js"></script><script src="dist/js/app.0e82fdf1.js"></script></body></html>

2
simple-mind-map/package.json
View File

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

12
simple-mind-map/src/Node.js
View File

@@ -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) {

4
simple-mind-map/src/Render.js
View File

@@ -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)
}

4
simple-mind-map/src/View.js
View File

@@ -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

3
web/src/pages/Edit/components/Edit.vue
View File

@@ -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)

15
web/src/pages/Edit/components/Navigator.vue
View File

@@ -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;