Mercurial > gemma
view client/src/lib/mixins.js @ 3830:464a6a6e05e6 sld-colors
Clean color handling a bit.
author | Sascha L. Teichmann <sascha.teichmann@intevation.de> |
---|---|
date | Thu, 04 Jul 2019 11:03:36 +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 ); } } };