Mercurial > gemma

comparison client/src/components/fairway/AvailableFairwayDepthLNWL.vue @ 3940:f56d14b9d9f1

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
available_fairway_depth_lnwl: leverage mixin
author Thomas Junk <thomas.junk@intevation.de>
date Fri, 12 Jul 2019 10:21:00 +0200
parents 03f37e64701c
children 7b3935a8d9ee
comparison
equal deleted inserted replaced
3939:f9de2ea2706e 3940:f56d14b9d9f1
74 import app from "@/main"; 74 import app from "@/main";
75 import debounce from "debounce"; 75 import debounce from "debounce";
76 import { mapState } from "vuex"; 76 import { mapState } from "vuex";
77 import svg2pdf from "svg2pdf.js"; 77 import svg2pdf from "svg2pdf.js";
78 import filters from "@/lib/filters.js"; 78 import filters from "@/lib/filters.js";
79 import { pdfgen, templateLoader } from "@/lib/mixins"; 79 import { diagram, pdfgen, templateLoader } from "@/lib/mixins";
80 import { HTTP } from "@/lib/http"; 80 import { HTTP } from "@/lib/http";
81 import { displayError } from "@/lib/errors"; 81 import { displayError } from "@/lib/errors";
82 import { defaultDiagramTemplate } from "@/lib/DefaultDiagramTemplate"; 82 import { defaultDiagramTemplate } from "@/lib/DefaultDiagramTemplate";
83 83
84 export default { 84 export default {
85 mixins: [pdfgen, templateLoader], 85 mixins: [diagram, pdfgen, templateLoader],
86 components: { 86 components: {
87 DiagramLegend: () => import("@/components/DiagramLegend") 87 DiagramLegend: () => import("@/components/DiagramLegend")
88 }, 88 },
89 data() { 89 data() {
90 return { 90 return {
260 offScreen.style.height = `${svgHeight}px`; 260 offScreen.style.height = `${svgHeight}px`;
261 this.renderTo({ 261 this.renderTo({
262 element: offScreen, 262 element: offScreen,
263 dimensions: this.getDimensions({ 263 dimensions: this.getDimensions({
264 svgWidth: svgWidth, 264 svgWidth: svgWidth,
265 svgHeight: svgHeight 265 svgHeight: svgHeight,
266 main: { top: 0, right: 20, bottom: 50, left: 20 },
267 nav: {
268 top: svgHeight - 65,
269 right: 20,
270 bottom: 30,
271 left: 80
272 }
266 }) 273 })
267 }); 274 });
268 var svg = offScreen.querySelector("svg"); 275 var svg = offScreen.querySelector("svg");
269 if (["topright", "bottomright"].indexOf(position) !== -1) { 276 if (["topright", "bottomright"].indexOf(position) !== -1) {
270 x = this.pdf.width - offset.x - width; 277 x = this.pdf.width - offset.x - width;
315 this.pdf.doc.text(this.legendLNWL[3], x + 12, y + 18); 322 this.pdf.doc.text(this.legendLNWL[3], x + 12, y + 18);
316 }, 323 },
317 close() { 324 close() {
318 this.$store.commit("application/paneSetup", "DEFAULT"); 325 this.$store.commit("application/paneSetup", "DEFAULT");
319 }, 326 },
320 getDimensions({ svgHeight, svgWidth }) {
321 const mainMargin = { top: 0, right: 20, bottom: 50, left: 20 };
322 const navMargin = {
323 top: svgHeight - mainMargin.top - 65,
324 right: 20,
325 bottom: 30,
326 left: 80
327 };
328 const width = Number(svgWidth) - mainMargin.left - mainMargin.right;
329 const mainHeight = Number(svgHeight) - mainMargin.top - mainMargin.bottom;
330 const navHeight = Number(svgHeight) - navMargin.top - navMargin.bottom;
331 return { width, mainHeight, navHeight, mainMargin, navMargin };
332 },
333 drawDiagram() { 327 drawDiagram() {
334 const elem = document.querySelector("#" + this.containerId); 328 const elem = document.querySelector("#" + this.containerId);
335 const svgWidth = elem != null ? elem.clientWidth : 0; 329 const svgWidth = elem != null ? elem.clientWidth : 0;
336 const svgHeight = elem != null ? elem.clientHeight : 0; 330 const svgHeight = elem != null ? elem.clientHeight : 0;
337 const dimensions = this.getDimensions({ 331 const dimensions = this.getDimensions({
338 svgHeight, 332 svgHeight,
339 svgWidth 333 svgWidth,
334 main: { top: 0, right: 20, bottom: 50, left: 20 },
335 nav: {
336 top: svgHeight - 65,
337 right: 20,
338 bottom: 30,
339 left: 80
340 }
340 }); 341 });
341 d3.select(".diagram-container svg").remove(); 342 d3.select(".diagram-container svg").remove();
342 this.renderTo({ element: ".diagram-container", dimensions }); 343 this.renderTo({ element: ".diagram-container", dimensions });
343 }, 344 },
344 drawTooltip(diagram) { 345 drawTooltip(diagram) {