Merge branch 'master' of https://git.code.tencent.com/jl-framework/graphic-pixi

src/components/draw-app/DrawProperties.vue

@@ -57,6 +57,9 @@
           <iscs-fan-property
             v-else-if="drawStore.selectedGraphicType === IscsFan.Type"
           ></iscs-fan-property>
+          <signal-property
+            v-else-if="drawStore.selectedGraphicType === Signal.Type"
+          ></signal-property>
         </q-card-section>
       </template>
     </q-card>
@@ -75,6 +78,7 @@ import PlatformProperty from './properties/PlatformProperty.vue';
 import StationProperty from './properties/StationProperty.vue';
 import TrainProperty from './properties/TrainProperty.vue';
 import IscsFanProperty from './properties/IscsFanProperty.vue';
+import SignalProperty from './properties/SignalProperty.vue';
 import { Link } from 'src/graphics/link/Link';
 import { Rect } from 'src/graphics/rect/Rect';
 import { Platform } from 'src/graphics/platform/Platform';
@@ -82,6 +86,7 @@ import { Station } from 'src/graphics/station/Station';
 import { Train } from 'src/graphics/train/Train';
 import { useDrawStore } from 'src/stores/draw-store';
 import { IscsFan } from 'src/graphics/iscs-fan/IscsFan';
+import { Signal } from 'src/graphics/signal/Signal';
 
 const drawStore = useDrawStore();
 </script>

src/components/draw-app/properties/SignalProperty.vue

@@ -0,0 +1,57 @@
+<template>
+  <q-form>
+    <q-input outlined readonly v-model="signalModel.id" label="id" hint="" />
+    <q-select
+      outlined
+      @blur="onUpdate"
+      v-model="signalDirection"
+      :options="optionsDirection"
+      label="方向"
+    />
+  </q-form>
+</template>
+
+<script setup lang="ts">
+import { SignalData } from 'src/examples/app/graphics/SignalInteraction';
+import { Signal } from 'src/graphics/signal/Signal';
+import { useDrawStore } from 'src/stores/draw-store';
+import { onMounted, reactive, ref, watch } from 'vue';
+
+const drawStore = useDrawStore();
+const signalModel = reactive(new SignalData());
+const signalDirection = ref('向右');
+const optionsDirection = ['向左', '向右', '向上', '向下'];
+enum directionSelect {
+  向左 = 'left',
+  向右 = 'right',
+  向上 = 'up',
+  向下 = 'down',
+}
+
+drawStore.$subscribe;
+watch(
+  () => drawStore.selectedGraphic,
+  (val) => {
+    if (val && val.type == Signal.Type) {
+      signalModel.copyFrom(val.saveData() as SignalData);
+      signalDirection.value = (directionSelect as never)[signalModel.direction];
+    }
+  }
+);
+
+onMounted(() => {
+  const signal = drawStore.selectedGraphic as Signal;
+  if (signal) {
+    signalModel.copyFrom(signal.saveData());
+    signalDirection.value = (directionSelect as never)[signalModel.direction];
+  }
+});
+
+function onUpdate() {
+  signalModel.direction = (directionSelect as never)[signalDirection.value];
+  const signal = drawStore.selectedGraphic as Signal;
+  if (signal) {
+    drawStore.getDrawApp().updateGraphicAndRecord(signal, signalModel);
+  }
+}
+</script>

src/examples/app/app_message/protos/draw_data_storage.proto

