Merge pull request #3438 from pfirpfel/fix-mobilemeasurelength-sketch…

…style-2.2 Fix mobilemeasurelength sketchstyle 2.2
camptocamp · Jan 23, 2018 · a5051ec · a5051ec
2 parents cdacd17 + 364fba3
commit a5051ec
Show file tree

Hide file tree

Showing 3 changed files with 103 additions and 53 deletions.
diff --git 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">
       </div>
       <div
@@ -46,6 +47,7 @@
         gmf-mobile-measurepoint-coordinateDecimals="2"
         gmf-mobile-measurepoint-layersconfig="::mainCtrl.elevationLayersConfig"
         gmf-mobile-measurepoint-map="::mainCtrl.map"
+        gmf-mobile-measurepoint-sketchstyle="::mainCtrl.customMeasureStyle"
         gmf-mobile-measurepoint-format="'{x} / {y}'">
       </div>
       <button class="gmf-mobile-nav-trigger gmf-mobile-nav-left-trigger"

diff --git a/contribs/gmf/apps/mobile_alt/js/controller.js b/contribs/gmf/apps/mobile_alt/js/controller.js
@@ -16,6 +16,7 @@ goog.require('gmf.AbstractMobileController');
 goog.require('ngeo.proj.EPSG2056');
 /** @suppress {extraRequire} */
 goog.require('ngeo.proj.EPSG21781');
+goog.require('ol.style.Style');
 
 
 /**
@@ -58,6 +59,32 @@ app.AlternativeMobileController = function($scope, $injector) {
    */
   this.searchCoordinatesProjections = ['EPSG:21781', 'EPSG:2056', 'EPSG:4326'];
 
+
+  /**
+   * @type {ol.style.Style}
+   * @export
+   */
+  this.customMeasureStyle = new ol.style.Style({
+    fill: new ol.style.Fill({
+      color: 'rgba(255, 128, 128, 0.2)'
+    }),
+    stroke: new ol.style.Stroke({
+      color: 'rgba(255, 0, 0, 0.5)',
+      lineDash: [10, 10],
+      width: 2
+    }),
+    image: new ol.style.RegularShape({
+      stroke: new ol.style.Stroke({
+        color: 'rgba(255, 0, 0, 0.7)',
+        width: 2
+      }),
+      points: 4,
+      radius: 8,
+      radius2: 0,
+      angle: 0
+    })
+  });
+
 };
 ol.inherits(app.AlternativeMobileController, gmf.AbstractMobileController);
 

diff --git 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,65 +136,85 @@ gmf.MobileMeasureLengthController = function($scope, ngeoDecorateInteraction, $f
    * @type {ol.style.Style|Array.<ol.style.Style>|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() {
       return this.drawInteraction.getFeature() !== null;
     }
   });
 
-  /**
-   * @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);
 };