Add double tap support. Related #47

bumbu · Jul 30, 2014 · 297df90 · 297df90
1 parent 3b868f0
commit 297df90
Show file tree

Hide file tree

Showing 2 changed files with 37 additions and 4 deletions.
diff --git a/src/svg-pan-zoom.js b/src/svg-pan-zoom.js
@@ -155,13 +155,17 @@ var Mousewheel = require('./mousewheel')  // Keep it here so that mousewheel is
    */
   SvgPanZoom.prototype.setupHandlers = function() {
     var that = this
+      , prevEvt = null // use for touchstart event to detect double tap
+      ;
 
     // Mouse down group
     this.svg.addEventListener("mousedown", function(evt) {
-      return that.handleMouseDown(evt);
+      return that.handleMouseDown(evt, null);
     }, false);
     this.svg.addEventListener("touchstart", function(evt) {
-      return that.handleMouseDown(evt);
+      var result = that.handleMouseDown(evt, prevEvt);
+      prevEvt = evt
+      return result;
     }, false);
 
     // Mouse up group
@@ -399,15 +403,18 @@ var Mousewheel = require('./mousewheel')  // Keep it here so that mousewheel is
    *
    * @param {object} evt Event
    */
-  SvgPanZoom.prototype.handleMouseDown = function(evt) {
+  SvgPanZoom.prototype.handleMouseDown = function(evt, prevEvt) {
     if (evt.preventDefault) {
       evt.preventDefault()
     } else {
       evt.returnValue = false
     }
 
+    var svg = (evt.target.tagName === 'svg' || evt.target.tagName === 'SVG') ? evt.target : evt.target.ownerSVGElement || evt.target.correspondingElement.ownerSVGElement
+    Utils.mouseAndTouchNormalize(evt, svg)
+
     // Double click detection; more consistent than ondblclick
-    if (evt.detail === 2 && this.options.dblClickZoomEnabled){
+    if (this.options.dblClickZoomEnabled && Utils.isDblClick(evt, prevEvt)){
       this.handleDblClick(evt)
     } else {
       // Pan mode

diff --git a/src/utilities.js b/src/utilities.js
@@ -156,4 +156,30 @@ module.exports = {
       }
     }
   }
+
+  /**
+   * Check if an event is a double click/tap
+   * TODO: For touch gestures use a library (hammer.js) that takes in account other events
+   * (touchmove and touchend). It should take in account tap duration and traveled distance
+   *
+   * @param  {object}  evt     Event
+   * @param  {object}  prevEvt Previous Event
+   * @return {Boolean}         [description]
+   */
+, isDblClick: function(evt, prevEvt) {
+    // Double click detected by browser
+    if (evt.detail === 2) {
+      return true;
+    }
+    // Try to compare events
+    else if (prevEvt !== void 0 && prevEvt !== null) {
+      var timeStampDiff = evt.timeStamp - prevEvt.timeStamp // should be lower than 250 ms
+        , touchesDistance = Math.sqrt(Math.pow(evt.clientX - prevEvt.clientX, 2) + Math.pow(evt.clientY - prevEvt.clientY, 2))
+
+      return timeStampDiff < 250 && touchesDistance < 10
+    }
+
+    // Nothing found
+    return false;
+  }
 }