Allowed one-finger rotate to be used on touch devices

zingchart · Jul 27, 2016 · 39eec91 · 39eec91
1 parent ac6846f
commit 39eec91
Show file tree

Hide file tree

Showing 8 changed files with 16 additions and 92 deletions.
diff --git a/dist/zingtouch.js b/dist/zingtouch.js
@@ -863,19 +863,12 @@
 	   * @param {Event} event - The Event object from the window
 	   * @param {Number} [identifier=0] - The identifier for each input event
 	   * (taken from event.changedTouches)
-	   * @param {String} type - The type of input detected.
 	   */
-	  function Input(event, identifier, type) {
+	  function Input(event, identifier) {
 	    _classCallCheck(this, Input);
 
 	    var currentEvent = new _ZingEvent2.default(event, identifier);
 
-	    /**
-	     * The type of input detected. Either a mouse, pointer, or touch.
-	     * @type {String}
-	     */
-	    this.type = type;
-
 	    /**
 	     * Holds the initial event object. A touchstart/mousedown event.
 	     * @type {ZingEvent}
@@ -1115,32 +1108,6 @@
 
 	  /*normalizeEvent*/
 
-	  /**
-	   * Obtain the type of input detected.
-	   * @param {String} type - The event type emitted by the browser
-	   * @returns {null|String} - The normalized input name, or null if it is an input not predetermined.
-	   */
-	  getInputType: function getInputType(type) {
-	    switch (type) {
-	      case 'mouseup':
-	      case 'mousedown':
-	      case 'mousemove':
-	        return 'mouse';
-	      case 'touchstart':
-	      case 'touchmove':
-	      case 'touchend':
-	        return 'touch';
-	      case 'pointerdown':
-	      case 'pointermove':
-	      case 'pointerup':
-	        return 'pointer';
-	      default:
-	        return null;
-	    }
-	  },
-
-	  /*getInputType*/
-
 	  /**
 	   * Determines if the current and previous coordinates are within or up to a certain tolerance.
 	   * @param {Number} currentX - Current event's x coordinate
@@ -1626,7 +1593,6 @@
 
 	      function update(event, state, identifier, regionElement) {
 	        var eventType = _util2.default.normalizeEvent(event.type);
-	        var inputType = _util2.default.getInputType(event.type);
 	        var input = findInputById(state.inputs, identifier);
 
 	        //A starting input was not cleaned up properly and still exists.
@@ -1647,7 +1613,7 @@
 	        }
 
 	        if (eventType === 'start') {
-	          state.inputs.push(new _Input2.default(event, identifier, inputType));
+	          state.inputs.push(new _Input2.default(event, identifier));
 	        } else {
 	          input.update(event, identifier);
 	        }
@@ -2196,7 +2162,7 @@
 	                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                * Contains the Rotate class
 	                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                */
 
-	var DEFAULT_INPUTS = 2;
+	var MAX_INPUTS = 2;
 
 	/**
 	 * A Rotate is defined as two inputs moving about a circle, maintaining a relatively equal radius.
@@ -2243,13 +2209,9 @@
 	  _createClass(Rotate, [{
 	    key: 'move',
 	    value: function move(inputs, state, element) {
-	      var inputType = inputs[0].type;
-
-	      if (state.numActiveInputs() === DEFAULT_INPUTS || state.numActiveInputs() === 1 && inputType === 'mouse') {
-
+	      if (state.numActiveInputs() <= MAX_INPUTS) {
 	        var referencePivot, diffX, diffY, input;
-
-	        if (inputType === 'mouse') {
+	        if (state.numActiveInputs() === 1) {
 	          var bRect = element.getBoundingClientRect();
 	          referencePivot = {
 	            x: bRect.left + bRect.width / 2,

diff --git a/dist/zingtouch.min.js b/dist/zingtouch.min.js
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "zingtouch",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "description": "A modern JavaScript touch gesture library",
   "main": "index.js",
   "directories": {

diff --git a/readme.md b/readme.md
@@ -301,8 +301,9 @@ Each index represents an input that participated in the event.
 
 ![Rotate Gesture](http://demos.zingchart.com/assets/zingtouch-docs/rotate.gif)
 
-
-A Rotate is detected when the use has two inputs moving about a circle on the edges of a diameter.
+A Rotate is detected when:
+ * the user has two inputs moving about a circle on the edges of a diameter.
+ * the user has one input moving in a circular motion around the center point of the bound target element.
 
 #### Example
 ```js
@@ -312,7 +313,7 @@ new ZingTouch.Rotate()
 #### Emits
 
 * `angle` - The angle of the initial right most input, in relation to the unit circle.
-* `distanceFromOrigin` - The angular distance travelled by the initial right most post.
+* `distanceFromOrigin` - The angular distance travelled by the initial right most input.
 * `distanceFromLast` - The change of angle between the last position and the current position. Positive denotes a counter-clockwise motion, while negative denotes a clockwise motion.
 
 ---

diff --git a/src/core/classes/Input.js b/src/core/classes/Input.js
@@ -17,17 +17,10 @@ class Input {
    * @param {Event} event - The Event object from the window
    * @param {Number} [identifier=0] - The identifier for each input event
    * (taken from event.changedTouches)
-   * @param {String} type - The type of input detected.
    */
-  constructor(event, identifier, type) {
+  constructor(event, identifier) {
     var currentEvent = new ZingEvent(event, identifier);
 
-    /**
-     * The type of input detected. Either a mouse, pointer, or touch.
-     * @type {String}
-     */
-    this.type = type;
-
     /**
      * Holds the initial event object. A touchstart/mousedown event.
      * @type {ZingEvent}

diff --git a/src/core/classes/State.js b/src/core/classes/State.js
@@ -188,7 +188,6 @@ class State {
 
     function update(event, state, identifier, regionElement) {
       var eventType = util.normalizeEvent(event.type);
-      var inputType = util.getInputType(event.type);
       var input = findInputById(state.inputs, identifier);
 
       //A starting input was not cleaned up properly and still exists.
@@ -209,7 +208,7 @@ class State {
       }
 
       if (eventType === 'start') {
-        state.inputs.push(new Input(event, identifier, inputType));
+        state.inputs.push(new Input(event, identifier));
       } else {
         input.update(event, identifier);
       }

diff --git a/src/core/util.js b/src/core/util.js
@@ -38,32 +38,6 @@ var util = {
   },
   /*normalizeEvent*/
 
-  /**
-   * Obtain the type of input detected.
-   * @param {String} type - The event type emitted by the browser
-   * @returns {null|String} - The normalized input name, or null if it is an input not predetermined.
-   */
-  getInputType(type) {
-    switch (type) {
-      case 'mouseup' :
-      case 'mousedown' :
-      case 'mousemove' :
-        return 'mouse';
-      case 'touchstart' :
-      case 'touchmove' :
-      case 'touchend' :
-        return 'touch';
-      case 'pointerdown' :
-      case 'pointermove' :
-      case 'pointerup' :
-        return 'pointer';
-      default :
-        return null;
-    }
-  },
-  /*getInputType*/
-
-
   /**
    * Determines if the current and previous coordinates are within or up to a certain tolerance.
    * @param {Number} currentX - Current event's x coordinate

diff --git a/src/gestures/Rotate.js b/src/gestures/Rotate.js
@@ -6,7 +6,7 @@
 import Gesture from './Gesture.js';
 import util from './../core/util.js';
 
-const DEFAULT_INPUTS = 2;
+const MAX_INPUTS = 2;
 
 /**
  * A Rotate is defined as two inputs moving about a circle, maintaining a relatively equal radius.
@@ -43,14 +43,9 @@ class Rotate extends Gesture {
    * the current position.
    */
   move(inputs, state, element) {
-    var inputType = inputs[0].type;
-
-    if (state.numActiveInputs() === DEFAULT_INPUTS ||
-      (state.numActiveInputs() === 1 && inputType === 'mouse')) {
-
+    if (state.numActiveInputs() <= MAX_INPUTS ) {
       var referencePivot, diffX, diffY, input;
-
-      if (inputType === 'mouse') {
+      if (state.numActiveInputs() === 1) {
         var bRect = element.getBoundingClientRect();
         referencePivot = {
           x: bRect.left + bRect.width / 2,