新增GateBox、SpksSwitch、StopPosition

bj-rtss-message

@@ -1 +1 @@
-Subproject commit 1736885b1a6902eb6276c645cfc4bc32b9d32487
+Subproject commit 8bfe7607b3def1979bae43d1f3623107740eadf0

public/drawIcon.svg

@@ -18,4 +18,23 @@
   <symbol id="icon-signal" viewBox="0 0 1024 1024">
   <path d="M63.33 895.64V127.99h64v767.65z" fill="#ffffff" p-id="1554"></path><path d="M750 365.57a146.25 146.25 0 1 1-103.36 42.83A145.29 145.29 0 0 1 750 365.57m0-64c-116.12 0-210.25 94.13-210.25 210.25S633.93 722.06 750 722.06s210.3-94.13 210.3-210.25S866.16 301.57 750 301.57z" fill="#ffffff" p-id="1555"></path><path d="M336.94 365.57a146 146 0 1 1-103.27 42.78 145.09 145.09 0 0 1 103.27-42.78m0-64c-116 0-210 94-210 210s94 210 210 210 210-94 210-210-94-210-210-210z" fill="#ffffff" p-id="1556"></path>
   </symbol>
+  <symbol id="icon-stop-position" viewBox="0 0 38 30" fill="none">
+    <path d="M2.58909 29L19 1.92901L35.4109 29H2.58909Z" stroke="#FFFFFF" stroke-width="2"/>
+    <path d="M14.8153 22.9119V21.8977L19.2898 14.8182H20.0256V16.3892H19.5284L16.1477 21.7386V21.8182H22.1733V22.9119H14.8153ZM19.608 25V22.6037V22.1314V14.8182H20.7812V25H19.608Z" fill="#FFFFFF"/>
+  </symbol>
+  <symbol id="icon-spks-switch" viewBox="0 0 35 34" fill="none">
+    <rect x="1" y="1" width="33" height="32" stroke="white" stroke-width="2"/>
+    <path d="M20.7727 14.2727C20.7045 13.697 20.428 13.25 19.9432 12.9318C19.4583 12.6136 18.8636 12.4545 18.1591 12.4545C17.6439 12.4545 17.1932 12.5379 16.8068 12.7045C16.4242 12.8712 16.125 13.1004 15.9091 13.392C15.697 13.6837 15.5909 14.0152 15.5909 14.3864C15.5909 14.697 15.6648 14.964 15.8125 15.1875C15.964 15.4072 16.1572 15.5909 16.392 15.7386C16.6269 15.8826 16.8731 16.0019 17.1307 16.0966C17.3883 16.1875 17.625 16.2614 17.8409 16.3182L19.0227 16.6364C19.3258 16.7159 19.6629 16.8258 20.0341 16.9659C20.4091 17.1061 20.767 17.2973 21.108 17.5398C21.4527 17.7784 21.7367 18.0852 21.9602 18.4602C22.1837 18.8352 22.2955 19.2955 22.2955 19.8409C22.2955 20.4697 22.1307 21.0379 21.8011 21.5455C21.4754 22.053 20.9981 22.4564 20.3693 22.7557C19.7443 23.0549 18.9848 23.2045 18.0909 23.2045C17.2576 23.2045 16.536 23.0701 15.9261 22.8011C15.3201 22.5322 14.8428 22.1572 14.4943 21.6761C14.1496 21.1951 13.9545 20.6364 13.9091 20H15.3636C15.4015 20.4394 15.5492 20.803 15.8068 21.0909C16.0682 21.375 16.3977 21.5871 16.7955 21.7273C17.197 21.8636 17.6288 21.9318 18.0909 21.9318C18.6288 21.9318 19.1117 21.8447 19.5398 21.6705C19.9678 21.4924 20.3068 21.2462 20.5568 20.9318C20.8068 20.6136 20.9318 20.2424 20.9318 19.8182C20.9318 19.4318 20.8239 19.1174 20.608 18.875C20.392 18.6326 20.108 18.4356 19.7557 18.2841C19.4034 18.1326 19.0227 18 18.6136 17.8864L17.1818 17.4773C16.2727 17.2159 15.553 16.8428 15.0227 16.358C14.4924 15.8731 14.2273 15.2386 14.2273 14.4545C14.2273 13.803 14.4034 13.2348 14.7557 12.75C15.1117 12.2614 15.589 11.8826 16.1875 11.6136C16.7898 11.3409 17.4621 11.2045 18.2045 11.2045C18.9545 11.2045 19.6212 11.339 20.2045 11.608C20.7879 11.8731 21.25 12.2367 21.5909 12.6989C21.9356 13.161 22.1174 13.6856 22.1364 14.2727H20.7727Z" fill="white"/>
+    <line y1="32" x2="35" y2="32" stroke="white" stroke-width="4"/>
+  </symbol>
+  <symbol id="icon-gated-box" viewBox="0 0 35 34" fill="none">
+    <rect x="1" y="1" width="33" height="32" stroke="white" stroke-width="2"/>
+    <path d="M14.4091 23V11.3636H18.3409C19.2538 11.3636 20 11.5284 20.5795 11.858C21.1629 12.1837 21.5947 12.625 21.875 13.1818C22.1553 13.7386 22.2955 14.3598 22.2955 15.0455C22.2955 15.7311 22.1553 16.3542 21.875 16.9148C21.5985 17.4754 21.1705 17.9223 20.5909 18.2557C20.0114 18.5852 19.2689 18.75 18.3636 18.75H15.5455V17.5H18.3182C18.9432 17.5 19.4451 17.392 19.8239 17.1761C20.2027 16.9602 20.4773 16.6686 20.6477 16.3011C20.822 15.9299 20.9091 15.5114 20.9091 15.0455C20.9091 14.5795 20.822 14.1629 20.6477 13.7955C20.4773 13.428 20.2008 13.1402 19.8182 12.9318C19.4356 12.7197 18.928 12.6136 18.2955 12.6136H15.8182V23H14.4091Z" fill="white"/>
+    <line y1="32" x2="35" y2="32" stroke="white" stroke-width="4"/>
+  </symbol>
+  <symbol id="icon-esb-button" viewBox="0 0 35 34" fill="none">
+    <rect x="1" y="1" width="33" height="32" stroke="white" stroke-width="2"/>
+    <line y1="32" x2="35" y2="32" stroke="white" stroke-width="4"/>
+    <circle cx="17.5" cy="16.5" r="7.5" fill="white"/>
+  </symbol>
 </svg>

src/components/draw-app/DrawProperties.vue

@@ -81,6 +81,15 @@
           <section-link-property
             v-else-if="drawStore.selectedGraphicType === SectionLink.Type"
           ></section-link-property>
+          <stop-position-property
+            v-else-if="drawStore.selectedGraphicType === StopPosition.Type"
+          ></stop-position-property>
+          <spks-switch-property
+            v-else-if="drawStore.selectedGraphicType === SpksSwitch.Type"
+          ></spks-switch-property>
+          <gated-box-property
+            v-else-if="drawStore.selectedGraphicType === GatedBox.Type"
+          ></gated-box-property>
         </q-card-section>
       </template>
     </q-card>
@@ -118,6 +127,12 @@ import { AxleCountingSection } from 'src/graphics/axleCountingSection/AxleCounti
 import { LogicSection } from 'src/graphics/logicSection/LogicSection';
 import { Separator } from 'src/graphics/separator/Separator';
 import { SectionLink } from 'src/graphics/sectionLink/SectionLink';
+import StopPositionProperty from './properties/StopPositionProperty.vue';
+import { StopPosition } from 'src/graphics/stopPosition/StopPosition';
+import SpksSwitchProperty from './properties/SpksSwitchProperty.vue';
+import { SpksSwitch } from 'src/graphics/spksSwitch/SpksSwitch';
+import GatedBoxProperty from './properties/GatedBoxProperty.vue';
+import { GatedBox } from 'src/graphics/gatedBox/GatedBox';
 
 const drawStore = useDrawStore();
 </script>

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

@@ -0,0 +1,45 @@
+<template>
+  <q-form>
+    <q-input outlined readonly v-model="gatedBoxModel.id" label="id" hint="" />
+    <q-input
+      outlined
+      v-model.number="gatedBoxModel.index"
+      type="number"
+      @blur="onUpdate"
+      label="索引"
+    />
+  </q-form>
+</template>
+
+<script setup lang="ts">
+import { GatedBoxData } from 'src/drawApp/graphics/GatedBoxInteraction';
+import { GatedBox } from 'src/graphics/gatedBox/GatedBox';
+import { useDrawStore } from 'src/stores/draw-store';
+import { onMounted, reactive, watch } from 'vue';
+
+const drawStore = useDrawStore();
+const gatedBoxModel = reactive(new GatedBoxData());
+drawStore.$subscribe;
+watch(
+  () => drawStore.selectedGraphic,
+  (val) => {
+    if (val && val.type == GatedBox.Type) {
+      gatedBoxModel.copyFrom(val.saveData() as GatedBoxData);
+    }
+  }
+);
+
+onMounted(() => {
+  const gatedBox = drawStore.selectedGraphic as GatedBox;
+  if (gatedBox) {
+    gatedBoxModel.copyFrom(gatedBox.saveData());
+  }
+});
+
+function onUpdate() {
+  const gatedBox = drawStore.selectedGraphic as GatedBox;
+  if (gatedBox) {
+    drawStore.getDrawApp().updateGraphicAndRecord(gatedBox, gatedBoxModel);
+  }
+}
+</script>

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

