# HG changeset patch
# User Bernhard Reiter <bernhard@intevation.de>
# Date 1540542712 -7200
# Node ID f8f398e36e3859ad09571689c8651033a22115b8
# Parent  12312fb1cda227840999d3502d7cb77f56776c1e
client: improve area measurement

 * Change way of transfering data for display towards using the store
   where different quantities, symbols can be used. This way we do not
   depend on the identify tool to find our feature. It avoids the problem
   that the final click on a snap to point for an area may not hit our
   feshly drawn feature.

   At the same time it will get easier to display the measurement result
   in a different way, like translating the quantity.
   Right now it is displayed on top of the identified box.

diff -r 12312fb1cda2 -r f8f398e36e38 client/src/identify/Identify.vue
--- a/client/src/identify/Identify.vue	Fri Oct 26 10:05:20 2018 +0200
+++ b/client/src/identify/Identify.vue	Fri Oct 26 10:31:52 2018 +0200
@@ -12,6 +12,11 @@
                 </div>
                 <hr>
                 <div class="d-flex flex-column features">
+                    <small v-if="currentMeasurement">
+                      {{ currentMeasurement.quantity }}
+                      ({{ currentMeasurement.unitSymbol }}):
+                      {{ currentMeasurement.value }}
+                    </small>
                     <div v-for="feature of identifiedFeatures" :key="feature.getId()">
                         <div v-if="feature.getId()">
                             {{ feature.getId().replace(/[.][^.]*$/,"") /* cut away everything from the last . to the end */}}:
@@ -104,7 +109,7 @@
   },
   computed: {
     ...mapGetters("application", ["versionStr"]),
-    ...mapState("identifystore", ["identifiedFeatures"]),
+    ...mapState("identifystore", ["identifiedFeatures", "currentMeasurement"]),
     identifyStyle() {
       return {
         "ui-element": true,
diff -r 12312fb1cda2 -r f8f398e36e38 client/src/map/Maplayer.vue
--- a/client/src/map/Maplayer.vue	Fri Oct 26 10:05:20 2018 +0200
+++ b/client/src/map/Maplayer.vue	Fri Oct 26 10:31:52 2018 +0200
@@ -139,6 +139,8 @@
       });
     },
     removeCurrentInteraction() {
+      this.$store.commit("identifystore/setCurrentMeasurement", null);
+      this.vectorSource.clear();
       this.openLayersMap.removeInteraction(this.interaction);
       this.interaction = null;
     },
@@ -149,10 +151,12 @@
         type: drawMode,
         maxPoints: drawMode === "LineString" ? 2 : 50
       });
-      draw.on("drawstart", event => {
+      draw.on("drawstart", () => {
         this.vectorSource.clear();
         this.$store.commit("identifystore/setCurrentMeasurement", null);
-        event.feature.setId("drawn.1"); // unique id for new feature
+        // 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
       });
       draw.on("drawend", this.drawEnd);
       return draw;
@@ -163,18 +167,27 @@
         // also place the a rounded areaSize in a property,
         // so identify will show it
         if (areaSize > 100000) {
-          // convert into 1 km² == 1000*1000 m² and round to 1000 m²
-          event.feature.set("area (km²)", Math.round(areaSize / 1000) / 1000);
+          this.$store.commit("identifystore/setCurrentMeasurement", {
+            quantity: "Area",
+            unitSymbol: "km²",
+            // convert into 1 km² == 1000*1000 m² and round to 1000 m²
+            value: Math.round(areaSize / 1000) / 1000
+          });
         } else {
-          event.feature.set("area (m²)", Math.round(areaSize));
+          this.$store.commit("identifystore/setCurrentMeasurement", {
+            quantity: "Area",
+            unitSymbol: "m²",
+            value: Math.round(areaSize)
+          });
         }
       }
       if (this.drawMode === "LineString") {
         const length = getLength(event.feature.getGeometry());
-        this.$store.commit("identifystore/setCurrentMeasurement", length);
-        // also place the a rounded length in a property,
-        // so identify will show it
-        event.feature.set("length (m)", Math.round(length * 10) / 10);
+        this.$store.commit("identifystore/setCurrentMeasurement", {
+          quantity: "Length",
+          unitSymbol: "m",
+          value: Math.round(length * 10) / 10
+        });
       }
 
       // if a survey has been selected, request a profile