Feat：支持设置为左键多选节点，右键拖动画布

simple-mind-map/index.js

@@ -126,7 +126,9 @@ const defaultOpt = {
   // 思维导图适应画布大小时的内边距
   fitPadding: 50,
   // 是否开启按住ctrl键多选节点功能
-  enableCtrlKeyNodeSelection: true
+  enableCtrlKeyNodeSelection: true,
+  // 设置为左键多选节点，右键拖动画布
+  useLeftKeySelectionRightKeyDrag: false
 }
 
 //  思维导图

simple-mind-map/src/core/event/Event.js

@@ -9,6 +9,7 @@ class Event extends EventEmitter {
     this.opt = opt
     this.mindMap = opt.mindMap
     this.isLeftMousedown = false
+    this.isRightMousedown = false
     this.mousedownPos = {
       x: 0,
       y: 0
@@ -89,6 +90,8 @@ class Event extends EventEmitter {
     // 鼠标左键
     if (e.which === 1) {
       this.isLeftMousedown = true
+    } else if (e.which === 3) {
+      this.isRightMousedown = true
     }
     this.mousedownPos.x = e.clientX
     this.mousedownPos.y = e.clientY
@@ -97,12 +100,17 @@ class Event extends EventEmitter {
 
   //  鼠标移动事件
   onMousemove(e) {
+    let { useLeftKeySelectionRightKeyDrag } = this.mindMap.opt
     this.mousemovePos.x = e.clientX
     this.mousemovePos.y = e.clientY
     this.mousemoveOffset.x = e.clientX - this.mousedownPos.x
     this.mousemoveOffset.y = e.clientY - this.mousedownPos.y
     this.emit('mousemove', e, this)
-    if (this.isLeftMousedown) {
+    if (
+      useLeftKeySelectionRightKeyDrag
+        ? this.isRightMousedown
+        : this.isLeftMousedown
+    ) {
       e.preventDefault()
       this.emit('drag', e, this)
     }
@@ -111,6 +119,7 @@ class Event extends EventEmitter {
   //  鼠标松开事件
   onMouseup(e) {
     this.isLeftMousedown = false
+    this.isRightMousedown = false
     this.emit('mouseup', e, this)
   }
 

simple-mind-map/src/plugins/Select.js

@@ -22,9 +22,14 @@ class Select {
       if (this.mindMap.opt.readonly) {
         return
       }
-      if (!e.ctrlKey && e.which !== 3) {
+      let { useLeftKeySelectionRightKeyDrag } = this.mindMap.opt
+      if (
+        !e.ctrlKey &&
+        (useLeftKeySelectionRightKeyDrag ? e.which !== 1 : e.which !== 3)
+      ) {
         return
       }
+      e.preventDefault()
       this.isMousedown = true
       let { x, y } = this.mindMap.toPos(e.clientX, e.clientY)
       this.mouseDownX = x
@@ -146,25 +151,24 @@ class Select {
       let bottom = (top + height) * scaleY + translateY
       left = left * scaleX + translateX
       top = top * scaleY + translateY
-      if ((left >= minx && left <= maxx ||
-          right >= minx && right <= maxx) && 
-          (top >= miny && top <= maxy ||
-          bottom >= miny && bottom <= maxy)
-        ) {
+      if (
+        ((left >= minx && left <= maxx) || (right >= minx && right <= maxx)) &&
+        ((top >= miny && top <= maxy) || (bottom >= miny && bottom <= maxy))
+      ) {
         // this.mindMap.batchExecution.push('activeNode' + node.uid, () => {
-          if (node.nodeData.data.isActive) {
-            return
-          }
-          this.mindMap.renderer.setNodeActive(node, true)
-          this.mindMap.renderer.addActiveNode(node)
+        if (node.nodeData.data.isActive) {
+          return
+        }
+        this.mindMap.renderer.setNodeActive(node, true)
+        this.mindMap.renderer.addActiveNode(node)
         // })
       } else if (node.nodeData.data.isActive) {
         // this.mindMap.batchExecution.push('activeNode' + node.uid, () => {
-          if (!node.nodeData.data.isActive) {
-            return
-          }
-          this.mindMap.renderer.setNodeActive(node, false)
-          this.mindMap.renderer.removeActiveNode(node)
+        if (!node.nodeData.data.isActive) {
+          return
+        }
+        this.mindMap.renderer.setNodeActive(node, false)
+        this.mindMap.renderer.removeActiveNode(node)
         // })
       }
     })

web/src/assets/icon-font/iconfont.css

@@ -1,8 +1,8 @@
 @font-face {
   font-family: "iconfont"; /* Project id 2479351 */
-  src: url('iconfont.woff2?t=1679621707211') format('woff2'),
-       url('iconfont.woff?t=1679621707211') format('woff'),
-       url('iconfont.ttf?t=1679621707211') format('truetype');
+  src: url('iconfont.woff2?t=1686298427624') format('woff2'),
+       url('iconfont.woff?t=1686298427624') format('woff'),
+       url('iconfont.ttf?t=1686298427624') format('truetype');
 }
 
 .iconfont {
@@ -13,6 +13,14 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
+.iconmouseR:before {
+  content: "\e6bd";
+}
+
+.iconmouseL:before {
+  content: "\e6c0";
+}
+
 .iconwenjian:before {
   content: "\e607";
 }

web/src/lang/en_us.js

@@ -202,5 +202,9 @@ export default {
   edit: {
     newFeatureNoticeTitle: 'New feature reminder',
     newFeatureNoticeMessage: 'This update supports node rich text editing, But there are some defects, The most important impact is that the time to export the image is proportional to the number of nodes, Therefore, if you are more dependent on export requirements, you can use【Base style】-【Other config】-【Enable node rich text editing】Set to turn off rich text editing mode.'
+  },
+  mouseAction: {
+    tip1: 'Current: Left click to drag the canvas, right click to box select nodes',
+    tip2: 'Current: Left click to box select nodes, right click to drag the canvas',
   }
 }

web/src/lang/zh_cn.js

@@ -202,5 +202,9 @@ export default {
   edit: {
     newFeatureNoticeTitle: '新特性提醒',
     newFeatureNoticeMessage: '本次更新支持了节点富文本编辑，但是存在一定缺陷，最主要的影响是导出为图片的时间和节点数量成正比，所以对导出需求比较依赖的话可以通过【基础样式】-【其他配置】-【是否开启节点富文本编辑】设置关掉富文本编辑模式。'
+  },
+  mouseAction: {
+    tip1: '当前：左键拖动画布，右键框选节点',
+    tip2: '当前：左键框选节点，右键拖动画布',
   }
 }

web/src/pages/Doc/en/changelog/index.md

@@ -2,9 +2,9 @@
 
 ## 0.6.0
 
-optimization: Optimize the directory structure of simple-mind-map source code.
+Breaking change: Adjusted the directory structure of the simple-mind-map source code, Main impact: 1. The introduction path of the plugin needs to be modified. The constant file path needs to be modified.
 
-New: 1.Supports one click zoom to fit the canvas function. 2.Press and hold the Ctrl key to activate the multi selection function on demand through configuration.
+New: 1.Supports one click zoom to fit the canvas function. 2.Press and hold the Ctrl key to activate the multi selection function on demand through configuration. 3.Support setting to left click to select multiple nodes and right click to drag the canvas.
 
 Fix: 1.Fix the issue where holding down the Ctrl key to select multiple nodes does not trigger the click event for the node.
 

web/src/pages/Doc/en/changelog/index.vue

@@ -2,8 +2,8 @@
   <div>
     <h1>Changelog</h1>
 <h2>0.6.0</h2>
-<p>optimization: Optimize the directory structure of simple-mind-map source code.</p>
-<p>New: 1.Supports one click zoom to fit the canvas function. 2.Press and hold the Ctrl key to activate the multi selection function on demand through configuration.</p>
+<p>Breaking change: Adjusted the directory structure of the simple-mind-map source code, Main impact: 1. The introduction path of the plugin needs to be modified. The constant file path needs to be modified.</p>
+<p>New: 1.Supports one click zoom to fit the canvas function. 2.Press and hold the Ctrl key to activate the multi selection function on demand through configuration. 3.Support setting to left click to select multiple nodes and right click to drag the canvas.</p>
 <p>Fix: 1.Fix the issue where holding down the Ctrl key to select multiple nodes does not trigger the click event for the node.</p>
 <h2>0.5.11</h2>
 <p>New: Supports associative text editing.</p>

web/src/pages/Doc/en/constructor/index.md

@@ -65,6 +65,7 @@ const mindMap = new MindMap({
 | defaultAssociativeLineText（v0.5.11+）     |  String | 关联 | Association Line Default Text  |          |
 | fitPadding（v0.6.0+）     |  Number | 50 |  The padding of mind mapping when adapting to canvas size, Unit: px |          |
 | enableCtrlKeyNodeSelection（v0.6.0+）     | Boolean  | true |  Whether to enable the function of holding down the Ctrl key to select multiple nodes |          |
+| useLeftKeySelectionRightKeyDrag（v0.6.0+）     | Boolean  | false | Setting to left click to select multiple nodes and right click to drag the canvas.  |          |
 
 ### Watermark config
 

web/src/pages/Doc/en/constructor/index.vue

@@ -315,6 +315,13 @@
 <td>Whether to enable the function of holding down the Ctrl key to select multiple nodes</td>
 <td></td>
 </tr>
+<tr>
+<td>useLeftKeySelectionRightKeyDrag（v0.6.0+）</td>
+<td>Boolean</td>
+<td>false</td>
+<td>Setting to left click to select multiple nodes and right click to drag the canvas.</td>
+<td></td>
+</tr>
 </tbody>
 </table>
 <h3>Watermark config</h3>

web/src/pages/Doc/zh/changelog/index.md

@@ -2,9 +2,9 @@
 
 ## 0.6.0
 
-优化：优化simple-mind-map源码目录结构。
+破坏性更新：调整了simple-mind-map源码的目录结构，主要影响：1.插件的引入路径需要修改。2.constant文件路径需要修改。
 
-新增：1.支持一键缩放至适应画布功能。 2.按住Ctrl键多选功能可通过配置按需开启。
+新增：1.支持一键缩放至适应画布功能。 2.按住Ctrl键多选功能可通过配置按需开启。 3.支持设置为左键多选节点，右键拖动画布。
 
 修复：1.修复按住ctrl键多选节点时不会触发节点的click事件的问题。
 

web/src/pages/Doc/zh/changelog/index.vue

@@ -2,8 +2,8 @@
   <div>
     <h1>Changelog</h1>
 <h2>0.6.0</h2>
-<p>优化：优化simple-mind-map源码目录结构。</p>
-<p>新增：1.支持一键缩放至适应画布功能。 2.按住Ctrl键多选功能可通过配置按需开启。</p>
+<p>破坏性更新：调整了simple-mind-map源码的目录结构，主要影响：1.插件的引入路径需要修改。2.constant文件路径需要修改。</p>
+<p>新增：1.支持一键缩放至适应画布功能。 2.按住Ctrl键多选功能可通过配置按需开启。 3.支持设置为左键多选节点，右键拖动画布。</p>
 <p>修复：1.修复按住ctrl键多选节点时不会触发节点的click事件的问题。</p>
 <h2>0.5.11</h2>
 <p>新增：支持关联性文本编辑。</p>

web/src/pages/Doc/zh/constructor/index.md

@@ -65,6 +65,7 @@ const mindMap = new MindMap({
 | defaultAssociativeLineText（v0.5.11+）     |  String | 关联 |  关联线默认文字 |          |
 | fitPadding（v0.6.0+）     |  Number | 50 |  思维导图适应画布大小时的内边距，单位：px |          |
 | enableCtrlKeyNodeSelection（v0.6.0+）     | Boolean  | true | 是否开启按住ctrl键多选节点的功能  |          |
+| useLeftKeySelectionRightKeyDrag（v0.6.0+）     | Boolean  | false | 设置为左键多选节点，右键拖动画布  |          |
 
 ### 水印配置
 

web/src/pages/Doc/zh/constructor/index.vue

@@ -315,6 +315,13 @@
 <td>是否开启按住ctrl键多选节点的功能</td>
 <td></td>
 </tr>
+<tr>
+<td>useLeftKeySelectionRightKeyDrag（v0.6.0+）</td>
+<td>Boolean</td>
+<td>false</td>
+<td>设置为左键多选节点，右键拖动画布</td>
+<td></td>
+</tr>
 </tbody>
 </table>
 <h3>水印配置</h3>

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

@@ -100,6 +100,7 @@ export default {
     ...mapState({
       isZenMode: state => state.localConfig.isZenMode,
       openNodeRichText: state => state.localConfig.openNodeRichText,
+      useLeftKeySelectionRightKeyDrag: state => state.localConfig.useLeftKeySelectionRightKeyDrag,
     })
   },
   watch: {
@@ -289,7 +290,8 @@ export default {
           }
         },
         ...(config || {}),
-        iconList: icon
+        iconList: icon,
+        useLeftKeySelectionRightKeyDrag: this.useLeftKeySelectionRightKeyDrag
       })
       if (this.openNodeRichText) this.addRichTextPlugin()
       this.mindMap.keyCommand.addShortcut('Control+s', () => {

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

@@ -0,0 +1,79 @@
+<template>
+  <div class="mouseActionContainer">
+    <el-tooltip
+      class="item"
+      effect="dark"
+      :content="
+        useLeftKeySelectionRightKeyDrag
+          ? $t('mouseAction.tip2')
+          : $t('mouseAction.tip1')
+      "
+      placement="top"
+    >
+      <div
+        class="btn iconfont"
+        :class="[useLeftKeySelectionRightKeyDrag ? 'iconmouseR' : 'iconmouseL']"
+        @click="toggleAction"
+      ></div>
+    </el-tooltip>
+  </div>
+</template>
+
+<script>
+import { mapState, mapMutations } from 'vuex'
+
+/**
+ * @Author: 王林
+ * @Date: 2021-06-24 22:53:10
+ * @Desc: 鼠标操作设置
+ */
+export default {
+  name: 'MouseAction',
+  props: {
+    mindMap: {
+      type: Object
+    }
+  },
+  data() {
+    return {}
+  },
+  computed: {
+    ...mapState({
+      useLeftKeySelectionRightKeyDrag: state =>
+        state.localConfig.useLeftKeySelectionRightKeyDrag
+    })
+  },
+  methods: {
+    ...mapMutations(['setLocalConfig']),
+
+    toggleAction() {
+      let val = !this.useLeftKeySelectionRightKeyDrag
+      this.mindMap.updateConfig({
+        useLeftKeySelectionRightKeyDrag: val
+      })
+      this.setLocalConfig({
+        useLeftKeySelectionRightKeyDrag: val
+      })
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+.mouseActionContainer {
+  display: flex;
+  align-items: center;
+
+  .item {
+    margin-right: 12px;
+
+    &:last-of-type {
+      margin-right: 0;
+    }
+  }
+
+  .btn {
+    cursor: pointer;
+  }
+}
+</style>

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

@@ -15,6 +15,9 @@
         />
       </el-select>
     </div>
+    <div class="item">
+      <MouseAction :mindMap="mindMap"></MouseAction>
+    </div>
     <div class="item">
       <el-checkbox v-model="openMiniMap" @change="toggleMiniMap">{{
         $t('navigatorToolbar.openMiniMap')
@@ -46,6 +49,7 @@
 <script>
 import Scale from './Scale'
 import Fullscreen from './Fullscreen'
+import MouseAction from './MouseAction.vue'
 import { langList } from '@/config'
 import i18n from '@/i18n'
 import { storeLang, getLang } from '@/api'
@@ -59,7 +63,8 @@ export default {
   name: 'NavigatorToolbar',
   components: {
     Scale,
-    Fullscreen
+    Fullscreen,
+    MouseAction
   },
   props: {
     mindMap: {

web/src/store.js

@@ -13,7 +13,9 @@ const store = new Vuex.Store({
       // 本地配置
       isZenMode: false, // 是否是禅模式
       // 是否开启节点富文本
-      openNodeRichText: true
+      openNodeRichText: true,
+      // 鼠标行为
+      useLeftKeySelectionRightKeyDrag: false
     },
     activeSidebar: '' // 当前显示的侧边栏
   },