Merge pull request #80 from figurosity/master

Addresses Issue #61
zingchart · Apr 16, 2020 · d36d10e · d36d10e
2 parents d67ad4b + 8dd136a
commit d36d10e
Show file tree

Hide file tree

Showing 14 changed files with 2,816 additions and 2,187 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -33,8 +33,8 @@
     "karma-sourcemap-loader": "^0.3.7",
     "karma-webpack": "^3.0.0",
     "mocha": "^5.2.0",
-    "puppeteer": "^1.7.0",
-    "webpack": "^4.17.1",
+    "puppeteer": "^1.20.0",
+    "webpack": "^4.42.1",
     "webpack-cli": "^3.1.0"
   },
   "dependencies": {}

diff --git a/readme.md b/readme.md
@@ -553,6 +553,7 @@ Solution: Attach the gesture listener to a non-mutating element such as a parent
 * `npm run build:dev` - Builds the unminified library with webpack
 * `npm run build:prod` - Builds the minified library with webpack
 * `npm run docs` - Builds the docs with esdocs
+* `npm run test` - Run the tests
 
 
 ## Browser Compatibility

diff --git a/src/core/util.js b/src/core/util.js
@@ -100,7 +100,7 @@ let util = {
    * @param {number} start - The starting point in radians
    * @param {number} end - The ending point in radians
    * @return {number} The number of radians between the starting point and
-   * ending point. 
+   * ending point.
    */
   getAngularDistance(start, end) {
     return end - start;

diff --git a/src/gestures/Distance.js b/src/gestures/Distance.js
@@ -17,6 +17,11 @@ class Distance extends Gesture {
   /**
    * Constructor function for the Distance class.
    * @param {Object} options
+   * @param {Object} [options] - The options object.
+   * @param {Number} [options.threshold=1] - The minimum number of
+   *  pixels the input has to move to trigger this gesture.
+   * @param {Function} [options.onStart] - The on start callback
+   * @param {Function} [options.onMove] - The on move callback
    */
   constructor(options) {
     super();
@@ -33,12 +38,27 @@ class Distance extends Gesture {
      */
     this.threshold = (options && options.threshold) ?
       options.threshold : DEFAULT_MIN_THRESHOLD;
+
+    /**
+     * The on start callback
+     */
+    if (options && options.onStart && typeof options.onStart === 'function') {
+      this.onStart = options.onStart
+    }
+    /**
+     * The on move callback
+     */
+    if (options && options.onMove && typeof options.onMove === 'function') {
+      this.onMove = options.onMove
+    }
   }
 
   /**
    * Event hook for the start of a gesture. Initialized the lastEmitted
    * gesture and stores it in the first input for reference events.
    * @param {Array} inputs
+   * @param {Object} state - The state object of the current region.
+   * @param {Element} element - The element associated to the binding.
    */
   start(inputs, state, element) {
     if(!this.isValid(inputs, state, element)) {
@@ -53,6 +73,9 @@ class Distance extends Gesture {
         inputs[0].current.y,
         inputs[1].current.y);
     }
+    if(this.onStart) {
+      this.onStart(inputs, state, element);
+    }
   }
 
   /**
@@ -83,14 +106,17 @@ class Distance extends Gesture {
 
       if (Math.abs(change) >= this.threshold) {
         progress.lastEmittedDistance = currentDistance;
-        return {
+        const movement = {
           distance: currentDistance,
           center: centerPoint,
           change,
         };
+        if(this.onMove) {
+          this.onMove(inputs, state, element, movement);
+        }
+        return movement;
       }
     }
-
     return null;
   }
 }

diff --git a/src/gestures/Pan.js b/src/gestures/Pan.js
@@ -22,6 +22,9 @@ class Pan extends Gesture {
    *  Pan gesture.
    * @param {Number} [options.threshold=1] - The minimum number of
    * pixels the input has to move to trigger this gesture.
+   * @param {Function} [options.onStart] - The on start callback
+   * @param {Function} [options.onMove] - The on move callback
+   * @param {Function} [options.onEnd] - The on end callback
    */
   constructor(options) {
     super();
@@ -46,6 +49,25 @@ class Pan extends Gesture {
      */
     this.threshold = (options && options.threshold) ?
       options.threshold : DEFAULT_MIN_THRESHOLD;
+
+    /**
+     * The on start callback
+     */
+    if (options && options.onStart && typeof options.onStart === 'function') {
+      this.onStart = options.onStart
+    }
+    /**
+     * The on move callback
+     */
+    if (options && options.onMove && typeof options.onMove === 'function') {
+      this.onMove = options.onMove
+    }
+    /**
+     * The on end callback
+     */
+    if (options && options.onEnd && typeof options.onEnd === 'function') {
+      this.onEnd = options.onEnd
+    }
   }
 
   /**
@@ -62,6 +84,9 @@ class Pan extends Gesture {
         y: input.current.y,
       };
     });
+    if(this.onStart) {
+      this.onStart(inputs);
+    }
   }
 
   /**
@@ -84,19 +109,21 @@ class Pan extends Gesture {
       const progress = input.getGestureProgress(this.getId());
       const distanceFromLastEmit = util.distanceBetweenTwoPoints(
         progress.lastEmitted.x,
-        progress.lastEmitted.y,
         input.current.x,
+        progress.lastEmitted.y,
         input.current.y
       );
       const reachedThreshold = distanceFromLastEmit >= this.threshold;
-
       if (progress.active && reachedThreshold) {
         output.data[index] = packData( input, progress );
         progress.lastEmitted.x = input.current.x;
         progress.lastEmitted.y = input.current.y;
       }
     });
 
+    if(this.onMove) {
+      this.onMove(inputs, state, element, output);
+    }
     return output;
 
     function packData( input, progress ) {
@@ -106,6 +133,12 @@ class Pan extends Gesture {
         input.initial.y,
         input.current.y
       );
+      const currentDistance = util.distanceBetweenTwoPoints(
+        progress.lastEmitted.x,
+        input.current.x,
+        progress.lastEmitted.y,
+        input.current.y
+      );
       const directionFromOrigin = util.getAngle(
         input.initial.x,
         input.initial.y,
@@ -122,12 +155,16 @@ class Pan extends Gesture {
         x: input.current.x - progress.lastEmitted.x,
         y: input.current.y - progress.lastEmitted.y,
       };
-
+      const currentDegree = currentDirection * 180 / Math.PI
+      const degreeFromOrigin = directionFromOrigin * 180 / Math.PI
       return {
         distanceFromOrigin,
+        currentDistance,
         directionFromOrigin,
         currentDirection,
         change,
+        degreeFromOrigin,
+        currentDegree
       };
     }
   }
@@ -149,6 +186,9 @@ class Pan extends Gesture {
       const progress = input.getGestureProgress(this.getId());
       progress.active = false;
     });
+    if(this.onEnd) {
+      this.onEnd(inputs);
+    }
     return null;
   }
 

diff --git a/src/gestures/Rotate.js b/src/gestures/Rotate.js
@@ -31,6 +31,13 @@ class Rotate extends Gesture {
      * @type {Number}
      */
     this.numInputs = options.numInputs || DEFAULT_INPUTS;
+
+    /**
+     * The on move callback
+     */
+    if (options && options.onMove && typeof options.onMove === 'function') {
+      this.onMove = options.onMove
+    }
   }
 
   /**
@@ -75,7 +82,7 @@ class Rotate extends Gesture {
 
     // Translate the current pivot point.
     const currentAngle = util.getAngle(
-      currentPivot.x, 
+      currentPivot.x,
       currentPivot.y,
       input.current.x,
       input.current.y);
@@ -92,12 +99,15 @@ class Rotate extends Gesture {
     }
 
     progress.previousAngle = currentAngle;
-
-    return {
+    const rotate = {
       angle: currentAngle,
       distanceFromOrigin: progress.distance,
       distanceFromLast: progress.change,
     };
+    if(this.onMove) {
+      this.onMove(inputs, state, element, rotate);
+    }
+    return rotate;
   }
 
   /* move*/

diff --git a/src/gestures/Swipe.js b/src/gestures/Swipe.js
@@ -87,6 +87,19 @@ class Swipe extends Gesture {
      */
     this.maxProgressStack = (options && options.maxProgressStack) ?
       options.maxProgressStack : DEFAULT_MAX_PROGRESS_STACK;
+
+    /**
+     * The on move callback
+     */
+    if (options && options.onMove && typeof options.onMove === 'function') {
+      this.onMove = options.onMove
+    }
+    /**
+     * The on end callback
+     */
+    if (options && options.onEnd && typeof options.onEnd === 'function') {
+      this.onEnd = options.onEnd
+    }
   }
 
   /**
@@ -117,6 +130,10 @@ class Swipe extends Gesture {
       }
     }
 
+    if(this.onMove) {
+      this.onMove(inputs, state, element);
+    }
+
     return null;
   }
 
@@ -136,7 +153,7 @@ class Swipe extends Gesture {
         data: [],
       };
 
-      for (var i = 0; i < inputs.length; i++) {
+      for (let i = 0; i < inputs.length; i++) {
         // Determine if all input events are on the 'end' event.
         if (inputs[i].current.type !== 'end') {
           return;
@@ -196,6 +213,9 @@ class Swipe extends Gesture {
       }
 
       if (output.data.length > 0) {
+        if(this.onEnd) {
+          this.onEnd(inputs, output);
+        }
         return output;
       }
     }

diff --git a/src/gestures/Tap.js b/src/gestures/Tap.js
@@ -26,6 +26,9 @@ class Tap extends Gesture {
    * @param {Number} [options.numInputs=1] - Number of inputs for Tap gesture.
    * @param {Number} [options.tolerance=10] - The tolerance in pixels
    *  a user can move.
+   * @param {Function} [options.onStart] - The on start callback
+   * @param {Function} [options.onMove] - The on move callback
+   * @param {Function} [options.onEnd] - The on end callback
    */
   constructor(options) {
     super();
@@ -71,6 +74,13 @@ class Tap extends Gesture {
      */
     this.tolerance = (options && options.tolerance) ?
       options.tolerance : DEFAULT_MOVE_PX_TOLERANCE;
+
+    /**
+     * The on end callback
+     */
+    if (options && options.onEnd && typeof options.onEnd === 'function') {
+      this.onEnd = options.onEnd
+    }
   }
 
   /* constructor*/
@@ -88,7 +98,6 @@ class Tap extends Gesture {
         progress.start = new Date().getTime();
       });
     }
-
     return null;
   }
 
@@ -122,7 +131,6 @@ class Tap extends Gesture {
         }
       }
     }
-
     return null;
   }
 
@@ -142,7 +150,6 @@ class Tap extends Gesture {
     if (inputs.length !== this.numInputs) {
       return null;
     }
-
     let startTime = Number.MAX_VALUE;
     for (let i = 0; i < inputs.length; i++) {
       if (inputs[i].getCurrentEventType() !== 'end') {
@@ -162,9 +169,12 @@ class Tap extends Gesture {
 
     let interval = new Date().getTime() - startTime;
     if ((this.minDelay <= interval) && (this.maxDelay >= interval)) {
-      return {
-        interval: interval,
-      };
+
+      const timing = { interval }
+      if(this.onEnd) {
+        this.onEnd(inputs, timing);
+      }
+      return timing;
     } else {
       let type = this.type;
       inputs.forEach(function(input) {