add cursor changing (WIP).

src/component/internal/messages.ts

@@ -81,6 +81,16 @@ export class NekoMessages extends EventEmitter<NekoEvents> {
     // TODO: Handle.
   }
 
+  // TODO: Refactor.
+  protected ['cursor/image']({ payload }: any) {
+    console.log('cursor/image')
+    Vue.set(this.state.control, 'cursor', {
+      uri: payload.Uri,
+      hot_x: payload.Xhot,
+      hot_y: payload.Yhot,
+    })
+  }
+
   /////////////////////////////
   // Signal Events
   /////////////////////////////

src/component/main.vue

@@ -4,11 +4,10 @@
       <video ref="video" />
       <neko-overlay
         :webrtc="webrtc"
+        :control="state.control"
         :screenWidth="state.screen.size.width"
         :screenHeight="state.screen.size.height"
         :isControling="controlling && watching"
-        :scrollSensitivity="state.control.scroll.sensitivity"
-        :scrollInvert="state.control.scroll.inverse"
         :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')"
@@ -97,6 +96,7 @@
           inverse: true,
           sensitivity: 1,
         },
+        cursor: null,
         clipboard: null,
         host_id: null,
         implicit_hosting: false,

src/component/overlay.vue

@@ -3,6 +3,7 @@
     ref="overlay"
     class="overlay"
     tabindex="0"
+    :style="{ cursor }"
     @click.stop.prevent
     @contextmenu.stop.prevent
     @wheel.stop.prevent="onWheel"
@@ -35,6 +36,7 @@
   import GuacamoleKeyboard from './utils/guacamole-keyboard'
   import { getFilesFromDataTansfer } from './utils/file-upload'
   import { NekoWebRTC } from './internal/webrtc'
+  import { Control } from './types/state'
 
   @Component({
     name: 'neko-overlay',
@@ -48,24 +50,28 @@
     @Prop()
     private readonly webrtc!: NekoWebRTC
 
+    @Prop()
+    private readonly control!: Control
+
     @Prop()
     private readonly screenWidth!: number
 
     @Prop()
     private readonly screenHeight!: number
 
-    @Prop()
-    private readonly scrollSensitivity!: number
-
-    @Prop()
-    private readonly scrollInvert!: boolean
-
     @Prop()
     private readonly isControling!: boolean
 
     @Prop()
     private readonly implicitControl!: boolean
 
+    get cursor(): string {
+      if (!this.control.cursor) return 'auto'
+
+      const { uri, hot_x, hot_y } = this.control.cursor
+      return 'url(' + uri + ') ' + hot_x + ' ' + hot_y + ', auto'
+    }
+
     mounted() {
       // Initialize Guacamole Keyboard
       this.keyboard.onkeydown = (key: number) => {
@@ -122,13 +128,13 @@
       let x = e.deltaX
       let y = e.deltaY
 
-      if (this.scrollInvert) {
+      if (this.control.scroll.inverse) {
         x *= -1
         y *= -1
       }
 
-      x = Math.min(Math.max(x, -this.scrollSensitivity), this.scrollSensitivity)
+      x = Math.min(Math.max(x, -this.control.scroll.sensitivity), this.control.scroll.sensitivity)
-      y = Math.min(Math.max(y, -this.scrollSensitivity), this.scrollSensitivity)
+      y = Math.min(Math.max(y, -this.control.scroll.sensitivity), this.control.scroll.sensitivity)
 
       this.setMousePos(e)
       this.webrtc.send('wheel', { x, y })

src/component/types/state.ts

@@ -35,6 +35,7 @@ export interface Video {
 /////////////////////////////
 export interface Control {
   scroll: Scroll
+  cursor: Cursor | null
   clipboard: Clipboard | null
   host_id: string | null
   implicit_hosting: boolean
@@ -45,6 +46,12 @@ export interface Scroll {
   sensitivity: number
 }
 
+export interface Cursor {
+  uri: string
+  hot_x: number
+  hot_y: number
+}
+
 export interface Clipboard {
   text: string
 }