diff --git a/src/drawApp/graphics/TccHandleInteraction.ts b/src/drawApp/graphics/TccHandleInteraction.ts index d793c42..07eb7bd 100644 --- a/src/drawApp/graphics/TccHandleInteraction.ts +++ b/src/drawApp/graphics/TccHandleInteraction.ts @@ -3,6 +3,7 @@ import { ITccHandleData, ITccHandleState, TccHandle, + zeroOffset, } from 'src/graphics/tccHandle/TccHandle'; import { tccGraphicData } from 'src/protos/tccGraphics'; import { GraphicDataBase, GraphicStateBase } from './GraphicDataBase'; @@ -105,7 +106,7 @@ export class TccHandleInteraction extends GraphicInteractionPlugin { }; g._tccHandle.onmouseup = (e) => { e.stopPropagation(); - this.onMouseUp(); + this.onMouseUp(e); }; g.onmousemove = (e) => { e.stopPropagation(); @@ -123,6 +124,7 @@ export class TccHandleInteraction extends GraphicInteractionPlugin { const target = e.target as DisplayObject; const tccHandle = target.getGraphic(); if (!tccHandle) return; + tccHandle.canDoRepaint = false; useTccStore().tccHandleId = tccHandle.id; useTccStore().mouseDownOnTccHandle = true; this.isMouseDown = true; @@ -146,13 +148,35 @@ export class TccHandleInteraction extends GraphicInteractionPlugin { } else if (tccHandle._tccHandle.y <= -145) { tccHandle._tccHandle.y = -144; } - clearTimeout(this.timeout); - this.timeout = setTimeout(() => { - useTccStore().onMouseUpFromTccHandle(); - }, 100); + let transFormHandleVal = 0; + if ( + tccHandle._tccHandle.y >= -zeroOffset && + tccHandle._tccHandle.y <= zeroOffset + ) { + tccHandle._tccHandle.y = 0; + } else if (tccHandle._tccHandle.y < -zeroOffset) { + transFormHandleVal = tccHandle._tccHandle.y + zeroOffset; + } else { + transFormHandleVal = tccHandle._tccHandle.y - zeroOffset; + } + tccHandle._stateVal = Number( + (-(transFormHandleVal / (144 - zeroOffset)) * 100).toFixed() + ); + tccHandle.labelGraphic.text = Math.abs(tccHandle._stateVal) + '%'; + tccHandle.labelGraphic.y = tccHandle._tccHandle.y; + if (this.timeout == undefined) { + this.timeout = setTimeout(() => { + useTccStore().onMouseUpFromTccHandle(); + this.timeout = undefined; + }, 100); + } } } - onMouseUp() { + onMouseUp(e: FederatedMouseEvent) { + const target = e.target as DisplayObject; + const tccHandle = target.getGraphic(); + if (!tccHandle) return; + tccHandle.canDoRepaint = true; this.isMouseDown = false; useTccStore().mouseDownOnTccHandle = false; } diff --git a/src/graphics/tccHandle/TccHandle.ts b/src/graphics/tccHandle/TccHandle.ts index 03330fd..1f6a238 100644 --- a/src/graphics/tccHandle/TccHandle.ts +++ b/src/graphics/tccHandle/TccHandle.ts @@ -3,6 +3,7 @@ import { GraphicState, JlGraphic, JlGraphicTemplate, + VectorText, } from 'jl-graphic'; import Tcc_Handle_Assets from './tcc-handle-spritesheet.png'; import Tcc_Handle_JSON from './tcc-handle-data.json'; @@ -30,7 +31,9 @@ export class TccHandle extends JlGraphic { _tccHandle: Sprite; _tccHandleBackground: Sprite; tccHandleTextures: TccHandleTextures; - __state = 0; + labelGraphic = new VectorText(); + _stateVal = 0; + canDoRepaint = true; constructor(tccHandleTextures: TccHandleTextures) { super(TccHandle.Type); @@ -44,6 +47,8 @@ export class TccHandle extends JlGraphic { this._tccHandleBackground.position.x = -20; this.addChild(this._tccHandleBackground); this.addChild(this._tccHandle); + this.setTextGraphic(this.labelGraphic); + this.addChild(this.labelGraphic); } get code(): string { return this.datas.code; @@ -55,6 +60,7 @@ export class TccHandle extends JlGraphic { return this.getStates(); } doRepaint(): void { + if (!this.canDoRepaint) return; const pos = -(this.state.gear * (144 - zeroOffset)) / 100; if (pos > 0) { this._tccHandle.y = pos + zeroOffset; @@ -63,8 +69,16 @@ export class TccHandle extends JlGraphic { } else { this._tccHandle.y = 0; } + this.labelGraphic.y = this._tccHandle.y; + this.labelGraphic.text = Math.abs(this.state.gear) + '%'; this._tccHandle.texture = this.tccHandleTextures.tccHandle; } + setTextGraphic(g: VectorText) { + g.position.x = 50; + g.setVectorFontSize(15); + g.anchor.set(0.5); + g.style.fill = '0xff0000'; + } } export class TccHandleTemplate extends JlGraphicTemplate { diff --git a/src/stores/tcc-store.ts b/src/stores/tcc-store.ts index 3b85023..25e55f8 100644 --- a/src/stores/tcc-store.ts +++ b/src/stores/tcc-store.ts @@ -5,7 +5,7 @@ import { useLineStore } from './line-store'; import { tccOperation } from 'src/api/Simulation'; import { errorNotify } from 'src/utils/CommonNotify'; import { request } from 'src/protos/request'; -import { TccHandle, zeroOffset } from 'src/graphics/tccHandle/TccHandle'; +import { TccHandle } from 'src/graphics/tccHandle/TccHandle'; import { TccKey } from 'src/graphics/tccKey/TccKey'; import { IGraphicApp } from 'jl-graphic'; @@ -47,27 +47,13 @@ export const useTccStore = defineStore('tcc', { .getScene(`tcc${this.tccId}`) .queryStore.queryById(this.tccHandleId); if (!simulationId) return; - let transFormHandleVal = 0; - if ( - tccHandle._tccHandle.y >= -zeroOffset && - tccHandle._tccHandle.y <= zeroOffset - ) { - tccHandle._tccHandle.y = 0; - } else if (tccHandle._tccHandle.y < -zeroOffset) { - transFormHandleVal = tccHandle._tccHandle.y + zeroOffset; - } else { - transFormHandleVal = tccHandle._tccHandle.y - zeroOffset; - } - const handleVal = Number( - (-(transFormHandleVal / (144 - zeroOffset)) * 100).toFixed() - ); tccOperation({ simulationId, trainId: this.tccId + '', deviceId: this.tccHandleId, controlType: request.TrainControl.TrainControlType.HANDLER, handler: { - val: handleVal, + val: tccHandle._stateVal, }, }).catch((err) => { errorNotify('操作失败', { message: err.origin.response.data.title });