Mercurial > gemma
annotate client/src/components/KeyboardHandler.vue @ 4145:6095e95db454
optical adjustments to nowline and now line label
author | Thomas Junk <thomas.junk@intevation.de> |
---|---|
date | Fri, 02 Aug 2019 11:11:32 +0200 |
parents | 869505c5087b |
children | 0fa20662ca66 |
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"> |
869505c5087b
client: fairway profile: close compare view with ESC key
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
4 <span>{{ noticeText }}</span> |
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 |
869505c5087b
client: fairway profile: close compare view with ESC key
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
76 if (e.keyCode === 27) { |
869505c5087b
client: fairway profile: close compare view with ESC key
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
77 if ( |
869505c5087b
client: fairway profile: close compare view with ESC key
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
78 this.lineToolEnabled || |
869505c5087b
client: fairway profile: close compare view with ESC key
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
79 this.polygonToolEnabled || |
869505c5087b
client: fairway profile: close compare view with ESC key
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
80 this.cutToolEnabled |
869505c5087b
client: fairway profile: close compare view with ESC key
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
81 ) { |
869505c5087b
client: fairway profile: close compare view with ESC key
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
82 this.$store.commit("map/lineToolEnabled", false); |
869505c5087b
client: fairway profile: close compare view with ESC key
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
83 this.$store.commit("map/polygonToolEnabled", false); |
869505c5087b
client: fairway profile: close compare view with ESC key
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
84 this.$store.commit("map/cutToolEnabled", false); |
869505c5087b
client: fairway profile: close compare view with ESC key
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
85 this.$store.commit("map/setCurrentMeasurement", null); |
869505c5087b
client: fairway profile: close compare view with ESC key
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
86 this.openLayersMaps.forEach(m => { |
869505c5087b
client: fairway profile: close compare view with ESC key
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
87 m.getLayer("DRAWTOOL") |
869505c5087b
client: fairway profile: close compare view with ESC key
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
88 .getSource() |
869505c5087b
client: fairway profile: close compare view with ESC key
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
89 .clear(); |
869505c5087b
client: fairway profile: close compare view with ESC key
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
90 }); |
869505c5087b
client: fairway profile: close compare view with ESC key
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
91 } else if (this.paneSetup.includes("COMPARESURVEYS")) { |
869505c5087b
client: fairway profile: close compare view with ESC key
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
92 this.$store.commit("fairwayprofile/additionalSurvey", null); |
869505c5087b
client: fairway profile: close compare view with ESC key
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
93 } |
869505c5087b
client: fairway profile: close compare view with ESC key
Markus Kottlaender <markus@intevation.de>
parents:
diff
changeset
|
94 } |
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> |