Merge pull request #3766 from elemoine/draw-click-tolerance

Add a clickTolerance option to the Draw interaction

externs/olx.js

@@ -2365,7 +2365,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,
@@ -2382,6 +2383,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}

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.

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);