Mercurial > gemma

comparison client/src/lib/mixins.js @ 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 1399d31531f7
children 876dc90c2825
comparison
equal deleted inserted replaced
3801:1399d31531f7 3802:e8a950cf6c02
14 * * Bernhard Reiter <bernhard.reiter@intevation.de> 14 * * Bernhard Reiter <bernhard.reiter@intevation.de>
15 */ 15 */
16 import jsPDF from "jspdf-yworks"; 16 import jsPDF from "jspdf-yworks";
17 import locale2 from "locale2"; 17 import locale2 from "locale2";
18 import { mapState } from "vuex"; 18 import { mapState } from "vuex";
19 import { HTTP } from "@/lib/http";
19 20
20 export const sortTable = { 21 export const sortTable = {
21 data() { 22 data() {
22 return { 23 return {
23 sortColumn: "", 24 sortColumn: "",
62 return this.$parent.pane.id; 63 return this.$parent.pane.id;
63 } 64 }
64 } 65 }
65 }; 66 };
66 67
68 export const templateLoader = {
69 methods: {
70 loadTemplates(url) {
71 return new Promise((resolve, reject) => {
72 HTTP.get(url, {
73 headers: {
74 "X-Gemma-Auth": localStorage.getItem("token"),
75 "Content-type": "text/xml; charset=UTF-8"
76 }
77 })
78 .then(response => {
79 resolve(response);
80 })
81 .catch(error => {
82 reject(error);
83 });
84 });
85 },
86 prepareImages(elements) {
87 /**
88 * In order to render the images from the template, we need to convert
89 * each image to dataURIs. Since this happens asynchronous,
90 * we need to wrap each image into its own promise and only after all are
91 * finished, we continue with the flow.
92 */
93 return new Promise(resolve => {
94 const imageElementLoaders = elements.reduce((o, n, i) => {
95 if (n.type === "image") {
96 o.push(
97 new Promise(resolve => {
98 const image = new Image();
99 image.onload = function() {
100 var canvas = document.createElement("canvas");
101 canvas.width = this.naturalWidth; // or 'width' if you want a special/scaled size
102 canvas.height = this.naturalHeight; // or 'height' if you want a special/scaled size
103 canvas.getContext("2d").drawImage(this, 0, 0);
104 resolve({
105 index: i,
106 url: canvas.toDataURL("image/png")
107 });
108 };
109 image.src = n.url;
110 })
111 );
112 }
113 return o;
114 }, []);
115 Promise.all(imageElementLoaders).then(values => {
116 resolve(values);
117 });
118 });
119 }
120 }
121 };
122
67 export const pdfgen = { 123 export const pdfgen = {
68 computed: { 124 computed: {
69 ...mapState("application", ["logoForPDF"]), 125 ...mapState("application", ["logoForPDF"]),
70 ...mapState("user", ["user"]) 126 ...mapState("user", ["user"])
71 }, 127 },