站台-代码初提交备用（待优化）

src/components/draw-app/DrawProperties.vue

@@ -10,6 +10,9 @@
         <template v-if="drawStore.drawGraphicType === Link.Type">
           <link-template></link-template>
         </template>
+        <template v-if="drawStore.drawGraphicType === Platform.Type">
+          <platform-template></platform-template>
+        </template>
       </q-card-section>
     </q-card>
   </div>
@@ -30,6 +33,9 @@
           <link-property
             v-if="drawStore.selectedGraphicType === Link.Type"
           ></link-property>
+          <platform-property
+            v-if="drawStore.selectedGraphicType === Platform.Type"
+          ></platform-property>
           <iscs-fan-property
             v-else-if="drawStore.selectedGraphicType === IscsFan.Type"
           ></iscs-fan-property>
@@ -41,10 +47,13 @@
 
 <script setup lang="ts">
 import LinkTemplate from './templates/LinkTemplate.vue';
+import PlatformTemplate from './templates/PlatformTemplate.vue';
 import CanvasProperty from './properties/CanvasProperty.vue';
 import LinkProperty from './properties/LinkProperty.vue';
+import PlatformProperty from './properties/PlatformProperty.vue';
 import IscsFanProperty from './properties/IscsFanProperty.vue';
 import { Link } from 'src/graphics/link/Link';
+import { Platform } from 'src/graphics/platform/Platform';
 import { useDrawStore } from 'src/stores/draw-store';
 import { IscsFan } from 'src/graphics/iscs-fan/IscsFan';
 

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

@@ -0,0 +1,85 @@
+<template>
+  <q-form>
+    <q-input outlined readonly v-model="stationModel.id" label="id" hint="" />
+    <q-input
+      outlined
+      v-model.number="stationModel.lineWidth"
+      type="number"
+      @blur="onUpdate"
+      label="线宽"
+      lazy-rules
+      :rules="[(val) => (val && val > 0) || '画布宽必须大于0']"
+    />
+
+    <q-input
+      outlined
+      v-model="stationModel.lineColor"
+      @blur="onUpdate"
+      label="线色"
+      lazy-rules
+      :rules="[(val) => (val && val.length > 0) || '线色不能为空']"
+    >
+      <template v-slot:append>
+        <q-icon name="colorize" class="cursor-pointer">
+          <q-popup-proxy cover transition-show="scale" transition-hide="scale">
+            <q-color
+              v-model="stationModel.lineColor"
+              @change="
+                (val) => {
+                  stationModel.lineColor = val;
+                  onUpdate();
+                }
+              "
+            />
+          </q-popup-proxy>
+        </q-icon>
+      </template>
+    </q-input>
+
+    <q-select
+      outlined
+      v-model="stationModel.hasdoor"
+      :options="options"
+      label="是否有屏蔽门"
+    />
+  </q-form>
+</template>
+
+<script setup lang="ts">
+import { PlatformData } from 'src/examples/app/graphics/PlatformInteraction';
+import { Platform } from 'src/graphics/platform/Platform';
+import { useDrawStore } from 'src/stores/draw-store';
+import { onMounted, reactive, watch } from 'vue';
+
+const drawStore = useDrawStore();
+const stationModel = reactive(new PlatformData());
+const options = [true, false];
+
+drawStore.$subscribe;
+watch(
+  () => drawStore.selectedGraphic,
+  (val) => {
+    if (val && val.type == Platform.Type) {
+      // console.log('station变更');
+      stationModel.copyFrom(val.saveData() as PlatformData);
+    }
+  }
+);
+
+onMounted(() => {
+  //console.log('station 属性表单 mounted');
+  const station = drawStore.selectedGraphic as Platform;
+
+  if (station) {
+    stationModel.copyFrom(station.saveData());
+  }
+});
+
+function onUpdate() {
+  //console.log(stationModel, 'station 属性更新');
+  const station = drawStore.selectedGraphic as Platform;
+  if (station) {
+    drawStore.getDrawApp().updateGraphicAndRecord(station, stationModel);
+  }
+}
+</script>

