列车调整

src/drawApp/graphics/TrainInteraction.ts

@@ -10,8 +10,16 @@ import {
   GraphicApp,
   GraphicInteractionPlugin,
   JlGraphic,
+  VectorText,
 } from 'src/jl-graphic';
-import { DisplayObject, FederatedMouseEvent } from 'pixi.js';
+import {
+  Color,
+  Container,
+  DisplayObject,
+  FederatedMouseEvent,
+  FederatedPointerEvent,
+  Graphics,
+} from 'pixi.js';
 import { removeTrainMockApi } from 'src/api/TrainApi';
 import { useLineStore } from 'src/stores/line-store';
 
@@ -261,8 +269,11 @@ const TrainOperateMenu: ContextMenu = ContextMenu.init({
 
 export class TrainOperateInteraction extends GraphicInteractionPlugin<Train> {
   static Name = 'train_operate_menu';
+  hoverLaber: TrainHoverLabel;
   constructor(app: GraphicApp) {
     super(TrainOperateInteraction.Name, app);
+    this.hoverLaber = new TrainHoverLabel();
+    app.canvas.addChild(this.hoverLaber);
     app.registerMenu(TrainOperateMenu);
   }
   static init(app: GraphicApp) {
@@ -276,14 +287,38 @@ export class TrainOperateInteraction extends GraphicInteractionPlugin<Train> {
     g.trainbody.cursor = 'pointer';
     g.trainbody.selectable = true;
     g.on('_rightclick', this.onContextMenu, this);
+    g.trainbody.onmouseover = () => {
+      this.onMouseHover(g);
+    };
+    g.trainbody.onmouseout = () => {
+      this.onMouseOut();
+    };
   }
 
   unbind(g: Train): void {
     g.trainbody.eventMode = 'none';
     g.trainbody.selectable = false;
     g.off('_rightclick', this.onContextMenu, this);
+    g.trainbody.onmouseover = null;
+    g.trainbody.onmouseout = null;
   }
 
+  onMouseHover(g: Train): void {
+    if (!this.hoverLaber.isShow) {
+      this.hoverLaber.doRepaint(g.states);
+      const bodyWh = g.trainbody.getBodyWH();
+      const ps = g.localToCanvasPoint({
+        x: bodyWh.width / 2,
+        y: bodyWh.height / 2,
+      });
+      this.hoverLaber.position.set(ps.x, ps.y);
+    }
+  }
+  onMouseOut(): void {
+    if (this.hoverLaber.isShow) {
+      this.hoverLaber.clear();
+    }
+  }
   onContextMenu(e: FederatedMouseEvent) {
     const target = e.target as DisplayObject;
     const train = target.getGraphic() as Train;
@@ -392,3 +427,51 @@ export class TrainOperateInteraction extends GraphicInteractionPlugin<Train> {
     TrainOperateMenu.open(e.global);
   }
 }
+
+const labelConsts = {
+  bgColor: '0xFFF000',
+  textColor: '0x000000',
+  textPadding: 5,
+  codeFontSize: 12,
+};
+class TrainHoverLabel extends Container {
+  boxRact: Graphics = new Graphics();
+  sText: VectorText = new VectorText('');
+  isShow: boolean;
+  constructor() {
+    super();
+    this.isShow = false;
+    this.addChild(this.boxRact);
+    this.addChild(this.sText);
+  }
+  doRepaint(states: ITrainState): void {
+    this.isShow = true;
+    const style = {
+      fill: labelConsts.textColor,
+      fontSize: labelConsts.codeFontSize,
+    };
+    const text = `列车类型：计划车\n来      源：人工标记\n车 组 号：${states.groupId}\n表      号：${states.trainId}\n车 次 号：${states.globalId}`;
+    this.sText.text = text;
+    this.sText.style = style;
+    const { width: codeWidth, height: codeHeight } =
+      this.sText.getLocalBounds();
+    this.sText.anchor.set(0.5);
+    this.sText.position.set(
+      codeWidth / 2 + labelConsts.textPadding,
+      codeHeight / 2 + labelConsts.textPadding
+    );
+    this.boxRact.beginFill(new Color(labelConsts.bgColor));
+    this.boxRact.drawRect(
+      0,
+      0,
+      codeWidth + labelConsts.textPadding * 2,
+      codeHeight + labelConsts.textPadding * 2
+    );
+    this.boxRact.endFill();
+  }
+  clear() {
+    this.boxRact.clear();
+    this.sText.text = '';
+    this.isShow = false;
+  }
+}