继电器柜调整

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

@@ -10,25 +10,17 @@
     />
     <q-input
       outlined
-      v-model.number="horizontalRelayCabinet"
-      @blur="changeHorizontalRelayCabinet"
-      label="继电器柜水平间距"
+      v-model.number="oneClickRelayCabinets"
+      label="生成继电器柜数量"
       type="number"
       lazy-rules
     />
+    <q-btn color="primary" label="向左生成" @click="oneClickRelayCabinet(-1)" />
+    <q-btn color="primary" label="向右生成" @click="oneClickRelayCabinet(1)" />
     <q-input
       outlined
-      v-model.number="horizontalSpace"
-      @blur="changeHorizontalSpace"
-      label="继电器水平间距"
-      type="number"
-      lazy-rules
-    />
-    <q-input
-      outlined
-      v-model.number="verticalSpace"
-      @blur="changeVerticalSpace"
-      label="继电器垂直间距"
+      v-model.number="oneClickRelays"
+      label="生成继电器数量"
       type="number"
       lazy-rules
     />
@@ -50,9 +42,8 @@ import { onMounted, reactive, ref, watch } from 'vue';
 
 const relayCabinetStore = useRelayCabinetStore();
 const relayCabinetModel = reactive(new RelayCabinetData());
-const horizontalRelayCabinet = ref(300);
-const horizontalSpace = ref(45);
-const verticalSpace = ref(48);
+const oneClickRelayCabinets = ref(1);
+const oneClickRelays = ref(32);
 
 relayCabinetStore.$subscribe;
 watch(
@@ -79,6 +70,32 @@ function onUpdate() {
       .updateGraphicAndRecord(RelayCabinet, relayCabinetModel);
   }
 }
+
+function oneClickRelayCabinet(direction: number) {
+  let offsetX = 300;
+  if (direction == -1) {
+    offsetX = -300;
+  }
+  const relayCabinets: RelayCabinet[] = [];
+  for (let i = 0; i < oneClickRelayCabinets.value; i++) {
+    const selectRelayCabinet =
+      relayCabinetStore.selectedGraphic as RelayCabinet;
+    const relayCabinet = new RelayCabinet();
+    relayCabinet.loadData(new RelayCabinetData());
+    relayCabinet.id = GraphicIdGenerator.next();
+    relayCabinet.position.set(
+      selectRelayCabinet.x + offsetX * (i + 1),
+      selectRelayCabinet.y
+    );
+    relayCabinets.push(relayCabinet);
+  }
+  const app = relayCabinetStore.getDrawApp();
+  app.addGraphics(...relayCabinets);
+  app.opRecord.record(
+    new GraphicCreateOperation(relayCabinetStore.getDrawApp(), relayCabinets)
+  );
+}
+
 function containBoth(relayCabinet: RelayCabinet, relay: Relay) {
   const rect = relayCabinet.localBoundsToCanvasPoints();
   if (
@@ -91,120 +108,27 @@ function containBoth(relayCabinet: RelayCabinet, relay: Relay) {
   }
   return false;
 }
-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));
-    const vertical = [...new Set(relays.map((g) => g.y))].sort((a, b) => a - b);
-    const verticalRelay: Relay[][] = [];
-    vertical.forEach((sameY, index) => {
-      relays.forEach((relay) => {
-        if (relay.y == sameY) {
-          if (verticalRelay[index] == undefined) {
-            verticalRelay[index] = [relay];
-          } else {
-            verticalRelay[index].push(relay);
-          }
-        }
-      });
-    });
-    verticalRelay.forEach((relays) => {
-      for (let i = 1; i < relays.length; i++) {
-        if (relays[i].x - relays[i - 1].x !== horizontalSpace.value) {
-          relays[i].x = relays[i - 1].x + horizontalSpace.value;
-        }
-      }
-    });
-  }
-}
-function changeVerticalSpace() {
-  const relayCabinet = relayCabinetStore.selectedGraphic as RelayCabinet;
-  if (relayCabinet) {
-    const relays = relayCabinet.queryStore
-      .queryByType<Relay>(Relay.Type)
-      .filter((g) => containBoth(relayCabinet, g));
-    const horizontal = [...new Set(relays.map((g) => g.x))].sort(
-      (a, b) => a - b
-    );
-    const horizontalRelay: Relay[][] = [];
-    horizontal.forEach((sameX, index) => {
-      relays.forEach((relay) => {
-        if (relay.x == sameX) {
-          if (horizontalRelay[index] == undefined) {
-            horizontalRelay[index] = [relay];
-          } else {
-            horizontalRelay[index].push(relay);
-          }
-        }
-      });
-    });
-    horizontalRelay.forEach((relays) => {
-      for (let i = 1; i < relays.length; i++) {
-        if (relays[i].y - relays[i - 1].y !== verticalSpace.value) {
-          relays[i].y = relays[i - 1].y + verticalSpace.value;
-        }
-      }
-    });
-  }
-}
+
 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 numRows = 4;
+    const numCols = Math.ceil(oneClickRelays.value / numRows);
+    const remainder = oneClickRelays.value % numRows;
     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++) {
+        if (j == numCols - 1 && remainder !== 0 && i >= remainder) break;
         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
+          relayCabinet.x - relayCabinetConsts.width / 2 + 30 + i * 47,
+          relayCabinet.y - relayCabinetConsts.height / 2 + 30 + j * 49
         );
         relays[i][j] = relay;
       }

src/graphics/relay/Relay.ts

@@ -43,7 +43,7 @@ export class Relay extends JlGraphic {
     if (labelPosition) {
       this.labelGraphic.position.set(labelPosition.x, labelPosition.y);
     } else {
-      this.labelGraphic.position.set(0, 0);
+      this.labelGraphic.position.set(0, 25);
     }
     const relayGraphic = this.relayGraphic;
     relayGraphic
@@ -54,7 +54,7 @@ export class Relay extends JlGraphic {
     relayGraphic.endFill;
   }
   setTextGraphic(g: VectorText, name: string) {
-    g.setVectorFontSize(14);
+    g.setVectorFontSize(10);
     g.anchor.set(0.5);
     g.style.fill = '#0f0';
     g.transformSave = true;

src/graphics/relayCabinet/RelayCabinet.ts

@@ -16,8 +16,8 @@ export interface IRelayCabinetData extends GraphicData {
 }
 
 export const relayCabinetConsts = {
-  width: 150,
-  height: 300,
+  width: 200,
+  height: 406,
   lineWidth: 3,
   lineColor: '0x0fe81f',
 };