Mercurial > gemma
changeset 5282:12e2422ae57c
Show current scale dominator as placeholder in PDF export [ci by swilde]
author | Fadi Abbud <fadi.abbud@intevation.de> |
---|---|
date | Fri, 26 Jun 2020 11:37:20 +0200 |
parents | cda87159b431 |
children | fdbc28a71691 06300836bab0 |
files | client/src/components/Pdftool.vue |
diffstat | 1 files changed, 55 insertions(+), 24 deletions(-) [+] |
line wrap: on
line diff
--- a/client/src/components/Pdftool.vue Fri Jun 19 16:19:57 2020 +0200 +++ b/client/src/components/Pdftool.vue Fri Jun 26 11:37:20 2020 +0200 @@ -59,7 +59,7 @@ </small> <input class="form-control form-control-sm w-100 ml-2" - placeholder="10000" + :placeholder="scalePlaceholder" v-model.number="form.scale" type="number" /> @@ -219,6 +219,13 @@ } }); return counter; + }, + scalePlaceholder() { + if (typeof this.openLayersMap() !== "undefined") { + return this.calculateScaleDenominator(); + } else { + return "10000"; + } } }, methods: { @@ -339,21 +346,9 @@ * */ this.readyToGenerate = false; - if (this.form.format !== "portrait") { - this.pdf.width = paperSizes[this.form.paperSize][0]; - this.pdf.height = paperSizes[this.form.paperSize][1]; - } else { - this.pdf.width = paperSizes[this.form.paperSize][1]; - this.pdf.height = paperSizes[this.form.paperSize][0]; - } - + this.setPDFDimension(); // FUTURE: consider margins - - var pixelsPerMapMillimeter = this.form.resolution / 25.4; - var mapSizeForPrint = [ - Math.round(this.pdf.width * pixelsPerMapMillimeter), - Math.round(this.pdf.height * pixelsPerMapMillimeter) - ]; + const mapSizeForPrint = this.setMapSizForPrint(); var map = this.openLayersMap(); this.mapSize = map.getSize(); this.resolution = map.getView().getResolution(); @@ -361,15 +356,7 @@ this.pdf.doc = new jsPDF(this.form.format, "mm", this.form.paperSize); this.rendercompleteListener = map.once("rendercomplete", event => { let canvas = event.context.canvas; - let scaleDenominator = Math.round( - 1000 * - pixelsPerMapMillimeter * - this.getMeterPerPixel( - this.openLayersMap() - .getView() - .getResolution() - ) - ); + let scaleDenominator = this.calculateScaleDenominator(); var snapshot = canvas.toDataURL("image/jpeg"); this.pdf.doc.addImage( snapshot, @@ -911,6 +898,50 @@ textOptions ); } + }, + calculateScaleDenominator() { + const pixelsPerMapMillimeter = this.form.resolution / 25.4; + if (!this.form.scale) { + this.setPDFDimension(); + const mapSizeForPrint = this.setMapSizForPrint(); + const size = this.openLayersMap().getSize(); + const [width, height] = mapSizeForPrint; + const scaling = Math.min(width / size[0], height / size[1]); + return Math.round( + 1000 * + pixelsPerMapMillimeter * + this.getMeterPerPixel( + this.openLayersMap() + .getView() + .getResolution() / scaling + ) + ); + } + return Math.round( + 1000 * + pixelsPerMapMillimeter * + this.getMeterPerPixel( + this.openLayersMap() + .getView() + .getResolution() + ) + ); + }, + setPDFDimension() { + if (this.form.format !== "portrait") { + this.pdf.width = paperSizes[this.form.paperSize][0]; + this.pdf.height = paperSizes[this.form.paperSize][1]; + } else { + this.pdf.width = paperSizes[this.form.paperSize][1]; + this.pdf.height = paperSizes[this.form.paperSize][0]; + } + }, + setMapSizForPrint() { + const pixelsPerMapMillimeter = this.form.resolution / 25.4; + return [ + Math.round(this.pdf.width * pixelsPerMapMillimeter), + Math.round(this.pdf.height * pixelsPerMapMillimeter) + ]; } }, mounted() {