diff --git a/simple-mind-map/src/Node.js b/simple-mind-map/src/Node.js index 6ca5f0ee..17756484 100644 --- a/simple-mind-map/src/Node.js +++ b/simple-mind-map/src/Node.js @@ -548,6 +548,7 @@ class Node { this.group.add(textContentNested) // 单击事件,选中节点 this.group.on('click', (e) => { + this.mindMap.emit('node_click', this) this.active(e) }) // 双击事件 @@ -558,6 +559,8 @@ class Node { this.group.on('contextmenu', (e) => { e.stopPropagation() e.preventDefault() + this.active(e) + this.mindMap.emit('node_contextmenu', e, this) }) } diff --git a/simple-mind-map/src/Render.js b/simple-mind-map/src/Render.js index 0302d855..f8323a2f 100644 --- a/simple-mind-map/src/Render.js +++ b/simple-mind-map/src/Render.js @@ -99,6 +99,12 @@ class Render { // 插入子节点 this.insertChildNode = this.insertChildNode.bind(this) this.mindMap.command.add('INSERT_CHILD_NODE', this.insertChildNode) + // 上移节点 + this.upNode = this.upNode.bind(this) + this.mindMap.command.add('UP_NODE', this.upNode) + // 下移节点 + this.downNode = this.downNode.bind(this) + this.mindMap.command.add('DOWN_NODE', this.downNode) // 删除节点 this.removeNode = this.removeNode.bind(this) this.mindMap.command.add('REMOVE_NODE', this.removeNode) @@ -319,6 +325,68 @@ class Render { this.mindMap.render() } + /** + * @Author: 王林 + * @Date: 2021-07-14 23:34:14 + * @Desc: 上移节点,多个节点只会操作第一个节点 + */ + upNode() { + if (this.activeNodeList.length <= 0) { + return + } + let node = this.activeNodeList[0] + if (node.isRoot) { + return + } + let parent = node.parent + let childList = parent.children + let index = childList.findIndex((item) => { + return item === node; + }) + if (index === -1 || index === 0) { + return + } + let insertIndex = index - 1 + // 节点实例 + childList.splice(index, 1) + childList.splice(insertIndex, 0, node) + // 节点数据 + parent.nodeData.children.splice(index, 1) + parent.nodeData.children.splice(insertIndex, 0, node.nodeData) + this.mindMap.render() + } + + /** + * @Author: 王林 + * @Date: 2021-07-14 23:34:18 + * @Desc: 下移节点,多个节点只会操作第一个节点 + */ + downNode() { + if (this.activeNodeList.length <= 0) { + return + } + let node = this.activeNodeList[0] + if (node.isRoot) { + return + } + let parent = node.parent + let childList = parent.children + let index = childList.findIndex((item) => { + return item === node; + }) + if (index === -1 || index === childList.length - 1) { + return + } + let insertIndex = index + 1 + // 节点实例 + childList.splice(index, 1) + childList.splice(insertIndex, 0, node) + // 节点数据 + parent.nodeData.children.splice(index, 1) + parent.nodeData.children.splice(insertIndex, 0, node.nodeData) + this.mindMap.render() + } + /** * @Author: 王林 * @Date: 2021-05-04 13:40:39 diff --git a/simple-mind-map/src/Select.js b/simple-mind-map/src/Select.js index b330dbaf..3b62e223 100644 --- a/simple-mind-map/src/Select.js +++ b/simple-mind-map/src/Select.js @@ -47,6 +47,9 @@ class Select { let { x, y } = this.toPos(e.clientX, e.clientY) this.mouseMoveX = x this.mouseMoveY = y + if (Math.abs(x - this.mouseDownX) <= 10 && Math.abs(y - this.mouseDownY) <= 10) { + return + } this.rect.plot([ [this.mouseDownX, this.mouseDownY], [this.mouseMoveX, this.mouseDownY], diff --git a/web/src/pages/Edit/components/Contextmenu.vue b/web/src/pages/Edit/components/Contextmenu.vue new file mode 100644 index 00000000..7be42fe0 --- /dev/null +++ b/web/src/pages/Edit/components/Contextmenu.vue @@ -0,0 +1,173 @@ + + + + + diff --git a/web/src/pages/Edit/components/Edit.vue b/web/src/pages/Edit/components/Edit.vue index 28bcfc7b..87cb0544 100644 --- a/web/src/pages/Edit/components/Edit.vue +++ b/web/src/pages/Edit/components/Edit.vue @@ -9,6 +9,7 @@ + @@ -23,6 +24,7 @@ import Structure from "./Structure"; import Count from "./Count"; import NavigatorToolbar from "./NavigatorToolbar"; import ShortcutKey from "./ShortcutKey"; +import Contextmenu from "./Contextmenu"; /** * @Author: 王林 @@ -40,6 +42,7 @@ export default { Count, NavigatorToolbar, ShortcutKey, + Contextmenu, }, data() { return { @@ -78,14 +81,19 @@ export default { theme: theme.template, themeConfig: theme.config, }); - this.mindMap.on("node_active", (...args) => { - this.$bus.$emit("node_active", ...args); - }); - this.mindMap.on("data_change", (...args) => { - this.$bus.$emit("data_change", ...args); - }); - this.mindMap.on("back_forward", (...args) => { - this.$bus.$emit("back_forward", ...args); + // 转发事件 + [ + "node_active", + "data_change", + "back_forward", + "node_contextmenu", + "node_click", + "draw_click", + "expand_btn_click" + ].forEach((event) => { + this.mindMap.on(event, (...args) => { + this.$bus.$emit(event, ...args); + }); }); },