From bf4c5082ef89cee44fb6f89492c633c304d9a089 Mon Sep 17 00:00:00 2001 From: Michael Kuenzli Date: Mon, 22 Jan 2018 14:49:27 +0100 Subject: [PATCH 1/2] Move initialization into the appropriate function --- .../gmf/src/directives/mobilemeasurelength.js | 127 ++++++++++-------- 1 file changed, 74 insertions(+), 53 deletions(-) diff --git a/contribs/gmf/src/directives/mobilemeasurelength.js b/contribs/gmf/src/directives/mobilemeasurelength.js index 34d129e7e94b..4c30acadf43f 100644 --- a/contribs/gmf/src/directives/mobilemeasurelength.js +++ b/contribs/gmf/src/directives/mobilemeasurelength.js @@ -92,6 +92,24 @@ gmf.module.directive('gmfMobileMeasurelength', */ gmf.MobileMeasureLengthController = function($scope, ngeoDecorateInteraction, $filter) { + /** + * @type {angular.Scope} + * @private + */ + this.scope_ = $scope; + + /** + * @type {ngeo.DecorateInteraction} + * @private + */ + this.ngeoDecorateInteraction_ = ngeoDecorateInteraction; + + /** + * @type {angular.$filter} + * @private + */ + this.filter_ = $filter; + /** * @type {ol.Map} * @export @@ -104,7 +122,7 @@ gmf.MobileMeasureLengthController = function($scope, ngeoDecorateInteraction, $f */ this.active; - $scope.$watch(() => this.active, (newVal) => { + this.scope_.$watch(() => this.active, (newVal) => { this.measure.setActive(newVal); }); @@ -118,52 +136,78 @@ gmf.MobileMeasureLengthController = function($scope, ngeoDecorateInteraction, $f * @type {ol.style.Style|Array.|ol.StyleFunction} * @export */ - this.sketchStyle; - - if (this.sketchStyle === undefined) { - this.sketchStyle = new ol.style.Style({ - fill: new ol.style.Fill({ - color: 'rgba(255, 255, 255, 0.2)' - }), + this.sketchStyle = new ol.style.Style({ + fill: new ol.style.Fill({ + color: 'rgba(255, 255, 255, 0.2)' + }), + stroke: new ol.style.Stroke({ + color: 'rgba(0, 0, 0, 0.5)', + lineDash: [10, 10], + width: 2 + }), + image: new ol.style.RegularShape({ stroke: new ol.style.Stroke({ - color: 'rgba(0, 0, 0, 0.5)', - lineDash: [10, 10], + color: 'rgba(0, 0, 0, 0.7)', width: 2 }), - image: new ol.style.RegularShape({ - stroke: new ol.style.Stroke({ - color: 'rgba(0, 0, 0, 0.7)', - width: 2 - }), - points: 4, - radius: 8, - radius2: 0, - angle: 0 - }) - }); - } + points: 4, + radius: 8, + radius2: 0, + angle: 0 + }) + }); /** * @type {ngeo.interaction.MeasureLengthMobile} * @export */ - this.measure = new ngeo.interaction.MeasureLengthMobile($filter('ngeoUnitPrefix'), { - precision: this.precision, - sketchStyle: this.sketchStyle - }); + this.measure; - this.measure.setActive(this.active); - ngeoDecorateInteraction(this.measure); /** * @type {ngeo.interaction.MobileDraw} * @export */ + this.drawInteraction; + + /** + * @type {boolean} + * @export + */ + this.dirty = false; + + /** + * @type {boolean} + * @export + */ + this.drawing = false; + + /** + * @type {boolean} + * @export + */ + this.valid = false; +}; + +/** + * Initialise the controller. + */ +gmf.MobileMeasureLengthController.prototype.init = function() { + + this.measure = new ngeo.interaction.MeasureLengthMobile(this.filter_('ngeoUnitPrefix'), { + precision: this.precision, + sketchStyle: this.sketchStyle + }); + + this.measure.setActive(this.active); + this.ngeoDecorateInteraction_(this.measure); + + this.drawInteraction = /** @type {ngeo.interaction.MobileDraw} */ ( this.measure.getDrawInteraction()); const drawInteraction = this.drawInteraction; - ngeoDecorateInteraction(drawInteraction); + this.ngeoDecorateInteraction_(drawInteraction); Object.defineProperty(this, 'hasPoints', { get() { @@ -171,12 +215,6 @@ gmf.MobileMeasureLengthController = function($scope, ngeoDecorateInteraction, $f } }); - /** - * @type {boolean} - * @export - */ - this.dirty = false; - ol.events.listen( drawInteraction, ol.Object.getChangeEventType( @@ -188,18 +226,12 @@ gmf.MobileMeasureLengthController = function($scope, ngeoDecorateInteraction, $f // only need to do this when dirty, as going to "no being dirty" // is made by a click on a button where Angular is within scope if (this.dirty) { - $scope.$apply(); + this.scope_.$apply(); } }, this ); - /** - * @type {boolean} - * @export - */ - this.drawing = false; - ol.events.listen( drawInteraction, ol.Object.getChangeEventType( @@ -210,12 +242,6 @@ gmf.MobileMeasureLengthController = function($scope, ngeoDecorateInteraction, $f this ); - /** - * @type {boolean} - * @export - */ - this.valid = false; - ol.events.listen( drawInteraction, ol.Object.getChangeEventType( @@ -225,12 +251,7 @@ gmf.MobileMeasureLengthController = function($scope, ngeoDecorateInteraction, $f }, this ); -}; -/** - * Initialise the controller. - */ -gmf.MobileMeasureLengthController.prototype.init = function() { this.map.addInteraction(this.measure); }; From 364fba350734b5916f27b2d57597b066521dafed Mon Sep 17 00:00:00 2001 From: Michael Kuenzli Date: Mon, 22 Jan 2018 14:52:35 +0100 Subject: [PATCH 2/2] Extend example by custom measure styles --- contribs/gmf/apps/mobile_alt/index.html | 2 ++ contribs/gmf/apps/mobile_alt/js/controller.js | 27 +++++++++++++++++++ 2 files changed, 29 insertions(+) diff --git a/contribs/gmf/apps/mobile_alt/index.html b/contribs/gmf/apps/mobile_alt/index.html index 9ea2536d93db..3a29352980eb 100644 --- a/contribs/gmf/apps/mobile_alt/index.html +++ b/contribs/gmf/apps/mobile_alt/index.html @@ -37,6 +37,7 @@ gmf-mobile-measurelength gmf-mobile-measurelength-active="mainCtrl.measureLengthActive" gmf-mobile-measurelength-precision="2" + gmf-mobile-measurelength-sketchstyle="::mainCtrl.customMeasureStyle" gmf-mobile-measurelength-map="::mainCtrl.map">