diff --git a/README.md b/README.md index e05d5529..fd95f8ef 100644 --- a/README.md +++ b/README.md @@ -218,6 +218,12 @@ const mindMap = new MindMap({ | SET_NODE_TAG | 设置节点标签 | node（要设置的节点）、tag（字符串数组，内置颜色信息可在[https://github.com/wanglin2/mind-map/blob/main/simple-mind-map/src/utils/constant.js](https://github.com/wanglin2/mind-map/blob/main/simple-mind-map/src/utils/constant.js)里获取到） | +#### setData(data) + +动态设置思维导图数据 + +`data`：思维导图结构数据 + #### export(type, isDownload) @@ -352,6 +358,9 @@ mindMap.keyCommand.addShortcut('Control+Enter', () => {}) 获取渲染树数据副本 +#### clearHistory() + +清空历史堆栈数据 ## view实例 diff --git a/simple-mind-map/index.js b/simple-mind-map/index.js index 86dd327d..ad400033 100644 --- a/simple-mind-map/index.js +++ b/simple-mind-map/index.js @@ -299,6 +299,18 @@ class MindMap { this.command.exec(...args) } + /** + * @Author: 王林 + * @Date: 2021-08-03 22:58:12 + * @Desc: 动态设置思维导图数据 + */ + setData(data) { + this.execCommand('CLEAR_ACTIVE_NODE') + this.command.clearHistory() + this.renderer.renderTree = data + this.reRender() + } + /** * @Author: 王林 * @Date: 2021-07-01 22:06:38 diff --git a/simple-mind-map/src/Command.js b/simple-mind-map/src/Command.js index 9f540d66..cd84cd95 100644 --- a/simple-mind-map/src/Command.js +++ b/simple-mind-map/src/Command.js @@ -17,6 +17,30 @@ class Command { this.commands = {} this.history = [] this.activeHistoryIndex = 0 + // 注册快捷键 + this.registerShortcutKeys() + } + + /** + * @Author: 王林 + * @Date: 2021-08-03 23:06:55 + * @Desc: 清空历史数据 + */ + clearHistory() { + this.history = [] + this.activeHistoryIndex = 0 + this.mindMap.emit('back_forward', 0, 0) + } + + /** + * @Author: 王林 + * @Date: 2021-08-02 23:23:19 + * @Desc: 注册快捷键 + */ + registerShortcutKeys() { + this.mindMap.keyCommand.addShortcut('Control+z', () => { + this.mindMap.execCommand('BACK') + }) } /** diff --git a/simple-mind-map/src/Export.js b/simple-mind-map/src/Export.js index 212dc4b9..5eb6637e 100644 --- a/simple-mind-map/src/Export.js +++ b/simple-mind-map/src/Export.js @@ -200,6 +200,27 @@ class Export { }) return URL.createObjectURL(blob) } + + /** + * @Author: 王林 + * @Date: 2021-08-03 22:19:17 + * @Desc: 导出为json + */ + json () { + let data = this.mindMap.command.getCopyData() + let str = JSON.stringify(data) + let blob = new Blob([str]) + return URL.createObjectURL(blob) + } + + /** + * @Author: 王林 + * @Date: 2021-08-03 22:24:24 + * @Desc: 专有文件，其实就是json文件 + */ + smm () { + return this.json(); + } } export default Export \ No newline at end of file diff --git a/simple-mind-map/src/Render.js b/simple-mind-map/src/Render.js index 10dc3b4b..31eed1a7 100644 --- a/simple-mind-map/src/Render.js +++ b/simple-mind-map/src/Render.js @@ -44,6 +44,8 @@ class Render { this.activeNodeList = [] // 根节点 this.root = null + // 文本编辑框，需要再bindEvent之前实例化，否则单击事件只能触发隐藏文本编辑框，而无法保存文本修改 + this.textEdit = new TextEdit(this) // 布局 this.setLayout() // 绑定事件 @@ -52,8 +54,6 @@ class Render { this.registerCommands() // 注册快捷键 this.registerShortcutKeys() - // 文本编辑框 - this.textEdit = new TextEdit(this) } /** @@ -122,8 +122,8 @@ class Render { this.setNodeActive = this.setNodeActive.bind(this) this.mindMap.command.add('SET_NODE_ACTIVE', this.setNodeActive) // 清除所有激活节点 - this.clearActive = this.clearActive.bind(this) - this.mindMap.command.add('CLEAR_ACTIVE_NODE', this.clearActive) + this.clearAllActive = this.clearAllActive.bind(this) + this.mindMap.command.add('CLEAR_ACTIVE_NODE', this.clearAllActive) // 切换节点是否展开 this.setNodeExpand = this.setNodeExpand.bind(this) this.mindMap.command.add('SET_NODE_EXPAND', this.setNodeExpand) @@ -164,15 +164,16 @@ class Render { registerShortcutKeys() { // 插入下级节点 this.mindMap.keyCommand.addShortcut('Tab', () => { - this.insertChildNode() + this.mindMap.execCommand('INSERT_CHILD_NODE') }) // 插入同级节点 - this.mindMap.keyCommand.addShortcut('Enter', () => { + let insertNodeWrap = () => { if (this.textEdit.showTextEdit) { return } - this.insertNode() - }) + this.mindMap.execCommand('INSERT_NODE') + } + this.mindMap.keyCommand.addShortcut('Enter', insertNodeWrap) // 展开/收起节点 this.mindMap.keyCommand.addShortcut('/', () => { this.activeNodeList.forEach((node) => { @@ -183,12 +184,18 @@ class Render { }) }) // 删除节点 - this.mindMap.keyCommand.addShortcut('Del|Backspace', this.removeNode) + let removeNodeWrap = () => { + this.mindMap.execCommand('REMOVE_NODE') + } + this.mindMap.keyCommand.addShortcut('Del|Backspace', removeNodeWrap) + // 节点编辑时某些快捷键会存在冲突，需要暂时去除 this.mindMap.on('before_show_text_edit', () => { this.mindMap.keyCommand.removeShortcut('Del|Backspace') + this.mindMap.keyCommand.removeShortcut('Enter', insertNodeWrap) }) this.mindMap.on('hide_text_edit', () => { - this.mindMap.keyCommand.addShortcut('Del|Backspace', this.removeNode) + this.mindMap.keyCommand.addShortcut('Del|Backspace', removeNodeWrap) + this.mindMap.keyCommand.addShortcut('Enter', insertNodeWrap) }) } @@ -220,6 +227,16 @@ class Render { this.activeNodeList = [] } + /** + * @Author: 王林 + * @Date: 2021-08-03 23:14:34 + * @Desc: 清除当前所有激活节点，并会触发事件 + */ + clearAllActive() { + this.clearActive() + this.mindMap.emit('node_active', null, []) + } + /** * @Author: 王林 * @Date: 2021-07-11 10:54:00 diff --git a/simple-mind-map/src/TextEdit.js b/simple-mind-map/src/TextEdit.js index b2055de3..4e77de64 100644 --- a/simple-mind-map/src/TextEdit.js +++ b/simple-mind-map/src/TextEdit.js @@ -53,7 +53,7 @@ export default class TextEdit { }) // 注册编辑快捷键 this.mindMap.keyCommand.addShortcut('F2', () => { - if (this.renderer.activeNodeList.length <= 0){ + if (this.renderer.activeNodeList.length <= 0) { return } this.show(this.renderer.activeNodeList[0]) @@ -90,6 +90,21 @@ export default class TextEdit { this.textEditNode.style.top = rect.top + 'px' this.textEditNode.style.display = 'block' this.showTextEdit = true + // 选中文本 + this.selectNodeText() + } + + /** + * @Author: 王林 + * @Date: 2021-08-02 23:13:50 + * @Desc: 选中文本 + */ + selectNodeText() { + let selection = window.getSelection() + let range = document.createRange() + range.selectNodeContents(this.textEditNode) + selection.removeAllRanges() + selection.addRange(range) } /** diff --git a/simple-mind-map/src/utils/keyMap.js b/simple-mind-map/src/utils/keyMap.js index 52cdff5d..3210e96f 100644 --- a/simple-mind-map/src/utils/keyMap.js +++ b/simple-mind-map/src/utils/keyMap.js @@ -66,4 +66,4 @@ export const keyMap = map export const isKey = (e, key) => { let code = typeof e === 'object' ? e.keyCode : e return map[key] === code -} \ No newline at end of file +} diff --git a/web/src/.DS_Store b/web/src/.DS_Store index 5b315336..8c11ae99 100644 Binary files a/web/src/.DS_Store and b/web/src/.DS_Store differ diff --git a/web/src/api/index.js b/web/src/api/index.js index e743be8e..70415711 100644 --- a/web/src/api/index.js +++ b/web/src/api/index.js @@ -3,6 +3,23 @@ import { simpleDeepClone } from 'simple-mind-map/src/utils/index' const SIMPLE_MIND_MAP_DATA = 'SIMPLE_MIND_MAP_DATA' +/** + * @Author: 王林 + * @Date: 2021-08-02 22:36:48 + * @Desc: 克隆思维导图数据，去除激活状态 + */ +const copyMindMapTreeData = (tree, root) => { + tree.data = simpleDeepClone(root.data) + tree.data.isActive = false + tree.children = [] + if (root.children && root.children.length > 0) { + root.children.forEach((item, index) => { + tree.children[index] = copyMindMapTreeData({}, item) + }) + } + return tree; +} + /** * @Author: 王林 * @Date: 2021-08-01 10:10:49 @@ -29,7 +46,7 @@ export const getData = () => { export const storeData = (data) => { try { let originData = getData() - originData.root = data + originData.root = copyMindMapTreeData({}, data) let dataStr = JSON.stringify(originData) localStorage.setItem(SIMPLE_MIND_MAP_DATA, dataStr) } catch (error) { diff --git a/web/src/assets/.DS_Store b/web/src/assets/.DS_Store index e13bbf38..65a8e8ca 100644 Binary files a/web/src/assets/.DS_Store and b/web/src/assets/.DS_Store differ diff --git a/web/src/assets/icon-font/demo_index.html b/web/src/assets/icon-font/demo_index.html index 4dd3e0de..dbfcf888 100644 --- a/web/src/assets/icon-font/demo_index.html +++ b/web/src/assets/icon-font/demo_index.html @@ -54,6 +54,12 @@