Mercurial > gemma

comparison client/src/components/fairway/AvailableFairwayDepthLNWL.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 f56d14b9d9f1
children feb53713bc2f
comparison
equal deleted inserted replaced
3940:f56d14b9d9f1 3941:7b3935a8d9ee
72 */ 72 */
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 svg2pdf from "svg2pdf.js";
78 import filters from "@/lib/filters.js"; 77 import filters from "@/lib/filters.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 { defaultDiagramTemplate } from "@/lib/DefaultDiagramTemplate"; 81 import { defaultDiagramTemplate } from "@/lib/DefaultDiagramTemplate";
247 templateData: this.templateData, 246 templateData: this.templateData,
248 diagramTitle: title 247 diagramTitle: title
249 }); 248 });
250 this.pdf.doc.save(`Available Fairway Depth LNWL: ${this.featureName}`); 249 this.pdf.doc.save(`Available Fairway Depth LNWL: ${this.featureName}`);
251 }, 250 },
252 addDiagram(position, offset, width, height) {
253 let x = offset.x,
254 y = offset.y;
255 const svgWidth = this.millimeter2pixels(width, 80);
256 const svgHeight = this.millimeter2pixels(height, 80);
257 // draw the diagram in a separated html element to get the full size
258 const offScreen = document.querySelector("#offScreen");
259 offScreen.style.width = `${svgWidth}px`;
260 offScreen.style.height = `${svgHeight}px`;
261 this.renderTo({
262 element: offScreen,
263 dimensions: this.getDimensions({
264 svgWidth: svgWidth,
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 }
273 })
274 });
275 var svg = offScreen.querySelector("svg");
276 if (["topright", "bottomright"].indexOf(position) !== -1) {
277 x = this.pdf.width - offset.x - width;
278 }
279 if (["bottomright", "bottomleft"].indexOf(position) !== -1) {
280 y = this.pdf.height - offset.y - height;
281 }
282 svg2pdf(svg, this.pdf.doc, {
283 xOffset: x,
284 yOffset: y,
285 scale: 0.354
286 });
287 offScreen.removeChild(svg);
288 },
289 addDiagramLegend(position, offset, color) { 251 addDiagramLegend(position, offset, color) {
290 let x = offset.x, 252 let x = offset.x,
291 y = offset.y; 253 y = offset.y;
292 this.pdf.doc.setFontSize(10); 254 this.pdf.doc.setFontSize(10);
293 let width = 255 let width =
322 this.pdf.doc.text(this.legendLNWL[3], x + 12, y + 18); 284 this.pdf.doc.text(this.legendLNWL[3], x + 12, y + 18);
323 }, 285 },
324 close() { 286 close() {
325 this.$store.commit("application/paneSetup", "DEFAULT"); 287 this.$store.commit("application/paneSetup", "DEFAULT");
326 }, 288 },
327 drawDiagram() { 289 getPrintLayout(svgHeight) {
328 const elem = document.querySelector("#" + this.containerId); 290 return {
329 const svgWidth = elem != null ? elem.clientWidth : 0;
330 const svgHeight = elem != null ? elem.clientHeight : 0;
331 const dimensions = this.getDimensions({
332 svgHeight,
333 svgWidth,
334 main: { top: 0, right: 20, bottom: 50, left: 20 }, 291 main: { top: 0, right: 20, bottom: 50, left: 20 },
335 nav: { 292 nav: {
336 top: svgHeight - 65, 293 top: svgHeight - 65,
337 right: 20, 294 right: 20,
338 bottom: 30, 295 bottom: 30,
339 left: 80 296 left: 80
340 } 297 }
298 };
299 },
300 drawDiagram() {
301 const elem = document.querySelector("#" + this.containerId);
302 const svgWidth = elem != null ? elem.clientWidth : 0;
303 const svgHeight = elem != null ? elem.clientHeight : 0;
304 const layout = this.getPrintLayout(svgHeight);
305 const dimensions = this.getDimensions({
306 svgHeight,
307 svgWidth,
308 ...layout
341 }); 309 });
342 d3.select(".diagram-container svg").remove(); 310 d3.select(".diagram-container svg").remove();
343 this.renderTo({ element: ".diagram-container", dimensions }); 311 this.renderTo({ element: ".diagram-container", dimensions });
344 }, 312 },
345 drawTooltip(diagram) { 313 drawTooltip(diagram) {