Mercurial > gemma

comparison client/src/components/Pdftool.vue @ 3802:e8a950cf6c02 yworks-svg2pdf

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
Move Template loading and Imageprocessing to mixin Rationale: 1) Template loading is a process used by many components. As such it makes sense to parametrize the URL and centralize loading. 2) Imageprocessing has to be done after each template is loaded on the client As such it makes sense to centralize that. To make handling easier, each (1) and (2) is in an independend Promise to make chaining of calls easier to read.
author Thomas Junk <thomas.junk@intevation.de>
date Thu, 04 Jul 2019 10:57:43 +0200
parents 60977e18e227
children 387f239018c7
comparison
equal deleted inserted replaced
3801:1399d31531f7 3802:e8a950cf6c02
104 import jsPDF from "jspdf-yworks"; 104 import jsPDF from "jspdf-yworks";
105 import "@/lib/font-linbiolinum"; 105 import "@/lib/font-linbiolinum";
106 import { getPointResolution } from "ol/proj"; 106 import { getPointResolution } from "ol/proj";
107 import { HTTP } from "@/lib/http"; 107 import { HTTP } from "@/lib/http";
108 import { displayError } from "@/lib/errors"; 108 import { displayError } from "@/lib/errors";
109 import { pdfgen } from "@/lib/mixins"; 109 import { pdfgen, templateLoader } from "@/lib/mixins";
110 110
111 var paperSizes = { 111 var paperSizes = {
112 // in millimeter, landscape [width, height] 112 // in millimeter, landscape [width, height]
113 a3: [420, 297], 113 a3: [420, 297],
114 a4: [297, 210] 114 a4: [297, 210]
115 }; 115 };
116 116
117 export default { 117 export default {
118 mixins: [pdfgen], 118 mixins: [pdfgen, templateLoader],
119 name: "pdftool", 119 name: "pdftool",
120 data() { 120 data() {
121 return { 121 return {
122 form: { 122 form: {
123 template: null, 123 template: null,
209 }, 209 },
210 // When a template is chosen from the dropdown, its propoerties are 210 // When a template is chosen from the dropdown, its propoerties are
211 // applied to the rest of the form. 211 // applied to the rest of the form.
212 applyTemplateToForm() { 212 applyTemplateToForm() {
213 if (this.form.template) { 213 if (this.form.template) {
214 HTTP.get( 214 this.loadTemplates(
215 "/templates/" + 215 `/templates/${this.form.template.type}/${this.form.template.name}`
216 this.form.template.type +
217 "/" +
218 this.form.template.name,
219 {
220 headers: {
221 "X-Gemma-Auth": localStorage.getItem("token"),
222 "Content-type": "text/xml; charset=UTF-8"
223 }
224 }
225 ) 216 )
226 .then(response => { 217 .then(response => {
227 this.templateData = response.data.template_data; 218 this.prepareImages(response.data.template_data.elements).then(
228 /** 219 values => {
229 * In order to render the images from the template, we need to convert 220 this.templateData = response.data.template_data;
230 * each image to dataURIs. Since this happens asynchronous, 221 values.forEach(v => {
231 * we need to wrap each image into its own promise and only after all are 222 response.data.template_data.elements[v.index].url = v.url;
232 * finished, we continue with the flow. 223 });
233 */ 224 this.form.format = this.templateData.properties.format;
234 const imageElementLoaders = response.data.template_data.elements.reduce( 225 this.form.paperSize = this.templateData.properties.paperSize;
235 (o, n, i) => { 226 this.form.resolution = this.templateData.properties.resolution;
236 if (n.type === "image") { 227 }
237 o.push(
238 new Promise(resolve => {
239 const image = new Image();
240 image.onload = function() {
241 var canvas = document.createElement("canvas");
242 canvas.width = this.naturalWidth; // or 'width' if you want a special/scaled size
243 canvas.height = this.naturalHeight; // or 'height' if you want a special/scaled size
244 canvas.getContext("2d").drawImage(this, 0, 0);
245 resolve({
246 index: i,
247 url: canvas.toDataURL("image/png")
248 });
249 };
250 image.src = n.url;
251 })
252 );
253 }
254 return o;
255 },
256 []
257 ); 228 );
258 Promise.all(imageElementLoaders).then(values => {
259 values.forEach(v => {
260 response.data.template_data.elements[v.index].url = v.url;
261 });
262 this.form.format = this.templateData.properties.format;
263 this.form.paperSize = this.templateData.properties.paperSize;
264 this.form.resolution = this.templateData.properties.resolution;
265 });
266 }) 229 })
267 .catch(e => { 230 .catch(e => {
268 const { status, data } = e.response; 231 const { status, data } = e.response;
269 displayError({ 232 displayError({
270 title: this.$gettext("Backend Error"), 233 title: this.$gettext("Backend Error"),