@novnc/novnc 1.2.0 → 1.3.0-g0ef7582

package/lib/input/gesturehandler.js

@@ -3,14 +3,10 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
-
+exports["default"] = void 0;
 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
-
 function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
-
-function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }
-
+function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }
 /*
  * noVNC: HTML5 VNC client
  * Copyright (C) 2020 The noVNC Authors
@@ -19,6 +15,7 @@ function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _d
  * See README.md for usage and integration instructions.
  *
  */
+
 var GH_NOGESTURE = 0;
 var GH_ONETAP = 1;
 var GH_TWOTAP = 2;
@@ -30,20 +27,21 @@ var GH_PINCH = 64;
 var GH_INITSTATE = 127;
 var GH_MOVE_THRESHOLD = 50;
 var GH_ANGLE_THRESHOLD = 90; // Degrees
-// Timeout when waiting for gestures (ms)
 
-var GH_MULTITOUCH_TIMEOUT = 250; // Maximum time between press and release for a tap (ms)
+// Timeout when waiting for gestures (ms)
+var GH_MULTITOUCH_TIMEOUT = 250;
 
-var GH_TAP_TIMEOUT = 1000; // Timeout when waiting for longpress (ms)
+// Maximum time between press and release for a tap (ms)
+var GH_TAP_TIMEOUT = 1000;
 
-var GH_LONGPRESS_TIMEOUT = 1000; // Timeout when waiting to decide between PINCH and TWODRAG (ms)
+// Timeout when waiting for longpress (ms)
+var GH_LONGPRESS_TIMEOUT = 1000;
 
+// Timeout when waiting to decide between PINCH and TWODRAG (ms)
 var GH_TWOTOUCH_TIMEOUT = 50;
