Mercurial > gemma
changeset 3813:bb71c80a3357 yworks-svg2pdf
merge
author | Thomas Junk <thomas.junk@intevation.de> |
---|---|
date | Fri, 05 Jul 2019 11:03:51 +0200 |
parents | a79a68361f3b (current diff) 37e896990c99 (diff) |
children | ff8ca2d80ce9 d5d4a38866bd |
files | |
diffstat | 2 files changed, 13 insertions(+), 18 deletions(-) [+] |
line wrap: on
line diff
--- a/client/src/components/fairway/AvailableFairwayDepth.vue Fri Jul 05 11:03:35 2019 +0200 +++ b/client/src/components/fairway/AvailableFairwayDepth.vue Fri Jul 05 11:03:51 2019 +0200 @@ -75,7 +75,7 @@ import debounce from "debounce"; import { mapState } from "vuex"; import filters from "@/lib/filters.js"; -import canvg from "canvg"; +import svg2pdf from "svg2pdf.js"; import { diagram, pdfgen, templateLoader } from "@/lib/mixins"; import { HTTP } from "@/lib/http"; import { displayError } from "@/lib/errors"; @@ -120,7 +120,7 @@ { type: "diagram", position: "topleft", - offset: { x: 20, y: 60 }, + offset: { x: 20, y: 30 }, width: 290, height: 100 }, @@ -134,7 +134,7 @@ { type: "diagramlegend", position: "topleft", - offset: { x: 30, y: 160 }, + offset: { x: 30, y: 170 }, color: "black" } ] @@ -297,10 +297,8 @@ addDiagram(position, offset, width, height) { let x = offset.x, y = offset.y; - var svg = this.$refs.diagramContainer.innerHTML; - if (svg) { - svg = svg.replace(/\r?\n|\r/g, "").trim(); - } + var svgElement = this.$refs.diagramContainer.firstElementChild; + // use default width,height if they are missing in the template definition if (!width) { width = this.templateData.properties.paperSize === "a3" ? 380 : 290; @@ -314,16 +312,12 @@ if (["bottomright", "bottomleft"].indexOf(position) !== -1) { y = this.pdf.height - offset.y - height; } - var canvas = document.createElement("canvas"); - canvas.width = window.innerWidth; - canvas.height = window.innerHeight / 2; - canvg(canvas, svg, { - ignoreMouse: true, - ignoreAnimation: true, - ignoreDimensions: true + + svg2pdf(svgElement, this.pdf.doc, { + xOffset: x, + yOffset: y, + scale: 0.4 // TODO depend on the size and aspect ration on paper }); - var imgData = canvas.toDataURL("image/png"); - this.pdf.doc.addImage(imgData, "PNG", x, y, width, height); }, addDiagramLegend(position, offset, color) { let x = offset.x, @@ -540,7 +534,7 @@ .attr("y", this.dimensions.mainHeight - this.labelPaddingBottom) .attr("x", this.widthPerItem / 2) .attr("text-anchor", "middle") - .attr("font-size", "smaller"); + .attr("font-size", "9"); }, drawScaleLabel() { const center = this.dimensions.mainHeight / 2; @@ -550,7 +544,7 @@ .attr("text-anchor", "middle") .attr("x", 0) .attr("y", 0) - .attr("dy", "1em") + .attr("dy", "10") .attr("transform", `translate(0, ${center}), rotate(-90)`); }, drawScale() {
--- a/client/src/components/gauge/Waterlevel.vue Fri Jul 05 11:03:35 2019 +0200 +++ b/client/src/components/gauge/Waterlevel.vue Fri Jul 05 11:03:51 2019 +0200 @@ -314,6 +314,7 @@ 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.25 });