joylink/rts-sim-testing-client
6
0
Fork 0
Code Issues 2 Pull Requests Actions Packages Projects Releases Wiki Activity

列车驾驶台交互暂提

Browse Source
This commit is contained in:
joylink_zhaoerwei 2024-04-02 10:47:40 +08:00
parent a474415b9d
commit b75bc9b9f0
7 changed files with 303 additions and 71 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

47
src/api/Simulation.ts
View File

@ -184,6 +184,53 @@ export async function ibpKeyOperation(params: IbpKeyOperationParams) {
return await api.post(`${UriBase}/ibp/key/operation`, params);
}
export interface TccButtonOperationParams {
buttonId: number;
down: boolean;
mapId: number;
simulationId: string;
tccId: number;
}
export async function tccButtonOperation(params: TccButtonOperationParams) {
return await api.post(`${UriBase}/tcc/btn/operation`, params);
}
export interface TccKeyOperationParams {
simulationId: string;
mapId: number;
tccId: number;
val: boolean;
keyId: number;
}
export async function tccKeyOperation(params: TccKeyOperationParams) {
return await api.post(`${UriBase}/tcc/key/operation`, params);
}
export interface TccKeyDirOperationParams {
simulationId: string;
mapId: number;
tccId: number;
val: number;
keyId: number;
}
export async function tccKeyDirOperation(params: TccKeyDirOperationParams) {
return await api.post(`${UriBase}/tcc/key/operation`, params);
}
export interface TccHandleOperationParams {
simulationId: string;
mapId: number;
tccId: number;
val: number;
handleId: number;
}
export async function tccHandleOperation(params: TccHandleOperationParams) {
return await api.post(`${UriBase}/tcc/handle/operation`, params);
}
export function checkMapData(data: { mapProto: string }) {
return api.post(`${UriBase}/check/data`, data);
}

17
src/drawApp/graphics/TccButtonInteraction.ts
View File

@ -11,6 +11,8 @@ import {
ITccButtonState,
TccButton,
} from 'src/graphics/tccButton/TccButton';
import { tccButtonOperation } from 'src/api/Simulation';
import { errorNotify } from 'src/utils/CommonNotify';
export class TccButtonData extends GraphicDataBase implements ITccButtonData {
constructor(data?: tccGraphicData.TccButton) {
@ -112,11 +114,22 @@ export class TccButtonOperateInteraction extends GraphicInteractionPlugin<TccBut
}
onClick(e: FederatedMouseEvent): void {
const simulationId = useLineStore().simulationId;
const mapId = useLineStore().mapId;
const tccId = useTccStore().tccId;
const target = e.target as DisplayObject;
const tccButton = target.getGraphic<TccButton>();
if (!tccButton) return;
if (!tccButton || !simulationId || !mapId) return;
tccButton.states.down = !tccButton.states.down;
tccButton.doRepaint();
console.log(tccButton.states.down);
/* tccButtonOperation({
simulationId,
mapId,
buttonId: tccButton.id,
tccId,
down: !tccButton.states.down,
}).catch((err) => {
errorNotify('操作失败', { message: err.origin.response.data.title });
}); */
}
}

31
src/drawApp/graphics/TccHandleInteraction.ts
View File

