优化image-resieze.ts

This commit is contained in:
jingrow 2025-10-16 21:40:16 +08:00
parent 7367179d22
commit 33b75d2187

View File

@ -88,6 +88,7 @@ export default Node.create({
resizeHandle.style.borderRadius = '50%'
resizeHandle.style.boxShadow = '0 0 2px #1fc76f'
resizeHandle.style.zIndex = '2'
;(resizeHandle.style as any).touchAction = 'none'
resizeHandle.className = 'image-resize-handle'
dom.appendChild(resizeHandle)
@ -99,7 +100,10 @@ export default Node.create({
let startHeight = 0
const onResizeStart = (e: MouseEvent | TouchEvent) => {
e.preventDefault()
const isTouch = (e as any).type && String((e as any).type).startsWith('touch')
if (!isTouch) {
e.preventDefault()
}
e.stopPropagation()
isResizing = true
@ -115,14 +119,16 @@ export default Node.create({
document.addEventListener('mousemove', onResizeMove)
document.addEventListener('mouseup', onResizeEnd)
document.addEventListener('touchmove', onResizeMove)
document.addEventListener('touchend', onResizeEnd)
document.addEventListener('touchmove', onResizeMove, { passive: true })
document.addEventListener('touchend', onResizeEnd, { passive: true })
}
const onResizeMove = (e: MouseEvent | TouchEvent) => {
if (!isResizing) return
e.preventDefault()
const isTouch = (e as any).type && String((e as any).type).startsWith('touch')
if (!isTouch) {
e.preventDefault()
}
e.stopPropagation()
const clientX = (e as MouseEvent).clientX || ((e as TouchEvent).touches && (e as TouchEvent).touches[0] ? (e as TouchEvent).touches[0].clientX : 0)
@ -149,7 +155,11 @@ export default Node.create({
}
const onResizeEnd = (e: MouseEvent | TouchEvent) => {
e.preventDefault()
// 仅在鼠标事件中阻止默认
const isTouch = (e as any).type && String((e as any).type).startsWith('touch')
if (!isTouch) {
e.preventDefault()
}
e.stopPropagation()
isResizing = false
@ -162,13 +172,13 @@ export default Node.create({
// 缩放手柄事件 - 阻止拖拽
resizeHandle.addEventListener('mousedown', (e) => {
e.stopPropagation() // 阻止拖拽事件
e.stopPropagation()
onResizeStart(e)
})
resizeHandle.addEventListener('touchstart', (e) => {
e.stopPropagation() // 阻止拖拽事件
e.stopPropagation()
onResizeStart(e)
})
}, { passive: true })
return {
dom,