线网列车

src/drawApp/graphics/TrainLineInteraction.ts

@@ -0,0 +1,38 @@
+import * as pb_1 from 'google-protobuf';
+import { ITrainLineData } from 'src/graphics/trainLine/TrainLine';
+import { graphicData } from 'src/protos/stationLayoutGraphics';
+import { GraphicDataBase } from './GraphicDataBase';
+
+export class TrainLineData extends GraphicDataBase implements ITrainLineData {
+  constructor(data?: graphicData.TrainLine) {
+    let fan;
+    if (data) {
+      fan = data;
+    } else {
+      fan = new graphicData.TrainLine({
+        common: GraphicDataBase.defaultCommonInfo(),
+      });
+    }
+    super(fan);
+  }
+
+  public get data(): graphicData.TrainLine {
+    return this.getData<graphicData.TrainLine>();
+  }
+
+  get code(): string {
+    return this.data.code;
+  }
+  set code(v: string) {
+    this.data.code = v;
+  }
+  clone(): TrainLineData {
+    return new TrainLineData(this.data.cloneMessage());
+  }
+  copyFrom(data: TrainLineData): void {
+    pb_1.Message.copyInto(data.data, this.data);
+  }
+  eq(other: TrainLineData): boolean {
+    return pb_1.Message.equals(this.data, other.data);
+  }
+}

src/drawApp/index.ts

@@ -34,6 +34,9 @@ import { StationData } from './graphics/StationInteraction';
 import { StationLine } from 'src/graphics/stationLine/StationLine';
 import { StationLineDraw } from 'src/graphics/stationLine/StationLineDrawAssistant';
 import { StationLineData } from './graphics/StationLineInteraction';
+import { TrainLine } from 'src/graphics/trainLine/TrainLine';
+import { TrainLineDraw } from 'src/graphics/trainLine/TrainLineAssistant';
+import { TrainLineData } from './graphics/TrainLineInteraction';
 import { Turnout } from 'src/graphics/turnout/Turnout';
 import { TurnoutDraw } from 'src/graphics/turnout/TurnoutDrawAssistant';
 import { TurnoutData } from './graphics/TurnoutInteraction';
@@ -126,6 +129,7 @@ export function initDrawApp(dom: HTMLElement): JlDrawApp {
     | SectionDraw
     | StationLineDraw
     | RectDraw
+    | TrainLineDraw
   )[] = [];
   if (draftType === 'Line') {
     drawAssistants = [
@@ -157,13 +161,22 @@ export function initDrawApp(dom: HTMLElement): JlDrawApp {
       new RunLineDraw(app, () => {
         return new RunLineData();
       }),
+      new TrainLineDraw(app, () => {
+        return new TrainLineData();
+      }),
     ];
     app.addKeyboardListener(
       new KeyListener({
-        value: 'KeyI',
+        value: 'KeyO',
         onPress: () => {
           app.interactionPlugin(StationLine.Type).resume();
         },
+      }),
+      new KeyListener({
+        value: 'KeyR',
+        onPress: () => {
+          app.interactionPlugin(Rect.Type).resume();
+        },
       })
     );
   }
@@ -259,6 +272,9 @@ export function saveDrawDatas(app: JlDrawApp) {
     } else if (StationLine.Type === g.type) {
       const stationLineData = (g as StationLine).saveData();
       storage.stationLines.push((stationLineData as StationLineData).data);
+    } else if (TrainLine.Type === g.type) {
+      const trainLineData = (g as TrainLine).saveData();
+      storage.trainLines.push((trainLineData as TrainLineData).data);
     }
   });
   const base64 = fromUint8Array(storage.serialize());