@@ -10,6 +10,7 @@ message RtssGraphicStorage {
   repeated Station stations = 5;
   repeated Rect Rects = 6;
   repeated Train train = 7;
+  repeated Signal signals = 8;
 }
 
 message Canvas {
@@ -126,3 +127,12 @@ message IscsFan {
 }
 
 message Turnout {}
+
+message Signal {
+  CommonInfo common = 1;
+  string code = 2;
+  string codeColor = 3; // 信号机字体颜色
+  int32 codeFontSize = 4; // 信号机字体大小
+  Point point = 5; // 位置坐标
+  string direction = 6; //信号机朝向
+}

src/examples/app/graphics/SignalInteraction.ts

@@ -0,0 +1,62 @@
+import * as pb_1 from 'google-protobuf';
+import { IPointData } from 'pixi.js';
+import { ISignalData } from 'src/graphics/signal/Signal';
+import { graphicData } from '../protos/draw_data_storage';
+import { GraphicDataBase } from './GraphicDataBase';
+
+export class SignalData extends GraphicDataBase implements ISignalData {
+  constructor(data?: graphicData.Signal) {
+    let signal;
+    if (!data) {
+      signal = new graphicData.Signal({
+        common: GraphicDataBase.defaultCommonInfo(),
+      });
+    } else {
+      signal = data;
+    }
+    super(signal);
+  }
+
+  public get data(): graphicData.Signal {
+    return this.getData<graphicData.Signal>();
+  }
+  get code(): string {
+    return this.data.code;
+  }
+  set code(v: string) {
+    this.data.code = v;
+  }
+  get codeColor(): string {
+    return this.data.codeColor;
+  }
+  set codeColor(v: string) {
+    this.data.codeColor = v;
+  }
+  get codeFontSize(): number {
+    return this.data.codeFontSize;
+  }
+  set codeFontSize(v: number) {
+    this.data.codeFontSize = v;
+  }
+  get point(): IPointData {
+    return this.data.point;
+  }
+  set point(point: IPointData) {
+    this.data.point = new graphicData.Point({ x: point.x, y: point.y });
+  }
+  get direction(): string {
+    return this.data.direction;
+  }
+  set direction(v: string) {
+    this.data.direction = v;
+  }
+  clone(): SignalData {
+    return new SignalData(this.data.cloneMessage());
+  }
+  copyFrom(data: SignalData): void {
+    pb_1.Message.copyInto(data.data, this.data);
+  }
+  eq(other: SignalData): boolean {
+    return pb_1.Message.equals(this.data, other.data);
+  }
+}

src/examples/app/index.ts

@@ -11,6 +11,8 @@ import { PlatformDraw } from 'src/graphics/platform/PlatformDrawAssistant';
 import { Station } from 'src/graphics/station/Station';
 import { Train } from 'src/graphics/train/Train';
 import { StationDraw } from 'src/graphics/station/StationDrawAssistant';
+import { Signal } from 'src/graphics/signal/Signal';
+import { SignalDraw } from 'src/graphics/signal/SignalDrawAssistant';
 import { TrainDraw } from 'src/graphics/train/TrainDrawAssistant';
 import {
   CombinationKey,
@@ -27,6 +29,7 @@ import { LinkData } from './graphics/LinkInteraction';
 import { RectData } from './graphics/RectInteraction';
 import { PlatformData } from './graphics/PlatformInteraction';
 import { StationData } from './graphics/StationInteraction';
+import { SignalData } from './graphics/SignalInteraction';
 import { TrainData } from './graphics/TrainInteraction';
 import { graphicData } from './protos/draw_data_storage';
 
@@ -115,6 +118,9 @@ export function initDrawApp(dom: HTMLElement): JlDrawApp {
       new StationDraw(app, () => {
         return new StationData();
       }),
+      new SignalDraw(app, () => {
+        return new SignalData();
+      }),
       new TrainDraw(app, () => {
         return new TrainData();
       }),
@@ -179,6 +185,14 @@ export function initDrawApp(dom: HTMLElement): JlDrawApp {
       },
     })
   );
