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

Optimizing canvas for cursor rendering (#27)

Browse Source 
* use dpr as canvas scale.

* wheel use event timestamp.

* remove vue set.

* add cursor rendering fps.
This commit is contained in:
Miroslav Šedivý 2023-04-13 12:25:36 +02:00 committed by GitHub
parent dfc998bb00
commit 1f461cb322
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 63 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
src/component/cursors.vue
View File

@ -20,7 +20,6 @@
import { InactiveCursorDrawFunction, Dimension } from './types/cursors'
import { getMovementXYatPercent } from './utils/canvas-movement'
const CANVAS_SCALE = 2
// How often are position data arriving
const POS_INTERVAL_MS = 750
// How many pixel change is considered as movement
@ -33,6 +32,8 @@
@Ref('overlay') readonly _overlay!: HTMLCanvasElement
private _ctx!: CanvasRenderingContext2D
private canvasScale = window.devicePixelRatio
@Prop()
private readonly sessions!: Record<string, Session>
@ -54,6 +55,9 @@
@Prop()
private readonly cursorDraw!: InactiveCursorDrawFunction | null
@Prop()
private readonly fps!: number
mounted() {
// get canvas overlay context
const ctx = this._overlay.getContext('2d')
@ -78,9 +82,9 @@
}
canvasResize({ width, height }: Dimension) {
this._overlay.width = width * CANVAS_SCALE
this._overlay.height = height * CANVAS_SCALE
this._ctx.setTransform(CANVAS_SCALE, 0, 0, CANVAS_SCALE, 0, 0)
this._overlay.width = width * this.canvasScale
this._overlay.height = height * this.canvasScale
this._ctx.setTransform(this.canvasScale, 0, 0, this.canvasScale, 0, 0)
}
// start as undefined to prevent jumping
@ -96,8 +100,14 @@
// request another frame
if (this._percent <= 1) window.requestAnimationFrame(this.canvasAnimateFrame)
// calculate factor
const delta = (now - this._last_animation_time) / POS_INTERVAL_MS
// calc elapsed time since last loop
const elapsed = now - this._last_animation_time
// skip if fps is set and elapsed time is less than fps
if (this.fps > 0 && elapsed < 1000 / this.fps) return
// calc current animation progress
const delta = elapsed / POS_INTERVAL_MS
this._last_animation_time = now
// skip very first delta to prevent jumping
@ -208,7 +218,7 @@
y = Math.round((y / this.screenSize.height) * height)
// reset transformation, X and Y will be 0 again
this._ctx.setTransform(CANVAS_SCALE, 0, 0, CANVAS_SCALE, 0, 0)
this._ctx.setTransform(this.canvasScale, 0, 0, this.canvasScale, 0, 0)
// use custom draw function, if available
if (this.cursorDraw) {
@ -234,7 +244,7 @@
canvasClear() {
// reset transformation, X and Y will be 0 again
this._ctx.setTransform(CANVAS_SCALE, 0, 0, CANVAS_SCALE, 0, 0)
this._ctx.setTransform(this.canvasScale, 0, 0, this.canvasScale, 0, 0)
const { width, height } = this._overlay
this._ctx.clearRect(0, 0, width, height)

6
src/component/main.vue
View File

@ -18,6 +18,7 @@
:canvasSize="canvasSize"
:cursors="state.cursors"
:cursorDraw="inactiveCursorDrawFunction"
:fps="fps"
/>
<neko-overlay
ref="overlay"
@ -34,6 +35,7 @@
:cursorDraw="cursorDrawFunction"
:implicitControl="state.settings.implicit_hosting && session.profile.can_host"
:inactiveCursors="state.settings.inactive_cursors && session.profile.sends_inactive_cursor"
:fps="fps"
@updateKeyboardModifiers="updateKeyboardModifiers($event)"
@uploadDrop="uploadDrop($event)"
@mobileKeyboardOpen="state.mobile_keyboard_open = $event"
@ -132,6 +134,10 @@
@Prop({ type: Boolean })
private readonly autoplay!: boolean
// fps for cursor rendering, 0 for no cap
@Prop({ type: Number, default: 0 })
private readonly fps!: number
/////////////////////////////
// Public state
/////////////////////////////

56
src/component/overlay.vue
View File

@ -58,8 +58,6 @@
const WHEEL_STEP = 53 // Delta threshold for a mouse wheel step
const WHEEL_LINE_HEIGHT = 19
const CANVAS_SCALE = 2
const MOUSE_MOVE_THROTTLE = 1000 / 60 // in ms, 60fps
const INACTIVE_CURSOR_INTERVAL = 1000 / 4 // in ms, 4fps
@ -71,6 +69,8 @@
@Ref('textarea') readonly _textarea!: HTMLTextAreaElement
private _ctx!: CanvasRenderingContext2D
private canvasScale = window.devicePixelRatio
private keyboard!: KeyboardInterface
private textInput = ''
@ -109,6 +109,9 @@
@Prop()
private readonly inactiveCursors!: boolean
@Prop()
private readonly fps!: number
get cursor(): string {
if (!this.isControling || !this.cursorImage) {
return 'default'
@ -221,12 +224,12 @@
sendMousePos(e: MouseEvent) {
const pos = this.getMousePos(e.clientX, e.clientY)
this.webrtc.send('mousemove', pos)
Vue.set(this, 'cursorPosition', pos)
this.cursorPosition = pos
}
private wheelX = 0
private wheelY = 0
private wheelDate = Date.now()
private wheelTimeStamp = 0
// negative sensitivity can be acheived using increased step value
get wheelStep() {
@ -268,13 +271,13 @@
return
}
const now = Date.now()
const firstScroll = now - this.wheelDate > 250
// when the last scroll was more than 250ms ago
const firstScroll = e.timeStamp - this.wheelTimeStamp > 250
if (firstScroll) {
this.wheelX = 0
this.wheelY = 0
this.wheelDate = now
this.wheelTimeStamp = e.timeStamp
}
let dx = e.deltaX
@ -397,10 +400,10 @@
onMouseLeave(e: MouseEvent) {
if (this.isControling) {
// save current keyboard modifiers state
Vue.set(this, 'keyboardModifiers', {
this.keyboardModifiers = {
capslock: e.getModifierState('CapsLock'),
numlock: e.getModifierState('NumLock'),
})
}
}
this.focused = false
@ -493,7 +496,9 @@
private cursorImage: CursorImage | null = null
private cursorElement: HTMLImageElement = new Image()
private cursorPosition: CursorPosition | null = null
private cursorLastTime = 0
private canvasRequestedFrame = false
private canvasRenderTimeout: number | null = null
@Watch('canvasSize')
onCanvasSizeChange({ width, height }: Dimension) {
@ -503,13 +508,13 @@
onCursorPosition(data: CursorPosition) {
if (!this.isControling) {
Vue.set(this, 'cursorPosition', data)
this.cursorPosition = data
this.canvasRequestRedraw()
}
}
onCursorImage(data: CursorImage) {
Vue.set(this, 'cursorImage', data)
this.cursorImage = data
if (!this.isControling) {
this.cursorElement.src = data.uri
@ -517,9 +522,9 @@
}
canvasResize({ width, height }: Dimension) {
this._overlay.width = width * CANVAS_SCALE
this._overlay.height = height * CANVAS_SCALE
this._ctx.setTransform(CANVAS_SCALE, 0, 0, CANVAS_SCALE, 0, 0)
this._overlay.width = width * this.canvasScale
this._overlay.height = height * this.canvasScale
this._ctx.setTransform(this.canvasScale, 0, 0, this.canvasScale, 0, 0)
}
@Watch('hostId')
@ -528,6 +533,23 @@
// skip rendering if there is already in progress
if (this.canvasRequestedFrame) return
// throttle rendering according to fps
if (this.fps > 0) {
if (this.canvasRenderTimeout) {
window.clearTimeout(this.canvasRenderTimeout)
this.canvasRenderTimeout = null
}
const now = Date.now()
if (now - this.cursorLastTime < 1000 / this.fps) {
// ensure that last frame is rendered
this.canvasRenderTimeout = window.setTimeout(this.canvasRequestRedraw, 1000 / this.fps)
return
}
this.cursorLastTime = now
}
// request animation frame from a browser
this.canvasRequestedFrame = true
window.requestAnimationFrame(() => {
@ -554,7 +576,7 @@
let { width, height } = this.canvasSize
// reset transformation, X and Y will be 0 again
this._ctx.setTransform(CANVAS_SCALE, 0, 0, CANVAS_SCALE, 0, 0)
this._ctx.setTransform(this.canvasScale, 0, 0, this.canvasScale, 0, 0)
// get cursor position
let x = Math.round((this.cursorPosition.x / this.screenSize.width) * width)
@ -596,7 +618,7 @@
canvasClear() {
// reset transformation, X and Y will be 0 again
this._ctx.setTransform(CANVAS_SCALE, 0, 0, CANVAS_SCALE, 0, 0)
this._ctx.setTransform(this.canvasScale, 0, 0, this.canvasScale, 0, 0)
const { width, height } = this._overlay
this._ctx.clearRect(0, 0, width, height)
@ -611,7 +633,7 @@
@Watch('isControling')
onControlChange(isControling: boolean) {
Vue.set(this, 'keyboardModifiers', null)
this.keyboardModifiers = null
if (isControling && this.reqMouseDown) {
this.updateKeyboardModifiers(this.reqMouseDown)