joylink/xian-ncc-da-client
6
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

左键托画布

Browse Source
This commit is contained in:
joylink_zhaoerwei 2023-11-01 14:26:46 +08:00
parent 9edfdfa935
commit 49bfd7e346
5 changed files with 89 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
src/components/alarm/setAlarmMock.vue
View File

@ -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>

21
src/components/alarm/setAlarmText.vue
View File

@ -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>

3
src/drawApp/lineApp.ts
View File

@ -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,

1
src/drawApp/lineNetApp.ts
View File

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

52
src/jl-graphic/plugins/CommonMousePlugin.ts
View File

@ -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;