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

src/components/draw-app/DrawProperties.vue

@@ -10,12 +10,18 @@
         <template v-if="drawStore.drawGraphicType === Link.Type">
           <link-template></link-template>
         </template>
+        <template v-if="drawStore.drawGraphicType === Rect.Type">
+          <rect-template></rect-template>
+        </template>
         <template v-if="drawStore.drawGraphicType === Platform.Type">
           <platform-template></platform-template>
         </template>
         <template v-if="drawStore.drawGraphicType === Station.Type">
           <station-template></station-template>
         </template>
+        <template v-if="drawStore.drawGraphicType === Train.Type">
+          <TrainProperty></TrainProperty>
+        </template>
       </q-card-section>
     </q-card>
   </div>
@@ -36,12 +42,18 @@
           <link-property
             v-if="drawStore.selectedGraphicType === Link.Type"
           ></link-property>
+          <rect-property
+            v-if="drawStore.selectedGraphicType === Rect.Type"
+          ></rect-property>
           <platform-property
             v-if="drawStore.selectedGraphicType === Platform.Type"
           ></platform-property>
           <station-property
             v-if="drawStore.selectedGraphicType === Station.Type"
           ></station-property>
+          <train-property
+            v-if="drawStore.selectedGraphicType === Train.Type"
+          ></train-property>
           <iscs-fan-property
             v-else-if="drawStore.selectedGraphicType === IscsFan.Type"
           ></iscs-fan-property>
@@ -56,17 +68,22 @@
 
 <script setup lang="ts">
 import LinkTemplate from './templates/LinkTemplate.vue';
+import RectTemplate from './templates/RectTemplate.vue';
 import PlatformTemplate from './templates/PlatformTemplate.vue';
 import StationTemplate from './templates/StationTemplate.vue';
 import CanvasProperty from './properties/CanvasProperty.vue';
 import LinkProperty from './properties/LinkProperty.vue';
+import RectProperty from './properties/RectProperty.vue';
 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';
 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';

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

@@ -0,0 +1,74 @@
+<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-form>
+</template>
+
+<script setup lang="ts">
+import { RectData } from 'src/examples/app/graphics/RectInteraction';
+import { Rect } from 'src/graphics/rect/Rect';
+import { useDrawStore } from 'src/stores/draw-store';
+import { onMounted, reactive, watch } from 'vue';
+
+const drawStore = useDrawStore();
+const stationModel = reactive(new RectData());
+
+drawStore.$subscribe;
+watch(
+  () => drawStore.selectedGraphic,
+  (val) => {
+    if (val && val.type == Rect.Type) {
+      stationModel.copyFrom(val.saveData() as RectData);
+    }
+  }
+);
+
+onMounted(() => {
+  const station = drawStore.selectedGraphic as Rect;
+
+  if (station) {
+    stationModel.copyFrom(station.saveData());
+  }
+});
+
+function onUpdate() {
+  const station = drawStore.selectedGraphic as Rect;
+  if (station) {
+    drawStore.getDrawApp().updateGraphicAndRecord(station, stationModel);
+  }
+}
+</script>

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

@@ -41,6 +41,114 @@
         </q-icon>
       </template>
     </q-input>
+    <q-select
+      outlined
+      @blur="onUpdate"
+      v-model="hasCircle"
+      :options="optionsCircle"
+      label="是否有圆圈"
+    />
+    <div v-if="stationModel.hasCircle">
+      <q-item-label header>位置</q-item-label>
+      <q-item>
+        <q-item-section no-wrap class="q-gutter-sm column">
+          <div class="row">
+            <q-input
+              outlined
+              @blur="onUpdate"
+              label="x"
+              v-model.number="stationModel.circlePoint.x"
+              type="number"
+              step="any"
+              class="col"
+            />
+            <q-input
+              outlined
+              @blur="onUpdate"
+              label="y"
+              v-model.number="stationModel.circlePoint.y"
+              type="number"
+              step="any"
+              class="col"
+            />
+          </div>
+        </q-item-section>
+      </q-item>
+      <q-input
+        outlined
+        v-model.number="stationModel.radius"
+        type="number"
+        @blur="onUpdate"
+        label="半径"
+        lazy-rules
+        :rules="[(val) => (val && val > 0) || '半径大小必须大于0']"
+      />
+      <q-input
+        outlined
+        v-model="stationModel.fillColor"
+        @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.fillColor"
+                @change="
+                  (val) => {
+                    stationModel.fillColor = val;
+                    onUpdate();
+                  }
+                "
+              />
+            </q-popup-proxy>
+          </q-icon>
+        </template>
+      </q-input>
+      <q-input
+        outlined
+        v-model.number="stationModel.borderWidth"
+        type="number"
+        @blur="onUpdate"
+        label="边框宽度"
+        lazy-rules
+        :rules="[(val) => (val && val > 0) || '画布宽必须大于0']"
+      />
+      <q-input
+        outlined
+        v-model="stationModel.borderColor"
+        @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.borderColor"
+                @change="
+                  (val) => {
+                    stationModel.borderColor = val;
+                    onUpdate();
+                  }
+                "
+              />
+            </q-popup-proxy>
+          </q-icon>
+        </template>
+      </q-input>
+    </div>
   </q-form>
 </template>
 
@@ -48,10 +156,20 @@
 import { StationData } from 'src/examples/app/graphics/StationInteraction';
 import { Station } from 'src/graphics/station/Station';
 import { useDrawStore } from 'src/stores/draw-store';
-import { onMounted, reactive, watch } from 'vue';
+import { onMounted, reactive, ref, watch } from 'vue';
 
 const drawStore = useDrawStore();
 const stationModel = reactive(new StationData());
