wip-坡度公里标

bj-rtss-message

@@ -1 +1 @@
-Subproject commit c87d9f5a4108c8b01ac16aff151d7b1a385156a0
+Subproject commit 86bf1f0c76ade5866afd8063e8f263ca9eda55a5

graphic-pixi

@@ -1 +1 @@
-Subproject commit 7aff26f0d3dba72592e7eaf8a0ab1637ebc18e4c
+Subproject commit 75f2f2266c8af0acf52cc9775c096c911407cc13

src/components/draw-app/DrawProperties.vue

@@ -96,6 +96,9 @@
           <esb-button-property
             v-else-if="drawStore.selectedGraphicType === EsbButton.Type"
           ></esb-button-property>
+          <KiloMarkerProperty
+            v-else-if="drawStore.selectedGraphicType === SlopeKiloMarker.Type"
+          />
         </q-card-section>
       </template>
     </q-card>
@@ -143,6 +146,8 @@ import GatedBoxProperty from './properties/GatedBoxProperty.vue';
 import { GatedBox } from 'src/graphics/gatedBox/GatedBox';
 import EsbButtonProperty from './properties/EsbButtonProperty.vue';
 import { EsbButton } from 'src/graphics/esbButton/EsbButton';
+import KiloMarkerProperty from './properties/KiloMarkerProperty.vue';
+import { SlopeKiloMarker } from 'src/graphics/slopeKiloMarker/SlopeKiloMarker';
 
 const drawStore = useDrawStore();
 </script>

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

@@ -0,0 +1,84 @@
+<script setup lang="ts">
+import { SlopeKiloMarkerData } from 'src/drawApp/graphics/SlopeKiloMarkerInteraction';
+import { SlopeKiloMarker } from 'src/graphics/slopeKiloMarker/SlopeKiloMarker';
+import { useDrawStore } from 'src/stores/draw-store';
+import { reactive, shallowRef, watchEffect } from 'vue';
+
+const drawStore = useDrawStore();
+const kiloMarkerModel = shallowRef(new SlopeKiloMarkerData());
+const kilometerSystem = reactive({ coordinateSystem: '', kilometer: 0 });
+
+const CoordinateSystemOptions = [
+  { label: '车辆段', value: 'DEPOT' },
+  { label: '停车场', value: 'PARKING_LOT' },
+  { label: '正线', value: 'MAIN_LINE' },
+  { label: '换线', value: 'TRANSFER' },
+];
+const directionOptions = [
+  { label: '上行', value: 0 },
+  { label: '下行', value: 1 },
+];
+watchEffect(() => {
+  const kiloMarker = drawStore.selectedGraphic;
+  if (kiloMarker && kiloMarker instanceof SlopeKiloMarker) {
+    kiloMarkerModel.value = kiloMarker.saveData();
+  }
+});
+
+const onUpdate = () => {
+  const kiloMarker = drawStore.selectedGraphic as SlopeKiloMarker;
+  if (kiloMarker) {
+    drawStore
+      .getDrawApp()
+      .updateGraphicAndRecord(kiloMarker, kiloMarkerModel.value);
+  }
+};
+</script>
+
+<template>
+  <q-form class="q-gutter-sm">
+    <q-input
+      outlined
+      readonly
+      v-model="kiloMarkerModel.id"
+      label="id"
+      hint=""
+    />
+    <!-- <q-input
+      outlined
+      label="索引编号"
+      type="textarea"
+      @blur="onUpdate"
+      v-model="logicSectionModel.index"
+      lazy-rules
+      autogrow
+    /> -->
+    <q-select
+      outlined
+      v-model="kilometerSystem.coordinateSystem"
+      :options="CoordinateSystemOptions"
+      :map-options="true"
+      :emit-value="true"
+      @update:model-value="onUpdate"
+      label="坐标系"
+    ></q-select>
+    <q-input
+      outlined
+      v-model.number="kilometerSystem.kilometer"
+      type="number"
+      @blur="onUpdate"
+      label="公里标(mm):"
+    />
+    <q-select
+      outlined
+      v-model="kiloMarkerModel.direction"
+      :options="directionOptions"
+      :map-options="true"
+      :emit-value="true"
+      @update:model-value="onUpdate"
+      label="方向"
+    ></q-select>
+  </q-form>
+</template>
+
+<style scoped></style>

src/drawApp/graphics/SlopeKiloMarkerInteraction.ts

