Theme format refactoring: move line properties into a seperate lineRendering configuration

This commit is contained in:
pietervdvn 2021-10-20 02:01:27 +02:00
parent 7b9836f273
commit a041fbf050
50 changed files with 876 additions and 63 deletions

View file

@ -5,6 +5,7 @@ import {DeleteConfigJson} from "./DeleteConfigJson";
import UnitConfigJson from "./UnitConfigJson";
import MoveConfigJson from "./MoveConfigJson";
import PointRenderingConfigJson from "./PointRenderingConfigJson";
import LineRenderingConfigJson from "./LineRenderingConfigJson";
/**
* Configuration for a single layer
@ -121,24 +122,8 @@ export interface LayerConfigJson {
titleIcons?: (string | TagRenderingConfigJson)[];
mapRendering: PointRenderingConfigJson[]
mapRendering: (PointRenderingConfigJson | LineRenderingConfigJson)[]
/**
* 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
*/
color?: string | TagRenderingConfigJson;
/**
* The stroke-width for way-elements
*/
width?: string | TagRenderingConfigJson;
/**
* A dasharray, e.g. "5 6"
* The dasharray defines 'pixels of line, pixels of gap, pixels of line, pixels of gap',
* Default value: "" (empty string == full line)
*/
dashArray?: string | TagRenderingConfigJson
/**
* Wayhandling: should a way/area be displayed as:

View file

@ -0,0 +1,30 @@
import {TagRenderingConfigJson} from "./TagRenderingConfigJson";
import {AndOrTagConfigJson} from "./TagConfigJson";
/**
* The LineRenderingConfig gives all details onto how to render a single line of a feature.
*
* This can be used if:
*
* - The feature is a line
* - The feature is an area
*/
export default interface LineRenderingConfigJson {
/**
* 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
*/
color?: string | TagRenderingConfigJson;
/**
* The stroke-width for way-elements
*/
width?: string | TagRenderingConfigJson;
/**
* A dasharray, e.g. "5 6"
* The dasharray defines 'pixels of line, pixels of gap, pixels of line, pixels of gap',
* Default value: "" (empty string == full line)
*/
dashArray?: string | TagRenderingConfigJson
}

View file

@ -15,6 +15,9 @@ import DeleteConfig from "./DeleteConfig";
import MoveConfig from "./MoveConfig";
import PointRenderingConfig from "./PointRenderingConfig";
import WithContextLoader from "./WithContextLoader";
import LineRenderingConfig from "./LineRenderingConfig";
import PointRenderingConfigJson from "./Json/PointRenderingConfigJson";
import LineRenderingConfigJson from "./Json/LineRenderingConfigJson";
export default class LayerConfig extends WithContextLoader{
static WAYHANDLING_DEFAULT = 0;
@ -36,10 +39,8 @@ export default class LayerConfig extends WithContextLoader{
titleIcons: TagRenderingConfig[];
public readonly mapRendering: PointRenderingConfig[]
public readonly lineRendering: LineRenderingConfig[]
color: TagRenderingConfig;
width: TagRenderingConfig;
dashArray: TagRenderingConfig;
wayHandling: number;
public readonly units: Unit[];
public readonly deletion: DeleteConfig | null;
@ -200,8 +201,15 @@ export default class LayerConfig extends WithContextLoader{
this.mapRendering = json.mapRendering.map((r, i) => new PointRenderingConfig(r, context+".mapRendering["+i+"]"))
this.mapRendering = json.mapRendering
.filter(r => r["icon"] !== undefined || r["label"] !== undefined)
.map((r, i) => new PointRenderingConfig(<PointRenderingConfigJson>r, context+".mapRendering["+i+"]"))
this.lineRendering = json.mapRendering
.filter(r => r["icon"] === undefined && r["label"] === undefined)
.map((r, i) => new LineRenderingConfig(<LineRenderingConfigJson>r, context+".mapRendering["+i+"]"))
if(this.mapRendering.length > 1){
throw "Invalid maprendering for "+this.id+", currently only one mapRendering is supported!"
}
@ -243,10 +251,7 @@ export default class LayerConfig extends WithContextLoader{
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) {
json.deletion = {};
@ -299,41 +304,12 @@ export default class LayerConfig extends WithContextLoader{
dashArray: number[];
} {
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) {
if (tags === undefined) {
return deflt
}
const str = tr?.GetRenderValue(tags.data)?.txt ?? deflt;
return Utils.SubstituteKeys(str, tags.data).replace(/{.*}/g, "");
}
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);
const icon = this.mapRendering[0].GenerateLeafletStyle(tags, clickable)
const lineStyle = this.lineRendering[0].GenerateLeafletStyle(tags)
return {
icon,
color: color,
weight: weight,
dashArray: dashArray,
...lineStyle
};
}

View file

@ -0,0 +1,66 @@
import PointRenderingConfigJson from "./Json/PointRenderingConfigJson";
import WithContextLoader from "./WithContextLoader";
import {UIEventSource} from "../../Logic/UIEventSource";
import TagRenderingConfig from "./TagRenderingConfig";
import {Utils} from "../../Utils";
import LineRenderingConfigJson from "./Json/LineRenderingConfigJson";
export default class LineRenderingConfig extends WithContextLoader {
public readonly color: TagRenderingConfig;
public readonly width: TagRenderingConfig;
public readonly dashArray: TagRenderingConfig;
constructor(json: LineRenderingConfigJson, context: string) {
super(json, context)
this.color = this.tr("color", "#0000ff");
this.width = this.tr("width", "7");
this.dashArray = this.tr("dashArray", "");
}
public GenerateLeafletStyle(
tags: UIEventSource<any>
):
{
color: string,
weight: number,
dashArray: number[]
}
{
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) {
if (tags === undefined) {
return deflt
}
const str = tr?.GetRenderValue(tags.data)?.txt ?? deflt;
return Utils.SubstituteKeys(str, tags.data).replace(/{.*}/g, "");
}
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);
return {
color,
weight,
dashArray
}
}
}

