fix:修复页面缩放导致的小地图bug;修复鼠标拖拽位置偏移

data-room-ui/packages/BigScreenDesign/MouseSelect/index.vue

@@ -51,8 +51,10 @@ export default {
     }),
     getSelectionBoxStyle () {
       // 计算虚线框的样式
-      const left = Math.min(this.startX, this.endX) + 'px'
-      const top = Math.min(this.startY, this.endY) + 'px'
+      let left = Math.min(this.startX, this.endX) + 'px'
+      let top = Math.min(this.startY, this.endY) + 'px'
+      const left1 = Math.min(this.startX, this.endX) + 50 * this.scale + 'px'
+      const top1 = Math.min(this.startY, this.endY) + 50 * this.scale + 'px'
       const width = Math.abs(this.endX - this.startX) + 'px'
       const height = Math.abs(this.endY - this.startY) + 'px'
       if (!this.isSelecting) {
@@ -79,6 +81,7 @@ export default {
       ]
     ),
     handleMouseDown (event) {
+      // 点击在底部背景上
       if (event.button === 0) {
         time = new Date()
         // 避免和shift + 点击多选组件冲突
@@ -86,11 +89,22 @@ export default {
           return
         }
         this.isSelectDown = true
-
-        this.startX = (event.x - this.offsetX) / this.scale + 50
-        this.startY = (event.y - this.offsetY) / this.scale + 50
-        this.endX = (event.x - this.offsetX) / this.scale + 50
-        this.endY = (event.y - this.offsetY) / this.scale + 50
+        // 点击在底部背景上
+        if (event.target.className.indexOf('mouse-select-wrap') !== -1) {
+          this.startX = event.offsetX
+          this.endX = event.offsetX
+          this.startY = event.offsetY
+          this.endY = event.offsetY
+        } else if (event.target.className.indexOf('design-drag-wrap') !== -1) {
+          this.startX = event.offsetX + 50
+          this.endX = event.offsetX + 50
+          this.startY = event.offsetY + 50
+          this.endY = event.offsetY + 50
+        }
+        // this.startX = (event.x - this.offsetX + 50) / this.scale
+        // this.startY = (event.y - this.offsetY + 50) / this.scale
+        // this.endX = (event.x - this.offsetX + 50) / this.scale
+        // this.endY = (event.y - this.offsetY + 50) / this.scale
       }
     },
     handleMouseMove (event) {
@@ -102,8 +116,13 @@ export default {
         this.isSelecting = true
       }
       if (this.isSelecting) {
-        this.endX = (event.x - this.offsetX) / this.scale + 50
-        this.endY = (event.y - this.offsetY) / this.scale + 50
+        if (event.target.className.indexOf('mouse-select-wrap') !== -1) {
+          this.endX = event.offsetX
+          this.endY = event.offsetY
+        } else if (event.target.className.indexOf('design-drag-wrap') !== -1) {
+          this.startX = event.offsetX + 50
+          this.endY = event.offsetY + 50
+        }
       }
     },
     handleMouseUp (event) {

data-room-ui/packages/BigScreenDesign/RulerTool/SketchRuler.vue

@@ -214,6 +214,10 @@ export default {
         scrollLeft = screenElement.scrollLeft
         scrollTop = screenElement.scrollTop
         maxContainer.addEventListener('mousemove', function (event) {
+          // 在鼠标移动过程中判断出鼠标左键未点击，则停止拖拽
+          if (event.buttons !== 1) {
+            that.isDrag = false
+          }
           if (that.isDrag) {
             event.preventDefault()
             // 鼠标移动距离
@@ -427,52 +431,11 @@ export default {
 
 .screen-container {
   position: absolute;
+  overflow:hidden;
   width: 6000px;
   height: 6000px;
 }
 
-.minimap{
-  position: fixed;
-  bottom: 15px;
-  right: 15px;
-  border: 1px solid #f6f7fb;
-  z-index:10000;
-  /*cursor: move;*/
-}
-.minimap .mapHeader{
-  background-color:#303640;
-  padding: 0 10px;
-  display: flex;
-  justify-content: space-between;
-  height: 20px;
-  width: 150px;
-  font-size: 12px;
-  border-bottom: 1px solid #fff;
-  color: #ffffff;
-  cursor: pointer;
-  span {
-    user-select: none;
-  }
-}
-
-.minimap .selectWin{
-  background-color: #232832;
-  height: 150px;
-  width: 150px;
-  position: relative;
-}
-
-.minimap .selectionWin{
-  position: absolute;
-  left: 0px;
-  top: 0px;
-  width: 30px;
-  height: 30px;
-  background-color: white;
-  opacity: 0.5;
-  cursor: move;
-}
-
 .scale-value {
   position: absolute;
   left: 0;

data-room-ui/packages/BigScreenDesign/index.vue

@@ -55,7 +55,6 @@
               class="selectionWin"
             />
           </div>
-          <div class="miniView" />
         </div>
         <SketchDesignRuler
           ref="Rules"