@@ -0,0 +1,57 @@
+import * as pb_1 from 'google-protobuf';
+import {
+  ISlopeKiloMarkerData,
+  SlopeKiloMarker,
+} from 'src/graphics/slopeKiloMarker/SlopeKiloMarker';
+import { GraphicDataBase } from './GraphicDataBase';
+import { graphicData } from 'src/protos/stationLayoutGraphics';
+
+export class SlopeKiloMarkerData
+  extends GraphicDataBase
+  implements ISlopeKiloMarkerData
+{
+  constructor(data?: graphicData.SlopeKiloMarker) {
+    let platform;
+    if (!data) {
+      platform = new graphicData.SlopeKiloMarker({
+        common: GraphicDataBase.defaultCommonInfo(SlopeKiloMarker.Type),
+      });
+    } else {
+      platform = data;
+    }
+    super(platform);
+  }
+
+  public get data(): graphicData.SlopeKiloMarker {
+    return this.getData<graphicData.SlopeKiloMarker>();
+  }
+
+  get code(): string {
+    return this.data.code;
+  }
+  set code(v: string) {
+    this.data.code = v;
+  }
+  get direction(): graphicData.Direction {
+    return this.data.direction;
+  }
+  set direction(v: graphicData.Direction) {
+    this.data.direction = v;
+  }
+  get kilometerSystem(): graphicData.KilometerSystem {
+    return this.data.kilometerSystem;
+  }
+  set kilometerSystem(v: graphicData.KilometerSystem) {
+    this.data.kilometerSystem = v;
+  }
+
+  clone(): SlopeKiloMarkerData {
+    return new SlopeKiloMarkerData(this.data.cloneMessage());
+  }
+  copyFrom(data: SlopeKiloMarkerData): void {
+    pb_1.Message.copyInto(data.data, this.data);
+  }
+  eq(other: SlopeKiloMarkerData): boolean {
+    return pb_1.Message.equals(this.data, other.data);
+  }
+}

src/drawApp/index.ts

@@ -111,6 +111,12 @@ import {
   TransponderTemplate,
 } from 'src/graphics/transponder/Transponder';
 import { TransponderData } from './graphics/TransponderInteraction';
+import { SlopeKiloMarkerDrawAssistant } from 'src/graphics/slopeKiloMarker/SlopeKiloMarkerDrawAssistant';
+import {
+  SlopeKiloMarker,
+  SlopeKiloMarkerTemplate,
+} from 'src/graphics/slopeKiloMarker/SlopeKiloMarker';
+import { SlopeKiloMarkerData } from './graphics/SlopeKiloMarkerInteraction';
 
 // export function fromStoragePoint(p: graphicData.Point): Point {
 //   return new Point(p.x, p.y);
@@ -248,6 +254,7 @@ export function initDrawApp(dom: HTMLElement): JlDrawApp {
     | GatedBoxDraw
     | EsbButtonDraw
     | TransponderDraw
+    | SlopeKiloMarkerDrawAssistant
   )[] = [];
   if (draftType === 'Line') {
     drawAssistants = [
@@ -293,6 +300,10 @@ export function initDrawApp(dom: HTMLElement): JlDrawApp {
       new SpksSwitchDraw(app, new SpksSwitchTemplate(new SpksSwitchData())),
       new GatedBoxDraw(app, new GatedBoxTemplate(new GatedBoxData())),
       new EsbButtonDraw(app, new EsbButtonTemplate(new EsbButtonData())),
+      new SlopeKiloMarkerDrawAssistant(
+        app,
+        new SlopeKiloMarkerTemplate(new SlopeKiloMarkerData())
+      ),
     ];
     DrawSignalInteraction.init(app);
     DrawStopPositionInteraction.init(app);
@@ -505,6 +516,11 @@ export function saveDrawDatas(app: JlDrawApp) {
     } else if (Transponder.Type === g.type) {
       const transponderData = (g as Transponder).saveData();
       storage.transponders.push((transponderData as TransponderData).data);
+    } else if (SlopeKiloMarker.Type === g.type) {
+      const slopeKiloMarkerData = (g as SlopeKiloMarker).saveData();
+      storage.slopeKiloMarker.push(
+        (slopeKiloMarkerData as SlopeKiloMarkerData).data
+      );
     }
   });
   const base64 = fromUint8Array(storage.serialize());