@@ -0,0 +1,51 @@
+<template>
+  <q-form>
+    <q-input
+      outlined
+      readonly
+      v-model="spksSwitchModel.id"
+      label="id"
+      hint=""
+    />
+    <q-input
+      outlined
+      v-model.number="spksSwitchModel.index"
+      type="number"
+      @blur="onUpdate"
+      label="索引"
+    />
+  </q-form>
+</template>
+
+<script setup lang="ts">
+import { SpksSwitchData } from 'src/drawApp/graphics/SpksSwitchInteraction';
+import { SpksSwitch } from 'src/graphics/spksSwitch/SpksSwitch';
+import { useDrawStore } from 'src/stores/draw-store';
+import { onMounted, reactive, watch } from 'vue';
+
+const drawStore = useDrawStore();
+const spksSwitchModel = reactive(new SpksSwitchData());
+drawStore.$subscribe;
+watch(
+  () => drawStore.selectedGraphic,
+  (val) => {
+    if (val && val.type == SpksSwitch.Type) {
+      spksSwitchModel.copyFrom(val.saveData() as SpksSwitchData);
+    }
+  }
+);
+
+onMounted(() => {
+  const spksSwitch = drawStore.selectedGraphic as SpksSwitch;
+  if (spksSwitch) {
+    spksSwitchModel.copyFrom(spksSwitch.saveData());
+  }
+});
+
+function onUpdate() {
+  const spksSwitch = drawStore.selectedGraphic as SpksSwitch;
+  if (spksSwitch) {
+    drawStore.getDrawApp().updateGraphicAndRecord(spksSwitch, spksSwitchModel);
+  }
+}
+</script>

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

@@ -0,0 +1,69 @@
+<template>
+  <q-form>
+    <q-input
+      outlined
+      readonly
+      v-model="stopPositionModel.id"
+      label="id"
+      hint=""
+    />
+    <q-input
+      outlined
+      v-model.number="stopPositionModel.index"
+      type="number"
+      @blur="onUpdate"
+      label="索引"
+    />
+    <q-select
+      outlined
+      v-model="stopPositionModel.coachNum"
+      :options="optionsCoachNum"
+      :map-options="true"
+      :emit-value="true"
+      @update:model-value="onUpdate"
+      label="编组数量"
+    />
+  </q-form>
+</template>
+
+<script setup lang="ts">
+import { StopPositionData } from 'src/drawApp/graphics/StopPositionInteraction';
+import { StopPosition, CoachNum } from 'src/graphics/stopPosition/StopPosition';
+import { useDrawStore } from 'src/stores/draw-store';
+import { onMounted, reactive, ref, watch } from 'vue';
+
+const drawStore = useDrawStore();
+const stopPositionModel = reactive(new StopPositionData());
+const optionsCoachNum = [
+  {
+    label: 4,
+    value: CoachNum.Four,
+  },
+  { label: 6, value: CoachNum.Six },
+];
+drawStore.$subscribe;
+watch(
+  () => drawStore.selectedGraphic,
+  (val) => {
+    if (val && val.type == StopPosition.Type) {
+      stopPositionModel.copyFrom(val.saveData() as StopPositionData);
+    }
+  }
+);
+
+onMounted(() => {
+  const stopPosition = drawStore.selectedGraphic as StopPosition;
+  if (stopPosition) {
+    stopPositionModel.copyFrom(stopPosition.saveData());
+  }
+});
+
+function onUpdate() {
+  const stopPosition = drawStore.selectedGraphic as StopPosition;
+  if (stopPosition) {
+    drawStore
+      .getDrawApp()
+      .updateGraphicAndRecord(stopPosition, stopPositionModel);
+  }
+}
+</script>

src/drawApp/graphics/GatedBoxInteraction.ts

@@ -0,0 +1,103 @@
+import * as pb_1 from 'google-protobuf';
+import { DisplayObject, FederatedMouseEvent } from 'pixi.js';
+import { GatedBox, IGatedBox } from 'src/graphics/gatedBox/GatedBox';
+import {
+  GraphicApp,
+  GraphicInteractionPlugin,
+  JlGraphic,
+} from 'src/jl-graphic';
+import { ContextMenu } from 'src/jl-graphic/ui/ContextMenu';
+import { MenuItemOptions } from 'src/jl-graphic/ui/Menu';
+
+import { graphicData } from 'src/protos/stationLayoutGraphics';
+import { GraphicDataBase } from './GraphicDataBase';
+
+export class GatedBoxData extends GraphicDataBase implements IGatedBox {
+  constructor(data?: graphicData.GatedBox) {
+    let gatedBox;
+    if (!data) {
+      gatedBox = new graphicData.GatedBox({
+        common: GraphicDataBase.defaultCommonInfo(GatedBox.Type),
+      });
+    } else {
+      gatedBox = data;
+    }
+    super(gatedBox);
+  }
+
+  public get data(): graphicData.GatedBox {
+    return this.getData<graphicData.GatedBox>();
+  }
+  get code(): string {
+    return this.data.code;
+  }
+  set code(v: string) {
+    this.data.code = v;
+  }
+  get flip(): boolean {
+    return this.data.flip;
+  }
+  set flip(v: boolean) {
+    this.data.flip = v;
+  }
+  get index(): number {
+    return this.data.index;
+  }
+  set index(v: number) {
+    this.data.index = v;
+  }
+  clone(): GatedBoxData {
+    return new GatedBoxData(this.data.cloneMessage());
+  }
+  copyFrom(data: GatedBoxData): void {
+    pb_1.Message.copyInto(data.data, this.data);
+  }
+  eq(other: GatedBoxData): boolean {
+    return pb_1.Message.equals(this.data, other.data);
+  }
+}
+
+const flipConfig: MenuItemOptions = {
+  name: '上下翻转',
+};
+const GatedBoxEditMenu: ContextMenu = ContextMenu.init({
+  name: 'Spks开关编辑菜单',
+  groups: [
+    {
+      items: [flipConfig],
+    },
+  ],
+});
+export class DrawGatedBoxInteraction extends GraphicInteractionPlugin<GatedBox> {
+  static Name = 'gated_box_draw_right_menu';
+  constructor(app: GraphicApp) {
+    super(DrawGatedBoxInteraction.Name, app);
+    app.registerMenu(GatedBoxEditMenu);
+  }
+  static init(app: GraphicApp) {
+    return new DrawGatedBoxInteraction(app);
+  }
+  filter(...grahpics: JlGraphic[]): GatedBox[] | undefined {
+    return grahpics
+      .filter((g) => g.type === GatedBox.Type)
+      .map((g) => g as GatedBox);
+  }
+  bind(g: GatedBox): void {
+    g.on('_rightclick', this.onContextMenu, this);
+  }
+
+  unbind(g: GatedBox): void {
+    g.off('_rightclick', this.onContextMenu, this);
+  }
+
+  onContextMenu(e: FederatedMouseEvent) {
+    const target = e.target as DisplayObject;
+    const gatedBox = target.getGraphic() as GatedBox;
+    this.app.updateSelected(gatedBox);
+    flipConfig.handler = () => {
+      gatedBox.datas.flip = !gatedBox.datas.flip;
+      gatedBox.repaint();
+    };
+    GatedBoxEditMenu.open(e.global);
+  }
+}

src/drawApp/graphics/SpksSwitchInteraction.ts

