comparison client/src/components/toolbar/Polygontool.vue @ 3062:87e0422cffa7

client: draw/cut tools work now with multiple maps
author Markus Kottlaender <markus@intevation.de>
date Tue, 16 Apr 2019 12:49:29 +0200
parents c71373594719
children
comparison
equal deleted inserted replaced
3061:563176194d74 3062:87e0422cffa7
1 <template> 1 <template>
2 <div 2 <div @click="toggle" class="toolbar-button" v-tooltip.right="label">
3 @click="togglePolygonTool"
4 class="toolbar-button"
5 v-tooltip.right="label"
6 >
7 <font-awesome-icon 3 <font-awesome-icon
8 icon="draw-polygon" 4 icon="draw-polygon"
9 :class="{ 'text-info': polygonTool && polygonTool.getActive() }" 5 :class="{ 'text-info': polygonToolEnabled }"
10 /> 6 />
11 </div> 7 </div>
12 </template> 8 </template>
13 9
14 <script> 10 <script>
23 * Software engineering by Intevation GmbH 19 * Software engineering by Intevation GmbH
24 * 20 *
25 * Author(s): 21 * Author(s):
26 * Markus Kottländer <markus.kottlaender@intevation.de> 22 * Markus Kottländer <markus.kottlaender@intevation.de>
27 */ 23 */
28 import { mapState, mapGetters } from "vuex"; 24 import { mapState } from "vuex";
29 25
30 export default { 26 export default {
31 name: "polygontool", 27 name: "polygontool",
32 computed: { 28 computed: {
33 ...mapState("map", ["lineTool", "polygonTool", "cutTool"]), 29 ...mapState("map", ["openLayersMaps", "polygonToolEnabled"]),
34 ...mapGetters("map", ["openLayersMap"]),
35 label() { 30 label() {
36 return this.$gettext("Measure Area"); 31 return this.$gettext("Measure Area");
37 } 32 }
38 }, 33 },
39 methods: { 34 methods: {
40 togglePolygonTool() { 35 toggle() {
41 this.polygonTool.setActive(!this.polygonTool.getActive()); 36 this.$store.commit("map/polygonToolEnabled", !this.polygonToolEnabled);
42 this.lineTool.setActive(false); 37 this.$store.commit("map/lineToolEnabled", false);
43 this.cutTool.setActive(false); 38 this.$store.commit("map/cutToolEnabled", false);
44 this.$store.commit("map/setCurrentMeasurement", null); 39 this.$store.commit("map/setCurrentMeasurement", null);
45 this.openLayersMap 40 this.openLayersMaps.forEach(m => {
46 .getLayer("DRAWTOOL") 41 m.getLayer("DRAWTOOL")
47 .getSource() 42 .getSource()
48 .clear(); 43 .clear();
44 });
49 } 45 }
50 } 46 }
51 }; 47 };
52 </script> 48 </script>