diff --git a/src/component/overlay.vue b/src/component/overlay.vue index 74a3d29c..050ae2dc 100644 --- a/src/component/overlay.vue +++ b/src/component/overlay.vue @@ -192,6 +192,10 @@ } 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-image', this.onCursorImage) this.webrtc.addListener('disconnected', this.canvasClear) @@ -205,6 +209,10 @@ 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-image', this.onCursorImage) 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) { const rect = this._overlay.getBoundingClientRect()