Mercurial > gemma

comparison client/src/components/Pdftool.vue @ 2220:d926292d81b6 pdf-export

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
PDF generation: changed form labels/option texts To reduce the visual size of the form, labels were removed since the form options are self-explanatory.
author Markus Kottlaender <markus@intevation.de>
date Mon, 11 Feb 2019 10:16:48 +0100
parents 80de3787cdb3
children 74c7d84f93d7
comparison
equal deleted inserted replaced
2219:80de3787cdb3 2220:d926292d81b6
27 :key="template.name" 27 :key="template.name"
28 > 28 >
29 <translate>{{ template.name }}</translate> 29 <translate>{{ template.name }}</translate>
30 </option> 30 </option>
31 </select> 31 </select>
32 <hr class="mb-1" />
33 <small class="text-muted"><translate>Format</translate></small>
34 <select 32 <select
35 @change="compareFormWithTemplates" 33 @change="compareFormWithTemplates"
36 v-model="form.format" 34 v-model="form.format"
37 class="form-control form-control-sm d-block mb-2 w-100" 35 class="form-control form-control-sm d-block mb-2 w-100"
38 > 36 >
39 <option value="landscape"><translate>landscape</translate></option> 37 <option value="landscape"><translate>landscape</translate></option>
40 <option value="portrait"><translate>portrait</translate></option> 38 <option value="portrait"><translate>portrait</translate></option>
41 </select> 39 </select>
42 <div class="d-flex"> 40 <div class="d-flex">
43 <div class="flex-fill mr-2"> 41 <div class="flex-fill mr-2">
44 <small class="text-muted"><translate>Resolution</translate></small>
45 <select 42 <select
46 @change="compareFormWithTemplates" 43 @change="compareFormWithTemplates"
47 v-model="form.resolution" 44 v-model="form.resolution"
48 class="form-control form-control-sm mb-2 d-block w-100" 45 class="form-control form-control-sm mb-2 d-block w-100"
49 > 46 >
50 <option value="80">80 dpi</option> 47 <option value="80">
51 <option value="120">120 dpi</option> 48 <translate>low resolution (80 dpi)</translate>
52 <option value="200">200 dpi</option> 49 </option>
50 <option value="120">
51 <translate>medium resolution (120 dpi)</translate>
52 </option>
53 <option value="200">
54 <translate>high resolution (200 dpi)</translate>
55 </option>
53 </select> 56 </select>
54 </div> 57 </div>
55 <div class="flex-fill ml-2"> 58 <div class="flex-fill ml-2">
56 <small class="text-muted"><translate>Size</translate></small>
57 <select 59 <select
58 @change="compareFormWithTemplates" 60 @change="compareFormWithTemplates"
59 v-model="form.paperSize" 61 v-model="form.paperSize"
60 class="form-control form-control-sm mb-2 d-block w-100" 62 class="form-control form-control-sm mb-2 d-block w-100"
61 > 63 >
62 <option value="a3"><translate>ISO A3</translate></option> 64 <option value="a4"><translate>A4</translate></option>
63 <option value="a4"><translate>ISO A4</translate></option> 65 <option value="a3"><translate>A3</translate></option>
64 </select> 66 </select>
65 </div> 67 </div>
66 </div> 68 </div>
67 <!-- 69 <!--
68 <small class="d-block my-2"> 70 <small class="d-block my-2">
134 form: { 136 form: {
135 template: null, 137 template: null,
136 format: "landscape", 138 format: "landscape",
137 paperSize: "a4", 139 paperSize: "a4",
138 downloadType: "download", 140 downloadType: "download",
139 resolution: "120" 141 resolution: "80"
140 }, 142 },
141 pdf: { 143 pdf: {
142 doc: null, 144 doc: null,
143 width: null, 145 width: null,
144 height: null 146 height: null
278 e.border 280 e.border
279 ); 281 );
280 break; 282 break;
281 } 283 }
282 case "bottleneck": { 284 case "bottleneck": {
283 this.addBottleneckInfo( 285 this.addBottleneckInfo(e.position, e.offset);
284 e.position,
285 e.offset
286 );
287 break; 286 break;
288 } 287 }
289 case "legend": { 288 case "legend": {
290 this.addLegend( 289 this.addLegend(e.position, e.offset);
291 e.position,
292 e.offset
293 );
294 break; 290 break;
295 } 291 }
296 case "scalebar": { 292 case "scalebar": {
297 this.addScaleBar(scaleNominator, e.position, e.offset); 293 this.addScaleBar(scaleNominator, e.position, e.offset);
298 break; 294 break;
469 x1 = this.pdf.width - offset.x - size; 465 x1 = this.pdf.width - offset.x - size;
470 } 466 }
471 if (["bottomright", "bottomleft"].indexOf(position) !== -1) { 467 if (["bottomright", "bottomleft"].indexOf(position) !== -1) {
472 y1 = this.pdf.height - offset.y - size; 468 y1 = this.pdf.height - offset.y - size;
473 } 469 }
474 470
475
476 var y2 = y1 + size * 3; 471 var y2 = y1 + size * 3;
477 var x3 = x1 - size * 2; 472 var x3 = x1 - size * 2;
478 var y3 = y1 + size * 5; 473 var y3 = y1 + size * 5;
479 var x4 = x1 + size * 2; 474 var x4 = x1 + size * 2;
480 // white triangle 475 // white triangle
528 if (["bottomright", "bottomleft"].indexOf(position) !== -1) { 523 if (["bottomright", "bottomleft"].indexOf(position) !== -1) {
529 y = this.pdf.height - offset.y - 10; 524 y = this.pdf.height - offset.y - 10;
530 } 525 }
531 526
532 this.addRoundedBox(x, y, width, height); 527 this.addRoundedBox(x, y, width, height);
533 528
534 // replace placeholders 529 // replace placeholders
535 if (text.includes("{date}")) { 530 if (text.includes("{date}")) {
536 text = text.replace("{date}", new Date().toLocaleString(locale2)); 531 text = text.replace("{date}", new Date().toLocaleString(locale2));
537 } 532 }
538 if (text.includes("{user}")) { 533 if (text.includes("{user}")) {
557 } 552 }
558 if (["bottomright", "bottomleft"].indexOf(position) !== -1) { 553 if (["bottomright", "bottomleft"].indexOf(position) !== -1) {
559 y = this.pdf.height - offset.y - height; 554 y = this.pdf.height - offset.y - height;
560 } 555 }
561 556
562 this.addRoundedBox(x, y, width, height); 557 if (border) {
563 558 this.addRoundedBox(x, y, width, height);
559 }
560
564 let image = new Image(); 561 let image = new Image();
565 image.src = url; 562 image.src = url;
566 this.pdf.doc.addImage( 563 this.pdf.doc.addImage(
567 image, 564 image,
568 x + border, 565 x + border,
570 width - 2 * border, 567 width - 2 * border,
571 height - 2 * border 568 height - 2 * border
572 ); 569 );
573 }, 570 },
574 addLegend(position, offset) { 571 addLegend(position, offset) {
575 if (this.selectedBottleneck && this.getLayerByName("Bottleneck isolines").isVisible) { 572 if (
573 this.selectedBottleneck &&
574 this.getLayerByName("Bottleneck isolines").isVisible
575 ) {
576 // transforming into an HTMLImageElement only to find out 576 // transforming into an HTMLImageElement only to find out
577 // the width x height of the legend image 577 // the width x height of the legend image
578 // FUTURE: find a better way to get the width and height 578 // FUTURE: find a better way to get the width and height
579 let legendImage = new Image(); 579 let legendImage = new Image();
580 legendImage.src = this.isolinesLegendImgDataURL; 580 legendImage.src = this.isolinesLegendImgDataURL;
581 let aspectRatio = legendImage.width / legendImage.height; 581 let aspectRatio = legendImage.width / legendImage.height;
582 let width = 54; 582 let width = 54;
583 let height = width / aspectRatio; 583 let height = width / aspectRatio;
584 let padding = 2; 584 let padding = 2;
585 585
586 // x/y defaults to offset for topleft corner (normal x/y coordinates) 586 // x/y defaults to offset for topleft corner (normal x/y coordinates)
587 let x = offset.x; 587 let x = offset.x;
588 let y = offset.y; 588 let y = offset.y;
589 589
590 // if position is on the right, x needs to be calculate with pdf width and 590 // if position is on the right, x needs to be calculate with pdf width and
591 // the size of the element 591 // the size of the element
592 if (["topright", "bottomright"].indexOf(position) !== -1) { 592 if (["topright", "bottomright"].indexOf(position) !== -1) {
593 x = this.pdf.width - offset.x - width; 593 x = this.pdf.width - offset.x - width;
594 } 594 }
605 height - 2 * padding 605 height - 2 * padding
606 ); 606 );
607 } 607 }
608 }, 608 },
609 addBottleneckInfo(position, offset) { 609 addBottleneckInfo(position, offset) {
610 if (this.selectedBottleneck && this.getLayerByName("Bottleneck isolines").isVisible) { 610 if (
611 this.selectedBottleneck &&
612 this.getLayerByName("Bottleneck isolines").isVisible
613 ) {
611 let width = 54; 614 let width = 54;
612 let height = 13; 615 let height = 13;
613 let padding = 5; 616 let padding = 5;
614 617
615 // x/y defaults to offset for topleft corner (normal x/y coordinates) 618 // x/y defaults to offset for topleft corner (normal x/y coordinates)
616 let x = offset.x; 619 let x = offset.x;
617 let y = offset.y; 620 let y = offset.y;
618 621
619 // if position is on the right, x needs to be calculate with pdf width and 622 // if position is on the right, x needs to be calculate with pdf width and
620 // the size of the element 623 // the size of the element
621 if (["topright", "bottomright"].indexOf(position) !== -1) { 624 if (["topright", "bottomright"].indexOf(position) !== -1) {
622 x = this.pdf.width - offset.x - width; 625 x = this.pdf.width - offset.x - width;
623 } 626 }
637 this.pdf.doc.setFontStyle("italic"); 640 this.pdf.doc.setFontStyle("italic");
638 this.pdf.doc.text(x + padding, y + padding, str); 641 this.pdf.doc.text(x + padding, y + padding, str);
639 str = this.selectedBottleneck; 642 str = this.selectedBottleneck;
640 this.pdf.doc.setFontStyle("bold"); 643 this.pdf.doc.setFontStyle("bold");
641 this.pdf.doc.text(x + padding + w, y + padding, str); 644 this.pdf.doc.text(x + padding + w, y + padding, str);
642 645
643 str = this.$gettext("Survey date") + ": "; 646 str = this.$gettext("Survey date") + ": ";
644 w = this.pdf.doc.getTextWidth(str); 647 w = this.pdf.doc.getTextWidth(str);
645 this.pdf.doc.setFontStyle("italic"); 648 this.pdf.doc.setFontStyle("italic");
646 this.pdf.doc.text(x + padding, y + padding + 3, str); 649 this.pdf.doc.text(x + padding, y + padding + 3, str);
647 str = this.selectedSurvey.date_info; 650 str = this.selectedSurvey.date_info;
648 this.pdf.doc.setFontStyle("normal"); 651 this.pdf.doc.setFontStyle("normal");
649 this.pdf.doc.text(x + padding + w, y + padding + 3, str); 652 this.pdf.doc.text(x + padding + w, y + padding + 3, str);
650 653
651 str = this.$gettext("Ref gauge") + ": "; 654 str = this.$gettext("Ref gauge") + ": ";
652 w = this.pdf.doc.getTextWidth(str); 655 w = this.pdf.doc.getTextWidth(str);
653 this.pdf.doc.setFontStyle("italic"); 656 this.pdf.doc.setFontStyle("italic");
654 this.pdf.doc.text(x + padding, y + padding + 6, str); 657 this.pdf.doc.text(x + padding, y + padding + 6, str);
655 str = this.selectedSurvey.gauge_objname; 658 str = this.selectedSurvey.gauge_objname;