Avoid crazy accelerating autoscroll by using clientX/clientY instead of screenX/screenY.

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

diff --git a/src/main/resources/mouse.js b/src/main/resources/mouse.js
index d1217d4..86672c9 100644 (file)
--- a/src/main/resources/mouse.js
+++ b/src/main/resources/mouse.js
@@ -59,10 +59,10 @@ Guacamole.Mouse = function(element) {
     var guac_mouse = this;
 
     /**
-     * The number of pixels a touch must move for it to be considered a scroll
-     * wheel event.
+     * The distance a two-finger touch must move per scrollwheel event, in
+     * pixels.
      */
-    this.scrollThreshold = 20;
+    this.scrollThreshold = 20 * (window.devicePixelRatio || 1);
 
     /**
      * The maximum number of milliseconds to wait for a touch to end for the
@@ -74,7 +74,7 @@ Guacamole.Mouse = function(element) {
      * The maximum number of pixels to allow a touch to move for the gesture to
      * be considered a click.
      */
-    this.clickMoveThreshold = 10;
+    this.clickMoveThreshold = 10 * (window.devicePixelRatio || 1);
 
     /**
      * The current mouse state. The properties of this state are updated when
@@ -121,20 +121,17 @@ Guacamole.Mouse = function(element) {
         e.returnValue = false;
     }
 
-    function moveMouse(pageX, pageY) {
+    function moveMouse(clientX, clientY) {
 
-        guac_mouse.currentState.x = pageX - element.offsetLeft;
-        guac_mouse.currentState.y = pageY - element.offsetTop;
+        guac_mouse.currentState.x = clientX - element.offsetLeft;
+        guac_mouse.currentState.y = clientY - element.offsetTop;
 
         // This is all JUST so we can get the mouse position within the element
         var parent = element.offsetParent;
         while (parent) {
 
-            if (parent.offsetLeft)
-                guac_mouse.currentState.x -= parent.offsetLeft;
-
-            if (parent.offsetTop)
-                guac_mouse.currentState.y -= parent.offsetTop;
+            guac_mouse.currentState.x -= parent.offsetLeft - parent.scrollLeft;
+            guac_mouse.currentState.y -= parent.offsetTop  - parent.scrollTop;
 
             parent = parent.offsetParent;
         }
@@ -157,7 +154,7 @@ Guacamole.Mouse = function(element) {
 
         cancelEvent(e);
 
-        moveMouse(e.pageX, e.pageY);
+        moveMouse(e.clientX, e.clientY);
 
     }, false);
 
@@ -166,6 +163,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",
@@ -255,8 +253,8 @@ Guacamole.Mouse = function(element) {
 
             // Record touch location and time
             var starting_touch = e.touches[0];
-            last_touch_x = starting_touch.screenX;
-            last_touch_y = starting_touch.screenY;
+            last_touch_x = starting_touch.clientX;
+            last_touch_y = starting_touch.clientY;
             last_touch_time = new Date().getTime();
             pixels_moved = 0;
 
@@ -270,8 +268,8 @@ Guacamole.Mouse = function(element) {
 
         // Get change in touch location
         var touch = e.touches[0];
-        var delta_x = touch.screenX - last_touch_x;
-        var delta_y = touch.screenY - last_touch_y;
+        var delta_x = touch.clientX - last_touch_x;
+        var delta_y = touch.clientY - last_touch_y;
 
         // Track pixels moved
         pixels_moved += Math.abs(delta_x) + Math.abs(delta_y);
@@ -300,13 +298,13 @@ Guacamole.Mouse = function(element) {
                 guac_mouse.onmousemove(guac_mouse.currentState);
 
             // Update touch location
-            last_touch_x = touch.screenX;
-            last_touch_y = touch.screenY;
+            last_touch_x = touch.clientX;
+            last_touch_y = touch.clientY;
 
         }
 
-        // Otherwise, interpret as scrollwheel
-        else {
+        // Interpret two-finger swipe as scrollwheel
+        else if (touch_count == 2) {
 
             // If change in location passes threshold for scroll
             if (Math.abs(delta_y) >= guac_mouse.scrollThreshold) {
@@ -328,8 +326,8 @@ Guacamole.Mouse = function(element) {
 
                 // Only update touch location after a scroll has been
                 // detected
-                last_touch_x = touch.screenX;
-                last_touch_y = touch.screenY;
+                last_touch_x = touch.clientX;
+                last_touch_y = touch.clientY;
 
             }