Create vertex on boundary single click

changelog/upgrade-notes.md

@@ -97,6 +97,10 @@ The replacement of `ol.tilegrid.Zoomify` is a plain `ol.tilegrid.TileGrid`, conf
 * This combines two previously distinct functions into one more flexible call which takes either a geometry or an extent.
 * Rename all calls to `fitExtent` and `fitGeometry` to `fit`.
 
+#### Change to `ol.interaction.Modify`
+
+When single clicking a line or boundary within the `pixelTolerance`, a vertex is now created.
+
 ### v3.6.0
 
 #### `ol.interaction.Draw` changes

src/ol/interaction/modifyinteraction.js

@@ -141,6 +141,14 @@ ol.interaction.Modify = function(options) {
    */
   this.lastPixel_ = [0, 0];
 
+  /**
+   * Keep track of the last inserted pixel location to avoid
+   * unintentional deletion.
+   * @type {ol.Pixel}
+   * @private
+   */
+  this.lastNewVertexPixel_ = [NaN, NaN];
+
   /**
    * Segment RTree for each layer
    * @type {Object.<*, ol.structs.RBush>}
@@ -618,10 +626,15 @@ ol.interaction.Modify.handleEvent = function(mapBrowserEvent) {
   }
   if (!goog.isNull(this.vertexFeature_) &&
       this.deleteCondition_(mapBrowserEvent)) {
-    var geometry = this.vertexFeature_.getGeometry();
+    if (!(this.lastNewVertexPixel_[0] === this.lastPixel_[0] &&
-    goog.asserts.assertInstanceof(geometry, ol.geom.Point,
+        this.lastNewVertexPixel_[1] === this.lastPixel_[1])) {
-        'geometry should be an ol.geom.Point');
+      var geometry = this.vertexFeature_.getGeometry();
-    handled = this.removeVertex_();
+      goog.asserts.assertInstanceof(geometry, ol.geom.Point,
+          'geometry should be an ol.geom.Point');
+      handled = this.removeVertex_();
+    } else {
+      handled = true;
+    }
   }
   return ol.interaction.Pointer.handleEvent.call(this, mapBrowserEvent) &&
       !handled;
@@ -776,6 +789,7 @@ ol.interaction.Modify.prototype.insertVertex_ = function(segmentData, vertex) {
   rTree.insert(ol.extent.boundingExtent(newSegmentData2.segment),
       newSegmentData2);
   this.dragSegments_.push([newSegmentData2, 0]);
+  this.lastNewVertexPixel_ = this.lastPixel_;
 };
 
 

test/spec/ol/interaction/modifyinteraction.test.js

@@ -18,7 +18,8 @@ describe('ol.interaction.Modify', function() {
     style.height = height + 'px';
     document.body.appendChild(target);
 
-    var geometry = new ol.geom.Polygon([[[0, 0], [0, 40], [40, 40], [40, 0]]]);
+    var geometry = new ol.geom.Polygon([
+      [[0, 0], [10, 20], [0, 40], [40, 40], [40, 0]]]);
 
     features = [];
     features.push(
@@ -94,7 +95,7 @@ describe('ol.interaction.Modify', function() {
 
   describe('boundary modification', function() {
 
-    it('clicking without drag should not add vertex but +r2', function() {
+    it('clicking vertex should delete it and +r1', function() {
       var modify = new ol.interaction.Modify({
         features: new ol.Collection(features)
       });
@@ -103,18 +104,19 @@ describe('ol.interaction.Modify', function() {
       var feature = features[0];
 
       expect(feature.getGeometry().getRevision()).to.equal(1);
-      expect(feature.getGeometry().getCoordinates()[0]).to.have.length(4);
+      expect(feature.getGeometry().getCoordinates()[0]).to.have.length(5);
 
-      simulateEvent('pointerdown', 0, -20, false, 0);
+      simulateEvent('pointermove', 10, -20, false, 0);
-      simulateEvent('pointerup', 0, -20, false, 0);
+      simulateEvent('pointerdown', 10, -20, false, 0);
-      simulateEvent('click', 0, -20, false, 0);
+      simulateEvent('pointerup', 10, -20, false, 0);
-      simulateEvent('singleclick', 0, -20, false, 0);
+      simulateEvent('click', 10, -20, false, 0);
+      simulateEvent('singleclick', 10, -20, false, 0);
 
-      expect(feature.getGeometry().getRevision()).to.equal(3);
+      expect(feature.getGeometry().getRevision()).to.equal(2);
       expect(feature.getGeometry().getCoordinates()[0]).to.have.length(4);
     });
 
-    it('clicking with drag should add vertex but +r3', function() {
+    it('single clicking boundary should add vertex and +r1', function() {
       var modify = new ol.interaction.Modify({
         features: new ol.Collection(features)
       });
@@ -123,14 +125,36 @@ describe('ol.interaction.Modify', function() {
       var feature = features[0];
 
       expect(feature.getGeometry().getRevision()).to.equal(1);
-      expect(feature.getGeometry().getCoordinates()[0]).to.have.length(4);
+      expect(feature.getGeometry().getCoordinates()[0]).to.have.length(5);
 
-      simulateEvent('pointerdown', 0, -20, false, 0);
+      simulateEvent('pointermove', 40, -20, false, 0);
-      simulateEvent('pointerdrag', 20, -20, false, 0);
+      simulateEvent('pointerdown', 40, -20, false, 0);
-      simulateEvent('pointerup', 20, -20, false, 0);
+      simulateEvent('pointerup', 40, -20, false, 0);
+      simulateEvent('click', 40, -20, false, 0);
+      simulateEvent('singleclick', 40, -20, false, 0);
+
+      expect(feature.getGeometry().getRevision()).to.equal(2);
+      expect(feature.getGeometry().getCoordinates()[0]).to.have.length(6);
+    });
+
+    it('clicking with drag should add vertex and +r3', function() {
+      var modify = new ol.interaction.Modify({
+        features: new ol.Collection(features)
+      });
+      map.addInteraction(modify);
+
+      var feature = features[0];
+
+      expect(feature.getGeometry().getRevision()).to.equal(1);
+      expect(feature.getGeometry().getCoordinates()[0]).to.have.length(5);
+
+      simulateEvent('pointermove', 40, -20, false, 0);
+      simulateEvent('pointerdown', 40, -20, false, 0);
+      simulateEvent('pointerdrag', 30, -20, false, 0);
+      simulateEvent('pointerup', 30, -20, false, 0);
 
       expect(feature.getGeometry().getRevision()).to.equal(4);
-      expect(feature.getGeometry().getCoordinates()[0]).to.have.length(5);
+      expect(feature.getGeometry().getCoordinates()[0]).to.have.length(6);
     });
   });