ion/Melo
1
0
Fork 0
Code Issues Pull Requests Actions 11 Packages Projects Releases Wiki Activity

兼容桌面歌词以触摸的方式移动、调整大小

Browse Source
This commit is contained in:
lyswhut
2021-10-26 15:51:48 +08:00
parent 7737012103
commit 34825b5063
3 changed files with 81 additions and 47 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/renderer-lyric/App.vue
+44 -26
View File
@@ -5,14 +5,14 @@
.control-bar(v-show="!lrcConfig.isLock")
core-control-bar(:lrcConfig="lrcConfig" :themes="themeList")
core-lyric(:lrcConfig="lrcConfig" :isPlayLxlrc="isPlayLxlrc" :isShowLyricTranslation="isShowLyricTranslation")
div.resize-left(@mousedown.self="handleMouseDown('left', $event)")
div.resize-top(@mousedown.self="handleMouseDown('top', $event)")
div.resize-right(@mousedown.self="handleMouseDown('right', $event)")
div.resize-bottom(@mousedown.self="handleMouseDown('bottom', $event)")
div.resize-top-left(@mousedown.self="handleMouseDown('top-left', $event)")
div.resize-top-right(@mousedown.self="handleMouseDown('top-right', $event)")
div.resize-bottom-left(@mousedown.self="handleMouseDown('bottom-left', $event)")
div.resize-bottom-right(@mousedown.self="handleMouseDown('bottom-right', $event)")
div.resize-left(@mousedown.self="handleMouseDown('left', $event)" @touchstart.self="handleTouchDown('left', $event)")
div.resize-top(@mousedown.self="handleMouseDown('top', $event)" @touchstart.self="handleTouchDown('top', $event)")
div.resize-right(@mousedown.self="handleMouseDown('right', $event)" @touchstart.self="handleTouchDown('right', $event)")
div.resize-bottom(@mousedown.self="handleMouseDown('bottom', $event)" @touchstart.self="handleTouchDown('bottom', $event)")
div.resize-top-left(@mousedown.self="handleMouseDown('top-left', $event)" @touchstart.self="handleTouchDown('top-left', $event)")
div.resize-top-right(@mousedown.self="handleMouseDown('top-right', $event)" @touchstart.self="handleTouchDown('top-right', $event)")
div.resize-bottom-left(@mousedown.self="handleMouseDown('bottom-left', $event)" @touchstart.self="handleTouchDown('bottom-left', $event)")
div.resize-bottom-right(@mousedown.self="handleMouseDown('bottom-right', $event)" @touchstart.self="handleTouchDown('bottom-right', $event)")
core-icons
</template>
@@ -116,16 +116,34 @@ export default {
this.isPlayLxlrc = isPlayLxlrc
if (this.$i18n.locale !== languageId && languageId != null) this.$i18n.locale = languageId
},
handleMouseDown(origin, event) {
handleDown(origin, clientX, clientY) {
this.handleMouseUp()
this.resize.origin = origin
this.resize.msDownX = event.clientX
this.resize.msDownY = event.clientY
this.resize.msDownX = clientX
this.resize.msDownY = clientY
},
handleMouseUp() {
this.resize.origin = null
},
handleMouseDown(origin, event) {
this.handleDown(origin, event.clientX, event.clientY)
},
handleTouchDown(origin, event) {
if (event.changedTouches.length) {
const touch = event.changedTouches[0]
this.handleDown(origin, touch.clientX, touch.clientY)
}
},
handleMouseMove(event) {
this.handleMove(event.clientX, event.clientY)
},
handleTouchMove(event) {
if (event.changedTouches.length) {
const touch = event.changedTouches[0]
this.handleMove(touch.clientX, touch.clientY)
}
},
handleMove(clientX, clientY) {
if (!this.resize.origin) return
// if (!event.target.classList.contains('resize-' + this.resize.origin)) return
// console.log(event.target)
@@ -136,49 +154,49 @@ export default {
let temp
switch (this.resize.origin) {
case 'left':
temp = event.clientX - this.resize.msDownX
temp = clientX - this.resize.msDownX
bounds.w = -temp
bounds.x = temp
break
case 'right':
bounds.w = event.clientX - this.resize.msDownX
bounds.w = clientX - this.resize.msDownX
this.resize.msDownX += bounds.w
break
case 'top':
temp = event.clientY - this.resize.msDownY
temp = clientY - this.resize.msDownY
bounds.y = temp
bounds.h = -temp
break
case 'bottom':
bounds.h = event.clientY - this.resize.msDownY
bounds.h = clientY - this.resize.msDownY
this.resize.msDownY += bounds.h
break
case 'top-left':
temp = event.clientX - this.resize.msDownX
temp = clientX - this.resize.msDownX
bounds.w = -temp
bounds.x = temp
temp = event.clientY - this.resize.msDownY
temp = clientY - this.resize.msDownY
bounds.y = temp
bounds.h = -temp
break
case 'top-right':
temp = event.clientY - this.resize.msDownY
temp = clientY - this.resize.msDownY
bounds.y = temp
bounds.h = -temp
bounds.w = event.clientX - this.resize.msDownX
bounds.w = clientX - this.resize.msDownX
this.resize.msDownX += bounds.w
break
case 'bottom-left':
temp = event.clientX - this.resize.msDownX
temp = clientX - this.resize.msDownX
bounds.w = -temp
bounds.x = temp
bounds.h = event.clientY - this.resize.msDownY
bounds.h = clientY - this.resize.msDownY
this.resize.msDownY += bounds.h
break
case 'bottom-right':
bounds.w = event.clientX - this.resize.msDownX
bounds.w = clientX - this.resize.msDownX
this.resize.msDownX += bounds.w
bounds.h = event.clientY - this.resize.msDownY
bounds.h = clientY - this.resize.msDownY
this.resize.msDownY += bounds.h
break
}
@@ -187,9 +205,9 @@ export default {
bounds.h = window.innerHeight + bounds.h
rendererSend(NAMES.winLyric.set_win_bounds, bounds)
},
handleMouseOver() {
// this.handleMouseUp()
},
// handleMouseOver() {
// // this.handleMouseUp()
// },
},
}
</script>