Mercurial > gemma
view client/src/components/KeyboardHandler.vue @ 5736:55892008ec96 default tip
Fixed a bunch of corner cases in WG import.
author | Sascha Wilde <wilde@sha-bang.de> |
---|---|
date | Wed, 29 May 2024 19:02:42 +0200 |
parents | 84d01a536bec |
children |
line wrap: on
line source
<template> <transition name="fade"> <div class="notice" v-if="showNotice"> <span @click="stopOperation">{{ noticeText }}</span> </div> </transition> </template> <style scoped> .notice { position: absolute; top: 0; width: 100%; text-align: center; z-index: 1; font-size: 11px; line-height: 11px; } .notice > span { opacity: 0.5; background: white; display: inline-block; border-bottom-right-radius: 0.25rem; border-bottom-left-radius: 0.25rem; padding: 3px 5px; } </style> <script> /* This is Free Software under GNU Affero General Public License v >= 3.0 * without warranty, see README.md and license for details. * * SPDX-License-Identifier: AGPL-3.0-or-later * License-Filename: LICENSES/AGPL-3.0.txt * * Copyright (C) 2018 by via donau * – Österreichische Wasserstraßen-Gesellschaft mbH * Software engineering by Intevation GmbH * * Author(s): * Markus Kottländer <markus.kottlaender@intevation.de> */ import { mapState } from "vuex"; export default { computed: { ...mapState("application", ["paneSetup"]), ...mapState("map", [ "openLayersMaps", "lineToolEnabled", "polygonToolEnabled", "cutToolEnabled" ]), showNotice() { return ( this.lineToolEnabled || this.polygonToolEnabled || this.cutToolEnabled || this.paneSetup.includes("COMPARESURVEYS") ); }, noticeText() { if ( this.lineToolEnabled || this.polygonToolEnabled || this.cutToolEnabled ) { return this.$gettext("Press ESC to stop drawing."); } else if (this.paneSetup.includes("COMPARESURVEYS")) { return this.$gettext("Press ESC to close compare view."); } } }, 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.key === "Esc" || e.key === "Escape") this.stopOperation(); }); } }; </script>