From ae8321ab30dbfbc3fc7187fd6a976b62896e1a23 Mon Sep 17 00:00:00 2001 From: "Christopher S. Case" Date: Tue, 10 Feb 2015 12:02:56 -0600 Subject: [PATCH 1/5] Added circle drawing to draw interaction. --- src/ol/interaction/drawinteraction.js | 27 +++++++++++++++++++++++---- src/ol/style/style.js | 7 +++++++ 2 files changed, 30 insertions(+), 4 deletions(-) diff --git a/src/ol/interaction/drawinteraction.js b/src/ol/interaction/drawinteraction.js index 352985e781..7455f4730b 100644 --- a/src/ol/interaction/drawinteraction.js +++ b/src/ol/interaction/drawinteraction.js @@ -13,6 +13,7 @@ goog.require('ol.MapBrowserEvent'); goog.require('ol.MapBrowserEvent.EventType'); goog.require('ol.Object'); goog.require('ol.events.condition'); +goog.require('ol.geom.Circle'); goog.require('ol.geom.GeometryType'); goog.require('ol.geom.LineString'); goog.require('ol.geom.MultiLineString'); @@ -294,6 +295,8 @@ ol.interaction.Draw.handleUpEvent_ = function(event) { if (goog.isNull(this.finishCoordinate_)) { this.startDrawing_(event); } else if (this.mode_ === ol.interaction.DrawMode.POINT || + this.mode_ === ol.interaction.DrawMode.CIRCLE && + !goog.isNull(this.finishCoordinate_) || this.atFinish_(event)) { this.finishDrawing(); } else { @@ -402,6 +405,10 @@ ol.interaction.Draw.prototype.startDrawing_ = function(event) { start.slice()])); this.sketchPolygonCoords_ = [[start.slice(), start.slice()]]; geometry = new ol.geom.Polygon(this.sketchPolygonCoords_); + } else if (this.mode_ === ol.interaction.DrawMode.CIRCLE) { + geometry = new ol.geom.Circle(start.slice(), 1000); + this.sketchLine_ = new ol.Feature(new ol.geom.LineString([start.slice(), + start.slice()])); } } goog.asserts.assert(goog.isDef(geometry)); @@ -424,7 +431,7 @@ ol.interaction.Draw.prototype.startDrawing_ = function(event) { ol.interaction.Draw.prototype.modifyDrawing_ = function(event) { var coordinate = event.coordinate; var geometry = this.sketchFeature_.getGeometry(); - var coordinates, last; + var coordinates, last, sketchLineGeom; if (this.mode_ === ol.interaction.DrawMode.POINT) { goog.asserts.assertInstanceof(geometry, ol.geom.Point); last = geometry.getCoordinates(); @@ -438,6 +445,9 @@ ol.interaction.Draw.prototype.modifyDrawing_ = function(event) { } else if (this.mode_ === ol.interaction.DrawMode.POLYGON) { goog.asserts.assertInstanceof(geometry, ol.geom.Polygon); coordinates = this.sketchPolygonCoords_[0]; + } else if (this.mode_ === ol.interaction.DrawMode.CIRCLE) { + goog.asserts.assertInstanceof(geometry, ol.geom.Circle); + coordinates = geometry.getCenter(); } if (this.atFinish_(event)) { // snap to finish @@ -453,11 +463,17 @@ ol.interaction.Draw.prototype.modifyDrawing_ = function(event) { goog.asserts.assertInstanceof(geometry, ol.geom.LineString); geometry.setCoordinates(coordinates); } else if (this.mode_ === ol.interaction.DrawMode.POLYGON) { - var sketchLineGeom = this.sketchLine_.getGeometry(); + sketchLineGeom = this.sketchLine_.getGeometry(); goog.asserts.assertInstanceof(sketchLineGeom, ol.geom.LineString); sketchLineGeom.setCoordinates(coordinates); goog.asserts.assertInstanceof(geometry, ol.geom.Polygon); geometry.setCoordinates(this.sketchPolygonCoords_); + } else if (this.mode_ === ol.interaction.DrawMode.CIRCLE) { + goog.asserts.assertInstanceof(geometry, ol.geom.Circle); + sketchLineGeom = this.sketchLine_.getGeometry(); + goog.asserts.assertInstanceof(sketchLineGeom, ol.geom.LineString); + sketchLineGeom.setCoordinates([geometry.getCenter(), coordinate]); + geometry.setRadius(sketchLineGeom.getLength()); } } this.updateSketchFeatures_(); @@ -561,7 +577,7 @@ ol.interaction.Draw.prototype.shouldStopEvent = goog.functions.FALSE; /** - * Redraw the skecth features. + * Redraw the sketch features. * @private */ ol.interaction.Draw.prototype.updateSketchFeatures_ = function() { @@ -610,6 +626,8 @@ ol.interaction.Draw.getMode_ = function(type) { } else if (type === ol.geom.GeometryType.POLYGON || type === ol.geom.GeometryType.MULTI_POLYGON) { mode = ol.interaction.DrawMode.POLYGON; + } else if (type === ol.geom.GeometryType.CIRCLE) { + mode = ol.interaction.DrawMode.CIRCLE; } goog.asserts.assert(goog.isDef(mode)); return mode; @@ -624,5 +642,6 @@ ol.interaction.Draw.getMode_ = function(type) { ol.interaction.DrawMode = { POINT: 'Point', LINE_STRING: 'LineString', - POLYGON: 'Polygon' + POLYGON: 'Polygon', + CIRCLE: 'Circle' }; diff --git a/src/ol/style/style.js b/src/ol/style/style.js index e010186eac..dc3dcb3571 100644 --- a/src/ol/style/style.js +++ b/src/ol/style/style.js @@ -309,6 +309,13 @@ ol.style.createDefaultEditingStyles = function() { styles[ol.geom.GeometryType.MULTI_LINE_STRING] = styles[ol.geom.GeometryType.LINE_STRING]; + styles[ol.geom.GeometryType.CIRCLE] = + styles[ol.geom.GeometryType.POLYGON].concat( + styles[ol.geom.GeometryType.LINE_STRING] + ); + + console.log(styles[ol.geom.GeometryType.CIRCLE]); + styles[ol.geom.GeometryType.POINT] = [ new ol.style.Style({ image: new ol.style.Circle({ From 1074c9d44aee4b733c3dfc22b09a09963ab34ec7 Mon Sep 17 00:00:00 2001 From: "Christopher S. Case" Date: Tue, 10 Feb 2015 12:03:18 -0600 Subject: [PATCH 2/5] Updated example for circle drawing. --- examples/draw-features.html | 1 + 1 file changed, 1 insertion(+) diff --git a/examples/draw-features.html b/examples/draw-features.html index 229155f863..0cf553fe94 100644 --- a/examples/draw-features.html +++ b/examples/draw-features.html @@ -40,6 +40,7 @@ + From b2ce4c19e1a31fba672aa51844fa98664065be53 Mon Sep 17 00:00:00 2001 From: "Christopher S. Case" Date: Tue, 10 Feb 2015 12:16:42 -0600 Subject: [PATCH 3/5] added unit tests. --- .../ol/interaction/drawinteraction.test.js | 53 +++++++++++++++++++ 1 file changed, 53 insertions(+) diff --git a/test/spec/ol/interaction/drawinteraction.test.js b/test/spec/ol/interaction/drawinteraction.test.js index f49a3f870a..c17ff5e024 100644 --- a/test/spec/ol/interaction/drawinteraction.test.js +++ b/test/spec/ol/interaction/drawinteraction.test.js @@ -470,6 +470,58 @@ describe('ol.interaction.Draw', function() { }); + describe('drawing circles', function() { + var draw; + + beforeEach(function() { + draw = new ol.interaction.Draw({ + source: source, + type: ol.geom.GeometryType.CIRCLE + }); + map.addInteraction(draw); + }); + + it('draws circle with clicks, finishing on second point', function() { + // first point + simulateEvent('pointermove', 10, 20); + simulateEvent('pointerdown', 10, 20); + simulateEvent('pointerup', 10, 20); + + // finish on second point + simulateEvent('pointermove', 30, 20); + simulateEvent('pointerdown', 30, 20); + simulateEvent('pointerup', 30, 20); + + var features = source.getFeatures(); + expect(features).to.have.length(1); + var geometry = features[0].getGeometry(); + expect(geometry).to.be.a(ol.geom.Circle); + expect(geometry.getCenter()).to.eql([10, -20]); + expect(geometry.getRadius()).to.eql(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('pointermove', 10, 20); + simulateEvent('pointerdown', 10, 20); + simulateEvent('pointerup', 10, 20); + + // finish on second point + simulateEvent('pointermove', 30, 20); + simulateEvent('pointerdown', 30, 20); + simulateEvent('pointerup', 30, 20); + + expect(ds).to.be.called(1); + expect(de).to.be.called(1); + }); + + }); + describe('#setActive()', function() { var interaction; @@ -595,6 +647,7 @@ goog.require('goog.style'); goog.require('ol.Map'); goog.require('ol.MapBrowserPointerEvent'); goog.require('ol.View'); +goog.require('ol.geom.Circle'); goog.require('ol.geom.GeometryType'); goog.require('ol.geom.LineString'); goog.require('ol.geom.MultiLineString'); From 15a4b7f4a60a9d9f5d61bc1de21cf7beedcbecc2 Mon Sep 17 00:00:00 2001 From: "Christopher S. Case" Date: Tue, 17 Feb 2015 08:40:25 -0600 Subject: [PATCH 4/5] Changed default radius to 0, instead of 1000. (This was debugging code.) --- src/ol/interaction/drawinteraction.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/ol/interaction/drawinteraction.js b/src/ol/interaction/drawinteraction.js index 7455f4730b..dd40114753 100644 --- a/src/ol/interaction/drawinteraction.js +++ b/src/ol/interaction/drawinteraction.js @@ -406,7 +406,7 @@ ol.interaction.Draw.prototype.startDrawing_ = function(event) { this.sketchPolygonCoords_ = [[start.slice(), start.slice()]]; geometry = new ol.geom.Polygon(this.sketchPolygonCoords_); } else if (this.mode_ === ol.interaction.DrawMode.CIRCLE) { - geometry = new ol.geom.Circle(start.slice(), 1000); + geometry = new ol.geom.Circle(start.slice(), 0); this.sketchLine_ = new ol.Feature(new ol.geom.LineString([start.slice(), start.slice()])); } From 1fb932f7bbafbd29643385dd23341e06e9f39791 Mon Sep 17 00:00:00 2001 From: "Christopher S. Case" Date: Wed, 11 Mar 2015 10:09:58 -0500 Subject: [PATCH 5/5] Removed lurking console.log --- src/ol/style/style.js | 1 - 1 file changed, 1 deletion(-) diff --git a/src/ol/style/style.js b/src/ol/style/style.js index dc3dcb3571..23bd55d93f 100644 --- a/src/ol/style/style.js +++ b/src/ol/style/style.js @@ -314,7 +314,6 @@ ol.style.createDefaultEditingStyles = function() { styles[ol.geom.GeometryType.LINE_STRING] ); - console.log(styles[ol.geom.GeometryType.CIRCLE]); styles[ol.geom.GeometryType.POINT] = [ new ol.style.Style({