From 372685035e96cc156d5450e045998e0225b546c7 Mon Sep 17 00:00:00 2001 From: wangjiahao <1522128093@qq.com> Date: Thu, 20 Jan 2022 11:33:41 +0800 Subject: [PATCH] =?UTF-8?q?refactor:=20=E7=A7=BB=E5=8A=A8=E7=AB=AF?= =?UTF-8?q?=E5=B8=83=E5=B1=80=E6=8B=96=E5=8A=A8=E7=BB=84=E4=BB=B6=E6=8E=A5?= =?UTF-8?q?=E8=BF=91=E4=B8=8A=E4=B8=8B=E8=BE=B9=E7=95=8C=E7=94=BB=E5=B8=83?= =?UTF-8?q?=E5=8F=AF=E4=BB=A5=E8=87=AA=E5=8A=A8=E6=BB=9A=E5=8A=A8?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/components/DeDrag/index.vue | 23 ++++++++++--- .../canvas/components/Editor/index.vue | 4 +++ frontend/src/components/canvas/store/layer.js | 2 -- frontend/src/store/index.js | 6 +++- frontend/src/views/panel/edit/index.vue | 33 +++++++++++++++++-- 5 files changed, 59 insertions(+), 9 deletions(-) diff --git a/frontend/src/components/DeDrag/index.vue b/frontend/src/components/DeDrag/index.vue index 8832a2c813..742bf26cd8 100644 --- a/frontend/src/components/DeDrag/index.vue +++ b/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() diff --git a/frontend/src/components/canvas/components/Editor/index.vue b/frontend/src/components/canvas/components/Editor/index.vue index 46ebd36679..b5ff7bcd48 100644 --- a/frontend/src/components/canvas/components/Editor/index.vue +++ b/frontend/src/components/canvas/components/Editor/index.vue @@ -55,6 +55,7 @@ @amRemoveItem="removeItem(item._dragId)" @amAddItem="addItemBox(item)" @linkJumpSet="linkJumpSet(item)" + @canvasDragging="canvasDragging" > - + @@ -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) } } }