add cursor tag.

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,

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)
+      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() {