Add condition to draw interaction

externs/olx.js

@@ -1647,7 +1647,8 @@ olx.interaction.DragZoomOptions.prototype.style;
  *     type: ol.geom.GeometryType,
  *     minPointsPerRing: (number|undefined),
  *     style: (ol.style.Style|Array.<ol.style.Style>|ol.feature.StyleFunction|undefined),
- *     geometryName: (string|undefined)}}
+ *     geometryName: (string|undefined),
+ *     condition: (ol.events.ConditionType|undefined)}}
  * @todo api
  */
 olx.interaction.DrawOptions;
@@ -1704,6 +1705,15 @@ olx.interaction.DrawOptions.prototype.style;
 olx.interaction.DrawOptions.prototype.geometryName;
 
 
+/**
+ * A conditional modifier (e.g. shift key) that determines if the interaction is
+ * active (i.e. a click adds a vertex) or not. By default, a click with no modifier
+ * keys adds a vertex.
+ * @type {ol.events.ConditionType|undefined}
+ */
+olx.interaction.DrawOptions.prototype.condition;
+
+
 /**
  * @typedef {{condition: (ol.events.ConditionType|undefined),
  *     pixelDelta: (number|undefined)}}

src/ol/interaction/drawinteraction.js

@@ -10,6 +10,7 @@ goog.require('ol.FeatureOverlay');
 goog.require('ol.Map');
 goog.require('ol.MapBrowserEvent');
 goog.require('ol.MapBrowserEvent.EventType');
+goog.require('ol.events.condition');
 goog.require('ol.feature');
 goog.require('ol.geom.GeometryType');
 goog.require('ol.geom.LineString');
@@ -190,6 +191,13 @@ ol.interaction.Draw = function(options) {
    */
   this.geometryName_ = options.geometryName;
 
+  /**
+   * @private
+   * @type {ol.events.ConditionType}
+   */
+  this.condition_ = goog.isDef(options.condition) ?
+      options.condition : ol.events.condition.noModifierKeys;
+
 };
 goog.inherits(ol.interaction.Draw, ol.interaction.Pointer);
 
@@ -242,8 +250,12 @@ ol.interaction.Draw.prototype.handleMapBrowserEvent = function(event) {
  * @return {boolean} Pass the event to other interactions.
  */
 ol.interaction.Draw.prototype.handlePointerDown = function(event) {
-  this.downPx_ = event.pixel;
-  return true;
+  if (this.condition_(event)) {
+    this.downPx_ = event.pixel;
+    return true;
+  } else {
+    return false;
+  }
 };
 
 

test/spec/ol/interaction/drawinteraction.test.js

@@ -42,16 +42,19 @@ describe('ol.interaction.Draw', function() {
    * @param {string} type Event type.
    * @param {number} x Horizontal offset from map center.
    * @param {number} y Vertical offset from map center.
+   * @param {boolean=} opt_shiftKey Shift key is pressed.
    */
-  function simulateEvent(type, x, y) {
+  function simulateEvent(type, x, y, opt_shiftKey) {
     var viewport = map.getViewport();
     // calculated in case body has top < 0 (test runner with small window)
     var position = goog.style.getClientPosition(viewport);
+    var shiftKey = goog.isDef(opt_shiftKey) ? opt_shiftKey : false;
     var event = new ol.MapBrowserPointerEvent(type, map,
         new ol.pointer.PointerEvent(type,
             new goog.events.BrowserEvent({
               clientX: position.x + x + width / 2,
-              clientY: position.y + y + height / 2
+              clientY: position.y + y + height / 2,
+              shiftKey: shiftKey
             })));
     map.handleMapBrowserEvent(event);
   }
@@ -122,6 +125,14 @@ describe('ol.interaction.Draw', function() {
       expect(features).to.have.length(0);
     });
 
+    it('does not draw a point when modifier key is pressed', function() {
+      simulateEvent('pointermove', 10, 20);
+      simulateEvent('pointerdown', 10, 20, true);
+      simulateEvent('pointerup', 10, 20);
+      var features = source.getFeatures();
+      expect(features).to.have.length(0);
+    });
+
     it('triggers draw events', function() {
       var ds = sinon.spy();
       var de = sinon.spy();
@@ -134,7 +145,6 @@ describe('ol.interaction.Draw', function() {
       expect(ds).to.be.called(2);
       expect(de).to.be.called(1);
     });
-
   });
 
   describe('drawing multipoints', function() {