Add touch events (#33)

* add touch events handler.

* bind events as non-passive.

* fix touch events.
This commit is contained in:
Miroslav Šedivý 2023-04-28 19:44:35 +02:00 committed by GitHub
parent 8df29744b0
commit fa0ac9d82e
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23

View File

@ -192,6 +192,10 @@
} }
this.keyboard.listenTo(this._textarea) this.keyboard.listenTo(this._textarea)
this._textarea.addEventListener('touchstart', this.onTouchHandler, { passive: false })
this._textarea.addEventListener('touchmove', this.onTouchHandler, { passive: false })
this._textarea.addEventListener('touchend', this.onTouchHandler, { passive: false })
this.webrtc.addListener('cursor-position', this.onCursorPosition) this.webrtc.addListener('cursor-position', this.onCursorPosition)
this.webrtc.addListener('cursor-image', this.onCursorImage) this.webrtc.addListener('cursor-image', this.onCursorImage)
this.webrtc.addListener('disconnected', this.canvasClear) this.webrtc.addListener('disconnected', this.canvasClear)
@ -205,6 +209,10 @@
this.keyboard.removeListener() this.keyboard.removeListener()
} }
this._textarea.removeEventListener('touchstart', this.onTouchHandler)
this._textarea.removeEventListener('touchmove', this.onTouchHandler)
this._textarea.removeEventListener('touchend', this.onTouchHandler)
this.webrtc.removeListener('cursor-position', this.onCursorPosition) this.webrtc.removeListener('cursor-position', this.onCursorPosition)
this.webrtc.removeListener('cursor-image', this.onCursorImage) this.webrtc.removeListener('cursor-image', this.onCursorImage)
this.webrtc.removeListener('disconnected', this.canvasClear) this.webrtc.removeListener('disconnected', this.canvasClear)
@ -219,6 +227,36 @@
} }
} }
onTouchHandler(e: TouchEvent) {
let type = ''
switch (e.type) {
case 'touchstart':
type = 'mousedown'
break
case 'touchmove':
type = 'mousemove'
break
case 'touchend':
type = 'mouseup'
break
default:
// unknown event
return
}
const touch = e.changedTouches[0]
touch.target.dispatchEvent(
new MouseEvent(type, {
button: 0, // currently only left button is supported
clientX: touch.clientX,
clientY: touch.clientY,
}),
)
e.preventDefault()
e.stopPropagation()
}
getMousePos(clientX: number, clientY: number) { getMousePos(clientX: number, clientY: number) {
const rect = this._overlay.getBoundingClientRect() const rect = this._overlay.getBoundingClientRect()