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

Refactoring: split rendering of centroid to PointRendering

Browse source
This commit is contained in:
Pieter Vander Vennet 2021-10-19 02:31:32 +02:00
parent ad8674dd70
commit 584ade8e61
8 changed files with 509 additions and 440 deletions
Download patch file Download diff file Expand all files Collapse all files

396
Models/ThemeConfig/LayerConfig.ts
View file

@ -6,22 +6,17 @@ import PresetConfig from "./PresetConfig";
import {LayerConfigJson} from "./Json/LayerConfigJson";
import Translations from "../../UI/i18n/Translations";
import {TagUtils} from "../../Logic/Tags/TagUtils";
import SharedTagRenderings from "../../Customizations/SharedTagRenderings";
import {TagRenderingConfigJson} from "./Json/TagRenderingConfigJson";
import {Utils} from "../../Utils";
import {UIEventSource} from "../../Logic/UIEventSource";
import BaseUIElement from "../../UI/BaseUIElement";
import {FixedUiElement} from "../../UI/Base/FixedUiElement";
import Combine from "../../UI/Base/Combine";
import {VariableUiElement} from "../../UI/Base/VariableUIElement";
import FilterConfig from "./FilterConfig";
import {Unit} from "../Unit";
import DeleteConfig from "./DeleteConfig";
import Svg from "../../Svg";
import Img from "../../UI/Base/Img";
import MoveConfig from "./MoveConfig";
import PointRenderingConfig from "./PointRenderingConfig";
import WithContextLoader from "./WithContextLoader";
export default class LayerConfig {
export default class LayerConfig extends WithContextLoader{
static WAYHANDLING_DEFAULT = 0;
static WAYHANDLING_CENTER_ONLY = 1;
static WAYHANDLING_CENTER_AND_WAY = 2;
@ -39,11 +34,9 @@ export default class LayerConfig {
maxzoom: number;
title?: TagRenderingConfig;
titleIcons: TagRenderingConfig[];
icon: TagRenderingConfig;
iconOverlays: { if: TagsFilter; then: TagRenderingConfig; badge: boolean }[];
iconSize: TagRenderingConfig;
label: TagRenderingConfig;
rotation: TagRenderingConfig;
public readonly mapRendering: PointRenderingConfig[]
color: TagRenderingConfig;
width: TagRenderingConfig;
dashArray: TagRenderingConfig;
@ -63,25 +56,9 @@ export default class LayerConfig {
context?: string,
official: boolean = true
) {
context = context + "." + json.id;
const self = this;
super(json, context)
this.id = json.id;
this.allowSplit = json.allowSplit ?? false;
this.name = Translations.T(json.name, context + ".name");
this.units = (json.units ?? []).map(((unitJson, i) => Unit.fromJson(unitJson, `${context}.unit[${i}]`)))
if (json.description !== undefined) {
if (Object.keys(json.description).length === 0) {
json.description = undefined;
}
}
this.description = Translations.T(
json.description,
context + ".description"
);
let legacy = undefined;
if (json["overpassTags"] !== undefined) {
// @ts-ignore
@ -111,7 +88,7 @@ export default class LayerConfig {
throw context + "Use 'geoJson' instead of 'geojson' (the J is a capital letter)";
}
this.source = new SourceConfig(
this. source = new SourceConfig(
{
osmTags: osmTags,
geojsonSource: json.source["geoJson"],
@ -119,14 +96,33 @@ export default class LayerConfig {
overpassScript: json.source["overpassScript"],
isOsmCache: json.source["isOsmCache"],
},
this.id
json.id
);
} else {
this.source = new SourceConfig({
this. source = new SourceConfig({
osmTags: legacy,
});
}
this.id = json.id;
this.allowSplit = json.allowSplit ?? false;
this.name = Translations.T(json.name, context + ".name");
this.units = (json.units ?? []).map(((unitJson, i) => Unit.fromJson(unitJson, `${context}.unit[${i}]`)))
if (json.description !== undefined) {
if (Object.keys(json.description).length === 0) {
json.description = undefined;
}
}
this.description = Translations.T(
json.description,
context + ".description"
);
this.calculatedTags = undefined;
if (json.calculatedTags !== undefined) {
if (!official) {
@ -202,101 +198,15 @@ export default class LayerConfig {
return config;
});
/** Given a key, gets the corresponding property from the json (or the default if not found
*
* The found value is interpreted as a tagrendering and fetched/parsed
* */
function tr(key: string, deflt) {
const v = json[key];
if (v === undefined || v === null) {
if (deflt === undefined) {
return undefined;
}
return new TagRenderingConfig(
deflt,
self.source.osmTags,
`${context}.${key}.default value`
);
}
if (typeof v === "string") {
const shared = SharedTagRenderings.SharedTagRendering.get(v);
if (shared) {
return shared;
}
}
return new TagRenderingConfig(
v,
self.source.osmTags,
`${context}.${key}`
);
this.mapRendering = json.mapRendering.map((r, i) => new PointRenderingConfig(r, context+".mapRendering["+i+"]"))
if(this.mapRendering.length > 1){
throw "Invalid maprendering for "+this.id+", currently only one mapRendering is supported!"
}
/**
* Converts a list of tagRenderingCOnfigJSON in to TagRenderingConfig
* A string is interpreted as a name to call
*/
function trs(
tagRenderings?: (string | { builtin: string, override: any } | TagRenderingConfigJson)[],
readOnly = false
) {
if (tagRenderings === undefined) {
return [];
}
return Utils.NoNull(
tagRenderings.map((renderingJson, i) => {
if (typeof renderingJson === "string") {
renderingJson = {builtin: renderingJson, override: undefined}
}
if (renderingJson["builtin"] !== undefined) {
const renderingId = renderingJson["builtin"]
if (renderingId === "questions") {
if (readOnly) {
throw `A tagrendering has a question, but asking a question does not make sense here: is it a title icon or a geojson-layer? ${context}. The offending tagrendering is ${JSON.stringify(
renderingJson
)}`;
}
return new TagRenderingConfig("questions", undefined, context);
}
if (renderingJson["override"] !== undefined) {
const sharedJson = SharedTagRenderings.SharedTagRenderingJson.get(renderingId)
return new TagRenderingConfig(
Utils.Merge(renderingJson["override"], sharedJson),
self.source.osmTags,
`${context}.tagrendering[${i}]+override`
);
}
const shared = SharedTagRenderings.SharedTagRendering.get(renderingId);
if (shared !== undefined) {
return shared;
}
if (Utils.runningFromConsole) {
return undefined;
}
const keys = Array.from(
SharedTagRenderings.SharedTagRendering.keys()
);
throw `Predefined tagRendering ${renderingId} not found in ${context}.\n Try one of ${keys.join(
", "
)}\n If you intent to output this text literally, use {\"render\": <your text>} instead"}`;
}
return new TagRenderingConfig(
<TagRenderingConfigJson>renderingJson,
self.source.osmTags,
`${context}.tagrendering[${i}]`
);
})
);
}
this.tagRenderings = trs(json.tagRenderings, false);
this.tagRenderings = this.trs(json.tagRenderings, false);
const missingIds = json.tagRenderings?.filter(tr => typeof tr !== "string" && tr["builtin"] === undefined && tr["id"] === undefined) ?? [];
@ -329,43 +239,13 @@ export default class LayerConfig {
}
}
this.titleIcons = trs(titleIcons, true);
this.titleIcons = this.trs(titleIcons, true);
this.title = tr("title", undefined);
this.icon = tr("icon", "");
this.iconOverlays = (json.iconOverlays ?? []).map((overlay, i) => {
let tr = new TagRenderingConfig(
overlay.then,
self.source.osmTags,
`iconoverlays.${i}`
);
if (
typeof overlay.then === "string" &&
SharedTagRenderings.SharedIcons.get(overlay.then) !== undefined
) {
tr = SharedTagRenderings.SharedIcons.get(overlay.then);
}
return {
if: TagUtils.Tag(overlay.if),
then: tr,
badge: overlay.badge ?? false,
};
});
const iconPath = this.icon.GetRenderValue({id: "node/-1"}).txt;
if (iconPath.startsWith(Utils.assets_path)) {
const iconKey = iconPath.substr(Utils.assets_path.length);
if (Svg.All[iconKey] === undefined) {
throw "Builtin SVG asset not found: " + iconPath;
}
}
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");
this.dashArray = tr("dashArray", "");
this.title = this.tr("title", undefined);
this.isShown = this.tr("isShown", "yes");
this.color = this.tr("color", "#0000ff");
this.width = this.tr("width", "7");
this.dashArray = this.tr("dashArray", "");
this.deletion = null;
if (json.deletion === true) {
@ -398,54 +278,9 @@ export default class LayerConfig {
if (this.calculatedTags === undefined) {
return [];
}
return this.calculatedTags.map((code) => code[1]);
}
public AddRoamingRenderings(addAll: {
tagRenderings: TagRenderingConfig[];
titleIcons: TagRenderingConfig[];
iconOverlays: {
if: TagsFilter;
then: TagRenderingConfig;
badge: boolean;
}[];
}): LayerConfig {
let insertionPoint = this.tagRenderings
.map((tr) => tr.IsQuestionBoxElement())
.indexOf(true);
if (insertionPoint < 0) {
// No 'questions' defined - we just add them all to the end
insertionPoint = this.tagRenderings.length;
}
this.tagRenderings.splice(insertionPoint, 0, ...addAll.tagRenderings);
this.iconOverlays.push(...addAll.iconOverlays);
for (const icon of addAll.titleIcons) {
this.titleIcons.splice(0, 0, icon);
}
return this;
}
public GetRoamingRenderings(): {
tagRenderings: TagRenderingConfig[];
titleIcons: TagRenderingConfig[];
iconOverlays: {
if: TagsFilter;
then: TagRenderingConfig;
badge: boolean;
}[];
} {
const tagRenderings = this.tagRenderings.filter((tr) => tr.roaming);
const titleIcons = this.titleIcons.filter((tr) => tr.roaming);
const iconOverlays = this.iconOverlays.filter((io) => io.then.roaming);
return {
tagRenderings: tagRenderings,
titleIcons: titleIcons,
iconOverlays: iconOverlays,
};
}
public GenerateLeafletStyle(
tags: UIEventSource<any>,
@ -463,13 +298,6 @@ export default class LayerConfig {
weight: number;
dashArray: number[];
} {
function num(str, deflt = 40) {
const n = Number(str);
if (isNaN(n)) {
return deflt;
}
return n;
}
function rendernum(tr: TagRenderingConfig, deflt: number) {
const str = Number(render(tr, "" + deflt));
@ -488,7 +316,6 @@ export default class LayerConfig {
return Utils.SubstituteKeys(str, tags.data).replace(/{.*}/g, "");
}
const iconSize = render(this.iconSize, "40,40,center").split(",");
const dashArray = render(this.dashArray)?.split(" ")?.map(Number);
let color = render(this.color, "#00f");
@ -500,134 +327,10 @@ export default class LayerConfig {
const weight = rendernum(this.width, 5);
const iconW = num(iconSize[0]);
let iconH = num(iconSize[1]);
const mode = iconSize[2]?.trim()?.toLowerCase() ?? "center";
let anchorW = iconW / 2;
let anchorH = iconH / 2;
if (mode === "left") {
anchorW = 0;
}
if (mode === "right") {
anchorW = iconW;
}
if (mode === "top") {
anchorH = 0;
}
if (mode === "bottom") {
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 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);
});
const icon = this.mapRendering[0].GenerateLeafletStyle(tags, clickable)
return {
icon: {
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",
},
icon,
color: color,
weight: weight,
dashArray: dashArray,
@ -638,18 +341,17 @@ export default class LayerConfig {
const parts: Set<string>[] = [];
parts.push(...this.tagRenderings?.map((tr) => tr.ExtractImages(false)));
parts.push(...this.titleIcons?.map((tr) => tr.ExtractImages(true)));
parts.push(this.icon?.ExtractImages(true));
parts.push(
...this.iconOverlays?.map((overlay) => overlay.then.ExtractImages(true))
);
for (const preset of this.presets) {
parts.push(new Set<string>(preset.description?.ExtractImages(false)));
}
for (const pointRenderingConfig of this.mapRendering) {
parts.push(pointRenderingConfig.ExtractImages())
}
const allIcons = new Set<string>();
for (const part of parts) {
part?.forEach(allIcons.add, allIcons);
}
return allIcons;
}