From b6c8e987c4c7af16080c7e6d293233d82e9db5d1 Mon Sep 17 00:00:00 2001 From: Guillaume Beraudo Date: Mon, 11 Nov 2019 16:20:21 +0100 Subject: [PATCH] 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 | 4 +++- contribs/gmf/src/editing/editFeatureComponent.js | 4 ++-- src/draw/Controller.js | 3 ++- src/editing/createfeatureComponent.js | 4 ++-- src/interaction/Measure.js | 3 ++- src/interaction/Rotate.js | 3 ++- src/interaction/Translate.js | 3 ++- src/utils.js | 15 +++++++++++++++ 8 files changed, 30 insertions(+), 9 deletions(-) diff --git a/contribs/gmf/src/drawing/drawFeatureComponent.js b/contribs/gmf/src/drawing/drawFeatureComponent.js index 625e3c2883f1..6a7b5f4c323c 100644 --- a/contribs/gmf/src/drawing/drawFeatureComponent.js +++ b/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(); } diff --git a/contribs/gmf/src/editing/editFeatureComponent.js b/contribs/gmf/src/editing/editFeatureComponent.js index b9bdb0cb5066..dca1a8ac2371 100644 --- a/contribs/gmf/src/editing/editFeatureComponent.js +++ b/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(); diff --git a/src/draw/Controller.js b/src/draw/Controller.js index 0a4c5e6c7783..83b2592a3816 100644 --- a/src/draw/Controller.js +++ b/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); diff --git a/src/editing/createfeatureComponent.js b/src/editing/createfeatureComponent.js index bad4501cf5de..059988863642 100644 --- a/src/editing/createfeatureComponent.js +++ b/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); } diff --git a/src/interaction/Measure.js b/src/interaction/Measure.js index 7018aea35a66..f2c53dd372f5 100644 --- a/src/interaction/Measure.js +++ b/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); } diff --git a/src/interaction/Rotate.js b/src/interaction/Rotate.js index 07c8b19f1de2..f29b817bdf4f 100644 --- a/src/interaction/Rotate.js +++ b/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); } }; diff --git a/src/interaction/Translate.js b/src/interaction/Translate.js index b8a346858f9d..9e1dffbea753 100644 --- a/src/interaction/Translate.js +++ b/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); } }; diff --git a/src/utils.js b/src/utils.js index c30b1a45f92b..79fb829b6ba5 100644 --- a/src/utils.js +++ b/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;