diff --git a/src/component/main.vue b/src/component/main.vue index 8ee2b1b8..16c2006a 100644 --- a/src/component/main.vue +++ b/src/component/main.vue @@ -8,6 +8,11 @@ :screenSize="state.screen.size" :canvasSize="canvasSize" :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" @implicit-control-request="websocket.send('control/request')" @implicit-control-release="websocket.send('control/release')" @@ -110,10 +115,6 @@ inverse: true, sensitivity: 1, }, - cursor: { - image: null, - position: null, - }, clipboard: null, host_id: null, implicit_hosting: false, diff --git a/src/component/overlay.vue b/src/component/overlay.vue index cd0639e4..01baa51c 100644 --- a/src/component/overlay.vue +++ b/src/component/overlay.vue @@ -69,6 +69,9 @@ @Prop() private readonly canvasSize!: { width: number; height: number } + @Prop() + private readonly cursorTag!: string + @Prop() private readonly isControling!: boolean @@ -286,17 +289,36 @@ // get intrinsic dimensions 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 - this._ctx.clearRect(0, 0, width, height) - this._ctx.drawImage( - this.cursorElement, - Math.round((x / this.screenSize.width) * width - this.cursorImage.x), - Math.round((y / this.screenSize.height) * height - this.cursorImage.y), - this.cursorImage.width, - this.cursorImage.height, - ) + let x = Math.round((this.cursorPosition.x / this.screenSize.width) * width - this.cursorImage.x) + let y = Math.round((this.cursorPosition.y / this.screenSize.height) * height - this.cursorImage.y) + this._ctx.drawImage(this.cursorElement, x, y, this.cursorImage.width, this.cursorImage.height) + + // redraw cursor tag + if (this.cursorTag) { + 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() {