-
 var GestureHandler = /*#__PURE__*/function () {
   function GestureHandler() {
     _classCallCheck(this, GestureHandler);
-
     this._target = null;
     this._state = GH_INITSTATE;
     this._tracked = [];
@@ -54,19 +52,14 @@ var GestureHandler = /*#__PURE__*/function () {
     this._twoTouchTimeoutId = null;
     this._boundEventHandler = this._eventHandler.bind(this);
   }
-
   _createClass(GestureHandler, [{
     key: "attach",
     value: function attach(target) {
       this.detach();
       this._target = target;
-
       this._target.addEventListener('touchstart', this._boundEventHandler);
-
       this._target.addEventListener('touchmove', this._boundEventHandler);
-
       this._target.addEventListener('touchend', this._boundEventHandler);
-
       this._target.addEventListener('touchcancel', this._boundEventHandler);
     }
   }, {
@@ -75,19 +68,12 @@ var GestureHandler = /*#__PURE__*/function () {
       if (!this._target) {
         return;
       }
-
       this._stopLongpressTimeout();
-
       this._stopTwoTouchTimeout();
-
       this._target.removeEventListener('touchstart', this._boundEventHandler);
-
       this._target.removeEventListener('touchmove', this._boundEventHandler);
-
       this._target.removeEventListener('touchend', this._boundEventHandler);
-
       this._target.removeEventListener('touchcancel', this._boundEventHandler);
-
       this._target = null;
     }
   }, {
@@ -96,22 +82,18 @@ var GestureHandler = /*#__PURE__*/function () {
       var fn;
       e.stopPropagation();
       e.preventDefault();
-
       switch (e.type) {
         case 'touchstart':
           fn = this._touchStart;
           break;
-
         case 'touchmove':
           fn = this._touchMove;
           break;
-
         case 'touchend':
         case 'touchcancel':
           fn = this._touchEnd;
           break;
       }
-
       for (var i = 0; i < e.changedTouches.length; i++) {
         var touch = e.changedTouches[i];
         fn.call(this, touch.identifier, touch.clientX, touch.clientY);
@@ -124,30 +106,24 @@ var GestureHandler = /*#__PURE__*/function () {
       // or we're in a cleanup state
       if (this._hasDetectedGesture() || this._state === GH_NOGESTURE) {
         this._ignored.push(id);
-
         return;
-      } // Did it take too long between touches that we should no longer
-      // consider this a single gesture?
-
+      }
 
+      // Did it take too long between touches that we should no longer
+      // consider this a single gesture?
       if (this._tracked.length > 0 && Date.now() - this._tracked[0].started > GH_MULTITOUCH_TIMEOUT) {
         this._state = GH_NOGESTURE;
-
         this._ignored.push(id);
-
         return;
-      } // If we're waiting for fingers to release then we should no longer
-      // recognize new touches
-
+      }
 
+      // If we're waiting for fingers to release then we should no longer
+      // recognize new touches
       if (this._waitingRelease) {
         this._state = GH_NOGESTURE;
-
         this._ignored.push(id);
-
         return;
       }
-
       this._tracked.push({
         id: id,
         started: Date.now(),
@@ -158,24 +134,17 @@ var GestureHandler = /*#__PURE__*/function () {
         lastY: y,
         angle: 0
       });
-
       switch (this._tracked.length) {
         case 1:
           this._startLongpressTimeout();
-
           break;
-
         case 2:
           this._state &= ~(GH_ONETAP | GH_DRAG | GH_LONGPRESS);
-
           this._stopLongpressTimeout();
-
           break;
-
         case 3:
           this._state &= ~(GH_TWOTAP | GH_TWODRAG | GH_PINCH);
           break;
-
         default:
           this._state = GH_NOGESTURE;
       }
@@ -185,66 +154,64 @@ var GestureHandler = /*#__PURE__*/function () {
     value: function _touchMove(id, x, y) {
       var touch = this._tracked.find(function (t) {
         return t.id === id;
-      }); // If this is an update for a touch we're not tracking, ignore it
-
+      });
 
+      // If this is an update for a touch we're not tracking, ignore it
       if (touch === undefined) {
         return;
-      } // Update the touches last position with the event coordinates
-
+      }
 
+      // Update the touches last position with the event coordinates
       touch.lastX = x;
       touch.lastY = y;
       var deltaX = x - touch.firstX;
-      var deltaY = y - touch.firstY; // Update angle when the touch has moved
+      var deltaY = y - touch.firstY;
 
+      // Update angle when the touch has moved
       if (touch.firstX !== touch.lastX || touch.firstY !== touch.lastY) {
         touch.angle = Math.atan2(deltaY, deltaX) * 180 / Math.PI;
       }
-
       if (!this._hasDetectedGesture()) {
         // Ignore moves smaller than the minimum threshold
         if (Math.hypot(deltaX, deltaY) < GH_MOVE_THRESHOLD) {
           return;
-        } // Can't be a tap or long press as we've seen movement
-
+        }
 
+        // Can't be a tap or long press as we've seen movement
         this._state &= ~(GH_ONETAP | GH_TWOTAP | GH_THREETAP | GH_LONGPRESS);
-
         this._stopLongpressTimeout();
-
         if (this._tracked.length !== 1) {
           this._state &= ~GH_DRAG;
         }
-
         if (this._tracked.length !== 2) {
           this._state &= ~(GH_TWODRAG | GH_PINCH);
-        } // We need to figure out which of our different two touch gestures
-        // this might be
-
+        }
 
+        // We need to figure out which of our different two touch gestures
+        // this might be
         if (this._tracked.length === 2) {
           // The other touch is the one where the id doesn't match
           var prevTouch = this._tracked.find(function (t) {
             return t.id !== id;
-          }); // How far the previous touch point has moved since start
+          });
 
+          // How far the previous touch point has moved since start
+          var prevDeltaMove = Math.hypot(prevTouch.firstX - prevTouch.lastX, prevTouch.firstY - prevTouch.lastY);
 
-          var prevDeltaMove = Math.hypot(prevTouch.firstX - prevTouch.lastX, prevTouch.firstY - prevTouch.lastY); // We know that the current touch moved far enough,
+          // We know that the current touch moved far enough,
           // but unless both touches moved further than their
           // threshold we don't want to disqualify any gestures
-
           if (prevDeltaMove > GH_MOVE_THRESHOLD) {
             // The angle difference between the direction of the touch points
             var deltaAngle = Math.abs(touch.angle - prevTouch.angle);
-            deltaAngle = Math.abs((deltaAngle + 180) % 360 - 180); // PINCH or TWODRAG can be eliminated depending on the angle
+            deltaAngle = Math.abs((deltaAngle + 180) % 360 - 180);
 
+            // PINCH or TWODRAG can be eliminated depending on the angle
             if (deltaAngle > GH_ANGLE_THRESHOLD) {
               this._state &= ~GH_TWODRAG;
             } else {
               this._state &= ~GH_PINCH;
             }
-
             if (this._isTwoTouchTimeoutRunning()) {
               this._stopTwoTouchTimeout();
             }
@@ -254,14 +221,11 @@ var GestureHandler = /*#__PURE__*/function () {
             this._startTwoTouchTimeout();
           }
         }
-
         if (!this._hasDetectedGesture()) {
           return;
         }
-
         this._pushEvent('gesturestart');
       }
-
       this._pushEvent('gesturemove');
     }
   }, {
@@ -270,70 +234,65 @@ var GestureHandler = /*#__PURE__*/function () {
       // Check if this is an ignored touch
       if (this._ignored.indexOf(id) !== -1) {
         // Remove this touch from ignored
-        this._ignored.splice(this._ignored.indexOf(id), 1); // And reset the state if there are no more touches
-
+        this._ignored.splice(this._ignored.indexOf(id), 1);
 
+        // And reset the state if there are no more touches
         if (this._ignored.length === 0 && this._tracked.length === 0) {
           this._state = GH_INITSTATE;
           this._waitingRelease = false;
         }
-
         return;
-      } // We got a touchend before the timer triggered,
-      // this cannot result in a gesture anymore.
-
+      }
 
+      // We got a touchend before the timer triggered,
+      // this cannot result in a gesture anymore.
       if (!this._hasDetectedGesture() && this._isTwoTouchTimeoutRunning()) {
         this._stopTwoTouchTimeout();
-
         this._state = GH_NOGESTURE;
-      } // Some gestures don't trigger until a touch is released
-
+      }
 
+      // Some gestures don't trigger until a touch is released
       if (!this._hasDetectedGesture()) {
         // Can't be a gesture that relies on movement
-        this._state &= ~(GH_DRAG | GH_TWODRAG | GH_PINCH); // Or something that relies on more time
-
+        this._state &= ~(GH_DRAG | GH_TWODRAG | GH_PINCH);
+        // Or something that relies on more time
         this._state &= ~GH_LONGPRESS;
-
         this._stopLongpressTimeout();
-
         if (!this._waitingRelease) {
           this._releaseStart = Date.now();
-          this._waitingRelease = true; // Can't be a tap that requires more touches than we current have
+          this._waitingRelease = true;
 
+          // Can't be a tap that requires more touches than we current have
           switch (this._tracked.length) {
             case 1:
               this._state &= ~(GH_TWOTAP | GH_THREETAP);
               break;
-
             case 2:
               this._state &= ~(GH_ONETAP | GH_THREETAP);
               break;
           }
         }
-      } // Waiting for all touches to release? (i.e. some tap)
-
+      }
 
