Merge branch 'master' of https://git.code.tencent.com/beijing-rtss-test/bj-rtss-client

src/components/draw-app/properties/RelayCabinetProperty.vue

@@ -8,10 +8,18 @@
       label="继电器柜"
       lazy-rules
     />
+    <q-input
+      outlined
+      v-model.number="horizontalRelayCabinet"
+      @blur="changeHorizontalRelayCabinet"
+      label="继电器柜水平间距"
+      type="number"
+      lazy-rules
+    />
     <q-input
       outlined
       v-model.number="horizontalSpace"
-      @blur="changehorizontalSpace"
+      @blur="changeHorizontalSpace"
       label="继电器水平间距"
       type="number"
       lazy-rules
@@ -24,20 +32,27 @@
       type="number"
       lazy-rules
     />
+    <q-btn color="primary" label="一键生成继电器" @click="oneClickRelay" />
   </q-form>
 </template>
 
 <script setup lang="ts">
 import { RelayCabinetData } from 'src/drawApp/relayCabinetGraphics/RelayCabinetInteraction';
+import { RelayData } from 'src/drawApp/relayCabinetGraphics/RelayInteraction';
 import { Relay } from 'src/graphics/relay/Relay';
-import { RelayCabinet } from 'src/graphics/relayCabinet/RelayCabinet';
+import {
+  RelayCabinet,
+  relayCabinetConsts,
+} from 'src/graphics/relayCabinet/RelayCabinet';
+import { GraphicCreateOperation, GraphicIdGenerator } from 'src/jl-graphic';
 import { useRelayCabinetStore } from 'src/stores/relayCabinet-store';
 import { onMounted, reactive, ref, watch } from 'vue';
 
 const relayCabinetStore = useRelayCabinetStore();
 const relayCabinetModel = reactive(new RelayCabinetData());
-const horizontalSpace = ref(50);
-const verticalSpace = ref(50);
+const horizontalRelayCabinet = ref(300);
+const horizontalSpace = ref(45);
+const verticalSpace = ref(48);
 
 relayCabinetStore.$subscribe;
 watch(
@@ -76,12 +91,44 @@ function containBoth(relayCabinet: RelayCabinet, relay: Relay) {
   }
   return false;
 }
