Mercurial > gemma

changeset 2909:5105f6ad0176

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
client: stretches: fixed highlighting of selected stretch The vectorloader for each layer can now take a callback to postprocess the returned features. For the stretches layer the selectedStretch (which is now stored in the vuex store) now gets a 'highlighted' flag. The layer respects that flag to alter the styles. A watcher on selectedStretch resets the styles when selectedStretch changes and sets the highlighted flag for the new selectedStretch, if present, otherwise the vectorloader does this job.
author Markus Kottlaender <markus@intevation.de>
date Tue, 02 Apr 2019 18:19:43 +0200
parents 2821113846a9
children c8c7122047a2
files client/src/components/ImportStretches.vue client/src/components/Maplayer.vue client/src/store/imports.js client/src/store/map.js
diffstat 4 files changed, 57 insertions(+), 50 deletions(-) [+]
line wrap: on
line diff
--- a/client/src/components/ImportStretches.vue	Tue Apr 02 17:08:07 2019 +0200
+++ b/client/src/components/ImportStretches.vue	Tue Apr 02 18:19:43 2019 +0200
@@ -303,7 +303,6 @@
 import { LAYERS } from "@/store/map";
 import { HTTP } from "@/lib/http";
 import { sortTable } from "@/lib/mixins";
-import { Stroke, Style, Fill } from "ol/style.js";
 
 export default {
   name: "importstretches",
@@ -343,7 +342,7 @@
     ...mapState("map", ["identifiedFeatures", "currentMeasurement"]),
     ...mapGetters("map", ["getVSourceByName", "getLayerByName"]),
     ...mapGetters("user", ["isSysAdmin"]),
-    ...mapState("imports", ["stretches"]),
+    ...mapState("imports", ["stretches", "selectedStretch"]),
     defineStretchesLabel() {
       return this.$gettext("Define Stretches");
     },
@@ -381,6 +380,16 @@
         this.pipetteStart = false;
         this.pipetteEnd = false;
       }
+    },
+    selectedStretch(stretch) {
+      this.getVSourceByName(LAYERS.STRETCHES)
+        .getFeatures()
+        .forEach(f => {
+          f.set("highlighted", false);
+          if (f.getId() === stretch.id) {
+            f.set("highlighted", true);
+          }
+        });
     }
   },
   methods: {
@@ -460,50 +469,14 @@
       });
     },
     moveMapToStretch(stretch) {
-      //define new style for the selected stretch
-      var newStyle = new Style({
-        stroke: new Stroke({
-          color: "rgba(250, 240, 10, .9)",
-          width: 5
-        }),
-        fill: new Fill({
-          color: "rgba(250, 240, 0, .7)"
-        })
-      });
-      let stretchesLayer = this.getLayerByName(LAYERS.STRETCHES);
-      let oldStyle = stretchesLayer.data.getStyle();
+      this.$store.commit("imports/selectedStretch", stretch);
       this.$store.commit("map/setLayerVisible", LAYERS.STRETCHES);
-      var stretches = stretchesLayer.data.getSource().getFeatures();
-      // change the style when the the stretches are already loaded
-      if (stretches.length) {
-        this.setStretchStyle(stretches, stretch, oldStyle, newStyle);
-      } else {
-        // by choosing stretch first time wating to load the features then change the style
-        stretchesLayer.data.getSource().once("change", () => {
-          this.setStretchStyle(
-            stretchesLayer.data.getSource().getFeatures(),
-            stretch,
-            oldStyle,
-            newStyle
-          );
-        });
-      }
       this.$store.commit("map/moveToExtent", {
         feature: stretch,
         zoom: 17,
         preventZoomOut: true
       });
     },
-    // give the selected stretch new style and set the orginal style to the others
-    setStretchStyle(features, stretch, oldStyle, newStyle) {
-      features.forEach(f => {
-        if (f.id_ === stretch.id) {
-          f.setStyle(newStyle);
-        } else {
-          f.setStyle(oldStyle);
-        }
-      });
-    },
     clean() {
       this.id = "";
       this.edit = false;
--- a/client/src/components/Maplayer.vue	Tue Apr 02 17:08:07 2019 +0200
+++ b/client/src/components/Maplayer.vue	Tue Apr 02 18:19:43 2019 +0200
@@ -67,6 +67,7 @@
     ]),
     ...mapState("bottlenecks", ["selectedSurvey"]),
     ...mapState("application", ["showSplitscreen"]),
+    ...mapState("imports", ["selectedStretch"]),
     hasActiveInteractions() {
       return (
         (this.lineTool && this.lineTool.getActive()) ||
@@ -76,7 +77,12 @@
     }
   },
   methods: {
-    buildVectorLoader(featureRequestOptions, endpoint, vectorSource) {
+    buildVectorLoader(
+      featureRequestOptions,
+      endpoint,
+      vectorSource,
+      featurePostProcessor
+    ) {
       // build a function to be used for VectorSource.setLoader()
       // make use of WFS().writeGetFeature to build the request
       // and use our HTTP library to actually do it
@@ -103,6 +109,9 @@
             var features = new GeoJSON().readFeatures(
               JSON.stringify(response.data)
             );
+            if (featurePostProcessor) {
+              features.map(f => featurePostProcessor(f));
+            }
             vectorSource.addFeatures(features);
             // console.log(
             //   "loaded",
@@ -369,7 +378,13 @@
           geometryName: "area"
         },
         "/internal/wfs",
-        layer.data.getSource()
+        layer.data.getSource(),
+        f => {
+          if (f.getId() === this.selectedStretch.id) {
+            f.set("highlighted", true);
+          }
+          return f;
+        }
       )
     );
     layer.data.setVisible(layer.isVisible);
--- a/client/src/store/imports.js	Tue Apr 02 17:08:07 2019 +0200
+++ b/client/src/store/imports.js	Tue Apr 02 18:19:43 2019 +0200
@@ -32,6 +32,7 @@
     declined: false,
     warning: false,
     stretches: [],
+    selectedStretch: null,
     imports: [],
     reviewed: [],
     show: null,
@@ -128,6 +129,9 @@
     setStretches: (state, stretches) => {
       state.stretches = stretches;
     },
+    selectedStretch: (state, stretch) => {
+      state.selectedStretch = stretch;
+    },
     setReviewed: (state, reviewed) => {
       state.reviewed = reviewed;
     },
--- a/client/src/store/map.js	Tue Apr 02 17:08:07 2019 +0200
+++ b/client/src/store/map.js	Tue Apr 02 18:19:43 2019 +0200
@@ -121,15 +121,30 @@
           source: new VectorSource({
             strategy: bboxStrategy
           }),
-          style: new Style({
-            stroke: new Stroke({
-              color: "rgba(250, 200, 0, .8)",
-              width: 2
-            }),
-            fill: new Fill({
-              color: "rgba(250, 200, 10, .3)"
-            })
-          })
+          style: feature => {
+            let style = new Style({
+              stroke: new Stroke({
+                color: "rgba(250, 200, 0, .8)",
+                width: 2
+              }),
+              fill: new Fill({
+                color: "rgba(250, 200, 10, .3)"
+              })
+            });
+            if (feature.get("highlighted")) {
+              style = new Style({
+                stroke: new Stroke({
+                  color: "rgba(250, 240, 10, .9)",
+                  width: 5
+                }),
+                fill: new Fill({
+                  color: "rgba(250, 240, 0, .7)"
+                })
+              });
+            }
+
+            return style;
+          }
         }),
         isVisible: false
       },