From c71a9d7626fa9f94f61851ac9f9a73f56c4cdce3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Miroslav=20=C5=A0ediv=C3=BD?= <sedivy.miro@gmail.com>
Date: Thu, 31 Aug 2023 13:50:57 +0200
Subject: [PATCH] split touch events to enabled and supported. (#43)

---
 src/component/internal/control.ts  |  8 ++++++--
 src/component/internal/messages.ts |  3 ++-
 src/component/main.vue             |  9 ++++++++-
 src/component/overlay.vue          | 16 +++++++++++-----
 src/component/types/state.ts       |  7 ++++++-
 src/page/components/events.vue     | 15 +++++++++++++--
 6 files changed, 46 insertions(+), 12 deletions(-)

diff --git a/src/component/internal/control.ts b/src/component/internal/control.ts
index 383e05c6..a3074265 100644
--- a/src/component/internal/control.ts
+++ b/src/component/internal/control.ts
@@ -33,8 +33,12 @@ export class NekoControl extends EventEmitter<NekoControlEvents> {
     return this._connection.webrtc.connected && this._state.is_host
   }
 
-  get hasTouchEvents() {
-    return this._state.touch_events
+  get enabledTouchEvents() {
+    return this._state.touch.enabled
+  }
+
+  get supportedTouchEvents() {
+    return this._state.touch.supported
   }
 
   public lock() {
diff --git a/src/component/internal/messages.ts b/src/component/internal/messages.ts
index 8e6ead47..bcffc4f8 100644
--- a/src/component/internal/messages.ts
+++ b/src/component/internal/messages.ts
@@ -104,7 +104,8 @@ export class NekoMessages extends EventEmitter<NekoEvents> {
   protected [EVENT.SYSTEM_INIT](conf: message.SystemInit) {
     this._localLog.debug(`EVENT.SYSTEM_INIT`)
     Vue.set(this._state, 'session_id', conf.session_id)
-    Vue.set(this._state.control, 'touch_events', conf.touch_events)
+    // check if backend supports touch events
+    Vue.set(this._state.control.touch, 'supported', conf.touch_events)
     Vue.set(this._state.connection, 'screencast', conf.screencast_enabled)
     Vue.set(this._state.connection.webrtc, 'videos', conf.webrtc.videos)
 
diff --git a/src/component/main.vue b/src/component/main.vue
index f2a6ec41..a0019e87 100644
--- a/src/component/main.vue
+++ b/src/component/main.vue
@@ -200,7 +200,10 @@
           layout: 'us',
           variant: '',
         },
-        touch_events: false,
+        touch: {
+          enabled: true,
+          supported: false,
+        },
         host_id: null,
         is_host: false,
         locked: false,
@@ -487,6 +490,10 @@
       Vue.set(this.state.control, 'keyboard', { layout, variant })
     }
 
+    public setTouchEnabled(value: boolean = true) {
+      Vue.set(this.state.control.touch, 'enabled', value)
+    }
+
     public mobileKeyboardShow() {
       this._overlay.mobileKeyboardShow()
     }
diff --git a/src/component/overlay.vue b/src/component/overlay.vue
index b1335ccb..8dd49f93 100644
--- a/src/component/overlay.vue
+++ b/src/component/overlay.vue
@@ -195,7 +195,7 @@
       // Initialize GestureHandler
       this.gestureHandler = new GestureHandlerInit()
 
-      // bind touch handler using @Watch on hasTouchEvents
+      // bind touch handler using @Watch on supportedTouchEvents
       // because we need to know if touch events are supported
       // by the server before we can bind touch handler
 
@@ -467,13 +467,19 @@
     // touch and gesture handlers cannot be used together
     //
 
-    @Watch('control.hasTouchEvents')
+    @Watch('control.enabledTouchEvents')
+    @Watch('control.supportedTouchEvents')
     onTouchEventsChange() {
-      if (this.control.hasTouchEvents) {
-        this.unbindGestureHandler()
+      this.unbindGestureHandler()
+      this.unbindTouchHandler()
+
+      if (!this.control.enabledTouchEvents) {
+        return
+      }
+
+      if (this.control.supportedTouchEvents) {
         this.bindTouchHandler()
       } else {
-        this.unbindTouchHandler()
         this.bindGestureHandler()
       }
     }
diff --git a/src/component/types/state.ts b/src/component/types/state.ts
index 69f24ff5..6da3cc6b 100644
--- a/src/component/types/state.ts
+++ b/src/component/types/state.ts
@@ -70,7 +70,7 @@ export interface Control {
   scroll: Scroll
   clipboard: Clipboard | null
   keyboard: Keyboard
-  touch_events: boolean
+  touch: Touch
   host_id: string | null
   is_host: boolean
   locked: boolean
@@ -90,6 +90,11 @@ export interface Keyboard {
   variant: string
 }
 
+export interface Touch {
+  enabled: boolean
+  supported: boolean
+}
+
 /////////////////////////////
 // Screen
 /////////////////////////////
diff --git a/src/page/components/events.vue b/src/page/components/events.vue
index d429c689..71b8c4b5 100644
--- a/src/page/components/events.vue
+++ b/src/page/components/events.vue
@@ -335,8 +335,19 @@
         </td>
       </tr>
       <tr>
-        <th>control.touch_events</th>
-        <td>{{ neko.state.control.touch_events ? 'backend supports' : 'backend does not support' }}</td>
+        <th>control.touch.enabled</th>
+        <td>
+          <div class="space-between">
+            <span>{{ neko.state.control.touch.enabled }}</span>
+            <button @click="neko.setTouchEnabled(!neko.state.control.touch.enabled)">
+              <i class="fas fa-toggle-on"></i>
+            </button>
+          </div>
+        </td>
+      </tr>
+      <tr>
+        <th>control.touch.supported</th>
+        <td>{{ neko.state.control.touch.supported }}</td>
       </tr>
       <tr>
         <th rowspan="2">control.host_id</th>