优化image-resieze.ts
This commit is contained in:
parent
7367179d22
commit
33b75d2187
@ -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,
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user