Mercurial > gemma

annotate client/src/components/KeyboardHandler.vue @ 5440:0fa20662ca66 marking-single-beam

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
Esc/click to stop operation.
author Thomas Junk <thomas.junk@intevation.de>
date Tue, 13 Jul 2021 15:22:37 +0200
parents 869505c5087b
children 8097ad2319f5
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">
5440
0fa20662ca66 Esc/click to stop operation.
Thomas Junk <thomas.junk@intevation.de>
parents: 3553
diff changeset
4 <span @click="stopOperation">{{ 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 },
5440
0fa20662ca66 Esc/click to stop operation.
Thomas Junk <thomas.junk@intevation.de>
parents: 3553
diff changeset
73 methods: {
0fa20662ca66 Esc/click to stop operation.
Thomas Junk <thomas.junk@intevation.de>
parents: 3553
diff changeset
74 closeCompareView() {
0fa20662ca66 Esc/click to stop operation.
Thomas Junk <thomas.junk@intevation.de>
parents: 3553
diff changeset
75 this.$store.commit("fairwayprofile/additionalSurvey", null);
0fa20662ca66 Esc/click to stop operation.
Thomas Junk <thomas.junk@intevation.de>
parents: 3553
diff changeset
76 },
0fa20662ca66 Esc/click to stop operation.
Thomas Junk <thomas.junk@intevation.de>
parents: 3553
diff changeset
77 stopDrawing() {
0fa20662ca66 Esc/click to stop operation.
Thomas Junk <thomas.junk@intevation.de>
parents: 3553
diff changeset
78 this.$store.commit("map/lineToolEnabled", false);
0fa20662ca66 Esc/click to stop operation.
Thomas Junk <thomas.junk@intevation.de>
parents: 3553
diff changeset
79 this.$store.commit("map/polygonToolEnabled", false);
0fa20662ca66 Esc/click to stop operation.
Thomas Junk <thomas.junk@intevation.de>
parents: 3553
diff changeset
80 this.$store.commit("map/cutToolEnabled", false);
0fa20662ca66 Esc/click to stop operation.
Thomas Junk <thomas.junk@intevation.de>
parents: 3553
diff changeset
81 this.$store.commit("map/setCurrentMeasurement", null);
0fa20662ca66 Esc/click to stop operation.
Thomas Junk <thomas.junk@intevation.de>
parents: 3553
diff changeset
82 this.openLayersMaps.forEach(m => {
0fa20662ca66 Esc/click to stop operation.
Thomas Junk <thomas.junk@intevation.de>
parents: 3553
diff changeset
83 m.getLayer("DRAWTOOL")
0fa20662ca66 Esc/click to stop operation.
Thomas Junk <thomas.junk@intevation.de>
parents: 3553
diff changeset
84 .getSource()
0fa20662ca66 Esc/click to stop operation.
Thomas Junk <thomas.junk@intevation.de>
parents: 3553
diff changeset
85 .clear();
0fa20662ca66 Esc/click to stop operation.
Thomas Junk <thomas.junk@intevation.de>
parents: 3553
diff changeset
86 });
0fa20662ca66 Esc/click to stop operation.
Thomas Junk <thomas.junk@intevation.de>
parents: 3553
diff changeset
87 },
0fa20662ca66 Esc/click to stop operation.
Thomas Junk <thomas.junk@intevation.de>
parents: 3553
diff changeset
88 stopOperation() {
0fa20662ca66 Esc/click to stop operation.
Thomas Junk <thomas.junk@intevation.de>
parents: 3553
diff changeset
89 if (
0fa20662ca66 Esc/click to stop operation.
Thomas Junk <thomas.junk@intevation.de>
parents: 3553
diff changeset
90 this.lineToolEnabled ||
0fa20662ca66 Esc/click to stop operation.
Thomas Junk <thomas.junk@intevation.de>
parents: 3553
diff changeset
91 this.polygonToolEnabled ||
0fa20662ca66 Esc/click to stop operation.
Thomas Junk <thomas.junk@intevation.de>
parents: 3553
diff changeset
92 this.cutToolEnabled
0fa20662ca66 Esc/click to stop operation.
Thomas Junk <thomas.junk@intevation.de>
parents: 3553
diff changeset
93 ) {
0fa20662ca66 Esc/click to stop operation.
Thomas Junk <thomas.junk@intevation.de>
parents: 3553
diff changeset
94 this.stopDrawing();
0fa20662ca66 Esc/click to stop operation.
Thomas Junk <thomas.junk@intevation.de>
parents: 3553
diff changeset
95 } else if (this.paneSetup.includes("COMPARESURVEYS")) {
0fa20662ca66 Esc/click to stop operation.
Thomas Junk <thomas.junk@intevation.de>
parents: 3553
diff changeset
96 this.closeCompareView();
0fa20662ca66 Esc/click to stop operation.
Thomas Junk <thomas.junk@intevation.de>
parents: 3553
diff changeset
97 }
0fa20662ca66 Esc/click to stop operation.
Thomas Junk <thomas.junk@intevation.de>
parents: 3553
diff changeset
98 }
0fa20662ca66 Esc/click to stop operation.
Thomas Junk <thomas.junk@intevation.de>
parents: 3553
diff changeset
99 },
3553
869505c5087b client: fairway profile: close compare view with ESC key
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
100 mounted() {
869505c5087b client: fairway profile: close compare view with ESC key
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
101 window.addEventListener("keydown", e => {
869505c5087b client: fairway profile: close compare view with ESC key
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
102 // Escape
5440
0fa20662ca66 Esc/click to stop operation.
Thomas Junk <thomas.junk@intevation.de>
parents: 3553
diff changeset
103 if (e.key === "Esc" || e.key === "Escape") this.stopOperation();
3553
869505c5087b client: fairway profile: close compare view with ESC key
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
104 });
869505c5087b client: fairway profile: close compare view with ESC key
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
105 }
869505c5087b client: fairway profile: close compare view with ESC key
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
106 };
869505c5087b client: fairway profile: close compare view with ESC key
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
107 </script>