-function changehorizontalSpace() {
-  const RelayCabinet = relayCabinetStore.selectedGraphic as RelayCabinet;
-  if (RelayCabinet) {
-    const relays = RelayCabinet.queryStore
+function changeHorizontalRelayCabinet() {
+  const relayCabinet = relayCabinetStore.selectedGraphic as RelayCabinet;
+  const relayCabinets = relayCabinet.queryStore.queryByType<RelayCabinet>(
+    RelayCabinet.Type
+  );
+  const vertical = [...new Set(relayCabinets.map((g) => g.y))].sort(
+    (a, b) => a - b
+  );
+  const verticalRelayCabinet: RelayCabinet[][] = [];
+  vertical.forEach((sameY, index) => {
+    relayCabinets.forEach((relayCabinet) => {
+      if (relayCabinet.y == sameY) {
+        if (verticalRelayCabinet[index] == undefined) {
+          verticalRelayCabinet[index] = [relayCabinet];
+        } else {
+          verticalRelayCabinet[index].push(relayCabinet);
+        }
+      }
+    });
+  });
+  verticalRelayCabinet.forEach((relayCabinets) => {
+    for (let i = 1; i < relayCabinets.length; i++) {
+      if (
+        relayCabinets[i].x - relayCabinets[i - 1].x !==
+        horizontalRelayCabinet.value
+      ) {
+        relayCabinets[i].x =
+          relayCabinets[i - 1].x + horizontalRelayCabinet.value;
+      }
+    }
+  });
+}
+function changeHorizontalSpace() {
+  const relayCabinet = relayCabinetStore.selectedGraphic as RelayCabinet;
+  if (relayCabinet) {
+    const relays = relayCabinet.queryStore
       .queryByType<Relay>(Relay.Type)
-      .filter((g) => containBoth(RelayCabinet, g));
+      .filter((g) => containBoth(relayCabinet, g));
     const vertical = [...new Set(relays.map((g) => g.y))].sort((a, b) => a - b);
     const verticalRelay: Relay[][] = [];
     vertical.forEach((sameY, index) => {
@@ -105,11 +152,11 @@ function changehorizontalSpace() {
   }
 }
 function changeVerticalSpace() {
-  const RelayCabinet = relayCabinetStore.selectedGraphic as RelayCabinet;
-  if (RelayCabinet) {
-    const relays = RelayCabinet.queryStore
+  const relayCabinet = relayCabinetStore.selectedGraphic as RelayCabinet;
+  if (relayCabinet) {
+    const relays = relayCabinet.queryStore
       .queryByType<Relay>(Relay.Type)
-      .filter((g) => containBoth(RelayCabinet, g));
+      .filter((g) => containBoth(relayCabinet, g));
     const horizontal = [...new Set(relays.map((g) => g.x))].sort(
       (a, b) => a - b
     );
@@ -134,4 +181,39 @@ function changeVerticalSpace() {
     });
   }
 }
+function oneClickRelay() {
+  const relayCabinet = relayCabinetStore.selectedGraphic as RelayCabinet;
+  const containRelays = relayCabinet.queryStore
+    .queryByType<Relay>(Relay.Type)
+    .filter((g) => containBoth(relayCabinet, g));
+  if (!containRelays.length) {
+    const numRows = 3;
+    const numCols = 6;
+    const relays: Relay[][] = new Array(numRows);
+    for (let i = 0; i < numRows; i++) {
+      relays[i] = new Array(numCols);
+      for (let j = 0; j < numCols; j++) {
+        const relay = new Relay();
+        relay.loadData(new RelayData());
+        relay.id = GraphicIdGenerator.next();
+        relay.position.set(
+          relayCabinet.x -
+            relayCabinetConsts.width / 2 +
+            30 +
+            i * horizontalSpace.value,
+          relayCabinet.y -
+            relayCabinetConsts.height / 2 +
+            30 +
+            j * verticalSpace.value
+        );
+        relays[i][j] = relay;
+      }
+    }
+    const app = relayCabinetStore.getDrawApp();
+    app.addGraphics(...relays.flat());
+    app.opRecord.record(
+      new GraphicCreateOperation(relayCabinetStore.getDrawApp(), relays.flat())
+    );
+  }
+}
 </script>

src/graphics/relayCabinet/RelayCabinet.ts

@@ -53,14 +53,12 @@ export class RelayCabinet extends JlGraphic {
         relayCabinetConsts.lineWidth,
         new Color(relayCabinetConsts.lineColor)
       );
-    relayCabinetGraphic.beginFill(relayCabinetConsts.lineColor, 0.00001);
     relayCabinetGraphic.drawRect(
       0,
       0,
       relayCabinetConsts.width,
       relayCabinetConsts.height
     );
-    relayCabinetGraphic.endFill;
     const rectP = new Rectangle(
       0,
       0,

src/graphics/relayCabinet/RelayCabinetDrawAssistant.ts

@@ -1,4 +1,4 @@
-import { FederatedPointerEvent, Point } from 'pixi.js';
+import { FederatedPointerEvent, IHitArea, Point } from 'pixi.js';
 import {
   AbsorbableLine,
   AbsorbablePosition,
@@ -6,12 +6,14 @@ import {
   GraphicInteractionPlugin,
   JlDrawApp,
   JlGraphic,
+  linePoint,
 } from 'src/jl-graphic';
 
 import {
   IRelayCabinetData,
   RelayCabinet,
   RelayCabinetTemplate,
+  relayCabinetConsts,
 } from './RelayCabinet';
 
 export interface IRelayCabinetDrawOptions {
@@ -78,6 +80,31 @@ function buildAbsorbablePositions(
   return aps;
 }
 
+//碰撞检测
+export class RectGraphicHitArea implements IHitArea {
+  rect: RelayCabinet;
+  constructor(rect: RelayCabinet) {
+    this.rect = rect;
+  }
+  contains(x: number, y: number): boolean {
+    let contains = false;
+    const tolerance = relayCabinetConsts.lineWidth;
+    const p1 = new Point(0, 0);
+    const p2 = new Point(p1.x + relayCabinetConsts.width, p1.y);
+    const p3 = new Point(
+      p1.x + relayCabinetConsts.width,
+      p1.y + relayCabinetConsts.height
+    );
+    const p4 = new Point(p1.x, p1.y + relayCabinetConsts.height);
+    const p = new Point(x, y);
+    contains = contains || linePoint(p1, p2, p, tolerance);
+    contains = contains || linePoint(p2, p3, p, tolerance);
+    contains = contains || linePoint(p3, p4, p, tolerance);
+    contains = contains || linePoint(p4, p1, p, tolerance);
+    return contains;
+  }
+}
+
 export class relayCabinetInteraction extends GraphicInteractionPlugin<RelayCabinet> {
   static Name = 'relayCabinet_transform';
   constructor(app: JlDrawApp) {
@@ -97,6 +124,7 @@ export class relayCabinetInteraction extends GraphicInteractionPlugin<RelayCabin
     g.labelGraphic.eventMode = 'static';
     g.labelGraphic.selectable = true;
     g.labelGraphic.draggable = true;
+    g.relayCabinetGraphic.hitArea = new RectGraphicHitArea(g);
     g.on('transformstart', this.move, this);
   }
   unbind(g: RelayCabinet): void {