@ -10,6 +10,9 @@ import { state } from 'src/protos/device_state';
import { GraphicInteractionPlugin, IGraphicScene, JlGraphic } from 'jl-graphic';
import { type FederatedMouseEvent, DisplayObject } from 'pixi.js';
import { useTccStore } from 'src/stores/tcc-store';
import { useLineStore } from 'src/stores/line-store';
import { tccHandleOperation } from 'src/api/Simulation';
import { errorNotify } from 'src/utils/CommonNotify';
export class TccHandleData extends GraphicDataBase implements ITccHandleData {
constructor(data?: tccGraphicData.TccHandle) {
@ -101,14 +104,14 @@ export class TccHandleInteraction extends GraphicInteractionPlugin<TccHandle> {
g._tccHandle.onmousedown = (e) => {
this.onMouseDown(e);
};
g._tccHandle.onmouseup = () => {
this.isMouseDown = false;
g._tccHandle.onmouseup = (e) => {
this.onMouseUp(e);
};
g.onmousemove = (e) => {
this.onMouseMove(e);
};
g.onmouseleave = () => {
this.isMouseDown = false;
g.onmouseleave = (e) => {
this.onMouseMove(e);
};
}
unbind(g: TccHandle): void {
@ -132,6 +135,7 @@ export class TccHandleInteraction extends GraphicInteractionPlugin<TccHandle> {
if (!tccHandle) return;
if (
this.isMouseDown &&
useTccStore().canvasMouseDown &&
tccHandle._tccHandle.y > -145 &&
tccHandle._tccHandle.y < 145
) {
@ -144,4 +148,23 @@ export class TccHandleInteraction extends GraphicInteractionPlugin<TccHandle> {
}
}
}
onMouseUp(e: FederatedMouseEvent) {
this.isMouseDown = false;
const simulationId = useLineStore().simulationId;
const mapId = useLineStore().mapId;
const tccId = useTccStore().tccId;
const target = e.target as DisplayObject;
const tccHandle = target.getGraphic<TccHandle>();
if (!tccHandle || !simulationId || !mapId) return;
tccHandle.doRepaint();
/* tccHandleOperation({
simulationId,
mapId,
handleId: tccHandle.id,
tccId,
val: tccHandle._tccHandle.y,
}).catch((err) => {
errorNotify('操作失败', { message: err.origin.response.data.title });
}); */
}
}

256
src/drawApp/graphics/TccKeyInteraction.ts
View File

@ -4,8 +4,17 @@ import { tccGraphicData } from 'src/protos/tccGraphics';
import { GraphicDataBase, GraphicStateBase } from './GraphicDataBase';
import { state } from 'src/protos/device_state';
import { GraphicInteractionPlugin, IGraphicScene, JlGraphic } from 'jl-graphic';
import { type FederatedMouseEvent, DisplayObject, Point } from 'pixi.js';
import {
type FederatedMouseEvent,
DisplayObject,
Point,
Sprite,
} from 'pixi.js';
import { useTccStore } from 'src/stores/tcc-store';
import { threadId } from 'worker_threads';
import { useLineStore } from 'src/stores/line-store';
import { tccKeyDirOperation, tccKeyOperation } from 'src/api/Simulation';
import { errorNotify } from 'src/utils/CommonNotify';
export class TccKeyData extends GraphicDataBase implements ITccKeyData {
constructor(data?: tccGraphicData.TccKey) {
@ -80,13 +89,144 @@ export class TccKeyState extends GraphicStateBase implements ITccKeyState {
}
}
export class TccKeyInteraction extends GraphicInteractionPlugin<TccKey> {
static Name = 'TccKeyInteraction';
export enum KeyRotationMethod {
jumpChange,
gradientChange,
}
export interface IKeyInteractionConfig {
gearPositionAmount?: number;
keyRotationMethod: KeyRotationMethod;
doAfterChangeRotation: (g: JlGraphic, rotation: number) => void;
doFinish: () => void;
}
export abstract class KeyInteraction<
G extends JlGraphic
> extends GraphicInteractionPlugin<G> {
isMouseDown = false;
changeOnce = false;
ratatingSprite: Sprite = new Sprite();
mouseDownBeginPos = new Point();
mouseDownBeginRotation = 0;
keyInteractionConfig: IKeyInteractionConfig;
constructor(
name: string,
app: IGraphicScene,
keyInteractionConfig: IKeyInteractionConfig
) {
super(name, app);
this.keyInteractionConfig = keyInteractionConfig;
}
totalBind(g: G): void {
g.onmousemove = (e) => {
this.onMousemove(e);
};
g.onmouseup = (e) => {
e.stopPropagation();
this.isMouseDown = false;
this.keyInteractionConfig.doFinish();
};
}
totalUnbind(g: G): void {
g.onmousemove = null;
g.onmouseup = null;
}
keyBind(g: Sprite): void {
this.ratatingSprite = g;
g.eventMode = 'static';
g.cursor = 'pointer';
g.onmousedown = (e) => {
this.onMouseDown(e);
};
}
keyUnbind(g: Sprite): void {
g.eventMode = 'none';
g.onmousedown = null;
}
onMouseDown(e: FederatedMouseEvent) {
const target = e.target as DisplayObject;
const g = target.getGraphic<G>();
if (!g) return;
this.isMouseDown = true;
this.mouseDownBeginPos = this.app.toCanvasCoordinates(e.global);
this.mouseDownBeginRotation = this.ratatingSprite.rotation;
}
onMousemove(e: FederatedMouseEvent) {
const target = e.target as DisplayObject;
const g = target.getGraphic<G>();
if (!g) return;
if (this.isMouseDown && useTccStore().canvasMouseDown) {
const mouseEndPos = this.app.toCanvasCoordinates(e.global);
const { angle, direction } = calculateAngleAndDirection(
this.mouseDownBeginPos,
g.position,
mouseEndPos
);
if (
this.keyInteractionConfig.keyRotationMethod ==
KeyRotationMethod.jumpChange
) {
if (direction == 'ssz') {
if (angle < 45) {
this.ratatingSprite.rotation = this.mouseDownBeginRotation;
}
if (angle >= 45 && angle < 90) {
this.ratatingSprite.rotation =
this.mouseDownBeginRotation + Math.PI / 4;
} else if (
angle >= 90 &&
this.mouseDownBeginRotation == -Math.PI / 4
) {
this.ratatingSprite.rotation =
this.mouseDownBeginRotation + Math.PI / 2;
}
this.keyInteractionConfig.doAfterChangeRotation(
g,
this.ratatingSprite.rotation
);
}
if (direction == 'nsz') {
if (angle < 45) {
this.ratatingSprite.rotation = this.mouseDownBeginRotation;
} else if (angle >= 45 && angle < 90) {
this.ratatingSprite.rotation =
this.mouseDownBeginRotation - Math.PI / 4;
} else if (
angle >= 90 &&
this.mouseDownBeginRotation == Math.PI / 4
) {
this.ratatingSprite.rotation =
this.mouseDownBeginRotation - Math.PI / 2;
}
this.keyInteractionConfig.doAfterChangeRotation(
g,
this.ratatingSprite.rotation
);
}
} else {
if (direction == 'ssz') {
this.ratatingSprite.rotation =
this.mouseDownBeginRotation + (angle / 180) * Math.PI;
} else {
this.ratatingSprite.rotation =
this.mouseDownBeginRotation - (angle / 180) * Math.PI;
}
}
}
}
}
export class TccKeyInteraction extends KeyInteraction<TccKey> {
static Name = 'TccKeyInteraction';
constructor(app: IGraphicScene) {
super(TccKeyInteraction.Name, app);
super(TccKeyInteraction.Name, app, {
gearPositionAmount: 3,
keyRotationMethod: KeyRotationMethod.jumpChange,
doAfterChangeRotation: (g: JlGraphic, rotation: number) => {
this.changeState(g, rotation);
},
doFinish: () => {
this.onFinish();
},
});
}
static init(app: IGraphicScene) {
return new TccKeyInteraction(app);
@ -103,20 +243,8 @@ export class TccKeyInteraction extends GraphicInteractionPlugin<TccKey> {
) {
g._tccKey.on('_leftclick', this.onClick);
} else {
g._tccKey.onmousedown = (e) => {
this.onMouseDown(e);
};
g._tccKey.onmouseup = () => {
this.isMouseDown = false;
this.changeOnce = false;
};
g.onmousemove = (e) => {
this.onMousemove(e);
};
g.onmouseleave = () => {
this.isMouseDown = false;
this.changeOnce = false;
};
super.totalBind(g);
super.keyBind(g._tccKey);
}
}
unbind(g: TccKey): void {
@ -127,61 +255,59 @@ export class TccKeyInteraction extends GraphicInteractionPlugin<TccKey> {
) {
g._tccKey.off('_leftclick', this.onClick);
} else {
g._tccKey.onmousedown = null;
g._tccKey.onmouseup = null;
g.onmousemove = null;
g.onmouseleave = null;
super.totalUnbind(g);
super.keyUnbind(g._tccKey);
}
}
onClick(e: FederatedMouseEvent): void {
const simulationId = useLineStore().simulationId;
const mapId = useLineStore().mapId;
const tccId = useTccStore().tccId;
const target = e.target as DisplayObject;
const tccKey = target.getGraphic<TccKey>();
if (!tccKey) return;
if (!tccKey || !simulationId || !mapId) return;
tccKey.state.position = tccKey?.state.position == 0 ? 1 : 0;
tccKey.doRepaint();
/* tccKeyOperation({
simulationId,
mapId,
keyId: tccKey.id,
tccId,
val: !tccKey.state.position,
}).catch((err) => {
errorNotify('操作失败', { message: err.origin.response.data.title });
}); */
}
onMouseDown(e: FederatedMouseEvent) {
const target = e.target as DisplayObject;
const tccKey = target.getGraphic<TccKey>();
if (!tccKey) return;
this.isMouseDown = true;
this.mouseDownBeginPos = tccKey
.getGraphicApp()
.getScene('tcc')
.toCanvasCoordinates(e.global);
}
onMousemove(e: FederatedMouseEvent) {
const target = e.target as DisplayObject;
const tccKey = target.getGraphic<TccKey>();
if (!tccKey) return;
if (this.isMouseDown) {
const mouseEndPos = tccKey
.getGraphicApp()
.getScene('tcc')
.toCanvasCoordinates(e.global);
const { angle, direction } = calculateAngleAndDirection(
this.mouseDownBeginPos,
tccKey.position,
mouseEndPos
);
if (
direction == 'ssz' &&
((angle > 45 && !this.changeOnce) || (angle > 90 && this.changeOnce)) &&
(tccKey._tccKey.rotation == -Math.PI / 4 ||
tccKey._tccKey.rotation == 0)
) {
this.changeOnce = true;
tccKey._tccKey.rotation += Math.PI / 4;
}
if (
direction == 'nsz' &&
((angle > 45 && !this.changeOnce) || (angle > 90 && this.changeOnce)) &&
(tccKey._tccKey.rotation == Math.PI / 4 || tccKey._tccKey.rotation == 0)
) {
this.changeOnce = true;
tccKey._tccKey.rotation -= Math.PI / 4;
}
changeState(g: JlGraphic, rotation: number) {
let position = 0;
switch (rotation) {
case Math.PI / 4:
position = 0;
break;
case -Math.PI / 4:
position = 1;
break;
default:
position = 2;
break;
}
(g as TccKey).state.position = position;
g.doRepaint();
}
onFinish() {
const simulationId = useLineStore().simulationId;
const mapId = useLineStore().mapId;
const tccId = useTccStore().tccId;
if (!simulationId || !mapId) return;
/* tccKeyDirOperation({
simulationId,
mapId,
keyId: g.id,
tccId,
val: (g as TccKey).state.position,
}).catch((err) => {
errorNotify('操作失败', { message: err.origin.response.data.title });
}); */
}
}

11
src/drawApp/tccScene.ts
View File

@ -53,6 +53,17 @@ export function initTccScene(lineApp: IGraphicApp, sceneName: string) {
tccScene.on('postdataloaded', () => {
handleSubscribe(tccScene);
});
const tccStore = useTccStore();
tccScene.canvas.onmousedown = () => {
tccStore.canvasMouseDown = true;
};
tccScene.canvas.onmouseup = () => {
tccStore.canvasMouseDown = false;
};
lineApp.on('destroy', () => {
tccScene.canvas.onmousedown = null;
tccScene.canvas.onmouseup = null;
});
return tccScene;
}

11
src/graphics/tccKey/TccKey.ts
View File

@ -66,6 +66,17 @@ export class TccKey extends JlGraphic {
this._tccKey.rotation =
this.state.position == 0 ? Math.PI / 4 : -Math.PI / 4;
} else {
switch (this.state.position) {
case 0:
this._tccKey.rotation = Math.PI / 4;
break;
case 1:
this._tccKey.rotation = -Math.PI / 4;
break;
default:
this._tccKey.rotation = 0;
break;
}
this._tccKey.texture = this.tccKeyTextures.tccKnob;
this._tccKey.scale.set(0.6);
}

1
src/stores/tcc-store.ts
View File

@ -7,6 +7,7 @@ export const useTccStore = defineStore('tcc', {
trainControlMapId: 0,
tccId: 0,
isTccDialogOpen: false,
canvasMouseDown: false,
}),
actions: {
getTccScene() {