diff --git a/publish/changeLog.md b/publish/changeLog.md index d671042d..1e24037e 100644 --- a/publish/changeLog.md +++ b/publish/changeLog.md @@ -8,6 +8,7 @@ - 优化开关评论时的动画性能 - 优化进入、离开播放详情页的性能 - 大幅优化我的列表、下载、歌单、排行榜列表性能,现在即使同一列表内的歌曲很多时也不会卡顿了 +- 兼容桌面歌词以触摸的方式移动、调整大小 ### 修复 diff --git a/src/renderer-lyric/App.vue b/src/renderer-lyric/App.vue index 14efddd3..455e45f4 100644 --- a/src/renderer-lyric/App.vue +++ b/src/renderer-lyric/App.vue @@ -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 @@ -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() + // }, }, } diff --git a/src/renderer-lyric/components/core/Lyric.vue b/src/renderer-lyric/components/core/Lyric.vue index f2597ea3..e55e9f41 100644 --- a/src/renderer-lyric/components/core/Lyric.vue +++ b/src/renderer-lyric/components/core/Lyric.vue @@ -1,5 +1,6 @@