Mercurial > gemma
changeset 3814:ff8ca2d80ce9 yworks-svg2pdf
client: improve pdf generation towards vector diagrams
* Moving AvailableFairwayDepthLNWL.vue addDiagram to svg2pdf.
* Improving display of diagram for AvailableFairwayDepth.vue
on screen by allowing the y-axis label to be slight larger.
The reason is the idea that some letters maybe larger
than the typical anchor point for rotations.
author | Bernhard Reiter <bernhard@intevation.de> |
---|---|
date | Fri, 05 Jul 2019 11:13:53 +0200 |
parents | bb71c80a3357 |
children | 9ad5a525f46a |
files | client/src/components/fairway/AvailableFairwayDepth.vue client/src/components/fairway/AvailableFairwayDepthLNWL.vue |
diffstat | 2 files changed, 17 insertions(+), 20 deletions(-) [+] |
line wrap: on
line diff
--- a/client/src/components/fairway/AvailableFairwayDepth.vue Fri Jul 05 11:03:51 2019 +0200 +++ b/client/src/components/fairway/AvailableFairwayDepth.vue Fri Jul 05 11:13:53 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:03:51 2019 +0200 +++ b/client/src/components/fairway/AvailableFairwayDepthLNWL.vue Fri Jul 05 11:13:53 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);