Merge pull request #1524 from oterral/vector-api

[vector-api] Add draw events

src/ol/interaction/drawinteraction.exports

@@ -1 +1,4 @@
 @exportSymbol ol.interaction.Draw
+
+@exportSymbol ol.DrawEvent
+@exportProperty ol.DrawEvent.prototype.getFeature

src/ol/interaction/drawinteraction.js

@@ -1,6 +1,8 @@
+goog.provide('ol.DrawEvent');
 goog.provide('ol.interaction.Draw');
 
 goog.require('goog.asserts');
+goog.require('goog.events.Event');
 goog.require('ol.Collection');
 goog.require('ol.Coordinate');
 goog.require('ol.Feature');
@@ -23,6 +25,44 @@ goog.require('ol.style.Stroke');
 goog.require('ol.style.Style');
 
 
+/**
+ * @enum {string}
+ */
+ol.DrawEventType = {
+  DRAWSTART: 'drawstart',
+  DRAWEND: 'drawend'
+};
+
+
+
+/**
+ * @constructor
+ * @extends {goog.events.Event}
+ * @param {ol.DrawEventType} type Type.
+ * @param {ol.Feature} feature The feature drawn.
+ */
+ol.DrawEvent = function(type, feature) {
+
+  goog.base(this, type);
+
+  /**
+   * @private
+   * @type {ol.Feature}
+   */
+  this.feature_ = feature;
+
+};
+goog.inherits(ol.DrawEvent, goog.events.Event);
+
+
+/**
+ * @return {ol.Feature} The feature drawn to which this event pertains.
+ */
+ol.DrawEvent.prototype.getFeature = function() {
+  return this.feature_;
+};
+
+
 
 /**
  * Interaction that allows drawing geometries
@@ -315,6 +355,8 @@ ol.interaction.Draw.prototype.startDrawing_ = function(event) {
   goog.asserts.assert(goog.isDef(geometry));
   this.sketchFeature_ = new ol.Feature(geometry);
   this.updateSketchFeatures_();
+  this.dispatchEvent(new ol.DrawEvent(ol.DrawEventType.DRAWSTART,
+      this.sketchFeature_));
 };
 
 
@@ -430,6 +472,8 @@ ol.interaction.Draw.prototype.finishDrawing_ = function(event) {
     goog.asserts.assertInstanceof(vectorSource, ol.source.Vector);
     vectorSource.addFeature(sketchFeature);
   }
+  this.dispatchEvent(new ol.DrawEvent(ol.DrawEventType.DRAWEND,
+      this.sketchFeature_));
 };
 
 

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

@@ -67,12 +67,14 @@ describe('ol.interaction.Draw', function() {
   });
 
   describe('drawing points', function() {
+    var draw;
 
     beforeEach(function() {
-      map.addInteraction(new ol.interaction.Draw({
+      draw = new ol.interaction.Draw({
         layer: layer,
         type: ol.geom.GeometryType.POINT
-      }));
+      });
+      map.addInteraction(draw);
     });
 
     it('draws a point on click', function() {
@@ -97,6 +99,20 @@ describe('ol.interaction.Draw', function() {
       expect(features).to.have.length(0);
     });
 
+    it('triggers draw events', function() {
+      var ds = sinon.spy();
+      var de = sinon.spy();
+      goog.events.listen(draw, ol.DrawEventType.DRAWSTART, ds);
+      goog.events.listen(draw, ol.DrawEventType.DRAWEND, de);
+      simulateEvent('mousemove', 10, 20);
+      simulateEvent('mousedown', 10, 20);
+      simulateEvent('mouseup', 10, 20);
+      simulateEvent('click', 10, 20);
+      simulateEvent('mousemove', 20, 20);
+      expect(ds).to.be.called(2);
+      expect(de).to.be.called(1);
+    });
+
   });
 
   describe('drawing multipoints', function() {
@@ -123,12 +139,14 @@ describe('ol.interaction.Draw', function() {
   });
 
   describe('drawing linestrings', function() {
+    var draw;
 
     beforeEach(function() {
-      map.addInteraction(new ol.interaction.Draw({
+      draw = new ol.interaction.Draw({
         layer: layer,
         type: ol.geom.GeometryType.LINE_STRING
-      }));
+      });
+      map.addInteraction(draw);
     });
 
     it('draws linestring with clicks, finishing on last point', function() {
@@ -189,6 +207,34 @@ describe('ol.interaction.Draw', function() {
       expect(geometry.getCoordinates()).to.eql([[10, -20], [30, -20]]);
     });
 
+    it('triggers draw events', function() {
+      var ds = sinon.spy();
+      var de = sinon.spy();
+      goog.events.listen(draw, ol.DrawEventType.DRAWSTART, ds);
+      goog.events.listen(draw, ol.DrawEventType.DRAWEND, de);
+
+      // first point
+      simulateEvent('mousemove', 10, 20);
+      simulateEvent('mousedown', 10, 20);
+      simulateEvent('mouseup', 10, 20);
+      simulateEvent('click', 10, 20);
+
+      // second point
+      simulateEvent('mousemove', 30, 20);
+      simulateEvent('mousedown', 30, 20);
+      simulateEvent('mouseup', 30, 20);
+      simulateEvent('click', 30, 20);
+
+      // finish on second point
+      simulateEvent('mousedown', 30, 20);
+      simulateEvent('mouseup', 30, 20);
+      simulateEvent('click', 30, 20);
+      simulateEvent('mousemove', 10, 20);
+
+      expect(ds).to.be.called(1);
+      expect(de).to.be.called(1);
+    });
+
   });
 
   describe('drawing multi-linestrings', function() {
@@ -228,12 +274,14 @@ describe('ol.interaction.Draw', function() {
   });
 
   describe('drawing polygons', function() {
+    var draw;
 
     beforeEach(function() {
-      map.addInteraction(new ol.interaction.Draw({
+      draw = new ol.interaction.Draw({
         layer: layer,
         type: ol.geom.GeometryType.POLYGON
-      }));
+      });
+      map.addInteraction(draw);
     });
 
     it('draws polygon with clicks, finishing on first point', function() {
@@ -272,6 +320,40 @@ describe('ol.interaction.Draw', function() {
       ]);
     });
 
+    it('triggers draw events', function() {
+      var ds = sinon.spy();
+      var de = sinon.spy();
+      goog.events.listen(draw, ol.DrawEventType.DRAWSTART, ds);
+      goog.events.listen(draw, ol.DrawEventType.DRAWEND, de);
+
+      // first point
+      simulateEvent('mousemove', 10, 20);
+      simulateEvent('mousedown', 10, 20);
+      simulateEvent('mouseup', 10, 20);
+      simulateEvent('click', 10, 20);
+
+      // second point
+      simulateEvent('mousemove', 30, 20);
+      simulateEvent('mousedown', 30, 20);
+      simulateEvent('mouseup', 30, 20);
+      simulateEvent('click', 30, 20);
+
+      // third point
+      simulateEvent('mousemove', 30, 10);
+      simulateEvent('mousedown', 30, 10);
+      simulateEvent('mouseup', 30, 10);
+      simulateEvent('click', 30, 10);
+
+      // finish on first point
+      simulateEvent('mousemove', 10, 20);
+      simulateEvent('mousedown', 10, 20);
+      simulateEvent('mouseup', 10, 20);
+      simulateEvent('click', 10, 20);
+
+      expect(ds).to.be.called(1);
+      expect(de).to.be.called(1);
+    });
+
   });
 
   describe('drawing multi-polygons', function() {