布局管理-场景布局 编辑场景页面限制车间标签活动范围在背景图中

src/views/page-config/component/mapContainer/MapContainer.vue

@@ -82,6 +82,10 @@
   });
 
   const getGroupConfig = (shop: MapWorkShopInfoItem) => {
+    const labelActivityRange =
+      shop.posType === 'top'
+        ? { configWidth: 165, configHeight: 80 }
+        : { configWidth: 215, configHeight: 40 };
     return {
       x: shop.x,
       y: shop.y,
@@ -90,9 +94,24 @@
       id: shop.id + '',
       draggable: true,
       name: 'group',
+      dragBoundFunc: dynamicDragBoundFunc(
+        labelActivityRange.configWidth,
+        labelActivityRange.configHeight,
+      ),
     };
   };
 
+  function dynamicDragBoundFunc(configWidth: number, configHeight: number) {
+    return (pos: { x: number; y: number }) => {
+      const RestrictedX = Math.max(0, Math.min(bgConfig.value.width - configWidth, pos.x));
+      const RestrictedY = Math.max(0, Math.min(bgConfig.value.height - configHeight, pos.y));
+      return {
+        x: RestrictedX,
+        y: RestrictedY,
+      };
+    };
+  }
+
   const transformerConfig = ref({
     keepRatio: true,
     rotateEnabled: false,