From 7f12ac90da18fbd832cb55dcebdd768022ad0707 Mon Sep 17 00:00:00 2001 From: oterral Date: Fri, 10 Jan 2014 17:18:04 +0100 Subject: [PATCH 1/2] Add draw interaction events --- src/ol/interaction/drawinteraction.exports | 3 ++ src/ol/interaction/drawinteraction.js | 44 ++++++++++++++++++++++ 2 files changed, 47 insertions(+) diff --git a/src/ol/interaction/drawinteraction.exports b/src/ol/interaction/drawinteraction.exports index 890ae0f515..a79108ff5f 100644 --- a/src/ol/interaction/drawinteraction.exports +++ b/src/ol/interaction/drawinteraction.exports @@ -1 +1,4 @@ @exportSymbol ol.interaction.Draw + +@exportSymbol ol.DrawEvent +@exportProperty ol.DrawEvent.prototype.getFeature diff --git a/src/ol/interaction/drawinteraction.js b/src/ol/interaction/drawinteraction.js index 0dbc050bd9..d8d7b0c426 100644 --- a/src/ol/interaction/drawinteraction.js +++ b/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_)); }; From 049ceb2ada2737674b066a04b7a09367d6d1e19c Mon Sep 17 00:00:00 2001 From: oterral Date: Tue, 14 Jan 2014 13:37:34 +0100 Subject: [PATCH 2/2] Add tests for draw interaction events --- .../ol/interaction/drawinteraction.test.js | 94 +++++++++++++++++-- 1 file changed, 88 insertions(+), 6 deletions(-) diff --git a/test/spec/ol/interaction/drawinteraction.test.js b/test/spec/ol/interaction/drawinteraction.test.js index 43e5568042..f921e4d0ca 100644 --- a/test/spec/ol/interaction/drawinteraction.test.js +++ b/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() {