diff --git a/.gitignore b/.gitignore
new file mode 100644
index 0000000..8f9d799
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1,2 @@
+node_modules/*
+dist/*
\ No newline at end of file
diff --git a/builddate.js b/builddate.js
deleted file mode 100644
index 784550d..0000000
--- a/builddate.js
+++ /dev/null
@@ -1 +0,0 @@
-var CONF_builddate="20250317-222603"
diff --git a/compile b/compile
deleted file mode 100755
index 690ab80..0000000
--- a/compile
+++ /dev/null
@@ -1,13 +0,0 @@
-#!/bin/bash
-
-cd src
-
-tsc # Uses the tsconfig.json file
-
-cat GPL3.js swap.js > eendraadschema.js
-mv eendraadschema.js ..
-rm swap.js
-
-cd ..
-
-echo "var CONF_builddate=\""`date +%Y%m%d-%H%M%S`"\"" > builddate.js
diff --git a/css/about.css b/css/about.css
index 554035c..ac381ad 100644
--- a/css/about.css
+++ b/css/about.css
@@ -1,9 +1,9 @@
body {
-# background-color: white;
+/* background-color: white; */
}
html {
- # background: url(bg.jpg) no-repeat center center fixed;
+ /* background: url(bg.jpg) no-repeat center center fixed; */
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
diff --git a/eendraadschema.js b/eendraadschema.js
deleted file mode 100644
index 87c6cad..0000000
--- a/eendraadschema.js
+++ /dev/null
@@ -1,10935 +0,0 @@
-/*** Eendraadschema ***
-
-=== Community edition ===
-
-Copyright (C) 2019-2025 Ivan Goethals GPLv3
-
-This program is free software: you can redistribute it and/or modify it
-under the terms of the GNU General Public License as published by the
-Free Software Foundation, either version 3 of the License, or (at your option)
-any later version.
-
-This program is distributed in the hope that it will be useful, but
-WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or
-FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for
-more details.
-
-You should have received a copy of the GNU General Public License
-along with this program. If not, see http://www.gnu.org/licenses/.
-
-The source code of this community edition is hosted on Github at
-https://github.com/igoethal/eendraadschema.
-
-=== Exclusive license ===
-
-Notwithstanding the above, the original and sole author of this edition,
-Ivan Goethals, reserves the exclusive right to create derivative works of
-this software and distribute them under different licensing terms, including
-but not limited to proprietary licenses. This includes the ability to develop
-and offer a hosted edition with additional features not available in the
-community edition. This right does not extend to derivative works produced by
-others based on this community edition.
-
-=== Embedded content ===
-
-== Pako.js ==
-
-This program uses the Pako.js entropy coding library. Pako is released under
-an MIT license by Andrey Tupitsin and Vitaly Puzrin. For more information on
-Pako and the full license text, please visit https://github.com/nodeca/pako
-
-== Zlib ==
-
-Pako implements ZLib in javascript. Zlib is released under the ZLIB License.
-See https://www.zlib.net/zlib_license.html
-
-== jsPDF ==
-
-This program uses the jsPDF library to transform SVG images into PDF files.
-The jsPDF license is as follows
-
-Copyright
-(c) 2010-2021 James Hall, https://github.com/MrRio/jsPDF
-(c) 2015-2021 yWorks GmbH, https://www.yworks.com/
-
-Permission is hereby granted, free of charge, to any person obtaining
-a copy of this software and associated documentation files (the
-"Software"), to deal in the Software without restriction, including
-without limitation the rights to use, copy, modify, merge, publish,
-distribute, sublicense, and/or sell copies of the Software, and to
-permit persons to whom the Software is furnished to do so, subject to
-the following conditions:
-
-The above copyright notice and this permission notice shall be
-included in all copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
-EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
-MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
-NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
-LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
-OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
-WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
-*/
-
-var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
- function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
- return new (P || (P = Promise))(function (resolve, reject) {
- function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
- function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
- function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
- step((generator = generator.apply(thisArg, _arguments || [])).next());
- });
-};
-var __generator = (this && this.__generator) || function (thisArg, body) {
- var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
- return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
- function verb(n) { return function (v) { return step([n, v]); }; }
- function step(op) {
- if (f) throw new TypeError("Generator is already executing.");
- while (g && (g = 0, op[0] && (_ = 0)), _) try {
- if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
- if (y = 0, t) op = [op[0] & 2, t.value];
- switch (op[0]) {
- case 0: case 1: t = op; break;
- case 4: _.label++; return { value: op[1], done: false };
- case 5: _.label++; y = op[1]; op = [0]; continue;
- case 7: op = _.ops.pop(); _.trys.pop(); continue;
- default:
- if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
- if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
- if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
- if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
- if (t[2]) _.ops.pop();
- _.trys.pop(); continue;
- }
- op = body.call(thisArg, _);
- } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
- if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
- }
-};
-var __assign = (this && this.__assign) || function () {
- __assign = Object.assign || function(t) {
- for (var s, i = 1, n = arguments.length; i < n; i++) {
- s = arguments[i];
- for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
- t[p] = s[p];
- }
- return t;
- };
- return __assign.apply(this, arguments);
-};
-var __extends = (this && this.__extends) || (function () {
- var extendStatics = function (d, b) {
- extendStatics = Object.setPrototypeOf ||
- ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
- function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
- return extendStatics(d, b);
- };
- return function (d, b) {
- if (typeof b !== "function" && b !== null)
- throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
- extendStatics(d, b);
- function __() { this.constructor = d; }
- d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
- };
-})();
-var __rest = (this && this.__rest) || function (s, e) {
- var t = {};
- for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
- t[p] = s[p];
- if (s != null && typeof Object.getOwnPropertySymbols === "function")
- for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
- if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
- t[p[i]] = s[p[i]];
- }
- return t;
-};
-function deepClone(obj) {
- var _out = new obj.constructor;
- var getType = function (n) {
- return Object.prototype.toString.call(n).slice(8, -1);
- };
- for (var _key in obj) {
- if (obj.hasOwnProperty(_key)) {
- _out[_key] = getType(obj[_key]) === 'Object' || getType(obj[_key]) === 'Array' ? deepClone(obj[_key]) : obj[_key];
- }
- }
- return _out;
-}
-/**
- * Returns true if the current mode is a development mode.
- * This is determined by the presence of a 'dev' parameter in the URL.
- *
- * @returns {boolean} True if this is a development mode, false otherwise.
- */
-function isDevMode() {
- try {
- var urlParams = new URLSearchParams(window.location.search);
- return urlParams.has('dev');
- }
- catch (error) {
- console.error('Error checking for dev mode:', error);
- return false;
- }
-}
-// Function for length of a string in 8 bit bytes
-var byteSize = function (str) { return new Blob([str]).size; };
-function contains(a, obj) {
- for (var i = 0; i < a.length; i++) {
- if (a[i] === obj) {
- return true;
- }
- }
- return false;
-}
-function isInt(value) {
- return !isNaN(value) &&
- parseInt(value) == value &&
- !isNaN(parseInt(value, 10));
-}
-function svgTextWidth(input, fontsize, options) {
- if (fontsize === void 0) { fontsize = 10; }
- if (options === void 0) { options = ''; }
- var div = document.createElement('div');
- div.innerHTML = '';
- var tryoutdiv = document.body;
- /*if (document.getElementById("configsection").style.display === 'block') {
- tryoutdiv = document.getElementById("configsection") as HTMLElement;
- } else if (document.getElementById("outerdiv").style.display === 'block') {
- tryoutdiv = document.getElementById("outerdiv") as HTMLElement;
- } else {
- tryoutdiv = document.getElementById("right_col_inner") as HTMLElement;
- }*/
- tryoutdiv.appendChild(div);
- var width = div.children[0].children[0].getBBox().width;
- tryoutdiv.removeChild(div);
- return (Math.ceil(width));
-}
-function flattenSVG(SVGstruct, shiftx, shifty, node, overflowright) {
- if (overflowright === void 0) { overflowright = 0; }
- if (node == 0)
- structure.print_table.pagemarkers.clear();
- var str = "";
- var X = new XMLSerializer();
- var parser = new DOMParser();
- var outstruct = SVGstruct;
- if (SVGstruct.localName == "svg") {
- if (outstruct.attributes.getNamedItem("x")) { // make SVG a 0,0 element
- shiftx += parseFloat(outstruct.attributes.getNamedItem("x").nodeValue);
- outstruct.attributes.getNamedItem("x").nodeValue = 0;
- }
- if (outstruct.attributes.getNamedItem("y")) { // make SVG a 0,0 element
- shifty += parseFloat(outstruct.attributes.getNamedItem("y").nodeValue);
- outstruct.attributes.getNamedItem("y").nodeValue = 0;
- }
- for (var i = 0; i < SVGstruct.children.length; i++) {
- str = str.concat(flattenSVG(SVGstruct.children[i], shiftx, shifty, node + 1), "\n");
- }
- if (node <= 0) {
- if (outstruct.attributes.getNamedItem("width")) { // make SVG a 0,0 element
- str = '';
- }
- else {
- str = '';
- }
- }
- }
- else {
- if (SVGstruct.localName == "line") {
- if (shiftx != 0) {
- outstruct.attributes.getNamedItem("x1").nodeValue = parseFloat(outstruct.attributes.getNamedItem("x1").nodeValue) + shiftx;
- outstruct.attributes.getNamedItem("x2").nodeValue = parseFloat(outstruct.attributes.getNamedItem("x2").nodeValue) + shiftx;
- }
- if (shifty != 0) {
- outstruct.attributes.getNamedItem("y1").nodeValue = parseFloat(outstruct.attributes.getNamedItem("y1").nodeValue) + shifty;
- outstruct.attributes.getNamedItem("y2").nodeValue = parseFloat(outstruct.attributes.getNamedItem("y2").nodeValue) + shifty;
- }
- }
- if (SVGstruct.localName == "use") {
- if (shiftx != 0) {
- outstruct.attributes.getNamedItem("x").nodeValue = parseFloat(outstruct.attributes.getNamedItem("x").nodeValue) + shiftx;
- }
- if (shifty != 0) {
- outstruct.attributes.getNamedItem("y").nodeValue = parseFloat(outstruct.attributes.getNamedItem("y").nodeValue) + shifty;
- }
- }
- if (SVGstruct.localName == "rect") {
- if (shiftx != 0) {
- outstruct.attributes.getNamedItem("x").nodeValue = parseFloat(outstruct.attributes.getNamedItem("x").nodeValue) + shiftx;
- }
- if (shifty != 0) {
- outstruct.attributes.getNamedItem("y").nodeValue = parseFloat(outstruct.attributes.getNamedItem("y").nodeValue) + shifty;
- }
- }
- if (SVGstruct.localName == "circle") {
- if (shiftx != 0) {
- outstruct.attributes.getNamedItem("cx").nodeValue = parseFloat(outstruct.attributes.getNamedItem("cx").nodeValue) + shiftx;
- }
- if (shifty != 0) {
- outstruct.attributes.getNamedItem("cy").nodeValue = parseFloat(outstruct.attributes.getNamedItem("cy").nodeValue) + shifty;
- }
- }
- if (SVGstruct.localName == "text") {
- outstruct.attributes.getNamedItem("x").nodeValue = parseFloat(outstruct.attributes.getNamedItem("x").nodeValue) + shiftx;
- outstruct.attributes.getNamedItem("y").nodeValue = parseFloat(outstruct.attributes.getNamedItem("y").nodeValue) + shifty;
- if (outstruct.attributes.getNamedItem("transform")) {
- if (outstruct.attributes.getNamedItem("transform").value.includes('rotate')) {
- outstruct.attributes.getNamedItem("transform").value = "rotate(-90 " +
- outstruct.attributes.getNamedItem("x").nodeValue + "," +
- outstruct.attributes.getNamedItem("y").nodeValue + ")";
- }
- else {
- outstruct.attributes.getNamedItem("transform").value = "scale(-1,1) translate(-" +
- outstruct.attributes.getNamedItem("x").nodeValue * 2 + ",0)";
- }
- }
- }
- if (SVGstruct.localName == "polygon") {
- var polystr_out = "";
- var polystr_in = outstruct.attributes.getNamedItem("points").nodeValue;
- var splitted_in = polystr_in.split(" ");
- for (var countstr = 0; countstr < splitted_in.length; countstr++) {
- var points_in = splitted_in[countstr].split(",");
- polystr_out += (points_in[0] * 1 + shiftx) + ',' + (points_in[1] * 1 + shifty);
- if (countstr < splitted_in.length - 1) {
- polystr_out += ' ';
- }
- }
- outstruct.attributes.getNamedItem("points").nodeValue = polystr_out;
- }
- str = X.serializeToString(outstruct);
- //remove all the xmlns tags
- var regex = /xmlns="[^"]+"/g;
- str = str.replace(regex, '');
- }
- structure.print_table.pagemarkers.addMarker(node, shiftx);
- return str;
-}
-function flattenSVGfromString(xmlstr, overflowright) {
- if (overflowright === void 0) { overflowright = 0; }
- var str = "";
- var parser = new DOMParser();
- var xmlDoc = parser.parseFromString(xmlstr, "text/xml"); //important to use "text/xml"
- str = flattenSVG(xmlDoc.childNodes[0], 0, 0, 0, overflowright);
- return str;
-}
-function htmlspecialchars(my_input) {
- var returnstr;
- if (typeof (my_input) == 'undefined')
- returnstr = "";
- else
- returnstr = my_input.toString();
- var map = {
- '&': '&',
- '<': '<',
- '>': '>',
- '"': '"',
- "'": '''
- };
- return returnstr.replace(/[&<>"']/g, function (m) { return map[m]; });
-}
-function browser_ie_detected() {
- var ua = window.navigator.userAgent;
- var msie = ua.indexOf("MSIE ");
- var trident = ua.indexOf('Trident/');
- if ((msie > 0) || (trident > 0))
- return true;
- else
- return false;
-}
-var randomId = (function () {
- var counters = {};
- return function (prefix) {
- if (prefix === void 0) { prefix = "Rnd_"; }
- if (!(prefix in counters)) {
- counters[prefix] = 0;
- }
- var value = counters[prefix];
- counters[prefix]++;
- return "".concat(prefix).concat(value.toString());
- };
-})();
-var Session = /** @class */ (function () {
- function Session() {
- this.sessionKey = 'SessionJS';
- this.newUser = false;
- var storedSessionId = localStorage.getItem(this.sessionKey);
- if (storedSessionId) {
- this.sessionId = storedSessionId;
- }
- else {
- this.sessionId = this.generateRandomBase64String(22);
- localStorage.setItem(this.sessionKey, this.sessionId);
- this.newUser = true;
- }
- }
- Session.prototype.generateRandomBase64String = function (length) {
- var characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/';
- var result = '';
- var charactersLength = characters.length;
- for (var i = 0; i < length; i++) {
- var randomIndex = Math.floor(Math.random() * charactersLength);
- result += characters[randomIndex];
- }
- return result;
- };
- Session.prototype.getSessionId = function () {
- return this.sessionId;
- };
- Session.prototype.isNewUser = function () {
- return this.newUser;
- };
- return Session;
-}());
-var SVGelement = /** @class */ (function () {
- function SVGelement() {
- this.data = "";
- this.xleft = 0;
- this.xright = 0;
- this.xrightmin = 0;
- this.yup = 0;
- this.ydown = 0;
- }
- return SVGelement;
-}());
-/**
- * Manages the addition and removal of event listeners on HTML elements.
- */
-var EventManager = /** @class */ (function () {
- function EventManager() {
- this.listeners = [];
- }
- /**
- * Adds an event listener to a specified HTML element. If a listener of the same
- * type already exists on the element, it is removed before adding the new one.
- *
- * @param element - The HTML element to attach the event listener to.
- * @param type - The type of the event.
- * @param listener - The event listener function or object.
- */
- EventManager.prototype.addEventListener = function (element, type, listener) {
- var existingListenerIndex = this.listeners.findIndex(function (l) { return l.element === element && l.type === type; });
- if (existingListenerIndex !== -1) {
- var existingListener = this.listeners[existingListenerIndex];
- element.removeEventListener(type, existingListener.listener);
- this.listeners.splice(existingListenerIndex, 1);
- }
- this.listeners.push({ element: element, type: type, listener: listener });
- element.addEventListener(type, listener);
- this.cleanup(); // Before we proceed, remove all listeners for elements that no longer exist
- };
- /**
- * Removes all event listeners managed by this EventManager instance.
- */
- EventManager.prototype.removeAllEventListeners = function () {
- this.listeners.forEach(function (_a) {
- var element = _a.element, type = _a.type, listener = _a.listener;
- element.removeEventListener(type, listener);
- });
- this.listeners = [];
- };
- /**
- * Disposes of the EventManager by removing all event listeners.
- */
- EventManager.prototype.dispose = function () {
- this.removeAllEventListeners();
- };
- /**
- * Removes all listeners for which the HTML element no longer exists.
- */
- EventManager.prototype.cleanup = function () {
- this.listeners = this.listeners.filter(function (_a) {
- var element = _a.element, type = _a.type, listener = _a.listener;
- if (!document.contains(element)) {
- element.removeEventListener(type, listener);
- return false;
- }
- return true;
- });
- };
- return EventManager;
-}());
-/**
- * A class to handle a list of potential page breaks or markers in the form {depth,xpos} with depth how nested
- * they are (lower depth is better to include a page break) and xpos the location in pixels in the SVG where
- * the break could be added
- */
-var MarkerList = /** @class */ (function () {
- function MarkerList() {
- this.markers = [];
- }
- /**
- * Clear the list of markers
- */
- MarkerList.prototype.clear = function () {
- this.markers = [];
- };
- /**
- * Add a marker to the markerlist.
- * If the same marker already exists, no new one will be added.
- * @param depth - The depth of the marker, or how nested it is (lower depth is better for page breaks).
- * @param xpos - The x-coordinate position of the marker.
- */
- MarkerList.prototype.addMarker = function (depth, xpos) {
- // Check if the marker already exists
- var exists = this.markers.some(function (marker) { return marker.depth === depth && marker.xpos === xpos; });
- if (!exists) {
- this.markers.push({ depth: depth, xpos: xpos });
- }
- };
- /**
- * Sorts the markers by their x-coordinate position in ascending order.
- */
- MarkerList.prototype.sort = function () {
- this.markers.sort(function (a, b) { return a.xpos - b.xpos; });
- };
- /**
- * Looks for the marker in the half-open internal (minx, maxx] with the lowest possible depth.
- * If multiple markers exist with the same depth, the one with the highest xpos is returned.
- * If no suitable marker is found, a dummy {depth=null, xpos=maxx} is returned.
- * @param minx - Minimal x for any markers that will be considered.
- * @param maxx - Maximal x for any markers that will be considered.
- * @returns The marker with the lowest depth (and highest xpos if multiple exist) or a dummy marker if none are found.
- */
- MarkerList.prototype.findMinDepth = function (minx, maxx) {
- // Filter markers within the range
- var filteredMarkers = this.markers.filter(function (marker) { return marker.xpos > minx && marker.xpos <= maxx; });
- if (filteredMarkers.length === 0) {
- return { depth: null, xpos: maxx }; // No markers in the specified range so we just take the maximum
- }
- // Find the marker with the lowest depth, if multiple exist with the same depth, take the one with the highest xpos
- return filteredMarkers.reduce(function (minDepthMarker, marker) {
- if (marker.depth < minDepthMarker.depth ||
- (marker.depth === minDepthMarker.depth && marker.xpos > minDepthMarker.xpos)) {
- return marker;
- }
- return minDepthMarker;
- }, filteredMarkers[0]);
- };
- return MarkerList;
-}());
-/**
- * Store information on what part of the SVG lands on one specific page
- * The height is the final height in number of pixels
- * The start and stop are the x-locations in pixels of the part of the total SVG that needs to land on this particular page
- */
-var Page_Info = /** @class */ (function () {
- function Page_Info() {
- this.height = 0;
- this.start = 0;
- this.stop = 0;
- }
- return Page_Info;
-}());
-/**
- * Stores all information about pagination and how pages will be printed.
- * Can perform automatic pagination or ask the user to paginate.
- *
- * We don't use private variables in this class as we want to serialize it (JSON)
- */
-var Print_Table = /** @class */ (function () {
- /**
- * Initialize list of pages (foresee at least 1 page) and pagemarkers
- */
- function Print_Table() {
- this.height = 0; //How high is the SVG that will be printed in pixels
- this.maxwidth = 0; //What is the width of the SVG that will be printed in pixels and therefore the maximum printing width
- this.displaypage = 0;
- this.enableAutopage = true; //Flag to indicate if automatic pagination is used or not
- this.pages = new Array();
- this.pages.push(new Page_Info());
- this.pagemarkers = new MarkerList;
- }
- /**
- * Set papersize to either "A4" or "A3"
- * @param papersize - A string, if it is neither "A4" or "A3", the papersize will default to "A4".
- */
- Print_Table.prototype.setPaperSize = function (papersize) {
- this.papersize = (papersize === "A3" ? "A3" : "A4");
- };
- /**
- * Get papersize. If papersize was not yet defined, it is forced to "A4"
- * @returns The papersize, either "A3" or "A4"
- */
- Print_Table.prototype.getPaperSize = function () {
- if (!this.papersize)
- this.papersize = "A4";
- return (this.papersize);
- };
- /**
- * Set displayheight of all pages to height
- * @param height - Height in pixels
- */
- Print_Table.prototype.setHeight = function (height) {
- this.height = height;
- this.pages.forEach(function (page) { page.height = height; });
- };
- /**
- * Get displayheight
- * @returns Height in pixels
- */
- Print_Table.prototype.getHeight = function () {
- return (this.height);
- };
- /**
- * Set modevertical to either "alles" (meaning we show the full height of the page) or "kies" meaning the user can choose
- * @param more - Either "alles" or "kies"
- */
- Print_Table.prototype.setModeVertical = function (mode) {
- this.modevertical = (mode === "kies" ? "kies" : "alles");
- this.forceCorrectFigures();
- };
- /**
- * Get modevertical
- * @returns either "alles" or "kies"
- */
- Print_Table.prototype.getModeVertical = function () {
- this.forceCorrectFigures();
- return (this.modevertical);
- };
- /**
- * Checks that all start and stop position of pages are valid
- * For instance, the startx position should never be higher than the stopx.
- * In addition, the SVG always goes from left to right over the pages so the startx
- * of a new page cannot be lower than the stopx of the page before.
- */
- Print_Table.prototype.forceCorrectFigures = function () {
- var _this = this;
- if (!this.modevertical) {
- this.modevertical = "alles";
- }
- switch (this.modevertical) {
- case "kies":
- this.starty = Math.min(Math.max(0, this.starty), this.height);
- this.stopy = Math.min(Math.max(this.starty, this.stopy), this.height);
- break;
- default:
- this.starty = 0;
- this.stopy = this.height;
- }
- this.pages[this.pages.length - 1].stop = this.maxwidth;
- this.pages.forEach(function (page, index) {
- if (page.stop < 0)
- page.stop = 0;
- if (page.start < 0)
- page.start = 0;
- if (index > 0) {
- page.start = _this.pages[index - 1].stop;
- }
- if (page.stop > _this.maxwidth) {
- _this.pages[_this.pages.length - 1].stop = _this.maxwidth;
- }
- if (page.start > page.stop) {
- page.start = page.stop;
- }
- });
- };
- /**
- * Sets the maximum width of the SVG to be displayed.
- * As a general rule this equals the width of the SVG itself in pixels
- * @param maxwidth
- */
- Print_Table.prototype.setMaxWidth = function (maxwidth) {
- this.maxwidth = maxwidth;
- this.forceCorrectFigures();
- };
- /**
- * Gets the maximum width that can be displayed or printed
- * @returns maxwidth, as a general rule this equals the width of the SVG itsef in pixels
- */
- Print_Table.prototype.getMaxWidth = function () {
- return (this.maxwidth);
- };
- /**
- * Returns the starty position of the page that will be displayed or printed
- * @returns starty
- */
- Print_Table.prototype.getstarty = function () {
- this.forceCorrectFigures();
- return (this.starty);
- };
- /**
- * Returns the stopy position of the page that will be displayed or printed
- * @returns stopy
- */
- Print_Table.prototype.getstopy = function () {
- this.forceCorrectFigures();
- return (this.stopy);
- };
- /**
- * Sets the starty position of the page that will be displayed or printed
- * @param starty
- */
- Print_Table.prototype.setstarty = function (starty) {
- this.starty = starty;
- this.forceCorrectFigures;
- };
- /**
- * Sets the stopy position of the page that will be displayed or printed
- * @param starty
- */
- Print_Table.prototype.setstopy = function (stopy) {
- this.stopy = stopy;
- this.forceCorrectFigures;
- };
- /**
- * Sets the stopx position of one specific page to a desired value.
- * The function calls forceCorrectFigures() afterwards to ensure the natural flow of pages (left to right)
- * is respected. Note that stopx in the underlying Page_Info object is called stop and we cannot change that
- * anymore as the classes are used for serialization.
- * @param page - page number for which we want to set the stopx (starts counting at zero)
- * @param stop - stopx position to set
- */
- Print_Table.prototype.setStop = function (page, stop) {
- if (page > 0) {
- if (stop < this.pages[page - 1].stop)
- stop = this.pages[page - 1].stop;
- }
- if (page < this.pages.length - 1) {
- if (stop > this.pages[page + 1].stop)
- stop = this.pages[page + 1].stop;
- }
- if (stop > this.maxwidth)
- stop = this.maxwidth;
- this.pages[page].stop = stop;
- this.forceCorrectFigures();
- };
- /**
- * Automatically create pages based on pagemarkers
- */
- Print_Table.prototype.autopage = function () {
- /* Autopage uses some ratio's determined by the useful SVG drawing size on the PDF. This depends on the margins configured in print.js
- At present all of this is still hard-coded. Should become a function of print.js
-
- A4
-
- Height: 210-20-30-5-5 --> 150
- Width: 297-20 --> 277
- Ratio: 1.8467
-
- A3
-
- Height: 297-20-30-5-5 --> 237
- Width: 420-20 --> 400
- Ratio: 1.6878
- */
- var _this = this;
- //First set all pages to maximum to avoid that we bump into boundaries
- this.pages.forEach(function (page, index) {
- page.stop = _this.maxwidth;
- });
- var height = this.getstopy() - this.getstarty();
- var maxsvgwidth = height * (this.getPaperSize() == "A3" ? 1.6878 : 1.8467);
- var minsvgwidth = 3 / 4 * maxsvgwidth;
- var page = 0;
- var pos = 0;
- if (maxsvgwidth > 0) {
- while ((this.maxwidth - pos) > maxsvgwidth) { // The undivided part still does not fit on a page
- pos = this.pagemarkers.findMinDepth(pos + minsvgwidth, pos + maxsvgwidth).xpos;
- while (this.pages.length < page + 2)
- this.addPage();
- this.setStop(page, pos);
- page++;
- }
- }
- // The last page stops at the maximum size of the SVG
- this.setStop(page, this.maxwidth);
- // Delete unneeded pages at the end
- for (var i = this.pages.length - 1; i > page; i--) {
- this.deletePage(i);
- }
- };
- /**
- * Add a page
- */
- Print_Table.prototype.addPage = function () {
- var page_info;
- page_info = new Page_Info();
- page_info.height = this.height;
- page_info.start = this.pages[this.pages.length - 1].stop;
- page_info.stop = this.maxwidth;
- this.pages.push(page_info);
- };
- /**
- * Remove a page
- * @param page - number of the page to be removed, starting at 0
- */
- Print_Table.prototype.deletePage = function (page) {
- if (page == 0) {
- this.pages[1].start = 0;
- }
- else {
- this.pages[page - 1].stop = this.pages[page].stop;
- }
- this.pages.splice(page, 1);
- };
- /**
- * Display a Select box to choose papersize (A3 or A4)
- * The table is displayed in the HTMLElement div that is given as a parameter to the function.
- * If any manipulation is done by the user that would require redrawing the print preview, the redrawCallBack function is executed
- * from within this function
- * @param div - Existing HTMLElement where the table will be inserted
- * @param redrawCallBack - Callback function that ensures everything that needs to be redrawn is redrawn
- */
- Print_Table.prototype.insertHTMLselectPaperSize = function (div, redrawCallBack) {
- var _this = this;
- var select = document.createElement('select');
- select.id = 'select_papersize_input';
- var optionA4 = document.createElement('option');
- optionA4.value = 'A4';
- optionA4.textContent = 'A4';
- var optionA3 = document.createElement('option');
- optionA3.value = 'A3';
- optionA3.textContent = 'A3';
- if (this.papersize == "A3")
- optionA3.selected = true;
- else
- optionA4.selected = true;
- select.appendChild(optionA4);
- select.appendChild(optionA3);
- select.onchange = function (event) {
- _this.setPaperSize(event.target.value);
- redrawCallBack();
- };
- div.appendChild(select);
- };
- /**
- * Display a Select box to choose dpi (300 or 600)
- * The table is displayed in the HTMLElement div that is given as a parameter to the function.
- * If any manipulation is done by the user that would require redrawing the print preview, the redrawCallBack function is executed
- * from within this function
- * @param div - Existing HTMLElement where the table will be inserted
- * @param redrawCallBack - Callback function that ensures everything that needs to be redrawn is redrawn
- */
- Print_Table.prototype.insertHTMLselectdpi = function (div, redrawCallBack) {
- var select = document.createElement('select');
- select.id = "select_dpi_input";
- var option300 = document.createElement('option');
- option300.value = '300';
- option300.textContent = '300dpi (standaard)';
- var option600 = document.createElement('option');
- option600.value = '600';
- option600.textContent = '600dpi (beter maar trager)';
- if (typeof (structure.properties.dpi) == 'undefined')
- structure.properties.dpi = 300;
- if (structure.properties.dpi == 600)
- option600.selected = true;
- else
- option300.selected = true;
- select.appendChild(option300);
- select.appendChild(option600);
- select.onchange = function (event) {
- structure.properties.dpi = parseInt(event.target.value, 0);
- };
- div.appendChild(select);
- };
- /**
- * Display a Check box to decide if one wants to use autopage or not.
- * If autopage is enabled, we also recalculate the page boundaries
- * The checkbox is displayed in the HTMLElement div that is given as a parameter to the function.
- * If any manipulation is done by the user that would require redrawing the print preview, the redrawCallBack function is executed
- * from within this function
- * @param div - Existing HTMLElement where the table will be inserted
- * @param redrawCallBack - Callback function that ensures everything that needs to be redrawn is redrawn
- */
- Print_Table.prototype.insertHTMLcheckAutopage = function (div, redrawCallBack) {
- var _this = this;
- var checkbox = document.createElement('input');
- checkbox.type = 'checkbox';
- checkbox.id = 'autopage';
- checkbox.name = 'autopage';
- var label = document.createElement('label');
- label.htmlFor = 'autopage';
- label.textContent = "Handmatig over pagina's verdelen";
- if (this.enableAutopage) {
- this.setModeVertical("alles");
- this.autopage();
- }
- else {
- checkbox.checked = true;
- }
- div.append(checkbox);
- div.append(label);
- checkbox.onchange = function (event) {
- _this.enableAutopage = !event.target.checked;
- redrawCallBack();
- };
- };
- /**
- * Display a select box to choose the vertical mode.
- * If vertical mode is "kies", we also display input boxes to choose the starty and stopy positions.
- * The checkbox is displayed in the HTMLElement div that is given as a parameter to the function.
- * If any manipulation is done by the user that would require redrawing the print preview, the redrawCallBack function is executed
- * from within this function
- * @param div - Existing HTMLElement where the table will be inserted
- * @param redrawCallBack - Callback function that ensures everything that needs to be redrawn is redrawn
- */
- Print_Table.prototype.insertHTMLchooseVerticals = function (div, redrawCallBack) {
- var _this = this;
- var outstr = "";
- switch (this.modevertical) {
- case "kies":
- outstr += 'Hoogte ';
- outstr += ' StartY ';
- outstr += '';
- outstr += ' StopY ';
- outstr += '';
- break;
- case "alles":
- default:
- outstr += 'Hoogte ';
- }
- div.insertAdjacentHTML('beforeend', outstr);
- document.getElementById('select_modeVertical').onchange = function (event) {
- _this.setModeVertical(event.target.value);
- redrawCallBack();
- };
- if (this.modevertical == "kies") {
- document.getElementById('input_starty').onchange = function (event) {
- var starty = parseInt(event.target.value);
- if (isNaN(starty))
- starty = 0;
- _this.setstarty(starty);
- _this.forceCorrectFigures();
- redrawCallBack();
- };
- document.getElementById('input_stopy').onchange = function (event) {
- var stopy = parseInt(event.target.value);
- if (isNaN(stopy))
- stopy = _this.getHeight();
- ;
- _this.setstopy(stopy);
- _this.forceCorrectFigures();
- redrawCallBack();
- };
- }
- };
- /**
- * Display a button to force auto-pagination even when in manual mode
- * @param div - Existing HTMLElement where the table will be inserted
- * @param redrawCallBack - Callback function that ensures everything that needs to be redrawn is redrawn
- */
- Print_Table.prototype.insertHTMLsuggestXposButton = function (div, redrawCallBack) {
- var _this = this;
- var button = document.createElement('button');
- button.innerText = 'Suggereer X-posities';
- div.append(button);
- button.onclick = function () {
- _this.autopage();
- redrawCallBack();
- };
- };
- /**
- * Display a table where the user can choose start and stop positions for the x-coordinates in the SVG of each individual page
- * The table is displayed in the HTMLElement div that is given as a parameter to the function.
- * If any manipulation is done by the user that would require redrawing the print preview, the redrawCallBack function is executed
- * from within this function
- * @param div - Existing HTMLElement where the table will be inserted
- * @param redrawCallBack - Callback function that ensures everything that needs to be redrawn is redrawn
- */
- Print_Table.prototype.insertHTMLposxTable = function (div, redrawCallBack) {
- var _this = this;
- if (structure.print_table.enableAutopage)
- this.autopage();
- var outstr = "";
- var pagenum;
- outstr += '
";
- div.insertAdjacentHTML('beforeend', outstr);
- document.getElementById('Btn_Addpage').onclick = function () {
- _this.addPage();
- redrawCallBack();
- };
- document.querySelectorAll('button[id^="Btn_Deletepage_"]').forEach(function (button) {
- var match = button.id.match(/Btn_Deletepage_(\d+)/);
- if (match) {
- var page_1 = parseInt(match[1]);
- button.onclick = function () {
- _this.deletePage(page_1);
- redrawCallBack();
- };
- }
- });
- document.querySelectorAll('input[id^="input_stop_"]').forEach(function (input) {
- input.addEventListener('change', function (event) {
- var match = event.target.id.match(/input_stop_(\d+)/);
- if (match) {
- var page = parseInt(match[1]);
- var stop_1 = parseInt(event.target.value);
- _this.setStop(page, stop_1);
- redrawCallBack();
- }
- });
- });
- };
- return Print_Table;
-}());
-function HLDisplayPage() {
- structure.print_table.displaypage = parseInt(document.getElementById("id_select_page").value) - 1;
- printsvg();
-}
-function dosvgdownload() {
- var prtContent = document.getElementById("printsvgarea").innerHTML;
- var filename = document.getElementById("dosvgname").value;
- download_by_blob(prtContent, filename, 'data:image/svg+xml;charset=utf-8'); //Was text/plain
-}
-function getPrintSVGWithoutAddress(outSVG, page) {
- if (page === void 0) { page = structure.print_table.displaypage; }
- var scale = 1;
- var startx = structure.print_table.pages[page].start;
- var width = structure.print_table.pages[page].stop - startx;
- var starty = structure.print_table.getstarty();
- var height = structure.print_table.getstopy() - starty;
- var viewbox = '' + startx + ' ' + starty + ' ' + width + ' ' + height;
- var outstr = '';
- return (outstr);
-}
-function printsvg() {
- function generatePdf() {
- if (typeof (structure.properties.dpi) == 'undefined')
- structure.properties.dpi = 300;
- var svg = flattenSVGfromString(structure.toSVG(0, "horizontal").data);
- var pages = Array.from({ length: structure.print_table.pages.length }, function (_, i) { return i + 1; });
- var sitplanprint = structure.sitplan.toSitPlanPrint();
- printPDF(svg, structure.print_table, structure.properties, pages, document.getElementById("dopdfname").value, //filename
- document.getElementById("progress_pdf"), //HTML element where callback status can be given
- sitplanprint);
- }
- function renderPrintSVG(outSVG) {
- document.getElementById("printarea").innerHTML = '
' +
- getPrintSVGWithoutAddress(outSVG) +
- '
';
- }
- // First we generate an SVG image. We do this first because we need the size
- // We will display it at the end of this function
- var outSVG = new SVGelement();
- outSVG = structure.toSVG(0, "horizontal");
- var height = outSVG.yup + outSVG.ydown;
- var width = outSVG.xleft + outSVG.xright;
- structure.print_table.setHeight(height);
- structure.print_table.setMaxWidth(width + 10);
- // Then we display all the print options
- var outstr = "";
- var strleft = "";
- document.getElementById("configsection").innerHTML
- = '
'
- + ' ' // Generate PDF button comes here
- + ' ' // Selector to choose "A3" and "A4" comes here
- + ' ' // Selector for dpi 300 or 600 comes here
- + ' ' // Input box for filename of pdf document
- + ' ' // Area where status of pdf generation can be displayed
- + '
'
- + ' ' // Checkbox to choose if we want to auto paginate or not comes here
- + ' ' // An optional area to choose what part of the y-space of the image is shown
- + ' ' // A button to force auto pagination comes here
- + '
'
- + ' ' // Table with all startx and stopx comes here
- + '
'
- + '
'
- + '
Klik op de groene pijl om het schema over meerdere pagina\'s te printen en kies voor elke pagina de start- en stop-positie in het schema (in pixels).
'
- + '
Onderaan kan je bekijken welk deel van het schema op welke pagina belandt.
'
- + '
'
- + '
'
- + '
'
- + ' ';
- document.getElementById("configsection").insertAdjacentHTML('beforeend', outstr);
- structure.print_table.insertHTMLposxTable(document.getElementById('id_print_table'), printsvg);
- }
- strleft += '';
- strleft += 'Printvoorbeeld: Pagina (Enkel tekening, kies "Genereer PDF" om ook de tekstuele gegevens te zien)';
- strleft += '
';
- strleft += '
Sla tekening hieronder op als SVG en converteer met een ander programma naar PDF (bvb Inkscape).
';
- strleft += displayButtonPrintToPdf(); // This is only for the online version
- strleft += '';
- document.getElementById("configsection").insertAdjacentHTML('beforeend', strleft);
- // Finally we show the actual SVG
- renderPrintSVG(outSVG);
- toggleAppView('config');
-}
-var importExportUsingFileAPI = /** @class */ (function () {
- function importExportUsingFileAPI() {
- this.clear();
- //this.updateButtons();
- }
- importExportUsingFileAPI.prototype.clear = function () {
- this.saveNeeded = false;
- this.fileHandle = null;
- this.filename = null;
- };
- importExportUsingFileAPI.prototype.updateLastSaved = function () {
- var currentdate = new Date();
- this.lastsaved = currentdate.getHours().toString().padStart(2, '0') + ":" +
- currentdate.getMinutes().toString().padStart(2, '0') + ":" +
- currentdate.getSeconds().toString().padStart(2, '0');
- ;
- //If there is an object on the screen that needs updating, do it
- if (document.getElementById('exportscreen')) {
- showFilePage(); // Update the export screen if we are actually on the export screen
- }
- };
- importExportUsingFileAPI.prototype.setSaveNeeded = function (input) {
- var lastSaveNeeded = this.saveNeeded;
- this.saveNeeded = input;
- //if (input !== lastSaveNeeded) this.updateButtons();
- };
- importExportUsingFileAPI.prototype.readFile = function () {
- return __awaiter(this, void 0, void 0, function () {
- var _a, file, contents;
- return __generator(this, function (_b) {
- switch (_b.label) {
- case 0:
- _a = this;
- return [4 /*yield*/, window.showOpenFilePicker({
- types: [{
- description: 'Eendraadschema (.eds)',
- accept: { 'application/eds': ['.eds'] },
- }],
- })];
- case 1:
- _a.fileHandle = (_b.sent())[0];
- return [4 /*yield*/, this.fileHandle.getFile()];
- case 2:
- file = _b.sent();
- return [4 /*yield*/, file.text()];
- case 3:
- contents = _b.sent();
- this.filename = file.name;
- structure.properties.filename = file.name;
- this.setSaveNeeded(false);
- this.updateLastSaved(); // Needed because EDStoStructure whipes everything
- return [2 /*return*/, contents];
- }
- });
- });
- };
- importExportUsingFileAPI.prototype.saveAs = function (content) {
- return __awaiter(this, void 0, void 0, function () {
- var options, _a;
- return __generator(this, function (_b) {
- switch (_b.label) {
- case 0:
- options = {
- suggestedName: structure.properties.filename,
- types: [{
- description: 'Eendraadschema (.eds)',
- accept: { 'application/eds': ['.eds'] },
- }],
- startIn: 'documents' // Suggests the Documents folder
- };
- _a = this;
- return [4 /*yield*/, window.showSaveFilePicker(options)];
- case 1:
- _a.fileHandle = _b.sent();
- return [4 /*yield*/, this.saveFile(content, this.fileHandle)];
- case 2:
- _b.sent();
- return [2 /*return*/];
- }
- });
- });
- };
- ;
- importExportUsingFileAPI.prototype.saveFile = function (content, handle) {
- return __awaiter(this, void 0, void 0, function () {
- var writable;
- return __generator(this, function (_a) {
- switch (_a.label) {
- case 0: return [4 /*yield*/, handle.createWritable()];
- case 1:
- writable = _a.sent();
- return [4 /*yield*/, writable.write(content)];
- case 2:
- _a.sent();
- return [4 /*yield*/, writable.close()];
- case 3:
- _a.sent();
- this.filename = handle.name;
- structure.properties.filename = handle.name;
- this.setSaveNeeded(false);
- this.updateLastSaved();
- return [2 /*return*/];
- }
- });
- });
- };
- ;
- importExportUsingFileAPI.prototype.save = function (content) {
- return __awaiter(this, void 0, void 0, function () {
- return __generator(this, function (_a) {
- switch (_a.label) {
- case 0: return [4 /*yield*/, this.saveFile(content, this.fileHandle)];
- case 1:
- _a.sent();
- return [2 /*return*/];
- }
- });
- });
- };
- ;
- return importExportUsingFileAPI;
-}());
-var fileAPIobj = new importExportUsingFileAPI();
-/* FUNCTION importjson
-
- This is the callback function for the legacy filepicker if the file API is not available in the browser */
-var importjson = function (event) {
- var input = event.target;
- var reader = new FileReader();
- var text = "";
- reader.onload = function () {
- EDStoStructure(reader.result.toString());
- };
- reader.readAsText(input.files[0]);
-};
-var appendjson = function (event) {
- var input = event.target;
- var reader = new FileReader();
- var text = "";
- reader.onload = function () {
- importToAppend(reader.result.toString());
- };
- reader.readAsText(input.files[0]);
-};
-/* FUNCTION loadClicked()
-
- Gets called when a user wants to open a file. Checks if the fileAPI is available in the browser.
- If so, the fileAPI is used. If not, the legacy function importjson is called */
-function loadClicked() {
- return __awaiter(this, void 0, void 0, function () {
- var data;
- return __generator(this, function (_a) {
- switch (_a.label) {
- case 0:
- if (!window.showOpenFilePicker) return [3 /*break*/, 2];
- return [4 /*yield*/, fileAPIobj.readFile()];
- case 1:
- data = _a.sent();
- EDStoStructure(data);
- return [3 /*break*/, 3];
- case 2:
- document.getElementById('importfile').click();
- document.getElementById('importfile').value = "";
- _a.label = 3;
- case 3: return [2 /*return*/];
- }
- });
- });
-}
-/**
- * function importToAppendClicked()
- *
- * Vraagt om een EDS bestand op de machine te kiezen en voegt de inhoud toe aan het reeds geopende schema.
- * We gebruiken hier bewust niet de fileAPI aangezien die reeds gebruikt wordt voor het reeds geopende schema.
- */
-function importToAppendClicked() {
- return __awaiter(this, void 0, void 0, function () {
- return __generator(this, function (_a) {
- document.getElementById('appendfile').click();
- document.getElementById('appendfile').value = "";
- return [2 /*return*/];
- });
- });
-}
-/* FUNCTION upgrade_version
-
- Takes a structure, usually imported from json into javascript object, and performs a version upgrade if needed.
- as mystructure is passed by reference, all upgrades are done in-line.
-
-*/
-function upgrade_version(mystructure, version) {
- // At a certain moment (2023-01-11 to 2023-01-13) there was a bug in the systen so that files where accidentally outputed with props, without keys, but with version 1.
- // We correct for this below. If there are props and not keys but it still reads version 1, it should be interpreted as version 3.
- if ((version == 1) && (mystructure.length > 0) && (typeof (mystructure.data[0].keys) == 'undefined') && (typeof (mystructure.data[0].props) != 'undefined')) {
- version = 3;
- }
- /* Indien versie 1 moeten we vrije tekst elementen die niet leeg zijn 30 pixels breder maken.
- * Merk ook op dat versie 1 nog een key based systeem had met keys[0][2] het type
- * en keys[16][2] die aangeeft of vrije tekst al dan niet een kader bevat (verbruiker) of niet (zonder kader)
- */
- if (version < 2) {
- for (var i = 0; i < mystructure.length; i++) {
- // Breedte van Vrije tekst velden zonder kader met 30 verhogen sinds 16/12/2023
- if ((mystructure.data[i].keys[0][2] === "Vrije tekst") && (mystructure.data[i].keys[16][2] != "verbruiker")) {
- if (Number(mystructure.data[i].keys[22][2]) > 0)
- mystructure.data[i].keys[22][2] = String(Number(mystructure.data[i].keys[22][2]) + 30);
- else
- mystructure.data[i].keys[18][2] = "automatisch";
- if (mystructure.data[i].keys[16][2] != "zonder kader")
- mystructure.data[i].keys[16][2] = "verbruiker";
- }
- }
- }
- // In versie 2 heetten Contactdozen altijd nog Stopcontacten
- if (version < 3) {
- for (var i = 0; i < mystructure.length; i++) {
- if (mystructure.data[i].keys[0][2] === "Stopcontact")
- mystructure.data[i].keys[0][2] = "Contactdoos";
- if (mystructure.data[i].keys[0][2] === "Leeg")
- mystructure.data[i].keys[0][2] = "Aansluitpunt";
- }
- }
- // In versie 3 heetten Contactdozen ook soms nog Stopcontacten, maar niet altijd
- if (version == 3) {
- for (var i = 0; i < mystructure.length; i++) {
- if (mystructure.data[i].props.type === "Stopcontact")
- mystructure.data[i].props.type = "Contactdoos";
- }
- }
- //Vanaf versie 4 staan niet automatisch meer haakjes <> rond de benaming van borden. Indien kleiner dan versie 4 moeten we deze toevoegen
- if (version < 4) {
- if (version < 3) {
- for (var i = 0; i < mystructure.length; i++) {
- if ((mystructure.data[i].keys[0][2] === "Bord") && (mystructure.data[i].keys[10][2] !== ""))
- mystructure.data[i].keys[10][2] = '<' + mystructure.data[i].keys[10][2] + '>';
- }
- }
- else {
- for (var i = 0; i < mystructure.length; i++) {
- if ((mystructure.data[i].props.type === "Bord") && (mystructure.data[i].props.naam !== ""))
- mystructure.data[i].props.naam = '<' + mystructure.data[i].props.naam + '>';
- }
- }
- }
- //Algemene upgrade voor versies 3 tot en met 4
- if ((version >= 3) && (version <= 4)) {
- for (var i = 0; i < mystructure.length; i++) {
- if (mystructure.data[i].props.type === "Leeg")
- mystructure.data[i].props.type = "Aansluitpunt";
- }
- }
-}
-/* FUNCTION json_to_structure
-
- Takes a string in pure json and puts the content in a hierarchical list that is returned.
- The function can take an old structure that is to be cleaned as input (optional)
-
- Will perform a version upgrade in case the json is from an earlier version of the eendraadschema tool but this version upgrade will not be performed
- if version is set to 0. If version is not set to 0 it should be set to the verson of the json.
-
-*/
-function json_to_structure(text, oldstruct, version) {
- if (oldstruct === void 0) { oldstruct = null; }
- if (version === void 0) { version = 0; }
- // If a structure exists, clear it
- if (oldstruct != null)
- oldstruct.dispose(); // Clear the structure
- /* Read all data from disk in a javascript structure mystructure.
- * Afterwards we will gradually copy elements from this one into the official outstruct
- */
- var mystructure = JSON.parse(text);
- // upgrade if needed
- if (version != 0)
- upgrade_version(mystructure, version);
- /* We starten met het kopieren van data naar de eigenlijke outstruct.
- * Ook hier houden we er rekening mee dat in oude saves mogelijk niet alle info voorhanden was */
- var outstruct = new Hierarchical_List();
- // Kopieren van hoofd-eigenschappen
- if (typeof mystructure.properties != 'undefined') {
- if (typeof mystructure.properties.filename != "undefined")
- outstruct.properties.filename = mystructure.properties.filename;
- if (typeof mystructure.properties.owner != "undefined")
- outstruct.properties.owner = mystructure.properties.owner;
- if (typeof mystructure.properties.control != "undefined")
- outstruct.properties.control = mystructure.properties.control;
- if (typeof mystructure.properties.installer != "undefined")
- outstruct.properties.installer = mystructure.properties.installer;
- if (typeof mystructure.properties.info != "undefined")
- outstruct.properties.info = mystructure.properties.info;
- if (typeof mystructure.properties.info != "undefined")
- outstruct.properties.dpi = mystructure.properties.dpi;
- if (typeof mystructure.properties.currentView != "undefined")
- outstruct.properties.currentView = mystructure.properties.currentView;
- }
- // Kopieren van de paginatie voor printen
- if (typeof mystructure.print_table != "undefined") {
- outstruct.print_table.setHeight(mystructure.print_table.height);
- outstruct.print_table.setMaxWidth(mystructure.print_table.maxwidth);
- outstruct.print_table.setPaperSize(mystructure.print_table.papersize);
- outstruct.print_table.setModeVertical(mystructure.print_table.modevertical);
- outstruct.print_table.setstarty(mystructure.print_table.starty);
- outstruct.print_table.setstopy(mystructure.print_table.stopy);
- if (typeof mystructure.print_table.enableAutopage != "undefined") {
- outstruct.print_table.enableAutopage = mystructure.print_table.enableAutopage;
- }
- else {
- outstruct.print_table.enableAutopage = false;
- }
- for (var i = 0; i < mystructure.print_table.pages.length; i++) {
- if (i != 0)
- outstruct.print_table.addPage();
- outstruct.print_table.pages[i].height = mystructure.print_table.pages[i].height;
- outstruct.print_table.pages[i].start = mystructure.print_table.pages[i].start;
- outstruct.print_table.pages[i].stop = mystructure.print_table.pages[i].stop;
- }
- }
- // Kopieren van de situatieplannen
- if (typeof mystructure.sitplanjson != "undefined") {
- outstruct.sitplan = new SituationPlan();
- outstruct.sitplan.fromJsonObject(mystructure.sitplanjson);
- }
- /* Kopieren van de eigenschappen van elk element.
- * Keys voor versies 1 en 2 en props voor versie 3
- */
- for (var i = 0; i < mystructure.length; i++) {
- if ((version != 0) && (version < 3)) {
- outstruct.addItem(mystructure.data[i].keys[0][2]);
- outstruct.data[i].convertLegacyKeys(mystructure.data[i].keys);
- }
- else {
- outstruct.addItem(mystructure.data[i].props.type);
- Object.assign(outstruct.data[i].props, mystructure.data[i].props);
- }
- outstruct.data[i].parent = mystructure.data[i].parent;
- outstruct.active[i] = mystructure.active[i];
- outstruct.id[i] = mystructure.id[i];
- outstruct.data[i].id = mystructure.data[i].id;
- outstruct.data[i].indent = mystructure.data[i].indent;
- outstruct.data[i].collapsed = mystructure.data[i].collapsed;
- }
- // As we re-read the structure and it might be shorter then it once was (due to deletions) but we might still have the old high ID's, always take over the curid from the file
- outstruct.curid = mystructure.curid;
- // Sort the entire new structure
- outstruct.reSort();
- // Return the result
- return outstruct;
-}
-function loadFromText(text, version, redraw) {
- if (redraw === void 0) { redraw = true; }
- structure = json_to_structure(text, structure, version);
- if (redraw == true)
- topMenu.selectMenuItemByName('Eéndraadschema'); // Ga naar het bewerken scherm, dat zal automatisch voor hertekenen zorgen.
-}
-/**
- * Converteert een string in EDS formaat naar een json string.
- * De string kan eventueel eerst entropy gecodeerd en base64 encoded zijn.
- * De string kan ook een header hebben met een versie en een identificatie.
- *
- * @param {string} mystring - De string die uit een bestand of een json string is geladen.
- * @returns {Object} - Een object met twee attributen: text en version. Text is de json string en version is de versie van de string.
- */
-function EDStoJson(mystring) {
- var text = "";
- var version;
- /* If first 3 bytes read "EDS", it is an entropy coded file
- * The first 3 bytes are EDS, the next 3 bytes indicate the version
- * The next 4 bytes are decimal zeroes "0000"
- * thereafter is a base64 encoded data-structure
- *
- * If the first 3 bytes read "TXT", it is not entropy coded, nor base64
- * The next 7 bytes are the same as above.
- *
- * If there is no identifier, it is treated as a version 1 TXT
- * */
- if ((mystring.charCodeAt(0) == 69) && (mystring.charCodeAt(1) == 68) && (mystring.charCodeAt(2) == 83)) { //recognize as EDS
- /* Determine versioning
- * < 16/12/2023: Version 1, original key based implementation
- * 16/12/2023: Version 2, Introductie van automatische breedte voor bepaalde SVG-tekst
- * Vrije tekst van Version 1 moet 30 pixels groter gemaakt worden om nog mooi in het schema te passen
- * XX/01/2024: Version 3, Overgang van key based implementation naar props based implementation
- * functies convertLegacyKeys ingevoerd om oude files nog te lezen.
- */
- version = Number(mystring.substring(3, 6));
- if (isNaN(version))
- version = 1; // Hele oude files bevatten geen versie, ze proberen ze te lezen als versie 1
- mystring = atob(mystring.substring(10, mystring.length));
- var buffer = new Uint8Array(mystring.length);
- for (var i = 0; i < mystring.length; i++) {
- buffer[i - 0] = mystring.charCodeAt(i);
- }
- try { //See if the text decoder works, if not, we will do it manually (slower)
- var decoder = new TextDecoder("utf-8");
- text = decoder.decode(pako.inflate(buffer));
- }
- catch (error) { //Continue without the text decoder (old browsers)
- var inflated = pako.inflate(buffer);
- text = "";
- for (var i = 0; i < inflated.length; i++) {
- text += String.fromCharCode(inflated[i]);
- }
- }
- }
- else if ((mystring.charCodeAt(0) == 84) && (mystring.charCodeAt(1) == 88) && (mystring.charCodeAt(2) == 84)) { //recognize as TXT
- version = Number(mystring.substring(3, 6));
- if (isNaN(version))
- version = 3;
- text = mystring.substring(10, mystring.length);
- }
- else { // Very old file without header
- text = mystring;
- version = 1;
- }
- //Return an object with the text and the version
- return { text: text, version: version };
-}
-/* FUNCTION EDStoStructure
-
- Starts from a string that can be loaded from disk or from a file and is in EDS-format.
- puts the content in the javascript structure called "structure".
- Will redraw everything if the redraw flag is set.
-
-*/
-function EDStoStructure(mystring, redraw) {
- if (redraw === void 0) { redraw = true; }
- var JSONdata = EDStoJson(mystring);
- // Dump the json in into the structure and redraw if needed
- loadFromText(JSONdata.text, JSONdata.version, redraw);
- // Clear the undo stack and push this one on top
- undostruct.clear();
- undostruct.store();
- // Scroll to top left for the SVG and HTML, this can only be done at the end because "right col" has to actually be visible
- var leftelem = document.getElementById("left_col");
- if (leftelem != null) {
- leftelem.scrollTop = 0;
- leftelem.scrollLeft = 0;
- }
- var rightelem = document.getElementById("right_col");
- if (rightelem != null) {
- rightelem.scrollTop = 0;
- rightelem.scrollLeft = 0;
- }
-}
-function importToAppend(mystring, redraw) {
- if (redraw === void 0) { redraw = true; }
- var JSONdata = EDStoJson(mystring);
- var structureToAppend = json_to_structure(JSONdata.text, null, JSONdata.version);
- //get the Maximal ID in array structure.id and call it maxID
- var maxID = 0;
- for (var i = 0; i < structure.id.length; i++) {
- if (structure.id[i] > maxID)
- maxID = structure.id[i];
- }
- //then increase the ID's in structureToAppend accordingly
- for (var i = 0; i < structureToAppend.id.length; i++) {
- structureToAppend.id[i] += maxID;
- structureToAppend.data[i].id += maxID;
- if (structureToAppend.data[i].parent != 0) {
- structureToAppend.data[i].parent += maxID;
- }
- }
- structure.curid += structureToAppend.curid;
- //then merge information for the eendraadschema
- structure.length = structure.length + structureToAppend.length;
- structure.active = structure.active.concat(structureToAppend.active);
- structure.id = structure.id.concat(structureToAppend.id);
- structure.data = structure.data.concat(structureToAppend.data);
- //update the sourcelist
- structure.data.forEach(function (item) {
- item.sourcelist = structure;
- });
- //then set the printer to autopage
- structure.print_table.enableAutopage = true;
- //then merge the situation plans but only if both exist
- if (structure.sitplan != null) {
- if (structureToAppend.sitplan != null) {
- // Eerst oude situationplanview leeg maken, anders blijven oude div's hangen
- if (structure.sitplanview != null)
- structure.sitplanview.dispose();
- // dan nieuw situationplan maken en bij openen van het schema zal automatisch een nieuw situationplanview gecreëerd wordne
- structure.sitplanjson = structure.sitplan.toJsonObject();
- structureToAppend.sitplanjson = structureToAppend.sitplan.toJsonObject();
- for (var i = 0; i < structureToAppend.sitplanjson.elements.length; i++) {
- if (structureToAppend.sitplanjson.elements[i].electroItemId != null)
- structureToAppend.sitplanjson.elements[i].electroItemId += maxID;
- structureToAppend.sitplanjson.elements[i].page += structure.sitplanjson.numPages;
- }
- if ((structure.sitplanjson != null) && (structureToAppend.sitplanjson != null)) {
- structure.sitplanjson.numPages += structureToAppend.sitplanjson.numPages;
- structure.sitplanjson.elements = structure.sitplanjson.elements.concat(structureToAppend.sitplanjson.elements);
- }
- structure.sitplan.fromJsonObject(structure.sitplanjson);
- structure.sitplanjson = null;
- }
- }
- structure.reSort();
- undostruct.store();
- //then remove the pointer from structureToAppend and let the garbage collector do its work
- structureToAppend = null;
- //redraw if needed
- if (redraw)
- topMenu.selectMenuItemByName('Eéndraadschema');
-}
-function structure_to_json() {
- // Remove some unneeded data members that would only inflate the size of the output file
- for (var _i = 0, _a = structure.data; _i < _a.length; _i++) {
- var listitem = _a[_i];
- listitem.sourcelist = null;
- }
- var swap = structure.print_table.pagemarkers;
- var swap2 = structure.sitplan;
- var swap3 = structure.sitplanview;
- structure.print_table.pagemarkers = null;
- if (structure.sitplan != null)
- structure.sitplanjson = structure.sitplan.toJsonObject();
- structure.sitplan = null;
- structure.sitplanview = null;
- // Create the output structure in uncompressed form
- var text = JSON.stringify(structure);
- // Put the removed data members back
- for (var _b = 0, _c = structure.data; _b < _c.length; _b++) {
- var listitem = _c[_b];
- listitem.sourcelist = structure;
- }
- structure.print_table.pagemarkers = swap;
- structure.sitplan = swap2;
- structure.sitplanview = swap3;
- // Remove sitplanjson again
- structure.sitplanjson = null;
- return (text);
-}
-/** FUNCTION download_by_blob
- *
- * Downloads an EDS file to the user's PC
- *
- */
-function download_by_blob(text, filename, mimeType) {
- var element = document.createElement('a');
- if (navigator.msSaveBlob) {
- navigator.msSaveBlob(new Blob([text], {
- type: mimeType
- }), filename);
- }
- else if (URL && 'download' in element) {
- var uriContent = URL.createObjectURL(new Blob([text], { type: mimeType }));
- element.setAttribute('href', uriContent);
- element.setAttribute('download', filename);
- element.style.display = 'none';
- document.body.appendChild(element);
- element.click();
- setTimeout(function () { return document.body.removeChild(element); }, 1000); // 1-second delay
- }
- else {
- this.location.go("".concat(mimeType, ",").concat(encodeURIComponent(text)));
- }
-}
-/* FUNCTION showFilePage
-
- Shows the File-Page. It will look different depending on whether the browser supports the file API or not
-
-*/
-function showFilePage() {
- var strleft = ''; //We need the id to check elsewhere that the screen is open
- strleft += "\n
\n
\n
\n Openen\n
\n
\n
\n
\n
\n
\n
\n \n
\n
\n Click op \"openen\" en selecteer een eerder opgeslagen EDS bestand.\n
\n
\n
\n
\n
\n
\n
\n
\n
\n Opslaan\n
\n
\n
\n
\n ";
- if (window.showOpenFilePicker) { // Use fileAPI
- strleft += '
';
- strleft += 'U kan het schema opslaan op uw lokale harde schijf voor later gebruik. De standaard-naam is eendraadschema.eds. U kan deze wijzigen door links op "wijzigen" te klikken. ';
- strleft += 'Klik vervolgens op "opslaan" en volg de instructies van uw browser. ';
- strleft += 'In de meeste gevallen zal uw browser het bestand automatisch plaatsen in de Downloads-folder tenzij u uw browser instelde dat die eerst een locatie moet vragen.
';
- strleft += 'Eens opgeslagen kan het schema later opnieuw geladen worden door in het menu "openen" te kiezen en vervolgens het bestand op uw harde schijf te selecteren.';
- strleft += '
';
- strleft += PROP_GDPR(); //Function returns empty for GIT version, returns GDPR notice when used online.
- strleft += '
';
- }
- strleft += "\n
\n
\n
\n ";
- strleft += "\n
\n
\n
\n Samenvoegen\n
\n
\n
\n
\n
\n
\n
\n \n
\n
\n Open een tweede EDS bestand en voeg de inhoud toe aan het huidige EDS bestand. \n Voegt de \u00E9\u00E9ndraadschema's samen en voegt eveneens pagina's toe aan het situatieschema als dat nodig is.
\n Opgelet! Het is aanbevolen uw werk op te slaan alvorens deze functie te gebruiken!\n
\n Een volledige handleiding is beschikbaar in PDF formaat.\n Klik links om deze in een ander venster te openen.\n \n Het programma is in volle ontwikkeling dus delen van de handleiding zijn\n mogelijk ietwat verouderd. \n
\n
\n
\n
\n \n
\n
\n Specifiek voor het werken met het situatieschema werd een ander korter document opgesteld.\n Klik link om deze in een ander venster te openen.\n
\n
\n
\n
\n
\n
";
- document.getElementById("configsection").innerHTML = strleft;
- toggleAppView('config');
- document.getElementById('Btn_downloadManual').onclick = function () { window.open('Documentation/edsdoc.pdf', '_blank'); };
- document.getElementById('Btn_downloadSitPlanManual').onclick = function () { window.open('Documentation/sitplandoc.pdf', '_blank'); };
-}
-var ContextMenu = /** @class */ (function () {
- /**
- * Constructor voor het initialiseren van het contextmenu-element.
- * @param div - Het HTML-element waaraan het contextmenu wordt toegevoegd.
- */
- function ContextMenu(div) {
- if (div === void 0) { div = document.body; }
- this.menuItems = [];
- this.menuElement = null;
- this.menuElement = document.createElement('div');
- this.menuElement.className = 'context-menu';
- div.appendChild(this.menuElement);
- }
- /**
- * Wis alle menu-items.
- */
- ContextMenu.prototype.clearMenu = function () {
- this.menuItems = [];
- if (this.menuElement) {
- this.menuElement.innerHTML = '';
- }
- };
- /**
- * Voeg een menu-item toe met een optionele sneltoets.
- * @param label - De tekstlabel van het menu-item.
- * @param callback - De functie die wordt aangeroepen bij het klikken op het menu-item.
- * @param shortcut - De optionele sneltoets voor het menu-item.
- */
- ContextMenu.prototype.addMenuItem = function (label, callback, shortcut) {
- this.menuItems.push({ label: label, shortcut: shortcut, callback: callback });
- };
- /**
- * Voeg een scheidingslijn toe aan het menu.
- */
- ContextMenu.prototype.addLine = function () {
- this.menuItems.push({ label: 'separator', callback: function () { } });
- };
- /**
- * Render de menu-items.
- */
- ContextMenu.prototype.renderMenu = function () {
- var _this = this;
- if (this.menuElement) {
- this.menuElement.innerHTML = '';
- this.menuItems.forEach(function (item, index) {
- if (item.label === 'separator') {
- var separator = document.createElement('hr');
- separator.className = 'context-menu-separator';
- _this.menuElement.appendChild(separator);
- }
- else {
- var menuItem = document.createElement('div');
- menuItem.className = 'context-menu-item';
- var labelElement = document.createElement('span');
- labelElement.textContent = item.label;
- var shortcutElement = document.createElement('span');
- shortcutElement.textContent = item.shortcut || '';
- shortcutElement.className = 'context-menu-shortcut';
- menuItem.appendChild(labelElement);
- menuItem.appendChild(shortcutElement);
- menuItem.addEventListener('click', function () {
- item.callback();
- _this.hide();
- });
- _this.menuElement.appendChild(menuItem);
- }
- });
- }
- };
- /**
- * Toon het contextmenu op de locatie van de muisklik.
- * @param event - Het muisgebeurtenisobject.
- */
- ContextMenu.prototype.show = function (event) {
- if (this.menuElement) {
- this.renderMenu();
- this.menuElement.style.display = 'block';
- var clientX = event.clientX, clientY = event.clientY;
- var innerWidth_1 = window.innerWidth, innerHeight_1 = window.innerHeight;
- var _a = this.menuElement, offsetWidth = _a.offsetWidth, offsetHeight = _a.offsetHeight;
- var left = clientX;
- var top_1 = clientY;
- if (left + offsetWidth > innerWidth_1) {
- left = innerWidth_1 - offsetWidth;
- }
- if (top_1 + offsetHeight > innerHeight_1) {
- top_1 = innerHeight_1 - offsetHeight;
- }
- this.menuElement.style.left = "".concat(left, "px");
- this.menuElement.style.top = "".concat(top_1, "px");
- }
- };
- /**
- * Verberg het contextmenu.
- */
- ContextMenu.prototype.hide = function () {
- if (this.menuElement) {
- this.menuElement.style.display = 'none';
- }
- };
- return ContextMenu;
-}());
-/**
- * Class gebruikt in SituationPlanView om te zoeken naar electroitems op basis van de kringnaam.
- * Dit laat toe items to selecteren uit het volledige eendraadschema en ze te plaatsen op het situatieschema.
- *
- * Deze class refereert naar de volgende globale variabelen:
- * - structure
- */
-var ElectroItemZoeker = /** @class */ (function () {
- /**
- * Constructor van de ElectroItemZoeker.
- *
- * Initialiseert de lijst van alle toegestane ElectroItems in het situatieplan.
- */
- function ElectroItemZoeker() {
- this.excludedTypes = ['Aansluiting', 'Bord', 'Kring', 'Domotica', 'Domotica module (verticaal)',
- 'Domotica gestuurde verbruiker', 'Leiding', 'Splitsing', 'Verlenging',
- 'Vrije ruimte', 'Meerdere verbruikers'];
- this.data = [];
- this.borden = [];
- this.reCalculate();
- }
- /**
- * Geeft de lijst van alle toegestane ElectroItems in het situatieplan retour.
- * @returns {Object[]} een lijst van objecten met de volgende structuur:
- * {id: number, kringnaam: string, adres: string, type: string}
- */
- ElectroItemZoeker.prototype.getData = function () {
- return this.data;
- };
- /**
- * Geeft de lijst van alle Borden in het eendraadschema.
- * @returns {Object[]} een lijst van objecten met de volgende structuur:
- * {id: number, naam: string}
- *
- * Indien de originele naam null is of enkel uit spaties bestaat wordt als naam "Bord" meegegeven
- */
- ElectroItemZoeker.prototype.getBorden = function () {
- return this.borden;
- };
- /**
- * Geeft een lijst van alle unieke kringnamen retour uit de lijst van ElectroItems.
- * @returns {string[]} een lijst van unieke kringnamen.
- */
- ElectroItemZoeker.prototype.getUniqueKringnaam = function () {
- return Array.from(new Set(this.data.map(function (x) { return x.kringnaam; })));
- };
- /**
- * Geeft een lijst van alle ElectroItems retour die behoren tot de kring met de naam 'kringnaam'.
- * @param {string} kringnaam - de naam van de kring.
- * @returns {Object[]} een lijst van objecten met de volgende structuur:
- * {id: number, adres: string, type: string}
- */
- ElectroItemZoeker.prototype.getElectroItemsByKring = function (kringnaam) {
- return this.data.filter(function (x) { return x.kringnaam === kringnaam; }).map(function (x) { return ({ id: x.id, adres: x.adres, type: x.type }); });
- };
- /**
- * Rekent de lijst van alle toegestane ElectroItems opnieuw uit.
- *
- * Deze methode wordt gebruikt om de lijst van ElectroItems te vullen die in het situatieplan gebruikt mogen worden.
- * De lijst wordt opnieuw uitgerekend door de volgende stappen:
- * 1. Doorlopen alle actieve ElectroItems in de structuur.
- * 2. Voor elke ElectroItem worden de kringnaam en het type bepaald.
- * 3. Als de kringnaam niet leeg is en het type niet voorkomt in de lijst van uitgesloten types, dan wordt de ElectroItem toegevoegd aan de lijst.
- * 4. De ElectroItem wordt toegevoegd met de volgende structuur: {id: number, kringnaam: string, adres: string, type: string}
- *
- * Er wordt eveneens een lijst van borden gemaakt.
- */
- ElectroItemZoeker.prototype.reCalculate = function () {
- this.data = [];
- this.borden = [];
- for (var i = 0; i < structure.length; i++) {
- if (structure.active[i]) {
- var id = structure.id[i];
- var electroItem = structure.data[i];
- if (electroItem == null)
- continue;
- var type = electroItem.getType();
- if (type == 'Bord') {
- var myName = electroItem.props.naam;
- if ((myName == null) || (myName.trim() == ''))
- myName = 'Bord';
- this.borden.push({ id: id, naam: myName });
- }
- else {
- var kringnaam = structure.findKringName(id).trim();
- if (kringnaam != '') {
- if ((type != null) && (this.excludedTypes.indexOf(type) === -1)) {
- var adres = electroItem.getReadableAdres();
- this.data.push({ id: id, kringnaam: kringnaam, adres: adres, type: type });
- }
- }
- }
- }
- }
- };
- return ElectroItemZoeker;
-}());
-/**
- * Functie die de breedte en hoogte van een rechthoek als invoer neemt, evenals een rotatie rond het midden van de rechthoek.
- * De functie retourneert de breedte en hoogte van de kleinste rechthoek die de geroteerde rechthoek omsluit met zijden langs de X- en Y-assen.
- */
-function getRotatedRectangleSize(width, height, rotation) {
- var rotationInRadians = rotation * Math.PI / 180;
- var cos = Math.cos(rotationInRadians);
- var sin = Math.sin(rotationInRadians);
- var rotatedWidth = Math.abs(width * cos) + Math.abs(height * sin);
- var rotatedHeight = Math.abs(width * sin) + Math.abs(height * cos);
- return { width: rotatedWidth, height: rotatedHeight };
-}
-/**
- * Functie die de breedte en hoogte van een rechthoek als invoer neemt, evenals een rotatie rond het midden van de rechthoek.
- * De functie retourneert de breedte en hoogte van de rechthoek die voldoet aan de volgende eigenschappen:
- * - De zijden zijn parallel aan de X-as en de Y-as.
- * - De rechthoek snijdt de X-as en Y-as in dezelfde punten als de originele geroteerde rechthoek
- *
- * Deze functie kan gebruikt worden om de locatie van labels te bepalen.
- */
-function getXYRectangleSize(width, height, rotation) {
- rotation = Math.abs(rotation) % 180;
- if (rotation > 90)
- rotation = 180 - rotation;
- var rotationInRadians = rotation * Math.PI / 180;
- var cos = Math.cos(rotationInRadians);
- var sin = Math.sin(rotationInRadians);
- return { width: Math.min(width / cos, height / sin), height: Math.min(width / sin, height / cos) };
-}
-/**
- * Cache het resultaat van getPixelsPerMillimeter() om de overhead van het maken en verwijderen van een DOM-element bij elke oproep te voorkomen.
- */
-var cachedPixelsPerMillimeter = null;
-/**
- * Berekent het aantal pixels in een millimeter op het huidige scherm.
- * Maakt gebruik van een cache om de overhead van het maken en verwijderen van een DOM-element bij elke oproep te voorkomen.
- * @returns {number} Het aantal pixels in een millimeter.
- */
-function getPixelsPerMillimeter() {
- if (cachedPixelsPerMillimeter === null) {
- var div = document.createElement('div');
- div.style.width = '10mm';
- div.style.position = 'absolute';
- document.body.appendChild(div);
- var widthInPixels = div.offsetWidth;
- document.body.removeChild(div);
- cachedPixelsPerMillimeter = widthInPixels / 10;
- }
- return cachedPixelsPerMillimeter;
-}
-/**
- * Class that helps with dragging a box on the situation plan view.
- * It keeps track of the start position of the drag and the zoomfactor.
- */
-var MouseDrag = /** @class */ (function () {
- function MouseDrag() {
- this.startOffsetLeft = 0;
- this.startOffsetTop = 0;
- this.hassMoved = false;
- }
- /**
- * Start the drag.
- * @param mouseX The x position of the mouse when the drag starts.
- * @param mouseY The y position of the mouse when the drag starts.
- * @param startOffsetLeft The left position of the box when the drag starts.
- * @param startOffsetTop The top position of the box when the drag starts.
- */
- MouseDrag.prototype.startDrag = function (mouseX, mouseY, startOffsetLeft, startOffsetTop) {
- if (mouseX === void 0) { mouseX = 0; }
- if (mouseY === void 0) { mouseY = 0; }
- if (startOffsetLeft === void 0) { startOffsetLeft = 0; }
- if (startOffsetTop === void 0) { startOffsetTop = 0; }
- this.startOffsetLeft = startOffsetLeft;
- this.startOffsetTop = startOffsetTop;
- this.hassMoved = false;
- var menuHeight = parseFloat(getComputedStyle(document.documentElement).getPropertyValue('--menu-height'));
- var ribbonHeight = parseFloat(getComputedStyle(document.documentElement).getPropertyValue('--ribbon-height'));
- var sideBarWidth = parseFloat(getComputedStyle(document.documentElement).getPropertyValue('--sideBarWidth'));
- this.startPaperPos = structure.sitplanview.canvasPosToPaperPos(mouseX - sideBarWidth, mouseY - menuHeight - ribbonHeight);
- };
- /**
- * Return the new left and top position of the box based on the current mouse position.
- * @param mouseX The current x position of the mouse.
- * @param mouseY The current y position of the mouse.
- * @returns An object with the new left and top position of the box.
- */
- MouseDrag.prototype.returnNewLeftTop = function (mousex, mousey) {
- if (mousex === void 0) { mousex = 0; }
- if (mousey === void 0) { mousey = 0; }
- var menuHeight = parseFloat(getComputedStyle(document.documentElement).getPropertyValue('--menu-height'));
- var ribbonHeight = parseFloat(getComputedStyle(document.documentElement).getPropertyValue('--ribbon-height'));
- var sideBarWidth = parseFloat(getComputedStyle(document.documentElement).getPropertyValue('--sideBarWidth'));
- var stopPaperPos = structure.sitplanview.canvasPosToPaperPos(mousex - sideBarWidth, mousey - menuHeight - ribbonHeight);
- if (stopPaperPos.x != this.startPaperPos.x || stopPaperPos.y != this.startPaperPos.y)
- this.hassMoved = true;
- return ({
- left: (stopPaperPos.x - this.startPaperPos.x) + this.startOffsetLeft,
- top: (stopPaperPos.y - this.startPaperPos.y) + this.startOffsetTop
- });
- };
- return MouseDrag;
-}());
-/**
- * Volledig overzicht van een situatieplan.
- * Werd gebouwd voor gebruik in de browser maar is redelijk browser-agnostic.
- * De effectieve code om te interageren met de browser zelf zit in class SituationPlanView.
- *
- * Deze class refereert naar de volgende globale variabelen:
- * - structure
- */
-var SituationPlan = /** @class */ (function () {
- function SituationPlan() {
- this.activePage = 1; // We houden deze bij in situationplan zodat ook wijzigingen van pagina's worden opgeslagen
- this.numPages = 1;
- this.elements = [];
- this.defaults = {
- fontsize: 11,
- scale: SITPLANVIEW_DEFAULT_SCALE,
- rotate: 0
- };
- }
- /**
- * Reset alle waarden van het situatieplan naar hun default waarde.
- * Gebruik deze functie om alle data te wissen en het situatieplan opnieuw te beginnen.
- */
- SituationPlan.prototype.dispose = function () {
- this.elements = [];
- this.numPages = 1;
- this.activePage = 1;
- this.defaults = {
- fontsize: 11,
- scale: SITPLANVIEW_DEFAULT_SCALE,
- rotate: 0
- };
- };
- /**
- * Workaround om de private variabele elements te kunnen gebruiken in friend classs
- * @returns {SituationPlanElement[]} De elementen van het situatieplan
- */
- SituationPlan.prototype.getElements = function () {
- return this.elements;
- };
- /**
- * SituationPlanElement toevoegen aan het situatieplan
- * @param element
- * @returns {void}
- */
- SituationPlan.prototype.addElement = function (element) {
- this.elements.push(element);
- };
- /**
- * Laad een SVG-inhoud vanuit een bestand en voegt deze toe aan het situatieplan.
- * De SVG werd geselecteerd in een fileInput HTML element en komt binnen via het event in de functie header.
- *
- * @param {any} event Het event dat aangaf dat er een bestand was gekozen om te uploaden.
- * @param {number} page Het pagina-nummer van het element in het situatieplan.
- * @param {number} posx De x-coordinaat van het element in het situatieplan.
- * @param {number} posy De y-coordinaat van het element in het situatieplan.
- * @param {() => void} callback Een callback-functie die wordt aangeroepen wanneer het element is toegevoegd.
- * @returns {SituationPlanElement} Het element dat is toegevoegd.
- */
- SituationPlan.prototype.addElementFromFile = function (event, page, posx, posy, callback) {
- var element = new SituationPlanElement();
- element.setVars({ page: page, posx: posx, posy: posy, labelfontsize: this.defaults.fontsize, scale: this.defaults.scale, rotate: this.defaults.rotate });
- element.importFromFile(event, callback);
- this.elements.push(element);
- return element;
- };
- /**
- * Creëer een nieuw element in het situatieplan dat gelinkt is aan een Electro_Item
- *
- * @param {number} electroItemId Het ID van de Electro_Item.
- * @param {number} page Het pagina-nummer van het element in het situatieplan.
- * @param {number} posx De x-coordinaat van het element in het situatieplan.
- * @param {number} posy De y-coordinaat van het element in het situatieplan.
- * @param {AdresType} adrestype Het type van het adres, bijvoorbeeld 'manueel'.
- * AdresType wordt definieerd in SituationPlanElement.ts
- * @param {string} adres Het adres.
- * @param {AdresLocation} adreslocation De locatie van het adres in het label ('boven' of 'onder' of 'rechts' of 'links').
- * AdresLocation wordt definieerd in SituationPlanElement.ts
- * @param {number} labelfontsize De lettergrootte van het label.
- * @param {number} scale De schaal van het element.
- * @param {number} rotate De rotatie van het element.
- * @returns {SituationPlanElement} Het element dat is toegevoegd.
- */
- SituationPlan.prototype.addElementFromElectroItem = function (electroItemId, page, posx, posy, adrestype, adres, adreslocation, labelfontsize, scale, rotate) {
- var electroItem = structure.getElectroItemById(electroItemId);
- if (!electroItem)
- return null;
- var element = electroItem.toSituationPlanElement();
- Object.assign(element, { page: page, posx: posx, posy: posy, labelfontsize: labelfontsize, scale: scale, rotate: rotate });
- element.setElectroItemId(electroItemId);
- element.setAdres(adrestype, adres, adreslocation);
- this.elements.push(element);
- return element;
- };
- /**
- * Verwijder een element van het situatieplan.
- * In principe is er altijd maar één maar de functie gebruikt recursie in het geval er meerdere zouden zijn
- * om ze allemaal te verwijderen.
- *
- * @param {SituationPlanElement} element Het element dat verwijderd moet worden.
- * @returns {void}
- */
- SituationPlan.prototype.removeElement = function (element) {
- var index = this.elements.indexOf(element);
- if (index === -1)
- return;
- this.elements.splice(index, 1);
- if (element.boxref != null)
- element.boxref.remove();
- if (element.boxlabelref != null)
- element.boxlabelref.remove();
- this.removeElement(element); // Recurse in het geval er meerdere zouden zijn maar dit zou niet mogen gebeuren
- };
- /**
- * Zorgt ervoor dat alle elementen in het situatieplan een link hebben naar
- * het eendraadschema.
- *
- * Als een element in het situatieplan verwijst naar een symbool dat niet langer in
- * het eendraadschema zit, wordt het element verwijderd uit het situatieplan.
- */
- SituationPlan.prototype.syncToEendraadSchema = function () {
- for (var _i = 0, _a = this.elements; _i < _a.length; _i++) {
- var element = _a[_i];
- //Indien een symbool niet langer in het eendraadschema zit moet het ook uit het situatieplan verwijderd worden
- //We kunnen hier niet de functie isEendraadSchemaSymbool of getElectroItemById gebruiken want die zorgen
- //ervoor dat onderstaande altijd false geeft als de symbolen niet langer in het eendraadschema zitten waardoor
- //de cleanup die nodig is niet gebeurd.
- if ((element.electroItemId != null) && (structure.getElectroItemById(element.getElectroItemId()) == null)) {
- this.removeElement(element);
- this.syncToEendraadSchema();
- return; // Start opnieuw en stop na recursie
- }
- }
- };
- /**
- * Sorteer de elementen in het situatieplan op basis van de z-index van hun boxref elementen in de DOM.
- * Elementen met een `null` `boxref` worden naar het einde van de lijst verplaatst.
- *
- * Het sorteren is nodig om ervoor te zorgen dat bij het printen wanneer lineair door de elementen wordt gegaan
- * de elementen in de juiste volgorde worden gestacked.
- *
- * @returns {void}
- */
- SituationPlan.prototype.orderByZIndex = function () {
- //if (structure.sitplanview == null) return;
- this.elements.sort(function (a, b) {
- var asort = (((a.boxref == null) || (a.boxref.style.zIndex === "")) ? 0 : parseInt(a.boxref.style.zIndex));
- var bsort = (((b.boxref == null) || (b.boxref.style.zIndex === "")) ? 0 : parseInt(b.boxref.style.zIndex));
- return asort - bsort;
- });
- };
- /**
- * Initialiseer het situatieplan vanuit een json-object.
- *
- * @param {Object} json Het json-object dat het situatieplan bevat.
- * Het object bevat een 'numPages' property dat het aantal pagina's in het situatieplan aangeeft.
- * Verder bevat het een 'elements' property dat een array is van json-objecten die elk een element in het situatieplan vertegenwoordigen.
- * Elke json-object in de array bevat de properties van een SituationPlanElement.
- * @returns {void}
- */
- SituationPlan.prototype.fromJsonObject = function (json) {
- this.dispose();
- if (json.numPages !== undefined) {
- this.numPages = json.numPages;
- }
- else {
- this.numPages = 1;
- }
- if (json.activePage !== undefined) {
- this.activePage = json.activePage;
- }
- else {
- this.activePage = 1;
- }
- if (json.defaults !== undefined) {
- Object.assign(this.defaults, json.defaults);
- }
- if (Array.isArray(json.elements)) {
- this.elements = json.elements.map(function (element) {
- var newElement = new SituationPlanElement();
- newElement.fromJsonObject(element);
- return newElement;
- });
- }
- else {
- this.elements = [];
- }
- };
- /**
- * Converteer het situatieplan naar een JSON-object dat gebruikt kan worden
- * voor opslaan in lokale storage of voor versturen naar de server.
- *
- * @returns {any} Het JSON-object dat het situatieplan bevat.
- */
- SituationPlan.prototype.toJsonObject = function () {
- this.orderByZIndex();
- var elements = [];
- for (var _i = 0, _a = this.elements; _i < _a.length; _i++) {
- var element = _a[_i];
- elements.push(element.toJsonObject());
- }
- return { numPages: this.numPages, activePage: this.activePage, defaults: this.defaults, elements: elements };
- };
- /**
- * Converteer het situatieplan naar een formaat dat gebruikt kan worden voor printen.
- *
- * @param {boolean} fitToPage Indien `true` dan wordt de pagina automatisch aangepast om alle elementen te laten passen.
- * Als `false` dan wordt de pagina in de originele grootte gebruikt.
- * @returns {any} Het formaat van het situatieplan dat gebruikt kan worden voor printen.
- * Dit is een javascript object met structuur
- * {
- * numpages: number,
- * pages: [
- * {
- * svg: string,
- * minx: number,
- * miny: number,
- * maxx: number,
- * maxy: number
- * }
- * ]
- * }
- */
- SituationPlan.prototype.toSitPlanPrint = function (fitToPage) {
- if (fitToPage === void 0) { fitToPage = false; }
- this.syncToEendraadSchema(); // Om zeker te zijn dat we geen onbestaande elementen meer hebben
- this.orderByZIndex(); // Sorteer de elementen op basis van de z-index zodat ze in de juiste volgorde worden geprint
- var outstruct = {};
- outstruct.numpages = (this.elements.length > 0 ? structure.sitplan.numPages : 0);
- outstruct.pages = [];
- for (var i = 0; i < outstruct.numpages; i++) {
- var svgstr = '';
- var maxx = getPixelsPerMillimeter() * 277;
- var maxy = getPixelsPerMillimeter() * 150;
- var minx = 0;
- var miny = 0;
- for (var _i = 0, _a = this.elements; _i < _a.length; _i++) {
- var element = _a[_i];
- if (element.page == (i + 1)) {
- var fontsize = (element.labelfontsize != null) ? element.labelfontsize : 11;
- svgstr += element.getScaledSVG(true);
- if (fitToPage) {
- var boundingbox = getRotatedRectangleSize(element.sizex * element.getscale(), element.sizey * element.getscale(), element.rotate);
- maxx = Math.max(maxx, element.posx + boundingbox.width / 2);
- maxy = Math.max(maxy, element.posy + boundingbox.height / 2);
- minx = Math.min(minx, element.posx - boundingbox.width / 2);
- miny = Math.min(miny, element.posy - boundingbox.height / 2);
- }
- var str = element.getAdres();
- svgstr += "").concat(htmlspecialchars(str), "");
- }
- }
- svgstr = "");
- outstruct.pages.push({ sizex: maxx - minx, sizey: maxy - miny, svg: svgstr });
- }
- return outstruct;
- };
- return SituationPlan;
-}());
-/**
- * Class SituationPlanElement
- *
- * Deze class refereert naar de volgende globale variabelen:
- * - structure
- * - SITPLANVIEW_DEFAULT_SCALE
- */
-var SituationPlanElement = /** @class */ (function () {
- /**
- * Constructor
- */
- function SituationPlanElement() {
- this.electroItemId = null; // Referentie naar het electro-element in de datastructuur indien van toepassing
- // -- Basis eigenschappen van het element zelf --
- this.boxref = null; // Referentie naar het DIV document in de browser waar het element wordt afgebeeld
- this.svg = ''; /* SVG content van het element indien van toepassing
- Indien electroItemId == null dan is dit de SVG content van het element zelf
- Indien electroItemId != null dan is dit de laatste geladen SVG content van het electro-element
- Altijd te verifiëren dat deze niet leeg is en evenueel een update forceren */
- // -- Basis eigenschappen van het label --
- // adres gegevens zijn private gedefinieerd omwille van consistentie (bvb adres kan leeg gelaten worden als het type auto is)
- this.boxlabelref = null; // Referentie naar het DIV document in de browser waar het label wordt afgebeeld
- this.adrestype = null;
- this.adres = null;
- this.adreslocation = 'rechts';
- // -- Positionering van het element zelf --
- this.page = 1; //pagina waarop het element zich bevindt
- this.posx = 0; //center positie-x in het schema
- this.posy = 0; //center positie-y in het schema
- this.sizex = 0; //breedte
- this.sizey = 0; //hoogte
- this.rotate = 0;
- this.scale = SITPLANVIEW_DEFAULT_SCALE;
- // -- Positionering van het label --
- this.labelposx = 0;
- this.labelposy = 0;
- this.labelfontsize = 11;
- // -- Een vlag om de situationplanview te laten weten dat de box content moet geupdated worden
- this.needsViewUpdate = false;
- // -- Een vlag voor verplaatsbaarheid
- this.movable = true;
- this.id = randomId("SP_");
- }
- SituationPlanElement.prototype.setscale = function (scale) {
- this.scale = scale;
- this.needsViewUpdate = true;
- };
- SituationPlanElement.prototype.getscale = function () {
- return this.scale;
- };
- /**
- * isEendraadschemaSymbool
- *
- * Controleer of het element een geldig electro-element is
- * Hiervoor is een geldige electroItemId nodig en moet het element in de datastructuur voorkomen.
- *
- * @returns boolean
- */
- SituationPlanElement.prototype.isEendraadschemaSymbool = function () {
- if (this.electroItemId != null) {
- return (structure.getElectroItemById(this.electroItemId) != null);
- }
- return false;
- };
- SituationPlanElement.prototype.isEDSSymbolAndRotates360degrees = function () {
- if (this.isEendraadschemaSymbool()) {
- var electroElement = structure.getElectroItemById(this.electroItemId);
- if (electroElement != null) {
- var type = electroElement.getType();
- return SituationPlanElement.ROTATES_360_DEGREES_TYPES.has(type);
- }
- return false;
- }
- return false;
- };
- /**
- * setAdres
- *
- * @param adrestype string : 'auto' of 'manueel'
- * @param adres string : Indien manueel, het adres. Indien auto wordt deze genegeerd en this.adres altijd op null gezet.
- * @param adreslocation string: 'rechts' of 'links' of 'boven' of 'onder'
- */
- SituationPlanElement.prototype.setAdres = function (adrestype, adres, adreslocation) {
- this.adrestype = adrestype;
- this.adreslocation = adreslocation;
- if (this.adrestype === 'manueel')
- this.adres = adres;
- else
- this.adres = null;
- };
- /**
- * setAdresLocation
- *
- * @param adreslocation string: 'rechts' of 'links' of 'boven' of 'onder'
- */
- SituationPlanElement.prototype.setAdresLocation = function (adreslocation) {
- this.adreslocation = adreslocation;
- };
- /**
- * getAdresType
- *
- * @returns string : 'auto' of 'manueel'
- */
- SituationPlanElement.prototype.getAdresType = function () {
- return this.adrestype;
- };
- /**
- * getAdres
- *
- * @returns string : adres
- */
- SituationPlanElement.prototype.getAdres = function () {
- var _a;
- if (!this.isEendraadschemaSymbool())
- return ''; // Geen adres voor niet-elektro-elementen
- var element = structure.getElectroItemById(this.electroItemId);
- if (element == null)
- return ''; // zou redundant moeten zijn want we controleerden al in isEendraadschemaSymbool
- if (this.adrestype === 'auto') {
- return element.getReadableAdres();
- }
- else {
- return (_a = this.adres) !== null && _a !== void 0 ? _a : '';
- }
- };
- /**
- * getAdresLocation
- *
- * @returns 'rechts'|'links'|'boven'|'onder'
- */
- SituationPlanElement.prototype.getAdresLocation = function () {
- return this.adreslocation;
- };
- /**
- * setElectroItemId
- *
- * @param electroItemId number : id van het electroitem in structure
- *
- * TODO: zou beter een private functie zijn en niet worden aangeroepen vanuit SituationPlan en SituationPlanView
- */
- SituationPlanElement.prototype.setElectroItemId = function (electroItemId) {
- this.electroItemId = electroItemId;
- };
- /**
- * getElectroItemId
- *
- * @returns number : id van het electroitem in structure
- */
- SituationPlanElement.prototype.getElectroItemId = function () {
- if (this.isEendraadschemaSymbool())
- return this.electroItemId;
- else
- return null;
- };
- /**
- * updateElectroItemSVG
- *
- * @param svg string : nieuwe gegenereerde SVG door het electro-element
- * @param width number : breedte van de SVG zonder schaling en rotatie, indien niet gegeven wordt de breedte gezocht met functie getSizeFromString
- * @param height number : hoogte van de SVG zonder schaling en rotatie
- */
- SituationPlanElement.prototype.updateElectroItemSVG = function (svg, width, height) {
- if (width === void 0) { width = undefined; }
- if (height === void 0) { height = undefined; }
- if (this.isEendraadschemaSymbool()) {
- if (this.svg !== svg) { // This works because when saving to a file, svg is set to '' so an update will be triggered here
- this.needsViewUpdate = true;
- this.svg = svg;
- if (width != null)
- this.sizex = width;
- if (height != null)
- this.sizey = height;
- if (width == null || height == null)
- this.getSizeFromString();
- }
- }
- };
- /**
- * getUnscaledSVGifNotElectroItem
- *
- * @returns string : SVG content van het element op voorwaarde dat het geen electro-element is
- */
- SituationPlanElement.prototype.getUnscaledSVGifNotElectroItem = function () {
- // cleanSVG(): Deze functie is nodig omdat gebleken is dat de print SVG commando's in jsPDF niet overweg kunnen met SVG's die niet dadelijk beginnen met '= 90) && (rotate < 270)) {
- if (_this.isEDSSymbolAndRotates360degrees())
- spiegel = true;
- if (_this.isEendraadschemaSymbool())
- rotate = rotate + 180;
- }
- return [rotate, spiegel];
- };
- if (this.isEendraadschemaSymbool()) {
- var electroItem = structure.getElectroItemById(this.electroItemId);
- if (electroItem != null)
- electroItem.updateSituationPlanElement(this);
- }
- var posinfo = '';
- var transform = '';
- if (positioned) { // Indien we de SVG willen positioneren en roteren, bvb voor gebruik in een print
- posinfo = "x=\"".concat(this.posx - this.sizex / 2 * this.scale, "\" y=\"").concat(this.posy - this.sizey / 2 * this.scale, "\"");
- var _a = berekenAfbeeldingsRotatieEnSpiegeling(), rotate = _a[0], spiegel = _a[1];
- transform = "transform=\"rotate(".concat(rotate, " ").concat(this.posx, " ").concat(this.posy, ")").concat((spiegel ? " scale(-1,1) translate(".concat(-this.posx * 2, " 0)") : ''), "\"");
- return "\n \n ");
- }
- else { // Indien we de SVG willen gebruiken in een innerHTML van een div element en dit element dan zelf positioneren en roteren
- return "");
- }
- };
- /**
- * getSizeFromString
- *
- * Haal de grootte van het SVG element uit de SVG string
- */
- SituationPlanElement.prototype.getSizeFromString = function () {
- // Create a DOMParser to parse the SVG string
- var parser = new DOMParser();
- var svgDoc = parser.parseFromString(this.svg, "image/svg+xml");
- // Access the SVG element
- var svgElement = svgDoc.querySelector('svg');
- if (svgElement) {
- // Extract the height and width attributes
- this.sizey = parseInt(svgElement.getAttribute('height'));
- this.sizex = parseInt(svgElement.getAttribute('width'));
- }
- else {
- console.error('Invalid SVG string');
- }
- };
- /**
- * Scalet het selecteerde element naar het papier als dat nodig is
- *
- * @param {number} maxx - Maximale breedte van het canvas
- * @param {number} maxy - Maximale hoogte van het canvas
- */
- SituationPlanElement.prototype.scaleSelectedBoxToPaperIfNeeded = function (maxx, maxy, defaultscale) {
- if (defaultscale === void 0) { defaultscale = 1; }
- //get the width and hight of the sitplanelement
- var width = this.sizex;
- var height = this.sizey;
- //calculate the maximum allowed scaling for a canvas of 550x300
- var maxScale = Math.min(defaultscale, maxx / width, maxy / height);
- //scale the element to the maximum allowed scaling
- this.scale = Math.floor(maxScale * 10000) / 10000;
- };
- /**
- * Leest de inhoud van een situatieplanelement uit een image bestand
- * Enkel image bestanden ondersteund door de browser worden ondersteund
- *
- * @param event Event van het file input element gedefinieerd in index.html
- * @param callback Callback functie die wordt uitgevoerd na het inladen van de file
- */
- SituationPlanElement.prototype.importFromFile = function (event, callback) {
- var _this = this;
- var input = event.target;
- var file = input.files[0];
- if (file) {
- var reader = new FileReader();
- var fileName = file.name.toLowerCase();
- var mimeType = file.type;
- reader.onload = function (e) {
- var fileContent = e.target.result;
- var image = new Image();
- image.src = fileContent;
- image.onload = function () {
- _this.sizex = image.width;
- _this.sizey = image.height;
- _this.svg = "");
- callback();
- };
- image.onerror = function () {
- alert('Het formaat van deze file wordt niet ondersteund.');
- };
- };
- reader.readAsDataURL(file); // Read the file as a data URL
- }
- else {
- alert('Geen bestand geselecteerd');
- }
- };
- /**
- * setVars
- *
- * @param object Object : object met de variabelen die moeten worden ingesteld
- */
- SituationPlanElement.prototype.setVars = function (object) {
- Object.assign(this, object);
- };
- /**
- * toJsonObject
- *
- * @returns Object : object met de variabelen van het element dat dadelijk kan worden omgezet naar een JSON string
- */
- SituationPlanElement.prototype.toJsonObject = function () {
- return {
- page: this.page,
- posx: this.posx,
- posy: this.posy,
- sizex: this.sizex,
- sizey: this.sizey,
- labelposx: this.labelposx,
- labelposy: this.labelposy,
- labelfontsize: this.labelfontsize,
- adrestype: this.adrestype,
- adres: this.adres,
- adreslocation: this.adreslocation,
- rotate: this.rotate,
- scale: this.scale,
- movable: this.movable,
- svg: (this.isEendraadschemaSymbool() ? '' : this.svg),
- electroItemId: this.electroItemId
- };
- };
- /**
- * fromJsonObject
- *
- * @param json any : object met de variabelen van het element dat dadelijk kan worden omgezet naar een JSON string
- */
- SituationPlanElement.prototype.fromJsonObject = function (json) {
- this.page = json.page;
- this.posx = json.posx;
- this.posy = json.posy;
- this.sizex = json.sizex;
- this.sizey = json.sizey;
- this.labelposx = (json.labelposx != null) ? json.labelposx : this.posx + 20;
- this.labelposy = (json.labelposy != null) ? json.labelposy : this.posy;
- this.labelfontsize = (json.labelfontsize != null ? json.labelfontsize : 11);
- this.adrestype = (json.adrestype != null) ? json.adrestype : "manueel";
- this.adres = json.adres;
- this.adreslocation = (json.adreslocation != null) ? json.adreslocation : "rechts";
- this.rotate = (json.rotate != null) ? json.rotate : 0;
- this.scale = (json.scale != null) ? json.scale : SITPLANVIEW_DEFAULT_SCALE;
- this.svg = json.svg;
- this.electroItemId = json.electroItemId;
- this.needsViewUpdate = true; // TODO: make this more efficient as it will always trigger redraws, even when not needed
- this.movable = (json.movable != null) ? json.movable : true;
- };
- /**
- * rotates360degrees
- *
- * Per default wordt er vanuit gegaan dat bij rotatie over rotatiehoeken alpha tussen 90 en 270 graden deze rotatie kan vervangen worden.
- * door een rotatie over alpha-180 graden. Om een voorbeeld te geven, een batterij roteren over 180 graden heeft geen zin, dat blijft het originele symbool.
- *
- * Voor bepaalde elementen is dit niet het geval. Een contactdoos gedraaid over 180 graden moet de opening naar rechts hebben in plaats van naar links.
- * Deze functie geeft true terug indien een volledige rotatie nodig is.
- *
- * @returns boolean
- *
- * TODO: functie verplaatsen naar Electro_Item
- */
- SituationPlanElement.ROTATES_360_DEGREES_TYPES = new Set(['Contactdoos', 'Lichtpunt', 'Drukknop', 'Media', 'Schakelaars', 'Lichtcircuit', 'Bord', 'Bel']);
- return SituationPlanElement;
-}());
-/**
- * Deze class behandelt het tekenen van het situatieplan.
- *
- * Er wordt regelmatig de terminologie Box gebruikt in de code. Een box is een sleepbaar element en kan zowel
- * een eendraadschema symbool zijn als een ingelezen extern bestand.
- */
-var SituationPlanView = /** @class */ (function () {
- function SituationPlanView(canvas, paper, sitplan) {
- var _this = this;
- this.zoomfactor = 1;
- /** Referentie naar meerdere DIV's waar het stuatieplan wordt weergegeven
- * - paper: hieronder hangen de reële elementen en dit stelt het printable gedeelte van het schema voor
- * - canvas: deze bevat paper en ook het niet printable gedeelte
- */
- this.canvas = null;
- this.paper = null;
- this.sideBar = new SituationPlanView_SideBar(document.getElementById('sidebar'));
- this.contextMenu = null;
- this.draggedBox = null; /** Box die op dit moment versleept wordt of null */
- this.selectedBox = null; /** Geselelecteerde box of null */
- /**
- * Toont het contextmenu op de locatie van de muis.
- *
- * @param event - De muisgebeurtenis die het menu opent (right click).
- */
- this.showContextMenu = function (event) {
- event.preventDefault();
- _this.contextMenu.clearMenu();
- _this.contextMenu.addMenuItem('Draai rechts', function () { _this.rotateSelectedBox(90, true); }, 'Ctrl →');
- _this.contextMenu.addMenuItem('Draai links', function () { _this.rotateSelectedBox(-90, true); }, 'Ctrl ←');
- _this.contextMenu.addLine();
- _this.contextMenu.addMenuItem('Bewerk', _this.editSelectedBox.bind(_this), 'Enter');
- _this.contextMenu.addLine();
- if (_this.selectedBox != null) {
- var sitPlanElement = _this.selectedBox.sitPlanElementRef;
- if (sitPlanElement != null) {
- switch (sitPlanElement.movable) {
- case true:
- _this.contextMenu.addMenuItem('Vergrendel', _this.toggleSelectedBoxMovable.bind(_this), 'Ctrl L');
- _this.contextMenu.addLine();
- break;
- case false:
- _this.contextMenu.addMenuItem('Ontgrendel', _this.toggleSelectedBoxMovable.bind(_this), 'Ctrl L');
- _this.contextMenu.addLine();
- break;
- }
- }
- }
- _this.contextMenu.addMenuItem('Verwijder', _this.deleteSelectedBox.bind(_this), 'Del');
- //this.contextMenu.addMenuItem('Item 3', () => alert('Item 3 clicked'));
- _this.contextMenu.show(event);
- };
- /**
- * Start een sleepactie voor een box in het situatieplan.
- *
- * @param event - De gebeurtenis die de sleepactie activeert (muisklik of touchstart).
- */
- this.startDrag = function (event) {
- //Indien de middelste knop werd gebruikt doen we niets
- if (event.button == 1)
- return;
- //Verbergen van de contextmenu, en enkele controles
- _this.contextMenu.hide();
- if (event == null)
- return;
- var box = null;
- //Juiste box identificeren. Hou er rekening mee dat ook op een boxlabel kan geklikt zijn
- if (event.target.classList.contains('box')) {
- box = event.target;
- }
- else if (event.target.classList.contains('boxlabel')) {
- var sitPlanElement = event.target.sitPlanElementRef;
- if (sitPlanElement == null)
- return;
- box = sitPlanElement.boxref;
- }
- ;
- if (box == null)
- return;
- //Nu gaan we de box selecteren. Dit moet zowel voor de linker als de rechter muisknop
- event.stopPropagation(); // Voorkomt body klikgebeurtenis
- _this.clearSelection(); // Wist bestaande selectie
- _this.selectBox(box); // Selecteert de box die we willen slepen
- //Indien de rechter muisknop werd gebruikt gaan we niet verder
- if (event.button == 2)
- return;
- //OK, het is een touch event of de linkse knop dus we gaan verder met slepen maar controlleren eerst of we dat wel mogen
- if (box.getAttribute('movable') == "false")
- return;
- _this.draggedBox = box; // Houdt de box die we aan het slepen zijn
- switch (event.type) {
- case 'mousedown':
- _this.mousedrag.startDrag(event.clientX, event.clientY, _this.draggedBox.offsetLeft, _this.draggedBox.offsetTop);
- document.addEventListener('mousemove', _this.processDrag);
- document.addEventListener('mouseup', _this.stopDrag);
- break;
- case 'touchstart':
- var touch = event.touches[0];
- _this.mousedrag.startDrag(touch.clientX, touch.clientY, _this.draggedBox.offsetLeft, _this.draggedBox.offsetTop);
- document.addEventListener('touchmove', _this.processDrag, { passive: false });
- document.addEventListener('touchend', _this.stopDrag);
- break;
- default:
- console.error('Ongeldige event voor startDrag functie');
- }
- };
- /**
- * Stopt de sleepactie van een box in het situatieplan en stopt de eventlisteners.
- *
- * @param event - De gebeurtenis die de sleepactie stopt (muisklik release of touchend).
- */
- this.stopDrag = function (event) {
- function showArrowHelp() {
- var helperTip = new HelperTip(appDocStorage);
- helperTip.show('sitplan.arrowdrag', "
Tip: Symbolen verplaatsen
\n
Voor fijnere controle tijdens het verschuiven van symbolen kan u ook de pijltjes op het toetsenbord gebruiken.
", true);
- }
- event.stopPropagation();
- switch (event.type) {
- case 'mouseup':
- document.removeEventListener('mousemove', _this.processDrag);
- document.removeEventListener('mouseup', _this.stopDrag);
- if (_this.mousedrag.hassMoved) {
- showArrowHelp();
- undostruct.store();
- }
- break;
- case 'touchend':
- document.removeEventListener('touchmove', _this.processDrag);
- document.removeEventListener('touchend', _this.stopDrag);
- if (_this.mousedrag.hassMoved) {
- showArrowHelp();
- undostruct.store();
- }
- break;
- default:
- console.error('Ongeldige event voor stopDrag functie');
- }
- _this.draggedBox = null;
- };
- /**
- * Verwerkt een muisklik of touch event tijdens het slepen van een box in het situatieplan.
- *
- * @param event - De gebeurtenis die verwerkt wordt (muisklik of touchmove).
- */
- this.processDrag = function (event) {
- if (_this.draggedBox) {
- event.preventDefault();
- var newLeftTop = void 0;
- if (event.type === 'mousemove') {
- newLeftTop = _this.mousedrag.returnNewLeftTop(event.clientX, event.clientY);
- }
- else if (event.type === 'touchmove') {
- var touch = event.touches[0];
- newLeftTop = _this.mousedrag.returnNewLeftTop(touch.clientX, touch.clientY);
- }
- //get paperpadding from css
- var paperPadding = parseFloat(getComputedStyle(_this.paper).getPropertyValue('--paperPadding'));
- //return topleft of the scrolled this.outerdiv
- var minLeft = (_this.canvas.scrollLeft - paperPadding) / _this.zoomfactor;
- var minTop = (_this.canvas.scrollTop - paperPadding) / _this.zoomfactor;
- var maxRight = minLeft + (_this.canvas.offsetWidth) / _this.zoomfactor;
- var maxBottom = minTop + (_this.canvas.offsetHeight) / _this.zoomfactor;
- // Zorg ervoor dat de box niet buiten redelijke grenzen van het canvas valt links-boven
- // We doen deze controle niet rechts onder omdat het canvas daar gewoon kan groeien
- newLeftTop.left = Math.min(maxRight - _this.draggedBox.offsetWidth / 2, Math.max(minLeft - _this.draggedBox.offsetWidth / 2, newLeftTop.left));
- newLeftTop.top = Math.min(maxBottom - _this.draggedBox.offsetHeight / 2, Math.max(minTop - _this.draggedBox.offsetHeight / 2, newLeftTop.top));
- var sitPlanElement = _this.draggedBox.sitPlanElementRef;
- sitPlanElement.posx = newLeftTop.left + (_this.draggedBox.offsetWidth / 2);
- sitPlanElement.posy = newLeftTop.top + (_this.draggedBox.offsetHeight / 2);
- _this.updateSymbolAndLabelPosition(sitPlanElement);
- }
- };
- /**
- * Voegt een ElectroItem toe aan het situatieplan.
- *
- * @param id - Het ID van het ElectroItem dat moet worden toegevoegd.
- * @param adrestype - Het type adres van het ElectroItem.
- * @param adres - Het adres van het ElectroItem.
- * @param adreslocation - De locatie van het adres van het ElectroItem.
- * @param labelfontsize - De grootte van het lettertype van het label van het ElectroItem.
- * @param scale - De schaal van het ElectroItem.
- * @param rotate - De rotatie van het ElectroItem.
- */
- this.addElectroItem = function (id, adrestype, adres, adreslocation, labelfontsize, scale, rotate, posx, posy) {
- if (posx === void 0) { posx = null; }
- if (posy === void 0) { posy = null; }
- var paperPos = _this.canvasPosToPaperPos(50, 50);
- if (posx == null)
- posx = paperPos.x;
- if (posy == null)
- posy = paperPos.y;
- if (id != null) {
- var element = _this.sitplan.addElementFromElectroItem(id, _this.sitplan.activePage, posx, posy, adrestype, adres, adreslocation, labelfontsize, scale, rotate);
- if (element != null) {
- _this.syncToSitPlan();
- _this.clearSelection();
- _this.redraw();
- _this.selectBox(element.boxref); // We moeten dit na redraw doen anders bestaat de box mogelijk nog niet
- _this.bringToFront(); // Deze slaat ook automatisch undo informatie op dus we moeten geen undostruct.store() meer doen.
- }
- }
- else {
- alert('Geen geldig ID ingegeven!');
- }
- };
- /**
- * Toont een popup met de eigenschappen van het geselecteerde element en maakt het mogelijk om deze te bewerken.
- */
- this.editSelectedBox = function (cancelCallback) {
- _this.contextMenu.hide();
- _this.unattachArrowKeys();
- if (_this.selectedBox) {
- var sitPlanElement_1 = _this.selectedBox.sitPlanElementRef;
- if (!sitPlanElement_1)
- return;
- SituationPlanView_ElementPropertiesPopup(sitPlanElement_1, function (electroid, adrestype, adres, adreslocation, labelfontsize, scale, rotate) {
- if (electroid != null) {
- sitPlanElement_1.setElectroItemId(electroid);
- sitPlanElement_1.setAdres(adrestype, adres, adreslocation);
- }
- sitPlanElement_1.labelfontsize = labelfontsize;
- sitPlanElement_1.setscale(scale);
- sitPlanElement_1.rotate = rotate;
- _this.updateBoxContent(sitPlanElement_1); //content needs to be updated first to know the size of the box
- _this.updateSymbolAndLabelPosition(sitPlanElement_1);
- undostruct.store();
- }, cancelCallback);
- }
- _this.attachArrowKeys();
- };
- this.canvas = canvas;
- this.paper = paper;
- this.contextMenu = new ContextMenu();
- this.sitplan = sitplan;
- this.paper.style.transformOrigin = 'top left'; // Keep the origin point consistent when scaling
- this.mousedrag = new MouseDrag();
- this.event_manager = new EventManager();
- // Verwijder alle selecties wanneer we ergens anders klikken dan op een box
- this.event_manager.addEventListener(canvas, 'mousedown', function () { _this.contextMenu.hide(); _this.clearSelection(); });
- this.event_manager.addEventListener(canvas, 'touchstart', function () { _this.contextMenu.hide(); _this.clearSelection(); });
- // Control wieltje om te zoomen
- this.event_manager.addEventListener(canvas, 'wheel', function (event) {
- if (!event.ctrlKey && !event.metaKey)
- return;
- event.preventDefault();
- var zoom = -event.deltaY / 1000;
- if (Math.abs(zoom) >= 0.01) {
- var menuHeight = parseFloat(getComputedStyle(document.documentElement).getPropertyValue('--menu-height'));
- var ribbonHeight = parseFloat(getComputedStyle(document.documentElement).getPropertyValue('--ribbon-height'));
- var sideBarWidth = parseFloat(getComputedStyle(document.documentElement).getPropertyValue('--sideBarWidth'));
- var canvasx = event.clientX - sideBarWidth;
- var canvasy = event.clientY - menuHeight - ribbonHeight;
- _this.zoomIncrement(-event.deltaY / 2000, canvasx, canvasy);
- }
- }, { passive: false });
- // Voegt event handlers toe voor de pijltjestoesten
- this.attachArrowKeys();
- }
- /**
- * Converteert een coördinaat van het zichtbare deel van het canvas (scherm-coordinaten die starten links boven het canvas)
- * naar een coördinaat op het papier.
- *
- * De coördinatentransformatie steunt op het volgende
- * canvasx = paperx * zoomfactor - canvas.scrollLeft + paperPadding
- * canvasy = papery * zoomfactor - canvas.scrollTop + paperPadding
- *
- * @param {number} canvasx - De x-co ordinaat in het canvas.
- * @param {number} canvasy - De y-co ordinaat in het canvas.
- * @returns {Object} Object {x,y} met de x-coördinaat en y-coördinaat op het paper.
- */
- SituationPlanView.prototype.canvasPosToPaperPos = function (canvasx, canvasy) {
- var paperPadding = parseFloat(getComputedStyle(this.paper).getPropertyValue('--paperPadding'));
- return {
- x: (canvasx + this.canvas.scrollLeft - paperPadding) / this.zoomfactor,
- y: (canvasy + this.canvas.scrollTop - paperPadding) / this.zoomfactor
- };
- };
- /**
- * Converteert een punt oöordinaat op het papier naar een coördinaat op het canvas (omgekeerde van hierboven).
- *
- * @param {number} paperx - De x-coördinaat op het paper.
- * @param {number} papery - De y-coördinaat op het papier.
- * @returns {Object} Object {x,y} met de x-coördinaat en y-coördinaat op het canvas.
- */
- SituationPlanView.prototype.paperPosToCanvasPos = function (paperx, papery) {
- var paperPadding = parseFloat(getComputedStyle(this.paper).getPropertyValue('--paperPadding'));
- return {
- x: paperx * this.zoomfactor - this.canvas.scrollLeft + paperPadding,
- y: papery * this.zoomfactor - this.canvas.scrollTop + paperPadding
- };
- };
- /**
- * Indien een gewenste coördinaat op zowel het canvas als het papier gegeven zijn, hoe moeten we dan scrollen?
- *
- * @param {number} canvasx - De x-co ordinaat in het canvas.
- * @param {number} canvasy - De y-co ordinaat in het canvas.
- * @param {number} paperx - De x-coördinaat op het paper.
- * @param {number} papery - De y-coördinaat op het papier.
- * @returns {Object} Object {x,y} met de gewenste scrollLeft en scrollTop.
- */
- SituationPlanView.prototype.canvasAndPaperPosToScrollPos = function (canvasx, canvasy, paperx, papery) {
- var paperPadding = parseFloat(getComputedStyle(this.paper).getPropertyValue('--paperPadding'));
- return {
- x: paperx * this.zoomfactor - canvasx + paperPadding + 0.5,
- y: papery * this.zoomfactor - canvasy + paperPadding + 0.5
- };
- };
- /**
- * Maakt deze instance ongedaan en verwijderd alle door deze instance aangemaakte elementen uit de DOM.
- *
- * Verwijderd eerst de eventmanager en daarna alle elementen in het situatieplan.
- * Als een element een referentie naar een box heeft, wordt deze verwijderd uit de DOM.
- * Als een element een referentie naar een label heeft, wordt deze verwijderd uit de DOM.
- */
- SituationPlanView.prototype.dispose = function () {
- //Verwijder de event manager
- this.event_manager.dispose();
- //Ga over all situationplanelements and verwijder de bijhorende boxes uit the DOM
- for (var _i = 0, _a = this.sitplan.elements; _i < _a.length; _i++) {
- var element = _a[_i];
- if (element.boxref != null)
- element.boxref.remove();
- if (element.boxlabelref != null)
- element.boxlabelref.remove();
- }
- };
- /**
- * Zorgt ervoor dat alle elementen in het situatieplan een link hebben naar
- * het eendraadschema.
- *
- * Als een element in het situatieplan verwijst naar een symbool dat niet langer in
- * het eendraadschema zit, wordt het element verwijderd uit het situatieplan.
- *
- * Deze functie zorgt er niet voor dat ook elk element effectief een box heeft in de DOM.
- * Dit gebeurt pas in de redraw functie.
- */
- SituationPlanView.prototype.syncToSitPlan = function () {
- this.sitplan.syncToEendraadSchema();
- };
- /**
- * Stel de zoomfactor in zodat het paper-element volledig in het browser window wordt weergegeven
- *
- * @param paperPadding - De padding rond het papier in pixels. Dit wordt gebruikt
- * om te berekenen hoeveel ruimte beschikbaar is voor het papier. De standaard
- * is de CSS-waarde van --paperPadding.
- */
- SituationPlanView.prototype.zoomToFit = function (paperPadding) {
- if (paperPadding === void 0) { paperPadding = parseFloat(getComputedStyle(this.paper).getPropertyValue('--paperPadding')); }
- var sideBarWidth = parseFloat(getComputedStyle(document.documentElement).getPropertyValue('--sideBarWidth'));
- var scale = Math.min((this.canvas.offsetWidth - paperPadding * 2) / this.paper.offsetWidth, (this.canvas.offsetHeight - paperPadding * 2) / this.paper.offsetHeight);
- this.setzoom(scale);
- };
- /**
- * Geeft de huidige zoomfactor terug.
- * @returns De huidige zoomfactor.
- */
- SituationPlanView.prototype.getZoomFactor = function () {
- return this.zoomfactor;
- };
- /**
- * Stel de zoomfactor in.
- * @param factor - De zoomfactor, standaard 1.
- */
- SituationPlanView.prototype.setzoom = function (factor) {
- if (factor === void 0) { factor = 1; }
- this.zoomfactor = factor;
- this.paper.style.transform = "scale(".concat(factor, ")");
- };
- /**
- * Verhoogt of verlaagt de zoomfactor met een bepaalde waarde.
- *
- * @param increment - De waarde waarmee de zoomfactor moet worden aangepast.
- * Een positieve waarde vergroot de zoom, terwijl een negatieve waarde de zoom verkleint.
- * Standaard is deze waarde 0, wat betekent dat er geen aanpassing is.
- */
- SituationPlanView.prototype.zoomIncrement = function (increment, canvasx, canvasy) {
- if (increment === void 0) { increment = 0; }
- if (canvasx === void 0) { canvasx = this.canvas.offsetWidth / 2; }
- if (canvasy === void 0) { canvasy = this.canvas.offsetHeight / 2; }
- var menuHeight = parseFloat(getComputedStyle(document.documentElement).getPropertyValue('--menu-height'));
- var ribbonHeight = parseFloat(getComputedStyle(document.documentElement).getPropertyValue('--ribbon-height'));
- var sideBarWidth = parseFloat(getComputedStyle(document.documentElement).getPropertyValue('--sideBarWidth'));
- var paperPadding = parseFloat(getComputedStyle(document.documentElement).getPropertyValue('--paperPadding'));
- var mousePosOnPaper = this.canvasPosToPaperPos(canvasx, canvasy);
- this.setzoom(Math.min(SITPLANVIEW_ZOOMINTERVAL.MAX, Math.max(SITPLANVIEW_ZOOMINTERVAL.MIN, this.zoomfactor * (1 + increment))));
- var scrollPos = this.canvasAndPaperPosToScrollPos(canvasx, canvasy, mousePosOnPaper.x, mousePosOnPaper.y);
- this.canvas.scrollLeft = scrollPos.x;
- this.canvas.scrollTop = scrollPos.y;
- };
- /**
- * Verwisselt de movable property van het geselecteerde box-element.
- *
- * Als het geselecteerde box-element bestaat, wordt de movable property
- * verwisseld van waar naar onwaar of van onwaar naar waar.
- * Daarnaast wordt de movable-attribute van het box-element aangepast.
- */
- SituationPlanView.prototype.toggleSelectedBoxMovable = function () {
- if (this.selectedBox != null) {
- var sitPlanElement = this.selectedBox.sitPlanElementRef;
- if (sitPlanElement != null) {
- var boxlabel = sitPlanElement.boxlabelref;
- switch (sitPlanElement.movable) {
- case true:
- sitPlanElement.movable = false;
- this.selectedBox.setAttribute('movable', 'false');
- if (boxlabel != null)
- boxlabel.setAttribute('movable', 'false');
- break;
- case false:
- default:
- sitPlanElement.movable = true;
- this.selectedBox.setAttribute('movable', 'true');
- if (boxlabel != null)
- boxlabel.setAttribute('movable', 'true');
- break;
- }
- }
- }
- undostruct.store();
- };
- /**
- * Maakt een box en een label op de DOM of in een document-fragmentaan voor een element in het situatieplan.
- *
- * Een box is een sleepbaar element en kan zowel een symbool van het eendraadschema
- * zijn als een in te laden extern bestand.
- *
- * Event handlers voor het bewegen met muis of touch worden toegevoegd.
- *
- * Deze functie checkt om efficientie-redenen niet dat het situatieplanelement geldig is
- * en verwijst naar een bestaand element in het eendraadschema. Deze check dient op
- * voorhand te gebeuren, bijvoorbeeld door gebruik te maken van de functie syncToSitPlan.
- *
- * @param element - Het element in het situatieplan dat een box op de DOM nodig heeft.
- */
- SituationPlanView.prototype.makeBox = function (element, fragment) {
- if (fragment === void 0) { fragment = null; }
- // Box aanmaken op de DOM voor het symbool of in te laden externe figuur
- // extra property sitPlanElementRef toegevoegd aan DOM zodat we later ons situatieplan element kunnen terugvinden
- var box = document.createElement('div');
- Object.assign(box, { id: element.id, className: "box", sitPlanElementRef: element });
- box.setAttribute('movable', (element.movable ? 'true' : 'false'));
- element.boxref = box;
- // Boxlabel aanmaken op de DOM voor de tekst bij het symbool
- var boxlabel = document.createElement('div');
- Object.assign(boxlabel, { id: element.id + '_label', className: "boxlabel", sitPlanElementRef: element });
- boxlabel.setAttribute('movable', (element.movable ? 'true' : 'false'));
- boxlabel.innerHTML = htmlspecialchars(element.getAdres()); // is deze nodig? Wellicht reeds onderdeel van updateContent
- element.boxlabelref = boxlabel;
- // Content updaten en toevoegen aan de DOM
- this.updateBoxContent(element); //content moet eerst updated worden om te weten hoe groot de box is
- if (fragment)
- fragment.append(box, boxlabel);
- else
- this.paper.append(box, boxlabel);
- //this.updateSymbolAndLabelPosition(element); //pas als alles op de DOM zit kunnen we berekenen waar het label hoort
- // Event handlers voor het bewegen met muis of touch
- box.addEventListener('mousedown', this.startDrag);
- box.addEventListener('touchstart', this.startDrag);
- boxlabel.addEventListener('mousedown', this.startDrag);
- boxlabel.addEventListener('touchstart', this.startDrag);
- box.addEventListener('contextmenu', this.showContextMenu);
- boxlabel.addEventListener('contextmenu', this.showContextMenu);
- };
- /**
- * Werk de content van het box-element en label-element van een situatieplanelement bij in de DOM.
- *
- * Deze functie controleert eerst of het box-element bestaat, zo-niet doet deze functie niets.
- * Daarna wordt de SVG van het symbool van het element gegenereerd. Indien dit verschilt van wat reeds op de DOM zit wordt de innerHTML van het het box-element gewijzigd.
- * Daarnaast wordt de tekst van het label-element bijgewerkt en de fontsize ingesteld.
- *
- * TODO: de functie getScaledSVG wordt altijd uitgevoerd en is nodig om te weten of de DOM moet aangepast worden maar dit is minder efficient.
- * er zijn mogelijk betere manieren om de parameter sitPlanElement.needsViewUpdate te bepalen dan de SVG effectief genereren en te vergelijken met de bestaande SVG op de DOM,
- * bijvoorbeeld door een trigger op manipulatie in het ééndraadschema zelf.
- *
- * @param sitPlanElement - Het situatieplanelement dat aangepast moet worden.
- */
- SituationPlanView.prototype.updateBoxContent = function (sitPlanElement) {
- if (!sitPlanElement)
- return;
- var box = sitPlanElement.boxref;
- var boxlabel = sitPlanElement.boxlabelref;
- if (box == null)
- return;
- var svg = sitPlanElement.getScaledSVG(); // Deze call past ook viewUpdateNeeded aan en moet dus eerst gebeuren
- if (sitPlanElement.needsViewUpdate) {
- sitPlanElement.needsViewUpdate = false;
- if (svg != null)
- box.innerHTML = svg;
- else
- box.innerHTML = '';
- }
- ;
- if (boxlabel != null) {
- var adres = sitPlanElement.getAdres();
- if (sitPlanElement.labelfontsize != null)
- boxlabel.style.fontSize = String(sitPlanElement.labelfontsize) + 'px';
- var newadres = (adres != null ? htmlspecialchars(adres) : '');
- if (newadres != boxlabel.innerHTML)
- boxlabel.innerHTML = newadres;
- }
- };
- /**
- * Berekent de positie van het label van een situationplanelement in functie vna de grootte van het situationplanelement.
- * het situationplanelement moet daarvoor reeds een box hebben die aan de DOM werd toegevoegd om de grootte van deze box te kunnen bepalen.
- *
- * Wijzigt eveneens de grootte, en positie van het DIV-element dat het label van een situationplanelement bevat in de DOM.
- * Controleert ook of het label op een zichtbare pagina staat en maakt het onzichtbaar indien nodig.
- *
- * @param sitPlanElement - Het situatieplanelement waarvoor de positie van het label moet worden berekend.
- */
- SituationPlanView.prototype.updateLabelPosition = function (sitPlanElement) {
- if (!sitPlanElement)
- return;
- var boxlabel = sitPlanElement.boxlabelref;
- if (!boxlabel)
- return;
- var scale = sitPlanElement.getscale();
- var forbiddenLabelZone = getXYRectangleSize(sitPlanElement.sizex * scale + SITPLANVIEW_SELECT_PADDING, sitPlanElement.sizey * scale + SITPLANVIEW_SELECT_PADDING, sitPlanElement.rotate);
- // Berekken de x/left positie van het label
- var adreslocation = sitPlanElement.getAdresLocation();
- switch (adreslocation) {
- case 'links':
- sitPlanElement.labelposx = sitPlanElement.posx - forbiddenLabelZone.width / 2 - boxlabel.offsetWidth / 2;
- break;
- case 'rechts':
- sitPlanElement.labelposx = sitPlanElement.posx + forbiddenLabelZone.width / 2 + boxlabel.offsetWidth / 2;
- break;
- default: sitPlanElement.labelposx = sitPlanElement.posx;
- }
- var left = "".concat(sitPlanElement.labelposx - boxlabel.offsetWidth / 2, "px");
- if (boxlabel.style.left != left)
- boxlabel.style.left = left; // Vermijd aanpassingen DOM indien niet nodig
- // Bereken de y/top positie van het label
- // Deze bevat wat meer complexe trickery om alles min of meer overeen te doen komen tussen print en scherm
- var top;
- switch (adreslocation) {
- case 'boven': {
- top = "".concat(sitPlanElement.posy - forbiddenLabelZone.height / 2 - boxlabel.offsetHeight * 0.8, "px");
- sitPlanElement.labelposy = sitPlanElement.posy - forbiddenLabelZone.height / 2 - boxlabel.offsetHeight * 0.5 / 2;
- break;
- }
- case 'onder': {
- top = "".concat(sitPlanElement.posy + forbiddenLabelZone.height / 2 - boxlabel.offsetHeight * 0.2, "px");
- sitPlanElement.labelposy = sitPlanElement.posy + forbiddenLabelZone.height / 2 + boxlabel.offsetHeight * 0.7 / 2;
- break;
- }
- default:
- top = "".concat(sitPlanElement.posy - boxlabel.offsetHeight / 2, "px");
- sitPlanElement.labelposy = sitPlanElement.posy + 1;
- }
- if (boxlabel.style.top != top)
- boxlabel.style.top = top; // Vermijd aanpassingen DOM indien niet nodig
- if (this.sitplan.activePage == sitPlanElement.page) {
- if (boxlabel.classList.contains('hidden'))
- boxlabel.classList.remove('hidden'); // Vermijd aanpassingen DOM indien niet nodig
- }
- else {
- if (!boxlabel.classList.contains('hidden'))
- boxlabel.classList.add('hidden'); // Vermijd aanpassingen DOM indien niet nodig
- }
- };
- /**
- * Wijzigt de grootte, positie en rotatietransformatie van het DIV-element dat een situationplanelement bevat in de DOM.
- * Controleert ook of het symbool op een zichtbare pagina staat en maakt het onzichtbaar indien nodig.
- *
- * @param sitPlanElement Het situationplanelement dat aangepast moet worden.
- */
- SituationPlanView.prototype.updateSymbolPosition = function (sitPlanElement) {
- function getRotationTransform(sitPlanElement) {
- if (!sitPlanElement)
- return '';
- var rotation = sitPlanElement.rotate;
- while (rotation < 0)
- rotation += 360;
- rotation = rotation % 360;
- var spiegel = false;
- if ((rotation >= 90) && (rotation < 270)) {
- if (sitPlanElement.isEDSSymbolAndRotates360degrees())
- spiegel = true;
- if (sitPlanElement.isEendraadschemaSymbool())
- rotation -= 180;
- }
- return "rotate(".concat(rotation, "deg)") + (spiegel ? ' scaleX(-1)' : '');
- }
- if (!sitPlanElement)
- return;
- var div = sitPlanElement.boxref;
- if (!div)
- return;
- var scale = sitPlanElement.getscale();
- var contentwidth = sitPlanElement.sizex * scale;
- var contentheight = sitPlanElement.sizey * scale;
- var left = ((sitPlanElement.posx - contentwidth / 2 - SITPLANVIEW_SELECT_PADDING)).toString() + "px";
- if (div.style.left != left)
- div.style.left = left; // Vermijd aanpassingen DOM indien niet nodig
- var top = ((sitPlanElement.posy - contentheight / 2 - SITPLANVIEW_SELECT_PADDING)).toString() + "px";
- if (div.style.top != top)
- div.style.top = top; // Vermijd aanpassingen DOM indien niet nodig
- var width = ((contentwidth + SITPLANVIEW_SELECT_PADDING * 2)).toString() + "px";
- if (div.style.width != width)
- div.style.width = width; // Vermijd aanpassingen DOM indien niet nodig
- var height = ((contentheight + SITPLANVIEW_SELECT_PADDING * 2)).toString() + "px";
- if (div.style.height != height)
- div.style.height = height; // Vermijd aanpassingen DOM indien niet nodig
- var transform = getRotationTransform(sitPlanElement);
- if (div.style.transform != transform)
- div.style.transform = transform; // Vermijd aanpassingen DOM indien niet nodig
- if (this.sitplan.activePage == sitPlanElement.page) {
- if (div.classList.contains('hidden'))
- div.classList.remove('hidden'); // Vermijd aanpassingen DOM indien niet nodig
- }
- else {
- if (!div.classList.contains('hidden'))
- div.classList.add('hidden'); // Vermijd aanpassingen DOM indien niet nodig
- }
- };
- /**
- * Werkt de positie van het symbool bij op de DOM indien nodig.
- * Berekent de positie van het label en werkt deze bij op de DOM indien nodig
- * *
- * @param sitPlanElement - Het situationplanelement
- */
- SituationPlanView.prototype.updateSymbolAndLabelPosition = function (sitPlanElement) {
- if (!sitPlanElement)
- return;
- this.updateSymbolPosition(sitPlanElement); // Eerst content aanpassen anders kennen we de grootte van het symbool niet
- this.updateLabelPosition(sitPlanElement);
- };
- /**
- * Werkt de situatieplanweergave bij door elementen te synchroniseren met de onderliggende datastructuur.
- *
- * Deze functie zorgt er eerst voor dat alle elementen in het situatieplan een overeenkomstige box in de DOM hebben.
- * Het creëert ontbrekende boxes en voegt deze toe aan het document. Vervolgens werkt het de positie en
- * het label van elk symbool bij volgens de huidige staat. Daarna past het de weergave aan om de actieve pagina
- * weer te geven en werkt het de UI-ribbon bij.
- *
- * Deze methode meet en logt de tijd die nodig is om de redraw-operatie te voltooien.
- * Het gebruik van document fragments maakt de redraw aanzienlijk sneller in google chrome.
- * In Firefox is deze ook snel zonder document fragments.
- */
- SituationPlanView.prototype.redraw = function () {
- var start = performance.now();
- this.syncToSitPlan();
- var fragment = document.createDocumentFragment();
- var appendNeeded = false;
- for (var _i = 0, _a = this.sitplan.elements; _i < _a.length; _i++) {
- var element = _a[_i];
- if (!element.boxref) {
- this.makeBox(element, fragment);
- appendNeeded = true;
- }
- }
- if (appendNeeded)
- this.paper.append(fragment); // We moeten de boxes toevoegen aan de DOM alvorens de label positie te berekenen aangezien we de size van de labels moeten kennen
- this.showPage(this.sitplan.activePage);
- for (var _b = 0, _c = this.sitplan.elements; _b < _c.length; _b++) {
- var element = _c[_b];
- if (element.page == this.sitplan.activePage) {
- this.updateBoxContent(element);
- this.updateSymbolAndLabelPosition(element);
- }
- }
- this.updateRibbon();
- this.sideBar.render();
- var end = performance.now();
- console.log("Redraw took ".concat(end - start, "ms"));
- };
- /**
- * Geeft de ordinal van het geselecteerde element terug in de array van het situatieplan.
- *
- * @returns {string | null} De id van de geselecteerde box, of null.
- */
- SituationPlanView.prototype.getSelectedBoxOrdinal = function () {
- var _this = this;
- if (this.selectedBox == null)
- return null;
- return this.sitplan.elements.findIndex(function (e) { return e.boxref == _this.selectedBox; });
- };
- /**
- * Maakt de gegeven box de geselecteerde box.
- *
- * @param box - Het element dat geselecteerd moet worden.
- */
- SituationPlanView.prototype.selectBox = function (box) {
- if (!box)
- return;
- box.classList.add('selected');
- this.selectedBox = box;
- };
- /**
- * Verwijdert de selectie van alle boxes.
- */
- SituationPlanView.prototype.clearSelection = function () {
- var boxes = document.querySelectorAll('.box');
- boxes.forEach(function (b) { return b.classList.remove('selected'); });
- this.selectedBox = null;
- };
- /**
- * Verwijdert de geselecteerde box en verwijdert deze ook uit het situatieplan.
- * Verwijdert ook het bijhorende label.
- */
- SituationPlanView.prototype.deleteSelectedBox = function () {
- if (this.selectedBox == null)
- return;
- var id = this.selectedBox.id;
- var sitPlanElement = this.selectedBox.sitPlanElementRef;
- if (sitPlanElement == null)
- return;
- this.selectedBox.remove();
- if (sitPlanElement.boxlabelref != null)
- sitPlanElement.boxlabelref.remove();
- this.sitplan.removeElement(sitPlanElement);
- this.selectedBox = null;
- };
- /**
- * Send the selected box to the back of the z-index stack and reorder the elements of the situation plan accordingly
- * so that after saving or during printing the elements are drawn in the same order.
- *
- * @returns void
- */
- SituationPlanView.prototype.sendToBack = function () {
- if (this.selectedBox == null)
- return;
- for (var _i = 0, _a = this.sitplan.elements; _i < _a.length; _i++) {
- var element = _a[_i];
- if (element.boxref != null) {
- var newzindex = void 0;
- if (element.boxref != this.selectedBox) {
- newzindex = (parseInt(element.boxref.style.zIndex) || 0) + 1;
- }
- else {
- newzindex = 0;
- }
- element.boxref.style.zIndex = newzindex.toString();
- if (element.boxlabelref != null) {
- element.boxlabelref.style.zIndex = newzindex.toString();
- }
- }
- }
- this.sitplan.orderByZIndex();
- undostruct.store();
- };
- /**
- * Send the selected box to the front of the z-index stack and reorder the elements of the situation plan accordingly
- * so that after saving or during printing the elements are drawn in the same order.
- *
- * @returns void
- */
- SituationPlanView.prototype.bringToFront = function () {
- if (this.selectedBox == null)
- return;
- var newzindex = 0;
- for (var _i = 0, _a = this.sitplan.elements; _i < _a.length; _i++) {
- var element_1 = _a[_i];
- if ((element_1.boxref != null) && (element_1.boxref != this.selectedBox)) {
- newzindex = Math.max(newzindex, parseInt(element_1.boxref.style.zIndex) || 0);
- }
- }
- newzindex += 1;
- var element = this.selectedBox.sitPlanElementRef;
- if (element == null) {
- this.sitplan.syncToSitPlan();
- return;
- }
- this.selectedBox.style.zIndex = newzindex.toString();
- if (element.boxlabelref != null)
- element.boxlabelref.style.zIndex = newzindex.toString();
- this.sitplan.orderByZIndex();
- undostruct.store();
- };
- /**
- * Selecteer een pagina.
- *
- * @param page - Het nummer van de pagina die getoond moet worden.
- */
- SituationPlanView.prototype.selectPage = function (page) {
- this.sitplan.activePage = page;
- this.redraw();
- };
- /**
- * Toont enkel de elementen die op de pagina staan die als parameter wordt meegegeven.
- *
- * @param page - Het nummer van de pagina die getoond moet worden.
- */
- SituationPlanView.prototype.showPage = function (page) {
- this.clearSelection();
- for (var _i = 0, _a = this.sitplan.elements; _i < _a.length; _i++) {
- var element = _a[_i];
- if (element.page != page) {
- element.boxref.classList.add('hidden');
- element.boxlabelref.classList.add('hidden');
- }
- else {
- element.boxref.classList.remove('hidden');
- element.boxlabelref.classList.remove('hidden');
- }
- }
- this.updateRibbon();
- };
- /**
- * Roteert de geselecteerde box met het opgegeven aantal graden.
- * De box wordt geroteerd rond zijn middelpunt.
- * De rotatie wordt cumulatief uitgevoerd, d.w.z. de nieuwe rotatie wordt toegevoegd aan de vorige.
- * De rotatie is beperkt tot het bereik [0, 360) graden.
- * Deze functie slaat de status op, zodat het aanroepen van undo() deze actie ongedaan maakt.
- * @param degrees - Het aantal graden waarmee de box moet worden gedraaid.
- */
- SituationPlanView.prototype.rotateSelectedBox = function (degrees, rotateLabelToo) {
- if (rotateLabelToo === void 0) { rotateLabelToo = false; }
- /**
- * Roteert het label.
- *
- * Het label can de volgende locaties hebben, 'boven', 'rechts','onder', 'links'.
- *
- * @param cycle - Het aantal keren dat het label met 90 graden moet worden gedraaid.
- * 1 is een draaing van 90 graden naar rechts, -1 is een draaing van 90 graden naar links.
- */
- function rotateLabel(cycle) {
- var locations = ['boven', 'rechts', 'onder', 'links'];
- var pic = this.selectedBox.sitPlanElementRef;
- if (pic == null)
- return;
- var index = locations.indexOf(pic.getAdresLocation());
- pic.setAdresLocation(locations[(index + cycle + 4) % 4]);
- }
- ;
- if (this.selectedBox) {
- if (rotateLabelToo) {
- rotateLabel.bind(this)(Math.round(degrees / 90));
- }
- var id = this.selectedBox.id;
- var pic = this.selectedBox.sitPlanElementRef;
- pic.rotate = (pic.rotate + degrees) % 360;
- this.updateBoxContent(pic);
- this.updateSymbolAndLabelPosition(pic);
- undostruct.store();
- }
- };
- SituationPlanView.prototype.unattachArrowKeys = function () {
- this.event_manager.addEventListener(document, 'keydown', function () { });
- };
- /**
- * Voegt eventlisteners toe om pijltjestoetsen te hanteren.
- *
- * Wanneer een pijltjestoets wordt ingedrukt, en er is een box geselecteerd, dan wordt de positie van de box aangepast.
- * De positie van de box wordt aangepast door de posx of posy van het element in het situatieplan te veranderen.
- * Daarna wordt de functie updateSymbolAndLabelPosition aangeroepen om de positie van het symbool en het label van de box te updaten.
- */
- SituationPlanView.prototype.attachArrowKeys = function () {
- var _this = this;
- this.event_manager.addEventListener(document, 'keydown', function (event) {
- _this.contextMenu.hide();
- if (document.getElementById('outerdiv').style.display == 'none')
- return; // Check if we are really in the situationplan, if not, the default scrolling action will be executed by the browser
- if (document.getElementById('popupOverlay') != null)
- return; // We need the keys when editing symbol properties.
- if (event.ctrlKey) {
- switch (event.key) {
- case 'z':
- event.preventDefault();
- undostruct.undo();
- return;
- case 'y':
- event.preventDefault();
- undostruct.redo();
- return;
- case 'r':
- event.preventDefault();
- var helperTip = new HelperTip(appDocStorage);
- helperTip.show('sitplan.Ctrl_r_key', "
Ctrl-r genegeerd
\n
Om te vermijden dat u per ongeluk de pagina ververst en uw werk verliest is de refresh sneltoets uitgeschakeld in het situatieschema.
", true);
- return;
- default:
- //do nothing as we also have ctrl + arrow keys here below.
- }
- }
- if (_this.selectedBox) { // Check if we have a selected box, if not, the default scrolling action will be executed by the browser
- event.preventDefault();
- var sitPlanElement = _this.selectedBox.sitPlanElementRef;
- if (!sitPlanElement)
- return;
- if (event.ctrlKey) {
- switch (event.key) {
- case 'ArrowLeft':
- _this.rotateSelectedBox(-90, true);
- return;
- case 'ArrowRight':
- _this.rotateSelectedBox(90, true);
- return;
- case 'l':
- _this.toggleSelectedBoxMovable();
- undostruct.store();
- return;
- default:
- return;
- }
- }
- else {
- switch (event.key) {
- case 'ArrowLeft':
- sitPlanElement.posx -= 1;
- undostruct.store('arrowMove' + sitPlanElement.id);
- break;
- case 'ArrowRight':
- sitPlanElement.posx += 1;
- undostruct.store('arrowMove' + sitPlanElement.id);
- break;
- case 'ArrowUp':
- sitPlanElement.posy -= 1;
- undostruct.store('arrowMove' + sitPlanElement.id);
- break;
- case 'ArrowDown':
- sitPlanElement.posy += 1;
- undostruct.store('arrowMove' + sitPlanElement.id);
- break;
- case 'Enter':
- _this.editSelectedBox();
- return;
- case 'Delete':
- _this.deleteSelectedBox();
- undostruct.store();
- break;
- default:
- return;
- }
- }
- _this.updateSymbolAndLabelPosition(sitPlanElement);
- }
- });
- };
- /**
- * Hangt een klik event listener aan het gegeven element met als doel de huidig geselecteerde box te verwijderen.
- *
- * @param elem - Het html element waar de listener wordt aan gehangen.
- */
- SituationPlanView.prototype.attachDeleteButton = function (elem) {
- var _this = this;
- this.event_manager.addEventListener(elem, 'click', function () {
- _this.contextMenu.hide();
- _this.deleteSelectedBox();
- undostruct.store();
- var helperTip = new HelperTip(appDocStorage);
- helperTip.show('sitplan.deletekey', "
Tip: Symbolen verwijderen
\n
Bespaar tijd en gebruik de 'Delete' toets op het toetsenbord om symbolen te verwijderen.
", true);
- });
- };
- ;
- /**
- * Hangt een klik event listener aan het gegeven element met als doel de huidig geselecteerde box naar de achtergrond te sturen.
- *
- * @param elem - Het html element waar de listener wordt aan gehangen.
- */
- SituationPlanView.prototype.attachSendToBackButton = function (elem) {
- var _this = this;
- this.event_manager.addEventListener(elem, 'click', function () { _this.contextMenu.hide(); _this.sendToBack(); });
- };
- ;
- /**
- * Hangt een klik event listener aan het gegeven element met als doel de huidig geselecteerde box naar de voorgrond te brengen.
- *
- * @param elem - Het html element waar de listener wordt aan gehangen.
- */
- SituationPlanView.prototype.attachBringToFrontButton = function (elem) {
- var _this = this;
- this.event_manager.addEventListener(elem, 'click', function () { _this.contextMenu.hide(); _this.bringToFront(); });
- };
- ;
- /**
- * Hangt een klik event listener aan het gegeven element met als doel de zoomfactor aan te passen.
- *
- * @param elem - Het html element waar de listener wordt aan gehangen.
- * @param increment - De waarde waarmee de zoomfactor wordt aangepast. Een positieve waarde vergroot de zoom,
- * terwijl een negatieve waarde de zoom verkleint.
- */
- SituationPlanView.prototype.attachZoomButton = function (elem, increment) {
- var _this = this;
- this.event_manager.addEventListener(elem, 'click', function () { _this.contextMenu.hide(); _this.zoomIncrement(increment); });
- };
- ;
- /**
- * Hangt een klik event listener aan het gegeven element met als doel het situatieplan
- * aan te passen aan de beschikbare ruimte in het browservenster.
- *
- * @param elem - Het html element waar de listener wordt aan gehangen.
- */
- SituationPlanView.prototype.attachZoomToFitButton = function (elem) {
- var _this = this;
- this.event_manager.addEventListener(elem, 'click', function () { _this.contextMenu.hide(); _this.zoomToFit(); });
- };
- ;
- /**
- * Hangt een klik event listener aan het gegeven element om een bestand te kiezen en een verandering event listener aan het invoerelement
- * om een nieuw element vanuit een bestand aan het situatieplan toe te voegen.
- *
- * @param elem - Het HTML-element dat bij een klik een bestand moet openen.
- * @param fileinput - Het invoerelement voor bestanden dat het bestand uploadt wanneer het verandert.
- */
- SituationPlanView.prototype.attachAddElementFromFileButton = function (elem, fileinput) {
- var _this = this;
- this.event_manager.addEventListener(elem, 'click', function () { _this.contextMenu.hide(); fileinput.click(); });
- this.event_manager.addEventListener(fileinput, 'change', function (event) {
- var element = _this.sitplan.addElementFromFile(event, _this.sitplan.activePage, _this.paper.offsetWidth / 2, _this.paper.offsetHeight / 2, (function () {
- _this.syncToSitPlan();
- _this.clearSelection();
- element.needsViewUpdate = true; // for an external SVG this is needed, for an electroItem it is automatically set (see next function)
- var lastscale = element.scale;
- element.scaleSelectedBoxToPaperIfNeeded(_this.paper.offsetWidth * 0.995, _this.paper.offsetHeight * 0.995, _this.sitplan.defaults.scale);
- _this.redraw();
- _this.selectBox(element.boxref); // We moeten dit na redraw doen anders bestaat de box mogelijk nog niet
- _this.bringToFront(); // Deze slaat ook automatisch undo informatie op dus we moeten geen undostruct.store() meer doen.
- fileinput.value = ''; // Zorgt ervoor dat hetzelfde bestand twee keer kan worden gekozen en dit nog steeds een change triggert
- if (element.scale != lastscale) {
- //Use the built in help top to display a text that the image was scaled
- var helperTip = new HelperTip(appDocStorage);
- helperTip.show('sitplan.scaledImageToFit', '
Mededeling
' +
- '
Deze afbeelding werd automatisch verkleind om binnen de tekenzone te blijven.
' +
- '
Kies "Bewerk" in het menu om de schaalfactor verder aan te passen indien gewenst.
', true);
- }
- }).bind(_this));
- });
- };
- /**
- * Hangt een klik event listener aan het gegeven element om een nieuw Electro_Item aan het situatieplan toe te voegen.
- *
- * @param elem - Het HTML-element dat bij een klik een nieuw element toevoegt.
- */
- SituationPlanView.prototype.attachAddElectroItemButton = function (elem) {
- var _this = this;
- this.event_manager.addEventListener(elem, 'click', function () {
- _this.contextMenu.hide();
- _this.unattachArrowKeys();
- SituationPlanView_ElementPropertiesPopup(null, _this.addElectroItem.bind(_this));
- _this.attachArrowKeys();
- });
- };
- /**
- * Hangt een klik event listener aan het gegeven element om een bestaand element in het situatieplan te bewerken.
- *
- * @param elem - Het HTML-element dat bij een klik een bestaand element in het situatieplan bewerkt.
- */
- SituationPlanView.prototype.attachEditButton = function (elem) {
- var _this = this;
- this.event_manager.addEventListener(elem, 'click', function () { _this.editSelectedBox(); });
- };
- /**
- * Verwijdert alle elementen van de pagina met het gegeven nummer.
- *
- * @param page - Het nummer van de pagina die leeg gemaakt moet worden.
- */
- SituationPlanView.prototype.wipePage = function (page) {
- for (var i = 0; i < this.sitplan.elements.length; i++) {
- var element = this.sitplan.elements[i];
- if (element.page == this.sitplan.activePage) {
- var boxref = element.boxref;
- if (boxref != null) {
- this.selectBox(boxref);
- this.deleteSelectedBox();
- this.wipePage(page); // Need to call again to avoid loop going in error as length changes
- return;
- }
- }
- }
- };
- /**
- * Maakt de knoppen in de ribbon aan om onder andere pagina's te selecteren, elementen te laden of verwijderen en pagina's te zoomen.
- * Deze functie wordt aangeroepen telkens er iets in de toestand verandert die mogelijk kan leiden tot aanpassingen in de ribbon.
- *
- * Deze functie hangt ook onclick events aan interne functies in deze class.
- *
- * TODO: Er zijn efficientiewinsten mogelijk door niet telkens de hele ribbon te hertekenen.
- */
- SituationPlanView.prototype.updateRibbon = function () {
- var _this = this;
- var outputleft = "";
- var outputright = "";
- // -- Undo/redo buttons --
- outputleft += "\n
");
- // -- Visuals om items te laden of verwijderen --
- outputleft += "\n \n
\n \u2795\n Uit bestand\n
\n
\n \u2795\n Uit schema\n
\n
\n \uD83D\uDDD1\n Verwijder\n
";
- // -- Visuals om items te bewerken --
- outputleft += "\n \n
\n ⚙\n Bewerk\n
";
- // -- Visuals om naar achteren of voren te sturen --
- outputleft += "\n \n
\n \u2B07\u2B07\n Naar achter\n
\n
\n \u2B06\u2B06\n Naar voor\n
";
- // -- Visuals om pagina te selecteren --
- outputleft += "\n \n
\n
\n Pagina\n \n \n \n \n \n
\n
");
- // -- Visuals om pagina te zoomen --
- outputright += "\n \n
\n \uD83D\uDD0D\n In\n
\n
\n \uD83C\uDF0D\n Uit\n
\n
\n \uD83D\uDDA5\uFE0F\n \n Schermvullend\n
\n ";
- // -- Put everything in the ribbon --
- document.getElementById("ribbon").innerHTML = "
".concat(outputleft, "
").concat(outputright, "
");
- // -- Actions om pagina te selecteren --
- document.getElementById('id_sitplanpage').onchange = function (event) {
- _this.contextMenu.hide();
- var target = event.target;
- _this.selectPage(Number(target.value));
- undostruct.store();
- };
- document.getElementById('btn_sitplan_addpage').onclick = function () {
- _this.contextMenu.hide();
- _this.sitplan.numPages++;
- _this.selectPage(_this.sitplan.numPages);
- };
- document.getElementById('btn_sitplan_delpage').onclick = function () {
- _this.contextMenu.hide();
- var userConfirmation = confirm('Pagina ' + _this.sitplan.activePage + ' volledig verwijderen?');
- if (userConfirmation) {
- _this.wipePage(_this.sitplan.activePage);
- //set page of all sitplan.elements with page>page one lower
- _this.sitplan.elements.forEach(function (element) {
- if (element.page > _this.sitplan.activePage) {
- element.page--;
- }
- });
- if (_this.sitplan.numPages > 1)
- _this.sitplan.numPages--;
- _this.selectPage(Math.min(_this.sitplan.activePage, _this.sitplan.numPages));
- }
- };
- // -- Actions om elementen toe te voegen of verwijderen --
- this.attachAddElementFromFileButton(document.getElementById('button_Add'), document.getElementById('fileInput'));
- this.attachAddElectroItemButton(document.getElementById('button_Add_electroItem'));
- this.attachDeleteButton(document.getElementById('button_Delete'));
- // -- Actions om visuals te bewerken --
- this.attachEditButton(document.getElementById('button_edit'));
- // -- Actions om naar achteren te sturen --
- this.attachSendToBackButton(document.getElementById('sendBack'));
- this.attachBringToFrontButton(document.getElementById('bringFront'));
- // -- Actions om pagina te zoomen --
- this.attachZoomButton(document.getElementById('button_zoomin'), 0.1);
- this.attachZoomButton(document.getElementById('button_zoomout'), -0.1);
- this.attachZoomToFitButton(document.getElementById('button_zoomToFit'));
- };
- return SituationPlanView;
-}()); // *** END CLASS ***
-/**
- * Toon de pagina voor het situatieplan
- */
-function showSituationPlanPage() {
- toggleAppView('draw');
- if (!(structure.sitplan)) {
- structure.sitplan = new SituationPlan();
- }
- ;
- if (!(structure.sitplanview)) {
- //Verwijder eerst alle elementen op de DOM met id beginnend met "SP_" om eventuele wezen
- //uit eerdere oefeningen te voorkomen
- var elements = document.querySelectorAll('[id^="SP_"]');
- elements.forEach(function (e) { return e.remove(); });
- //Maak dan de SituationPlanView
- structure.sitplanview = new SituationPlanView(document.getElementById('canvas'), document.getElementById('paper'), structure.sitplan);
- structure.sitplanview.zoomToFit();
- }
- ;
- structure.sitplanview.redraw();
- // Initialize the HelperTip with the storage
- var helperTip = new HelperTip(appDocStorage);
- helperTip.show('sitplan.introductie', "
Situatieschema tekenen
\n
Op deze pagina kan u een situatieschema tekenen.
\n
Laad een plattegrond met de knop \"Uit bestand\" en voeg symbolen toe met de knop \"Uit schema\".
\n
Klik hier om in een nieuw venster de documentatie te bekijken.
\n
Het situatieschema werd recent toegevoegd aan het programma en zal nog verder ontwikkeld worden over de komende weken. Opmerkingen zijn welkom in het \"contact\"-formulier.
");
-}
-/**
- * Een serie functies om een formulier te tonen met edit-functionaliteiten voor symbolen in het situatieplan
- *
- * De volgorde van code en functies in deze file volgt de structuur van de popup.
- *
- * popupWindow
- * selectKringContainer
- * selectKring -- Keuze kringnaam, gedraagt zich als een filter.
- * selectElectroItemContainer
- * selectElectroItemBox -- Keuze electroItem.
- * textContainer
- * textInput -- Hier wordt het electroItemId ingevuld, ofwel door de gebruiker, ofwel door het programma
- * feedback -- Hier wordt weergegeven over welk soort item het gaat, bvb "Contactdoos"
- * selectContainer
- * selectAdresType -- Hier kan gekozen wat voor soort tekstlabel gebruikt wordt, automatisch of handmatig.
- * adresContainer
- * adresInput -- Het eigenlijke tekstlabel, kan automatisch ingevuld zijn ("automatisch") of handmatig door de gebruiker
- * selectAdresLocation -- Locatie van het label, boven, onder, links of rechts.
- * fontsizeContainer
- * fontsizeInput -- De fontsize van het label, kan automatisch ingevuld zijn ("automatisch") of handmatig door de gebruiker
- * Andere elementen
- * scale -- Schaalfactor van het symbool
- * rotation -- Eventuele rotatie van het symbool
- * buttons
- * OK, Cancel -- OK en Cancel knoppen
- *
- * @param {SituationPlanElement} sitplanElement Het element waarvoor de eigenschappen getoond moeten worden.
- * Indien null fungeert deze functie als Add in plaats van Edit.
- * @param {function} callbackOK Een referentie naar de functie die moet worden uitgevoerd als op OK wordt geklikt.
- */
-function SituationPlanView_ElementPropertiesPopup(sitplanElement, callbackOK, callbackCancel) {
- // Interne variabelen voor alle subfuncties
- if (callbackCancel === void 0) { callbackCancel = function () { }; }
- var adressen = new ElectroItemZoeker();
- var kringnamen = adressen.getUniqueKringnaam();
- /**
- * Vul het select element voor de kringen met alle gekende info rond kringnamen
- */
- function rePopulateKringSelect() {
- selectKring.innerHTML = ''; // Alles wissen
- for (var _i = 0, kringnamen_1 = kringnamen; _i < kringnamen_1.length; _i++) {
- var kringnaam = kringnamen_1[_i];
- var option = document.createElement('option');
- option.value = kringnaam;
- option.text = kringnaam;
- selectKring.appendChild(option);
- }
- }
- /**
- * Initialiseer het select element voor de kringen.
- *
- * @param electroItemId Optioneel argument indien men wenst te initialiseren met een reeds gekozen electroItemId,
- * zo-niet wordt sitplanElement gebruikt als initialisatie.
- *
- * Gebruikte variabelen: sitplanElement uit de hoofdfunctie is het element waarvoor we de eigenschappen wijzigen
- */
- function initKringSelect(electroItemId) {
- if (electroItemId === void 0) { electroItemId = null; }
- rePopulateKringSelect();
- if ((electroItemId == null) && (sitplanElement != null) && (sitplanElement.getElectroItemId() != null)) {
- electroItemId = sitplanElement.getElectroItemId();
- }
- if (electroItemId != null)
- selectKring.value = structure.findKringName(electroItemId);
- selectKring.onchange = KringSelectChanged;
- }
- /**
- * Functies uit te voeren wanneer de kring gewijzigd is.
- * - rePopulateElectroItemBox: laat toe alle electro-items te kiezen binnen een kring
- * - selectElectroItemBoxChanged: selecteert de eerste electro-item in de lijst in past de andere velden in het formulier aan
- */
- function KringSelectChanged() {
- rePopulateElectroItemBox();
- selectElectroItemBoxChanged();
- }
- /**
- * Vul het select element voor electro-items met alle electro-items binnen de gekozen kring
- */
- function rePopulateElectroItemBox() {
- var electroItems = adressen.getElectroItemsByKring(selectKring.value);
- selectElectroItemBox.innerHTML = ''; //Clear all options
- for (var i = 0; i < electroItems.length; ++i) {
- var electroItem = electroItems[i];
- var option = document.createElement('option');
- option.value = String(i);
- option.text = electroItem.adres + ' | ' + electroItem.type;
- selectElectroItemBox.appendChild(option);
- }
- }
- /**
- * Initialiseer het select element voor de electro-items.
- *
- * @param electroItemId Optioneel argument indien men wenst te initialiseren met een reeds gekozen electroItemId,
- * zo-niet wordt sitplanElement gebruikt als initialisatie.
- *
- * Gebruikte variabelen: sitplanElement uit de hoofdfunctie is het element waarvoor we de eigenschappen wijzigen
- */
- function initElectroItemBox(electroItemId) {
- if (electroItemId === void 0) { electroItemId = null; }
- rePopulateElectroItemBox();
- var electroItems = adressen.getElectroItemsByKring(selectKring.value);
- if ((electroItemId == null) && (sitplanElement != null) && (sitplanElement.getElectroItemId() != null)) {
- electroItemId = sitplanElement.getElectroItemId();
- }
- if (electroItemId != 0) {
- for (var i = 0; i < electroItems.length; ++i) {
- if (electroItems[i].id == electroItemId)
- selectElectroItemBox.value = String(i);
- }
- }
- selectElectroItemBox.onchange = selectElectroItemBoxChanged;
- }
- /**
- * Functies uit te voeren wanneer het electroItem gewijzigd is.
- * - rePopulateIdField: geef de id van het gekozen electro-item weer, alsook het type
- * - zet het adrestype op "auto" telkens het electroItem wordt gewijzigd
- * - Pas de rest van het formulier aan aan het feit dat het electroItem werd gewijzigd en het electroType op "auto" werd gezet
- */
- function selectElectroItemBoxChanged() {
- rePopulateIdField();
- selectAdresType.value = 'auto';
- selectAdresTypeChanged();
- }
- /**
- * Vul het Id-veld met de id van het gekozen electro-item in de bovenstaande twee velden (select-kring en select electro-item)
- */
- function rePopulateIdField() {
- var str = '';
- var electroItems = adressen.getElectroItemsByKring(selectKring.value);
- var idx = Number(selectElectroItemBox.value);
- if (!isNaN(idx)) {
- var item = electroItems[idx];
- if (item != null)
- str = electroItems[idx].id.toString();
- }
- textInput.value = str;
- }
- /**
- * Initialiseer het Id-veld, ofwel met de id van het sitplanElement, ofwel met de id van het gekozen electro-item
- *
- * Gebruikte variabelen: sitplanElement uit de hoofdfunctie.
- */
- function initIdField() {
- if (sitplanElement != null) {
- if (sitplanElement.getElectroItemId() != null)
- textInput.value = String(sitplanElement.getElectroItemId());
- }
- else
- rePopulateIdField();
- textInput.oninput = IdFieldChanged;
- }
- /**
- * Wanneer het Id-veld gewijzigd wordt, wordt de rest van het formulier bijgewerkt.
- * We verwijderen alle niet-cijfers uit de Id, en passen het volgende aan
- * - veld waarin het type van het electroItem wordt gegeven
- * - select element met te kiezen kringen, voorgeselecteerd op de kring waarin het element met id=id zich bevindt
- * - idem als hierboven voor de selectie van het electroItem
- */
- function IdFieldChanged() {
- if (textInput.value != null) {
- textInput.value = textInput.value.replace(/[^0-9]/g, '');
- var electroItemId = Number(textInput.value);
- updateElectroType();
- if (structure.getElectroItemById(electroItemId) != null) {
- initKringSelect(electroItemId);
- initElectroItemBox(electroItemId);
- selectAdresType.value = 'auto';
- selectAdresTypeChanged();
- }
- }
- ;
- }
- function handleExpandButton(electroItemId) {
- if (electroItemId === void 0) { electroItemId = null; }
- if (electroItemId == null)
- return;
- var element = structure.getElectroItemById(electroItemId);
- if (element == null)
- return;
- element.expand();
- adressen.reCalculate();
- kringnamen = adressen.getUniqueKringnaam();
- IdFieldChanged();
- structure.sitplanview.redraw();
- }
- /**
- * Toon het type verbruiker van het gekozen electro-item
- */
- function updateElectroType() {
- if (textInput.value == null || textInput.value.trim() == '') {
- feedback.innerHTML = 'Geen ID ingegeven';
- expandButton.style.display = 'none';
- }
- else {
- var electroItemId_1 = Number(textInput.value);
- var element = structure.getElectroItemById(electroItemId_1);
- if (element != null) {
- var type = element.getType();
- feedback.innerHTML = '' + element.getType() + '';
- if (element.isExpandable()) {
- expandButton.style.display = 'block';
- feedback.innerHTML += ' Klik op uitpakken indien u de onderliggende elementen in het situatieschema wil kunnen plaatsen.';
- expandButton.onclick = function () { handleExpandButton(electroItemId_1); };
- }
- else
- expandButton.style.display = 'none';
- }
- else {
- feedback.innerHTML = 'Element niet gevonden';
- expandButton.style.display = 'none';
- }
- }
- }
- /**
- * Wanneer het type adres gewijzigd wordt, wordt ook het adresveld zelf aangepast
- */
- function selectAdresTypeChanged() {
- var id = Number(textInput.value);
- updateElectroType();
- var element = structure.getElectroItemById(id);
- if (element == null) {
- adresInput.value = '';
- adresInput.disabled = true;
- return;
- }
- switch (selectAdresType.value) {
- case 'manueel':
- adresInput.value = (element != null ? adresInput.value : '');
- adresInput.disabled = false;
- break;
- case 'auto':
- default:
- adresInput.value = (element != null ? element.getReadableAdres() : '');
- adresInput.disabled = true;
- break;
- }
- }
- /**
- * Toont de popup met alle opties voor het bewerken van een element
- */
- function showPopup() {
- popupOverlay.style.visibility = 'visible';
- document.body.style.pointerEvents = 'none'; // Disable interactions with the background
- popupOverlay.style.pointerEvents = 'auto'; // Enable interactions with the popup
- }
- /**
- * Sluit de popup, meestal omdat op OK of Cancel werd geklikt of Enter op het toetsenbord.
- * Ter waarschuwing, er wordt geen verdere actie ondernomen zoals het plaatsen van het gekozen symbool
- * in het situatieplan. Dit dient de gebruiker van deze set functies zelf nog te doen.
- */
- function closePopup() {
- popupOverlay.style.visibility = 'hidden';
- document.body.style.pointerEvents = 'auto'; // Re-enable interactions with the background
- div.remove();
- }
- /**
- * We stellen het tikken van Enter in een veld gelijk aan het klikken op OK in het formulier
- *
- * @param event
- */
- var handleEnterKey = function (event) {
- if (event.key === 'Enter') {
- event.preventDefault();
- event.stopPropagation();
- okButton.click();
- }
- };
- //--- HOOFDFUNCTIE ------------------------------------------------------------------------------------
- /*
- * Eerst maken we de pop-up
- */
- var div = document.createElement('div');
- div.innerHTML = "\n
\n Gebruik de blauwe pijlen om de volgorde van elementen te wijzigen. \n Gebruik het Moeder-veld om een component elders in het schema te hangen. \n Kies \"clone\" om een dubbel te maken van een element.\n
");
- };
- // -- Functie om de tree links te tekenen te starten by node met id = myParent --
- Hierarchical_List.prototype.toHTMLinner = function (ordinal) {
- if (this.data[ordinal].collapsed) {
- return ("
"));
- }
- };
- Hierarchical_List.prototype.updateHTMLinner = function (id) {
- var ordinal = this.getOrdinalById(id);
- document.getElementById('id_elem_' + id).innerHTML = this.toHTMLinner(ordinal);
- };
- Hierarchical_List.prototype.toHTML = function (myParent) {
- if (myParent == 0)
- this.updateRibbon();
- var output = "";
- var numberDrawn = 0;
- // Teken het volledige schema in HTML
- for (var i = 0; i < this.length; i++) {
- if (this.active[i] && (this.data[i].parent == myParent)) {
- numberDrawn++;
- output += '
';
- output += this.toHTMLinner(i);
- output += "
";
- }
- }
- if ((myParent == 0) && (numberDrawn < 1)) {
- output += " "; //no need for the add button if we have items
- }
- return (output);
- };
- /** Functie om de naam van een kring te vinden waartoe een element behoord
- *
- */
- Hierarchical_List.prototype.findKringName = function (my_id) {
- var myOrdinal = this.getOrdinalById(my_id);
- var myParent = this.data[myOrdinal].parent;
- if (myParent == 0) {
- return ("");
- }
- else {
- var myParentOrdinal = this.getOrdinalById(myParent);
- if (myParentOrdinal == null)
- return ("");
- if (this.data[myParentOrdinal].getType() == "Kring") {
- var kringnaam = this.data[myParentOrdinal].props.naam;
- if (kringnaam.trim() != "") {
- return (this.data[myParentOrdinal].props.naam);
- }
- else {
- return (this.findKringName(myParent));
- }
- }
- else {
- return (this.findKringName(myParent));
- }
- }
- };
- // -- Functie om de tree links te tekenen te starten by node met id = myParent --
- Hierarchical_List.prototype.toSVG = function (myParent, stack, minxleft, includeparent) {
- if (minxleft === void 0) { minxleft = 0; }
- if (includeparent === void 0) { includeparent = false; }
- // Eerst creëren we een array van SVGelements met alle kinderen van myParent en eventueel myParent zelf
- var inSVG = new Array(); //Results from nested calls will be added here
- var elementCounter = 0;
- // Dan vullen we de array door doorheen de lijst van kinderen te gaan en een tekening van elk kind op te slaan
- for (var i = 0; i < this.length; i++) {
- if (this.active[i] && ((this.data[i].parent == myParent) || ((includeparent == true) && (this.id[i] == myParent)))) {
- var mytype = this.data[i].getType();
- /*if (typeof(this.data[i].keys) != 'undefined') mytype = this.data[i].keys[0][2]; else*/ mytype = this.data[i].props.type;
- switch (mytype) {
- case "":
- inSVG[elementCounter] = new SVGelement();
- break;
- case "Bord":
- inSVG[elementCounter] = this.data[i].toSVG();
- break;
- case "Splitsing":
- inSVG[elementCounter] = this.data[i].toSVG();
- break;
- case "Domotica":
- inSVG[elementCounter] = this.data[i].toSVG(); //Maak de tekening van Domotica
- this.tekenVerticaleLijnIndienKindVanKring(this.data[i], inSVG[elementCounter]);
- break;
- case "Meerdere verbruikers":
- inSVG[elementCounter] = this.data[i].toSVG(); //Maak de tekening van meerdere verbruikers
- this.tekenVerticaleLijnIndienKindVanKring(this.data[i], inSVG[elementCounter]);
- break;
- case "Vrije ruimte":
- inSVG[elementCounter] = this.data[i].toSVG(); //Maak de tekening
- break;
- case "Domotica module (verticaal)":
- inSVG[elementCounter] = this.data[i].toSVG(); //Maak de tekening
- this.tekenVerticaleLijnIndienKindVanKring(this.data[i], inSVG[elementCounter]);
- break;
- case "Domotica gestuurde verbruiker":
- inSVG[elementCounter] = this.data[i].toSVG(); //Maak de tekening
- this.tekenVerticaleLijnIndienKindVanKring(this.data[i], inSVG[elementCounter]);
- break;
- case "Kring":
- inSVG[elementCounter] = this.data[i].toSVG(); //Maak de tekening
- break;
- case "Aansluiting":
- inSVG[elementCounter] = this.data[i].toSVG(); //Maak de tekening
- this.tekenVerticaleLijnIndienKindVanKring(this.data[i], inSVG[elementCounter]);
- break;
- default:
- if ((myParent != 0) &&
- (this.data[this.getOrdinalById(myParent)].getType() == "Meerdere verbruikers"))
- inSVG[elementCounter] = this.data[i].toSVG();
- else if (stack == "vertical")
- inSVG[elementCounter] = this.toSVG(this.id[i], "horizontal", 0, true); //if we are still in vertical mode, switch to horizontal and take childs with us
- else { //we are in horizontal mode and can start drawing
- if (this.id[i] == myParent) { // Element is de parent en tekent zichzelf
- inSVG[elementCounter] = this.data[i].toSVG();
- }
- else { // Element is niet de parent, we tekenen het element en al zijn kinderen
- inSVG[elementCounter] = this.toSVG(this.id[i], "horizontal", 0, true); //if we are still in vertical mode, switch to horizontal and take childs with us
- }
- }
- this.tekenVerticaleLijnIndienKindVanKring(this.data[i], inSVG[elementCounter]);
- break;
- }
- elementCounter++;
- }
- }
- // If there are no elements, make at least an empty one to avoid problems here below ---
- if (elementCounter == 0) {
- inSVG[0] = new SVGelement();
- }
- // Now create the output element ---
- var outSVG = new SVGelement;
- outSVG.xleft = 0;
- outSVG.xright = 0;
- outSVG.yup = 0;
- outSVG.ydown = 0;
- outSVG.data = "";
- var width = 0; //How wide is the structure?
- var height = 0; //How high is the structure?
- switch (stack) {
- case "horizontal":
- var max_yup = 0; //What is the maximal distance above the horizontal line?
- var max_ydown = 0; //What is the maximal distance below the horizontal line?
- // analyse the size of the structure. Build horizontally
- for (var i = 0; i < elementCounter; i++) {
- width = width + inSVG[i].xleft + inSVG[i].xright;
- max_yup = Math.max(max_yup, inSVG[i].yup);
- max_ydown = Math.max(max_ydown, inSVG[i].ydown);
- }
- height = max_yup + max_ydown;
- // decide on the output structure
- if (elementCounter > 0) {
- outSVG.xleft = inSVG[0].xleft; //Leave space of the first element at the left
- outSVG.xright = width - outSVG.xleft;
- outSVG.xrightmin = outSVG.xright - inSVG[elementCounter - 1].xright;
- }
- else {
- outSVG.xleft = 0;
- outSVG.xright = 0;
- outSVG.xrightmin = 0;
- }
- ;
- outSVG.yup = max_yup;
- outSVG.ydown = max_ydown;
- // Create the output data
- var xpos = 0;
- for (var i = 0; i < elementCounter; i++) {
- outSVG.data += '';
- xpos += inSVG[i].xleft + inSVG[i].xright;
- }
- break;
- case "vertical":
- var max_xleft = 0; //What is the maximal distance left of the vertical line?
- var max_xright = 0; //What is the maximal distance right of the vertical line?
- // analyse the size of the structure. Build vertically
- for (var i = 0; i < elementCounter; i++) {
- height = height + inSVG[i].yup + inSVG[i].ydown;
- max_xleft = Math.max(max_xleft, inSVG[i].xleft);
- max_xright = Math.max(max_xright, inSVG[i].xright);
- }
- max_xleft = Math.max(minxleft, max_xleft);
- width = max_xleft + max_xright;
- // decide on the output structure
- outSVG.yup = height; //As a general rule, there is no ydown, but to be confirmed
- outSVG.ydown = 0;
- //outSVG.xleft = Math.max(max_xleft,35); // foresee at least 35 for text at the left
- outSVG.xleft = max_xleft;
- if (this.data[this.getOrdinalById(myParent)].getType() == "Kring")
- max_xright += 10; // Altijd 10 extra rechts voorzien voor uitstekende tekst/adressen
- outSVG.xright = Math.max(max_xright, 25); // foresee at least 25 at the right
- // create the output data
- var ypos = 0;
- for (var i = elementCounter - 1; i >= 0; i--) {
- outSVG.data += '';
- ypos += inSVG[i].yup + inSVG[i].ydown;
- }
- break;
- }
- outSVG.data += "\n";
- if (myParent == 0) { //We will always foresee a 20 pixel horizontal and 5 pixel vertical margin
- var header = "";
- outSVG.data = header + outSVG.data + footer;
- }
- return (outSVG);
- };
- return Hierarchical_List;
-}());
-var SITPLANVIEW_SELECT_PADDING = parseInt(getComputedStyle(document.documentElement).getPropertyValue('--selectPadding').trim());
-var SITPLANVIEW_ZOOMINTERVAL = { MIN: 0.1, MAX: 1000 };
-var SITPLANVIEW_DEFAULT_SCALE = 0.7;
-var CONFIGPAGE_LEFT = "\n
\n
\n Welkom op \u00E9\u00E9ndraadschema\n
\n
\n Kies \u00E9\u00E9n van onderstaande voorbeelden om van te starten of start van een leeg schema (optie 3).\n
\n \n \n Tip: Om de mogelijkheden van het programma te leren kennen is het vaak beter eerst een voorbeeldschema te\n bekijken alvorens van een leeg schema te vertrekken.\n \n \n
\n \n
\n
\n
\n Voorbeeld 1\n
\n
\n Voorbeeld 2\n
\n
\n Leeg schema\n
\n
\n Openen\n
\n
\n
\n
\n \n
\n Eenvoudig schema, enkel contactdozen en lichtpunten.\n
\n
\n
\n \n
\n Iets complexer schema met teleruptoren, verbruikers achter contactdozen en gesplitste kringen.\n
\n
\n
\n \n
\n";
-var CONFIGPAGE_RIGHT = "\n
\n
\n
\n \n
\n Open een schema dat u eerder heeft opgeslagen op uw computer (EDS-bestand). Enkel bestanden aangemaakt na 12 juli 2019 worden herkend.\n
\r\n * Default is \"a4\". If you want to use your own format just pass instead of one of the above predefined formats the size as an number-array, e.g. [595.28, 841.89]\r\n * @param orientation {string} Orientation of the new page. Possible values are \"portrait\" or \"landscape\" (or shortcuts \"p\" (Default), \"l\").\r\n * @function\r\n * @instance\r\n * @returns {jsPDF}\r\n *\r\n * @memberof jsPDF#\r\n * @name addPage\r\n */\r\n API.addPage = function() {\r\n _addPage.apply(this, arguments);\r\n return this;\r\n };\r\n /**\r\n * Adds (and transfers the focus to) new page to the PDF document.\r\n * @function\r\n * @instance\r\n * @returns {jsPDF}\r\n *\r\n * @memberof jsPDF#\r\n * @name setPage\r\n * @param {number} page Switch the active page to the page number specified (indexed starting at 1).\r\n * @example\r\n * doc = jsPDF()\r\n * doc.addPage()\r\n * doc.addPage()\r\n * doc.text('I am on page 3', 10, 10)\r\n * doc.setPage(1)\r\n * doc.text('I am on page 1', 10, 10)\r\n */\r\n API.setPage = function() {\r\n _setPage.apply(this, arguments);\r\n setOutputDestination.call(this, pages[currentPage]);\r\n return this;\r\n };\r\n\r\n /**\r\n * @name insertPage\r\n * @memberof jsPDF#\r\n *\r\n * @function\r\n * @instance\r\n * @param {Object} beforePage\r\n * @returns {jsPDF}\r\n */\r\n API.insertPage = function(beforePage) {\r\n this.addPage();\r\n this.movePage(currentPage, beforePage);\r\n return this;\r\n };\r\n\r\n /**\r\n * @name movePage\r\n * @memberof jsPDF#\r\n * @function\r\n * @instance\r\n * @param {number} targetPage\r\n * @param {number} beforePage\r\n * @returns {jsPDF}\r\n */\r\n API.movePage = function(targetPage, beforePage) {\r\n var tmpPages, tmpPagesContext;\r\n if (targetPage > beforePage) {\r\n tmpPages = pages[targetPage];\r\n tmpPagesContext = pagesContext[targetPage];\r\n for (var i = targetPage; i > beforePage; i--) {\r\n pages[i] = pages[i - 1];\r\n pagesContext[i] = pagesContext[i - 1];\r\n }\r\n pages[beforePage] = tmpPages;\r\n pagesContext[beforePage] = tmpPagesContext;\r\n this.setPage(beforePage);\r\n } else if (targetPage < beforePage) {\r\n tmpPages = pages[targetPage];\r\n tmpPagesContext = pagesContext[targetPage];\r\n for (var j = targetPage; j < beforePage; j++) {\r\n pages[j] = pages[j + 1];\r\n pagesContext[j] = pagesContext[j + 1];\r\n }\r\n pages[beforePage] = tmpPages;\r\n pagesContext[beforePage] = tmpPagesContext;\r\n this.setPage(beforePage);\r\n }\r\n return this;\r\n };\r\n\r\n /**\r\n * Deletes a page from the PDF.\r\n * @name deletePage\r\n * @memberof jsPDF#\r\n * @function\r\n * @param {number} targetPage\r\n * @instance\r\n * @returns {jsPDF}\r\n */\r\n API.deletePage = function() {\r\n _deletePage.apply(this, arguments);\r\n return this;\r\n };\r\n\r\n /**\r\n * Adds text to page. Supports adding multiline text when 'text' argument is an Array of Strings.\r\n *\r\n * @function\r\n * @instance\r\n * @param {String|Array} text String or array of strings to be added to the page. Each line is shifted one line down per font, spacing settings declared before this call.\r\n * @param {number} x Coordinate (in units declared at inception of PDF document) against left edge of the page.\r\n * @param {number} y Coordinate (in units declared at inception of PDF document) against upper edge of the page.\r\n * @param {Object} [options] - Collection of settings signaling how the text must be encoded.\r\n * @param {string} [options.align=left] - The alignment of the text, possible values: left, center, right, justify.\r\n * @param {string} [options.baseline=alphabetic] - Sets text baseline used when drawing the text, possible values: alphabetic, ideographic, bottom, top, middle, hanging\r\n * @param {number|Matrix} [options.angle=0] - Rotate the text clockwise or counterclockwise. Expects the angle in degree.\r\n * @param {number} [options.rotationDirection=1] - Direction of the rotation. 0 = clockwise, 1 = counterclockwise.\r\n * @param {number} [options.charSpace=0] - The space between each letter.\r\n * @param {number} [options.horizontalScale=1] - Horizontal scale of the text as a factor of the regular size.\r\n * @param {number} [options.lineHeightFactor=1.15] - The lineheight of each line.\r\n * @param {Object} [options.flags] - Flags for to8bitStream.\r\n * @param {boolean} [options.flags.noBOM=true] - Don't add BOM to Unicode-text.\r\n * @param {boolean} [options.flags.autoencode=true] - Autoencode the Text.\r\n * @param {number} [options.maxWidth=0] - Split the text by given width, 0 = no split.\r\n * @param {string} [options.renderingMode=fill] - Set how the text should be rendered, possible values: fill, stroke, fillThenStroke, invisible, fillAndAddForClipping, strokeAndAddPathForClipping, fillThenStrokeAndAddToPathForClipping, addToPathForClipping.\r\n * @param {boolean} [options.isInputVisual] - Option for the BidiEngine\r\n * @param {boolean} [options.isOutputVisual] - Option for the BidiEngine\r\n * @param {boolean} [options.isInputRtl] - Option for the BidiEngine\r\n * @param {boolean} [options.isOutputRtl] - Option for the BidiEngine\r\n * @param {boolean} [options.isSymmetricSwapping] - Option for the BidiEngine\r\n * @param {number|Matrix} transform If transform is a number the text will be rotated by this value around the anchor set by x and y.\r\n *\r\n * If it is a Matrix, this matrix gets directly applied to the text, which allows shearing\r\n * effects etc.; the x and y offsets are then applied AFTER the coordinate system has been established by this\r\n * matrix. This means passing a rotation matrix that is equivalent to some rotation angle will in general yield a\r\n * DIFFERENT result. A matrix is only allowed in \"advanced\" API mode.\r\n * @returns {jsPDF}\r\n * @memberof jsPDF#\r\n * @name text\r\n */\r\n API.__private__.text = API.text = function(text, x, y, options, transform) {\r\n /*\r\n * Inserts something like this into PDF\r\n * BT\r\n * /F1 16 Tf % Font name + size\r\n * 16 TL % How many units down for next line in multiline text\r\n * 0 g % color\r\n * 28.35 813.54 Td % position\r\n * (line one) Tj\r\n * T* (line two) Tj\r\n * T* (line three) Tj\r\n * ET\r\n */\r\n options = options || {};\r\n var scope = options.scope || this;\r\n var payload, da, angle, align, charSpace, maxWidth, flags, horizontalScale;\r\n\r\n // Pre-August-2012 the order of arguments was function(x, y, text, flags)\r\n // in effort to make all calls have similar signature like\r\n // function(data, coordinates... , miscellaneous)\r\n // this method had its args flipped.\r\n // code below allows backward compatibility with old arg order.\r\n if (\r\n typeof text === \"number\" &&\r\n typeof x === \"number\" &&\r\n (typeof y === \"string\" || Array.isArray(y))\r\n ) {\r\n var tmp = y;\r\n y = x;\r\n x = text;\r\n text = tmp;\r\n }\r\n\r\n var transformationMatrix;\r\n\r\n if (arguments[3] instanceof Matrix === false) {\r\n flags = arguments[3];\r\n angle = arguments[4];\r\n align = arguments[5];\r\n\r\n if (typeof flags !== \"object\" || flags === null) {\r\n if (typeof angle === \"string\") {\r\n align = angle;\r\n angle = null;\r\n }\r\n if (typeof flags === \"string\") {\r\n align = flags;\r\n flags = null;\r\n }\r\n if (typeof flags === \"number\") {\r\n angle = flags;\r\n flags = null;\r\n }\r\n options = {\r\n flags: flags,\r\n angle: angle,\r\n align: align\r\n };\r\n }\r\n } else {\r\n advancedApiModeTrap(\r\n \"The transform parameter of text() with a Matrix value\"\r\n );\r\n transformationMatrix = transform;\r\n }\r\n\r\n if (isNaN(x) || isNaN(y) || typeof text === \"undefined\" || text === null) {\r\n throw new Error(\"Invalid arguments passed to jsPDF.text\");\r\n }\r\n\r\n if (text.length === 0) {\r\n return scope;\r\n }\r\n\r\n var xtra = \"\";\r\n var isHex = false;\r\n var lineHeight =\r\n typeof options.lineHeightFactor === \"number\"\r\n ? options.lineHeightFactor\r\n : lineHeightFactor;\r\n var scaleFactor = scope.internal.scaleFactor;\r\n\r\n function ESC(s) {\r\n s = s.split(\"\\t\").join(Array(options.TabLen || 9).join(\" \"));\r\n return pdfEscape(s, flags);\r\n }\r\n\r\n function transformTextToSpecialArray(text) {\r\n //we don't want to destroy original text array, so cloning it\r\n var sa = text.concat();\r\n var da = [];\r\n var len = sa.length;\r\n var curDa;\r\n //we do array.join('text that must not be PDFescaped\")\r\n //thus, pdfEscape each component separately\r\n while (len--) {\r\n curDa = sa.shift();\r\n if (typeof curDa === \"string\") {\r\n da.push(curDa);\r\n } else {\r\n if (\r\n Array.isArray(text) &&\r\n (curDa.length === 1 ||\r\n (curDa[1] === undefined && curDa[2] === undefined))\r\n ) {\r\n da.push(curDa[0]);\r\n } else {\r\n da.push([curDa[0], curDa[1], curDa[2]]);\r\n }\r\n }\r\n }\r\n return da;\r\n }\r\n\r\n function processTextByFunction(text, processingFunction) {\r\n var result;\r\n if (typeof text === \"string\") {\r\n result = processingFunction(text)[0];\r\n } else if (Array.isArray(text)) {\r\n //we don't want to destroy original text array, so cloning it\r\n var sa = text.concat();\r\n var da = [];\r\n var len = sa.length;\r\n var curDa;\r\n var tmpResult;\r\n //we do array.join('text that must not be PDFescaped\")\r\n //thus, pdfEscape each component separately\r\n while (len--) {\r\n curDa = sa.shift();\r\n if (typeof curDa === \"string\") {\r\n da.push(processingFunction(curDa)[0]);\r\n } else if (Array.isArray(curDa) && typeof curDa[0] === \"string\") {\r\n tmpResult = processingFunction(curDa[0], curDa[1], curDa[2]);\r\n da.push([tmpResult[0], tmpResult[1], tmpResult[2]]);\r\n }\r\n }\r\n result = da;\r\n }\r\n return result;\r\n }\r\n\r\n //Check if text is of type String\r\n var textIsOfTypeString = false;\r\n var tmpTextIsOfTypeString = true;\r\n\r\n if (typeof text === \"string\") {\r\n textIsOfTypeString = true;\r\n } else if (Array.isArray(text)) {\r\n //we don't want to destroy original text array, so cloning it\r\n var sa = text.concat();\r\n da = [];\r\n var len = sa.length;\r\n var curDa;\r\n //we do array.join('text that must not be PDFescaped\")\r\n //thus, pdfEscape each component separately\r\n while (len--) {\r\n curDa = sa.shift();\r\n if (\r\n typeof curDa !== \"string\" ||\r\n (Array.isArray(curDa) && typeof curDa[0] !== \"string\")\r\n ) {\r\n tmpTextIsOfTypeString = false;\r\n }\r\n }\r\n textIsOfTypeString = tmpTextIsOfTypeString;\r\n }\r\n if (textIsOfTypeString === false) {\r\n throw new Error(\r\n 'Type of text must be string or Array. \"' +\r\n text +\r\n '\" is not recognized.'\r\n );\r\n }\r\n\r\n //If there are any newlines in text, we assume\r\n //the user wanted to print multiple lines, so break the\r\n //text up into an array. If the text is already an array,\r\n //we assume the user knows what they are doing.\r\n //Convert text into an array anyway to simplify\r\n //later code.\r\n\r\n if (typeof text === \"string\") {\r\n if (text.match(/[\\r?\\n]/)) {\r\n text = text.split(/\\r\\n|\\r|\\n/g);\r\n } else {\r\n text = [text];\r\n }\r\n }\r\n\r\n //baseline\r\n var height = activeFontSize / scope.internal.scaleFactor;\r\n var descent = height * (lineHeight - 1);\r\n\r\n switch (options.baseline) {\r\n case \"bottom\":\r\n y -= descent;\r\n break;\r\n case \"top\":\r\n y += height - descent;\r\n break;\r\n case \"hanging\":\r\n y += height - 2 * descent;\r\n break;\r\n case \"middle\":\r\n y += height / 2 - descent;\r\n break;\r\n case \"ideographic\":\r\n case \"alphabetic\":\r\n default:\r\n // do nothing, everything is fine\r\n break;\r\n }\r\n\r\n //multiline\r\n maxWidth = options.maxWidth || 0;\r\n\r\n if (maxWidth > 0) {\r\n if (typeof text === \"string\") {\r\n text = scope.splitTextToSize(text, maxWidth);\r\n } else if (Object.prototype.toString.call(text) === \"[object Array]\") {\r\n text = text.reduce(function(acc, textLine) {\r\n return acc.concat(scope.splitTextToSize(textLine, maxWidth));\r\n }, []);\r\n }\r\n }\r\n\r\n //creating Payload-Object to make text byRef\r\n payload = {\r\n text: text,\r\n x: x,\r\n y: y,\r\n options: options,\r\n mutex: {\r\n pdfEscape: pdfEscape,\r\n activeFontKey: activeFontKey,\r\n fonts: fonts,\r\n activeFontSize: activeFontSize\r\n }\r\n };\r\n events.publish(\"preProcessText\", payload);\r\n\r\n text = payload.text;\r\n options = payload.options;\r\n\r\n //angle\r\n angle = options.angle;\r\n\r\n if (\r\n transformationMatrix instanceof Matrix === false &&\r\n angle &&\r\n typeof angle === \"number\"\r\n ) {\r\n angle *= Math.PI / 180;\r\n\r\n if (options.rotationDirection === 0) {\r\n angle = -angle;\r\n }\r\n\r\n if (apiMode === ApiMode.ADVANCED) {\r\n angle = -angle;\r\n }\r\n\r\n var c = Math.cos(angle);\r\n var s = Math.sin(angle);\r\n transformationMatrix = new Matrix(c, s, -s, c, 0, 0);\r\n } else if (angle && angle instanceof Matrix) {\r\n transformationMatrix = angle;\r\n }\r\n\r\n if (apiMode === ApiMode.ADVANCED && !transformationMatrix) {\r\n transformationMatrix = identityMatrix;\r\n }\r\n\r\n //charSpace\r\n\r\n charSpace = options.charSpace || activeCharSpace;\r\n\r\n if (typeof charSpace !== \"undefined\") {\r\n xtra += hpf(scale(charSpace)) + \" Tc\\n\";\r\n this.setCharSpace(this.getCharSpace() || 0);\r\n }\r\n\r\n horizontalScale = options.horizontalScale;\r\n if (typeof horizontalScale !== \"undefined\") {\r\n xtra += hpf(horizontalScale * 100) + \" Tz\\n\";\r\n }\r\n\r\n //lang\r\n\r\n var lang = options.lang;\r\n\r\n if (lang) {\r\n // xtra += \"/Lang (\" + lang +\")\\n\";\r\n }\r\n\r\n //renderingMode\r\n var renderingMode = -1;\r\n var parmRenderingMode =\r\n typeof options.renderingMode !== \"undefined\"\r\n ? options.renderingMode\r\n : options.stroke;\r\n var pageContext = scope.internal.getCurrentPageInfo().pageContext;\r\n\r\n switch (parmRenderingMode) {\r\n case 0:\r\n case false:\r\n case \"fill\":\r\n renderingMode = 0;\r\n break;\r\n case 1:\r\n case true:\r\n case \"stroke\":\r\n renderingMode = 1;\r\n break;\r\n case 2:\r\n case \"fillThenStroke\":\r\n renderingMode = 2;\r\n break;\r\n case 3:\r\n case \"invisible\":\r\n renderingMode = 3;\r\n break;\r\n case 4:\r\n case \"fillAndAddForClipping\":\r\n renderingMode = 4;\r\n break;\r\n case 5:\r\n case \"strokeAndAddPathForClipping\":\r\n renderingMode = 5;\r\n break;\r\n case 6:\r\n case \"fillThenStrokeAndAddToPathForClipping\":\r\n renderingMode = 6;\r\n break;\r\n case 7:\r\n case \"addToPathForClipping\":\r\n renderingMode = 7;\r\n break;\r\n }\r\n\r\n var usedRenderingMode =\r\n typeof pageContext.usedRenderingMode !== \"undefined\"\r\n ? pageContext.usedRenderingMode\r\n : -1;\r\n\r\n //if the coder wrote it explicitly to use a specific\r\n //renderingMode, then use it\r\n if (renderingMode !== -1) {\r\n xtra += renderingMode + \" Tr\\n\";\r\n //otherwise check if we used the rendering Mode already\r\n //if so then set the rendering Mode...\r\n } else if (usedRenderingMode !== -1) {\r\n xtra += \"0 Tr\\n\";\r\n }\r\n\r\n if (renderingMode !== -1) {\r\n pageContext.usedRenderingMode = renderingMode;\r\n }\r\n\r\n //align\r\n align = options.align || \"left\";\r\n var leading = activeFontSize * lineHeight;\r\n var pageWidth = scope.internal.pageSize.getWidth();\r\n var activeFont = fonts[activeFontKey];\r\n charSpace = options.charSpace || activeCharSpace;\r\n maxWidth = options.maxWidth || 0;\r\n\r\n var lineWidths;\r\n flags = Object.assign({ autoencode: true, noBOM: true }, options.flags);\r\n\r\n var wordSpacingPerLine = [];\r\n var findWidth = function(v) {\r\n return (\r\n (scope.getStringUnitWidth(v, {\r\n font: activeFont,\r\n charSpace: charSpace,\r\n fontSize: activeFontSize,\r\n doKerning: false\r\n }) *\r\n activeFontSize) /\r\n scaleFactor\r\n );\r\n };\r\n if (Object.prototype.toString.call(text) === \"[object Array]\") {\r\n da = transformTextToSpecialArray(text);\r\n var newY;\r\n if (align !== \"left\") {\r\n lineWidths = da.map(findWidth);\r\n }\r\n //The first line uses the \"main\" Td setting,\r\n //and the subsequent lines are offset by the\r\n //previous line's x coordinate.\r\n var prevWidth = 0;\r\n var newX;\r\n if (align === \"right\") {\r\n //The passed in x coordinate defines the\r\n //rightmost point of the text.\r\n x -= lineWidths[0];\r\n text = [];\r\n len = da.length;\r\n for (var i = 0; i < len; i++) {\r\n if (i === 0) {\r\n newX = getHorizontalCoordinate(x);\r\n newY = getVerticalCoordinate(y);\r\n } else {\r\n newX = scale(prevWidth - lineWidths[i]);\r\n newY = -leading;\r\n }\r\n text.push([da[i], newX, newY]);\r\n prevWidth = lineWidths[i];\r\n }\r\n } else if (align === \"center\") {\r\n //The passed in x coordinate defines\r\n //the center point.\r\n x -= lineWidths[0] / 2;\r\n text = [];\r\n len = da.length;\r\n for (var j = 0; j < len; j++) {\r\n if (j === 0) {\r\n newX = getHorizontalCoordinate(x);\r\n newY = getVerticalCoordinate(y);\r\n } else {\r\n newX = scale((prevWidth - lineWidths[j]) / 2);\r\n newY = -leading;\r\n }\r\n text.push([da[j], newX, newY]);\r\n prevWidth = lineWidths[j];\r\n }\r\n } else if (align === \"left\") {\r\n text = [];\r\n len = da.length;\r\n for (var h = 0; h < len; h++) {\r\n text.push(da[h]);\r\n }\r\n } else if (align === \"justify\" && activeFont.encoding === \"Identity-H\") {\r\n // when using unicode fonts, wordSpacePerLine does not apply\r\n text = [];\r\n len = da.length;\r\n maxWidth = maxWidth !== 0 ? maxWidth : pageWidth;\r\n let backToStartX = 0;\r\n for (var l = 0; l < len; l++) {\r\n newY = l === 0 ? getVerticalCoordinate(y) : -leading;\r\n newX = l === 0 ? getHorizontalCoordinate(x) : backToStartX;\r\n if (l < len - 1) {\r\n let spacing = scale(\r\n (maxWidth - lineWidths[l]) / (da[l].split(\" \").length - 1)\r\n );\r\n let words = da[l].split(\" \");\r\n text.push([words[0] + \" \", newX, newY]);\r\n backToStartX = 0; // distance to reset back to the left\r\n for (let i = 1; i < words.length; i++) {\r\n let shiftAmount =\r\n (findWidth(words[i - 1] + \" \" + words[i]) -\r\n findWidth(words[i])) *\r\n scaleFactor +\r\n spacing;\r\n if (i == words.length - 1) text.push([words[i], shiftAmount, 0]);\r\n else text.push([words[i] + \" \", shiftAmount, 0]);\r\n backToStartX -= shiftAmount;\r\n }\r\n } else {\r\n text.push([da[l], newX, newY]);\r\n }\r\n }\r\n text.push([\"\", backToStartX, 0]);\r\n } else if (align === \"justify\") {\r\n text = [];\r\n len = da.length;\r\n maxWidth = maxWidth !== 0 ? maxWidth : pageWidth;\r\n for (var l = 0; l < len; l++) {\r\n newY = l === 0 ? getVerticalCoordinate(y) : -leading;\r\n newX = l === 0 ? getHorizontalCoordinate(x) : 0;\r\n if (l < len - 1) {\r\n wordSpacingPerLine.push(\r\n hpf(\r\n scale(\r\n (maxWidth - lineWidths[l]) / (da[l].split(\" \").length - 1)\r\n )\r\n )\r\n );\r\n } else {\r\n wordSpacingPerLine.push(0);\r\n }\r\n text.push([da[l], newX, newY]);\r\n }\r\n } else {\r\n throw new Error(\r\n 'Unrecognized alignment option, use \"left\", \"center\", \"right\" or \"justify\".'\r\n );\r\n }\r\n }\r\n\r\n //R2L\r\n var doReversing = typeof options.R2L === \"boolean\" ? options.R2L : R2L;\r\n if (doReversing === true) {\r\n text = processTextByFunction(text, function(text, posX, posY) {\r\n return [\r\n text\r\n .split(\"\")\r\n .reverse()\r\n .join(\"\"),\r\n posX,\r\n posY\r\n ];\r\n });\r\n }\r\n\r\n //creating Payload-Object to make text byRef\r\n payload = {\r\n text: text,\r\n x: x,\r\n y: y,\r\n options: options,\r\n mutex: {\r\n pdfEscape: pdfEscape,\r\n activeFontKey: activeFontKey,\r\n fonts: fonts,\r\n activeFontSize: activeFontSize\r\n }\r\n };\r\n events.publish(\"postProcessText\", payload);\r\n\r\n text = payload.text;\r\n isHex = payload.mutex.isHex || false;\r\n\r\n //Escaping\r\n var activeFontEncoding = fonts[activeFontKey].encoding;\r\n\r\n if (\r\n activeFontEncoding === \"WinAnsiEncoding\" ||\r\n activeFontEncoding === \"StandardEncoding\"\r\n ) {\r\n text = processTextByFunction(text, function(text, posX, posY) {\r\n return [ESC(text), posX, posY];\r\n });\r\n }\r\n\r\n da = transformTextToSpecialArray(text);\r\n\r\n text = [];\r\n var STRING = 0;\r\n var ARRAY = 1;\r\n var variant = Array.isArray(da[0]) ? ARRAY : STRING;\r\n var posX;\r\n var posY;\r\n var content;\r\n var wordSpacing = \"\";\r\n\r\n var generatePosition = function(\r\n parmPosX,\r\n parmPosY,\r\n parmTransformationMatrix\r\n ) {\r\n var position = \"\";\r\n if (parmTransformationMatrix instanceof Matrix) {\r\n // It is kind of more intuitive to apply a plain rotation around the text anchor set by x and y\r\n // but when the user supplies an arbitrary transformation matrix, the x and y offsets should be applied\r\n // in the coordinate system established by this matrix\r\n if (typeof options.angle === \"number\") {\r\n parmTransformationMatrix = matrixMult(\r\n parmTransformationMatrix,\r\n new Matrix(1, 0, 0, 1, parmPosX, parmPosY)\r\n );\r\n } else {\r\n parmTransformationMatrix = matrixMult(\r\n new Matrix(1, 0, 0, 1, parmPosX, parmPosY),\r\n parmTransformationMatrix\r\n );\r\n }\r\n\r\n if (apiMode === ApiMode.ADVANCED) {\r\n parmTransformationMatrix = matrixMult(\r\n new Matrix(1, 0, 0, -1, 0, 0),\r\n parmTransformationMatrix\r\n );\r\n }\r\n\r\n position = parmTransformationMatrix.join(\" \") + \" Tm\\n\";\r\n } else {\r\n position = hpf(parmPosX) + \" \" + hpf(parmPosY) + \" Td\\n\";\r\n }\r\n return position;\r\n };\r\n\r\n for (var lineIndex = 0; lineIndex < da.length; lineIndex++) {\r\n wordSpacing = \"\";\r\n\r\n switch (variant) {\r\n case ARRAY:\r\n content =\r\n (isHex ? \"<\" : \"(\") + da[lineIndex][0] + (isHex ? \">\" : \")\");\r\n posX = parseFloat(da[lineIndex][1]);\r\n posY = parseFloat(da[lineIndex][2]);\r\n break;\r\n case STRING:\r\n content = (isHex ? \"<\" : \"(\") + da[lineIndex] + (isHex ? \">\" : \")\");\r\n posX = getHorizontalCoordinate(x);\r\n posY = getVerticalCoordinate(y);\r\n break;\r\n }\r\n\r\n if (\r\n typeof wordSpacingPerLine !== \"undefined\" &&\r\n typeof wordSpacingPerLine[lineIndex] !== \"undefined\"\r\n ) {\r\n wordSpacing = wordSpacingPerLine[lineIndex] + \" Tw\\n\";\r\n }\r\n\r\n if (lineIndex === 0) {\r\n text.push(\r\n wordSpacing +\r\n generatePosition(posX, posY, transformationMatrix) +\r\n content\r\n );\r\n } else if (variant === STRING) {\r\n text.push(wordSpacing + content);\r\n } else if (variant === ARRAY) {\r\n text.push(\r\n wordSpacing +\r\n generatePosition(posX, posY, transformationMatrix) +\r\n content\r\n );\r\n }\r\n }\r\n\r\n text = variant === STRING ? text.join(\" Tj\\nT* \") : text.join(\" Tj\\n\");\r\n text += \" Tj\\n\";\r\n\r\n var result = \"BT\\n/\";\r\n result += activeFontKey + \" \" + activeFontSize + \" Tf\\n\"; // font face, style, size\r\n result += hpf(activeFontSize * lineHeight) + \" TL\\n\"; // line spacing\r\n result += textColor + \"\\n\";\r\n result += xtra;\r\n result += text;\r\n result += \"ET\";\r\n\r\n out(result);\r\n usedFonts[activeFontKey] = true;\r\n return scope;\r\n };\r\n\r\n // PDF supports these path painting and clip path operators:\r\n //\r\n // S - stroke\r\n // s - close/stroke\r\n // f (F) - fill non-zero\r\n // f* - fill evenodd\r\n // B - fill stroke nonzero\r\n // B* - fill stroke evenodd\r\n // b - close fill stroke nonzero\r\n // b* - close fill stroke evenodd\r\n // n - nothing (consume path)\r\n // W - clip nonzero\r\n // W* - clip evenodd\r\n //\r\n // In order to keep the API small, we omit the close-and-fill/stroke operators and provide a separate close()\r\n // method.\r\n /**\r\n *\r\n * @name clip\r\n * @function\r\n * @instance\r\n * @param {string} rule Only possible value is 'evenodd'\r\n * @returns {jsPDF}\r\n * @memberof jsPDF#\r\n * @description All .clip() after calling drawing ops with a style argument of null.\r\n */\r\n var clip = (API.__private__.clip = API.clip = function(rule) {\r\n // Call .clip() after calling drawing ops with a style argument of null\r\n // W is the PDF clipping op\r\n if (\"evenodd\" === rule) {\r\n out(\"W*\");\r\n } else {\r\n out(\"W\");\r\n }\r\n return this;\r\n });\r\n\r\n /**\r\n * @name clipEvenOdd\r\n * @function\r\n * @instance\r\n * @returns {jsPDF}\r\n * @memberof jsPDF#\r\n * @description Modify the current clip path by intersecting it with the current path using the even-odd rule. Note\r\n * that this will NOT consume the current path. In order to only use this path for clipping call\r\n * {@link API.discardPath} afterwards.\r\n */\r\n API.clipEvenOdd = function() {\r\n return clip(\"evenodd\");\r\n };\r\n\r\n /**\r\n * Consumes the current path without any effect. Mainly used in combination with {@link clip} or\r\n * {@link clipEvenOdd}. The PDF \"n\" operator.\r\n * @name discardPath\r\n * @function\r\n * @instance\r\n * @returns {jsPDF}\r\n * @memberof jsPDF#\r\n */\r\n API.__private__.discardPath = API.discardPath = function() {\r\n out(\"n\");\r\n return this;\r\n };\r\n\r\n var isValidStyle = (API.__private__.isValidStyle = function(style) {\r\n var validStyleVariants = [\r\n undefined,\r\n null,\r\n \"S\",\r\n \"D\",\r\n \"F\",\r\n \"DF\",\r\n \"FD\",\r\n \"f\",\r\n \"f*\",\r\n \"B\",\r\n \"B*\",\r\n \"n\"\r\n ];\r\n var result = false;\r\n if (validStyleVariants.indexOf(style) !== -1) {\r\n result = true;\r\n }\r\n return result;\r\n });\r\n\r\n API.__private__.setDefaultPathOperation = API.setDefaultPathOperation = function(\r\n operator\r\n ) {\r\n if (isValidStyle(operator)) {\r\n defaultPathOperation = operator;\r\n }\r\n return this;\r\n };\r\n\r\n var getStyle = (API.__private__.getStyle = API.getStyle = function(style) {\r\n // see path-painting operators in PDF spec\r\n var op = defaultPathOperation; // stroke\r\n\r\n switch (style) {\r\n case \"D\":\r\n case \"S\":\r\n op = \"S\"; // stroke\r\n break;\r\n case \"F\":\r\n op = \"f\"; // fill\r\n break;\r\n case \"FD\":\r\n case \"DF\":\r\n op = \"B\";\r\n break;\r\n case \"f\":\r\n case \"f*\":\r\n case \"B\":\r\n case \"B*\":\r\n /*\r\n Allow direct use of these PDF path-painting operators:\r\n - f fill using nonzero winding number rule\r\n - f* fill using even-odd rule\r\n - B fill then stroke with fill using non-zero winding number rule\r\n - B* fill then stroke with fill using even-odd rule\r\n */\r\n op = style;\r\n break;\r\n }\r\n return op;\r\n });\r\n\r\n /**\r\n * Close the current path. The PDF \"h\" operator.\r\n * @name close\r\n * @function\r\n * @instance\r\n * @returns {jsPDF}\r\n * @memberof jsPDF#\r\n */\r\n var close = (API.close = function() {\r\n out(\"h\");\r\n return this;\r\n });\r\n\r\n /**\r\n * Stroke the path. The PDF \"S\" operator.\r\n * @name stroke\r\n * @function\r\n * @instance\r\n * @returns {jsPDF}\r\n * @memberof jsPDF#\r\n */\r\n API.stroke = function() {\r\n out(\"S\");\r\n return this;\r\n };\r\n\r\n /**\r\n * Fill the current path using the nonzero winding number rule. If a pattern is provided, the path will be filled\r\n * with this pattern, otherwise with the current fill color. Equivalent to the PDF \"f\" operator.\r\n * @name fill\r\n * @function\r\n * @instance\r\n * @param {PatternData=} pattern If provided the path will be filled with this pattern\r\n * @returns {jsPDF}\r\n * @memberof jsPDF#\r\n */\r\n API.fill = function(pattern) {\r\n fillWithOptionalPattern(\"f\", pattern);\r\n return this;\r\n };\r\n\r\n /**\r\n * Fill the current path using the even-odd rule. The PDF f* operator.\r\n * @see API.fill\r\n * @name fillEvenOdd\r\n * @function\r\n * @instance\r\n * @param {PatternData=} pattern If provided the path will be filled with this pattern\r\n * @returns {jsPDF}\r\n * @memberof jsPDF#\r\n */\r\n API.fillEvenOdd = function(pattern) {\r\n fillWithOptionalPattern(\"f*\", pattern);\r\n return this;\r\n };\r\n\r\n /**\r\n * Fill using the nonzero winding number rule and then stroke the current Path. The PDF \"B\" operator.\r\n * @see API.fill\r\n * @name fillStroke\r\n * @function\r\n * @instance\r\n * @param {PatternData=} pattern If provided the path will be stroked with this pattern\r\n * @returns {jsPDF}\r\n * @memberof jsPDF#\r\n */\r\n API.fillStroke = function(pattern) {\r\n fillWithOptionalPattern(\"B\", pattern);\r\n return this;\r\n };\r\n\r\n /**\r\n * Fill using the even-odd rule and then stroke the current Path. The PDF \"B\" operator.\r\n * @see API.fill\r\n * @name fillStrokeEvenOdd\r\n * @function\r\n * @instance\r\n * @param {PatternData=} pattern If provided the path will be fill-stroked with this pattern\r\n * @returns {jsPDF}\r\n * @memberof jsPDF#\r\n */\r\n API.fillStrokeEvenOdd = function(pattern) {\r\n fillWithOptionalPattern(\"B*\", pattern);\r\n return this;\r\n };\r\n\r\n var fillWithOptionalPattern = function(style, pattern) {\r\n if (typeof pattern === \"object\") {\r\n fillWithPattern(pattern, style);\r\n } else {\r\n out(style);\r\n }\r\n };\r\n\r\n var putStyle = function(style) {\r\n if (\r\n style === null ||\r\n (apiMode === ApiMode.ADVANCED && style === undefined)\r\n ) {\r\n return;\r\n }\r\n\r\n style = getStyle(style);\r\n\r\n // stroking / filling / both the path\r\n out(style);\r\n };\r\n\r\n function cloneTilingPattern(patternKey, boundingBox, xStep, yStep, matrix) {\r\n var clone = new TilingPattern(\r\n boundingBox || this.boundingBox,\r\n xStep || this.xStep,\r\n yStep || this.yStep,\r\n this.gState,\r\n matrix || this.matrix\r\n );\r\n clone.stream = this.stream;\r\n var key = patternKey + \"$$\" + this.cloneIndex++ + \"$$\";\r\n addPattern(key, clone);\r\n return clone;\r\n }\r\n\r\n var fillWithPattern = function(patternData, style) {\r\n var patternId = patternMap[patternData.key];\r\n var pattern = patterns[patternId];\r\n\r\n if (pattern instanceof ShadingPattern) {\r\n out(\"q\");\r\n\r\n out(clipRuleFromStyle(style));\r\n\r\n if (pattern.gState) {\r\n API.setGState(pattern.gState);\r\n }\r\n out(patternData.matrix.toString() + \" cm\");\r\n out(\"/\" + patternId + \" sh\");\r\n out(\"Q\");\r\n } else if (pattern instanceof TilingPattern) {\r\n // pdf draws patterns starting at the bottom left corner and they are not affected by the global transformation,\r\n // so we must flip them\r\n var matrix = new Matrix(1, 0, 0, -1, 0, getPageHeight());\r\n\r\n if (patternData.matrix) {\r\n matrix = matrix.multiply(patternData.matrix || identityMatrix);\r\n // we cannot apply a matrix to the pattern on use so we must abuse the pattern matrix and create new instances\r\n // for each use\r\n patternId = cloneTilingPattern.call(\r\n pattern,\r\n patternData.key,\r\n patternData.boundingBox,\r\n patternData.xStep,\r\n patternData.yStep,\r\n matrix\r\n ).id;\r\n }\r\n\r\n out(\"q\");\r\n out(\"/Pattern cs\");\r\n out(\"/\" + patternId + \" scn\");\r\n\r\n if (pattern.gState) {\r\n API.setGState(pattern.gState);\r\n }\r\n\r\n out(style);\r\n out(\"Q\");\r\n }\r\n };\r\n\r\n var clipRuleFromStyle = function(style) {\r\n switch (style) {\r\n case \"f\":\r\n case \"F\":\r\n return \"W n\";\r\n case \"f*\":\r\n return \"W* n\";\r\n case \"B\":\r\n return \"W S\";\r\n case \"B*\":\r\n return \"W* S\";\r\n\r\n // these two are for compatibility reasons (in the past, calling any primitive method with a shading pattern\r\n // and \"n\"/\"S\" as style would still fill/fill and stroke the path)\r\n case \"S\":\r\n return \"W S\";\r\n case \"n\":\r\n return \"W n\";\r\n }\r\n };\r\n\r\n /**\r\n * Begin a new subpath by moving the current point to coordinates (x, y). The PDF \"m\" operator.\r\n * @param {number} x\r\n * @param {number} y\r\n * @name moveTo\r\n * @function\r\n * @instance\r\n * @memberof jsPDF#\r\n * @returns {jsPDF}\r\n */\r\n var moveTo = (API.moveTo = function(x, y) {\r\n out(hpf(scale(x)) + \" \" + hpf(transformScaleY(y)) + \" m\");\r\n return this;\r\n });\r\n\r\n /**\r\n * Append a straight line segment from the current point to the point (x, y). The PDF \"l\" operator.\r\n * @param {number} x\r\n * @param {number} y\r\n * @memberof jsPDF#\r\n * @name lineTo\r\n * @function\r\n * @instance\r\n * @memberof jsPDF#\r\n * @returns {jsPDF}\r\n */\r\n var lineTo = (API.lineTo = function(x, y) {\r\n out(hpf(scale(x)) + \" \" + hpf(transformScaleY(y)) + \" l\");\r\n return this;\r\n });\r\n\r\n /**\r\n * Append a cubic Bézier curve to the current path. The curve shall extend from the current point to the point\r\n * (x3, y3), using (x1, y1) and (x2, y2) as Bézier control points. The new current point shall be (x3, x3).\r\n * @param {number} x1\r\n * @param {number} y1\r\n * @param {number} x2\r\n * @param {number} y2\r\n * @param {number} x3\r\n * @param {number} y3\r\n * @memberof jsPDF#\r\n * @name curveTo\r\n * @function\r\n * @instance\r\n * @memberof jsPDF#\r\n * @returns {jsPDF}\r\n */\r\n var curveTo = (API.curveTo = function(x1, y1, x2, y2, x3, y3) {\r\n out(\r\n [\r\n hpf(scale(x1)),\r\n hpf(transformScaleY(y1)),\r\n hpf(scale(x2)),\r\n hpf(transformScaleY(y2)),\r\n hpf(scale(x3)),\r\n hpf(transformScaleY(y3)),\r\n \"c\"\r\n ].join(\" \")\r\n );\r\n return this;\r\n });\r\n\r\n /**\r\n * Draw a line on the current page.\r\n *\r\n * @name line\r\n * @function\r\n * @instance\r\n * @param {number} x1\r\n * @param {number} y1\r\n * @param {number} x2\r\n * @param {number} y2\r\n * @param {string} style A string specifying the painting style or null. Valid styles include: 'S' [default] - stroke, 'F' - fill, and 'DF' (or 'FD') - fill then stroke. A null value postpones setting the style so that a shape may be composed using multiple method calls. The last drawing method call used to define the shape should not have a null style argument. default: 'S'\r\n * @returns {jsPDF}\r\n * @memberof jsPDF#\r\n */\r\n API.__private__.line = API.line = function(x1, y1, x2, y2, style) {\r\n if (\r\n isNaN(x1) ||\r\n isNaN(y1) ||\r\n isNaN(x2) ||\r\n isNaN(y2) ||\r\n !isValidStyle(style)\r\n ) {\r\n throw new Error(\"Invalid arguments passed to jsPDF.line\");\r\n }\r\n if (apiMode === ApiMode.COMPAT) {\r\n return this.lines([[x2 - x1, y2 - y1]], x1, y1, [1, 1], style || \"S\");\r\n } else {\r\n return this.lines([[x2 - x1, y2 - y1]], x1, y1, [1, 1]).stroke();\r\n }\r\n };\r\n\r\n /**\r\n * @typedef {Object} PatternData\r\n * {Matrix|undefined} matrix\r\n * {Number|undefined} xStep\r\n * {Number|undefined} yStep\r\n * {Array.|undefined} boundingBox\r\n */\r\n\r\n /**\r\n * Adds series of curves (straight lines or cubic bezier curves) to canvas, starting at `x`, `y` coordinates.\r\n * All data points in `lines` are relative to last line origin.\r\n * `x`, `y` become x1,y1 for first line / curve in the set.\r\n * For lines you only need to specify [x2, y2] - (ending point) vector against x1, y1 starting point.\r\n * For bezier curves you need to specify [x2,y2,x3,y3,x4,y4] - vectors to control points 1, 2, ending point. All vectors are against the start of the curve - x1,y1.\r\n *\r\n * @example .lines([[2,2],[-2,2],[1,1,2,2,3,3],[2,1]], 212,110, [1,1], 'F', false) // line, line, bezier curve, line\r\n * @param {Array} lines Array of *vector* shifts as pairs (lines) or sextets (cubic bezier curves).\r\n * @param {number} x Coordinate (in units declared at inception of PDF document) against left edge of the page\r\n * @param {number} y Coordinate (in units declared at inception of PDF document) against upper edge of the page\r\n * @param {number} scale (Defaults to [1.0,1.0]) x,y Scaling factor for all vectors. Elements can be any floating number Sub-one makes drawing smaller. Over-one grows the drawing. Negative flips the direction.\r\n * @param {string=} style A string specifying the painting style or null. Valid styles include:\r\n * 'S' [default] - stroke,\r\n * 'F' - fill,\r\n * and 'DF' (or 'FD') - fill then stroke.\r\n * In \"compat\" API mode, a null value postpones setting the style so that a shape may be composed using multiple\r\n * method calls. The last drawing method call used to define the shape should not have a null style argument.\r\n *\r\n * In \"advanced\" API mode this parameter is deprecated.\r\n * @param {Boolean=} closed If true, the path is closed with a straight line from the end of the last curve to the starting point.\r\n * @function\r\n * @instance\r\n * @returns {jsPDF}\r\n * @memberof jsPDF#\r\n * @name lines\r\n */\r\n API.__private__.lines = API.lines = function(\r\n lines,\r\n x,\r\n y,\r\n scale,\r\n style,\r\n closed\r\n ) {\r\n var scalex, scaley, i, l, leg, x2, y2, x3, y3, x4, y4, tmp;\r\n\r\n // Pre-August-2012 the order of arguments was function(x, y, lines, scale, style)\r\n // in effort to make all calls have similar signature like\r\n // function(content, coordinateX, coordinateY , miscellaneous)\r\n // this method had its args flipped.\r\n // code below allows backward compatibility with old arg order.\r\n if (typeof lines === \"number\") {\r\n tmp = y;\r\n y = x;\r\n x = lines;\r\n lines = tmp;\r\n }\r\n\r\n scale = scale || [1, 1];\r\n closed = closed || false;\r\n\r\n if (\r\n isNaN(x) ||\r\n isNaN(y) ||\r\n !Array.isArray(lines) ||\r\n !Array.isArray(scale) ||\r\n !isValidStyle(style) ||\r\n typeof closed !== \"boolean\"\r\n ) {\r\n throw new Error(\"Invalid arguments passed to jsPDF.lines\");\r\n }\r\n\r\n // starting point\r\n moveTo(x, y);\r\n\r\n scalex = scale[0];\r\n scaley = scale[1];\r\n l = lines.length;\r\n //, x2, y2 // bezier only. In page default measurement \"units\", *after* scaling\r\n //, x3, y3 // bezier only. In page default measurement \"units\", *after* scaling\r\n // ending point for all, lines and bezier. . In page default measurement \"units\", *after* scaling\r\n x4 = x; // last / ending point = starting point for first item.\r\n y4 = y; // last / ending point = starting point for first item.\r\n\r\n for (i = 0; i < l; i++) {\r\n leg = lines[i];\r\n if (leg.length === 2) {\r\n // simple line\r\n x4 = leg[0] * scalex + x4; // here last x4 was prior ending point\r\n y4 = leg[1] * scaley + y4; // here last y4 was prior ending point\r\n lineTo(x4, y4);\r\n } else {\r\n // bezier curve\r\n x2 = leg[0] * scalex + x4; // here last x4 is prior ending point\r\n y2 = leg[1] * scaley + y4; // here last y4 is prior ending point\r\n x3 = leg[2] * scalex + x4; // here last x4 is prior ending point\r\n y3 = leg[3] * scaley + y4; // here last y4 is prior ending point\r\n x4 = leg[4] * scalex + x4; // here last x4 was prior ending point\r\n y4 = leg[5] * scaley + y4; // here last y4 was prior ending point\r\n curveTo(x2, y2, x3, y3, x4, y4);\r\n }\r\n }\r\n\r\n if (closed) {\r\n close();\r\n }\r\n\r\n putStyle(style);\r\n return this;\r\n };\r\n\r\n /**\r\n * Similar to {@link API.lines} but all coordinates are interpreted as absolute coordinates instead of relative.\r\n * @param {Array
![\"Ongedaan](\"gif/undo.png\")
\n Ongedaan maken\n ![\"Opnieuw\"](\"gif/redo.png\")
\n Opnieuw\n ![](\"examples/example000.svg\")
![](\"examples/example001.svg\")
![](\"examples/gear.svg\")
![](\"examples/import_icon.svg\"){kind=icon}