Mercurial > gemma

annotate client/src/components/KeyboardHandler.vue @ 5442:8097ad2319f5 marking-single-beam

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
Backout Esc/click to stop operation.
author Sascha L. Teichmann <sascha.teichmann@intevation.de>
date Tue, 13 Jul 2021 18:29:05 +0200
parents 0fa20662ca66
children 2ad3a29e0e14
Ignore whitespace changes - Everywhere: Within whitespace: At end of lines:
rev   line source
3553
869505c5087b client: fairway profile: close compare view with ESC key
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
1 <template>
869505c5087b client: fairway profile: close compare view with ESC key
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
2 <transition name="fade">
869505c5087b client: fairway profile: close compare view with ESC key
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
3 <div class="notice" v-if="showNotice">
5442
8097ad2319f5 Backout Esc/click to stop operation.
Sascha L. Teichmann <sascha.teichmann@intevation.de>
parents: 5440
diff changeset
4 <span>{{ noticeText }}</span>
3553
869505c5087b client: fairway profile: close compare view with ESC key
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
5 </div>
869505c5087b client: fairway profile: close compare view with ESC key
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
6 </transition>
869505c5087b client: fairway profile: close compare view with ESC key
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
7 </template>
869505c5087b client: fairway profile: close compare view with ESC key
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
8
869505c5087b client: fairway profile: close compare view with ESC key
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
9 <style lang="sass" scoped>
869505c5087b client: fairway profile: close compare view with ESC key
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
10 .notice
869505c5087b client: fairway profile: close compare view with ESC key
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
11 position: absolute
869505c5087b client: fairway profile: close compare view with ESC key
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
12 top: 0
869505c5087b client: fairway profile: close compare view with ESC key
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
13 width: 100%
869505c5087b client: fairway profile: close compare view with ESC key
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
14 text-align: center
869505c5087b client: fairway profile: close compare view with ESC key
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
15 z-index: 1
869505c5087b client: fairway profile: close compare view with ESC key
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
16 font-size: 11px
869505c5087b client: fairway profile: close compare view with ESC key
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
17 line-height: 11px
869505c5087b client: fairway profile: close compare view with ESC key
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
18 > span
869505c5087b client: fairway profile: close compare view with ESC key
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
19 opacity: 0.5
869505c5087b client: fairway profile: close compare view with ESC key
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
20 background: white
869505c5087b client: fairway profile: close compare view with ESC key
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
21 display: inline-block
869505c5087b client: fairway profile: close compare view with ESC key
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
22 border-bottom-right-radius: 0.25rem
869505c5087b client: fairway profile: close compare view with ESC key
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
23 border-bottom-left-radius: 0.25rem
869505c5087b client: fairway profile: close compare view with ESC key
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
24 padding: 3px 5px
869505c5087b client: fairway profile: close compare view with ESC key
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
25 </style>
869505c5087b client: fairway profile: close compare view with ESC key
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
26
869505c5087b client: fairway profile: close compare view with ESC key
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
27 <script>
869505c5087b client: fairway profile: close compare view with ESC key
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
28 /* This is Free Software under GNU Affero General Public License v >= 3.0
869505c5087b client: fairway profile: close compare view with ESC key
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
29 * without warranty, see README.md and license for details.
869505c5087b client: fairway profile: close compare view with ESC key
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
30 *
869505c5087b client: fairway profile: close compare view with ESC key
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
31 * SPDX-License-Identifier: AGPL-3.0-or-later
869505c5087b client: fairway profile: close compare view with ESC key
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
32 * License-Filename: LICENSES/AGPL-3.0.txt
869505c5087b client: fairway profile: close compare view with ESC key
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
33 *
869505c5087b client: fairway profile: close compare view with ESC key
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
34 * Copyright (C) 2018 by via donau
869505c5087b client: fairway profile: close compare view with ESC key
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
35 * – Österreichische Wasserstraßen-Gesellschaft mbH
869505c5087b client: fairway profile: close compare view with ESC key
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
36 * Software engineering by Intevation GmbH
869505c5087b client: fairway profile: close compare view with ESC key
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
37 *
869505c5087b client: fairway profile: close compare view with ESC key
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
38 * Author(s):
869505c5087b client: fairway profile: close compare view with ESC key
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
39 * Markus Kottländer <markus.kottlaender@intevation.de>
869505c5087b client: fairway profile: close compare view with ESC key
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
40 */
869505c5087b client: fairway profile: close compare view with ESC key
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
41
869505c5087b client: fairway profile: close compare view with ESC key
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
42 import { mapState } from "vuex";
869505c5087b client: fairway profile: close compare view with ESC key
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
43
869505c5087b client: fairway profile: close compare view with ESC key
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
44 export default {
869505c5087b client: fairway profile: close compare view with ESC key
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
45 computed: {
869505c5087b client: fairway profile: close compare view with ESC key
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
46 ...mapState("application", ["paneSetup"]),
869505c5087b client: fairway profile: close compare view with ESC key
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
47 ...mapState("map", [
869505c5087b client: fairway profile: close compare view with ESC key
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
48 "openLayersMaps",
869505c5087b client: fairway profile: close compare view with ESC key
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
49 "lineToolEnabled",
869505c5087b client: fairway profile: close compare view with ESC key
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
50 "polygonToolEnabled",
869505c5087b client: fairway profile: close compare view with ESC key
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
51 "cutToolEnabled"
869505c5087b client: fairway profile: close compare view with ESC key
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
52 ]),
869505c5087b client: fairway profile: close compare view with ESC key
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
53 showNotice() {
869505c5087b client: fairway profile: close compare view with ESC key
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
54 return (
869505c5087b client: fairway profile: close compare view with ESC key
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
55 this.lineToolEnabled ||
869505c5087b client: fairway profile: close compare view with ESC key
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
56 this.polygonToolEnabled ||
869505c5087b client: fairway profile: close compare view with ESC key
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
57 this.cutToolEnabled ||
869505c5087b client: fairway profile: close compare view with ESC key
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
58 this.paneSetup.includes("COMPARESURVEYS")
869505c5087b client: fairway profile: close compare view with ESC key
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
59 );
869505c5087b client: fairway profile: close compare view with ESC key
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
60 },
869505c5087b client: fairway profile: close compare view with ESC key
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
61 noticeText() {
869505c5087b client: fairway profile: close compare view with ESC key
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
62 if (
869505c5087b client: fairway profile: close compare view with ESC key
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
63 this.lineToolEnabled ||
869505c5087b client: fairway profile: close compare view with ESC key
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
64 this.polygonToolEnabled ||
869505c5087b client: fairway profile: close compare view with ESC key
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
65 this.cutToolEnabled
869505c5087b client: fairway profile: close compare view with ESC key
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
66 ) {
869505c5087b client: fairway profile: close compare view with ESC key
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
67 return this.$gettext("Press ESC to stop drawing.");
869505c5087b client: fairway profile: close compare view with ESC key
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
68 } else if (this.paneSetup.includes("COMPARESURVEYS")) {
869505c5087b client: fairway profile: close compare view with ESC key
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
69 return this.$gettext("Press ESC to close compare view.");
869505c5087b client: fairway profile: close compare view with ESC key
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
70 }
869505c5087b client: fairway profile: close compare view with ESC key
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
71 }
869505c5087b client: fairway profile: close compare view with ESC key
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
72 },
869505c5087b client: fairway profile: close compare view with ESC key
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
73 mounted() {
869505c5087b client: fairway profile: close compare view with ESC key
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
74 window.addEventListener("keydown", e => {
869505c5087b client: fairway profile: close compare view with ESC key
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
75 // Escape
5442
8097ad2319f5 Backout Esc/click to stop operation.
Sascha L. Teichmann <sascha.teichmann@intevation.de>
parents: 5440
diff changeset
76 if (e.keyCode === 27) {
8097ad2319f5 Backout Esc/click to stop operation.
Sascha L. Teichmann <sascha.teichmann@intevation.de>
parents: 5440
diff changeset
77 if (
8097ad2319f5 Backout Esc/click to stop operation.
Sascha L. Teichmann <sascha.teichmann@intevation.de>
parents: 5440
diff changeset
78 this.lineToolEnabled ||
8097ad2319f5 Backout Esc/click to stop operation.
Sascha L. Teichmann <sascha.teichmann@intevation.de>
parents: 5440
diff changeset
79 this.polygonToolEnabled ||
8097ad2319f5 Backout Esc/click to stop operation.
Sascha L. Teichmann <sascha.teichmann@intevation.de>
parents: 5440
diff changeset
80 this.cutToolEnabled
8097ad2319f5 Backout Esc/click to stop operation.
Sascha L. Teichmann <sascha.teichmann@intevation.de>
parents: 5440
diff changeset
81 ) {
8097ad2319f5 Backout Esc/click to stop operation.
Sascha L. Teichmann <sascha.teichmann@intevation.de>
parents: 5440
diff changeset
82 this.$store.commit("map/lineToolEnabled", false);
8097ad2319f5 Backout Esc/click to stop operation.
Sascha L. Teichmann <sascha.teichmann@intevation.de>
parents: 5440
diff changeset
83 this.$store.commit("map/polygonToolEnabled", false);
8097ad2319f5 Backout Esc/click to stop operation.
Sascha L. Teichmann <sascha.teichmann@intevation.de>
parents: 5440
diff changeset
84 this.$store.commit("map/cutToolEnabled", false);
8097ad2319f5 Backout Esc/click to stop operation.
Sascha L. Teichmann <sascha.teichmann@intevation.de>
parents: 5440
diff changeset
85 this.$store.commit("map/setCurrentMeasurement", null);
8097ad2319f5 Backout Esc/click to stop operation.
Sascha L. Teichmann <sascha.teichmann@intevation.de>
parents: 5440
diff changeset
86 this.openLayersMaps.forEach(m => {
8097ad2319f5 Backout Esc/click to stop operation.
Sascha L. Teichmann <sascha.teichmann@intevation.de>
parents: 5440
diff changeset
87 m.getLayer("DRAWTOOL")
8097ad2319f5 Backout Esc/click to stop operation.
Sascha L. Teichmann <sascha.teichmann@intevation.de>
parents: 5440
diff changeset
88 .getSource()
8097ad2319f5 Backout Esc/click to stop operation.
Sascha L. Teichmann <sascha.teichmann@intevation.de>
parents: 5440
diff changeset
89 .clear();
8097ad2319f5 Backout Esc/click to stop operation.
Sascha L. Teichmann <sascha.teichmann@intevation.de>
parents: 5440
diff changeset
90 });
8097ad2319f5 Backout Esc/click to stop operation.
Sascha L. Teichmann <sascha.teichmann@intevation.de>
parents: 5440
diff changeset
91 } else if (this.paneSetup.includes("COMPARESURVEYS")) {
8097ad2319f5 Backout Esc/click to stop operation.
Sascha L. Teichmann <sascha.teichmann@intevation.de>
parents: 5440
diff changeset
92 this.$store.commit("fairwayprofile/additionalSurvey", null);
8097ad2319f5 Backout Esc/click to stop operation.
Sascha L. Teichmann <sascha.teichmann@intevation.de>
parents: 5440
diff changeset
93 }
8097ad2319f5 Backout Esc/click to stop operation.
Sascha L. Teichmann <sascha.teichmann@intevation.de>
parents: 5440
diff changeset
94 }
3553
869505c5087b client: fairway profile: close compare view with ESC key
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
95 });
869505c5087b client: fairway profile: close compare view with ESC key
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
96 }
869505c5087b client: fairway profile: close compare view with ESC key
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
97 };
869505c5087b client: fairway profile: close compare view with ESC key
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
98 </script>