View file

@ -404,6 +404,14 @@
"point",
"centroid"
]
},
{
"color": {
"render": "#0000ff"
},
"width": {
"render": "10"
}
}
]
}

View file

@ -330,6 +330,9 @@
"location": [
"point"
]
},
{
"width": "5"
}
]
}

View file

@ -160,6 +160,14 @@
"location": [
"point"
]
},
{
"color": {
"render": "#00f"
},
"width": {
"render": "8"
}
}
]
}

View file

@ -312,6 +312,14 @@
"point",
"centroid"
]
},
{
"color": {
"render": "#c00"
},
"width": {
"render": "1"
}
}
]
}

View file

@ -299,6 +299,9 @@
"point",
"centroid"
]
},
{
"color": "#6bc4f7"
}
]
}

View file

@ -378,6 +378,14 @@
"point",
"centroid"
]
},
{
"color": {
"render": "#694E2D"
},
"width": {
"render": "2"
}
}
]
}

View file

@ -562,6 +562,10 @@
"point",
"centroid"
]
},
{
"color": "#00f",
"width": "1"
}
]
}

View file

@ -840,6 +840,14 @@
"point",
"centroid"
]
},
{
"color": {
"render": "#00f"
},
"width": {
"render": "1"
}
}
]
}

View file

@ -775,13 +775,19 @@
"badge": true
},
{
"if": "opening_hours~*",
"then": "isOpen",
"if": "service:bicycle:pump=yes",
"then": "circle:#e2783d;./assets/layers/bike_repair_station/pump.svg",
"badge": true
},
{
"if": "service:bicycle:pump=yes",
"then": "circle:#e2783d;./assets/layers/bike_repair_station/pump.svg",
"if": {
"and": [
"service:bicycle:cleaning~*"
]
},
"then": {
"render": "./assets/layers/bike_cleaning/bike_cleaning_icon.svg"
},
"badge": true
}
],
@ -792,6 +798,14 @@
"point",
"centroid"
]
},
{
"color": {
"render": "#c00"
},
"width": {
"render": "1"
}
}
]
}

View file

@ -82,6 +82,14 @@
"point",
"centroid"
]
},
{
"color": {
"render": "#AB76D5"
},
"width": {
"render": "2"
}
}
]
}

View file

@ -139,6 +139,14 @@
"location": [
"point"
]
},
{
"color": {
"render": "#00f"
},
"width": {
"render": "8"
}
}
]
}

View file

@ -51,6 +51,28 @@
"location": [
"point"
]
},
{
"color": {
"render": "#3c3",
"mappings": [
{
"if": "showCount>200",
"then": "#f33"
},
{
"if": "showCount>100",
"then": "#c93"
},
{
"if": "showCount>50",
"then": "#cc3"
}
]
},
"width": {
"render": "1"
}
}
]
}

View file

@ -351,6 +351,9 @@
"location": [
"point"
]
},
{
"width": "5"
}
]
}

View file

