Set scroll and click thresholds relative to screen pixel density (if readable) and...

[guacamole-common-js.git] / src / main / resources / mouse.js

diff --git a/src/main/resources/mouse.js b/src/main/resources/mouse.js
index f7cfb12..5475793 100644 (file)
--- a/src/main/resources/mouse.js
+++ b/src/main/resources/mouse.js
@@ -59,6 +59,24 @@ Guacamole.Mouse = function(element) {
     var guac_mouse = this;
 
     /**
+     * The distance a two-finger touch must move per scrollwheel event, relative
+     * to the distance between the two touches.
+     */
+    this.scrollThreshold = 0.5;
+
+    /**
+     * The maximum number of milliseconds to wait for a touch to end for the
+     * gesture to be considered a click.
+     */
+    this.clickTimingThreshold = 250;
+
+    /**
+     * The maximum number of pixels to allow a touch to move for the gesture to
+     * be considered a click.
+     */
+    this.clickMoveThreshold = 10 * (window.displayPixelRatio || 1);
+
+    /**
      * The current mouse state. The properties of this state are updated when
      * mouse events fire. This state object is also passed in as a parameter to
      * the handler of any mouse events.
@@ -148,6 +166,7 @@ Guacamole.Mouse = function(element) {
     var last_touch_y = 0;
     var last_touch_time = 0;
     var pixels_moved = 0;
+    var touch_distance = 0;
 
     var touch_buttons = {
         1: "left",
@@ -161,7 +180,7 @@ Guacamole.Mouse = function(element) {
     element.addEventListener("touchend", function(e) {
         
         // If we're handling a gesture AND this is the last touch
-        if (gesture_in_progress && e.touches.length == 1) {
+        if (gesture_in_progress && e.touches.length == 0) {
             
             cancelEvent(e);
             
@@ -187,7 +206,8 @@ Guacamole.Mouse = function(element) {
             }
 
             // If single tap detected (based on time and distance)
-            if (time - last_touch_time <= 250 && pixels_moved < 10) {
+            if (time - last_touch_time <= guac_mouse.clickTimingThreshold
+                    && pixels_moved < guac_mouse.clickMoveThreshold) {
 
                 // Fire button down event
                 guac_mouse.currentState[button] = true;
@@ -206,7 +226,7 @@ Guacamole.Mouse = function(element) {
                     // Allow mouse events now that touching is over
                     gesture_in_progress = false;
             
-                }, 250);
+                }, guac_mouse.clickTimingThreshold);
 
             }
 
@@ -217,7 +237,7 @@ Guacamole.Mouse = function(element) {
     element.addEventListener("touchstart", function(e) {
 
         // Track number of touches, but no more than three
-        touch_count = Math.max(e.touches.length, 3);
+        touch_count = Math.min(e.touches.length, 3);
 
         // Record initial touch location and time for touch movement
         // and tap gestures
@@ -243,6 +263,12 @@ Guacamole.Mouse = function(element) {
 
         }
 
+        else if (e.touches.length == 2) {
+            var diff_x = e.touches[0].screenX - e.touches[1].screenX;
+            var diff_y = e.touches[0].screenY - e.touches[1].screenY;
+            touch_distance = Math.sqrt(diff_x*diff_x + diff_y*diff_y);
+        }
+
     }, false);
 
     element.addEventListener("touchmove", function(e) {
@@ -257,29 +283,64 @@ Guacamole.Mouse = function(element) {
         // Track pixels moved
         pixels_moved += Math.abs(delta_x) + Math.abs(delta_y);
 
-        // Update mouse location
-        guac_mouse.currentState.x += delta_x;
-        guac_mouse.currentState.y += delta_y;
+        // If only one touch involved, this is mouse move
+        if (touch_count == 1) {
 
-        // Prevent mouse from leaving screen
+            // Update mouse location
+            guac_mouse.currentState.x += delta_x;
+            guac_mouse.currentState.y += delta_y;
 
-        if (guac_mouse.currentState.x < 0)
-            guac_mouse.currentState.x = 0;
-        else if (guac_mouse.currentState.x >= element.offsetWidth)
-            guac_mouse.currentState.x = element.offsetWidth - 1;
+            // Prevent mouse from leaving screen
 
-        if (guac_mouse.currentState.y < 0)
-            guac_mouse.currentState.y = 0;
-        else if (guac_mouse.currentState.y >= element.offsetHeight)
-            guac_mouse.currentState.y = element.offsetHeight - 1;
+            if (guac_mouse.currentState.x < 0)
+                guac_mouse.currentState.x = 0;
+            else if (guac_mouse.currentState.x >= element.offsetWidth)
+                guac_mouse.currentState.x = element.offsetWidth - 1;
 
-        // Fire movement event, if defined
-        if (guac_mouse.onmousemove)
-            guac_mouse.onmousemove(guac_mouse.currentState);
+            if (guac_mouse.currentState.y < 0)
+                guac_mouse.currentState.y = 0;
+            else if (guac_mouse.currentState.y >= element.offsetHeight)
+                guac_mouse.currentState.y = element.offsetHeight - 1;
+
+            // Fire movement event, if defined
+            if (guac_mouse.onmousemove)
+                guac_mouse.onmousemove(guac_mouse.currentState);
+
+            // Update touch location
+            last_touch_x = touch.screenX;
+            last_touch_y = touch.screenY;
+
+        }
 
-        // Update touch location
-        last_touch_x = touch.screenX;
-        last_touch_y = touch.screenY;
+        // Interpret two-finger touch as scrollwheel
+        else if (touch_count == 2) {
+
+            // If change in location passes threshold for scroll
+            if (Math.abs(delta_y) >= touch_distance * guac_mouse.scrollThreshold) {
+
+                // Decide button based on Y movement direction
+                var button;
+                if (delta_y > 0) button = "down";
+                else             button = "up";
+
+                // Fire button down event
+                guac_mouse.currentState[button] = true;
+                if (guac_mouse.onmousedown)
+                    guac_mouse.onmousedown(guac_mouse.currentState);
+
+                // Fire button up event
+                guac_mouse.currentState[button] = false;
+                if (guac_mouse.onmouseup)
+                    guac_mouse.onmouseup(guac_mouse.currentState);
+
+                // Only update touch location after a scroll has been
+                // detected
+                last_touch_x = touch.screenX;
+                last_touch_y = touch.screenY;
+
+            }
+
+        }
 
     }, false);