Mercurial > gemma

annotate client/src/components/map/Zoom.vue @ 5402:f5063fa7f666 marking-single-beam

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
Add schema change for marking vessel single beam scans.
author Sascha L. Teichmann <sascha.teichmann@intevation.de>
date Tue, 06 Jul 2021 00:30:39 +0200
parents 8f421cd3c746
children 7768f14f6535
Ignore whitespace changes - Everywhere: Within whitespace: At end of lines:
rev   line source
3166
286c2e3cc105 client: moved Zoom component to map subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
1 <template>
5036
8f421cd3c746 client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents: 3167
diff changeset
2 <div :class="['zoom-buttons shadow-xs', { move: showTimeSlider }]">
3166
286c2e3cc105 client: moved Zoom component to map subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
3 <button
286c2e3cc105 client: moved Zoom component to map subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
4 class="zoom-button border-0 bg-white rounded-left ui-element"
286c2e3cc105 client: moved Zoom component to map subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
5 @click="zoomOut"
286c2e3cc105 client: moved Zoom component to map subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
6 >
286c2e3cc105 client: moved Zoom component to map subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
7 <font-awesome-icon icon="minus" />
286c2e3cc105 client: moved Zoom component to map subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
8 </button>
286c2e3cc105 client: moved Zoom component to map subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
9 <button
286c2e3cc105 client: moved Zoom component to map subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
10 class="zoom-button border-0 bg-white rounded-right ui-element border-right"
286c2e3cc105 client: moved Zoom component to map subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
11 @click="zoomIn"
286c2e3cc105 client: moved Zoom component to map subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
12 >
286c2e3cc105 client: moved Zoom component to map subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
13 <font-awesome-icon icon="plus" />
286c2e3cc105 client: moved Zoom component to map subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
14 </button>
286c2e3cc105 client: moved Zoom component to map subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
15 </div>
286c2e3cc105 client: moved Zoom component to map subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
16 </template>
286c2e3cc105 client: moved Zoom component to map subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
17
286c2e3cc105 client: moved Zoom component to map subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
18 <style lang="sass">
286c2e3cc105 client: moved Zoom component to map subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
19 .zoom-buttons
286c2e3cc105 client: moved Zoom component to map subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
20 position: absolute
286c2e3cc105 client: moved Zoom component to map subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
21 z-index: 1
286c2e3cc105 client: moved Zoom component to map subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
22 bottom: $small-offset
286c2e3cc105 client: moved Zoom component to map subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
23 left: 50%
3167
85734c763652 client: layers: moved refresh button from zoom controls to layers dialog
Markus Kottlaender <markus@intevation.de>
parents: 3166
diff changeset
24 margin-left: -$icon-width
3166
286c2e3cc105 client: moved Zoom component to map subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
25 margin-bottom: 0
286c2e3cc105 client: moved Zoom component to map subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
26 transition: margin-bottom 0.3s
5036
8f421cd3c746 client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents: 3167
diff changeset
27 &.move
8f421cd3c746 client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents: 3167
diff changeset
28 bottom: $large-offset * 1.5
3166
286c2e3cc105 client: moved Zoom component to map subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
29 .zoom-button
286c2e3cc105 client: moved Zoom component to map subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
30 min-height: $icon-width
286c2e3cc105 client: moved Zoom component to map subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
31 min-width: $icon-width
286c2e3cc105 client: moved Zoom component to map subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
32 z-index: 1
286c2e3cc105 client: moved Zoom component to map subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
33 outline: none
286c2e3cc105 client: moved Zoom component to map subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
34 color: #666
286c2e3cc105 client: moved Zoom component to map subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
35 </style>
286c2e3cc105 client: moved Zoom component to map subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
36
286c2e3cc105 client: moved Zoom component to map subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
37 <script>
5036
8f421cd3c746 client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents: 3167
diff changeset
38 import { mapState } from "vuex";
3166
286c2e3cc105 client: moved Zoom component to map subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
39 /* This is Free Software under GNU Affero General Public License v >= 3.0
286c2e3cc105 client: moved Zoom component to map subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
40 * without warranty, see README.md and license for details.
286c2e3cc105 client: moved Zoom component to map subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
41 *
286c2e3cc105 client: moved Zoom component to map subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
42 * SPDX-License-Identifier: AGPL-3.0-or-later
286c2e3cc105 client: moved Zoom component to map subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
43 * License-Filename: LICENSES/AGPL-3.0.txt
286c2e3cc105 client: moved Zoom component to map subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
44 *
286c2e3cc105 client: moved Zoom component to map subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
45 * Copyright (C) 2018 by via donau
286c2e3cc105 client: moved Zoom component to map subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
46 * – Österreichische Wasserstraßen-Gesellschaft mbH
286c2e3cc105 client: moved Zoom component to map subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
47 * Software engineering by Intevation GmbH
286c2e3cc105 client: moved Zoom component to map subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
48 *
286c2e3cc105 client: moved Zoom component to map subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
49 * Author(s):
286c2e3cc105 client: moved Zoom component to map subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
50 * Markus Kottländer <markus@intevation.de>
286c2e3cc105 client: moved Zoom component to map subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
51 * Thomas Junk <thomas.junk@intevation.de>
286c2e3cc105 client: moved Zoom component to map subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
52 */
286c2e3cc105 client: moved Zoom component to map subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
53 export default {
286c2e3cc105 client: moved Zoom component to map subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
54 props: ["map"],
286c2e3cc105 client: moved Zoom component to map subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
55 computed: {
5036
8f421cd3c746 client: Implemented first version of time-sliding
Fadi Abbud <fadi.abbud@intevation.de>
parents: 3167
diff changeset
56 ...mapState("application", ["showTimeSlider"]),
3166
286c2e3cc105 client: moved Zoom component to map subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
57 zoomLevel: {
286c2e3cc105 client: moved Zoom component to map subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
58 get() {
286c2e3cc105 client: moved Zoom component to map subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
59 return this.map.getView().getZoom();
286c2e3cc105 client: moved Zoom component to map subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
60 },
286c2e3cc105 client: moved Zoom component to map subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
61 set(value) {
286c2e3cc105 client: moved Zoom component to map subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
62 this.map.getView().animate({ zoom: value, duration: 300 });
286c2e3cc105 client: moved Zoom component to map subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
63 }
286c2e3cc105 client: moved Zoom component to map subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
64 }
286c2e3cc105 client: moved Zoom component to map subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
65 },
286c2e3cc105 client: moved Zoom component to map subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
66 methods: {
286c2e3cc105 client: moved Zoom component to map subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
67 zoomIn() {
286c2e3cc105 client: moved Zoom component to map subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
68 this.zoomLevel = this.zoomLevel + 1;
286c2e3cc105 client: moved Zoom component to map subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
69 },
286c2e3cc105 client: moved Zoom component to map subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
70 zoomOut() {
286c2e3cc105 client: moved Zoom component to map subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
71 this.zoomLevel = this.zoomLevel - 1;
286c2e3cc105 client: moved Zoom component to map subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
72 }
286c2e3cc105 client: moved Zoom component to map subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
73 }
286c2e3cc105 client: moved Zoom component to map subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
74 };
286c2e3cc105 client: moved Zoom component to map subdirectory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
75 </script>