@ -1188,6 +1188,75 @@
"location": [
"point"
]
},
{
"color": {
"render": "rgba(170, 170, 170, 0.7)",
"mappings": [
{
"if": "highway=cycleway",
"then": "rgba(0, 189, 141, 0.7)"
},
{
"if": "highway=path",
"then": "rgba(204, 74, 207, 0.7)"
},
{
"if": "cycleway=track",
"then": "rgba(113, 3, 200, 0.7)"
},
{
"if": "cycleway=shared_lane",
"then": "rgba(74, 59, 247, 0.7)"
},
{
"if": "cycleway=lane",
"then": "rgba(254, 155, 6, 0.9)"
},
{
"if": "cyclestreet=yes",
"then": "rgba(57, 159, 191, 0.7)"
}
]
},
"width": {
"render": "8"
},
"dashArray": {
"render": "",
"mappings": [
{
"if": {
"or": [
"oneway=yes",
{
"or": [
"highway=cycleway",
"highway=path"
]
}
]
},
"then": ""
},
{
"if": "cycleway=track",
"then": ""
},
{
"if": "cycleway=shared_lane",
"then": "15 30"
},
{
"if": "cycleway=lane",
"then": "25 15 15 15 25"
},
{
"if": "cyclestreet=yes",
"then": ""
}
]
}
}
]
}

View file

@ -573,6 +573,9 @@
"location": [
"point"
]
},
{
"color": "#0000ff"
}
]
}

View file

@ -64,6 +64,9 @@
"rotation": {
"render": "{_direction:numerical}deg"
}
},
{
"color": "--catch-detail-color"
}
]
}

View file

@ -190,6 +190,25 @@
"location": [
"point"
]
},
{
"color": {
"render": "#05d7fcaa",
"mappings": [
{
"if": {
"and": [
"name:etymology=",
"name:etymology:wikidata="
]
},
"then": "#fcca05aa"
}
]
},
"width": {
"render": "8"
}
}
]
}

View file

@ -60,6 +60,10 @@
"point",
"centroid"
]
},
{
"color": "#0f0",
"width": "1"
}
]
}

View file

@ -25,6 +25,11 @@
"location": [
"point"
]
},
{
"color": {
"render": "#00f"
}
}
]
}

View file

@ -80,6 +80,11 @@
"location": [
"point"
]
},
{
"color": {
"render": "#00f"
}
}
]
}

View file

@ -281,6 +281,14 @@
"point",
"centroid"
]
},
{
"color": {
"render": "#00f"
},
"width": {
"render": "8"
}
}
]
}

View file

@ -474,6 +474,14 @@
"point",
"centroid"
]
},
{
"color": {
"render": "#3c3"
},
"width": {
"render": "1"
}
}
]
}

View file

@ -129,6 +129,14 @@
"point",
"centroid"
]
},
{
"color": {
"render": "#007055"
},
"width": {
"render": "2"
}
}
]
}

View file

@ -578,6 +578,14 @@
"point",
"centroid"
]
},
{
"color": {
"render": "#5dbaa9"
},
"width": {
"render": "1"
}
}
]
}

View file

@ -503,6 +503,14 @@
"point",
"centroid"
]
},
{
"color": {
"render": "#0000ff"
},
"width": {
"render": "8"
}
}
]
}

View file

@ -342,6 +342,14 @@
"point",
"centroid"
]
},
{
"color": {
"render": "#00f"
},
"width": {
"render": "8"
}
}
]
}

View file

@ -259,6 +259,40 @@
"location": [
"point"
]
},
{
"color": {
"render": "#eaba2a"
},
"width": {
"render": "7"
},
"dashArray": {
"render": "",
"mappings": [
{
"if": "highway=cycleway",
"then": ""
},
{
"if": "highway=path",
"then": "0 12"
},
{
"if": {
"or": [
"highway=footway",
"highway=pedestrian"
]
},
"then": "12 18"
},
{
"if": "highway=living_street",
"then": "12 12 0 12"
}
]
}
}
]
}

View file

@ -531,6 +531,14 @@
}
]
}
},
{
"color": {
"render": "#f00"
},
"width": {
"render": "8"
}
}
]
}

View file

@ -228,6 +228,23 @@
"location": [
"point"
]
},
{
"color": {
"render": "#335D9F",
"mappings": [
{
"if": "colour~*",
"then": "{colour}"
}
]
},
"width": {
"render": "3"
},
"dashArray": {
"render": "5 5"
}
}
]
}

View file

@ -78,6 +78,10 @@
"location": [
"point"
]
},
{
"color": "#ffffff",
"width": "5"
}
]
}

View file

@ -44,6 +44,10 @@
"point",
"centroid"
]
},
{
"color": "#937f20",
"width": "1"
}
]
}

View file

@ -203,6 +203,14 @@
"location": [
"point"
]
},
{
"color": {
"render": "#00f"
},
"width": {
"render": "8"
}
}
]
}

