# HG changeset patch
# User Thomas Junk <thomas.junk@intevation.de>
# Date 1566995479 -7200
# Node ID 9abb63b6b80acefa15eeecc558bf7cce5f172412
# Parent  dd8ec623b9698ff7fedb6fc66df98b1cb8f290ea
Legend: make styles reloadable

diff -r dd8ec623b969 -r 9abb63b6b80a client/src/components/layers/LegendElement.vue
--- a/client/src/components/layers/LegendElement.vue	Wed Aug 28 11:42:44 2019 +0200
+++ b/client/src/components/layers/LegendElement.vue	Wed Aug 28 14:31:19 2019 +0200
@@ -1,5 +1,12 @@
 <template>
-  <div :id="id" class="legendelement"></div>
+  <div :id="id" class="legendelement">
+    <img
+      v-if="!isVectorLayer"
+      style="margin: 0 auto;display: flex;"
+      :src="imgSrc"
+      :key="id"
+    />
+  </div>
 </template>
 
 <script>
@@ -30,11 +37,22 @@
   props: ["layer"],
   data: function() {
     return {
-      myMap: null
+      myMap: null,
+      src: null,
+      url: null
     };
   },
   computed: {
     ...mapState("map", ["layers", "ongoingRefresh"]),
+    isVectorLayer() {
+      return this.layer.getType() === "VECTOR";
+    },
+    imgSrc() {
+      if (this.layer.get("id") === "DISTANCEMARKSAXIS") {
+        return require("@/assets/distancemarks-axis.png");
+      }
+      return this.src;
+    },
     id() {
       return (
         "legendelement-" +
@@ -53,8 +71,19 @@
   watch: {
     ongoingRefresh() {
       if (this.ongoingRefresh) return;
-      if (this.layer.getType() == "VECTOR") {
+      if (
+        this.layer.get("id") === "OPENSTREETMAP" ||
+        this.layer.get("id") === "INLANDECDIS" ||
+        this.layer.get("id") === "BOTTLENECKISOLINE" ||
+        this.layer.get("id") === "DIFFERENCES"
+      ) {
+        // TODO: Do something useful?
+        return;
+      }
+      if (this.isVectorLayer) {
         this.recreateLayers();
+      } else {
+        this.loadImageSrc();
       }
     },
     mstyle(newStyle, oldStyle) {
@@ -77,29 +106,24 @@
         // TODO: Do something useful?
         return;
       }
-      let img = document.createElement("img");
-      img.setAttribute("style", "margin: 0 auto;display: flex;");
-      if (this.layer.get("id") === "DISTANCEMARKSAXIS") {
-        img.setAttribute("src", require("@/assets/distancemarks-axis.png"));
-      } else {
-        // for simple WMS legends.
-        let url =
-          `/internal/wms?REQUEST=GetLegendGraphic&VERSION=1.0.0&FORMAT=image/png&WIDTH=20&HEIGHT=20&LAYER=` +
-          this.layer.getSource().getParams().LAYERS +
-          `&legend_options=columns:4;fontAntiAliasing:true`;
-        HTTP.get(url, {
-          headers: {
-            "X-Gemma-Auth": localStorage.getItem("token")
-          },
-          responseType: "blob"
-        }).then(response => {
-          img.setAttribute("src", URL.createObjectURL(response.data));
-        });
-      }
-      this.$el.appendChild(img);
+      this.url =
+        `/internal/wms?REQUEST=GetLegendGraphic&VERSION=1.0.0&FORMAT=image/png&WIDTH=20&HEIGHT=20&LAYER=` +
+        this.layer.getSource().getParams().LAYERS +
+        `&legend_options=columns:4;fontAntiAliasing:true`;
+      this.loadImageSrc();
     }
   },
   methods: {
+    loadImageSrc() {
+      HTTP.get(this.url, {
+        headers: {
+          "X-Gemma-Auth": localStorage.getItem("token")
+        },
+        responseType: "blob"
+      }).then(response => {
+        this.src = URL.createObjectURL(response.data);
+      });
+    },
     recreateLayers() {
       let vector = this.createVectorLayer();