neko/src/component/overlay.vue
2021-10-26 20:12:55 +02:00

500 lines
12 KiB
Vue

<template>
<canvas
ref="overlay"
class="neko-overlay"
tabindex="0"
:style="{ cursor }"
@click.stop.prevent
@contextmenu.stop.prevent
@wheel.stop.prevent="onWheel"
@mousemove.stop.prevent="onMouseMove"
@mousedown.stop.prevent="onMouseDown"
@mouseup.stop.prevent="onMouseUp"
@mouseenter.stop.prevent="onMouseEnter"
@mouseleave.stop.prevent="onMouseLeave"
@dragenter.stop.prevent="onDragEnter"
@dragleave.stop.prevent="onDragLeave"
@dragover.stop.prevent="onDragOver"
@drop.stop.prevent="onDrop"
/>
</template>
<style lang="scss" scoped>
.neko-overlay {
position: absolute;
top: 0;
bottom: 0;
width: 100%;
height: 100%;
outline: 0;
}
</style>
<script lang="ts">
import { Vue, Component, Ref, Prop, Watch } from 'vue-property-decorator'
import GuacamoleKeyboard from './utils/guacamole-keyboard'
import { keySymsRemap } from './utils/keyboard-remapping'
import { getFilesFromDataTansfer } from './utils/file-upload'
import { NekoWebRTC } from './internal/webrtc'
import { Scroll } from './types/state'
import { CursorPosition, CursorImage } from './types/webrtc'
import { CursorDrawFunction, Dimension, KeyboardModifiers } from './types/overlay'
const WHEEL_STEP = 53 // Delta threshold for a mouse wheel step
const WHEEL_LINE_HEIGHT = 19
const CANVAS_SCALE = 2
@Component({
name: 'neko-overlay',
})
export default class extends Vue {
@Ref('overlay') readonly _overlay!: HTMLCanvasElement
private _ctx!: CanvasRenderingContext2D
private keyboard = GuacamoleKeyboard()
private focused = false
@Prop()
private readonly webrtc!: NekoWebRTC
@Prop()
private readonly scroll!: Scroll
@Prop()
private readonly screenSize!: Dimension
@Prop()
private readonly canvasSize!: Dimension
@Prop()
private readonly cursorTag!: string
@Prop()
private readonly cursorDraw!: CursorDrawFunction | null
@Prop()
private readonly isControling!: boolean
@Prop()
private readonly implicitControl!: boolean
get cursor(): string {
if (!this.isControling || !this.cursorImage) {
return 'auto'
}
const { uri, x, y } = this.cursorImage
return 'url(' + uri + ') ' + x + ' ' + y + ', auto'
}
mounted() {
// get canvas overlay context
const ctx = this._overlay.getContext('2d')
if (ctx != null) {
this._ctx = ctx
}
// synchronize intrinsic with extrinsic dimensions
const { width, height } = this._overlay.getBoundingClientRect()
this._overlay.width = width * CANVAS_SCALE
this._overlay.height = height * CANVAS_SCALE
// Initialize Guacamole Keyboard
this.keyboard.onkeydown = (key: number) => {
if (!this.focused) {
return true
}
if (!this.isControling) {
return true
}
this.webrtc.send('keydown', {
key: keySymsRemap(key),
})
return false
}
this.keyboard.onkeyup = (key: number) => {
if (!this.focused) {
return
}
if (!this.isControling) {
return
}
this.webrtc.send('keyup', {
key: keySymsRemap(key),
})
}
this.keyboard.listenTo(this._overlay)
this.webrtc.addListener('cursor-position', this.onCursorPosition)
this.webrtc.addListener('cursor-image', this.onCursorImage)
this.webrtc.addListener('disconnected', this.canvasClear)
this.cursorElement.onload = this.canvasRequestRedraw
}
beforeDestroy() {
// Guacamole Keyboard does not provide destroy functions
this.webrtc.removeListener('cursor-position', this.onCursorPosition)
this.webrtc.removeListener('cursor-image', this.onCursorImage)
this.webrtc.removeListener('disconnected', this.canvasClear)
this.cursorElement.onload = null
}
getMousePos(clientX: number, clientY: number) {
const rect = this._overlay.getBoundingClientRect()
return {
x: Math.round((this.screenSize.width / rect.width) * (clientX - rect.left)),
y: Math.round((this.screenSize.height / rect.height) * (clientY - rect.top)),
}
}
setMousePos(e: MouseEvent) {
const pos = this.getMousePos(e.clientX, e.clientY)
this.webrtc.send('mousemove', pos)
Vue.set(this, 'cursorPosition', pos)
}
private wheelX = 0
private wheelY = 0
private wheelDate = Date.now()
// negative sensitivity can be acheived using increased step value
get wheelStep() {
let x = WHEEL_STEP
if (this.scroll.sensitivity < 0) {
x *= Math.abs(this.scroll.sensitivity) + 1
}
return x
}
// sensitivity can only be positive
get wheelSensitivity() {
let x = 1
if (this.scroll.sensitivity > 0) {
x = Math.abs(this.scroll.sensitivity) + 1
}
if (this.scroll.inverse) {
x *= -1
}
return x
}
onWheel(e: WheelEvent) {
if (!this.isControling) {
return
}
this.setMousePos(e)
const now = Date.now()
const firstScroll = now - this.wheelDate > 250
if (firstScroll) {
this.wheelX = 0
this.wheelY = 0
this.wheelDate = now
}
let dx = e.deltaX
let dy = e.deltaY
if (e.deltaMode !== 0) {
dx *= WHEEL_LINE_HEIGHT
dy *= WHEEL_LINE_HEIGHT
}
this.wheelX += dx
this.wheelY += dy
let x = 0
if (Math.abs(this.wheelX) >= this.wheelStep || firstScroll) {
if (this.wheelX < 0) {
x = this.wheelSensitivity * -1
} else if (this.wheelX > 0) {
x = this.wheelSensitivity
}
if (!firstScroll) {
this.wheelX = 0
}
}
let y = 0
if (Math.abs(this.wheelY) >= this.wheelStep || firstScroll) {
if (this.wheelY < 0) {
y = this.wheelSensitivity * -1
} else if (this.wheelY > 0) {
y = this.wheelSensitivity
}
if (!firstScroll) {
this.wheelY = 0
}
}
if (x != 0 || y != 0) {
this.webrtc.send('wheel', { x, y })
}
}
onMouseMove(e: MouseEvent) {
// TODO: Send less events if not controlling.
//if (!this.isControling) {
// return
//}
this.setMousePos(e)
}
onMouseDown(e: MouseEvent) {
if (!this.isControling) {
this.implicitControlRequest(e)
return
}
this.setMousePos(e)
this.webrtc.send('mousedown', { key: e.button + 1 })
}
onMouseUp(e: MouseEvent) {
if (!this.isControling) {
this.implicitControlRequest(e)
return
}
this.setMousePos(e)
this.webrtc.send('mouseup', { key: e.button + 1 })
}
onMouseEnter(e: MouseEvent) {
this._overlay.focus()
this.focused = true
if (this.isControling) {
this.updateKeyboardModifiers(e)
}
}
onMouseLeave(e: MouseEvent) {
if (this.isControling) {
this.keyboard.reset()
// save current keyboard modifiers state
Vue.set(this, 'keyboardModifiers', {
capslock: e.getModifierState('CapsLock'),
numlock: e.getModifierState('NumLock'),
})
}
this._overlay.blur()
this.focused = false
}
onDragEnter(e: DragEvent) {
this.onMouseEnter(e as MouseEvent)
}
onDragLeave(e: DragEvent) {
this.onMouseLeave(e as MouseEvent)
}
onDragOver(e: DragEvent) {
this.onMouseMove(e as MouseEvent)
}
async onDrop(e: DragEvent) {
if (this.isControling || this.implicitControl) {
let dt = e.dataTransfer
if (!dt) return
const files = await getFilesFromDataTansfer(dt)
if (files.length === 0) return
this.$emit('uploadDrop', { ...this.getMousePos(e.clientX, e.clientY), files })
}
}
//
// keyboard modifiers
//
private keyboardModifiers: KeyboardModifiers | null = null
updateKeyboardModifiers(e: MouseEvent) {
const capslock = e.getModifierState('CapsLock')
const numlock = e.getModifierState('NumLock')
if (
this.keyboardModifiers === null ||
this.keyboardModifiers.capslock !== capslock ||
this.keyboardModifiers.numlock !== numlock
) {
this.$emit('updateKeyboardModifiers', { capslock, numlock })
}
}
//
// canvas
//
private cursorImage: CursorImage | null = null
private cursorElement: HTMLImageElement = new Image()
private cursorPosition: CursorPosition | null = null
private canvasRequestedFrame = false
@Watch('canvasSize')
onCanvasSizeChange({ width, height }: Dimension) {
this._overlay.width = width * CANVAS_SCALE
this._overlay.height = height * CANVAS_SCALE
this.canvasRequestRedraw()
}
onCursorPosition(data: CursorPosition) {
if (!this.isControling) {
Vue.set(this, 'cursorPosition', data)
this.canvasRequestRedraw()
}
}
onCursorImage(data: CursorImage) {
Vue.set(this, 'cursorImage', data)
if (!this.isControling) {
this.cursorElement.src = data.uri
}
}
@Watch('cursorDraw')
@Watch('cursorTag')
canvasRequestRedraw() {
// skip rendering if there is already in progress
if (this.canvasRequestedFrame) return
// request animation frame from a browser
this.canvasRequestedFrame = true
window.requestAnimationFrame(() => {
if (this.isControling) {
this.canvasClear()
} else {
this.canvasRedraw()
}
this.canvasRequestedFrame = false
})
}
canvasRedraw() {
if (!this.cursorPosition || !this.screenSize || !this.cursorImage) return
// clear drawings
this.canvasClear()
// ignore hidden cursor
if (this.cursorImage.width <= 1 && this.cursorImage.height <= 1) return
// get intrinsic dimensions
let { width, height } = this.canvasSize
this._ctx.setTransform(CANVAS_SCALE, 0, 0, CANVAS_SCALE, 0, 0)
// get cursor position
let x = Math.round((this.cursorPosition.x / this.screenSize.width) * width)
let y = Math.round((this.cursorPosition.y / this.screenSize.height) * height)
// use custom draw function, if available
if (this.cursorDraw) {
this.cursorDraw(this._ctx, x, y, this.cursorElement, this.cursorImage, this.cursorTag)
return
}
// draw cursor image
this._ctx.drawImage(
this.cursorElement,
x - this.cursorImage.x,
y - this.cursorImage.y,
this.cursorImage.width,
this.cursorImage.height,
)
// draw cursor tag
if (this.cursorTag) {
x += this.cursorImage.width
y += this.cursorImage.height
this._ctx.save()
this._ctx.font = '14px Arial, sans-serif'
this._ctx.textBaseline = 'top'
this._ctx.shadowColor = 'black'
this._ctx.shadowBlur = 2
this._ctx.lineWidth = 2
this._ctx.fillStyle = 'black'
this._ctx.strokeText(this.cursorTag, x, y)
this._ctx.shadowBlur = 0
this._ctx.fillStyle = 'white'
this._ctx.fillText(this.cursorTag, x, y)
this._ctx.restore()
}
}
canvasClear() {
const { width, height } = this._overlay
this._ctx.clearRect(0, 0, width, height)
}
//
// implicit hosting
//
private reqMouseDown: MouseEvent | null = null
private reqMouseUp: MouseEvent | null = null
@Watch('isControling')
onControlChange(isControling: boolean) {
Vue.set(this, 'keyboardModifiers', null)
if (isControling && this.reqMouseDown) {
this.updateKeyboardModifiers(this.reqMouseDown)
this.setMousePos(this.reqMouseDown)
this.webrtc.send('mousedown', { key: this.reqMouseDown.button + 1 })
}
if (isControling && this.reqMouseUp) {
this.webrtc.send('mouseup', { key: this.reqMouseUp.button + 1 })
}
this.canvasRequestRedraw()
this.reqMouseDown = null
this.reqMouseUp = null
}
implicitControlRequest(e: MouseEvent) {
if (this.implicitControl && e.type === 'mousedown' && this.reqMouseDown == null) {
this.reqMouseDown = e
this.$emit('implicitControlRequest')
}
if (this.implicitControl && e.type === 'mouseup' && this.reqMouseUp == null) {
this.reqMouseUp = e
}
}
// unused
implicitControlRelease() {
if (this.implicitControl) {
this.$emit('implicitControlRelease')
}
}
}
</script>