Browse Source

feat: 调整屏蔽子区域交互;

liujia 3 weeks ago
parent
commit
6906707f29
2 changed files with 19 additions and 17 deletions
  1. 15 12
      src/components/EditableSubregion/index.vue
  2. 4 5
      src/components/RadarEditor/index.vue

+ 15 - 12
src/components/EditableSubregion/index.vue

@@ -36,7 +36,7 @@
           cursor: !editable ? 'no-drop' : 'move',
           backgroundColor: block.isBed ? 'rgba(26, 188, 26, 0.1)' : 'rgba(24, 144, 255, 0.1)',
         }"
-        @mousedown="startDrag(block, $event)"
+        @mousedown.self="startDrag(block, $event)"
         @click="selectBlock(block)"
       >
         <div
@@ -389,6 +389,9 @@ const startDrag = (block: BlockItem, e: MouseEvent) => {
   const offsetX = e.clientX - rect.left - block.x
   const offsetY = e.clientY - rect.top - block.y
 
+  const initialOx = block.ox
+  const initialOy = block.oy
+
   const moveHandler = (e: MouseEvent) => {
     const newX = e.clientX - rect.left - offsetX
     const newY = e.clientY - rect.top - offsetY
@@ -405,16 +408,17 @@ const startDrag = (block: BlockItem, e: MouseEvent) => {
     block.isDragging = false
     block.isActice = false
 
-    // 只在拖动结束时更新这些属性
-    block.startXx = block.ox
-    block.stopXx = block.ox + block.width
-    block.startYy = block.oy
-    block.stopYy = block.oy - block.height
+    if (block.ox !== initialOx || block.oy !== initialOy) {
+      block.startXx = block.ox
+      block.stopXx = block.ox + block.width
+      block.startYy = block.oy
+      block.stopYy = block.oy - block.height
+
+      updateSubRegionsData()
+    }
 
     document.removeEventListener('mousemove', moveHandler)
     document.removeEventListener('mouseup', upHandler)
-    // 使用手动更新函数而不是emit('update')
-    updateSubRegionsData()
   }
 
   document.addEventListener('mousemove', moveHandler)
@@ -440,16 +444,15 @@ const startResize = (block: BlockItem, e: MouseEvent) => {
     const deltaY = e.clientY - startY
     // 限制最小尺寸和容器边界
     block.width = Math.max(50, Math.min(initialWidth + deltaX, rect.width - block.x))
-    block.height = Math.max(50, Math.min(initialHeight - deltaY, rect.height - block.y))
+    block.height = Math.max(50, Math.min(initialHeight + deltaY, rect.height - block.y))
   }
 
   const upHandler = () => {
     block.isResizing = false
     selectedBlock.value = null
 
-    // 只在调整大小结束时更新这些属性
-    block.stopXx = block.ox + block.width
-    block.stopYy = block.oy - block.height
+    block.stopXx = block.startXx + block.width
+    block.stopYy = block.startYy - block.height // 使用减号,与blockInputPressEnter中的逻辑保持一致
 
     document.removeEventListener('mousemove', moveHandler)
     document.removeEventListener('mouseup', upHandler)

+ 4 - 5
src/components/RadarEditor/index.vue

@@ -21,7 +21,7 @@
           :width="areaHeight"
           :length="areaWidth"
           v-model:subRegions="localSubRegions"
-          :editable="!disabled && showPanel"
+          :editable="!disabled"
           @create="handleSubregionCreate"
           @update="handleSubregionUpdate"
         />
@@ -33,8 +33,8 @@
       <div class="header">
         <a-radio-group v-model:value="modeRadio" button-style="solid" size="small">
           <a-radio-button :value="1">家具</a-radio-button>
-          <!-- <a-radio-button :value="2">子区域</a-radio-button>
-          <a-radio-button :value="3">信息面板</a-radio-button> -->
+          <a-radio-button :value="2">子区域</a-radio-button>
+          <!-- <a-radio-button :value="3">信息面板</a-radio-button> -->
         </a-radio-group>
       </div>
 
@@ -137,7 +137,6 @@ watch(
 watch(
   localSubRegions,
   (newRegions) => {
-    // 添加防抖处理,避免频繁更新
     emit('update:subRegions', newRegions)
   },
   { deep: true }
@@ -227,7 +226,7 @@ const createSubregion = () => {
 
 // 处理子区域创建事件
 const handleSubregionCreate = () => {
-  message.success('已创建子区域')
+  // message.success('已创建子区域')
 }
 
 // 处理子区域更新事件