@@ -0,0 +1,103 @@
+import * as pb_1 from 'google-protobuf';
+import { DisplayObject, FederatedMouseEvent } from 'pixi.js';
+import { ISpksSwitch, SpksSwitch } from 'src/graphics/spksSwitch/SpksSwitch';
+import {
+  GraphicApp,
+  GraphicInteractionPlugin,
+  JlGraphic,
+} from 'src/jl-graphic';
+import { ContextMenu } from 'src/jl-graphic/ui/ContextMenu';
+import { MenuItemOptions } from 'src/jl-graphic/ui/Menu';
+
+import { graphicData } from 'src/protos/stationLayoutGraphics';
+import { GraphicDataBase } from './GraphicDataBase';
+
+export class SpksSwitchData extends GraphicDataBase implements ISpksSwitch {
+  constructor(data?: graphicData.SpksSwitch) {
+    let spksSwitch;
+    if (!data) {
+      spksSwitch = new graphicData.SpksSwitch({
+        common: GraphicDataBase.defaultCommonInfo(SpksSwitch.Type),
+      });
+    } else {
+      spksSwitch = data;
+    }
+    super(spksSwitch);
+  }
+
+  public get data(): graphicData.SpksSwitch {
+    return this.getData<graphicData.SpksSwitch>();
+  }
+  get code(): string {
+    return this.data.code;
+  }
+  set code(v: string) {
+    this.data.code = v;
+  }
+  get flip(): boolean {
+    return this.data.flip;
+  }
+  set flip(v: boolean) {
+    this.data.flip = v;
+  }
+  get index(): number {
+    return this.data.index;
+  }
+  set index(v: number) {
+    this.data.index = v;
+  }
+  clone(): SpksSwitchData {
+    return new SpksSwitchData(this.data.cloneMessage());
+  }
+  copyFrom(data: SpksSwitchData): void {
+    pb_1.Message.copyInto(data.data, this.data);
+  }
+  eq(other: SpksSwitchData): boolean {
+    return pb_1.Message.equals(this.data, other.data);
+  }
+}
+
+const flipConfig: MenuItemOptions = {
+  name: '上下翻转',
+};
+const SpksSwitchEditMenu: ContextMenu = ContextMenu.init({
+  name: 'Spks开关编辑菜单',
+  groups: [
+    {
+      items: [flipConfig],
+    },
+  ],
+});
+export class DrawSpksSwitchInteraction extends GraphicInteractionPlugin<SpksSwitch> {
+  static Name = 'spks_switch_draw_right_menu';
+  constructor(app: GraphicApp) {
+    super(DrawSpksSwitchInteraction.Name, app);
+    app.registerMenu(SpksSwitchEditMenu);
+  }
+  static init(app: GraphicApp) {
+    return new DrawSpksSwitchInteraction(app);
+  }
+  filter(...grahpics: JlGraphic[]): SpksSwitch[] | undefined {
+    return grahpics
+      .filter((g) => g.type === SpksSwitch.Type)
+      .map((g) => g as SpksSwitch);
+  }
+  bind(g: SpksSwitch): void {
+    g.on('_rightclick', this.onContextMenu, this);
+  }
+
+  unbind(g: SpksSwitch): void {
+    g.off('_rightclick', this.onContextMenu, this);
+  }
+
+  onContextMenu(e: FederatedMouseEvent) {
+    const target = e.target as DisplayObject;
+    const spksSwitch = target.getGraphic() as SpksSwitch;
+    this.app.updateSelected(spksSwitch);
+    flipConfig.handler = () => {
+      spksSwitch.datas.flip = !spksSwitch.datas.flip;
+      spksSwitch.repaint();
+    };
+    SpksSwitchEditMenu.open(e.global);
+  }
+}

src/drawApp/graphics/StopPositionInteraction.ts

@@ -0,0 +1,112 @@
+import * as pb_1 from 'google-protobuf';
+import { DisplayObject, FederatedMouseEvent } from 'pixi.js';
+import {
+  IStopPosition,
+  StopPosition,
+} from 'src/graphics/stopPosition/StopPosition';
+import {
+  GraphicApp,
+  GraphicInteractionPlugin,
+  JlGraphic,
+} from 'src/jl-graphic';
+import { ContextMenu } from 'src/jl-graphic/ui/ContextMenu';
+import { MenuItemOptions } from 'src/jl-graphic/ui/Menu';
+
+import { graphicData } from 'src/protos/stationLayoutGraphics';
+import { GraphicDataBase } from './GraphicDataBase';
+
+export class StopPositionData extends GraphicDataBase implements IStopPosition {
+  constructor(data?: graphicData.StopPosition) {
+    let stopPosition;
+    if (!data) {
+      stopPosition = new graphicData.StopPosition({
+        common: GraphicDataBase.defaultCommonInfo(StopPosition.Type),
+      });
+    } else {
+      stopPosition = data;
+    }
+    super(stopPosition);
+  }
+
+  public get data(): graphicData.StopPosition {
+    return this.getData<graphicData.StopPosition>();
+  }
+  get code(): string {
+    return this.data.code;
+  }
+  set code(v: string) {
+    this.data.code = v;
+  }
+  get coachNum(): graphicData.StopPosition.CoachNum {
+    return this.data.coachNum;
+  }
+  set coachNum(v: graphicData.StopPosition.CoachNum) {
+    this.data.coachNum = v;
+  }
+  get flip(): boolean {
+    return this.data.flip;
+  }
+  set flip(v: boolean) {
+    this.data.flip = v;
+  }
+  get index(): number {
+    return this.data.index;
+  }
+  set index(v: number) {
+    this.data.index = v;
+  }
+  clone(): StopPositionData {
+    return new StopPositionData(this.data.cloneMessage());
+  }
+  copyFrom(data: StopPositionData): void {
+    pb_1.Message.copyInto(data.data, this.data);
+  }
+  eq(other: StopPositionData): boolean {
+    return pb_1.Message.equals(this.data, other.data);
+  }
+}
+
+const flipConfig: MenuItemOptions = {
+  name: '上下翻转',
+};
+const StopPositionEditMenu: ContextMenu = ContextMenu.init({
+  name: '停车标志位编辑菜单',
+  groups: [
+    {
+      items: [flipConfig],
+    },
+  ],
+});
+export class DrawStopPositionInteraction extends GraphicInteractionPlugin<StopPosition> {
+  static Name = 'stop_position_draw_right_menu';
+  constructor(app: GraphicApp) {
+    super(DrawStopPositionInteraction.Name, app);
+    app.registerMenu(StopPositionEditMenu);
+  }
+  static init(app: GraphicApp) {
+    return new DrawStopPositionInteraction(app);
+  }
+  filter(...grahpics: JlGraphic[]): StopPosition[] | undefined {
+    return grahpics
+      .filter((g) => g.type === StopPosition.Type)
+      .map((g) => g as StopPosition);
+  }
+  bind(g: StopPosition): void {
+    g.on('_rightclick', this.onContextMenu, this);
+  }
+
+  unbind(g: StopPosition): void {
+    g.off('_rightclick', this.onContextMenu, this);
+  }
+
+  onContextMenu(e: FederatedMouseEvent) {
+    const target = e.target as DisplayObject;
+    const stopPosition = target.getGraphic() as StopPosition;
+    this.app.updateSelected(stopPosition);
+    flipConfig.handler = () => {
+      stopPosition.datas.flip = !stopPosition.datas.flip;
+      stopPosition.repaint();
+    };
+    StopPositionEditMenu.open(e.global);
+  }
+}

src/drawApp/index.ts

@@ -73,8 +73,32 @@ import {
   LogicSectionTemplate,
 } from 'src/graphics/logicSection/LogicSection';
 import { LogicSectionData } from './graphics/LogicSectionInteraction';
+import { StopPositionDraw } from 'src/graphics/stopPosition/StopPositionDrawAssistant';
+import {
+  StopPosition,
+  StopPositionTemplate,
+} from 'src/graphics/stopPosition/StopPosition';
+import {
+  StopPositionData,
+  DrawStopPositionInteraction,
+} from './graphics/StopPositionInteraction';
+import {
+  SpksSwitch,
+  SpksSwitchTemplate,
+} from 'src/graphics/spksSwitch/SpksSwitch';
+import {
+  SpksSwitchData,
+  DrawSpksSwitchInteraction,
+} from './graphics/SpksSwitchInteraction';
+import { GatedBox, GatedBoxTemplate } from 'src/graphics/gatedBox/GatedBox';
+import {
+  GatedBoxData,
+  DrawGatedBoxInteraction,
+} from './graphics/GatedBoxInteraction';
 import { Notify, Dialog } from 'quasar';
 import { checkMapData } from 'src/api/Simulation';
+import { SpksSwitchDraw } from 'src/graphics/spksSwitch/SpksSwitchDrawAssistant';
+import { GatedBoxDraw } from 'src/graphics/gatedBox/GatedBoxDrawAssistant';
 
 // export function fromStoragePoint(p: graphicData.Point): Point {
 //   return new Point(p.x, p.y);
@@ -207,6 +231,9 @@ export function initDrawApp(dom: HTMLElement): JlDrawApp {
     | SectionLinkDraw
     | AxleCountingSectionDraw
     | LogicSectionDraw
+    | StopPositionDraw
+    | SpksSwitchDraw
+    | GatedBoxDraw
   )[] = [];
   if (draftType === 'Line') {
     drawAssistants = [
@@ -244,8 +271,17 @@ export function initDrawApp(dom: HTMLElement): JlDrawApp {
         app,
         new LogicSectionTemplate(new LogicSectionData())
       ),
+      new StopPositionDraw(
+        app,
+        new StopPositionTemplate(new StopPositionData())
+      ),
+      new SpksSwitchDraw(app, new SpksSwitchTemplate(new SpksSwitchData())),
+      new GatedBoxDraw(app, new GatedBoxTemplate(new GatedBoxData())),
     ];
     DrawSignalInteraction.init(app);
+    DrawStopPositionInteraction.init(app);
+    DrawSpksSwitchInteraction.init(app);
+    DrawGatedBoxInteraction.init(app);
   }
   const isSupportDeletion = (g: JlGraphic) => {
     if (g.type === LogicSection.Type && g.selected) {
@@ -437,6 +473,15 @@ export function saveDrawDatas(app: JlDrawApp) {
     } else if (LogicSection.Type === g.type) {
       const logicSectionData = (g as LogicSection).saveData();
       storage.logicSections.push((logicSectionData as LogicSectionData).data);
+    } else if (StopPosition.Type === g.type) {
+      const stopPositionData = (g as StopPosition).saveData();
+      storage.stopPositions.push((stopPositionData as StopPositionData).data);
+    } else if (SpksSwitch.Type === g.type) {
+      const spksSwitchData = (g as SpksSwitch).saveData();
+      storage.spksSwitchs.push((spksSwitchData as SpksSwitchData).data);
+    } else if (GatedBox.Type === g.type) {
+      const gatedBoxData = (g as GatedBox).saveData();
+      storage.gateBoxs.push((gatedBoxData as GatedBoxData).data);
     }
   });
   const base64 = fromUint8Array(storage.serialize());
