Merge branch 'develop' of https://gitea.joylink.club/joylink/rtss-simulation-app-client into develop

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

@@ -61,6 +61,7 @@
     <q-input
       outlined
       v-model="rectModel.alpha"
+      mask="#.###"
       @blur="onUpdate"
       label="透明度"
       lazy-rules
@@ -93,7 +94,7 @@
       @blur="onUpdate"
       label="圆角半径"
       lazy-rules
-      :rules="[(val) => (val && val > 0) || '圆角半径必须大于0']"
+      :rules="[(val) => val >= 0 || '圆角半径必须大于等于0']"
     />
   </q-form>
 </template>

src/drawApp/iscsApp.ts

@@ -18,7 +18,10 @@ import {
 } from './commonApp';
 import { CCTVButtonData } from './graphics/CCTV/CCTVButtonInteraction';
 import { CCTVButtonDraw } from 'src/graphics/CCTV/cctvButton/CCTVButtonDrawAssistant';
-import { CCTVButtonTemplate } from 'src/graphics/CCTV/cctvButton/CCTVButton';
+import {
+  CCTVButton,
+  CCTVButtonTemplate,
+} from 'src/graphics/CCTV/cctvButton/CCTVButton';
 import { useDrawStore } from 'src/stores/draw-store';
 import { iscsGraphicData } from 'src/protos/iscs_graphic_data';
 import { getDraft } from 'src/api/DraftApi';
@@ -279,6 +282,7 @@ export function saveDrawDatas(app: IDrawApp) {
       )
     );
   }
+  const graphics = app.queryStore.getAllGraphics();
   switch (drawStore.selectSubmenuAndStation.submenu) {
     case '火灾报警平面图':
       for (let i = 0; i < storage.fasOfPlatformAlarmStorages.length; i++) {
@@ -316,6 +320,15 @@ export function saveDrawDatas(app: IDrawApp) {
             app,
             cctvOfStationControl
           ) as iscsGraphicData.CCTVOfStationControlStorage;
+
+          graphics.forEach((g) => {
+            if (g instanceof CCTVButton) {
+              const cctvButtonData = g.saveData();
+              cctvStorage.cctvButtons.push(
+                (cctvButtonData as CCTVButtonData).data
+              );
+            }
+          });
           storage.cctvOfStationControlStorages[i] = cctvStorage;
           break;
         }
@@ -325,12 +338,6 @@ export function saveDrawDatas(app: IDrawApp) {
     default:
       break;
   }
-  const graphics = app.queryStore.getAllGraphics();
-  /*  graphics.forEach((g) => {
-    if (TrackSection.Type === g.type) {
-      const trackSectionData = (g as TrackSection).saveData();
-      storage.trackSections.push((trackSectionData as TrackSectionData).data);
-    } }) */
   console.log(storage, '保存数据', graphics);
   const base64 = fromUint8Array(storage.serialize());
   return base64;

src/graphics/rect/RectDrawAssistant.ts

@@ -1,9 +1,10 @@
-import { FederatedPointerEvent, Graphics, Point } from 'pixi.js';
+import { FederatedPointerEvent, Graphics, IHitArea, Point } from 'pixi.js';
 import {
   GraphicDrawAssistant,
   GraphicInteractionPlugin,
   IDrawApp,
   JlGraphic,
+  linePoint,
 } from 'jl-graphic';
 
 import { IRectData, Rect, RectTemplate } from './Rect';
@@ -72,6 +73,28 @@ export class RectDraw extends GraphicDrawAssistant<RectTemplate, IRectData> {
   }
 }
 
