From d70e1027355b5543a07b88523b7d77dcb75a7d0e Mon Sep 17 00:00:00 2001 From: Laurent Lienher Date: Thu, 19 Sep 2019 11:05:59 +0200 Subject: [PATCH] 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 --- .../gmf/src/drawing/drawFeatureComponent.js | 10 ++++++ .../gmf/src/editing/editFeatureComponent.js | 12 +++++++ src/draw/Controller.js | 34 ++++++++++++++++++- src/editing/createfeatureComponent.js | 23 +++++++++++++ src/interaction/Measure.js | 20 +++++++++++ 5 files changed, 98 insertions(+), 1 deletion(-) diff --git a/contribs/gmf/src/drawing/drawFeatureComponent.js b/contribs/gmf/src/drawing/drawFeatureComponent.js index 29dd89ae53f..f890db10161 100644 --- a/contribs/gmf/src/drawing/drawFeatureComponent.js +++ b/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(); diff --git a/contribs/gmf/src/editing/editFeatureComponent.js b/contribs/gmf/src/editing/editFeatureComponent.js index 3d1b3338098..ddf24373187 100644 --- a/contribs/gmf/src/editing/editFeatureComponent.js +++ b/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_); }; diff --git a/src/draw/Controller.js b/src/draw/Controller.js index adf5acfcb49..83e466454e1 100644 --- a/src/draw/Controller.js +++ b/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.} 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); diff --git a/src/editing/createfeatureComponent.js b/src/editing/createfeatureComponent.js index 9d5cc5a2b67..41f376735aa 100644 --- a/src/editing/createfeatureComponent.js +++ b/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 diff --git a/src/interaction/Measure.js b/src/interaction/Measure.js index c0dbccd1aa6..7018aea35a6 100644 --- a/src/interaction/Measure.js +++ b/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;