diff --git a/src/components/alarm/setAlarmMock.vue b/src/components/alarm/setAlarmMock.vue index d51d545..e77bc12 100644 --- a/src/components/alarm/setAlarmMock.vue +++ b/src/components/alarm/setAlarmMock.vue @@ -71,7 +71,7 @@ diff --git a/src/components/alarm/setAlarmText.vue b/src/components/alarm/setAlarmText.vue index 3bc70dc..b3901c7 100644 --- a/src/components/alarm/setAlarmText.vue +++ b/src/components/alarm/setAlarmText.vue @@ -97,7 +97,7 @@ diff --git a/src/drawApp/lineApp.ts b/src/drawApp/lineApp.ts index ad91ea4..6f0f1aa 100644 --- a/src/drawApp/lineApp.ts +++ b/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, diff --git a/src/drawApp/lineNetApp.ts b/src/drawApp/lineNetApp.ts index adaccba..1cda92d 100644 --- a/src/drawApp/lineNetApp.ts +++ b/src/drawApp/lineNetApp.ts @@ -94,6 +94,7 @@ export function initLineNetApp(): IGraphicApp { mouseToolOptions: { boxSelect: false, viewportDrag: true, + viewportDragLeft: true, wheelZoom: true, }, dataLoader: lineNetAppDataLoader, diff --git a/src/jl-graphic/plugins/CommonMousePlugin.ts b/src/jl-graphic/plugins/CommonMousePlugin.ts index 7ff07e0..5fc367b 100644 --- a/src/jl-graphic/plugins/CommonMousePlugin.ts +++ b/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,12 +141,21 @@ 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) { - this.app.viewport.drag({ - mouseButtons: 'right', - }); - canvas.on('rightdown', this.setCursor, this); - canvas.on('rightup', this.resumeCursor, this); - canvas.on('rightupoutside', this.resumeCursor, this); + 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', + }); + canvas.on('rightdown', this.setCursor, this); + canvas.on('rightup', this.resumeCursor, this); + canvas.on('rightupoutside', this.resumeCursor, this); + } } if (this.options.wheelZoom) { this.app.viewport.wheel({ @@ -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;