diff client/src/components/toolbar/Linetool.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
line wrap: on
line diff
--- a/client/src/components/toolbar/Linetool.vue	Tue Apr 16 12:39:55 2019 +0200
+++ b/client/src/components/toolbar/Linetool.vue	Tue Apr 16 12:49:29 2019 +0200
@@ -1,9 +1,6 @@
 <template>
-  <div @click="toggleLineTool" class="toolbar-button" v-tooltip.right="label">
-    <font-awesome-icon
-      icon="ruler"
-      :class="{ 'text-info': lineTool && lineTool.getActive() }"
-    />
+  <div @click="toggle" class="toolbar-button" v-tooltip.right="label">
+    <font-awesome-icon icon="ruler" :class="{ 'text-info': lineToolEnabled }" />
   </div>
 </template>
 
@@ -21,27 +18,27 @@
  * Author(s):
  * Markus Kottländer <markus.kottlaender@intevation.de>
  */
-import { mapState, mapGetters } from "vuex";
+import { mapState } from "vuex";
 
 export default {
   name: "linetool",
   computed: {
-    ...mapState("map", ["lineTool", "polygonTool", "cutTool"]),
-    ...mapGetters("map", ["openLayersMap"]),
+    ...mapState("map", ["openLayersMaps", "lineToolEnabled"]),
     label() {
       return this.$gettext("Measure Distance");
     }
   },
   methods: {
-    toggleLineTool() {
-      this.lineTool.setActive(!this.lineTool.getActive());
-      this.polygonTool.setActive(false);
-      this.cutTool.setActive(false);
+    toggle() {
+      this.$store.commit("map/lineToolEnabled", !this.lineToolEnabled);
+      this.$store.commit("map/polygonToolEnabled", false);
+      this.$store.commit("map/cutToolEnabled", false);
       this.$store.commit("map/setCurrentMeasurement", null);
-      this.openLayersMap
-        .getLayer("DRAWTOOL")
-        .getSource()
-        .clear();
+      this.openLayersMaps.forEach(m => {
+        m.getLayer("DRAWTOOL")
+          .getSource()
+          .clear();
+      });
     }
   }
 };