src/components/draw-app/templates/PlatformTemplate.vue

@@ -0,0 +1,76 @@
+<template>
+  <q-form>
+    <q-input
+      outlined
+      v-model.number="template.lineWidth"
+      type="number"
+      @blur="onUpdate"
+      label="线宽 *"
+      lazy-rules
+      :rules="[(val) => (val && val > 0) || '线宽必须大于0']"
+    />
+
+    <q-input
+      outlined
+      v-model="template.lineColor"
+      @blur="onUpdate"
+      label="线色 *"
+      lazy-rules
+      :rules="[(val) => (val && val.length > 0) || '线色不能为空']"
+    >
+      <template v-slot:append>
+        <q-icon name="colorize" class="cursor-pointer">
+          <q-popup-proxy cover transition-show="scale" transition-hide="scale">
+            <q-color
+              v-model="template.lineColor"
+              @change="
+                (val) => {
+                  template.lineColor = val;
+                  onUpdate();
+                }
+              "
+            />
+          </q-popup-proxy>
+        </q-icon>
+      </template>
+    </q-input>
+  </q-form>
+</template>
+
+<script setup lang="ts">
+import { LinkTemplate } from 'src/graphics/link/Link';
+import { useDrawStore } from 'src/stores/draw-store';
+import { onMounted, reactive } from 'vue';
+
+const drawStore = useDrawStore();
+const template = reactive({
+  lineWidth: 1,
+  lineColor: '#0000ff',
+  curve: false,
+  segmentsCount: 10,
+});
+
+onMounted(() => {
+  const type = drawStore.drawGraphicType;
+  if (type) {
+    const gt = drawStore.drawGraphicTemplate;
+    if (gt) {
+      const lt = gt as LinkTemplate;
+      template.lineWidth = lt.lineWidth;
+      template.lineColor = lt.lineColor;
+      template.curve = lt.curve;
+      template.segmentsCount = lt.segmentsCount;
+    }
+  }
+});
+
+function onUpdate() {
+  const gt = drawStore.drawGraphicTemplate as LinkTemplate;
+  if (gt) {
+    gt.lineWidth = template.lineWidth;
+    gt.lineColor = template.lineColor;
+    gt.curve = template.curve;
+    gt.segmentsCount = template.segmentsCount;
+  }
+}
+</script>

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

