--- a/client/src/drawtool/Drawtool.vue	Tue Nov 20 12:47:16 2018 +0100
+++ b/client/src/drawtool/Drawtool.vue	Tue Nov 20 13:03:24 2018 +0100
@@ -1,13 +1,13 @@
 <template>
     <div class="d-flex flex-column">
-        <div @click="toggleLineMode" class="ui-element d-flex shadow drawtool bg-white mx-3 mb-3 p-2 rounded">
-            <i :class="['fa fa-pencil', {inverted: drawMode === 'LineString'}]"></i>
+        <div @click="toggleLineTool" class="ui-element d-flex shadow drawtool bg-white mx-3 mb-3 p-2 rounded">
+            <i :class="['fa fa-pencil', {inverted: lineTool && lineTool.getActive()}]"></i>
         </div>
-        <div @click="togglePolygonMode" class="ui-element d-flex shadow drawtool bg-white mx-3 mb-3 p-2 rounded">
-            <i :class="['fa fa-edit', {inverted: drawMode === 'Polygon'}]"></i>
+        <div @click="togglePolygonTool" class="ui-element d-flex shadow drawtool bg-white mx-3 mb-3 p-2 rounded">
+            <i :class="['fa fa-edit', {inverted: polygonTool && polygonTool.getActive()}]"></i>
         </div>
-        <div @click="toggleCutMode" class="ui-element d-flex shadow drawtool bg-white mx-3 mb-3 p-2 rounded" v-if="selectedSurvey">
-            <i :class="['fa fa-area-chart', {inverted: cutMode}]"></i>
+        <div @click="toggleCutTool" class="ui-element d-flex shadow drawtool bg-white mx-3 mb-3 p-2 rounded" v-if="selectedSurvey">
+            <i :class="['fa fa-area-chart', {inverted: cutTool && cutTool.getActive()}]"></i>
         </div>
     </div>
 </template>
