From e99f43af8db3b3a65f8a651f8ed7c9af4a282e6e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C3=89ric=20Lemoine?= <eric.lemoine@gmail.com>
Date: Fri, 5 Jun 2015 16:09:51 +0200
Subject: [PATCH] Add a clickTolerance option to the Draw interaction

---
 externs/olx.js                                | 15 +++++++-
 src/ol/interaction/drawinteraction.js         |  3 +-
 .../ol/interaction/drawinteraction.test.js    | 35 ++++++++++++++++---
 3 files changed, 47 insertions(+), 6 deletions(-)

diff --git a/externs/olx.js b/externs/olx.js
index 56d942a5d7..f49631080b 100644
--- a/externs/olx.js
+++ b/externs/olx.js
@@ -2356,7 +2356,8 @@ olx.interaction.DragZoomOptions.prototype.style;
 
 
 /**
- * @typedef {{features: (ol.Collection.<ol.Feature>|undefined),
+ * @typedef {{clickTolerance: (number|undefined),
+ *     features: (ol.Collection.<ol.Feature>|undefined),
  *     source: (ol.source.Vector|undefined),
  *     snapTolerance: (number|undefined),
  *     type: ol.geom.GeometryType,
@@ -2372,6 +2373,18 @@ olx.interaction.DragZoomOptions.prototype.style;
 olx.interaction.DrawOptions;
 
 
+/**
+ * The maximum distance in pixels between "down" and "up" for a "up" event
+ * to be considered a "click" event and actually add a point/vertex to the
+ * geometry being drawn.  Default is 6 pixels.  That value was chosen for
+ * the draw interaction to behave correctly on mouse as well as on touch
+ * devices.
+ * @type {number|undefined}
+ * @api
+ */
+olx.interaction.DrawOptions.prototype.clickTolerance;
+
+
 /**
  * Destination collection for the drawn features.
  * @type {ol.Collection.<ol.Feature>|undefined}
diff --git a/src/ol/interaction/drawinteraction.js b/src/ol/interaction/drawinteraction.js
index 1a0cfe6a03..ac4fbf7265 100644
--- a/src/ol/interaction/drawinteraction.js
+++ b/src/ol/interaction/drawinteraction.js
@@ -265,7 +265,8 @@ ol.interaction.Draw = function(options) {
    * @type {number}
    * @private
    */
-  this.squaredClickTolerance_ = 4;
+  this.squaredClickTolerance_ = goog.isDef(options.clickTolerance) ?
+      options.clickTolerance * options.clickTolerance : 36;
 
   /**
    * Draw overlay where our sketch features are drawn.
diff --git a/test/spec/ol/interaction/drawinteraction.test.js b/test/spec/ol/interaction/drawinteraction.test.js
index 91c7df892b..0477bc2cef 100644
--- a/test/spec/ol/interaction/drawinteraction.test.js
+++ b/test/spec/ol/interaction/drawinteraction.test.js
@@ -94,6 +94,33 @@ describe('ol.interaction.Draw', function() {
     });
   });
 
+  describe('specifying a clickTolerance', function() {
+    beforeEach(function() {
+      var draw = new ol.interaction.Draw({
+        source: source,
+        type: ol.geom.GeometryType.POINT,
+        clickTolerance: 6
+      });
+      map.addInteraction(draw);
+    });
+
+    it('adds a point when below the tolerance', function() {
+      var features;
+
+      simulateEvent('pointermove', 10, 20);
+      simulateEvent('pointerdown', 10, 20);
+      simulateEvent('pointerup', 15, 25);
+      features = source.getFeatures();
+      expect(features).to.length(0);
+
+      simulateEvent('pointermove', 10, 20);
+      simulateEvent('pointerdown', 10, 20);
+      simulateEvent('pointerup', 14, 24);
+      features = source.getFeatures();
+      expect(features).to.length(1);
+    });
+  });
+
   describe('drawing points', function() {
     var draw;
 
@@ -119,8 +146,8 @@ describe('ol.interaction.Draw', function() {
     it('does not draw a point with a significant drag', function() {
       simulateEvent('pointermove', 10, 20);
       simulateEvent('pointerdown', 10, 20);
-      simulateEvent('pointermove', 15, 20);
-      simulateEvent('pointerup', 15, 20);
+      simulateEvent('pointermove', 18, 20);
+      simulateEvent('pointerup', 18, 20);
       var features = source.getFeatures();
       expect(features).to.have.length(0);
     });
@@ -258,8 +285,8 @@ describe('ol.interaction.Draw', function() {
       // drag map
       simulateEvent('pointermove', 15, 20);
       simulateEvent('pointerdown', 15, 20);
-      simulateEvent('pointermove', 20, 20);
-      simulateEvent('pointerup', 20, 20);
+      simulateEvent('pointermove', 23, 20);
+      simulateEvent('pointerup', 23, 20);
 
       // second point
       simulateEvent('pointermove', 30, 20);