前端框架版本升级+同步北京区段道岔移动时端点吸附

.env.dev

@@ -1,4 +1,4 @@
-API=192.168.3.233:9081
+API=192.168.33.233:9081
 HTTP=http://
 NS=
 WS=ws://

package.json

@@ -23,7 +23,7 @@
     "centrifuge": "^4.0.1",
     "dotenv": "^16.3.1",
     "google-protobuf": "^3.21.2",
-    "jl-graphic": "git+https://gitea.joylink.club/joylink/graphic-pixi.git#v0.1.3",
+    "jl-graphic": "git+https://gitea.joylink.club/joylink/graphic-pixi.git#v0.1.15",
     "js-base64": "^3.7.5",
     "pinia": "^2.0.11",
     "quasar": "^2.6.0",

src/graphics/section/SectionDrawAssistant.ts

@@ -49,6 +49,7 @@ import { AxleCounting } from '../axleCounting/AxleCounting';
 import { LogicSectionData } from 'src/drawApp/graphics/LogicSectionInteraction';
 import { LogicSectionDraw } from '../logicSection/LogicSectionDrawAssistant';
 import { LogicSection } from '../logicSection/LogicSection';
+import { buildDragMoveAbsorbablePositions } from '../turnout/TurnoutDrawAssistant';
 
 export class SectionDraw extends GraphicDrawAssistant<
   SectionTemplate,
@@ -443,11 +444,13 @@ export class SectionPointEditPlugin extends GraphicInteractionPlugin<Section> {
     g.on('selected', this.onSelected, this);
     g.on('unselected', this.onUnselected, this);
     g.on('_rightclick', this.onContextMenu, this);
+    g.on('transformstart', this.onDragMove, this);
   }
   unbind(g: Section): void {
     g.off('selected', this.onSelected, this);
     g.off('unselected', this.onUnselected, this);
     g.off('_rightclick', this.onContextMenu, this);
+    g.off('transformstart', this.onDragMove, this);
   }
 
   onContextMenu(e: FederatedMouseEvent) {
@@ -585,4 +588,10 @@ export class SectionPointEditPlugin extends GraphicInteractionPlugin<Section> {
       section.draggable = false;
     }
   }
+  onDragMove(e: GraphicTransformEvent) {
+    const section = e.target as Section;
+    this.app.setOptions({
+      absorbablePositions: buildDragMoveAbsorbablePositions(section),
+    });
+  }
 }

src/graphics/turnout/TurnoutDrawAssistant.ts

