Mercurial > gemma
changeset 3939:f9de2ea2706e
available_fairway_depth: leverage mixin
author | Thomas Junk <thomas.junk@intevation.de> |
---|---|
date | Fri, 12 Jul 2019 10:17:09 +0200 |
parents | b03d54958ccd |
children | f56d14b9d9f1 |
files | client/src/components/fairway/AvailableFairwayDepth.vue |
diffstat | 1 files changed, 18 insertions(+), 17 deletions(-) [+] |
line wrap: on
line diff
--- a/client/src/components/fairway/AvailableFairwayDepth.vue Fri Jul 12 10:13:00 2019 +0200 +++ b/client/src/components/fairway/AvailableFairwayDepth.vue Fri Jul 12 10:17:09 2019 +0200 @@ -76,7 +76,7 @@ import { mapState } from "vuex"; import filters from "@/lib/filters.js"; import svg2pdf from "svg2pdf.js"; -import { pdfgen, templateLoader } from "@/lib/mixins"; +import { diagram, pdfgen, templateLoader } from "@/lib/mixins"; import { HTTP } from "@/lib/http"; import { displayError } from "@/lib/errors"; import { FREQUENCIES } from "@/store/fairwayavailability"; @@ -85,7 +85,7 @@ const hoursInDays = x => x / 24; export default { - mixins: [pdfgen, templateLoader], + mixins: [diagram, pdfgen, templateLoader], components: { DiagramLegend: () => import("@/components/DiagramLegend") }, @@ -217,19 +217,6 @@ } }, methods: { - getDimensions({ svgHeight, svgWidth, main, nav }) { - const mainMargin = main || { top: 0, right: 20, bottom: 50, left: 20 }; - const navMargin = nav || { - top: svgHeight - mainMargin.top - 65, - right: 20, - bottom: 30, - left: 80 - }; - 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 }; - }, applyChange() { if (this.form.template.hasOwnProperty("properties")) { this.templateData = this.defaultTemplate; @@ -277,7 +264,14 @@ element: offScreen, dimensions: this.getDimensions({ svgWidth: svgWidth, - svgHeight: svgHeight + 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"); @@ -347,7 +341,14 @@ const svgHeight = elem != null ? elem.clientHeight : 0; const dimensions = this.getDimensions({ svgHeight, - svgWidth + svgWidth, + main: { top: 0, right: 20, bottom: 50, left: 20 }, + nav: { + top: svgHeight - 65, + right: 20, + bottom: 30, + left: 80 + } }); d3.select(".diagram-container svg").remove(); this.renderTo({ element: ".diagram-container", dimensions });