mapcomplete/Customizations/JSON/LayerConfig.ts

241 lines
7.8 KiB
TypeScript
Raw Normal View History

2020-11-06 01:58:26 +01:00
import Translations from "../../UI/i18n/Translations";
2020-10-27 01:01:34 +01:00
import TagRenderingConfig from "./TagRenderingConfig";
import {Tag, TagsFilter} from "../../Logic/Tags";
import {LayerConfigJson} from "./LayerConfigJson";
import {FromJSON} from "./FromJSON";
import SharedTagRenderings from "../SharedTagRenderings";
import {TagRenderingConfigJson} from "./TagRenderingConfigJson";
2020-11-06 01:58:26 +01:00
import {Translation} from "../../UI/i18n/Translation";
2020-11-06 04:02:53 +01:00
import {Img} from "../../UI/Img";
import Svg from "../../Svg";
2020-11-17 02:22:48 +01:00
import {SubstitutedTranslation} from "../../UI/SpecialVisualizations";
import {Utils} from "../../Utils";
import Combine from "../../UI/Base/Combine";
2020-11-17 16:29:51 +01:00
import {VariableUiElement} from "../../UI/Base/VariableUIElement";
2020-10-27 01:01:34 +01:00
export default class LayerConfig {
2020-11-17 02:22:48 +01:00
2020-10-27 01:01:34 +01:00
id: string;
name: Translation
description: Translation;
overpassTags: TagsFilter;
2020-11-17 02:22:48 +01:00
doNotDownload: boolean;
passAllFeatures: boolean;
2020-10-27 01:01:34 +01:00
minzoom: number;
2020-11-17 02:22:48 +01:00
title?: TagRenderingConfig;
2020-10-27 01:01:34 +01:00
titleIcons: TagRenderingConfig[];
2020-10-27 14:46:40 +01:00
icon: TagRenderingConfig;
iconSize: TagRenderingConfig;
2020-11-17 02:22:48 +01:00
rotation: TagRenderingConfig;
2020-10-27 14:46:40 +01:00
color: TagRenderingConfig;
width: TagRenderingConfig;
dashArray: TagRenderingConfig;
2020-10-27 01:01:34 +01:00
wayHandling: number;
static WAYHANDLING_DEFAULT = 0;
static WAYHANDLING_CENTER_ONLY = 1;
static WAYHANDLING_CENTER_AND_WAY = 2;
hideUnderlayingFeaturesMinPercentage?: number;
presets: {
title: Translation,
tags: Tag[],
description?: Translation,
}[];
tagRenderings: TagRenderingConfig [];
2020-11-17 16:29:51 +01:00
constructor(json: LayerConfigJson, roamingRenderings: TagRenderingConfig[],
context?: string) {
2020-10-27 01:01:34 +01:00
context = context + "." + json.id;
this.id = json.id;
this.name = Translations.T(json.name);
this.description = Translations.T(json.name);
this.overpassTags = FromJSON.Tag(json.overpassTags, context + ".overpasstags");
2020-11-17 02:22:48 +01:00
this.doNotDownload = json.doNotDownload ?? false,
this.passAllFeatures = json.passAllFeatures ?? false;
2020-10-27 01:01:34 +01:00
this.minzoom = json.minzoom;
this.wayHandling = json.wayHandling ?? 0;
this.hideUnderlayingFeaturesMinPercentage = json.hideUnderlayingFeaturesMinPercentage ?? 0;
this.presets = (json.presets ?? []).map(pr =>
({
title: Translations.T(pr.title),
tags: pr.tags.map(t => FromJSON.SimpleTag(t)),
description: Translations.T(pr.description)
}))
2020-10-27 01:01:34 +01:00
/**
* Converts a list of tagRenderingCOnfigJSON in to TagRenderingConfig
* A string is interpreted as a name to call
* @param tagRenderings
*/
function trs(tagRenderings?: (string | TagRenderingConfigJson)[]) {
if (tagRenderings === undefined) {
return [];
}
return tagRenderings.map(
(renderingJson, i) => {
if (typeof renderingJson === "string") {
const shared = SharedTagRenderings.SharedTagRendering[renderingJson];
if (shared !== undefined) {
return shared;
}
throw `Predefined tagRendering ${renderingJson} not found in ${context}`;
}
return new TagRenderingConfig(renderingJson, `${context}.tagrendering[${i}]`);
});
}
this.tagRenderings = trs(json.tagRenderings).concat(roamingRenderings);
2020-10-27 01:01:34 +01:00
this.titleIcons = trs(json.titleIcons ?? ["wikipedialink","osmlink"]);
function tr(key, deflt) {
const v = json[key];
2020-11-17 02:22:48 +01:00
if (v === undefined || v === null) {
if (deflt === undefined) {
return undefined;
}
2020-10-27 01:01:34 +01:00
return new TagRenderingConfig(deflt);
}
if (typeof v === "string") {
const shared = SharedTagRenderings.SharedTagRendering[v];
if (shared) {
console.log("Got shared TR:", v, "-->", shared)
return shared;
}
}
return new TagRenderingConfig(v, context + "." + key);
}
2020-11-17 02:22:48 +01:00
this.title = tr("title", undefined);
2020-11-06 04:02:53 +01:00
this.icon = tr("icon", Img.AsData(Svg.bug));
2020-11-17 02:22:48 +01:00
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
}
}
2020-10-27 01:01:34 +01:00
this.iconSize = tr("iconSize", "40,40,center");
this.color = tr("color", "#0000ff");
this.width = tr("width", "7");
2020-11-17 02:22:48 +01:00
this.rotation = tr("rotation", "0");
this.dashArray = tr("dashArray", "");
2020-10-27 01:01:34 +01:00
}
2020-11-16 01:59:30 +01:00
2020-11-17 16:29:51 +01:00
public GenerateLeafletStyle(tags: any, clickable: boolean):
2020-11-16 01:59:30 +01:00
{
color: string;
2020-11-17 02:22:48 +01:00
icon: {
iconUrl: string,
popupAnchor: [number, number];
iconAnchor: [number, number];
iconSize: [number, number];
html: string;
2020-11-17 16:29:51 +01:00
rotation: string;
className?: string;
2020-11-17 02:22:48 +01:00
};
weight: number; dashArray: number[]
2020-11-16 01:59:30 +01:00
} {
function num(str, deflt = 40) {
const n = Number(str);
if (isNaN(n)) {
return deflt;
}
return n;
}
2020-11-17 02:22:48 +01:00
function rendernum(tr: TagRenderingConfig, deflt: number) {
const str = Number(render(tr, "" + deflt));
const n = Number(str);
if (isNaN(n)) {
return deflt;
}
return n;
}
function render(tr: TagRenderingConfig, deflt?: string) {
const str = (tr?.GetRenderValue(tags)?.txt ?? deflt);
return SubstitutedTranslation.SubstituteKeys(str, tags);
}
const iconUrl = render(this.icon);
const iconSize = render(this.iconSize, "40,40,center").split(",");
const dashArray = render(this.dashArray).split(" ").map(Number);
let color = render(this.color, "#00f");
if (color.startsWith("--")) {
color = getComputedStyle(document.body).getPropertyValue("--catch-detail-color")
}
const weight = rendernum(this.width, 5);
2020-11-17 16:29:51 +01:00
const rotation = render(this.rotation, "0deg");
2020-11-17 02:22:48 +01:00
2020-11-16 01:59:30 +01:00
const iconW = num(iconSize[0]);
const iconH = num(iconSize[1]);
const mode = iconSize[2] ?? "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;
}
2020-11-17 16:29:51 +01:00
let html = `<img src="${iconUrl}" style="width:100%;height:100%;rotate:${rotation};display:block;" />`;
2020-11-17 02:22:48 +01:00
if (iconUrl.startsWith(Utils.assets_path)) {
const key = iconUrl.substr(Utils.assets_path.length);
html = new Combine([
(Svg.All[key] as string).replace(/stop-color:#000000/g, 'stop-color:' + color)
2020-11-17 16:29:51 +01:00
]).SetStyle(`width:100%;height:100%;rotate:${rotation};display:block;`).Render();
2020-11-17 02:22:48 +01:00
}
2020-11-16 01:59:30 +01:00
return {
icon:
{
2020-11-17 02:22:48 +01:00
html: html,
2020-11-16 01:59:30 +01:00
iconSize: [iconW, iconH],
iconAnchor: [anchorW, anchorH],
2020-11-17 02:22:48 +01:00
popupAnchor: [0, 3 - anchorH],
rotation: rotation,
2020-11-17 16:29:51 +01:00
iconUrl: iconUrl,
className: clickable ? "leaflet-div-icon" : "leaflet-div-icon unclickable"
2020-11-16 01:59:30 +01:00
},
color: color,
weight: weight,
dashArray: dashArray
};
}
2020-10-27 01:01:34 +01:00
}