Merge pull request #1671 from dataease/dev

Dev
This commit is contained in:
fit2cloudrd 2022-01-20 12:48:36 +08:00 committed by GitHub
commit e2292e659e
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 69 additions and 19 deletions

View File

@ -370,7 +370,9 @@ export default {
// //
mouseOn: false, mouseOn: false,
// snapshot // snapshot
hasMove: false hasMove: false,
//
latestMoveY: 0
} }
}, },
computed: { computed: {
@ -543,7 +545,8 @@ export default {
'canvasStyleData', 'canvasStyleData',
'linkageSettingStatus', 'linkageSettingStatus',
'mobileLayoutStatus', 'mobileLayoutStatus',
'componentGap' 'componentGap',
'scrollAutoMove'
]) ])
}, },
watch: { watch: {
@ -646,12 +649,14 @@ export default {
dragging(val) { dragging(val) {
if (this.enabled) { if (this.enabled) {
this.curComponent.optStatus.dragging = val this.curComponent.optStatus.dragging = val
this.$store.commit('setScrollAutoMove', 0)
} }
}, },
// private dragging resizing // private dragging resizing
resizing(val) { resizing(val) {
if (this.enabled) { if (this.enabled) {
this.curComponent.optStatus.resizing = val this.curComponent.optStatus.resizing = val
this.$store.commit('setScrollAutoMove', 0)
} }
} }
}, },
@ -724,6 +729,8 @@ export default {
// pageX pageY // pageX pageY
this.element.auxiliaryMatrix && this.$emit('elementMouseDown', e) this.element.auxiliaryMatrix && this.$emit('elementMouseDown', e)
this.$store.commit('setCurComponent', { component: this.element, index: this.index }) this.$store.commit('setCurComponent', { component: this.element, index: this.index })
//
this.mobileLayoutStatus && this.$store.commit('topComponent')
eventsFor = events.mouse eventsFor = events.mouse
this.elementDown(e) this.elementDown(e)
}, },
@ -763,6 +770,8 @@ export default {
this.mouseClickPosition.bottom = this.bottom this.mouseClickPosition.bottom = this.bottom
this.mouseClickPosition.width = this.width this.mouseClickPosition.width = this.width
this.mouseClickPosition.height = this.height this.mouseClickPosition.height = this.height
//
this.latestMoveY = this.mouseClickPosition.mouseY
if (this.parent) { if (this.parent) {
this.bounds = this.calcDragLimits() 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 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 [deltaX, deltaY] = snapToGrid(grid, tmpDeltaX, tmpDeltaY, this.scaleRatio)
const left = restrictToBounds(mouseClickPosition.left - deltaX, bounds.minLeft, bounds.maxLeft) const left = restrictToBounds(mouseClickPosition.left - deltaX, bounds.minLeft, bounds.maxLeft)
const top = restrictToBounds(mouseClickPosition.top - deltaY, bounds.minTop, bounds.maxTop) 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 right = restrictToBounds(mouseClickPosition.right + deltaX, bounds.minRight, bounds.maxRight)
const bottom = restrictToBounds(mouseClickPosition.bottom + deltaY, bounds.minBottom, bounds.maxBottom) const bottom = restrictToBounds(mouseClickPosition.bottom + deltaY, bounds.minBottom, bounds.maxBottom)
this.left = left this.left = left
this.top = top this.top = top + this.scrollAutoMove
this.right = right this.right = right
this.bottom = bottom this.bottom = bottom
await this.snapCheck() await this.snapCheck()

View File

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

View File

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

View File

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

View File

@ -126,7 +126,7 @@
class="this_mobile_canvas_main" class="this_mobile_canvas_main"
:style="mobileCanvasStyle" :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>
<el-row class="this_mobile_canvas_inner_bottom"> <el-row class="this_mobile_canvas_inner_bottom">
<el-col :span="12"> <el-col :span="12">
@ -265,6 +265,7 @@ export default {
}, },
data() { data() {
return { return {
autoMoveOffSet: 15,
mobileEditorShow: true, mobileEditorShow: true,
hasStar: false, hasStar: false,
drawerSize: '300px', drawerSize: '300px',
@ -397,7 +398,8 @@ export default {
'mobileLayoutStatus', 'mobileLayoutStatus',
'pcMatrixCount', 'pcMatrixCount',
'mobileMatrixCount', 'mobileMatrixCount',
'mobileLayoutStyle' 'mobileLayoutStyle',
'scrollAutoMove'
]) ])
}, },
@ -881,6 +883,33 @@ export default {
}, },
sureStatusChange(status) { sureStatusChange(status) {
this.enableSureButton = 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)
} }
} }
} }

View File

@ -1,15 +1,15 @@
{ {
"app.name": "DataEase", "app.name": "DataEase",
"navigate.menuHome": "Home", "navigate.menuHome": "Home",
"navigate.menuDir": "Dir", "navigate.menuDir": "Folder",
"navigate.menuMe": "Me", "navigate.menuMe": "Me",
"navigate.search": "Search", "navigate.search": "Search",
"navigate.personInfo": "Person Info", "navigate.personInfo": "My Profile",
"navigate.language": "Language", "navigate.language": "Language",
"navigate.about": "About", "navigate.about": "About",
"navigate.login": "Login", "navigate.login": "Login",
"searchPlaceholder": "Please Code Panel Name", "searchPlaceholder": "Please Input Panel Name",
"commons": { "commons": {
"cancel": "Cancel", "cancel": "Cancel",
@ -24,11 +24,11 @@
"login": { "login": {
"title": "User Login", "title": "User Login",
"account": "Account:", "account": "Account:",
"accountPlaceholder": "Please Code Account", "accountPlaceholder": "Please Input Account",
"password": "Password:", "password": "Password:",
"passwordPlaceholder": "Please Code Password:", "passwordPlaceholder": "Please Input Password:",
"loginbtn": "Login", "loginbtn": "Login",
"pwdFmtError": "Password Must More Than 6 Character", "pwdFmtError": "Password Must More Than 6 Characters",
"uOrpwdError": "Invalid Account Or Password" "uOrpwdError": "Invalid Account Or Password"
}, },
"home": { "home": {
@ -38,13 +38,13 @@
}, },
"dir": { "dir": {
"searchHistory": "Search History", "searchHistory": "Search History",
"clearConfirm": "Sure Clean All History ?", "clearConfirm": "Are You Sure To Clean All History ?",
"noHistory": "There Are No Any History", "noHistory": "There Are No Any History",
"contentPrefix": "The Content You Code Are ", "contentPrefix": "The Content Is ",
"contentSuffix": "Will Be Marked As History When You Confirm" "contentSuffix": "Will Be Marked As History When You Confirm"
}, },
"me": { "me": {
"moreInfo": "More Info", "moreInfo": "More",
"logout": "Logout", "logout": "Logout",
"systemInfo": "System Info", "systemInfo": "System Info",