Mercurial > gemma

comparison client/src/components/fairway/AvailableFairwayDepth.vue @ 3941:7b3935a8d9ee

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
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 f9de2ea2706e
children feb53713bc2f
comparison
equal deleted inserted replaced
3940:f56d14b9d9f1 3941:7b3935a8d9ee
73 import * as d3 from "d3"; 73 import * as d3 from "d3";
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";
79 import { diagram, pdfgen, templateLoader } from "@/lib/mixins"; 78 import { diagram, pdfgen, templateLoader } from "@/lib/mixins";
80 import { HTTP } from "@/lib/http"; 79 import { HTTP } from "@/lib/http";
81 import { displayError } from "@/lib/errors"; 80 import { displayError } from "@/lib/errors";
82 import { FREQUENCIES } from "@/store/fairwayavailability"; 81 import { FREQUENCIES } from "@/store/fairwayavailability";
83 import { defaultDiagramTemplate } from "@/lib/DefaultDiagramTemplate"; 82 import { defaultDiagramTemplate } from "@/lib/DefaultDiagramTemplate";
249 templateData: this.templateData, 248 templateData: this.templateData,
250 diagramTitle: title 249 diagramTitle: title
251 }); 250 });
252 this.pdf.doc.save(`Available Fairway Depth: ${this.featureName}`); 251 this.pdf.doc.save(`Available Fairway Depth: ${this.featureName}`);
253 }, 252 },
254 addDiagram(position, offset, width, height) {
255 let x = offset.x,
256 y = offset.y;
257 const svgWidth = this.millimeter2pixels(width, 80);
258 const svgHeight = this.millimeter2pixels(height, 80);
259 // draw the diagram in a separated html element to get the full size
260 const offScreen = document.querySelector("#offScreen");
261 offScreen.style.width = `${svgWidth}px`;
262 offScreen.style.height = `${svgHeight}px`;
263 this.renderTo({
264 element: offScreen,
265 dimensions: this.getDimensions({
266 svgWidth: svgWidth,
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 }
275 })
276 });
277 var svg = offScreen.querySelector("svg");
278 if (["topright", "bottomright"].indexOf(position) !== -1) {
279 x = this.pdf.width - offset.x - width;
280 }
281 if (["bottomright", "bottomleft"].indexOf(position) !== -1) {
282 y = this.pdf.height - offset.y - height;
283 }
284 svg2pdf(svg, this.pdf.doc, {
285 xOffset: x,
286 yOffset: y,
287 scale: 0.354
288 });
289 offScreen.removeChild(svg);
290 },
291 addDiagramLegend(position, offset, color) { 253 addDiagramLegend(position, offset, color) {
292 let x = offset.x, 254 let x = offset.x,
293 y = offset.y; 255 y = offset.y;
294 this.pdf.doc.setFontSize(10); 256 this.pdf.doc.setFontSize(10);
295 let width = 257 let width =
333 ][index]; 295 ][index];
334 }, 296 },
335 close() { 297 close() {
336 this.$store.commit("application/paneSetup", "DEFAULT"); 298 this.$store.commit("application/paneSetup", "DEFAULT");
337 }, 299 },
338 drawDiagram() { 300 getPrintLayout(svgHeight) {
339 const elem = document.querySelector("#" + this.containerId); 301 return {
340 const svgWidth = elem != null ? elem.clientWidth : 0;
341 const svgHeight = elem != null ? elem.clientHeight : 0;
342 const dimensions = this.getDimensions({
343 svgHeight,
344 svgWidth,
345 main: { top: 0, right: 20, bottom: 50, left: 20 }, 302 main: { top: 0, right: 20, bottom: 50, left: 20 },
346 nav: { 303 nav: {
347 top: svgHeight - 65, 304 top: svgHeight - 65,
348 right: 20, 305 right: 20,
349 bottom: 30, 306 bottom: 30,
350 left: 80 307 left: 80
351 } 308 }
309 };
310 },
311 drawDiagram() {
312 const elem = document.querySelector("#" + this.containerId);
313 const svgWidth = elem != null ? elem.clientWidth : 0;
314 const svgHeight = elem != null ? elem.clientHeight : 0;
315 const layout = this.getPrintLayout(svgHeight);
316 const dimensions = this.getDimensions({
317 svgHeight,
318 svgWidth,
319 ...layout
352 }); 320 });
353 d3.select(".diagram-container svg").remove(); 321 d3.select(".diagram-container svg").remove();
354 this.renderTo({ element: ".diagram-container", dimensions }); 322 this.renderTo({ element: ".diagram-container", dimensions });
355 }, 323 },
356 renderTo({ element, dimensions }) { 324 renderTo({ element, dimensions }) {