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);
+ });
});
},