Mercurial > gemma

comparison client/src/components/fairway/AvailableFairwayDepthLNWL.vue @ 3814:ff8ca2d80ce9 yworks-svg2pdf

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
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 cc80a37173f8
children ee0066dcfb93
comparison
equal deleted inserted replaced
3813:bb71c80a3357 3814:ff8ca2d80ce9
72 */ 72 */
73 import * as d3 from "d3"; 73 import * as d3 from "d3";
74 import app from "@/main"; 74 import app from "@/main";
75 import debounce from "debounce"; 75 import debounce from "debounce";
76 import { mapState } from "vuex"; 76 import { mapState } from "vuex";
77 import svg2pdf from "svg2pdf.js";
77 import filters from "@/lib/filters.js"; 78 import filters from "@/lib/filters.js";
78 import canvg from "canvg";
79 import { diagram, pdfgen, templateLoader } from "@/lib/mixins"; 79 import { diagram, pdfgen, templateLoader } from "@/lib/mixins";
80 import { HTTP } from "@/lib/http"; 80 import { HTTP } from "@/lib/http";
81 import { displayError } from "@/lib/errors"; 81 import { displayError } from "@/lib/errors";
82 82
83 export default { 83 export default {
113 }, 113 },
114 elements: [ 114 elements: [
115 { 115 {
116 type: "diagram", 116 type: "diagram",
117 position: "topleft", 117 position: "topleft",
118 offset: { x: 20, y: 60 }, 118 offset: { x: 20, y: 30 },
119 width: 290, 119 width: 290,
120 height: 100 120 height: 100
121 }, 121 },
122 { 122 {
123 type: "diagramtitle", 123 type: "diagramtitle",
127 color: "steelblue" 127 color: "steelblue"
128 }, 128 },
129 { 129 {
130 type: "diagramlegend", 130 type: "diagramlegend",
131 position: "topleft", 131 position: "topleft",
132 offset: { x: 30, y: 160 }, 132 offset: { x: 30, y: 170 },
133 color: "black" 133 color: "black"
134 } 134 }
135 ] 135 ]
136 } 136 }
137 }; 137 };
295 this.pdf.doc.save(`Available Fairway Depth LNWL: ${this.featureName}`); 295 this.pdf.doc.save(`Available Fairway Depth LNWL: ${this.featureName}`);
296 }, 296 },
297 addDiagram(position, offset, width, height) { 297 addDiagram(position, offset, width, height) {
298 let x = offset.x, 298 let x = offset.x,
299 y = offset.y; 299 y = offset.y;
300 var svg = this.$refs.diagramContainer.innerHTML; 300
301 if (svg) { 301 var svgElement = this.$refs.diagramContainer.firstElementChild;
302 svg = svg.replace(/\r?\n|\r/g, "").trim(); 302
303 }
304 // use default width,height if they are missing in the template definition 303 // use default width,height if they are missing in the template definition
305 if (!width) { 304 if (!width) {
306 width = this.templateData.properties.paperSize === "a3" ? 380 : 290; 305 width = this.templateData.properties.paperSize === "a3" ? 380 : 290;
307 } 306 }
308 if (!height) { 307 if (!height) {
312 x = this.pdf.width - offset.x - width; 311 x = this.pdf.width - offset.x - width;
313 } 312 }
314 if (["bottomright", "bottomleft"].indexOf(position) !== -1) { 313 if (["bottomright", "bottomleft"].indexOf(position) !== -1) {
315 y = this.pdf.height - offset.y - height; 314 y = this.pdf.height - offset.y - height;
316 } 315 }
317 var canvas = document.createElement("canvas"); 316
318 canvas.width = window.innerWidth; 317 svg2pdf(svgElement, this.pdf.doc, {
319 canvas.height = window.innerHeight / 2; 318 xOffset: x,
320 canvg(canvas, svg, { 319 yOffset: y,
321 ignoreMouse: true, 320 scale: 0.4 // TODO depend on the size and aspect ration on paper
322 ignoreAnimation: true,
323 ignoreDimensions: true
324 }); 321 });
325 var imgData = canvas.toDataURL("image/png");
326 this.pdf.doc.addImage(imgData, "PNG", x, y, width, height);
327 }, 322 },
328 addDiagramLegend(position, offset, color) { 323 addDiagramLegend(position, offset, color) {
329 let x = offset.x, 324 let x = offset.x,
330 y = offset.y; 325 y = offset.y;
331 this.pdf.doc.setFontSize(10); 326 this.pdf.doc.setFontSize(10);
408 drawLabel(date, i) { 403 drawLabel(date, i) {
409 this.diagram 404 this.diagram
410 .append("text") 405 .append("text")
411 .text(date) 406 .text(date)
412 .attr("text-anchor", "middle") 407 .attr("text-anchor", "middle")
413 .attr("font-size", "smaller") 408 .attr("font-size", "9")
414 .attr( 409 .attr(
415 "transform", 410 "transform",
416 `translate(${this.scalePaddingLeft + 411 `translate(${this.scalePaddingLeft +
417 this.widthPerItem * i + 412 this.widthPerItem * i +
418 this.widthPerItem / 2} ${this.dimensions.mainHeight - 15})` 413 this.widthPerItem / 2} ${this.dimensions.mainHeight - 15})`
521 .append("text") 516 .append("text")
522 .text(this.$options.LEGEND) 517 .text(this.$options.LEGEND)
523 .attr("text-anchor", "middle") 518 .attr("text-anchor", "middle")
524 .attr("x", 0) 519 .attr("x", 0)
525 .attr("y", 0) 520 .attr("y", 0)
526 .attr("dy", "1em") 521 .attr("dy", "10")
527 .attr("transform", `translate(0, ${center}), rotate(-90)`); 522 // translate a few mm to the right to allow for slightly higher letters
523 .attr("transform", `translate(2, ${center}), rotate(-90)`);
528 }, 524 },
529 drawScale() { 525 drawScale() {
530 const yAxis = d3.axisLeft().scale(this.yScale); 526 const yAxis = d3.axisLeft().scale(this.yScale);
531 this.diagram 527 this.diagram
532 .append("g") 528 .append("g")