bug-5492-5

src/view/process/process-flow/config/ProcessConfig.js

@@ -52,7 +52,7 @@ export default class Process {
       autoResize: showGraph,//自动设置宽高
       panning: {//开启拖拽画布
         enabled: true,
-        eventTypes: 'rightMouseDown',//触发画布平移的交互方式为“右键按下”
+        eventTypes: ['rightMouseDown'],//触发画布平移的交互方式为“右键按下”
       },
       grid: {//设置网格
         size: 10,
@@ -220,8 +220,8 @@ export default class Process {
       .use(new Selection({//多选
         enabled: true,
         multiple: true,//是否启用点击多选，启用后按住 ctrl 或 command 键点击工序实现多选
-        rubberband: true,//是否启用多选工序功能
-        showNodeSelectionBox: true,//是否显示工序的选择框
+        rubberband: true,//是否启用框选工序功能
+        showNodeSelectionBox: true,//是否显示选择框
         filter: (e) => {
           return e.visible
         }

src/view/process/process-flow/process-setting.vue

@@ -115,6 +115,9 @@
           <Tooltip content="显示/隐藏小地图">
             <Button icon="md-map" @click="()=>{this.showMiniMap=!this.showMiniMap}"></Button>
           </Tooltip>
+          <Tooltip :content="leftMouseContent">
+            <Button :icon="leftMouseIcon" @click="changeLeftMouse"></Button>
+          </Tooltip>
           <Tooltip content="导出PNG">
             <Button icon="md-images" @click="()=>{this.graph.exportPNG('',{padding:50})}"></Button>
           </Tooltip>
@@ -176,6 +179,7 @@ import Process from '@/view/process/process-flow/config/ProcessConfig'
 import queryUtil from '@/view/process/process-flow/queryUtil'
 import { formMixin } from '@/mixins/form'
 import FileSaver from 'file-saver'
+import { Selection } from '@antv/x6-plugin-selection'
 
 export default {
   name: 'process-setting',
@@ -203,6 +207,8 @@ export default {
       shopList:[],//车间
       kilnList:[],//窑炉
       whList:[],//仓库
+      leftMouseContent:'点击切换左键移动画布',
+      leftMouseIcon:'md-crop',
     }
   },
   created() {
@@ -224,6 +230,20 @@ export default {
   methods: {
     ...mapMutations(['setProcessNodeModalDisplay', 'setProcessEdgeModalDisplay', 'setCurrentNodeId', 'setCurrentEdgeId']),
 
+    changeLeftMouse(){
+      console.log(this.graph)
+      if(this.leftMouseIcon=='ios-hand'){
+        this.leftMouseIcon='md-crop'
+        this.leftMouseContent='点击切换左键移动画布'
+        this.graph.panning.options.panning.eventTypes=['rightMouseDown']
+        this.graph.toggleRubberband(true)
+      }else{
+        this.leftMouseIcon='ios-hand'
+        this.leftMouseContent='点击切换左键框选主题'
+        this.graph.panning.options.panning.eventTypes=['leftMouseDown','rightMouseDown']
+        this.graph.toggleRubberband(false)
+      }
+    },
     /**
      * @desc   : 导出json方法
      * @author : 张潇木