From ed5d2175ae548cf506ddbbfad7d4a85cbc22a181 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Miroslav=20=C5=A0ediv=C3=BD?= <sedivy.miro@gmail.com>
Date: Mon, 1 Nov 2021 20:56:10 +0100
Subject: [PATCH] cursors use cursor tag.

---
 src/component/cursors.vue      | 14 ++++++++++----
 src/component/main.vue         |  1 +
 src/component/types/cursors.ts |  2 +-
 3 files changed, 12 insertions(+), 5 deletions(-)

diff --git a/src/component/cursors.vue b/src/component/cursors.vue
index 944845a3..332f00e4 100644
--- a/src/component/cursors.vue
+++ b/src/component/cursors.vue
@@ -16,7 +16,7 @@
 <script lang="ts">
   import { Vue, Component, Ref, Prop, Watch } from 'vue-property-decorator'
 
-  import { Cursor } from './types/state'
+  import { Cursor, Session } from './types/state'
   import { CursorDrawFunction, Dimension } from './types/cursors'
 
   const CANVAS_SCALE = 2
@@ -28,6 +28,9 @@
     @Ref('overlay') readonly _overlay!: HTMLCanvasElement
     private _ctx!: CanvasRenderingContext2D
 
+    @Prop()
+    private readonly sessions!: Record<string, Session>
+
     @Prop()
     private readonly sessionId!: string
 
@@ -100,9 +103,12 @@
         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, id)
+          this.cursorDraw(this._ctx, x, y, cursorTag)
           continue
         }
 
@@ -113,10 +119,10 @@
         this._ctx.shadowBlur = 2
         this._ctx.lineWidth = 2
         this._ctx.fillStyle = 'black'
-        this._ctx.strokeText(id, x, y)
+        this._ctx.strokeText(cursorTag, x, y)
         this._ctx.shadowBlur = 0
         this._ctx.fillStyle = 'white'
-        this._ctx.fillText(id, x, y)
+        this._ctx.fillText(cursorTag, x, y)
         this._ctx.restore()
       }
     }
diff --git a/src/component/main.vue b/src/component/main.vue
index 105935d2..6856845f 100644
--- a/src/component/main.vue
+++ b/src/component/main.vue
@@ -5,6 +5,7 @@
       <neko-screencast v-show="screencast" :enabled="screencast" :api="api.room" />
       <neko-cursors
         v-if="state.cursors.enabled"
+        :sessions="state.sessions"
         :sessionId="state.session_id"
         :screenSize="state.screen.size"
         :canvasSize="canvasSize"
diff --git a/src/component/types/cursors.ts b/src/component/types/cursors.ts
index eaab0a4e..c64a7f91 100644
--- a/src/component/types/cursors.ts
+++ b/src/component/types/cursors.ts
@@ -1,4 +1,4 @@
-export type CursorDrawFunction = (ctx: CanvasRenderingContext2D, x: number, y: number, id: string) => void
+export type CursorDrawFunction = (ctx: CanvasRenderingContext2D, x: number, y: number, cursorTag: string) => void
 
 export interface Dimension {
   width: number