changeset 2258:24cafd6b1a55

client: pdf-gen: width of bottleneck info box is calculated based on its content now
author Markus Kottlaender <markus@intevation.de>
date Thu, 14 Feb 2019 10:00:11 +0100
parents ce6fd3d4a3a2
children 7e378b38d302
files client/src/components/Pdftool.vue
diffstat 1 files changed, 74 insertions(+), 37 deletions(-) [+]
line wrap: on
line diff
--- a/client/src/components/Pdftool.vue	Thu Feb 14 08:56:32 2019 +0100
+++ b/client/src/components/Pdftool.vue	Thu Feb 14 10:00:11 2019 +0100
@@ -673,9 +673,50 @@
         this.selectedBottleneck &&
         this.getLayerByName("Bottleneck isolines").isVisible
       ) {
-        let width = 54;
-        let height = 17;
+        let survey = this.selectedSurvey;
+
+        // determine text dimensions
+        // this is a little bit cumbersome but we need to separate width
+        // calculations and writing
+        this.pdf.doc.setFontSize(10);
+        this.pdf.doc.setTextColor(color);
+        let textOptions = { baseline: "hanging" };
+        let str1_1 = this.$gettext("Bottleneck") + ": ";
+        let str1_2 = this.selectedBottleneck;
+        let str2_1 = this.$gettext("Survey date") + ": ";
+        let str2_2 = survey.date_info;
+        let str3_1 = this.$gettext("Ref gauge") + ": ";
+        let str3_2 = survey.gauge_objname;
+        let str4_1 = this.$gettext("Depth relativ to") + ": ";
+        let str4_2 =
+          survey.depth_reference +
+          " = " +
+          survey.hasOwnProperty("waterlevel_value")
+            ? survey.waterlevel_value + " cm"
+            : "?";
+
+        this.pdf.doc.setFontStyle("italic");
+        let w1_1 = this.pdf.doc.getTextWidth(str1_1);
+        this.pdf.doc.setFontStyle("bold");
+        let w1_2 = this.pdf.doc.getTextWidth(str1_2);
+        this.pdf.doc.setFontStyle("italic");
+        let w2_1 = this.pdf.doc.getTextWidth(str2_1);
+        this.pdf.doc.setFontStyle("normal");
+        let w2_2 = this.pdf.doc.getTextWidth(str2_2);
+        this.pdf.doc.setFontStyle("italic");
+        let w3_1 = this.pdf.doc.getTextWidth(str3_1);
+        this.pdf.doc.setFontStyle("normal");
+        let w3_2 = this.pdf.doc.getTextWidth(str3_2);
+        this.pdf.doc.setFontStyle("italic");
+        let w4_1 = this.pdf.doc.getTextWidth(str4_1);
+        this.pdf.doc.setFontStyle("normal");
+        let w4_2 = this.pdf.doc.getTextWidth(str4_2);
+
+        let height = 21;
         let padding = 3;
+        let width =
+          Math.max(w1_1 + w1_2, w2_1 + w2_2, w3_1 + w3_2, w4_1 + w4_2) +
+          2 * padding;
 
         // x/y defaults to offset for topleft corner (normal x/y coordinates)
         let x = offset.x;
@@ -690,51 +731,47 @@
           y = this.pdf.height - offset.y - height;
         }
 
+        // white background box
         this.addRoundedBox(x, y, width, height, "white", rounding);
 
-        this.pdf.doc.setFontSize(10);
-        this.pdf.doc.setTextColor(color);
-
-        let str, w;
-
-        str = this.$gettext("Bottleneck") + ": ";
-        w = this.pdf.doc.getTextWidth(str);
+        // bottleneck
         this.pdf.doc.setFontStyle("italic");
-        this.pdf.doc.text(x + padding, y + padding, str);
-        str = this.selectedBottleneck;
+        this.pdf.doc.text(x + padding, y + padding, str1_1, textOptions);
         this.pdf.doc.setFontStyle("bold");
-        this.pdf.doc.text(x + padding + w, y + padding, str);
+        this.pdf.doc.text(x + padding + w1_1, y + padding, str1_2, textOptions);
 
-        let survey = this.selectedSurvey;
-
-        str = this.$gettext("Survey date") + ": ";
-        w = this.pdf.doc.getTextWidth(str);
+        // survey date
         this.pdf.doc.setFontStyle("italic");
-        this.pdf.doc.text(x + padding, y + padding + 3, str);
-        str = survey.date_info;
+        this.pdf.doc.text(x + padding, y + padding + 4, str2_1, textOptions);
         this.pdf.doc.setFontStyle("normal");
-        this.pdf.doc.text(x + padding + w, y + padding + 3, str);
-
-        str = this.$gettext("Ref gauge") + ": ";
-        w = this.pdf.doc.getTextWidth(str);
-        this.pdf.doc.setFontStyle("italic");
-        this.pdf.doc.text(x + padding, y + padding + 6, str);
-        str = survey.gauge_objname;
-        this.pdf.doc.setFontStyle("normal");
-        this.pdf.doc.text(x + padding + w, y + padding + 6, str);
+        this.pdf.doc.text(
+          x + padding + w2_1,
+          y + padding + 4,
+          str2_2,
+          textOptions
+        );
 
-        str = this.$gettext("Depth relativ to") + ": ";
-        w = this.pdf.doc.getTextWidth(str);
+        // ref gauge
         this.pdf.doc.setFontStyle("italic");
-        this.pdf.doc.text(x + padding, y + padding + 9, str);
+        this.pdf.doc.text(x + padding, y + padding + 8, str3_1, textOptions);
         this.pdf.doc.setFontStyle("normal");
-        str = survey.depth_reference + " = ";
-        if (survey.hasOwnProperty("waterlevel_value")) {
-          str += survey.waterlevel_value + " cm";
-        } else {
-          str += "?";
-        }
-        this.pdf.doc.text(x + padding + w, y + padding + 9, str);
+        this.pdf.doc.text(
+          x + padding + w3_1,
+          y + padding + 8,
+          str3_2,
+          textOptions
+        );
+
+        // depth relative to
+        this.pdf.doc.setFontStyle("italic");
+        this.pdf.doc.text(x + padding, y + padding + 12, str4_1, textOptions);
+        this.pdf.doc.setFontStyle("normal");
+        this.pdf.doc.text(
+          x + padding + w4_1,
+          y + padding + 12,
+          str4_2,
+          textOptions
+        );
       }
     },
     replacePlaceholders(text) {