左键托画布

src/components/alarm/setAlarmMock.vue

@@ -71,7 +71,7 @@
 
 <script setup lang="ts">
 import DraggableDialog from '../common/DraggableDialog.vue';
-import { onMounted, ref, watch } from 'vue';
+import { onMounted, onUnmounted, ref, watch } from 'vue';
 import { JlGraphic } from 'src/jl-graphic';
 import { Station } from 'src/graphics/station/Station';
 import { useLineStore } from 'src/stores/line-store';
@@ -180,6 +180,14 @@ watch(
 );
 
 onMounted(() => {
+  lineStore.getLineApp().emit('options-update', {
+    mouseToolOptions: {
+      boxSelect: true,
+      viewportDrag: true,
+      viewportDragLeft: false,
+      wheelZoom: true,
+    },
+  });
   clearSelect();
   onReset();
   setAlartTextData.value.lineId = lineStore.lineId as unknown as string;
@@ -242,4 +250,15 @@ function onReset() {
   };
   selectGraphic = [];
 }
+
+onUnmounted(() => {
+  lineStore.getLineApp().emit('options-update', {
+    mouseToolOptions: {
+      boxSelect: false,
+      viewportDrag: true,
+      viewportDragLeft: true,
+      wheelZoom: true,
+    },
+  });
+});
 </script>

src/components/alarm/setAlarmText.vue

@@ -97,7 +97,7 @@
 
 <script setup lang="ts">
 import DraggableDialog from '../common/DraggableDialog.vue';
-import { onMounted, ref, watch } from 'vue';
+import { onMounted, onUnmounted, ref, watch } from 'vue';
 import { JlGraphic } from 'src/jl-graphic';
 import { Station } from 'src/graphics/station/Station';
 import { useLineStore } from 'src/stores/line-store';
@@ -198,6 +198,14 @@ watch(
 );
 
 onMounted(() => {
+  lineStore.getLineApp().emit('options-update', {
+    mouseToolOptions: {
+      boxSelect: true,
+      viewportDrag: true,
+      viewportDragLeft: false,
+      wheelZoom: true,
+    },
+  });
   clearSelect();
   onReset();
   setAlartTextData.value.lineId = lineStore.lineId as unknown as string;
@@ -266,4 +274,15 @@ function onReset() {
   };
   selectGraphic = [];
 }
+
+onUnmounted(() => {
+  lineStore.getLineApp().emit('options-update', {
+    mouseToolOptions: {
+      boxSelect: false,
+      viewportDrag: true,
+      viewportDragLeft: true,
+      wheelZoom: true,
+    },
+  });
+});
 </script>

src/drawApp/lineApp.ts

@@ -152,8 +152,9 @@ export function initLineApp(lineId: number): IGraphicApp {
       Turnout.Type,
     ],
     mouseToolOptions: {
-      boxSelect: true,
+      boxSelect: false,
       viewportDrag: true,
+      viewportDragLeft: true,
       wheelZoom: true,
     },
     dataLoader: lineAppDataLoader,

src/drawApp/lineNetApp.ts

@@ -94,6 +94,7 @@ export function initLineNetApp(): IGraphicApp {
     mouseToolOptions: {
       boxSelect: false,
       viewportDrag: true,
+      viewportDragLeft: true,
       wheelZoom: true,
     },
     dataLoader: lineNetAppDataLoader,

src/jl-graphic/plugins/CommonMousePlugin.ts

@@ -24,6 +24,10 @@ export interface IMouseToolOptions {
    * 是否启用视口拖拽(默认右键),默认启用
    */
   viewportDrag?: boolean;
+  /**
+   * 是否启用左键视口拖拽
+   */
+  viewportDragLeft?: boolean;
   /**
    * 是否启用鼠标滚轮缩放,默认启用
    */
@@ -37,12 +41,14 @@ export interface IMouseToolOptions {
 class CompleteMouseToolOptions implements IMouseToolOptions {
   boxSelect: boolean;
   viewportDrag: boolean;
+  viewportDragLeft: boolean;
   wheelZoom: boolean;
   selectFilter?: GraphicSelectFilter | undefined;
   constructor() {
     this.boxSelect = true;
     this.viewportDrag = true;
     this.wheelZoom = true;
+    this.viewportDragLeft = false;
   }
   update(options: IMouseToolOptions) {
     if (options.boxSelect != undefined) {
@@ -51,6 +57,9 @@ class CompleteMouseToolOptions implements IMouseToolOptions {
     if (options.viewportDrag != undefined) {
       this.viewportDrag = options.viewportDrag;
     }
+    if (options.viewportDragLeft != undefined) {
+      this.viewportDragLeft = options.viewportDragLeft;
+    }
     if (options.wheelZoom != undefined) {
       this.wheelZoom = options.wheelZoom;
     }
@@ -132,6 +141,14 @@ export class CommonMouseTool extends AppInteractionPlugin {
     this.app.on('drag_op_move', this.onDragMove, this);
     this.app.on('drag_op_end', this.onDragEnd, this);
     if (this.options.viewportDrag) {
+      if (this.options.viewportDragLeft) {
+        this.app.viewport.drag({
+          mouseButtons: 'left',
+        });
+        canvas.on('mousedown', this.setLeftCursor, this);
+        canvas.on('mouseup', this.resumeLeftCursor, this);
+        canvas.on('mouseupoutside', this.resumeLeftCursor, this);
+      } else {
         this.app.viewport.drag({
           mouseButtons: 'right',
         });
@@ -139,6 +156,7 @@ export class CommonMouseTool extends AppInteractionPlugin {
         canvas.on('rightup', this.resumeCursor, this);
         canvas.on('rightupoutside', this.resumeCursor, this);
       }
+    }
     if (this.options.wheelZoom) {
       this.app.viewport.wheel({
         percent: 0.01,
@@ -156,6 +174,9 @@ export class CommonMouseTool extends AppInteractionPlugin {
     this.app.off('drag_op_end', this.onDragEnd, this);
 
     this.app.viewport.plugins.remove('drag');
+    canvas.off('mousedown', this.setLeftCursor, this);
+    canvas.off('mouseup', this.resumeLeftCursor, this);
+    canvas.off('mouseupoutside', this.resumeLeftCursor, this);
     canvas.off('rightdown', this.setCursor, this);
     canvas.off('rightup', this.resumeCursor, this);
     canvas.off('rightupoutside', this.resumeCursor, this);
@@ -199,6 +220,25 @@ export class CommonMouseTool extends AppInteractionPlugin {
     }
   }
 
+  setLeftCursor(e: FederatedMouseEvent) {
+    const target = e.target as DisplayObject;
+    this.leftDownTarget = target;
+    if (target.isCanvas() && this.app.pixi.view.style) {
+      this.app.pixi.view.style.cursor = 'grab';
+    }
+  }
+
+  resumeLeftCursor() {
+    if (
+      this.leftDownTarget &&
+      this.leftDownTarget.isCanvas() &&
+      this.app.pixi.view.style
+    ) {
+      this.app.pixi.view.style.cursor = 'inherit';
+    }
+    this.leftDownTarget = null;
+  }
+
   setCursor(e: FederatedMouseEvent) {
     const target = e.target as DisplayObject;
     this.rightTarget = target;