Workaround escape while clicking issue

When clicking escape while a mouse button is in the 'mousedown' state
the OpenLayers interactions can be messed up (polygons).

This commit avoids the described situation.

contribs/gmf/src/drawing/drawFeatureComponent.js

@@ -26,6 +26,8 @@ import ngeoMiscDecorate from 'ngeo/misc/decorate.js';
 import ngeoMiscFeatureHelper from 'ngeo/misc/FeatureHelper.js';
 import ngeoMiscToolActivate from 'ngeo/misc/ToolActivate.js';
 import ngeoMiscToolActivateMgr from 'ngeo/misc/ToolActivateMgr.js';
+import {active} from 'ngeo/utils.js';
+
 import * as olBase from 'ol/index.js';
 import * as olArray from 'ol/array.js';
 import * as olEvents from 'ol/events.js';
@@ -606,7 +608,7 @@ exports.Controller_.prototype.handleMapClick_ = function(evt) {
 exports.Controller_.prototype.handleCancelKeyEvent_ = function() {
   olEvents.listen(document.body, 'keydown', (e) => {
     const escPressed = event.keyCode === 27; // Escape key
-    if (escPressed && this.selectedFeature) {
+    if (!active.mousedown && escPressed && this.selectedFeature) {
       this.selectedFeature = null;
       this.scope_.$apply();
     }

contribs/gmf/src/editing/editFeatureComponent.js

@@ -20,7 +20,7 @@ import ngeoEditingAttributesComponent from 'ngeo/editing/attributesComponent.js'
 /** @suppress {extraRequire} */
 import ngeoEditingCreatefeatureComponent from 'ngeo/editing/createfeatureComponent.js';
 
-import ngeoUtils from 'ngeo/utils.js';
+import ngeoUtils, {active} from 'ngeo/utils.js';
 import ngeoFormatXSDAttribute from 'ngeo/format/XSDAttribute.js';
 import ngeoGeometryType from 'ngeo/GeometryType.js';
 import ngeoInteractionRotate from 'ngeo/interaction/Rotate.js';
@@ -993,7 +993,7 @@ exports.Controller_.prototype.handleMapClick_ = function(evt) {
   if (this.cancelEventKey_ === undefined) {
     this.cancelEventKey_ = olEvents.listen(document.body, 'keydown', (e) => {
       const escPressed = event.keyCode === 27; // Escape key
-      if (escPressed && activeInteraction.getActive()) {
+      if (!active.mousedown && escPressed && activeInteraction.getActive()) {
         this.cancel();
         this.scope_.$apply();
 

src/draw/Controller.js

@@ -12,6 +12,7 @@ import ngeoMiscBtnComponent from 'ngeo/misc/btnComponent.js';
 import ngeoMiscDecorate from 'ngeo/misc/decorate.js';
 import ngeoMiscEventHelper from 'ngeo/misc/EventHelper.js';
 import ngeoMiscFeatureHelper from 'ngeo/misc/FeatureHelper.js';
+import {active} from 'ngeo/utils.js';
 import olFeature from 'ol/Feature.js';
 import {getUid} from 'ol/index.js';
 import {listen} from 'ol/events.js';
@@ -154,7 +155,7 @@ const exports = function($scope, $sce, gettextCatalog,
  */
 exports.prototype.handleEscapeKeyDown_ = function(event) {
   const escPressed = event.keyCode === 27; // Escape key
-  if (escPressed && this.interaction_.getActive()) {
+  if (!active.mousedown && escPressed && this.interaction_.getActive()) {
     const interaction = this.interaction_;
     interaction.setActive(false);
     interaction.setActive(true);

src/editing/createfeatureComponent.js

@@ -7,7 +7,7 @@ import ngeoGeometryType from 'ngeo/GeometryType.js';
 import ngeoInteractionMeasureArea from 'ngeo/interaction/MeasureArea.js';
 import ngeoInteractionMeasureLength from 'ngeo/interaction/MeasureLength.js';
 import ngeoMiscEventHelper from 'ngeo/misc/EventHelper.js';
-import ngeoUtils from 'ngeo/utils.js';
+import ngeoUtils, {active} from 'ngeo/utils.js';
 import * as olBase from 'ol/index.js';
 import olCollection from 'ol/Collection.js';
 import * as olEvents from 'ol/events.js';
@@ -283,7 +283,7 @@ exports.Controller_.prototype.$onInit = function() {
 exports.Controller_.prototype.handleEscapeKeyDown_ = function(event) {
   const interaction = this.interaction_;
   const escPressed = event.keyCode === 27; // Escape key
-  if (escPressed && interaction.getActive()) {
+  if (!active.mousedown && escPressed && interaction.getActive()) {
     interaction.setActive(false);
     interaction.setActive(true);
   }

src/interaction/Measure.js

@@ -3,6 +3,7 @@
  */
 import googAsserts from 'goog/asserts.js';
 import ngeoCustomEvent from 'ngeo/CustomEvent.js';
+import {active} from 'ngeo/utils.js';
 import * as olBase from 'ol/index.js';
 import * as olDom from 'ol/dom.js';
 import * as olProj from 'ol/proj.js';
@@ -522,7 +523,7 @@ exports.prototype.handleDrawInteractionActiveChange_ = function() {
  */
 exports.prototype.handleEscapeKeyDown_ = function(event) {
   const escPressed = event.keyCode === 27; // Escape key
-  if (this.drawInteraction_.getActive() && escPressed) {
+  if (!active.mousedown && this.drawInteraction_.getActive() && escPressed) {
     this.drawInteraction_.setActive(false);
     this.drawInteraction_.setActive(true);
   }

src/interaction/Rotate.js

@@ -4,6 +4,7 @@
 import googAsserts from 'goog/asserts.js';
 import ngeoInteractionCommon from 'ngeo/interaction/common.js';
 import ngeoCustomEvent from 'ngeo/CustomEvent.js';
+import {active} from 'ngeo/utils.js';
 import * as olBase from 'ol/index.js';
 import * as olExtent from 'ol/extent.js';
 import olFeature from 'ol/Feature.js';
@@ -357,7 +358,7 @@ exports.prototype.handleUp_ = function(evt) {
  */
 exports.prototype.handleKeyUp_ = function(evt) {
   // 27 == ESC key
-  if (evt.keyCode === 27) {
+  if (!active.mousedown && evt.keyCode === 27) {
     this.setActive(false);
   }
 };

src/interaction/Translate.js

@@ -13,6 +13,7 @@ import olGeomPolygon from 'ol/geom/Polygon.js';
 import olInteractionTranslate from 'ol/interaction/Translate.js';
 import olLayerVector from 'ol/layer/Vector.js';
 import olSourceVector from 'ol/source/Vector.js';
+import {active} from 'ngeo/utils.js';
 
 /**
  * An extension of the OpenLayers Translate interaction that adds the following
@@ -279,7 +280,7 @@ exports.prototype.getGeometryCenterPoint_ = function(
  */
 exports.prototype.handleKeyUp_ = function(evt) {
   // 27 == ESC key
-  if (evt.keyCode === 27) {
+  if (!active.mousedown && evt.keyCode === 27) {
     this.setActive(false);
   }
 };

src/utils.js

@@ -132,4 +132,19 @@ export function extentToRectangle(extent) {
   ];
 }
 
+/**
+ * Active states.
+ */
+export const active = {
+  mousedown: false
+};
+
+document.addEventListener('mousedown', (evt) => {
+  active.mousedown = true;
+});
+
+document.addEventListener('mouseup', (evt) => {
+  active.mousedown = false;
+});
+
 export default exports;