Automatically place the label below the icon

This commit is contained in:
pietervdvn 2021-04-11 00:09:19 +02:00
parent a50913a094
commit b6b22526dd
3 changed files with 8 additions and 5 deletions

View file

@ -325,7 +325,7 @@ export default class LayerConfig {
const weight = rendernum(this.width, 5);
const iconW = num(iconSize[0]);
const iconH = num(iconSize[1]);
let iconH = num(iconSize[1]);
const mode = iconSize[2] ?? "center"
let anchorW = iconW / 2;
@ -375,7 +375,7 @@ export default class LayerConfig {
const rotation = render(self.rotation, "0deg");
let htmlParts: UIElement[] = [];
let sourceParts = iconUrl.split(";").filter(prt => prt != "");
let sourceParts = Utils.NoNull(iconUrl.split(";").filter(prt => prt != ""));
for (const sourcePart of sourceParts) {
htmlParts.push(genHtmlFromString(sourcePart))
}
@ -410,8 +410,11 @@ export default class LayerConfig {
htmlParts.push(badgesComponent)
}
if(sourceParts.length ==0){iconH = 0}
const label = self.label.GetRenderValue(tgs)?.Subs(tgs).SetClass("block w-min text-center")
const label = self.label.GetRenderValue(tgs)?.Subs(tgs)
.SetClass("block w-min text-center")
.SetStyle("margin-top: "+(iconH + 2) +"px")
console.log("Generating label gave ", label, " source: ", self.label, "tags: ", tgs)
if (label !== undefined) {
htmlParts.push(new Combine([label]).SetClass("flex flex-col items-center"))

View file

@ -131,7 +131,7 @@ export interface LayerConfigJson {
rotation?: string | TagRenderingConfigJson;
/**
* A HTML-fragment that is shown at the center of the icon, for example:
* <div style="margin-top: 50px; background: white; display: block">{name}</div>
* <div style="background: white; display: block">{name}</div>
*/
label?: string | TagRenderingConfigJson ;

View file

@ -43,7 +43,7 @@
"mappings": [
{
"if": "name~*",
"then": "<div style='margin-top: 42px; background: white; padding: 0.25em; border-radius:0.5em'>{name}</div>"
"then": "<div style='background: white; padding: 0.25em; border-radius:0.5em'>{name}</div>"
}
]
},