From 8ae5d214b3409ef75f0182f63ef2d80002d61870 Mon Sep 17 00:00:00 2001 From: enrico ferreguti Date: Thu, 21 Mar 2024 09:35:03 +0100 Subject: [PATCH 1/9] generalize wfs endpoint --- src/factory/Layer.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/factory/Layer.js b/src/factory/Layer.js index 4afb8808..a7e891f6 100644 --- a/src/factory/Layer.js +++ b/src/factory/Layer.js @@ -199,7 +199,8 @@ export const LayerFactory = { format: new this.formatMapping[lConf.format](lConf.formatConfig), loader: (extent) => { // assemble WFS GetFeature request - let wfsRequest = lConf.url + '?service=WFS&' + + const pre = lConf.url.includes("?") ? "&" : "?" + let wfsRequest = lConf.url + pre + 'service=WFS&' + 'version=' + lConf.version + '&request=GetFeature&' + 'typename=' + lConf.typeName + '&' + 'outputFormat=' + outputFormat + '&srsname=' + lConf.projection; From c7ce6d5e98684bc6cd77aec6d37e861adfffd5f3 Mon Sep 17 00:00:00 2001 From: enrico ferreguti Date: Sun, 21 Apr 2024 15:04:22 +0200 Subject: [PATCH 2/9] print module implementation --- app-starter/locales/en.json | 6 + app-starter/static/app-conf-projected.json | 10 + app-starter/static/app-conf-sidebar.json | 10 + app-starter/static/app-conf.json | 10 + docs/module-configuration.md | 14 +- package.json | 2 + src/components/printTool/printDialog.vue | 239 +++++++++++++++++++++ src/locales/en.json | 19 ++ 8 files changed, 309 insertions(+), 1 deletion(-) create mode 100644 src/components/printTool/printDialog.vue diff --git a/app-starter/locales/en.json b/app-starter/locales/en.json index 825f4857..a053dd57 100644 --- a/app-starter/locales/en.json +++ b/app-starter/locales/en.json @@ -71,5 +71,11 @@ "sample-module": { "title": "Sample Module", "text": "Hello Wegue" + }, + + "wgu-print": { + "scales": [ + 1000000, 500000, 250000, 100000, 50000, 25000 + ] } } diff --git a/app-starter/static/app-conf-projected.json b/app-starter/static/app-conf-projected.json index b5db21f3..fcb6eff5 100644 --- a/app-starter/static/app-conf-projected.json +++ b/app-starter/static/app-conf-projected.json @@ -202,6 +202,16 @@ }, "wgu-localeswitcher": { "target": "toolbar" + }, + "wgu-print": { + "target": "toolbar", + "icon": "mdi-printer", + "win": "floating", + "draggable": false, + "initPos": { + "left": 8, + "top": 74 + } } } diff --git a/app-starter/static/app-conf-sidebar.json b/app-starter/static/app-conf-sidebar.json index 12143e36..a9e31b8c 100644 --- a/app-starter/static/app-conf-sidebar.json +++ b/app-starter/static/app-conf-sidebar.json @@ -288,6 +288,16 @@ }, "wgu-localeswitcher": { "target": "toolbar" + }, + "wgu-print": { + "target": "toolbar", + "icon": "mdi-printer", + "win": "floating", + "draggable": false, + "initPos": { + "left": 8, + "top": 74 + } } } } diff --git a/app-starter/static/app-conf.json b/app-starter/static/app-conf.json index d6b319b1..8b0228de 100644 --- a/app-starter/static/app-conf.json +++ b/app-starter/static/app-conf.json @@ -286,6 +286,16 @@ "wgu-localeswitcher": { "target": "toolbar" }, + "wgu-print": { + "target": "toolbar", + "icon": "mdi-printer", + "win": "floating", + "draggable": false, + "initPos": { + "left": 8, + "top": 74 + } + }, "sample-module": { "target": "toolbar", "win": "floating", diff --git a/docs/module-configuration.md b/docs/module-configuration.md index d78eca94..fe6ac5f3 100644 --- a/docs/module-configuration.md +++ b/docs/module-configuration.md @@ -137,4 +137,16 @@ Module identifier: `wgu-localeswitcher` No additional config options besides the general ones. -LocaleSwitcher will automatically pick up the supported languages configured by the [lang](wegue-configuration?id=lang) property and offers to switch between them at runtime. \ No newline at end of file +LocaleSwitcher will automatically pick up the supported languages configured by the [lang](wegue-configuration?id=lang) property and offers to switch between them at runtime. + +## Print + +The module allows to print and export the current map in PDF format. +The paper format, orientation, dpi resolution and paper map scale have to be specified in order to perform print + +Module identifier: `wgu-print` + +| Property | Meaning | Example | +|--------------------|:---------:|---------| +| scales | (optional) the allowed print scales list | `"scales": [100000, 50000, 25000, 10000, 5000]` | +| resolutions | (optional) the allowed print dpi resolution list | `"resolutions": [72, 150, 200, 300]` | \ No newline at end of file diff --git a/package.json b/package.json index fd02a56a..9ecc7366 100644 --- a/package.json +++ b/package.json @@ -23,6 +23,8 @@ "axios": "^1.3.6", "canvas-record": "^3.1.0", "core-js": "^3.30.1", + "html2canvas": "^1.4.1", + "jspdf": "^2.5.1", "ol": "8.1.0", "proj4": "2.9.0", "vue": "2.7.14", diff --git a/src/components/printTool/printDialog.vue b/src/components/printTool/printDialog.vue new file mode 100644 index 00000000..f86d8845 --- /dev/null +++ b/src/components/printTool/printDialog.vue @@ -0,0 +1,239 @@ + + + + + + diff --git a/src/locales/en.json b/src/locales/en.json index 8adb11d3..88410a69 100644 --- a/src/locales/en.json +++ b/src/locales/en.json @@ -99,5 +99,24 @@ "wgu-themeswitcher": { "title": "Dark mode" + }, + + "wgu-print": { + "title": "Print map", + "subtitle": "Print and export pdf of the current map with the given parameters", + "dim": "Paper size", + "scales": [ + 1000000, 500000, 250000, 100000, 50000, 25000, 10000, 5000 , 2000, 1000, 500, 200 + ], + "resolutions": [ + 72, 150 + ], + "orientation": "Orientation", + "portrait": "Portrait", + "landscape": "Landscape", + "resolution": "Resolution", + "scale": "Scale", + "exportClick": "Export pdf" } + } From aa2edff819b861fb036ce75b1517a9bcc95c05c7 Mon Sep 17 00:00:00 2001 From: enrico ferreguti Date: Mon, 22 Apr 2024 17:06:22 +0200 Subject: [PATCH 3/9] more default resolution choices --- src/locales/en.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/locales/en.json b/src/locales/en.json index 88410a69..060cb9b0 100644 --- a/src/locales/en.json +++ b/src/locales/en.json @@ -109,7 +109,7 @@ 1000000, 500000, 250000, 100000, 50000, 25000, 10000, 5000 , 2000, 1000, 500, 200 ], "resolutions": [ - 72, 150 + 72, 150, 300 ], "orientation": "Orientation", "portrait": "Portrait", From 75c541b7957959e11a2d95f04aefd0f930f8eb92 Mon Sep 17 00:00:00 2001 From: enrico ferreguti Date: Mon, 22 Apr 2024 17:14:54 +0200 Subject: [PATCH 4/9] linting fix --- src/components/printTool/printDialog.vue | 56 +++++++++++------------- 1 file changed, 26 insertions(+), 30 deletions(-) diff --git a/src/components/printTool/printDialog.vue b/src/components/printTool/printDialog.vue index f86d8845..637bd10d 100644 --- a/src/components/printTool/printDialog.vue +++ b/src/components/printTool/printDialog.vue @@ -51,23 +51,21 @@ From ae296cc59aefc2af713e6290eb01436b642c2eb7 Mon Sep 17 00:00:00 2001 From: enrico ferreguti Date: Tue, 23 Apr 2024 15:08:53 +0200 Subject: [PATCH 5/9] fix for issue retated to orientation translated values --- src/components/printTool/printDialog.vue | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/printTool/printDialog.vue b/src/components/printTool/printDialog.vue index 637bd10d..1109b90c 100644 --- a/src/components/printTool/printDialog.vue +++ b/src/components/printTool/printDialog.vue @@ -153,7 +153,7 @@ export default { const mapElementClass = mapElement.className; mapElement.className = ''; let dim = this.dims[this.format]; - if (this.orientation === 'portrait') dim = dim.reverse(); + if (this.orientation === this.$t('wgu-print.portrait')) dim = dim.reverse(); const scale = this.scales[this.scale]; const width = Math.round((dim[0] * parseInt(this.resolution)) / 25.4); const height = Math.round((dim[1] * parseInt(this.resolution)) / 25.4); @@ -189,7 +189,7 @@ export default { } html2canvas(viewport, exportOptions).then(function (canvas) { const pdf = new PDF({ - orientation: me.orientation, + orientation: me.orientation === me.$t('wgu-print.portrait') ? 'p' : 'l', unit: 'mm', format: me.format }); From de086565f55105c1f42837d10b4197da286c4c49 Mon Sep 17 00:00:00 2001 From: enrico ferreguti Date: Fri, 26 Apr 2024 12:53:31 +0200 Subject: [PATCH 6/9] temporary fix for jspdf tests issues --- vue.config.js | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/vue.config.js b/vue.config.js index e31590b3..43e930db 100644 --- a/vue.config.js +++ b/vue.config.js @@ -72,5 +72,7 @@ module.exports = defineConfig({ // Disable dependencies transpilation as browsers currently targetted by // .browserlistrc doesn't need it anymore. If legacy browsers need to be supported // modules to be processed can be granularly specified here. - transpileDependencies: false + transpileDependencies: false[ + 'jspdf' + ] }) From de39e644a047bf7a87cc4bcf0e75c82f677c1215 Mon Sep 17 00:00:00 2001 From: enrico ferreguti Date: Fri, 26 Apr 2024 13:02:08 +0200 Subject: [PATCH 7/9] print module in app template --- app-starter/WguAppTemplate.vue | 2 ++ 1 file changed, 2 insertions(+) diff --git a/app-starter/WguAppTemplate.vue b/app-starter/WguAppTemplate.vue index 4d7ebeb2..52549aeb 100644 --- a/app-starter/WguAppTemplate.vue +++ b/app-starter/WguAppTemplate.vue @@ -95,6 +95,7 @@ import InfoClickWin from '../src/components/infoclick/InfoClickWin' import MapLoadingStatus from '../src/components/progress/MapLoadingStatus' import AttributeTableWin from '../src/components/attributeTable/AttributeTableWin.vue' import MapRecorderWin from '../src/components/maprecorder/MapRecorderWin' +import printDialog from '../src/components/printTool/printDialog.vue' import SampleModuleWin from './components/SampleModule.vue' export default { @@ -116,6 +117,7 @@ export default { 'wgu-maploading-status': MapLoadingStatus, 'wgu-attributetable-win': AttributeTableWin, 'wgu-maprecorder-win': MapRecorderWin, + 'wgu-print-win': printDialog, 'sample-module-win': SampleModuleWin }, data () { From dee127a97ae1407d7d524ac6b6a413854ab9f80a Mon Sep 17 00:00:00 2001 From: enrico ferreguti Date: Fri, 26 Apr 2024 13:06:55 +0200 Subject: [PATCH 8/9] fix syntax issue in config --- vue.config.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/vue.config.js b/vue.config.js index 43e930db..852a6a64 100644 --- a/vue.config.js +++ b/vue.config.js @@ -72,7 +72,7 @@ module.exports = defineConfig({ // Disable dependencies transpilation as browsers currently targetted by // .browserlistrc doesn't need it anymore. If legacy browsers need to be supported // modules to be processed can be granularly specified here. - transpileDependencies: false[ + transpileDependencies: [ 'jspdf' ] }) From 6b124636c4122c9a5e2a0097de51f060833402a0 Mon Sep 17 00:00:00 2001 From: enrico ferreguti Date: Sat, 27 Apr 2024 08:22:59 +0200 Subject: [PATCH 9/9] move the scale bar away from the border --- src/components/printTool/printDialog.vue | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/src/components/printTool/printDialog.vue b/src/components/printTool/printDialog.vue index 1109b90c..e623db27 100644 --- a/src/components/printTool/printDialog.vue +++ b/src/components/printTool/printDialog.vue @@ -152,6 +152,7 @@ export default { const mapElement = this.map.getTargetElement(); const mapElementClass = mapElement.className; mapElement.className = ''; + const scaleLineElement = document.getElementsByClassName('ol-scale-bar')[0] let dim = this.dims[this.format]; if (this.orientation === this.$t('wgu-print.portrait')) dim = dim.reverse(); const scale = this.scales[this.scale]; @@ -204,6 +205,8 @@ export default { pdf.save('map.pdf'); // Reset original map size me.scaleLine.setDpi(); + scaleLineElement.style.left = ''; + scaleLineElement.style.bottom = ''; mapElement.className = mapElementClass; mapElement.style.width = ''; mapElement.style.height = ''; @@ -214,9 +217,10 @@ export default { // Set print size this.scaleLine.setDpi(parseInt(this.resolution)); + scaleLineElement.style.left = '10mm'; + scaleLineElement.style.bottom = '10mm'; mapElement.style.width = width + 'px'; mapElement.style.height = height + 'px'; - console.log('render sizes', this.map.getTargetElement().style.width, this.map.getTargetElement().style.height) this.map.getView().setResolution(scaleResolution); this.map.updateSize(); }