Mercurial > gemma

comparison client/src/components/fairway/AvailableFairwayDepth.vue @ 3939:f9de2ea2706e

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
available_fairway_depth: leverage mixin
author Thomas Junk <thomas.junk@intevation.de>
date Fri, 12 Jul 2019 10:17:09 +0200
parents 03f37e64701c
children 7b3935a8d9ee
comparison
equal deleted inserted replaced
3938:b03d54958ccd 3939:f9de2ea2706e
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 filters from "@/lib/filters.js"; 77 import filters from "@/lib/filters.js";
78 import svg2pdf from "svg2pdf.js"; 78 import svg2pdf from "svg2pdf.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 { FREQUENCIES } from "@/store/fairwayavailability"; 82 import { FREQUENCIES } from "@/store/fairwayavailability";
83 import { defaultDiagramTemplate } from "@/lib/DefaultDiagramTemplate"; 83 import { defaultDiagramTemplate } from "@/lib/DefaultDiagramTemplate";
84 84
85 const hoursInDays = x => x / 24; 85 const hoursInDays = x => x / 24;
86 86
87 export default { 87 export default {
88 mixins: [pdfgen, templateLoader], 88 mixins: [diagram, pdfgen, templateLoader],
89 components: { 89 components: {
90 DiagramLegend: () => import("@/components/DiagramLegend") 90 DiagramLegend: () => import("@/components/DiagramLegend")
91 }, 91 },
92 data() { 92 data() {
93 return { 93 return {
215 if (this.selectedFairwayAvailabilityFeature == null) return ""; 215 if (this.selectedFairwayAvailabilityFeature == null) return "";
216 return this.selectedFairwayAvailabilityFeature.properties.name; 216 return this.selectedFairwayAvailabilityFeature.properties.name;
217 } 217 }
218 }, 218 },
219 methods: { 219 methods: {
220 getDimensions({ svgHeight, svgWidth, main, nav }) {
221 const mainMargin = main || { top: 0, right: 20, bottom: 50, left: 20 };
222 const navMargin = nav || {
223 top: svgHeight - mainMargin.top - 65,
224 right: 20,
225 bottom: 30,
226 left: 80
227 };
228 const width = Number(svgWidth) - mainMargin.left - mainMargin.right;
229 const mainHeight = Number(svgHeight) - mainMargin.top - mainMargin.bottom;
230 const navHeight = Number(svgHeight) - navMargin.top - navMargin.bottom;
231 return { width, mainHeight, navHeight, mainMargin, navMargin };
232 },
233 applyChange() { 220 applyChange() {
234 if (this.form.template.hasOwnProperty("properties")) { 221 if (this.form.template.hasOwnProperty("properties")) {
235 this.templateData = this.defaultTemplate; 222 this.templateData = this.defaultTemplate;
236 return; 223 return;
237 } 224 }
275 offScreen.style.height = `${svgHeight}px`; 262 offScreen.style.height = `${svgHeight}px`;
276 this.renderTo({ 263 this.renderTo({
277 element: offScreen, 264 element: offScreen,
278 dimensions: this.getDimensions({ 265 dimensions: this.getDimensions({
279 svgWidth: svgWidth, 266 svgWidth: svgWidth,
280 svgHeight: svgHeight 267 svgHeight: svgHeight,
268 main: { top: 0, right: 20, bottom: 50, left: 20 },
269 nav: {
270 top: svgHeight - 65,
271 right: 20,
272 bottom: 30,
273 left: 80
274 }
281 }) 275 })
282 }); 276 });
283 var svg = offScreen.querySelector("svg"); 277 var svg = offScreen.querySelector("svg");
284 if (["topright", "bottomright"].indexOf(position) !== -1) { 278 if (["topright", "bottomright"].indexOf(position) !== -1) {
285 x = this.pdf.width - offset.x - width; 279 x = this.pdf.width - offset.x - width;
345 const elem = document.querySelector("#" + this.containerId); 339 const elem = document.querySelector("#" + this.containerId);
346 const svgWidth = elem != null ? elem.clientWidth : 0; 340 const svgWidth = elem != null ? elem.clientWidth : 0;
347 const svgHeight = elem != null ? elem.clientHeight : 0; 341 const svgHeight = elem != null ? elem.clientHeight : 0;
348 const dimensions = this.getDimensions({ 342 const dimensions = this.getDimensions({
349 svgHeight, 343 svgHeight,
350 svgWidth 344 svgWidth,
345 main: { top: 0, right: 20, bottom: 50, left: 20 },
346 nav: {
347 top: svgHeight - 65,
348 right: 20,
349 bottom: 30,
350 left: 80
351 }
351 }); 352 });
352 d3.select(".diagram-container svg").remove(); 353 d3.select(".diagram-container svg").remove();
353 this.renderTo({ element: ".diagram-container", dimensions }); 354 this.renderTo({ element: ".diagram-container", dimensions });
354 }, 355 },
355 renderTo({ element, dimensions }) { 356 renderTo({ element, dimensions }) {