Merge pull request #5345 from camptocamp/gsgmf-1031-draw-feature-defi…

…ned-length

Support defining size of features in GMF draw tool

contribs/gmf/src/controllers/desktop.scss

@@ -482,6 +482,11 @@ hr.gmf-drawfeature-separator {
   margin-top: $app-margin;
 }
 
+gmf-drawfeatureoptions label,
+.gmf-drawfeatureoptions-help-rectangle {
+  margin: 1rem 0 0 0;
+}
+
 
 /**
  * NGEO DrawFeature directive & map tooltips

contribs/gmf/src/drawing/drawFeatureComponent.html

@@ -3,6 +3,7 @@
     class="btn-group"
     ngeo-drawfeature-active="efCtrl.drawActive"
     ngeo-drawfeature-map="efCtrl.map"
+    ngeo-drawfeature-uid="efCtrl.ngeoDrawFeatureUid"
     ngeo-drawfeature-showmeasure="efCtrl.showMeasure">
   <a
     data-toggle="tooltip"
@@ -76,40 +77,68 @@
 
   <hr class="gmf-drawfeature-separator" ng-show="efCtrl.getFeaturesArray().length > 0">
   <div ng-switch-when="null">
-    <div ng-show="efCtrl.getFeaturesArray().length > 0">
-      <div class="ngeo-drawfeature-actionbuttons">
-        <button
-            type="button"
-            data-toggle="dropdown"
-            aria-haspopup="true"
-            aria-expanded="false"
-            ngeo-exportfeatures
-            ngeo-exportfeatures-features="efCtrl.features"
-            class="btn btn-link btn-sm dropdown-toggle">
-          <span class="fa fa-file-export"></span>
-          {{'Export' | translate}}
-        </button>
-        <button
-            ng-click="efCtrl.clearFeatures()"
-            class="btn btn-link btn-sm">
-          <span class="fa fa-trash"></span>
-          {{'Delete All' | translate}}
-        </button>
-      </div>
 
-      <div class="gmf-eol"></div>
+    <div ng-switch="efCtrl.drawActive">
 
-      <div class="gmf-drawfeature-featurelist list-group list-group-sm">
-        <button
-            role="button"
-            class="list-group-item"
-            ng-repeat="feature in efCtrl.getFeaturesArray()"
-            ng-click="efCtrl.selectFeatureFromList(feature);">
-          {{ feature.get(efCtrl.nameProperty) }}
-        </button>
+      <div ng-switch-when="true">
+        <!-- adube! -->
+        <gmf-drawfeatureoptions
+            ng-if="efCtrl.measureLength && efCtrl.measureLength.active"
+            measure-length="::efCtrl.measureLength"
+            map="::efCtrl.map">
+        </gmf-drawfeatureoptions>
+        <gmf-drawfeatureoptions
+            ng-if="efCtrl.measureArea && efCtrl.measureArea.active"
+            measure-area="::efCtrl.measureArea"
+            map="::efCtrl.map">
+        </gmf-drawfeatureoptions>
+        <gmf-drawfeatureoptions
+            ng-if="efCtrl.measureAzimut && efCtrl.measureAzimut.active"
+            measure-azimut="::efCtrl.measureAzimut"
+            map="::efCtrl.map">
+        </gmf-drawfeatureoptions>
+        <gmf-drawfeatureoptions
+            ng-if="efCtrl.drawRectangle && efCtrl.drawRectangle.active"
+            draw-rectangle="::efCtrl.drawRectangle"
+            map="::efCtrl.map">
+        </gmf-drawfeatureoptions>
       </div>
-    </div>
 
+      <div
+        ng-show="efCtrl.getFeaturesArray().length > 0"
+        ng-switch-default
+      >
+        <div class="ngeo-drawfeature-actionbuttons">
+          <button
+              type="button"
+              data-toggle="dropdown"
+              aria-haspopup="true"
+              aria-expanded="false"
+              ngeo-exportfeatures
+              ngeo-exportfeatures-features="efCtrl.features"
+              class="btn btn-link btn-sm dropdown-toggle">
+            <span class="fa fa-file-export"></span>
+            {{'Export' | translate}}
+          </button>
+          <button
+              ng-click="efCtrl.clearFeatures()"
+              class="btn btn-link btn-sm">
+            <span class="fa fa-trash"></span>
+            {{'Delete All' | translate}}
+          </button>
+        </div>
+        <div class="gmf-eol"></div>
+        <div class="gmf-drawfeature-featurelist list-group list-group-sm">
+          <button
+              role="button"
+              class="list-group-item"
+              ng-repeat="feature in efCtrl.getFeaturesArray()"
+              ng-click="efCtrl.selectFeatureFromList(feature);">
+            {{ feature.get(efCtrl.nameProperty) }}
+          </button>
+        </div>
+      </div>
+    </div>
   </div>
 
   <div ng-switch-default>

contribs/gmf/src/drawing/drawFeatureComponent.js

@@ -1,4 +1,5 @@
 import angular from 'angular';
+import gmfDrawingDrawFeatureOptionsComponent from 'gmf/drawing/drawFeatureOptionsComponent.js';
 import gmfDrawingFeatureStyleComponent from 'gmf/drawing/featureStyleComponent.js';
 
 import ngeoGeometryType from 'ngeo/GeometryType.js';
@@ -36,6 +37,7 @@ import 'bootstrap/js/src/dropdown.js';
  * @hidden
  */
 const module = angular.module('GmfDrawFeatureComponent', [
+  gmfDrawingDrawFeatureOptionsComponent.name,
   gmfDrawingFeatureStyleComponent.name,
   ngeoEditingExportfeaturesComponent.name,
   ngeoMiscBtnComponent.name,
@@ -129,6 +131,11 @@ function Controller($scope, $timeout, gettextCatalog, ngeoFeatureHelper, ngeoFea
    */
   this.drawToolActivate = new ngeoMiscToolActivate(this, 'drawActive');
 
+  /**
+   * @type {string}
+   */
+  this.ngeoDrawFeatureUid = 'gmf-drawfeature';
+
   /**
    * @type {boolean}
    */
@@ -272,6 +279,12 @@ function Controller($scope, $timeout, gettextCatalog, ngeoFeatureHelper, ngeoFea
    */
   this.listenerKeys_ = [];
 
+  /**
+   * @type {import("ol/events.js").EventsKey[]}
+   * @private
+   */
+  this.mainListenerKeys_ = [];
+
   /**
    * @type {import("ol/events.js").EventsKey[]}
    * @private
@@ -340,9 +353,71 @@ function Controller($scope, $timeout, gettextCatalog, ngeoFeatureHelper, ngeoFea
    * @private
    */
   this.gettextCatalog_ = gettextCatalog;
+
+  // --- Draw Interactions ---
+  // Automatically set by listening interactions added to the map,
+  // using the uid set...
+
+  /**
+   * @type {?import("ol/interaction/Draw.js").default}
+   */
+  this.drawPoint = null;
+
+  /**
+   * @type {?import("ngeo/interaction/MeasureLength.js").default}
+   */
+  this.measureLength = null;
+
+  /**
+   * @type {?import("ngeo/interaction/MeasureArea.js").default}
+   */
+  this.measureArea = null;
+
+  /**
+   * @type {?import("ngeo/interaction/MeasureAzimut.js").default}
+   */
+  this.measureAzimut = null;
+
+  /**
+   * @type {?import("ol/interaction/Draw.js").default}
+   */
+  this.drawRectangle = null;
+
+  /**
+   * @type {?import("ol/interaction/Draw.js").default}
+   */
+  this.drawText = null;
 }
 
 
+/**
+ * Called upon initialization of the controller.
+ */
+Controller.prototype.$onInit = function() {
+  if (!this.map) {
+    throw new Error('Missing map');
+  }
+
+  this.mainListenerKeys_.push(
+    listen(
+      this.map.getInteractions(),
+      'add',
+      this.handleMapInteractionsAdd_,
+      this
+    )
+  );
+};
+
+
+/**
+ * Called upon destruction of the controller.
+ */
+Controller.prototype.$onDestroy = function() {
+  this.mainListenerKeys_.forEach(unlistenByKey);
+  this.mainListenerKeys_.length = 0;
+};
+
+
 /**
  * Close menu, if it exists.
  * @private
@@ -781,6 +856,50 @@ Controller.prototype.handleRotateEnd_ = function(evt) {
 };
 
 
+/**
+ * @param {Event|import('ol/events/Event.js').default} evt Event.
+ * @private
+ */
+Controller.prototype.handleMapInteractionsAdd_ = function(evt) {
+  if (!(evt instanceof CollectionEvent)) {
+    return;
+  }
+
+  // If the added interaction is a draw one registered with a unique
+  // id, bind it to the according property.
+  const interaction = /** @type {import('ol/interaction/Interaction.js').default} */ (evt.element);
+  const drawFeatureUid = interaction.get('ngeo-interaction-draw-uid');
+
+  switch (drawFeatureUid) {
+    case `${this.ngeoDrawFeatureUid}-point`:
+      this.drawPoint =
+        /** @type {import("ol/interaction/Draw.js").default} */ (interaction);
+      break;
+    case `${this.ngeoDrawFeatureUid}-length`:
+      this.measureLength =
+        /** @type {import("ngeo/interaction/MeasureLength.js").default} */ (interaction);
+      break;
+    case `${this.ngeoDrawFeatureUid}-area`:
+      this.measureArea =
+        /** @type {import("ngeo/interaction/MeasureArea.js").default} */ (interaction);
+      break;
+    case `${this.ngeoDrawFeatureUid}-azimut`:
+      this.measureAzimut =
+        /** @type {import("ngeo/interaction/MeasureAzimut.js").default} */ (interaction);
+      break;
+    case `${this.ngeoDrawFeatureUid}-rectangle`:
+      this.drawRectangle =
+        /** @type {import("ol/interaction/Draw.js").default} */ (interaction);
+      break;
+    case `${this.ngeoDrawFeatureUid}-text`:
+      this.drawText =
+        /** @type {import("ol/interaction/Draw.js").default} */ (interaction);
+      break;
+    default:
+      break;
+  }
+};
+
 module.controller('GmfDrawfeatureController', Controller);
 
 

contribs/gmf/src/drawing/drawFeatureOptionsComponent.html

@@ -0,0 +1,41 @@
+<div ng-if="$ctrl.drawRectangle">
+  <label>{{'Height:' | translate}}</label>
+  <div class="input-group">
+    <input
+        class="form-control"
+        min="1"
+        ng-model="$ctrl.height"
+        type="number">
+    </input>
+    <select
+        class="form-control"
+        ng-model="$ctrl.heightUnits">
+      <option value="m">{{'m (meters)' | translate}}</option>
+      <option value="km">{{'km (kilometers)' | translate}}</option>
+    </select>
+  </div>
+</div>
+
+<div ng-switch="::(!!$ctrl.measureAzimut)">
+  <label ng-switch-when="true">{{'Radius:' | translate}}</label>
+  <label ng-switch-default>{{'Length:' | translate}}</label>
+</div>
+<div class="input-group">
+  <input
+      class="form-control"
+      min="1"
+      ng-model="$ctrl.length"
+      type="number">
+  </input>
+  <select
+      class="form-control"
+      ng-model="$ctrl.lengthUnits">
+    <option value="m">{{'m (meters)' | translate}}</option>
+    <option value="km">{{'km (kilometers)' | translate}}</option>
+  </select>
+</div>
+
+<p
+    class="gmf-drawfeatureoptions-help-rectangle"
+    ng-if="$ctrl.drawRectangle"
+>{{ 'Note: drawing a rectangle of a specific size requires both height and length to be defined.' | translate}}</p>