# HG changeset patch
# User Thomas Junk <thomas.junk@intevation.de>
# Date 1562765012 -7200
# Node ID 9dfd225b92e86e7f02ed0f7e131142d17ab03d9e
# Parent  589f308d5802c800eb8a6d202bf3428ee6d71a02
fairwayprofile: offscreen printing

diff -r 589f308d5802 -r 9dfd225b92e8 client/src/components/fairway/Fairwayprofile.vue
--- a/client/src/components/fairway/Fairwayprofile.vue	Wed Jul 10 14:32:23 2019 +0200
+++ b/client/src/components/fairway/Fairwayprofile.vue	Wed Jul 10 15:23:32 2019 +0200
@@ -368,7 +368,21 @@
     addDiagram(position, offset, width, height) {
       let x = offset.x,
         y = offset.y;
-      let svg = this.$refs.pdfContainer.getElementsByTagName("svg")[0];
+      const svgWidth = this.millimeter2pixels(width, 80);
+      const svgHeight = this.millimeter2pixels(height, 80);
+      // check if there are tow diagrams on the screen
+      // draw the diagram in a separated html element to get the full size
+      const offScreen = document.querySelector("#offScreen");
+      offScreen.style.width = `${svgWidth}px`;
+      offScreen.style.height = `${svgHeight}px`;
+      this.renderTo({
+        element: offScreen,
+        dimensions: {
+          svgWidth: svgWidth - this.margin.right - this.margin.left,
+          svgHeight: svgHeight - this.margin.top - this.margin.bottom
+        }
+      });
+      var svg = offScreen.querySelector("svg");
       // use default width,height if they are missing in the template definition
       if (!width) {
         width = this.templateData.properties.paperSize === "a3" ? 380 : 290;
@@ -386,8 +400,9 @@
         xOffset: x,
         yOffset: y,
         // TODO depend on the size and aspect ration on paper
-        scale: this.templateData.properties.paperSize === "a3" ? 0.45 : 0.18
+        scale: 0.2
       });
+      offScreen.removeChild(svg);
     },
     // Diagram legend
     addDiagramLegend(position, offset, color) {
@@ -440,11 +455,21 @@
     drawDiagram() {
       d3.select(".diagram-container svg").remove();
       this.scaleFairwayProfile();
-      let svg = d3.select(".diagram-container").append("svg");
+      if (!this.height || !this.width) return; // do not try to render when height and width are unknown
+      this.renderTo({
+        element: ".diagram-container",
+        dimensions: {
+          svgWidth: this.width - this.margin.right - this.margin.left,
+          svgHeight: this.height - this.margin.top - this.margin.bottom
+        }
+      });
+    },
+    renderTo({ element, dimensions }) {
+      let svg = d3.select(element).append("svg");
       svg.attr("width", "100%");
       svg.attr("height", "100%");
-      const width = this.width - this.margin.right - this.margin.left;
-      const height = this.height - this.margin.top - this.margin.bottom;
+      const width = dimensions.svgWidth;
+      const height = dimensions.svgHeight;
       const currentData = this.currentData;
       const additionalData = this.additionalData;
       const { xScale, yScaleRight, graph } = this.generateScalesAndGraph(
@@ -452,9 +477,8 @@
         height,
         width
       );
-      if (!this.height || !this.width) return; // do not try to render when height and width are unknown
       this.drawWaterlevel({ graph, xScale, yScaleRight, height });
-      this.drawLabels({ graph, height });
+      this.drawLabels({ graph, dimensions });
       if (currentData) {
         this.drawProfile({
           graph,
@@ -515,12 +539,12 @@
         });
       }
     },
-    drawLabels({ graph, height }) {
+    drawLabels({ graph, dimensions }) {
       graph
         .append("text")
         .attr("transform", ["rotate(-90)"])
-        .attr("y", this.width - 100)
-        .attr("x", -(this.height - this.margin.top - this.margin.bottom) / 2)
+        .attr("y", dimensions.svgWidth + 45)
+        .attr("x", -dimensions.svgHeight / 2)
         .attr("fill", "black")
         .style("text-anchor", "middle")
         .text("Depth [m]");
@@ -528,19 +552,23 @@
         .append("text")
         .attr("transform", ["rotate(-90)"])
         .attr("y", -50)
-        .attr("x", -(this.height - this.margin.top - this.margin.bottom) / 2)
+        .attr("x", -dimensions.svgHeight / 2)
         .attr("fill", "black")
         .style("text-anchor", "middle")
         .text("Waterlevel [m]");
       graph
         .append("text")
-        .attr("y", -50)
-        .attr("x", -(height / 4))
+        .attr("y", 30)
+        .attr("x", 0)
         .attr("dy", "1em")
         .attr("fill", "black")
         .style("text-anchor", "middle")
         .attr("transform", [
-          "translate(" + this.width / 2 + "," + this.height + ")",
+          "translate(" +
+            dimensions.svgWidth / 2 +
+            "," +
+            dimensions.svgHeight +
+            ")",
           "rotate(0)"
         ])
         .text("Width [m]");