同步站台更改

src/graphics/platform/Platform.ts

@@ -1,10 +1,11 @@
-import { Color, Container, Graphics, Rectangle } from 'pixi.js';
+import { Color, Container, Graphics, Point, Rectangle } from 'pixi.js';
 import {
   GraphicData,
   GraphicState,
   JlGraphic,
   JlGraphicTemplate,
   VectorText,
+  calculateMirrorPoint,
   getRectangleCenter,
 } from 'src/jl-graphic';
 
@@ -152,14 +153,6 @@ export class doorGraphic extends Container {
     doorCloseGraphic.lineStyle(platformConsts.lineWidth, new Color(lineColor));
     doorCloseGraphic.moveTo(-platformConsts.doorOpenSpacing, 0);
     doorCloseGraphic.lineTo(platformConsts.doorOpenSpacing, 0);
-    doorGraphic.position.set(
-      0,
-      -platformConsts.height / 2 - platformConsts.doorPlatformSpacing
-    );
-    doorCloseGraphic.position.set(
-      0,
-      -platformConsts.height / 2 - platformConsts.doorPlatformSpacing
-    );
   }
   clear(): void {
     this.doorGraphic.clear();
@@ -177,18 +170,21 @@ export class doorGraphic extends Container {
 class codeGraph extends Container {
   static Type = 'Code';
   character: VectorText = new VectorText(''); //扣车H
+  runLevel: VectorText = new VectorText(''); //运行等级
   runTime: VectorText = new VectorText(''); //运行时间
   stopTime: VectorText = new VectorText(''); //停站时间
   circle: Graphics = new Graphics();
   constructor() {
     super();
     this.addChild(this.character);
-    this.addChild(this.runTime);
+    this.addChild(this.runLevel);
     this.addChild(this.circle);
     this.addChild(this.stopTime);
+    this.addChild(this.runTime);
     this.character.setVectorFontSize(platformConsts.besideFontSize);
-    this.runTime.setVectorFontSize(platformConsts.besideFontSize);
+    this.runLevel.setVectorFontSize(platformConsts.besideFontSize);
     this.stopTime.setVectorFontSize(platformConsts.besideFontSize);
+    this.runTime.setVectorFontSize(platformConsts.besideFontSize);
   }
   draw(): void {
     //扣车
@@ -213,6 +209,16 @@ class codeGraph extends Container {
       (platformConsts.height * 3) / 5
     );
     //区间运行等级状态
+    const runLevel = this.runLevel;
+    runLevel.anchor.set(0.5);
+    runLevel.position.set(
+      platformConsts.width / 2 +
+        platformConsts.lineWidth / 2 +
+        3 * platformConsts.besideSpacing,
+      -platformConsts.besideSpacing
+    );
+    runLevel.style.fill = PlatformColorEnum.whiteNumbers;
+    //区间运行时间
     const runTime = this.runTime;
     runTime.anchor.set(0.5);
     runTime.position.set(
@@ -234,8 +240,9 @@ class codeGraph extends Container {
     stopTime.style.fill = PlatformColorEnum.whiteNumbers;
     character.visible = false;
     circle.visible = false;
-    runTime.visible = false;
+    runLevel.visible = false;
     stopTime.visible = false;
+    runTime.visible = false;
   }
   clear(): void {
     this.character.destroy();
@@ -271,6 +278,11 @@ class codeGraph extends Container {
         this.character.style.fill = PlatformColorEnum.HCharRed;
       }
       //运行等级
+      if (stateData.nextSectionRunLevel) {
+        this.runLevel.visible = false;
+        this.runLevel.text = stateData.nextSectionRunLevel;
+      }
+      //运行时间
       if (stateData.nextSectionRunTime) {
         this.runTime.visible = true;
         this.runTime.text = stateData.nextSectionRunTime;
@@ -312,12 +324,6 @@ class besideGraphic extends Container {
     );
     besideGraphic.pivot = getRectangleCenter(rect);
     besideGraphic.rotation = Math.PI / 4;
-    besideGraphic.position.set(
-      0,
-      -platformConsts.height / 2 -
-        platformConsts.doorPlatformSpacing -
-        platformConsts.height / 3
-    );
     besideGraphic.visible = false;
   }
   clear(): void {
@@ -360,45 +366,37 @@ export class Platform extends JlGraphic {
     this.platformGraphic.draw(this.states);
     this.besideGraphic.draw();
     this.codeGraph.draw();
-    this.doorGraphic.position.set(0, 0);
-    this.besideGraphic.position.set(0, 0);
-    this.codeGraph.position.set(0, 0);
-    //站台方向
-    if (this.datas.direction == 'down') {
+
     this.doorGraphic.position.set(
       0,
-        platformConsts.height + platformConsts.doorPlatformSpacing * 2
+      -platformConsts.height / 2 - platformConsts.doorPlatformSpacing
     );
     this.besideGraphic.position.set(
       0,
-        platformConsts.height +
-          platformConsts.doorPlatformSpacing * 2 +
-          (platformConsts.height * 2) / 3
-      );
-      this.codeGraph.children[0].position.set(
-        platformConsts.width / 2 +
-          platformConsts.lineWidth / 2 +
-          (platformConsts.besideSpacing * 2) / 3,
-        -(platformConsts.height * 3) / 4
-      );
-      this.codeGraph.children[1].position.set(
-        -platformConsts.width / 2 -
-          platformConsts.lineWidth / 2 -
-          platformConsts.besideSpacing,
-        platformConsts.besideSpacing
+      -platformConsts.height / 2 -
+        platformConsts.doorPlatformSpacing -
+        platformConsts.height / 3
     );
+    this.codeGraph.position.set(0, 0);
+    //站台方向
+    if (this.datas.direction == 'down') {
+      const psChange = [
+        this.doorGraphic,
+        this.besideGraphic,
+        this.codeGraph.children[0],
+        this.codeGraph.children[1],
+        this.codeGraph.children[3],
+        this.codeGraph.children[4],
+      ];
+      psChange.forEach((g) => {
+        g.position.copyFrom(calculateMirrorPoint(new Point(0, 0), g.position));
+      });
       this.codeGraph.children[2].position.set(
         platformConsts.width / 2 +
           platformConsts.lineWidth / 2 +
           (platformConsts.besideSpacing * 4) / 3,
         (-platformConsts.height * 10) / 11
       );
-      this.codeGraph.children[3].position.set(
-        -platformConsts.width / 2 -
-          platformConsts.lineWidth / 2 -
-          platformConsts.besideSpacing,
-        -platformConsts.besideSpacing
-      );
     }
     this.changeState();
   }

src/graphics/platform/PlatformDrawAssistant.ts

@@ -8,14 +8,7 @@ import {
   JlGraphic,
 } from 'src/jl-graphic';
 
-import {
-  IPlatformData,
-  Platform,
-  PlatformTemplate,
-  rectGraphic,
-  doorGraphic,
-  IPlatformState,
-} from './Platform';
+import { IPlatformData, Platform, PlatformTemplate } from './Platform';
 
 export interface IPlatformDrawOptions {
   newData: () => IPlatformData;
@@ -25,9 +18,7 @@ export class PlatformDraw extends GraphicDrawAssistant<
   PlatformTemplate,
   IPlatformData
 > {
-  platformGraphic: rectGraphic = new rectGraphic();
-  doorGraphic: doorGraphic = new doorGraphic();
-
+  platformGraphic: Platform;
   constructor(app: JlDrawApp, template: PlatformTemplate) {
     super(
       app,
@@ -35,20 +26,19 @@ export class PlatformDraw extends GraphicDrawAssistant<
       'svguse:../../drawIcon.svg#icon-platform',
       '站台Platform'
     );
+    this.platformGraphic = this.graphicTemplate.new();
     this.container.addChild(this.platformGraphic);
-    this.container.addChild(this.doorGraphic);
     platformInteraction.init(app);
   }
 
   bind(): void {
     super.bind();
-    this.platformGraphic.draw(this.graphicTemplate.states as IPlatformState);
-    this.doorGraphic.draw(this.graphicTemplate.states as IPlatformState);
+    this.platformGraphic.loadData(this.graphicTemplate.datas);
+    this.platformGraphic.doRepaint();
   }
 
   clearCache(): void {
-    this.platformGraphic.clear();
-    this.doorGraphic.clear();
+    //this.platformGraphic.clear();
   }
   onLeftDown(e: FederatedPointerEvent): void {
     this.container.position.copyFrom(this.toCanvasCoordinates(e.global));