+//碰撞检测
+export class RectGraphicHitArea implements IHitArea {
+  rect: Rect;
+  constructor(rect: Rect) {
+    this.rect = rect;
+  }
+  contains(x: number, y: number): boolean {
+    let contains = false;
+    const datas = this.rect.datas;
+    const tolerance = datas.lineWidth;
+    const p1 = new Point(0, 0);
+    const p2 = new Point(p1.x + datas.width, p1.y);
+    const p3 = new Point(p1.x + datas.width, p1.y + datas.height);
+    const p4 = new Point(p1.x, p1.y + datas.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 rectInteraction extends GraphicInteractionPlugin<Rect> {
   static Name = 'platform_transform';
   constructor(app: IDrawApp) {
@@ -88,6 +111,7 @@ export class rectInteraction extends GraphicInteractionPlugin<Rect> {
     g.cursor = 'pointer';
     g.scalable = true;
     g.rotatable = true;
+    g.rectGraphic.hitArea = new RectGraphicHitArea(g);
   }
   unbind(g: Rect): void {
     g.eventMode = 'none';

src/layouts/IscsDrawLayout.vue

@@ -308,7 +308,7 @@ function toggleRightDrawer() {
 
 //工具栏所用
 const selectUtil = ref();
-const utilsOption: ControlItem[] = reactive([]);
+let utilsOption: ControlItem[] = reactive([]);
 
 function drawSelect(item: string) {
   drawStore.getDrawApp().interactionPlugin(item).resume();
@@ -330,6 +330,34 @@ class ControlItem {
     }
   }
 }
+
+function handleUtilsOption() {
+  utilsOption = [];
+  const drawAssistantsTypes = [
+    Arrow.Type,
+    TextContent.Type,
+    Rect.Type,
+    Line.Type,
+  ];
+  switch (drawStore.selectSubmenuAndStation.submenu) {
+    case '监控布局图':
+      drawAssistantsTypes.push(CCTVButton.Type);
+      break;
+  }
+  drawAssistantsTypes.forEach((type) => {
+    const drawAssistant = drawStore.getDrawApp().getDrawAssistant(type);
+    if (drawAssistant) {
+      utilsOption.push(
+        new ControlItem(
+          drawAssistant.name,
+          drawAssistant.icon,
+          drawAssistant.description || drawAssistant.name
+        )
+      );
+    }
+  });
+  drawDialogHeight.value = 44 * Math.ceil(utilsOption.length / 2);
+}
 //左侧功能按钮
 const leftMenuConfig = [
   { label: '保存', click: saveAllDrawDatas },
@@ -378,122 +406,99 @@ onMounted(() => {
   } else {
     drawStore.setDraftId(null);
   }
-
+  handleUtilsOption();
-  function handleUnDoData(op: JlOperation) {
-    const drawApp = drawStore.getDrawApp();
-    let operationType = op.type;
-    if (operationType == 'graphic-create') {
-      operationType = 'graphic-delete';
-    } else if (operationType == 'graphic-delete') {
-      operationType = 'graphic-create';
-    }
-    const syncData = {
-      operationType: operationType,
-      datas: [],
-      submenu: drawStore.selectSubmenuAndStation.submenu,
-      station: drawStore.selectSubmenuAndStation.station,
-      userId: useAuthStore().userId,
-    };
-    if (op.type === 'update-canvas') {
-      const canvasData = op.obj.saveData();
-      syncData.datas.push(
-        new sync_data_message.UpdataData({
-          id: 0,
-          type: op.obj.type,
-          data: new common.Canvas({
-            width: canvasData.width,
-            height: canvasData.height,
-            backgroundColor: canvasData.backgroundColor,
-            viewportTransform: toStorageTransform(canvasData.viewportTransform),
-          }).serialize(),
-        })
-      );
-    } else {
-      op.obj.forEach((g) => {
-        const gData = g.saveData();
-        syncData.datas.push(
-          new sync_data_message.UpdataData({
-            id: g.id,
-            type: g.type,
-            data: gData.data.serialize(),
-          })
-        );
-      });
-    }
-    drawApp.publishMessage(
-      `/rtss_simulation/draft/iscs/${drawStore.draftId}`,
-      new sync_data_message.SyncData({ ...syncData }).serialize()
-    );
-  }
-
-  function handleRecordData(op: JlOperation) {
-    const drawApp = drawStore.getDrawApp();
-    const syncData = {
-      operationType: op.type,
-      datas: [],
-      submenu: drawStore.selectSubmenuAndStation.submenu,
-      station: drawStore.selectSubmenuAndStation.station,
-      userId: useAuthStore().userId,
-    };
-    if (op.type === 'update-canvas') {
-      const canvasData = op.obj.saveData();
-      console.log(canvasData, 'canvasData');
-      syncData.datas.push(
-        new sync_data_message.UpdataData({
-          id: 0,
-          type: op.obj.type,
-          data: new common.Canvas({
-            width: canvasData.width,
-            height: canvasData.height,
-            backgroundColor: canvasData.backgroundColor,
-            viewportTransform: toStorageTransform(canvasData.viewportTransform),
-          }).serialize(),
-        })
-      );
-    } else {
-      op.obj.forEach((g) => {
-        const gData = g.saveData();
-        syncData.datas.push(
-          new sync_data_message.UpdataData({
-            id: g.id,
-            type: g.type,
-            data: gData.data.serialize(),
-          })
-        );
-      });
-    }
-
-    drawApp.publishMessage(
-      `/rtss_simulation/draft/iscs/${drawStore.draftId}`,
-      new sync_data_message.SyncData({ ...syncData }).serialize()
-    );
-  }
-  // function handleReDoData(op: JlOperation) {
-  //   console.log('redoData', op);
-  // }
-
-  const drawAssistantsTypes = [
-    Arrow.Type,
-    TextContent.Type,
-    Rect.Type,
-    Line.Type,
-    CCTVButton.Type,
-  ];
-  drawAssistantsTypes.forEach((type) => {
-    const drawAssistant = drawStore.getDrawApp().getDrawAssistant(type);
-    if (drawAssistant) {
-      utilsOption.push(
-        new ControlItem(
-          drawAssistant.name,
-          drawAssistant.icon,
-          drawAssistant.description || drawAssistant.name
-        )
-      );
-    }
-  });
-  drawDialogHeight.value = 44 * Math.ceil(utilsOption.length / 2);
 });
 
+function handleUnDoData(op: JlOperation) {
+  const drawApp = drawStore.getDrawApp();
+  let operationType = op.type;
+  if (operationType == 'graphic-create') {
+    operationType = 'graphic-delete';
+  } else if (operationType == 'graphic-delete') {
+    operationType = 'graphic-create';
+  }
+  const syncData = {
+    operationType: operationType,
+    datas: [],
+    submenu: drawStore.selectSubmenuAndStation.submenu,
+    station: drawStore.selectSubmenuAndStation.station,
+    userId: useAuthStore().userId,
+  };
+  if (op.type === 'update-canvas') {
+    const canvasData = op.obj.saveData();
+    syncData.datas.push(
+      new sync_data_message.UpdataData({
+        id: 0,
+        type: op.obj.type,
+        data: new common.Canvas({
+          width: canvasData.width,
+          height: canvasData.height,
+          backgroundColor: canvasData.backgroundColor,
+          viewportTransform: toStorageTransform(canvasData.viewportTransform),
+        }).serialize(),
+      })
+    );
+  } else {
+    op.obj.forEach((g) => {
+      const gData = g.saveData();
+      syncData.datas.push(
+        new sync_data_message.UpdataData({
+          id: g.id,
+          type: g.type,
+          data: gData.data.serialize(),
+        })
+      );
+    });
+  }
+  drawApp.publishMessage(
+    `/rtss_simulation/draft/iscs/${drawStore.draftId}`,
+    new sync_data_message.SyncData({ ...syncData }).serialize()
+  );
+}
+
+function handleRecordData(op: JlOperation) {
+  const drawApp = drawStore.getDrawApp();
+  const syncData = {
+    operationType: op.type,
+    datas: [],
+    submenu: drawStore.selectSubmenuAndStation.submenu,
+    station: drawStore.selectSubmenuAndStation.station,
+    userId: useAuthStore().userId,
+  };
+  if (op.type === 'update-canvas') {
+    const canvasData = op.obj.saveData();
+    console.log(canvasData, 'canvasData');
+    syncData.datas.push(
+      new sync_data_message.UpdataData({
+        id: 0,
+        type: op.obj.type,
+        data: new common.Canvas({
+          width: canvasData.width,
+          height: canvasData.height,
+          backgroundColor: canvasData.backgroundColor,
+          viewportTransform: toStorageTransform(canvasData.viewportTransform),
+        }).serialize(),
+      })
+    );
+  } else {
+    op.obj.forEach((g) => {
+      const gData = g.saveData();
+      syncData.datas.push(
+        new sync_data_message.UpdataData({
+          id: g.id,
+          type: g.type,
+          data: gData.data.serialize(),
+        })
+      );
+    });
+  }
+
+  drawApp.publishMessage(
+    `/rtss_simulation/draft/iscs/${drawStore.draftId}`,
+    new sync_data_message.SyncData({ ...syncData }).serialize()
+  );
+}
+
 const canvasWidth = ref(0);
 const canvasHeight = ref(0);
 const headerHeight = ref(0);
@@ -581,6 +586,7 @@ function selectedMenu(menuName: string) {
       break;
     }
   }
+  handleUtilsOption();
 }
 
 const selectSubMenuName = ref('');
@@ -588,6 +594,7 @@ const subMenuOption = ref([]);
 function selectedSubMenu(subName: string) {
   drawStore.selectSubmenuAndStation.submenu = subName;
   forceReloadDate();
+  handleUtilsOption();
 }
 
 let iscsTypeConfig: {