From 49d6174953456b4d31bbf10c33222b8d89c2592b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Miroslav=20=C5=A0ediv=C3=BD?= <sedivy.miro@gmail.com>
Date: Thu, 18 Feb 2021 16:53:19 +0100
Subject: [PATCH] synchronize keyboard modifiers with participant.

---
 src/component/main.vue    |  1 +
 src/component/overlay.vue | 42 +++++++++++++++++++++++++++------------
 2 files changed, 30 insertions(+), 13 deletions(-)

diff --git a/src/component/main.vue b/src/component/main.vue
index 16c2006a..c6665025 100644
--- a/src/component/main.vue
+++ b/src/component/main.vue
@@ -16,6 +16,7 @@
         :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')"
+        @update-kbd-modifiers="websocket.send('keyboard/modifiers', $event)"
         @drop-files="uploadDrop($event)"
       />
     </div>
diff --git a/src/component/overlay.vue b/src/component/overlay.vue
index b2a043b2..3876f77a 100644
--- a/src/component/overlay.vue
+++ b/src/component/overlay.vue
@@ -205,13 +205,8 @@
       this._overlay.focus()
       this.focused = true
 
-      if (!this.isControling) {
-        // TODO: Refactor
-        //syncKeyboardModifierState({
-        //  capsLock: e.getModifierState('CapsLock'),
-        //  numLock: e.getModifierState('NumLock'),
-        //  scrollLock: e.getModifierState('ScrollLock'),
-        //})
+      if (this.isControling) {
+        this.updateKbdModifiers(e)
       }
     }
 
@@ -222,12 +217,11 @@
       if (this.isControling) {
         this.keyboard.reset()
 
-        // TODO: Refactor
-        //setKeyboardModifierState({
-        //  capsLock: e.getModifierState('CapsLock'),
-        //  numLock: e.getModifierState('NumLock'),
-        //  scrollLock: e.getModifierState('ScrollLock'),
-        //})
+        // save current kbd modifiers state
+        Vue.set(this, 'kbdModifiers', {
+          capslock: e.getModifierState('CapsLock'),
+          numlock: e.getModifierState('NumLock'),
+        })
       }
     }
 
@@ -255,6 +249,25 @@
       }
     }
 
+    //
+    // keyboard modifiers
+    //
+
+    private kbdModifiers: { capslock: boolean; numlock: boolean } | null = null
+
+    updateKbdModifiers(e: MouseEvent) {
+      const capslock = e.getModifierState('CapsLock')
+      const numlock = e.getModifierState('NumLock')
+
+      if (
+        this.kbdModifiers === null ||
+        this.kbdModifiers.capslock !== capslock ||
+        this.kbdModifiers.numlock !== numlock
+      ) {
+        this.$emit('update-kbd-modifiers', { capslock, numlock })
+      }
+    }
+
     //
     // canvas
     //
@@ -336,7 +349,10 @@
 
     @Watch('isControling')
     onControlChange(isControling: boolean) {
+      Vue.set(this, 'kbdModifiers', null)
+
       if (isControling && this.reqMouseDown) {
+        this.updateKbdModifiers(this.reqMouseDown)
         this.setMousePos(this.reqMouseDown)
         this.webrtc.send('mousedown', { key: this.reqMouseDown.button + 1 })
       }