Mercurial > gemma

comparison client/src/components/Pdftool.vue @ 3293:76f643d20f19

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
clinet: pdf-gen: (cleanup) remove some pdf-functions from pdftool * delete some pdf-functions in pdftool, the reusable functions are defind in mixins.js
author Fadi Abbud <fadi.abbud@intevation.de>
date Thu, 16 May 2019 14:35:48 +0200
parents 6d4d8e7ef881
children a26c1d745fc3
comparison
equal deleted inserted replaced
3292:7a88b37bce8b 3293:76f643d20f19
102 */ 102 */
103 import { mapState, mapGetters } from "vuex"; 103 import { mapState, mapGetters } from "vuex";
104 import jsPDF from "jspdf"; 104 import jsPDF from "jspdf";
105 import "@/lib/font-linbiolinum"; 105 import "@/lib/font-linbiolinum";
106 import { getPointResolution } from "ol/proj"; 106 import { getPointResolution } from "ol/proj";
107 import locale2 from "locale2";
108 import { HTTP } from "@/lib/http"; 107 import { HTTP } from "@/lib/http";
109 import { displayError } from "@/lib/errors"; 108 import { displayError } from "@/lib/errors";
109 import { pdfgen } from "@/lib/mixins";
110 110
111 var paperSizes = { 111 var paperSizes = {
112 // in millimeter, landscape [width, height] 112 // in millimeter, landscape [width, height]
113 a3: [420, 297], 113 a3: [420, 297],
114 a4: [297, 210] 114 a4: [297, 210]
115 }; 115 };
116 116
117 export default { 117 export default {
118 mixins: [pdfgen],
118 name: "pdftool", 119 name: "pdftool",
119 data() { 120 data() {
120 return { 121 return {
121 form: { 122 form: {
122 template: null, 123 template: null,
471 " " + 472 " " +
472 this.form.paperSize.toUpperCase() + 473 this.form.paperSize.toUpperCase() +
473 ")"; 474 ")";
474 this.addText(position, offset, width, fontSize, color, str); 475 this.addText(position, offset, width, fontSize, color, str);
475 }, 476 },
476 addRoundedBox(x, y, w, h, color, rounding, brcolor) {
477 // draws a rounded background box at (x,y) width x height
478 // using jsPDF units
479 this.pdf.doc.setDrawColor(brcolor);
480 this.pdf.doc.setFillColor(color);
481 this.pdf.doc.roundedRect(x, y, w, h, rounding, rounding, "FD");
482 },
483 // add some text at specific coordinates and determine how many wrolds in single line
484 addText(position, offset, width, fontSize, color, text) {
485 text = this.replacePlaceholders(text);
486
487 // split the incoming string to an array, each element is a string of
488 // words in a single line
489 this.pdf.doc.setTextColor(color);
490 this.pdf.doc.setFontSize(fontSize);
491 var textLines = this.pdf.doc.splitTextToSize(text, width);
492
493 // x/y defaults to offset for topleft corner (normal x/y coordinates)
494 let x = offset.x;
495 let y = offset.y;
496
497 // if position is on the right, x needs to be calculate with pdf width and
498 // the size of the element
499 if (["topright", "bottomright"].indexOf(position) !== -1) {
500 x = this.pdf.width - offset.x - width;
501 }
502 if (["bottomright", "bottomleft"].indexOf(position) !== -1) {
503 y = this.pdf.height - offset.y - this.getTextHeight(textLines.length);
504 }
505
506 this.pdf.doc.text(textLines, x, y, { baseline: "hanging" });
507 },
508 addBox(position, offset, width, height, rounding, color, brcolor) {
509 // x/y defaults to offset for topleft corner (normal x/y coordinates)
510 let x = offset.x;
511 let y = offset.y;
512
513 // if position is on the right, x needs to be calculate with pdf width and
514 // the size of the element
515 if (["topright", "bottomright"].indexOf(position) !== -1) {
516 x = this.pdf.width - offset.x - width;
517 }
518 if (["bottomright", "bottomleft"].indexOf(position) !== -1) {
519 y = this.pdf.height - offset.y - height;
520 }
521
522 this.addRoundedBox(x, y, width, height, color, rounding, brcolor);
523 },
524 // add some text at specific coordinates with a background box
525 addTextBox(
526 position,
527 offset,
528 width,
529 height,
530 rounding,
531 padding,
532 fontSize,
533 color,
534 background,
535 text,
536 brcolor
537 ) {
538 this.pdf.doc.setFontSize(fontSize);
539 text = this.replacePlaceholders(text);
540
541 if (!width) {
542 width = this.pdf.doc.getTextWidth(text) + 2 * padding;
543 }
544 let textWidth = width - 2 * padding;
545 if (!height) {
546 let textLines = this.pdf.doc.splitTextToSize(text, textWidth);
547 height = this.getTextHeight(textLines.length) + 2 * padding;
548 }
549
550 this.addBox(
551 position,
552 offset,
553 width,
554 height,
555 rounding,
556 background,
557 brcolor
558 );
559 this.addText(
560 position,
561 { x: offset.x + padding, y: offset.y + padding },
562 textWidth,
563 fontSize,
564 color,
565 text
566 );
567 },
568 addImage(url, format, position, offset, width, height) {
569 // x/y defaults to offset for topleft corner (normal x/y coordinates)
570 let x = offset.x;
571 let y = offset.y;
572
573 // if position is on the right, x needs to be calculate with pdf width and
574 // the size of the element
575 if (["topright", "bottomright"].indexOf(position) !== -1) {
576 x = this.pdf.width - offset.x - width;
577 }
578 if (["bottomright", "bottomleft"].indexOf(position) !== -1) {
579 y = this.pdf.height - offset.y - height;
580 }
581
582 let image = new Image();
583 if (url) {
584 image.src = url;
585 } else {
586 if (this.logoForPDF) {
587 image.src = this.logoForPDF;
588 } else {
589 image.src = "/img/gemma-logo-for-pdf.png";
590 }
591 }
592
593 this.pdf.doc.addImage(image, x, y, width, height);
594 },
595 addScaleBar(scaleDenominator, position, offset, rounding, brcolor) { 477 addScaleBar(scaleDenominator, position, offset, rounding, brcolor) {
596 // scaleDenominator is the x in 1:x of the map scale 478 // scaleDenominator is the x in 1:x of the map scale
597 479
598 // hardcode maximal width for now 480 // hardcode maximal width for now
599 let maxWidth = 80; // in mm 481 let maxWidth = 80; // in mm
912 str4_2, 794 str4_2,
913 textOptions 795 textOptions
914 ); 796 );
915 } 797 }
916 }, 798 },
917 replacePlaceholders(text) {
918 if (text.includes("{date}")) {
919 text = text.replace("{date}", new Date().toLocaleString(locale2));
920 }
921 //get only day,month and year from the Date object
922 if (text.includes("{date-minor}")) {
923 var date = new Date();
924 var dt =
925 (date.getDate() < 10 ? "0" : "") +
926 date.getDate() +
927 "." +
928 (date.getMonth() + 1 < 10 ? "0" : "") +
929 (date.getMonth() + 1) +
930 "." +
931 date.getFullYear();
932 text = text.replace("{date-minor}", dt.toLocaleString(locale2));
933 }
934 if (text.includes("{user}")) {
935 text = text.replace("{user}", this.user);
936 }
937 return text;
938 },
939 getTextHeight(numberOfLines) { 799 getTextHeight(numberOfLines) {
940 return ( 800 return (
941 numberOfLines * 801 numberOfLines *
942 ((this.pdf.doc.getFontSize() * 25.4) / parseInt(this.form.resolution)) * 802 ((this.pdf.doc.getFontSize() * 25.4) / parseInt(this.form.resolution)) *
943 this.pdf.doc.getLineHeightFactor() 803 this.pdf.doc.getLineHeightFactor()