Mercurial > gemma
changeset 3820:ee0066dcfb93 yworks-svg2pdf
Move hydrological conditions to svg2pdf
Added experimental aspectratio for A4.
ToDO: Find better values.
author | Thomas Junk <thomas.junk@intevation.de> |
---|---|
date | Fri, 05 Jul 2019 13:16:53 +0200 |
parents | 27bfa6b0c194 |
children | 252dc1d98a08 |
files | client/src/components/fairway/AvailableFairwayDepth.vue client/src/components/fairway/AvailableFairwayDepthLNWL.vue client/src/components/gauge/HydrologicalConditions.vue client/src/components/gauge/Waterlevel.vue |
diffstat | 4 files changed, 13 insertions(+), 18 deletions(-) [+] |
line wrap: on
line diff
--- a/client/src/components/fairway/AvailableFairwayDepth.vue Fri Jul 05 12:54:27 2019 +0200 +++ b/client/src/components/fairway/AvailableFairwayDepth.vue Fri Jul 05 13:16:53 2019 +0200 @@ -316,7 +316,7 @@ svg2pdf(svgElement, this.pdf.doc, { xOffset: x, yOffset: y, - scale: 0.4 // TODO depend on the size and aspect ration on paper + scale: this.templateData.properties.paperSize === "a3" ? 0.45 : 0.18 // TODO depend on the size and aspect ration on paper }); }, addDiagramLegend(position, offset, color) {
--- a/client/src/components/fairway/AvailableFairwayDepthLNWL.vue Fri Jul 05 12:54:27 2019 +0200 +++ b/client/src/components/fairway/AvailableFairwayDepthLNWL.vue Fri Jul 05 13:16:53 2019 +0200 @@ -317,7 +317,7 @@ svg2pdf(svgElement, this.pdf.doc, { xOffset: x, yOffset: y, - scale: 0.4 // TODO depend on the size and aspect ration on paper + scale: this.templateData.properties.paperSize === "a3" ? 0.45 : 0.18 // TODO depend on the size and aspect ration on paper }); }, addDiagramLegend(position, offset, color) {
--- a/client/src/components/gauge/HydrologicalConditions.vue Fri Jul 05 12:54:27 2019 +0200 +++ b/client/src/components/gauge/HydrologicalConditions.vue Fri Jul 05 13:16:53 2019 +0200 @@ -108,7 +108,7 @@ import * as d3 from "d3"; import debounce from "debounce"; import { startOfYear, endOfYear } from "date-fns"; -import canvg from "canvg"; +import svg2pdf from "svg2pdf.js"; import { pdfgen, templateLoader } from "@/lib/mixins"; import { HTTP } from "@/lib/http"; import { displayError } from "@/lib/errors"; @@ -273,20 +273,10 @@ .clientHeight + "px"; this.drawDiagram(); } - var svg = document.getElementById(this.containerId).innerHTML; - if (svg) { - svg = svg.replace(/\r?\n|\r/g, "").trim(); - } + var svg = document + .getElementById(this.containerId) + .getElementsByTagName("svg")[0]; this.containerId = "hydrologicalconditions-diagram-container"; - var canvas = document.createElement("canvas"); - canvas.width = window.innerWidth; - canvas.height = window.innerHeight / 2; - canvg(canvas, svg, { - ignoreMouse: true, - ignoreAnimation: true, - ignoreDimensions: true - }); - var imgData = canvas.toDataURL("image/png"); // use default width,height if they are missing in the template definition if (!width) { width = this.templateData.properties.paperSize === "a3" ? 380 : 290; @@ -300,7 +290,12 @@ if (["bottomright", "bottomleft"].indexOf(position) !== -1) { y = this.pdf.height - offset.y - height; } - this.pdf.doc.addImage(imgData, "PNG", x, y, width, height); + svg2pdf(svg, this.pdf.doc, { + xOffset: x, + yOffset: y, + // TODO depend on the size and aspect ration on paper + scale: this.templateData.properties.paperSize === "a3" ? 0.45 : 0.18 + }); }, applyChange() { if (this.form.template.hasOwnProperty("properties")) {
--- a/client/src/components/gauge/Waterlevel.vue Fri Jul 05 12:54:27 2019 +0200 +++ b/client/src/components/gauge/Waterlevel.vue Fri Jul 05 13:16:53 2019 +0200 @@ -315,7 +315,7 @@ xOffset: x, yOffset: y, // TODO depend on the size and aspect ration on paper - scale: this.templateData.properties.paperSize === "a3" ? 0.45 : 0.25 + scale: this.templateData.properties.paperSize === "a3" ? 0.45 : 0.18 }); this.containerId = "waterlevel-diagram-container";