Mercurial > gemma
changeset 3817:9ad5a525f46a yworks-svg2pdf
merge
author | Thomas Junk <thomas.junk@intevation.de> |
---|---|
date | Fri, 05 Jul 2019 11:58:29 +0200 |
parents | d5d4a38866bd (current diff) ff8ca2d80ce9 (diff) |
children | 242057dbc8c3 |
files | |
diffstat | 2 files changed, 17 insertions(+), 20 deletions(-) [+] |
line wrap: on
line diff
--- a/client/src/components/fairway/AvailableFairwayDepth.vue Fri Jul 05 11:57:18 2019 +0200 +++ b/client/src/components/fairway/AvailableFairwayDepth.vue Fri Jul 05 11:58:29 2019 +0200 @@ -545,7 +545,8 @@ .attr("x", 0) .attr("y", 0) .attr("dy", "10") - .attr("transform", `translate(0, ${center}), rotate(-90)`); + // translate a few mm to the right to allow for slightly higher letters + .attr("transform", `translate(2, ${center}), rotate(-90)`); }, drawScale() { const yAxis = d3.axisLeft().scale(this.yScale);
--- a/client/src/components/fairway/AvailableFairwayDepthLNWL.vue Fri Jul 05 11:57:18 2019 +0200 +++ b/client/src/components/fairway/AvailableFairwayDepthLNWL.vue Fri Jul 05 11:58:29 2019 +0200 @@ -74,8 +74,8 @@ import app from "@/main"; import debounce from "debounce"; import { mapState } from "vuex"; +import svg2pdf from "svg2pdf.js"; import filters from "@/lib/filters.js"; -import canvg from "canvg"; import { diagram, pdfgen, templateLoader } from "@/lib/mixins"; import { HTTP } from "@/lib/http"; import { displayError } from "@/lib/errors"; @@ -115,7 +115,7 @@ { type: "diagram", position: "topleft", - offset: { x: 20, y: 60 }, + offset: { x: 20, y: 30 }, width: 290, height: 100 }, @@ -129,7 +129,7 @@ { type: "diagramlegend", position: "topleft", - offset: { x: 30, y: 160 }, + offset: { x: 30, y: 170 }, color: "black" } ] @@ -297,10 +297,9 @@ 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 +313,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, @@ -410,7 +405,7 @@ .append("text") .text(date) .attr("text-anchor", "middle") - .attr("font-size", "smaller") + .attr("font-size", "9") .attr( "transform", `translate(${this.scalePaddingLeft + @@ -523,8 +518,9 @@ .attr("text-anchor", "middle") .attr("x", 0) .attr("y", 0) - .attr("dy", "1em") - .attr("transform", `translate(0, ${center}), rotate(-90)`); + .attr("dy", "10") + // translate a few mm to the right to allow for slightly higher letters + .attr("transform", `translate(2, ${center}), rotate(-90)`); }, drawScale() { const yAxis = d3.axisLeft().scale(this.yScale);