Add new map control zoomhistory (#388)

* Add ZoomHistory Map Control * Create ZoomHistoryMapControl.vue component * clean up some code * rename file: `components/ZoomHistoryMapControl.vue` --> `components/MapControlZoomHistory.vue` Use same prefix as: - #329 - #330 * fix computed method: `hasEmptyHistory()` * Add i18n translation as QGIS Desktop tools * update translations * Fix issue on watch history.index. Remove watch property and move to methods last and next because when move map (zoom or pan) index is updated and map back to previous extent * Set new icon * Move zoomhistory according #388 (comment) * 👀 jsdoc tags must be setted above each term... ..otherwise you could break your IDE intellisense * remove duplicated function call: `_addControlToMapControlsLeftBottom` * comments --------- Co-authored-by: Raruto <[email protected]>
g3w-suite · Mar 30, 2023 · 1746ecf · 1746ecf
1 parent 5157386
commit 1746ecf
Show file tree

Hide file tree

Showing 14 changed files with 239 additions and 11 deletions.
diff --git a/src/app/constant.js b/src/app/constant.js
@@ -542,7 +542,22 @@ export const FONT_AWESOME_ICONS = {
   crop: "fas fa-crop-alt",
   exit: "fas fa-door-open",
   slider: "fas fa-sliders-h",
+
+  /**
+   * @since 3.8.0
+   */
   bookmark: "fas fa-bookmark",
+
+  /**
+   * @since 3.8.0
+   */
+  reply: "fas fa-reply",
+
+  /**
+   * @since 3.8.0
+   */
+  share: "fas fa-share",
+
 };
 
 /**

diff --git a/src/app/g3w-ol/controls/zoomhistorycontrol.js b/src/app/g3w-ol/controls/zoomhistorycontrol.js
@@ -0,0 +1,26 @@
+import MapControlZoomHistory from "components/MapControlZoomHistory.vue";
+
+const Control = require('g3w-ol/controls/control');
+
+function ZoomHistoryControl() {
+  const vueElement = Vue.extend(MapControlZoomHistory);
+  Control.call(this, {
+    name: "zoomhistory",
+    tipLabel: "sdk.mapcontrols.addlayer.tooltip",
+    element: (new vueElement()).$mount().$el
+  });
+}
+
+ol.inherits(ZoomHistoryControl, Control);
+
+const proto = ZoomHistoryControl.prototype;
+
+proto.setMap = function(map) {
+  Control.prototype.setMap.call(this,map);
+};
+
+proto.layout = function(map) {
+  Control.prototype.layout.call(this, map);
+};
+
+module.exports = ZoomHistoryControl;
diff --git a/src/app/gui/map/control/factory.js b/src/app/gui/map/control/factory.js
@@ -15,6 +15,7 @@ const ScaleControl = require('g3w-ol/controls/scalecontrol');
 const OnClikControl = require('g3w-ol/controls/onclickcontrol');
 const ScreenshotControl = require('g3w-ol/controls/screenshotcontrol');
 const geoScreenshotControl = require('g3w-ol/controls/geoscreenshotcontrol');
+const ZoomHistoryControl = require('g3w-ol/controls/zoomhistorycontrol');
 const QueryByDrawPolygonControl = require('g3w-ol/controls/querybydrawpolygoncontrol');
 
 
@@ -37,7 +38,6 @@ ControlsFactory.CONTROLS = {
   'zoom': OLControl,
   'scaleline': OLControl,
   'overview': OLControl,
-  'nominatim': GeocodingControl, // temporary fro backward compatibility
   'geocoding': GeocodingControl,
   'addlayers': AddLayersControl,
   'length': LengthControl,
@@ -47,7 +47,18 @@ ControlsFactory.CONTROLS = {
   'onclick': OnClikControl,
   'screenshot': ScreenshotControl,
   'geoscreenshot': geoScreenshotControl,
-  'querybydrawpolygon': QueryByDrawPolygonControl
+  'querybydrawpolygon': QueryByDrawPolygonControl,
+
+  /**
+   * @since 3.8.0
+   */
+  'zoomhistory': ZoomHistoryControl,
+
+  /**
+   * @deprecated since version ??. Will be removed in version ??. Use 'geocoding' control instead.
+   */
+  'nominatim': GeocodingControl,
+
 };
 
 module.exports = ControlsFactory;
diff --git a/src/app/gui/map/mapservice.js b/src/app/gui/map/mapservice.js
@@ -893,6 +893,14 @@ proto._setupControls = function() {
             });
           }
           break;