+const hasCircle = ref('是');
+const optionsCircle = ['是', '否'];
+enum showSelect {
+  是 = 'true',
+  否 = 'false',
+}
+enum showSelectData {
+  true = '是',
+  false = '否',
+}
 
 drawStore.$subscribe;
 watch(
@@ -59,6 +177,7 @@ watch(
   (val) => {
     if (val && val.type == Station.Type) {
       stationModel.copyFrom(val.saveData() as StationData);
+      hasCircle.value = (showSelectData as never)[stationModel.hasCircle + ''];
     }
   }
 );
@@ -67,10 +186,12 @@ onMounted(() => {
   const station = drawStore.selectedGraphic as Station;
   if (station) {
     stationModel.copyFrom(station.saveData());
+    hasCircle.value = (showSelectData as never)[stationModel.hasCircle + ''];
   }
 });
 
 function onUpdate() {
+  stationModel.hasCircle = JSON.parse((showSelect as never)[hasCircle.value]);
   const station = drawStore.selectedGraphic as Station;
   if (station) {
     drawStore.getDrawApp().updateGraphicAndRecord(station, stationModel);

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

@@ -0,0 +1,198 @@
+<template>
+  <q-form>
+    <q-input outlined readonly v-model="trainModel.id" label="id" hint="" />
+    <q-input
+      outlined
+      v-model="trainModel.code"
+      label="车号"
+      hint=""
+      @blur="onUpdate"
+    />
+    <q-input
+      outlined
+      v-model="trainModel.codeColor"
+      @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="trainModel.codeColor"
+              @change="
+                (val) => {
+                  trainModel.codeColor = val;
+                  onUpdate();
+                }
+              "
+            />
+          </q-popup-proxy>
+        </q-icon>
+      </template>
+    </q-input>
+    <q-input
+      outlined
+      v-model="trainModel.headColor"
+      @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="trainModel.headColor"
+              @change="
+                (val) => {
+                  trainModel.headColor = val;
+                  onUpdate();
+                }
+              "
+            />
+          </q-popup-proxy>
+        </q-icon>
+      </template>
+    </q-input>
+    <q-input
+      outlined
+      v-model.number="trainModel.codeFontSize"
+      type="number"
+      @blur="onUpdate"
+      label="字体大小"
+      lazy-rules
+      :rules="[(val) => (val && val > 0) || '字体大小必须大于0']"
+    />
+    <q-select
+      outlined
+      @blur="onUpdate"
+      v-model="hasBorder"
+      :options="optionsDoor"
+      label="是否有边框"
+    />
+    <q-input
+      outlined
+      v-model.number="trainModel.borderWidth"
+      type="number"
+      @blur="onUpdate"
+      label="边框线宽"
+      lazy-rules
+      :rules="[(val) => (val && val > 0) || '边框线宽必须大于0']"
+    />
+    <q-input
+      outlined
+      v-model="trainModel.borderColor"
+      @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="trainModel.borderColor"
+              @change="
+                (val) => {
+                  trainModel.borderColor = val;
+                  onUpdate();
+                }
+              "
+            />
+          </q-popup-proxy>
+        </q-icon>
+      </template>
+    </q-input>
+    <q-input
+      outlined
+      v-model="trainModel.bodyColor"
+      @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="trainModel.bodyColor"
+              @change="
+                (val) => {
+                  trainModel.bodyColor = val;
+                  onUpdate();
+                }
+              "
+            />
+          </q-popup-proxy>
+        </q-icon>
+      </template>
+    </q-input>
+    <q-select
+      outlined
+      @blur="onUpdate"
+      v-model="trainDirection"
+      :options="optionsDirection"
+      label="行驶方向"
+    />
+  </q-form>
+</template>
+
+<script setup lang="ts">
+import { TrainData } from 'src/examples/app/graphics/TrainInteraction';
+import { Train } from 'src/graphics/train/Train';
+import { useDrawStore } from 'src/stores/draw-store';
+import { onMounted, reactive, ref, watch } from 'vue';
+
+const drawStore = useDrawStore();
+const trainModel = reactive(new TrainData());
+const hasBorder = ref('是');
+const optionsDoor = ['是', '否'];
+const trainDirection = ref('向左');
+const optionsDirection = ['向左', '向右'];
+enum showSelect {
+  是 = 'true',
+  否 = 'false',
+  向左 = 'left',
+  向右 = 'right',
+}
+enum showSelectData {
+  true = '是',
+  false = '否',
+  left = '向左',
+  right = '向右',
+}
+
+drawStore.$subscribe;
+watch(
+  () => drawStore.selectedGraphic,
+  (val) => {
+    if (val && val.type == Train.Type) {
+      trainModel.copyFrom(val.saveData() as TrainData);
+      hasBorder.value = (showSelectData as never)[trainModel.hasBorder + ''];
+      trainDirection.value = (showSelectData as never)[
+        trainModel.trainDirection
+      ];
+    }
+  }
+);
+
+onMounted(() => {
+  const train = drawStore.selectedGraphic as Train;
+  if (train) {
+    trainModel.copyFrom(train.saveData());
+    hasBorder.value = (showSelectData as never)[trainModel.hasBorder + ''];
+    trainDirection.value = (showSelectData as never)[trainModel.trainDirection];
+  }
+});
+
+function onUpdate() {
+  trainModel.hasBorder = JSON.parse((showSelect as never)[hasBorder.value]);
+  trainModel.trainDirection = (showSelect as never)[trainDirection.value];
+  const train = drawStore.selectedGraphic as Train;
+  if (train) {
+    drawStore.getDrawApp().updateGraphicAndRecord(train, trainModel);
+  }
+}
+</script>

src/components/draw-app/templates/RectTemplate.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/components/draw-app/templates/TrainTemplate.vue

@@ -0,0 +1,69 @@
+<template>
+  <q-form>
+    <q-input
+      outlined
+      v-model.number="template.codeFontSize"
+      type="number"
+      @blur="onUpdate"
+      label="字体大小 *"
+      lazy-rules
+      :rules="[(val) => (val && val > 0) || '字体大小必须大于0']"
+    />
+    <q-input
+      outlined
+      v-model="template.headColor"
+      @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.headColor"
+              @change="
+                (val) => {
+                  template.headColor = val;
+                  onUpdate();
+                }
+              "
+            />
+          </q-popup-proxy>
+        </q-icon>
+      </template>
+    </q-input>
+  </q-form>
+</template>
+
+<script setup lang="ts">
+import { TrainTemplate } from 'src/graphics/train/Train';
+import { useDrawStore } from 'src/stores/draw-store';
+import { onMounted, reactive } from 'vue';
+
+const drawStore = useDrawStore();
+const template = reactive({
+  codeFontSize: 22,
+  headColor: '#00FF00',
+});
+
+onMounted(() => {
+  const type = drawStore.drawGraphicType;
+  if (type) {
+    const gt = drawStore.drawGraphicTemplate;
+    if (gt) {
+      const lt = gt as TrainTemplate;
+      template.codeFontSize = lt.codeFontSize;
+      template.headColor = lt.headColor;
+    }
+  }
+});
+
+function onUpdate() {
+  const gt = drawStore.drawGraphicTemplate as TrainTemplate;
+  if (gt) {
+    gt.codeFontSize = template.codeFontSize;
+    gt.headColor = template.headColor;
+  }
+}
+</script>

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

@@ -8,7 +8,9 @@ message RtssGraphicStorage {
   repeated IscsFan iscsFans = 3;
   repeated Platform Platforms = 4;
   repeated Station stations = 5;
-  repeated Signal signals = 6;
+  repeated Rect Rects = 6;
+  repeated Train train = 7;
+  repeated Signal signals = 8;
 }
 
 message Canvas {
@@ -66,6 +68,17 @@ message Link {
   repeated Point points = 7; // 点坐标列表
 }
 
+message Rect {
+  CommonInfo common = 1;
+  string code = 2;
+  int32 lineWidth = 3; // 线宽
+  string lineColor = 4; // 线色
+  Point point = 5; // 位置坐标
+  float width = 6;//宽度
+  float height = 7; //高度
+  repeated Point points = 8; // 点坐标列表
+}
+
 message Platform {
   CommonInfo common = 1;
   string code = 2;
@@ -83,10 +96,29 @@ message Platform {
 message Station {
   CommonInfo common = 1;
   string code = 2;
-  string codeColor = 3; // 车站字体颜色
+  bool hasCircle = 3; // 是否有圆圈--线网图
-  int32 codeFontSize = 4; // 车站字体大小
+  int32 radius = 4; // 半径
-  Point point = 5; // 位置坐标
+  int32 borderWidth = 5; // 边框线宽
+  string borderColor = 6; // 边框颜色
+  string fillColor = 7; // 圆填充颜色
+  string codeColor = 8; // 车站字体颜色
+  int32 codeFontSize = 9; // 车站字体大小
+  Point point = 10; // 位置坐标
+  Point circlePoint = 11; // 位置坐标
+}
 
+message Train {
+  CommonInfo common = 1;
+  string code = 2;
+  string codeColor = 3; // 车号颜色
+  int32 codeFontSize = 4; // 车号字体大小
+  Point point = 5; // 位置坐标
+  string trainDirection = 6; // 行驶方向
+  bool hasBorder = 7; // 是否有边框
+  int32 borderWidth = 8; // 边框线宽
+  string borderColor = 9; // 边框颜色
+  string headColor = 10; // 箭头颜色
+  string bodyColor = 11; // 背景色
 }
 
 message IscsFan {

src/examples/app/graphics/RectInteraction.ts

@@ -0,0 +1,77 @@
+import * as pb_1 from 'google-protobuf';
+import { IPointData } from 'pixi.js';
+import { IRectData } from 'src/graphics/rect/Rect';
+import { graphicData } from '../protos/draw_data_storage';
+import { GraphicDataBase } from './GraphicDataBase';
+
+export class RectData extends GraphicDataBase implements IRectData {
+  constructor(data?: graphicData.Rect) {
+    let rect;
+    if (!data) {
+      rect = new graphicData.Rect({
+        common: GraphicDataBase.defaultCommonInfo(),
+      });
+    } else {
+      rect = data;
+    }
+    super(rect);
+  }
+
+  public get data(): graphicData.Rect {
+    return this.getData<graphicData.Rect>();
+  }
+
+  get code(): string {
+    return this.data.code;
+  }
+  set code(v: string) {
+    this.data.code = 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 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;
+  }
+  get points(): IPointData[] {
+    return this.data.points;
+  }
+  set points(points: IPointData[]) {
+    this.data.points = points.map(
+      (p) => new graphicData.Point({ x: p.x, y: p.y })
+    );
+  }
+  clone(): RectData {
+    return new RectData(this.data.cloneMessage());
+  }
+  copyFrom(data: RectData): void {
+    pb_1.Message.copyInto(data.data, this.data);
+  }
+  eq(other: RectData): boolean {
+    return pb_1.Message.equals(this.data, other.data);
+  }
+}

src/examples/app/graphics/StationInteraction.ts

@@ -26,6 +26,36 @@ export class StationData extends GraphicDataBase implements IStationData {
   set code(v: string) {
     this.data.code = v;
   }
+  get hasCircle(): boolean {
+    return this.data.hasCircle;
+  }
+  set hasCircle(v: boolean) {
+    this.data.hasCircle = v;
+  }
+  get radius(): number {
+    return this.data.radius;
+  }
+  set radius(v: number) {
+    this.data.radius = v;
+  }
+  get borderWidth(): number {
+    return this.data.borderWidth;
+  }
+  set borderWidth(v: number) {
+    this.data.borderWidth = v;
+  }
+  get borderColor(): string {
+    return this.data.borderColor;
+  }
+  set borderColor(v: string) {
+    this.data.borderColor = v;
+  }
+  get fillColor(): string {
+    return this.data.fillColor;
+  }
+  set fillColor(v: string) {
+    this.data.fillColor = v;
+  }
   get codeColor(): string {
     return this.data.codeColor;
   }
@@ -44,6 +74,12 @@ export class StationData extends GraphicDataBase implements IStationData {
   set point(point: IPointData) {
     this.data.point = new graphicData.Point({ x: point.x, y: point.y });
   }
+  get circlePoint(): IPointData {
+    return this.data.circlePoint;
+  }
+  set circlePoint(point: IPointData) {
+    this.data.circlePoint = new graphicData.Point({ x: point.x, y: point.y });
+  }
   clone(): StationData {
     return new StationData(this.data.cloneMessage());
   }

src/examples/app/graphics/TrainInteraction.ts

@@ -0,0 +1,92 @@
+import * as pb_1 from 'google-protobuf';
+import { IPointData } from 'pixi.js';
+import { ITrainData } from 'src/graphics/train/Train';
+import { graphicData } from '../protos/draw_data_storage';
+import { GraphicDataBase } from './GraphicDataBase';
+
+export class TrainData extends GraphicDataBase implements ITrainData {
+  constructor(data?: graphicData.Train) {
+    let train;
+    if (!data) {
+      train = new graphicData.Train({
+        common: GraphicDataBase.defaultCommonInfo(),
+      });
+    } else {
+      train = data;
+    }
+    super(train);
+  }
+
+  public get data(): graphicData.Train {
+    return this.getData<graphicData.Train>();
+  }
+  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 trainDirection(): string {
+    return this.data.trainDirection;
+  }
+  set trainDirection(v: string) {
+    this.data.trainDirection = v;
+  }
+  get hasBorder(): boolean {
+    return this.data.hasBorder;
+  }
+  set hasBorder(v: boolean) {
+    this.data.hasBorder = v;
+  }
+  get borderWidth(): number {
+    return this.data.borderWidth;
+  }
+  set borderWidth(v: number) {
+    this.data.borderWidth = v;
+  }
+  get borderColor(): string {
+    return this.data.borderColor;
+  }
+  set borderColor(v: string) {
+    this.data.borderColor = v;
+  }
+  get headColor(): string {
+    return this.data.headColor;
+  }
+  set headColor(v: string) {
+    this.data.headColor = v;
+  }
+  get bodyColor(): string {
+    return this.data.bodyColor;
+  }
+  set bodyColor(v: string) {
+    this.data.bodyColor = v;
+  }
+  get point(): IPointData {
+    return this.data.point;
+  }
+  set point(point: IPointData) {
+    this.data.point = new graphicData.Point({ x: point.x, y: point.y });
+  }
+  clone(): TrainData {
+    return new TrainData(this.data.cloneMessage());
+  }
+  copyFrom(data: TrainData): void {
+    pb_1.Message.copyInto(data.data, this.data);
+  }
+  eq(other: TrainData): boolean {
+    return pb_1.Message.equals(this.data, other.data);
+  }
+}

src/examples/app/index.ts

@@ -4,12 +4,16 @@ 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 { Rect } from 'src/graphics/rect/Rect';
+import { RectDraw } from 'src/graphics/rect/RectDrawAssistant';
 import { Platform } from 'src/graphics/platform/Platform';
 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,
   GraphicApp,
@@ -22,9 +26,11 @@ 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 { 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';
 
 export function fromStoragePoint(p: graphicData.Point): Point {
@@ -100,6 +106,9 @@ export function initDrawApp(dom: HTMLElement): JlDrawApp {
       new LinkDraw(app, () => {
         return new LinkData();
       }),
+      new RectDraw(app, () => {
+        return new RectData();
+      }),
       new IscsFanDraw(app, () => {
         return new IscsFanData();
       }),
@@ -112,6 +121,9 @@ export function initDrawApp(dom: HTMLElement): JlDrawApp {
       new SignalDraw(app, () => {
         return new SignalData();
       }),
+      new TrainDraw(app, () => {
+        return new TrainData();
+      }),
     ],
   });
 
@@ -141,6 +153,14 @@ export function initDrawApp(dom: HTMLElement): JlDrawApp {
       },
     })
   );
+  app.addKeyboardListener(
+    new KeyListener({
+      value: 'KeyR',
+      onPress: () => {
+        app.interactionPlugin(Rect.Type).resume();
+      },
+    })
+  );
   app.addKeyboardListener(
     new KeyListener({
       value: 'KeyF',
@@ -173,6 +193,14 @@ export function initDrawApp(dom: HTMLElement): JlDrawApp {
       },
     })
   );
+  app.addKeyboardListener(
+    new KeyListener({
+      value: 'KeyT',
+      onPress: () => {
+        app.interactionPlugin(Train.Type).resume();
+      },
+    })
+  );
   app.addKeyboardListener(
     new KeyListener({
       value: '1',
@@ -211,6 +239,9 @@ export function saveDrawDatas(app: JlDrawApp) {
     if (Link.Type === g.type) {
       const linkData = (g as Link).saveData();
       storage.links.push((linkData as LinkData).data);
+    } else if (Rect.Type === g.type) {
+      const rectData = (g as Rect).saveData();
+      storage.Rects.push((rectData as RectData).data);
     } else if (IscsFan.Type === g.type) {
       const IscsFanData = (g as IscsFan).saveData();
       storage.iscsFans.push((IscsFanData as IscsFanData).data);
@@ -223,6 +254,9 @@ export function saveDrawDatas(app: JlDrawApp) {
     } 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);
     }
   });
   const base64 = fromUint8Array(storage.serialize());
@@ -244,6 +278,9 @@ export function loadDrawDatas(app: GraphicApp) {
     storage.links.forEach((link) => {
       datas.push(new LinkData(link));
     });
+    storage.Rects.forEach((rect) => {
+      datas.push(new RectData(rect));
+    });
     storage.iscsFans.forEach((fan) => {
       datas.push(new IscsFanData(fan));
     });
@@ -253,8 +290,11 @@ export function loadDrawDatas(app: GraphicApp) {
     storage.stations.forEach((station) => {
       datas.push(new StationData(station));
     });
-    storage.signals.forEach((signal) => {
+    storage.stations.forEach((signal) => {
-      datas.push(new SignalData(signal));
+      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

@@ -13,10 +13,12 @@ export namespace graphicData {
             iscsFans?: IscsFan[];
             Platforms?: Platform[];
             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], 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;
@@ -33,6 +35,12 @@ export namespace graphicData {
                 if ("stations" in data && data.stations != undefined) {
                     this.stations = data.stations;
                 }
+                if ("Rects" in data && data.Rects != undefined) {
+                    this.Rects = data.Rects;
+                }
+                if ("train" in data && data.train != undefined) {
+                    this.train = data.train;
+                }
                 if ("signals" in data && data.signals != undefined) {
                     this.signals = data.signals;
                 }
@@ -71,11 +79,23 @@ export namespace graphicData {
         set stations(value: Station[]) {
             pb_1.Message.setRepeatedWrapperField(this, 5, value);
         }
+        get Rects() {
+            return pb_1.Message.getRepeatedWrapperField(this, Rect, 6) as Rect[];
+        }
+        set Rects(value: Rect[]) {
+            pb_1.Message.setRepeatedWrapperField(this, 6, value);
+        }
+        get train() {
+            return pb_1.Message.getRepeatedWrapperField(this, Train, 7) as Train[];
+        }
+        set train(value: Train[]) {
+            pb_1.Message.setRepeatedWrapperField(this, 7, value);
+        }
         get signals() {
-            return pb_1.Message.getRepeatedWrapperField(this, Signal, 6) as Signal[];
+            return pb_1.Message.getRepeatedWrapperField(this, Signal, 8) as Signal[];
         }
         set signals(value: Signal[]) {
-            pb_1.Message.setRepeatedWrapperField(this, 6, value);
+            pb_1.Message.setRepeatedWrapperField(this, 8, value);
         }
         static fromObject(data: {
             canvas?: ReturnType<typeof Canvas.prototype.toObject>;
@@ -83,6 +103,8 @@ export namespace graphicData {
             iscsFans?: ReturnType<typeof IscsFan.prototype.toObject>[];
             Platforms?: ReturnType<typeof Platform.prototype.toObject>[];
             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({});
@@ -101,6 +123,12 @@ export namespace graphicData {
             if (data.stations != null) {
                 message.stations = data.stations.map(item => Station.fromObject(item));
             }
+            if (data.Rects != null) {
+                message.Rects = data.Rects.map(item => Rect.fromObject(item));
+            }
+            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));
             }
@@ -113,6 +141,8 @@ export namespace graphicData {
                 iscsFans?: ReturnType<typeof IscsFan.prototype.toObject>[];
                 Platforms?: ReturnType<typeof Platform.prototype.toObject>[];
                 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) {
@@ -130,6 +160,12 @@ export namespace graphicData {
             if (this.stations != null) {
                 data.stations = this.stations.map((item: Station) => item.toObject());
             }
+            if (this.Rects != null) {
+                data.Rects = this.Rects.map((item: Rect) => item.toObject());
+            }
+            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());
             }
@@ -149,8 +185,12 @@ export namespace graphicData {
                 writer.writeRepeatedMessage(4, this.Platforms, (item: Platform) => item.serialize(writer));
             if (this.stations.length)
                 writer.writeRepeatedMessage(5, this.stations, (item: Station) => item.serialize(writer));
+            if (this.Rects.length)
+                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(6, this.signals, (item: Signal) => item.serialize(writer));
+                writer.writeRepeatedMessage(8, this.signals, (item: Signal) => item.serialize(writer));
             if (!w)
                 return writer.getResultBuffer();
         }
@@ -176,7 +216,13 @@ export namespace graphicData {
                         reader.readMessage(message.stations, () => pb_1.Message.addToRepeatedWrapperField(message, 5, Station.deserialize(reader), Station));
                         break;
                     case 6:
-                        reader.readMessage(message.signals, () => pb_1.Message.addToRepeatedWrapperField(message, 6, Signal.deserialize(reader), Signal));
+                        reader.readMessage(message.Rects, () => pb_1.Message.addToRepeatedWrapperField(message, 6, Rect.deserialize(reader), Rect));
+                        break;
+                    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();
                 }
@@ -1004,6 +1050,240 @@ export namespace graphicData {
             return Link.deserialize(bytes);
         }
     }
+    export class Rect extends pb_1.Message {
+        #one_of_decls: number[][] = [];
+        constructor(data?: any[] | {
+            common?: CommonInfo;
+            code?: string;
+            lineWidth?: number;
+            lineColor?: string;
+            point?: Point;
+            width?: number;
+            height?: number;
+            points?: Point[];
+        }) {
+            super();
+            pb_1.Message.initialize(this, Array.isArray(data) ? data : [], 0, -1, [8], 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 ("lineWidth" in data && data.lineWidth != undefined) {
+                    this.lineWidth = data.lineWidth;
+                }
+                if ("lineColor" in data && data.lineColor != undefined) {
+                    this.lineColor = data.lineColor;
+                }
+                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 ("points" in data && data.points != undefined) {
+                    this.points = data.points;
+                }
+            }
+        }
+        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 lineWidth() {
+            return pb_1.Message.getFieldWithDefault(this, 3, 0) as number;
+        }
+        set lineWidth(value: number) {
+            pb_1.Message.setField(this, 3, value);
+        }
+        get lineColor() {
+            return pb_1.Message.getFieldWithDefault(this, 4, "") as string;
+        }
+        set lineColor(value: string) {
+            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 width() {
+            return pb_1.Message.getFieldWithDefault(this, 6, 0) as number;
+        }
+        set width(value: number) {
+            pb_1.Message.setField(this, 6, value);
+        }
+        get height() {
+            return pb_1.Message.getFieldWithDefault(this, 7, 0) as number;
+        }
+        set height(value: number) {
+            pb_1.Message.setField(this, 7, value);
+        }
+        get points() {
+            return pb_1.Message.getRepeatedWrapperField(this, Point, 8) as Point[];
+        }
+        set points(value: Point[]) {
+            pb_1.Message.setRepeatedWrapperField(this, 8, value);
+        }
+        static fromObject(data: {
+            common?: ReturnType<typeof CommonInfo.prototype.toObject>;
+            code?: string;
+            lineWidth?: number;
+            lineColor?: string;
+            point?: ReturnType<typeof Point.prototype.toObject>;
+            width?: number;
+            height?: number;
+            points?: ReturnType<typeof Point.prototype.toObject>[];
+        }): Rect {
+            const message = new Rect({});
+            if (data.common != null) {
+                message.common = CommonInfo.fromObject(data.common);
+            }
+            if (data.code != null) {
+                message.code = data.code;
+            }
+            if (data.lineWidth != null) {
+                message.lineWidth = data.lineWidth;
+            }
+            if (data.lineColor != null) {
+                message.lineColor = data.lineColor;
+            }
+            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.points != null) {
+                message.points = data.points.map(item => Point.fromObject(item));
+            }
+            return message;
+        }
+        toObject() {
+            const data: {
+                common?: ReturnType<typeof CommonInfo.prototype.toObject>;
+                code?: string;
+                lineWidth?: number;
+                lineColor?: string;
+                point?: ReturnType<typeof Point.prototype.toObject>;
+                width?: number;
+                height?: number;
+                points?: ReturnType<typeof Point.prototype.toObject>[];
+            } = {};
+            if (this.common != null) {
+                data.common = this.common.toObject();
+            }
+            if (this.code != null) {
+                data.code = this.code;
+            }
+            if (this.lineWidth != null) {
+                data.lineWidth = this.lineWidth;
+            }
+            if (this.lineColor != null) {
+                data.lineColor = this.lineColor;
+            }
+            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.points != null) {
+                data.points = this.points.map((item: Point) => item.toObject());
+            }
+            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.lineWidth != 0)
+                writer.writeInt32(3, this.lineWidth);
+            if (this.lineColor.length)
+                writer.writeString(4, this.lineColor);
+            if (this.has_point)
+                writer.writeMessage(5, this.point, () => this.point.serialize(writer));
+            if (this.width != 0)
+                writer.writeFloat(6, this.width);
+            if (this.height != 0)
+                writer.writeFloat(7, this.height);
+            if (this.points.length)
+                writer.writeRepeatedMessage(8, this.points, (item: Point) => item.serialize(writer));
+            if (!w)
+                return writer.getResultBuffer();
+        }
+        static deserialize(bytes: Uint8Array | pb_1.BinaryReader): Rect {
+            const reader = bytes instanceof pb_1.BinaryReader ? bytes : new pb_1.BinaryReader(bytes), message = new Rect();
+            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.lineWidth = reader.readInt32();
+                        break;
+                    case 4:
+                        message.lineColor = reader.readString();
+                        break;
+                    case 5:
+                        reader.readMessage(message.point, () => message.point = Point.deserialize(reader));
+                        break;
+                    case 6:
+                        message.width = reader.readFloat();
+                        break;
+                    case 7:
+                        message.height = reader.readFloat();
+                        break;
+                    case 8:
+                        reader.readMessage(message.points, () => pb_1.Message.addToRepeatedWrapperField(message, 8, Point.deserialize(reader), Point));
+                        break;
+                    default: reader.skipField();
+                }
+            }
+            return message;
+        }
+        serializeBinary(): Uint8Array {
+            return this.serialize();
+        }
+        static deserializeBinary(bytes: Uint8Array): Rect {
+            return Rect.deserialize(bytes);
+        }
+    }
     export class Platform extends pb_1.Message {
         #one_of_decls: number[][] = [];
         constructor(data?: any[] | {
@@ -1312,9 +1592,321 @@ export namespace graphicData {
         constructor(data?: any[] | {
             common?: CommonInfo;
             code?: string;
+            hasCircle?: boolean;
+            radius?: number;
+            borderWidth?: number;
+            borderColor?: string;
+            fillColor?: string;
             codeColor?: string;
             codeFontSize?: number;
             point?: Point;
+            circlePoint?: Point;
+        }) {
+            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 ("hasCircle" in data && data.hasCircle != undefined) {
+                    this.hasCircle = data.hasCircle;
+                }
+                if ("radius" in data && data.radius != undefined) {
+                    this.radius = data.radius;
+                }
+                if ("borderWidth" in data && data.borderWidth != undefined) {
+                    this.borderWidth = data.borderWidth;
+                }
+                if ("borderColor" in data && data.borderColor != undefined) {
+                    this.borderColor = data.borderColor;
+                }
+                if ("fillColor" in data && data.fillColor != undefined) {
+                    this.fillColor = data.fillColor;
+                }
+                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 ("circlePoint" in data && data.circlePoint != undefined) {
+                    this.circlePoint = data.circlePoint;
+                }
+            }
+        }
+        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 hasCircle() {
+            return pb_1.Message.getFieldWithDefault(this, 3, false) as boolean;
+        }
+        set hasCircle(value: boolean) {
+            pb_1.Message.setField(this, 3, value);
+        }
+        get radius() {
+            return pb_1.Message.getFieldWithDefault(this, 4, 0) as number;
+        }
+        set radius(value: number) {
+            pb_1.Message.setField(this, 4, value);
+        }
+        get borderWidth() {
+            return pb_1.Message.getFieldWithDefault(this, 5, 0) as number;
+        }
+        set borderWidth(value: number) {
+            pb_1.Message.setField(this, 5, value);
+        }
+        get borderColor() {
+            return pb_1.Message.getFieldWithDefault(this, 6, "") as string;
+        }
+        set borderColor(value: string) {
+            pb_1.Message.setField(this, 6, value);
+        }
+        get fillColor() {
+            return pb_1.Message.getFieldWithDefault(this, 7, "") as string;
+        }
+        set fillColor(value: string) {
+            pb_1.Message.setField(this, 7, value);
+        }
+        get codeColor() {
+            return pb_1.Message.getFieldWithDefault(this, 8, "") as string;
+        }
+        set codeColor(value: string) {
+            pb_1.Message.setField(this, 8, value);
+        }
+        get codeFontSize() {
+            return pb_1.Message.getFieldWithDefault(this, 9, 0) as number;
+        }
+        set codeFontSize(value: number) {
+            pb_1.Message.setField(this, 9, value);
+        }
+        get point() {
+            return pb_1.Message.getWrapperField(this, Point, 10) as Point;
+        }
+        set point(value: Point) {
+            pb_1.Message.setWrapperField(this, 10, value);
+        }
+        get has_point() {
+            return pb_1.Message.getField(this, 10) != null;
+        }
+        get circlePoint() {
+            return pb_1.Message.getWrapperField(this, Point, 11) as Point;
+        }
+        set circlePoint(value: Point) {
+            pb_1.Message.setWrapperField(this, 11, value);
+        }
+        get has_circlePoint() {
+            return pb_1.Message.getField(this, 11) != null;
+        }
+        static fromObject(data: {
+            common?: ReturnType<typeof CommonInfo.prototype.toObject>;
+            code?: string;
+            hasCircle?: boolean;
+            radius?: number;
+            borderWidth?: number;
+            borderColor?: string;
+            fillColor?: string;
+            codeColor?: string;
+            codeFontSize?: number;
+            point?: ReturnType<typeof Point.prototype.toObject>;
+            circlePoint?: ReturnType<typeof Point.prototype.toObject>;
+        }): Station {
+            const message = new Station({});
+            if (data.common != null) {
+                message.common = CommonInfo.fromObject(data.common);
+            }
+            if (data.code != null) {
+                message.code = data.code;
+            }
+            if (data.hasCircle != null) {
+                message.hasCircle = data.hasCircle;
+            }
+            if (data.radius != null) {
+                message.radius = data.radius;
+            }
+            if (data.borderWidth != null) {
+                message.borderWidth = data.borderWidth;
+            }
+            if (data.borderColor != null) {
+                message.borderColor = data.borderColor;
+            }
+            if (data.fillColor != null) {
+                message.fillColor = data.fillColor;
+            }
+            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.circlePoint != null) {
+                message.circlePoint = Point.fromObject(data.circlePoint);
+            }
+            return message;
+        }
+        toObject() {
+            const data: {
+                common?: ReturnType<typeof CommonInfo.prototype.toObject>;
+                code?: string;
+                hasCircle?: boolean;
+                radius?: number;
+                borderWidth?: number;
+                borderColor?: string;
+                fillColor?: string;
+                codeColor?: string;
+                codeFontSize?: number;
+                point?: ReturnType<typeof Point.prototype.toObject>;
+                circlePoint?: ReturnType<typeof Point.prototype.toObject>;
+            } = {};
+            if (this.common != null) {
+                data.common = this.common.toObject();
+            }
+            if (this.code != null) {
+                data.code = this.code;
+            }
+            if (this.hasCircle != null) {
+                data.hasCircle = this.hasCircle;
+            }
+            if (this.radius != null) {
+                data.radius = this.radius;
+            }
+            if (this.borderWidth != null) {
+                data.borderWidth = this.borderWidth;
+            }
+            if (this.borderColor != null) {
+                data.borderColor = this.borderColor;
+            }
+            if (this.fillColor != null) {
+                data.fillColor = this.fillColor;
+            }
+            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.circlePoint != null) {
+                data.circlePoint = this.circlePoint.toObject();
+            }
+            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.hasCircle != false)
+                writer.writeBool(3, this.hasCircle);
+            if (this.radius != 0)
+                writer.writeInt32(4, this.radius);
+            if (this.borderWidth != 0)
+                writer.writeInt32(5, this.borderWidth);
+            if (this.borderColor.length)
+                writer.writeString(6, this.borderColor);
+            if (this.fillColor.length)
+                writer.writeString(7, this.fillColor);
+            if (this.codeColor.length)
+                writer.writeString(8, this.codeColor);
+            if (this.codeFontSize != 0)
+                writer.writeInt32(9, this.codeFontSize);
+            if (this.has_point)
+                writer.writeMessage(10, this.point, () => this.point.serialize(writer));
+            if (this.has_circlePoint)
+                writer.writeMessage(11, this.circlePoint, () => this.circlePoint.serialize(writer));
+            if (!w)
+                return writer.getResultBuffer();
+        }
+        static deserialize(bytes: Uint8Array | pb_1.BinaryReader): Station {
+            const reader = bytes instanceof pb_1.BinaryReader ? bytes : new pb_1.BinaryReader(bytes), message = new Station();
+            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.hasCircle = reader.readBool();
+                        break;
+                    case 4:
+                        message.radius = reader.readInt32();
+                        break;
+                    case 5:
+                        message.borderWidth = reader.readInt32();
+                        break;
+                    case 6:
+                        message.borderColor = reader.readString();
+                        break;
+                    case 7:
+                        message.fillColor = reader.readString();
+                        break;
+                    case 8:
+                        message.codeColor = reader.readString();
+                        break;
+                    case 9:
+                        message.codeFontSize = reader.readInt32();
+                        break;
+                    case 10:
+                        reader.readMessage(message.point, () => message.point = Point.deserialize(reader));
+                        break;
+                    case 11:
+                        reader.readMessage(message.circlePoint, () => message.circlePoint = Point.deserialize(reader));
+                        break;
+                    default: reader.skipField();
+                }
+            }
+            return message;
+        }
+        serializeBinary(): Uint8Array {
+            return this.serialize();
+        }
+        static deserializeBinary(bytes: Uint8Array): Station {
+            return Station.deserialize(bytes);
+        }
+    }
+    export class Train extends pb_1.Message {
+        #one_of_decls: number[][] = [];
+        constructor(data?: any[] | {
+            common?: CommonInfo;
+            code?: string;
+            codeColor?: string;
+            codeFontSize?: number;
+            point?: Point;
+            trainDirection?: string;
+            hasBorder?: boolean;
+            borderWidth?: number;
+            borderColor?: string;
+            headColor?: string;
+            bodyColor?: string;
         }) {
             super();
             pb_1.Message.initialize(this, Array.isArray(data) ? data : [], 0, -1, [], this.#one_of_decls);
@@ -1334,6 +1926,24 @@ export namespace graphicData {
                 if ("point" in data && data.point != undefined) {
                     this.point = data.point;
                 }
+                if ("trainDirection" in data && data.trainDirection != undefined) {
+                    this.trainDirection = data.trainDirection;
+                }
+                if ("hasBorder" in data && data.hasBorder != undefined) {
+                    this.hasBorder = data.hasBorder;
+                }
+                if ("borderWidth" in data && data.borderWidth != undefined) {
+                    this.borderWidth = data.borderWidth;
+                }
+                if ("borderColor" in data && data.borderColor != undefined) {
+                    this.borderColor = data.borderColor;
+                }
+                if ("headColor" in data && data.headColor != undefined) {
+                    this.headColor = data.headColor;
+                }
+                if ("bodyColor" in data && data.bodyColor != undefined) {
+                    this.bodyColor = data.bodyColor;
+                }
             }
         }
         get common() {
@@ -1372,14 +1982,56 @@ export namespace graphicData {
         get has_point() {
             return pb_1.Message.getField(this, 5) != null;
         }
+        get trainDirection() {
+            return pb_1.Message.getFieldWithDefault(this, 6, "") as string;
+        }
+        set trainDirection(value: string) {
+            pb_1.Message.setField(this, 6, value);
+        }
+        get hasBorder() {
+            return pb_1.Message.getFieldWithDefault(this, 7, false) as boolean;
+        }
+        set hasBorder(value: boolean) {
+            pb_1.Message.setField(this, 7, value);
+        }
+        get borderWidth() {
+            return pb_1.Message.getFieldWithDefault(this, 8, 0) as number;
+        }
+        set borderWidth(value: number) {
+            pb_1.Message.setField(this, 8, value);
+        }
+        get borderColor() {
+            return pb_1.Message.getFieldWithDefault(this, 9, "") as string;
+        }
+        set borderColor(value: string) {
+            pb_1.Message.setField(this, 9, value);
+        }
+        get headColor() {
+            return pb_1.Message.getFieldWithDefault(this, 10, "") as string;
+        }
+        set headColor(value: string) {
+            pb_1.Message.setField(this, 10, value);
+        }
+        get bodyColor() {
+            return pb_1.Message.getFieldWithDefault(this, 11, "") as string;
+        }
+        set bodyColor(value: string) {
+            pb_1.Message.setField(this, 11, value);
+        }
         static fromObject(data: {
             common?: ReturnType<typeof CommonInfo.prototype.toObject>;
             code?: string;
             codeColor?: string;
             codeFontSize?: number;
             point?: ReturnType<typeof Point.prototype.toObject>;
-        }): Station {
+            trainDirection?: string;
-            const message = new Station({});
+            hasBorder?: boolean;
+            borderWidth?: number;
+            borderColor?: string;
+            headColor?: string;
+            bodyColor?: string;
+        }): Train {
+            const message = new Train({});
             if (data.common != null) {
                 message.common = CommonInfo.fromObject(data.common);
             }
@@ -1395,6 +2047,24 @@ export namespace graphicData {
             if (data.point != null) {
                 message.point = Point.fromObject(data.point);
             }
+            if (data.trainDirection != null) {
+                message.trainDirection = data.trainDirection;
+            }
+            if (data.hasBorder != null) {
+                message.hasBorder = data.hasBorder;
+            }
+            if (data.borderWidth != null) {
+                message.borderWidth = data.borderWidth;
+            }
+            if (data.borderColor != null) {
+                message.borderColor = data.borderColor;
+            }
+            if (data.headColor != null) {
+                message.headColor = data.headColor;
+            }
+            if (data.bodyColor != null) {
+                message.bodyColor = data.bodyColor;
+            }
             return message;
         }
         toObject() {
@@ -1404,6 +2074,12 @@ export namespace graphicData {
                 codeColor?: string;
                 codeFontSize?: number;
                 point?: ReturnType<typeof Point.prototype.toObject>;
+                trainDirection?: string;
+                hasBorder?: boolean;
+                borderWidth?: number;
+                borderColor?: string;
+                headColor?: string;
+                bodyColor?: string;
             } = {};
             if (this.common != null) {
                 data.common = this.common.toObject();
@@ -1420,6 +2096,24 @@ export namespace graphicData {
             if (this.point != null) {
                 data.point = this.point.toObject();
             }
+            if (this.trainDirection != null) {
+                data.trainDirection = this.trainDirection;
+            }
+            if (this.hasBorder != null) {
+                data.hasBorder = this.hasBorder;
+            }
+            if (this.borderWidth != null) {
+                data.borderWidth = this.borderWidth;
+            }
+            if (this.borderColor != null) {
+                data.borderColor = this.borderColor;
+            }
+            if (this.headColor != null) {
+                data.headColor = this.headColor;
+            }
+            if (this.bodyColor != null) {
+                data.bodyColor = this.bodyColor;
+            }
             return data;
         }
         serialize(): Uint8Array;
@@ -1436,11 +2130,23 @@ export namespace graphicData {
                 writer.writeInt32(4, this.codeFontSize);
             if (this.has_point)
                 writer.writeMessage(5, this.point, () => this.point.serialize(writer));
+            if (this.trainDirection.length)
+                writer.writeString(6, this.trainDirection);
+            if (this.hasBorder != false)
+                writer.writeBool(7, this.hasBorder);
+            if (this.borderWidth != 0)
+                writer.writeInt32(8, this.borderWidth);
+            if (this.borderColor.length)
+                writer.writeString(9, this.borderColor);
+            if (this.headColor.length)
+                writer.writeString(10, this.headColor);
+            if (this.bodyColor.length)
+                writer.writeString(11, this.bodyColor);
             if (!w)
                 return writer.getResultBuffer();
         }
-        static deserialize(bytes: Uint8Array | pb_1.BinaryReader): Station {
+        static deserialize(bytes: Uint8Array | pb_1.BinaryReader): Train {
-            const reader = bytes instanceof pb_1.BinaryReader ? bytes : new pb_1.BinaryReader(bytes), message = new Station();
+            const reader = bytes instanceof pb_1.BinaryReader ? bytes : new pb_1.BinaryReader(bytes), message = new Train();
             while (reader.nextField()) {
                 if (reader.isEndGroup())
                     break;
@@ -1460,6 +2166,24 @@ export namespace graphicData {
                     case 5:
                         reader.readMessage(message.point, () => message.point = Point.deserialize(reader));
                         break;
+                    case 6:
+                        message.trainDirection = reader.readString();
+                        break;
+                    case 7:
+                        message.hasBorder = reader.readBool();
+                        break;
+                    case 8:
+                        message.borderWidth = reader.readInt32();
+                        break;
+                    case 9:
+                        message.borderColor = reader.readString();
+                        break;
+                    case 10:
+                        message.headColor = reader.readString();
+                        break;
+                    case 11:
+                        message.bodyColor = reader.readString();
+                        break;
                     default: reader.skipField();
                 }
             }
@@ -1468,8 +2192,8 @@ export namespace graphicData {
         serializeBinary(): Uint8Array {
             return this.serialize();
         }
-        static deserializeBinary(bytes: Uint8Array): Station {
+        static deserializeBinary(bytes: Uint8Array): Train {
-            return Station.deserialize(bytes);
+            return Train.deserialize(bytes);
         }
     }
     export class IscsFan extends pb_1.Message {

src/graphics/platform/PlatformDrawAssistant.ts

@@ -10,7 +10,6 @@ import {
   GraphicInteractionPlugin,
   JlDrawApp,
   JlGraphic,
-  KeyListener,
   getRectangleCenter,
 } from 'src/jlgraphic';
 
@@ -28,15 +27,6 @@ export class PlatformDraw extends GraphicDrawAssistant<
   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,
@@ -53,11 +43,9 @@ export class PlatformDraw extends GraphicDrawAssistant<
 
   bind(): void {
     super.bind();
-    this.app.addKeyboardListener(this.keypListener);
   }
   unbind(): void {
     super.unbind();
-    this.app.removeKeyboardListener(this.keypListener);
   }
 
   clearCache(): void {

src/graphics/rect/Rect.ts

@@ -0,0 +1,86 @@
+import { Color, Graphics, IPointData, Point } from 'pixi.js';
+import { GraphicData, JlGraphic, JlGraphicTemplate } from 'src/jlgraphic';
+
+export interface IRectData extends GraphicData {
+  get code(): string; // 编号
+  set code(v: string);
+  get lineWidth(): number; // 线宽
+  set lineWidth(v: number);
+  get lineColor(): string; // 线色
+  set lineColor(v: string);
+  get point(): IPointData; // 位置坐标
+  set point(point: IPointData);
+  get width(): number; // 宽度
+  set width(v: number);
+  get height(): number; // 高度
+  set height(v: number);
+  get points(): IPointData[]; // 线坐标点
+  set points(points: IPointData[]);
+  clone(): IRectData;
+  copyFrom(data: IRectData): void;
+  eq(other: IRectData): boolean;
+}
+
+const rectConsts = {
+  lineWidth: 2,
+  lineColor: '0xff0000',
+  width: 60,
+  height: 20,
+};
+
+export class Rect extends JlGraphic {
+  static Type = 'Rect';
+  rectGraphic: Graphics;
+  constructor() {
+    super(Rect.Type);
+    this.rectGraphic = new Graphics();
+    this.addChild(this.rectGraphic);
+  }
+
+  get datas(): IRectData {
+    return this.getDatas<IRectData>();
+  }
+  doRepaint(): void {
+    const width = this.datas.width;
+    const height = this.datas.height;
+    if (this.linePoints.length == 0) {
+      const r1 = new Point(this.datas.point.x, this.datas.point.y);
+      const r2 = new Point(r1.x + width, r1.y);
+      const r3 = new Point(r1.x + width, r1.y + height);
+      const r4 = new Point(r1.x, r1.y + height);
+      this.datas.points = [r1, r2, r3, r4, r1];
+    }
+    const rectGraphic = this.rectGraphic;
+    rectGraphic.clear();
+    rectGraphic.lineStyle(
+      this.datas.lineWidth,
+      new Color(this.datas.lineColor)
+    );
+    rectGraphic.drawPolygon(this.datas.points);
+  }
+  get linePoints(): IPointData[] {
+    return this.datas.points;
+  }
+  set linePoints(points: IPointData[]) {
+    const old = this.datas.clone();
+    old.points = points;
+    this.updateData(old);
+  }
+}
+
+export class RectTemplate extends JlGraphicTemplate<Rect> {
+  lineWidth: number;
+  lineColor: string;
+  width: number;
+  height: number;
+  constructor() {
+    super(Rect.Type);
+    this.lineWidth = rectConsts.lineWidth;
+    this.lineColor = rectConsts.lineColor;
+    this.width = rectConsts.width;
+    this.height = rectConsts.height;
+  }
+  new(): Rect {
+    return new Rect();
+  }
+}

src/graphics/rect/RectDrawAssistant.ts

@@ -0,0 +1,262 @@
+import {
+  FederatedPointerEvent,
+  Graphics,
+  Point,
+  IHitArea,
+  DisplayObject,
+  FederatedMouseEvent,
+} from 'pixi.js';
+import {
+  DraggablePoint,
+  GraphicApp,
+  GraphicDrawAssistant,
+  GraphicInteractionPlugin,
+  GraphicTransformEvent,
+  JlDrawApp,
+  JlGraphic,
+  linePoint,
+} from 'src/jlgraphic';
+
+import AbsorbablePoint, {
+  AbsorbablePosition,
+} from 'src/jlgraphic/graphic/AbsorbablePosition';
+import {
+  ILineGraphic,
+  PolylineEditPlugin,
+  addWaySegmentingConfig,
+  addPolygonSegmentingPoint,
+  clearWayPoint,
+  clearWaypointsConfig,
+  getWayLineIndex,
+} from 'src/jlgraphic/plugins/GraphicEditPlugin';
+import { ContextMenu } from 'src/jlgraphic/ui/ContextMenu';
+
+import { IRectData, Rect, RectTemplate } from './Rect';
+import { Link } from '../link/Link';
+
+export interface IRectDrawOptions {
+  newData: () => IRectData;
+}
+
+export class RectDraw extends GraphicDrawAssistant<RectTemplate, IRectData> {
+  point1: Point | null = null;
+  point2: Point | null = null;
+  rectGraphic: Graphics = new Graphics();
+
+  constructor(app: JlDrawApp, createData: () => IRectData) {
+    super(app, new RectTemplate(), createData, Rect.Type, '站台Rect');
+    this.container.addChild(this.rectGraphic);
+    RectPointsEditPlugin.init(app);
+  }
+
+  bind(): void {
+    super.bind();
+  }
+  unbind(): void {
+    super.unbind();
+  }
+
+  clearCache(): void {
+    this.rectGraphic.clear();
+  }
+  onRightClick(): void {
+    this.createAndStore(true);
+  }
+  onLeftDown(e: FederatedPointerEvent): void {
+    const { x, y } = this.toCanvasCoordinates(e.global);
+    const p = new Point(x, y);
+    if (this.point1 === null) {
+      this.point1 = p;
+    } else {
+      this.point2 = p;
+      this.createAndStore(true);
+      this.point1 = null;
+      this.point2 = null;
+    }
+  }
+
+  redraw(p: Point): void {
+    const template = this.graphicTemplate;
+    if (this.point1 === null) return;
+    const rectGraphic = this.rectGraphic;
+    rectGraphic.clear();
+    rectGraphic.lineStyle(template.lineWidth, template.lineColor);
+    rectGraphic.drawRect(...this.normalize(this.point1, p));
+  }
+  //根据画的两个点确定左上角的点的坐标和矩形宽高
+  private normalize(p1: Point, p2: Point): [number, number, number, number] {
+    const { abs } = Math;
+    const x = p1.x < p2.x ? p1.x : p2.x;
+    const y = p1.y < p2.y ? p1.y : p2.y;
+    const w = abs(p1.x - p2.x);
+    const h = abs(p1.y - p2.y);
+    return [x, y, w, h];
+  }
+  prepareData(data: IRectData): boolean {
+    if (this.point1 == null) {
+      console.log('Rect绘制因点不够取消绘制');
+      return false;
+    }
+    const p1 = this.point1 as Point;
+    const p2 = this.point2 as Point;
+    const [x, y, width, height] = this.normalize(p1, p2);
+    const template = this.graphicTemplate;
+    data.point = new Point(x, y);
+    data.lineWidth = template.lineWidth;
+    data.lineColor = template.lineColor;
+    data.width = width;
+    data.height = height;
+    return true;
+  }
+}
+
+//碰撞检测
+export class RectGraphicHitArea implements IHitArea {
+  rect: Rect;
+  constructor(rect: Rect) {
+    this.rect = rect;
+  }
+  contains(x: number, y: number): boolean {
+    let contains = false;
+    const p = new Point(x, y);
+    const rectData = this.rect.datas;
+    //contains = pointPolygon(p, rectData.points, rectData.lineWidth);是否包含多边形内部
+    const tolerance = rectData.lineWidth;
+    for (let i = 0; i < rectData.points.length - 1; i++) {
+      const p1 = rectData.points[i];
+      const p2 = rectData.points[i + 1];
+      contains = contains || linePoint(p1, p2, p, tolerance);
+      if (contains) {
+        break;
+      }
+    }
+    return contains;
+  }
+}
+
+/**
+ * 构建吸附位置
+ * @param rect
+ * @returns
+ */
+function buildAbsorbablePositions(rect: Rect): AbsorbablePosition[] {
+  const aps: AbsorbablePosition[] = [];
+  const rects = rect.queryStore.queryByType<Rect>(Rect.Type);
+  const links = rect.queryStore.queryByType<Link>(Link.Type);
+
+  links.forEach((other) => {
+    const apa = new AbsorbablePoint(
+      other.localToCanvasPoint(other.getStartPoint())
+    );
+    const apb = new AbsorbablePoint(
+      other.localToCanvasPoint(other.getEndPoint())
+    );
+    aps.push(apa, apb);
+  });
+
+  rects.forEach((other) => {
+    if (other.id == rect.id) {
+      return;
+    }
+    other.linePoints.forEach((point) => {
+      const absorbablePoint = new AbsorbablePoint(point);
+      aps.push(absorbablePoint);
+    });
+  });
+
+  return aps;
+}
+
+/**
+ * 端点拖拽添加吸附位置
+ * @param g
+ * @param dp
+ * @param index
+ */
+function onEditPointCreate(g: ILineGraphic, dp: DraggablePoint): void {
+  const rect = g as Rect;
+  // 端点
+  dp.on('transformstart', (e: GraphicTransformEvent) => {
+    if (e.isShift()) {
+      rect.getGraphicApp().setOptions({
+        absorbablePositions: buildAbsorbablePositions(rect),
+      });
+    }
+  });
+}
+
+const RectEditMenu: ContextMenu = ContextMenu.init({
+  name: '矩形编辑菜单',
+  groups: [
+    {
+      items: [addWaySegmentingConfig, clearWaypointsConfig],
+    },
+  ],
+});
+
+/**
+ * rect路径编辑
+ */
+export class RectPointsEditPlugin extends GraphicInteractionPlugin<Rect> {
+  static Name = 'RectPointsDrag';
+  constructor(app: GraphicApp) {
+    super(RectPointsEditPlugin.Name, app);
+    app.registerMenu(RectEditMenu);
+  }
+  static init(app: GraphicApp): RectPointsEditPlugin {
+    return new RectPointsEditPlugin(app);
+  }
+  filter(...grahpics: JlGraphic[]): Rect[] | undefined {
+    return grahpics.filter((g) => g.type == Rect.Type) as Rect[];
+  }
+  bind(g: Rect): void {
+    g.rectGraphic.eventMode = 'static';
+    g.rectGraphic.cursor = 'pointer';
+    g.rectGraphic.hitArea = new RectGraphicHitArea(g);
+    g.on('_rightclick', this.onContextMenu, this);
+    g.on('selected', this.onSelected, this);
+    g.on('unselected', this.onUnselected, this);
+  }
+  unbind(g: Rect): void {
+    g.off('_rightclick', this.onContextMenu, this);
+    g.off('selected', this.onSelected, this);
+    g.off('unselected', this.onUnselected, this);
+  }
+
+  onContextMenu(e: FederatedMouseEvent) {
+    const target = e.target as DisplayObject;
+    const rect = target.getGraphic() as Rect;
+    this.app.updateSelected(rect);
+    addWaySegmentingConfig.handler = () => {
+      const linePoints = rect.linePoints;
+      const p = rect.screenToLocalPoint(e.global);
+      const { start, end } = getWayLineIndex(linePoints, p);
+      addPolygonSegmentingPoint(rect, start, end);
+    };
+    clearWaypointsConfig.handler = () => {
+      clearWayPoint(rect, false);
+    };
+    RectEditMenu.open(e.global);
+  }
+
+  onSelected(g: DisplayObject): void {
+    const rect = g as Rect;
+    let lep = rect.getAssistantAppend<PolylineEditPlugin>(
+      PolylineEditPlugin.Name
+    );
+    if (!lep) {
+      lep = new PolylineEditPlugin(rect, { onEditPointCreate });
+      rect.addAssistantAppend(lep);
+    }
+    lep.showAll();
+  }
+  onUnselected(g: DisplayObject): void {
+    const rect = g as Rect;
+    const lep = rect.getAssistantAppend<PolylineEditPlugin>(
+      PolylineEditPlugin.Name
+    );
+    if (lep) {
+      lep.hideAll();
+    }
+  }
+}

src/graphics/station/Station.ts

@@ -1,4 +1,4 @@
-import { IPointData } from 'pixi.js';
+import { Color, Graphics, IPointData, Point } from 'pixi.js';
 import {
   GraphicData,
   JlGraphic,
@@ -9,12 +9,24 @@ import {
 export interface IStationData extends GraphicData {
   get code(): string; // 编号
   set code(v: string);
+  get hasCircle(): boolean; // 是否有圆圈--线网图
+  set hasCircle(v: boolean);
+  get radius(): number; // 半径
+  set radius(v: number);
+  get borderWidth(): number; // 线宽
+  set borderWidth(v: number);
+  get borderColor(): string; // 圆边框线色
+  set borderColor(v: string);
+  get fillColor(): string; // 圆填充颜色
+  set fillColor(v: string);
   get codeColor(): string; // 车站字体颜色
   set codeColor(v: string);
   get codeFontSize(): number; // 车站字体大小
   set codeFontSize(v: number);
   get point(): IPointData; // 位置坐标
   set point(point: IPointData);
+  get circlePoint(): IPointData; // 位置坐标
+  set circlePoint(point: IPointData);
   clone(): IStationData;
   copyFrom(data: IStationData): void;
   eq(other: IStationData): boolean;
@@ -23,15 +35,19 @@ export interface IStationData extends GraphicData {
 export class Station extends JlGraphic {
   static Type = 'station';
   codeGraph: VectorText = new VectorText(''); //站台旁数字、字符
+  circleGraphic: Graphics;
   constructor() {
     super(Station.Type);
+    this.circleGraphic = new Graphics();
     this.addChild(this.codeGraph);
+    this.addChild(this.circleGraphic);
   }
 
   get datas(): IStationData {
     return this.getDatas<IStationData>();
   }
   doRepaint(): void {
+    this.circleGraphic.clear();
     this.position.set(this.datas.point.x, this.datas.point.y);
     const codeGraph = this.codeGraph;
     if (this.datas.code == '') {
@@ -42,17 +58,42 @@ export class Station extends JlGraphic {
     codeGraph.style.fill = this.datas.codeColor;
     codeGraph.setVectorFontSize(this.datas.codeFontSize);
     codeGraph.anchor.set(0.5);
-    codeGraph.style.fill = this.datas.codeColor;
+    if (this.datas.hasCircle) {
+      const circleGraphic = this.circleGraphic;
+      circleGraphic.lineStyle(
+        this.datas.borderWidth,
+        new Color(this.datas.borderColor)
+      );
+      circleGraphic.beginFill(this.datas.fillColor, 1);
+      circleGraphic.drawCircle(0, 0, this.datas.radius);
+      circleGraphic.endFill;
+      circleGraphic.position.set(
+        this.datas.circlePoint.x,
+        this.datas.circlePoint.y
+      );
+    }
   }
 }
 
 export class StationTemplate extends JlGraphicTemplate<Station> {
+  hasCircle: boolean;
+  radius: number;
+  borderWidth: number;
+  borderColor: string;
+  fillColor: string;
   codeColor: string;
   codeFontSize: number;
+  circlePoint: IPointData;
   constructor() {
     super(Station.Type);
+    this.hasCircle = false;
+    this.radius = 5;
+    this.borderWidth = 1;
+    this.borderColor = '0xff0000';
+    this.fillColor = '0xff0000';
     this.codeColor = '0xF48815';
     this.codeFontSize = 22;
+    this.circlePoint = new Point(0, -20);
   }
   new(): Station {
     return new Station();

src/graphics/station/StationDrawAssistant.ts

@@ -4,7 +4,6 @@ import {
   GraphicInteractionPlugin,
   JlDrawApp,
   JlGraphic,
-  KeyListener,
   VectorText,
 } from 'src/jlgraphic';
 
@@ -21,15 +20,6 @@ export class StationDraw extends GraphicDrawAssistant<
   point: Point = new Point(0, 0);
   codeGraph: VectorText = new VectorText('');
 
-  // 快捷绘制
-  keypListener: KeyListener = new KeyListener({
-    value: 'KeyO',
-    global: true,
-    onPress: () => {
-      //this.graphicTemplate.hasdoor = true;
-    },
-  });
-
   constructor(app: JlDrawApp, createData: () => IStationData) {
     super(app, new StationTemplate(), createData, Station.Type, '车站Station');
     this.container.addChild(this.codeGraph);
@@ -38,11 +28,9 @@ export class StationDraw extends GraphicDrawAssistant<
 
   bind(): void {
     super.bind();
-    this.app.addKeyboardListener(this.keypListener);
   }
   unbind(): void {
     super.unbind();
-    this.app.removeKeyboardListener(this.keypListener);
   }
 
   clearCache(): void {
@@ -69,8 +57,14 @@ export class StationDraw extends GraphicDrawAssistant<
   prepareData(data: IStationData): boolean {
     const template = this.graphicTemplate;
     data.point = this.point;
+    data.hasCircle = template.hasCircle;
+    data.radius = template.radius;
+    data.borderWidth = template.borderWidth;
+    data.borderColor = template.borderColor;
+    data.fillColor = template.fillColor;
     data.codeColor = template.codeColor;
     data.codeFontSize = template.codeFontSize;
+    data.circlePoint = template.circlePoint;
     return true;
   }
 }

src/graphics/train/Train.ts

@@ -0,0 +1,185 @@
+import { Color, Graphics, IPointData } from 'pixi.js';
+import {
+  GraphicData,
+  JlGraphic,
+  JlGraphicTemplate,
+  VectorText,
+} from 'src/jlgraphic';
+
+export interface ITrainData extends GraphicData {
+  get code(): string; // 车号
+  set code(v: string);
+  get codeColor(): string; // 车号颜色
+  set codeColor(v: string);
+  get codeFontSize(): number; // 车号字体大小
+  set codeFontSize(v: number);
+  get trainDirection(): string; // 行驶方向
+  set trainDirection(v: string);
+  get hasBorder(): boolean; // 是否有边框
+  set hasBorder(v: boolean);
+  get borderWidth(): number; // 边框线宽
+  set borderWidth(v: number);
+  get borderColor(): string; // 边框颜色
+  set borderColor(v: string);
+  get headColor(): string; // 箭头颜色
+  set headColor(v: string);
+  get bodyColor(): string; // 背景色
+  set bodyColor(v: string);
+  get point(): IPointData; // 位置坐标
+  set point(point: IPointData);
+  clone(): ITrainData;
+  copyFrom(data: ITrainData): void;
+  eq(other: ITrainData): boolean;
+}
+
+// 列车颜色
+export enum TrainColorEnum {
+  headColor = '0x00FF00', // 箭头颜色
+  bodyColor = '0xA388B1', // 背景色
+  codeColor = '0xffffff', // 车号颜色
+  borderColor = '0xA3E198', // 边框的颜色
+}
+
+export const trainConsts = {
+  borderWidth: 1,
+  codeFontSize: 22,
+  marginX: 2, // 图形x轴边距
+  pauseW: 2, // 停止框宽度
+};
+
+export class Train extends JlGraphic {
+  static Type = 'Train';
+
+  arrowLeft: Graphics;
+  pauseLeft: Graphics;
+  arrowRight: Graphics;
+  pauseRight: Graphics;
+  codeRact: Graphics;
+  codeGraph: VectorText = new VectorText(''); //车号
+  constructor() {
+    super(Train.Type);
+    this.arrowLeft = new Graphics();
+    this.pauseLeft = new Graphics();
+    this.arrowRight = new Graphics();
+    this.pauseRight = new Graphics();
+    this.codeRact = new Graphics();
+    this.addChild(this.arrowLeft);
+    this.addChild(this.pauseLeft);
+    this.addChild(this.arrowRight);
+    this.addChild(this.pauseRight);
+    this.addChild(this.codeRact);
+    this.addChild(this.codeGraph);
+    this.codeGraph.setVectorFontSize(trainConsts.codeFontSize);
+  }
+
+  get datas(): ITrainData {
+    return this.getDatas<ITrainData>();
+  }
+  doRepaint(): void {
+    this.position.set(this.datas.point.x, this.datas.point.y);
+    const codeGraph = this.codeGraph;
+    const codeRact = this.codeRact;
+    if (this.datas.code == '') {
+      codeGraph.text = '01110111';
+    } else {
+      codeGraph.text = this.datas.code;
+    }
+    codeGraph.setVectorFontSize(this.datas.codeFontSize);
+    codeGraph.anchor.set(0.5);
+    const style = {
+      fill: this.datas.codeColor,
+      padding: 5,
+    };
+    codeGraph.style = style;
+    const {
+      x: codeX,
+      y: codeY,
+      width: codeWidth,
+      height: codeHeight,
+    } = codeGraph.getLocalBounds();
+    const marginX = trainConsts.marginX;
+    const pauseW = trainConsts.pauseW;
+    const arrowLeft = this.arrowLeft;
+    arrowLeft.beginFill(this.datas.headColor, 1);
+    arrowLeft.drawPolygon([
+      -codeHeight * 0.4 - marginX - pauseW - marginX - codeWidth / 2,
+      0,
+      -marginX - pauseW - marginX - codeWidth / 2,
+      codeHeight / 2,
+      -marginX - pauseW - marginX - codeWidth / 2,
+      -codeHeight / 2,
+    ]);
+    arrowLeft.endFill();
+    this.pauseLeft.beginFill(this.datas.headColor, 1);
+    this.pauseLeft.drawRect(0, 0, pauseW, codeHeight);
+    this.pauseLeft.endFill();
+    this.pauseLeft.position.set(
+      -marginX - pauseW - codeWidth / 2,
+      -codeHeight / 2
+    );
+    this.pauseRight.beginFill(this.datas.headColor, 1);
+    this.pauseRight.drawRect(0, 0, pauseW, codeHeight);
+    this.pauseRight.endFill();
+    this.pauseRight.position.set(marginX + codeWidth / 2, -codeHeight / 2);
+    const arrowRight = this.arrowRight;
+    arrowRight.beginFill(this.datas.headColor, 1);
+    arrowRight.drawPolygon([
+      codeWidth / 2 + marginX + pauseW + marginX + codeHeight * 0.4,
+      0,
+      codeWidth / 2 + marginX + pauseW + marginX,
+      codeHeight / 2,
+      codeWidth / 2 + marginX + pauseW + marginX,
+      -codeHeight / 2,
+    ]);
+    arrowRight.endFill();
+    if (this.datas.hasBorder) {
+      codeRact.visible = true;
+      codeRact.lineStyle(
+        this.datas.borderWidth,
+        new Color(this.datas.borderColor)
+      );
+      codeRact.beginFill(new Color(this.datas.bodyColor));
+      codeRact.drawRect(codeX, codeY, codeWidth, codeHeight);
+      codeRact.endFill();
+    } else {
+      codeRact.visible = false;
+    }
+    // 运行方向控制箭头停止显隐
+    if (this.datas.trainDirection == 'right') {
+      this.arrowLeft.visible = false;
+      this.arrowRight.visible = true;
+      this.pauseLeft.visible = false;
+      this.pauseRight.visible = true;
+    } else {
+      this.arrowLeft.visible = true;
+      this.arrowRight.visible = false;
+      this.pauseLeft.visible = true;
+      this.pauseRight.visible = false;
+    }
+  }
+}
+
+export class TrainTemplate extends JlGraphicTemplate<Train> {
+  trainDirection: string;
+  codeFontSize: number;
+  hasBorder: boolean;
+  borderWidth: number;
+  borderColor: string;
+  headColor: string;
+  codeColor: string;
+  bodyColor: string;
+  constructor() {
+    super(Train.Type);
+    this.trainDirection = 'left';
+    this.codeFontSize = trainConsts.codeFontSize;
+    this.hasBorder = true;
+    this.borderWidth = trainConsts.borderWidth;
+    this.borderColor = TrainColorEnum.borderColor;
+    this.headColor = TrainColorEnum.headColor;
+    this.codeColor = TrainColorEnum.codeColor;
+    this.bodyColor = TrainColorEnum.bodyColor;
+  }
+  new(): Train {
+    return new Train();
+  }
+}

src/graphics/train/TrainDrawAssistant.ts

@@ -0,0 +1,141 @@
+import { Color, FederatedPointerEvent, Graphics, Point } from 'pixi.js';
+import {
+  GraphicDrawAssistant,
+  GraphicInteractionPlugin,
+  JlDrawApp,
+  JlGraphic,
+  VectorText,
+} from 'src/jlgraphic';
+
+import { ITrainData, Train, TrainTemplate, trainConsts } from './Train';
+
+export interface ITrainDrawOptions {
+  newData: () => ITrainData;
+}
+
+export class TrainDraw extends GraphicDrawAssistant<TrainTemplate, ITrainData> {
+  point: Point = new Point(0, 0);
+  arrowLeft: Graphics = new Graphics();
+  pauseLeft: Graphics = new Graphics();
+  codeRact: Graphics = new Graphics();
+
+  constructor(app: JlDrawApp, createData: () => ITrainData) {
+    super(app, new TrainTemplate(), createData, Train.Type, '列车Train');
+    this.container.addChild(this.arrowLeft);
+    this.container.addChild(this.pauseLeft);
+    this.container.addChild(this.codeRact);
+    this.graphicTemplate.hasBorder = true;
+    trainInteraction.init(app);
+  }
+
+  bind(): void {
+    super.bind();
+  }
+  unbind(): void {
+    super.unbind();
+  }
+
+  clearCache(): void {
+    this.arrowLeft.clear();
+    this.pauseLeft.clear();
+    this.codeRact.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;
+    const codeGraph = new VectorText(''); // 车号
+    codeGraph.setVectorFontSize(22);
+    codeGraph.anchor.set(0.5);
+    codeGraph.text = '01110111';
+    const style = { padding: 5 };
+    codeGraph.style = style;
+    const { width, height } = codeGraph.getLocalBounds();
+    codeGraph.destroy();
+    const marginX = trainConsts.marginX;
+    const pauseW = trainConsts.pauseW;
+    // 边框
+    if (template.hasBorder) {
+      const codeRact = this.codeRact;
+      codeRact.clear();
+      codeRact.lineStyle(template.borderWidth, new Color(template.borderColor));
+      codeRact.beginFill(new Color(template.bodyColor));
+      codeRact.drawRect(-width / 2, -height / 2, width, height);
+      codeRact.endFill();
+      codeRact.position.set(p.x, p.y);
+    }
+
+    // 箭头
+    const arrowLeft = this.arrowLeft;
+    arrowLeft.clear();
+    this.point.set(p.x, p.y);
+    arrowLeft.beginFill(template.headColor, 1);
+    arrowLeft.drawPolygon([
+      -height * 0.4 - marginX - pauseW - marginX - width / 2,
+      0,
+      -marginX - pauseW - marginX - width / 2,
+      height / 2,
+      -marginX - pauseW - marginX - width / 2,
+      -height / 2,
+    ]);
+    arrowLeft.endFill();
+    arrowLeft.position.set(this.point.x, this.point.y);
+
+    // 停止框
+    const pauseLeft = this.pauseLeft;
+    pauseLeft.clear();
+    pauseLeft.beginFill(template.headColor, 1);
+    pauseLeft.drawRect(0, 0, pauseW, height);
+    pauseLeft.endFill();
+    pauseLeft.position.set(
+      this.point.x - marginX - pauseW - width / 2,
+      this.point.y - height / 2
+    );
+  }
+  prepareData(data: ITrainData): boolean {
+    const template = this.graphicTemplate;
+    data.code = '01110111';
+    data.codeColor = template.codeColor;
+    data.codeFontSize = template.codeFontSize;
+    data.hasBorder = template.hasBorder;
+    data.trainDirection = template.trainDirection;
+    data.point = this.point;
+    data.borderWidth = template.borderWidth;
+    data.borderColor = template.borderColor;
+    data.headColor = template.headColor;
+    data.bodyColor = template.bodyColor;
+    return true;
+  }
+}
+
+export class trainInteraction extends GraphicInteractionPlugin<Train> {
+  static Name = 'train_transform';
+  constructor(app: JlDrawApp) {
+    super(trainInteraction.Name, app);
+  }
+  static init(app: JlDrawApp) {
+    return new trainInteraction(app);
+  }
+  filter(...grahpics: JlGraphic[]): Train[] | undefined {
+    return grahpics.filter((g) => g.type === Train.Type).map((g) => g as Train);
+  }
+  bind(g: Train): void {
+    g.eventMode = 'static';
+    g.cursor = 'pointer';
+    g.scalable = true;
+    g.rotatable = true;
+  }
+  unbind(g: Train): void {
+    g.eventMode = 'none';
+    g.scalable = false;
+    g.rotatable = false;
+  }
+}

src/jlgraphic/plugins/GraphicEditPlugin.ts

@@ -19,6 +19,8 @@ import {
   distance2,
   linePoint,
   pointPolygon,
+  calculateLineSegmentingPoint,
+  calculateDistanceFromPointToLine,
 } from '../utils';
 import { GraphicTransformEvent, ShiftData } from './GraphicTransformPlugin';
 
@@ -57,6 +59,9 @@ export abstract class GraphicEditPlugin<
 export const addWaypointConfig: MenuItemOptions = {
   name: '添加路径点',
 };
+export const addWaySegmentingConfig: MenuItemOptions = {
+  name: '细分',
+};
 export const removeWaypointConfig: MenuItemOptions = {
   name: '移除路径点',
 };
@@ -103,6 +108,45 @@ export abstract class LineEditPlugin extends GraphicEditPlugin<ILineGraphic> {
   abstract initEditPoints(): void;
 }
 
+export function getWayLineIndex(
+  points: IPointData[],
+  p: IPointData
+): { start: number; end: number } {
+  let start = 0;
+  let end = 0;
+  let minDistance = 0;
+  for (let i = 1; i < points.length; i++) {
+    const sp = points[i - 1];
+    const ep = points[i];
+    let distance = calculateDistanceFromPointToLine(sp, ep, p);
+    distance = Math.round(distance * 100) / 100;
+    if (i == 1) {
+      minDistance = distance;
+    }
+    if (distance == minDistance) {
+      const minX = Math.min(sp.x, ep.x);
+      const maxX = Math.max(sp.x, ep.x);
+      const minY = Math.min(sp.y, ep.y);
+      const maxY = Math.max(sp.y, ep.y);
+      const point = calculateFootPointFromPointToLine(sp, ep, p);
+      if (
+        point.x >= minX &&
+        point.x <= maxX &&
+        point.y >= minY &&
+        point.y <= maxY
+      ) {
+        start = i - 1;
+      }
+    }
+    if (distance < minDistance) {
+      minDistance = distance;
+      start = i - 1;
+    }
+  }
+  end = start + 1;
+  return { start, end };
+}
+
 export function getWaypointRangeIndex(
   points: IPointData[],
   curve: boolean,
@@ -251,6 +295,21 @@ export function addLineWayPoint(
   graphic.linePoints = points;
 }
 
+export function addPolygonSegmentingPoint(
+  graphic: ILineGraphic,
+  start: number,
+  end: number,
+  knife = 2
+) {
+  const linePoints = graphic.linePoints;
+  const points = linePoints.slice(0, start + 1);
+  points.push(
+    ...calculateLineSegmentingPoint(linePoints[start], linePoints[end], knife)
+  );
+  points.push(...linePoints.slice(end));
+  graphic.linePoints = points;
+}
+
 function assertBezierWayPoint(i: number) {
   const c = i % 3;
   if (c !== 0) {

src/jlgraphic/utils/GraphicUtils.ts

@@ -287,6 +287,31 @@ export function calculateLineMidpoint(p1: IPointData, p2: IPointData): Point {
   return new Point(x, y);
 }
 
+/**
+ * 计算线段细分坐标--线段分成几份
+ * @param p1
+ * @param p2
+ * @param knife
+ * @returns
+ */
+export function calculateLineSegmentingPoint(
+  p1: IPointData,
+  p2: IPointData,
+  knife: number
+): IPointData[] {
+  const segmentingPoints: IPointData[] = [];
+  const x = p1.x < p2.x ? p1.x : p2.x;
+  const y = p1.y < p2.y ? p1.y : p2.y;
+  const w = Math.abs(p1.x - p2.x);
+  const h = Math.abs(p1.y - p2.y);
+  for (let i = 0; i < knife - 1; i++) {
+    const pointX = x + (w * (i + 1)) / knife;
+    const pointy = y + (h * (i + 1)) / knife;
+    segmentingPoints.push(new Point(pointX, pointy));
+  }
+  return segmentingPoints;
+}
+
 /**
  * 计算点到直线距离
  * @param p1