@@ -17,6 +17,7 @@ import {
   AbsorbableLine,
   ContextMenu,
   MenuItemOptions,
+  distance,
 } from 'jl-graphic';
 import {
   ITurnoutData,
@@ -178,6 +179,126 @@ function buildAbsorbablePositions(turnout: Turnout): AbsorbablePosition[] {
   return aps;
 }
 
+type dragType = Turnout | Section;
+class DragMoveAbsorbablePoint extends AbsorbablePoint {
+  moveTarget:
+    | {
+        position: IPointData;
+        portPos: IPointData[];
+      }
+    | undefined;
+  constructor(point: IPointData, absorbRange = 15) {
+    super(point, absorbRange);
+  }
+  tryAbsorb(...dragTargets: dragType[]): void {
+    const dragTarget = dragTargets[0];
+    if (dragTarget instanceof Turnout) {
+      if (this.moveTarget == undefined) {
+        const {
+          pointA: [A],
+          pointB: [B],
+          pointC: [C],
+        } = dragTarget.datas;
+        this.moveTarget = {
+          position: dragTarget.getGlobalPosition(),
+          portPos: [
+            dragTarget.localToCanvasPoint(A),
+            dragTarget.localToCanvasPoint(B),
+            dragTarget.localToCanvasPoint(C),
+          ],
+        };
+      }
+      const {
+        pointA: [A],
+        pointB: [B],
+        pointC: [C],
+      } = dragTarget.datas;
+      [A, B, C].forEach((p, i) => {
+        const changePos = dragTarget.localToCanvasPoint(p);
+        if (
+          distance(this._point.x, this._point.y, changePos.x, changePos.y) <
+            this.absorbRange &&
+          this.moveTarget
+        ) {
+          dragTarget.updatePositionByCanvasPosition(
+            new Point(
+              this.moveTarget.position.x +
+                this._point.x -
+                this.moveTarget.portPos[i].x,
+              this.moveTarget.position.y +
+                this._point.y -
+                this.moveTarget.portPos[i].y
+            )
+          );
+        }
+      });
+    } else {
+      if (this.moveTarget == undefined) {
+        this.moveTarget = {
+          position: dragTarget.getGlobalPosition(),
+          portPos: [
+            dragTarget.localToCanvasPoint(dragTarget.getStartPoint()),
+            dragTarget.localToCanvasPoint(dragTarget.getEndPoint()),
+          ],
+        };
+      }
+      dragTarget
+        .localToCanvasPoints(...dragTarget.datas.points)
+        .forEach((p, i) => {
+          if (
+            distance(this._point.x, this._point.y, p.x, p.y) <
+              this.absorbRange &&
+            this.moveTarget
+          ) {
+            dragTarget.updatePositionByCanvasPosition(
+              new Point(
+                this.moveTarget.position.x +
+                  this._point.x -
+                  this.moveTarget.portPos[i].x,
+                this.moveTarget.position.y +
+                  this._point.y -
+                  this.moveTarget.portPos[i].y
+              )
+            );
+          }
+        });
+    }
+  }
+}
+
+export function buildDragMoveAbsorbablePositions(
+  target: dragType
+): AbsorbablePosition[] {
+  const aps: AbsorbablePosition[] = [];
+
+  const sections = target.queryStore.queryByType<Section>(Section.Type);
+  sections.forEach((section) => {
+    if (section.id !== target.id) {
+      section.localToCanvasPoints(...section.datas.points).forEach((p) => {
+        aps.push(new DragMoveAbsorbablePoint(p)); //区段端点
+      });
+    }
+  });
+
+  const turnouts = target.queryStore.queryByType<Turnout>(Turnout.Type);
+  turnouts.forEach((otherTurnout) => {
+    if (otherTurnout.id !== target.id) {
+      const {
+        pointA: [A],
+        pointB: [B],
+        pointC: [C],
+      } = otherTurnout.datas;
+      [A, B, C].forEach((p) => {
+        aps.push(
+          new DragMoveAbsorbablePoint(otherTurnout.localToCanvasPoint(p)) //道岔端点
+        );
+      });
+    }
+  });
+
+  return aps;
+}
+
 function onEditPointCreate(turnout: Turnout, dp: DraggablePoint) {
   dp.on('transformstart', (e: GraphicTransformEvent) => {
     if (e.isShift()) {
@@ -290,6 +411,7 @@ export class TurnoutPointsInteractionPlugin extends GraphicInteractionPlugin<Tur
     g.transformSave = true;
     g.on('selected', this.onSelected, this);
     g.on('unselected', this.onUnSelected, this);
+    g.on('transformstart', this.onDragMove, this);
   }
 
   unbind(g: Turnout): void {
@@ -298,6 +420,7 @@ export class TurnoutPointsInteractionPlugin extends GraphicInteractionPlugin<Tur
     g.graphics.sections.forEach((sectionGraphic) => {
       sectionGraphic.off('rightclick');
     });
+    g.off('transformstart', this.onDragMove, this);
   }
 
   onSelected(g: DisplayObject) {
@@ -327,6 +450,13 @@ export class TurnoutPointsInteractionPlugin extends GraphicInteractionPlugin<Tur
   filter(...grahpics: JlGraphic[]): Turnout[] | undefined {
     return grahpics.filter((g) => g.type == Turnout.Type) as Turnout[];
   }
+
+  onDragMove(e: GraphicTransformEvent) {
+    const turnout = e.target as Turnout;
+    this.app.setOptions({
+      absorbablePositions: buildDragMoveAbsorbablePositions(turnout),
+    });
+  }
 }
 
 type onTurnoutEditPointCreate = (turnout: Turnout, dp: DraggablePoint) => void;

yarn.lock

@@ -2438,9 +2438,9 @@ isobject@^3.0.1:
   resolved "https://registry.npmmirror.com/isobject/-/isobject-3.0.1.tgz#4e431e92b11a9731636aa1f9c8d1ccbcfdab78df"
   integrity sha512-WhB9zCku7EGTj/HQQRz5aUQEUeoQZH2bWcltRErOpymJ4boYE6wL9Tbr23krRPSZ+C5zqNSrSw+Cc7sZZ4b7vg==
 
-"jl-graphic@git+https://gitea.joylink.club/joylink/graphic-pixi.git#v0.1.3":
-  version "0.1.3"
-  resolved "git+https://gitea.joylink.club/joylink/graphic-pixi.git#100ddafc75ffa2fc646ad26359682e0f083511e3"
+"jl-graphic@git+https://gitea.joylink.club/joylink/graphic-pixi.git#v0.1.15":
+  version "0.1.14"
+  resolved "git+https://gitea.joylink.club/joylink/graphic-pixi.git#8b0ad14f7324a5eaba58239645a1fa0452e87ab4"
   dependencies:
     "@pixi/graphics-extras" "^7.3.2"
     "@pixi/utils" "^7.3.2"