Press escape to desactivate drawing and editing

contribs/gmf/src/drawing/drawFeatureComponent.js

@@ -441,6 +441,8 @@ exports.Controller_.prototype.handleActiveChange_ = function(active) {
     }
   }
 
+  olEvents.unlistenByKey(this.cancelEventKey_);
+
 };
 
 
@@ -592,6 +594,14 @@ exports.Controller_.prototype.handleMapClick_ = function(evt) {
     return;
   }
 
+  this.cancelEventKey_ = olEvents.listen(document.body, 'keydown', (e) => {
+    const escPressed = event.keyCode === 27; // Escape key
+    if (escPressed && this.selectedFeature) {
+      this.selectedFeature = null;
+      olEvents.unlistenByKey(this.cancelEventKey_);
+    }
+  });
+
   this.selectedFeature = feature;
 
   this.scope_.$apply();

contribs/gmf/src/editing/editFeatureComponent.js

@@ -987,6 +987,17 @@ exports.Controller_.prototype.handleMapSelectActiveChange_ = function(
  * @private
  */
 exports.Controller_.prototype.handleMapClick_ = function(evt) {
+  const interactions = evt.target.getInteractions().getArray();
+  const activeInteraction = interactions.find(interaction => interaction.getActive() === true);
+
+  this.cancelEventKey_ = olEvents.listen(document.body, 'keydown', (e) => {
+    const escPressed = event.keyCode === 27; // Escape key
+    if (escPressed && activeInteraction.getActive()) {
+      this.cancel();
+      olEvents.unlistenByKey(this.cancelEventKey_);
+    }
+  });
+
   const coordinate = evt.coordinate;
   const pixel = evt.pixel;
 
@@ -1252,6 +1263,7 @@ exports.Controller_.prototype.handleDestroy_ = function() {
   this.toggle_(false);
   this.handleMapSelectActiveChange_(false);
   this.unregisterInteractions_();
+  olEvents.unlistenByKey(this.cancelEventKey_);
 };
 
 

src/draw/Controller.js

@@ -12,12 +12,16 @@ import ngeoMiscBtnComponent from 'ngeo/misc/btnComponent.js';
 import ngeoMiscDecorate from 'ngeo/misc/decorate.js';
 import ngeoMiscFeatureHelper from 'ngeo/misc/FeatureHelper.js';
 import olFeature from 'ol/Feature.js';
+import * as olBase from 'ol/index.js';
+import * as olEvents from 'ol/events.js';
+import ngeoMiscEventHelper from 'ngeo/misc/EventHelper.js';
 
 /**
  * @param {!angular.Scope} $scope Scope.
  * @param {angular.$sce} $sce Angular sce service.
  * @param {angularGettext.Catalog} gettextCatalog Gettext service.
  * @param {ngeo.misc.FeatureHelper} ngeoFeatureHelper Ngeo feature helper service.
+ * @param {ngeo.misc.EventHelper} ngeoEventHelper Ngeo event helper service
  * @param {ol.Collection.<ol.Feature>} ngeoFeatures Collection of features.
  * @constructor
  * @private
@@ -27,7 +31,7 @@ import olFeature from 'ol/Feature.js';
  * @ngname ngeoDrawfeatureController
  */
 const exports = function($scope, $sce, gettextCatalog,
-  ngeoFeatureHelper, ngeoFeatures) {
+  ngeoFeatureHelper, ngeoEventHelper, ngeoFeatures) {
 
   /**
    * @type {boolean}
@@ -126,6 +130,7 @@ const exports = function($scope, $sce, gettextCatalog,
    */
   this.drawText;
 
+  this.ngeoEventHelper_ = ngeoEventHelper;
 
   // Watch the "active" property, and disable the draw interactions
   // when "active" gets set to false.
@@ -139,7 +144,21 @@ const exports = function($scope, $sce, gettextCatalog,
       }
     }
   );
+};
+
 
+/**
+ * Called when escape key is pressed to reset drawing.
+ * @param {ol.interaction.Draw.Event|ngeox.MeasureEvent} event Event.
+ * @export
+ */
+exports.prototype.handleEscapeKeyDown_ = function(event) {
+  const escPressed = event.keyCode === 27; // Escape key
+  if (escPressed && this.interaction_.getActive()) {
+    const interaction = this.interaction_;
+    interaction.setActive(false);
+    interaction.setActive(true);
+  }
 };
 
 
