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}`
-        });
-      });
   }
 };