feat(views): 环境区域编辑器支持控制监测点的启用和禁用

src/services/monitor-point-pen.ts

@@ -0,0 +1,21 @@
+import { MonitorPointPen } from "@/views/EnvArea/pens/monitorPoint";
+import { computed, ref } from "vue";
+
+const monitorPointPens = ref<MonitorPointPen[]>([]);
+
+const monitorPointIds = computed<number[]>(() => {
+  let ids = monitorPointPens.value.map((item) => item.pointId);
+  return [...new Set(ids)];
+});
+
+export const useMonitorPointPen = () => {
+  const setMonitorPointPens = (pens: MonitorPointPen[]) => {
+    monitorPointPens.value = pens;
+  };
+
+  return {
+    monitorPointPens,
+    monitorPointIds,
+    setMonitorPointPens,
+  };
+};

src/views/EnvArea/Graphics.vue

@@ -1,32 +1,45 @@
 <script setup lang="ts">
-import { computed, onMounted, onUnmounted, ref } from "vue";
+import { computed, onMounted, onUnmounted, ref, watch } from "vue";
 import { deepClone } from "@meta2d/core";
 import { monitorRoomData } from "./pens/monitorRoom";
 import { monitorNoRoomData } from "./pens/monitorNoRoom";
 import { monitorPointData } from "./pens/monitorPoint";
+import { useMonitorPointPen } from "@/services/monitor-point-pen";
 
 type AssetsType = "space" | "monitor";
 
 const activeAssets = ref<AssetsType>("space");
 const monitorPoints = ref([
   {
+    id: 1,
     name: "3F-办公室-01",
     disabled: false,
     data: {
       ...monitorPointData,
+      pointId: 1,
       pointName: "3F-办公室-01",
     },
   },
   {
+    id: 2,
     name: "3F-办公室-02",
     disabled: false,
     data: {
       ...monitorPointData,
+      pointId: 2,
       pointName: "3F-办公室-02",
     },
   },
 ]);
 
+const { monitorPointIds } = useMonitorPointPen();
+
+watch(monitorPointIds, () => {
+  monitorPoints.value.forEach(item => {
+    item.disabled = monitorPointIds.value.includes(item.id)
+  });
+});
+
 const roomList = [
   {
     id: 1,

src/views/EnvArea/View.vue

@@ -4,9 +4,12 @@ import { HoverType, Meta2d, Options, Pen } from "@meta2d/core";
 import ContextMenu from "../components/ContextMenu.vue";
 import SvgIcon from "../components/SvgIcon.vue";
 import { registerAreaPens } from "./pens/register";
-import { useSelection } from '@/services/selections';
+import { useSelection } from "@/services/selections";
+import { useMonitorPointPen } from "@/services/monitor-point-pen";
+import { monitorPointData } from "./pens/monitorPoint";
 
 const { select } = useSelection();
+const { setMonitorPointPens } = useMonitorPointPen();
 
 const meta2dOptions: Options = {
   x: 0,
@@ -21,31 +24,51 @@ const meta2dOptions: Options = {
 
 onMounted(() => {
   new Meta2d("env-area-meta2d", meta2dOptions);
-  meta2d.lock(0)
-  meta2d.on('active', active);
-  meta2d.on('inactive', inactive);
-  meta2d.on('contextmenu', onContextmenu);
-  meta2d.on('click', canvasClick);
-  registerAreaPens()
+  meta2d.lock(0);
+  meta2d.on("active", active);
+  meta2d.on("inactive", inactive);
+
+  meta2d.on("undo", patchFlag);
+  meta2d.on("redo", patchFlag);
+  meta2d.on("add", patchFlag);
+  meta2d.on("delete", patchFlag);
+  meta2d.on("rotatePens", patchFlag);
+  meta2d.on("translatePens", patchFlag);
+
+  // 所有编辑栏所做修改
+  meta2d.on("components-update-value", patchFlag);
+  meta2d.on("contextmenu", onContextmenu);
+  meta2d.on("click", canvasClick);
+  registerAreaPens();
 });
 
 onUnmounted(() => {
-  meta2d.off('active', active);
-  meta2d.off('inactive', inactive);
-  meta2d.off('contextmenu', onContextmenu);
-  meta2d.off('click', canvasClick);
+  meta2d.off("active", active);
+  meta2d.off("inactive", inactive);
+
+  meta2d.off("undo", patchFlag);
+  meta2d.off("redo", patchFlag);
+  meta2d.off("add", patchFlag);
+  meta2d.off("delete", patchFlag);
+  meta2d.off("rotatePens", patchFlag);
+  meta2d.off("translatePens", patchFlag);
+
+  // 所有编辑栏所做修改
+  meta2d.off("components-update-value", patchFlag);
+  meta2d.off("contextmenu", onContextmenu);
+  meta2d.off("click", canvasClick);
   meta2d?.destroy();
 });
 
 const inactive = () => {
-  if(fitFlag.value){
+  if (fitFlag.value) {
     return;
   }
   select();
 };
 
 const active = (pens: Pen[]) => {
-  if(fitFlag.value){
+  if (fitFlag.value) {
     return;
   }
   select(pens);
@@ -57,6 +80,15 @@ const active = (pens: Pen[]) => {
   }
 };
 
+const patchFlag = () => {
+  const data = meta2d.data();
+  const monitorPointPens = data.pens.filter(
+    (item) => item.name === monitorPointData.name
+  );
+  
+  setMonitorPointPens(monitorPointPens);
+};
+
 const fitFlag = ref(false);
 const one = ref(false);
 const always = ref(false);
@@ -68,29 +100,29 @@ const contextmenu = reactive({
 });
 
 const onContextmenu = ({ e, rect }: { e: any; rect: any }) => {
-  contextmenu.type = '';
+  contextmenu.type = "";
   contextmenu.style = {
-    left: e.clientX + 'px',
-    top: e.clientY + 'px',
+    left: e.clientX + "px",
+    top: e.clientY + "px",
   };
 
   if (
     meta2d.store.hoverAnchor &&
     meta2d.canvas.hoverType === HoverType.LineAnchor
   ) {
-    contextmenu.type = 'anchor';
+    contextmenu.type = "anchor";
     if (document.body.clientHeight - e.clientY < 128) {
       contextmenu.style = {
-        left: e.clientX + 'px',
-        bottom: '4px',
+        left: e.clientX + "px",
+        bottom: "4px",
       };
     }
   } else {
-    contextmenu.type = 'pen';
+    contextmenu.type = "pen";
     if (document.body.clientHeight - e.clientY < 450) {
       contextmenu.style = {
-        left: e.clientX + 'px',
-        bottom: '4px',
+        left: e.clientX + "px",
+        bottom: "4px",
       };
     }
   }

src/views/EnvArea/pens/monitorPoint.ts

@@ -1,6 +1,7 @@
 import { getFont, Pen } from "@meta2d/core";
 
 export interface MonitorPointPen extends Pen {
+  pointId?: number,
   pointName?: string;
   pointTemperature?: string;
   pointHumidity?: string;