# HG changeset patch
# User Thomas Junk <thomas.junk@intevation.de>
# Date 1626182557 -7200
# Node ID 0fa20662ca66a3571ac626200957c06c1e6d4d8c
# Parent  a857d6ae126449ca306e46b91d82e3d03c62e720
Esc/click to stop operation.

diff -r a857d6ae1264 -r 0fa20662ca66 client/src/components/KeyboardHandler.vue
--- a/client/src/components/KeyboardHandler.vue	Tue Jul 13 13:00:41 2021 +0200
+++ b/client/src/components/KeyboardHandler.vue	Tue Jul 13 15:22:37 2021 +0200
@@ -1,7 +1,7 @@
 <template>
   <transition name="fade">
     <div class="notice" v-if="showNotice">
-      <span>{{ noticeText }}</span>
+      <span @click="stopOperation">{{ noticeText }}</span>
     </div>
   </transition>
 </template>
@@ -70,28 +70,37 @@
       }
     }
   },
+  methods: {
+    closeCompareView() {
+      this.$store.commit("fairwayprofile/additionalSurvey", null);
+    },
+    stopDrawing() {
+      this.$store.commit("map/lineToolEnabled", false);
+      this.$store.commit("map/polygonToolEnabled", false);
+      this.$store.commit("map/cutToolEnabled", false);
+      this.$store.commit("map/setCurrentMeasurement", null);
+      this.openLayersMaps.forEach(m => {
+        m.getLayer("DRAWTOOL")
+          .getSource()
+          .clear();
+      });
+    },
+    stopOperation() {
+      if (
+        this.lineToolEnabled ||
+        this.polygonToolEnabled ||
+        this.cutToolEnabled
+      ) {
+        this.stopDrawing();
+      } else if (this.paneSetup.includes("COMPARESURVEYS")) {
+        this.closeCompareView();
+      }
+    }
+  },
   mounted() {
     window.addEventListener("keydown", e => {
       // Escape
-      if (e.keyCode === 27) {
-        if (
-          this.lineToolEnabled ||
-          this.polygonToolEnabled ||
-          this.cutToolEnabled
-        ) {
-          this.$store.commit("map/lineToolEnabled", false);
-          this.$store.commit("map/polygonToolEnabled", false);
-          this.$store.commit("map/cutToolEnabled", false);
-          this.$store.commit("map/setCurrentMeasurement", null);
-          this.openLayersMaps.forEach(m => {
-            m.getLayer("DRAWTOOL")
-              .getSource()
-              .clear();
-          });
-        } else if (this.paneSetup.includes("COMPARESURVEYS")) {
-          this.$store.commit("fairwayprofile/additionalSurvey", null);
-        }
-      }
+      if (e.key === "Esc" || e.key === "Escape") this.stopOperation();
     });
   }
 };