diff --git a/builddate.js b/builddate.js index cd8e91d..0d766d9 100644 --- a/builddate.js +++ b/builddate.js @@ -1 +1 @@ -var CONF_builddate="20241201-113430" +var CONF_builddate="20241230-131437" diff --git a/css/styles.css b/css/styles.css index a9caab0..e64f2cd 100644 --- a/css/styles.css +++ b/css/styles.css @@ -23,6 +23,34 @@ body { cursor: default; } +/* SPINNER STUFF */ + +.spinner { + display: none; + width: 50px; + height: 50px; + border: 5px solid rgba(0, 0, 0, 0.1); + border-top: 5px solid #000; + border-radius: 50%; + animation: spin 1s linear infinite; + position: fixed; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); +} + +@keyframes spin { + 0% { transform: rotate(0deg); } + 100% { transform: rotate(360deg); } +} + +.loading .spinner { + display: block; +} + + + + button, select, select option, input[type="checkbox"] { cursor: pointer; } @@ -95,6 +123,47 @@ ul#minitabs a:hover { left: 0px; right: 0px; bottom: 0; + justify-content: space-between; + /*padding: 0px 12px 0px 12px;*/ + display: flex; + background-color: #f8f8f8; + align-items: center; + width: 100%; + -webkit-user-select: none; /* Safari */ + -moz-user-select: none; /* Firefox */ + -ms-user-select: none; /* IE 10 and IE 11 */ + user-select: none; /* Standard syntax */ + border-bottom: 1px solid #c8c8c8; + flex-direction: row; +} + +#left-icons { + top: var(--menu-height); + height: var(--ribbon-height); + left: 0px; + right: 0px; + bottom: 0; + justify-content: left; + /*padding: 0px 12px 0px 12px;*/ + display: flex; + background-color: #f8f8f8; + align-items: center; + width: 100%; + -webkit-user-select: none; /* Safari */ + -moz-user-select: none; /* Firefox */ + -ms-user-select: none; /* IE 10 and IE 11 */ + user-select: none; /* Standard syntax */ + border-bottom: 1px solid #c8c8c8; + flex-direction: row; +} + +#right-icons { + top: var(--menu-height); + height: var(--ribbon-height); + left: 0px; + right: 0px; + bottom: 0; + justify-content: right; /*padding: 0px 12px 0px 12px;*/ display: flex; background-color: #f8f8f8; @@ -137,6 +206,46 @@ ul#minitabs a:hover { white-space: nowrap; /* Prevent text from wrapping */ } +.icon-button { + height: 50px; + margin: 0 0 0 5px; + text-align: center; + cursor: pointer; + font-size: 24px; +} + +.box { + position: absolute; + background-color: rgba(192, 192, 192, 0); + border: 0px solid #000; + cursor: pointer; + box-sizing: border-box; /* Include border in size calculation */ + transform: rotate(0deg); +} + +.boxlabel { + position: absolute; + font-size: 11px; + background-color: rgba(192, 192, 192, 0); + border: 0px solid #000; + cursor: pointer; + box-sizing: border-box; /* Include border in size calculation */ + transform: rotate(0deg); + display: inline-block; + white-space: nowrap; + -webkit-user-select: none; /* Safari */ + -moz-user-select: none; /* Firefox */ + -ms-user-select: none; /* IE 10 and IE 11 */ +} + +.boxlabel.hidden { display: none; } + +.box.selected { + border: calc(var(--selectPadding) * 1px) solid red; +} + +.box.hidden { display: none; } + /* APP */ #app { @@ -176,18 +285,17 @@ ul#minitabs a:hover { left: 0; right: 0; bottom: 0; - overflow: hidden; + overflow: auto; /* Add scrollbars if content overflows */ background-color: #ffffff; /* Optional: Background color for visibility */ - padding: 0x; /* Padding to create the empty border effect */ - display: flex; + padding: 0; /* Padding to create the empty border effect */ flex-direction: row; /* Ensure columns are side by side */ } #paper { top: 10px; left: 10px; - width: 297mm; /* A4 paper width in landscape mode */ - height: 210mm; /* A4 paper height */ + width: 277mm; /* Useful drawing area on A4 */ + height: 150mm; /* Useful drawing area on A4 */ background-color: white; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2), 0 6px 20px rgba(0, 0, 0, 0.19); border-radius: 5px; @@ -285,3 +393,12 @@ table { color: #B22222; /* Firebrick red for text */ } +.svg-icon { + position: absolute; + /*width: 90px; + height: 90px;*/ + left: 50%; + top: 50%; + transform: translate(-50%, -50%); + pointer-events: none; /* Allow clicks to pass through the SVG */ +} diff --git a/eendraadschema.js b/eendraadschema.js index 7c480fe..08d8181 100644 --- a/eendraadschema.js +++ b/eendraadschema.js @@ -96,6 +96,19 @@ function isInt(value) { parseInt(value) == value && !isNaN(parseInt(value, 10)); } +function getPixelsPerMillimeter() { + 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); + var pixelsPerMillimeter = widthInPixels / 10; + return pixelsPerMillimeter; +} +// Example usage +var pixelsPerMM = getPixelsPerMillimeter(); +console.log("Your browser uses approximately ".concat(pixelsPerMM, " pixels per millimeter.")); function svgTextWidth(input, fontsize, options) { if (fontsize === void 0) { fontsize = 10; } if (options === void 0) { options = ''; } @@ -182,9 +195,15 @@ function flattenSVG(SVGstruct, shiftx, shifty, node, overflowright) { 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")) { - outstruct.attributes.getNamedItem("transform").value = "rotate(-90 " + - outstruct.attributes.getNamedItem("x").nodeValue + "," + - outstruct.attributes.getNamedItem("y").nodeValue + ")"; + 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") { @@ -240,6 +259,18 @@ function browser_ie_detected() { 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'; @@ -557,12 +588,14 @@ var Print_Table = /** @class */ (function () { var minsvgwidth = 3 / 4 * maxsvgwidth; var page = 0; var pos = 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++; + 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); @@ -841,9 +874,10 @@ function printsvg() { 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 - ); + document.getElementById("progress_pdf"), //HTML element where callback status can be given + sitplanprint); } function renderPrintSVG(outSVG) { document.getElementById("printarea").innerHTML = '
' + @@ -1162,6 +1196,9 @@ function upgrade_version(mystructure, version) { function json_to_structure(text, version, redraw) { if (version === void 0) { version = 0; } if (redraw === void 0) { redraw = true; } + // If a structure exists, clear it + if (structure != null) + structure.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 structure */ @@ -1186,6 +1223,8 @@ function json_to_structure(text, version, redraw) { structure.properties.info = mystructure.properties.info; if (typeof mystructure.properties.info != "undefined") structure.properties.dpi = mystructure.properties.dpi; + if (typeof mystructure.properties.currentView != "undefined") + structure.properties.currentView = mystructure.properties.currentView; } // Kopieren van de paginatie voor printen if (typeof mystructure.print_table != "undefined") { @@ -1209,6 +1248,11 @@ function json_to_structure(text, version, redraw) { this.structure.print_table.pages[i].stop = mystructure.print_table.pages[i].stop; } } + // Kopieren van de situatieplannen + if (typeof mystructure.sitplanjson != "undefined") { + structure.sitplan = new SituationPlan(); + structure.sitplan.fromJsonObject(mystructure.sitplanjson); + } /* Kopieren van de eigenschappen van elk element. * Keys voor versies 1 en 2 en props voor versie 3 */ @@ -1319,7 +1363,12 @@ function structure_to_json() { listitem.sourcelist = null; } var swap = structure.print_table.pagemarkers; + var swap2 = structure.sitplan; + var swap3 = structure.sitplanview; structure.print_table.pagemarkers = 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 @@ -1328,13 +1377,15 @@ function structure_to_json() { listitem.sourcelist = structure; } structure.print_table.pagemarkers = swap; + structure.sitplan = swap2; + structure.sitplanview = swap3; return (text); } -/* FUNCTION download_by_blob - - Downloads an EDS file to the user's PC - -*/ +/** 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) { @@ -1443,22 +1494,48 @@ var undoRedo = /** @class */ (function () { if (maxSteps === void 0) { maxSteps = 100; } this.history = new jsonStore(maxSteps); } - undoRedo.prototype.store = function () { this.history.store(structure_to_json()); structure.updateRibbon(); }; + undoRedo.prototype.store = function () { + this.history.store(structure_to_json()); + if (structure.currentView == 'draw') + structure.sitplanview.updateRibbon(); + else if (structure.currentView == '2col') + structure.updateRibbon(); + }; undoRedo.prototype.undo = function () { + var lastView = structure.properties.currentView; var lastmode = structure.mode; var text = this.history.undo(); if (text != null) json_to_structure(text, 0, false); structure.mode = lastmode; - HLRedrawTree(); + if (structure.properties.currentView != lastView) + toggleAppView(structure.properties.currentView); + if (structure.properties.currentView == 'draw') { + topMenu.selectMenuItemByOrdinal(3); + showSituationPlanPage(); + } + else if (structure.properties.currentView == '2col') { + topMenu.selectMenuItemByOrdinal(2); + HLRedrawTree(); + } }; undoRedo.prototype.redo = function () { + var lastView = structure.properties.currentView; var lastmode = structure.mode; var text = this.history.redo(); if (text != null) json_to_structure(text, 0, false); structure.mode = lastmode; - HLRedrawTree(); + if (structure.properties.currentView != lastView) + toggleAppView(structure.properties.currentView); + if (structure.properties.currentView == 'draw') { + topMenu.selectMenuItemByOrdinal(3); + showSituationPlanPage(); + } + else if (structure.properties.currentView == '2col') { + topMenu.selectMenuItemByOrdinal(2); + HLRedrawTree(); + } }; undoRedo.prototype.clear = function () { this.history.clear(); @@ -1515,6 +1592,12 @@ var TopMenu = /** @class */ (function () { } } }; + TopMenu.prototype.selectMenuItemByOrdinal = function (nr) { + // Remove 'current' ID from all elements + var items = this.ulElement.querySelectorAll('a'); + items.forEach(function (item) { return item.removeAttribute('id'); }); + this.selectItem(items[nr]); + }; return TopMenu; }()); /* FUNCTION showFilePage @@ -1528,17 +1611,1076 @@ function showDocumentationPage() { toggleAppView('config'); document.getElementById('Btn_downloadManual').onclick = function () { window.open('Documentation/edsdoc.pdf', '_blank'); }; } +var SituationPlan = /** @class */ (function () { + function SituationPlan() { + this.numPages = 1; + this.activePage = 1; + this.elements = []; + } + SituationPlan.prototype.addElement = function (element) { + this.elements.push(element); + }; + SituationPlan.prototype.addElementFromFile = function (event, page, posx, posy, callback) { + var element = new SituationPlanElement(page, posx, posy, 0, 0, 0, SITPLANVIEW_DEFAULT_SCALE, randomId("SP_"), ""); + element.importFromFile(event, callback); + this.elements.push(element); + return element; + }; + SituationPlan.prototype.addElementFromSVG = function (svg, page, posx, posy) { + var element = new SituationPlanElement(page, posx, posy, 0, 0, 0, SITPLANVIEW_DEFAULT_SCALE, randomId("SP_"), svg); + element.getSizeFromString(); + this.elements.push(element); + }; + SituationPlan.prototype.addElectroItem = function (id, page, posx, posy, adrestype, adres, adreslocation, scale, rotate) { + var electroItem = structure.data[structure.getOrdinalById(id)]; + if (electroItem != null) { + var element = electroItem.toSituationPlanElement(); + Object.assign(element, { page: page, posx: posx, posy: posy, scale: scale, rotate: rotate }); + element.setElectroItemId(id); + element.setAdres(adrestype, adres, adreslocation); + this.elements.push(element); + return element; + } + else { + return null; + } + }; + SituationPlan.prototype.removeElement = function (element) { + for (var i = this.elements.length - 1; i >= 0; i--) { + if (this.elements[i] == element) { + this.elements.splice(i, 1); + } + } + if (element.boxref != null) + element.boxref.remove(); + if (element.boxlabelref != null) + element.boxlabelref.remove(); + }; + SituationPlan.prototype.toJsonObject = function () { + 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, elements: elements }; + }; + SituationPlan.prototype.fromJsonObject = function (json) { + this.numPages = json.numPages; + this.elements = []; + for (var _i = 0, _a = json.elements; _i < _a.length; _i++) { + var element = _a[_i]; + var newElement = new SituationPlanElement(1, 0, 0, 0, 0, 0, SITPLANVIEW_DEFAULT_SCALE, randomId("SP_"), ""); + newElement.fromJsonObject(element); + this.elements.push(newElement); + } + }; + SituationPlan.prototype.toSVG = function () { + var outstr = ''; + var pixelsPerMm = getPixelsPerMillimeter(); + var maxx = pixelsPerMm * 277; + var maxy = pixelsPerMm * 150; + for (var _i = 0, _a = this.elements; _i < _a.length; _i++) { + var element = _a[_i]; + outstr += element.getScaledSVG(true); + maxx = Math.max(maxx, element.posx + element.sizex / 2); + maxy = Math.max(maxy, element.posy + element.sizey / 2); + outstr += "").concat(element.getAdres(), ""); + } + outstr = "").concat(outstr, ""); + return outstr; + }; + SituationPlan.prototype.toSitPlanPrint = function () { + 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 pixelsPerMm = getPixelsPerMillimeter(); + var maxx = pixelsPerMm * 277; + var maxy = pixelsPerMm * 150; + for (var _i = 0, _a = this.elements; _i < _a.length; _i++) { + var element = _a[_i]; + if (element.page == (i + 1)) { + svgstr += element.getScaledSVG(true); + maxx = Math.max(maxx, element.posx + element.sizex / 2); + maxy = Math.max(maxy, element.posy + element.sizey / 2); + svgstr += "").concat(element.getAdres(), ""); + } + } + svgstr = "").concat(svgstr, ""); + outstruct.pages.push({ sizex: maxx, sizey: maxy, svg: svgstr }); + } + return outstruct; + }; + return SituationPlan; +}()); +var SituationPlanElement = /** @class */ (function () { + function SituationPlanElement(page, posx, posy, sizex, sizey, rotate, scale, id, svg) { + this.page = 1; + 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.labelposx = 0; + this.labelposy = 0; + this.rotate = 0; + this.scale = SITPLANVIEW_DEFAULT_SCALE; + this.boxref = null; + this.boxlabelref = null; + this.svg = ""; + this.electroItemId = null; + this.adrestype = null; + this.adres = null; + this.adreslocation = "rechts"; + this.page = page; + this.posx = posx; + this.posy = posy; + this.sizex = sizex, this.sizey = sizey; + this.rotate = rotate; + this.scale = scale; + this.id = id; + this.svg = svg; + } + SituationPlanElement.prototype.isEDSymbol = function () { + if (this.electroItemId != null) { + var idnum = Number(this.electroItemId); + if (!isNaN(idnum)) { + var ordinal = structure.getOrdinalById(idnum); + if (ordinal != null) { + var electroElement = structure.data[ordinal]; + if (electroElement != null) + return true; + } + } + } + return false; + }; + SituationPlanElement.prototype.needsTextMirroring = function () { + if (this.isEDSymbol()) { + var electroElement = structure.data[structure.getOrdinalById(Number(this.getElectroItemId()))]; + var type = electroElement.getType(); + if (['Contactdoos', 'Lichtpunt', 'Drukknop', 'Media', 'Schakelaars', 'Lichtcircuit'].includes(type)) + return true; + else + return false; + } + return true; + }; + SituationPlanElement.prototype.setAdres = function (adrestype, adres, adreslocation) { + this.adrestype = adrestype; + this.adreslocation = adreslocation; + if (this.adrestype === 'manueel') + this.adres = adres; + else + this.adres = null; + }; + SituationPlanElement.prototype.getAdresType = function () { + return this.adrestype; + }; + SituationPlanElement.prototype.getAdres = function () { + if (this.electroItemId == null) + return ""; + var id = this.electroItemId; + var element = structure.data[structure.getOrdinalById(id)]; + switch (this.adrestype) { + case 'auto': + return element.getReadableAdres(); + break; + case 'adres': + return "Adres"; + case 'manueel': + default: + return (this.adres == null) ? "" : this.adres; + } + }; + SituationPlanElement.prototype.getAdresLocation = function () { + return this.adreslocation; + }; + SituationPlanElement.prototype.setElectroItemId = function (id) { + this.electroItemId = id; + }; + SituationPlanElement.prototype.getElectroItemId = function () { + return this.electroItemId; + }; + SituationPlanElement.prototype.setSVG = function (svg) { + this.svg = svg; + this.getSizeFromString(); + }; + SituationPlanElement.prototype.getSVG = function () { + if (this.electroItemId != null) { + var ordinal = structure.getOrdinalById(this.electroItemId); + if (ordinal != null) { + var electroItem = structure.data[ordinal]; + electroItem.updateSituationPlanElement(this); + } + else { + return null; + } + } + function removeBeforeFirstSVG(input) { + var index = input.indexOf('= 90) && (rotate < 270)) { + if (this.needsTextMirroring()) + spiegel = true; + if (this.isEDSymbol()) + rotate = rotate + 180; + } + transform = "transform=\"rotate(".concat(rotate, " ").concat(this.posx, " ").concat(this.posy, ")").concat((spiegel ? ' scale(-1,1) translate(' + (-2 * this.posx) + ' 0)' : ''), "\""); + } + return "\n \n ").concat(svg, " \n "); + }; + 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'); + // Extract the height and width attributes + this.sizey = parseInt(svgElement.getAttribute('height')); + this.sizex = parseInt(svgElement.getAttribute('width')); + }; + SituationPlanElement.prototype.importFromFile = function (event, callback) { + var _this = this; + var file = event.target.files[0]; + if (file) { + var reader = new FileReader(); + reader.onload = function (e) { + var fileContent = e.target.result; + _this.svg = fileContent.toString(); + _this.getSizeFromString(); + callback(); + }; + reader.readAsText(file); // Read the file as a text string + } + }; + SituationPlanElement.prototype.toJsonObject = function () { + var svg = ((this.electroItemId != null) ? "" : this.svg); + return { + page: this.page, posx: this.posx, posy: this.posy, + sizex: this.sizex, sizey: this.sizey, + labelposx: this.labelposx, labelposy: this.labelposy, + adrestype: this.adrestype, adres: this.adres, adreslocation: this.adreslocation, + rotate: this.rotate, scale: this.scale, + svg: svg, electroItemId: this.electroItemId + }; + }; + SituationPlanElement.prototype.fromJsonObject = function (json) { + this.page = (json.page != null) ? json.page : 1; + this.posx = json.posx; + this.posy = json.posy; + this.labelposx = (json.labelposx != null) ? json.labelposx : this.posx + 20; + this.labelposy = (json.labelposy != null) ? json.labelposy : this.posy; + this.sizex = json.sizex; + this.sizey = json.sizey; + 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; + }; + return SituationPlanElement; +}()); function isDevMode() { var urlParams = new URLSearchParams(window.location.search); return urlParams.has('dev'); } function showSituationPlanPage() { - updateRibbon(); toggleAppView('draw'); + if (!(structure.sitplan)) { + structure.sitplan = new SituationPlan(); + } + ; + if (!(structure.sitplanview)) { + //First destroy all elements on the DOM with id starting with "SP_" to avoid any orphans being left from earlier exercises + var elements = document.querySelectorAll('[id^="SP_"]'); + elements.forEach(function (e) { return e.remove(); }); + //Then create the SituationPlanView + structure.sitplanview = new SituationPlanView(document.getElementById('outerbox'), document.getElementById('paper'), structure.sitplan); + } + ; + structure.sitplanview.updateRibbon(); + var spinner = document.createElement('div'); + spinner.classList.add('loading-spinner'); + document.getElementById('outerbox').appendChild(spinner); + requestAnimationFrame(function () { + requestAnimationFrame(function () { + render(); + }); + }); + function render() { + var start = performance.now(); + //structure.sitplanview.zoomToFit(); + structure.sitplanview.redraw(); + var end = performance.now(); + console.log("Update took ".concat(end - start, "ms")); + document.getElementById('outerbox').removeChild(spinner); + } } -function updateRibbon() { - var output = ""; - document.getElementById("ribbon").innerHTML = output; +var MouseDrag = /** @class */ (function () { + function MouseDrag() { + this.zoomfactor = 1; + } + MouseDrag.prototype.startDrag = function (mousex, mousey, startOffsetLeft, startOffsetTop, zoomfactor) { + this.startDragx = mousex; + this.startDragy = mousey; + this.startOffsetLeft = startOffsetLeft; + this.startOffsetTop = startOffsetTop; + this.zoomfactor = zoomfactor; + }; + MouseDrag.prototype.returnNewLeftTop = function (mousex, mousey) { + return ({ + left: (mousex - this.startDragx) / this.zoomfactor + this.startOffsetLeft, + top: (mousey - this.startDragy) / this.zoomfactor + this.startOffsetTop + }); + }; + return MouseDrag; +}()); +var EventManager = /** @class */ (function () { + function EventManager() { + this.listeners = []; + } + 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); + }; + 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 = []; + }; + EventManager.prototype.dispose = function () { + this.removeAllEventListeners(); + }; + return EventManager; +}()); +var SituationPlanView = /** @class */ (function () { + function SituationPlanView(outerbox, paper, sitplan) { + var _this = this; + this.zoomfactor = 1; + this.currentBox = null; + this.selectedBox = null; + this.boxes = {}; + this.startDrag = function (event) { + event.stopPropagation(); // Prevent body click event + _this.clearSelection(); // Clears any existing selection + _this.selectBox(event.target); // Selects the box we want to drag + _this.currentBox = event.target; // IS THIS NEEDED IF WE ALREADY HAVE SELECTEDBOX ???? + if (event.type === 'mousedown') { + _this.mousedrag.startDrag(event.clientX, event.clientY, _this.currentBox.offsetLeft, _this.currentBox.offsetTop, _this.zoomfactor); + } + else if (event.type === 'touchstart') { + var touch = event.touches[0]; + _this.mousedrag.startDrag(touch.clientX, touch.clientY, _this.currentBox.offsetLeft, _this.currentBox.offsetTop, _this.zoomfactor); + } + document.addEventListener('mousemove', _this.processDrag); + document.addEventListener('touchmove', _this.processDrag, { passive: false }); + document.addEventListener('mouseup', _this.stopDrag); + document.addEventListener('touchend', _this.stopDrag); + }; + this.stopDrag = function () { + document.removeEventListener('mousemove', _this.processDrag); + document.removeEventListener('touchmove', _this.processDrag); + document.removeEventListener('mouseup', _this.stopDrag); + document.removeEventListener('touchend', _this.stopDrag); + _this.currentBox = null; + undostruct.store(); + }; + this.processDrag = function (event) { + if (_this.currentBox) { + 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); + } + // Ensure the box stays within reasonable boundaries + newLeftTop.left = Math.max(-_this.currentBox.offsetWidth / 2, newLeftTop.left); + newLeftTop.top = Math.max(-_this.currentBox.offsetHeight / 2, newLeftTop.top); + _this.currentBox.picref.posx = newLeftTop.left + (_this.currentBox.offsetWidth / 2); + _this.currentBox.picref.posy = newLeftTop.top + (_this.currentBox.offsetHeight / 2); + _this.updateBoxPosition(_this.currentBox); + } + }; + this.outerbox = outerbox; + this.paper = paper; + this.sitplan = sitplan; + this.paper.style.transformOrigin = 'top left'; // Keep the origin point consistent when scaling + this.reloadSitPlan(); + this.mousedrag = new MouseDrag(); + this.zoomToFit(); + this.event_manager = new EventManager(); + // Remove red border when clicking on the body + this.event_manager.addEventListener(outerbox, 'mousedown', function () { _this.clearSelection(); }); + this.event_manager.addEventListener(outerbox, 'touchstart', function () { _this.clearSelection(); }); + } + SituationPlanView.prototype.dispose = function () { + this.event_manager.dispose(); + //loop over all situationplanelements and remove the corresponding boxes from 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(); + } + }; + SituationPlanView.prototype.attachDeleteButton = function (elem) { + var _this = this; + this.event_manager.addEventListener(elem, 'click', function () { _this.deleteBox(); undostruct.store(); }); + }; + ; + SituationPlanView.prototype.attachScaleButton = function (elem, increment) { + var _this = this; + this.event_manager.addEventListener(elem, 'click', function () { _this.scaleBox(increment); undostruct.store(); }); + }; + ; + SituationPlanView.prototype.attachRotateButton = function (elem, increment) { + var _this = this; + this.event_manager.addEventListener(elem, 'click', function () { _this.rotateBox(increment); undostruct.store(); }); + }; + ; + SituationPlanView.prototype.attachSendToBackButton = function (elem) { + var _this = this; + this.event_manager.addEventListener(elem, 'click', function () { _this.sendToBack(); }); + }; + ; + SituationPlanView.prototype.attachZoomButton = function (elem, increment) { + var _this = this; + this.event_manager.addEventListener(elem, 'click', function () { _this.zoom(increment); }); + }; + ; + SituationPlanView.prototype.attachZoomToFitButton = function (elem) { + var _this = this; + this.event_manager.addEventListener(elem, 'click', function () { _this.zoomToFit(); }); + }; + ; + SituationPlanView.prototype.attachAddElementFromFileButton = function (elem, fileinput) { + var _this = this; + this.event_manager.addEventListener(elem, 'click', function () { fileinput.click(); }); + this.event_manager.addEventListener(fileinput, 'change', function (event) { + var element = _this.sitplan.addElementFromFile(event, _this.sitplan.activePage, 550, 300, (function () { + _this.reloadSitPlan(); + _this.selectBox(element.boxref); + _this.redraw(); + undostruct.store(); + }).bind(_this)); + }); + }; + SituationPlanView.prototype.attachAddElectroItemButton = function (elem) { + var _this = this; + this.event_manager.addEventListener(elem, 'click', function () { + // Display an html input dialog in the browser and ask for a number, return the number as variable id + SituationPlanView_ElementPropertiesPopup(null, function (id, adrestype, adres, adreslocation, scale, rotate) { + if (id != null) { + var element = _this.sitplan.addElectroItem(id, _this.sitplan.activePage, 550, 300, adrestype, adres, adreslocation, scale, rotate); + if (element != null) { + _this.reloadSitPlan(); + _this.selectBox(element.boxref); + _this.redraw(); + undostruct.store(); + } + } + else { + alert('Geen geldig ID ingegeven!'); + } + }); + }); + }; + SituationPlanView.prototype.attachEditButton = function (elem) { + var _this = this; + this.event_manager.addEventListener(elem, 'click', function () { + if (_this.selectedBox) { + var id = _this.selectedBox.id; + var pic_1 = _this.selectedBox.picref; + SituationPlanView_ElementPropertiesPopup(pic_1, function (id, adrestype, adres, adreslocation, scale, rotate) { + if (id != null) { + pic_1.setElectroItemId(id); + pic_1.setAdres(adrestype, adres, adreslocation); + } + pic_1.scale = scale; + pic_1.rotate = rotate; + _this.updateBoxContent(_this.selectedBox); //content needs to be updated first to know the size of the box + _this.updateBoxPosition(_this.selectedBox); + undostruct.store(); + }); + } + }); + }; + SituationPlanView.prototype.makeBox = function (element) { + var box = document.createElement('div'); + box.id = element.id; + box.className = "box"; + box.picref = element; // We add an extra property to the DOM to be able to find back our data from within the browser + element.boxref = box; + var boxlabel = document.createElement('div'); + boxlabel.className = "boxlabel"; + boxlabel.innerHTML = element.getAdres(); + element.boxlabelref = boxlabel; + this.paper.append(box); + this.paper.append(boxlabel); + this.updateBoxContent(box); //content needs to be updated first to know the size of the box + this.updateBoxPosition(box); + box.addEventListener('mousedown', this.startDrag); + box.addEventListener('touchstart', this.startDrag); + box.addEventListener('touchend', this.stopDrag); + return box; + }; + SituationPlanView.prototype.deleteBox = function () { + if (this.selectedBox) { + var id = this.selectedBox.id; + var picref = this.selectedBox.picref; + this.selectedBox.remove(); + if (picref.boxlabelref != null) + picref.boxlabelref.remove(); + this.sitplan.removeElement(picref); + this.selectedBox = null; + } + }; + SituationPlanView.prototype.scaleBox = function (increment) { + if (this.selectedBox) { + this.selectedBox.picref.scale = Math.min(Math.max(0.1, this.selectedBox.picref.scale + increment), 1000); + this.updateBoxContent(this.selectedBox); //content needs to be updated first to know the size of the box + this.updateBoxPosition(this.selectedBox); + } + }; + SituationPlanView.prototype.rotateBox = function (degrees) { + if (this.selectedBox) { + var id = this.selectedBox.id; + var pic = this.selectedBox.picref; + pic.rotate = (pic.rotate + degrees) % 360; + this.selectedBox.style.transform = "rotate(".concat(pic.rotate, "deg)"); + } + }; + SituationPlanView.prototype.sendToBack = function () { + if (this.selectedBox) { + var boxes = this.paper.querySelectorAll('.box'); + var newzIndex = 0; + for (var _i = 0, _a = Array.from(boxes); _i < _a.length; _i++) { + var box = _a[_i]; + box.style.zIndex = ((parseInt(box.style.zIndex) || 0) + 1).toString(); + } + newzIndex--; + this.selectedBox.style.zIndex = "0"; + } + }; + SituationPlanView.prototype.updateBoxPosition = function (box) { + var pic = box.picref; + box.style.left = ((pic.posx - pic.sizex * pic.scale / 2 - SITPLANVIEW_SELECT_PADDING)).toString() + "px"; + box.style.top = ((pic.posy - pic.sizey * pic.scale / 2 - SITPLANVIEW_SELECT_PADDING)).toString() + "px"; + box.style.width = ((pic.sizex * pic.scale + SITPLANVIEW_SELECT_PADDING * 2)).toString() + "px"; + box.style.height = ((pic.sizey * pic.scale + SITPLANVIEW_SELECT_PADDING * 2)).toString() + "px"; + var rotate = pic.rotate; + var spiegel = false; + rotate = rotate % 360; + if ((rotate >= 90) && (rotate < 270)) { + if (pic.needsTextMirroring()) + spiegel = true; + if (pic.isEDSymbol()) + rotate = rotate - 180; + } + box.style.transform = "rotate(".concat(rotate, "deg)") + (spiegel /*pic.mirror*/ ? ' scaleX(-1)' : ''); + if (pic != null) { + var boxlabel = pic.boxlabelref; + if (boxlabel != null) { + pic.labelsizex = boxlabel.offsetWidth; + pic.labelsizey = boxlabel.offsetHeight; + switch (pic.adreslocation) { + case 'links': { + var rotate_1 = Math.abs(pic.rotate) % 180; + if (rotate_1 > 90) + rotate_1 = 180 - rotate_1; + var offset1 = (pic.sizex / 2 * pic.scale + SITPLANVIEW_SELECT_PADDING) / (Math.cos(rotate_1 / 180 * Math.PI)); + var offset2 = (pic.sizey / 2 * pic.scale + SITPLANVIEW_SELECT_PADDING) / (Math.cos((90 - rotate_1) / 180 * Math.PI)); + var offset = Math.min(offset1, offset2); + boxlabel.style.left = (pic.posx - offset - boxlabel.offsetWidth) + 'px'; + boxlabel.style.top = (pic.posy - boxlabel.offsetHeight / 2) + 'px'; + pic.labelposx = (pic.posx - offset - boxlabel.offsetWidth / 2); + pic.labelposy = (pic.posy + 1); + break; + } + case 'rechts': { + var rotate_2 = Math.abs(pic.rotate) % 180; + if (rotate_2 > 90) + rotate_2 = 180 - rotate_2; + var offset1 = (pic.sizex / 2 * pic.scale + SITPLANVIEW_SELECT_PADDING) / (Math.cos(rotate_2 / 180 * Math.PI)); + var offset2 = (pic.sizey / 2 * pic.scale + SITPLANVIEW_SELECT_PADDING) / (Math.cos((90 - rotate_2) / 180 * Math.PI)); + var offset = Math.min(offset1, offset2); + boxlabel.style.left = (pic.posx + offset + 0) + 'px'; + boxlabel.style.top = ((pic.posy) - boxlabel.offsetHeight / 2) + 'px'; + pic.labelposx = (pic.posx + offset + boxlabel.offsetWidth / 2); + pic.labelposy = (pic.posy + 1); + break; + } + case 'boven': { + var rotate_3 = Math.abs(pic.rotate) % 180; + if (rotate_3 > 90) + rotate_3 = 180 - rotate_3; + var offset1 = (pic.sizey / 2 * pic.scale + SITPLANVIEW_SELECT_PADDING) / (Math.cos(rotate_3 / 180 * Math.PI)); + var offset2 = (pic.sizex / 2 * pic.scale + SITPLANVIEW_SELECT_PADDING) / (Math.cos((90 - rotate_3) / 180 * Math.PI)); + var offset = Math.min(offset1, offset2); + boxlabel.style.left = ((pic.posx) - boxlabel.offsetWidth / 2) + 'px'; + boxlabel.style.top = ((pic.posy - offset) - boxlabel.offsetHeight * 0.8) + 'px'; + pic.labelposx = (pic.posx); + pic.labelposy = (pic.posy - offset - boxlabel.offsetHeight * 0.5 / 2); + break; + } + case 'onder': { + var rotate_4 = Math.abs(pic.rotate) % 180; + if (rotate_4 > 90) + rotate_4 = 180 - rotate_4; + var offset1 = (pic.sizey / 2 * pic.scale + SITPLANVIEW_SELECT_PADDING) / (Math.cos(rotate_4 / 180 * Math.PI)); + var offset2 = (pic.sizex / 2 * pic.scale + SITPLANVIEW_SELECT_PADDING) / (Math.cos((90 - rotate_4) / 180 * Math.PI)); + var offset = Math.min(offset1, offset2); + boxlabel.style.left = ((pic.posx) - boxlabel.offsetWidth / 2) + 'px'; + boxlabel.style.top = ((pic.posy + offset) - boxlabel.offsetHeight * 0.2) + 'px'; + pic.labelposx = (pic.posx); + pic.labelposy = (pic.posy + offset + boxlabel.offsetHeight * 0.7 / 2); + break; + } + } + } + } + }; + SituationPlanView.prototype.updateBoxContent = function (box) { + var pic = box.picref; + var svg = pic.getScaledSVG(); + if (svg != null) + box.innerHTML = pic.getScaledSVG(); + if (pic.boxlabelref != null) { + var adres = pic.getAdres(); + if (adres != null) + pic.boxlabelref.innerHTML = adres; + } + }; + SituationPlanView.prototype.clearSelection = function () { + var boxes = document.querySelectorAll('.box'); + boxes.forEach(function (b) { return b.classList.remove('selected'); }); + this.selectedBox = null; + }; + SituationPlanView.prototype.selectBox = function (box) { + box.classList.add('selected'); + this.selectedBox = box; + }; + SituationPlanView.prototype.reloadSitPlan = function () { + for (var _i = 0, _a = this.sitplan.elements; _i < _a.length; _i++) { + var element = _a[_i]; + if (element.electroItemId != null) { + var ordinal = structure.getOrdinalById(element.electroItemId); + if (ordinal == null) { + this.sitplan.removeElement(element); + this.reloadSitPlan(); // Go to the next element in the loop + return; + } + } + if (this.boxes[element.id] === undefined) { + this.boxes[element.id] = this.makeBox(element); + } + } + }; + SituationPlanView.prototype.redraw = function () { + this.reloadSitPlan(); + for (var _i = 0, _a = this.sitplan.elements; _i < _a.length; _i++) { + var element = _a[_i]; + this.updateBoxContent(element.boxref); //content needs to be updated first to know the size of the box + this.updateBoxPosition(element.boxref); + } + this.updateRibbon(); + }; + SituationPlanView.prototype.selectPage = function (page) { + this.sitplan.activePage = page; + 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(); + }; + SituationPlanView.prototype.setzoom = function (factor) { + this.zoomfactor = Math.min(Math.max(SITPLANVIEW_ZOOMINTERVAL.MIN, factor), SITPLANVIEW_ZOOMINTERVAL.MAX); + this.paper.style.transform = "scale(".concat(this.zoomfactor, ")"); + }; + SituationPlanView.prototype.zoom = function (increment) { + this.setzoom(this.zoomfactor + increment); + }; + SituationPlanView.prototype.zoomToFit = function () { + var paperwidth = this.paper.offsetWidth; + var paperheight = this.paper.offsetHeight; + var outerwidth = this.outerbox.offsetWidth; + var outerheight = this.outerbox.offsetHeight; + var zoomfactor = Math.min((outerwidth - 20) / (paperwidth), (outerheight - 20) / (paperheight)); + this.setzoom(zoomfactor); + }; + SituationPlanView.prototype.updateRibbon = function () { + var _this = this; + var outputleft = ""; + var outputright = ""; + // -- Undo/redo buttons -- + outputleft += "\n
0 ? "" : "style=\"filter: opacity(45%)\""), ">\n \"Ongedaan\n Ongedaan maken\n
\n
0 ? "" : "style=\"filter: opacity(45%)\""), ">\n \"Opnieuw\"\n Opnieuw\n
\n \n "); + // -- Visuals om items te laden of verwijderen -- + outputleft += ''; + outputleft += "\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 \uD83D\uDCDD\n Bewerk\n
\n "; + // -- Visuals om naar achteren te sturen -- + outputleft += "\n \n
\n \u2B07\u2B07\n Naar achter\n
\n "; + // -- Visuals om pagina te selecteren -- + outputleft += '
Pagina ' + + '
'; + outputleft += ''; + outputleft += ''; + outputleft += '
'; + // -- Visuals om pagina te zoomen -- + outputright += ''; + outputright += "\uD83D\uDD0D\n \n \n "; + outputright += ''; + outputright += ''; + // -- Put everything in the ribbon -- + document.getElementById("ribbon").innerHTML = "
".concat(outputleft, "
").concat(outputright, "
"); + // -- Actions om printen te testen -- + var myPrintButton = document.getElementById('myPrint'); + myPrintButton.onclick = function () { + function openSVGInNewTab(str) { + var blob = new Blob([str], { type: 'image/svg+xml' }); + var url = URL.createObjectURL(blob); + window.open(url, '_blank'); + } + var SVGstr = _this.sitplan.toSVG(); + openSVGInNewTab(SVGstr); + }; + // -- Actions om pagina te selecteren -- + document.getElementById('id_sitplanpage').onchange = function (event) { + var target = event.target; + _this.selectPage(Number(target.value)); + }; + document.getElementById('btn_sitplan_addpage').onclick = function () { + _this.sitplan.numPages++; + _this.selectPage(_this.sitplan.numPages); + }; + document.getElementById('btn_sitplan_delpage').onclick = function () { + var userConfirmation = confirm('Pagina ' + _this.sitplan.activePage + ' volledig verwijderen?'); + if (userConfirmation) { + _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')); + /*this.attachScaleButton(document.getElementById('scale_up_10'), 0.1); + this.attachScaleButton(document.getElementById('scale_down_10'), -0.1); + this.attachScaleButton(document.getElementById('scale_up_100'), 1); + this.attachScaleButton(document.getElementById('scale_down_100'), -1); + + this.attachRotateButton(document.getElementById('button_rotate_left_90'), -90); + this.attachRotateButton(document.getElementById('button_rotate_right_90'), 90); + this.attachRotateButton(document.getElementById('button_rotate_left_10'), -10); + this.attachRotateButton(document.getElementById('button_rotate_right_10'), 10);*/ + // -- Actions om naar achteren te sturen -- + this.attachSendToBackButton(document.getElementById('sendBack')); + // -- 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; +}()); +function SituationPlanView_ElementPropertiesPopup(sitplanElement, callbackOK) { + var div = document.createElement('div'); + div.innerHTML = "\n
\n
\n
\n \n \n
\n
\n \n \n
\n
\n \n \n
\n
\n
\n \n \n
\n
\n \n \n \n
\n
\n \n \n
\n
\n \n \n
\n
\n \n \n
\n
\n
"); + var popupOverlay = div.querySelector('#popupOverlay'); + var popupWindow = popupOverlay.querySelector('#popupWindow'); + var selectKringContainer = popupWindow.querySelector('#selectKringContainer'); + var selectElectroItemContainer = popupWindow.querySelector('#selectElectroItemContainer'); + var textContainer = popupWindow.querySelector('#textContainer'); + var selectContainer = popupWindow.querySelector('#selectContainer'); + var adresContainer = popupWindow.querySelector('#adresContainer'); + var KringSelect = popupWindow.querySelector('#KringSelect'); + var selectElectroItemBox = popupWindow.querySelector('#selectElectroItemBox'); + var textInput = popupWindow.querySelector('#textInput'); + var feedback = popupWindow.querySelector('#feedback'); + var selectBox = popupWindow.querySelector('#selectBox'); + var adresInput = popupWindow.querySelector('#adresInput'); + var selectAdresLocation = popupWindow.querySelector('#selectAdresLocation'); + var scaleInput = popupWindow.querySelector('#scaleInput'); + var rotationInput = popupWindow.querySelector('#rotationInput'); + var okButton = popupWindow.querySelector('#okButton'); + var cancelButton = popupWindow.querySelector('#cancelButton'); + var adressen = SituationPlanView_Kringen(); + var kringnamen = adressen.getUniqueSortedKringnaam(); + function selectBoxChanged() { + var id = Number(textInput.value); + updateElectroType(); + var element = structure.data[structure.getOrdinalById(id)]; + switch (selectBox.value) { + case 'auto': + adresInput.value = (element != null ? element.getReadableAdres() : ''); + adresInput.disabled = true; + break; + case 'adres': + adresInput.value = (element != null ? (element.props.adres != null ? 'Adres' : '') : ''); + adresInput.disabled = true; + break; + case 'manueel': + adresInput.value = (element != null ? adresInput.value : ''); + adresInput.disabled = false; + break; + } + } + //-- Select Kring -- + function rePopulateKringSelect() { + KringSelect.innerHTML = ''; // Clear all options + 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; + KringSelect.appendChild(option); + } + } + function initKringSelect(id) { + if (id === void 0) { id = null; } + rePopulateKringSelect(); + if ((id == null) && (sitplanElement != null) && (sitplanElement.getElectroItemId() != null)) { + id = sitplanElement.getElectroItemId(); + } + if (id != null) + KringSelect.value = structure.findKringName(id); + KringSelect.onchange = KringSelectChanged; + } + function KringSelectChanged() { + rePopulateElectroItemBox(); + selectElectroItemBoxChanged(); + } + //-- Select ElectroItem -- + function rePopulateElectroItemBox() { + var electroItems = adressen.getElectroItemsByKring(KringSelect.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 = electroItems[i].adres + ' | ' + electroItems[i].type; + selectElectroItemBox.appendChild(option); + } + } + function initElectroItemBox(id) { + if (id === void 0) { id = null; } + rePopulateElectroItemBox(); + var electroItems = adressen.getElectroItemsByKring(KringSelect.value); + if ((id == null) && (sitplanElement != null) && (sitplanElement.getElectroItemId() != null)) { + id = sitplanElement.getElectroItemId(); + } + if (id != 0) { + for (var i = 0; i < electroItems.length; ++i) { + if (electroItems[i].id == id) + selectElectroItemBox.value = String(i); + } + } + selectElectroItemBox.onchange = selectElectroItemBoxChanged; + } + function selectElectroItemBoxChanged() { + rePopulateIdField(); + selectBox.value = 'auto'; + selectBoxChanged(); + } + //-- ID field -- + function rePopulateIdField() { + var str = ''; + var electroItems = adressen.getElectroItemsByKring(KringSelect.value); + var idx = Number(selectElectroItemBox.value); + if (!isNaN(idx)) { + var item = electroItems[idx]; + if (item != null) + str = electroItems[idx].id; + } + textInput.value = str; + } + function initIdField() { + if (sitplanElement != null) { + if (sitplanElement.getElectroItemId() != null) + textInput.value = String(sitplanElement.getElectroItemId()); + } + else + rePopulateIdField(); + textInput.oninput = IdFieldChanged; + } + function IdFieldChanged() { + if (textInput.value != null) { + textInput.value = textInput.value.replace(/[^0-9]/g, ''); + var id = Number(textInput.value); + updateElectroType(); + if (structure.data[structure.getOrdinalById(id)] != null) { + initKringSelect(id); + initElectroItemBox(id); + selectBox.value = 'auto'; + selectBoxChanged(); + } + } + ; + } + // -- + function updateElectroType() { + if (textInput.value == null || textInput.value.trim() == '') + feedback.innerHTML = 'Geen ID ingegeven'; + else { + var id = Number(textInput.value); + var element = structure.data[structure.getOrdinalById(id)]; + if (element != null) { + feedback.innerHTML = '' + element.getType() + ''; + } + else { + feedback.innerHTML = 'Element niet gevonden'; + } + } + } + // Function to show the popup + 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 + } + // Function to close the popup + function closePopup() { + popupOverlay.style.visibility = 'hidden'; + document.body.style.pointerEvents = 'auto'; // Re-enable interactions with the background + div.remove(); + } + var handleEnterKey = function (event) { + if (event.key === 'Enter') + okButton.click(); + }; + initKringSelect(); + initElectroItemBox(); + initIdField(); + if (sitplanElement != null) { // Form werd aangeroepen om een reeds bestaand element te editeren + if (sitplanElement.getElectroItemId() != null) { // Het gaat over een bestaand Electro-item + selectBox.value = sitplanElement.getAdresType(); + adresInput.value = sitplanElement.getAdres(); + selectAdresLocation.value = sitplanElement.getAdresLocation(); + selectBoxChanged(); + } + else { // Het gaat over een geimporteerde CSV + //textInput.value = ''; + selectKringContainer.style.display = 'none'; + selectElectroItemContainer.style.display = 'none'; + textContainer.style.display = 'none'; + selectContainer.style.display = 'none'; + adresContainer.style.display = 'none'; + } + scaleInput.value = String(sitplanElement.scale * 100); + rotationInput.value = String(sitplanElement.rotate); + } + else { // Form werd aangeroepen om een nieuw element te creëren + selectBoxChanged(); + scaleInput.value = String(SITPLANVIEW_DEFAULT_SCALE * 100); + rotationInput.value = '0'; + selectAdresLocation.value = 'rechts'; + } + textInput.onkeydown = handleEnterKey; + adresInput.onkeydown = handleEnterKey; + scaleInput.onkeydown = handleEnterKey; + rotationInput.onkeydown = handleEnterKey; + textInput.onblur = selectBoxChanged; + selectBox.onchange = selectBoxChanged; + okButton.onclick = function () { + var returnId = (textInput.value.trim() == '' ? null : Number(textInput.value)); + closePopup(); // We close the popup first to avoid that an error somewhere leaves it open + callbackOK(returnId, selectBox.value, adresInput.value, selectAdresLocation.value, Number(scaleInput.value) / 100, Number(rotationInput.value)); + }; + cancelButton.onclick = function () { + closePopup(); + }; + // Immediately invoke the select functions to set the initial state + //selectBoxChanged(); + document.body.appendChild(div); + showPopup(); +} +function SituationPlanView_Kringen() { + var excludedTypes = ['Aansluiting', 'Bord', 'Kring', 'Domotica', 'Domotica module (verticaal)', 'Domotica gestuurde verbruiker', + 'Leiding', 'Splitsing', 'Verlenging', 'Vrije ruimte', 'Meerdere verbruikers']; + // Aansluiting is wel toegelaten in Trikker en willen we wellicht later toelaten + var output = {}; + output.alldata = []; + output.getUniqueSortedKringnaam = function () { + var uniqueKringnaamArray = []; + for (var i = 0; i < output.alldata.length; i++) { + if (uniqueKringnaamArray.indexOf(output.alldata[i].kringnaam) === -1) + uniqueKringnaamArray.push(output.alldata[i].kringnaam); + } + return uniqueKringnaamArray; + }; + output.getElectroItemsByKring = function (kringnaam) { + var electroItemArray = []; + for (var i = 0; i < output.alldata.length; i++) { + if (output.alldata[i].kringnaam === kringnaam) { + electroItemArray.push({ id: output.alldata[i].id, adres: output.alldata[i].adres, type: output.alldata[i].type }); + } + ; + } + return electroItemArray; + }; + for (var i = 0; i < structure.length; i++) { + if (structure.active[i]) { + var id = structure.id[i]; + var kringnaam = structure.findKringName(id).trim(); + if (kringnaam != '') { + var type = structure.data[i].getType(); + if (excludedTypes.indexOf(type) === -1) { + var adres = structure.data[i].getReadableAdres(); + output.alldata.push({ id: id, kringnaam: kringnaam, adres: adres, type: type }); + } + } + } + } + return output; } var List_Item = /** @class */ (function () { // -- Constructor -- @@ -1792,6 +2934,34 @@ var Electro_Item = /** @class */ (function (_super) { }; // -- This one will get called if the type of the Electro_Item has not yet been chosen -- Electro_Item.prototype.toHTML = function (mode) { return (this.toHTMLHeader(mode)); }; // Implemented in the derived classes + // -- Get the number of the Electro_Item, if it is not defined, ask the parent + Electro_Item.prototype.getnr = function () { + var parent = this.getParent(); + if (parent != null) { + switch (parent.getType()) { + case "Kring": + case "Domotica module (verticaal)": + return this.props.nr; + default: + return parent.getnr(); + } + } + else { + return ""; + } + ; + }; + // -- Get readable address of the Electro_Item, if it is not defined, ask the parent -- + Electro_Item.prototype.getReadableAdres = function () { + var kringname = structure.findKringName(this.id).trim(); + var nr = this.getnr().trim(); + if (kringname == "") + return nr; + else if (nr == "") + return kringname; + else + return kringname + "." + nr; + }; // -- Display the number in the html tree view, but only if it is displayable Electro_Item.prototype.nrToHtml = function () { var str = ""; @@ -1813,7 +2983,7 @@ var Electro_Item = /** @class */ (function (_super) { if (starty === void 0) { starty = 60; } if (godown === void 0) { godown = 15; } if (shiftx === void 0) { shiftx = 0; } - var returnstr; + var returnstr = ""; if (!(/^\s*$/.test(this.props.adres))) { //check if adres contains only white space returnstr = '' + htmlspecialchars(this.props.adres) + ''; mySVG.ydown = mySVG.ydown + godown; @@ -1821,7 +2991,42 @@ var Electro_Item = /** @class */ (function (_super) { return returnstr; }; // -- Make the SVG for the electro item, placeholder for derived classes -- - Electro_Item.prototype.toSVG = function () { return (new SVGelement()); }; //Placeholder for derived classes + Electro_Item.prototype.toSVG = function (sitplan, mirror) { + if (sitplan === void 0) { sitplan = false; } + if (mirror === void 0) { mirror = false; } + return (new SVGelement()); + }; //Placeholder for derived classes + /** ToSituationPlanElement + * + * @returns {SituationPlanElement} The SituationPlanElement that represents this Electro_Item + */ + Electro_Item.prototype.toSituationPlanElement = function () { + var myElement = new SituationPlanElement(1, 0, 0, 0, 0, 0, 1, randomId("SP_"), ""); + this.updateSituationPlanElement(myElement); + return (myElement); + }; + Electro_Item.prototype.updateSituationPlanElement = function (myElement) { + var spiegeltext = false; + var rotate = myElement.rotate % 360; + if ((rotate >= 90) && (rotate < 270)) + spiegeltext = true; + var mySVGElement = this.toSVG(true, spiegeltext); + var sizex = mySVGElement.xright + mySVGElement.xleft + 10; + var sizey = mySVGElement.yup + mySVGElement.ydown; + var clipleft = 0; + if (['Contactdoos', 'Bel'].includes(this.getType())) { + clipleft = 0; + } + else { + clipleft = 12; + } + var addright = 0; + myElement.setSVG("") + + SVGSymbols.outputSVGSymbols() + + mySVGElement.data + + ''); + myElement.getSizeFromString(); + }; return Electro_Item; }(List_Item)); var Schakelaar = /** @class */ (function () { @@ -1831,6 +3036,8 @@ var Schakelaar = /** @class */ (function () { if (signalisatielamp === void 0) { signalisatielamp = false; } if (trekschakelaar === void 0) { trekschakelaar = false; } if (aantal === void 0) { aantal = 1; } + this.sitplan = false; + this.mirrortext = false; this.type = type; this.halfwaterdicht = halfwaterdicht; this.verklikkerlamp = verklikkerlamp; @@ -1843,8 +3050,13 @@ var Schakelaar = /** @class */ (function () { var outputstr = ""; if (this.signalisatielamp) outputstr += ''; - if (this.halfwaterdicht) - outputstr += 'h'; + if (this.halfwaterdicht) { + var textoptions = 'style="text-anchor:middle" font-family="Arial, Helvetica, sans-serif" font-size="10"'; + if (this.mirrortext == false) + outputstr += "h"); + else + outputstr += "h"); + } if (this.verklikkerlamp) outputstr += ''; if (this.trekschakelaar) { @@ -1948,8 +3160,13 @@ var Schakelaar = /** @class */ (function () { var endx = startx + 30; outputstr += '' + ''; - if (this.halfwaterdicht) - outputstr += 'h'; + if (this.halfwaterdicht) { + var textoptions = 'style="text-anchor:middle" font-family="Arial, Helvetica, sans-serif" font-size="10"'; + if (this.mirrortext == false) + outputstr += "h"); + else + outputstr += "h"); + } return ({ endx: endx, str: outputstr, lowerbound: null }); }; Schakelaar.prototype.magneetcontacttoDrawReturnObj = function (startx) { @@ -1957,7 +3174,11 @@ var Schakelaar = /** @class */ (function () { var endx = startx + 20; // Alles naar beneden schuiven als we het aantal laders boven het symbool willen plaatsen if (this.aantal > 1) { - outputstr += 'x' + htmlspecialchars(this.aantal) + ''; + var textoptions = 'style="text-anchor:middle" font-family="Arial, Helvetica, sans-serif" font-size="10"'; + if (this.mirrortext == false) + outputstr += "x").concat(htmlspecialchars(this.aantal), ""); + else + outputstr += "x").concat(htmlspecialchars(this.aantal), ""); } outputstr += '' + ''; @@ -1980,11 +3201,15 @@ var Schakelaar = /** @class */ (function () { else return 0; }; - Schakelaar.prototype.toSVGString = function (startx, last) { + Schakelaar.prototype.toSVGString = function (startx, last, sitplan, mirrortext) { var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v; + if (sitplan === void 0) { sitplan = false; } + if (mirrortext === void 0) { mirrortext = false; } var outputstr = ""; var endx; var lowerbound = 20; + this.sitplan = sitplan; + this.mirrortext = mirrortext; switch (this.type) { case "enkel": (_a = (this.enkeltoDrawReturnObj(startx)), endx = _a.endx, outputstr = _a.str); @@ -2258,8 +3483,10 @@ var Schakelaars = /** @class */ (function (_super) { break; } }; - Schakelaars.prototype.toSVG = function () { + Schakelaars.prototype.toSVG = function (sitplan, mirrortext) { var _a; + if (sitplan === void 0) { sitplan = false; } + if (mirrortext === void 0) { mirrortext = false; } var mySVG = new SVGelement(); var tekenKeten = []; // Eerst maken we een keten van unieke schakelaars. De aantallen worden hier vervangen door individuele elementen in een array @@ -2270,18 +3497,21 @@ var Schakelaars = /** @class */ (function (_super) { for (var i = 0; i < tekenKeten.length; i++) { var islast = ((i == tekenKeten.length - 1) && (!this.heeftVerbruikerAlsKind())); var str = void 0; - (_a = tekenKeten[i].toSVGString(startx, islast), startx = _a.endx, str = _a.str, lowerbound = _a.lowerbound); + (_a = tekenKeten[i].toSVGString(startx, islast, sitplan, mirrortext), startx = _a.endx, str = _a.str, lowerbound = _a.lowerbound); mySVG.data += str; } // Voor bepaalde symbolen moet wat extra ruimte rechts voorzien worden om te vermijden dat de tekening door de volgende kring loopt - if (!this.heeftVerbruikerAlsKind()) - startx += tekenKeten[tekenKeten.length - 1].extraPlaatsRechts(); + if ((!this.heeftVerbruikerAlsKind()) || (sitplan)) { + var extra = tekenKeten[tekenKeten.length - 1].extraPlaatsRechts(); + if (sitplan) + extra = Math.max(0, extra - 5); + startx += extra; + } mySVG.xleft = 1; // foresee at least some space for the conductor mySVG.xright = startx - 2; mySVG.yup = 25; mySVG.ydown = 25; - mySVG.data += this.addAddressToSVG(mySVG, 25 + lowerbound, Math.max(0, lowerbound - 20)); - mySVG.data += "\n"; + mySVG.data += (sitplan ? '' : this.addAddressToSVG(mySVG, 25 + lowerbound, Math.max(0, lowerbound - 20))); return (mySVG); }; return Schakelaars; @@ -2337,8 +3567,10 @@ var Lichtcircuit = /** @class */ (function (_super) { output += ", Adres/tekst: " + this.stringPropToHTML('adres', 5); return (output); }; - Lichtcircuit.prototype.toSVG = function () { + Lichtcircuit.prototype.toSVG = function (sitplan, mirrortext) { var _a; + if (sitplan === void 0) { sitplan = false; } + if (mirrortext === void 0) { mirrortext = false; } var mySVG = new SVGelement(); var tekenKeten = []; // Eerst maken we een keten van unieke schakelaars. De aantallen worden hier vervangen door individuele elementen in een array @@ -2350,7 +3582,7 @@ var Lichtcircuit = /** @class */ (function (_super) { for (var i = 0; i < tekenKeten.length; i++) { var islast = ((i == tekenKeten.length - 1) && (!this.heeftVerbruikerAlsKind())); var str = void 0; - (_a = tekenKeten[i].toSVGString(startx, islast), startx = _a.endx, str = _a.str, lowerbound = _a.lowerbound); + (_a = tekenKeten[i].toSVGString(startx, islast, sitplan, mirrortext), startx = _a.endx, str = _a.str, lowerbound = _a.lowerbound); mySVG.data += str; } if (this.props.aantal_lichtpunten >= 1) { //1 of meerdere lampen @@ -2368,8 +3600,13 @@ var Lichtcircuit = /** @class */ (function (_super) { else if (parseInt(this.props.aantal_lichtpunten) > 1) { print_str_upper = "x" + this.props.aantal_lichtpunten; } - if (print_str_upper != "") - mySVG.data += '' + htmlspecialchars(print_str_upper) + ''; + if (print_str_upper != "") { + var textoptions = 'style="text-anchor:middle" font-family="Arial, Helvetica, sans-serif" font-size="10"'; + if (mirrortext == false) + mySVG.data += "").concat(htmlspecialchars(print_str_upper), ""); + else + mySVG.data += "").concat(htmlspecialchars(print_str_upper), ""); + } // Teken een leiding achter de lamp indien er nog kinderen zijn if (this.heeftVerbruikerAlsKind()) mySVG.data += ''; @@ -2379,15 +3616,18 @@ var Lichtcircuit = /** @class */ (function (_super) { } else { //Geen lampen // Voor bepaalde symbolen moet wat extra ruimte rechts voorzien worden om te vermijden dat de tekening door de volgende kring loopt - if ((!this.heeftVerbruikerAlsKind()) && (tekenKeten.length > 0)) - startx += tekenKeten[tekenKeten.length - 1].extraPlaatsRechts(); + if ((!this.heeftVerbruikerAlsKind() || sitplan) && (tekenKeten.length > 0)) { + var extra = tekenKeten[tekenKeten.length - 1].extraPlaatsRechts(); + if (sitplan) + extra = Math.max(0, extra - 5); + startx += extra; + } } mySVG.xleft = 1; // foresee at least some space for the conductor mySVG.xright = startx - 2; mySVG.yup = 25; mySVG.ydown = 25; - mySVG.data += this.addAddressToSVG(mySVG, 25 + lowerbound, Math.max(0, lowerbound - 20)); - mySVG.data += "\n"; + mySVG.data += (sitplan ? '' : this.addAddressToSVG(mySVG, 25 + lowerbound, Math.max(0, lowerbound - 20))); return (mySVG); }; return Lichtcircuit; @@ -2745,16 +3985,16 @@ var Aansluitpunt = /** @class */ (function (_super) { output += "Adres/tekst: " + this.stringPropToHTML('adres', 5); return (output); }; - Aansluitpunt.prototype.toSVG = function () { + Aansluitpunt.prototype.toSVG = function (sitplan) { + if (sitplan === void 0) { sitplan = false; } var mySVG = new SVGelement(); mySVG.xleft = 1; // foresee at least some space for the conductor mySVG.xright = 29; mySVG.yup = 25; mySVG.ydown = 25; - mySVG.data += '' + mySVG.data += (sitplan ? "" : '') + ''; - mySVG.data += this.addAddressToSVG(mySVG, 45, 0); - mySVG.data += "\n"; + mySVG.data += (sitplan ? "" : this.addAddressToSVG(mySVG, 45, 0)); return (mySVG); }; return Aansluitpunt; @@ -2780,16 +4020,16 @@ var Aftakdoos = /** @class */ (function (_super) { output += "Adres/tekst: " + this.stringPropToHTML('adres', 5); return (output); }; - Aftakdoos.prototype.toSVG = function () { + Aftakdoos.prototype.toSVG = function (sitplan) { + if (sitplan === void 0) { sitplan = false; } var mySVG = new SVGelement(); mySVG.xleft = 1; // foresee at least some space for the conductor mySVG.xright = 49; mySVG.yup = 25; mySVG.ydown = 25; - mySVG.data += '' + mySVG.data += (sitplan ? "" : '') + ''; - mySVG.data += this.addAddressToSVG(mySVG, 55, 10); - mySVG.data += "\n"; + mySVG.data += (sitplan ? "" : this.addAddressToSVG(mySVG, 55, 10)); return (mySVG); }; return Aftakdoos; @@ -2815,17 +4055,17 @@ var Batterij = /** @class */ (function (_super) { output += "Adres/tekst: " + this.stringPropToHTML('adres', 5); return (output); }; - Batterij.prototype.toSVG = function () { + Batterij.prototype.toSVG = function (sitplan) { + if (sitplan === void 0) { sitplan = false; } var mySVG = new SVGelement(); var outputstr = ""; mySVG.xleft = 1; // foresee at least some space for the conductor mySVG.xright = 59; mySVG.yup = 25; mySVG.ydown = 25; - mySVG.data = '' + mySVG.data = (sitplan ? "" : '') + ''; - mySVG.data += this.addAddressToSVG(mySVG, 55, 10); - mySVG.data += "\n"; + mySVG.data += (sitplan ? "" : this.addAddressToSVG(mySVG, 55, 10)); return (mySVG); }; return Batterij; @@ -2861,7 +4101,6 @@ var Bel = /** @class */ (function (_super) { mySVG.data = '' + ''; mySVG.data += this.addAddressToSVG(mySVG, 60, 15); - mySVG.data += "\n"; return (mySVG); }; return Bel; @@ -2890,14 +4129,15 @@ var Boiler = /** @class */ (function (_super) { output += ", Adres/tekst: " + this.stringPropToHTML('adres', 5); return (output); }; - Boiler.prototype.toSVG = function () { + Boiler.prototype.toSVG = function (sitplan) { + if (sitplan === void 0) { sitplan = false; } var mySVG = new SVGelement(); var outputstr = ""; mySVG.xleft = 1; // foresee at least some space for the conductor mySVG.xright = 59; mySVG.yup = 25; mySVG.ydown = 25; - mySVG.data = ''; + mySVG.data = (sitplan ? "" : ''); switch (this.props.heeft_accumulatie) { //accumulatie case false: mySVG.data += ''; @@ -2906,8 +4146,7 @@ var Boiler = /** @class */ (function (_super) { mySVG.data += ''; break; } - mySVG.data += this.addAddressToSVG(mySVG, 60); - mySVG.data += "\n"; + mySVG.data += (sitplan ? "" : this.addAddressToSVG(mySVG, 60)); return (mySVG); }; return Boiler; @@ -3045,7 +4284,9 @@ var Contactdoos = /** @class */ (function (_super) { + ", Adres/tekst: " + this.stringPropToHTML('adres', 5); return (output); }; - Contactdoos.prototype.toSVG = function () { + Contactdoos.prototype.toSVG = function (sitplan, mirrortext) { + if (sitplan === void 0) { sitplan = false; } + if (mirrortext === void 0) { mirrortext = false; } var mySVG = new SVGelement(); mySVG.xleft = 1; // Links voldoende ruimte voor een eventuele kring voorzien mySVG.xright = 20; // We starten met breedte 20 (leidings links) en vullen later aan in functie van wat moet getekend worden @@ -3105,16 +4346,22 @@ var Contactdoos = /** @class */ (function (_super) { } ; // Teken halfwaterdicht indien van toepassing - if (this.props.is_halfwaterdicht) - mySVG.data += 'h'; + if (this.props.is_halfwaterdicht) { + mySVG.data += ''; + var textX = (25 + (this.props.heeft_ingebouwde_schakelaar) * 10 + (this.props.is_meerfasig) * 34); + var textStyle = 'text-anchor:middle" font-family="Arial, Helvetica, sans-serif'; + if (mirrortext == false) + mySVG.data += 'h'; + else + mySVG.data += 'h'; + } // Indien de contactdoos een kind heeft, teken een streepje rechts - if (this.heeftVerbruikerAlsKind()) { + if ((this.heeftVerbruikerAlsKind()) && (!sitplan)) { mySVG.data += ''; } ; // Adres helemaal onderaan plaatsen - mySVG.data += this.addAddressToSVG(mySVG, 60, 15); - mySVG.data += "\n"; + mySVG.data += (sitplan ? "" : this.addAddressToSVG(mySVG, 60, 15)); return (mySVG); }; return Contactdoos; @@ -3140,17 +4387,16 @@ var Diepvriezer = /** @class */ (function (_super) { output += "Adres/tekst: " + this.stringPropToHTML('adres', 5); return (output); }; - Diepvriezer.prototype.toSVG = function () { + Diepvriezer.prototype.toSVG = function (sitplan) { + if (sitplan === void 0) { sitplan = false; } var mySVG = new SVGelement(); - var outputstr = ""; mySVG.xleft = 1; // foresee at least some space for the conductor mySVG.xright = 60; mySVG.yup = 25; mySVG.ydown = 25; - mySVG.data = '' + mySVG.data = (sitplan ? "" : '') + ''; - mySVG.data += this.addAddressToSVG(mySVG, 60, 15); - mySVG.data += "\n"; + mySVG.data += (sitplan ? "" : this.addAddressToSVG(mySVG, 60, 15)); return (mySVG); }; return Diepvriezer; @@ -3274,7 +4520,8 @@ var Domotica_gestuurde_verbruiker = /** @class */ (function (_super) { output += ", Adres/tekst: " + this.stringPropToHTML('adres', 5); return (output); }; - Domotica_gestuurde_verbruiker.prototype.toSVG = function () { + Domotica_gestuurde_verbruiker.prototype.toSVG = function (sitplan) { + if (sitplan === void 0) { sitplan = false; } var mySVG = new SVGelement(); // Eerst de tekening van de aangestuurde verbruiker maken var childcounter = 0; // Variabele voor het aantal kinderen, op dit moment ondersteunt de tool slechts 1 kind @@ -3335,11 +4582,13 @@ var Domotica_gestuurde_verbruiker = /** @class */ (function (_super) { } } //Place text below if there is any - if (!(/^\s*$/.test(this.props.adres))) { //check if adres contains only white space - mySVG.data += '' - + htmlspecialchars(this.props.adres) + ''; - mySVG.ydown += 15; + if (sitplan == false) { + if (!(/^\s*$/.test(this.props.adres))) { //check if adres contains only white space + mySVG.data += '' + + htmlspecialchars(this.props.adres) + ''; + mySVG.ydown += 15; + } } return (mySVG); }; @@ -3420,16 +4669,16 @@ var Droogkast = /** @class */ (function (_super) { output += "Adres/tekst: " + this.stringPropToHTML('adres', 5); return (output); }; - Droogkast.prototype.toSVG = function () { + Droogkast.prototype.toSVG = function (sitplan) { + if (sitplan === void 0) { sitplan = false; } var mySVG = new SVGelement(); mySVG.xleft = 1; // foresee at least some space for the conductor mySVG.xright = 59; mySVG.yup = 25; mySVG.ydown = 25; - mySVG.data = '' + mySVG.data = (sitplan ? "" : '') + ''; - mySVG.data += this.addAddressToSVG(mySVG, 60, 15); - mySVG.data += "\n"; + mySVG.data += (sitplan ? "" : this.addAddressToSVG(mySVG, 60, 15)); return (mySVG); }; return Droogkast; @@ -3473,7 +4722,9 @@ var Drukknop = /** @class */ (function (_super) { + ", Adres/tekst: " + this.stringPropToHTML('adres', 5); return (output); }; - Drukknop.prototype.toSVG = function () { + Drukknop.prototype.toSVG = function (sitplan, mirrortext) { + if (sitplan === void 0) { sitplan = false; } + if (mirrortext === void 0) { mirrortext = false; } var mySVG = new SVGelement(); mySVG.xleft = 1; // Links voldoende ruimte voor een eventuele kring voorzien mySVG.xright = 43; @@ -3481,7 +4732,7 @@ var Drukknop = /** @class */ (function (_super) { mySVG.ydown = 25; var aantal_knoppen = this.props.aantal; // Teken lijn links - mySVG.data += '' + mySVG.data += (sitplan ? "" : '') + ''; // Teken verklikkerlampje indien van toepassing if (this.props.heeft_verklikkerlampje) { @@ -3506,12 +4757,21 @@ var Drukknop = /** @class */ (function (_super) { } printstr += 'x' + aantal_knoppen; } - if (printstr != '') - mySVG.data += '' + htmlspecialchars(printstr) + ''; - // Plaats tekst voor aantal knoppen + if (printstr != '') { + var textoptions = 'style="text-anchor:middle" font-family="Arial, Helvetica, sans-serif" font-size="10"'; + if (mirrortext == false) + mySVG.data += '' + htmlspecialchars(printstr) + ''; + else + mySVG.data += '' + htmlspecialchars(printstr) + ''; + } + // Plaats tekst voor aantal knoppen per armatuur if (this.props.aantal_knoppen_per_armatuur > 1) { - mySVG.data += '' + htmlspecialchars(this.props.aantal_knoppen_per_armatuur) + '' - + ''; + var textoptions = 'style="text-anchor:middle" font-family="Arial, Helvetica, sans-serif" font-size="10"'; + if (mirrortext == false) + mySVG.data += '' + htmlspecialchars(this.props.aantal_knoppen_per_armatuur) + ''; + else + mySVG.data += '' + htmlspecialchars(this.props.aantal_knoppen_per_armatuur) + ''; + mySVG.data += ''; } // Plaats extra tekens voor rolluik of dimmer switch (this.props.type_knop) { @@ -3526,10 +4786,10 @@ var Drukknop = /** @class */ (function (_super) { } // Plaats adres helemaal onderaan if (printstr != '') { - mySVG.data += this.addAddressToSVG(mySVG, 65, 20); + mySVG.data += (sitplan ? "" : this.addAddressToSVG(mySVG, 65, 20)); } else { - mySVG.data += this.addAddressToSVG(mySVG, 49, 5); + mySVG.data += (sitplan ? "" : this.addAddressToSVG(mySVG, 49, 5)); } return (mySVG); }; @@ -3556,17 +4816,16 @@ var EV_lader = /** @class */ (function (_super) { output += "Adres/tekst: " + this.stringPropToHTML('adres', 5); return (output); }; - EV_lader.prototype.toSVG = function () { + EV_lader.prototype.toSVG = function (sitplan) { + if (sitplan === void 0) { sitplan = false; } var mySVG = new SVGelement(); - var outputstr = ""; mySVG.xleft = 1; // foresee at least some space for the conductor mySVG.xright = 60; mySVG.yup = 25; mySVG.ydown = 25; - mySVG.data = '' + mySVG.data = (sitplan ? "" : '') + ''; - mySVG.data += this.addAddressToSVG(mySVG, 60, 15); - mySVG.data += "\n"; + mySVG.data += (sitplan ? "" : this.addAddressToSVG(mySVG, 60, 15)); return (mySVG); }; return EV_lader; @@ -3592,17 +4851,16 @@ var Elektriciteitsmeter = /** @class */ (function (_super) { output += "Adres/tekst: " + this.stringPropToHTML('adres', 5); return (output); }; - Elektriciteitsmeter.prototype.toSVG = function () { + Elektriciteitsmeter.prototype.toSVG = function (sitplan) { + if (sitplan === void 0) { sitplan = false; } var mySVG = new SVGelement(); - var outputstr = ""; mySVG.xleft = 1; // foresee at least some space for the conductor mySVG.xright = 59; mySVG.yup = 25; mySVG.ydown = 25; - mySVG.data = '' + mySVG.data = (sitplan ? "" : '') + ''; - mySVG.data += this.addAddressToSVG(mySVG, 60, 15); - mySVG.data += "\n"; + mySVG.data += (sitplan ? "" : this.addAddressToSVG(mySVG, 60, 15)); return (mySVG); }; return Elektriciteitsmeter; @@ -3628,17 +4886,16 @@ var Elektrische_oven = /** @class */ (function (_super) { output += "Adres/tekst: " + this.stringPropToHTML('adres', 5); return (output); }; - Elektrische_oven.prototype.toSVG = function () { + Elektrische_oven.prototype.toSVG = function (sitplan) { + if (sitplan === void 0) { sitplan = false; } var mySVG = new SVGelement(); - var outputstr = ""; mySVG.xleft = 1; // foresee at least some space for the conductor mySVG.xright = 59; mySVG.yup = 25; mySVG.ydown = 25; - mySVG.data = '' + mySVG.data = (sitplan ? "" : '') + ''; - mySVG.data += this.addAddressToSVG(mySVG, 60, 15); - mySVG.data += "\n"; + mySVG.data += (sitplan ? "" : this.addAddressToSVG(mySVG, 60, 15)); return (mySVG); }; return Elektrische_oven; @@ -3676,7 +4933,8 @@ var Ketel = /** @class */ (function (_super) { output += ", Adres/tekst: " + this.stringPropToHTML('adres', 5); return (output); }; - Ketel.prototype.toSVG = function () { + Ketel.prototype.toSVG = function (sitplan) { + if (sitplan === void 0) { sitplan = false; } var mySVG = new SVGelement(); // Alles naar beneden schuiven als we het aantal laders boven het symbool willen plaatsen var shifty = 0; @@ -3689,7 +4947,7 @@ var Ketel = /** @class */ (function (_super) { mySVG.yup = 25 + shifty; mySVG.ydown = 25; // Leiding links - mySVG.data += '' + mySVG.data += (sitplan ? "" : '') + ''; // Type ketel switch (this.props.keteltype) { @@ -3750,8 +5008,7 @@ var Ketel = /** @class */ (function (_super) { break; } // Adres helemaal onderaan plaatsen - mySVG.data += this.addAddressToSVG(mySVG, 60 + shifty, 15); - mySVG.data += "\n"; + mySVG.data += (sitplan ? "" : this.addAddressToSVG(mySVG, 60 + shifty, 15)); return (mySVG); }; return Ketel; @@ -3777,17 +5034,16 @@ var Koelkast = /** @class */ (function (_super) { output += "Adres/tekst: " + this.stringPropToHTML('adres', 5); return (output); }; - Koelkast.prototype.toSVG = function () { + Koelkast.prototype.toSVG = function (sitplan) { + if (sitplan === void 0) { sitplan = false; } var mySVG = new SVGelement(); - var outputstr = ""; mySVG.xleft = 1; // foresee at least some space for the conductor mySVG.xright = 59; mySVG.yup = 25; mySVG.ydown = 25; - mySVG.data = '' + mySVG.data = (sitplan ? "" : '') + ''; mySVG.data += this.addAddressToSVG(mySVG, 60, 15); - mySVG.data += "\n"; return (mySVG); }; return Koelkast; @@ -3813,17 +5069,17 @@ var Kookfornuis = /** @class */ (function (_super) { output += "Adres/tekst: " + this.stringPropToHTML('adres', 5); return (output); }; - Kookfornuis.prototype.toSVG = function () { + Kookfornuis.prototype.toSVG = function (sitplan) { + if (sitplan === void 0) { sitplan = false; } var mySVG = new SVGelement(); var outputstr = ""; mySVG.xleft = 1; // foresee at least some space for the conductor mySVG.xright = 59; mySVG.yup = 25; mySVG.ydown = 25; - mySVG.data = '' + mySVG.data = (sitplan ? "" : '') + ''; - mySVG.data += this.addAddressToSVG(mySVG, 60, 15); - mySVG.data += "\n"; + mySVG.data += (sitplan ? "" : this.addAddressToSVG(mySVG, 60, 15)); return (mySVG); }; return Kookfornuis; @@ -4373,14 +5629,16 @@ var Lichtpunt = /** @class */ (function (_super) { + ", Adres/tekst: " + this.stringPropToHTML('adres', 5); return (output); }; - Lichtpunt.prototype.toSVG = function () { + Lichtpunt.prototype.toSVG = function (sitplan, mirrortext) { + if (sitplan === void 0) { sitplan = false; } + if (mirrortext === void 0) { mirrortext = false; } var mySVG = new SVGelement(); mySVG.xleft = 1; // Links voldoende ruimte voor een eventuele kring voorzien mySVG.xright = 20; // We starten met breedte 20 (leidings links) en vullen later aan in functie van wat moet getekend worden mySVG.yup = 25; mySVG.ydown = 25; // Teken de leiding links - mySVG.data = ''; + mySVG.data = (sitplan ? "" : ''); // Indien halfwaterdicht en/of meerdere lampen, voorzie de tekst bovenaan var print_str_upper = ""; if (this.props.is_halfwaterdicht) { @@ -4418,8 +5676,13 @@ var Lichtpunt = /** @class */ (function (_super) { textxpos = 36; } ; - if (print_str_upper != "") - mySVG.data += '' + htmlspecialchars(print_str_upper) + ''; + if (print_str_upper != "") { + var textoptions = 'style="text-anchor:middle" font-family="Arial, Helvetica, sans-serif" font-size="7"'; + if (mirrortext == false) + mySVG.data += "").concat(htmlspecialchars(print_str_upper), ""); + else + mySVG.data += "").concat(htmlspecialchars(print_str_upper), ""); + } switch (this.props.type_noodverlichting) { // Type noodverlichting case "Centraal": mySVG.data += '' @@ -4437,7 +5700,7 @@ var Lichtpunt = /** @class */ (function (_super) { } // Verdere uitlijning en adres onderaan mySVG.xright = 42; - mySVG.data += this.addAddressToSVG(mySVG, 50, 5, 2); + mySVG.data += (sitplan ? "" : this.addAddressToSVG(mySVG, 50, 5, 2)); break; case "spot": // teken spot @@ -4465,8 +5728,13 @@ var Lichtpunt = /** @class */ (function (_super) { else textxpos = 40; } - if (print_str_upper != "") - mySVG.data += '' + htmlspecialchars(print_str_upper) + ''; + if (print_str_upper != "") { + var textoptions = 'style="text-anchor:middle" font-family="Arial, Helvetica, sans-serif" font-size="7"'; + if (mirrortext == false) + mySVG.data += "").concat(htmlspecialchars(print_str_upper), ""); + else + mySVG.data += "").concat(htmlspecialchars(print_str_upper), ""); + } switch (this.props.type_noodverlichting) { case "Centraal": mySVG.data += '' @@ -4484,7 +5752,7 @@ var Lichtpunt = /** @class */ (function (_super) { } // Verdere uitlijning en adres onderaan mySVG.xright = 45; - mySVG.data += this.addAddressToSVG(mySVG, 52, 7, 4); + mySVG.data += (sitplan ? "" : this.addAddressToSVG(mySVG, 52, 7, 4)); break; case "TL": // Teken TL lampen @@ -4500,8 +5768,13 @@ var Lichtpunt = /** @class */ (function (_super) { if (this.props.is_wandlamp) mySVG.data += ''; // Zet symbool halfwaterdicht en aantal lampen bovenaan - if (print_str_upper != "") - mySVG.data += '' + htmlspecialchars(print_str_upper) + ''; + if (print_str_upper != "") { + var textoptions = 'style="text-anchor:middle" font-family="Arial, Helvetica, sans-serif" font-size="10"'; + if (mirrortext == false) + mySVG.data += "").concat(htmlspecialchars(print_str_upper), ""); + else + mySVG.data += "").concat(htmlspecialchars(print_str_upper), ""); + } // Teken ingebouwde schakelaar indien van toepassing if (this.props.heeft_ingebouwde_schakelaar) { mySVG.data += '' @@ -4529,14 +5802,14 @@ var Lichtpunt = /** @class */ (function (_super) { } // Verdere uitlijning en adres onderaan mySVG.xright = 90; - mySVG.data += this.addAddressToSVG(mySVG, endy + 13, Math.max(mySVG.ydown, endy + 18 - 25), 2); + mySVG.data += (sitplan ? "" : this.addAddressToSVG(mySVG, endy + 13, Math.max(mySVG.ydown, endy + 18 - 25), 2)); break; default: //Normaal lichtpunt (kruisje) switch (this.props.type_noodverlichting) { case "Centraal": mySVG.data += '' + ''; - if (this.heeftVerbruikerAlsKind()) + if ((this.heeftVerbruikerAlsKind()) && (!sitplan)) mySVG.data += ''; break; case "Decentraal": @@ -4546,13 +5819,18 @@ var Lichtpunt = /** @class */ (function (_super) { break; default: mySVG.data += ''; - if (this.heeftVerbruikerAlsKind()) + if ((this.heeftVerbruikerAlsKind()) && (!sitplan)) mySVG.data += ''; break; } // Zet symbool halfwaterdicht en aantal lampen bovenaan - if (print_str_upper != "") - mySVG.data += '' + htmlspecialchars(print_str_upper) + ''; + if (print_str_upper != "") { + var textoptions = 'style="text-anchor:middle" font-family="Arial, Helvetica, sans-serif" font-size="10"'; + if (mirrortext == false) + mySVG.data += "").concat(htmlspecialchars(print_str_upper), ""); + else + mySVG.data += "").concat(htmlspecialchars(print_str_upper), ""); + } // Teken wandlamp indien van toepassing if (this.props.is_wandlamp) mySVG.data += ''; @@ -4561,7 +5839,7 @@ var Lichtpunt = /** @class */ (function (_super) { mySVG.data += ''; // Verdere uitlijning en adres onderaan mySVG.xright = 39; - mySVG.data += this.addAddressToSVG(mySVG, 54, 10, -1); + mySVG.data += (sitplan ? "" : this.addAddressToSVG(mySVG, 54, 10, -1)); break; } mySVG.data += "\n"; @@ -4606,7 +5884,8 @@ var Media = /** @class */ (function (_super) { output += ", Adres/tekst: " + this.stringPropToHTML('adres', 5); return (output); }; - Media.prototype.toSVG = function () { + Media.prototype.toSVG = function (sitplan) { + if (sitplan === void 0) { sitplan = false; } var mySVG = new SVGelement(); // Alles naar beneden schuiven als we het aantal laders boven het symbool willen plaatsen var shifty = 0; @@ -4620,13 +5899,13 @@ var Media = /** @class */ (function (_super) { mySVG.ydown = 25; switch (this.props.symbool) { case "luidspreker": - mySVG.data += '' - + ''; + mySVG.data += (sitplan ? '' : ''); + mySVG.data += ''; mySVG.xright = 36; - mySVG.data += this.addAddressToSVG(mySVG, 60 + shifty, 15, 0); + mySVG.data += (sitplan ? '' : this.addAddressToSVG(mySVG, 60 + shifty, 15, 0)); break; default: - mySVG.data += ''; + mySVG.data += (sitplan ? '' : ''); mySVG.xright = 19; break; } @@ -4700,17 +5979,16 @@ var Microgolfoven = /** @class */ (function (_super) { + "Adres/tekst: " + this.stringPropToHTML('adres', 5); return (output); }; - Microgolfoven.prototype.toSVG = function () { + Microgolfoven.prototype.toSVG = function (sitplan) { + if (sitplan === void 0) { sitplan = false; } var mySVG = new SVGelement(); - var outputstr = ""; mySVG.xleft = 1; // foresee at least some space for the conductor mySVG.xright = 59; mySVG.yup = 25; mySVG.ydown = 25; - mySVG.data = '' + mySVG.data = (sitplan ? "" : '') + ''; mySVG.data += this.addAddressToSVG(mySVG, 60, 15); - mySVG.data += "\n"; return (mySVG); }; return Microgolfoven; @@ -4736,17 +6014,16 @@ var Motor = /** @class */ (function (_super) { + "Adres/tekst: " + this.stringPropToHTML('adres', 5); return (output); }; - Motor.prototype.toSVG = function () { + Motor.prototype.toSVG = function (sitplan) { + if (sitplan === void 0) { sitplan = false; } var mySVG = new SVGelement(); - var outputstr = ""; mySVG.xleft = 1; // foresee at least some space for the conductor mySVG.xright = 59; mySVG.yup = 25; mySVG.ydown = 25; - mySVG.data = '' + mySVG.data = (sitplan ? "" : '') + ''; mySVG.data += this.addAddressToSVG(mySVG, 60, 15); - mySVG.data += "\n"; return (mySVG); }; return Motor; @@ -4772,17 +6049,16 @@ var Omvormer = /** @class */ (function (_super) { + "Adres/tekst: " + this.stringPropToHTML('adres', 5); return (output); }; - Omvormer.prototype.toSVG = function () { + Omvormer.prototype.toSVG = function (sitplan) { + if (sitplan === void 0) { sitplan = false; } var mySVG = new SVGelement(); - var outputstr = ""; mySVG.xleft = 1; // foresee at least some space for the conductor mySVG.xright = 59; mySVG.yup = 25; mySVG.ydown = 25; - mySVG.data = '' + mySVG.data = (sitplan ? "" : '') + ''; - mySVG.data += this.addAddressToSVG(mySVG, 60, 15); - mySVG.data += "\n"; + mySVG.data += (sitplan ? "" : this.addAddressToSVG(mySVG, 60, 15)); return (mySVG); }; return Omvormer; @@ -4808,17 +6084,16 @@ var Overspanningsbeveiliging = /** @class */ (function (_super) { + "Adres/tekst: " + this.stringPropToHTML('adres', 5); return (output); }; - Overspanningsbeveiliging.prototype.toSVG = function () { + Overspanningsbeveiliging.prototype.toSVG = function (sitplan) { + if (sitplan === void 0) { sitplan = false; } var mySVG = new SVGelement(); - var outputstr = ""; mySVG.xleft = 1; // foresee at least some space for the conductor mySVG.xright = 34; mySVG.yup = 25; mySVG.ydown = 25; - mySVG.data = '' + mySVG.data = (sitplan ? "" : '') + ''; - mySVG.data += this.addAddressToSVG(mySVG, 55, 10); - mySVG.data += "\n"; + mySVG.data += (sitplan ? "" : this.addAddressToSVG(mySVG, 55, 10)); return (mySVG); }; return Overspanningsbeveiliging; @@ -4894,17 +6169,16 @@ var Stoomoven = /** @class */ (function (_super) { + "Adres/tekst: " + this.stringPropToHTML('adres', 5); return (output); }; - Stoomoven.prototype.toSVG = function () { + Stoomoven.prototype.toSVG = function (sitplan) { + if (sitplan === void 0) { sitplan = false; } var mySVG = new SVGelement(); - var outputstr = ""; mySVG.xleft = 1; // foresee at least some space for the conductor mySVG.xright = 59; mySVG.yup = 25; mySVG.ydown = 25; - mySVG.data = '' + mySVG.data = (sitplan ? "" : '') + ''; - mySVG.data += this.addAddressToSVG(mySVG, 60, 15); - mySVG.data += "\n"; + mySVG.data += (sitplan ? "" : this.addAddressToSVG(mySVG, 60, 15)); return (mySVG); }; return Stoomoven; @@ -4933,18 +6207,18 @@ var Transformator = /** @class */ (function (_super) { + ", Adres/tekst: " + this.stringPropToHTML('adres', 5); return (output); }; - Transformator.prototype.toSVG = function () { + Transformator.prototype.toSVG = function (sitplan) { + if (sitplan === void 0) { sitplan = false; } var mySVG = new SVGelement(); mySVG.xleft = 1; // foresee at least some space for the conductor mySVG.xright = 47; mySVG.yup = 25; mySVG.ydown = 25; - mySVG.data = '' + mySVG.data = (sitplan ? "" : '') + '' + '' + htmlspecialchars(this.props.voltage) + ""; - mySVG.data += this.addAddressToSVG(mySVG, 58, 15); - mySVG.data += "\n"; + mySVG.data += (sitplan ? "" : this.addAddressToSVG(mySVG, 58, 15)); return (mySVG); }; return Transformator; @@ -4973,9 +6247,9 @@ var USB_lader = /** @class */ (function (_super) { output += ", Adres/tekst: " + this.stringPropToHTML('adres', 5); return (output); }; - USB_lader.prototype.toSVG = function () { + USB_lader.prototype.toSVG = function (sitplan) { + if (sitplan === void 0) { sitplan = false; } var mySVG = new SVGelement(); - var outputstr = ""; // Alles naar beneden schuiven als we het aantal laders boven het symbool willen plaatsen var shifty = 0; if (this.props.aantal > 1) { @@ -4986,10 +6260,9 @@ var USB_lader = /** @class */ (function (_super) { mySVG.xright = 79; mySVG.yup = 25 + shifty; mySVG.ydown = 25; - mySVG.data += '' + mySVG.data += (sitplan ? "" : '') + ''; - mySVG.data += this.addAddressToSVG(mySVG, 55 + shifty, 10); - mySVG.data += "\n"; + mySVG.data += (sitplan ? "" : this.addAddressToSVG(mySVG, 55 + shifty, 10)); return (mySVG); }; return USB_lader; @@ -5015,17 +6288,16 @@ var Vaatwasmachine = /** @class */ (function (_super) { output += "Adres/tekst: " + this.stringPropToHTML('adres', 5); return (output); }; - Vaatwasmachine.prototype.toSVG = function () { + Vaatwasmachine.prototype.toSVG = function (sitplan) { + if (sitplan === void 0) { sitplan = false; } var mySVG = new SVGelement(); - var outputstr = ""; mySVG.xleft = 1; // foresee at least some space for the conductor mySVG.xright = 59; mySVG.yup = 25; mySVG.ydown = 25; - mySVG.data = '' + mySVG.data = (sitplan ? "" : '') + ''; - mySVG.data += this.addAddressToSVG(mySVG, 60, 15); - mySVG.data += "\n"; + mySVG.data += (sitplan ? "" : this.addAddressToSVG(mySVG, 60, 15)); return (mySVG); }; return Vaatwasmachine; @@ -5051,17 +6323,16 @@ var Ventilator = /** @class */ (function (_super) { output += "Adres/tekst: " + this.stringPropToHTML('adres', 5); return (output); }; - Ventilator.prototype.toSVG = function () { + Ventilator.prototype.toSVG = function (sitplan) { + if (sitplan === void 0) { sitplan = false; } var mySVG = new SVGelement(); - var outputstr = ""; mySVG.xleft = 1; // foresee at least some space for the conductor mySVG.xright = 49; mySVG.yup = 25; mySVG.ydown = 25; - mySVG.data = '' + mySVG.data = (sitplan ? "" : '') + ''; - mySVG.data += this.addAddressToSVG(mySVG, 55, 10); - mySVG.data += "\n"; + mySVG.data += (sitplan ? "" : this.addAddressToSVG(mySVG, 55, 10)); return (mySVG); }; return Ventilator; @@ -5127,7 +6398,8 @@ var Verbruiker = /** @class */ (function (_super) { this.props.breedte = String(width); } }; - Verbruiker.prototype.toSVG = function () { + Verbruiker.prototype.toSVG = function (sitplan) { + if (sitplan === void 0) { sitplan = false; } var mySVG = new SVGelement(); var strlines = htmlspecialchars(this.props.tekst).split("|"); // Voldoende ruimte voorzien voor alle elementen @@ -5163,7 +6435,7 @@ var Verbruiker = /** @class */ (function (_super) { mySVG.data += outputstr_common + ' y="' + dispy + '"' + options + '>' + strlines[i] + ''; } // Kader en adres tekenen -- - mySVG.data += '' + mySVG.data += (sitplan ? "" : '') + '' + this.addAddressToSVG(mySVG, 60 + extraplace, 15, width / 2 - (mySVG.xright - 20) / 2); return (mySVG); @@ -5252,14 +6524,14 @@ var Verwarmingstoestel = /** @class */ (function (_super) { + ", Adres/tekst: " + this.stringPropToHTML('adres', 5); return (output); }; - Verwarmingstoestel.prototype.toSVG = function () { + Verwarmingstoestel.prototype.toSVG = function (sitplan) { + if (sitplan === void 0) { sitplan = false; } var mySVG = new SVGelement(); - var outputstr = ""; mySVG.xleft = 1; // foresee at least some space for the conductor mySVG.xright = 69; mySVG.yup = 25; mySVG.ydown = 25; - mySVG.data = ''; + mySVG.data = (sitplan ? "" : ''); switch (this.props.heeft_accumulatie) { //accumulatie case false: mySVG.data += ''; @@ -5276,8 +6548,7 @@ var Verwarmingstoestel = /** @class */ (function (_super) { } break; } - mySVG.data += this.addAddressToSVG(mySVG, 55, 10); - mySVG.data += "\n"; + mySVG.data += (sitplan ? "" : this.addAddressToSVG(mySVG, 55, 10)); return (mySVG); }; return Verwarmingstoestel; @@ -5394,7 +6665,8 @@ var Vrije_tekst = /** @class */ (function (_super) { this.props.breedte = String(width); } }; - Vrije_tekst.prototype.toSVG = function () { + Vrije_tekst.prototype.toSVG = function (sitplan) { + if (sitplan === void 0) { sitplan = false; } var mySVG = new SVGelement(); var strlines = htmlspecialchars(this.props.tekst).split("|"); // Breedte van de vrije tekst bepalen @@ -5444,7 +6716,7 @@ var Vrije_tekst = /** @class */ (function (_super) { switch (this.props.vrije_tekst_type) { case "zonder kader": break; default: //Wegens compatibiliteit met oudere versies van de software is het ontbreken van eender welke parameter een "met kader" - mySVG.data += '' + mySVG.data += (sitplan ? "" : '') + '' + this.addAddressToSVG(mySVG, 60 + extraplace, 15, width / 2 - (mySVG.xright - 20) / 2); break; @@ -5480,7 +6752,8 @@ var Warmtepomp = /** @class */ (function (_super) { + ", Adres/tekst: " + this.stringPropToHTML('adres', 5); return (output); }; - Warmtepomp.prototype.toSVG = function () { + Warmtepomp.prototype.toSVG = function (sitplan) { + if (sitplan === void 0) { sitplan = false; } var mySVG = new SVGelement(); // Alles naar beneden schuiven als we het aantal laders boven het symbool willen plaatsen var shifty = 0; @@ -5492,7 +6765,7 @@ var Warmtepomp = /** @class */ (function (_super) { mySVG.xright = 59; mySVG.yup = 25 + shifty; mySVG.ydown = 25; - mySVG.data += '' + mySVG.data += (sitplan ? "" : '') + '' + '' + '' @@ -5520,8 +6793,7 @@ var Warmtepomp = /** @class */ (function (_super) { break; } // Adres helemaal onderaan plaatsen - mySVG.data += this.addAddressToSVG(mySVG, 60 + shifty, 15); - mySVG.data += "\n"; + mySVG.data += (sitplan ? "" : this.addAddressToSVG(mySVG, 60 + shifty, 15)); return (mySVG); }; return Warmtepomp; @@ -5547,17 +6819,16 @@ var Wasmachine = /** @class */ (function (_super) { + "Adres/tekst: " + this.stringPropToHTML('adres', 5); return (output); }; - Wasmachine.prototype.toSVG = function () { + Wasmachine.prototype.toSVG = function (sitplan) { + if (sitplan === void 0) { sitplan = false; } var mySVG = new SVGelement(); - var outputstr = ""; mySVG.xleft = 1; // foresee at least some space for the conductor mySVG.xright = 59; mySVG.yup = 25; mySVG.ydown = 25; - mySVG.data = '' + mySVG.data = (sitplan ? "" : '') + ''; mySVG.data += this.addAddressToSVG(mySVG, 60, 15); - mySVG.data += "\n"; return (mySVG); }; return Wasmachine; @@ -5762,7 +7033,6 @@ var Zekering = /** @class */ (function (_super) { + 'style="text-anchor:middle" font-family="Arial, Helvetica, sans-serif" font-size="10">' + 'S' + ''; mySVG.xright = mySVG.xright + 30; } - mySVG.data += "\n"; return (mySVG); }; return Zekering; @@ -5791,7 +7061,8 @@ var Zeldzame_symbolen = /** @class */ (function (_super) { + ", Adres/tekst: " + this.stringPropToHTML('adres', 5); return (output); }; - Zeldzame_symbolen.prototype.toSVG = function () { + Zeldzame_symbolen.prototype.toSVG = function (sitplan) { + if (sitplan === void 0) { sitplan = false; } var mySVG = new SVGelement(); mySVG.xleft = 1; // foresee at least some space for the conductor mySVG.xright = 59; @@ -5799,13 +7070,13 @@ var Zeldzame_symbolen = /** @class */ (function (_super) { mySVG.ydown = 25; switch (this.props.symbool) { case "deurslot": - mySVG.data += '' + mySVG.data += (sitplan ? "" : '') + ''; mySVG.xright = 58; mySVG.data += this.addAddressToSVG(mySVG, 55, 10, 2); break; default: - mySVG.data += ''; + mySVG.data += (sitplan ? "" : ''); mySVG.xright = -1; break; } @@ -5838,18 +7109,18 @@ var Zonnepaneel = /** @class */ (function (_super) { + ", Adres/tekst: " + this.stringPropToHTML('adres', 5); return (output); }; - Zonnepaneel.prototype.toSVG = function () { + Zonnepaneel.prototype.toSVG = function (sitplan) { + if (sitplan === void 0) { sitplan = false; } var mySVG = new SVGelement(); mySVG.xleft = 1; // Links voldoende ruimte voor een eventuele kring voorzien mySVG.xright = 69; mySVG.yup = 35; mySVG.ydown = 25; - mySVG.data += '' + mySVG.data += (sitplan ? "" : '') + '' + '' + htmlspecialchars(this.props.aantal) + 'x'; // Adres helemaal onderaan plaatsen - mySVG.data += this.addAddressToSVG(mySVG, 70, 15); - mySVG.data += "\n"; + mySVG.data += (sitplan ? "" : this.addAddressToSVG(mySVG, 70, 15)); return (mySVG); }; return Zonnepaneel; @@ -5864,6 +7135,7 @@ var Properties = /** @class */ (function () { this.control = ""; this.dpi = 300; this.info = "1 x 230V + N ~50 Hz"; + this.currentView = 'config'; } ; Properties.prototype.setFilename = function (name) { @@ -5875,7 +7147,7 @@ var SVGSymbols = /** @class */ (function () { function SVGSymbols() { } SVGSymbols.outputSVGSymbols = function () { - var output = "\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n V\n E\n E\n V\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n S\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n PIR\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n M\n \n \n \n \n kWh\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n t\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \"\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \"\n \n \n \n \n \n \n \n \n \n \"\n \"\n \"\n \n \n \n \n \n \n \n \n \n \n AC/DC\n USB\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n -> shift x -7.5 y -15\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n "; + var output = "\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n V\n E\n E\n V\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n S\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n PIR\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n M\n \n \n \n \n kWh\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n t\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \"\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \"\n \n \n \n \n \n \n \n \n \n \"\n \"\n \"\n \n \n \n \n \n \n \n \n \n \n AC/DC\n USB\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n -> shift x -7.5 y -15\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n "; return (output); }; return SVGSymbols; @@ -5959,43 +7231,64 @@ var Hierarchical_List = /** @class */ (function () { this.properties = new Properties(); this.curid = 1; this.mode = "edit"; + this.sitplan = new SituationPlan(); } ; - // -- Definitief verwijderen van items die als inactief werden geflagged -- - Hierarchical_List.prototype.deleteInactive = function () { - for (var i = 0; i < this.length; i++) { //Loop over all items - while ((!this.active[i]) && (i < this.length)) { - this.data.splice(i, 1); - this.active.splice(i, 1); - this.id.splice(i, 1); - this.length--; - } + /** dispose + * + */ + Hierarchical_List.prototype.dispose = function () { + if (this.sitplanview != null) { + this.sitplanview.dispose(); } }; - // -- Opnieuw sorteren van de array na clone/verplaatsen van items, ouders moeten steeds vóór de kinderen in de array zitten -- + // -- Definitief verwijderen van items die als inactief werden geflagged -- + /* deleteInactive() { + for (let i = 0; i i) { //If this happens we perform a swap - //We will need another pass to ensure we had them all - continue_looping = true; - //Repush mis-placed item to the end - this.data.push(this.data[i]); - this.active.push(true); - this.id.push(this.id[i]); - this.length += 1; - //Set the original element to inactive - this.active[i] = false; + var _this = this; + var sortToOrdinal = function (parent, ordinals) { + if (parent === void 0) { parent = 0; } + if (ordinals === void 0) { ordinals = []; } + for (var i = 0; i < _this.length; i++) { + if (_this.active[i]) { + if (_this.data[i].parent == parent) { + ordinals.push(i); + sortToOrdinal(_this.id[i], ordinals); } } } - } - this.deleteInactive(); + return ordinals; + }; + var ordinals = sortToOrdinal(); + var data = []; + var active = []; + var id = []; + for (var i = 0; i < ordinals.length; i++) { + data.push(this.data[ordinals[i]]); + active.push(this.active[ordinals[i]]); + id.push(this.id[ordinals[i]]); + } + this.data = data; + this.active = active; + this.id = id; + this.length = ordinals.length; }; // -- Plaats in de array zoeken op basis van de id -- Hierarchical_List.prototype.getOrdinalById = function (my_id) { @@ -6404,7 +7697,7 @@ var Hierarchical_List = /** @class */ (function () { output += '

'; output += ''; output += '

Vergeet niet regelmatig uw werk
op te slaan in het "Bestand"-menu.

'; - document.getElementById("ribbon").innerHTML = output; + document.getElementById("ribbon").innerHTML = "
".concat(output, "
"); }; // -- Functie om de tree links te tekenen te starten by node met id = myParent -- Hierarchical_List.prototype.toHTMLinner = function (ordinal) { @@ -6438,6 +7731,33 @@ var Hierarchical_List = /** @class */ (function () { } 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; } @@ -6593,6 +7913,9 @@ var Hierarchical_List = /** @class */ (function () { }; 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 \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
\n Voorbeeld 1\n \n Voorbeeld 2\n \n Leeg schema\n \n Openen\n
\n
\n

\n Eenvoudig schema, enkel contactdozen en lichtpunten.\n

\n 		\n
\n

\n Iets complexer schema met teleruptoren, verbruikers achter contactdozen en gesplitste kringen.\n

\n 		\n
\n

\n"; var CONFIGPAGE_RIGHT = "\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

\n
\n
\n \n

\n 		\n
\n \n

\n 		\n
\n \n

\n 		\n
\n \n

\n
\n "; var CONFIGPRINTPAGE = "\n
\n
\n
\n"; @@ -6837,6 +8160,8 @@ function buildNewStructure(structure) { } } function reset_all() { + if (structure != null) + structure.dispose(); structure = new Hierarchical_List(); buildNewStructure(structure); topMenu.selectMenuItemByName(isDevMode() ? 'Eéndraadschema' : 'Bewerken'); @@ -6905,6 +8230,8 @@ function restart_all() { } } function toggleAppView(type) { + var lastView = structure.properties.currentView; + structure.properties.currentView = type; if (type === '2col') { document.getElementById("configsection").style.display = 'none'; document.getElementById("outerbox").style.display = 'none'; @@ -6924,6 +8251,8 @@ function toggleAppView(type) { document.getElementById("ribbon").style.display = 'flex'; document.getElementById("canvas_2col").style.display = 'none'; } + if ((lastView != null) && (lastView != type)) + undostruct.store(); } function load_example(nr) { switch (nr) { diff --git a/gif/scaledown.png b/gif/scaledown.png new file mode 100644 index 0000000..a639069 Binary files /dev/null and b/gif/scaledown.png differ diff --git a/gif/scaleup.png b/gif/scaleup.png new file mode 100644 index 0000000..d297c44 Binary files /dev/null and b/gif/scaleup.png differ diff --git a/index.html b/index.html index 7feb460..098eb72 100644 --- a/index.html +++ b/index.html @@ -23,7 +23,10 @@
    - + + diff --git a/jsPDF/print.js b/jsPDF/print.js index f60212c..abda490 100644 --- a/jsPDF/print.js +++ b/jsPDF/print.js @@ -1,4 +1,4 @@ -function printPDF(svg, print_table, properties, pages=[1], filename="eendraadschema_print.pdf", statuscallback) { // Defaults to A4 and 300 DPI but 600 DPI is better +function printPDF(svg, print_table, properties, pages=[1], filename="eendraadschema_print.pdf", statuscallback, sitplanprint) { // Defaults to A4 and 300 DPI but 600 DPI is better if (print_table.papersize=="A3") { paperdetails = { // All sizes in millimeters @@ -165,11 +165,21 @@ function printPDF(svg, print_table, properties, pages=[1], filename="eendraadsch startx + 2, // Leave 2mm at the left of the drawn by text paperdetails.paperheight - paperdetails.paper_margin - (paperdetails.drawnby_box_height-textHeight)/2 - textHeight/6); - doc.text('pagina. ' + pages[iter] + '/' + print_table.pages.length, + let page = 0; + if (iter < print_table.pages.length) + page = pages[iter]; + else + page = pages[print_table.pages.length-1] + (iter - print_table.pages.length + 1); + + let maxpages = print_table.pages.length + sitplanprint.numpages; + + doc.text('pagina. ' + page + '/' + maxpages, startx + 3 * paperdetails.owner_box_width + 2, //Leave 2mm at the left paperdetails.paperheight - paperdetails.paper_margin - paperdetails.drawnby_box_height - paperdetails.owner_box_height - textHeight/6 + textHeight + 1.5 ); //Leave 1.55mm at the top - doc.text("Eendraadschema", + let pagename = (iter < print_table.pages.length ? 'Eendraadschema' : 'Situatieschema'); + + doc.text(pagename, startx + 3 * paperdetails.owner_box_width + 2, paperdetails.paperheight - paperdetails.paper_margin - paperdetails.drawnby_box_height - paperdetails.owner_box_height - textHeight/6 + textHeight * (1 + 1.2) + 1.5); @@ -232,6 +242,11 @@ function printPDF(svg, print_table, properties, pages=[1], filename="eendraadsch let sizex = print_table.pages[pages[iter]-1].stop - print_table.pages[pages[iter]-1].start; let sizey = print_table.stopy - print_table.starty; addPage(doc, cropSVG(svg, pages[iter]-1), sizex, sizey, nextpage, iter); //add one more page and callback here + } else if (iter < pages.length + sitplanprint.numpages) { + statuscallback.innerHTML = 'Pagina ' + (pages[pages.length-1]+(iter-pages.length)+1) + ' wordt gegenereerd. Even geduld..'; + if (iter > 0) doc.addPage(); + toprint = sitplanprint.pages[iter-pages.length]; + addPage(doc, toprint.svg, toprint.sizex, toprint.sizey, nextpage, iter); } else { save(doc); //we are done } diff --git a/src/Hierarchical_List.ts b/src/Hierarchical_List.ts index 7799d77..f278d64 100644 --- a/src/Hierarchical_List.ts +++ b/src/Hierarchical_List.ts @@ -79,6 +79,10 @@ class Hierarchical_List { length: number; curid: number; mode: string; //can be "edit" or "move" + sitplan: SituationPlan; + sitplanjson: any; //this is where we store the situation plan in plan object exporting to json + sitplanview: SituationPlanView; + currentView: string; // Here we store '2col' | 'config' | 'draw' // -- Constructor -- @@ -91,11 +95,21 @@ class Hierarchical_List { this.properties = new Properties(); this.curid = 1; this.mode = "edit"; + this.sitplan = new SituationPlan(); }; + /** dispose + * + */ + dispose() { + if (this.sitplanview != null) { + this.sitplanview.dispose(); + } + } + // -- Definitief verwijderen van items die als inactief werden geflagged -- - deleteInactive() { +/* deleteInactive() { for (let i = 0; i i) { //If this happens we perform a swap - //We will need another pass to ensure we had them all - continue_looping = true; - //Repush mis-placed item to the end - this.data.push(this.data[i]); - this.active.push(true); - this.id.push(this.id[i]); - this.length += 1 - //Set the original element to inactive - this.active[i] = false; + let sortToOrdinal = (parent = 0, ordinals = []) => { + for (let i = 0; i${output}
    `; } // -- Functie om de tree links te tekenen te starten by node met id = myParent -- @@ -581,6 +610,31 @@ class Hierarchical_List { return(output); } + /** Functie om de naam van een kring te vinden waartoe een element behoord + * + */ + + findKringName(my_id: number) : string { + let myOrdinal = this.getOrdinalById(my_id); + let myParent = this.data[myOrdinal].parent; + if (myParent == 0) { + return(""); + } else { + let myParentOrdinal = this.getOrdinalById(myParent); + if (myParentOrdinal == null) return(""); + if ((this.data[myParentOrdinal] as Electro_Item).getType() == "Kring") { + let kringnaam:string = 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 -- toSVG(myParent: number, stack: string, minxleft: number = 0, includeparent: boolean = false) { //stack can be "horizontal" or "vertical" diff --git a/src/List_Item/Aansluitpunt.ts b/src/List_Item/Aansluitpunt.ts index 05a524c..1a6dc1d 100644 --- a/src/List_Item/Aansluitpunt.ts +++ b/src/List_Item/Aansluitpunt.ts @@ -21,7 +21,7 @@ class Aansluitpunt extends Electro_Item { return(output); } - toSVG() { + toSVG(sitplan: boolean = false) { let mySVG:SVGelement = new SVGelement(); mySVG.xleft = 1; // foresee at least some space for the conductor @@ -29,11 +29,10 @@ class Aansluitpunt extends Electro_Item { mySVG.yup = 25; mySVG.ydown = 25; - mySVG.data += '' + mySVG.data += (sitplan? "" : '') + ''; - mySVG.data += this.addAddressToSVG(mySVG,45,0); - mySVG.data += "\n"; + mySVG.data += (sitplan? "" : this.addAddressToSVG(mySVG,45,0)); return(mySVG); } diff --git a/src/List_Item/Aftakdoos.ts b/src/List_Item/Aftakdoos.ts index d4d0f3d..40245dc 100644 --- a/src/List_Item/Aftakdoos.ts +++ b/src/List_Item/Aftakdoos.ts @@ -21,7 +21,7 @@ class Aftakdoos extends Electro_Item { return(output); } - toSVG() { + toSVG(sitplan: boolean = false) { let mySVG:SVGelement = new SVGelement(); mySVG.xleft = 1; // foresee at least some space for the conductor @@ -29,11 +29,10 @@ class Aftakdoos extends Electro_Item { mySVG.yup = 25; mySVG.ydown = 25; - mySVG.data += '' + mySVG.data += (sitplan? "" : '') + ''; - mySVG.data += this.addAddressToSVG(mySVG,55,10); - mySVG.data += "\n"; + mySVG.data += (sitplan? "" : this.addAddressToSVG(mySVG,55,10)); return(mySVG); } diff --git a/src/List_Item/Batterij.ts b/src/List_Item/Batterij.ts index 632b5ec..77ffbfd 100644 --- a/src/List_Item/Batterij.ts +++ b/src/List_Item/Batterij.ts @@ -21,7 +21,7 @@ class Batterij extends Electro_Item { return(output); } - toSVG() { + toSVG(sitplan: boolean = false) { let mySVG:SVGelement = new SVGelement(); let outputstr:string = ""; @@ -30,11 +30,10 @@ class Batterij extends Electro_Item { mySVG.yup = 25; mySVG.ydown = 25; - mySVG.data = '' + mySVG.data = (sitplan? "": '') + ''; - mySVG.data += this.addAddressToSVG(mySVG,55,10); - mySVG.data += "\n"; + mySVG.data += (sitplan? "": this.addAddressToSVG(mySVG,55,10)); return(mySVG); } diff --git a/src/List_Item/Bel.ts b/src/List_Item/Bel.ts index b64f24e..f0c53c0 100644 --- a/src/List_Item/Bel.ts +++ b/src/List_Item/Bel.ts @@ -34,7 +34,6 @@ class Bel extends Electro_Item { + ''; mySVG.data += this.addAddressToSVG(mySVG,60,15); - mySVG.data += "\n"; return(mySVG); } diff --git a/src/List_Item/Boiler.ts b/src/List_Item/Boiler.ts index 1f6d41a..006079e 100644 --- a/src/List_Item/Boiler.ts +++ b/src/List_Item/Boiler.ts @@ -24,7 +24,7 @@ class Boiler extends Electro_Item { return(output); } - toSVG() { + toSVG(sitplan: boolean = false) { let mySVG:SVGelement = new SVGelement(); let outputstr:string = ""; @@ -33,7 +33,7 @@ class Boiler extends Electro_Item { mySVG.yup = 25; mySVG.ydown = 25; - mySVG.data = ''; + mySVG.data = (sitplan? "" : ''); switch (this.props.heeft_accumulatie) { //accumulatie case false: mySVG.data += ''; @@ -43,8 +43,7 @@ class Boiler extends Electro_Item { break; } - mySVG.data += this.addAddressToSVG(mySVG,60); - mySVG.data += "\n"; + mySVG.data += (sitplan? "" : this.addAddressToSVG(mySVG,60)); return(mySVG); } diff --git a/src/List_Item/Contactdoos.ts b/src/List_Item/Contactdoos.ts index d862b49..e440b19 100644 --- a/src/List_Item/Contactdoos.ts +++ b/src/List_Item/Contactdoos.ts @@ -52,7 +52,7 @@ class Contactdoos extends Electro_Item { return(output); } - toSVG() { + toSVG(sitplan: boolean = false, mirrortext: boolean = false): SVGelement { let mySVG:SVGelement = new SVGelement(); mySVG.xleft = 1; // Links voldoende ruimte voor een eventuele kring voorzien @@ -117,18 +117,25 @@ class Contactdoos extends Electro_Item { }; // Teken halfwaterdicht indien van toepassing - if (this.props.is_halfwaterdicht) mySVG.data += 'h'; + if (this.props.is_halfwaterdicht) { + mySVG.data += ''; + let textX = (25+(this.props.heeft_ingebouwde_schakelaar)*10+(this.props.is_meerfasig)*34); + let textStyle = 'text-anchor:middle" font-family="Arial, Helvetica, sans-serif'; + if (mirrortext == false) + mySVG.data += 'h'; + else + mySVG.data += 'h'; + } // Indien de contactdoos een kind heeft, teken een streepje rechts - if (this.heeftVerbruikerAlsKind()) { + if ( (this.heeftVerbruikerAlsKind()) && (!sitplan) ) { mySVG.data += ''; }; // Adres helemaal onderaan plaatsen - mySVG.data += this.addAddressToSVG(mySVG,60,15); - mySVG.data += "\n"; + mySVG.data += (sitplan? "" : this.addAddressToSVG(mySVG,60,15)); return(mySVG); } - + } \ No newline at end of file diff --git a/src/List_Item/Diepvriezer.ts b/src/List_Item/Diepvriezer.ts index 8c96f65..9763801 100644 --- a/src/List_Item/Diepvriezer.ts +++ b/src/List_Item/Diepvriezer.ts @@ -21,20 +21,18 @@ class Diepvriezer extends Electro_Item { return(output); } - toSVG() { + toSVG(sitplan = false) { let mySVG:SVGelement = new SVGelement(); - let outputstr:string = ""; mySVG.xleft = 1; // foresee at least some space for the conductor mySVG.xright = 60; mySVG.yup = 25; mySVG.ydown = 25; - mySVG.data = '' + mySVG.data = (sitplan? "" : '') + ''; - mySVG.data += this.addAddressToSVG(mySVG,60,15); - mySVG.data += "\n"; + mySVG.data += (sitplan? "" : this.addAddressToSVG(mySVG,60,15)); return(mySVG); } diff --git a/src/List_Item/Domotica_gestuurde_verbruiker.ts b/src/List_Item/Domotica_gestuurde_verbruiker.ts index caf339c..f36f6e1 100644 --- a/src/List_Item/Domotica_gestuurde_verbruiker.ts +++ b/src/List_Item/Domotica_gestuurde_verbruiker.ts @@ -49,7 +49,7 @@ class Domotica_gestuurde_verbruiker extends Electro_Item { return(output); } - toSVG() { + toSVG(sitplan = false) { let mySVG:SVGelement = new SVGelement(); // Eerst de tekening van de aangestuurde verbruiker maken @@ -117,14 +117,15 @@ class Domotica_gestuurde_verbruiker extends Electro_Item { //Place text below if there is any - if (!(/^\s*$/.test(this.props.adres))) { //check if adres contains only white space - mySVG.data += '' - + htmlspecialchars(this.props.adres) + ''; - - mySVG.ydown += 15; - } - + if (sitplan == false) { + if (!(/^\s*$/.test(this.props.adres))) { //check if adres contains only white space + mySVG.data += '' + + htmlspecialchars(this.props.adres) + ''; + + mySVG.ydown += 15; + } + } return(mySVG); } diff --git a/src/List_Item/Droogkast.ts b/src/List_Item/Droogkast.ts index ababfa4..3eba638 100644 --- a/src/List_Item/Droogkast.ts +++ b/src/List_Item/Droogkast.ts @@ -21,7 +21,7 @@ class Droogkast extends Electro_Item { return(output); } - toSVG() { + toSVG(sitplan = false) { let mySVG:SVGelement = new SVGelement(); mySVG.xleft = 1; // foresee at least some space for the conductor @@ -29,11 +29,10 @@ class Droogkast extends Electro_Item { mySVG.yup = 25; mySVG.ydown = 25; - mySVG.data = '' + mySVG.data = (sitplan? "" : '') + ''; - mySVG.data += this.addAddressToSVG(mySVG,60,15); - mySVG.data += "\n"; + mySVG.data += (sitplan? "" : this.addAddressToSVG(mySVG,60,15)); return(mySVG); } diff --git a/src/List_Item/Drukknop.ts b/src/List_Item/Drukknop.ts index ae8594b..05f5432 100644 --- a/src/List_Item/Drukknop.ts +++ b/src/List_Item/Drukknop.ts @@ -39,7 +39,7 @@ class Drukknop extends Electro_Item { return(output); } - toSVG() { + toSVG(sitplan: boolean = false, mirrortext: boolean = false) { let mySVG:SVGelement = new SVGelement(); mySVG.xleft = 1; // Links voldoende ruimte voor een eventuele kring voorzien @@ -50,7 +50,7 @@ class Drukknop extends Electro_Item { var aantal_knoppen:number = this.props.aantal; // Teken lijn links - mySVG.data += '' + mySVG.data += (sitplan? "" : '') + ''; // Teken verklikkerlampje indien van toepassing @@ -75,12 +75,22 @@ class Drukknop extends Electro_Item { if (printstr != '') { printstr += ', ' } printstr += 'x' + aantal_knoppen; } - if (printstr != '') mySVG.data += '' + htmlspecialchars(printstr) + ''; + if (printstr != '') { + let textoptions = 'style="text-anchor:middle" font-family="Arial, Helvetica, sans-serif" font-size="10"'; + if (mirrortext == false) + mySVG.data += '' + htmlspecialchars(printstr) + ''; + else + mySVG.data += '' + htmlspecialchars(printstr) + ''; + } - // Plaats tekst voor aantal knoppen + // Plaats tekst voor aantal knoppen per armatuur if (this.props.aantal_knoppen_per_armatuur > 1) { - mySVG.data += '' + htmlspecialchars(this.props.aantal_knoppen_per_armatuur) + '' - + ''; + let textoptions = 'style="text-anchor:middle" font-family="Arial, Helvetica, sans-serif" font-size="10"'; + if (mirrortext == false) + mySVG.data += '' + htmlspecialchars(this.props.aantal_knoppen_per_armatuur) + ''; + else + mySVG.data += '' + htmlspecialchars(this.props.aantal_knoppen_per_armatuur) + ''; + mySVG.data += ''; } // Plaats extra tekens voor rolluik of dimmer @@ -97,9 +107,9 @@ class Drukknop extends Electro_Item { // Plaats adres helemaal onderaan if (printstr != '') { - mySVG.data += this.addAddressToSVG(mySVG,65,20); + mySVG.data += (sitplan? "" : this.addAddressToSVG(mySVG,65,20)); } else { - mySVG.data += this.addAddressToSVG(mySVG,49,5); + mySVG.data += (sitplan? "" : this.addAddressToSVG(mySVG,49,5)); } return(mySVG); diff --git a/src/List_Item/EV_lader.ts b/src/List_Item/EV_lader.ts index bcfb6bb..23a2520 100644 --- a/src/List_Item/EV_lader.ts +++ b/src/List_Item/EV_lader.ts @@ -21,20 +21,18 @@ class EV_lader extends Electro_Item { return(output); } - toSVG() { + toSVG(sitplan = false) { let mySVG:SVGelement = new SVGelement(); - let outputstr:string = ""; mySVG.xleft = 1; // foresee at least some space for the conductor mySVG.xright = 60; mySVG.yup = 25; mySVG.ydown = 25; - mySVG.data = '' + mySVG.data = (sitplan ? "" : '') + ''; - mySVG.data += this.addAddressToSVG(mySVG,60,15); - mySVG.data += "\n"; + mySVG.data += (sitplan ? "" : this.addAddressToSVG(mySVG,60,15)); return(mySVG); } diff --git a/src/List_Item/Electro_Item.ts b/src/List_Item/Electro_Item.ts index 6e26d64..cebcfbe 100644 --- a/src/List_Item/Electro_Item.ts +++ b/src/List_Item/Electro_Item.ts @@ -181,6 +181,34 @@ class Electro_Item extends List_Item { toHTML(mode: string) { return(this.toHTMLHeader(mode)); } // Implemented in the derived classes + // -- Get the number of the Electro_Item, if it is not defined, ask the parent + + getnr() { + let parent:Electro_Item = (this.getParent() as Electro_Item); + if (parent != null) { + switch (parent.getType()) { + case "Kring": + case "Domotica module (verticaal)": + return this.props.nr; + default: + return parent.getnr(); + } + } else { + return ""; + }; + } + + // -- Get readable address of the Electro_Item, if it is not defined, ask the parent -- + + getReadableAdres() { + let kringname:string = structure.findKringName(this.id).trim(); + let nr:string = this.getnr().trim(); + + if (kringname == "") return nr; + else if (nr == "") return kringname + else return kringname + "." + nr; + } + // -- Display the number in the html tree view, but only if it is displayable nrToHtml() { @@ -199,7 +227,7 @@ class Electro_Item extends List_Item { // -- Code to add the addressline below when drawing SVG. This is called by most derived classes -- addAddressToSVG(mySVG: SVGelement, starty:number = 60, godown:number = 15, shiftx:number = 0): String { - let returnstr:string; + let returnstr:string = ""; if (!(/^\s*$/.test(this.props.adres))) { //check if adres contains only white space returnstr = '' + htmlspecialchars(this.props.adres) + ''; mySVG.ydown = mySVG.ydown + godown; @@ -209,5 +237,45 @@ class Electro_Item extends List_Item { // -- Make the SVG for the electro item, placeholder for derived classes -- - toSVG(): SVGelement { return(new SVGelement()); } //Placeholder for derived classes + toSVG(sitplan: boolean = false, mirror: boolean=false): SVGelement { return(new SVGelement()); } //Placeholder for derived classes + + /** ToSituationPlanElement + * + * @returns {SituationPlanElement} The SituationPlanElement that represents this Electro_Item + */ + + toSituationPlanElement() { + let myElement = new SituationPlanElement(1,0,0,0,0,0,1,randomId("SP_"),""); + this.updateSituationPlanElement(myElement); + return(myElement); + } + + updateSituationPlanElement(myElement: SituationPlanElement) { + + let spiegeltext = false; + let rotate = myElement.rotate % 360; + if ( (rotate >= 90) && (rotate < 270) ) spiegeltext = true; + + let mySVGElement:SVGelement = this.toSVG(true, spiegeltext); + let sizex = mySVGElement.xright + mySVGElement.xleft + 10; + let sizey = mySVGElement.yup + mySVGElement.ydown; + + let clipleft = 0; + if (['Contactdoos','Bel'].includes(this.getType())) { + clipleft = 0; + } else { + clipleft = 12; + } + + let addright = 0; + + myElement.setSVG(`` + + SVGSymbols.outputSVGSymbols() + + mySVGElement.data + + ''); + + myElement.getSizeFromString(); + } + } diff --git a/src/List_Item/Elektriciteitsmeter.ts b/src/List_Item/Elektriciteitsmeter.ts index 3d9e32e..35cf8d9 100644 --- a/src/List_Item/Elektriciteitsmeter.ts +++ b/src/List_Item/Elektriciteitsmeter.ts @@ -21,20 +21,18 @@ class Elektriciteitsmeter extends Electro_Item { return(output); } - toSVG() { + toSVG(sitplan = false) { let mySVG:SVGelement = new SVGelement(); - let outputstr:string = ""; mySVG.xleft = 1; // foresee at least some space for the conductor mySVG.xright = 59; mySVG.yup = 25; mySVG.ydown = 25; - mySVG.data = '' + mySVG.data = (sitplan? "" : '') + ''; - mySVG.data += this.addAddressToSVG(mySVG,60,15); - mySVG.data += "\n"; + mySVG.data += (sitplan? "" : this.addAddressToSVG(mySVG,60,15)); return(mySVG); } diff --git a/src/List_Item/Elektrische_oven.ts b/src/List_Item/Elektrische_oven.ts index 9e628b2..a0bbcc7 100644 --- a/src/List_Item/Elektrische_oven.ts +++ b/src/List_Item/Elektrische_oven.ts @@ -21,20 +21,18 @@ class Elektrische_oven extends Electro_Item { return(output); } - toSVG() { + toSVG(sitplan = false) { let mySVG:SVGelement = new SVGelement(); - let outputstr:string = ""; mySVG.xleft = 1; // foresee at least some space for the conductor mySVG.xright = 59; mySVG.yup = 25; mySVG.ydown = 25; - mySVG.data = '' + mySVG.data = (sitplan? "" : '') + ''; - mySVG.data += this.addAddressToSVG(mySVG,60,15); - mySVG.data += "\n"; + mySVG.data += (sitplan? "" : this.addAddressToSVG(mySVG,60,15)); return(mySVG); } diff --git a/src/List_Item/Ketel.ts b/src/List_Item/Ketel.ts index cb1d9e2..3c2b259 100644 --- a/src/List_Item/Ketel.ts +++ b/src/List_Item/Ketel.ts @@ -33,7 +33,7 @@ class Ketel extends Electro_Item { return(output); } - toSVG() { + toSVG(sitplan = false) { let mySVG:SVGelement = new SVGelement(); // Alles naar beneden schuiven als we het aantal laders boven het symbool willen plaatsen @@ -49,7 +49,7 @@ class Ketel extends Electro_Item { mySVG.ydown = 25; // Leiding links - mySVG.data += '' + mySVG.data += (sitplan? "" : '') + ''; @@ -100,8 +100,7 @@ class Ketel extends Electro_Item { } // Adres helemaal onderaan plaatsen - mySVG.data += this.addAddressToSVG(mySVG,60 + shifty,15); - mySVG.data += "\n"; + mySVG.data += (sitplan? "" : this.addAddressToSVG(mySVG,60 + shifty,15)); return(mySVG); } diff --git a/src/List_Item/Koelkast.ts b/src/List_Item/Koelkast.ts index b7b0e55..b12bb0d 100644 --- a/src/List_Item/Koelkast.ts +++ b/src/List_Item/Koelkast.ts @@ -21,20 +21,18 @@ class Koelkast extends Electro_Item { return(output); } - toSVG() { + toSVG(sitplan = false) { let mySVG:SVGelement = new SVGelement(); - let outputstr:string = ""; mySVG.xleft = 1; // foresee at least some space for the conductor mySVG.xright = 59; mySVG.yup = 25; mySVG.ydown = 25; - mySVG.data = '' + mySVG.data = (sitplan? "" : '') + ''; mySVG.data += this.addAddressToSVG(mySVG,60,15); - mySVG.data += "\n"; return(mySVG); } diff --git a/src/List_Item/Kookfornuis.ts b/src/List_Item/Kookfornuis.ts index db4e672..eaddb2a 100644 --- a/src/List_Item/Kookfornuis.ts +++ b/src/List_Item/Kookfornuis.ts @@ -21,7 +21,7 @@ class Kookfornuis extends Electro_Item { return(output); } - toSVG() { + toSVG(sitplan = false) { let mySVG:SVGelement = new SVGelement(); let outputstr:string = ""; @@ -30,11 +30,10 @@ class Kookfornuis extends Electro_Item { mySVG.yup = 25; mySVG.ydown = 25; - mySVG.data = '' + mySVG.data = (sitplan? "" : '') + ''; - mySVG.data += this.addAddressToSVG(mySVG,60,15); - mySVG.data += "\n"; + mySVG.data += (sitplan? "" : this.addAddressToSVG(mySVG,60,15)); return(mySVG); } diff --git a/src/List_Item/Lichtpunt.ts b/src/List_Item/Lichtpunt.ts index 7d99f99..2b59421 100644 --- a/src/List_Item/Lichtpunt.ts +++ b/src/List_Item/Lichtpunt.ts @@ -46,7 +46,7 @@ class Lichtpunt extends Electro_Item { return(output); } - toSVG() { + toSVG(sitplan: boolean = false, mirrortext = false) { let mySVG:SVGelement = new SVGelement(); mySVG.xleft = 1; // Links voldoende ruimte voor een eventuele kring voorzien @@ -55,7 +55,7 @@ class Lichtpunt extends Electro_Item { mySVG.ydown = 25; // Teken de leiding links - mySVG.data = ''; + mySVG.data = (sitplan? "" : ''); // Indien halfwaterdicht en/of meerdere lampen, voorzie de tekst bovenaan let print_str_upper = ""; @@ -92,7 +92,13 @@ class Lichtpunt extends Electro_Item { if ( (print_str_upper.length > 2) && ( (this.props.type_noodverlichting == "Centraal") || (this.props.type_noodverlichting == "Decentraal") ) ) textxpos = 40; else textxpos = 36; }; - if (print_str_upper != "") mySVG.data += '' + htmlspecialchars(print_str_upper) + ''; + if (print_str_upper != "") { + let textoptions = 'style="text-anchor:middle" font-family="Arial, Helvetica, sans-serif" font-size="7"'; + if (mirrortext==false) + mySVG.data += `${htmlspecialchars(print_str_upper)}`; + else + mySVG.data += `${htmlspecialchars(print_str_upper)}`; + } switch (this.props.type_noodverlichting) { // Type noodverlichting case "Centraal": @@ -112,7 +118,7 @@ class Lichtpunt extends Electro_Item { // Verdere uitlijning en adres onderaan mySVG.xright = 42; - mySVG.data += this.addAddressToSVG(mySVG,50,5,2); + mySVG.data += (sitplan? "" : this.addAddressToSVG(mySVG,50,5,2)); break; case "spot": @@ -139,7 +145,13 @@ class Lichtpunt extends Electro_Item { if ( (print_str_upper.length > 2) && ( (this.props.type_noodverlichting == "Centraal") || (this.props.type_noodverlichting == "Decentraal") ) ) textxpos = 44; else textxpos = 40; } - if (print_str_upper != "") mySVG.data += '' + htmlspecialchars(print_str_upper) + ''; + if (print_str_upper != "") { + let textoptions = 'style="text-anchor:middle" font-family="Arial, Helvetica, sans-serif" font-size="7"'; + if (mirrortext==false) + mySVG.data += `${htmlspecialchars(print_str_upper)}`; + else + mySVG.data += `${htmlspecialchars(print_str_upper)}`; + } switch (this.props.type_noodverlichting) { case "Centraal": @@ -159,7 +171,7 @@ class Lichtpunt extends Electro_Item { // Verdere uitlijning en adres onderaan mySVG.xright = 45; - mySVG.data += this.addAddressToSVG(mySVG,52,7,4); + mySVG.data += (sitplan? "" : this.addAddressToSVG(mySVG,52,7,4)); break; case "TL": @@ -179,7 +191,13 @@ class Lichtpunt extends Electro_Item { if (this.props.is_wandlamp) mySVG.data += ''; // Zet symbool halfwaterdicht en aantal lampen bovenaan - if (print_str_upper != "") mySVG.data += '' + htmlspecialchars(print_str_upper) + ''; + if (print_str_upper != "") { + let textoptions = 'style="text-anchor:middle" font-family="Arial, Helvetica, sans-serif" font-size="10"'; + if (mirrortext == false) + mySVG.data += `${htmlspecialchars(print_str_upper)}`; + else + mySVG.data += `${htmlspecialchars(print_str_upper)}`; + } // Teken ingebouwde schakelaar indien van toepassing if (this.props.heeft_ingebouwde_schakelaar) { @@ -209,7 +227,7 @@ class Lichtpunt extends Electro_Item { // Verdere uitlijning en adres onderaan mySVG.xright = 90; - mySVG.data += this.addAddressToSVG(mySVG,endy+13,Math.max(mySVG.ydown,endy+18-25),2); + mySVG.data += (sitplan? "" : this.addAddressToSVG(mySVG,endy+13,Math.max(mySVG.ydown,endy+18-25),2)); break; default: //Normaal lichtpunt (kruisje) @@ -218,7 +236,7 @@ class Lichtpunt extends Electro_Item { case "Centraal": mySVG.data += '' + ''; - if (this.heeftVerbruikerAlsKind()) mySVG.data += ''; + if ( (this.heeftVerbruikerAlsKind()) && (!sitplan) ) mySVG.data += ''; break; case "Decentraal": mySVG.data += ''; @@ -226,12 +244,18 @@ class Lichtpunt extends Electro_Item { break; default: mySVG.data += ''; - if (this.heeftVerbruikerAlsKind()) mySVG.data += ''; + if ( (this.heeftVerbruikerAlsKind()) && (!sitplan) ) mySVG.data += ''; break; } // Zet symbool halfwaterdicht en aantal lampen bovenaan - if (print_str_upper != "") mySVG.data += '' + htmlspecialchars(print_str_upper) + ''; + if (print_str_upper != "") { + let textoptions = 'style="text-anchor:middle" font-family="Arial, Helvetica, sans-serif" font-size="10"'; + if (mirrortext == false) + mySVG.data += `${htmlspecialchars(print_str_upper)}`; + else + mySVG.data += `${htmlspecialchars(print_str_upper)}`; + } // Teken wandlamp indien van toepassing if (this.props.is_wandlamp) mySVG.data += ''; @@ -241,7 +265,7 @@ class Lichtpunt extends Electro_Item { // Verdere uitlijning en adres onderaan mySVG.xright = 39; - mySVG.data += this.addAddressToSVG(mySVG,54,10,-1); + mySVG.data += (sitplan? "" : this.addAddressToSVG(mySVG,54,10,-1)); break; } diff --git a/src/List_Item/Media.ts b/src/List_Item/Media.ts index 83ff4ac..4d4c1df 100644 --- a/src/List_Item/Media.ts +++ b/src/List_Item/Media.ts @@ -37,7 +37,7 @@ class Media extends Electro_Item { return(output); } - toSVG() { + toSVG(sitplan = false) { let mySVG:SVGelement = new SVGelement(); // Alles naar beneden schuiven als we het aantal laders boven het symbool willen plaatsen @@ -54,13 +54,13 @@ class Media extends Electro_Item { switch (this.props.symbool) { case "luidspreker": - mySVG.data += '' - + ''; + mySVG.data += (sitplan? '' : ''); + mySVG.data += ''; mySVG.xright = 36; - mySVG.data += this.addAddressToSVG(mySVG,60 + shifty,15,0); + mySVG.data += (sitplan? '' : this.addAddressToSVG(mySVG,60 + shifty,15,0)); break; default: - mySVG.data += ''; + mySVG.data += (sitplan? '' : ''); mySVG.xright = 19; break; } diff --git a/src/List_Item/Microgolfoven.ts b/src/List_Item/Microgolfoven.ts index 04193f2..bf92133 100644 --- a/src/List_Item/Microgolfoven.ts +++ b/src/List_Item/Microgolfoven.ts @@ -21,20 +21,18 @@ class Microgolfoven extends Electro_Item { return(output); } - toSVG() { + toSVG(sitplan = false) { let mySVG:SVGelement = new SVGelement(); - let outputstr:string = ""; mySVG.xleft = 1; // foresee at least some space for the conductor mySVG.xright = 59; mySVG.yup = 25; mySVG.ydown = 25; - mySVG.data = '' + mySVG.data = (sitplan? "" : '') + ''; mySVG.data += this.addAddressToSVG(mySVG,60,15); - mySVG.data += "\n"; return(mySVG); } diff --git a/src/List_Item/Motor.ts b/src/List_Item/Motor.ts index 773b993..61f5c7d 100644 --- a/src/List_Item/Motor.ts +++ b/src/List_Item/Motor.ts @@ -21,20 +21,18 @@ class Motor extends Electro_Item { return(output); } - toSVG() { + toSVG(sitplan = false) { let mySVG:SVGelement = new SVGelement(); - let outputstr:string = ""; mySVG.xleft = 1; // foresee at least some space for the conductor mySVG.xright = 59; mySVG.yup = 25; mySVG.ydown = 25; - mySVG.data = '' + mySVG.data = (sitplan? "" : '') + ''; mySVG.data += this.addAddressToSVG(mySVG,60,15); - mySVG.data += "\n"; return(mySVG); } diff --git a/src/List_Item/Omvormer.ts b/src/List_Item/Omvormer.ts index ea3385a..ef511a5 100644 --- a/src/List_Item/Omvormer.ts +++ b/src/List_Item/Omvormer.ts @@ -21,20 +21,18 @@ class Omvormer extends Electro_Item { return(output); } - toSVG() { + toSVG(sitplan = false) { let mySVG:SVGelement = new SVGelement(); - let outputstr:string = ""; mySVG.xleft = 1; // foresee at least some space for the conductor mySVG.xright = 59; mySVG.yup = 25; mySVG.ydown = 25; - mySVG.data = '' + mySVG.data = (sitplan? "" : '') + ''; - mySVG.data += this.addAddressToSVG(mySVG,60,15); - mySVG.data += "\n"; + mySVG.data += (sitplan? "" : this.addAddressToSVG(mySVG,60,15)); return(mySVG); } diff --git a/src/List_Item/Overspanningsbeveiliging.ts b/src/List_Item/Overspanningsbeveiliging.ts index 384f909..535288f 100644 --- a/src/List_Item/Overspanningsbeveiliging.ts +++ b/src/List_Item/Overspanningsbeveiliging.ts @@ -21,20 +21,18 @@ class Overspanningsbeveiliging extends Electro_Item { return(output); } - toSVG() { + toSVG(sitplan = false) { let mySVG:SVGelement = new SVGelement(); - let outputstr:string = ""; mySVG.xleft = 1; // foresee at least some space for the conductor mySVG.xright = 34; mySVG.yup = 25; mySVG.ydown = 25; - mySVG.data = '' + mySVG.data = (sitplan? "" : '') + ''; - mySVG.data += this.addAddressToSVG(mySVG,55,10); - mySVG.data += "\n"; + mySVG.data += (sitplan? "" : this.addAddressToSVG(mySVG,55,10)); return(mySVG); } diff --git a/src/List_Item/Schakelaars/Lichtcircuit.ts b/src/List_Item/Schakelaars/Lichtcircuit.ts index 46102d8..0a3a1a9 100644 --- a/src/List_Item/Schakelaars/Lichtcircuit.ts +++ b/src/List_Item/Schakelaars/Lichtcircuit.ts @@ -45,7 +45,7 @@ class Lichtcircuit extends Schakelaars { return(output); } - toSVG() { + toSVG(sitplan: boolean = false, mirrortext: boolean = false) { let mySVG:SVGelement = new SVGelement(); let tekenKeten: Array = []; @@ -60,7 +60,7 @@ class Lichtcircuit extends Schakelaars { // Teken de schakelaars for (let i=0; i= 1) { //1 of meerdere lampen @@ -77,7 +77,13 @@ class Lichtcircuit extends Schakelaars { } else if (parseInt(this.props.aantal_lichtpunten) > 1) { print_str_upper = "x" + this.props.aantal_lichtpunten; } - if (print_str_upper != "") mySVG.data += '' + htmlspecialchars(print_str_upper) + ''; + if (print_str_upper != "") { + let textoptions = 'style="text-anchor:middle" font-family="Arial, Helvetica, sans-serif" font-size="10"'; + if (mirrortext==false) + mySVG.data += `${htmlspecialchars(print_str_upper)}`; + else + mySVG.data += `${htmlspecialchars(print_str_upper)}`; + } // Teken een leiding achter de lamp indien er nog kinderen zijn if (this.heeftVerbruikerAlsKind()) mySVG.data += ''; @@ -87,7 +93,11 @@ class Lichtcircuit extends Schakelaars { lowerbound = Math.max(lowerbound,29); } else { //Geen lampen // Voor bepaalde symbolen moet wat extra ruimte rechts voorzien worden om te vermijden dat de tekening door de volgende kring loopt - if ((!this.heeftVerbruikerAlsKind()) && (tekenKeten.length>0)) startx += tekenKeten[tekenKeten.length-1].extraPlaatsRechts(); + if ((!this.heeftVerbruikerAlsKind() || sitplan) && (tekenKeten.length>0)) { + let extra = tekenKeten[tekenKeten.length-1].extraPlaatsRechts(); + if (sitplan) extra = Math.max(0,extra - 5); + startx += extra; + } } mySVG.xleft = 1; // foresee at least some space for the conductor @@ -95,8 +105,7 @@ class Lichtcircuit extends Schakelaars { mySVG.yup = 25; mySVG.ydown = 25; - mySVG.data += this.addAddressToSVG(mySVG,25+lowerbound,Math.max(0,lowerbound-20)); - mySVG.data += "\n"; + mySVG.data += (sitplan? '' : this.addAddressToSVG(mySVG,25+lowerbound,Math.max(0,lowerbound-20))); return(mySVG); } diff --git a/src/List_Item/Schakelaars/Schakelaar.ts b/src/List_Item/Schakelaars/Schakelaar.ts index a9507a4..4d39d9a 100644 --- a/src/List_Item/Schakelaars/Schakelaar.ts +++ b/src/List_Item/Schakelaars/Schakelaar.ts @@ -13,6 +13,9 @@ class Schakelaar { trekschakelaar: boolean; aantal: number; + sitplan: boolean = false; + mirrortext: boolean = false; + constructor(type: String, halfwaterdicht: boolean=false, verklikkerlamp: boolean=false, signalisatielamp: boolean=false, trekschakelaar: boolean=false, aantal: number=1) { this.type = type; this.halfwaterdicht = halfwaterdicht; @@ -25,7 +28,13 @@ class Schakelaar { schakelaarAttributentoSVGString(endx: number, isdubbel: boolean = false) { let outputstr:string = ""; if (this.signalisatielamp) outputstr += ''; - if (this.halfwaterdicht) outputstr += 'h'; + if (this.halfwaterdicht) { + let textoptions = 'style="text-anchor:middle" font-family="Arial, Helvetica, sans-serif" font-size="10"'; + if (this.mirrortext == false) + outputstr += `h`; + else + outputstr += `h`; + } if (this.verklikkerlamp) outputstr += ''; if (this.trekschakelaar) { switch (isdubbel) { @@ -157,7 +166,13 @@ class Schakelaar { outputstr += '' + ''; - if (this.halfwaterdicht) outputstr += 'h'; + if (this.halfwaterdicht) { + let textoptions = 'style="text-anchor:middle" font-family="Arial, Helvetica, sans-serif" font-size="10"'; + if (this.mirrortext == false) + outputstr += `h`; + else + outputstr += `h`; + } return({endx: endx, str: outputstr, lowerbound: null}); } @@ -168,7 +183,11 @@ class Schakelaar { // Alles naar beneden schuiven als we het aantal laders boven het symbool willen plaatsen if (this.aantal>1) { - outputstr += 'x' + htmlspecialchars(this.aantal) + '' + let textoptions = 'style="text-anchor:middle" font-family="Arial, Helvetica, sans-serif" font-size="10"'; + if (this.mirrortext == false) + outputstr += `x${htmlspecialchars(this.aantal)}`; + else + outputstr += `x${htmlspecialchars(this.aantal)}`; } outputstr += '' @@ -195,10 +214,14 @@ class Schakelaar { else return 0; } - toSVGString(startx: number, last: boolean): drawReturnObj { + toSVGString(startx: number, last: boolean, sitplan: boolean = false, mirrortext: boolean = false): drawReturnObj { let outputstr:string = ""; let endx; let lowerbound = 20; + + this.sitplan = sitplan; + this.mirrortext = mirrortext; + switch(this.type) { case "enkel": ( {endx: endx, str: outputstr} = (this.enkeltoDrawReturnObj(startx)) ); diff --git a/src/List_Item/Schakelaars/Schakelaars.ts b/src/List_Item/Schakelaars/Schakelaars.ts index 30b12e9..2b24afc 100644 --- a/src/List_Item/Schakelaars/Schakelaars.ts +++ b/src/List_Item/Schakelaars/Schakelaars.ts @@ -124,7 +124,7 @@ class Schakelaars extends Electro_Item { } } - toSVG() { + toSVG(sitplan = false, mirrortext = false) { let mySVG:SVGelement = new SVGelement(); let tekenKeten: Array = []; @@ -138,18 +138,21 @@ class Schakelaars extends Electro_Item { for (let i=0; i') + ''; - mySVG.data += this.addAddressToSVG(mySVG,60,15); - mySVG.data += "\n"; + mySVG.data += (sitplan? "" : this.addAddressToSVG(mySVG,60,15)); return(mySVG); } diff --git a/src/List_Item/Transformator.ts b/src/List_Item/Transformator.ts index 0caea04..823c849 100644 --- a/src/List_Item/Transformator.ts +++ b/src/List_Item/Transformator.ts @@ -24,7 +24,7 @@ class Transformator extends Electro_Item { return(output); } - toSVG() { + toSVG(sitplan = false) { let mySVG:SVGelement = new SVGelement(); mySVG.xleft = 1; // foresee at least some space for the conductor @@ -32,13 +32,12 @@ class Transformator extends Electro_Item { mySVG.yup = 25; mySVG.ydown = 25; - mySVG.data = '' + mySVG.data = (sitplan? "" : '') + '' + '' + htmlspecialchars(this.props.voltage) + ""; - mySVG.data += this.addAddressToSVG(mySVG,58,15); - mySVG.data += "\n"; + mySVG.data += (sitplan? "" : this.addAddressToSVG(mySVG,58,15)); return(mySVG); } diff --git a/src/List_Item/USB_lader.ts b/src/List_Item/USB_lader.ts index b269feb..0095443 100644 --- a/src/List_Item/USB_lader.ts +++ b/src/List_Item/USB_lader.ts @@ -24,9 +24,8 @@ class USB_lader extends Electro_Item { return(output); } - toSVG() { + toSVG(sitplan = false) { let mySVG:SVGelement = new SVGelement(); - let outputstr:string = ""; // Alles naar beneden schuiven als we het aantal laders boven het symbool willen plaatsen var shifty = 0; @@ -40,11 +39,10 @@ class USB_lader extends Electro_Item { mySVG.yup = 25 + shifty; mySVG.ydown = 25; - mySVG.data += '' + mySVG.data += (sitplan? "" : '') + ''; - mySVG.data += this.addAddressToSVG(mySVG,55 + shifty,10); - mySVG.data += "\n"; + mySVG.data += (sitplan? "" : this.addAddressToSVG(mySVG,55 + shifty,10)); return(mySVG); } diff --git a/src/List_Item/Vaatwasmachine.ts b/src/List_Item/Vaatwasmachine.ts index d9c5d45..ee3cdb4 100644 --- a/src/List_Item/Vaatwasmachine.ts +++ b/src/List_Item/Vaatwasmachine.ts @@ -21,20 +21,18 @@ class Vaatwasmachine extends Electro_Item { return(output); } - toSVG() { + toSVG(sitplan = false) { let mySVG:SVGelement = new SVGelement(); - let outputstr:string = ""; mySVG.xleft = 1; // foresee at least some space for the conductor mySVG.xright = 59; mySVG.yup = 25; mySVG.ydown = 25; - mySVG.data = '' + mySVG.data = (sitplan? "" : '') + ''; - mySVG.data += this.addAddressToSVG(mySVG,60,15); - mySVG.data += "\n"; + mySVG.data += (sitplan? "" : this.addAddressToSVG(mySVG,60,15)); return(mySVG); } diff --git a/src/List_Item/Ventilator.ts b/src/List_Item/Ventilator.ts index 511d71c..6fa0d64 100644 --- a/src/List_Item/Ventilator.ts +++ b/src/List_Item/Ventilator.ts @@ -21,20 +21,18 @@ class Ventilator extends Electro_Item { return(output); } - toSVG() { + toSVG(sitplan = false) { let mySVG:SVGelement = new SVGelement(); - let outputstr:string = ""; mySVG.xleft = 1; // foresee at least some space for the conductor mySVG.xright = 49; mySVG.yup = 25; mySVG.ydown = 25; - mySVG.data = '' + mySVG.data = (sitplan? "" : '') + ''; - mySVG.data += this.addAddressToSVG(mySVG,55,10); - mySVG.data += "\n"; + mySVG.data += (sitplan? "" : this.addAddressToSVG(mySVG,55,10)); return(mySVG); } diff --git a/src/List_Item/Verbruiker.ts b/src/List_Item/Verbruiker.ts index 69a0878..8df96a3 100644 --- a/src/List_Item/Verbruiker.ts +++ b/src/List_Item/Verbruiker.ts @@ -60,7 +60,7 @@ class Verbruiker extends Electro_Item { } } - toSVG() { + toSVG(sitplan = false) { let mySVG:SVGelement = new SVGelement(); var strlines = htmlspecialchars(this.props.tekst).split("|"); @@ -95,7 +95,7 @@ class Verbruiker extends Electro_Item { } // Kader en adres tekenen -- - mySVG.data += '' + mySVG.data += (sitplan? "" : '') + '' + this.addAddressToSVG(mySVG,60+extraplace,15,width/2-(mySVG.xright-20)/2); diff --git a/src/List_Item/Verwarmingstoestel.ts b/src/List_Item/Verwarmingstoestel.ts index 028fdd3..8c3f730 100644 --- a/src/List_Item/Verwarmingstoestel.ts +++ b/src/List_Item/Verwarmingstoestel.ts @@ -32,16 +32,15 @@ class Verwarmingstoestel extends Electro_Item { return(output); } - toSVG() { + toSVG(sitplan = false) { let mySVG:SVGelement = new SVGelement(); - let outputstr:string = ""; mySVG.xleft = 1; // foresee at least some space for the conductor mySVG.xright = 69; mySVG.yup = 25; mySVG.ydown = 25; - mySVG.data = ''; + mySVG.data = (sitplan? "" : ''); switch (this.props.heeft_accumulatie) { //accumulatie case false: mySVG.data += ''; @@ -59,8 +58,7 @@ class Verwarmingstoestel extends Electro_Item { break; } - mySVG.data += this.addAddressToSVG(mySVG,55,10); - mySVG.data += "\n"; + mySVG.data += (sitplan? "" : this.addAddressToSVG(mySVG,55,10)); return(mySVG); } diff --git a/src/List_Item/Vrije_tekst.ts b/src/List_Item/Vrije_tekst.ts index 399dead..71c154b 100644 --- a/src/List_Item/Vrije_tekst.ts +++ b/src/List_Item/Vrije_tekst.ts @@ -67,7 +67,7 @@ class Vrije_tekst extends Electro_Item { } } - toSVG() { + toSVG(sitplan = false) { let mySVG:SVGelement = new SVGelement(); var strlines = htmlspecialchars(this.props.tekst).split("|"); @@ -111,7 +111,7 @@ class Vrije_tekst extends Electro_Item { switch (this.props.vrije_tekst_type) { case "zonder kader": break; default: //Wegens compatibiliteit met oudere versies van de software is het ontbreken van eender welke parameter een "met kader" - mySVG.data += '' + mySVG.data += (sitplan? "" : '') + '' + this.addAddressToSVG(mySVG,60+extraplace,15,width/2-(mySVG.xright-20)/2); break; diff --git a/src/List_Item/Warmtepomp.ts b/src/List_Item/Warmtepomp.ts index e2f2155..e981e0b 100644 --- a/src/List_Item/Warmtepomp.ts +++ b/src/List_Item/Warmtepomp.ts @@ -27,7 +27,7 @@ class Warmtepomp extends Electro_Item { return(output); } - toSVG() { + toSVG(sitplan = false) { let mySVG:SVGelement = new SVGelement(); // Alles naar beneden schuiven als we het aantal laders boven het symbool willen plaatsen @@ -42,7 +42,7 @@ class Warmtepomp extends Electro_Item { mySVG.yup = 25 + shifty; mySVG.ydown = 25; - mySVG.data += '' + mySVG.data += (sitplan? "" : '') + '' + '' + '' @@ -68,8 +68,7 @@ class Warmtepomp extends Electro_Item { } // Adres helemaal onderaan plaatsen - mySVG.data += this.addAddressToSVG(mySVG,60 + shifty,15); - mySVG.data += "\n"; + mySVG.data += (sitplan? "" : this.addAddressToSVG(mySVG,60 + shifty,15)); return(mySVG); } diff --git a/src/List_Item/Wasmachine.ts b/src/List_Item/Wasmachine.ts index af33579..94d5d15 100644 --- a/src/List_Item/Wasmachine.ts +++ b/src/List_Item/Wasmachine.ts @@ -21,20 +21,18 @@ class Wasmachine extends Electro_Item { return(output); } - toSVG() { + toSVG(sitplan = false) { let mySVG:SVGelement = new SVGelement(); - let outputstr:string = ""; mySVG.xleft = 1; // foresee at least some space for the conductor mySVG.xright = 59; mySVG.yup = 25; mySVG.ydown = 25; - mySVG.data = '' + mySVG.data = (sitplan? "" : '') + ''; mySVG.data += this.addAddressToSVG(mySVG,60,15); - mySVG.data += "\n"; return(mySVG); } diff --git a/src/List_Item/Zekering.ts b/src/List_Item/Zekering.ts index 638d0c5..92ec887 100644 --- a/src/List_Item/Zekering.ts +++ b/src/List_Item/Zekering.ts @@ -226,8 +226,6 @@ class Zekering extends Electro_Item { + 'style="text-anchor:middle" font-family="Arial, Helvetica, sans-serif" font-size="10">' + 'S' + ''; mySVG.xright = mySVG.xright + 30; } - - mySVG.data += "\n"; return(mySVG); } diff --git a/src/List_Item/Zeldzame_symbolen.ts b/src/List_Item/Zeldzame_symbolen.ts index 3b6ffb4..7e80907 100644 --- a/src/List_Item/Zeldzame_symbolen.ts +++ b/src/List_Item/Zeldzame_symbolen.ts @@ -24,7 +24,7 @@ class Zeldzame_symbolen extends Electro_Item { return(output); } - toSVG() { + toSVG(sitplan = false) { let mySVG:SVGelement = new SVGelement(); mySVG.xleft = 1; // foresee at least some space for the conductor @@ -34,13 +34,13 @@ class Zeldzame_symbolen extends Electro_Item { switch (this.props.symbool) { case "deurslot": - mySVG.data += '' + mySVG.data += (sitplan? "" : '') + ''; mySVG.xright = 58; mySVG.data += this.addAddressToSVG(mySVG,55,10,2); break; default: - mySVG.data += ''; + mySVG.data += (sitplan? "" : ''); mySVG.xright = -1; break; } diff --git a/src/List_Item/Zonnepaneel.ts b/src/List_Item/Zonnepaneel.ts index b172cd3..fd229f6 100644 --- a/src/List_Item/Zonnepaneel.ts +++ b/src/List_Item/Zonnepaneel.ts @@ -25,7 +25,7 @@ class Zonnepaneel extends Electro_Item { return(output); } - toSVG() { + toSVG(sitplan = false) { let mySVG:SVGelement = new SVGelement(); mySVG.xleft = 1; // Links voldoende ruimte voor een eventuele kring voorzien @@ -33,13 +33,12 @@ class Zonnepaneel extends Electro_Item { mySVG.yup = 35; mySVG.ydown = 25; - mySVG.data += '' + mySVG.data += (sitplan? "" : '') + '' + '' + htmlspecialchars(this.props.aantal) + 'x'; // Adres helemaal onderaan plaatsen - mySVG.data += this.addAddressToSVG(mySVG,70,15); - mySVG.data += "\n"; + mySVG.data += (sitplan? "" : this.addAddressToSVG(mySVG,70,15)); return(mySVG); } diff --git a/src/Properties.ts b/src/Properties.ts index ab15922..d0943f9 100644 --- a/src/Properties.ts +++ b/src/Properties.ts @@ -5,6 +5,7 @@ class Properties { control: string; info: string; dpi: number; + currentView: string; constructor() { this.filename = "eendraadschema.eds"; @@ -13,6 +14,7 @@ class Properties { this.control = ""; this.dpi = 300; this.info = "1 x 230V + N ~50 Hz"; + this.currentView = 'config'; }; setFilename(name) { diff --git a/src/SVGSymbols.ts b/src/SVGSymbols.ts index 9a94fa6..4d3f757 100644 --- a/src/SVGSymbols.ts +++ b/src/SVGSymbols.ts @@ -2,9 +2,7 @@ class SVGSymbols { static outputSVGSymbols() { var output: string = ` - + diff --git a/src/SituationPlan.ts b/src/SituationPlan.ts deleted file mode 100644 index c684991..0000000 --- a/src/SituationPlan.ts +++ /dev/null @@ -1,15 +0,0 @@ -function isDevMode() { - const urlParams = new URLSearchParams(window.location.search); - return urlParams.has('dev'); -} - -function showSituationPlanPage() { - updateRibbon(); - toggleAppView('draw'); -} - -function updateRibbon() { - let output: string = ""; - - document.getElementById("ribbon").innerHTML = output; -} \ No newline at end of file diff --git a/src/TopMenu.ts b/src/TopMenu.ts index 30e3a37..c7684bf 100644 --- a/src/TopMenu.ts +++ b/src/TopMenu.ts @@ -62,6 +62,14 @@ class TopMenu { } } } + + public selectMenuItemByOrdinal(nr: number) { + // Remove 'current' ID from all     elements + const items = this.ulElement.querySelectorAll('a'); + items.forEach(item => item.removeAttribute('id')); + + this.selectItem(items[nr]); + } } diff --git a/src/config.ts b/src/config.ts index 4422031..5872936 100644 --- a/src/config.ts +++ b/src/config.ts @@ -1,3 +1,7 @@ +const SITPLANVIEW_SELECT_PADDING:number = parseInt(getComputedStyle(document.documentElement).getPropertyValue('--selectPadding').trim()); +const SITPLANVIEW_ZOOMINTERVAL = {MIN: 0.1, MAX: 1000}; +const SITPLANVIEW_DEFAULT_SCALE = 0.7; + var CONFIGPAGE_LEFT:string = `

    diff --git a/src/general.ts b/src/general.ts index e09e15c..e928c4e 100644 --- a/src/general.ts +++ b/src/general.ts @@ -1,5 +1,5 @@ declare var pako: any; -declare function printPDF(svgs, print_table, properties, pages, filename, statuscallback): any; +declare function printPDF(svgs, print_table, properties, pages, filename, statuscallback, sitplanprint): any; declare function openDonatePage(): any; function deepClone (obj) { @@ -35,6 +35,22 @@ function isInt(value) { !isNaN(parseInt(value, 10)); } +function getPixelsPerMillimeter() { + const div = document.createElement('div'); + div.style.width = '10mm'; + div.style.position = 'absolute'; + document.body.appendChild(div); + const widthInPixels = div.offsetWidth; + document.body.removeChild(div); + const pixelsPerMillimeter = widthInPixels / 10; + return pixelsPerMillimeter; +} + +// Example usage +const pixelsPerMM = getPixelsPerMillimeter(); +console.log(`Your browser uses approximately ${pixelsPerMM} pixels per millimeter.`); + + function svgTextWidth(input:String, fontsize:Number = 10, options:String = '') { const div = document.createElement('div'); div.innerHTML = '' + input + ''; @@ -121,9 +137,14 @@ function flattenSVG(SVGstruct,shiftx,shifty,node,overflowright=0) { 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")) { - outstruct.attributes.getNamedItem("transform").value = "rotate(-90 " + - outstruct.attributes.getNamedItem("x").nodeValue + "," + - outstruct.attributes.getNamedItem("y").nodeValue + ")"; + 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") { @@ -182,3 +203,18 @@ function browser_ie_detected() if ( (msie > 0) || (trident > 0) ) return true; else return false; } + +const randomId = (() => { + const counters: Record = {}; + + return (prefix: string = "Rnd_"): string => { + if (!(prefix in counters)) { + counters[prefix] = 0; + } + + const value = counters[prefix]; + counters[prefix]++; + + return `${prefix}${value.toString()}`; + }; +})(); diff --git a/src/importExport.ts b/src/importExport.ts index 3c69951..ebbca66 100644 --- a/src/importExport.ts +++ b/src/importExport.ts @@ -204,6 +204,9 @@ function upgrade_version(mystructure, version) { function json_to_structure(text: string, version = 0, redraw = true) { + // If a structure exists, clear it + if (structure != null) structure.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 structure */ @@ -226,6 +229,7 @@ function json_to_structure(text: string, version = 0, redraw = true) { if (typeof mystructure.properties.installer != "undefined") structure.properties.installer = mystructure.properties.installer; if (typeof mystructure.properties.info != "undefined") structure.properties.info = mystructure.properties.info; if (typeof mystructure.properties.info != "undefined") structure.properties.dpi = mystructure.properties.dpi; + if (typeof mystructure.properties.currentView != "undefined") structure.properties.currentView = mystructure.properties.currentView; } // Kopieren van de paginatie voor printen @@ -251,6 +255,13 @@ function json_to_structure(text: string, version = 0, redraw = true) { } } + // Kopieren van de situatieplannen + + if (typeof mystructure.sitplanjson != "undefined") { + structure.sitplan = new SituationPlan(); + structure.sitplan.fromJsonObject(mystructure.sitplanjson); + } + /* Kopieren van de eigenschappen van elk element. * Keys voor versies 1 en 2 en props voor versie 3 */ @@ -377,7 +388,13 @@ function structure_to_json() { listitem.sourcelist = null; } let swap:MarkerList = structure.print_table.pagemarkers; + let swap2:SituationPlan = structure.sitplan; + let swap3:SituationPlanView = structure.sitplanview; + structure.print_table.pagemarkers = null; + structure.sitplanjson = structure.sitplan.toJsonObject(); + structure.sitplan = null; + structure.sitplanview = null; // Create the output structure in uncompressed form var text:string = JSON.stringify(structure); @@ -387,18 +404,20 @@ function structure_to_json() { listitem.sourcelist = structure; } structure.print_table.pagemarkers = swap; + structure.sitplan = swap2; + structure.sitplanview = swap3; return(text); } -/* FUNCTION download_by_blob - - Downloads an EDS file to the user's PC - -*/ +/** FUNCTION download_by_blob + * + * Downloads an EDS file to the user's PC + * + */ -function download_by_blob(text, filename, mimeType) { +function download_by_blob(text, filename, mimeType): void { var element = document.createElement('a'); if (navigator.msSaveBlob) { diff --git a/src/main.ts b/src/main.ts index 20c6af1..9827da8 100644 --- a/src/main.ts +++ b/src/main.ts @@ -195,6 +195,7 @@ function buildNewStructure(structure: Hierarchical_List) { } function reset_all() { + if (structure != null) structure.dispose(); structure = new Hierarchical_List(); buildNewStructure(structure); topMenu.selectMenuItemByName(isDevMode() ? 'Eéndraadschema' : 'Bewerken'); @@ -283,7 +284,9 @@ function restart_all() { } function toggleAppView(type: '2col' | 'config' | 'draw') { - if (type === '2col') { + let lastView = structure.properties.currentView; + structure.properties.currentView = type; + if (type === '2col') { document.getElementById("configsection").style.display = 'none'; document.getElementById("outerbox").style.display = 'none'; document.getElementById("ribbon").style.display = 'flex'; @@ -300,6 +303,7 @@ function toggleAppView(type: '2col' | 'config' | 'draw') { document.getElementById("ribbon").style.display = 'flex'; document.getElementById("canvas_2col").style.display = 'none'; } + if ( (lastView != null) && (lastView != type) ) undostruct.store(); } function load_example(nr: number) { diff --git a/src/print/Print_Table.ts b/src/print/Print_Table.ts index 6736d37..3184e70 100644 --- a/src/print/Print_Table.ts +++ b/src/print/Print_Table.ts @@ -251,11 +251,13 @@ class Print_Table { let page = 0; let pos = 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++; + 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 diff --git a/src/print/print.ts b/src/print/print.ts index ec89467..7552839 100644 --- a/src/print/print.ts +++ b/src/print/print.ts @@ -33,6 +33,8 @@ function printsvg() { let svg = flattenSVGfromString(structure.toSVG(0,"horizontal").data); const pages = Array.from({ length: structure.print_table.pages.length }, (_, i) => i+1); + + const sitplanprint = structure.sitplan.toSitPlanPrint(); printPDF( svg, @@ -40,7 +42,8 @@ function printsvg() { structure.properties, pages, (document.getElementById("dopdfname") as HTMLInputElement).value, //filename - document.getElementById("progress_pdf") //HTML element where callback status can be given + document.getElementById("progress_pdf"), //HTML element where callback status can be given + sitplanprint ); } diff --git a/src/sitplan/SituationPlan.ts b/src/sitplan/SituationPlan.ts new file mode 100644 index 0000000..8285176 --- /dev/null +++ b/src/sitplan/SituationPlan.ts @@ -0,0 +1,121 @@ +class SituationPlan { + private numPages: number = 1; + private activePage: number = 1; + + public elements: SituationPlanElement[]; + + constructor() { + this.elements = []; + } + + addElement(element: SituationPlanElement) { + this.elements.push(element); + } + + addElementFromFile(event: any, page: number, posx: number, posy: number, callback): SituationPlanElement { + let element: SituationPlanElement = new SituationPlanElement(page,posx,posy,0,0,0,SITPLANVIEW_DEFAULT_SCALE,randomId("SP_"),""); + element.importFromFile(event, callback); + this.elements.push(element); + return element; + } + + addElementFromSVG(svg: string, page: number, posx: number, posy: number) { + let element: SituationPlanElement = new SituationPlanElement(page,posx,posy,0,0,0,SITPLANVIEW_DEFAULT_SCALE,randomId("SP_"),svg); + element.getSizeFromString(); + this.elements.push(element); + } + + addElectroItem(id: number, page: number, posx: number, posy: number, adrestype: string, adres:string, adreslocation: string, + scale: number, rotate: number): SituationPlanElement { + let electroItem: Electro_Item = structure.data[structure.getOrdinalById(id)] as Electro_Item; + if (electroItem != null) { + let element: SituationPlanElement = electroItem.toSituationPlanElement(); + Object.assign(element, {page: page, posx: posx, posy: posy, scale: scale, rotate: rotate}); + element.setElectroItemId(id); + element.setAdres(adrestype,adres,adreslocation); + this.elements.push(element) + return element; + } else { + return null; + } + } + + removeElement(element: SituationPlanElement) { + for (let i = this.elements.length - 1; i >= 0; i--) { + if (this.elements[i] == element) { this.elements.splice(i, 1); } + } + if (element.boxref != null) element.boxref.remove(); + if (element.boxlabelref != null) element.boxlabelref.remove(); + } + + toJsonObject() { + let elements = []; + for (let element of this.elements) { + elements.push(element.toJsonObject()); + } + return {numPages: this.numPages, elements: elements}; + } + + fromJsonObject(json: any) { + this.numPages = json.numPages; + this.elements = []; + for (let element of json.elements) { + let newElement = new SituationPlanElement(1,0,0,0,0,0,SITPLANVIEW_DEFAULT_SCALE,randomId("SP_"),""); + newElement.fromJsonObject(element); + this.elements.push(newElement); + } + } + + toSVG() { + let outstr = ''; + + let pixelsPerMm = getPixelsPerMillimeter(); + + let maxx = pixelsPerMm * 277; + let maxy = pixelsPerMm * 150; + + for (let element of this.elements) { + outstr += element.getScaledSVG(true); + maxx = Math.max(maxx, element.posx + element.sizex/2); + maxy = Math.max(maxy, element.posy + element.sizey/2); + outstr += `${element.getAdres()}` + } + + outstr = `${outstr}`; + + return outstr; + } + + toSitPlanPrint() { + let outstruct:any = {}; + + outstruct.numpages = (this.elements.length > 0 ? structure.sitplan.numPages : 0); + outstruct.pages = []; + + for (let i=0; i${element.getAdres()}` + } + } + + svgstr = `${svgstr}`; + + outstruct.pages.push({sizex: maxx, sizey: maxy, svg: svgstr}); + } + + return outstruct; + } + +} \ No newline at end of file diff --git a/src/sitplan/SituationPlanElement.ts b/src/sitplan/SituationPlanElement.ts new file mode 100644 index 0000000..f39c36e --- /dev/null +++ b/src/sitplan/SituationPlanElement.ts @@ -0,0 +1,209 @@ +class SituationPlanElement { + public page:number = 1; + + public posx:number = 0; //center positie-x in het schema + public posy:number = 0; //center positie-y in het schema + public sizex:number = 0; //breedte + public sizey:number = 0; //hoogte + + public labelposx = 0; + public labelposy = 0; + + public rotate:number = 0; + public scale:number = SITPLANVIEW_DEFAULT_SCALE; + public id:string; + + public boxref = null; + public boxlabelref = null; + + private svg:string = ""; + private electroItemId:number = null; + private adrestype:string = null; + private adres:string = null + private adreslocation:string = "rechts"; + + constructor( + page: number, + posx: number, posy: number, + sizex: number, sizey: number, + rotate: number, scale: number, + id: string, svg: string ) + { + this.page = page; + this.posx = posx; this.posy = posy; + this.sizex = sizex, this.sizey = sizey; + this.rotate = rotate; this.scale = scale; + this.id = id; this.svg = svg; + } + + isEDSymbol(): Boolean { + if (this.electroItemId != null) { + let idnum = Number(this.electroItemId); + if (!isNaN(idnum)) { + let ordinal = structure.getOrdinalById(idnum); + if (ordinal != null) { + let electroElement = structure.data[ordinal]; + if (electroElement != null) return true; + } + } + } + return false; + } + + needsTextMirroring(): boolean { + if (this.isEDSymbol()) { + let electroElement: Electro_Item = (structure.data[structure.getOrdinalById(Number(this.getElectroItemId()))] as Electro_Item); + let type = electroElement.getType(); + if (['Contactdoos','Lichtpunt','Drukknop','Media','Schakelaars','Lichtcircuit'].includes(type)) return true; else return false; + } + return true; + } + + setAdres(adrestype: string, adres:string, adreslocation: string) { + this.adrestype = adrestype; + this.adreslocation = adreslocation; + if (this.adrestype === 'manueel') this.adres = adres; + else this.adres = null; + } + + getAdresType() { + return this.adrestype; + } + + getAdres() { + if (this.electroItemId == null) return ""; + + let id = this.electroItemId; + let element = structure.data[structure.getOrdinalById(id)] as Electro_Item; + + switch (this.adrestype) { + case 'auto': + return element.getReadableAdres(); + break; + case 'adres': + return "Adres"; + case 'manueel': + default: + return (this.adres == null) ? "" : this.adres; + } + } + + getAdresLocation() { + return this.adreslocation; + } + + setElectroItemId(id: number) { + this.electroItemId = id; + } + + getElectroItemId() { + return this.electroItemId; + } + + setSVG(svg: string) { // Set the SVG string and update the size, this only works when the id-field is empty + this.svg = svg; + this.getSizeFromString(); + } + + getSVG() { + if (this.electroItemId != null) { + let ordinal = structure.getOrdinalById(this.electroItemId); + if (ordinal != null) { + let electroItem = structure.data[ordinal] as Electro_Item; + electroItem.updateSituationPlanElement(this); + } else { + return null; + } + } + + function removeBeforeFirstSVG(input: string): string { + const index = input.indexOf('= 90) && (rotate < 270) ) { + if (this.needsTextMirroring()) spiegel = true; + if (this.isEDSymbol()) rotate = rotate + 180; + } + transform = `transform="rotate(${rotate} ${this.posx} ${this.posy})${(spiegel ? ' scale(-1,1) translate(' + (-2*this.posx) + ' 0)' : '')}"`; + } + + return ` + + ${svg} + `; + } + + getSizeFromString() { + // Create a DOMParser to parse the SVG string + const parser = new DOMParser(); + const svgDoc = parser.parseFromString(this.svg, "image/svg+xml"); + + // Access the SVG element + const svgElement = svgDoc.querySelector('svg'); + + // Extract the height and width attributes + this.sizey = parseInt(svgElement.getAttribute('height')); + this.sizex = parseInt(svgElement.getAttribute('width')); + } + + importFromFile(event: any, callback) { + const file = event.target.files[0]; + if (file) { + const reader = new FileReader(); + reader.onload = (e) => { + const fileContent = e.target.result; + this.svg = fileContent.toString(); + this.getSizeFromString(); + callback(); + }; + reader.readAsText(file); // Read the file as a text string + } + } + + toJsonObject() { + let svg:string = ((this.electroItemId != null) ? "" : this.svg) + return { + page: this.page, posx: this.posx, posy: this.posy, + sizex: this.sizex, sizey: this.sizey, + labelposx: this.labelposx, labelposy: this.labelposy, + adrestype: this.adrestype, adres: this.adres, adreslocation: this.adreslocation, + rotate: this.rotate, scale: this.scale, + svg: svg, electroItemId: this.electroItemId + }; + } + + fromJsonObject(json: any) { + this.page = (json.page != null) ? json.page : 1; + this.posx = json.posx; + this.posy = json.posy; + this.labelposx = (json.labelposx != null) ? json.labelposx : this.posx + 20; + this.labelposy = (json.labelposy != null) ? json.labelposy : this.posy; + this.sizex = json.sizex; + this.sizey = json.sizey; + 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; + } +} \ No newline at end of file diff --git a/src/sitplan/SituationPlanView.ts b/src/sitplan/SituationPlanView.ts new file mode 100644 index 0000000..e1fd968 --- /dev/null +++ b/src/sitplan/SituationPlanView.ts @@ -0,0 +1,694 @@ +function isDevMode() { + const urlParams = new URLSearchParams(window.location.search); + return urlParams.has('dev'); +} + +function showSituationPlanPage() { + toggleAppView('draw'); + + if (!(structure.sitplan)) { structure.sitplan = new SituationPlan() }; + if (!(structure.sitplanview)) { + //First destroy all elements on the DOM with id starting with "SP_" to avoid any orphans being left from earlier exercises + let elements = document.querySelectorAll('[id^="SP_"]'); + elements.forEach(e => e.remove()); + //Then create the SituationPlanView + structure.sitplanview = new SituationPlanView( + document.getElementById('outerbox'), + document.getElementById('paper'), + structure.sitplan) + }; + + structure.sitplanview.updateRibbon(); + + const spinner = document.createElement('div'); + spinner.classList.add('loading-spinner'); + document.getElementById('outerbox').appendChild(spinner); + + requestAnimationFrame(() => { + requestAnimationFrame(() => { + render(); + }); + }); + + function render() { + const start = performance.now(); + //structure.sitplanview.zoomToFit(); + structure.sitplanview.redraw(); + + const end = performance.now(); + console.log(`Update took ${end - start}ms`); + + document.getElementById('outerbox').removeChild(spinner); + } +} + +class MouseDrag { + private startDragx: number; + private startDragy: number; + private startOffsetLeft: number; + private startOffsetTop: number; + private zoomfactor: number = 1; + + constructor() {} + + startDrag(mousex: number, mousey: number, startOffsetLeft: number, startOffsetTop: number, zoomfactor) { + this.startDragx = mousex; + this.startDragy = mousey; + this.startOffsetLeft = startOffsetLeft; + this.startOffsetTop = startOffsetTop; + this.zoomfactor = zoomfactor; + } + + returnNewLeftTop(mousex: number, mousey: number) { + return ( { + left: (mousex - this.startDragx) / this.zoomfactor + this.startOffsetLeft, + top: (mousey - this.startDragy) / this.zoomfactor + this.startOffsetTop}); + } +} + +class EventManager { + private listeners: { element: HTMLElement, type: string, listener: EventListenerOrEventListenerObject }[] = []; + + addEventListener(element: HTMLElement, type: string, listener: EventListenerOrEventListenerObject) { + const existingListenerIndex = this.listeners.findIndex(l => l.element === element && l.type === type); + if (existingListenerIndex !== -1) { + const existingListener = this.listeners[existingListenerIndex]; + element.removeEventListener(type, existingListener.listener); + this.listeners.splice(existingListenerIndex, 1); + } + + this.listeners.push({ element, type, listener }); + element.addEventListener(type, listener); + } + + removeAllEventListeners() { + this.listeners.forEach(({ element, type, listener }) => { + element.removeEventListener(type, listener); + }); + this.listeners = []; + } + + dispose() { + this.removeAllEventListeners(); + } +} + +class SituationPlanView { + private zoomfactor:number = 1; + private outerbox: HTMLElement; + private paper:HTMLElement; + + private currentBox:HTMLElement = null; + private selectedBox:HTMLElement = null; + + private mousedrag: MouseDrag; + + private boxes = {}; + private sitplan; + + private event_manager; + + constructor(outerbox: HTMLElement, paper: HTMLElement, sitplan: SituationPlan) { + this.outerbox = outerbox; + this.paper = paper; + this.sitplan = sitplan; + this.paper.style.transformOrigin = 'top left'; // Keep the origin point consistent when scaling + this.reloadSitPlan(); + this.mousedrag = new MouseDrag(); + + this.zoomToFit(); + + this.event_manager = new EventManager(); + + // Remove red border when clicking on the body + this.event_manager.addEventListener(outerbox, 'mousedown', () => { this.clearSelection(); } ); + this.event_manager.addEventListener(outerbox, 'touchstart', () => { this.clearSelection(); } ); + } + + dispose() { + this.event_manager.dispose(); + //loop over all situationplanelements and remove the corresponding boxes from the DOM + for (let element of this.sitplan.elements) { + if (element.boxref != null) element.boxref.remove(); + if (element.boxlabelref != null) element.boxlabelref.remove(); + } + } + + attachDeleteButton(elem: HTMLElement) { + this.event_manager.addEventListener(elem, 'click', () => { this.deleteBox(); undostruct.store(); } ); + + }; + + attachScaleButton(elem: HTMLElement, increment: number) { + this.event_manager.addEventListener(elem, 'click', () => { this.scaleBox(increment); undostruct.store(); } ); + }; + + attachRotateButton(elem: HTMLElement, increment: number) { + this.event_manager.addEventListener(elem, 'click', () => { this.rotateBox(increment); undostruct.store(); } ); + }; + + attachSendToBackButton(elem: HTMLElement) { + this.event_manager.addEventListener(elem, 'click', () => { this.sendToBack(); } ); + }; + + attachZoomButton(elem: HTMLElement, increment: number) { + this.event_manager.addEventListener(elem, 'click', () => { this.zoom(increment); } ); + }; + + attachZoomToFitButton(elem: HTMLElement) { + this.event_manager.addEventListener(elem, 'click', () => { this.zoomToFit(); } ); + }; + + attachAddElementFromFileButton(elem: HTMLElement, fileinput: HTMLElement) { + this.event_manager.addEventListener(elem, 'click', () => { fileinput.click(); } ); + this.event_manager.addEventListener(fileinput, 'change', (event) => { + let element = this.sitplan.addElementFromFile(event, this.sitplan.activePage, 550, 300, + (() => { + this.reloadSitPlan(); + this.selectBox(element.boxref); + this.redraw(); + undostruct.store(); + }).bind(this) + ); + }); + } + + attachAddElectroItemButton(elem: HTMLElement) { + this.event_manager.addEventListener(elem, 'click', () => { + // Display an html input dialog in the browser and ask for a number, return the number as variable id + SituationPlanView_ElementPropertiesPopup(null, + (id, adrestype, adres, adreslocation, scale, rotate) => { + if (id != null) { + let element = this.sitplan.addElectroItem(id, this.sitplan.activePage, 550, 300, + adrestype, adres, adreslocation, + scale, rotate); + if (element != null) { + this.reloadSitPlan(); + this.selectBox(element.boxref); + this.redraw(); + undostruct.store(); + } + } else { + alert('Geen geldig ID ingegeven!'); + } + } + ); + } ); + } + + attachEditButton(elem: HTMLElement) { + this.event_manager.addEventListener(elem, 'click', () => { + if (this.selectedBox) { + const id = this.selectedBox.id; + const pic = (this.selectedBox as any).picref; + SituationPlanView_ElementPropertiesPopup(pic, + (id, adrestype, adres, adreslocation, scale, rotate) => { + if (id != null) { + pic.setElectroItemId(id); + pic.setAdres(adrestype,adres,adreslocation); + } + pic.scale = scale; + pic.rotate = rotate; + this.updateBoxContent(this.selectedBox); //content needs to be updated first to know the size of the box + this.updateBoxPosition(this.selectedBox); + undostruct.store(); + } + ); + } + } ); + } + + private makeBox(element: SituationPlanElement) { + let box = document.createElement('div'); + box.id = element.id; + box.className = "box"; + (box as any).picref = element; // We add an extra property to the DOM to be able to find back our data from within the browser + element.boxref = box; + + let boxlabel = document.createElement('div'); + boxlabel.className = "boxlabel"; + boxlabel.innerHTML = element.getAdres(); + element.boxlabelref = boxlabel; + + this.paper.append(box); + this.paper.append(boxlabel); + + this.updateBoxContent(box); //content needs to be updated first to know the size of the box + this.updateBoxPosition(box); + + box.addEventListener('mousedown', this.startDrag); + box.addEventListener('touchstart', this.startDrag); + box.addEventListener('touchend', this.stopDrag); + + return box; + } + + deleteBox() { + if (this.selectedBox) { + let id = this.selectedBox.id; + let picref = (this.selectedBox as any).picref; + + this.selectedBox.remove(); + if (picref.boxlabelref != null) picref.boxlabelref.remove(); + + this.sitplan.removeElement(picref); + this.selectedBox = null + } + } + + scaleBox(increment: number) { + if (this.selectedBox) { + (this.selectedBox as any).picref.scale = Math.min(Math.max(0.1,(this.selectedBox as any).picref.scale+increment),1000); + + this.updateBoxContent(this.selectedBox); //content needs to be updated first to know the size of the box + this.updateBoxPosition(this.selectedBox); + } + } + + rotateBox(degrees: number) { + if (this.selectedBox) { + let id = this.selectedBox.id; + let pic = (this.selectedBox as any).picref; + pic.rotate = (pic.rotate + degrees) % 360; + this.selectedBox.style.transform = `rotate(${pic.rotate}deg)`; + } + } + + sendToBack() { + if (this.selectedBox) { + let boxes: NodeListOf = this.paper.querySelectorAll('.box'); + let newzIndex = 0; + for (let box of Array.from(boxes)) { box.style.zIndex = ((parseInt(box.style.zIndex) || 0)+1).toString(); } + newzIndex--; + this.selectedBox.style.zIndex = "0"; + } + } + + private updateBoxPosition(box) { + let pic = box.picref; + + box.style.left = ((pic.posx-pic.sizex*pic.scale/2-SITPLANVIEW_SELECT_PADDING)).toString() + "px"; + box.style.top = ((pic.posy-pic.sizey*pic.scale/2-SITPLANVIEW_SELECT_PADDING)).toString() + "px"; + box.style.width = ((pic.sizex*pic.scale + SITPLANVIEW_SELECT_PADDING*2)).toString() + "px"; + box.style.height = ((pic.sizey*pic.scale + SITPLANVIEW_SELECT_PADDING*2)).toString() + "px"; + + let rotate = pic.rotate; + let spiegel = false; + rotate = rotate % 360; + if ( (rotate >= 90) && (rotate < 270) ) { + if (pic.needsTextMirroring()) spiegel = true; + if (pic.isEDSymbol()) rotate = rotate - 180; + } + + box.style.transform = `rotate(${rotate}deg)` + (spiegel/*pic.mirror*/ ? ' scaleX(-1)' : ''); + + if (pic != null) { + let boxlabel = pic.boxlabelref; + if (boxlabel != null) { + + pic.labelsizex = boxlabel.offsetWidth; + pic.labelsizey = boxlabel.offsetHeight; + + switch (pic.adreslocation) { + case 'links': { + let rotate = Math.abs(pic.rotate) % 180; + if (rotate > 90) rotate = 180 - rotate; + let offset1 = (pic.sizex/2*pic.scale+SITPLANVIEW_SELECT_PADDING)/(Math.cos(rotate/180*Math.PI)); + let offset2 = (pic.sizey/2*pic.scale+SITPLANVIEW_SELECT_PADDING)/(Math.cos((90-rotate)/180*Math.PI)); + let offset = Math.min(offset1,offset2); + + boxlabel.style.left = (pic.posx - offset - boxlabel.offsetWidth) + 'px'; + boxlabel.style.top = (pic.posy - boxlabel.offsetHeight/2) + 'px'; + + pic.labelposx = (pic.posx - offset - boxlabel.offsetWidth/2); + pic.labelposy = (pic.posy + 1); + + break; } + case 'rechts': { + let rotate = Math.abs(pic.rotate) % 180; + if (rotate > 90) rotate = 180 - rotate; + let offset1 = (pic.sizex/2*pic.scale+SITPLANVIEW_SELECT_PADDING)/(Math.cos(rotate/180*Math.PI)); + let offset2 = (pic.sizey/2*pic.scale+SITPLANVIEW_SELECT_PADDING)/(Math.cos((90-rotate)/180*Math.PI)); + let offset = Math.min(offset1,offset2); + + boxlabel.style.left = (pic.posx + offset + 0) + 'px'; + boxlabel.style.top = ((pic.posy) - boxlabel.offsetHeight/2) + 'px'; + + pic.labelposx = (pic.posx + offset + boxlabel.offsetWidth/2); + pic.labelposy = (pic.posy + 1); + + break; } + case 'boven': { + let rotate = Math.abs(pic.rotate) % 180; + if (rotate > 90) rotate = 180 - rotate; + let offset1 = (pic.sizey/2*pic.scale+SITPLANVIEW_SELECT_PADDING)/(Math.cos(rotate/180*Math.PI)); + let offset2 = (pic.sizex/2*pic.scale+SITPLANVIEW_SELECT_PADDING)/(Math.cos((90-rotate)/180*Math.PI)); + let offset = Math.min(offset1,offset2); + boxlabel.style.left = ((pic.posx) - boxlabel.offsetWidth/2) + 'px'; + boxlabel.style.top = ((pic.posy - offset) - boxlabel.offsetHeight*0.8) + 'px'; + + pic.labelposx = (pic.posx); + pic.labelposy = (pic.posy - offset - boxlabel.offsetHeight*0.5/2); + + break; } + case 'onder': { + let rotate = Math.abs(pic.rotate) % 180; + if (rotate > 90) rotate = 180 - rotate; + let offset1 = (pic.sizey/2*pic.scale+SITPLANVIEW_SELECT_PADDING)/(Math.cos(rotate/180*Math.PI)); + let offset2 = (pic.sizex/2*pic.scale+SITPLANVIEW_SELECT_PADDING)/(Math.cos((90-rotate)/180*Math.PI)); + let offset = Math.min(offset1,offset2); + boxlabel.style.left = ((pic.posx) - boxlabel.offsetWidth/2) + 'px'; + boxlabel.style.top = ((pic.posy + offset) - boxlabel.offsetHeight*0.2) + 'px'; + + pic.labelposx = (pic.posx); + pic.labelposy = (pic.posy + offset + boxlabel.offsetHeight*0.7/2); + + break; } + } + } + } + } + + private updateBoxContent(box) { + let pic = box.picref; + let svg = pic.getScaledSVG(); + if (svg != null) box.innerHTML = pic.getScaledSVG(); + + if (pic.boxlabelref != null) { + let adres = pic.getAdres(); + if (adres != null) pic.boxlabelref.innerHTML = adres; + } + } + + clearSelection() { + let boxes = document.querySelectorAll('.box'); + boxes.forEach(b => b.classList.remove('selected')); + this.selectedBox = null; + } + + private startDrag = (event) => { + event.stopPropagation(); // Prevent body click event + this.clearSelection(); // Clears any existing selection + this.selectBox(event.target); // Selects the box we want to drag + this.currentBox = event.target; // IS THIS NEEDED IF WE ALREADY HAVE SELECTEDBOX ???? + + if (event.type === 'mousedown') { + this.mousedrag.startDrag(event.clientX, event.clientY, this.currentBox.offsetLeft, this.currentBox.offsetTop, this.zoomfactor); + } else if (event.type === 'touchstart') { + const touch = event.touches[0]; + this.mousedrag.startDrag(touch.clientX, touch.clientY, this.currentBox.offsetLeft, this.currentBox.offsetTop, this.zoomfactor); + } + + document.addEventListener('mousemove', this.processDrag); + document.addEventListener('touchmove', this.processDrag, { passive: false }); + document.addEventListener('mouseup', this.stopDrag); + document.addEventListener('touchend', this.stopDrag); + } + + private stopDrag = () => { + document.removeEventListener('mousemove', this.processDrag); + document.removeEventListener('touchmove', this.processDrag); + document.removeEventListener('mouseup', this.stopDrag); + document.removeEventListener('touchend', this.stopDrag); + this.currentBox = null; + undostruct.store(); + } + + private processDrag = (event) => { + if (this.currentBox) { + event.preventDefault(); + + let newLeftTop: {left: number,top: number}; + if (event.type === 'mousemove') { + newLeftTop = this.mousedrag.returnNewLeftTop(event.clientX,event.clientY); + } else if (event.type === 'touchmove') { + const touch = event.touches[0]; + newLeftTop = this.mousedrag.returnNewLeftTop(touch.clientX,touch.clientY); + } + + // Ensure the box stays within reasonable boundaries + newLeftTop.left = Math.max(- this.currentBox.offsetWidth/2, newLeftTop.left); + newLeftTop.top = Math.max(- this.currentBox.offsetHeight/2, newLeftTop.top); + + (this.currentBox as any).picref.posx = newLeftTop.left + (this.currentBox.offsetWidth/2); + (this.currentBox as any).picref.posy = newLeftTop.top + (this.currentBox.offsetHeight/2); + + this.updateBoxPosition(this.currentBox); + } + } + + private selectBox(box) { + box.classList.add('selected'); + this.selectedBox = box; + } + + reloadSitPlan() { //Loops again over the situation plan and checks that we have divs for everything + for (let element of this.sitplan.elements) { + if (element.electroItemId != null) { + let ordinal = structure.getOrdinalById(element.electroItemId); + if (ordinal == null) { + this.sitplan.removeElement(element); + this.reloadSitPlan(); // Go to the next element in the loop + return; + } + } + if (this.boxes[element.id] === undefined) { + this.boxes[element.id] = this.makeBox(element); + } + } + } + + redraw() { + this.reloadSitPlan(); + for (let element of this.sitplan.elements) { + this.updateBoxContent(element.boxref); //content needs to be updated first to know the size of the box + this.updateBoxPosition(element.boxref); + } + this.updateRibbon(); + } + + selectPage(page: number) { + this.sitplan.activePage = page; + + for (let element of this.sitplan.elements) { + 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(); + } + + setzoom(factor: number) { + this.zoomfactor = Math.min(Math.max(SITPLANVIEW_ZOOMINTERVAL.MIN, factor), SITPLANVIEW_ZOOMINTERVAL.MAX); + this.paper.style.transform = `scale(${this.zoomfactor})`; + } + + zoom(increment: number) { //increment is a value indicating how much we can zoom + this.setzoom(this.zoomfactor + increment); + } + + zoomToFit() { + const paperwidth = this.paper.offsetWidth; + const paperheight = this.paper.offsetHeight; + + const outerwidth = this.outerbox.offsetWidth; + const outerheight = this.outerbox.offsetHeight; + + const zoomfactor = Math.min((outerwidth-20)/(paperwidth), (outerheight-20)/(paperheight)); + + this.setzoom(zoomfactor); + } + + updateRibbon() { + let outputleft: string = ""; + let outputright: string = ""; + + // -- Undo/redo buttons -- + + outputleft += ` +

    0 ? "" : "style=\"filter: opacity(45%)\"")}> + Ongedaan maken + Ongedaan maken +
    +
    0 ? "" : "style=\"filter: opacity(45%)\"")}> + Opnieuw + Opnieuw +
    + + ` + + // -- Visuals om items te laden of verwijderen -- + + outputleft += ''; + outputleft += ` +
    + ➕ + Uit bestand +
    +
    + ➕ + Uit schema +
    +
    + 🗑 + Verwijder +
    `; + + // -- Visuals om items te bewerken -- + + outputleft += ` + +
    + 📝 + Bewerk +
    + `; + + // -- Visuals om naar achteren te sturen -- + + outputleft += ` + +
    + ⬇⬇ + Naar achter +
    + ` + + // -- Visuals om pagina te selecteren -- + + outputleft += '
    Pagina ' + + '
    '; + outputleft += ''; + + outputleft += ''; + + outputleft += '
    '; + + // -- Visuals om pagina te zoomen -- + + outputright += ''; + outputright += `🔍 + + + ` + + outputright += ''; + + outputright += ''; + + // -- Put everything in the ribbon -- + document.getElementById("ribbon").innerHTML = `
    ${outputleft}
    ${outputright}
    `; + + // -- Actions om printen te testen -- + + let myPrintButton = document.getElementById('myPrint'); + myPrintButton.onclick = () => { + function openSVGInNewTab(str) { + const blob = new Blob([str], { type: 'image/svg+xml' }); + const url = URL.createObjectURL(blob); + window.open(url, '_blank'); + } + + let SVGstr = this.sitplan.toSVG(); + openSVGInNewTab(SVGstr); + } + + // -- Actions om pagina te selecteren -- + + document.getElementById('id_sitplanpage')!.onchange = (event: Event) => { + const target = event.target as HTMLSelectElement; + this.selectPage(Number(target.value)); + }; + + document.getElementById('btn_sitplan_addpage')!.onclick = () => { + this.sitplan.numPages++; + this.selectPage(this.sitplan.numPages); + }; + + document.getElementById('btn_sitplan_delpage')!.onclick = () => { + const userConfirmation = confirm('Pagina '+this.sitplan.activePage+' volledig verwijderen?'); + if (userConfirmation) { + 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')); + + /*this.attachScaleButton(document.getElementById('scale_up_10'), 0.1); + this.attachScaleButton(document.getElementById('scale_down_10'), -0.1); + this.attachScaleButton(document.getElementById('scale_up_100'), 1); + this.attachScaleButton(document.getElementById('scale_down_100'), -1); + + this.attachRotateButton(document.getElementById('button_rotate_left_90'), -90); + this.attachRotateButton(document.getElementById('button_rotate_right_90'), 90); + this.attachRotateButton(document.getElementById('button_rotate_left_10'), -10); + this.attachRotateButton(document.getElementById('button_rotate_right_10'), 10);*/ + + // -- Actions om naar achteren te sturen -- + + this.attachSendToBackButton(document.getElementById('sendBack')); + + // -- 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')); + + } + +} \ No newline at end of file diff --git a/src/sitplan/SituationPlanView_ElementPropertiesPopup.ts b/src/sitplan/SituationPlanView_ElementPropertiesPopup.ts new file mode 100644 index 0000000..50bd173 --- /dev/null +++ b/src/sitplan/SituationPlanView_ElementPropertiesPopup.ts @@ -0,0 +1,287 @@ +function SituationPlanView_ElementPropertiesPopup(sitplanElement: SituationPlanElement, + callbackOK: (id: number, adresType: string, adres: string, selectAdresLocation: string, + scale: number, rotation: number) => void) { + + const div = document.createElement('div'); + + div.innerHTML = ` + `; + + const popupOverlay = div.querySelector('#popupOverlay') as HTMLDivElement; + const popupWindow = popupOverlay.querySelector('#popupWindow') as HTMLDivElement; + + const selectKringContainer = popupWindow.querySelector('#selectKringContainer') as HTMLSelectElement; + const selectElectroItemContainer = popupWindow.querySelector('#selectElectroItemContainer') as HTMLSelectElement; + const textContainer = popupWindow.querySelector('#textContainer') as HTMLElement; + const selectContainer = popupWindow.querySelector('#selectContainer') as HTMLSelectElement; + const adresContainer = popupWindow.querySelector('#adresContainer') as HTMLElement; + + const KringSelect = popupWindow.querySelector('#KringSelect') as HTMLSelectElement; + const selectElectroItemBox = popupWindow.querySelector('#selectElectroItemBox') as HTMLSelectElement; + + const textInput = popupWindow.querySelector('#textInput') as HTMLInputElement; + const feedback = popupWindow.querySelector('#feedback') as HTMLElement; + const selectBox = popupWindow.querySelector('#selectBox') as HTMLSelectElement; + const adresInput = popupWindow.querySelector('#adresInput') as HTMLInputElement; + const selectAdresLocation = popupWindow.querySelector('#selectAdresLocation') as HTMLSelectElement; + const scaleInput = popupWindow.querySelector('#scaleInput') as HTMLInputElement; + const rotationInput = popupWindow.querySelector('#rotationInput') as HTMLInputElement; + const okButton = popupWindow.querySelector('#okButton') as HTMLButtonElement; + const cancelButton = popupWindow.querySelector('#cancelButton') as HTMLButtonElement; + + let adressen = SituationPlanView_Kringen(); + let kringnamen = adressen.getUniqueSortedKringnaam(); + + function selectBoxChanged() { + let id = Number(textInput.value); + updateElectroType(); + let element = structure.data[structure.getOrdinalById(id)] as Electro_Item; + switch (selectBox.value) { + case 'auto': + adresInput.value = (element != null ? element.getReadableAdres() : ''); + adresInput.disabled = true; + break; + case 'adres': + adresInput.value = (element != null ? (element.props.adres != null ? 'Adres' : '') : ''); + adresInput.disabled = true; + break; + case 'manueel': + adresInput.value = (element != null ? adresInput.value : ''); + adresInput.disabled = false; + break; + } + } + + //-- Select Kring -- + + function rePopulateKringSelect() { + KringSelect.innerHTML = ''; // Clear all options + + for (let kringnaam of kringnamen) { + const option = document.createElement('option'); + option.value = kringnaam; + option.text = kringnaam; + KringSelect.appendChild(option); + } + } + + function initKringSelect(id: number = null) { + rePopulateKringSelect(); + if ( (id==null) && (sitplanElement != null) && (sitplanElement.getElectroItemId() != null) ) { + id = sitplanElement.getElectroItemId(); + } + if (id!=null) KringSelect.value = structure.findKringName(id); + KringSelect.onchange = KringSelectChanged; + } + + function KringSelectChanged() { + rePopulateElectroItemBox(); + selectElectroItemBoxChanged(); + } + + //-- Select ElectroItem -- + + function rePopulateElectroItemBox() { + let electroItems = adressen.getElectroItemsByKring(KringSelect.value); + selectElectroItemBox.innerHTML = ''; //Clear all options + + for (let i=0; i'; + } else { + feedback.innerHTML = 'Element niet gevonden'; + } + } + } + + // Function to show the popup + 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 + } + + // Function to close the popup + function closePopup() { + popupOverlay.style.visibility = 'hidden'; + document.body.style.pointerEvents = 'auto'; // Re-enable interactions with the background + div.remove(); + } + + const handleEnterKey = (event: KeyboardEvent) => { + if (event.key === 'Enter') okButton.click(); + }; + + initKringSelect(); + initElectroItemBox(); + initIdField(); + + if (sitplanElement != null) { // Form werd aangeroepen om een reeds bestaand element te editeren + if (sitplanElement.getElectroItemId() != null) { // Het gaat over een bestaand Electro-item + selectBox.value = sitplanElement.getAdresType(); + adresInput.value = sitplanElement.getAdres(); + selectAdresLocation.value = sitplanElement.getAdresLocation(); + selectBoxChanged(); + } else { // Het gaat over een geimporteerde CSV + //textInput.value = ''; + selectKringContainer.style.display = 'none'; + selectElectroItemContainer.style.display = 'none'; + textContainer.style.display = 'none'; + selectContainer.style.display = 'none'; + adresContainer.style.display = 'none'; + } + scaleInput.value = String(sitplanElement.scale*100); + rotationInput.value = String(sitplanElement.rotate); + } else { // Form werd aangeroepen om een nieuw element te creëren + selectBoxChanged(); + scaleInput.value = String(SITPLANVIEW_DEFAULT_SCALE*100); + rotationInput.value = '0'; + selectAdresLocation.value = 'rechts'; + } + + + textInput.onkeydown = handleEnterKey; + adresInput.onkeydown = handleEnterKey; + scaleInput.onkeydown = handleEnterKey; + rotationInput.onkeydown = handleEnterKey; + + textInput.onblur = selectBoxChanged; + selectBox.onchange = selectBoxChanged; + + + + okButton.onclick = () => { + let returnId = (textInput.value.trim() == '' ? null : Number(textInput.value)); + closePopup(); // We close the popup first to avoid that an error somewhere leaves it open + callbackOK(returnId, selectBox.value, adresInput.value, selectAdresLocation.value, Number(scaleInput.value)/100, Number(rotationInput.value)); + }; + + cancelButton.onclick = () => { + closePopup(); + }; + + // Immediately invoke the select functions to set the initial state + //selectBoxChanged(); + + + document.body.appendChild(div); + + showPopup(); +} \ No newline at end of file diff --git a/src/sitplan/SituationPlanView_Kringen.ts b/src/sitplan/SituationPlanView_Kringen.ts new file mode 100644 index 0000000..f05378b --- /dev/null +++ b/src/sitplan/SituationPlanView_Kringen.ts @@ -0,0 +1,44 @@ +function SituationPlanView_Kringen(): any { + + const excludedTypes = ['Aansluiting','Bord','Kring','Domotica','Domotica module (verticaal)','Domotica gestuurde verbruiker', + 'Leiding','Splitsing','Verlenging','Vrije ruimte','Meerdere verbruikers']; + + // Aansluiting is wel toegelaten in Trikker en willen we wellicht later toelaten + + let output: any = {}; + output.alldata = []; + + output.getUniqueSortedKringnaam = () => { + const uniqueKringnaamArray = []; + for (let i = 0; i < output.alldata.length; i++) { + if (uniqueKringnaamArray.indexOf(output.alldata[i].kringnaam) === -1) uniqueKringnaamArray.push(output.alldata[i].kringnaam); + } + return uniqueKringnaamArray; + } + + output.getElectroItemsByKring = (kringnaam: string) => { + const electroItemArray = []; + for (let i = 0; i < output.alldata.length; i++) { + if (output.alldata[i].kringnaam === kringnaam) { + electroItemArray.push({id: output.alldata[i].id, adres: output.alldata[i].adres, type: output.alldata[i].type}) + }; + } + return electroItemArray; + } + + for (let i = 0; i