set inactive cursor draw function.

src/component/cursors.vue

@@ -17,7 +17,7 @@
   import { Vue, Component, Ref, Prop, Watch } from 'vue-property-decorator'
 
   import { Cursor, Session } from './types/state'
-  import { CursorDrawFunction, Dimension } from './types/cursors'
+  import { InactiveCursorDrawFunction, Dimension } from './types/cursors'
 
   const CANVAS_SCALE = 2
 
@@ -44,7 +44,7 @@
     private readonly cursors!: Cursor[]
 
     @Prop()
-    private readonly cursorDraw!: CursorDrawFunction | null
+    private readonly cursorDraw!: InactiveCursorDrawFunction | null
 
     mounted() {
       // get canvas overlay context

src/component/main.vue

@@ -10,6 +10,7 @@
         :screenSize="state.screen.size"
         :canvasSize="canvasSize"
         :cursors="state.cursors.list"
+        :cursorDraw="inactiveCursorDrawFunction"
       />
       <neko-overlay
         :webrtc="connection.webrtc"
@@ -75,7 +76,7 @@
 
   import { ReconnectorConfig } from './types/reconnector'
   import NekoState from './types/state'
-  import { Dimension, CursorDrawFunction } from './types/overlay'
+  import { CursorDrawFunction, InactiveCursorDrawFunction, Dimension } from './types/cursors'
   import Overlay from './overlay.vue'
   import Screencast from './screencast.vue'
   import Cursors from './cursors.vue'
@@ -97,6 +98,7 @@
     observer = new ResizeObserver(this.onResize.bind(this))
     canvasSize: Dimension = { width: 0, height: 0 }
     cursorDrawFunction: CursorDrawFunction | null = null
+    inactiveCursorDrawFunction: InactiveCursorDrawFunction | null = null
 
     @Prop({ type: String })
     private readonly server!: string
@@ -360,6 +362,10 @@
       Vue.set(this, 'cursorDrawFunction', fn)
     }
 
+    public setInactiveCursorDrawFunction(fn?: InactiveCursorDrawFunction) {
+      Vue.set(this, 'inactiveCursorDrawFunction', fn)
+    }
+
     // TODO: Remove? Use REST API only?
     public setScreenSize(width: number, height: number, rate: number) {
       this.connection.websocket.send(EVENT.SCREEN_SET, { width, height, rate })

src/component/overlay.vue

@@ -39,7 +39,7 @@
   import { NekoWebRTC } from './internal/webrtc'
   import { Scroll } from './types/state'
   import { CursorPosition, CursorImage } from './types/webrtc'
-  import { CursorDrawFunction, Dimension, KeyboardModifiers } from './types/overlay'
+  import { CursorDrawFunction, Dimension, KeyboardModifiers } from './types/cursors'
 
   const WHEEL_STEP = 53 // Delta threshold for a mouse wheel step
   const WHEEL_LINE_HEIGHT = 19

src/component/types/cursors.ts

@@ -1,6 +1,15 @@
-export type CursorDrawFunction = (ctx: CanvasRenderingContext2D, x: number, y: number, cursorTag: string) => void
+import { CursorImage } from './webrtc'
+  
+export type CursorDrawFunction = (ctx: CanvasRenderingContext2D, x: number, y: number, cursorElement: HTMLImageElement, cursorImage: CursorImage, cursorTag: string) => void
+
+export type InactiveCursorDrawFunction = (ctx: CanvasRenderingContext2D, x: number, y: number, cursorTag: string) => void
 
 export interface Dimension {
   width: number
   height: number
 }
+
+export interface KeyboardModifiers {
+  capslock: boolean
+  numlock: boolean
+}

src/component/types/overlay.ts

@@ -1,13 +0,0 @@
-import { CursorImage } from './webrtc'
-  
-export type CursorDrawFunction = (ctx: CanvasRenderingContext2D, x: number, y: number, cursorElement: HTMLImageElement, cursorImage: CursorImage, cursorTag: string) => void
-
-export interface Dimension {
-  width: number
-  height: number
-}
-
-export interface KeyboardModifiers {
-  capslock: boolean
-  numlock: boolean
-}