信号机状态调整

src/graphics/signal/Lamp.ts

@@ -16,6 +16,8 @@ const lampConsts = {
 export class Lamp extends Container {
   circleLamp: Graphics = new Graphics();
   logicMode: Graphics = new Graphics();
+  radiusX = 0;
+  radiusY = 0;
 
   constructor() {
     super();
@@ -23,30 +25,36 @@ export class Lamp extends Container {
     this.addChild(this.logicMode);
   }
   paint(radiusX: number, radiusY: number) {
+    this.radiusX = radiusX;
+    this.radiusY = radiusY;
     this.circleLamp.clear();
     this.circleLamp
       .beginFill(LampEnum.lampDefaultColor, 1)
       .drawCircle(radiusX, radiusY, lampConsts.lampRadius)
       .endFill();
-
+  }
+  createLogicMode() {
     this.logicMode
       .clear()
       .lineStyle(lampConsts.logicModeLineWidth, LampEnum.logicModeColor)
       .moveTo(
-        radiusX - lampConsts.logicModeDistance,
-        radiusY + lampConsts.logicModeDistance
+        this.radiusX - lampConsts.logicModeDistance,
+        this.radiusY + lampConsts.logicModeDistance
       )
       .lineTo(
-        radiusX + lampConsts.logicModeDistance,
-        radiusY - lampConsts.logicModeDistance
+        this.radiusX + lampConsts.logicModeDistance,
+        this.radiusY - lampConsts.logicModeDistance
       )
       .moveTo(
-        radiusX - lampConsts.logicModeDistance,
-        radiusY - lampConsts.logicModeDistance
+        this.radiusX - lampConsts.logicModeDistance,
+        this.radiusY - lampConsts.logicModeDistance
       )
       .lineTo(
-        radiusX + lampConsts.logicModeDistance,
-        radiusY + lampConsts.logicModeDistance
+        this.radiusX + lampConsts.logicModeDistance,
+        this.radiusY + lampConsts.logicModeDistance
       );
   }
+  logicModeClear() {
+    this.logicMode.clear();
+  }
 }

src/graphics/signal/LampMainBody.ts

@@ -2,6 +2,7 @@ import { Container } from '@pixi/display';
 import { Graphics, Point } from 'pixi.js';
 import { calculateMirrorPoint } from 'src/jl-graphic';
 import { Lamp } from './Lamp';
+import { ISignalState } from './Signal';
 
 export enum LampEnum {
   lampPostColor = '0xc0c0c0',
@@ -56,5 +57,11 @@ export class LampMainBody extends Container {
     }
   }
 
-  // setState() {}
+  chagneState(states: ISignalState) {
+    if (states.extinguish) {
+      this.lamps.forEach((lamp) => lamp.createLogicMode());
+    } else {
+      this.lamps.forEach((lamp) => lamp.logicModeClear());
+    }
+  }
 }

src/graphics/signal/Signal.ts

@@ -9,6 +9,7 @@ import {
 import { calculateMirrorPoint } from 'src/jl-graphic';
 import { LampMainBody } from './LampMainBody';
 import { drawArrow } from '../CommonGraphics';
+import { SignalCode } from './SignalCode';
 
 export interface ISignalData extends GraphicData {
   get code(): string; // 编号
@@ -72,13 +73,10 @@ export interface ISignalState extends GraphicState {
 export enum SignalColorEnum {
   humanControlColor = '0xffff00',
   fleetModeColor = '0x00ff00',
-  codeColor = '0X000000',
 }
 
 const signalConsts = {
   lampNum: 2,
-  codeFontSize: 11,
-  nameOffsetY: 20,
   fleetModeLength: 24,
   fleetModeRadius: 8,
   fleetModeLineWidth: 6,
@@ -86,15 +84,15 @@ const signalConsts = {
 };
 export class Signal extends JlGraphic {
   static Type = 'signal';
-  codeGraph: VectorText = new VectorText('');
+  signalCode: SignalCode = new SignalCode();
   humanControl: Graphics = new Graphics();
   fleetMode: Graphics = new Graphics();
   lampMainBody: LampMainBody = new LampMainBody();
+  blockedMode: Graphics = new Graphics();
 
   constructor() {
     super(Signal.Type);
-    this.codeGraph.name = 'signalCode';
-    this.addChild(this.codeGraph);
+    this.addChild(this.signalCode);
     this.addChild(this.humanControl);
     this.addChild(this.fleetMode);
     this.addChild(this.lampMainBody);
@@ -120,22 +118,23 @@ export class Signal extends JlGraphic {
   paint(): void {
     const mirror = this.datas.mirror;
     this.lampMainBody.paint(signalConsts.lampNum, mirror);
-    this.humanControl.clear();
-    this.humanControl.beginFill(SignalColorEnum.humanControlColor, 1);
-    if (this.humanControl.drawRegularPolygon) {
-      let hmp = new Point(-signalConsts.humanControlRadius, 0);
-      if (mirror) {
-        hmp = calculateMirrorPoint(new Point(0, 0), hmp);
-      }
-      this.humanControl.drawRegularPolygon(
-        hmp.x,
-        hmp.y,
-        signalConsts.humanControlRadius,
-        3,
-        (Math.PI / 2) * (mirror ? -1 : 1)
-      );
+    this.signalCode.paint(this.datas);
+    const codeTransform = this.datas?.childTransforms?.find(
+      (item) => item.name === 'signalCode'
+    );
+    if (codeTransform) {
+      const position = codeTransform?.transform.position;
+      const rotation = codeTransform?.transform?.rotation;
+      this.signalCode.position.set(position?.x, position?.y);
+      this.signalCode.rotation = rotation || 0;
     }
-    this.humanControl.endFill();
+  }
+
+  doRepaint(): void {
+    this.paint();
+  }
+  createFleetMode(): void {
+    const mirror = this.datas.mirror;
     this.fleetMode.clear();
     this.fleetMode.beginFill(SignalColorEnum.fleetModeColor, 1);
     let lmp = new Point(
@@ -155,36 +154,41 @@ export class Signal extends JlGraphic {
       mirror
     );
     this.fleetMode.endFill();
-    this.codeGraph.text = this.datas?.code || '信号机编号';
-    this.codeGraph.style.fill = SignalColorEnum.codeColor;
-    this.codeGraph.setVectorFontSize(signalConsts.codeFontSize);
-    this.codeGraph.anchor.set(0.5);
-    this.codeGraph.style.fill = SignalColorEnum.codeColor;
-    const codeTransform = this.datas?.childTransforms?.find(
-      (item) => item.name === 'signalCode'
-    );
-    if (codeTransform) {
-      const position = codeTransform?.transform.position;
-      const rotation = codeTransform?.transform?.rotation;
-      this.codeGraph.position.set(position?.x, position?.y);
-      this.codeGraph.rotation = rotation || 0;
-    } else {
-      this.codeGraph.position.set(0, signalConsts.nameOffsetY);
-    }
   }
-
-  doRepaint(): void {
-    this.paint();
+  createHumanControl(): void {
+    const mirror = this.datas.mirror;
+    this.humanControl.clear();
+    this.humanControl.beginFill(SignalColorEnum.humanControlColor, 1);
+    if (this.humanControl.drawRegularPolygon) {
+      let hmp = new Point(-signalConsts.humanControlRadius, 0);
+      if (mirror) {
+        hmp = calculateMirrorPoint(new Point(0, 0), hmp);
+      }
+      this.humanControl.drawRegularPolygon(
+        hmp.x,
+        hmp.y,
+        signalConsts.humanControlRadius,
+        3,
+        (Math.PI / 2) * (mirror ? -1 : 1)
+      );
+    }
+    this.humanControl.endFill();
+  }
+  createBlockedMode(): void {
+    this.blockedMode.clear();
   }
   chagneState(): void {
-    if (this.states.redOpen) {
-      this.lampMainBody.lamps.forEach((lamp) => {
-        lamp.circleLamp.tint = '0XFF0000';
-      });
-    } else if (this.states.greenOpen) {
-      this.lampMainBody.lamps.forEach((lamp) => {
-        lamp.circleLamp.tint = '0X00FF00';
-      });
+    this.lampMainBody.chagneState(this.states);
+    this.signalCode.chagneState(this.states);
+    if (this.states.fleetMode) {
+      this.createFleetMode();
+    } else {
+      this.fleetMode.clear();
+    }
+    if (this.states.autoRouteDisable) {
+      this.createHumanControl();
+    } else {
+      this.humanControl.clear();
     }
   }
 }

src/graphics/signal/SignalCode.ts

@@ -0,0 +1,54 @@
+import { Container, Graphics, Point } from 'pixi.js';
+import { VectorText } from 'src/jl-graphic';
+import { ISignalData, ISignalState } from './Signal';
+
+export enum CodeColorEnum {
+  defaultCodeColor = '0X000000',
+}
+
+const signalCodeConsts = {
+  codeFontSize: 11,
+  nameOffsetY: 20,
+  blockedLineWidth: 1,
+  blockedColor: '0XFF0000',
+};
+
+export class SignalCode extends Container {
+  blockedMode: Graphics = new Graphics();
+  codeGraph: VectorText = new VectorText('');
+  name = 'signalCode';
+  constructor() {
+    super();
+    this.addChild(this.blockedMode);
+    this.addChild(this.codeGraph);
+  }
+  paint(datas: ISignalData) {
+    this.codeGraph.text = datas?.code || '信号机编号';
+    this.codeGraph.style.fill = CodeColorEnum.defaultCodeColor;
+    this.codeGraph.setVectorFontSize(signalCodeConsts.codeFontSize);
+    this.codeGraph.anchor.set(0.5);
+    this.codeGraph.position.set(0, signalCodeConsts.nameOffsetY);
+  }
+  createBlockedMode() {
+    const codeRect = this.codeGraph.getBounds();
+    const rectP = this.screenToLocalPoint(new Point(codeRect.x, codeRect.y));
+    this.blockedMode.clear();
+    this.blockedMode.lineStyle(
+      signalCodeConsts.blockedLineWidth,
+      signalCodeConsts.blockedColor
+    );
+    this.blockedMode.drawRect(
+      rectP.x,
+      rectP.y,
+      codeRect.width,
+      codeRect.height
+    );
+  }
+  chagneState(states: ISignalState) {
+    if (states.blocked) {
+      this.createBlockedMode();
+    } else {
+      this.blockedMode.clear();
+    }
+  }
+}

src/graphics/signal/SignalDrawAssistant.ts

@@ -104,11 +104,11 @@ export class signalInteraction extends GraphicInteractionPlugin<Signal> {
     g.scalable = true;
     g.rotatable = true;
     g.on('transformstart', this.transformstart, this);
-    g.codeGraph.draggable = true;
-    g.codeGraph.selectable = true;
-    g.codeGraph.rotatable = true;
-    g.codeGraph.transformSave = true;
-    g.codeGraph.eventMode = 'static';
+    g.signalCode.draggable = true;
+    g.signalCode.selectable = true;
+    g.signalCode.rotatable = true;
+    g.signalCode.transformSave = true;
+    g.signalCode.eventMode = 'static';
   }
 
   unbind(g: Signal): void {
@@ -116,11 +116,11 @@ export class signalInteraction extends GraphicInteractionPlugin<Signal> {
     g.scalable = false;
     g.rotatable = false;
     g.off('transformstart', this.transformstart, this);
-    g.codeGraph.draggable = false;
-    g.codeGraph.selectable = false;
-    g.codeGraph.rotatable = false;
-    g.codeGraph.transformSave = false;
-    g.codeGraph.eventMode = 'none';
+    g.signalCode.draggable = false;
+    g.signalCode.selectable = false;
+    g.signalCode.rotatable = false;
+    g.signalCode.transformSave = false;
+    g.signalCode.eventMode = 'none';
   }
   transformstart(e: GraphicTransformEvent) {
     const target = e.target as DisplayObject;