Skip to content

Commit

Permalink
Auto breedte functionaliteit voor vrije tekst en verbruiker
Browse files Browse the repository at this point in the history
  • Loading branch information
@igoethal
igoethal committed Dec 16, 2023
1 parent c13b501 commit 5e4a8d3
Show file tree
Hide file tree
Showing 7 changed files with 209 additions and 30 deletions.
2 changes: 1 addition & 1 deletion builddate.js
View file
Original file line number Diff line number Diff line change
@@ -1 +1 @@
var CONF_builddate="20231216-135334"
var CONF_builddate="20231217-000432"
79 changes: 70 additions & 9 deletions eendraadschema.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -51,6 +51,16 @@ function isInt(value) {
parseInt(value) == value &&
!isNaN(parseInt(value, 10));
}
function svgTextWidth(input, fontsize, options) {
if (fontsize === void 0) { fontsize = 10; }
if (options === void 0) { options = ''; }
var div = document.createElement('div');
div.innerHTML = '<svg width="1000" height="20"><text x="0" y="10" style="text-anchor:start" font-family="Arial, Helvetica, sans-serif" font-size="' + Number(fontsize) + '" ' + options + '>' + input + '</text></svg>';
document.body.appendChild(div);
var width = div.children[0].children[0].getBBox().width;
document.body.removeChild(div);
return width;
}
function flattenSVG(SVGstruct, shiftx, shifty, node) {
var str = "";
var X = new XMLSerializer();
Expand Down Expand Up @@ -344,6 +354,7 @@ var Electro_Item = /** @class */ (function (_super) {
//Indien ******, bool3 is de selector voor warmtefunctie
//Indien stopcontact, bool3 is de selector voor meerfasig
//Indien domotica gestuurde verbruiker, bool3 is de selector voor geprogrammeerd
//Indien vrije tekst is dit het selectievak voor auto-breed
_this.keys.push(["string1", "STRING", ""]); //22, algemeen veld
//Indien vrije tekst of verbruiker, breedte van het veld
//Indien vrije ruimte, breede van de ruimte
Expand Down Expand Up @@ -2672,28 +2683,53 @@ var Verbruiker = /** @class */ (function (_super) {
this.keys[0][2] = "Verbruiker"; // This is rather a formality as we should already have this at this stage
this.keys[15][2] = ""; // Set Tekst itself to "" when the item is cleared
this.keys[17][2] = "centreer"; // Per default gecentreerd
this.keys[18][2] = "automatisch"; // Per default automatische breedte
this.keys[19][2] = false; // Per default niet vet
this.keys[20][2] = false; // Per default niet schuin
this.keys[22][2] = 60; // Per default 60 breed
this.keys[23][2] = ""; // Set Adres/tekst to "" when the item is cleared
};
Verbruiker.prototype.overrideKeys = function () {
if (this.keys[18][2] != "automatisch") {
this.keys[18][2] = "handmatig";
}
this.adjustTextWidthIfAuto();
};
Verbruiker.prototype.toHTML = function (mode, Parent) {
var output = this.toHTMLHeader(mode, Parent);
output += "&nbsp;Nr: " + this.stringToHTML(10, 5)
+ ", Tekst (nieuwe lijn = \"|\"): " + this.stringToHTML(15, 30)
+ ", Breedte: " + this.stringToHTML(22, 3)
+ ", Vet: " + this.checkboxToHTML(19)
+ ", Breedte: " + this.selectToHTML(18, ["automatisch", "handmatig"]);
if (this.keys[18][2] != "automatisch")
output += " " + this.stringToHTML(22, 3);
output += ", Vet: " + this.checkboxToHTML(19)
+ ", Schuin: " + this.checkboxToHTML(20)
+ ", Horizontale alignering: " + this.selectToHTML(17, ["links", "centreer", "rechts"])
+ ", Adres/tekst: " + this.stringToHTML(23, 2);
return (output);
};
Verbruiker.prototype.adjustTextWidthIfAuto = function () {
if (this.keys[18][2] === "automatisch") {
var options = "";
if (this.keys[19][2])
options += ' font-weight="bold"';
if (this.keys[20][2])
options += ' font-style="italic"';
var strlines = htmlspecialchars(this.keys[15][2]).split("|");
var width = 40;
for (var i = 0; i < strlines.length; i++) {
width = Math.round(Math.max(width, svgTextWidth(strlines[i], 10, options) + 10));
}
this.keys[22][2] = String(width);
}
};
Verbruiker.prototype.toSVG = function (hasChild) {
if (hasChild === void 0) { hasChild = false; }
var mySVG = new SVGelement();
var strlines = htmlspecialchars(this.keys[15][2]).split("|");
// Breedte van de vrije tekst bepalen
// Voldoende ruimte voorzien voor alle elementen
this.adjustTextWidthIfAuto();
var width = (isNaN(Number(this.keys[22][2])) || (this.keys[22][2] === "") ? 40 : Math.max(Number(this.keys[22][2]) * 1, 1));
// Breedte van de vrije tekst bepalen
var extraplace = 15 * Math.max(strlines.length - 2, 0);
mySVG.xleft = 1; // Links voldoende ruimte voor een eventuele kring voorzien
mySVG.xright = 20 + width;
Expand Down Expand Up @@ -2741,37 +2777,62 @@ var Vrije_tekst = /** @class */ (function (_super) {
this.keys[15][2] = ""; // Set Tekst itself to "" when the item is cleared
this.keys[16][2] = "zonder kader"; // Per default zonder kader, gebruik symbool "Verbruiker (tekst)" voor de default met kader
this.keys[17][2] = "links"; // Per default gecentreerd
this.keys[18][2] = "automatisch"; // Per default automatische breedte
this.keys[19][2] = false; // Per default niet vet
this.keys[20][2] = false; // Per default niet schuin
this.keys[22][2] = 60; // Per default 60 breed
this.keys[23][2] = ""; // Set Adres/tekst to "" when the item is cleared
};
Vrije_tekst.prototype.overrideKeys = function () {
if (this.keys[16][2] === "")
if (this.keys[16][2] != "verbruiker") {
this.keys[16][2] = "zonder kader";
if (this.hasChild())
}
if (this.keys[18][2] != "automatisch") {
this.keys[18][2] = "handmatig";
}
if (this.hasChild()) {
this.keys[16][2] = "verbruiker";
}
this.adjustTextWidthIfAuto();
};
Vrije_tekst.prototype.toHTML = function (mode, Parent) {
this.overrideKeys();
var output = this.toHTMLHeader(mode, Parent);
output += "&nbsp;Nr: " + this.stringToHTML(10, 5)
+ ", Tekst (nieuwe lijn = \"|\"): " + this.stringToHTML(15, 30)
+ ", Breedte: " + this.stringToHTML(22, 3)
+ ", Vet: " + this.checkboxToHTML(19)
+ ", Breedte: " + this.selectToHTML(18, ["automatisch", "handmatig"]);
if (this.keys[18][2] != "automatisch")
output += " " + this.stringToHTML(22, 3);
output += ", Vet: " + this.checkboxToHTML(19)
+ ", Schuin: " + this.checkboxToHTML(20)
+ ", Horizontale alignering: " + this.selectToHTML(17, ["links", "centreer", "rechts"])
+ ", Type: " + this.selectToHTML(16, (this.hasChild() ? ["verbruiker"] : ["verbruiker", "zonder kader"]));
if (this.keys[16][2] != "zonder kader")
output += ", Adres/tekst: " + this.stringToHTML(23, 2);
return (output);
};
Vrije_tekst.prototype.adjustTextWidthIfAuto = function () {
if (this.keys[18][2] === "automatisch") {
var options = "";
if (this.keys[19][2])
options += ' font-weight="bold"';
if (this.keys[20][2])
options += ' font-style="italic"';
var strlines = htmlspecialchars(this.keys[15][2]).split("|");
var width = 40;
for (var i = 0; i < strlines.length; i++) {
width = Math.round(Math.max(width, svgTextWidth(strlines[i], 10, options) + 10));
}
this.keys[22][2] = String(width);
}
};
Vrije_tekst.prototype.toSVG = function (hasChild) {
if (hasChild === void 0) { hasChild = false; }
var mySVG = new SVGelement();
var strlines = htmlspecialchars(this.keys[15][2]).split("|");
// Breedte van de vrije tekst bepalen
this.adjustTextWidthIfAuto();
var width = (isNaN(Number(this.keys[22][2])) || (this.keys[22][2] === "") ? 40 : Math.max(Number(this.keys[22][2]) * 1, 1));
// Voldoende ruimte voorzien voor alle elementen
var extraplace = 15 * Math.max(strlines.length - 2, 0);
var shiftx;
if (this.keys[16][2] === "zonder kader") {
Expand Down
1 change: 1 addition & 0 deletions src/List_Item/Electro_Item.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -36,6 +36,7 @@ class Electro_Item extends List_Item {
//Indien automaat (in kring of aansluiting), kan curve "", "A", "B", of "C" zijn
this.keys.push(["select3","SELECT","standaard"]); //18, algemeen veld
//Indien differentieelautomaat (in kring of aansluiting), kan curve "", "A", "B", of "C" zijn. Veld 17 is dan het Type.
//Indien vrije tekst kan je hier kiezen tussen automatisch of handmatige breedte
this.keys.push(["bool1","BOOLEAN",false]); //19, algemeen veld
//Indien lichtpunt, bool1 is de selector voor wandverlichting of niet
//Indien drukknop, bool1 is de selector voor afgeschermd of niet
Expand Down
33 changes: 29 additions & 4 deletions src/List_Item/Verbruiker.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,32 +7,57 @@ class Verbruiker extends Electro_Item {
this.keys[0][2] = "Verbruiker"; // This is rather a formality as we should already have this at this stage
this.keys[15][2] = ""; // Set Tekst itself to "" when the item is cleared
this.keys[17][2] = "centreer"; // Per default gecentreerd
this.keys[18][2] = "automatisch"; // Per default automatische breedte
this.keys[19][2] = false; // Per default niet vet
this.keys[20][2] = false; // Per default niet schuin
this.keys[22][2] = 60; // Per default 60 breed
this.keys[23][2] = ""; // Set Adres/tekst to "" when the item is cleared
}

overrideKeys() {
if (this.keys[18][2] != "automatisch") { this.keys[18][2] = "handmatig"; }
this.adjustTextWidthIfAuto();
}

toHTML(mode: string, Parent?: List_Item) {
let output = this.toHTMLHeader(mode, Parent);

output += "&nbsp;Nr: " + this.stringToHTML(10,5)
+ ", Tekst (nieuwe lijn = \"|\"): " + this.stringToHTML(15,30)
+ ", Breedte: " + this.stringToHTML(22,3)
+ ", Vet: " + this.checkboxToHTML(19)
+ ", Breedte: " + this.selectToHTML(18,["automatisch","handmatig"]);

if (this.keys[18][2] != "automatisch") output += " " + this.stringToHTML(22,3);

output += ", Vet: " + this.checkboxToHTML(19)
+ ", Schuin: " + this.checkboxToHTML(20)
+ ", Horizontale alignering: " + this.selectToHTML(17,["links","centreer","rechts"])
+ ", Adres/tekst: " + this.stringToHTML(23,2);

return(output);
}

adjustTextWidthIfAuto() {
if (this.keys[18][2] === "automatisch") {
var options:string = "";
if (this.keys[19][2]) options += ' font-weight="bold"';
if (this.keys[20][2]) options += ' font-style="italic"';
var strlines = htmlspecialchars(this.keys[15][2]).split("|");
var width = 40;
for (let i = 0; i<strlines.length; i++) {
width = Math.round(Math.max(width,svgTextWidth(strlines[i],10,options)+10));
}
this.keys[22][2] = String(width);
}
}

toSVG(hasChild: Boolean = false) {
let mySVG:SVGelement = new SVGelement();
var strlines = htmlspecialchars(this.keys[15][2]).split("|");

// Voldoende ruimte voorzien voor alle elementen
this.adjustTextWidthIfAuto();
var width = ( isNaN(Number(this.keys[22][2])) || ( this.keys[22][2] === "" ) ? 40 : Math.max(Number(this.keys[22][2])*1,1) );

// Breedte van de vrije tekst bepalen
var width = ( isNaN(Number(this.keys[22][2])) || ( this.keys[22][2] === "" ) ? 40 : Math.max(Number(this.keys[22][2])*1,1) );
var extraplace = 15 * Math.max(strlines.length-2,0);

mySVG.xleft = 1; // Links voldoende ruimte voor een eventuele kring voorzien
Expand Down
36 changes: 29 additions & 7 deletions src/List_Item/Vrije_tekst.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,16 +7,18 @@ class Vrije_tekst extends Electro_Item {
this.keys[0][2] = "Vrije tekst"; // This is rather a formality as we should already have this at this stage
this.keys[15][2] = ""; // Set Tekst itself to "" when the item is cleared
this.keys[16][2] = "zonder kader"; // Per default zonder kader, gebruik symbool "Verbruiker (tekst)" voor de default met kader
this.keys[17][2] = "links"; // Per default gecentreerd
this.keys[17][2] = "links"; // Per default gecentreerd
this.keys[18][2] = "automatisch"; // Per default automatische breedte
this.keys[19][2] = false; // Per default niet vet
this.keys[20][2] = false; // Per default niet schuin
this.keys[22][2] = 60; // Per default 60 breed
this.keys[23][2] = ""; // Set Adres/tekst to "" when the item is cleared
}

overrideKeys() {
if (this.keys[16][2] === "") this.keys[16][2] = "zonder kader";
if (this.hasChild()) this.keys[16][2] = "verbruiker";
if (this.keys[16][2] != "verbruiker") { this.keys[16][2] = "zonder kader"; }
if (this.keys[18][2] != "automatisch") { this.keys[18][2] = "handmatig"; }
if (this.hasChild()) { this.keys[16][2] = "verbruiker"; }
this.adjustTextWidthIfAuto();
}

toHTML(mode: string, Parent?: List_Item) {
Expand All @@ -25,8 +27,11 @@ class Vrije_tekst extends Electro_Item {

output += "&nbsp;Nr: " + this.stringToHTML(10,5)
+ ", Tekst (nieuwe lijn = \"|\"): " + this.stringToHTML(15,30)
+ ", Breedte: " + this.stringToHTML(22,3)
+ ", Vet: " + this.checkboxToHTML(19)
+ ", Breedte: " + this.selectToHTML(18,["automatisch","handmatig"]);

if (this.keys[18][2] != "automatisch") output += " " + this.stringToHTML(22,3);

output += ", Vet: " + this.checkboxToHTML(19)
+ ", Schuin: " + this.checkboxToHTML(20)
+ ", Horizontale alignering: " + this.selectToHTML(17,["links","centreer","rechts"])
+ ", Type: " + this.selectToHTML(16,(this.hasChild() ? ["verbruiker"] : ["verbruiker","zonder kader"]));
Expand All @@ -36,12 +41,29 @@ class Vrije_tekst extends Electro_Item {
return(output);
}

adjustTextWidthIfAuto() {
if (this.keys[18][2] === "automatisch") {
var options:string = "";
if (this.keys[19][2]) options += ' font-weight="bold"';
if (this.keys[20][2]) options += ' font-style="italic"';
var strlines = htmlspecialchars(this.keys[15][2]).split("|");
var width = 40;
for (let i = 0; i<strlines.length; i++) {
width = Math.round(Math.max(width,svgTextWidth(strlines[i],10,options)+10));
}
this.keys[22][2] = String(width);
}
}

toSVG(hasChild: Boolean = false) {
let mySVG:SVGelement = new SVGelement();
var strlines = htmlspecialchars(this.keys[15][2]).split("|");

// Breedte van de vrije tekst bepalen
var width = ( isNaN(Number(this.keys[22][2])) || ( this.keys[22][2] === "" ) ? 40 : Math.max(Number(this.keys[22][2])*1,1) );
this.adjustTextWidthIfAuto();
var width = ( isNaN(Number(this.keys[22][2])) || ( this.keys[22][2] === "" ) ? 40 : Math.max(Number(this.keys[22][2])*1,1) );

// Voldoende ruimte voorzien voor alle elementen
var extraplace = 15 * Math.max(strlines.length-2,0);
var shiftx;
if (this.keys[16][2] === "zonder kader") {
Expand Down
Loading

0 comments on commit 5e4a8d3

Please sign in to comment.