midgard/MapComplete
1
0
Fork 0
forked from MapComplete/MapComplete
Code Pull requests Activity

Linting themes, fix userbadges

Browse source
This commit is contained in:
Pieter Vander Vennet 2021-10-21 21:41:45 +02:00
parent 9336e19757
commit b9b8a5c71a
27 changed files with 4074 additions and 3903 deletions
Download patch file Download diff file Expand all files Collapse all files

9
Models/ThemeConfig/Json/LayerConfigJson.ts
View file

@ -124,15 +124,6 @@ export interface LayerConfigJson {
mapRendering: (PointRenderingConfigJson | LineRenderingConfigJson)[]
/**
* Wayhandling: should a way/area be displayed as:
* 0) The way itself
* 1) Only the centerpoint
* 2) The centerpoint and the way
*/
wayHandling?: number;
/**
* If set, this layer will pass all the features it receives onto the next layer.
* This is ideal for decoration, e.g. directionss on cameras

10
Models/ThemeConfig/Json/PointRenderingConfigJson.ts
View file

@ -31,14 +31,12 @@ export default interface PointRenderingConfigJson {
icon?: string | TagRenderingConfigJson;
/**
* IconsOverlays are a list of extra icons/badges to overlay over the icon.
* The 'badge'-toggle changes their behaviour.
* If badge is set, it will be added as a 25% height icon at the bottom right of the icon, with all the badges in a flex layout.
* If badges is false, it'll be a simple overlay
* A list of extra badges to show next to the icon as small badge
* They will be added as a 25% height icon at the bottom right of the icon, with all the badges in a flex layout.
*
* Note: strings are interpreted as icons, so layering and substituting is supported
* Note: strings are interpreted as icons, so layering and substituting is supported. You can use `circle:white;./my_icon.svg` to add a background circle
*/
iconOverlays?: { if: string | AndOrTagConfigJson, then: string | TagRenderingConfigJson, badge?: boolean }[]
iconBadges?: { if: string | AndOrTagConfigJson, then: string | TagRenderingConfigJson }[]
/**

5
Models/ThemeConfig/LayerConfig.ts
View file

@ -20,9 +20,6 @@ import PointRenderingConfigJson from "./Json/PointRenderingConfigJson";
import LineRenderingConfigJson from "./Json/LineRenderingConfigJson";
export default class LayerConfig extends WithContextLoader{
static WAYHANDLING_DEFAULT = 0;
static WAYHANDLING_CENTER_ONLY = 1;
static WAYHANDLING_CENTER_AND_WAY = 2;
id: string;
name: Translation;
@ -41,7 +38,6 @@ export default class LayerConfig extends WithContextLoader{
public readonly mapRendering: PointRenderingConfig[]
public readonly lineRendering: LineRenderingConfig[]
wayHandling: number;
public readonly units: Unit[];
public readonly deletion: DeleteConfig | null;
public readonly allowMove: MoveConfig | null
@ -153,7 +149,6 @@ export default class LayerConfig extends WithContextLoader{
this.passAllFeatures = json.passAllFeatures ?? false;
this.minzoom = json.minzoom ?? 0;
this.minzoomVisible = json.minzoomVisible ?? this.minzoom;
this.wayHandling = json.wayHandling ?? 0;
if (json.presets !== undefined && json.presets?.map === undefined) {
throw "Presets should be a list of items (at " + context + ")"
}

244
Models/ThemeConfig/PointRenderingConfig.ts
View file

@ -16,7 +16,7 @@ import {VariableUiElement} from "../../UI/Base/VariableUIElement";
export default class PointRenderingConfig extends WithContextLoader {
public readonly icon: TagRenderingConfig;
public readonly iconOverlays: { if: TagsFilter; then: TagRenderingConfig; badge: boolean }[];
public readonly iconBadges: { if: TagsFilter; then: TagRenderingConfig }[];
public readonly iconSize: TagRenderingConfig;
public readonly label: TagRenderingConfig;
public readonly rotation: TagRenderingConfig;
@ -24,21 +24,20 @@ export default class PointRenderingConfig extends WithContextLoader {
constructor(json: PointRenderingConfigJson, context: string) {
super(json, context)
this.icon = this.tr("icon", "");
this.iconOverlays = (json.iconOverlays ?? []).map((overlay, i) => {
let tr = new TagRenderingConfig(
overlay.then,
`iconoverlays.${i}`
);
if (
typeof overlay.then === "string" &&
SharedTagRenderings.SharedIcons.get(overlay.then) !== undefined
) {
this.iconBadges = (json.iconBadges ?? []).map((overlay, i) => {
let tr : TagRenderingConfig;
if (typeof overlay.then === "string" &&
SharedTagRenderings.SharedIcons.get(overlay.then) !== undefined) {
tr = SharedTagRenderings.SharedIcons.get(overlay.then);
}else{
tr = new TagRenderingConfig(
overlay.then,
`iconBadges.${i}`
);
}
return {
if: TagUtils.Tag(overlay.if),
then: tr,
badge: overlay.badge ?? false,
then: tr
};
});
@ -50,7 +49,7 @@ export default class PointRenderingConfig extends WithContextLoader {
}
}
this.iconSize = this.tr("iconSize", "40,40,center");
this.label = this.tr("label", "");
this.label = this.tr("label", undefined);
this.rotation = this.tr("rotation", "0");
}
@ -59,7 +58,7 @@ export default class PointRenderingConfig extends WithContextLoader {
const parts: Set<string>[] = [];
parts.push(this.icon?.ExtractImages(true));
parts.push(
...this.iconOverlays?.map((overlay) => overlay.then.ExtractImages(true))
...this.iconBadges?.map((overlay) => overlay.then.ExtractImages(true))
);
const allIcons = new Set<string>();
@ -69,21 +68,115 @@ export default class PointRenderingConfig extends WithContextLoader {
return allIcons;
}
/**
* Given a single HTML spec (either a single image path OR "image_path_to_known_svg:fill-colour", returns a fixedUIElement containing that
* The element will fill 100% and be positioned absolutely with top:0 and left: 0
*/
private static FromHtmlSpec(htmlSpec: string, style: string, isBadge = false): BaseUIElement {
if (htmlSpec === undefined) {
return undefined;
}
const match = htmlSpec.match(/([a-zA-Z0-9_]*):([^;]*)/);
if (match !== null && Svg.All[match[1] + ".svg"] !== undefined) {
const svg = (Svg.All[match[1] + ".svg"] as string)
const targetColor = match[2]
const img = new Img(svg.replace(/#000000/g, targetColor), true)
.SetStyle(style)
if(isBadge){
img.SetClass("badge")
}
return img
} else {
return new FixedUiElement(`<img src="${htmlSpec}" style="${style}" />`);
}
}
private static FromHtmlMulti(multiSpec: string, rotation: string , isBadge: boolean, defaultElement: BaseUIElement = undefined){
if(multiSpec === undefined){
return defaultElement
}
const style = `width:100%;height:100%;transform: rotate( ${rotation} );display:block;position: absolute; top: 0; left: 0`;
const htmlDefs = multiSpec.trim()?.split(";") ?? []
const elements = Utils.NoEmpty(htmlDefs).map(def => PointRenderingConfig.FromHtmlSpec(def, style, isBadge))
if (elements.length === 0) {
return defaultElement
} else {
return new Combine(elements).SetClass("relative block w-full h-full")
}
}
public GetSimpleIcon(tags: UIEventSource<any>): BaseUIElement {
const self = this;
if (this.icon === undefined) {
return undefined;
}
return new VariableUiElement(tags.map(tags => {
const rotation = self.rotation?.GetRenderValue(tags)?.txt ?? "0deg"
const htmlDefs = self.icon.GetRenderValue(tags)?.txt
let defaultPin : BaseUIElement = undefined
if(self.label === undefined){
defaultPin = Svg.teardrop_with_hole_green_svg()
}
return PointRenderingConfig.FromHtmlMulti(htmlDefs, rotation,false, defaultPin)
})).SetClass("w-full h-full block")
}
private GetBadges(tags: UIEventSource<any>): BaseUIElement {
if (this.iconBadges.length === 0) {
return undefined
}
return new VariableUiElement(
tags.map(tags => {
const badgeElements = this.iconBadges.map(badge => {
if (!badge.if.matchesProperties(tags)) {
// Doesn't match...
return undefined
}
const htmlDefs = badge.then.GetRenderValue(tags)?.txt
const badgeElement= PointRenderingConfig.FromHtmlMulti(htmlDefs, "0", true)?.SetClass("block relative")
if(badgeElement === undefined){
return undefined;
}
return new Combine([badgeElement]).SetStyle("width: 1.5rem").SetClass("block")
})
return new Combine(badgeElements).SetClass("inline-flex h-full")
})).SetClass("absolute bottom-0 right-1/3 h-1/2 w-0")
}
private GetLabel(tags: UIEventSource<any>): BaseUIElement {
if (this.label === undefined) {
return undefined;
}
const self = this;
return new VariableUiElement(tags.map(tags => {
const label = self.label
?.GetRenderValue(tags)
?.Subs(tags)
?.SetClass("block text-center")
return new Combine([label]).SetClass("flex flex-col items-center mt-1")
}))
}
public GenerateLeafletStyle(
tags: UIEventSource<any>,
clickable: boolean
):
{
):
{
html: BaseUIElement;
iconSize: [number, number];
iconAnchor: [number, number];
popupAnchor: [number, number];
iconUrl: string;
className: string;
}
{
} {
function num(str, deflt = 40) {
const n = Number(str);
if (isNaN(n)) {
@ -122,113 +215,22 @@ export default class PointRenderingConfig extends WithContextLoader {
anchorH = iconH;
}
const iconUrlStatic = render(this.icon);
const self = this;
function genHtmlFromString(sourcePart: string, rotation: string): BaseUIElement {
const style = `width:100%;height:100%;transform: rotate( ${rotation} );display:block;position: absolute; top: 0; left: 0`;
let html: BaseUIElement = new FixedUiElement(
`<img src="${sourcePart}" style="${style}" />`
);
const match = sourcePart.match(/([a-zA-Z0-9_]*):([^;]*)/);
if (match !== null && Svg.All[match[1] + ".svg"] !== undefined) {
html = new Img(
(Svg.All[match[1] + ".svg"] as string).replace(
/#000000/g,
match[2]
),
true
).SetStyle(style);
}
return html;
}
const iconAndBadges = new Combine([this.GetSimpleIcon(tags), this.GetBadges(tags)])
.SetStyle(`width: ${iconW}px; height: ${iconH}px`)
.SetClass("block relative")
const mappedHtml = tags?.map((tgs) => {
// What do you mean, 'tgs' is never read?
// It is read implicitly in the 'render' method
const iconUrl = render(self.icon);
const rotation = render(self.rotation, "0deg");
let htmlParts: BaseUIElement[] = [];
let sourceParts = Utils.NoNull(
iconUrl.split(";").filter((prt) => prt != "")
);
for (const sourcePart of sourceParts) {
htmlParts.push(genHtmlFromString(sourcePart, rotation));
}
let badges = [];
for (const iconOverlay of self.iconOverlays) {
if (!iconOverlay.if.matchesProperties(tgs)) {
continue;
}
if (iconOverlay.badge) {
const badgeParts: BaseUIElement[] = [];
const renderValue = iconOverlay
.then
.GetRenderValue(tgs)
if (renderValue === undefined) {
continue;
}
const partDefs = renderValue.txt.split(";")
.filter((prt) => prt != "");
for (const badgePartStr of partDefs) {
badgeParts.push(genHtmlFromString(badgePartStr, "0"));
}
const badgeCompound = new Combine(badgeParts).SetStyle(
"display:flex;position:relative;width:100%;height:100%;"
);
badges.push(badgeCompound);
} else {
htmlParts.push(
genHtmlFromString(iconOverlay.then.GetRenderValue(tgs).txt, "0")
);
}
}
if (badges.length > 0) {
const badgesComponent = new Combine(badges).SetStyle(
"display:flex;height:50%;width:100%;position:absolute;top:50%;left:50%;"
);
htmlParts.push(badgesComponent);
}
if (sourceParts.length == 0) {
iconH = 0;
}
try {
const label = self.label
?.GetRenderValue(tgs)
?.Subs(tgs)
?.SetClass("block text-center")
?.SetStyle("margin-top: " + (iconH + 2) + "px");
if (label !== undefined) {
htmlParts.push(
new Combine([label]).SetClass("flex flex-col items-center")
);
}
} catch (e) {
console.error(e, tgs);
}
return new Combine(htmlParts);
});
return {
html: mappedHtml === undefined ? new FixedUiElement(self.icon.render.txt) : new VariableUiElement(mappedHtml),
iconSize: [iconW, iconH],
iconAnchor: [anchorW, anchorH],
popupAnchor: [0, 3 - anchorH],
iconUrl: iconUrlStatic,
className: clickable
? "leaflet-div-icon"
: "leaflet-div-icon unclickable",
html: new Combine([iconAndBadges, this.GetLabel(tags)]).SetStyle("flex flex-col"),
iconSize: [iconW, iconH],
iconAnchor: [anchorW, anchorH],
popupAnchor: [0, 3 - anchorH],
iconUrl: undefined,
className: clickable
? "leaflet-div-icon"
: "leaflet-div-icon unclickable",
};
}
}

9
Models/ThemeConfig/TagRenderingConfig.ts
View file

@ -246,11 +246,6 @@ export default class TagRenderingConfig {
return false;
}
public IsQuestionBoxElement(): boolean {
return this.question === null && this.condition === null;
}
/**
* Gets all the render values. Will return multiple render values if 'multianswer' is enabled.
* The result will equal [GetRenderValue] if not 'multiAnswer'
@ -295,7 +290,7 @@ export default class TagRenderingConfig {
* Not compatible with multiAnswer - use GetRenderValueS instead in that case
* @constructor
*/
public GetRenderValue(tags: any): Translation {
public GetRenderValue(tags: any, defltValue: any = undefined): Translation {
if (this.mappings !== undefined && !this.multiAnswer) {
for (const mapping of this.mappings) {
if (mapping.if === undefined) {
@ -315,7 +310,7 @@ export default class TagRenderingConfig {
if (tags[this.freeform.key] !== undefined) {
return this.render;
}
return undefined;
return defltValue;
}
public ExtractImages(isIcon: boolean): Set<string> {