changeset 3044:c71373594719

client: map: prepared store to hold multiple map objects This will be necessary to sync maps, toggle layers per map, etc. Therefore the methods to move the map (moveToExtent, etc.) became actions instead of mutations.
author Markus Kottlaender <markus@intevation.de>
date Sat, 13 Apr 2019 16:02:06 +0200
parents de75404cb5fc
children 44dc837638d9
files client/src/components/Bottlenecks.vue client/src/components/ImportStretches.vue client/src/components/Pdftool.vue client/src/components/Search.vue client/src/components/Zoom.vue client/src/components/fairway/Profiles.vue client/src/components/gauge/Gauges.vue client/src/components/identify/Identify.vue client/src/components/importoverview/BottleneckDetail.vue client/src/components/importoverview/SoundingResultDetail.vue client/src/components/importoverview/StretchDetails.vue client/src/components/layers/Layers.vue client/src/components/map/Map.vue client/src/components/toolbar/Linetool.vue client/src/components/toolbar/Polygontool.vue client/src/components/toolbar/Toolbar.vue client/src/store/bottlenecks.js client/src/store/fairway.js client/src/store/map.js
diffstat 19 files changed, 89 insertions(+), 82 deletions(-) [+]
line wrap: on
line diff
--- a/client/src/components/Bottlenecks.vue	Sat Apr 13 15:28:48 2019 +0200
+++ b/client/src/components/Bottlenecks.vue	Sat Apr 13 16:02:06 2019 +0200
@@ -146,7 +146,7 @@
           this.$store.commit("bottlenecks/selectedSurvey", survey);
         })
         .then(() => {
-          this.$store.commit("map/moveToExtent", {
+          this.$store.dispatch("map/moveToExtent", {
             feature: bottleneck,
             zoom: 17,
             preventZoomOut: true
@@ -163,7 +163,7 @@
           this.$store.commit("bottlenecks/setFirstSurveySelected");
         })
         .then(() => {
-          this.$store.commit("map/moveToExtent", {
+          this.$store.dispatch("map/moveToExtent", {
             feature: bottleneck,
             zoom: 17,
             preventZoomOut: true
--- a/client/src/components/ImportStretches.vue	Sat Apr 13 15:28:48 2019 +0200
+++ b/client/src/components/ImportStretches.vue	Sat Apr 13 16:02:06 2019 +0200
@@ -338,11 +338,8 @@
   },
   computed: {
     ...mapState("application", ["searchQuery"]),
-    ...mapState("map", [
-      "openLayersMap",
-      "identifiedFeatures",
-      "currentMeasurement"
-    ]),
+    ...mapState("map", ["identifiedFeatures", "currentMeasurement"]),
+    ...mapGetters("map", ["openLayersMap"]),
     ...mapGetters("user", ["isSysAdmin"]),
     ...mapState("imports", ["stretches"]),
     defineStretchesLabel() {
@@ -463,7 +460,7 @@
     moveMapToStretch(stretch) {
       this.$store.commit("imports/selectedStretchId", stretch.id);
       this.openLayersMap.getLayer("STRETCHES").setVisible(true);
-      this.$store.commit("map/moveToExtent", {
+      this.$store.dispatch("map/moveToExtent", {
         feature: stretch,
         zoom: 17,
         preventZoomOut: true
--- a/client/src/components/Pdftool.vue	Sat Apr 13 15:28:48 2019 +0200
+++ b/client/src/components/Pdftool.vue	Sat Apr 13 16:02:06 2019 +0200
@@ -93,7 +93,7 @@
  * * Bernhard E. Reiter <bernhard@intevation.de>
  * * Fadi Abbud <fadi.abbud@intevation.de>
  */
-import { mapState } from "vuex";
+import { mapState, mapGetters } from "vuex";
 import jsPDF from "jspdf";
 import "@/lib/font-linbiolinum";
 import { getPointResolution } from "ol/proj";
@@ -165,8 +165,9 @@
   computed: {
     ...mapState("application", ["showPdfTool", "logoForPDF"]),
     ...mapState("bottlenecks", ["selectedBottleneck", "selectedSurvey"]),
-    ...mapState("map", ["openLayersMap", "isolinesLegendImgDataURL"]),
+    ...mapState("map", ["isolinesLegendImgDataURL"]),
     ...mapState("user", ["user"]),
+    ...mapGetters("map", ["openLayersMap"]),
     generatePdfLable() {
       return this.$gettext("Generate PDF");
     },
--- a/client/src/components/Search.vue	Sat Apr 13 15:28:48 2019 +0200
+++ b/client/src/components/Search.vue	Sat Apr 13 16:02:06 2019 +0200
@@ -299,7 +299,7 @@
         if (resultEntry.type === "rhm") zoom = 15;
         if (resultEntry.type === "city") zoom = 13;
         if (resultEntry.type === "gauge") zoom = 15;
-        this.$store.commit("map/moveMap", {
+        this.$store.dispatch("map/moveMap", {
           coordinates: resultEntry.geom.coordinates,
           zoom,
           preventZoomOut: true
--- a/client/src/components/Zoom.vue	Sat Apr 13 15:28:48 2019 +0200
+++ b/client/src/components/Zoom.vue	Sat Apr 13 16:02:06 2019 +0200
@@ -55,13 +55,13 @@
  * Markus Kottländer <markus@intevation.de>
  * Thomas Junk <thomas.junk@intevation.de>
  */
-import { mapState } from "vuex";
+import { mapState, mapGetters } from "vuex";
 import { Vector as VectorLayer } from "ol/layer";
 
 export default {
   name: "zoom",
   computed: {
-    ...mapState("map", ["openLayersMap"]),
+    ...mapGetters("map", ["openLayersMap"]),
     ...mapState("application", ["showSplitscreen"]),
     zoomLevel: {
       get() {
--- a/client/src/components/fairway/Profiles.vue	Sat Apr 13 15:28:48 2019 +0200
+++ b/client/src/components/fairway/Profiles.vue	Sat Apr 13 16:02:06 2019 +0200
@@ -247,7 +247,7 @@
  * Author(s):
  * Markus Kottländer <markus.kottlaender@intevation.de>
  */
-import { mapState } from "vuex";
+import { mapState, mapGetters } from "vuex";
 import Feature from "ol/Feature";
 import LineString from "ol/geom/LineString";
 import { displayError, displayInfo } from "@/lib/errors";
@@ -264,7 +264,7 @@
   },
   computed: {
     ...mapState("application", ["showProfiles"]),
-    ...mapState("map", ["openLayersMap", "lineTool", "polygonTool", "cutTool"]),
+    ...mapState("map", ["lineTool", "polygonTool", "cutTool"]),
     ...mapState("bottlenecks", [
       "bottlenecksList",
       "surveys",
@@ -278,6 +278,7 @@
       "differencesLoading",
       "waterLevels"
     ]),
+    ...mapGetters("map", ["openLayersMap"]),
     orderedBottlenecks() {
       let groupedBottlenecks = {},
         orderedGroups = {};
@@ -569,7 +570,7 @@
         bn => bn.properties.name === this.selectedBottleneck
       );
       if (!bottleneck) return;
-      this.$store.commit("map/moveToExtent", {
+      this.$store.dispatch("map/moveToExtent", {
         feature: bottleneck,
         zoom: 17,
         preventZoomOut: true
--- a/client/src/components/gauge/Gauges.vue	Sat Apr 13 15:28:48 2019 +0200
+++ b/client/src/components/gauge/Gauges.vue	Sat Apr 13 16:02:06 2019 +0200
@@ -180,7 +180,7 @@
     },
     moveToGauge() {
       if (!this.selectedGauge) return;
-      this.$store.commit("map/moveToExtent", {
+      this.$store.dispatch("map/moveToExtent", {
         feature: this.selectedGauge,
         zoom: null,
         preventZoomOut: true
@@ -205,7 +205,7 @@
           this.$store.commit("gauges/waterlevels", []);
         },
         expandCallback: () => {
-          this.$store.commit("map/moveMap", {
+          this.$store.dispatch("map/moveMap", {
             coordinates,
             zoom: null,
             preventZoomOut: true
@@ -254,7 +254,7 @@
           this.$store.commit("gauges/yearWaterlevels", []);
         },
         expandCallback: () => {
-          this.$store.commit("map/moveMap", {
+          this.$store.dispatch("map/moveMap", {
             coordinates,
             zoom: null,
             preventZoomOut: true
--- a/client/src/components/identify/Identify.vue	Sat Apr 13 15:28:48 2019 +0200
+++ b/client/src/components/identify/Identify.vue	Sat Apr 13 16:02:06 2019 +0200
@@ -147,7 +147,7 @@
   },
   methods: {
     zoomTo(feature) {
-      this.$store.commit("map/moveMap", {
+      this.$store.dispatch("map/moveMap", {
         coordinates: getCenter(
           feature
             .getGeometry()
--- a/client/src/components/importoverview/BottleneckDetail.vue	Sat Apr 13 15:28:48 2019 +0200
+++ b/client/src/components/importoverview/BottleneckDetail.vue	Sat Apr 13 16:02:06 2019 +0200
@@ -87,7 +87,7 @@
 import { WFS } from "ol/format";
 import { or as orFilter, equalTo as equalToFilter } from "ol/format/filter";
 import { displayError } from "@/lib/errors";
-import { mapState } from "vuex";
+import { mapState, mapGetters } from "vuex";
 
 export default {
   data() {
@@ -101,7 +101,7 @@
   },
   computed: {
     ...mapState("imports", ["showLogs", "details"]),
-    ...mapState("map", ["openLayersMap"])
+    ...mapGetters("map", ["openLayersMap"])
   },
   methods: {
     loadBottlenecks() {
@@ -148,7 +148,7 @@
     },
     moveToBottleneck(index) {
       this.openLayersMap.getLayer("BOTTLENECKS").setVisible(true);
-      this.$store.commit("map/moveToExtent", {
+      this.$store.dispatch("map/moveToExtent", {
         feature: this.bottlenecks[index],
         zoom: 17,
         preventZoomOut: true
--- a/client/src/components/importoverview/SoundingResultDetail.vue	Sat Apr 13 15:28:48 2019 +0200
+++ b/client/src/components/importoverview/SoundingResultDetail.vue	Sat Apr 13 16:02:06 2019 +0200
@@ -34,7 +34,7 @@
   methods: {
     zoomTo() {
       const { lat, lon, bottleneck, date } = this.details.summary;
-      this.$store.commit("map/moveMap", {
+      this.$store.dispatch("map/moveMap", {
         coordinates: [lat, lon],
         zoom: 17,
         preventZoomOut: true
--- a/client/src/components/importoverview/StretchDetails.vue	Sat Apr 13 15:28:48 2019 +0200
+++ b/client/src/components/importoverview/StretchDetails.vue	Sat Apr 13 16:02:06 2019 +0200
@@ -21,7 +21,7 @@
  * Thomas Junk <thomas.junk@intevation.de>
  */
 import { displayError } from "@/lib/errors";
-import { mapState } from "vuex";
+import { mapState, mapGetters } from "vuex";
 
 export default {
   name: "stretchdetails",
@@ -31,7 +31,7 @@
   },
   computed: {
     ...mapState("imports", ["showAdditional", "details"]),
-    ...mapState("map", ["openLayersMap"])
+    ...mapGetters("map", ["openLayersMap"])
   },
   methods: {
     zoomToStretch() {
@@ -42,7 +42,7 @@
         .then(response => {
           if (response.data.features.length < 1)
             throw new Error("no feaures found for: " + name);
-          this.$store.commit("map/moveToExtent", {
+          this.$store.dispatch("map/moveToExtent", {
             feature: response.data.features[0],
             zoom: 17,
             preventZoomOut: true
--- a/client/src/components/layers/Layers.vue	Sat Apr 13 15:28:48 2019 +0200
+++ b/client/src/components/layers/Layers.vue	Sat Apr 13 16:02:06 2019 +0200
@@ -48,14 +48,14 @@
  * Thomas Junk <thomas.junk@intevation.de>
  * Markus Kottländer <markus.kottlaender@intevation.de>
  */
-import { mapState } from "vuex";
+import { mapState, mapGetters } from "vuex";
 
 export default {
   components: {
     Layerselect: () => import("./Layerselect")
   },
   computed: {
-    ...mapState("map", ["openLayersMap"]),
+    ...mapGetters("map", ["openLayersMap"]),
     ...mapState("application", ["showLayers"]),
     layersLabel() {
       return this.$gettext("Layers");
--- a/client/src/components/map/Map.vue	Sat Apr 13 15:28:48 2019 +0200
+++ b/client/src/components/map/Map.vue	Sat Apr 13 16:02:06 2019 +0200
@@ -61,7 +61,6 @@
     ...mapState("map", [
       "initialLoad",
       "extent",
-      "openLayersMap",
       "lineTool",
       "polygonTool",
       "cutTool"
@@ -175,7 +174,7 @@
         }
       })
         .then(response => {
-          this.$store.commit("map/moveToBoundingBox", {
+          this.$store.dispatch("map/moveToBoundingBox", {
             boundingBox: [
               response.data.extent.x1,
               response.data.extent.y1,
--- a/client/src/components/toolbar/Linetool.vue	Sat Apr 13 15:28:48 2019 +0200
+++ b/client/src/components/toolbar/Linetool.vue	Sat Apr 13 16:02:06 2019 +0200
@@ -21,12 +21,13 @@
  * Author(s):
  * Markus Kottländer <markus.kottlaender@intevation.de>
  */
-import { mapState } from "vuex";
+import { mapState, mapGetters } from "vuex";
 
 export default {
   name: "linetool",
   computed: {
-    ...mapState("map", ["openLayersMap", "lineTool", "polygonTool", "cutTool"]),
+    ...mapState("map", ["lineTool", "polygonTool", "cutTool"]),
+    ...mapGetters("map", ["openLayersMap"]),
     label() {
       return this.$gettext("Measure Distance");
     }
--- a/client/src/components/toolbar/Polygontool.vue	Sat Apr 13 15:28:48 2019 +0200
+++ b/client/src/components/toolbar/Polygontool.vue	Sat Apr 13 16:02:06 2019 +0200
@@ -25,12 +25,13 @@
  * Author(s):
  * Markus Kottländer <markus.kottlaender@intevation.de>
  */
-import { mapState } from "vuex";
+import { mapState, mapGetters } from "vuex";
 
 export default {
   name: "polygontool",
   computed: {
-    ...mapState("map", ["openLayersMap", "lineTool", "polygonTool", "cutTool"]),
+    ...mapState("map", ["lineTool", "polygonTool", "cutTool"]),
+    ...mapGetters("map", ["openLayersMap"]),
     label() {
       return this.$gettext("Measure Area");
     }
--- a/client/src/components/toolbar/Toolbar.vue	Sat Apr 13 15:28:48 2019 +0200
+++ b/client/src/components/toolbar/Toolbar.vue	Sat Apr 13 16:02:06 2019 +0200
@@ -116,7 +116,7 @@
  * Author(s):
  * Markus Kottländer <markus.kottlaender@intevation.de>
  */
-import { mapState } from "vuex";
+import { mapState, mapGetters } from "vuex";
 
 export default {
   name: "toolbar",
@@ -131,8 +131,9 @@
     Pdftool: () => import("./Pdftool")
   },
   computed: {
-    ...mapState("map", ["openLayersMap", "lineTool", "polygonTool", "cutTool"]),
-    ...mapState("application", ["expandToolbar", "panes"])
+    ...mapState("map", ["lineTool", "polygonTool", "cutTool"]),
+    ...mapState("application", ["expandToolbar", "panes"]),
+    ...mapGetters("map", ["openLayersMap"])
   },
   mounted() {
     window.addEventListener("keydown", e => {
--- a/client/src/store/bottlenecks.js	Sat Apr 13 15:28:48 2019 +0200
+++ b/client/src/store/bottlenecks.js	Sat Apr 13 16:02:06 2019 +0200
@@ -60,7 +60,7 @@
     }
   },
   actions: {
-    setSelectedBottleneck({ state, commit, rootState }, name) {
+    setSelectedBottleneck({ state, commit, rootState, rootGetters }, name) {
       return new Promise((resolve, reject) => {
         if (name !== state.selectedBottleneck) {
           commit("selectedSurvey", null);
@@ -74,7 +74,7 @@
             commit("application/splitscreenLoading", false, { root: true });
           }, 350);
           rootState.map.cutTool.setActive(false);
-          rootState.map.openLayersMap
+          rootGetters["map/openLayersMap"]
             .getLayer("CUTTOOL")
             .getSource()
             .clear();
--- a/client/src/store/fairway.js	Sat Apr 13 15:28:48 2019 +0200
+++ b/client/src/store/fairway.js	Sat Apr 13 16:02:06 2019 +0200
@@ -132,12 +132,12 @@
     }
   },
   actions: {
-    clearSelection({ commit, dispatch, rootState }) {
+    clearSelection({ commit, dispatch, rootState, rootGetters }) {
       dispatch("bottlenecks/setSelectedBottleneck", null, { root: true });
       dispatch("map/enableIdentifyTool", null, { root: true });
       commit("clearCurrentProfile");
       rootState.map.cutTool.setActive(false);
-      rootState.map.openLayersMap
+      rootGetters["map/openLayersMap"]
         .getLayer("CUTTOOL")
         .getSource()
         .clear();
@@ -178,7 +178,7 @@
         });
       }
     },
-    cut({ commit, dispatch, rootState }, cut) {
+    cut({ commit, dispatch, rootState, rootGetters }, cut) {
       return new Promise(resolve => {
         const length = getLength(cut.getGeometry());
         commit(
@@ -219,7 +219,7 @@
           Promise.all(profileLoaders)
             .then(() => {
               rootState.map.cutTool.setActive(false);
-              const los3 = rootState.map.openLayersMap.getLayer(
+              const los3 = rootGetters["map/openLayersMap"].getLayer(
                 "FAIRWAYDIMENSIONSLOS3"
               );
               los3.getSource().forEachFeatureIntersectingExtent(
@@ -241,7 +241,7 @@
                   }
                 }
               );
-              const los2 = rootState.map.openLayersMap.getLayer(
+              const los2 = rootGetters["map/openLayersMap"].getLayer(
                 "FAIRWAYDIMENSIONSLOS2"
               );
               los2.getSource().forEachFeatureIntersectingExtent(
@@ -263,7 +263,7 @@
                   }
                 }
               );
-              const los1 = rootState.map.openLayersMap.getLayer(
+              const los1 = rootGetters["map/openLayersMap"].getLayer(
                 "FAIRWAYDIMENSIONSLOS1"
               );
               los1.getSource().forEachFeatureIntersectingExtent(
@@ -311,7 +311,7 @@
                       bn.properties.name ===
                       rootState.bottlenecks.selectedBottleneck
                   );
-                  commit(
+                  dispatch(
                     "map/moveToExtent",
                     {
                       feature: bottleneck,
--- a/client/src/store/map.js	Sat Apr 13 15:28:48 2019 +0200
+++ b/client/src/store/map.js	Sat Apr 13 16:02:06 2019 +0200
@@ -39,7 +39,7 @@
 // initial state
 const init = () => {
   return {
-    openLayersMap: null,
+    openLayersMaps: [],
     initialLoad: true,
     extent: {
       lat: 6155376,
@@ -62,6 +62,9 @@
   namespaced: true,
   state: init(),
   getters: {
+    openLayersMap: state => {
+      return state.openLayersMaps.length ? state.openLayersMaps[0] : null;
+    },
     filteredIdentifiedFeatures: state => {
       return state.identifiedFeatures.filter(f => f.getId());
     }
@@ -73,8 +76,8 @@
     extent: (state, extent) => {
       state.extent = extent;
     },
-    openLayersMap: (state, map) => {
-      state.openLayersMap = map;
+    addOpenLayersMap: (state, map) => {
+      state.openLayersMaps.push(map);
     },
     identifyTool: (state, events) => {
       state.identifyTool = events;
@@ -99,27 +102,6 @@
     cutTool: (state, cutTool) => {
       state.cutTool = cutTool;
     },
-    moveToBoundingBox: (state, { boundingBox, zoom, preventZoomOut }) => {
-      const extent = transformExtent(boundingBox, "EPSG:4326", "EPSG:3857");
-      let view = state.openLayersMap.getView();
-      moveMap({ view, extent, zoom, preventZoomOut });
-    },
-    moveToExtent: (state, { feature, zoom, preventZoomOut }) => {
-      const boundingBox = bbox(feature.geometry);
-      const extent = transformExtent(boundingBox, "EPSG:4326", "EPSG:3857");
-      let view = state.openLayersMap.getView();
-      moveMap({ view, extent, zoom, preventZoomOut });
-    },
-    moveMap: (state, { coordinates, zoom, preventZoomOut }) => {
-      let view = state.openLayersMap.getView();
-      const currentZoom = view.getZoom();
-      zoom = zoom || currentZoom;
-      view.animate({
-        zoom: preventZoomOut ? Math.max(zoom, currentZoom) : zoom,
-        center: fromLonLat(coordinates, view.getProjection()),
-        duration: 700
-      });
-    },
     isolinesLegendImgDataURL: (state, isolinesLegendImgDataURL) => {
       state.isolinesLegendImgDataURL = isolinesLegendImgDataURL;
     },
@@ -216,22 +198,25 @@
       commit("lineTool", lineTool);
       commit("polygonTool", polygonTool);
       commit("cutTool", cutTool);
-      commit("openLayersMap", map);
+      commit("addOpenLayersMap", map);
     },
     disableIdentifyTool({ state }) {
       unByKey(state.identifyTool);
       state.identifyTool = null;
     },
-    enableIdentifyTool({ state, rootState, commit, dispatch }) {
+    enableIdentifyTool({ state, rootState, getters, commit, dispatch }) {
       if (!state.identifyTool) {
-        state.identifyTool = state.openLayersMap.on(
+        state.identifyTool = getters.openLayersMap.on(
           ["singleclick", "dblclick"],
           event => {
             commit("setIdentifiedFeatures", []);
             // checking our WFS layers
-            var features = state.openLayersMap.getFeaturesAtPixel(event.pixel, {
-              hitTolerance: 7
-            });
+            var features = getters.openLayersMap.getFeaturesAtPixel(
+              event.pixel,
+              {
+                hitTolerance: 7
+              }
+            );
             if (features) {
               let identifiedFeatures = [];
 
@@ -260,7 +245,7 @@
                     ).then(() => {
                       this.commit("bottlenecks/setFirstSurveySelected");
                     });
-                    commit("moveMap", {
+                    dispatch("moveMap", {
                       coordinates: getCenter(
                         feature
                           .getGeometry()
@@ -287,7 +272,7 @@
                         root: true
                       }
                     );
-                    commit("moveMap", {
+                    dispatch("moveMap", {
                       coordinates: getCenter(
                         feature
                           .getGeometry()
@@ -309,7 +294,7 @@
                     commit("imports/selectedStretchId", feature.getId(), {
                       root: true
                     });
-                    commit("moveMap", {
+                    dispatch("moveMap", {
                       coordinates: getCenter(
                         feature
                           .getGeometry()
@@ -340,7 +325,7 @@
             */
 
             // trying the GetFeatureInfo way for WMS
-            var dmaSource = state.openLayersMap
+            var dmaSource = getters.openLayersMap
               .getLayer("DISTANCEMARKSAXIS")
               .getSource();
             var dmaUrl = dmaSource.getGetFeatureInfoUrl(
@@ -369,7 +354,7 @@
               });
             }
             // trying the GetFeatureInfo way for WMS
-            var iecdisSource = state.openLayersMap
+            var iecdisSource = getters.openLayersMap
               .getLayer("INLANDECDIS")
               .getSource();
             var iecdisUrl = iecdisSource.getGetFeatureInfoUrl(
@@ -387,6 +372,27 @@
           }
         );
       }
+    },
+    moveToBoundingBox({ getters }, { boundingBox, zoom, preventZoomOut }) {
+      const extent = transformExtent(boundingBox, "EPSG:4326", "EPSG:3857");
+      let view = getters.openLayersMap.getView();
+      moveMap({ view, extent, zoom, preventZoomOut });
+    },
+    moveToExtent({ getters }, { feature, zoom, preventZoomOut }) {
+      const boundingBox = bbox(feature.geometry);
+      const extent = transformExtent(boundingBox, "EPSG:4326", "EPSG:3857");
+      let view = getters.openLayersMap.getView();
+      moveMap({ view, extent, zoom, preventZoomOut });
+    },
+    moveMap({ getters }, { coordinates, zoom, preventZoomOut }) {
+      let view = getters.openLayersMap.getView();
+      const currentZoom = view.getZoom();
+      zoom = zoom || currentZoom;
+      view.animate({
+        zoom: preventZoomOut ? Math.max(zoom, currentZoom) : zoom,
+        center: fromLonLat(coordinates, view.getProjection()),
+        duration: 700
+      });
     }
   }
 };