@@ -505,6 +550,15 @@ export async function loadDrawDatas(app: GraphicApp) {
     storage.logicSections.forEach((logicSection) => {
       datas.push(new LogicSectionData(logicSection));
     });
+    storage.stopPositions.forEach((stopPosition) => {
+      datas.push(new StopPositionData(stopPosition));
+    });
+    storage.spksSwitchs.forEach((spksSwitch) => {
+      datas.push(new SpksSwitchData(spksSwitch));
+    });
+    storage.gateBoxs.forEach((gatedBox) => {
+      datas.push(new GatedBoxData(gatedBox));
+    });
     await app.loadGraphic(datas);
   } else {
     app.loadGraphic([]);

src/graphics/gatedBox/GatedBox.ts

@@ -0,0 +1,91 @@
+import { Graphics } from 'pixi.js';
+import {
+  GraphicData,
+  JlGraphic,
+  JlGraphicTemplate,
+  VectorText,
+} from 'src/jl-graphic';
+
+export interface IGatedBox extends GraphicData {
+  get code(): string;
+  set code(v: string);
+  get flip(): boolean;
+  set flip(v: boolean);
+  get index(): number;
+  set index(v: number);
+  clone(): IGatedBox;
+  copyFrom(data: IGatedBox): void;
+  eq(other: IGatedBox): boolean;
+}
+
+const gatedBoxConsts = {
+  codeFontSize: 12,
+  codeColor: 0xffffff,
+  bodyLineColor: 0xffffff,
+  bodyLineWidth: 4,
+  bodyRectLineColor: 0xffffff,
+  bodyRectLineWidth: 2,
+  bodyRectWidth: 20,
+  bodyRectHeight: 20,
+  bodyColor: 0x000000,
+};
+export class GatedBox extends JlGraphic {
+  static Type = 'gatedBox';
+  codeGraph: VectorText = new VectorText(''); // 编组数量
+  rectBody: Graphics = new Graphics();
+  lineBody: Graphics = new Graphics();
+
+  constructor() {
+    super(GatedBox.Type);
+    this.addChild(this.codeGraph);
+    this.addChild(this.rectBody);
+    this.addChild(this.lineBody);
+  }
+  get datas(): IGatedBox {
+    return this.getDatas<IGatedBox>();
+  }
+  get code(): string {
+    return this.datas.index + '';
+  }
+  doRepaint(): void {
+    const codeGraph = this.codeGraph;
+    codeGraph.text = this.datas.code;
+    codeGraph.style.fill = gatedBoxConsts.codeColor;
+    codeGraph.setVectorFontSize(gatedBoxConsts.codeFontSize);
+    codeGraph.anchor.set(0.5);
+    this.rectBody.clear();
+    this.rectBody.beginFill(gatedBoxConsts.bodyColor, 0);
+    this.rectBody.lineStyle(
+      gatedBoxConsts.bodyRectLineWidth,
+      gatedBoxConsts.bodyRectLineColor
+    );
+    this.rectBody.drawRect(
+      -gatedBoxConsts.bodyRectWidth / 2,
+      -gatedBoxConsts.bodyRectHeight / 2,
+      gatedBoxConsts.bodyRectWidth,
+      gatedBoxConsts.bodyRectHeight
+    );
+    this.rectBody.endFill();
+    this.lineBody.clear();
+    const lineY = this.datas.flip
+      ? gatedBoxConsts.bodyRectHeight / 2
+      : -gatedBoxConsts.bodyRectHeight / 2;
+    this.lineBody.lineStyle(
+      gatedBoxConsts.bodyLineWidth,
+      gatedBoxConsts.bodyLineColor
+    );
+    this.lineBody.moveTo(-gatedBoxConsts.bodyRectWidth / 2, lineY);
+    this.lineBody.lineTo(gatedBoxConsts.bodyRectWidth / 2, lineY);
+  }
+}
+
+export class GatedBoxTemplate extends JlGraphicTemplate<GatedBox> {
+  constructor(dataTemplate: IGatedBox) {
+    super(GatedBox.Type, { dataTemplate });
+  }
+  new(): GatedBox {
+    const gatedBox = new GatedBox();
+    gatedBox.loadData(this.datas);
+    return gatedBox;
+  }
+}

src/graphics/gatedBox/GatedBoxDrawAssistant.ts

@@ -0,0 +1,118 @@
+import { DisplayObject, FederatedMouseEvent, Point } from 'pixi.js';
+import {
+  AbsorbableLine,
+  AbsorbablePosition,
+  GraphicDrawAssistant,
+  GraphicInteractionPlugin,
+  GraphicTransformEvent,
+  JlDrawApp,
+  JlGraphic,
+} from 'src/jl-graphic';
+import { GatedBox, GatedBoxTemplate, IGatedBox } from './GatedBox';
+
+export interface IGatedBoxDrawOptions {
+  newData: () => IGatedBox;
+}
+export class GatedBoxDraw extends GraphicDrawAssistant<
+  GatedBoxTemplate,
+  IGatedBox
+> {
+  _gatedBox: GatedBox | null = null;
+  constructor(app: JlDrawApp, template: GatedBoxTemplate) {
+    super(
+      app,
+      template,
+      'svguse:../../drawIcon.svg#icon-gated-box',
+      '设置门控箱GatedBox'
+    );
+    GatedBoxInteraction.init(app);
+  }
+  public get gatedBox(): GatedBox {
+    if (!this._gatedBox) {
+      this._gatedBox = this.graphicTemplate.new();
+      this._gatedBox.loadData(this.graphicTemplate.datas);
+      this.container.addChild(this._gatedBox);
+    }
+    return this._gatedBox;
+  }
+
+  onRightClick(): void {
+    this.createAndStore(true);
+  }
+
+  onLeftUp(e: FederatedMouseEvent): void {
+    this.container.position.copyFrom(this.toCanvasCoordinates(e.global));
+    this.createAndStore(true);
+  }
+
+  redraw(p: Point): void {
+    this.gatedBox.repaint();
+    this.container.position.set(p.x, p.y);
+  }
+
+  prepareData(data: IGatedBox): boolean {
+    data.transform = this.container.saveTransform();
+    data.code = 'P';
+    return true;
+  }
+}
+/**
+ * 构建吸附线
+ * @param gatedBox
+ */
+function buildAbsorbablePositions(gatedBox: GatedBox): AbsorbablePosition[] {
+  const aps: AbsorbablePosition[] = [];
+  const gatedBoxs = gatedBox.queryStore.queryByType<GatedBox>(GatedBox.Type);
+  const canvas = gatedBox.getCanvas();
+  gatedBoxs.forEach((item) => {
+    if (item.id === gatedBox.id) {
+      return;
+    }
+    const ala = new AbsorbableLine(
+      new Point(item.x, 0),
+      new Point(item.x, canvas.height)
+    );
+    const alb = new AbsorbableLine(
+      new Point(0, item.y),
+      new Point(canvas.width, item.y)
+    );
+    aps.push(ala);
+    aps.push(alb);
+  });
+  return aps;
+}
+
+export class GatedBoxInteraction extends GraphicInteractionPlugin<GatedBox> {
+  static Name = 'gated_box_transform';
+  constructor(app: JlDrawApp) {
+    super(GatedBoxInteraction.Name, app);
+  }
+  static init(app: JlDrawApp) {
+    return new GatedBoxInteraction(app);
+  }
+  filter(...grahpics: JlGraphic[]): GatedBox[] | undefined {
+    return grahpics
+      .filter((g) => g.type === GatedBox.Type)
+      .map((g) => g as GatedBox);
+  }
+  bind(g: GatedBox): void {
+    g.eventMode = 'static';
+    g.cursor = 'pointer';
+    g.scalable = true;
+    g.rotatable = true;
+    g.on('transformstart', this.transformstart, this);
+  }
+  unbind(g: GatedBox): void {
+    g.eventMode = 'none';
+    g.scalable = false;
+    g.rotatable = false;
+    g.off('transformstart', this.transformstart, this);
+  }
+  transformstart(e: GraphicTransformEvent) {
+    const target = e.target as DisplayObject;
+    const gatedBox = target.getGraphic() as GatedBox;
+    gatedBox.getGraphicApp().setOptions({
+      absorbablePositions: buildAbsorbablePositions(gatedBox),
+    });
+  }
+}

src/graphics/signal/SignalDrawAssistant.ts

@@ -29,14 +29,14 @@ export class SignalDraw extends GraphicDrawAssistant<
       '信号机Signal'
     );
 
-    signalInteraction.init(app);
+    SignalInteraction.init(app);
   }
 
   public get signal(): Signal {
     if (!this._signal) {
       this._signal = this.graphicTemplate.new();
-      this.signal.loadData(this.graphicTemplate.datas);
+      this._signal.loadData(this.graphicTemplate.datas);
-      this.container.addChild(this.signal);
+      this.container.addChild(this._signal);
     }
     return this._signal;
   }
