Mercurial > gemma

changeset 2275:a6cfa06c5983

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
client: pdf-gen: added cancel button Prevents the rendercomplete event to fire. Should be enough since rendering the map takes most of time of the process.
author Markus Kottlaender <markus@intevation.de>
date Fri, 15 Feb 2019 09:47:57 +0100
parents ad9ede1a9e11
children 920fba6eef0d
files client/src/components/Pdftool.vue
diffstat 1 files changed, 31 insertions(+), 14 deletions(-) [+]
line wrap: on
line diff
--- a/client/src/components/Pdftool.vue	Thu Feb 14 16:30:37 2019 +0100
+++ b/client/src/components/Pdftool.vue	Fri Feb 15 09:47:57 2019 +0100
@@ -59,18 +59,23 @@
         </div>
         <button
           @click="download"
+          :key="'downloadBtn'"
           type="button"
-          :disabled="!readyToGenerate"
+          v-if="readyToGenerate"
           class="btn btn-sm btn-info d-block w-100 mt-2"
         >
-          <font-awesome-icon
-            v-if="!readyToGenerate"
-            class="mr-1"
-            icon="spinner"
-            spin
-          />
           <translate>Generate PDF</translate>
         </button>
+        <button
+          @click="cancel"
+          :key="'cancelBtn'"
+          type="button"
+          v-else
+          class="btn btn-sm btn-danger d-block w-100 mt-2"
+        >
+          <font-awesome-icon class="mr-1" icon="spinner" spin />
+          <translate>Cancel</translate>
+        </button>
       </div>
     </div>
   </div>
@@ -155,7 +160,10 @@
         height: null
       },
       logoImageForPDF: null, // a HTMLImageElement instance
-      readyToGenerate: true // if the user is allowed to press the button
+      readyToGenerate: true, // if the user is allowed to press the button
+      rendercompleteListener: null,
+      mapSize: null,
+      mapExtent: null
     };
   },
   computed: {
@@ -231,15 +239,15 @@
       // Step 2 which starts rendering a map with the necessary image size
 
       var map = this.openLayersMap;
-      var mapSize = map.getSize(); // size in pixels of the map in the DOM
+      this.mapSize = map.getSize(); // size in pixels of the map in the DOM
       // Calculate the extent for the current view state and the passed size.
       // The size is the pixel dimensions of the box into which the calculated
       // extent should fit.
-      var mapExtent = map.getView().calculateExtent(mapSize);
+      this.mapExtent = map.getView().calculateExtent(this.mapSize);
 
       this.pdf.doc = new jsPDF(this.form.format, "mm", this.form.paperSize);
       // set a callback for after the next complete rendering of the map
-      map.once("rendercomplete", event => {
+      this.rendercompleteListener = map.once("rendercomplete", event => {
         let canvas = event.context.canvas;
 
         // because we are using Web Mercator, a pixel represents
@@ -368,8 +376,8 @@
         }
 
         // reset to original size
-        map.setSize(mapSize);
-        map.getView().fit(mapExtent, { size: mapSize });
+        map.setSize(this.mapSize);
+        map.getView().fit(this.mapExtent, { size: this.mapSize });
 
         // as we are done: re-enable button
         this.readyToGenerate = true;
@@ -377,7 +385,16 @@
 
       // trigger rendering
       map.setSize(mapSizeForPrint);
-      map.getView().fit(mapExtent, { size: mapSizeForPrint });
+      map.getView().fit(this.mapExtent, { size: mapSizeForPrint });
+    },
+    cancel() {
+      this.openLayersMap.un(
+        this.rendercompleteListener.type,
+        this.rendercompleteListener.listener
+      );
+      this.openLayersMap.setSize(this.mapSize);
+      this.openLayersMap.getView().fit(this.mapExtent, { size: this.mapSize });
+      this.readyToGenerate = true;
     },
     addRoundedBox(x, y, w, h, color, rounding) {
       // draws a rounded background box at (x,y) width x height