iridium/neko
2
2
Fork 0
mirror of https://github.com/m1k1o/neko.git synced 2024-07-24 14:40:50 +12:00
Code Issues Packages Projects Releases Wiki Activity

Throttle cursor events (#26)

Browse Source 
* clear inactive cursors.

* add mouse move throttle.
This commit is contained in:
Miroslav Šedivý 2023-04-12 13:19:57 +02:00 committed by GitHub
parent ebeaf9bb30
commit 84dcd1807c
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 21 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

34
src/component/overlay.vue
View File

@ -60,7 +60,8 @@
const CANVAS_SCALE = 2 const CANVAS_SCALE = 2
const INACTIVE_CURSOR_INTERVAL = 250 // ms const MOUSE_MOVE_THROTTLE = 1000 / 60 // in ms, 60fps
const INACTIVE_CURSOR_INTERVAL = 1000 / 4 // in ms, 4fps
@Component({ @Component({
name: 'neko-overlay', name: 'neko-overlay',
@ -205,10 +206,7 @@
this.cursorElement.onload = null this.cursorElement.onload = null
// stop inactive cursor interval if exists // stop inactive cursor interval if exists
if (this.inactiveCursorInterval !== null) { this.clearInactiveCursorInterval()
window.clearInterval(this.inactiveCursorInterval)
this.inactiveCursorInterval = null
}
} }
getMousePos(clientX: number, clientY: number) { getMousePos(clientX: number, clientY: number) {
@ -327,7 +325,13 @@
} }
} }
lastMouseMove = 0
onMouseMove(e: MouseEvent) { onMouseMove(e: MouseEvent) {
// throttle mousemove events
if (e.timeStamp - this.lastMouseMove < MOUSE_MOVE_THROTTLE) return
this.lastMouseMove = e.timeStamp
if (this.isControling) { if (this.isControling) {
this.sendMousePos(e) this.sendMousePos(e)
} }
@ -433,15 +437,19 @@
private inactiveCursorInterval: number | null = null private inactiveCursorInterval: number | null = null
private inactiveCursorPosition: CursorPosition | null = null private inactiveCursorPosition: CursorPosition | null = null
clearInactiveCursorInterval() {
if (this.inactiveCursorInterval) {
window.clearInterval(this.inactiveCursorInterval)
this.inactiveCursorInterval = null
}
}
@Watch('focused') @Watch('focused')
@Watch('isControling') @Watch('isControling')
@Watch('inactiveCursors') @Watch('inactiveCursors')
restartInactiveCursorInterval() { restartInactiveCursorInterval() {
// clear interval if exists // clear interval if exists
if (this.inactiveCursorInterval !== null) { this.clearInactiveCursorInterval()
window.clearInterval(this.inactiveCursorInterval)
this.inactiveCursorInterval = null
}
if (this.inactiveCursors && this.focused && !this.isControling) { if (this.inactiveCursors && this.focused && !this.isControling) {
this.inactiveCursorInterval = window.setInterval(this.sendInactiveMousePos.bind(this), INACTIVE_CURSOR_INTERVAL) this.inactiveCursorInterval = window.setInterval(this.sendInactiveMousePos.bind(this), INACTIVE_CURSOR_INTERVAL)
@ -450,11 +458,11 @@
saveInactiveMousePos(e: MouseEvent) { saveInactiveMousePos(e: MouseEvent) {
const pos = this.getMousePos(e.clientX, e.clientY) const pos = this.getMousePos(e.clientX, e.clientY)
Vue.set(this, 'inactiveCursorPosition', pos) this.inactiveCursorPosition = pos
} }
sendInactiveMousePos() { sendInactiveMousePos() {
if (this.inactiveCursorPosition != null) { if (this.inactiveCursorPosition) {
this.webrtc.send('mousemove', this.inactiveCursorPosition) this.webrtc.send('mousemove', this.inactiveCursorPosition)
} }
} }
@ -654,7 +662,7 @@
this.kbdOpen = false this.kbdOpen = false
this._textarea.focus() this._textarea.focus()
window.visualViewport.addEventListener('resize', this.onVisualViewportResize) window.visualViewport?.addEventListener('resize', this.onVisualViewportResize)
this.$emit('mobileKeyboardOpen', true) this.$emit('mobileKeyboardOpen', true)
} }
@ -666,7 +674,7 @@
this.kbdOpen = false this.kbdOpen = false
this.$emit('mobileKeyboardOpen', false) this.$emit('mobileKeyboardOpen', false)
window.visualViewport.removeEventListener('resize', this.onVisualViewportResize) window.visualViewport?.removeEventListener('resize', this.onVisualViewportResize)
this._textarea.blur() this._textarea.blur()
} }