Mercurial > gemma
diff client/src/components/fairway/AvailableFairwayDepthLNWL.vue @ 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 | feb53713bc2f |
line wrap: on
line diff
--- 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 });