Mercurial > gemma
comparison client/src/components/fairway/Fairwayprofile.vue @ 3818:242057dbc8c3 yworks-svg2pdf
fix bottleneckselection: use id as identifier
author | Thomas Junk <thomas.junk@intevation.de> |
---|---|
date | Fri, 05 Jul 2019 12:39:19 +0200 |
parents | 36add6adf09b |
children | 27bfa6b0c194 |
comparison
equal
deleted
inserted
replaced
3817:9ad5a525f46a | 3818:242057dbc8c3 |
---|---|
91 <translate>Export to PDF</translate> | 91 <translate>Export to PDF</translate> |
92 </button> | 92 </button> |
93 </div> | 93 </div> |
94 </DiagramLegend> | 94 </DiagramLegend> |
95 <div | 95 <div |
96 ref="pdfContainer" | |
96 id="pdfContainer" | 97 id="pdfContainer" |
97 class="d-flex flex-fill justify-content-center align-items-center diagram-container position-relative" | 98 class="d-flex flex-fill justify-content-center align-items-center diagram-container position-relative" |
98 > | 99 > |
99 <div class="direction-indicator"></div> | 100 <div class="direction-indicator"></div> |
100 <div v-if="!fairwayData"> | 101 <div v-if="!fairwayData"> |
146 * Fadi Abbud <fadi.abbud@intevation.de> | 147 * Fadi Abbud <fadi.abbud@intevation.de> |
147 */ | 148 */ |
148 import * as d3 from "d3"; | 149 import * as d3 from "d3"; |
149 import { mapState, mapGetters } from "vuex"; | 150 import { mapState, mapGetters } from "vuex"; |
150 import debounce from "debounce"; | 151 import debounce from "debounce"; |
151 import canvg from "canvg"; | 152 import svg2pdf from "svg2pdf.js"; |
152 import { pdfgen, templateLoader } from "@/lib/mixins"; | 153 import { pdfgen, templateLoader } from "@/lib/mixins"; |
153 import { HTTP } from "@/lib/http"; | 154 import { HTTP } from "@/lib/http"; |
154 import { displayError } from "@/lib/errors"; | 155 import { displayError } from "@/lib/errors"; |
155 | 156 |
156 const GROUND_COLOR = "#4A2F06"; | 157 const GROUND_COLOR = "#4A2F06"; |
365 ); | 366 ); |
366 }, | 367 }, |
367 addDiagram(position, offset, width, height) { | 368 addDiagram(position, offset, width, height) { |
368 let x = offset.x, | 369 let x = offset.x, |
369 y = offset.y; | 370 y = offset.y; |
370 let svg = document.querySelector("#pdfContainer>svg").outerHTML; | 371 let svg = document.querySelector("#pdfContainer>svg"); |
371 | |
372 // use default width,height if they are missing in the template definition | 372 // use default width,height if they are missing in the template definition |
373 if (!width) { | 373 if (!width) { |
374 width = this.templateData.properties.paperSize === "a3" ? 380 : 290; | 374 width = this.templateData.properties.paperSize === "a3" ? 380 : 290; |
375 } | 375 } |
376 if (!height) { | 376 if (!height) { |
380 x = this.pdf.width - offset.x - width; | 380 x = this.pdf.width - offset.x - width; |
381 } | 381 } |
382 if (["bottomright", "bottomleft"].indexOf(position) !== -1) { | 382 if (["bottomright", "bottomleft"].indexOf(position) !== -1) { |
383 y = this.pdf.height - offset.y - height; | 383 y = this.pdf.height - offset.y - height; |
384 } | 384 } |
385 var canvas = document.createElement("canvas"); | 385 svg2pdf(svg, this.pdf.doc, { |
386 canvas.width = window.innerWidth; | 386 xOffset: x, |
387 canvas.height = window.innerHeight / 2; | 387 yOffset: y, |
388 canvg(canvas, svg, { | 388 // TODO depend on the size and aspect ration on paper |
389 ignoreMouse: true, | 389 scale: this.templateData.properties.paperSize === "a3" ? 0.45 : 0.25 |
390 ignoreAnimation: true, | |
391 ignoreDimensions: true | |
392 }); | 390 }); |
393 var imgData = canvas.toDataURL("image/png"); | |
394 this.pdf.doc.addImage(imgData, "PNG", x, y, width, height); | |
395 }, | 391 }, |
396 // Diagram legend | 392 // Diagram legend |
397 addDiagramLegend(position, offset, color) { | 393 addDiagramLegend(position, offset, color) { |
398 let x = offset.x, | 394 let x = offset.x, |
399 y = offset.y; | 395 y = offset.y; |