允许拖动桌面歌词控制栏空白处移动歌词窗口（#2280）

publish/changeLog.md

@@ -8,6 +8,7 @@
 ### 优化
 
 - 允许更小的桌面歌词窗口宽度
+- 允许拖动桌面歌词控制栏空白处移动歌词窗口（#2280）
 - 优化「自定义源管理」对话框在小窗口下的布局（#2247, @3gf8jv4dv）
 - 优化软件文案编排（#2259, #2266, #2269, @3gf8jv4dv）
 

src/renderer-lyric/components/layout/ControlBar.vue

@@ -1,7 +1,7 @@
 <template>
   <div :class="$style.container">
     <transition enter-active-class="animated-fast fadeIn" leave-active-class="animated fadeOut">
-      <div v-show="!isShowThemeList" :class="$style.btns">
+      <div v-show="!isShowThemeList" :class="$style.btns" @mousedown="handleLyricMouseDown" @touchstart="handleLyricTouchStart">
         <button :class="$style.btn" :title="$t('desktop_lyric__close')" @click="handleClose">
           <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xlink="http://www.w3.org/1999/xlink" height="20px" viewBox="0 0 24 24" space="preserve">
             <use xlink:href="#icon-close" />
@@ -60,10 +60,12 @@
 import { ref } from '@common/utils/vueTools'
 import { setting } from '@lyric/store/state'
 import { updateSetting } from '@lyric/store/action'
+import useDrag from './useDrag'
 
 export default {
   setup() {
     const isShowThemeList = ref(false)
+    const { handleLyricMouseDown, handleLyricTouchStart } = useDrag()
 
     const handleClose = () => {
       updateSetting({ 'desktopLyric.enable': false })
@@ -113,6 +115,8 @@ export default {
       handleZoomLrc,
       handleFontChange,
       handleOpactiyChange,
+      handleLyricMouseDown,
+      handleLyricTouchStart,
     }
   },
 }

src/renderer-lyric/components/layout/useDrag.js

@@ -0,0 +1,87 @@
+import { onMounted, onBeforeUnmount } from '@common/utils/vueTools'
+import { setWindowBounds, setWindowResizeable } from '@lyric/utils/ipc'
+import { isWin } from '@common/utils'
+
+export default () => {
+  const winEvent = {
+    isMsDown: false,
+    msDownX: 0,
+    msDownY: 0,
+    windowW: 0,
+    windowH: 0,
+  }
+
+  const handleLyricDown = (target, x, y) => {
+    winEvent.isMsDown = true
+    winEvent.msDownX = x
+    winEvent.msDownY = y
+    winEvent.windowW = window.innerWidth
+    winEvent.windowH = window.innerHeight
+    // https://github.com/lyswhut/lx-music-desktop/issues/2244
+    if (isWin) setWindowResizeable(false)
+  }
+  const handleLyricMouseDown = event => {
+    console.log(event.target, event.currentTarget)
+    if (event.target !== event.currentTarget) return
+    handleLyricDown(event.target, event.clientX, event.clientY)
+  }
+  const handleLyricTouchStart = event => {
+    if (event.changedTouches.length) {
+      const touch = event.changedTouches[0]
+      if (touch.target !== touch.currentTarget) return
+      handleLyricDown(event.target, touch.clientX, touch.clientY)
+    }
+  }
+  const handleMouseMsUp = () => {
+    winEvent.isMsDown = false
+    if (isWin) setWindowResizeable(true)
+  }
+
+  const handleMove = (x, y) => {
+    if (!winEvent.isMsDown) return
+    // https://github.com/lyswhut/lx-music-desktop/issues/2244
+    if (isWin) {
+      setWindowBounds({
+        x: x - winEvent.msDownX,
+        y: y - winEvent.msDownY,
+        w: winEvent.windowW,
+        h: winEvent.windowH,
+      })
+    } else {
+      setWindowBounds({
+        x: x - winEvent.msDownX,
+        y: y - winEvent.msDownY,
+        w: window.innerWidth,
+        h: window.innerHeight,
+      })
+    }
+  }
+  const handleMouseMsMove = event => {
+    handleMove(event.clientX, event.clientY)
+  }
+  const handleTouchMove = (e) => {
+    if (e.changedTouches.length) {
+      const touch = e.changedTouches[0]
+      handleMove(touch.clientX, touch.clientY)
+    }
+  }
+
+  onMounted(() => {
+    document.addEventListener('mousemove', handleMouseMsMove)
+    document.addEventListener('mouseup', handleMouseMsUp)
+    document.addEventListener('touchmove', handleTouchMove)
+    document.addEventListener('touchend', handleMouseMsUp)
+  })
+
+  onBeforeUnmount(() => {
+    document.removeEventListener('mousemove', handleMouseMsMove)
+    document.removeEventListener('mouseup', handleMouseMsUp)
+    document.removeEventListener('touchmove', handleTouchMove)
+    document.removeEventListener('touchend', handleMouseMsUp)
+  })
+
+  return {
+    handleLyricMouseDown,
+    handleLyricTouchStart,
+  }
+}