@@ -167,6 +186,18 @@ exports.prototype.registerInteraction = function(
  */
 exports.prototype.handleActiveChange = function(event) {
   this.active = this.interactions_.some(interaction => interaction.getActive(), this);
+  this.interaction_ = this.interactions_.find(interaction => interaction.getActive() === true);
+  const uid = olBase.getUid(this);
+
+  this.ngeoEventHelper_.addListenerKey(
+    uid,
+    olEvents.listen(
+      document.body,
+      'keydown',
+      this.handleEscapeKeyDown_,
+      this
+    )
+  );
 };
 
 
@@ -247,6 +278,7 @@ exports.module = angular.module('ngeoDrawfeatureController', [
   ngeoDrawFeatures.name,
   ngeoMiscBtnComponent.name,
   ngeoMiscFeatureHelper.module.name,
+  ngeoMiscEventHelper.module.name,
 ]);
 exports.module.controller('ngeoDrawfeatureController', exports);
 

src/editing/createfeatureComponent.js

@@ -240,6 +240,17 @@ exports.Controller_.prototype.$onInit = function() {
   this.map.addInteraction(interaction);
 
   const uid = olBase.getUid(this);
+
+  this.ngeoEventHelper_.addListenerKey(
+    uid,
+    olEvents.listen(
+      document.body,
+      'keydown',
+      this.handleEscapeKeyDown_,
+      this
+    )
+  );
+
   if (interaction instanceof olInteractionDraw) {
     this.ngeoEventHelper_.addListenerKey(
       uid,
@@ -264,6 +275,18 @@ exports.Controller_.prototype.$onInit = function() {
   }
 };
 
+/**
+ * Called when escape key is pressed to reset drawing.
+ * @param {ol.interaction.Draw.Event|ngeox.MeasureEvent} event Event.
+ * @export
+ */
+exports.Controller_.prototype.handleEscapeKeyDown_ = function(event) {
+  const escPressed = event.keyCode === 27; // Escape key
+  if (escPressed && this.interaction_.getActive()) {
+    this.interaction_.setActive(false);
+    this.interaction_.setActive(true);
+  }
+};
 
 /**
  * Called when a feature is finished being drawn. Add the feature to the

src/interaction/Measure.js

@@ -345,6 +345,10 @@ exports.prototype.onDrawStart_ = function(evt) {
     });
   });
 
+  this.cancelEventKey_ = olEvents.listen(document.body, 'keydown', (event) => {
+    this.handleEscapeKeyDown_(event);
+  });
+
   this.postcomposeEventKey_ = olEvents.listen(this.getMap(), 'postcompose', () => {
     this.measureTooltipOverlay_.setPosition(this.measureTooltipOverlayCoord_);
   });
@@ -374,8 +378,10 @@ exports.prototype.unlistenerEvent_ = function() {
   if (this.changeEventKey_ !== null && this.postcomposeEventKey_ !== null) {
     olEvents.unlistenByKey(this.changeEventKey_);
     olEvents.unlistenByKey(this.postcomposeEventKey_);
+    olEvents.unlistenByKey(this.cancelEventKey_);
     this.changeEventKey_ = null;
     this.postcomposeEventKey_ = null;
+    this.cancelEventKey_ = null;
   }
 };
 
@@ -508,4 +514,18 @@ exports.prototype.handleDrawInteractionActiveChange_ = function() {
 };
 
 
+/**
+ * Called when escape key is pressed to reset drawing.
+ * @param {ol.interaction.Draw.Event|ngeox.MeasureEvent} event Event.
+ * @private
+ * @export
+ */
+exports.prototype.handleEscapeKeyDown_ = function(event) {
+  const escPressed = event.keyCode === 27; // Escape key
+  if (this.drawInteraction_.getActive() && escPressed) {
+    this.drawInteraction_.setActive(false);
+    this.drawInteraction_.setActive(true);
+  }
+};
+
 export default exports;