Mercurial > gemma
changeset 3941:7b3935a8d9ee
refactor addDiagram to mixin and remove code duplication
author | Thomas Junk <thomas.junk@intevation.de> |
---|---|
date | Fri, 12 Jul 2019 11:02:46 +0200 |
parents | f56d14b9d9f1 |
children | cd8ba6599a99 |
files | client/src/components/fairway/AvailableFairwayDepth.vue client/src/components/fairway/AvailableFairwayDepthLNWL.vue client/src/components/fairway/Fairwayprofile.vue client/src/components/gauge/HydrologicalConditions.vue client/src/components/gauge/Waterlevel.vue client/src/lib/mixins.js |
diffstat | 6 files changed, 98 insertions(+), 236 deletions(-) [+] |
line wrap: on
line diff
--- a/client/src/components/fairway/AvailableFairwayDepth.vue Fri Jul 12 10:21:00 2019 +0200 +++ b/client/src/components/fairway/AvailableFairwayDepth.vue Fri Jul 12 11:02:46 2019 +0200 @@ -75,7 +75,6 @@ import debounce from "debounce"; import { mapState } from "vuex"; import filters from "@/lib/filters.js"; -import svg2pdf from "svg2pdf.js"; import { diagram, pdfgen, templateLoader } from "@/lib/mixins"; import { HTTP } from "@/lib/http"; import { displayError } from "@/lib/errors"; @@ -251,43 +250,6 @@ }); this.pdf.doc.save(`Available Fairway Depth: ${this.featureName}`); }, - addDiagram(position, offset, width, height) { - let x = offset.x, - y = offset.y; - 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`; - offScreen.style.height = `${svgHeight}px`; - this.renderTo({ - element: offScreen, - dimensions: this.getDimensions({ - svgWidth: svgWidth, - svgHeight: svgHeight, - main: { top: 0, right: 20, bottom: 50, left: 20 }, - nav: { - top: svgHeight - 65, - right: 20, - bottom: 30, - left: 80 - } - }) - }); - var svg = offScreen.querySelector("svg"); - if (["topright", "bottomright"].indexOf(position) !== -1) { - x = this.pdf.width - offset.x - width; - } - if (["bottomright", "bottomleft"].indexOf(position) !== -1) { - y = this.pdf.height - offset.y - height; - } - svg2pdf(svg, this.pdf.doc, { - xOffset: x, - yOffset: y, - scale: 0.354 - }); - offScreen.removeChild(svg); - }, addDiagramLegend(position, offset, color) { let x = offset.x, y = offset.y; @@ -335,13 +297,8 @@ close() { this.$store.commit("application/paneSetup", "DEFAULT"); }, - drawDiagram() { - const elem = document.querySelector("#" + this.containerId); - const svgWidth = elem != null ? elem.clientWidth : 0; - const svgHeight = elem != null ? elem.clientHeight : 0; - const dimensions = this.getDimensions({ - svgHeight, - svgWidth, + getPrintLayout(svgHeight) { + return { main: { top: 0, right: 20, bottom: 50, left: 20 }, nav: { top: svgHeight - 65, @@ -349,6 +306,17 @@ bottom: 30, left: 80 } + }; + }, + drawDiagram() { + const elem = document.querySelector("#" + this.containerId); + const svgWidth = elem != null ? elem.clientWidth : 0; + const svgHeight = elem != null ? elem.clientHeight : 0; + const layout = this.getPrintLayout(svgHeight); + const dimensions = this.getDimensions({ + svgHeight, + svgWidth, + ...layout }); d3.select(".diagram-container svg").remove(); this.renderTo({ element: ".diagram-container", dimensions });
--- a/client/src/components/fairway/AvailableFairwayDepthLNWL.vue Fri Jul 12 10:21:00 2019 +0200 +++ b/client/src/components/fairway/AvailableFairwayDepthLNWL.vue Fri Jul 12 11:02:46 2019 +0200 @@ -74,7 +74,6 @@ import app from "@/main"; import debounce from "debounce"; import { mapState } from "vuex"; -import svg2pdf from "svg2pdf.js"; import filters from "@/lib/filters.js"; import { diagram, pdfgen, templateLoader } from "@/lib/mixins"; import { HTTP } from "@/lib/http"; @@ -249,43 +248,6 @@ }); this.pdf.doc.save(`Available Fairway Depth LNWL: ${this.featureName}`); }, - addDiagram(position, offset, width, height) { - let x = offset.x, - y = offset.y; - 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`; - offScreen.style.height = `${svgHeight}px`; - this.renderTo({ - element: offScreen, - dimensions: this.getDimensions({ - svgWidth: svgWidth, - svgHeight: svgHeight, - main: { top: 0, right: 20, bottom: 50, left: 20 }, - nav: { - top: svgHeight - 65, - right: 20, - bottom: 30, - left: 80 - } - }) - }); - var svg = offScreen.querySelector("svg"); - if (["topright", "bottomright"].indexOf(position) !== -1) { - x = this.pdf.width - offset.x - width; - } - if (["bottomright", "bottomleft"].indexOf(position) !== -1) { - y = this.pdf.height - offset.y - height; - } - svg2pdf(svg, this.pdf.doc, { - xOffset: x, - yOffset: y, - scale: 0.354 - }); - offScreen.removeChild(svg); - }, addDiagramLegend(position, offset, color) { let x = offset.x, y = offset.y; @@ -324,13 +286,8 @@ close() { this.$store.commit("application/paneSetup", "DEFAULT"); }, - drawDiagram() { - const elem = document.querySelector("#" + this.containerId); - const svgWidth = elem != null ? elem.clientWidth : 0; - const svgHeight = elem != null ? elem.clientHeight : 0; - const dimensions = this.getDimensions({ - svgHeight, - svgWidth, + getPrintLayout(svgHeight) { + return { main: { top: 0, right: 20, bottom: 50, left: 20 }, nav: { top: svgHeight - 65, @@ -338,6 +295,17 @@ bottom: 30, left: 80 } + }; + }, + drawDiagram() { + const elem = document.querySelector("#" + this.containerId); + const svgWidth = elem != null ? elem.clientWidth : 0; + const svgHeight = elem != null ? elem.clientHeight : 0; + const layout = this.getPrintLayout(svgHeight); + const dimensions = this.getDimensions({ + svgHeight, + svgWidth, + ...layout }); d3.select(".diagram-container svg").remove(); this.renderTo({ element: ".diagram-container", dimensions });
--- a/client/src/components/fairway/Fairwayprofile.vue Fri Jul 12 10:21:00 2019 +0200 +++ b/client/src/components/fairway/Fairwayprofile.vue Fri Jul 12 11:02:46 2019 +0200 @@ -149,7 +149,6 @@ import * as d3 from "d3"; import { mapState, mapGetters } from "vuex"; import debounce from "debounce"; -import svg2pdf from "svg2pdf.js"; import { diagram, pdfgen, templateLoader } from "@/lib/mixins"; import { HTTP } from "@/lib/http"; import { displayError } from "@/lib/errors"; @@ -339,49 +338,7 @@ this.title.replace(/\s/g, "_").replace(/[():,]/g, "") + ".pdf" ); }, - addDiagram(position, offset, width, height) { - let x = offset.x, - y = offset.y; - const resolution = this.templateData.properties.resolution || 80; - const svgWidth = this.millimeter2pixels(width, resolution); - const svgHeight = this.millimeter2pixels(height, resolution); - const offScreen = document.querySelector("#offScreen"); - offScreen.style.width = `${svgWidth}px`; - offScreen.style.height = `${svgHeight}px`; - this.renderTo({ - element: offScreen, - dimensions: this.getDimensions({ - svgWidth: svgWidth, - svgHeight: svgHeight, - main: { - top: 20, - right: 80, - bottom: 60, - left: 80 - } - }) - }); - var svg = offScreen.querySelector("svg"); - // use default width,height if they are missing in the template definition - if (!width) { - width = this.templateData.properties.paperSize === "a3" ? 380 : 290; - } - if (!height) { - height = this.templateData.properties.paperSize === "a3" ? 130 : 100; - } - if (["topright", "bottomright"].indexOf(position) !== -1) { - x = this.pdf.width - offset.x - width; - } - if (["bottomright", "bottomleft"].indexOf(position) !== -1) { - y = this.pdf.height - offset.y - height; - } - svg2pdf(svg, this.pdf.doc, { - xOffset: x, - yOffset: y, - scale: 0.353 - }); - offScreen.removeChild(svg); - }, + // Diagram legend addDiagramLegend(position, offset, color) { let x = offset.x, @@ -430,21 +387,27 @@ this.pdf.doc.circle(x, y + 25, 2, "FD"); this.pdf.doc.text(x + 3, y + 26, "Sediment (Compare)"); }, + getPrintLayout() { + return { + main: { + top: 20, + right: 80, + bottom: 60, + left: 80 + } + }; + }, drawDiagram() { d3.select(".diagram-container svg").remove(); this.scaleFairwayProfile(); if (!this.height || !this.width) return; // do not try to render when height and width are unknown + const layout = this.getPrintLayout(this.height); this.renderTo({ element: ".diagram-container", dimensions: this.getDimensions({ svgWidth: this.width, svgHeight: this.height, - main: { - top: 20, - right: 80, - bottom: 60, - left: 80 - } + ...layout }) }); },
--- a/client/src/components/gauge/HydrologicalConditions.vue Fri Jul 12 10:21:00 2019 +0200 +++ b/client/src/components/gauge/HydrologicalConditions.vue Fri Jul 12 11:02:46 2019 +0200 @@ -104,7 +104,6 @@ import * as d3 from "d3"; import debounce from "debounce"; import { startOfYear, endOfYear } from "date-fns"; -import svg2pdf from "svg2pdf.js"; import { diagram, pdfgen, templateLoader } from "@/lib/mixins"; import { HTTP } from "@/lib/http"; import { displayError } from "@/lib/errors"; @@ -214,43 +213,6 @@ " Hydrological-condition Diagram.pdf" ); }, - addDiagram(position, offset, width, height) { - let x = offset.x, - y = offset.y; - 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`; - offScreen.style.height = `${svgHeight}px`; - this.renderTo({ - element: offScreen, - dimensions: this.getDimensions({ - svgWidth: svgWidth, - svgHeight: svgHeight, - main: { top: 20, right: 50, bottom: 110, left: 80 }, - nav: { - top: svgHeight - 85, - right: 20, - bottom: 30, - left: 80 - } - }) - }); - var svg = offScreen.querySelector("svg"); - if (["topright", "bottomright"].indexOf(position) !== -1) { - x = this.pdf.width - offset.x - width; - } - if (["bottomright", "bottomleft"].indexOf(position) !== -1) { - y = this.pdf.height - offset.y - height; - } - svg2pdf(svg, this.pdf.doc, { - xOffset: x, - yOffset: y, - scale: 0.353 - }); - offScreen.removeChild(svg); - }, applyChange() { if (this.form.template.hasOwnProperty("properties")) { this.templateData = this.defaultTemplate; @@ -312,6 +274,17 @@ this.pdf.doc.circle(x, y + 20, 2, "FD"); this.pdf.doc.text(x + 3, y + 21, "Long-term Amplitude"); }, + getPrintLayout(svgHeight) { + return { + main: { top: 20, right: 50, bottom: 110, left: 80 }, + nav: { + top: svgHeight - 85, + right: 20, + bottom: 30, + left: 80 + } + }; + }, drawDiagram() { // remove old diagram d3.select("#" + this.containerId + " svg").remove(); @@ -320,18 +293,13 @@ return; const svgWidth = el.clientWidth; const svgHeight = el.clientHeight; + const layout = this.getPrintLayout(svgHeight); this.renderTo({ element: `#${this.containerId}`, dimensions: this.getDimensions({ svgWidth: svgWidth, svgHeight: svgHeight, - main: { top: 20, right: 50, bottom: 110, left: 80 }, - nav: { - top: svgHeight - 85, - right: 20, - bottom: 30, - left: 80 - } + ...layout }) }); },
--- a/client/src/components/gauge/Waterlevel.vue Fri Jul 12 10:21:00 2019 +0200 +++ b/client/src/components/gauge/Waterlevel.vue Fri Jul 12 11:02:46 2019 +0200 @@ -109,7 +109,6 @@ import { lineChunked } from "d3-line-chunked"; import { endOfDay } from "date-fns"; import debounce from "debounce"; -import svg2pdf from "svg2pdf.js"; import { saveAs } from "file-saver"; import { diagram, pdfgen, templateLoader } from "@/lib/mixins"; import { HTTP } from "@/lib/http"; @@ -250,49 +249,6 @@ }); } }, - addDiagram(position, offset, width, height) { - let x = offset.x, - y = offset.y; - const svgWidth = this.millimeter2pixels( - width, - this.templateData.properties.resolution || 80 - ); - const svgHeight = this.millimeter2pixels( - height, - this.templateData.properties.resolution || 80 - ); - // draw the diagram in a separated html element to get the full size - const offScreen = document.querySelector("#offScreen"); - offScreen.style.width = `${svgWidth}px`; - offScreen.style.height = `${svgHeight}px`; - this.renderTo({ - element: offScreen, - dimensions: this.getDimensions({ - svgWidth: svgWidth, - svgHeight: svgHeight, - main: { top: 20, right: 50, bottom: 110, left: 80 }, - nav: { - top: svgHeight - 85, - right: 20, - bottom: 30, - left: 80 - } - }) - }); - var svg = offScreen.querySelector("svg"); - if (["topright", "bottomright"].indexOf(position) !== -1) { - x = this.pdf.width - offset.x - width; - } - if (["bottomright", "bottomleft"].indexOf(position) !== -1) { - y = this.pdf.height - offset.y - height; - } - svg2pdf(svg, this.pdf.doc, { - xOffset: x, - yOffset: y, - scale: 0.353 - }); - offScreen.removeChild(svg); - }, // Diagram legend addDiagramLegend(position, offset, color) { let x = offset.x; @@ -323,25 +279,31 @@ this.pdf.doc.circle(x, y + 5, 0.6, "FD"); this.pdf.doc.text(x + 3, y + 6, "Prediction"); }, + getPrintLayout(svgHeight) { + return { + main: { top: 20, right: 50, bottom: 110, left: 80 }, + nav: { + top: svgHeight - 85, + right: 20, + bottom: 30, + left: 80 + } + }; + }, drawDiagram() { // remove old diagram and exit if necessary data is missing d3.select("#" + this.containerId + " svg").remove(); const elem = document.querySelector("#" + this.containerId); const svgWidth = elem.clientWidth; const svgHeight = elem.clientHeight; + const layout = this.getPrintLayout(svgHeight); if (!this.selectedGauge || !this.waterlevels.length || !elem) return; this.renderTo({ element: `#${this.containerId}`, dimensions: this.getDimensions({ svgWidth: svgWidth, svgHeight: svgHeight, - main: { top: 20, right: 50, bottom: 110, left: 80 }, - nav: { - top: svgHeight - 85, - right: 20, - bottom: 30, - left: 80 - } + ...layout }) }); },
--- a/client/src/lib/mixins.js Fri Jul 12 10:21:00 2019 +0200 +++ b/client/src/lib/mixins.js Fri Jul 12 11:02:46 2019 +0200 @@ -14,6 +14,7 @@ * * Bernhard Reiter <bernhard.reiter@intevation.de> */ import jsPDF from "jspdf-yworks"; +import svg2pdf from "svg2pdf.js"; import locale2 from "locale2"; import { mapState } from "vuex"; import { HTTP } from "@/lib/http"; @@ -133,6 +134,38 @@ ...mapState("user", ["user"]) }, methods: { + addDiagram(position, offset, width, height) { + let x = offset.x, + y = offset.y; + 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`; + offScreen.style.height = `${svgHeight}px`; + const layout = this.getPrintLayout(svgHeight); + this.renderTo({ + element: offScreen, + dimensions: this.getDimensions({ + svgWidth: svgWidth, + svgHeight: svgHeight, + ...layout + }) + }); + var svg = offScreen.querySelector("svg"); + if (["topright", "bottomright"].indexOf(position) !== -1) { + x = this.pdf.width - offset.x - width; + } + if (["bottomright", "bottomleft"].indexOf(position) !== -1) { + y = this.pdf.height - offset.y - height; + } + svg2pdf(svg, this.pdf.doc, { + xOffset: x, + yOffset: y, + scale: 0.354 + }); + offScreen.removeChild(svg); + }, getPaperDimensions(format) { const dims = { A3: {