View file

@ -42,6 +42,24 @@
"iconSize": "20,20,center",
"tagRenderings": [
"all_tags"
],
"mapRendering": [
{
"icon": {
"render": "circle:red",
"mappings": [
{
"if": "_has_closeby_feature=yes",
"then": "circle:#008000aa"
}
]
},
"iconSize": "20,20,center",
"location": [
"point"
]
},
{}
]
}
],

View file

@ -123,6 +123,51 @@
"nl": "Voeg een ontbrekend, erkend natuurreservaat toe, bv. een gebied dat beheerd wordt door het ANB of natuurpunt"
}
}
],
"mapRendering": [
{
"icon": {
"render": "circle:#ffffff;./assets/themes/buurtnatuur/nature_reserve.svg"
},
"iconSize": {
"render": "50,50,center"
},
"location": [
"point"
]
},
{
"color": {
"render": "#3c3",
"mappings": [
{
"if": {
"and": [
"name=",
"noname=",
"operator=",
"access=",
"access:description=",
"leisure=park"
]
},
"then": "#cc1100"
},
{
"if": {
"and": [
"name=",
"noname="
]
},
"then": "#fccb37"
}
]
},
"width": {
"render": "5"
}
}
]
},
{
@ -221,6 +266,38 @@
"nl": "Voeg een ontbrekend park toe"
}
}
],
"mapRendering": [
{
"icon": {
"render": "circle:#ffffff;./assets/themes/buurtnatuur/park.svg"
},
"iconSize": {
"render": "40,40,center"
},
"location": [
"point"
]
},
{
"color": {
"render": "#3c3",
"mappings": [
{
"if": {
"and": [
"name=",
"noname="
]
},
"then": "#fccb37"
}
]
},
"width": {
"render": "5"
}
}
]
},
{
@ -338,6 +415,56 @@
"nl": "Voeg een ontbrekend bos toe aan de kaart"
}
}
],
"mapRendering": [
{
"icon": {
"render": "circle:#ffffff;./assets/themes/buurtnatuur/forest.svg"
},
"iconSize": {
"render": "40,40,center"
},
"location": [
"point"
]
},
{
"color": {
"render": "#3a3",
"mappings": [
{
"if": {
"and": [
"operator=",
"access=",
"access:description="
]
},
"then": "#cc1100"
},
{
"if": {
"and": [
"operator="
]
},
"then": "#cccc00"
},
{
"if": {
"and": [
"name=",
"noname="
]
},
"then": "#fccb37"
}
]
},
"width": {
"render": "5"
}
}
]
},
"viewpoint"

View file

@ -699,6 +699,14 @@
"point",
"centroid"
]
},
{
"color": {
"render": "#00f"
},
"width": {
"render": "8"
}
}
]
},
@ -1111,6 +1119,14 @@
"location": [
"point"
]
},
{
"color": {
"render": "#00f"
},
"width": {
"render": "8"
}
}
]
}

View file

@ -585,6 +585,14 @@
"point",
"centroid"
]
},
{
"color": {
"render": "#0f0"
},
"width": {
"render": "4"
}
}
]
},
@ -868,6 +876,14 @@
"point",
"centroid"
]
},
{
"color": {
"render": "#d38d5fAA"
},
"width": {
"render": "8"
}
}
]
},
@ -1005,6 +1021,14 @@
"location": [
"point"
]
},
{
"color": {
"render": "#ddff55AA"
},
"width": {
"render": "2"
}
}
]
}

View file

@ -239,6 +239,41 @@
"location": [
"point"
]
},
{
"color": {
"render": "#ff7392",
"mappings": [
{
"if": "state=",
"then": "#00acfc"
},
{
"if": "state=temporary",
"then": "#00acfc"
}
]
},
"width": {
"render": "4"
},
"dashArray": {
"render": "",
"mappings": [
{
"if": "state=temporary",
"then": "12 10"
},
{
"if": "note:state=has_highway_no",
"then": "0 8"
},
{
"if": "note:state=has_highway_under_construction",
"then": "12 10"
}
]
}
}
]
}

View file

