Mercurial > gemma

comparison client/src/components/gauge/Waterlevel.vue @ 3804:7f2c5576ec0a yworks-svg2pdf

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
waterlevel_diagram: use mixin for template loading and image processing
author Thomas Junk <thomas.junk@intevation.de>
date Thu, 04 Jul 2019 11:21:59 +0200
parents e008197e2215
children 37e896990c99
comparison
equal deleted inserted replaced
3803:9b9140c65a96 3804:7f2c5576ec0a
109 import { lineChunked } from "d3-line-chunked"; 109 import { lineChunked } from "d3-line-chunked";
110 import { endOfDay } from "date-fns"; 110 import { endOfDay } from "date-fns";
111 import debounce from "debounce"; 111 import debounce from "debounce";
112 import svg2pdf from "svg2pdf.js"; 112 import svg2pdf from "svg2pdf.js";
113 import { saveAs } from "file-saver"; 113 import { saveAs } from "file-saver";
114 import { pdfgen } from "@/lib/mixins"; 114 import { pdfgen, templateLoader } from "@/lib/mixins";
115 import { HTTP } from "@/lib/http"; 115 import { HTTP } from "@/lib/http";
116 import { displayError } from "@/lib/errors"; 116 import { displayError } from "@/lib/errors";
117 // we should load only d3 modules we need but for now we'll go with the lazy way 117 // we should load only d3 modules we need but for now we'll go with the lazy way
118 // https://www.giacomodebidda.com/how-to-import-d3-plugins-with-webpack/ 118 // https://www.giacomodebidda.com/how-to-import-d3-plugins-with-webpack/
119 // d3-line-chunked plugin: https://github.com/pbeshai/d3-line-chunked 119 // d3-line-chunked plugin: https://github.com/pbeshai/d3-line-chunked
120 const d3 = Object.assign(d3Base, { lineChunked }); 120 const d3 = Object.assign(d3Base, { lineChunked });
121 121
122 export default { 122 export default {
123 mixins: [pdfgen], 123 mixins: [pdfgen, templateLoader],
124 components: { 124 components: {
125 DiagramLegend: () => import("@/components/DiagramLegend") 125 DiagramLegend: () => import("@/components/DiagramLegend")
126 }, 126 },
127 data() { 127 data() {
128 return { 128 return {
269 if (this.form.template.hasOwnProperty("properties")) { 269 if (this.form.template.hasOwnProperty("properties")) {
270 this.templateData = this.defaultTemplate; 270 this.templateData = this.defaultTemplate;
271 return; 271 return;
272 } 272 }
273 if (this.form.template) { 273 if (this.form.template) {
274 HTTP.get("/templates/diagram/" + this.form.template.name, { 274 this.loadTemplates("/templates/diagram/" + this.form.template.name)
275 headers: {
276 "X-Gemma-Auth": localStorage.getItem("token"),
277 "Content-type": "text/xml; charset=UTF-8"
278 }
279 })
280 .then(response => { 275 .then(response => {
281 /** 276 this.prepareImages(response.data.template_data.elements).then(
282 * In order to render the images from the template, we need to convert 277 values => {
283 * each image to dataURIs. Since this happens asynchronous, 278 values.forEach(v => {
284 * we need to wrap each image into its own promise and only after all are 279 response.data.template_data.elements[v.index].url = v.url;
285 * finished, we continue with the flow. 280 });
286 */ 281 this.templateData = response.data.template_data;
287 const imageElementLoaders = response.data.template_data.elements.reduce( 282 }
288 (o, n, i) => {
289 if (n.type === "image") {
290 o.push(
291 new Promise(resolve => {
292 const image = new Image();
293 image.onload = function() {
294 var canvas = document.createElement("canvas");
295 canvas.width = this.naturalWidth; // or 'width' if you want a special/scaled size
296 canvas.height = this.naturalHeight; // or 'height' if you want a special/scaled size
297 canvas.getContext("2d").drawImage(this, 0, 0);
298 resolve({
299 index: i,
300 url: canvas.toDataURL("image/png")
301 });
302 };
303 image.src = n.url;
304 })
305 );
306 }
307 return o;
308 },
309 []
310 ); 283 );
311 Promise.all(imageElementLoaders).then(values => {
312 values.forEach(v => {
313 response.data.template_data.elements[v.index].url = v.url;
314 });
315 this.templateData = response.data.template_data;
316 });
317 }) 284 })
318 .catch(e => { 285 .catch(e => {
319 const { status, data } = e.response; 286 const { status, data } = e.response;
320 displayError({ 287 displayError({
321 title: this.$gettext("Backend Error"), 288 title: this.$gettext("Backend Error"),