GSEPF-150: Add orthogonality to line drawing

contribs/gmf/apps/desktop/Controller.js

@@ -16,6 +16,7 @@ import ngeoProjEPSG21781 from 'ngeo/proj/EPSG21781.js';
 import * as olBase from 'ol/index.js';
 import Raven from 'raven-js/src/raven.js';
 import RavenPluginsAngular from 'raven-js/plugins/angular.js';
+import olSourceVector from 'ol/source/Vector.js';
 
 if (!window.requestAnimationFrame) {
   alert('Your browser is not supported, please update it or use another one. You will be redirected.\n\n'
@@ -123,6 +124,9 @@ exports.module = angular.module('Appdesktop', [
   gmfControllersAbstractDesktopController.module.name,
 ]);
 
+exports.module.value('ngeoSnappingTolerance', 20);
+exports.module.value('ngeoSnappingSource', new olSourceVector());
+
 exports.module.value('gmfContextualdatacontentTemplateUrl', 'gmf/contextualdata');
 exports.module.run(/* @ngInject */ ($templateCache) => {
   $templateCache.put('gmf/contextualdata', require('./contextualdata.html'));

contribs/gmf/src/controllers/AbstractDesktopController.js

@@ -254,5 +254,4 @@ exports.module.value('ngeoQueryOptions', {
 exports.module.value('ngeoMeasurePrecision', 3);
 exports.module.value('ngeoMeasureDecimals', 0);
 
-
 export default exports;

contribs/gmf/src/editing/Snapping.js

@@ -9,7 +9,9 @@ import * as olBase from 'ol/index.js';
 import * as olEvents from 'ol/events.js';
 import olCollection from 'ol/Collection.js';
 import olFormatWFS from 'ol/format/WFS.js';
-import olInteractionSnap from 'ol/interaction/Snap.js';
+import olInteractionSnap, {handleEvent as snapHandleEvent} from 'ol/interaction/Snap.js';
+import {handleEvent as handlePointerEvent} from 'ol/interaction/Pointer.js';
+
 
 /**
  * The snapping service of GMF. Responsible of collecting the treeCtrls that
@@ -26,14 +28,15 @@ import olInteractionSnap from 'ol/interaction/Snap.js';
  * @param {angular.$http} $http Angular $http service.
  * @param {angular.$q} $q The Angular $q service.
  * @param {!angular.Scope} $rootScope Angular rootScope.
+ * @param {!angular.$injector} $injector Angular injector.
  * @param {angular.$timeout} $timeout Angular timeout service.
  * @param {gmf.theme.Themes} gmfThemes The gmf Themes service.
  * @param {gmf.layertree.TreeManager} gmfTreeManager The gmf TreeManager service.
  * @ngInject
  * @ngdoc service
  * @ngname gmfSnapping
  */
-const exports = function($http, $q, $rootScope, $timeout, gmfThemes,
+const exports = function($http, $q, $rootScope, $injector, $timeout, gmfThemes,
   gmfTreeManager) {
 
   // === Injected services ===
@@ -62,6 +65,12 @@ const exports = function($http, $q, $rootScope, $timeout, gmfThemes,
    */
   this.timeout_ = $timeout;
 
+  /**
+   * @type {!angular.$injector}
+   * @private
+   */
+  this.injector_ = $injector;
+
   /**
    * @type {gmf.theme.Themes}
    * @private
@@ -113,13 +122,39 @@ const exports = function($http, $q, $rootScope, $timeout, gmfThemes,
    */
   this.ogcServers_ = null;
 
+  /**
+   * @type {ol.source.Vector | undefined}
+   * @private
+   */
+  this.ngeoSnappingSource_ = this.injector_.get('ngeoSnappingSource') || undefined;
+
 };
 
 
+class CustomSnap extends olInteractionSnap {
+  constructor(options) {
+    super(options);
+    this.modifierPressed = false;
+    document.body.addEventListener('keydown', (evt) => {
+      this.modifierPressed = evt.keyCode === 17; // Ctrl key
+    });
+    document.body.addEventListener('keyup', () => {
+      this.modifierPressed = false;
+    });
+    this.handleEvent = (evt) => { // horrible hack
+      if (!this.modifierPressed) {
+        return snapHandleEvent.call(this, evt);
+      }
+      return handlePointerEvent.call(this, evt);
+    };
+  }
+}
+
+
 /**
  * In order for a `ol.interaction.Snap` to work properly, it has to be added
  * to the map after any draw interactions or other kinds of interactions that
- * ineracts with features on the map.
+ * interacts with features on the map.
  *
  * This method can be called to make sure the Snap interactions are on top.
  *
@@ -131,7 +166,7 @@ exports.prototype.ensureSnapInteractionsOnTop = function() {
 
   let item;
   for (const uid in this.cache_) {
-    item = this.cache_[+uid];
+    item = this.cache_[uid];
     if (item.active) {
       googAsserts.assert(item.interaction);
       map.removeInteraction(item.interaction);
@@ -258,11 +293,11 @@ exports.prototype.registerTreeCtrl_ = function(treeCtrl) {
  */
 exports.prototype.unregisterAllTreeCtrl_ = function() {
   for (const uid in this.cache_) {
-    const item = this.cache_[+uid];
+    const item = this.cache_[uid];
     if (item) {
       item.stateWatcherUnregister();
       this.deactivateItem_(item);
-      delete this.cache_[+uid];
+      delete this.cache_[uid];
     }
   }
 };
@@ -384,7 +419,7 @@ exports.prototype.activateItem_ = function(item) {
   const map = this.map_;
   googAsserts.assert(map);
 
-  const interaction = new olInteractionSnap({
+  const interaction = new CustomSnap({
     edge: item.snappingConfig.edge,
     features: item.features,
     pixelTolerance: item.snappingConfig.tolerance,
@@ -431,6 +466,7 @@ exports.prototype.deactivateItem_ = function(item) {
   }
 
   item.active = false;
+  this.refreshSnappingSource_();
 };
 
 
@@ -441,7 +477,7 @@ exports.prototype.loadAllItems_ = function() {
   this.mapViewChangePromise_ = null;
   let item;
   for (const uid in this.cache_) {
-    item = this.cache_[+uid];
+    item = this.cache_[uid];
     if (item.active) {
       this.loadItemFeatures_(item);
     }
@@ -514,6 +550,7 @@ exports.prototype.loadItemFeatures_ = function(item) {
       const readFeatures = new olFormatWFS().readFeatures(response.data);
       if (readFeatures) {
         item.features.extend(readFeatures);
+        this.refreshSnappingSource_();
       }
     });
 
@@ -535,6 +572,18 @@ exports.prototype.handleMapMoveEnd_ = function() {
   );
 };
 
+/**
+ * @private
+ */
+exports.prototype.refreshSnappingSource_ = function() {
+  this.ngeoSnappingSource_.clear();
+  for (const uid in this.cache_) {
+    const item = this.cache_[uid];
+    if (item.active) {
+      this.ngeoSnappingSource_.addFeatures(item.features.getArray());
+    }
+  }
+};
 
 /**
  * @typedef {Object<number, gmf.editing.Snapping.CacheItem>}

examples/drawfeature.js

@@ -25,7 +25,6 @@ exports.module = angular.module('app', [
   ngeoMiscToolActivateMgr.module.name,
 ]);
 
-
 /**
  * @param {!angular.Scope} $scope Angular scope.
  * @param {ol.Collection.<ol.Feature>} ngeoFeatures Collection of features.

src/editing/createfeatureComponent.js

@@ -79,6 +79,7 @@ exports.directive('ngeoCreatefeature', exports.directive_);
  * @param {!angularGettext.Catalog} gettextCatalog Gettext catalog.
  * @param {!angular.$compile} $compile Angular compile service.
  * @param {!angular.$filter} $filter Angular filter
+ * @param {!angular.$injector} $injector Angular injector service.
  * @param {!angular.Scope} $scope Scope.
  * @param {!angular.$timeout} $timeout Angular timeout service.
  * @param {!ngeo.misc.EventHelper} ngeoEventHelper Ngeo event helper service
@@ -89,7 +90,7 @@ exports.directive('ngeoCreatefeature', exports.directive_);
  * @ngdoc controller
  * @ngname ngeoCreatefeatureController
  */
-exports.Controller_ = function(gettextCatalog, $compile, $filter, $scope,
+exports.Controller_ = function(gettextCatalog, $compile, $filter, $injector, $scope,
   $timeout, ngeoEventHelper) {
 
   /**
@@ -152,6 +153,12 @@ exports.Controller_ = function(gettextCatalog, $compile, $filter, $scope,
    */
   this.ngeoEventHelper_ = ngeoEventHelper;
 
+  /**
+   * @type {!angular.$injector}
+   * @private
+   */
+  this.injector_ = $injector;
+
   /**
    * The draw or measure interaction responsible of drawing the vector feature.
    * The actual type depends on the geometry type.
@@ -201,7 +208,9 @@ exports.Controller_.prototype.$onInit = function() {
       {
         style: new olStyleStyle(),
         startMsg: this.compile_(`<div translate>${helpMsg}</div>`)(this.scope_)[0],
-        continueMsg: this.compile_(`<div translate>${contMsg}</div>`)(this.scope_)[0]
+        continueMsg: this.compile_(`<div translate>${contMsg}</div>`)(this.scope_)[0],
+        tolerance: this.injector_.has('ngeoSnappingTolerance') ? this.injector_.get('ngeoSnappingTolerance') : undefined,
+        source: this.injector_.has('ngeoSnappingSource') ? this.injector_.get('ngeoSnappingSource') : undefined,
       }
     );
   } else if (this.geomType === ngeoGeometryType.POLYGON ||