139 lines
3.7 KiB
TypeScript
139 lines
3.7 KiB
TypeScript
import { setting } from '@lyric/store/state'
|
|
import { onBeforeUnmount, onMounted } from '@common/utils/vueTools'
|
|
import { setWindowBounds } from '@lyric/utils/ipc'
|
|
|
|
type Origin = 'left'
|
|
| 'top'
|
|
| 'right'
|
|
| 'bottom'
|
|
| 'top-left'
|
|
| 'top-right'
|
|
| 'bottom-left'
|
|
| 'bottom-right'
|
|
|
|
export default () => {
|
|
const resize: {
|
|
origin: Origin | null
|
|
msDownX: number
|
|
msDownY: number
|
|
} = {
|
|
origin: null,
|
|
msDownX: 0,
|
|
msDownY: 0,
|
|
}
|
|
|
|
const handleMove = (clientX: number, clientY: number) => {
|
|
if (!resize.origin || setting['desktopLyric.isLock']) return
|
|
// if (!event.target.classList.contains('resize-' + resize.origin)) return
|
|
// console.log(event.target)
|
|
let bounds: LX.DesktopLyric.NewBounds = {
|
|
w: 0,
|
|
h: 0,
|
|
x: 0,
|
|
y: 0,
|
|
}
|
|
let temp
|
|
switch (resize.origin) {
|
|
case 'left':
|
|
temp = clientX - resize.msDownX
|
|
bounds.w = -temp
|
|
bounds.x = temp
|
|
break
|
|
case 'right':
|
|
bounds.w = clientX - resize.msDownX
|
|
resize.msDownX += bounds.w
|
|
break
|
|
case 'top':
|
|
temp = clientY - resize.msDownY
|
|
bounds.y = temp
|
|
bounds.h = -temp
|
|
break
|
|
case 'bottom':
|
|
bounds.h = clientY - resize.msDownY
|
|
resize.msDownY += bounds.h
|
|
break
|
|
case 'top-left':
|
|
temp = clientX - resize.msDownX
|
|
bounds.w = -temp
|
|
bounds.x = temp
|
|
temp = clientY - resize.msDownY
|
|
bounds.y = temp
|
|
bounds.h = -temp
|
|
break
|
|
case 'top-right':
|
|
temp = clientY - resize.msDownY
|
|
bounds.y = temp
|
|
bounds.h = -temp
|
|
bounds.w = clientX - resize.msDownX
|
|
resize.msDownX += bounds.w
|
|
break
|
|
case 'bottom-left':
|
|
temp = clientX - resize.msDownX
|
|
bounds.w = -temp
|
|
bounds.x = temp
|
|
bounds.h = clientY - resize.msDownY
|
|
resize.msDownY += bounds.h
|
|
break
|
|
case 'bottom-right':
|
|
bounds.w = clientX - resize.msDownX
|
|
resize.msDownX += bounds.w
|
|
bounds.h = clientY - resize.msDownY
|
|
resize.msDownY += bounds.h
|
|
break
|
|
}
|
|
// console.log(bounds)
|
|
bounds.w = window.innerWidth + bounds.w
|
|
bounds.h = window.innerHeight + bounds.h
|
|
setWindowBounds(bounds)
|
|
}
|
|
|
|
const handleDown = (origin: Origin, clientX: number, clientY: number) => {
|
|
handleMouseUp()
|
|
resize.origin = origin
|
|
resize.msDownX = clientX
|
|
resize.msDownY = clientY
|
|
}
|
|
const handleMouseUp = () => {
|
|
resize.origin = null
|
|
}
|
|
|
|
const handleMouseDown = (origin: Origin, event: MouseEvent) => {
|
|
handleDown(origin, event.clientX, event.clientY)
|
|
}
|
|
const handleTouchDown = (origin: Origin, event: TouchEvent) => {
|
|
if (event.changedTouches.length) {
|
|
const touch = event.changedTouches[0]
|
|
handleDown(origin, touch.clientX, touch.clientY)
|
|
}
|
|
}
|
|
|
|
const handleMouseMove = (event: MouseEvent) => {
|
|
handleMove(event.clientX, event.clientY)
|
|
}
|
|
const handleTouchMove = (event: TouchEvent) => {
|
|
if (event.changedTouches.length) {
|
|
const touch = event.changedTouches[0]
|
|
handleMove(touch.clientX, touch.clientY)
|
|
}
|
|
}
|
|
|
|
|
|
onMounted(() => {
|
|
document.addEventListener('mousemove', handleMouseMove)
|
|
document.addEventListener('mouseup', handleMouseUp)
|
|
document.addEventListener('touchmove', handleTouchMove)
|
|
document.addEventListener('touchend', handleMouseUp)
|
|
})
|
|
onBeforeUnmount(() => {
|
|
document.removeEventListener('mousemove', handleMouseMove)
|
|
document.removeEventListener('mouseup', handleMouseUp)
|
|
document.removeEventListener('touchmove', handleTouchMove)
|
|
document.removeEventListener('touchend', handleMouseUp)
|
|
})
|
|
|
|
return {
|
|
handleMouseDown,
|
|
handleTouchDown,
|
|
}
|
|
}
|