Mercurial > gemma
view client/src/lib/mixins.js @ 3678:8f58851927c0
client: make layer factory only return new layer config for individual maps
instead of each time it is invoked. The purpose of the factory was to support multiple maps with individual layers.
But returning a new config each time it is invoked leads to bugs that rely on the layer's state. Now this factory
reuses the same objects it created before, per map.
author | Markus Kottlaender <markus@intevation.de> |
---|---|
date | Mon, 17 Jun 2019 17:31:35 +0200 |
parents | 067ad32fba69 |
children | f86220aa8a72 |
line wrap: on
line source
/* This is Free Software under GNU Affero General Public License v >= 3.0 * without warranty, see README.md and license for details. * * SPDX-License-Identifier: AGPL-3.0-or-later * License-Filename: LICENSES/AGPL-3.0.txt * * Copyright (C) 2018 by via donau * – Österreichische Wasserstraßen-Gesellschaft mbH * Software engineering by Intevation GmbH * * Author(s): * Markus Kottländer <markus.kottlaender@intevation.de> * Fadi Abbud <fadi.abbud@intevation.de> */ import locale2 from "locale2"; import { mapState } from "vuex"; export const sortTable = { data() { return { sortColumn: "", sortDirection: "ASC", pageSize: 20, page: 1 }; }, methods: { sortTable(sorting) { this.sortColumn = sorting.sortColumn; this.sortDirection = sorting.sortDirection; } } }; export const diagram = { methods: { getDimensions({ main, nav }) { //dimensions and margins const elem = document.querySelector("#" + this.containerId); const svgWidth = elem != null ? elem.clientWidth : 0; const svgHeight = elem != null ? elem.clientHeight : 0; const mainMargin = main || { top: 20, right: 20, bottom: 110, left: 80 }; const navMargin = nav || { top: svgHeight - mainMargin.top - 65, right: 20, bottom: 30, left: 80 }; const width = Number(svgWidth) - mainMargin.left - mainMargin.right; const mainHeight = Number(svgHeight) - mainMargin.top - mainMargin.bottom; const navHeight = Number(svgHeight) - navMargin.top - navMargin.bottom; return { width, mainHeight, navHeight, mainMargin, navMargin }; } } }; export const pane = { computed: { paneId() { return this.$parent.pane.id; } } }; export const pdfgen = { computed: { ...mapState("application", ["logoForPDF"]), ...mapState("user", ["user"]) }, methods: { // add text at specific coordinates and determine how many wrolds in a single line addText(position, offset, width, fontSize, color, text) { text = this.replacePlaceholders(text); // split the incoming string to an array, each element is a string of // words in a single line this.pdf.doc.setFontStyle("normal"); this.pdf.doc.setTextColor(color); this.pdf.doc.setFontSize(fontSize); var textLines = this.pdf.doc.splitTextToSize(text, width); // x/y defaults to offset for topleft corner (normal x/y coordinates) let x = offset.x; let y = offset.y; // if position is on the right, x needs to be calculate with pdf width and // the size of the element if (["topright", "bottomright"].indexOf(position) !== -1) { x = this.pdf.width - offset.x - width; } if (["bottomright", "bottomleft"].indexOf(position) !== -1) { y = this.pdf.height - offset.y - this.getTextHeight(textLines.length); } this.pdf.doc.text(textLines, x, y, { baseline: "hanging" }); }, replacePlaceholders(text) { if (text.includes("{date}")) { text = text.replace("{date}", new Date().toLocaleString(locale2)); } // get only day,month and year from the Date object if (text.includes("{date-minor}")) { var date = new Date(); var dt = (date.getDate() < 10 ? "0" : "") + date.getDate() + "." + (date.getMonth() + 1 < 10 ? "0" : "") + (date.getMonth() + 1) + "." + date.getFullYear(); text = text.replace("{date-minor}", dt.toLocaleString(locale2)); } if (text.includes("{user}")) { text = text.replace("{user}", this.user); } return text; }, addImage(url, format, position, offset, width, height) { let x = offset.x; let y = offset.y; if (["topright", "bottomright"].indexOf(position) !== -1) { x = this.pdf.width - offset.x - width; } if (["bottomright", "bottomleft"].indexOf(position) !== -1) { y = this.pdf.height - offset.y - height; } let image = new Image(); if (url) { image.src = url; } else { if (this.logoForPDF) { image.src = this.logoForPDF; } else { image.src = "/img/gemma-logo-for-pdf.png"; } } if (format === "") { let tmp = image.src.split("."); format = tmp[tmp.length - 1].toUpperCase(); } this.pdf.doc.addImage(image, format, x, y, width, height); }, // add text at specific coordinates with a background box addBox(position, offset, width, height, rounding, color, brcolor) { // x/y defaults to offset for topleft corner (normal x/y coordinates) let x = offset.x; let y = offset.y; // if position is on the right, x needs to be calculate with pdf width and // the size of the element if (["topright", "bottomright"].indexOf(position) !== -1) { x = this.pdf.width - offset.x - width; } if (["bottomright", "bottomleft"].indexOf(position) !== -1) { y = this.pdf.height - offset.y - height; } this.addRoundedBox(x, y, width, height, color, rounding, brcolor); }, getTextHeight(numberOfLines) { return ( numberOfLines * ((this.pdf.doc.getFontSize() * 25.4) / 80) * this.pdf.doc.getLineHeightFactor() ); }, // title for diagram addDiagramTitle(position, offset, size, color, text) { let x = offset.x, y = offset.y; this.pdf.doc.setFontSize(size); this.pdf.doc.setFontStyle("bold"); this.pdf.doc.setTextColor(color); let width = (this.pdf.doc.getStringUnitWidth(text) * size) / (72 / 25.6) + size / 2; // if position is on the right, x needs to be calculate with pdf width and // the size of the element if (["topright", "bottomright"].indexOf(position) !== -1) { x = this.pdf.width - offset.x - width; } if (["bottomright", "bottomleft"].indexOf(position) !== -1) { y = this.pdf.height - offset.y - this.getTextHeight(1); } this.pdf.doc.text(text, x, y, { baseline: "hanging" }); }, addRoundedBox(x, y, w, h, color, rounding, brcolor) { this.pdf.doc.setDrawColor(brcolor); this.pdf.doc.setFillColor(color); this.pdf.doc.roundedRect(x, y, w, h, rounding, rounding, "FD"); }, addTextBox( position, offset, width, height, rounding, padding, fontSize, color, background, text, brcolor ) { this.pdf.doc.setFontSize(fontSize); text = this.replacePlaceholders(text); if (!width) { width = this.pdf.doc.getTextWidth(text) + 2 * padding; } let textWidth = width - 2 * padding; if (!height) { let textLines = this.pdf.doc.splitTextToSize(text, textWidth); height = this.getTextHeight(textLines.length) + 2 * padding; } this.addBox( position, offset, width, height, rounding, background, brcolor ); this.addText( position, { x: offset.x + padding, y: offset.y + padding }, textWidth, fontSize, color, text ); } } };