Mercurial > gemma
changeset 3794:9156890179e2 yworks-svg2pdf
client: improve waterlevel diagram pdf
* Change base of calculation back to millimeter. The `pt` was a
workround which is not necessary with svg2pdf anymore
(since de90ddc9b2e4ea24ea7f835162e86f8dec8b68db).
* Adjust arbitrary scaling to have a chance for the svg to be
on the page. Right now the size of the svg on the page depends on
the size of the svg on screen.
author | Bernhard Reiter <bernhard@intevation.de> |
---|---|
date | Wed, 03 Jul 2019 17:48:19 +0200 |
parents | d428f283fe10 |
children | b330e014c655 |
files | client/src/components/gauge/Waterlevel.vue |
diffstat | 1 files changed, 21 insertions(+), 37 deletions(-) [+] |
line wrap: on
line diff
--- a/client/src/components/gauge/Waterlevel.vue Wed Jul 03 17:19:28 2019 +0200 +++ b/client/src/components/gauge/Waterlevel.vue Wed Jul 03 17:48:19 2019 +0200 @@ -252,35 +252,35 @@ downloadPDF() { this.pdf.doc = new jsPDF( "l", - "pt", + "mm", this.templateData.properties.paperSize ); // pdf width and height in millimeter (landscape) this.pdf.width = - this.templateData.properties.paperSize === "a3" ? 420 : 595.28; + this.templateData.properties.paperSize === "a3" ? 420 : 297; this.pdf.height = - this.templateData.properties.paperSize === "a3" ? 841.89 : 595.28; + this.templateData.properties.paperSize === "a3" ? 297 : 210; // check the template elements if (this.templateData) { let defaultFontSize = 11, defaultColor = "black", - defaultWidth = 70 * 2.83, + defaultWidth = 70, defaultTextColor = "black", defaultBorderColor = "white", defaultBgColor = "white", defaultRounding = 2, - defaultPadding = 2; - //defaultOffset = { x: 0, y: 0 }; + defaultPadding = 2, + defaultOffset = { x: 0, y: 0 }; this.templateData.elements.forEach(e => { switch (e.type) { case "diagram": { - this.addDiagram(e.position, this.calculateOffset(e.offset)); + this.addDiagram(e.position, e.offset || defaultOffset); break; } case "diagramlegend": { this.addDiagramLegend( e.position, - this.calculateOffset(e.offset), + e.offset || defaultOffset, e.color || defaultColor ); break; @@ -300,7 +300,7 @@ this.dateTo.toLocaleDateString(); this.addDiagramTitle( e.position, - this.calculateOffset(e.offset), + e.offset || defaultOffset, e.fontsize || defaultFontSize, e.color || defaultColor, gaugeInfo @@ -310,8 +310,8 @@ case "text": { this.addText( e.position, - this.calculateOffset(e.offset), - e.width * 2.83 || defaultWidth, + e.offset || defaultOffset, + e.width || defaultWidth, e.fontsize || defaultFontSize, e.color || defaultTextColor, e.text || "" @@ -323,18 +323,18 @@ e.url, e.format || "", e.position, - this.calculateOffset(e.offset), - e.width * 2.83 || 90 * 2.83, - e.height * 2.83 || 60 * 2.83 + e.offset || defaultOffset, + e.width || 90, + e.height || 60 ); break; } case "box": { this.addBox( e.position, - this.calculateOffset(e.offset), - e.width * 2.83 || 90 * 2.83, - e.height * 2.83 || 60 * 2.83, + e.offset || defaultOffset, + e.width || 90, + e.height || 60, e.rounding === 0 || e.rounding ? e.rounding : defaultRounding, e.color || defaultBgColor, e.brcolor || defaultBorderColor @@ -344,9 +344,9 @@ case "textbox": { this.addTextBox( e.position, - this.calculateOffset(e.offset), - e.width * 2.83, - e.height * 2.83, + e.offset || defaultOffset, + e.width, + e.height, e.rounding === 0 || e.rounding ? e.rounding : defaultRounding, e.padding || defaultPadding, e.fontsize || defaultFontSize, @@ -364,19 +364,6 @@ this.selectedGauge.properties.objname + " Waterlevel-Diagram.pdf" ); }, - calculateOffset(offset) { - let tmp; - let defaultOffset = { x: 0, y: 0 }; - if (offset) { - tmp = { - x: offset.x * 2.83, - y: offset.y * 2.83 - }; - } else { - tmp = defaultOffset; - } - return tmp; - }, applyChange() { if (this.form.template.hasOwnProperty("properties")) { this.templateData = this.defaultTemplate; @@ -459,10 +446,7 @@ svg2pdf(svg, this.pdf.doc, { xOffset: x, yOffset: y, - scale: - this.templateData.properties.paperSize === "a3" - ? 2 * (25.4 / 72) - : 1.5 * (25.4 / 72) + scale: this.templateData.properties.paperSize === "a3" ? 0.45 : 0.25 }); this.containerId = "waterlevel-diagram-container";