道岔

src/graphics/turnout/Turnout.ts

@@ -55,6 +55,7 @@ export class Turnout extends JlGraphic {
     this.graphics.label.anchor.set(0.5);
     this.graphics.label.style.fill = '#0f0';
     this.graphics.label.setVectorFontSize(16);
+    this.graphics.label.position.set(20, 20);
     this.addChild(this.graphics.label);
   }
 
@@ -88,7 +89,6 @@ export class Turnout extends JlGraphic {
       .lineTo(intersectB.x, intersectB.y);
 
     this.graphics.label.text = this.datas.code;
-    this.graphics.label.position.set(20, 20);
   }
 
   static getIntersectionPoint(r: number, p: IPointData): IPointData {

src/graphics/turnout/TurnoutDrawAssistant.ts

@@ -1,7 +1,9 @@
 import {
+  DraggablePoint,
   GraphicApp,
   GraphicDrawAssistant,
   GraphicInteractionPlugin,
+  GraphicTransformEvent,
   JlDrawApp,
   JlGraphic,
   linePoint,
@@ -13,7 +15,15 @@ import {
   TurnoutConsts,
   TurnoutTemplate,
 } from './Turnout';
-import { DisplayObject, FederatedMouseEvent, IHitArea, Point } from 'pixi.js';
+import {
+  DisplayObject,
+  FederatedMouseEvent,
+  IHitArea,
+  IPointData,
+  Point,
+} from 'pixi.js';
+import { GraphicEditPlugin } from 'src/jl-graphic/plugins/GraphicEditPlugin';
+import Vector2 from 'src/jl-graphic/math/Vector2';
 
 export class TurnoutDraw extends GraphicDrawAssistant<
   TurnoutTemplate,
@@ -32,7 +42,7 @@ export class TurnoutDraw extends GraphicDrawAssistant<
     this.turnout = this.graphicTemplate.new();
     this.container.addChild(this.turnout);
 
-    TurnoutPointsEditPlugin.init(app);
+    TurnoutPointsInteractionPlugin.init(app);
   }
 
   onLeftUp(e: FederatedMouseEvent): void {
@@ -70,45 +80,145 @@ export class TurnoutHitArea implements IHitArea {
   }
   contains(x: number, y: number): boolean {
     const { pointA, pointB, pointC } = this.turnout.datas;
+    const labelRect = this.turnout.graphics.label.getBounds();
+    const labelPosition = this.turnout.canvasToLocalPoint(labelRect);
+    labelRect.x = labelPosition.x;
+    labelRect.y = labelPosition.y;
     return (
       linePoint(pointA, { x: 0, y: 0 }, { x, y }, TurnoutConsts.lineWidth) ||
       linePoint(pointB, { x: 0, y: 0 }, { x, y }, TurnoutConsts.lineWidth) ||
-      linePoint(pointC, { x: 0, y: 0 }, { x, y }, TurnoutConsts.lineWidth) /* ||
-      pointBox({ x, y }, this.turnout.graphics.label.) */
+      linePoint(pointC, { x: 0, y: 0 }, { x, y }, TurnoutConsts.lineWidth) ||
+      pointBox({ x, y }, labelRect)
     );
   }
 }
 
-export class TurnoutPointsEditPlugin extends GraphicInteractionPlugin<Turnout> {
+export class TurnoutPointsInteractionPlugin extends GraphicInteractionPlugin<Turnout> {
   static Name = 'TurnoutPointsDrag';
   static init(app: JlDrawApp) {
-    return new TurnoutPointsEditPlugin(app);
+    return new TurnoutPointsInteractionPlugin(app);
   }
 
   constructor(app: GraphicApp) {
-    super(TurnoutPointsEditPlugin.Name, app);
+    super(TurnoutPointsInteractionPlugin.Name, app);
   }
 
   bind(g: Turnout): void {
     g.eventMode = 'static';
     g.cursor = 'pointer';
     g.hitArea = new TurnoutHitArea(g);
-    console.log(g.hitArea);
-    g.scalable = true;
-    g.rotatable = true;
     g.graphics.label.eventMode = 'static';
     g.graphics.label.cursor = 'pointer';
     g.graphics.label.selectable = true;
+    g.graphics.label.draggable = true;
+    g.graphics.label.name = 'label';
+    g.graphics.label.transformSave = true;
+    g.transformSave = true;
     g.on('selected', this.onSelected, this);
+    g.on('unselected', this.onUnSelected, this);
   }
+
   unbind(g: Turnout): void {
     g.off('selected', this.onSelected, this);
+    g.off('unselected', this.onUnSelected, this);
   }
 
   onSelected(g: DisplayObject) {
-    console.log(g);
+    const turnout = g as Turnout;
+    let tep = turnout.getAssistantAppend<TurnoutEditPlugin>(
+      TurnoutEditPlugin.Name
+    );
+    if (!tep) {
+      tep = new TurnoutEditPlugin(turnout);
+      turnout.addAssistantAppend(tep);
+    }
+    tep.showAll();
   }
+
+  onUnSelected(g: DisplayObject) {
+    const turnout = g as Turnout;
+    const tep = turnout.getAssistantAppend<TurnoutEditPlugin>(
+      TurnoutEditPlugin.Name
+    );
+    if (tep) {
+      tep.hideAll();
+    }
+  }
+
   filter(...grahpics: JlGraphic[]): Turnout[] | undefined {
     return grahpics.filter((g) => g.type == Turnout.Type) as Turnout[];
   }
 }
+
+export class TurnoutEditPlugin extends GraphicEditPlugin<Turnout> {
+  static Name = 'TurnoutEdit';
+  points: {
+    A: IPointData;
+    B: IPointData;
+    C: IPointData;
+  };
+  editPoints: DraggablePoint[] = [];
+
+  constructor(graphic: Turnout) {
+    super(graphic);
+    this.name = TurnoutEditPlugin.Name;
+    this.points = {
+      A: graphic.datas.pointA,
+      B: graphic.datas.pointB,
+      C: graphic.datas.pointC,
+    };
+    this.initEditPoints();
+  }
+
+  initEditPoints() {
+    const cpA = this.graphic.localToCanvasPoint(this.points.A);
+    const cpB = this.graphic.localToCanvasPoint(this.points.B);
+    const cpC = this.graphic.localToCanvasPoint(this.points.C);
+    const cpMap: Map<Point, IPointData> = new Map([
+      [cpA, this.graphic.datas.pointA],
+      [cpB, this.graphic.datas.pointB],
+      [cpC, this.graphic.datas.pointC],
+    ]);
+    cpMap.forEach((v, k) => {
+      const dp = new DraggablePoint(k);
+      //TODO ?????????????????????????????????
+      dp.on('transforming', (e: GraphicTransformEvent) => {
+        if (k === cpA || k === cpB) {
+          const vecA = new Vector2([this.points.A.x, this.points.A.y]);
+          const vecB = new Vector2([this.points.B.x, this.points.B.y]);
+
+          if (k === cpA) {
+            console.log('A');
+            const len = vecB.length();
+            const res = vecA.normalize().scale(-len);
+            this.points.B = res;
+            this.graphic.datas.pointB = res;
+          } else if (k === cpB) {
+            const len = vecA.length();
+            const res = vecB.normalize().scale(-len);
+            this.points.A = res;
+            this.graphic.datas.pointA = res;
+          }
+        }
+        const localPoint = this.graphic.canvasToLocalPoint(dp.position);
+        v.x = localPoint.x;
+        v.y = localPoint.y;
+
+        this.graphic.repaint();
+      });
+      this.editPoints.push(dp);
+    });
+    this.addChild(...this.editPoints);
+  }
+
+  updateEditedPointsPosition() {
+    const cps = this.graphic.localToCanvasPoints(
+      this.points.A,
+      this.points.B,
+      this.points.C
+    );
+    cps.forEach((cp, i) => {
+      this.editPoints[i].position.copyFrom(cp);
+    });
+  }
+}