From 12b92d286b5e5916b7d92d2e0ce03c55805d59f8 Mon Sep 17 00:00:00 2001 From: pietervdvn Date: Sat, 10 Apr 2021 23:53:13 +0200 Subject: [PATCH 1/3] Refactoring of labels, better exposure --- Customizations/JSON/LayerConfig.ts | 42 ++++++------------- Customizations/JSON/LayerConfigJson.ts | 9 ++-- .../public_bookcases/public_bookcases.json | 6 ++- scripts/generateLayerOverview.ts | 2 - 4 files changed, 23 insertions(+), 36 deletions(-) diff --git a/Customizations/JSON/LayerConfig.ts b/Customizations/JSON/LayerConfig.ts index 0577c6dca..6db14c562 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 [] @@ -396,13 +375,11 @@ export default class LayerConfig { const rotation = render(self.rotation, "0deg"); let htmlParts: UIElement[] = []; - let sourceParts = LayerConfig.SplitParts(iconUrl); - + let sourceParts = 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,13 @@ export default class LayerConfig { .SetStyle("display:flex;height:50%;width:100%;position:absolute;top:50%;left:50%;"); htmlParts.push(badgesComponent) } + + + const label = self.label.GetRenderValue(tgs)?.Subs(tgs).SetClass("block w-min text-center") + 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 +445,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 b78cb5c2e..9d6a33049 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/assets/layers/public_bookcases/public_bookcases.json b/assets/layers/public_bookcases/public_bookcases.json index 8087a36b2..625402381 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 638b50b64..4d5c6fdea 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 { From a50913a0945250975d96a96f0fd70a7d0aa44e92 Mon Sep 17 00:00:00 2001 From: pietervdvn Date: Sat, 10 Apr 2021 23:53:45 +0200 Subject: [PATCH 2/3] Fix parenthese --- Customizations/JSON/LayerConfig.ts | 2 +- Models/Constants.ts | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/Customizations/JSON/LayerConfig.ts b/Customizations/JSON/LayerConfig.ts index 6db14c562..e93095486 100644 --- a/Customizations/JSON/LayerConfig.ts +++ b/Customizations/JSON/LayerConfig.ts @@ -414,7 +414,7 @@ export default class LayerConfig { const label = self.label.GetRenderValue(tgs)?.Subs(tgs).SetClass("block w-min text-center") 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"); + htmlParts.push(new Combine([label]).SetClass("flex flex-col items-center")) } return new Combine(htmlParts).Render(); }) diff --git a/Models/Constants.ts b/Models/Constants.ts index b211bef9d..9091bfb51 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 = { From b6b22526dd1f52e3a27939d0d0b9321e5d55be76 Mon Sep 17 00:00:00 2001 From: pietervdvn Date: Sun, 11 Apr 2021 00:09:19 +0200 Subject: [PATCH 3/3] Automatically place the label below the icon --- Customizations/JSON/LayerConfig.ts | 9 ++++++--- Customizations/JSON/LayerConfigJson.ts | 2 +- assets/layers/public_bookcases/public_bookcases.json | 2 +- 3 files changed, 8 insertions(+), 5 deletions(-) diff --git a/Customizations/JSON/LayerConfig.ts b/Customizations/JSON/LayerConfig.ts index e93095486..45aae95d4 100644 --- a/Customizations/JSON/LayerConfig.ts +++ b/Customizations/JSON/LayerConfig.ts @@ -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")) diff --git a/Customizations/JSON/LayerConfigJson.ts b/Customizations/JSON/LayerConfigJson.ts index 9d6a33049..34d0a8c05 100644 --- a/Customizations/JSON/LayerConfigJson.ts +++ b/Customizations/JSON/LayerConfigJson.ts @@ -131,7 +131,7 @@ export interface LayerConfigJson { rotation?: string | TagRenderingConfigJson; /** * A HTML-fragment that is shown at the center of the icon, for example: - *
{name}
+ *
{name}
*/ label?: string | TagRenderingConfigJson ; diff --git a/assets/layers/public_bookcases/public_bookcases.json b/assets/layers/public_bookcases/public_bookcases.json index 625402381..13f990e32 100644 --- a/assets/layers/public_bookcases/public_bookcases.json +++ b/assets/layers/public_bookcases/public_bookcases.json @@ -43,7 +43,7 @@ "mappings": [ { "if": "name~*", - "then": "
{name}
" + "then": "
{name}
" } ] },