add cursor tag.

This commit is contained in:
Miroslav Šedivý 2021-02-17 20:39:12 +01:00
parent 5ae700aea0
commit 525efe17e7
2 changed files with 36 additions and 13 deletions

View File

@ -8,6 +8,11 @@
:screenSize="state.screen.size" :screenSize="state.screen.size"
:canvasSize="canvasSize" :canvasSize="canvasSize"
:isControling="controlling && watching" :isControling="controlling && watching"
:cursorTag="
state.control.implicit_hosting && state.control.host_id != null
? state.members[state.control.host_id].profile.name
: ''
"
:implicitControl="state.control.implicit_hosting && state.members[state.member_id].profile.can_host" :implicitControl="state.control.implicit_hosting && state.members[state.member_id].profile.can_host"
@implicit-control-request="websocket.send('control/request')" @implicit-control-request="websocket.send('control/request')"
@implicit-control-release="websocket.send('control/release')" @implicit-control-release="websocket.send('control/release')"
@ -110,10 +115,6 @@
inverse: true, inverse: true,
sensitivity: 1, sensitivity: 1,
}, },
cursor: {
image: null,
position: null,
},
clipboard: null, clipboard: null,
host_id: null, host_id: null,
implicit_hosting: false, implicit_hosting: false,

View File

@ -69,6 +69,9 @@
@Prop() @Prop()
private readonly canvasSize!: { width: number; height: number } private readonly canvasSize!: { width: number; height: number }
@Prop()
private readonly cursorTag!: string
@Prop() @Prop()
private readonly isControling!: boolean private readonly isControling!: boolean
@ -286,17 +289,36 @@
// get intrinsic dimensions // get intrinsic dimensions
const { width, height } = this._overlay const { width, height } = this._overlay
const { x, y } = this.cursorPosition
// clear drawings
this._ctx.clearRect(0, 0, width, height)
// ignore hidden cursor
if (this.cursorImage.width <= 1 && this.cursorImage.height <= 1) return
// redraw cursor // redraw cursor
this._ctx.clearRect(0, 0, width, height) let x = Math.round((this.cursorPosition.x / this.screenSize.width) * width - this.cursorImage.x)
this._ctx.drawImage( let y = Math.round((this.cursorPosition.y / this.screenSize.height) * height - this.cursorImage.y)
this.cursorElement, this._ctx.drawImage(this.cursorElement, x, y, this.cursorImage.width, this.cursorImage.height)
Math.round((x / this.screenSize.width) * width - this.cursorImage.x),
Math.round((y / this.screenSize.height) * height - this.cursorImage.y), // redraw cursor tag
this.cursorImage.width, if (this.cursorTag) {
this.cursorImage.height, x += this.cursorImage.width + this.cursorImage.x
) y += this.cursorImage.height + this.cursorImage.y
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() { canvasClear() {