From e71dd42b1d13206d22ab9b416ea865610f6ff666 Mon Sep 17 00:00:00 2001 From: Yuan Date: Thu, 2 Nov 2023 15:42:21 +0800 Subject: [PATCH] esbButton --- src/api/Simulation.ts | 11 +++ src/drawApp/graphics/EsbButtonInteraction.ts | 90 ++++++++++++++++++- src/drawApp/lineScene.ts | 14 ++- src/graphics/esbButton/EsbButton.ts | 28 ++++-- .../esbButton/EsbButtonDrawAssistant.ts | 10 +-- src/stores/line-store.ts | 9 ++ 6 files changed, 144 insertions(+), 18 deletions(-) diff --git a/src/api/Simulation.ts b/src/api/Simulation.ts index 1ec78cb..a8b427e 100644 --- a/src/api/Simulation.ts +++ b/src/api/Simulation.ts @@ -97,6 +97,17 @@ export async function ibpButtonOperation(params: IbpButtonOperationParams) { return await api.post(`${UriBase}/ibp/btn/operation`, params); } +export interface EsbButtonOperationParams { + down: boolean; + id: string; + mapId: number; + simulationId: string; +} + +export async function esbButtonOperation(params: EsbButtonOperationParams) { + return await api.post(`${UriBase}/esbBtn/operation`, params); +} + export interface IbpKeyOperationParams { simulationId: string; mapId: number; diff --git a/src/drawApp/graphics/EsbButtonInteraction.ts b/src/drawApp/graphics/EsbButtonInteraction.ts index 05de6f6..38306c2 100644 --- a/src/drawApp/graphics/EsbButtonInteraction.ts +++ b/src/drawApp/graphics/EsbButtonInteraction.ts @@ -1,18 +1,25 @@ import * as pb_1 from 'google-protobuf'; import { DisplayObject, FederatedMouseEvent } from 'pixi.js'; -import { EsbButton, IEsbButton } from 'src/graphics/esbButton/EsbButton'; +import { + EsbButton, + IEsbButtonData, + IEsbButtonState, +} from 'src/graphics/esbButton/EsbButton'; import { IGraphicApp, GraphicInteractionPlugin, JlGraphic, + IGraphicScene, } from 'src/jl-graphic'; import { ContextMenu } from 'src/jl-graphic/ui/ContextMenu'; import { MenuItemOptions } from 'src/jl-graphic/ui/Menu'; import { graphicData } from 'src/protos/stationLayoutGraphics'; -import { GraphicDataBase } from './GraphicDataBase'; +import { GraphicDataBase, GraphicStateBase } from './GraphicDataBase'; +import { useLineStore } from 'src/stores/line-store'; +import { state } from 'src/protos/device_state'; -export class EsbButtonData extends GraphicDataBase implements IEsbButton { +export class EsbButtonData extends GraphicDataBase implements IEsbButtonData { constructor(data?: graphicData.EsbButton) { let esbButton; if (!data) { @@ -63,6 +70,48 @@ export class EsbButtonData extends GraphicDataBase implements IEsbButton { } } +export class EsbButtonState + extends GraphicStateBase + implements IEsbButtonState +{ + constructor(data?: state.ButtonState) { + let ibpButtonState; + if (data) { + ibpButtonState = data; + } else { + ibpButtonState = new state.ButtonState(); + } + super(ibpButtonState, EsbButton.Type); + } + get states(): state.ButtonState { + return this.getState(); + } + get code(): string { + return this.states.id; + } + get id(): string { + return this.states.id; + } + set id(v: string) { + this.states.id = v; + } + get down(): boolean { + return this.states.down; + } + set down(v: boolean) { + this.states.down = v; + } + clone(): EsbButtonState { + return new EsbButtonState(this.states.cloneMessage()); + } + copyFrom(data: GraphicStateBase): void { + pb_1.Message.copyInto(data._state, this._state); + } + eq(data: GraphicStateBase): boolean { + return pb_1.Message.equals(this._state, data._state); + } +} + const flipConfig: MenuItemOptions = { name: '上下翻转', }; @@ -107,3 +156,38 @@ export class DrawEsbButtonInteraction extends GraphicInteractionPlugin { + static Name = 'esb_button_operation'; + constructor(scene: IGraphicScene) { + super(EsbButtonOperationInteraction.Name, scene); + } + static init(scene: IGraphicScene) { + return new EsbButtonOperationInteraction(scene); + } + filter(...grahpics: JlGraphic[]): EsbButton[] | undefined { + return grahpics.filter((g): g is EsbButton => g.type === EsbButton.Type); + } + bind(g: EsbButton): void { + g.eventMode = 'static'; + g.cursor = 'pointer'; + g.on('mousedown', this.onPress, this); + } + unbind(g: EsbButton): void { + g.eventMode = 'none'; + g.cursor = 'default'; + g.off('mousedown', this.onPress, this); + } + onPress(e: FederatedMouseEvent) { + const g = e.target as EsbButton; + g.on('mouseleave', this.onRelease, this); + g.on('mouseup', this.onRelease, this); + useLineStore().esbButtonOperation(true, g.datas.id); + } + onRelease(e: FederatedMouseEvent) { + const g = e.target as EsbButton; + g.off('mouseleave', this.onRelease, this); + g.off('mouseup', this.onRelease, this); + useLineStore().esbButtonOperation(false, g.datas.id); + } +} diff --git a/src/drawApp/lineScene.ts b/src/drawApp/lineScene.ts index 1aa2bdc..587ca74 100644 --- a/src/drawApp/lineScene.ts +++ b/src/drawApp/lineScene.ts @@ -98,7 +98,11 @@ import { EsbButton, EsbButtonTemplate } from 'src/graphics/esbButton/EsbButton'; import { StopPositionData } from './graphics/StopPositionInteraction'; import { SpksSwitchData } from './graphics/SpksSwitchInteraction'; import { GatedBoxData } from './graphics/GatedBoxInteraction'; -import { EsbButtonData } from './graphics/EsbButtonInteraction'; +import { + EsbButtonData, + EsbButtonOperationInteraction, + EsbButtonState, +} from './graphics/EsbButtonInteraction'; import { Transponder, TransponderTemplate, @@ -228,7 +232,7 @@ export function initLineScene(lineApp: IGraphicApp, sceneName: string) { new StopPositionTemplate(new StopPositionData()), new SpksSwitchTemplate(new SpksSwitchData()), new GatedBoxTemplate(new GatedBoxData()), - new EsbButtonTemplate(new EsbButtonData()), + new EsbButtonTemplate(new EsbButtonData(), new EsbButtonState()), new TransponderTemplate(new TransponderData()), new SlopeKiloMarkerTemplate(new SlopeKiloMarkerData()), new LinkTemplate(new LinkData()), @@ -247,6 +251,7 @@ export function initLineScene(lineApp: IGraphicApp, sceneName: string) { SectionOperateInteraction.init(lineScene); TrainOperateInteraction.init(lineScene); TurnoutOperationPlugin.init(lineScene); + EsbButtonOperationInteraction.init(lineScene); if (categoryType === CategoryType.TH) { GatedBoxOperateInteraction.init(lineScene); } @@ -295,6 +300,11 @@ function handleSubscribe(lineScene: IGraphicScene) { states.push(new TurnoutStates(item)); } }); + storage.allStatus.buttonState.forEach((item) => { + if (item.id) { + states.push(new EsbButtonState(item)); + } + }); storage.allStatus.signalState.forEach((item) => { if (item.id) { states.push(new SignalState(item)); diff --git a/src/graphics/esbButton/EsbButton.ts b/src/graphics/esbButton/EsbButton.ts index 6301202..a2bb841 100644 --- a/src/graphics/esbButton/EsbButton.ts +++ b/src/graphics/esbButton/EsbButton.ts @@ -1,12 +1,13 @@ import { Graphics } from 'pixi.js'; import { GraphicData, + GraphicState, JlGraphic, JlGraphicTemplate, VectorText, } from 'src/jl-graphic'; -export interface IEsbButton extends GraphicData { +export interface IEsbButtonData extends GraphicData { get code(): string; set code(v: string); get flip(): boolean; @@ -15,9 +16,15 @@ export interface IEsbButton extends GraphicData { set index(v: number); get refStand(): string; set refStand(v: string); - clone(): IEsbButton; - copyFrom(data: IEsbButton): void; - eq(other: IEsbButton): boolean; + clone(): IEsbButtonData; + copyFrom(data: IEsbButtonData): void; + eq(other: IEsbButtonData): boolean; +} + +export interface IEsbButtonState extends GraphicState { + id: string; + get down(): boolean; + set down(v: boolean); } const esbButtonConsts = { @@ -47,8 +54,11 @@ export class EsbButton extends JlGraphic { this.addChild(this.lineBody); this.addChild(this.circleBody); } - get datas(): IEsbButton { - return this.getDatas(); + get datas(): IEsbButtonData { + return this.getDatas(); + } + get state(): IEsbButtonState { + return this.getStates(); } get code(): string { return this.datas.index + ''; @@ -87,16 +97,18 @@ export class EsbButton extends JlGraphic { ); this.lineBody.moveTo(-esbButtonConsts.bodyRectWidth / 2, lineY); this.lineBody.lineTo(esbButtonConsts.bodyRectWidth / 2, lineY); + this.alpha = this.state.down ? 0.5 : 1; } } export class EsbButtonTemplate extends JlGraphicTemplate { - constructor(dataTemplate: IEsbButton) { - super(EsbButton.Type, { dataTemplate }); + constructor(dataTemplate: IEsbButtonData, stateTemplate?: IEsbButtonState) { + super(EsbButton.Type, { dataTemplate, stateTemplate }); } new(): EsbButton { const esbButton = new EsbButton(); esbButton.loadData(this.datas); + esbButton.loadState(this.states); return esbButton; } } diff --git a/src/graphics/esbButton/EsbButtonDrawAssistant.ts b/src/graphics/esbButton/EsbButtonDrawAssistant.ts index 775aac1..3ab25d8 100644 --- a/src/graphics/esbButton/EsbButtonDrawAssistant.ts +++ b/src/graphics/esbButton/EsbButtonDrawAssistant.ts @@ -8,14 +8,14 @@ import { IDrawApp, JlGraphic, } from 'src/jl-graphic'; -import { EsbButton, EsbButtonTemplate, IEsbButton } from './EsbButton'; +import { EsbButton, EsbButtonTemplate, IEsbButtonData } from './EsbButton'; -export interface IEsbButtonDrawOptions { - newData: () => IEsbButton; +export interface IEsbButtonDataDrawOptions { + newData: () => IEsbButtonData; } export class EsbButtonDraw extends GraphicDrawAssistant< EsbButtonTemplate, - IEsbButton + IEsbButtonData > { _esbButton: EsbButton | null = null; constructor(app: IDrawApp, template: EsbButtonTemplate) { @@ -46,7 +46,7 @@ export class EsbButtonDraw extends GraphicDrawAssistant< this.container.position.set(p.x, p.y); } - prepareData(data: IEsbButton): boolean { + prepareData(data: IEsbButtonData): boolean { data.transform = this.container.saveTransform(); data.code = 'ESB'; return true; diff --git a/src/stores/line-store.ts b/src/stores/line-store.ts index f776f77..ea5381d 100644 --- a/src/stores/line-store.ts +++ b/src/stores/line-store.ts @@ -17,6 +17,7 @@ import { MapInfo } from 'src/api/ProjectLinkApi'; import { CategoryType } from 'src/components/CategoryType'; import { Train } from 'src/graphics/train/Train'; import { TrainState } from 'src/drawApp/graphics/TrainInteraction'; +import { esbButtonOperation } from 'src/api/Simulation'; export const useLineStore = defineStore('line', { state: () => ({ @@ -132,5 +133,13 @@ export const useLineStore = defineStore('line', { setCategoryType(type: CategoryType | null) { this.categoryType = type; }, + async esbButtonOperation(down: boolean, id: string) { + await esbButtonOperation({ + down, + id, + simulationId: this.simulationId as string, + mapId: this.mapId as number, + }); + }, }, });