Mercurial > gemma
diff client/src/lib/mixins.js @ 3992:2f024d6189ca
Reverted merge with diagram-cleanup -- its not yet ready.
author | Sascha Wilde <wilde@intevation.de> |
---|---|
date | Wed, 17 Jul 2019 15:12:23 +0200 |
parents | 5c896dee852b |
children | 6672b780722f |
line wrap: on
line diff
--- a/client/src/lib/mixins.js Wed Jul 17 14:18:43 2019 +0200 +++ b/client/src/lib/mixins.js Wed Jul 17 15:12:23 2019 +0200 @@ -16,11 +16,8 @@ import jsPDF from "jspdf-yworks"; import svg2pdf from "svg2pdf.js"; import locale2 from "locale2"; -import debounce from "debounce"; import { mapState } from "vuex"; import { HTTP } from "@/lib/http"; -import { displayError } from "@/lib/errors"; -import defaultDiagramTemplate from "@/lib/DefaultDiagramTemplate"; export const sortTable = { data() { @@ -40,58 +37,25 @@ }; export const diagram = { - components: { - DiagramLegend: () => import("@/components/DiagramLegend") - }, - data() { - return { - resizeListenerFunction: null - }; - }, methods: { - getDimensions({ svgWidth, svgHeight, main, nav, DPI }) { - const mainMargin = { + getDimensions({ svgWidth, svgHeight, main, nav }) { + const mainMargin = main || { top: 20, right: 80, bottom: 60, - left: 80, - ...main + left: 80 }; - const navMargin = { + const navMargin = nav || { top: svgHeight - mainMargin.top - 65, right: 20, bottom: 30, - left: 80, - ...nav + left: 80 }; - if (DPI) { - ["top", "right", "bottom", "left"].forEach(x => { - mainMargin[x] = this.millimeter2pixels(mainMargin[x], DPI); - navMargin[x] = this.millimeter2pixels(navMargin[x], DPI); - }); - } const width = Number(svgWidth) - mainMargin.left - mainMargin.right; const mainHeight = Number(svgHeight) - mainMargin.top - mainMargin.bottom; const navHeight = Number(svgHeight) - navMargin.top - navMargin.bottom; return { width, mainHeight, navHeight, mainMargin, navMargin }; } - }, - created() { - this.resizeListenerFunction = debounce(this.drawDiagram, 100); - window.addEventListener("resize", this.resizeListenerFunction); - }, - mounted() { - // Nasty but necessary if we don't want to use the updated hook to re-draw - // the diagram because this would re-draw it also for irrelevant reasons. - // In this case we need to wait for the child component (DiagramLegend) to - // render. According to the docs (https://vuejs.org/v2/api/#mounted) this - // should be possible with $nextTick() but it doesn't work because it does - // not guarantee that the DOM is not only updated but also re-painted on the - // screen. - setTimeout(this.drawDiagram, 150); - }, - destroyed() { - window.removeEventListener("resize", this.resizeListenerFunction); } }; @@ -165,39 +129,16 @@ }; export const pdfgen = { - data() { - return { - pdf: { - doc: null, - width: null, - height: null - }, - templates: [], - defaultTemplate: defaultDiagramTemplate, - templateData: null, - form: { - template: null - } - }; - }, computed: { ...mapState("application", ["logoForPDF"]), ...mapState("user", ["user"]) }, methods: { - downloadPDF() { - this.generatePDF(); - - this.pdf.doc.save( - this.title.replace(/\s/g, "_").replace(/[():,]/g, "") + ".pdf" - ); - }, addDiagram(position, offset, width, height) { let x = offset.x, y = offset.y; - const DPI = this.templateData.properties.resoltion || 80; - const svgWidth = this.millimeter2pixels(width, DPI); - const svgHeight = this.millimeter2pixels(height, DPI); + const svgWidth = this.millimeter2pixels(width, 80); + const svgHeight = this.millimeter2pixels(height, 80); // draw the diagram in a separated html element to get the full size const offScreen = document.querySelector("#offScreen"); offScreen.style.width = `${svgWidth}px`; @@ -208,8 +149,7 @@ dimensions: this.getDimensions({ svgWidth: svgWidth, svgHeight: svgHeight, - ...layout, - DPI: DPI + ...layout }) }); var svg = offScreen.querySelector("svg"); @@ -222,7 +162,7 @@ svg2pdf(svg, this.pdf.doc, { xOffset: x, yOffset: y, - scale: this.pixel2millimeter(1, DPI) + scale: 0.354 }); offScreen.removeChild(svg); }, @@ -257,12 +197,12 @@ ")" ); }, - generatePDF() { + generatePDF(params) { // creates a new jsPDF object into this.pdf.doc // will call functions that the calling context has to provide // as specified in the templateData - const templateData = this.templateData; - const diagramTitle = this.title; + let templateData = params["templateData"]; + let diagramTitle = params["diagramTitle"]; this.pdf.doc = new jsPDF("l", "mm", templateData.properties.paperSize); // pdf width and height in millimeter (landscape) @@ -293,9 +233,9 @@ e.offset || defaultOffset, // use default width,height if they are missing in template definition e.width || - (templateData.properties.paperSize === "a3" ? 318 : 230), + (this.templateData.properties.paperSize === "a3" ? 318 : 230), e.height || - (templateData.properties.paperSize === "a3" ? 104 : 110) + (this.templateData.properties.paperSize === "a3" ? 104 : 110) ); break; } @@ -528,58 +468,6 @@ color, text ); - }, - applyChange() { - if (this.form.template.hasOwnProperty("properties")) { - this.templateData = this.defaultTemplate; - return; - } - if (this.form.template) { - this.loadTemplates("/templates/diagram/" + this.form.template.name) - .then(response => { - this.prepareImages(response.data.template_data.elements).then( - values => { - values.forEach(v => { - response.data.template_data.elements[v.index].url = v.url; - }); - this.templateData = response.data.template_data; - } - ); - }) - .catch(e => { - const { status, data } = e.response; - displayError({ - title: this.$gettext("Backend Error"), - message: `${status}: ${data.message || data}` - }); - }); - } } - }, - mounted() { - this.templates[0] = this.defaultTemplate; - this.form.template = this.templates[0]; - this.templateData = this.form.template; - HTTP.get("/templates/diagram", { - headers: { - "X-Gemma-Auth": localStorage.getItem("token"), - "Content-type": "text/xml; charset=UTF-8" - } - }) - .then(response => { - if (response.data.length) { - this.templates = response.data; - this.form.template = this.templates[0]; - this.templates[this.templates.length] = this.defaultTemplate; - this.applyChange(); - } - }) - .catch(e => { - const { status, data } = e.response; - displayError({ - title: this.$gettext("Backend Error"), - message: `${status}: ${data.message || data}` - }); - }); } };