@@ -588,6 +604,9 @@ export async function loadDrawDatas(app: GraphicApp) {
     storage.transponders.forEach((transponder) => {
       datas.push(new TransponderData(transponder));
     });
+    storage.slopeKiloMarker.forEach((slopeKiloMarker) => {
+      datas.push(new SlopeKiloMarkerData(slopeKiloMarker));
+    });
     await app.loadGraphic(datas);
   } else {
     app.loadGraphic([]);

src/drawApp/lineApp.ts

@@ -87,6 +87,8 @@ import {
   TransponderTemplate,
 } from 'src/graphics/transponder/Transponder';
 import { TransponderData } from './graphics/TransponderInteraction';
+import { SlopeKiloMarkerTemplate } from 'src/graphics/slopeKiloMarker/SlopeKiloMarker';
+import { SlopeKiloMarkerData } from './graphics/SlopeKiloMarkerInteraction';
 
 let lineApp: GraphicApp | null = null;
 
@@ -165,6 +167,7 @@ export function initLineApp(dom: HTMLElement): GraphicApp {
     new GatedBoxTemplate(new GatedBoxData()),
     new EsbButtonTemplate(new EsbButtonData()),
     new TransponderTemplate(new TransponderData()),
+    new SlopeKiloMarkerTemplate(new SlopeKiloMarkerData()),
   ];
   lineApp.registerGraphicTemplates(...graphicTemplate);
   lineApp.setOptions({

src/graphics/kilometerMarker/KilometerMarker.ts

@@ -0,0 +1,10 @@
+import { Graphics } from 'pixi.js';
+
+export class KilometerMarker extends Graphics {
+  constructor() {
+    super();
+  }
+  paint() {
+    this.clear().lineStyle(1, '#fff').moveTo(0, -50).lineTo(0, 50);
+  }
+}

src/graphics/section/SectionDrawAssistant.ts

@@ -199,7 +199,6 @@ export class SectionDraw extends GraphicDrawAssistant<
         g.position.set(turnout.datas.pointC[0].x, turnout.datas.pointC[0].y);
         g.loadData(turnoutPhysicalSectionData);
         this.storeGraphic(g);
-        console.log(g);
         g.loadRelations();
       });
   }

src/graphics/slopeKiloMarker/SlopeKiloMarker.ts

@@ -0,0 +1,46 @@
+import { GraphicData, JlGraphic, JlGraphicTemplate } from 'src/jl-graphic';
+import { KilometerMarker } from '../kilometerMarker/KilometerMarker';
+import { KilometerSystem } from '../signal/Signal';
+import { graphicData } from 'src/protos/stationLayoutGraphics';
+
+export interface ISlopeKiloMarkerData extends GraphicData {
+  get code(): string; // 编号
+  set code(v: string);
+  get direction(): graphicData.Direction;
+  set direction(v: graphicData.Direction);
+  get kilometerSystem(): KilometerSystem;
+  set kilometerSystem(v: KilometerSystem);
+  clone(): ISlopeKiloMarkerData;
+  copyFrom(data: ISlopeKiloMarkerData): void;
+  eq(other: ISlopeKiloMarkerData): boolean;
+}
+
+export class SlopeKiloMarker extends JlGraphic {
+  static Type = 'SlopeKiloMarker';
+  graphic: KilometerMarker;
+
+  constructor() {
+    super(SlopeKiloMarker.Type);
+    this.graphic = new KilometerMarker();
+    this.addChild(this.graphic);
+  }
+  get datas(): ISlopeKiloMarkerData {
+    return this.getDatas<ISlopeKiloMarkerData>();
+  }
+  doRepaint(): void {
+    this.graphic.paint();
+  }
+}
+
+export class SlopeKiloMarkerTemplate extends JlGraphicTemplate<SlopeKiloMarker> {
+  constructor(dataTemplate: ISlopeKiloMarkerData) {
+    super(SlopeKiloMarker.Type, {
+      dataTemplate,
+    });
+  }
+  new(): SlopeKiloMarker {
+    const slopeKiloMarker = new SlopeKiloMarker();
+    slopeKiloMarker.loadData(this.datas);
+    return slopeKiloMarker;
+  }
+}

src/graphics/slopeKiloMarker/SlopeKiloMarkerDrawAssistant.ts

