Mercurial > gemma

comparison client/src/components/fairway/Fairwayprofile.vue @ 3818:242057dbc8c3 yworks-svg2pdf

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
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;