From 1746ecfbb7c2a6527ac451d04799e95226193d59 Mon Sep 17 00:00:00 2001 From: Francesco Boccacci Date: Thu, 30 Mar 2023 11:14:35 +0200 Subject: [PATCH] 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: - https://github.com/g3w-suite/g3w-client/pull/329 - https://github.com/g3w-suite/g3w-client/pull/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 https://github.com/g3w-suite/g3w-client/pull/388#issuecomment-1479272137 * :eyes: 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 --- src/app/constant.js | 15 +++ src/app/g3w-ol/controls/zoomhistorycontrol.js | 26 +++++ src/app/gui/map/control/factory.js | 15 ++- src/app/gui/map/mapservice.js | 18 ++++ src/components/Map.vue | 48 +++++++-- src/components/MapControlZoomHistory.vue | 98 +++++++++++++++++++ src/components/index.js | 2 + src/locales/de.js | 4 + src/locales/en.js | 4 + src/locales/fi.js | 4 + src/locales/fr.js | 4 + src/locales/it.js | 4 + src/locales/ro.js | 4 + src/locales/se.js | 4 + 14 files changed, 239 insertions(+), 11 deletions(-) create mode 100644 src/app/g3w-ol/controls/zoomhistorycontrol.js create mode 100644 src/components/MapControlZoomHistory.vue diff --git a/src/app/constant.js b/src/app/constant.js index e36eb9324..9186fbcc6 100644 --- 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 new file mode 100644 index 000000000..4bac12725 --- /dev/null +++ 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 index 8cf700801..9e7d5381e 100644 --- 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 index 1edc61188..25e92a293 100644 --- 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 index b8a78627b..c1804bf15 100644 --- a/src/components/Map.vue +++ b/src/components/Map.vue @@ -9,16 +9,38 @@
-
-
+ + +
+ + +
{{map_info.info}}
-
-
-
- + + +
+ + + + + +
+
+
@@ -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(); } }; - \ No newline at end of file + + \ No newline at end of file diff --git a/src/components/MapControlZoomHistory.vue b/src/components/MapControlZoomHistory.vue new file mode 100644 index 000000000..6cf8848bc --- /dev/null +++ b/src/components/MapControlZoomHistory.vue @@ -0,0 +1,98 @@ + + + + + + + + \ No newline at end of file diff --git a/src/components/index.js b/src/components/index.js index a50c6f10b..2296e4ffc 100644 --- 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 index 215e78ed3..e03c52e06 100644 --- 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 index 0f091b98c..78d67a043 100644 --- 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 index f6883bf4c..1c68b6405 100644 --- 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 index 247aeee77..3444f69de 100644 --- 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 index 6a7ef43c5..d837dc5b5 100644 --- 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 index 952ba1a73..bef6f9108 100644 --- 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 index e1b0fb060..b6d53ae53 100644 --- 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: {