右键菜单开发中

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

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 

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],

web/src/pages/Edit/components/Contextmenu.vue

@@ -0,0 +1,173 @@
+<template>
+  <div
+    class="contextmenuContainer"
+    v-if="isShow"
+    :style="{ left: left + 'px', top: top + 'px' }"
+  >
+    <div
+      class="item"
+      @click="exec('INSERT_NODE', insertNodeBtnDisabled)"
+      :class="{ disabled: insertNodeBtnDisabled }"
+    >
+      插入同级节点
+    </div>
+    <div class="item" @click="exec('INSERT_CHILD_NODE')">插入子级节点</div>
+    <div
+      class="item"
+      @click="exec('UP_NODE')"
+      :class="{ disabled: upNodeBtnDisabled }"
+    >
+      上移节点
+    </div>
+    <div
+      class="item"
+      @click="exec('DOWN_NODE')"
+      :class="{ disabled: downNodeBtnDisabled }"
+    >
+      下移节点
+    </div>
+    <div class="item danger" @click="exec('REMOVE_NODE')">删除节点</div>
+    <div class="item">复制节点</div>
+    <div class="item">剪切节点</div>
+    <div class="item">粘贴节点</div>
+  </div>
+</template>
+
+<script>
+/**
+ * @Author: 王林
+ * @Date: 2021-06-24 22:53:10
+ * @Desc: 右键菜单
+ */
+export default {
+  name: "Contextmenu",
+  props: {
+    mindMap: {
+      type: Object,
+    },
+  },
+  data() {
+    return {
+      isShow: false,
+      left: 0,
+      top: 0,
+      node: null,
+    };
+  },
+  computed: {
+    insertNodeBtnDisabled() {
+      return !this.node || this.node.isRoot;
+    },
+    upNodeBtnDisabled() {
+      if (!this.node || this.node.isRoot) {
+        return true;
+      }
+      let isFirst =
+        this.node.parent.children.findIndex((item) => {
+          return item === this.node;
+        }) === 0;
+      return isFirst;
+    },
+    downNodeBtnDisabled() {
+      if (!this.node || this.node.isRoot) {
+        return true;
+      }
+      let children = this.node.parent.children;
+      let isLast =
+        children.findIndex((item) => {
+          return item === this.node;
+        }) === children.length - 1;
+      return isLast;
+    },
+  },
+  created() {
+    this.$bus.$on("node_contextmenu", this.show);
+    this.$bus.$on("node_click", this.hide);
+    this.$bus.$on("draw_click", this.hide);
+    this.$bus.$on("expand_btn_click", this.hide);
+  },
+  beforeDestroy() {
+    this.$bus.$off("node_contextmenu", this.show);
+    this.$bus.$off("node_click", this.hide);
+    this.$bus.$off("draw_click", this.hide);
+    this.$bus.$off("expand_btn_click", this.hide);
+  },
+  methods: {
+    /**
+     * @Author: 王林
+     * @Date: 2021-07-14 21:38:50
+     * @Desc: 显示
+     */
+    show(e, node) {
+      this.left = e.clientX + 10;
+      this.top = e.clientY + 10;
+      this.isShow = true;
+      this.node = node;
+    },
+
+    /**
+     * @Author: 王林
+     * @Date: 2021-07-14 21:37:55
+     * @Desc: 隐藏
+     */
+    hide() {
+      this.isShow = false;
+      this.left = 0;
+      this.top = 0;
+    },
+
+    /**
+     * @Author: 王林
+     * @Date: 2021-07-14 23:27:54
+     * @Desc: 执行命令
+     */
+    exec(key, disabled) {
+      if (disabled) {
+        return;
+      }
+      this.$bus.$emit("execCommand", key);
+      this.hide();
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.contextmenuContainer {
+  position: fixed;
+  width: 161px;
+  background: #fff;
+  box-shadow: 0 4px 12px 0 hsla(0, 0%, 69%, 0.5);
+  border-radius: 4px;
+  padding-top: 16px;
+  padding-bottom: 16px;
+  font-size: 14px;
+  font-family: PingFangSC-Regular, PingFang SC;
+  font-weight: 400;
+  color: #1a1a1a;
+
+  .item {
+    height: 28px;
+    line-height: 28px;
+    padding-left: 16px;
+    cursor: pointer;
+
+    &.danger {
+      color: #F56C6C;
+    }
+
+    &:hover {
+      background: #f5f5f5;
+    }
+
+    &.disabled {
+      color: grey;
+      cursor: not-allowed;
+
+      &:hover {
+        background: #fff;
+      }
+    }
+  }
+}
+</style>

web/src/pages/Edit/components/Edit.vue

@@ -9,6 +9,7 @@
     <Theme :mindMap="mindMap"></Theme>
     <Structure :mindMap="mindMap"></Structure>
     <ShortcutKey></ShortcutKey>
+    <Contextmenu :mindMap="mindMap"></Contextmenu>
   </div>
 </template>
 
@@ -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);
+        });
       });
     },