道岔修改

src/graphics/turnout/Turnout.ts

@@ -1,4 +1,4 @@
-import { Color, Graphics, IPointData } from 'pixi.js';
+import { Graphics, IPointData } from 'pixi.js';
 import {
   GraphicData,
   GraphicState,
@@ -10,8 +10,6 @@ import {
 export interface ITurnoutData extends GraphicData {
   get code(): string;
   set code(code: string);
-  get forkPoint(): IPointData;
-  set forkPoint(point: IPointData);
   get pointA(): IPointData;
   set pointA(point: IPointData);
   get pointB(): IPointData;
@@ -63,20 +61,21 @@ export class Turnout extends JlGraphic {
   get datas(): ITurnoutData {
     return this.getDatas<ITurnoutData>();
   }
+
   get states(): ITurnoutState {
     return this.getStates<ITurnoutState>();
   }
 
   doRepaint(): void {
-    const { pointA, pointB, pointC, forkPoint } = this.datas;
+    const { pointA, pointB, pointC } = this.datas;
-    const intersectB = Turnout.getIntersectionPoint(forkPoint, 20, pointB);
+    const intersectB = Turnout.getIntersectionPoint(20, pointB);
-    const intersectC = Turnout.getIntersectionPoint(forkPoint, 20, pointC);
+    const intersectC = Turnout.getIntersectionPoint(20, pointC);
 
     this.graphics.sections
       .clear()
       .lineStyle(TurnoutConsts.lineWidth, TurnoutConsts.lineColor)
       .moveTo(pointA.x, pointA.y)
-      .lineTo(forkPoint.x, forkPoint.y)
+      .lineTo(0, 0)
       .moveTo(pointB.x, pointB.y)
       .lineTo(intersectB.x, intersectB.y)
       .moveTo(pointC.x, pointC.y)
@@ -85,24 +84,19 @@ export class Turnout extends JlGraphic {
     this.graphics.fork
       .clear()
       .lineStyle(TurnoutConsts.lineWidth, TurnoutConsts.lineColor)
-      .moveTo(forkPoint.x, forkPoint.y)
+      .moveTo(0, 0)
       .lineTo(intersectB.x, intersectB.y);
 
     this.graphics.label.text = this.datas.code;
-    this.graphics.label.position.set(
+    this.graphics.label.position.set(20, 20);
-      this.datas.forkPoint.x + 20,
+
-      this.datas.forkPoint.y + 20
+    console.log(1);
-    );
   }
 
-  static getIntersectionPoint(
+  static getIntersectionPoint(r: number, p: IPointData): IPointData {
-    c: IPointData,
+    const len = Math.sqrt((-p.x) ** 2 + (-p.y) ** 2);
-    r: number,
-    p: IPointData
-  ): IPointData {
-    const len = Math.sqrt((c.x - p.x) ** 2 + (c.y - p.y) ** 2);
     const scale = r / len;
-    return { x: c.x + scale * (p.x - c.x), y: c.y + scale * (p.y - c.y) };
+    return { x: scale * p.x, y: scale * p.y };
   }
 }
 

src/graphics/turnout/TurnoutDrawAssistant.ts

@@ -1,5 +1,4 @@
 import {
-  DraggablePoint,
   GraphicApp,
   GraphicDrawAssistant,
   GraphicInteractionPlugin,
@@ -13,21 +12,13 @@ import {
   TurnoutConsts,
   TurnoutTemplate,
 } from './Turnout';
-import {
+import { DisplayObject, FederatedMouseEvent, IHitArea, Point } from 'pixi.js';
-  DisplayObject,
-  FederatedMouseEvent,
-  Graphics,
-  IHitArea,
-  IPointData,
-  Point,
-} from 'pixi.js';
 
 export class TurnoutDraw extends GraphicDrawAssistant<
   TurnoutTemplate,
   ITurnoutData
 > {
-  graphic = new Graphics();
+  turnout: Turnout;
-  point: Point = new Point(0, 0);
   constructor(app: JlDrawApp, createData: () => ITurnoutData) {
     super(
       app,
@@ -36,53 +27,38 @@ export class TurnoutDraw extends GraphicDrawAssistant<
       'sym_o_ramp_left',
       '道岔Turnout'
     );
-    this.container.addChild(this.graphic);
+
+    this.turnout = this.graphicTemplate.new();
+    this.container.addChild(this.turnout);
+
+    TurnoutPointsEditPlugin.init(app);
   }
 
-  onLeftDown(e: FederatedMouseEvent): void {
+  onLeftUp(e: FederatedMouseEvent): void {
-    console.log(e);
+    this.turnout.position.copyFrom(this.toCanvasCoordinates(e.global));
     this.createAndStore(true);
   }
 
   prepareData(data: ITurnoutData): boolean {
-    data.forkPoint = this.point;
+    data.transform = this.turnout.saveTransform();
-    data.forkPoint = this.point;
+    const { pointA, pointB, pointC } = this.getDefaultEndPoint();
-    const { pointA, pointB, pointC } = this.getDefaultEndPoint(this.point);
     data.pointA = pointA;
     data.pointB = pointB;
     data.pointC = pointC;
-    data.code = '道岔编码';
+    data.code = 'A000000';
     return true;
   }
 
-  getDefaultEndPoint(p: IPointData): {
+  getDefaultEndPoint() {
-    pointA: IPointData;
-    pointB: IPointData;
-    pointC: IPointData;
-  } {
     return {
-      pointA: new Point(p.x + 50, p.y),
+      pointA: new Point(50, 0),
-      pointB: new Point(p.x - 50, p.y),
+      pointB: new Point(-50, 0),
-      pointC: new Point(p.x - 50, p.y - 50),
+      pointC: new Point(-50, -50),
     };
   }
 
   redraw(cp: Point): void {
-    const { pointA, pointB, pointC } = this.getDefaultEndPoint(cp);
+    this.turnout.position.copyFrom(cp);
-
-    const intersectC = Turnout.getIntersectionPoint(cp, 20, pointC);
-
-    this.graphic
-      .clear()
-      .lineStyle(TurnoutConsts.lineWidth, TurnoutConsts.lineColor)
-      .moveTo(pointA.x, pointA.y)
-      .lineTo(cp.x, cp.y)
-      .moveTo(pointB.x, pointB.y)
-      .lineTo(cp.x, cp.y)
-      .moveTo(pointC.x, pointC.y)
-      .lineTo(intersectC.x, intersectC.y);
-
-    this.point.set(cp.x, cp.y);
   }
 }
 
@@ -92,44 +68,31 @@ export class TurnoutHitArea implements IHitArea {
     this.turnout = turnout;
   }
   contains(x: number, y: number): boolean {
-    const { pointA, pointB, pointC, forkPoint } = this.turnout.datas;
+    const { pointA, pointB, pointC } = this.turnout.datas;
     return (
-      linePoint(pointA, forkPoint, { x, y }, TurnoutConsts.lineWidth) ||
+      linePoint(pointA, { x: 0, y: 0 }, { x, y }, TurnoutConsts.lineWidth) ||
-      linePoint(pointB, forkPoint, { x, y }, TurnoutConsts.lineWidth) ||
+      linePoint(pointB, { x: 0, y: 0 }, { x, y }, TurnoutConsts.lineWidth) ||
-      linePoint(pointC, forkPoint, { x, y }, TurnoutConsts.lineWidth)
+      linePoint(pointC, { x: 0, y: 0 }, { x, y }, TurnoutConsts.lineWidth)
     );
   }
 }
 
-// function onEditPointCreate(
-//   g: ILineGraphic,
-//   dp: DraggablePoint,
-//   index: number
-// ): void {
-//   const link = g as Link;
-//   if (index === 0 || index == link.datas.points.length - 1) {
-//     // 端点
-//     dp.on('transformstart', (e: GraphicTransformEvent) => {
-//       if (e.isShift()) {
-//         link.getGraphicApp().setOptions({
-//           absorbablePositions: buildAbsorbablePositions(link),
-//         });
-//       }
-//     });
-//   }
-// }
-
 export class TurnoutPointsEditPlugin extends GraphicInteractionPlugin<Turnout> {
   static Name = 'TurnoutPointsDrag';
+  static init(app: JlDrawApp) {
+    return new TurnoutPointsEditPlugin(app);
+  }
+
   constructor(app: GraphicApp) {
     super(TurnoutPointsEditPlugin.Name, app);
   }
+
   bind(g: Turnout): void {
-    g.graphics.sections.eventMode = 'static';
+    g.eventMode = 'static';
-    g.graphics.sections.cursor = 'pointer';
+    g.cursor = 'pointer';
-    g.graphics.fork.eventMode = 'static';
-    g.graphics.fork.cursor = 'pointer';
     g.hitArea = new TurnoutHitArea(g);
+    // g.scalable = true;
+    g.rotatable = true;
     g.on('selected', this.onSelected, this);
   }
   unbind(g: Turnout): void {
@@ -137,14 +100,6 @@ export class TurnoutPointsEditPlugin extends GraphicInteractionPlugin<Turnout> {
   }
   onSelected(g: DisplayObject) {
     console.log(g);
-    // const turnout = g as Turnout;
-    // let editPlugin = turnout.getAssistantAppend<PolylineEditPlugin>(
-    //   PolylineEditPlugin.Name
-    // );
-    // if (!editPlugin) {
-    //   // editPlugin = new PolylineEditPlugin(turnout, { onEditPointCreate });
-    //   // turnout.addAssistantAppend(editPlugin);
-    // }
   }
   filter(...grahpics: JlGraphic[]): Turnout[] | undefined {
     return grahpics.filter((g) => g.type == Turnout.Type) as Turnout[];