Feat：画布右键菜单事件清除当前激活的节点列表

simple-mind-map/src/core/render/Render.js

@@ -112,23 +112,13 @@ class Render {
 
   //   绑定事件
   bindEvent() {
-    // 点击事件
+    // 画布点击事件清除当前激活节点列表
     this.mindMap.on('draw_click', e => {
-      // 清除激活状态
+      this.clearActiveNodeListOnDrawClick(e, 'click')
-      let isTrueClick = true
-      let { useLeftKeySelectionRightKeyDrag } = this.mindMap.opt
-      if (useLeftKeySelectionRightKeyDrag) {
-        let mousedownPos = this.mindMap.event.mousedownPos
-        isTrueClick =
-          Math.abs(e.clientX - mousedownPos.x) <= 5 &&
-          Math.abs(e.clientY - mousedownPos.y) <= 5
-      }
-      if (isTrueClick && this.activeNodeList.length > 0) {
-        this.mindMap.execCommand('CLEAR_ACTIVE_NODE')
-      }
     })
-    this.mindMap.on('contextmenu', () => {
+    // 画布右键事件事件清除当前激活节点列表
-      this.mindMap.execCommand('CLEAR_ACTIVE_NODE')
+    this.mindMap.on('contextmenu', e => {
+      this.clearActiveNodeListOnDrawClick(e, 'contextmenu')
     })
     // 鼠标双击回到根节点
     this.mindMap.svg.on('dblclick', () => {
@@ -340,6 +330,29 @@ class Render {
     })
   }
 
+  // 鼠标点击画布时清空当前激活节点列表
+  clearActiveNodeListOnDrawClick(e, eventType) {
+    if (this.activeNodeList.length <= 0) return
+    // 清除激活状态
+    let isTrueClick = true
+    // 是否是左键多选节点，右键拖动画布
+    const { useLeftKeySelectionRightKeyDrag } = this.mindMap.opt
+    // 如果鼠标按下和松开的距离较大，则不认为是点击事件
+    if (
+      eventType === 'contextmenu'
+        ? !useLeftKeySelectionRightKeyDrag
+        : useLeftKeySelectionRightKeyDrag
+    ) {
+      const mousedownPos = this.mindMap.event.mousedownPos
+      isTrueClick =
+        Math.abs(e.clientX - mousedownPos.x) <= 5 &&
+        Math.abs(e.clientY - mousedownPos.y) <= 5
+    }
+    if (isTrueClick) {
+      this.mindMap.execCommand('CLEAR_ACTIVE_NODE')
+    }
+  }
+
   //  开启文字编辑，会禁用回车键和删除键相关快捷键防止冲突
   startTextEdit() {
     this.mindMap.keyCommand.save()