esbButton

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;

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<state.ButtonState>();
+  }
+  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<EsbButton
     EsbButtonEditMenu.open(e.global);
   }
 }
+
+export class EsbButtonOperationInteraction extends GraphicInteractionPlugin<EsbButton> {
+  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);
+  }
+}

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

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<IEsbButton>();
+  get datas(): IEsbButtonData {
+    return this.getDatas<IEsbButtonData>();
+  }
+  get state(): IEsbButtonState {
+    return this.getStates<IEsbButtonState>();
   }
   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<EsbButton> {
-  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;
   }
 }

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;

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,
+      });
+    },
   },
 });