link生成逻辑调整

src/graphics/sectionLink/SectionLink.ts

@@ -5,6 +5,8 @@ import {
   JlGraphicTemplate,
   VectorText,
   IChildTransform,
+  getNormalVector,
+  movePointAlongNormal,
 } from 'src/jl-graphic';
 import { ILineGraphic } from 'src/jl-graphic/plugins/GraphicEditPlugin';
 
@@ -23,12 +25,15 @@ export interface ISectionLinkData extends GraphicData {
 export const SectionLinkConsts = {
   lineColor: 0x5578b6,
   lineWidth: 5,
+  divisionColor: 0xff0000,
+  divisionWidth: 2,
 };
 
 export class SectionLink extends JlGraphic implements ILineGraphic {
   static Type = 'SectionLink';
   lineGraphic: Graphics;
   labelGraphic: VectorText;
+  divisionGraphic: Graphics = new Graphics();
 
   constructor() {
     super(SectionLink.Type);
@@ -42,6 +47,7 @@ export class SectionLink extends JlGraphic implements ILineGraphic {
     this.transformSave = true;
     this.addChild(this.lineGraphic);
     this.addChild(this.labelGraphic);
+    this.addChild(this.divisionGraphic);
   }
 
   doRepaint() {
@@ -61,6 +67,36 @@ export class SectionLink extends JlGraphic implements ILineGraphic {
         this.lineGraphic.moveTo(p.x, p.y);
       }
     });
+    const normalVector = getNormalVector(
+      this.datas.points[0],
+      this.datas.points[1]
+    );
+    this.divisionGraphic.clear();
+    this.divisionGraphic.lineStyle(
+      SectionLinkConsts.divisionWidth,
+      SectionLinkConsts.divisionColor
+    );
+    const nextP = movePointAlongNormal(this.datas.points[0], normalVector, 5);
+    const nextP1 = movePointAlongNormal(this.datas.points[0], normalVector, -5);
+    this.divisionGraphic.moveTo(nextP1.x, nextP1.y);
+    this.divisionGraphic.lineTo(nextP.x, nextP.y);
+    const normalVector2 = getNormalVector(
+      this.datas.points[this.datas.points.length - 2],
+      this.datas.points[this.datas.points.length - 1]
+    );
+
+    const nextP2 = movePointAlongNormal(
+      this.datas.points[this.datas.points.length - 1],
+      normalVector2,
+      5
+    );
+    const nextP3 = movePointAlongNormal(
+      this.datas.points[this.datas.points.length - 1],
+      normalVector2,
+      -5
+    );
+    this.divisionGraphic.moveTo(nextP3.x, nextP3.y);
+    this.divisionGraphic.lineTo(nextP2.x, nextP2.y);
     this.labelGraphic.text = this.datas.code;
     const labelPosition = this.datas?.childTransforms?.find(
       (item: IChildTransform) => item.name === this.labelGraphic.name

src/graphics/sectionLink/SectionLinkDrawAssistant.ts

@@ -23,6 +23,8 @@ import {
 } from 'pixi.js';
 import { Section } from '../section/Section';
 import { Turnout } from '../turnout/Turnout';
+import { AxleCounting } from '../axleCounting/AxleCounting';
+import { IRelatedRefData } from '../CommonGraphics';
 
 export class SectionLinkDraw extends GraphicDrawAssistant<
   SectionLinkTemplate,
@@ -65,51 +67,148 @@ export class SectionLinkDraw extends GraphicDrawAssistant<
     data.points = this.points;
     return true;
   }
-  oneGenerates() {
+  generateBySection(section: Section) {
-    // localToCanvasPoints
+    const sectionLink = new SectionLink();
-    const sectionList = this.app.queryStore.queryByType<Section>(Section.Type);
+    sectionLink.loadData(this.graphicTemplate.datas);
-    const turnoutList = this.app.queryStore.queryByType<Turnout>(Turnout.Type);
+    sectionLink.id = GraphicIdGenerator.next();
-    console.log(sectionList.length, turnoutList.length);
+    const points: IPointData[] = [];
-    sectionList.forEach((section: Section) => {
+    section.datas.points.forEach((p) => {
-      const sectionLink = new SectionLink();
+      points.push(section.localToCanvasPoint(p));
-      sectionLink.loadData(this.graphicTemplate.datas);
-      sectionLink.id = GraphicIdGenerator.next();
-      const points: IPointData[] = [];
-      section.datas.points.forEach((p) => {
-        points.push(section.localToCanvasPoint(p));
-      });
-      sectionLink.datas.points = points;
-      this.storeGraphic(sectionLink);
     });
-    turnoutList.forEach((turnout: Turnout) => {
+    sectionLink.datas.points = points;
-      const sectionLinkA = new SectionLink();
+    this.storeGraphic(sectionLink);
-      const sectionLinkB = new SectionLink();
+  }
-      const sectionLinkC = new SectionLink();
+  generateByTurnoutAxle(turnout: Turnout, port: number) {
-      sectionLinkA.loadData(this.graphicTemplate.datas);
+    const sectionLink = new SectionLink();
-      sectionLinkB.loadData(this.graphicTemplate.datas);
+    sectionLink.loadData(this.graphicTemplate.datas);
-      sectionLinkC.loadData(this.graphicTemplate.datas);
+    sectionLink.id = GraphicIdGenerator.next();
-      const forkP = new Point(turnout.position.x, turnout.position.y);
+    const forkP = new Point(turnout.position.x, turnout.position.y);
-      const pointA = [forkP];
+    const points: IPointData[] = [forkP];
-      const pointB = [forkP];
+    if (port === 0) {
-      const pointC = [forkP];
       turnout.datas.pointA.forEach((p) => {
-        pointA.push(turnout.localToCanvasPoint(p));
+        points.push(turnout.localToCanvasPoint(p));
       });
+    } else if (port === 1) {
       turnout.datas.pointB.forEach((p) => {
-        pointB.push(turnout.localToCanvasPoint(p));
+        points.push(turnout.localToCanvasPoint(p));
       });
+    } else if (port === 2) {
       turnout.datas.pointC.forEach((p) => {
-        pointC.push(turnout.localToCanvasPoint(p));
+        points.push(turnout.localToCanvasPoint(p));
       });
-      sectionLinkA.id = GraphicIdGenerator.next();
+    }
-      sectionLinkB.id = GraphicIdGenerator.next();
+    sectionLink.datas.points = points;
-      sectionLinkC.id = GraphicIdGenerator.next();
+    this.storeGraphic(sectionLink);
-      sectionLinkA.datas.points = pointA;
+  }
-      sectionLinkB.datas.points = pointB;
+  generateByTurnout(turnout: Turnout, port: number, pRef: IRelatedRefData) {
-      sectionLinkC.datas.points = pointC;
+    const refg = this.app.queryStore.queryById(pRef.id) as Turnout;
-      this.storeGraphic(sectionLinkA);
+    const sectionLink = new SectionLink();
-      this.storeGraphic(sectionLinkB);
+    sectionLink.loadData(this.graphicTemplate.datas);
-      this.storeGraphic(sectionLinkC);
+    sectionLink.id = GraphicIdGenerator.next();
+    const forkP1 = new Point(refg.position.x, refg.position.y);
+    const forkP2 = new Point(turnout.position.x, turnout.position.y);
+    const points: IPointData[] = [forkP1];
+    if (pRef.devicePort === 0) {
+      refg.datas.pointA.forEach((p) => {
+        points.push(refg.localToCanvasPoint(p));
+      });
+    } else if (pRef.devicePort === 1) {
+      refg.datas.pointB.forEach((p) => {
+        points.push(refg.localToCanvasPoint(p));
+      });
+    } else if (pRef.devicePort === 2) {
+      refg.datas.pointC.forEach((p) => {
+        points.push(refg.localToCanvasPoint(p));
+      });
+    }
+    let dataPoint: IPointData[] = [];
+    if (port === 0) {
+      dataPoint = turnout.datas.pointA;
+    } else if (port === 1) {
+      dataPoint = turnout.datas.pointB;
+    } else if (port === 2) {
+      dataPoint = turnout.datas.pointC;
+    }
+    const pLength = dataPoint.length;
+    for (let i = 1; i < pLength + 1; i++) {
+      points.push(turnout.localToCanvasPoint(dataPoint[pLength - i]));
+    }
+    points.push(forkP2);
+    sectionLink.datas.points = points;
+    this.storeGraphic(sectionLink);
+  }
+  oneGenerates() {
+    const axleCountingList = this.app.queryStore.queryByType<AxleCounting>(
+      AxleCounting.Type
+    );
+    const turnoutList = this.app.queryStore.queryByType<Turnout>(Turnout.Type);
+    const generated = new Map();
+    axleCountingList.forEach((axleCounting) => {
+      axleCounting.datas.axleCountingRef.forEach((device) => {
+        const g = this.app.queryStore.queryById(device.id);
+        if (g.type === Section.Type) {
+          const g1 = axleCountingList.find((axleCounting) => {
+            const s = axleCounting.datas.axleCountingRef.find(
+              (ref) => ref.id === device.id
+            );
+            return s;
+          });
+          if (g1) {
+            this.generateBySection(g as Section);
+            generated.set(g.id, ['A', 'B']);
+          }
+        } else if (g.type === Turnout.Type) {
+          this.generateByTurnoutAxle(g as Turnout, device.devicePort);
+          if (generated.get(g.id)) {
+            const pList = generated.get(g.id);
+            pList.push(device.devicePort);
+            generated.set(g.id, pList);
+          } else {
+            generated.set(g.id, [device.devicePort]);
+          }
+        }
+      });
+    });
+    turnoutList.forEach((turnout) => {
+      const pList = generated.get(turnout.id);
+      if (!pList) {
+        return;
+      }
+      let pRef = null;
+      if (
+        !pList.includes(0) &&
+        turnout.datas.paRef &&
+        turnout.datas.paRef.deviceType === 1
+      ) {
+        pRef = turnout.datas.paRef;
+        this.generateByTurnout(turnout, 0, pRef);
+      }
+      if (
+        !pList.includes(1) &&
+        turnout.datas.pbRef &&
+        turnout.datas.pbRef.deviceType === 1
+      ) {
+        pRef = turnout.datas.pbRef;
+        this.generateByTurnout(turnout, 1, pRef);
+      }
+      if (
+        !pList.includes(2) &&
+        turnout.datas.pcRef &&
+        turnout.datas.pcRef.deviceType === 1
+      ) {
+        pRef = turnout.datas.pcRef;
+        this.generateByTurnout(turnout, 2, pRef);
+      }
+      generated.set(turnout.id, [0, 1, 2]);
+      if (pRef) {
+        if (generated.get(pRef.id)) {
+          const pListn = generated.get(pRef.id);
+          pListn.push(pRef.devicePort);
+          generated.set(pRef.id, pListn);
+        } else {
+          generated.set(pRef.id, [pRef.devicePort]);
+        }
+      }
     });
   }
   clearCache(): void {
@@ -153,31 +252,8 @@ export class SectionLinkEditPlugin extends GraphicInteractionPlugin<SectionLink>
     g.lineGraphic.eventMode = 'static';
     g.lineGraphic.cursor = 'pointer';
     g.lineGraphic.hitArea = new SectionLinkGraphicHitArea(g);
-    // g.transformSave = true;
-    // g.labelGraphic.eventMode = 'static';
-    // g.labelGraphic.cursor = 'pointer';
-    // g.labelGraphic.selectable = true;
-    // g.labelGraphic.draggable = true;
-    // g.on('selected', this.onSelected, this);
-    // g.on('unselected', this.onUnselected, this);
-    // g.on('_rightclick', this.onContextMenu, this);
   }
   unbind(g: SectionLink): void {
-    // g.off('selected', this.onSelected, this);
+    // console.log
-    // g.off('unselected', this.onUnselected, this);
-    // g.off('_rightclick', this.onContextMenu, this);
   }
-
-  // onContextMenu(e: FederatedMouseEvent) {
-  //   const target = e.target as DisplayObject;
-  //   const section = target.getGraphic() as SectionLink;
-  //   this.app.updateSelected(section);
-  // }
-
-  // onSelected(g: DisplayObject): void {
-  //   const sectionLink = g as SectionLink;
-  // }
-  // onUnselected(g: DisplayObject): void {
-  //   const sectionLink = g as SectionLink;
-  // }
 }

src/layouts/DrawLayout.vue

@@ -191,6 +191,7 @@ import { Separator } from 'src/graphics/separator/Separator';
 import { SeparatorDraw } from 'src/graphics/separator/SeparatorDrawAssistant';
 import { SectionLink } from 'src/graphics/sectionLink/SectionLink';
 import { SectionLinkDraw } from 'src/graphics/sectionLink/SectionLinkDrawAssistant';
+import { store } from 'quasar/wrappers';
 
 const route = useRoute();
 const router = useRouter();
@@ -335,6 +336,10 @@ function oneClickAxleCounting() {
 }
 function oneClickLink() {
   drawStore.oneClickType = 'SectionLink';
+  const linkList = drawStore
+    .getDrawApp()
+    .queryStore.queryByType(SectionLink.Type);
+  drawStore.getDrawApp().deleteGraphics(...linkList);
   const draw = drawStore
     .getDrawApp()
     .getDrawAssistant(SectionLink.Type) as SectionLinkDraw;