midgard/mapcomplete
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Refactoring of labels, better exposure

Browse source
This commit is contained in:
pietervdvn 2021-04-10 23:53:13 +02:00
parent 04b83311f7
commit 12b92d286b
4 changed files with 23 additions and 36 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

40
Customizations/JSON/LayerConfig.ts
View file

@ -19,6 +19,7 @@ import SourceConfig from "./SourceConfig";
import {TagsFilter} from "../../Logic/Tags/TagsFilter"; import {TagsFilter} from "../../Logic/Tags/TagsFilter";
import {Tag} from "../../Logic/Tags/Tag"; import {Tag} from "../../Logic/Tags/Tag";
import SubstitutingTag from "../../Logic/Tags/SubstitutingTag"; import SubstitutingTag from "../../Logic/Tags/SubstitutingTag";
export default class LayerConfig { export default class LayerConfig {
@ -41,6 +42,7 @@ export default class LayerConfig {
icon: TagRenderingConfig; icon: TagRenderingConfig;
iconOverlays: { if: TagsFilter, then: TagRenderingConfig, badge: boolean }[] iconOverlays: { if: TagsFilter, then: TagRenderingConfig, badge: boolean }[]
iconSize: TagRenderingConfig; iconSize: TagRenderingConfig;
label: TagRenderingConfig;
rotation: TagRenderingConfig; rotation: TagRenderingConfig;
color: TagRenderingConfig; color: TagRenderingConfig;
width: TagRenderingConfig; width: TagRenderingConfig;
@ -213,6 +215,7 @@ export default class LayerConfig {
} }
this.isShown = tr("isShown", "yes"); this.isShown = tr("isShown", "yes");
this.iconSize = tr("iconSize", "40,40,center"); this.iconSize = tr("iconSize", "40,40,center");
this.label = tr("label", "")
this.color = tr("color", "#0000ff"); this.color = tr("color", "#0000ff");
this.width = tr("width", "7"); this.width = tr("width", "7");
this.rotation = tr("rotation", "0"); 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 "<html>" and "</html>" stays together
* @param template
* @constructor
* @private
*/
private static SplitParts(template: string): string[] {
const htmlParts = template.split("<html>");
const parts = []
for (const htmlPart of htmlParts) {
if (htmlPart.indexOf("</html>") >= 0) {
const subparts = htmlPart.split("</html>");
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[] { public CustomCodeSnippets(): string[] {
if (this.calculatedTags === undefined) { if (this.calculatedTags === undefined) {
return [] return []
@ -396,13 +375,11 @@ export default class LayerConfig {
const rotation = render(self.rotation, "0deg"); const rotation = render(self.rotation, "0deg");
let htmlParts: UIElement[] = []; let htmlParts: UIElement[] = [];
let sourceParts = LayerConfig.SplitParts(iconUrl); let sourceParts = iconUrl.split(";").filter(prt => prt != "");
for (const sourcePart of sourceParts) { for (const sourcePart of sourceParts) {
htmlParts.push(genHtmlFromString(sourcePart)) htmlParts.push(genHtmlFromString(sourcePart))
} }
let badges = []; let badges = [];
for (const iconOverlay of self.iconOverlays) { for (const iconOverlay of self.iconOverlays) {
if (!iconOverlay.if.matchesProperties(tgs)) { if (!iconOverlay.if.matchesProperties(tgs)) {
@ -410,7 +387,7 @@ export default class LayerConfig {
} }
if (iconOverlay.badge) { if (iconOverlay.badge) {
const badgeParts: UIElement[] = []; 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) { for (const badgePartStr of partDefs) {
badgeParts.push(genHtmlFromString(badgePartStr)) 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%;"); .SetStyle("display:flex;height:50%;width:100%;position:absolute;top:50%;left:50%;");
htmlParts.push(badgesComponent) 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(); return new Combine(htmlParts).Render();
}) })

7
Customizations/JSON/LayerConfigJson.ts
View file

@ -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. * 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;<path to my icon.svg>` * E.g. to draw a red pin, use "pin:#f00", to have a green circle with your icon on top, use `circle:#0f0;<path to my icon.svg>`
* *
* Also note that one can specify to use HTML by entering some html between "<html>" and "</html" into here, for example
* "icon": "some_icon.svg;<html><div style="margin-top: 50px; background: white; display: block">{name}</div>"
*/ */
icon?: string | TagRenderingConfigJson; icon?: string | TagRenderingConfigJson;
@ -131,6 +129,11 @@ 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)`` * 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; 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>
*/
label?: string | TagRenderingConfigJson ;
/** /**
* The color for way-elements and SVG-elements. * The color for way-elements and SVG-elements.

6
assets/layers/public_bookcases/public_bookcases.json
View file

@ -37,11 +37,13 @@
] ]
}, },
"icon": { "icon": {
"render": "./assets/themes/bookcases/bookcase.svg;", "render": "./assets/themes/bookcases/bookcase.svg;"
},
"label": {
"mappings": [ "mappings": [
{ {
"if": "name~*", "if": "name~*",
"then": "./assets/themes/bookcases/bookcase.svg;<html><div style='margin-top: 42px; background: white; padding: 0.25em; border-radius:0.5em'>{name}</div></html>" "then": "<div style='margin-top: 42px; background: white; padding: 0.25em; border-radius:0.5em'>{name}</div>"
} }
] ]
}, },

2
scripts/generateLayerOverview.ts
View file

@ -117,8 +117,6 @@ for (const themeFile of themeFiles) {
} }
} }
console.log("LE", layerErrorCount)
if (layerErrorCount.length + themeErrorCount.length == 0) { if (layerErrorCount.length + themeErrorCount.length == 0) {
console.log("All good!") console.log("All good!")
} else { } else {