+        /**
+         * @since 3.8.0
+         */
+        case 'zoomhistory':
+          control = this.createMapControl(controlType, { add: false });
+          this._addControlToMapControlsLeftBottom(control);
+          break;
+
       }
     });
     return this.getMapControls()
@@ -1173,6 +1181,16 @@ proto._addControlToMapControls = function(control, visible=true) {
   $('.g3w-map-controls').append(controlElement);
 };
 
+/**
+ * @since 3.8.0
+ */
+proto._addControlToMapControlsLeftBottom = function(control, visible=true) {
+  if (!visible) {
+    control.element.style.display = "none";
+  }
+  $('.g3w-map-controls-left-bottom').append(control.element);
+};
+
 proto.getMapControlByType = function({type}={}) {
   const mapControl = this._mapControls.find(mapControl => type === mapControl.type);
   return mapControl && mapControl.control;

diff --git a/src/components/Map.vue b/src/components/Map.vue
@@ -9,16 +9,38 @@
   <div v-for="hidemap in hidemaps" :id="hidemap.id" :key="hidemap.id" class="g3w-map hidemap"></div>
 
   <div :id="target" class="g3w-map">
-    <div class="g3w-map-controls" style="display: flex" v-disabled="disableMapControls" ref="g3w-map-controls" :class="mapcontrolsalignement"></div>
-    <div id="g3w-map-info" ref="g3w-map-info" :style="map_info.style" v-if="map_info.info">
+
+    <!-- COMMON MAP CONTROLS (zoom, querybypolygon, geoscreeenshot, ...) -->
+    <div
+      ref="g3w-map-controls"
+      class="g3w-map-controls"
+      style="display: flex"
+      v-disabled="disableMapControls"
+      :class="mapcontrolsalignement"
+    ></div>
+
+    <!-- FIXME: add description -->
+    <div
+      v-if="map_info.info"
+      ref="g3w-map-info"
+      id="g3w-map-info"
+      :style="map_info.style"
+    >
       {{map_info.info}}
     </div>
-    <div style="display: none;">
-      <div id="marker"></div>
-    </div>
-    <addlayer :service="service"></addlayer>
+
+    <!-- FIXME: display none ? -->
+    <div style="display: none;"><div id="marker"></div></div>
+
+    <!-- FIXME: add description -->
+    <addlayer :service="service" />
+
+    <!-- @since 3.8.0   -->
+    <div class="g3w-map-controls-left-bottom"></div>
+
   </div>
 
+  <!-- FIXME: add description -->
   <map-footer :service="service"/>
 
 </div>
@@ -47,12 +69,12 @@ export default {
     mapcontrolsalignement() {
       return this.service.state.mapcontrolsalignement;
     },
-    disableMapControls(){
+    disableMapControls() {
       return this.service.state.mapControl.disabled;
     }
   },
   methods: {
-    showHideControls () {
+    showHideControls() {
       const mapControls = this.service.getMapControls();
       mapControls.forEach(control => control.type !== "scaleline" && control.control.showHide());
     }
@@ -71,4 +93,12 @@ export default {
     this.service.clear();
   }
 };
-</script>
+</script>
+<style scoped>
+  .g3w-map-controls-left-bottom {
+    position: absolute;
+    bottom: 75px;
+    left: 10px;
+    z-index: 1;
+  }
+</style>
diff --git a/src/components/MapControlZoomHistory.vue b/src/components/MapControlZoomHistory.vue
@@ -0,0 +1,98 @@
+<!--
+  @file
+  @since v3.8
+-->
+
+<template>
+  <div
+    style="display:flex;gap: 5px; "
+    class="ol-zoom-history ol-unselectable ol-control">
+
+    <!-- STEP BACK -->
+    <div v-t-tooltip:top.create="'sdk.mapcontrols.zoomhistory.zoom_last'">
+      <button
+        @click.stop.prevent="last"
+        type="button"
+        v-disabled="history.index === 0">
+        <i :class="g3wtemplate.getFontClass('reply')"></i>
+      </button>
+    </div>
+
+
+    <!-- STEP FORWARD -->
+    <div v-t-tooltip:top.create="'sdk.mapcontrols.zoomhistory.zoom_next'">
+      <button
+        @click.stop.prevent="next"
+        type="button"
+        v-disabled="hasEmptyHistory">
+
+        <i :class="g3wtemplate.getFontClass('share')"></i>
+      </button>
+    </div>
+
+
+  </div>
+</template>
+
+
+<script>
+  import GUI from 'services/gui';
+  const { debounce } = require('core/utils/utils');
+
+  export default {
+    name: "MapControlZoomHistory",
+    data() {
+      return {
+        history: {
+          index: 0,
+          items: []
+        }
+      }
+    },
+    methods: {
+      last(){
+        this.history.index--;
+        this.setMapExtent();
+      },
+      next(){
+        this.history.index++;
+        this.setMapExtent();
+      },
+      setMapExtent(){
+        GUI.getService('map').getMap().getView().fit(this.history.items[this.history.index])
+      }
+    },
+    computed: {
+      hasEmptyHistory() {
+        return (0 === this.history.index && 1 === this.history.items.length) || (this.history.items.length - 1 === this.history.index);
+      }
+    },
+
+    /**
+     * @listens ol.View~change
+     */
+    created() {
+      const map = GUI.getService('map').getMap();
+      const view = map.getView();
+
+      this.history.items.push(view.calculateExtent(map.getSize()));
+
+      this.changeKeyEvent = view.on('change' , debounce(evt => {
+        if (this.history.index !== this.history.items.length -1) {
+          this.history.items.splice((this.history.index - this.history.items.length) + 1);
+        }
+        this.history.items.push(evt.target.calculateExtent(map.getSize()));
+        this.history.index++;
+      }, 600))
+    },
+
+    beforeDestroy() {
+      ol.Object.unByKey(this.changeKeyEvent);
+    }
+
+  }
+</script>
+
+<style scoped>
+
+</style>
diff --git a/src/components/index.js b/src/components/index.js
@@ -62,6 +62,7 @@ import InputUnique from './InputUnique.vue';
 import LayerOpacityPicker from './LayerOpacityPicker.vue';
 import Map from './Map.vue';
 import MapAddLayer from './MapAddLayer.vue';
+import MapControlZoomHistory from './MapControlZoomHistory.vue';
 import MetadataLayer from './MetadataLayer.vue';
 import MetadataProject from './MetadataProject.vue';
 import MetadataProjectBBoxContent from './MetadataProjectBBoxContent.vue';
@@ -175,6 +176,7 @@ export {
   LayerOpacityPicker,
   Map,
   MapAddLayer,
+  MapControlZoomHistory,
   MetadataLayer,
   MetadataProject,
   MetadataProjectBBoxContent,

diff --git a/src/locales/de.js b/src/locales/de.js
@@ -316,6 +316,10 @@ export default {
             metric: 'Meter',
             nautical: 'Nautische Meile'
           }
+        },
+        zoomhistory: {
+          zoom_last: "Zoom Vorheriger",
+          zoom_next: "Zoom Nächster"
         }
       },
       relations: {

diff --git a/src/locales/en.js b/src/locales/en.js
@@ -316,6 +316,10 @@ export default {
             metric: 'Meters',
             nautical: 'Nautical Mile'
           }
+        },
+        zoomhistory: {
+          zoom_last: "Zoom Last",
+          zoom_next: "Zoom Next"
         }
       },
       relations: {

diff --git a/src/locales/fi.js b/src/locales/fi.js
@@ -316,6 +316,10 @@ export default {
             metric: 'Meters',
             nautical: 'Nautical Mile'
           }
+        },
+        zoomhistory: {
+          zoom_last: "Zoom Edellinen",
+          zoom_next: "Zoom Seurata"
         }
       },
       relations: {

diff --git a/src/locales/fr.js b/src/locales/fr.js
@@ -316,6 +316,10 @@ export default {
             metric: 'Meters',
             nautical: 'Nautical Mile'
           }
+        },
+        zoomhistory: {
+          zoom_last: "Zoom Précédent",
+          zoom_next: "Zoom Suivant"
         }
       },
       relations: {

diff --git a/src/locales/it.js b/src/locales/it.js
@@ -318,6 +318,10 @@ export default {
             metric: 'Metri',
             nautical: 'Miglio Nautico'
           }
+        },
+        zoomhistory: {
+          zoom_last: "Zoom Precedente",
+          zoom_next: "Zoom Successivo"
         }
       },
       relations: {

diff --git a/src/locales/ro.js b/src/locales/ro.js
@@ -316,6 +316,10 @@ export default {
             metric: 'Metri',
             nautical: 'Mile Nautice'
           }
+        },
+        zoomhistory: {
+          zoom_last: "Zoom Anterior",
+          zoom_next: "Zoom Urmatorul"
         }
       },
       relations: {

diff --git a/src/locales/se.js b/src/locales/se.js
@@ -316,6 +316,10 @@ export default {
             metric: 'Meters',
             nautical: 'Nautical Mile'
           }
+        },
+        zoomhistory: {
+          zoom_last: "Zoom Föregående",
+          zoom_next: "Zoom Nästa"
         }
       },
       relations: {