split touch events to enabled and supported. (#43)

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() {

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)
 

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()
     }

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.unbindTouchHandler()
+
+      if (!this.control.enabledTouchEvents) {
+        return
+      }
+
+      if (this.control.supportedTouchEvents) {
         this.bindTouchHandler()
       } else {
-        this.unbindTouchHandler()
         this.bindGestureHandler()
       }
     }

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
 /////////////////////////////

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>