refactor: 移动端布局拖动组件接近上下边界画布可以自动滚动

frontend/src/components/DeDrag/index.vue

@@ -370,7 +370,9 @@ export default {
       // 鼠标移入事件
       mouseOn: false,
       // 是否移动 （如果没有移动 不需要记录snapshot）
-      hasMove: false
+      hasMove: false,
+      // 上次的鼠标指针纵向位置，用来判断指针是上移还是下移
+      latestMoveY: 0
     }
   },
   computed: {
@@ -543,7 +545,8 @@ export default {
       'canvasStyleData',
       'linkageSettingStatus',
       'mobileLayoutStatus',
-      'componentGap'
+      'componentGap',
+      'scrollAutoMove'
     ])
   },
   watch: {
@@ -646,12 +649,14 @@ export default {
     dragging(val) {
       if (this.enabled) {
         this.curComponent.optStatus.dragging = val
+        this.$store.commit('setScrollAutoMove', 0)
       }
     },
     // private 监控dragging  resizing
     resizing(val) {
       if (this.enabled) {
         this.curComponent.optStatus.resizing = val
+        this.$store.commit('setScrollAutoMove', 0)
       }
     }
   },
@@ -724,6 +729,8 @@ export default {
       // 此处阻止冒泡 但是外层需要获取pageX pageY
       this.element.auxiliaryMatrix && this.$emit('elementMouseDown', e)
       this.$store.commit('setCurComponent', { component: this.element, index: this.index })
+      // 移动端组件点击自动置顶
+      this.mobileLayoutStatus && this.$store.commit('topComponent')
       eventsFor = events.mouse
       this.elementDown(e)
     },
@@ -763,6 +770,8 @@ export default {
         this.mouseClickPosition.bottom = this.bottom
         this.mouseClickPosition.width = this.width
         this.mouseClickPosition.height = this.height
+        // 鼠标按下 重置上次鼠标指针位置
+        this.latestMoveY = this.mouseClickPosition.mouseY
         if (this.parent) {
           this.bounds = this.calcDragLimits()
         }
@@ -997,7 +1006,13 @@ export default {
       // 水平移动
       const tmpDeltaX = axis && axis !== 'y' ? mouseClickPosition.mouseX - (e.touches ? e.touches[0].pageX : e.pageX) : 0
       // 垂直移动
-      const tmpDeltaY = axis && axis !== 'x' ? mouseClickPosition.mouseY - (e.touches ? e.touches[0].pageY : e.pageY) : 0
+      const mY = e.touches ? e.touches[0].pageY : e.pageY
+      const tmpDeltaY = axis && axis !== 'x' ? mouseClickPosition.mouseY - mY : 0
+      // mY 鼠标指针移动的点 mY - this.latestMoveY 是计算向下移动还是向上移动
+      const offsetY = mY - this.latestMoveY
+      // console.log('mY:' + mY + ';latestMoveY=' + this.latestMoveY + ';offsetY=' + offsetY)
+      this.$emit('canvasDragging', mY, offsetY)
+      this.latestMoveY = mY
       const [deltaX, deltaY] = snapToGrid(grid, tmpDeltaX, tmpDeltaY, this.scaleRatio)
       const left = restrictToBounds(mouseClickPosition.left - deltaX, bounds.minLeft, bounds.maxLeft)
       const top = restrictToBounds(mouseClickPosition.top - deltaY, bounds.minTop, bounds.maxTop)
@@ -1007,7 +1022,7 @@ export default {
       const right = restrictToBounds(mouseClickPosition.right + deltaX, bounds.minRight, bounds.maxRight)
       const bottom = restrictToBounds(mouseClickPosition.bottom + deltaY, bounds.minBottom, bounds.maxBottom)
       this.left = left
-      this.top = top
+      this.top = top + this.scrollAutoMove
       this.right = right
       this.bottom = bottom
       await this.snapCheck()

frontend/src/components/canvas/components/Editor/index.vue

@@ -55,6 +55,7 @@
       @amRemoveItem="removeItem(item._dragId)"
       @amAddItem="addItemBox(item)"
       @linkJumpSet="linkJumpSet(item)"
+      @canvasDragging="canvasDragging"
     >
       <component
         :is="item.component"
@@ -1533,6 +1534,9 @@ export default {
       _this.componentData.forEach(function(data, index) {
         _this.$refs.deDragRef && _this.$refs.deDragRef[index] && _this.$refs.deDragRef[index].checkParentSize()
       })
+    },
+    canvasDragging(mY, offsetY) {
+      this.$emit('canvasDragging', mY, offsetY)
     }
   }
 }

frontend/src/components/canvas/store/layer.js

@@ -25,8 +25,6 @@ export default {
       // 置顶
       if (curComponentIndex < componentData.length - 1) {
         toTop(componentData, curComponentIndex)
-      } else {
-        toast('已经到顶了')
       }
     },
 

frontend/src/store/index.js

@@ -98,7 +98,8 @@ const data = {
     mobileLayoutStyle: {
       x: 300,
       y: 600
-    }
+    },
+    scrollAutoMove: 0
   },
   mutations: {
     ...animation.mutations,
@@ -371,6 +372,9 @@ const data = {
       })
       state.componentData = mainComponentData
       state.mobileLayoutStatus = !state.mobileLayoutStatus
+    },
+    setScrollAutoMove(state, offset) {
+      state.scrollAutoMove = offset
     }
   },
   modules: {

frontend/src/views/panel/edit/index.vue

@@ -126,7 +126,7 @@
                 class="this_mobile_canvas_main"
                 :style="mobileCanvasStyle"
               >
-                <Editor v-if="mobileEditorShow" ref="editorMobile" :matrix-count="mobileMatrixCount" :out-style="outStyle" :scroll-top="scrollTop" />
+                <Editor v-if="mobileEditorShow" id="editorMobile" ref="editorMobile" :matrix-count="mobileMatrixCount" :out-style="outStyle" :scroll-top="scrollTop" @canvasDragging="canvasDragging" />
               </el-row>
               <el-row class="this_mobile_canvas_inner_bottom">
                 <el-col :span="12">
@@ -265,6 +265,7 @@ export default {
   },
   data() {
     return {
+      autoMoveOffSet: 15,
       mobileEditorShow: true,
       hasStar: false,
       drawerSize: '300px',
@@ -397,7 +398,8 @@ export default {
       'mobileLayoutStatus',
       'pcMatrixCount',
       'mobileMatrixCount',
-      'mobileLayoutStyle'
+      'mobileLayoutStyle',
+      'scrollAutoMove'
     ])
   },
 
@@ -881,6 +883,33 @@ export default {
     },
     sureStatusChange(status) {
       this.enableSureButton = status
+    },
+    canvasDragging(mY, offsetY) {
+      if (this.curComponent && this.curComponent.optStatus.dragging) {
+        // 触发滚动的区域偏移量
+        const touchOffset = 100
+        const canvasInfoMobile = document.getElementById('canvasInfoMobile')
+        // 获取子盒子（高度肯定比父盒子大）
+        // const editorMobile = document.getElementById('editorMobile')
+        // 画布区顶部到浏览器顶部距离
+        const canvasTop = canvasInfoMobile.offsetTop + 75
+        // 画布区有高度
+        const canvasHeight = canvasInfoMobile.offsetHeight
+        // 画布区域底部距离浏览器顶部距离
+        const canvasBottom = canvasTop + canvasHeight
+        if (mY > (canvasBottom - touchOffset) && offsetY > 0) {
+          // 触发底部滚动
+          this.scrollMove(this.autoMoveOffSet)
+        } else if (mY < (canvasTop + touchOffset) && offsetY < 0) {
+          // 触发顶部滚动
+          this.scrollMove(-this.autoMoveOffSet)
+        }
+      }
+    },
+    scrollMove(offset) {
+      const canvasInfoMobile = document.getElementById('canvasInfoMobile')
+      canvasInfoMobile.scrollTop = canvasInfoMobile.scrollTop + offset
+      this.$store.commit('setScrollAutoMove', this.scrollAutoMove + offset)
     }
   }
 }