pass canvas size to overlay.

src/component/main.vue

@@ -5,8 +5,8 @@
       <neko-overlay
         :webrtc="webrtc"
         :control="state.control"
-        :screenWidth="state.screen.size.width"
-        :screenHeight="state.screen.size.height"
+        :screenSize="state.screen.size"
+        :canvasSize="canvasSize"
         :isControling="controlling && watching"
         :implicitControl="state.control.implicit_hosting && state.members[state.member_id].profile.can_host"
         @implicit-control-request="websocket.send('control/request')"
@@ -74,6 +74,10 @@
     websocket = new NekoWebSocket()
     webrtc = new NekoWebRTC()
     observer = new ResizeObserver(this.onResize.bind(this))
+    canvasSize: { width: number; height: number } = {
+      width: 0,
+      height: 0,
+    }
 
     @Prop({ type: Boolean })
     private readonly autoplay!: boolean
@@ -505,6 +509,11 @@
         this._container.style.height = `${vertical}px`
         this._container.style.marginTop = `${(offsetHeight - vertical) / 2}px`
         this._container.style.marginLeft = `0px`
+
+        Vue.set(this, 'canvasSize', {
+          width: offsetWidth,
+          height: vertical,
+        })
       }
       // horizontal centering
       else if (screen_ratio < canvas_ratio) {
@@ -513,6 +522,11 @@
         this._container.style.height = `${offsetHeight}px`
         this._container.style.marginTop = `0px`
         this._container.style.marginLeft = `${(offsetWidth - horizontal) / 2}px`
+
+        Vue.set(this, 'canvasSize', {
+          width: horizontal,
+          height: offsetHeight,
+        })
       }
       // no centering
       else {
@@ -520,6 +534,11 @@
         this._container.style.height = `${offsetHeight}px`
         this._container.style.marginTop = `0px`
         this._container.style.marginLeft = `0px`
+
+        Vue.set(this, 'canvasSize', {
+          width: offsetWidth,
+          height: offsetHeight,
+        })
       }
     }
 

src/component/overlay.vue

@@ -74,10 +74,16 @@
     private readonly control!: Control
 
     @Prop()
-    private readonly screenWidth!: number
+    private readonly screenSize: { width: number; height: number } = {
+      width: 0,
+      height: 0,
+    }
 
     @Prop()
-    private readonly screenHeight!: number
+    private readonly canvasSize: { width: number; height: number } = {
+      width: 0,
+      height: 0,
+    }
 
     @Prop()
     private readonly isControling!: boolean
@@ -141,8 +147,8 @@
       const rect = this._overlay.getBoundingClientRect()
 
       return {
-        x: Math.round((this.screenWidth / rect.width) * (clientX - rect.left)),
-        y: Math.round((this.screenHeight / rect.height) * (clientY - rect.top)),
+        x: Math.round((this.screenSize.width / rect.width) * (clientX - rect.left)),
+        y: Math.round((this.screenSize.height / rect.height) * (clientY - rect.top)),
       }
     }
 
@@ -255,6 +261,12 @@
       }
     }
 
+    @Watch('canvasSize')
+    onCanvasSizeChange({ width, height }: { width: number; height: number }) {
+      this._overlay.width = width
+      this._overlay.height = height
+    }
+
     private cursorElem: HTMLImageElement = new Image()
     @Watch('control.cursor.image')
     onCursorImageChange({ uri }: { uri: string }) {
@@ -265,19 +277,15 @@
     onCursorPositionChange({ x, y }: { x: number; y: number }) {
       if (this.isControling || this.control.cursor.image == null) return
 
-      // synchronize intrinsic with extrinsic dimensions
-      const { width, height } = this._overlay.getBoundingClientRect()
-      if (this._overlay.width != width || this._overlay.height != height) {
-        this._overlay.width = width
-        this._overlay.height = height
-      }
+      // get intrinsic dimensions
+      const { width, height } = this._overlay
 
       // redraw cursor
       this._ctx.clearRect(0, 0, width, height)
       this._ctx.drawImage(
         this.cursorElem,
-        (x / this.screenWidth) * width - this.control.cursor.image.x,
-        (y / this.screenHeight) * height - this.control.cursor.image.y,
+        (x / this.screenSize.width) * width - this.control.cursor.image.x,
+        (y / this.screenSize.height) * height - this.control.cursor.image.y,
         this.control.cursor.image.width,
         this.control.cursor.image.height,
       )