@ -84,6 +84,18 @@
"width": "10",
"tagRenderings": [
"images"
],
"mapRendering": [
{
"icon": "./assets/themes/cyclestreets/F111.svg",
"location": [
"point"
]
},
{
"color": "#0000ff",
"width": "10"
}
]
},
{
@ -136,6 +148,18 @@
"width": "5",
"tagRenderings": [
"images"
],
"mapRendering": [
{
"icon": "./assets/themes/cyclestreets/F113.svg",
"location": [
"point"
]
},
{
"color": "#09f9dd",
"width": "5"
}
]
},
{
@ -201,6 +225,30 @@
},
"tagRenderings": [
"images"
],
"mapRendering": [
{
"icon": "./assets/svg/pencil.svg",
"location": [
"point"
]
},
{
"color": {
"render": "#aaaaaa",
"mappings": [
{
"then": "#0000ff",
"if": "cyclestreet=yes"
},
{
"then": "#09f9dd",
"if": "proposed:cyclestreet=yes"
}
]
},
"width": "5"
}
]
}
],

View file

@ -80,6 +80,14 @@
"location": [
"point"
]
},
{
"color": {
"render": "#00f"
},
"width": {
"render": "8"
}
}
]
},
@ -195,6 +203,14 @@
"location": [
"point"
]
},
{
"color": {
"render": "#00f"
},
"width": {
"render": "8"
}
}
]
}

View file

@ -215,6 +215,14 @@
"point",
"centroid"
]
},
{
"color": {
"render": "#00f"
},
"width": {
"render": "2"
}
}
]
}

View file

@ -259,6 +259,14 @@
"point",
"centroid"
]
},
{
"color": {
"render": "#00f"
},
"width": {
"render": "8"
}
}
]
}

View file

@ -329,6 +329,14 @@
"point",
"centroid"
]
},
{
"color": {
"render": "#00f"
},
"width": {
"render": "8"
}
}
]
},
@ -697,6 +705,14 @@
"point",
"centroid"
]
},
{
"color": {
"render": "#c22"
},
"width": {
"render": "1"
}
}
]
},
@ -912,6 +928,14 @@
"point",
"centroid"
]
},
{
"color": {
"render": "#00f"
},
"width": {
"render": "1"
}
}
]
}

View file

@ -92,6 +92,14 @@
"point",
"centroid"
]
},
{
"color": {
"render": "#DADADA"
},
"width": {
"render": "1"
}
}
]
},
@ -202,6 +210,14 @@
"point",
"centroid"
]
},
{
"color": {
"render": "#DADADA"
},
"width": {
"render": "1"
}
}
]
}

View file

@ -42,6 +42,12 @@
"location": [
"point"
]
},
{
"color": "#444444",
"width": {
"render": "1"
}
}
]
},
@ -266,6 +272,24 @@
"location": [
"point"
]
},
{
"color": {
"render": "#6d6",
"mappings": [
{
"if": "color~*",
"then": "{color}"
},
{
"if": "colour~*",
"then": "{colour}"
}
]
},
"width": {
"render": "9"
}
}
]
}

View file

@ -305,6 +305,30 @@
"location": [
"point"
]
},
{
"color": {
"render": "#00f",
"mappings": [
{
"if": {
"or": [
{
"and": [
"addr:housenumber=",
"nohousenumber!=yes"
]
},
"addr:street="
]
},
"then": "#ff0"
}
]
},
"width": {
"render": "8"
}
}
]
},
@ -330,6 +354,14 @@
"location": [
"point"
]
},
{
"color": {
"render": "#ccc"
},
"width": {
"render": "0"
}
}
]
}

View file

@ -7,6 +7,8 @@
import ScriptUtils from "./ScriptUtils";
import {writeFileSync} from "fs";
import {LayerConfigJson} from "../Models/ThemeConfig/Json/LayerConfigJson";
import LineRenderingConfig from "../Models/ThemeConfig/LineRenderingConfig";
import LineRenderingConfigJson from "../Models/ThemeConfig/Json/LineRenderingConfigJson";
/**
* In place fix
@ -26,10 +28,11 @@ function fixLayerConfig(config: LayerConfigJson): void {
}
}
if(config.mapRendering === undefined){
if(config.mapRendering === undefined || true){
// This is a legacy format, lets create a pointRendering
let location: ("point"|"centroid")[] = ["point"]
if(config.wayHandling === 2){
let wayHandling: number = config.wayHandling
if(wayHandling === 2){
location = ["point", "centroid"]
}
config.mapRendering = [
@ -43,6 +46,27 @@ function fixLayerConfig(config: LayerConfigJson): void {
}
]
if(wayHandling !== 1){
const lineRenderConfig = <LineRenderingConfigJson>{
color: config["color"],
width: config["width"],
dashArray: config["dashArray"]
}
if(Object.keys(lineRenderConfig).length > 0){
config.mapRendering.push(lineRenderConfig)
}
}
/*delete config["color"]
delete config["width"]
delete config["dashArray"]
delete config["icon"]
delete config["iconOverlays"]
delete config["label"]
delete config["iconSize"]
delete config["rotation"]
*/
}