@@ -6,6 +6,7 @@ message RtssGraphicStorage {
   Canvas canvas = 1;
   repeated Link links = 2;
   repeated IscsFan iscsFans = 3;
+  repeated Platform Platforms = 4;
 }
 
 message Canvas {
@@ -63,6 +64,19 @@ message Link {
   repeated Point points = 7; // 点坐标列表
 }
 
+message Platform {
+  CommonInfo common = 1;
+  string code = 2;
+  bool hasdoor = 3; // 是否有屏蔽门
+  int32 lineWidth = 4; // 线宽
+  string lineColor = 5; // 站台线色
+  string lineColorDoor = 6; // 屏蔽门线色
+  Point point = 7; // 位置坐标
+  float width = 8;//宽度
+  float height = 9; //高度
+  repeated string orbitCode = 10;//站台轨
+}
+
 message IscsFan {
   CommonInfo common = 1;
   string code = 2;

src/examples/app/graphics/PlatformInteraction.ts

@@ -0,0 +1,82 @@
+import * as pb_1 from 'google-protobuf';
+import { IPointData } from 'pixi.js';
+import { IPlatformData } from 'src/graphics/platform/Platform';
+import { graphicData } from '../protos/draw_data_storage';
+import { GraphicDataBase } from './GraphicDataBase';
+
+export class PlatformData extends GraphicDataBase implements IPlatformData {
+  constructor(data?: graphicData.Platform) {
+    let platform;
+    if (!data) {
+      platform = new graphicData.Platform({
+        common: GraphicDataBase.defaultCommonInfo(),
+      });
+    } else {
+      platform = data;
+    }
+    super(platform);
+  }
+
+  public get data(): graphicData.Platform {
+    return this.getData<graphicData.Platform>();
+  }
+
+  get code(): string {
+    return this.data.code;
+  }
+  set code(v: string) {
+    this.data.code = v;
+  }
+  get hasdoor(): boolean {
+    return this.data.hasdoor;
+  }
+  set hasdoor(v: boolean) {
+    this.data.hasdoor = v;
+  }
+  get lineWidth(): number {
+    return this.data.lineWidth;
+  }
+  set lineWidth(v: number) {
+    this.data.lineWidth = v;
+  }
+  get lineColor(): string {
+    return this.data.lineColor;
+  }
+  set lineColor(v: string) {
+    this.data.lineColor = v;
+  }
+  get lineColorDoor(): string {
+    return this.data.lineColorDoor;
+  }
+  set lineColorDoor(v: string) {
+    this.data.lineColorDoor = 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 width(): number {
+    return this.data.width;
+  }
+  set width(v: number) {
+    this.data.width = v;
+  }
+  get height(): number {
+    return this.data.height;
+  }
+  set height(v: number) {
+    this.data.height = v;
+  }
+
+  clone(): PlatformData {
+    return new PlatformData(this.data.cloneMessage());
+  }
+  copyFrom(data: PlatformData): void {
+    pb_1.Message.copyInto(data.data, this.data);
+  }
+  eq(other: PlatformData): boolean {
+    return pb_1.Message.equals(this.data, other.data);
+  }
+}

src/examples/app/index.ts

@@ -4,6 +4,8 @@ import { IscsFan } from 'src/graphics/iscs-fan/IscsFan';
 import { IscsFanDraw } from 'src/graphics/iscs-fan/IscsFanDrawAssistant';
 import { Link } from 'src/graphics/link/Link';
 import { LinkDraw } from 'src/graphics/link/LinkDrawAssistant';
+import { Platform } from 'src/graphics/platform/Platform';
+import { PlatformDraw } from 'src/graphics/platform/PlatformDrawAssistant';
 import {
   CombinationKey,
   GraphicApp,
@@ -16,6 +18,7 @@ import { ContextMenu } from 'src/jlgraphic/ui/ContextMenu';
 import { MenuItemOptions } from 'src/jlgraphic/ui/Menu';
 import { IscsFanData } from './graphics/IscsFanInteraction';
 import { LinkData } from './graphics/LinkInteraction';
+import { PlatformData } from './graphics/PlatformInteraction';
 import { graphicData } from './protos/draw_data_storage';
 
 export function fromStoragePoint(p: graphicData.Point): Point {
@@ -94,6 +97,9 @@ export function initDrawApp(dom: HTMLElement): JlDrawApp {
       new IscsFanDraw(app, () => {
         return new IscsFanData();
       }),
+      new PlatformDraw(app, () => {
+        return new PlatformData();
+      }),
     ],
   });
 
@@ -131,6 +137,14 @@ export function initDrawApp(dom: HTMLElement): JlDrawApp {
       },
     })
   );
+  app.addKeyboardListener(
+    new KeyListener({
+      value: 'KeyP',
+      onPress: () => {
+        app.interactionPlugin(Platform.Type).resume();
+      },
+    })
+  );
   app.addKeyboardListener(
     new KeyListener({
       value: '1',
@@ -172,6 +186,9 @@ export function saveDrawDatas(app: JlDrawApp) {
     } else if (IscsFan.Type === g.type) {
       const IscsFanData = (g as IscsFan).saveData();
       storage.iscsFans.push((IscsFanData as IscsFanData).data);
+    } else if (Platform.Type === g.type) {
+      const platformData = (g as Platform).saveData();
+      storage.Platforms.push((platformData as PlatformData).data);
     }
   });
   const base64 = fromUint8Array(storage.serialize());
@@ -196,6 +213,9 @@ export function loadDrawDatas(app: GraphicApp) {
     storage.iscsFans.forEach((fan) => {
       datas.push(new IscsFanData(fan));
     });
+    storage.Platforms.forEach((platform) => {
+      datas.push(new PlatformData(platform));
+    });
     app.loadGraphic(datas);
   }
 }

