Mercurial > gemma

comparison client/src/components/fairway/AvailableFairwayDepth.vue @ 3911:e4e496ae7974

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
fairway_availability: rendering to offscreen element
author Thomas Junk <thomas.junk@intevation.de>
date Thu, 11 Jul 2019 10:58:22 +0200
parents 2e7f191bba27
children 9440d2922097
comparison
equal deleted inserted replaced
3910:29b294e77a5c 3911:e4e496ae7974
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 { diagram, pdfgen, templateLoader } from "@/lib/mixins"; 79 import { 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 83
84 const hoursInDays = x => x / 24; 84 const hoursInDays = x => x / 24;
85 85
86 export default { 86 export default {
87 mixins: [diagram, pdfgen, templateLoader], 87 mixins: [pdfgen, templateLoader],
88 components: { 88 components: {
89 DiagramLegend: () => import("@/components/DiagramLegend") 89 DiagramLegend: () => import("@/components/DiagramLegend")
90 }, 90 },
91 data() { 91 data() {
92 return { 92 return {
241 if (this.selectedFairwayAvailabilityFeature == null) return ""; 241 if (this.selectedFairwayAvailabilityFeature == null) return "";
242 return this.selectedFairwayAvailabilityFeature.properties.name; 242 return this.selectedFairwayAvailabilityFeature.properties.name;
243 } 243 }
244 }, 244 },
245 methods: { 245 methods: {
246 getDimensions({ svgHeight, svgWidth }) {
247 const mainMargin = { top: 0, right: 20, bottom: 75, left: 200 };
248 const navMargin = {
249 top: svgHeight - mainMargin.top - 65,
250 right: 20,
251 bottom: 30,
252 left: 80
253 };
254 const width = Number(svgWidth) - mainMargin.left - mainMargin.right;
255 const mainHeight = Number(svgHeight) - mainMargin.top - mainMargin.bottom;
256 const navHeight = Number(svgHeight) - navMargin.top - navMargin.bottom;
257 return { width, mainHeight, navHeight, mainMargin, navMargin };
258 },
246 applyChange() { 259 applyChange() {
247 if (this.form.template.hasOwnProperty("properties")) { 260 if (this.form.template.hasOwnProperty("properties")) {
248 this.templateData = this.defaultTemplate; 261 this.templateData = this.defaultTemplate;
249 return; 262 return;
250 } 263 }
278 this.pdf.doc.save(`Available Fairway Depth: ${this.featureName}`); 291 this.pdf.doc.save(`Available Fairway Depth: ${this.featureName}`);
279 }, 292 },
280 addDiagram(position, offset, width, height) { 293 addDiagram(position, offset, width, height) {
281 let x = offset.x, 294 let x = offset.x,
282 y = offset.y; 295 y = offset.y;
283 var svgElement = this.$refs.diagramContainer.firstElementChild; 296 const svgWidth = this.millimeter2pixels(width, 80);
284 297 const svgHeight = this.millimeter2pixels(height, 80);
285 // use default width,height if they are missing in the template definition 298 // draw the diagram in a separated html element to get the full size
286 if (!width) { 299 const offScreen = document.querySelector("#offScreen");
287 width = this.templateData.properties.paperSize === "a3" ? 380 : 290; 300 offScreen.style.width = `${svgWidth}px`;
288 } 301 offScreen.style.height = `${svgHeight}px`;
289 if (!height) { 302 this.renderTo({
290 height = this.templateData.properties.paperSize === "a3" ? 130 : 100; 303 element: offScreen,
291 } 304 dimensions: this.getDimensions({
305 svgWidth: svgWidth,
306 svgHeight: svgHeight
307 })
308 });
309 var svg = offScreen.querySelector("svg");
292 if (["topright", "bottomright"].indexOf(position) !== -1) { 310 if (["topright", "bottomright"].indexOf(position) !== -1) {
293 x = this.pdf.width - offset.x - width; 311 x = this.pdf.width - offset.x - width;
294 } 312 }
295 if (["bottomright", "bottomleft"].indexOf(position) !== -1) { 313 if (["bottomright", "bottomleft"].indexOf(position) !== -1) {
296 y = this.pdf.height - offset.y - height; 314 y = this.pdf.height - offset.y - height;
297 } 315 }
298 316 svg2pdf(svg, this.pdf.doc, {
299 svg2pdf(svgElement, this.pdf.doc, {
300 xOffset: x, 317 xOffset: x,
301 yOffset: y, 318 yOffset: y,
302 scale: this.templateData.properties.paperSize === "a3" ? 0.45 : 0.18 // TODO depend on the size and aspect ration on paper 319 scale: 0.354
303 }); 320 });
321 offScreen.removeChild(svg);
304 }, 322 },
305 addDiagramLegend(position, offset, color) { 323 addDiagramLegend(position, offset, color) {
306 let x = offset.x, 324 let x = offset.x,
307 y = offset.y; 325 y = offset.y;
308 this.pdf.doc.setFontSize(10); 326 this.pdf.doc.setFontSize(10);
348 }, 366 },
349 close() { 367 close() {
350 this.$store.commit("application/paneSetup", "DEFAULT"); 368 this.$store.commit("application/paneSetup", "DEFAULT");
351 }, 369 },
352 drawDiagram() { 370 drawDiagram() {
371 const elem = document.querySelector("#" + this.containerId);
372 const svgWidth = elem != null ? elem.clientWidth : 0;
373 const svgHeight = elem != null ? elem.clientHeight : 0;
353 const dimensions = this.getDimensions({ 374 const dimensions = this.getDimensions({
354 main: { top: 0, right: 20, bottom: 75, left: 200 } 375 svgHeight,
355 }); 376 svgWidth
377 });
378 d3.select(".diagram-container svg").remove();
379 this.renderTo({ element: ".diagram-container", dimensions });
380 },
381 renderTo({ element, dimensions }) {
382 const diagram = d3
383 .select(element)
384 .append("svg")
385 .attr("width", "100%")
386 .attr("height", "100%");
387 diagram.append("g");
356 const yScale = d3 388 const yScale = d3
357 .scaleLinear() 389 .scaleLinear()
358 .domain(this.frequencyToRange) 390 .domain(this.frequencyToRange)
359 .range([dimensions.mainHeight - 30, 0]); 391 .range([dimensions.mainHeight - 30, 0]);
360 d3.select(".diagram-container svg").remove();
361 const diagram = this.generateDiagramContainer();
362 this.drawScaleLabel({ diagram, dimensions }); 392 this.drawScaleLabel({ diagram, dimensions });
363 this.drawScale({ diagram, dimensions, yScale }); 393 this.drawScale({ diagram, dimensions, yScale });
364 this.drawBars({ diagram, yScale, dimensions }); 394 this.drawBars({ diagram, yScale, dimensions });
365 this.drawTooltip(diagram); 395 this.drawTooltip(diagram);
366 },
367 generateDiagramContainer() {
368 const diagram = d3
369 .select(".diagram-container")
370 .append("svg")
371 .attr("width", "100%")
372 .attr("height", "100%");
373 return diagram.append("g");
374 }, 396 },
375 drawTooltip(diagram) { 397 drawTooltip(diagram) {
376 diagram 398 diagram
377 .append("text") 399 .append("text")
378 .text("") 400 .text("")