+      // Waiting for all touches to release? (i.e. some tap)
       if (this._waitingRelease) {
         // Were all touches released at roughly the same time?
         if (Date.now() - this._releaseStart > GH_MULTITOUCH_TIMEOUT) {
           this._state = GH_NOGESTURE;
-        } // Did too long time pass between press and release?
-
+        }
 
+        // Did too long time pass between press and release?
         if (this._tracked.some(function (t) {
           return Date.now() - t.started > GH_TAP_TIMEOUT;
         })) {
           this._state = GH_NOGESTURE;
         }
-
         var touch = this._tracked.find(function (t) {
           return t.id === id;
         });
+        touch.active = false;
 
-        touch.active = false; // Are we still waiting for more releases?
-
+        // Are we still waiting for more releases?
         if (this._hasDetectedGesture()) {
           this._pushEvent('gesturestart');
         } else {
@@ -343,26 +302,25 @@ var GestureHandler = /*#__PURE__*/function () {
           }
         }
       }
-
       if (this._hasDetectedGesture()) {
         this._pushEvent('gestureend');
-      } // Ignore any remaining touches until they are ended
-
+      }
 
+      // Ignore any remaining touches until they are ended
       for (var i = 0; i < this._tracked.length; i++) {
         if (this._tracked[i].active) {
           this._ignored.push(this._tracked[i].id);
         }
       }
