add shared cursor as image tag.

src/component/internal/messages.ts

@@ -101,11 +101,6 @@ export class NekoMessages extends EventEmitter<NekoEvents> {
     this.emit('connection.disconnect', message)
   }
 
-  protected [EVENT.CURSOR_IMAGE]({ uri, width, height, x, y }: message.CursorImage) {
-    this._log.debug('EVENT.CURSOR_IMAGE')
-    Vue.set(this.state.control, 'cursor', { uri, width, height, x, y })
-  }
-
   /////////////////////////////
   // Signal Events
   /////////////////////////////
@@ -180,6 +175,7 @@ export class NekoMessages extends EventEmitter<NekoEvents> {
     Vue.set(this.state.screen, 'size', { width, height, rate })
     this.emit('room.screen.updated', width, height, rate)
   }
+
   /////////////////////////////
   // Clipboard Events
   /////////////////////////////
@@ -190,6 +186,20 @@ export class NekoMessages extends EventEmitter<NekoEvents> {
     this.emit('room.clipboard.updated', text)
   }
 
+  /////////////////////////////
+  // Cursor Events
+  /////////////////////////////
+
+  protected [EVENT.CURSOR_IMAGE]({ uri, width, height, x, y }: message.CursorImage) {
+    this._log.debug('EVENT.CURSOR_IMAGE')
+    Vue.set(this.state.control.cursor, 'image', { uri, width, height, x, y })
+  }
+
+  protected [EVENT.CURSOR_POSITION]({ x, y }: message.CursorPosition) {
+    this._log.debug('EVENT.CURSOR_IMAGE')
+    Vue.set(this.state.control.cursor, 'position', { x, y })
+  }
+
   /////////////////////////////
   // Broadcast Events
   /////////////////////////////

src/component/main.vue

@@ -106,7 +106,10 @@
           inverse: true,
           sensitivity: 1,
         },
-        cursor: null,
+        cursor: {
+          image: null,
+          position: null,
+        },
         clipboard: null,
         host_id: null,
         implicit_hosting: false,

src/component/overlay.vue

@@ -17,7 +17,18 @@
     @dragleave.stop.prevent="onDragLeave"
     @dragover.stop.prevent="onDragOver"
     @drop.stop.prevent="onDrop"
-  />
+  >
+    <img
+      v-if="cursorPos && !isControling"
+      :src="control.cursor.image.uri"
+      class="cursor"
+      :style="{
+        top: (cursorPos.y / screenHeight) * 100 + '%',
+        left: (cursorPos.x / screenWidth) * 100 + '%',
+        transform: 'translate(' + control.cursor.image.x * -1 + 'px, ' + control.cursor.image.y * -1 + 'px)',
+      }"
+    />
+  </div>
 </template>
 
 <style lang="scss" scoped>
@@ -33,6 +44,10 @@
       outline: 2px solid red;
       box-sizing: border-box;
     }
+
+    .cursor {
+      position: relative;
+    }
   }
 </style>
 
@@ -85,11 +100,11 @@
         return inactiveCursorWin10
       }
 
-      if (!this.control.cursor) {
+      if (!this.control.cursor.image) {
         return 'auto'
       }
 
-      const { uri, x, y } = this.control.cursor
+      const { uri, x, y } = this.control.cursor.image
       return 'url(' + uri + ') ' + x + ' ' + y + ', auto'
     }
 
@@ -135,7 +150,9 @@
     }
 
     setMousePos(e: MouseEvent) {
-      this.webrtc.send('mousemove', this.getMousePos(e.clientX, e.clientY))
+      const pos = this.getMousePos(e.clientX, e.clientY)
+      this.webrtc.send('mousemove', pos)
+      Vue.set(this, 'cursorPos', pos)
     }
 
     onWheel(e: WheelEvent) {
@@ -274,5 +291,11 @@
         this.$emit('implicit-control-release')
       }
     }
+
+    private cursorPos: { x: number; y: number } | null = null
+    @Watch('control.cursor.position')
+    onCursorPositionChange({ x, y }: { x: number; y: number }) {
+      this.cursorPos = { x, y }
+    }
   }
 </script>

src/component/types/events.ts

@@ -31,6 +31,7 @@ export const KEYBOARD_MODIFIERS = 'keyboard/modifiers'
 export const KEYBOARD_MAP = 'keyboard/map'
 
 export const CURSOR_IMAGE = 'cursor/image'
+export const CURSOR_POSITION = 'cursor/position'
 
 export const BORADCAST_STATUS = 'broadcast/status'
 

src/component/types/messages.ts

@@ -172,6 +172,13 @@ export interface CursorImage {
   y: number
 }
 
+export interface CursorPosition {
+  event: string | undefined
+  member_id: string
+  x: number
+  y: number
+}
+
 /////////////////////////////
 // Broadcast
 /////////////////////////////

src/component/types/state.ts

@@ -49,7 +49,7 @@ export interface Video {
 /////////////////////////////
 export interface Control {
   scroll: Scroll
-  cursor: Cursor | null
+  cursor: Cursor
   clipboard: Clipboard | null
   host_id: string | null
   implicit_hosting: boolean
@@ -61,6 +61,11 @@ export interface Scroll {
 }
 
 export interface Cursor {
+  image: CursorImage | null
+  position: CursorPosition | null
+}
+
+export interface CursorImage {
   uri: string
   width: number
   height: number
@@ -68,6 +73,11 @@ export interface Cursor {
   y: number
 }
 
+export interface CursorPosition {
+  x: number
+  y: number
+}
+
 export interface Clipboard {
   text: string
 }