diff --git a/Customizations/JSON/LayerConfig.ts b/Customizations/JSON/LayerConfig.ts index 0577c6d..45aae95 100644 --- a/Customizations/JSON/LayerConfig.ts +++ b/Customizations/JSON/LayerConfig.ts @@ -19,6 +19,7 @@ import SourceConfig from "./SourceConfig"; import {TagsFilter} from "../../Logic/Tags/TagsFilter"; import {Tag} from "../../Logic/Tags/Tag"; import SubstitutingTag from "../../Logic/Tags/SubstitutingTag"; + export default class LayerConfig { @@ -41,6 +42,7 @@ export default class LayerConfig { icon: TagRenderingConfig; iconOverlays: { if: TagsFilter, then: TagRenderingConfig, badge: boolean }[] iconSize: TagRenderingConfig; + label: TagRenderingConfig; rotation: TagRenderingConfig; color: TagRenderingConfig; width: TagRenderingConfig; @@ -213,6 +215,7 @@ export default class LayerConfig { } this.isShown = tr("isShown", "yes"); this.iconSize = tr("iconSize", "40,40,center"); + this.label = tr("label", "") this.color = tr("color", "#0000ff"); this.width = tr("width", "7"); this.rotation = tr("rotation", "0"); @@ -224,30 +227,6 @@ export default class LayerConfig { } } - /** - * Splits the parts of the icon, at ";" but makes sure that everything between "" and "" stays together - * @param template - * @constructor - * @private - */ - private static SplitParts(template: string): string[] { - const htmlParts = template.split(""); - const parts = [] - for (const htmlPart of htmlParts) { - if (htmlPart.indexOf("") >= 0) { - const subparts = htmlPart.split(""); - if (subparts.length != 2) { - throw "Invalid rendering with embedded html: " + htmlPart; - } - parts.push("html:" + subparts[0]); - parts.push(...subparts[1].split(";")) - } else { - parts.push(...htmlPart.split(";")) - } - } - return parts.filter(prt => prt != ""); - } - public CustomCodeSnippets(): string[] { if (this.calculatedTags === undefined) { return [] @@ -346,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; @@ -396,13 +375,11 @@ export default class LayerConfig { const rotation = render(self.rotation, "0deg"); let htmlParts: UIElement[] = []; - let sourceParts = LayerConfig.SplitParts(iconUrl); - + let sourceParts = Utils.NoNull(iconUrl.split(";").filter(prt => prt != "")); for (const sourcePart of sourceParts) { htmlParts.push(genHtmlFromString(sourcePart)) } - let badges = []; for (const iconOverlay of self.iconOverlays) { if (!iconOverlay.if.matchesProperties(tgs)) { @@ -410,7 +387,7 @@ export default class LayerConfig { } if (iconOverlay.badge) { const badgeParts: UIElement[] = []; - const partDefs = LayerConfig.SplitParts(iconOverlay.then.GetRenderValue(tgs).txt); + const partDefs = iconOverlay.then.GetRenderValue(tgs).txt.split(";").filter(prt => prt != ""); for (const badgePartStr of partDefs) { badgeParts.push(genHtmlFromString(badgePartStr)) @@ -432,6 +409,16 @@ export default class LayerConfig { .SetStyle("display:flex;height:50%;width:100%;position:absolute;top:50%;left:50%;"); htmlParts.push(badgesComponent) } + + if(sourceParts.length ==0){iconH = 0} + + 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")) + } return new Combine(htmlParts).Render(); }) @@ -461,7 +448,7 @@ export default class LayerConfig { for (const preset of this.presets) { parts.push(new Set(preset.description?.ExtractImages(false))) } - + const allIcons = new Set(); for (const part of parts) { part?.forEach(allIcons.add, allIcons) diff --git a/Customizations/JSON/LayerConfigJson.ts b/Customizations/JSON/LayerConfigJson.ts index b78cb5c..34d0a8c 100644 --- a/Customizations/JSON/LayerConfigJson.ts +++ b/Customizations/JSON/LayerConfigJson.ts @@ -106,8 +106,6 @@ export interface LayerConfigJson { * To make things even more practical, one can use all svgs from the folder "assets/svg" and _substitute the color_ in it. * E.g. to draw a red pin, use "pin:#f00", to have a green circle with your icon on top, use `circle:#0f0;` * - * Also note that one can specify to use HTML by entering some html between "" and "
{name}
" */ icon?: string | TagRenderingConfigJson; @@ -131,7 +129,12 @@ export interface LayerConfigJson { * Usage: as if it were a css property for 'rotate', thus has to end with 'deg', e.g. `90deg`, `{direction}deg`, `calc(90deg - {camera:direction}deg)`` */ rotation?: string | TagRenderingConfigJson; - + /** + * A HTML-fragment that is shown at the center of the icon, for example: + *
{name}
+ */ + label?: string | TagRenderingConfigJson ; + /** * The color for way-elements and SVG-elements. * If the value starts with "--", the style of the body element will be queried for the corresponding variable instead diff --git a/Models/Constants.ts b/Models/Constants.ts index b211bef..9091bfb 100644 --- a/Models/Constants.ts +++ b/Models/Constants.ts @@ -2,7 +2,7 @@ import { Utils } from "../Utils"; export default class Constants { - public static vNumber = "0.6.7"; + public static vNumber = "0.6.8"; // The user journey states thresholds when a new feature gets unlocked public static userJourney = { diff --git a/assets/layers/public_bookcases/public_bookcases.json b/assets/layers/public_bookcases/public_bookcases.json index 8087a36..13f990e 100644 --- a/assets/layers/public_bookcases/public_bookcases.json +++ b/assets/layers/public_bookcases/public_bookcases.json @@ -37,11 +37,13 @@ ] }, "icon": { - "render": "./assets/themes/bookcases/bookcase.svg;", + "render": "./assets/themes/bookcases/bookcase.svg;" + }, + "label": { "mappings": [ { "if": "name~*", - "then": "./assets/themes/bookcases/bookcase.svg;
{name}
" + "then": "
{name}
" } ] }, diff --git a/scripts/generateLayerOverview.ts b/scripts/generateLayerOverview.ts index a5eea0a..c570555 100644 --- a/scripts/generateLayerOverview.ts +++ b/scripts/generateLayerOverview.ts @@ -117,8 +117,6 @@ for (const themeFile of themeFiles) { } } -console.log("LE", layerErrorCount) - if (layerErrorCount.length + themeErrorCount.length == 0) { console.log("All good!") } else {