@@ -47,94 +47,96 @@
   computed: {
     ...mapGetters("map", ["getLayerByName"]),
     ...mapState("map", [
-      "drawMode",
-      "drawTool",
-      "cutMode",
+      "lineTool",
+      "polygonTool",
       "cutTool",
       "openLayersMap"
     ]),
     ...mapState("bottlenecks", ["selectedSurvey"])
   },
   methods: {
-    toggleLineMode() {
-      this.disableDrawTool();
-      this.disableCutTool();
-      this.$store.commit(
-        "map/drawMode",
-        this.drawMode !== "LineString" ? "LineString" : null
-      );
-      this.$store.commit("map/cutMode", null);
-      if (this.drawMode) this.enableDrawTool();
+    toggleLineTool() {
+      this.lineTool.setActive(!this.lineTool.getActive());
+      this.polygonTool.setActive(false);
+      this.cutTool.setActive(false);
+      this.$store.commit("map/setCurrentMeasurement", null);
+      this.getLayerByName("Draw Tool").data.getSource().clear();
+    },
+    togglePolygonTool() {
+      this.polygonTool.setActive(!this.polygonTool.getActive());
+      this.lineTool.setActive(false);
+      this.cutTool.setActive(false);
+      this.$store.commit("map/setCurrentMeasurement", null);
+      this.getLayerByName("Draw Tool").data.getSource().clear();
+    },
+    toggleCutTool() {
+      this.cutTool.setActive(!this.cutTool.getActive());
+      this.lineTool.setActive(false);
+      this.polygonTool.setActive(false);
+      this.$store.commit("map/setCurrentMeasurement", null);
     },
-    togglePolygonMode() {
-      this.disableDrawTool();
-      this.disableCutTool();
-      this.$store.commit(
-        "map/drawMode",
-        this.drawMode !== "Polygon" ? "Polygon" : null
-      );
-      this.$store.commit("map/cutMode", null);
-      if (this.drawMode) this.enableDrawTool();
+    lineEnd(event) {
+      const length = getLength(event.feature.getGeometry());
+      this.$store.commit("map/setCurrentMeasurement", {
+        quantity: "Length",
+        unitSymbol: "m",
+        value: Math.round(length * 10) / 10
+      });
+      this.$store.commit("application/showIdentify", true);
     },
-    toggleCutMode() {
-      this.disableCutTool();
-      this.disableDrawTool();
-      this.$store.commit("map/cutMode", !this.cutMode);
-      this.$store.commit("map/drawMode", null);
-      if (this.cutMode) this.enableCutTool();
+    polygonEnd(event) {
+      const areaSize = getArea(event.feature.getGeometry());
+      this.$store.commit("map/setCurrentMeasurement", {
+        quantity: "Area",
+        unitSymbol: areaSize > 100000 ? "km²" : "m²",
+        value:
+          areaSize > 100000
+            // convert into 1 km² == 1000*1000 m² and round to 1000 m²
+            ? Math.round(areaSize / 1000) / 1000
+            : Math.round(areaSize)
+      });
+      this.$store.commit("application/showIdentify", true);
     },
-    enableDrawTool() {
+    cutEnd(event) {
+      this.$store.dispatch("fairwayprofile/cut", event.feature);
+    }
+  },
+  created() {
+    if (!this.lineTool) {
       const drawVectorSrc = this.getLayerByName("Draw Tool").data.getSource();
-      drawVectorSrc.clear();
-      const drawTool = new Draw({
+      const lineTool = new Draw({
         source: drawVectorSrc,
-        type: this.drawMode,
-        maxPoints: this.drawMode === "LineString" ? 2 : 50
+        type: "LineString",
+        maxPoints: 2
       });
-      drawTool.on("drawstart", () => {
+      lineTool.setActive(false);
+      lineTool.on("drawstart", () => {
         drawVectorSrc.clear();
         this.$store.commit("map/setCurrentMeasurement", null);
-        // we are not setting an id here, to avoid the regular identify to
-        // pick it up
-        // event.feature.setId("drawn.1"); // unique id for new feature
       });
-      drawTool.on("drawend", this.drawEnd);
-      this.$store.commit("map/drawTool", drawTool);
-      this.openLayersMap.addInteraction(drawTool);
-    },
-    disableDrawTool() {
-      this.$store.commit("map/setCurrentMeasurement", null);
-      this.getLayerByName("Draw Tool")
-        .data.getSource()
-        .clear();
-      this.openLayersMap.removeInteraction(this.drawTool);
-      this.$store.commit("map/drawTool", null);
-    },
-    drawEnd(event) {
-      if (this.drawMode === "Polygon") {
-        const areaSize = getArea(event.feature.getGeometry());
-        // also place the a rounded areaSize in a property,
-        // so identify will show it
-        this.$store.commit("map/setCurrentMeasurement", {
-          quantity: "Area",
-          unitSymbol: areaSize > 100000 ? "km²" : "m²",
-          value:
-            areaSize > 100000
-              ? Math.round(areaSize / 1000) / 1000 // convert into 1 km² == 1000*1000 m² and round to 1000 m²
-              : Math.round(areaSize)
-        });
-      }
-      if (this.drawMode === "LineString") {
-        const length = getLength(event.feature.getGeometry());
-        this.$store.commit("map/setCurrentMeasurement", {
-          quantity: "Length",
-          unitSymbol: "m",
-          value: Math.round(length * 10) / 10
-        });
-      }
-      this.$store.commit("application/showIdentify", true);
-    },
-    enableCutTool() {
+      lineTool.on("drawend", this.lineEnd);
+      this.$store.commit("map/lineTool", lineTool);
+      this.openLayersMap.addInteraction(lineTool);
+    }
+
+    if (!this.polygonTool) {
+      const drawVectorSrc = this.getLayerByName("Draw Tool").data.getSource();
+      const polygonTool = new Draw({
+        source: drawVectorSrc,
+        type: "Polygon",
+        maxPoints: 50
+      });
+      polygonTool.setActive(false);
+      polygonTool.on("drawstart", () => {
+        drawVectorSrc.clear();
+        this.$store.commit("map/setCurrentMeasurement", null);
+      });
+      polygonTool.on("drawend", this.polygonEnd);
+      this.$store.commit("map/polygonTool", polygonTool);
+      this.openLayersMap.addInteraction(polygonTool);
+    }
+
+    if (!this.cutTool) {
       const cutVectorSrc = this.getLayerByName("Cut Tool").data.getSource();
       const cutTool = new Draw({
         source: cutVectorSrc,
@@ -153,33 +155,23 @@
           })
         })
       });
+      cutTool.setActive(false);
       cutTool.on("drawstart", () => {
         cutVectorSrc.clear();
-        // we are not setting an id here, to avoid the regular identify to
-        // pick it up
-        // event.feature.setId("drawn.1"); // unique id for new feature
       });
       cutTool.on("drawend", this.cutEnd);
       this.$store.commit("map/cutTool", cutTool);
       this.openLayersMap.addInteraction(cutTool);
-    },
-    disableCutTool() {
-      this.$store.commit("map/setCurrentMeasurement", null);
-      this.openLayersMap.removeInteraction(this.cutTool);
-      this.$store.commit("map/cutTool", null);
-    },
-    cutEnd(event) {
-      this.$store.dispatch("fairwayprofile/cut", event.feature);
     }
   },
   mounted() {
     window.addEventListener("keydown", e => {
       // Escape
       if (e.keyCode === 27) {
-        this.$store.commit("map/drawMode", null);
-        this.$store.commit("map/cutMode", false);
-        this.disableDrawTool();
-        this.disableCutTool();
+        this.lineTool.setActive(false);
+        this.polygonTool.setActive(false);
+        this.cutTool.setActive(false);
+        this.getLayerByName("Draw Tool").data.getSource().clear();
       }
     });
   }