changeset 879:52fe3e20f750

client: improve print styling * Set explicit pixel width and height for the map for printing. This results in a map which roughly has the right scale, though it is not centered on the screen view anymore and also does not take up the full printed page. * Add handlers for detecting print events, with some experiments in deactivated code.
author Bernhard Reiter <bernhard@intevation.de>
date Mon, 01 Oct 2018 12:01:46 +0200
parents 42df1cabf410
children aa2acb942e55 27282bfd1ba7
files client/src/application/Main.vue client/src/map/Maplayer.vue
diffstat 2 files changed, 46 insertions(+), 0 deletions(-) [+]
line wrap: on
line diff
--- a/client/src/application/Main.vue	Sat Sep 29 22:35:53 2018 +0200
+++ b/client/src/application/Main.vue	Mon Oct 01 12:01:46 2018 +0200
@@ -81,6 +81,7 @@
   },
   created() {
     window.addEventListener("resize", debounce(this.scaleFairwayProfile), 100);
+    window.addEventListener("onbeforeprint", this.test);
   },
   updated() {
     this.scaleFairwayProfile();
@@ -89,6 +90,9 @@
     window.removeEventListener("resize", debounce(this.scaleFairwayProfile));
   },
   methods: {
+    test(evt) {
+      console.log("test: ", evt);
+    },
     scaleFairwayProfile() {
       if (!document.querySelector(".profile")) return;
       const clientHeight = document.querySelector(".profile").clientHeight;
--- a/client/src/map/Maplayer.vue	Sat Sep 29 22:35:53 2018 +0200
+++ b/client/src/map/Maplayer.vue	Mon Oct 01 12:01:46 2018 +0200
@@ -10,6 +10,17 @@
 .mapfull {
   height: 100vh;
 }
+
+@media print {
+  .mapfull {
+    width: 2000px;
+    heigth: 2828px;
+  }
+  .mapsplit {
+    width: 2000px;
+    heigth: 2828px;
+  }
+}
 </style>
 
 <script>
@@ -294,6 +305,34 @@
           bottleneck_id +
           "'"
       });
+    },
+    onBeforePrint(/* evt */) {
+      // console.log("onBeforePrint(", evt ,")");
+      //
+      // the following code shows how to get the current map canvas
+      // and change it, however this does not work well enough, as
+      // another mechanism seems to update the size again before the rendering
+      // for printing is done:
+      // console.log(this.openLayersMap.getViewport());
+      // var canvas = this.openLayersMap.getViewport().getElementsByTagName("canvas")[0];
+      // console.log(canvas);
+      // canvas.width=1000;
+      // canvas.height=1414;
+      //
+      // An experiment which also did not work:
+      // this.openLayersMap.setSize([1000, 1414]); // estimate portait DIN A4
+      //
+      // according to documentation
+      // http://openlayers.org/en/latest/apidoc/module-ol_PluggableMap-PluggableMap.html#updateSize
+      // "Force a recalculation of the map viewport size. This should be called when third-party code changes the size of the map viewport."
+      // but did not help
+      // this.openLayersMap.updateSize();
+    },
+    onAfterPrint(/* evt */) {
+      // could be used to undo changes that have been done for printing
+      // though https://www.tjvantoll.com/2012/06/15/detecting-print-requests-with-javascript/
+      // reported that this was not feasable (back then).
+      // console.log("onAfterPrint(", evt, ")");
     }
   },
   watch: {
@@ -487,6 +526,9 @@
         console.log(error);
       });
 
+    window.addEventListener("beforeprint", this.onBeforePrint);
+    window.addEventListener("afterprint", this.onAfterPrint);
+
     // so none is shown
     // this.updateBottleneckFilter("1999-10-01", "AT_Bottleneck_44");
     // test date