-
       this._tracked = [];
-      this._state = GH_NOGESTURE; // Remove this touch from ignored if it's in there
+      this._state = GH_NOGESTURE;
 
+      // Remove this touch from ignored if it's in there
       if (this._ignored.indexOf(id) !== -1) {
         this._ignored.splice(this._ignored.indexOf(id), 1);
-      } // We reset the state if ignored is empty
-
+      }
 
+      // We reset the state if ignored is empty
       if (this._ignored.length === 0) {
         this._state = GH_INITSTATE;
         this._waitingRelease = false;
@@ -373,16 +331,15 @@ var GestureHandler = /*#__PURE__*/function () {
     value: function _hasDetectedGesture() {
       if (this._state === GH_NOGESTURE) {
         return false;
-      } // Check to see if the bitmask value is a power of 2
+      }
+      // Check to see if the bitmask value is a power of 2
       // (i.e. only one bit set). If it is, we have a state.
-
-
       if (this._state & this._state - 1) {
         return false;
-      } // For taps we also need to have all touches released
-      // before we've fully detected the gesture
-
+      }
 
+      // For taps we also need to have all touches released
+      // before we've fully detected the gesture
       if (this._state & (GH_ONETAP | GH_TWOTAP | GH_THREETAP)) {
         if (this._tracked.some(function (t) {
           return t.active;
@@ -390,16 +347,13 @@ var GestureHandler = /*#__PURE__*/function () {
           return false;
         }
       }
-
       return true;
     }
   }, {
     key: "_startLongpressTimeout",
     value: function _startLongpressTimeout() {
       var _this = this;
-
       this._stopLongpressTimeout();
-
       this._longpressTimeoutId = setTimeout(function () {
         return _this._longpressTimeout();
       }, GH_LONGPRESS_TIMEOUT);
@@ -416,18 +370,14 @@ var GestureHandler = /*#__PURE__*/function () {
       if (this._hasDetectedGesture()) {
         throw new Error("A longpress gesture failed, conflict with a different gesture");
       }
-
       this._state = GH_LONGPRESS;
-
       this._pushEvent('gesturestart');
     }
   }, {
     key: "_startTwoTouchTimeout",
     value: function _startTwoTouchTimeout() {
       var _this2 = this;
-
       this._stopTwoTouchTimeout();
-
       this._twoTouchTimeoutId = setTimeout(function () {
         return _this2._twoTouchTimeout();
       }, GH_TWOTOUCH_TIMEOUT);
@@ -448,27 +398,23 @@ var GestureHandler = /*#__PURE__*/function () {
     value: function _twoTouchTimeout() {
       if (this._tracked.length === 0) {
         throw new Error("A pinch or two drag gesture failed, no tracked touches");
-      } // How far each touch point has moved since start
-
+      }
 
+      // How far each touch point has moved since start
       var avgM = this._getAverageMovement();
-
       var avgMoveH = Math.abs(avgM.x);
-      var avgMoveV = Math.abs(avgM.y); // The difference in the distance between where
-      // the touch points started and where they are now
+      var avgMoveV = Math.abs(avgM.y);
 
+      // The difference in the distance between where
+      // the touch points started and where they are now
       var avgD = this._getAverageDistance();
-
       var deltaTouchDistance = Math.abs(Math.hypot(avgD.first.x, avgD.first.y) - Math.hypot(avgD.last.x, avgD.last.y));
-
       if (avgMoveV < deltaTouchDistance && avgMoveH < deltaTouchDistance) {
         this._state = GH_PINCH;
       } else {
         this._state = GH_TWODRAG;
       }
-
       this._pushEvent('gesturestart');
-
       this._pushEvent('gesturemove');
     }
   }, {
@@ -476,34 +422,35 @@ var GestureHandler = /*#__PURE__*/function () {
     value: function _pushEvent(type) {
       var detail = {
         type: this._stateToGesture(this._state)
-      }; // For most gesture events the current (average) position is the
-      // most useful
+      };
 
+      // For most gesture events the current (average) position is the
+      // most useful
       var avg = this._getPosition();
+      var pos = avg.last;
 
-      var pos = avg.last; // However we have a slight distance to detect gestures, so for the
+      // However we have a slight distance to detect gestures, so for the
       // first gesture event we want to use the first positions we saw
-
       if (type === 'gesturestart') {
         pos = avg.first;
-      } // For these gestures, we always want the event coordinates
-      // to be where the gesture began, not the current touch location.
-
+      }
 
+      // For these gestures, we always want the event coordinates
+      // to be where the gesture began, not the current touch location.
       switch (this._state) {
         case GH_TWODRAG:
         case GH_PINCH:
           pos = avg.first;
           break;
       }
-
       detail['clientX'] = pos.x;
-      detail['clientY'] = pos.y; // FIXME: other coordinates?
-      // Some gestures also have a magnitude
+      detail['clientY'] = pos.y;
 
+      // FIXME: other coordinates?
+
+      // Some gestures also have a magnitude
       if (this._state === GH_PINCH) {
         var distance = this._getAverageDistance();
-
         if (type === 'gesturestart') {
           detail['magnitudeX'] = distance.first.x;
           detail['magnitudeY'] = distance.first.y;
@@ -517,16 +464,13 @@ var GestureHandler = /*#__PURE__*/function () {
           detail['magnitudeY'] = 0.0;
         } else {
           var movement = this._getAverageMovement();
-
           detail['magnitudeX'] = movement.x;
           detail['magnitudeY'] = movement.y;
         }
       }
-
       var gev = new CustomEvent(type, {
         detail: detail
       });
-
       this._target.dispatchEvent(gev);
     }
   }, {
@@ -535,26 +479,19 @@ var GestureHandler = /*#__PURE__*/function () {
       switch (state) {
         case GH_ONETAP:
           return 'onetap';
-
         case GH_TWOTAP:
           return 'twotap';
-
         case GH_THREETAP:
           return 'threetap';
-
         case GH_DRAG:
           return 'drag';
-
         case GH_LONGPRESS:
           return 'longpress';
-
         case GH_TWODRAG:
           return 'twodrag';
-
         case GH_PINCH:
           return 'pinch';
       }
-
       throw new Error("Unknown gesture state: " + state);
     }
   }, {
@@ -563,20 +500,17 @@ var GestureHandler = /*#__PURE__*/function () {
       if (this._tracked.length === 0) {
         throw new Error("Failed to get gesture position, no tracked touches");
       }
-
       var size = this._tracked.length;
       var fx = 0,
-          fy = 0,
-          lx = 0,
-          ly = 0;
-
+        fy = 0,
+        lx = 0,
+        ly = 0;
       for (var i = 0; i < this._tracked.length; i++) {
         fx += this._tracked[i].firstX;
         fy += this._tracked[i].firstY;
         lx += this._tracked[i].lastX;
         ly += this._tracked[i].lastY;
       }
-
       return {
         first: {
           x: fx / size,
@@ -594,16 +528,13 @@ var GestureHandler = /*#__PURE__*/function () {
       if (this._tracked.length === 0) {
         throw new Error("Failed to get gesture movement, no tracked touches");
       }
-
       var totalH, totalV;
       totalH = totalV = 0;
       var size = this._tracked.length;
-
       for (var i = 0; i < this._tracked.length; i++) {
         totalH += this._tracked[i].lastX - this._tracked[i].firstX;
         totalV += this._tracked[i].lastY - this._tracked[i].firstY;
       }
-
       return {
         x: totalH / size,
         y: totalV / size
@@ -614,8 +545,9 @@ var GestureHandler = /*#__PURE__*/function () {
     value: function _getAverageDistance() {
       if (this._tracked.length === 0) {
         throw new Error("Failed to get gesture distance, no tracked touches");
-      } // Distance between the first and last tracked touches
+      }
 
+      // Distance between the first and last tracked touches
 
       var first = this._tracked[0];
       var last = this._tracked[this._tracked.length - 1];
@@ -635,8 +567,6 @@ var GestureHandler = /*#__PURE__*/function () {
       };
     }
   }]);
-
   return GestureHandler;
 }();
-
-exports.default = GestureHandler;
+exports["default"] = GestureHandler;