@@ -317,6 +333,9 @@ export async function loadDrawDatas(app: GraphicApp) {
     storage.stationLines.forEach((stationLine) => {
       datas.push(new StationLineData(stationLine));
     });
+    storage.trainLines.forEach((trainLine) => {
+      datas.push(new TrainLineData(trainLine));
+    });
     app.loadGraphic(datas);
   } else {
     app.loadGraphic([]);

src/graphics/trainLine/TrainLine.ts

@@ -0,0 +1,45 @@
+import { GraphicData, JlGraphic, JlGraphicTemplate } from 'src/jl-graphic';
+import trainLineSprites from './trainLineSprites.png';
+
+import { Assets, Sprite, Texture } from 'pixi.js';
+
+export interface ITrainLineData extends GraphicData {
+  get code(): string;
+  set code(v: string);
+}
+
+export class TrainLine extends JlGraphic {
+  static Type = 'TrainLine';
+  train: Sprite;
+  trainTextures: Texture;
+
+  constructor(trainTextures: Texture) {
+    super(TrainLine.Type);
+    this.trainTextures = trainTextures;
+    this.train = new Sprite();
+    this.train.texture = this.trainTextures;
+    this.train.anchor.set(0.5);
+    this.train.scale.set(0.1, 0.1);
+    this.addChild(this.train);
+  }
+  doRepaint(): void {
+    this.train.texture = this.trainTextures;
+  }
+}
+
+export class ItrainLineTemplate extends JlGraphicTemplate<TrainLine> {
+  trainTextures?: Texture;
+  constructor() {
+    super(TrainLine.Type);
+  }
+  new(): TrainLine {
+    if (this.trainTextures) {
+      return new TrainLine(this.trainTextures);
+    }
+    throw new Error('资源未加载/加载失败');
+  }
+  async loadAssets(): Promise<Texture> {
+    this.trainTextures = await Assets.load(trainLineSprites);
+    return this.trainTextures as Texture;
+  }
+}

src/graphics/trainLine/TrainLineAssistant.ts

@@ -0,0 +1,77 @@
+import { FederatedMouseEvent, Point } from 'pixi.js';
+import {
+  GraphicDrawAssistant,
+  GraphicInteractionPlugin,
+  JlDrawApp,
+  JlGraphic,
+} from 'src/jl-graphic';
+import { ITrainLineData, TrainLine, ItrainLineTemplate } from './TrainLine';
+
+export class TrainLineDraw extends GraphicDrawAssistant<
+  ItrainLineTemplate,
+  ITrainLineData
+> {
+  train: TrainLine | null = null;
+
+  constructor(app: JlDrawApp, createData: () => ITrainLineData) {
+    const template = new ItrainLineTemplate();
+    super(app, template, createData, 'directions_bus_filled', '列车线网');
+    ItrainLineInteraction.init(app);
+  }
+
+  bind(): void {
+    super.bind();
+    if (!this.train) {
+      this.train = this.graphicTemplate.new();
+      this.container.addChild(this.train);
+    }
+  }
+
+  public get trainLine(): TrainLine {
+    if (!this.train) {
+      throw new Error('列车绘制逻辑异常');
+    }
+    return this.train;
+  }
+
+  redraw(cp: Point): void {
+    this.trainLine.position.copyFrom(cp);
+  }
+  onLeftUp(e: FederatedMouseEvent): void {
+    this.trainLine.position.copyFrom(this.toCanvasCoordinates(e.global));
+    this.createAndStore(false);
+  }
+  prepareData(data: ITrainLineData): boolean {
+    data.transform = this.trainLine.saveTransform();
+    return true;
+  }
+  onEsc(): void {
+    this.finish();
+  }
+}
+
+export class ItrainLineInteraction extends GraphicInteractionPlugin<TrainLine> {
+  static Name = 'trainLine_transform';
+  constructor(app: JlDrawApp) {
+    super(ItrainLineInteraction.Name, app);
+  }
+  static init(app: JlDrawApp) {
+    return new ItrainLineInteraction(app);
+  }
+  filter(...grahpics: JlGraphic[]): TrainLine[] | undefined {
+    return grahpics
+      .filter((g) => g.type === TrainLine.Type)
+      .map((g) => g as TrainLine);
+  }
+  bind(g: TrainLine): void {
+    g.eventMode = 'static';
+    g.cursor = 'pointer';
+    g.scalable = true;
+    g.rotatable = true;
+  }
+  unbind(g: TrainLine): void {
+    g.eventMode = 'none';
+    g.scalable = false;
+    g.rotatable = false;
+  }
+}