src/examples/app/protos/draw_data_storage.ts

@@ -11,9 +11,10 @@ export namespace graphicData {
             canvas?: Canvas;
             links?: Link[];
             iscsFans?: IscsFan[];
+            Platforms?: Platform[];
         }) {
             super();
-            pb_1.Message.initialize(this, Array.isArray(data) ? data : [], 0, -1, [2, 3], this.#one_of_decls);
+            pb_1.Message.initialize(this, Array.isArray(data) ? data : [], 0, -1, [2, 3, 4], this.#one_of_decls);
             if (!Array.isArray(data) && typeof data == "object") {
                 if ("canvas" in data && data.canvas != undefined) {
                     this.canvas = data.canvas;
@@ -24,6 +25,9 @@ export namespace graphicData {
                 if ("iscsFans" in data && data.iscsFans != undefined) {
                     this.iscsFans = data.iscsFans;
                 }
+                if ("Platforms" in data && data.Platforms != undefined) {
+                    this.Platforms = data.Platforms;
+                }
             }
         }
         get canvas() {
@@ -47,10 +51,17 @@ export namespace graphicData {
         set iscsFans(value: IscsFan[]) {
             pb_1.Message.setRepeatedWrapperField(this, 3, value);
         }
+        get Platforms() {
+            return pb_1.Message.getRepeatedWrapperField(this, Platform, 4) as Platform[];
+        }
+        set Platforms(value: Platform[]) {
+            pb_1.Message.setRepeatedWrapperField(this, 4, value);
+        }
         static fromObject(data: {
             canvas?: ReturnType<typeof Canvas.prototype.toObject>;
             links?: ReturnType<typeof Link.prototype.toObject>[];
             iscsFans?: ReturnType<typeof IscsFan.prototype.toObject>[];
+            Platforms?: ReturnType<typeof Platform.prototype.toObject>[];
         }): RtssGraphicStorage {
             const message = new RtssGraphicStorage({});
             if (data.canvas != null) {
@@ -62,6 +73,9 @@ export namespace graphicData {
             if (data.iscsFans != null) {
                 message.iscsFans = data.iscsFans.map(item => IscsFan.fromObject(item));
             }
+            if (data.Platforms != null) {
+                message.Platforms = data.Platforms.map(item => Platform.fromObject(item));
+            }
             return message;
         }
         toObject() {
@@ -69,6 +83,7 @@ export namespace graphicData {
                 canvas?: ReturnType<typeof Canvas.prototype.toObject>;
                 links?: ReturnType<typeof Link.prototype.toObject>[];
                 iscsFans?: ReturnType<typeof IscsFan.prototype.toObject>[];
+                Platforms?: ReturnType<typeof Platform.prototype.toObject>[];
             } = {};
             if (this.canvas != null) {
                 data.canvas = this.canvas.toObject();
@@ -79,6 +94,9 @@ export namespace graphicData {
             if (this.iscsFans != null) {
                 data.iscsFans = this.iscsFans.map((item: IscsFan) => item.toObject());
             }
+            if (this.Platforms != null) {
+                data.Platforms = this.Platforms.map((item: Platform) => item.toObject());
+            }
             return data;
         }
         serialize(): Uint8Array;
@@ -91,6 +109,8 @@ export namespace graphicData {
                 writer.writeRepeatedMessage(2, this.links, (item: Link) => item.serialize(writer));
             if (this.iscsFans.length)
                 writer.writeRepeatedMessage(3, this.iscsFans, (item: IscsFan) => item.serialize(writer));
+            if (this.Platforms.length)
+                writer.writeRepeatedMessage(4, this.Platforms, (item: Platform) => item.serialize(writer));
             if (!w)
                 return writer.getResultBuffer();
         }
@@ -109,6 +129,9 @@ export namespace graphicData {
                     case 3:
                         reader.readMessage(message.iscsFans, () => pb_1.Message.addToRepeatedWrapperField(message, 3, IscsFan.deserialize(reader), IscsFan));
                         break;
+                    case 4:
+                        reader.readMessage(message.Platforms, () => pb_1.Message.addToRepeatedWrapperField(message, 4, Platform.deserialize(reader), Platform));
+                        break;
                     default: reader.skipField();
                 }
             }
@@ -935,6 +958,286 @@ export namespace graphicData {
             return Link.deserialize(bytes);
         }
     }
+    export class Platform extends pb_1.Message {
+        #one_of_decls: number[][] = [];
+        constructor(data?: any[] | {
+            common?: CommonInfo;
+            code?: string;
+            hasdoor?: boolean;
+            lineWidth?: number;
+            lineColor?: string;
+            lineColorDoor?: string;
+            point?: Point;
+            width?: number;
+            height?: number;
+            orbitCode?: string[];
+        }) {
+            super();
+            pb_1.Message.initialize(this, Array.isArray(data) ? data : [], 0, -1, [10], 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 ("hasdoor" in data && data.hasdoor != undefined) {
+                    this.hasdoor = data.hasdoor;
+                }
+                if ("lineWidth" in data && data.lineWidth != undefined) {
+                    this.lineWidth = data.lineWidth;
+                }
+                if ("lineColor" in data && data.lineColor != undefined) {
+                    this.lineColor = data.lineColor;
+                }
+                if ("lineColorDoor" in data && data.lineColorDoor != undefined) {
+                    this.lineColorDoor = data.lineColorDoor;
+                }
+                if ("point" in data && data.point != undefined) {
+                    this.point = data.point;
+                }
+                if ("width" in data && data.width != undefined) {
+                    this.width = data.width;
+                }
+                if ("height" in data && data.height != undefined) {
+                    this.height = data.height;
+                }
+                if ("orbitCode" in data && data.orbitCode != undefined) {
+                    this.orbitCode = data.orbitCode;
+                }
+            }
+        }
+        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 hasdoor() {
+            return pb_1.Message.getFieldWithDefault(this, 3, false) as boolean;
+        }
+        set hasdoor(value: boolean) {
+            pb_1.Message.setField(this, 3, value);
+        }
+        get lineWidth() {
+            return pb_1.Message.getFieldWithDefault(this, 4, 0) as number;
+        }
+        set lineWidth(value: number) {
+            pb_1.Message.setField(this, 4, value);
+        }
+        get lineColor() {
+            return pb_1.Message.getFieldWithDefault(this, 5, "") as string;
+        }
+        set lineColor(value: string) {
+            pb_1.Message.setField(this, 5, value);
+        }
+        get lineColorDoor() {
+            return pb_1.Message.getFieldWithDefault(this, 6, "") as string;
+        }
+        set lineColorDoor(value: string) {
+            pb_1.Message.setField(this, 6, value);
+        }
+        get point() {
+            return pb_1.Message.getWrapperField(this, Point, 7) as Point;
+        }
+        set point(value: Point) {
+            pb_1.Message.setWrapperField(this, 7, value);
+        }
+        get has_point() {
+            return pb_1.Message.getField(this, 7) != null;
+        }
+        get width() {
+            return pb_1.Message.getFieldWithDefault(this, 8, 0) as number;
+        }
+        set width(value: number) {
+            pb_1.Message.setField(this, 8, value);
+        }
+        get height() {
+            return pb_1.Message.getFieldWithDefault(this, 9, 0) as number;
+        }
+        set height(value: number) {
+            pb_1.Message.setField(this, 9, value);
+        }
+        get orbitCode() {
+            return pb_1.Message.getFieldWithDefault(this, 10, []) as string[];
+        }
+        set orbitCode(value: string[]) {
+            pb_1.Message.setField(this, 10, value);
+        }
+        static fromObject(data: {
+            common?: ReturnType<typeof CommonInfo.prototype.toObject>;
+            code?: string;
+            hasdoor?: boolean;
+            lineWidth?: number;
+            lineColor?: string;
+            lineColorDoor?: string;
+            point?: ReturnType<typeof Point.prototype.toObject>;
+            width?: number;
+            height?: number;
+            orbitCode?: string[];
+        }): Platform {
+            const message = new Platform({});
+            if (data.common != null) {
+                message.common = CommonInfo.fromObject(data.common);
+            }
+            if (data.code != null) {
+                message.code = data.code;
+            }
+            if (data.hasdoor != null) {
+                message.hasdoor = data.hasdoor;
+            }
+            if (data.lineWidth != null) {
+                message.lineWidth = data.lineWidth;
+            }
+            if (data.lineColor != null) {
+                message.lineColor = data.lineColor;
+            }
+            if (data.lineColorDoor != null) {
+                message.lineColorDoor = data.lineColorDoor;
+            }
+            if (data.point != null) {
+                message.point = Point.fromObject(data.point);
+            }
+            if (data.width != null) {
+                message.width = data.width;
+            }
+            if (data.height != null) {
+                message.height = data.height;
+            }
+            if (data.orbitCode != null) {
+                message.orbitCode = data.orbitCode;
+            }
+            return message;
+        }
+        toObject() {
+            const data: {
+                common?: ReturnType<typeof CommonInfo.prototype.toObject>;
+                code?: string;
+                hasdoor?: boolean;
+                lineWidth?: number;
+                lineColor?: string;
+                lineColorDoor?: string;
+                point?: ReturnType<typeof Point.prototype.toObject>;
+                width?: number;
+                height?: number;
+                orbitCode?: string[];
+            } = {};
+            if (this.common != null) {
+                data.common = this.common.toObject();
+            }
+            if (this.code != null) {
+                data.code = this.code;
+            }
+            if (this.hasdoor != null) {
+                data.hasdoor = this.hasdoor;
+            }
+            if (this.lineWidth != null) {
+                data.lineWidth = this.lineWidth;
+            }
+            if (this.lineColor != null) {
+                data.lineColor = this.lineColor;
+            }
+            if (this.lineColorDoor != null) {
+                data.lineColorDoor = this.lineColorDoor;
+            }
+            if (this.point != null) {
+                data.point = this.point.toObject();
+            }
+            if (this.width != null) {
+                data.width = this.width;
+            }
+            if (this.height != null) {
+                data.height = this.height;
+            }
+            if (this.orbitCode != null) {
+                data.orbitCode = this.orbitCode;
+            }
+            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.hasdoor != false)
+                writer.writeBool(3, this.hasdoor);
+            if (this.lineWidth != 0)
+                writer.writeInt32(4, this.lineWidth);
+            if (this.lineColor.length)
+                writer.writeString(5, this.lineColor);
+            if (this.lineColorDoor.length)
+                writer.writeString(6, this.lineColorDoor);
+            if (this.has_point)
+                writer.writeMessage(7, this.point, () => this.point.serialize(writer));
+            if (this.width != 0)
+                writer.writeFloat(8, this.width);
+            if (this.height != 0)
+                writer.writeFloat(9, this.height);
+            if (this.orbitCode.length)
+                writer.writeRepeatedString(10, this.orbitCode);
+            if (!w)
+                return writer.getResultBuffer();
+        }
+        static deserialize(bytes: Uint8Array | pb_1.BinaryReader): Platform {
+            const reader = bytes instanceof pb_1.BinaryReader ? bytes : new pb_1.BinaryReader(bytes), message = new Platform();
+            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.hasdoor = reader.readBool();
+                        break;
+                    case 4:
+                        message.lineWidth = reader.readInt32();
+                        break;
+                    case 5:
+                        message.lineColor = reader.readString();
+                        break;
+                    case 6:
+                        message.lineColorDoor = reader.readString();
+                        break;
+                    case 7:
+                        reader.readMessage(message.point, () => message.point = Point.deserialize(reader));
+                        break;
+                    case 8:
+                        message.width = reader.readFloat();
+                        break;
+                    case 9:
+                        message.height = reader.readFloat();
+                        break;
+                    case 10:
+                        pb_1.Message.addToRepeatedField(message, 10, reader.readString());
+                        break;
+                    default: reader.skipField();
+                }
+            }
+            return message;
+        }
+        serializeBinary(): Uint8Array {
+            return this.serialize();
+        }
+        static deserializeBinary(bytes: Uint8Array): Platform {
+            return Platform.deserialize(bytes);
+        }
+    }
     export class IscsFan extends pb_1.Message {
         #one_of_decls: number[][] = [];
         constructor(data?: any[] | {

src/graphics/platform/Platform.ts

@@ -0,0 +1,102 @@
+import { Color, Graphics, IPointData, Rectangle } from 'pixi.js';
+import {
+  GraphicData,
+  JlGraphic,
+  JlGraphicTemplate,
+  getRectangleCenter,
+} from 'src/jlgraphic';
+
+export interface IPlatformData extends GraphicData {
+  get code(): string; // 编号
+  set code(v: string);
+  get hasdoor(): boolean; // 是否有屏蔽门
+  set hasdoor(v: boolean);
+  get lineWidth(): number; // 线宽
+  set lineWidth(v: number);
+  get lineColor(): string; // 站台线色
+  set lineColor(v: string);
+  get lineColorDoor(): string; // 屏蔽门线色
+  set lineColorDoor(v: string);
+  get point(): IPointData; // 位置坐标
+  set point(point: IPointData);
+  get width(): number; // 宽度
+  set width(v: number);
+  get height(): number; // 高度
+  set height(v: number);
+  clone(): IPlatformData;
+  copyFrom(data: IPlatformData): void;
+  eq(other: IPlatformData): boolean;
+}
+
+export class Platform extends JlGraphic {
+  static Type = 'Platform';
+
+  platformGraphic: Graphics;
+  doorGraphic: Graphics;
+  constructor() {
+    super(Platform.Type);
+    this.platformGraphic = new Graphics();
+    this.doorGraphic = new Graphics();
+    this.addChild(this.platformGraphic);
+    this.addChild(this.doorGraphic);
+  }
+
+  get datas(): IPlatformData {
+    return this.getDatas<IPlatformData>();
+  }
+  doRepaint(): void {
+    //屏蔽门
+    const doorGraphic = this.doorGraphic;
+    doorGraphic.clear();
+    if (this.datas.hasdoor) {
+      doorGraphic.clear();
+      doorGraphic.lineStyle(
+        this.datas.lineWidth,
+        new Color(this.datas.lineColorDoor)
+      );
+      const width = this.datas.width;
+      const height = this.datas.height;
+      doorGraphic.moveTo(
+        -width / 2 - this.datas.lineWidth / 2,
+        -height / 2 - 10
+      );
+      doorGraphic.lineTo(
+        width / 2 + this.datas.lineWidth / 2,
+        -height / 2 - 10
+      );
+    }
+    const platformGraphic = this.platformGraphic;
+    platformGraphic.clear();
+    platformGraphic.lineStyle(
+      this.datas.lineWidth,
+      new Color(this.datas.lineColor)
+    );
+    platformGraphic.beginFill(this.datas.lineColor, 1);
+    platformGraphic.drawRect(0, 0, this.datas.width, this.datas.height);
+    platformGraphic.endFill;
+    const rect = new Rectangle(0, 0, this.datas.width, this.datas.height);
+    platformGraphic.pivot = getRectangleCenter(rect);
+    this.position.set(this.datas.point.x, this.datas.point.y);
+  }
+}
+
+export class PlatformTemplate extends JlGraphicTemplate<Platform> {
+  hasdoor: boolean;
+  lineWidth: number;
+  lineColor: string;
+  lineColorDoor: string;
+  width: number;
+  height: number;
+  constructor() {
+    super(Platform.Type);
+    this.lineWidth = 2;
+    this.lineColor = '#000000';
+    this.lineColorDoor = '0x008000';
+    this.hasdoor = true;
+    this.width = 100;
+    this.height = 30;
+  }
+  new(): Platform {
+    return new Platform();
+  }
+}

src/graphics/platform/PlatformDrawAssistant.ts

@@ -0,0 +1,113 @@
+import {
+  Color,
+  FederatedPointerEvent,
+  Graphics,
+  Point,
+  Rectangle,
+} from 'pixi.js';
+import {
+  GraphicDrawAssistant,
+  JlDrawApp,
+  KeyListener,
+  getRectangleCenter,
+} from 'src/jlgraphic';
+
+import { IPlatformData, Platform, PlatformTemplate } from './Platform';
+
+export interface ILinkDrawOptions {
+  newData: () => IPlatformData;
+}
+
+export class PlatformDraw extends GraphicDrawAssistant<
+  PlatformTemplate,
+  IPlatformData
+> {
+  point: Point = new Point(0, 0);
+  platformGraphic: Graphics = new Graphics();
+  doorGraphic: Graphics = new Graphics();
+
+  // 快捷绘制
+  keypListener: KeyListener = new KeyListener({
+    value: 'KeyP',
+    global: true,
+    onPress: () => {
+      this.graphicTemplate.hasdoor = true;
+    },
+  });
+
+  constructor(app: JlDrawApp, createData: () => IPlatformData) {
+    super(
+      app,
+      new PlatformTemplate(),
+      createData,
+      Platform.Type,
+      '站台Platform'
+    );
+    this.container.addChild(this.platformGraphic);
+    this.container.addChild(this.doorGraphic);
+    this.graphicTemplate.hasdoor = true;
+  }
+
+  bind(): void {
+    super.bind();
+    this.app.addKeyboardListener(this.keypListener);
+  }
+  unbind(): void {
+    super.unbind();
+    this.app.removeKeyboardListener(this.keypListener);
+  }
+
+  clearCache(): void {
+    this.platformGraphic.clear();
+    this.doorGraphic.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 template = this.graphicTemplate;
+    //屏蔽门
+    if (template.hasdoor) {
+      const doorGraphic = this.doorGraphic;
+      doorGraphic.clear();
+      doorGraphic.lineStyle(
+        template.lineWidth,
+        new Color(template.lineColorDoor)
+      );
+      const width = template.width;
+      const height = template.height;
+      doorGraphic.moveTo(-width / 2 - template.lineWidth / 2, -height / 2 - 10);
+      doorGraphic.lineTo(width / 2 + template.lineWidth / 2, -height / 2 - 10);
+    }
+
+    //站台
+    const platformGraphic = this.platformGraphic;
+    platformGraphic.clear();
+    this.point.set(p.x, p.y);
+    const rect = new Rectangle(0, 0, template.width, template.height);
+    platformGraphic.pivot = getRectangleCenter(rect);
+    platformGraphic.lineStyle(template.lineWidth, template.lineColor);
+    platformGraphic.beginFill(template.lineColor, 1);
+    platformGraphic.drawRect(0, 0, template.width, template.height);
+    platformGraphic.endFill;
+    platformGraphic.position.set(this.point.x, this.point.y);
+  }
+  prepareData(data: IPlatformData): boolean {
+    const template = this.graphicTemplate;
+    data.hasdoor = template.hasdoor;
+    data.point = this.point;
+    data.lineWidth = template.lineWidth;
+    data.lineColor = template.lineColor;
+    data.lineColorDoor = template.lineColorDoor;
+    data.width = template.width;
+    data.height = template.height;
+    return true;
+  }
+}