Mercurial > gemma

changeset 3165:891705431545

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
client: map zoom controls: each map has it's own independent contrls now Of course if maps are synced, zooming one still effects the other one.
author Markus Kottlaender <markus@intevation.de>
date Mon, 06 May 2019 14:27:54 +0200
parents 1de0764f6af4
children 286c2e3cc105
files client/src/components/App.vue client/src/components/Zoom.vue client/src/components/map/Map.vue
diffstat 3 files changed, 22 insertions(+), 27 deletions(-) [+]
line wrap: on
line diff
--- a/client/src/components/App.vue	Mon May 06 13:33:19 2019 +0200
+++ b/client/src/components/App.vue	Mon May 06 14:27:54 2019 +0200
@@ -23,7 +23,6 @@
           <Toolbar v-if="isMapVisible" />
         </div>
       </div>
-      <Zoom v-if="isMapVisible" />
       <Splitscreen v-if="isMapVisible" />
       <MinimizedSplitscreens v-if="isMapVisible" />
     </div>
@@ -97,7 +96,6 @@
     Profiles: () => import("./fairway/Profiles"),
     Gauges: () => import("./gauge/Gauges"),
     Pdftool: () => import("./Pdftool"),
-    Zoom: () => import("./Zoom"),
     Identify: () => import("./identify/Identify"),
     Layers: () => import("./layers/Layers"),
     Sidebar: () => import("./Sidebar"),
--- a/client/src/components/Zoom.vue	Mon May 06 13:33:19 2019 +0200
+++ b/client/src/components/Zoom.vue	Mon May 06 14:27:54 2019 +0200
@@ -1,5 +1,5 @@
 <template>
-  <div :class="['zoom-buttons shadow-xs', { splitscreen: showSplitscreen }]">
+  <div class="zoom-buttons shadow-xs">
     <button
       class="zoom-button border-0 bg-white rounded-left ui-element"
       @click="zoomOut"
@@ -21,16 +21,15 @@
   </div>
 </template>
 
-<style lang="sass" scoped>
+<style lang="sass">
 .zoom-buttons
   position: absolute
+  z-index: 1
   bottom: $small-offset
   left: 50%
   margin-left: -($icon-width * 1.5)
   margin-bottom: 0
   transition: margin-bottom 0.3s
-  &.splitscreen
-    margin-bottom: 50vh
 
   .zoom-button
     min-height: $icon-width
@@ -55,22 +54,17 @@
  * Markus Kottländer <markus@intevation.de>
  * Thomas Junk <thomas.junk@intevation.de>
  */
-import { mapState } from "vuex";
 import { Vector as VectorLayer } from "ol/layer";
 
 export default {
-  name: "zoom",
+  props: ["map"],
   computed: {
-    ...mapState("map", ["openLayersMaps"]),
-    ...mapState("application", ["showSplitscreen"]),
     zoomLevel: {
       get() {
-        return this.openLayersMaps[0].getView().getZoom();
+        return this.map.getView().getZoom();
       },
       set(value) {
-        this.openLayersMaps[0]
-          .getView()
-          .animate({ zoom: value, duration: 300 });
+        this.map.getView().animate({ zoom: value, duration: 300 });
       }
     }
   },
@@ -82,19 +76,17 @@
       this.zoomLevel = this.zoomLevel - 1;
     },
     refreshMap() {
-      this.openLayersMaps.forEach(map => {
-        let layers = map.getLayers().getArray();
-        for (let i = 0; i < layers.length; i++) {
-          let layer = layers[i];
-          if (
-            layer instanceof VectorLayer &&
-            layer.get("source").loader_.name != "VOID"
-          ) {
-            layer.getSource().clear(true);
-            layer.getSource().refresh({ force: true });
-          }
+      let layers = this.map.getLayers().getArray();
+      for (let i = 0; i < layers.length; i++) {
+        let layer = layers[i];
+        if (
+          layer instanceof VectorLayer &&
+          layer.get("source").loader_.name != "VOID"
+        ) {
+          layer.getSource().clear(true);
+          layer.getSource().refresh({ force: true });
         }
-      });
+      }
     }
   }
 };
--- a/client/src/components/map/Map.vue	Mon May 06 13:33:19 2019 +0200
+++ b/client/src/components/map/Map.vue	Mon May 06 14:27:54 2019 +0200
@@ -2,7 +2,9 @@
   <div
     :id="'map-' + paneId"
     :class="['map', { nocursor: this.hasActiveInteractions }]"
-  />
+  >
+    <Zoom :map="map" />
+  </div>
 </template>
 
 <style lang="sass" scoped>
@@ -47,6 +49,9 @@
 /* eslint-disable no-console */
 export default {
   mixins: [pane],
+  components: {
+    Zoom: () => import("@/components/Zoom")
+  },
   data() {
     return {
       map: null,