+  app.addKeyboardListener(
+    new KeyListener({
+      value: 'KeyH',
+      onPress: () => {
+        app.interactionPlugin(Signal.Type).resume();
+      },
+    })
+  );
   app.addKeyboardListener(
     new KeyListener({
       value: 'KeyT',
@@ -237,6 +251,9 @@ export function saveDrawDatas(app: JlDrawApp) {
     } else if (Station.Type === g.type) {
       const stationData = (g as Station).saveData();
       storage.stations.push((stationData as StationData).data);
+    } else if (Signal.Type === g.type) {
+      const signalData = (g as Signal).saveData();
+      storage.signals.push((signalData as SignalData).data);
     } else if (Train.Type === g.type) {
       const trainData = (g as Train).saveData();
       storage.train.push((trainData as TrainData).data);
@@ -273,8 +290,11 @@ export function loadDrawDatas(app: GraphicApp) {
     storage.stations.forEach((station) => {
       datas.push(new StationData(station));
     });
-    storage.train.forEach((train) => {
+    storage.stations.forEach((signal) => {
-      datas.push(new TrainData(train));
+      datas.push(new StationData(signal));
+    });
+    storage.stations.forEach((train) => {
+      datas.push(new StationData(train));
     });
     app.loadGraphic(datas);
   } else {

src/examples/app/protos/draw_data_storage.ts

@@ -15,9 +15,10 @@ export namespace graphicData {
             stations?: Station[];
             Rects?: Rect[];
             train?: Train[];
+            signals?: Signal[];
         }) {
             super();
-            pb_1.Message.initialize(this, Array.isArray(data) ? data : [], 0, -1, [2, 3, 4, 5, 6, 7], this.#one_of_decls);
+            pb_1.Message.initialize(this, Array.isArray(data) ? data : [], 0, -1, [2, 3, 4, 5, 6, 7, 8], this.#one_of_decls);
             if (!Array.isArray(data) && typeof data == "object") {
                 if ("canvas" in data && data.canvas != undefined) {
                     this.canvas = data.canvas;
@@ -40,6 +41,9 @@ export namespace graphicData {
                 if ("train" in data && data.train != undefined) {
                     this.train = data.train;
                 }
+                if ("signals" in data && data.signals != undefined) {
+                    this.signals = data.signals;
+                }
             }
         }
         get canvas() {
@@ -87,6 +91,12 @@ export namespace graphicData {
         set train(value: Train[]) {
             pb_1.Message.setRepeatedWrapperField(this, 7, value);
         }
+        get signals() {
+            return pb_1.Message.getRepeatedWrapperField(this, Signal, 8) as Signal[];
+        }
+        set signals(value: Signal[]) {
+            pb_1.Message.setRepeatedWrapperField(this, 8, value);
+        }
         static fromObject(data: {
             canvas?: ReturnType<typeof Canvas.prototype.toObject>;
             links?: ReturnType<typeof Link.prototype.toObject>[];
@@ -95,6 +105,7 @@ export namespace graphicData {
             stations?: ReturnType<typeof Station.prototype.toObject>[];
             Rects?: ReturnType<typeof Rect.prototype.toObject>[];
             train?: ReturnType<typeof Train.prototype.toObject>[];
+            signals?: ReturnType<typeof Signal.prototype.toObject>[];
         }): RtssGraphicStorage {
             const message = new RtssGraphicStorage({});
             if (data.canvas != null) {
@@ -118,6 +129,9 @@ export namespace graphicData {
             if (data.train != null) {
                 message.train = data.train.map(item => Train.fromObject(item));
             }
+            if (data.signals != null) {
+                message.signals = data.signals.map(item => Signal.fromObject(item));
+            }
             return message;
         }
         toObject() {
@@ -129,6 +143,7 @@ export namespace graphicData {
                 stations?: ReturnType<typeof Station.prototype.toObject>[];
                 Rects?: ReturnType<typeof Rect.prototype.toObject>[];
                 train?: ReturnType<typeof Train.prototype.toObject>[];
+                signals?: ReturnType<typeof Signal.prototype.toObject>[];
             } = {};
             if (this.canvas != null) {
                 data.canvas = this.canvas.toObject();
@@ -151,6 +166,9 @@ export namespace graphicData {
             if (this.train != null) {
                 data.train = this.train.map((item: Train) => item.toObject());
             }
+            if (this.signals != null) {
+                data.signals = this.signals.map((item: Signal) => item.toObject());
+            }
             return data;
         }
         serialize(): Uint8Array;
@@ -171,6 +189,8 @@ export namespace graphicData {
                 writer.writeRepeatedMessage(6, this.Rects, (item: Rect) => item.serialize(writer));
             if (this.train.length)
                 writer.writeRepeatedMessage(7, this.train, (item: Train) => item.serialize(writer));
+            if (this.signals.length)
+                writer.writeRepeatedMessage(8, this.signals, (item: Signal) => item.serialize(writer));
             if (!w)
                 return writer.getResultBuffer();
         }
@@ -201,6 +221,9 @@ export namespace graphicData {
                     case 7:
                         reader.readMessage(message.train, () => pb_1.Message.addToRepeatedWrapperField(message, 7, Train.deserialize(reader), Train));
                         break;
+                    case 8:
+                        reader.readMessage(message.signals, () => pb_1.Message.addToRepeatedWrapperField(message, 8, Signal.deserialize(reader), Signal));
+                        break;
                     default: reader.skipField();
                 }
             }
@@ -2306,4 +2329,192 @@ export namespace graphicData {
             return Turnout.deserialize(bytes);
         }
     }
+    export class Signal extends pb_1.Message {
+        #one_of_decls: number[][] = [];
+        constructor(data?: any[] | {
+            common?: CommonInfo;
+            code?: string;
+            codeColor?: string;
+            codeFontSize?: number;
+            point?: Point;
+            direction?: string;
+        }) {
+            super();
+            pb_1.Message.initialize(this, Array.isArray(data) ? data : [], 0, -1, [], this.#one_of_decls);
+            if (!Array.isArray(data) && typeof data == "object") {
+                if ("common" in data && data.common != undefined) {
+                    this.common = data.common;
+                }
+                if ("code" in data && data.code != undefined) {
+                    this.code = data.code;
+                }
+                if ("codeColor" in data && data.codeColor != undefined) {
+                    this.codeColor = data.codeColor;
+                }
+                if ("codeFontSize" in data && data.codeFontSize != undefined) {
+                    this.codeFontSize = data.codeFontSize;
+                }
+                if ("point" in data && data.point != undefined) {
+                    this.point = data.point;
+                }
+                if ("direction" in data && data.direction != undefined) {
+                    this.direction = data.direction;
+                }
+            }
+        }
+        get common() {
+            return pb_1.Message.getWrapperField(this, CommonInfo, 1) as CommonInfo;
+        }
+        set common(value: CommonInfo) {
+            pb_1.Message.setWrapperField(this, 1, value);
+        }
+        get has_common() {
+            return pb_1.Message.getField(this, 1) != null;
+        }
+        get code() {
+            return pb_1.Message.getFieldWithDefault(this, 2, "") as string;
+        }
+        set code(value: string) {
+            pb_1.Message.setField(this, 2, value);
+        }
+        get codeColor() {
+            return pb_1.Message.getFieldWithDefault(this, 3, "") as string;
+        }
+        set codeColor(value: string) {
+            pb_1.Message.setField(this, 3, value);
+        }
+        get codeFontSize() {
+            return pb_1.Message.getFieldWithDefault(this, 4, 0) as number;
+        }
+        set codeFontSize(value: number) {
+            pb_1.Message.setField(this, 4, value);
+        }
+        get point() {
+            return pb_1.Message.getWrapperField(this, Point, 5) as Point;
+        }
+        set point(value: Point) {
+            pb_1.Message.setWrapperField(this, 5, value);
+        }
+        get has_point() {
+            return pb_1.Message.getField(this, 5) != null;
+        }
+        get direction() {
+            return pb_1.Message.getFieldWithDefault(this, 6, "") as string;
+        }
+        set direction(value: string) {
+            pb_1.Message.setField(this, 6, value);
+        }
+        static fromObject(data: {
+            common?: ReturnType<typeof CommonInfo.prototype.toObject>;
+            code?: string;
+            codeColor?: string;
+            codeFontSize?: number;
+            point?: ReturnType<typeof Point.prototype.toObject>;
+            direction?: string;
+        }): Signal {
+            const message = new Signal({});
+            if (data.common != null) {
+                message.common = CommonInfo.fromObject(data.common);
+            }
+            if (data.code != null) {
+                message.code = data.code;
+            }
+            if (data.codeColor != null) {
+                message.codeColor = data.codeColor;
+            }
+            if (data.codeFontSize != null) {
+                message.codeFontSize = data.codeFontSize;
+            }
+            if (data.point != null) {
+                message.point = Point.fromObject(data.point);
+            }
+            if (data.direction != null) {
+                message.direction = data.direction;
+            }
+            return message;
+        }
+        toObject() {
+            const data: {
+                common?: ReturnType<typeof CommonInfo.prototype.toObject>;
+                code?: string;
+                codeColor?: string;
+                codeFontSize?: number;
+                point?: ReturnType<typeof Point.prototype.toObject>;
+                direction?: string;
+            } = {};
+            if (this.common != null) {
+                data.common = this.common.toObject();
+            }
+            if (this.code != null) {
+                data.code = this.code;
+            }
+            if (this.codeColor != null) {
+                data.codeColor = this.codeColor;
+            }
+            if (this.codeFontSize != null) {
+                data.codeFontSize = this.codeFontSize;
+            }
+            if (this.point != null) {
+                data.point = this.point.toObject();
+            }
+            if (this.direction != null) {
+                data.direction = this.direction;
+            }
+            return data;
+        }
+        serialize(): Uint8Array;
+        serialize(w: pb_1.BinaryWriter): void;
+        serialize(w?: pb_1.BinaryWriter): Uint8Array | void {
+            const writer = w || new pb_1.BinaryWriter();
+            if (this.has_common)
+                writer.writeMessage(1, this.common, () => this.common.serialize(writer));
+            if (this.code.length)
+                writer.writeString(2, this.code);
+            if (this.codeColor.length)
+                writer.writeString(3, this.codeColor);
+            if (this.codeFontSize != 0)
+                writer.writeInt32(4, this.codeFontSize);
+            if (this.has_point)
+                writer.writeMessage(5, this.point, () => this.point.serialize(writer));
+            if (this.direction.length)
+                writer.writeString(6, this.direction);
+            if (!w)
+                return writer.getResultBuffer();
+        }
+        static deserialize(bytes: Uint8Array | pb_1.BinaryReader): Signal {
+            const reader = bytes instanceof pb_1.BinaryReader ? bytes : new pb_1.BinaryReader(bytes), message = new Signal();
+            while (reader.nextField()) {
+                if (reader.isEndGroup())
+                    break;
+                switch (reader.getFieldNumber()) {
+                    case 1:
+                        reader.readMessage(message.common, () => message.common = CommonInfo.deserialize(reader));
+                        break;
+                    case 2:
+                        message.code = reader.readString();
+                        break;
+                    case 3:
+                        message.codeColor = reader.readString();
+                        break;
+                    case 4:
+                        message.codeFontSize = reader.readInt32();
+                        break;
+                    case 5:
+                        reader.readMessage(message.point, () => message.point = Point.deserialize(reader));
+                        break;
+                    case 6:
+                        message.direction = reader.readString();
+                        break;
+                    default: reader.skipField();
+                }
+            }
+            return message;
+        }
+        serializeBinary(): Uint8Array {
+            return this.serialize();
+        }
+        static deserializeBinary(bytes: Uint8Array): Signal {
+            return Signal.deserialize(bytes);
+        }
+    }
 }

src/graphics/signal/Signal.ts

@@ -0,0 +1,192 @@
+import { IPointData, Graphics, Color } from 'pixi.js';
+import {
+  GraphicData,
+  JlGraphic,
+  JlGraphicTemplate,
+  VectorText,
+} from 'src/jlgraphic';
+
+export interface ISignalData extends GraphicData {
+  get code(): string; // 编号
+  set code(v: string);
+  get codeColor(): string;
+  set codeColor(v: string);
+  get codeFontSize(): number;
+  set codeFontSize(v: number);
+  get point(): IPointData;
+  set point(point: IPointData);
+  get direction(): string;
+  set direction(v: string);
+  clone(): ISignalData;
+  copyFrom(data: ISignalData): void;
+  eq(other: ISignalData): boolean;
+}
+
+//站台颜色
+export enum SignalColorEnum {
+  lampPostColor = '0xc0c0c0',
+  lampColor = '0xff0000',
+  humanControlColor = '0xffff00',
+  fleetModeColor = '0x00ff00',
+  logicModeColor = '0x000000',
+}
+
+const signalConsts = {
+  verticalLampPostLength: 20,
+  levelLampPostLength: 5,
+  lineWidth: 3,
+  lampRadius: 10,
+  nameOffsetY: 20,
+  humanControlPath: [-2, 0, -17, 10, -17, -10],
+  logicModeLineWidth: 2,
+  logicModeDistance: 7,
+  fleetModePath: [2, -4, 22, -4, 22, -10, 35, 0, 22, 10, 22, 4, 2, 4],
+};
+export class Signal extends JlGraphic {
+  static Type = 'signal';
+  codeGraph: VectorText = new VectorText('');
+  lampPost: Graphics = new Graphics();
+  circularLamp: Graphics = new Graphics();
+  humanControl: Graphics = new Graphics();
+  fleetMode: Graphics = new Graphics();
+  logicMode: Graphics = new Graphics();
+
+  constructor() {
+    super(Signal.Type);
+    this.addChild(this.codeGraph);
+    this.addChild(this.lampPost);
+    this.addChild(this.circularLamp);
+    this.addChild(this.humanControl);
+    this.addChild(this.fleetMode);
+    this.addChild(this.logicMode);
+  }
+
+  get datas(): ISignalData {
+    return this.getDatas<ISignalData>();
+  }
+  doRepaint(): void {
+    console.log(this.datas, 'this.datas');
+    const codeGraph = this.codeGraph;
+    this.lampPost.clear();
+    this.lampPost.lineStyle(
+      signalConsts.lineWidth,
+      new Color(SignalColorEnum.lampPostColor)
+    );
+    this.lampPost.moveTo(0, -signalConsts.verticalLampPostLength / 2);
+    this.lampPost.lineTo(0, signalConsts.verticalLampPostLength / 2);
+    this.lampPost.moveTo(0, 0);
+    this.lampPost.lineTo(signalConsts.levelLampPostLength, 0);
+    this.circularLamp.beginFill(SignalColorEnum.lampColor, 1);
+    this.circularLamp.drawCircle(
+      signalConsts.levelLampPostLength + signalConsts.lampRadius,
+      0,
+      signalConsts.lampRadius
+    );
+    this.circularLamp.endFill();
+    this.humanControl.beginFill(SignalColorEnum.humanControlColor, 1);
+    this.humanControl.drawPolygon(signalConsts.humanControlPath);
+    this.humanControl.endFill();
+    this.fleetMode.beginFill(SignalColorEnum.fleetModeColor, 1);
+    const fleetModePath: number[] = [];
+    signalConsts.fleetModePath.forEach((item: number, index: number) => {
+      if (!(index % 2)) {
+        fleetModePath.push(
+          item + signalConsts.levelLampPostLength + signalConsts.lampRadius * 2
+        );
+      } else {
+        fleetModePath.push(item);
+      }
+    });
+    this.fleetMode.drawPolygon(fleetModePath);
+    this.fleetMode.endFill();
+    this.logicMode.lineStyle(2, new Color(SignalColorEnum.logicModeColor));
+    this.logicMode.moveTo(
+      signalConsts.levelLampPostLength +
+        signalConsts.lampRadius -
+        signalConsts.logicModeDistance,
+      signalConsts.logicModeDistance
+    );
+    this.logicMode.lineTo(
+      signalConsts.levelLampPostLength +
+        signalConsts.lampRadius +
+        signalConsts.logicModeDistance,
+      -signalConsts.logicModeDistance
+    );
+    this.logicMode.moveTo(
+      signalConsts.levelLampPostLength +
+        signalConsts.lampRadius -
+        signalConsts.logicModeDistance,
+      -signalConsts.logicModeDistance
+    );
+    this.logicMode.lineTo(
+      signalConsts.levelLampPostLength +
+        signalConsts.lampRadius +
+        signalConsts.logicModeDistance,
+      signalConsts.logicModeDistance
+    );
+    if (this.datas.code == '') {
+      codeGraph.text = '信号机Signal';
+    } else {
+      codeGraph.text = this.datas.code;
+    }
+    codeGraph.style.fill = this.datas.codeColor;
+    codeGraph.setVectorFontSize(this.datas.codeFontSize);
+    codeGraph.anchor.set(0.5);
+    codeGraph.style.fill = this.datas.codeColor;
+    codeGraph.position.set(0, signalConsts.nameOffsetY);
+    this.position.set(this.datas.point.x, this.datas.point.y);
+  }
+}
+
+export class SignalTemplate extends JlGraphicTemplate<Signal> {
+  codeColor: string;
+  codeFontSize: number;
+  direction: string;
+  verticalLampPostLength: number;
+  levelLampPostLength: number;
+  lineWidth: number;
+  lampRadius: number;
+  lampPostColor: string;
+  lampColor: string;
+  humanControlColor: string;
+  fleetModeColor: string;
+  logicModeColor: string;
+  humanControlPath: number[];
+  logicModeLineWidth: number;
+  logicModeDistance: number;
+  fleetModePath: number[];
+  nameOffsetY: number;
+  constructor() {
+    super(Signal.Type);
+    this.codeColor = '0xff0000';
+    this.codeFontSize = 11;
+    this.direction = 'right';
+    this.verticalLampPostLength = signalConsts.verticalLampPostLength;
+    this.levelLampPostLength = signalConsts.levelLampPostLength;
+    this.lineWidth = signalConsts.lineWidth;
+    this.lampRadius = signalConsts.lampRadius;
+    this.lampPostColor = SignalColorEnum.lampPostColor;
+    this.lampColor = SignalColorEnum.lampColor;
+    this.humanControlColor = SignalColorEnum.humanControlColor;
+    this.fleetModeColor = SignalColorEnum.fleetModeColor;
+    this.logicModeColor = SignalColorEnum.logicModeColor;
+    this.humanControlPath = signalConsts.humanControlPath;
+    this.logicModeLineWidth = signalConsts.logicModeLineWidth;
+    this.logicModeDistance = signalConsts.logicModeDistance;
+    this.nameOffsetY = signalConsts.nameOffsetY;
+    const fleetModePath: number[] = [];
+    signalConsts.fleetModePath.forEach((item: number, index: number) => {
+      if (!(index % 2)) {
+        fleetModePath.push(
+          item + signalConsts.levelLampPostLength + signalConsts.lampRadius * 2
+        );
+      } else {
+        fleetModePath.push(item);
+      }
+    });
+    this.fleetModePath = fleetModePath;
+  }
+  new(): Signal {
+    return new Signal();
+  }
+}

src/graphics/signal/SignalDrawAssistant.ts

@@ -0,0 +1,173 @@
+import { FederatedPointerEvent, Point, Graphics, Color } from 'pixi.js';
+import {
+  GraphicDrawAssistant,
+  GraphicInteractionPlugin,
+  JlDrawApp,
+  JlGraphic,
+  KeyListener,
+  VectorText,
+} from 'src/jlgraphic';
+
+import { ISignalData, Signal, SignalTemplate } from './Signal';
+
+export interface ISignalDrawOptions {
+  newData: () => ISignalData;
+}
+
+export class SignalDraw extends GraphicDrawAssistant<
+  SignalTemplate,
+  ISignalData
+> {
+  point: Point = new Point(0, 0);
+  codeGraph: VectorText = new VectorText('');
+  lampPost: Graphics = new Graphics();
+  circularLamp: Graphics = new Graphics();
+  humanControl: Graphics = new Graphics();
+  fleetMode: Graphics = new Graphics();
+  logicMode: Graphics = new Graphics();
+
+  // 快捷绘制
+  keypListener: KeyListener = new KeyListener({
+    value: 'KeyH',
+    global: true,
+    onPress: () => {
+      //this.graphicTemplate.hasdoor = true;
+    },
+  });
+
+  constructor(app: JlDrawApp, createData: () => ISignalData) {
+    super(app, new SignalTemplate(), createData, Signal.Type, '信号机Signal');
+    this.container.addChild(this.codeGraph);
+    this.container.addChild(this.lampPost);
+    this.container.addChild(this.circularLamp);
+    this.container.addChild(this.humanControl);
+    this.container.addChild(this.fleetMode);
+    this.container.addChild(this.logicMode);
+    signalInteraction.init(app);
+  }
+
+  bind(): void {
+    super.bind();
+    this.app.addKeyboardListener(this.keypListener);
+  }
+  unbind(): void {
+    super.unbind();
+    this.app.removeKeyboardListener(this.keypListener);
+  }
+
+  clearCache(): void {
+    //this.codeGraph.clear();
+  }
+  onRightClick(): void {
+    this.createAndStore(true);
+  }
+  onLeftDown(e: FederatedPointerEvent): void {
+    const { x, y } = this.toCanvasCoordinates(e.global);
+    const p = new Point(x, y);
+    this.point = p;
+    this.createAndStore(true);
+  }
+
+  redraw(p: Point): void {
+    const codeGraph = this.codeGraph;
+    const template = this.graphicTemplate;
+    this.point.set(p.x, p.y);
+    this.lampPost.lineStyle(
+      template.lineWidth,
+      new Color(template.lampPostColor)
+    );
+    this.lampPost.moveTo(0, -template.verticalLampPostLength / 2);
+    this.lampPost.lineTo(0, template.verticalLampPostLength / 2);
+
+    this.lampPost.moveTo(0, 0);
+    this.lampPost.lineTo(template.levelLampPostLength, 0);
+
+    this.lampPost.position.set(p.x, p.y);
+    this.circularLamp.beginFill(template.lampColor, 1);
+    this.circularLamp.drawCircle(
+      template.levelLampPostLength + template.lampRadius,
+      0,
+      template.lampRadius
+    );
+    this.circularLamp.endFill();
+    this.circularLamp.position.set(p.x, p.y);
+    this.humanControl.beginFill(template.humanControlColor, 1);
+    this.humanControl.drawPolygon(template.humanControlPath);
+    this.humanControl.endFill();
+    this.humanControl.position.set(p.x, p.y);
+    this.fleetMode.beginFill(template.fleetModeColor, 1);
+    this.fleetMode.drawPolygon(template.fleetModePath);
+    this.fleetMode.endFill();
+    this.fleetMode.position.set(p.x, p.y);
+    this.logicMode.lineStyle(
+      template.logicModeLineWidth,
+      new Color(template.logicModeColor)
+    );
+    this.logicMode.moveTo(
+      template.levelLampPostLength +
+        template.lampRadius -
+        template.logicModeDistance,
+      template.logicModeDistance
+    );
+    this.logicMode.lineTo(
+      template.levelLampPostLength +
+        template.lampRadius +
+        template.logicModeDistance,
+      -template.logicModeDistance
+    );
+    this.logicMode.moveTo(
+      template.levelLampPostLength +
+        template.lampRadius -
+        template.logicModeDistance,
+      -template.logicModeDistance
+    );
+    this.logicMode.lineTo(
+      template.levelLampPostLength +
+        template.lampRadius +
+        template.logicModeDistance,
+      template.logicModeDistance
+    );
+    this.logicMode.position.set(p.x, p.y);
+    codeGraph.text = '信号机Signal';
+
+    codeGraph.style.fill = template.codeColor;
+    codeGraph.setVectorFontSize(template.codeFontSize);
+    codeGraph.anchor.set(0.5);
+    codeGraph.style.fill = template.codeColor;
+    codeGraph.position.set(p.x, p.y + template.nameOffsetY);
+  }
+  prepareData(data: ISignalData): boolean {
+    const template = this.graphicTemplate;
+    data.point = this.point;
+    data.codeColor = template.codeColor;
+    data.codeFontSize = template.codeFontSize;
+    data.direction = template.direction;
+    return true;
+  }
+}
+
+export class signalInteraction extends GraphicInteractionPlugin<Signal> {
+  static Name = 'signal_transform';
+  constructor(app: JlDrawApp) {
+    super(signalInteraction.Name, app);
+  }
+  static init(app: JlDrawApp) {
+    return new signalInteraction(app);
+  }
+  filter(...grahpics: JlGraphic[]): Signal[] | undefined {
+    return grahpics
+      .filter((g) => g.type === Signal.Type)
+      .map((g) => g as Signal);
+  }
+  bind(g: Signal): void {
+    g.eventMode = 'static';
+    g.cursor = 'pointer';
+    g.scalable = true;
+    g.rotatable = true;
+  }
+  unbind(g: Signal): void {
+    g.eventMode = 'none';
+    g.scalable = false;
+    g.rotatable = false;
+  }
+}

yarn.lock

@@ -183,6 +183,11 @@
   resolved "https://registry.npmmirror.com/@pixi/filter-noise/-/filter-noise-7.2.4.tgz#0586a00381ec0e63f6c00d49cd58b781eaf07f37"
   integrity sha512-QAU9Ybj2ZQrWM9ZEjTTC0iLnQcuyNoZNRinxSbg1G0yacpmsSb9wvV5ltIZ66+hfY+90+u2Nudt/v9g6pvOdGg==
 
+"@pixi/graphics-extras@^7.2.4":
+  version "7.2.4"
+  resolved "https://registry.yarnpkg.com/@pixi/graphics-extras/-/graphics-extras-7.2.4.tgz#72ac967992f239d3671d6e680ac891471619fe07"
+  integrity sha512-0yT91yqF3KLiZI/iLRcfcYlTVpkVyWsfGtWEIorZs0eX+/zYx7um7EJ2h7tFORI/1FxA2maR4td5vpgCwOLJAQ==
+
 "@pixi/graphics@7.2.4":
   version "7.2.4"
   resolved "https://registry.npmmirror.com/@pixi/graphics/-/graphics-7.2.4.tgz#8500b604c36184736926393cb0ca9b9de9afef86"