openSourceRemote/mind-map
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

'状态数据支持保存激活状态、视图状态（拖动位置、缩放值）'

Browse Source
This commit is contained in:
wanglin2 2021-11-22 19:59:21 +08:00
parent b3e9797b0e
commit 4677b11dfb
5 changed files with 206 additions and 89 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

63
README.md
View File

@ -112,29 +112,30 @@ const mindMap = new MindMap({
监听事件，事件列表： 监听事件，事件列表：
| 事件名称 | 描述 | 回调参数 | | 事件名称 | 描述 | 回调参数 |
| --------------------- | ------------------------------------------ | ------------------------------------------------------------ | | --------------------------- | ------------------------------------------ | ------------------------------------------------------------ |
| data_change | 渲染树数据变化，可以监听该方法获取最新数据 | data（当前渲染树数据） | | data_change | 渲染树数据变化，可以监听该方法获取最新数据 | data（当前渲染树数据） |
| back_forward | 前进或回退 | activeHistoryIndex（当前在历史数据数组里的索引）、length（当前历史数据数组的长度） | | view_data_change（v0.1.1+） | 视图变化数据，比如拖动或缩放时会触发 | data（当前视图状态数据） |
| draw_click | *画布的单击事件* | e（事件对象） | | back_forward | 前进或回退 | activeHistoryIndex（当前在历史数据数组里的索引）、length（当前历史数据数组的长度） |
| svg_mousedown | svg画布的鼠标按下事件 | e（事件对象） | | draw_click | *画布的单击事件* | e（事件对象） |
| mousedown | el元素的鼠标按下事件 | e（事件对象）、this（Event事件类实例） | | svg_mousedown | svg画布的鼠标按下事件 | e（事件对象） |
| mousemove | el元素的鼠标移动事件 | e（事件对象）、this（Event事件类实例） | | mousedown | el元素的鼠标按下事件 | e（事件对象）、this（Event事件类实例） |
| drag | 如果是按住左键拖动的话会触发拖动事件 | e（事件对象）、this（Event事件类实例） | | mousemove | el元素的鼠标移动事件 | e（事件对象）、this（Event事件类实例） |
| mouseup | el元素的鼠标松开事件 | e（事件对象）、this（Event事件类实例） | | drag | 如果是按住左键拖动的话会触发拖动事件 | e（事件对象）、this（Event事件类实例） |
| mousewheel | 鼠标滚动事件 | e（事件对象）、dir（向上up还是向下down滚动）、this（Event事件类实例） | | mouseup | el元素的鼠标松开事件 | e（事件对象）、this（Event事件类实例） |
| contextmenu | svg画布的鼠标右键菜单事件 | e（事件对象） | | mousewheel | 鼠标滚动事件 | e（事件对象）、dir（向上up还是向下down滚动）、this（Event事件类实例） |
| node_click | 节点的单击事件 | this（节点实例）、e（事件对象） | | contextmenu | svg画布的鼠标右键菜单事件 | e（事件对象） |
| node_mousedown | 节点的鼠标按下事件 | this（节点实例）、e（事件对象） | | node_click | 节点的单击事件 | this（节点实例）、e（事件对象） |
| node_mouseup | 节点的鼠标松开事件 | this（节点实例）、e（事件对象） | | node_mousedown | 节点的鼠标按下事件 | this（节点实例）、e（事件对象） |
| node_dblclick | 节点的双击事件 | this（节点实例）、e（事件对象） | | node_mouseup | 节点的鼠标松开事件 | this（节点实例）、e（事件对象） |
| node_contextmenu | 节点的右键菜单事件 | e（事件对象）、this（节点实例） | | node_dblclick | 节点的双击事件 | this（节点实例）、e（事件对象） |
| before_node_active | 节点激活前事件 | this（节点实例）、activeNodeList（当前激活的所有节点列表） | | node_contextmenu | 节点的右键菜单事件 | e（事件对象）、this（节点实例） |
| node_active | 节点激活事件 | this（节点实例）、activeNodeList（当前激活的所有节点列表） | | before_node_active | 节点激活前事件 | this（节点实例）、activeNodeList（当前激活的所有节点列表） |
| expand_btn_click | 节点展开或收缩事件 | this（节点实例） | | node_active | 节点激活事件 | this（节点实例）、activeNodeList（当前激活的所有节点列表） |
| before_show_text_edit | 节点文本编辑框即将打开事件 | | | expand_btn_click | 节点展开或收缩事件 | this（节点实例） |
| hide_text_edit | 节点文本编辑框关闭事件 | textEditNode（文本编辑框DOM节点）、activeNodeList（当前激活的所有节点列表） | | before_show_text_edit | 节点文本编辑框即将打开事件 | |
| scale | 放大缩小事件 | scale（缩放比例） | | hide_text_edit | 节点文本编辑框关闭事件 | textEditNode（文本编辑框DOM节点）、activeNodeList（当前激活的所有节点列表） |
| scale | 放大缩小事件 | scale（缩放比例） |
@ -402,6 +403,22 @@ mindMap.keyCommand.addShortcut('Control+Enter', () => {})
#### getTransformData()
v0.1.1+
获取当前变换数据，可用于回显
#### setTransformData(data)
v0.1.1+
动态设置变换数据，可以通过getTransformData方法获取变换数据
## doExport实例 ## doExport实例
`doExport`实例负责导出，可通过`mindMap.doExport`获取到该实例 `doExport`实例负责导出，可通过`mindMap.doExport`获取到该实例

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

@ -19,6 +19,7 @@ class View {
this.sy = 0 this.sy = 0
this.x = 0 this.x = 0
this.y = 0 this.y = 0
this.setTransformData(this.mindMap.opt.viewData)
this.bind() this.bind()
} }
@ -63,6 +64,42 @@ class View {
}) })
} }
/**
* javascript comment
* @Author: 王林25
* @Date: 2021-11-22 18:30:24
* @Desc: 获取当前变换状态数据
*/
getTransformData() {
return {
transform: this.mindMap.draw.transform(),
state: {
scale: this.scale,
x: this.x,
y: this.y,
sx: this.sx,
sy: this.sy
}
}
}
/**
* javascript comment
* @Author: 王林25
* @Date: 2021-11-22 19:54:17
* @Desc: 动态设置变换状态数据
*/
setTransformData(viewData) {
if (viewData) {
Object.keys(viewData.state).forEach((prop) => {
this[prop] = viewData.state[prop]
})
this.mindMap.draw.transform({
...viewData.transform
})
}
}
/** /**
* javascript comment * javascript comment
* @Author: 王林25 * @Author: 王林25
@ -96,6 +133,7 @@ class View {
origin: 'left center', origin: 'left center',
translate: [this.x, this.y], translate: [this.x, this.y],
}) })
this.mindMap.emit('view_data_change', this.getTransformData())
} }
/** /**
@ -104,22 +142,18 @@ class View {
* @Desc: 恢复 * @Desc: 恢复
*/ */
reset() { reset() {
let t = this.mindMap.draw.transform() // let t = this.mindMap.draw.transform()
this.scale = 1 this.scale = 1
this.x = 0 this.x = 0
this.y = 0 this.y = 0
this.mindMap.draw.transform({ this.transform()
scale: this.scale,
origin: 'left center',
translate: [this.x, this.y],
})
} }
/** /**
* @Author: 王林 * @Author: 王林
* @Date: 2021-07-04 17:10:34 * @Date: 2021-07-04 17:10:34
* @Desc: 缩小 * @Desc: 缩小
*/ */
narrow() { narrow() {
if (this.scale - this.mindMap.opt.scaleRatio > 0.1) { if (this.scale - this.mindMap.opt.scaleRatio > 0.1) {
this.scale -= this.mindMap.opt.scaleRatio this.scale -= this.mindMap.opt.scaleRatio

2
simple-mind-map/src/utils/index.js
View File

@ -143,7 +143,7 @@ export const copyRenderTree = (tree, root) => {
*/ */
export const copyNodeTree = (tree, root) => { export const copyNodeTree = (tree, root) => {
tree.data = simpleDeepClone(root.nodeData.data) tree.data = simpleDeepClone(root.nodeData.data)
tree.data.isActive = false // tree.data.isActive = false
tree.children = [] tree.children = []
if (root.children && root.children.length > 0) { if (root.children && root.children.length > 0) {
root.children.forEach((item, index) => { root.children.forEach((item, index) => {

2
web/src/api/index.js
View File

@ -10,7 +10,7 @@ const SIMPLE_MIND_MAP_DATA = 'SIMPLE_MIND_MAP_DATA'
*/ */
const copyMindMapTreeData = (tree, root) => { const copyMindMapTreeData = (tree, root) => {
tree.data = simpleDeepClone(root.data) tree.data = simpleDeepClone(root.data)
tree.data.isActive = false // tree.data.isActive = false
tree.children = [] tree.children = []
if (root.children && root.children.length > 0) { if (root.children && root.children.length > 0) {
root.children.forEach((item, index) => { root.children.forEach((item, index) => {

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

@ -14,17 +14,17 @@
</template> </template>
<script> <script>
import MindMap from "simple-mind-map"; import MindMap from 'simple-mind-map'
import Outline from "./Outline"; import Outline from './Outline'
import Style from "./Style"; import Style from './Style'
import BaseStyle from "./BaseStyle"; import BaseStyle from './BaseStyle'
import Theme from "./Theme"; import Theme from './Theme'
import Structure from "./Structure"; import Structure from './Structure'
import Count from "./Count"; import Count from './Count'
import NavigatorToolbar from "./NavigatorToolbar"; import NavigatorToolbar from './NavigatorToolbar'
import ShortcutKey from "./ShortcutKey"; import ShortcutKey from './ShortcutKey'
import Contextmenu from "./Contextmenu"; import Contextmenu from './Contextmenu'
import { getData, storeData } from "@/api"; import { getData, storeData, storeConfig } from '@/api'
/** /**
* @Author: 王林 * @Author: 王林
@ -32,7 +32,7 @@ import { getData, storeData } from "@/api";
* @Desc: 编辑区域 * @Desc: 编辑区域
*/ */
export default { export default {
name: "Edit", name: 'Edit',
components: { components: {
Outline, Outline,
Style, Style,
@ -48,25 +48,73 @@ export default {
return { return {
mindMap: null, mindMap: null,
mindMapData: null, mindMapData: null,
prevImg: "", prevImg: '',
}; openTest: false
}
}, },
mounted() { mounted() {
this.getData(); this.getData()
this.init(); this.init()
this.$bus.$on("execCommand", this.execCommand); this.$bus.$on('execCommand', this.execCommand)
this.$bus.$on("export", this.export); this.$bus.$on('export', this.export)
this.$bus.$on("setData", this.setData); this.$bus.$on('setData', this.setData)
if (this.openTest) {
setTimeout(() => {
this.test()
}, 5000)
}
}, },
methods: { methods: {
/**
* @Author: 王林25
* @Date: 2021-11-22 19:39:28
* @Desc: 数据更改测试
*/
test() {
let nodeData = {
data: { text: '根节点', expand: true, isActive: false },
children: [],
}
setTimeout(() => {
nodeData.data.text = '理想青年实验室'
this.mindMap.setData(JSON.parse(JSON.stringify(nodeData)))
setTimeout(() => {
nodeData.children.push({
data: { text: '网站', expand: true, isActive: false },
children: [],
})
this.mindMap.setData(JSON.parse(JSON.stringify(nodeData)))
setTimeout(() => {
nodeData.children.push({
data: { text: '博客', expand: true, isActive: false },
children: [],
})
this.mindMap.setData(JSON.parse(JSON.stringify(nodeData)))
setTimeout(() => {
let viewData = {"transform":{"scaleX":1,"scaleY":1,"shear":0,"rotate":0,"translateX":179,"translateY":0,"originX":0,"originY":0,"a":1,"b":0,"c":0,"d":1,"e":179,"f":0},"state":{"scale":1,"x":179,"y":0,"sx":0,"sy":0}}
this.mindMap.view.setTransformData(viewData)
setTimeout(() => {
let viewData = {"transform":{"scaleX":1.6000000000000005,"scaleY":1.6000000000000005,"shear":0,"rotate":0,"translateX":-373.3000000000004,"translateY":-281.10000000000025,"originX":0,"originY":0,"a":1.6000000000000005,"b":0,"c":0,"d":1.6000000000000005,"e":-373.3000000000004,"f":-281.10000000000025},"state":{"scale":1.6000000000000005,"x":179,"y":0,"sx":0,"sy":0}}
this.mindMap.view.setTransformData(viewData)
}, 1000);
}, 1000)
}, 1000)
}, 1000)
}, 1000)
},
/** /**
* @Author: 王林 * @Author: 王林
* @Date: 2021-07-03 22:11:37 * @Date: 2021-07-03 22:11:37
* @Desc: 获取思维导图数据，实际应该调接口获取 * @Desc: 获取思维导图数据，实际应该调接口获取
*/ */
getData() { getData() {
let storeData = getData(); let storeData = getData()
this.mindMapData = storeData; this.mindMapData = storeData
}, },
/** /**
@ -75,9 +123,18 @@ export default {
* @Desc: 存储数据当数据有变时 * @Desc: 存储数据当数据有变时
*/ */
bindSaveEvent() { bindSaveEvent() {
this.$bus.$on("data_change", (data) => { if (this.openTest) {
storeData(data); return
}); }
this.$bus.$on('data_change', (data) => {
storeData(data)
})
this.$bus.$on('view_data_change', (data) => {
console.log(JSON.stringify(data))
storeConfig({
view: data,
})
})
}, },
/** /**
@ -86,8 +143,15 @@ export default {
* @Desc: 手动保存 * @Desc: 手动保存
*/ */
manualSave() { manualSave() {
let data = this.mindMap.command.getCopyData(); if (this.openTest) {
storeData(data); return
}
let data = this.mindMap.command.getCopyData()
storeData(data)
let viewData = this.mindMap.view.getTransformData()
storeConfig({
view: viewData,
})
}, },
/** /**
@ -96,40 +160,42 @@ export default {
* @Desc: 初始化 * @Desc: 初始化
*/ */
init() { init() {
let { root, layout, theme } = this.mindMapData; let { root, layout, theme, view } = this.mindMapData
this.mindMap = new MindMap({ this.mindMap = new MindMap({
el: this.$refs.mindMapContainer, el: this.$refs.mindMapContainer,
data: root, data: root,
layout: layout, layout: layout,
theme: theme.template, theme: theme.template,
themeConfig: theme.config, themeConfig: theme.config,
}); viewData: view,
this.mindMap.keyCommand.addShortcut("Control+s", () => { })
this.manualSave(); this.mindMap.keyCommand.addShortcut('Control+s', () => {
}); this.manualSave()
})
// 转发事件 // 转发事件
[ ;[
"node_active", 'node_active',
"data_change", 'data_change',
"back_forward", 'view_data_change',
"node_contextmenu", 'back_forward',
"node_click", 'node_contextmenu',
"draw_click", 'node_click',
"expand_btn_click", 'draw_click',
"svg_mousedown", 'expand_btn_click',
"mouseup", 'svg_mousedown',
'mouseup',
].forEach((event) => { ].forEach((event) => {
this.mindMap.on(event, (...args) => { this.mindMap.on(event, (...args) => {
this.$bus.$emit(event, ...args); this.$bus.$emit(event, ...args)
}); })
}); })
this.bindSaveEvent(); this.bindSaveEvent()
}, },
/** /**
* @Author: 王林 * @Author: 王林
* @Date: 2021-08-03 23:01:13 * @Date: 2021-08-03 23:01:13
* @Desc: 动态设置思维导图数据 * @Desc: 动态设置思维导图数据
*/ */
setData(data) { setData(data) {
this.mindMap.setData(data) this.mindMap.setData(data)
@ -142,7 +208,7 @@ export default {
* @Desc: 重新渲染 * @Desc: 重新渲染
*/ */
reRender() { reRender() {
this.mindMap.reRender(); this.mindMap.reRender()
}, },
/** /**
@ -151,7 +217,7 @@ export default {
* @Desc: 执行命令 * @Desc: 执行命令
*/ */
execCommand(...args) { execCommand(...args) {
this.mindMap.execCommand(...args); this.mindMap.execCommand(...args)
}, },
/** /**
@ -161,13 +227,13 @@ export default {
*/ */
async export(...args) { async export(...args) {
try { try {
this.mindMap.export(...args); this.mindMap.export(...args)
} catch (error) { } catch (error) {
console.log(error); console.log(error)
} }
}, },
}, },
}; }
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>