Mercurial > gemma

annotate client/src/components/Zoom.vue @ 2625:fd93babdf8e6

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
client: popup: made content padding optional (for full-width tables)
author Markus Kottlaender <markus@intevation.de>
date Wed, 13 Mar 2019 16:24:35 +0100
parents 83b938bf4da9
children 6c5364ff0abb
Ignore whitespace changes - Everywhere: Within whitespace: At end of lines:
rev   line source
1272
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
1 <template>
2566
83b938bf4da9 client: prepared store and minimized splitscreens for multiple simultaneous diagrams
Markus Kottlaender <markus@intevation.de>
parents: 2549
diff changeset
2 <div :class="['zoom-buttons shadow-xs', { splitscreen: showSplitscreen }]">
1480
9b81ac91a43e fix: linting
Thomas Junk <thomas.junk@intevation.de>
parents: 1449
diff changeset
3 <button
2566
83b938bf4da9 client: prepared store and minimized splitscreens for multiple simultaneous diagrams
Markus Kottlaender <markus@intevation.de>
parents: 2549
diff changeset
4 class="zoom-button border-0 bg-white rounded-left ui-element"
1480
9b81ac91a43e fix: linting
Thomas Junk <thomas.junk@intevation.de>
parents: 1449
diff changeset
5 @click="zoomOut"
9b81ac91a43e fix: linting
Thomas Junk <thomas.junk@intevation.de>
parents: 1449
diff changeset
6 >
1360
3fee649d3d5d add headers for licensing to some client files
Fadi Abbud <fadi.abbud@intevation.de>
parents: 1299
diff changeset
7 <font-awesome-icon icon="minus"></font-awesome-icon>
3fee649d3d5d add headers for licensing to some client files
Fadi Abbud <fadi.abbud@intevation.de>
parents: 1299
diff changeset
8 </button>
3fee649d3d5d add headers for licensing to some client files
Fadi Abbud <fadi.abbud@intevation.de>
parents: 1299
diff changeset
9 <button
2566
83b938bf4da9 client: prepared store and minimized splitscreens for multiple simultaneous diagrams
Markus Kottlaender <markus@intevation.de>
parents: 2549
diff changeset
10 class="zoom-button border-0 bg-white ui-element border-right"
2184
826fc7309370 client: Added refresh button to reload the WFS layer data.
Raimund Renkert <raimund.renkert@intevation.de>
parents: 1558
diff changeset
11 @click="refreshMap"
826fc7309370 client: Added refresh button to reload the WFS layer data.
Raimund Renkert <raimund.renkert@intevation.de>
parents: 1558
diff changeset
12 >
826fc7309370 client: Added refresh button to reload the WFS layer data.
Raimund Renkert <raimund.renkert@intevation.de>
parents: 1558
diff changeset
13 <font-awesome-icon icon="redo"></font-awesome-icon>
826fc7309370 client: Added refresh button to reload the WFS layer data.
Raimund Renkert <raimund.renkert@intevation.de>
parents: 1558
diff changeset
14 </button>
826fc7309370 client: Added refresh button to reload the WFS layer data.
Raimund Renkert <raimund.renkert@intevation.de>
parents: 1558
diff changeset
15 <button
2566
83b938bf4da9 client: prepared store and minimized splitscreens for multiple simultaneous diagrams
Markus Kottlaender <markus@intevation.de>
parents: 2549
diff changeset
16 class="zoom-button border-0 bg-white rounded-right ui-element border-right"
1360
3fee649d3d5d add headers for licensing to some client files
Fadi Abbud <fadi.abbud@intevation.de>
parents: 1299
diff changeset
17 @click="zoomIn"
1279
60e15c2d26a2 licensing info updated
Thomas Junk <thomas.junk@intevation.de>
parents: 1272
diff changeset
18 >
1360
3fee649d3d5d add headers for licensing to some client files
Fadi Abbud <fadi.abbud@intevation.de>
parents: 1299
diff changeset
19 <font-awesome-icon icon="plus"></font-awesome-icon>
3fee649d3d5d add headers for licensing to some client files
Fadi Abbud <fadi.abbud@intevation.de>
parents: 1299
diff changeset
20 </button>
3fee649d3d5d add headers for licensing to some client files
Fadi Abbud <fadi.abbud@intevation.de>
parents: 1299
diff changeset
21 </div>
1272
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
22 </template>
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
23
2566
83b938bf4da9 client: prepared store and minimized splitscreens for multiple simultaneous diagrams
Markus Kottlaender <markus@intevation.de>
parents: 2549
diff changeset
24 <style lang="sass" scoped>
83b938bf4da9 client: prepared store and minimized splitscreens for multiple simultaneous diagrams
Markus Kottlaender <markus@intevation.de>
parents: 2549
diff changeset
25 .zoom-buttons
83b938bf4da9 client: prepared store and minimized splitscreens for multiple simultaneous diagrams
Markus Kottlaender <markus@intevation.de>
parents: 2549
diff changeset
26 position: absolute
83b938bf4da9 client: prepared store and minimized splitscreens for multiple simultaneous diagrams
Markus Kottlaender <markus@intevation.de>
parents: 2549
diff changeset
27 bottom: $small-offset
83b938bf4da9 client: prepared store and minimized splitscreens for multiple simultaneous diagrams
Markus Kottlaender <markus@intevation.de>
parents: 2549
diff changeset
28 left: 50%
83b938bf4da9 client: prepared store and minimized splitscreens for multiple simultaneous diagrams
Markus Kottlaender <markus@intevation.de>
parents: 2549
diff changeset
29 margin-left: -($icon-width * 1.5)
83b938bf4da9 client: prepared store and minimized splitscreens for multiple simultaneous diagrams
Markus Kottlaender <markus@intevation.de>
parents: 2549
diff changeset
30 margin-bottom: 0
83b938bf4da9 client: prepared store and minimized splitscreens for multiple simultaneous diagrams
Markus Kottlaender <markus@intevation.de>
parents: 2549
diff changeset
31 transition: margin-bottom 0.3s
83b938bf4da9 client: prepared store and minimized splitscreens for multiple simultaneous diagrams
Markus Kottlaender <markus@intevation.de>
parents: 2549
diff changeset
32 &.splitscreen
83b938bf4da9 client: prepared store and minimized splitscreens for multiple simultaneous diagrams
Markus Kottlaender <markus@intevation.de>
parents: 2549
diff changeset
33 margin-bottom: 50vh
1272
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
34
2566
83b938bf4da9 client: prepared store and minimized splitscreens for multiple simultaneous diagrams
Markus Kottlaender <markus@intevation.de>
parents: 2549
diff changeset
35 .zoom-button
83b938bf4da9 client: prepared store and minimized splitscreens for multiple simultaneous diagrams
Markus Kottlaender <markus@intevation.de>
parents: 2549
diff changeset
36 min-height: $icon-width
83b938bf4da9 client: prepared store and minimized splitscreens for multiple simultaneous diagrams
Markus Kottlaender <markus@intevation.de>
parents: 2549
diff changeset
37 min-width: $icon-width
83b938bf4da9 client: prepared store and minimized splitscreens for multiple simultaneous diagrams
Markus Kottlaender <markus@intevation.de>
parents: 2549
diff changeset
38 z-index: 1
83b938bf4da9 client: prepared store and minimized splitscreens for multiple simultaneous diagrams
Markus Kottlaender <markus@intevation.de>
parents: 2549
diff changeset
39 outline: none
83b938bf4da9 client: prepared store and minimized splitscreens for multiple simultaneous diagrams
Markus Kottlaender <markus@intevation.de>
parents: 2549
diff changeset
40 color: #666
1272
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
41 </style>
2566
83b938bf4da9 client: prepared store and minimized splitscreens for multiple simultaneous diagrams
Markus Kottlaender <markus@intevation.de>
parents: 2549
diff changeset
42
1272
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
43 <script>
1279
60e15c2d26a2 licensing info updated
Thomas Junk <thomas.junk@intevation.de>
parents: 1272
diff changeset
44 /* This is Free Software under GNU Affero General Public License v >= 3.0
60e15c2d26a2 licensing info updated
Thomas Junk <thomas.junk@intevation.de>
parents: 1272
diff changeset
45 * without warranty, see README.md and license for details.
60e15c2d26a2 licensing info updated
Thomas Junk <thomas.junk@intevation.de>
parents: 1272
diff changeset
46 *
60e15c2d26a2 licensing info updated
Thomas Junk <thomas.junk@intevation.de>
parents: 1272
diff changeset
47 * SPDX-License-Identifier: AGPL-3.0-or-later
60e15c2d26a2 licensing info updated
Thomas Junk <thomas.junk@intevation.de>
parents: 1272
diff changeset
48 * License-Filename: LICENSES/AGPL-3.0.txt
60e15c2d26a2 licensing info updated
Thomas Junk <thomas.junk@intevation.de>
parents: 1272
diff changeset
49 *
1360
3fee649d3d5d add headers for licensing to some client files
Fadi Abbud <fadi.abbud@intevation.de>
parents: 1299
diff changeset
50 * Copyright (C) 2018 by via donau
1279
60e15c2d26a2 licensing info updated
Thomas Junk <thomas.junk@intevation.de>
parents: 1272
diff changeset
51 * – Österreichische Wasserstraßen-Gesellschaft mbH
60e15c2d26a2 licensing info updated
Thomas Junk <thomas.junk@intevation.de>
parents: 1272
diff changeset
52 * Software engineering by Intevation GmbH
60e15c2d26a2 licensing info updated
Thomas Junk <thomas.junk@intevation.de>
parents: 1272
diff changeset
53 *
60e15c2d26a2 licensing info updated
Thomas Junk <thomas.junk@intevation.de>
parents: 1272
diff changeset
54 * Author(s):
1360
3fee649d3d5d add headers for licensing to some client files
Fadi Abbud <fadi.abbud@intevation.de>
parents: 1299
diff changeset
55 * Markus Kottländer <markus@intevation.de>
1279
60e15c2d26a2 licensing info updated
Thomas Junk <thomas.junk@intevation.de>
parents: 1272
diff changeset
56 * Thomas Junk <thomas.junk@intevation.de>
60e15c2d26a2 licensing info updated
Thomas Junk <thomas.junk@intevation.de>
parents: 1272
diff changeset
57 */
1272
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
58 import { mapState } from "vuex";
2190
ecb0ad836aa0 linting
Thomas Junk <thomas.junk@intevation.de>
parents: 2185
diff changeset
59 import { Vector as VectorLayer } from "ol/layer.js";
1272
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
60
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
61 export default {
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
62 name: "zoom",
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
63 computed: {
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
64 ...mapState("map", ["openLayersMap"]),
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
65 ...mapState("application", ["showSplitscreen"]),
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
66 zoomLevel: {
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
67 get() {
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
68 return this.openLayersMap.getView().getZoom();
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
69 },
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
70 set(value) {
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
71 this.openLayersMap.getView().animate({ zoom: value, duration: 300 });
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
72 }
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
73 }
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
74 },
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
75 methods: {
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
76 zoomIn() {
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
77 this.zoomLevel = this.zoomLevel + 1;
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
78 },
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
79 zoomOut() {
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
80 this.zoomLevel = this.zoomLevel - 1;
2184
826fc7309370 client: Added refresh button to reload the WFS layer data.
Raimund Renkert <raimund.renkert@intevation.de>
parents: 1558
diff changeset
81 },
826fc7309370 client: Added refresh button to reload the WFS layer data.
Raimund Renkert <raimund.renkert@intevation.de>
parents: 1558
diff changeset
82 refreshMap() {
826fc7309370 client: Added refresh button to reload the WFS layer data.
Raimund Renkert <raimund.renkert@intevation.de>
parents: 1558
diff changeset
83 let layers = this.openLayersMap.getLayers().getArray();
826fc7309370 client: Added refresh button to reload the WFS layer data.
Raimund Renkert <raimund.renkert@intevation.de>
parents: 1558
diff changeset
84 for (let i = 0; i < layers.length; i++) {
826fc7309370 client: Added refresh button to reload the WFS layer data.
Raimund Renkert <raimund.renkert@intevation.de>
parents: 1558
diff changeset
85 let layer = layers[i];
2342
4e325dda6a2d linting
Thomas Junk <thomas.junk@intevation.de>
parents: 2340
diff changeset
86 if (
4e325dda6a2d linting
Thomas Junk <thomas.junk@intevation.de>
parents: 2340
diff changeset
87 layer instanceof VectorLayer &&
2340
236da7c20eac client: Avoid "drawable" layers to be refreshed.
Raimund Renkert <raimund.renkert@intevation.de>
parents: 2190
diff changeset
88 layer.get("source").loader_.name != "VOID"
236da7c20eac client: Avoid "drawable" layers to be refreshed.
Raimund Renkert <raimund.renkert@intevation.de>
parents: 2190
diff changeset
89 ) {
2342
4e325dda6a2d linting
Thomas Junk <thomas.junk@intevation.de>
parents: 2340
diff changeset
90 layer.getSource().clear(true);
4e325dda6a2d linting
Thomas Junk <thomas.junk@intevation.de>
parents: 2340
diff changeset
91 layer.getSource().refresh({ force: true });
2184
826fc7309370 client: Added refresh button to reload the WFS layer data.
Raimund Renkert <raimund.renkert@intevation.de>
parents: 1558
diff changeset
92 }
826fc7309370 client: Added refresh button to reload the WFS layer data.
Raimund Renkert <raimund.renkert@intevation.de>
parents: 1558
diff changeset
93 }
1272
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
94 }
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
95 }
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
96 };
bc55ffaeb639 cleaned up client/src directory
Markus Kottlaender <markus@intevation.de>
parents:
diff changeset
97 </script>