@@ -111,13 +111,13 @@ function buildCodeAbsorbablePositions(signal: Signal): AbsorbablePosition[] {
   return aps;
 }
 
-export class signalInteraction extends GraphicInteractionPlugin<Signal> {
+export class SignalInteraction extends GraphicInteractionPlugin<Signal> {
   static Name = 'signal_transform';
   constructor(app: JlDrawApp) {
-    super(signalInteraction.Name, app);
+    super(SignalInteraction.Name, app);
   }
   static init(app: JlDrawApp) {
-    return new signalInteraction(app);
+    return new SignalInteraction(app);
   }
   filter(...grahpics: JlGraphic[]): Signal[] | undefined {
     return grahpics

src/graphics/spksSwitch/SpksSwitch.ts

@@ -0,0 +1,91 @@
+import { Graphics } from 'pixi.js';
+import {
+  GraphicData,
+  JlGraphic,
+  JlGraphicTemplate,
+  VectorText,
+} from 'src/jl-graphic';
+
+export interface ISpksSwitch extends GraphicData {
+  get code(): string;
+  set code(v: string);
+  get flip(): boolean;
+  set flip(v: boolean);
+  get index(): number;
+  set index(v: number);
+  clone(): ISpksSwitch;
+  copyFrom(data: ISpksSwitch): void;
+  eq(other: ISpksSwitch): boolean;
+}
+
+const spksSwitchConsts = {
+  codeFontSize: 12,
+  codeColor: 0xffffff,
+  bodyLineColor: 0xffffff,
+  bodyLineWidth: 4,
+  bodyRectLineColor: 0xffffff,
+  bodyRectLineWidth: 2,
+  bodyRectWidth: 20,
+  bodyRectHeight: 20,
+  bodyColor: 0x000000,
+};
+export class SpksSwitch extends JlGraphic {
+  static Type = 'spksSwitch';
+  codeGraph: VectorText = new VectorText(''); // 编组数量
+  rectBody: Graphics = new Graphics();
+  lineBody: Graphics = new Graphics();
+
+  constructor() {
+    super(SpksSwitch.Type);
+    this.addChild(this.codeGraph);
+    this.addChild(this.rectBody);
+    this.addChild(this.lineBody);
+  }
+  get datas(): ISpksSwitch {
+    return this.getDatas<ISpksSwitch>();
+  }
+  get code(): string {
+    return this.datas.index + '';
+  }
+  doRepaint(): void {
+    const codeGraph = this.codeGraph;
+    codeGraph.text = this.datas.code;
+    codeGraph.style.fill = spksSwitchConsts.codeColor;
+    codeGraph.setVectorFontSize(spksSwitchConsts.codeFontSize);
+    codeGraph.anchor.set(0.5);
+    this.rectBody.clear();
+    this.rectBody.beginFill(spksSwitchConsts.bodyColor, 0);
+    this.rectBody.lineStyle(
+      spksSwitchConsts.bodyRectLineWidth,
+      spksSwitchConsts.bodyRectLineColor
+    );
+    this.rectBody.drawRect(
+      -spksSwitchConsts.bodyRectWidth / 2,
+      -spksSwitchConsts.bodyRectHeight / 2,
+      spksSwitchConsts.bodyRectWidth,
+      spksSwitchConsts.bodyRectHeight
+    );
+    this.rectBody.endFill();
+    this.lineBody.clear();
+    const lineY = this.datas.flip
+      ? spksSwitchConsts.bodyRectHeight / 2
+      : -spksSwitchConsts.bodyRectHeight / 2;
+    this.lineBody.lineStyle(
+      spksSwitchConsts.bodyLineWidth,
+      spksSwitchConsts.bodyLineColor
+    );
+    this.lineBody.moveTo(-spksSwitchConsts.bodyRectWidth / 2, lineY);
+    this.lineBody.lineTo(spksSwitchConsts.bodyRectWidth / 2, lineY);
+  }
+}
+
+export class SpksSwitchTemplate extends JlGraphicTemplate<SpksSwitch> {
+  constructor(dataTemplate: ISpksSwitch) {
+    super(SpksSwitch.Type, { dataTemplate });
+  }
+  new(): SpksSwitch {
+    const spksSwitch = new SpksSwitch();
+    spksSwitch.loadData(this.datas);
+    return spksSwitch;
+  }
+}

src/graphics/spksSwitch/SpksSwitchDrawAssistant.ts

@@ -0,0 +1,122 @@
+import { DisplayObject, FederatedMouseEvent, Point } from 'pixi.js';
+import {
+  AbsorbableLine,
+  AbsorbablePosition,
+  GraphicDrawAssistant,
+  GraphicInteractionPlugin,
+  GraphicTransformEvent,
+  JlDrawApp,
+  JlGraphic,
+} from 'src/jl-graphic';
+import { ISpksSwitch, SpksSwitch, SpksSwitchTemplate } from './SpksSwitch';
+
+export interface ISpksSwitchDrawOptions {
+  newData: () => ISpksSwitch;
+}
+export class SpksSwitchDraw extends GraphicDrawAssistant<
+  SpksSwitchTemplate,
+  ISpksSwitch
+> {
+  _spksSwitch: SpksSwitch | null = null;
+  constructor(app: JlDrawApp, template: SpksSwitchTemplate) {
+    super(
+      app,
+      template,
+      'svguse:../../drawIcon.svg#icon-spks-switch',
+      'Spks开关SpksSwitch'
+    );
+    SpksSwitchInteraction.init(app);
+  }
+  public get spksSwitch(): SpksSwitch {
+    if (!this._spksSwitch) {
+      this._spksSwitch = this.graphicTemplate.new();
+      this._spksSwitch.loadData(this.graphicTemplate.datas);
+      this.container.addChild(this._spksSwitch);
+    }
+    return this._spksSwitch;
+  }
+
+  onRightClick(): void {
+    this.createAndStore(true);
+  }
+
+  onLeftUp(e: FederatedMouseEvent): void {
+    this.container.position.copyFrom(this.toCanvasCoordinates(e.global));
+    this.createAndStore(true);
+  }
+
+  redraw(p: Point): void {
+    this.spksSwitch.repaint();
+    this.container.position.set(p.x, p.y);
+  }
+
+  prepareData(data: ISpksSwitch): boolean {
+    data.transform = this.container.saveTransform();
+    data.code = 'S';
+    return true;
+  }
+}
+/**
+ * 构建吸附线
+ * @param spksSwitch
+ */
+function buildAbsorbablePositions(
+  spksSwitch: SpksSwitch
+): AbsorbablePosition[] {
+  const aps: AbsorbablePosition[] = [];
+  const spksSwitchs = spksSwitch.queryStore.queryByType<SpksSwitch>(
+    SpksSwitch.Type
+  );
+  const canvas = spksSwitch.getCanvas();
+  spksSwitchs.forEach((item) => {
+    if (item.id === spksSwitch.id) {
+      return;
+    }
+    const ala = new AbsorbableLine(
+      new Point(item.x, 0),
+      new Point(item.x, canvas.height)
+    );
+    const alb = new AbsorbableLine(
+      new Point(0, item.y),
+      new Point(canvas.width, item.y)
+    );
+    aps.push(ala);
+    aps.push(alb);
+  });
+  return aps;
+}
+
+export class SpksSwitchInteraction extends GraphicInteractionPlugin<SpksSwitch> {
+  static Name = 'spks_switch_transform';
+  constructor(app: JlDrawApp) {
+    super(SpksSwitchInteraction.Name, app);
+  }
+  static init(app: JlDrawApp) {
+    return new SpksSwitchInteraction(app);
+  }
+  filter(...grahpics: JlGraphic[]): SpksSwitch[] | undefined {
+    return grahpics
+      .filter((g) => g.type === SpksSwitch.Type)
+      .map((g) => g as SpksSwitch);
+  }
+  bind(g: SpksSwitch): void {
+    g.eventMode = 'static';
+    g.cursor = 'pointer';
+    g.scalable = true;
+    g.rotatable = true;
+    g.on('transformstart', this.transformstart, this);
+  }
+  unbind(g: SpksSwitch): void {
+    g.eventMode = 'none';
+    g.scalable = false;
+    g.rotatable = false;
+    g.off('transformstart', this.transformstart, this);
+  }
+  transformstart(e: GraphicTransformEvent) {
+    const target = e.target as DisplayObject;
+    const spksSwitch = target.getGraphic() as SpksSwitch;
+    spksSwitch.getGraphicApp().setOptions({
+      absorbablePositions: buildAbsorbablePositions(spksSwitch),
+    });
+  }
+}

src/graphics/stopPosition/StopPosition.ts

@@ -0,0 +1,92 @@
+import { Graphics } from 'pixi.js';
+import {
+  GraphicData,
+  JlGraphic,
+  JlGraphicTemplate,
+  VectorText,
+} from 'src/jl-graphic';
+
+export enum CoachNum {
+  Four = 0,
+  Six = 1,
+}
+
+export interface IStopPosition extends GraphicData {
+  get code(): string;
+  set code(v: string);
+  get flip(): boolean;
+  set flip(v: boolean);
+  get coachNum(): CoachNum;
+  set coachNum(v: CoachNum);
+  get index(): number;
+  set index(v: number);
+  clone(): IStopPosition;
+  copyFrom(data: IStopPosition): void;
+  eq(other: IStopPosition): boolean;
+}
+
+const stopPositionConsts = {
+  codeFontSize: 12,
+  codeColor: 0xff0000,
+  bodyLineColor: 0xff0000,
+  bodyLineWidth: 2,
+  bodyColor: 0x000000,
+  radius: 10,
+};
+export class StopPosition extends JlGraphic {
+  static Type = 'stopPosition';
+  codeGraph: VectorText = new VectorText(''); // 编组数量
+  signBody: Graphics = new Graphics();
+
+  constructor() {
+    super(StopPosition.Type);
+    this.addChild(this.codeGraph);
+    this.addChild(this.signBody);
+  }
+  get datas(): IStopPosition {
+    return this.getDatas<IStopPosition>();
+  }
+  get code(): string {
+    return this.datas.index + '';
+  }
+  doRepaint(): void {
+    const codeGraph = this.codeGraph;
+    if (this.datas.coachNum === CoachNum.Four) {
+      codeGraph.text = '4';
+    } else if (this.datas.coachNum === CoachNum.Six) {
+      codeGraph.text = '6';
+    }
+    codeGraph.style.fill = stopPositionConsts.codeColor;
+    codeGraph.setVectorFontSize(stopPositionConsts.codeFontSize);
+    codeGraph.anchor.set(0.5);
+    this.signBody.clear();
+    this.signBody.beginFill(stopPositionConsts.bodyColor, 0);
+    if (this.signBody.drawRegularPolygon) {
+      this.signBody.lineStyle(
+        stopPositionConsts.bodyLineWidth,
+        stopPositionConsts.bodyLineColor
+      );
+      const rotation = this.datas.flip ? 0 : Math.PI;
+      this.signBody.drawRegularPolygon(
+        0,
+        0,
+        stopPositionConsts.radius,
+        3,
+        rotation
+      );
+    }
+    this.signBody.endFill();
+  }
+}
+
+export class StopPositionTemplate extends JlGraphicTemplate<StopPosition> {
+  coachNum: CoachNum = CoachNum.Four;
+  constructor(dataTemplate: IStopPosition) {
+    super(StopPosition.Type, { dataTemplate });
+  }
+  new(): StopPosition {
+    const stopPosition = new StopPosition();
+    stopPosition.loadData(this.datas);
+    return stopPosition;
+  }
+}

src/graphics/stopPosition/StopPositionDrawAssistant.ts

@@ -0,0 +1,125 @@
+import { DisplayObject, FederatedMouseEvent, Point } from 'pixi.js';
+import {
+  AbsorbableLine,
+  AbsorbablePosition,
+  GraphicDrawAssistant,
+  GraphicInteractionPlugin,
+  GraphicTransformEvent,
+  JlDrawApp,
+  JlGraphic,
+} from 'src/jl-graphic';
+import {
+  IStopPosition,
+  StopPosition,
+  StopPositionTemplate,
+} from './StopPosition';
+
+export interface IStopPositionDrawOptions {
+  newData: () => IStopPosition;
+}
+export class StopPositionDraw extends GraphicDrawAssistant<
+  StopPositionTemplate,
+  IStopPosition
+> {
+  _stopPosition: StopPosition | null = null;
+  constructor(app: JlDrawApp, template: StopPositionTemplate) {
+    super(
+      app,
+      template,
+      'svguse:../../drawIcon.svg#icon-stop-position',
+      '停车位置标StopPosition'
+    );
+    StopPositionInteraction.init(app);
+  }
+  public get stopPosition(): StopPosition {
+    if (!this._stopPosition) {
+      this._stopPosition = this.graphicTemplate.new();
+      this._stopPosition.loadData(this.graphicTemplate.datas);
+      this.container.addChild(this._stopPosition);
+    }
+    return this._stopPosition;
+  }
+
+  onRightClick(): void {
+    this.createAndStore(true);
+  }
+
+  onLeftUp(e: FederatedMouseEvent): void {
+    this.container.position.copyFrom(this.toCanvasCoordinates(e.global));
+    this.createAndStore(true);
+  }
+
+  redraw(p: Point): void {
+    this.stopPosition.repaint();
+    this.container.position.set(p.x, p.y);
+  }
+
+  prepareData(data: IStopPosition): boolean {
+    data.transform = this.container.saveTransform();
+    return true;
+  }
+}
+/**
+ * 构建吸附线
+ * @param spksSwitch
+ */
+function buildAbsorbablePositions(
+  stopPosition: StopPosition
+): AbsorbablePosition[] {
+  const aps: AbsorbablePosition[] = [];
+  const stopPositions = stopPosition.queryStore.queryByType<StopPosition>(
+    StopPosition.Type
+  );
+  const canvas = stopPosition.getCanvas();
+  stopPositions.forEach((item) => {
+    if (item.id === stopPosition.id) {
+      return;
+    }
+    const ala = new AbsorbableLine(
+      new Point(item.x, 0),
+      new Point(item.x, canvas.height)
+    );
+    const alb = new AbsorbableLine(
+      new Point(0, item.y),
+      new Point(canvas.width, item.y)
+    );
+    aps.push(ala);
+    aps.push(alb);
+  });
+  return aps;
+}
+
+export class StopPositionInteraction extends GraphicInteractionPlugin<StopPosition> {
+  static Name = 'stop_position_transform';
+  constructor(app: JlDrawApp) {
+    super(StopPositionInteraction.Name, app);
+  }
+  static init(app: JlDrawApp) {
+    return new StopPositionInteraction(app);
+  }
+  filter(...grahpics: JlGraphic[]): StopPosition[] | undefined {
+    return grahpics
+      .filter((g) => g.type === StopPosition.Type)
+      .map((g) => g as StopPosition);
+  }
+  bind(g: StopPosition): void {
+    g.eventMode = 'static';
+    g.cursor = 'pointer';
+    g.scalable = true;
+    g.rotatable = true;
+    g.on('transformstart', this.transformstart, this);
+  }
+  unbind(g: StopPosition): void {
+    g.eventMode = 'none';
+    g.scalable = false;
+    g.rotatable = false;
+    g.off('transformstart', this.transformstart, this);
+  }
+  transformstart(e: GraphicTransformEvent) {
+    const target = e.target as DisplayObject;
+    const stopPosition = target.getGraphic() as StopPosition;
+    stopPosition.getGraphicApp().setOptions({
+      absorbablePositions: buildAbsorbablePositions(stopPosition),
+    });
+  }
+}

src/protos/stationLayoutGraphics.ts

@@ -21,9 +21,9 @@ export namespace graphicData {
             axleCountingSections?: AxleCountingSection[];
             logicSections?: LogicSection[];
             stopPositions?: StopPosition[];
-            skpsSwitchs?: SkpsSwitch[];
+            spksSwitchs?: SpksSwitch[];
             esbButtons?: EsbButton[];
-            gateBox?: GatedBox[];
+            gateBoxs?: GatedBox[];
         }) {
             super();
             pb_1.Message.initialize(this, Array.isArray(data) ? data : [], 0, -1, [4, 5, 8, 9, 10, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21], this.#one_of_decls);
@@ -67,14 +67,14 @@ export namespace graphicData {
                 if ("stopPositions" in data && data.stopPositions != undefined) {
                     this.stopPositions = data.stopPositions;
                 }
-                if ("skpsSwitchs" in data && data.skpsSwitchs != undefined) {
+                if ("spksSwitchs" in data && data.spksSwitchs != undefined) {
-                    this.skpsSwitchs = data.skpsSwitchs;
+                    this.spksSwitchs = data.spksSwitchs;
                 }
                 if ("esbButtons" in data && data.esbButtons != undefined) {
                     this.esbButtons = data.esbButtons;
                 }
-                if ("gateBox" in data && data.gateBox != undefined) {
+                if ("gateBoxs" in data && data.gateBoxs != undefined) {
-                    this.gateBox = data.gateBox;
+                    this.gateBoxs = data.gateBoxs;
                 }
             }
         }
@@ -159,10 +159,10 @@ export namespace graphicData {
         set stopPositions(value: StopPosition[]) {
             pb_1.Message.setRepeatedWrapperField(this, 18, value);
         }
-        get skpsSwitchs() {
+        get spksSwitchs() {
-            return pb_1.Message.getRepeatedWrapperField(this, SkpsSwitch, 19) as SkpsSwitch[];
+            return pb_1.Message.getRepeatedWrapperField(this, SpksSwitch, 19) as SpksSwitch[];
         }
-        set skpsSwitchs(value: SkpsSwitch[]) {
+        set spksSwitchs(value: SpksSwitch[]) {
             pb_1.Message.setRepeatedWrapperField(this, 19, value);
         }
         get esbButtons() {
@@ -171,10 +171,10 @@ export namespace graphicData {
         set esbButtons(value: EsbButton[]) {
             pb_1.Message.setRepeatedWrapperField(this, 20, value);
         }
-        get gateBox() {
+        get gateBoxs() {
             return pb_1.Message.getRepeatedWrapperField(this, GatedBox, 21) as GatedBox[];
         }
-        set gateBox(value: GatedBox[]) {
+        set gateBoxs(value: GatedBox[]) {
             pb_1.Message.setRepeatedWrapperField(this, 21, value);
         }
         static fromObject(data: {
@@ -191,9 +191,9 @@ export namespace graphicData {
             axleCountingSections?: ReturnType<typeof AxleCountingSection.prototype.toObject>[];
             logicSections?: ReturnType<typeof LogicSection.prototype.toObject>[];
             stopPositions?: ReturnType<typeof StopPosition.prototype.toObject>[];
-            skpsSwitchs?: ReturnType<typeof SkpsSwitch.prototype.toObject>[];
+            spksSwitchs?: ReturnType<typeof SpksSwitch.prototype.toObject>[];
             esbButtons?: ReturnType<typeof EsbButton.prototype.toObject>[];
-            gateBox?: ReturnType<typeof GatedBox.prototype.toObject>[];
+            gateBoxs?: ReturnType<typeof GatedBox.prototype.toObject>[];
         }): RtssGraphicStorage {
             const message = new RtssGraphicStorage({});
             if (data.canvas != null) {
@@ -235,14 +235,14 @@ export namespace graphicData {
             if (data.stopPositions != null) {
                 message.stopPositions = data.stopPositions.map(item => StopPosition.fromObject(item));
             }
-            if (data.skpsSwitchs != null) {
+            if (data.spksSwitchs != null) {
-                message.skpsSwitchs = data.skpsSwitchs.map(item => SkpsSwitch.fromObject(item));
+                message.spksSwitchs = data.spksSwitchs.map(item => SpksSwitch.fromObject(item));
             }
             if (data.esbButtons != null) {
                 message.esbButtons = data.esbButtons.map(item => EsbButton.fromObject(item));
             }
-            if (data.gateBox != null) {
+            if (data.gateBoxs != null) {
-                message.gateBox = data.gateBox.map(item => GatedBox.fromObject(item));
+                message.gateBoxs = data.gateBoxs.map(item => GatedBox.fromObject(item));
             }
             return message;
         }
@@ -261,9 +261,9 @@ export namespace graphicData {
                 axleCountingSections?: ReturnType<typeof AxleCountingSection.prototype.toObject>[];
                 logicSections?: ReturnType<typeof LogicSection.prototype.toObject>[];
                 stopPositions?: ReturnType<typeof StopPosition.prototype.toObject>[];
-                skpsSwitchs?: ReturnType<typeof SkpsSwitch.prototype.toObject>[];
+                spksSwitchs?: ReturnType<typeof SpksSwitch.prototype.toObject>[];
                 esbButtons?: ReturnType<typeof EsbButton.prototype.toObject>[];
-                gateBox?: ReturnType<typeof GatedBox.prototype.toObject>[];
+                gateBoxs?: ReturnType<typeof GatedBox.prototype.toObject>[];
             } = {};
             if (this.canvas != null) {
                 data.canvas = this.canvas.toObject();
@@ -304,14 +304,14 @@ export namespace graphicData {
             if (this.stopPositions != null) {
                 data.stopPositions = this.stopPositions.map((item: StopPosition) => item.toObject());
             }
-            if (this.skpsSwitchs != null) {
+            if (this.spksSwitchs != null) {
-                data.skpsSwitchs = this.skpsSwitchs.map((item: SkpsSwitch) => item.toObject());
+                data.spksSwitchs = this.spksSwitchs.map((item: SpksSwitch) => item.toObject());
             }
             if (this.esbButtons != null) {
                 data.esbButtons = this.esbButtons.map((item: EsbButton) => item.toObject());
             }
-            if (this.gateBox != null) {
+            if (this.gateBoxs != null) {
-                data.gateBox = this.gateBox.map((item: GatedBox) => item.toObject());
+                data.gateBoxs = this.gateBoxs.map((item: GatedBox) => item.toObject());
             }
             return data;
         }
@@ -345,12 +345,12 @@ export namespace graphicData {
                 writer.writeRepeatedMessage(17, this.logicSections, (item: LogicSection) => item.serialize(writer));
             if (this.stopPositions.length)
                 writer.writeRepeatedMessage(18, this.stopPositions, (item: StopPosition) => item.serialize(writer));
-            if (this.skpsSwitchs.length)
+            if (this.spksSwitchs.length)
-                writer.writeRepeatedMessage(19, this.skpsSwitchs, (item: SkpsSwitch) => item.serialize(writer));
+                writer.writeRepeatedMessage(19, this.spksSwitchs, (item: SpksSwitch) => item.serialize(writer));
             if (this.esbButtons.length)
                 writer.writeRepeatedMessage(20, this.esbButtons, (item: EsbButton) => item.serialize(writer));
-            if (this.gateBox.length)
+            if (this.gateBoxs.length)
-                writer.writeRepeatedMessage(21, this.gateBox, (item: GatedBox) => item.serialize(writer));
+                writer.writeRepeatedMessage(21, this.gateBoxs, (item: GatedBox) => item.serialize(writer));
             if (!w)
                 return writer.getResultBuffer();
         }
@@ -400,13 +400,13 @@ export namespace graphicData {
                         reader.readMessage(message.stopPositions, () => pb_1.Message.addToRepeatedWrapperField(message, 18, StopPosition.deserialize(reader), StopPosition));
                         break;
                     case 19:
-                        reader.readMessage(message.skpsSwitchs, () => pb_1.Message.addToRepeatedWrapperField(message, 19, SkpsSwitch.deserialize(reader), SkpsSwitch));
+                        reader.readMessage(message.spksSwitchs, () => pb_1.Message.addToRepeatedWrapperField(message, 19, SpksSwitch.deserialize(reader), SpksSwitch));
                         break;
                     case 20:
                         reader.readMessage(message.esbButtons, () => pb_1.Message.addToRepeatedWrapperField(message, 20, EsbButton.deserialize(reader), EsbButton));
                         break;
                     case 21:
-                        reader.readMessage(message.gateBox, () => pb_1.Message.addToRepeatedWrapperField(message, 21, GatedBox.deserialize(reader), GatedBox));
+                        reader.readMessage(message.gateBoxs, () => pb_1.Message.addToRepeatedWrapperField(message, 21, GatedBox.deserialize(reader), GatedBox));
                         break;
                     default: reader.skipField();
                 }
@@ -3542,6 +3542,7 @@ export namespace graphicData {
             code?: string;
             flip?: boolean;
             coachNum?: StopPosition.CoachNum;
+            index?: number;
         }) {
             super();
             pb_1.Message.initialize(this, Array.isArray(data) ? data : [], 0, -1, [], this.#one_of_decls);
@@ -3558,6 +3559,9 @@ export namespace graphicData {
                 if ("coachNum" in data && data.coachNum != undefined) {
                     this.coachNum = data.coachNum;
                 }
+                if ("index" in data && data.index != undefined) {
+                    this.index = data.index;
+                }
             }
         }
         get common() {
@@ -3587,11 +3591,18 @@ export namespace graphicData {
         set coachNum(value: StopPosition.CoachNum) {
             pb_1.Message.setField(this, 4, value);
         }
+        get index() {
+            return pb_1.Message.getFieldWithDefault(this, 5, 0) as number;
+        }
+        set index(value: number) {
+            pb_1.Message.setField(this, 5, value);
+        }
         static fromObject(data: {
             common?: ReturnType<typeof CommonInfo.prototype.toObject>;
             code?: string;
             flip?: boolean;
             coachNum?: StopPosition.CoachNum;
+            index?: number;
         }): StopPosition {
             const message = new StopPosition({});
             if (data.common != null) {
@@ -3606,6 +3617,9 @@ export namespace graphicData {
             if (data.coachNum != null) {
                 message.coachNum = data.coachNum;
             }
+            if (data.index != null) {
+                message.index = data.index;
+            }
             return message;
         }
         toObject() {
@@ -3614,6 +3628,7 @@ export namespace graphicData {
                 code?: string;
                 flip?: boolean;
                 coachNum?: StopPosition.CoachNum;
+                index?: number;
             } = {};
             if (this.common != null) {
                 data.common = this.common.toObject();
@@ -3627,6 +3642,9 @@ export namespace graphicData {
             if (this.coachNum != null) {
                 data.coachNum = this.coachNum;
             }
+            if (this.index != null) {
+                data.index = this.index;
+            }
             return data;
         }
         serialize(): Uint8Array;
@@ -3641,6 +3659,8 @@ export namespace graphicData {
                 writer.writeBool(3, this.flip);
             if (this.coachNum != StopPosition.CoachNum.Four)
                 writer.writeEnum(4, this.coachNum);
+            if (this.index != 0)
+                writer.writeInt32(5, this.index);
             if (!w)
                 return writer.getResultBuffer();
         }
@@ -3662,6 +3682,9 @@ export namespace graphicData {
                     case 4:
                         message.coachNum = reader.readEnum();
                         break;
+                    case 5:
+                        message.index = reader.readInt32();
+                        break;
                     default: reader.skipField();
                 }
             }
@@ -3680,12 +3703,13 @@ export namespace graphicData {
             Six = 1
         }
     }
-    export class SkpsSwitch extends pb_1.Message {
+    export class SpksSwitch extends pb_1.Message {
         #one_of_decls: number[][] = [];
         constructor(data?: any[] | {
             common?: CommonInfo;
             code?: string;
             flip?: boolean;
+            index?: number;
         }) {
             super();
             pb_1.Message.initialize(this, Array.isArray(data) ? data : [], 0, -1, [], this.#one_of_decls);
@@ -3699,6 +3723,9 @@ export namespace graphicData {
                 if ("flip" in data && data.flip != undefined) {
                     this.flip = data.flip;
                 }
+                if ("index" in data && data.index != undefined) {
+                    this.index = data.index;
+                }
             }
         }
         get common() {
@@ -3722,12 +3749,19 @@ export namespace graphicData {
         set flip(value: boolean) {
             pb_1.Message.setField(this, 3, value);
         }
+        get index() {
+            return pb_1.Message.getFieldWithDefault(this, 4, 0) as number;
+        }
+        set index(value: number) {
+            pb_1.Message.setField(this, 4, value);
+        }
         static fromObject(data: {
             common?: ReturnType<typeof CommonInfo.prototype.toObject>;
             code?: string;
             flip?: boolean;
-        }): SkpsSwitch {
+            index?: number;
-            const message = new SkpsSwitch({});
+        }): SpksSwitch {
+            const message = new SpksSwitch({});
             if (data.common != null) {
                 message.common = CommonInfo.fromObject(data.common);
             }
@@ -3737,6 +3771,9 @@ export namespace graphicData {
             if (data.flip != null) {
                 message.flip = data.flip;
             }
+            if (data.index != null) {
+                message.index = data.index;
+            }
             return message;
         }
         toObject() {
@@ -3744,6 +3781,7 @@ export namespace graphicData {
                 common?: ReturnType<typeof CommonInfo.prototype.toObject>;
                 code?: string;
                 flip?: boolean;
+                index?: number;
             } = {};
             if (this.common != null) {
                 data.common = this.common.toObject();
@@ -3754,6 +3792,9 @@ export namespace graphicData {
             if (this.flip != null) {
                 data.flip = this.flip;
             }
+            if (this.index != null) {
+                data.index = this.index;
+            }
             return data;
         }
         serialize(): Uint8Array;
@@ -3766,11 +3807,13 @@ export namespace graphicData {
                 writer.writeString(2, this.code);
             if (this.flip != false)
                 writer.writeBool(3, this.flip);
+            if (this.index != 0)
+                writer.writeInt32(4, this.index);
             if (!w)
                 return writer.getResultBuffer();
         }
-        static deserialize(bytes: Uint8Array | pb_1.BinaryReader): SkpsSwitch {
+        static deserialize(bytes: Uint8Array | pb_1.BinaryReader): SpksSwitch {
-            const reader = bytes instanceof pb_1.BinaryReader ? bytes : new pb_1.BinaryReader(bytes), message = new SkpsSwitch();
+            const reader = bytes instanceof pb_1.BinaryReader ? bytes : new pb_1.BinaryReader(bytes), message = new SpksSwitch();
             while (reader.nextField()) {
                 if (reader.isEndGroup())
                     break;
@@ -3784,6 +3827,9 @@ export namespace graphicData {
                     case 3:
                         message.flip = reader.readBool();
                         break;
+                    case 4:
+                        message.index = reader.readInt32();
+                        break;
                     default: reader.skipField();
                 }
             }
@@ -3792,8 +3838,8 @@ export namespace graphicData {
         serializeBinary(): Uint8Array {
             return this.serialize();
         }
-        static deserializeBinary(bytes: Uint8Array): SkpsSwitch {
+        static deserializeBinary(bytes: Uint8Array): SpksSwitch {
-            return SkpsSwitch.deserialize(bytes);
+            return SpksSwitch.deserialize(bytes);
         }
     }
     export class EsbButton extends pb_1.Message {
@@ -3802,6 +3848,7 @@ export namespace graphicData {
             common?: CommonInfo;
             code?: string;
             flip?: boolean;
+            index?: number;
         }) {
             super();
             pb_1.Message.initialize(this, Array.isArray(data) ? data : [], 0, -1, [], this.#one_of_decls);
@@ -3815,6 +3862,9 @@ export namespace graphicData {
                 if ("flip" in data && data.flip != undefined) {
                     this.flip = data.flip;
                 }
+                if ("index" in data && data.index != undefined) {
+                    this.index = data.index;
+                }
             }
         }
         get common() {
@@ -3838,10 +3888,17 @@ export namespace graphicData {
         set flip(value: boolean) {
             pb_1.Message.setField(this, 3, value);
         }
+        get index() {
+            return pb_1.Message.getFieldWithDefault(this, 4, 0) as number;
+        }
+        set index(value: number) {
+            pb_1.Message.setField(this, 4, value);
+        }
         static fromObject(data: {
             common?: ReturnType<typeof CommonInfo.prototype.toObject>;
             code?: string;
             flip?: boolean;
+            index?: number;
         }): EsbButton {
             const message = new EsbButton({});
             if (data.common != null) {
@@ -3853,6 +3910,9 @@ export namespace graphicData {
             if (data.flip != null) {
                 message.flip = data.flip;
             }
+            if (data.index != null) {
+                message.index = data.index;
+            }
             return message;
         }
         toObject() {
@@ -3860,6 +3920,7 @@ export namespace graphicData {
                 common?: ReturnType<typeof CommonInfo.prototype.toObject>;
                 code?: string;
                 flip?: boolean;
+                index?: number;
             } = {};
             if (this.common != null) {
                 data.common = this.common.toObject();
@@ -3870,6 +3931,9 @@ export namespace graphicData {
             if (this.flip != null) {
                 data.flip = this.flip;
             }
+            if (this.index != null) {
+                data.index = this.index;
+            }
             return data;
         }
         serialize(): Uint8Array;
@@ -3882,6 +3946,8 @@ export namespace graphicData {
                 writer.writeString(2, this.code);
             if (this.flip != false)
                 writer.writeBool(3, this.flip);
+            if (this.index != 0)
+                writer.writeInt32(4, this.index);
             if (!w)
                 return writer.getResultBuffer();
         }
@@ -3900,6 +3966,9 @@ export namespace graphicData {
                     case 3:
                         message.flip = reader.readBool();
                         break;
+                    case 4:
+                        message.index = reader.readInt32();
+                        break;
                     default: reader.skipField();
                 }
             }
@@ -3918,6 +3987,7 @@ export namespace graphicData {
             common?: CommonInfo;
             code?: string;
             flip?: boolean;
+            index?: number;
         }) {
             super();
             pb_1.Message.initialize(this, Array.isArray(data) ? data : [], 0, -1, [], this.#one_of_decls);
@@ -3931,6 +4001,9 @@ export namespace graphicData {
                 if ("flip" in data && data.flip != undefined) {
                     this.flip = data.flip;
                 }
+                if ("index" in data && data.index != undefined) {
+                    this.index = data.index;
+                }
             }
         }
         get common() {
@@ -3954,10 +4027,17 @@ export namespace graphicData {
         set flip(value: boolean) {
             pb_1.Message.setField(this, 3, value);
         }
+        get index() {
+            return pb_1.Message.getFieldWithDefault(this, 4, 0) as number;
+        }
+        set index(value: number) {
+            pb_1.Message.setField(this, 4, value);
+        }
         static fromObject(data: {
             common?: ReturnType<typeof CommonInfo.prototype.toObject>;
             code?: string;
             flip?: boolean;
+            index?: number;
         }): GatedBox {
             const message = new GatedBox({});
             if (data.common != null) {
@@ -3969,6 +4049,9 @@ export namespace graphicData {
             if (data.flip != null) {
                 message.flip = data.flip;
             }
+            if (data.index != null) {
+                message.index = data.index;
+            }
             return message;
         }
         toObject() {
@@ -3976,6 +4059,7 @@ export namespace graphicData {
                 common?: ReturnType<typeof CommonInfo.prototype.toObject>;
                 code?: string;
                 flip?: boolean;
+                index?: number;
             } = {};
             if (this.common != null) {
                 data.common = this.common.toObject();
@@ -3986,6 +4070,9 @@ export namespace graphicData {
             if (this.flip != null) {
                 data.flip = this.flip;
             }
+            if (this.index != null) {
+                data.index = this.index;
+            }
             return data;
         }
         serialize(): Uint8Array;
@@ -3998,6 +4085,8 @@ export namespace graphicData {
                 writer.writeString(2, this.code);
             if (this.flip != false)
                 writer.writeBool(3, this.flip);
+            if (this.index != 0)
+                writer.writeInt32(4, this.index);
             if (!w)
                 return writer.getResultBuffer();
         }
@@ -4016,6 +4105,9 @@ export namespace graphicData {
                     case 3:
                         message.flip = reader.readBool();
                         break;
+                    case 4:
+                        message.index = reader.readInt32();
+                        break;
                     default: reader.skipField();
                 }
             }