@@ -0,0 +1,82 @@
+import {
+  GraphicApp,
+  GraphicDrawAssistant,
+  GraphicInteractionPlugin,
+  JlDrawApp,
+  JlGraphic,
+  linePoint,
+} from 'src/jl-graphic';
+import {
+  ISlopeKiloMarkerData,
+  SlopeKiloMarker,
+  SlopeKiloMarkerTemplate,
+} from './SlopeKiloMarker';
+import { FederatedMouseEvent, IHitArea, Point } from 'pixi.js';
+
+export class KilometerMarkerHitArea implements IHitArea {
+  kiloMarker: SlopeKiloMarker;
+  constructor(kiloMarker: SlopeKiloMarker) {
+    this.kiloMarker = kiloMarker;
+  }
+  contains(x: number, y: number): boolean {
+    const { position } = this.kiloMarker.transform;
+    return linePoint(
+      this.kiloMarker.canvasToLocalPoint({ x: position.x, y: position.y - 50 }),
+      this.kiloMarker.canvasToLocalPoint({ x: position.x, y: position.y + 50 }),
+      { x, y },
+      2
+    );
+  }
+}
+
+export class SlopeKiloMarkerDrawAssistant extends GraphicDrawAssistant<
+  SlopeKiloMarkerTemplate,
+  ISlopeKiloMarkerData
+> {
+  slopeKiloMarker: SlopeKiloMarker;
+
+  constructor(app: JlDrawApp, template: SlopeKiloMarkerTemplate) {
+    super(app, template, 'sym_o_golf_course', '坡度公里标');
+    this.slopeKiloMarker = this.graphicTemplate.new();
+    SlopeKiloMarkerInteractionPlugin.init(app);
+  }
+
+  onLeftDown(e: FederatedMouseEvent): void {
+    this.container.position.copyFrom(this.toCanvasCoordinates(e.global));
+    this.createAndStore(true);
+  }
+
+  redraw(cp: Point): void {
+    this.slopeKiloMarker.position.copyFrom(cp);
+  }
+  prepareData(data: ISlopeKiloMarkerData): boolean {
+    data.transform = this.container.saveTransform();
+    return true;
+  }
+}
+
+export class SlopeKiloMarkerInteractionPlugin extends GraphicInteractionPlugin<SlopeKiloMarker> {
+  static Name = 'SlopeKiloMarkerInteraction';
+
+  constructor(app: GraphicApp) {
+    super(SlopeKiloMarkerInteractionPlugin.Name, app);
+  }
+  static init(app: GraphicApp) {
+    return new SlopeKiloMarkerInteractionPlugin(app);
+  }
+  filter(...grahpics: JlGraphic[]): SlopeKiloMarker[] | undefined {
+    return grahpics.filter(
+      (g): g is SlopeKiloMarker => g instanceof SlopeKiloMarker
+    );
+  }
+  bind(g: SlopeKiloMarker): void {
+    g.graphic.eventMode = 'static';
+    g.graphic.cursor = 'pointer';
+    g.graphic.selectable = true;
+    g.graphic.draggable = false;
+    g.graphic.hitArea = new KilometerMarkerHitArea(g);
+  }
+  unbind(g: SlopeKiloMarker): void {
+    console.log(g);
+  }
+}

src/jl-graphic/app/JlGraphicApp.ts

@@ -537,13 +537,18 @@ export class GraphicApp extends EventEmitter<GraphicAppEvents> {
         state.code,
         state.graphicType
       );
-      if (!g) {
+      try {
-        const template = this.getGraphicTemplatesByType(state.graphicType);
+        if (!g) {
-        const g = template.new();
+          const template = this.getGraphicTemplatesByType(state.graphicType);
-        g.loadState(state);
+          const g = template.new();
-        this.addGraphics(g);
+          g.loadState(state);
-      } else if (g.updateStates(state)) {
+          this.addGraphics(g);
-        g.repaint();
+        } else if (g.updateStates(state)) {
+          g.repaint();
+        }
+      } catch (err) {
+        console.error('图形状态处理异常', g, state, err);
+        // throw err;
       }
     });
   }

src/jl-graphic/message/BasicMessageClient.ts

@@ -127,8 +127,8 @@ export class SubscriptionClient {
 
   trySubscribe(): void {
     if (this.mc.connected) {
-      this.unsubscriptor = this.mc.subscribe(this.destination, () => {
+      this.unsubscriptor = this.mc.subscribe(this.destination, (data) => {
-        this.handleMessage;
+        this.handleMessage(data);
       });
     }
   }

src/jl-graphic/plugins/KeyboardPlugin.ts

@@ -84,7 +84,7 @@ export class JlGraphicAppKeyboardPlugin {
       // console.log('Mousedown Event', node.nodeName, node.nodeType, node.nodeValue)
     };
     const keydownHandle = (e: KeyboardEvent) => {
-      console.debug(e.key, e.code, e.keyCode);
+      // console.debug(e.key, e.code, e.keyCode);
       if (target && target == this.app.dom.getElementsByTagName('canvas')[0]) {
         const listenerMap = this.getKeyListener(e);
         listenerMap?.forEach((listener) => {