Mercurial > gemma
changeset 2275:a6cfa06c5983
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