Mercurial > gemma
annotate client/src/components/Zoom.vue @ 2907:ab0a829735f6
client: import stretches: removed unnecessary wrapper method
author | Markus Kottlaender <markus@intevation.de> |
---|---|
date | Tue, 02 Apr 2019 16:55:55 +0200 |
parents | 83b938bf4da9 |
children | 6c5364ff0abb |
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 | 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 | 5 @click="zoomOut" |
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 | 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 | 86 if ( |
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 | 90 layer.getSource().clear(true); |
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> |