refactor(仪表板): 优化矩阵移动算法减少组件拖拽时导致的卡顿现象

frontend/src/components/canvas/components/editor/DeEditor.vue

@@ -667,8 +667,8 @@ function setPlayerPosition(item, position) {
   item.y = targetY
 
   // 还原到像素
-  item.style.left = ((item.x - 1) * this.matrixStyle.width) / this.scalePointWidth
+  item.style.left = (item.x - 1) / this.matrixScaleWidth
-  item.style.top = ((item.y - 1) * this.matrixStyle.height) / this.scalePointHeight
+  item.style.top = (item.y - 1) / this.matrixScaleHeight
   if (item.y + item.sizey > itemMaxY) {
     itemMaxY = item.y + item.sizey
   }
@@ -906,6 +906,12 @@ export default {
     }
   },
   computed: {
+    matrixScaleWidth() {
+      return this.scalePointWidth / this.matrixStyle.width
+    },
+    matrixScaleHeight() {
+      return this.scalePointHeight / this.matrixStyle.height
+    },
     moveTabCollisionActive() {
       return this.tabCollisionActiveId
     },
@@ -1609,28 +1615,25 @@ export default {
       const startY = infoBox.startY
       const moveXSize = e.pageX - startX // X方向移动的距离
       const moveYSize = e.pageY - startY // Y方向移动的距离
-
+      let nowX = Math.round(item.style.width * this.matrixScaleWidth)
-      const addSizex = (moveXSize) % vm.cellWidth > (vm.cellWidth / 4 * 1) ? parseInt(((moveXSize) / vm.cellWidth + 1)) : parseInt(((moveXSize) / vm.cellWidth))
+      let nowY = Math.round(item.style.height * this.matrixScaleHeight)
-      const addSizey = (moveYSize) % vm.cellHeight > (vm.cellHeight / 4 * 1) ? parseInt(((moveYSize) / vm.cellHeight + 1)) : parseInt(((moveYSize) / vm.cellHeight))
-      let nowX = Math.round((item.style.width * this.scalePointWidth) / this.matrixStyle.width)
-      let nowY = Math.round((item.style.height * this.scalePointHeight) / this.matrixStyle.height)
       nowX = nowX > 0 ? nowX : 1
       nowY = nowY > 0 ? nowY : 1
 
       const oldX = infoBox.oldX
       const oldY = infoBox.oldY
-      let newX = Math.round((item.style.left * this.scalePointWidth) / this.matrixStyle.width) + 1
+      let newX = Math.round(item.style.left * this.matrixScaleWidth) + 1
-      let newY = Math.round((item.style.top * this.scalePointHeight) / this.matrixStyle.height) + 1
+      let newY = Math.round(item.style.top * this.matrixScaleHeight) + 1
       newX = newX > 0 ? newX : 1
       newY = newY > 0 ? newY : 1
-      debounce((function(newX, oldX, newY, oldY, addSizex, addSizey) {
+      if (item.sizex !== nowX || item.sizey !== nowY) {
+        debounce((function(newX, oldX, newY, oldY) {
           return function() {
             if (newX !== oldX || oldY !== newY) {
               movePlayer.call(vm, resizeItem, {
                 x: newX,
                 y: newY
               })
-
               infoBox.oldX = newX
               infoBox.oldY = newY
             }
@@ -1639,7 +1642,8 @@ export default {
               sizey: nowY
             })
           }
-      })(newX, oldX, newY, oldY, addSizex, addSizey), 10)
+        })(newX, oldX, newY, oldY), 10)
+      }
     },
     onDragging(e, item) {
       const infoBox = this.infoBox
@@ -1659,6 +1663,7 @@ export default {
       if (this.moveTabCollisionActive) {
         return
       }
+      if (newX !== oldX || oldY !== newY) {
         debounce((function(newX, oldX, newY, oldY) {
           return function() {
             if (newX !== oldX || oldY !== newY) {
@@ -1672,6 +1677,7 @@ export default {
             }
           }
         })(newX, oldX, newY, oldY), 10)
+      }
     },
     endMove(e) {
 

frontend/src/components/deDrag/index.vue

@@ -1480,7 +1480,7 @@ export default {
           this.hasMove && this.$store.commit('recordSnapshot', 'handleUp')
           // 记录snapshot后 移动已记录设置为false
           this.hasMove = false
-        }, 100)
+        }, 200)
       } else {
         this.hasMove && this.$store.commit('recordSnapshot', 'handleUp')
         // 记录snapshot后 移动已记录设置为false