use session ID in cursor draw functions.

src/component/cursors.vue

@@ -194,15 +194,15 @@
       x = Math.round((x / this.screenSize.width) * width)
       y = Math.round((y / this.screenSize.height) * height)
 
-      // get cursor tag
-      const cursorTag = this.sessions[id]?.profile.name || ''
-
       // use custom draw function, if available
       if (this.cursorDraw) {
-        this.cursorDraw(this._ctx, x, y, cursorTag)
+        this.cursorDraw(this._ctx, x, y, id)
         return
       }
 
+      // get cursor tag
+      const cursorTag = this.sessions[id]?.profile.name || ''
+
       // draw inactive cursor tag
       this._ctx.save()
       this._ctx.font = '14px Arial, sans-serif'

src/component/main.vue

@@ -14,16 +14,13 @@
         :cursorDraw="inactiveCursorDrawFunction"
       />
       <neko-overlay
+        :sessions="state.sessions"
+        :hostId="state.control.host_id"
         :webrtc="connection.webrtc"
         :scroll="state.control.scroll"
         :screenSize="state.screen.size"
         :canvasSize="canvasSize"
         :isControling="controlling"
-        :cursorTag="
-          state.control.implicit_hosting && state.control.host_id != null
-            ? state.sessions[state.control.host_id].profile.name
-            : ''
-        "
         :cursorDraw="cursorDrawFunction"
         :implicitControl="state.control.implicit_hosting && state.sessions[state.session_id].profile.can_host"
         :inactiveCursors="state.cursors.enabled && state.sessions[state.session_id].profile.sends_inactive_cursor"

src/component/overlay.vue

@@ -37,7 +37,7 @@
   import { keySymsRemap } from './utils/keyboard-remapping'
   import { getFilesFromDataTansfer } from './utils/file-upload'
   import { NekoWebRTC } from './internal/webrtc'
-  import { Scroll } from './types/state'
+  import { Session, Scroll } from './types/state'
   import { CursorPosition, CursorImage } from './types/webrtc'
   import { CursorDrawFunction, Dimension, KeyboardModifiers } from './types/cursors'
 
@@ -58,6 +58,12 @@
     private keyboard = GuacamoleKeyboard()
     private focused = false
 
+    @Prop()
+    private readonly sessions!: Record<string, Session>
+
+    @Prop()
+    private readonly hostId!: string
+
     @Prop()
     private readonly webrtc!: NekoWebRTC
 
@@ -70,9 +76,6 @@
     @Prop()
     private readonly canvasSize!: Dimension
 
-    @Prop()
-    private readonly cursorTag!: string
-
     @Prop()
     private readonly cursorDraw!: CursorDrawFunction | null
 
@@ -421,8 +424,8 @@
       }
     }
 
+    @Watch('hostId')
     @Watch('cursorDraw')
-    @Watch('cursorTag')
     canvasRequestRedraw() {
       // skip rendering if there is already in progress
       if (this.canvasRequestedFrame) return
@@ -459,7 +462,7 @@
 
       // use custom draw function, if available
       if (this.cursorDraw) {
-        this.cursorDraw(this._ctx, x, y, this.cursorElement, this.cursorImage, this.cursorTag)
+        this.cursorDraw(this._ctx, x, y, this.cursorElement, this.cursorImage, this.hostId)
         return
       }
 
@@ -473,7 +476,8 @@
       )
 
       // draw cursor tag
-      if (this.cursorTag) {
+      const cursorTag = this.sessions[this.hostId]?.profile.name || ''
+      if (cursorTag) {
         x += this.cursorImage.width
         y += this.cursorImage.height
 
@@ -484,10 +488,10 @@
         this._ctx.shadowBlur = 2
         this._ctx.lineWidth = 2
         this._ctx.fillStyle = 'black'
-        this._ctx.strokeText(this.cursorTag, x, y)
+        this._ctx.strokeText(cursorTag, x, y)
         this._ctx.shadowBlur = 0
         this._ctx.fillStyle = 'white'
-        this._ctx.fillText(this.cursorTag, x, y)
+        this._ctx.fillText(cursorTag, x, y)
         this._ctx.restore()
       }
     }

src/component/types/cursors.ts

@@ -6,14 +6,14 @@ export type CursorDrawFunction = (
   y: number,
   cursorElement: HTMLImageElement,
   cursorImage: CursorImage,
-  cursorTag: string,
+  sessionId: string,
 ) => void
 
 export type InactiveCursorDrawFunction = (
   ctx: CanvasRenderingContext2D,
   x: number,
   y: number,
-  cursorTag: string,
+  sessionId: string,
 ) => void
 
 export interface Dimension {