浙大网新esb调整

src/drawApp/graphics/ZdwxEsbInteraction.ts

@@ -148,6 +148,7 @@ export class DrawZdwxEsbInteraction extends GraphicInteractionPlugin<ZdwxEsb> {
     this.app.updateSelected(esbButton);
     flipConfig.handler = () => {
       esbButton.datas.flip = !esbButton.datas.flip;
+      console.log(esbButton.datas, 'data');
       esbButton.repaint();
     };
     EsbButtonEditMenu.open(e.global);

src/drawApp/zdwxApp.ts

@@ -41,7 +41,7 @@ import { SignalData, SignalState } from './graphics/SignalInteraction';
 import { getCategoryConsts } from './gategoryConsts';
 import { CategoryType } from 'src/components/CategoryType';
 import { ZdwxEsbDraw } from 'src/graphics/esbButton/ZdwxEsbDrawAssistant';
-import { ZdwxEsbTemplate } from 'src/graphics/esbButton/ZdwxEsb';
+import { ZdwxEsb, ZdwxEsbTemplate } from 'src/graphics/esbButton/ZdwxEsb';
 import {
   DrawZdwxEsbInteraction,
   ZdwxEsbData,
@@ -152,6 +152,9 @@ export async function loadZdwxDrawDatas(): Promise<IGraphicStorage> {
     storage.beacons.forEach((beacon) => {
       datas.push(new BeaconData(beacon));
     });
+    storage.esbButtons.forEach((esbButton) => {
+      datas.push(new ZdwxEsbData(esbButton));
+    });
     refDevicesList = storage.stationRelateDeviceList;
     return Promise.resolve({
       canvasProperty: storage.canvas,
@@ -180,6 +183,9 @@ export function saveZdwxDrawDatas(app: IDrawApp) {
     } else if (Beacon.Type === g.type) {
       const beaconData = (g as Beacon).saveData();
       storage.beacons.push((beaconData as BeaconData).data);
+    } else if (ZdwxEsb.Type === g.type) {
+      const zdwxEsbData = (g as ZdwxEsb).saveData();
+      storage.esbButtons.push((zdwxEsbData as ZdwxEsbData).data);
     }
   });
   const base64 = fromUint8Array(storage.serialize());

src/graphics/esbButton/ZdwxEsb.ts

@@ -27,19 +27,19 @@ export interface IZdwxEsbState extends GraphicState {
   set down(v: boolean);
 }
 
-const zdwxEsbConsts = {
+export const zdwxEsbConsts = {
   codeFontSize: 12,
   codeColor: 0xffffff,
   bodyLineColor: 0xff0000,
-  bodyLineWidth: 2,
+  lineWidth: 2,
   bodyRectLineColor: 0xff0000,
   bodyRectLineWidth: 1,
   bodyRectWidth: 20,
   bodyRectHeight: 20,
   bodyCircleRadius: 4,
-  bodyCircleColor: 0xff0000,
-  bodyColor: 0x000000,
-  pressedColor: 0xff0000,
+  bodyColor: 0xff0000,
+  rectOffset1: -9,
+  rectOffset2: -12,
 };
 export class ZdwxEsb extends JlGraphic {
   static Type = 'esbButton';
@@ -76,17 +76,32 @@ export class ZdwxEsb extends JlGraphic {
       codeGraph.position.set(-30, 0);
     }
     this.circleBody.clear();
-    this.circleBody.lineStyle(
-      zdwxEsbConsts.bodyLineWidth,
-      zdwxEsbConsts.bodyCircleColor
+    this.circleBody.lineStyle(zdwxEsbConsts.lineWidth, zdwxEsbConsts.bodyColor);
+    if (this.datas.flip) {
+      this.circleBody.arc(0, 0, zdwxEsbConsts.bodyCircleRadius, 0, Math.PI);
+      this.circleBody.moveTo(0, 0);
+      this.circleBody.lineTo(0, -6);
+      this.circleBody.moveTo(-4, 0);
+      this.circleBody.lineTo(4, 0);
+    } else {
+      this.circleBody.arc(0, 0, zdwxEsbConsts.bodyCircleRadius, Math.PI, 0);
+      this.circleBody.moveTo(0, 0);
+      this.circleBody.lineTo(0, 6);
+      this.circleBody.moveTo(-4, 0);
+      this.circleBody.lineTo(4, 0);
+    }
+    this.circleBody.drawRect(
+      zdwxEsbConsts.rectOffset1,
+      zdwxEsbConsts.rectOffset1,
+      zdwxEsbConsts.bodyRectWidth,
+      zdwxEsbConsts.bodyRectHeight
+    );
+    this.circleBody.drawRect(
+      zdwxEsbConsts.rectOffset2,
+      zdwxEsbConsts.rectOffset2,
+      zdwxEsbConsts.bodyRectWidth,
+      zdwxEsbConsts.bodyRectHeight
     );
-    this.circleBody.arc(0, 0, zdwxEsbConsts.bodyCircleRadius, Math.PI, 0);
-    this.circleBody.moveTo(0, 0);
-    this.circleBody.lineTo(0, 6);
-    this.circleBody.moveTo(-4, 0);
-    this.circleBody.lineTo(4, 0);
-    this.circleBody.drawRect(-9, -9, 20, 20);
-    this.circleBody.drawRect(-12, -12, 20, 20);
   }
 }
 

src/graphics/esbButton/ZdwxEsbDrawAssistant.ts

@@ -1,4 +1,4 @@
-import { DisplayObject, FederatedMouseEvent, Point } from 'pixi.js';
+import { DisplayObject, FederatedMouseEvent, IHitArea, Point } from 'pixi.js';
 import {
   AbsorbableLine,
   AbsorbablePosition,
@@ -8,7 +8,12 @@ import {
   IDrawApp,
   JlGraphic,
 } from 'src/jl-graphic';
-import { ZdwxEsb, ZdwxEsbTemplate, IZdwxEsbData } from './ZdwxEsb';
+import {
+  ZdwxEsb,
+  ZdwxEsbTemplate,
+  IZdwxEsbData,
+  zdwxEsbConsts,
+} from './ZdwxEsb';
 
 export interface IZdwxEsbDataDrawOptions {
   newData: () => IZdwxEsbData;
@@ -78,6 +83,32 @@ function buildAbsorbablePositions(zdwxEsb: ZdwxEsb): AbsorbablePosition[] {
   return aps;
 }
 
+export class EsbBodyHitArea implements IHitArea {
+  zdwxEsb: ZdwxEsb;
+  constructor(zdwxEsb: ZdwxEsb) {
+    this.zdwxEsb = zdwxEsb;
+  }
+  contains(x: number, y: number): boolean {
+    let flag = false;
+    if (
+      x >= zdwxEsbConsts.rectOffset1 &&
+      x <= zdwxEsbConsts.rectOffset1 + zdwxEsbConsts.bodyRectWidth &&
+      y >= zdwxEsbConsts.rectOffset1 &&
+      y <= zdwxEsbConsts.rectOffset1 + zdwxEsbConsts.bodyRectHeight
+    ) {
+      flag = true;
+    } else if (
+      x >= zdwxEsbConsts.rectOffset2 &&
+      x <= zdwxEsbConsts.rectOffset2 + zdwxEsbConsts.bodyRectWidth &&
+      y >= zdwxEsbConsts.rectOffset2 &&
+      y <= zdwxEsbConsts.rectOffset2 + zdwxEsbConsts.bodyRectHeight
+    ) {
+      flag = true;
+    }
+    return flag;
+  }
+}
+
 export class ZdwxEsbInteraction extends GraphicInteractionPlugin<ZdwxEsb> {
   static Name = 'zdwx_esb_transform';
   constructor(app: IDrawApp) {
@@ -96,6 +127,7 @@ export class ZdwxEsbInteraction extends GraphicInteractionPlugin<ZdwxEsb> {
     g.cursor = 'pointer';
     g.scalable = true;
     g.rotatable = true;
+    g.circleBody.hitArea = new EsbBodyHitArea(g);
     g.on('transformstart', this.transformstart, this);
   }
   unbind(g: ZdwxEsb): void {