Press escape to desactivate drawing in edition

Cancel with escape key for drawing, and editing refactoring

Add rectangle cancelation

Modify cancelation in edition

Add modification cancel with drawing

Unlisten keydown events

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;