From 72edc9bdcc971ddf11e33836022c85158d2ef593 Mon Sep 17 00:00:00 2001 From: pietervdvn Date: Fri, 22 Oct 2021 02:16:07 +0200 Subject: [PATCH] General cleanup, improve sidewalk rendering --- Logic/SimpleMetaTagger.ts | 6 ++-- Models/ThemeConfig/LineRenderingConfig.ts | 10 ++---- Models/ThemeConfig/TagRenderingConfig.ts | 2 +- UI/ShowDataLayer/ShowDataLayer.ts | 42 +++++++++++++---------- UI/i18n/Translations.ts | 3 ++ assets/themes/sidewalks/sidewalks.json | 25 +++++++++++--- 6 files changed, 53 insertions(+), 35 deletions(-) diff --git a/Logic/SimpleMetaTagger.ts b/Logic/SimpleMetaTagger.ts index 2934f93e2b..f5c1b77e29 100644 --- a/Logic/SimpleMetaTagger.ts +++ b/Logic/SimpleMetaTagger.ts @@ -97,9 +97,9 @@ export default class SimpleMetaTagger { /** * Sets the key onto the properties (but doesn't overwrite if already existing) */ - function set(key, value) { - if (tgs[key] === undefined || tgs[key] === "") { - tgs[key] = value + function set(k, value) { + if (tgs[k] === undefined || tgs[k] === "") { + tgs[k] = value somethingChanged = true } } diff --git a/Models/ThemeConfig/LineRenderingConfig.ts b/Models/ThemeConfig/LineRenderingConfig.ts index ae7e4cb600..05da6604e0 100644 --- a/Models/ThemeConfig/LineRenderingConfig.ts +++ b/Models/ThemeConfig/LineRenderingConfig.ts @@ -25,10 +25,7 @@ export default class LineRenderingConfig extends WithContextLoader { this.offset = this.tr("offset", "0"); } - - public GenerateLeafletStyle( - tags: UIEventSource - ): +public GenerateLeafletStyle( tags: {} ): { color: string, weight: number, @@ -48,8 +45,8 @@ export default class LineRenderingConfig extends WithContextLoader { if (tags === undefined) { return deflt } - const str = tr?.GetRenderValue(tags.data)?.txt ?? deflt; - return Utils.SubstituteKeys(str, tags.data)?.replace(/{.*}/g, ""); + const str = tr?.GetRenderValue(tags)?.txt ?? deflt; + return Utils.SubstituteKeys(str, tags)?.replace(/{.*}/g, ""); } const dashArray = render(this.dashArray)?.split(" ")?.map(Number); @@ -62,7 +59,6 @@ export default class LineRenderingConfig extends WithContextLoader { const weight = rendernum(this.width, 5); const offset = rendernum(this.offset, 0) - console.log("Calculated offset:", offset, "for", this.offset) return { color, weight, diff --git a/Models/ThemeConfig/TagRenderingConfig.ts b/Models/ThemeConfig/TagRenderingConfig.ts index 9e44784e1b..51d3e9f537 100644 --- a/Models/ThemeConfig/TagRenderingConfig.ts +++ b/Models/ThemeConfig/TagRenderingConfig.ts @@ -141,7 +141,7 @@ export default class TagRenderingConfig { const mp = { if: TagUtils.Tag(mapping.if, `${mappingContext}.if`), ifnot: (mapping.ifnot !== undefined ? TagUtils.Tag(mapping.ifnot, `${mappingContext}.ifnot`) : undefined), - then: Translations.T(mapping.then, `{mappingContext}.then`), + then: Translations.T(mapping.then, `${mappingContext}.then`), hideInAnswer: hideInAnswer }; if (this.question) { diff --git a/UI/ShowDataLayer/ShowDataLayer.ts b/UI/ShowDataLayer/ShowDataLayer.ts index 8c0b885edb..980bcba967 100644 --- a/UI/ShowDataLayer/ShowDataLayer.ts +++ b/UI/ShowDataLayer/ShowDataLayer.ts @@ -16,7 +16,7 @@ export default class ShowDataLayer { private readonly _features: RenderingMultiPlexerFeatureSource private readonly _layerToShow: LayerConfig; private readonly _selectedElement: UIEventSource - private readonly allElements : ElementStorage + private readonly allElements: ElementStorage // Used to generate a fresh ID when needed private _cleanCount = 0; private geoLayer = undefined; @@ -31,7 +31,7 @@ export default class ShowDataLayer { */ private readonly leafletLayersPerId = new Map() - private readonly showDataLayerid : number; + private readonly showDataLayerid: number; private static dataLayerIds = 0 constructor(options: ShowDataLayerOptions & { layerToShow: LayerConfig }) { @@ -104,7 +104,7 @@ export default class ShowDataLayer { leafletLayer.openPopup() } }) - + this.update(options) } @@ -146,17 +146,21 @@ export default class ShowDataLayer { continue } try { - - if((feat.geometry.type === "LineString" || feat.geometry.type === "MultiLineString")) { + + if ((feat.geometry.type === "LineString" || feat.geometry.type === "MultiLineString")) { + const self = this; const coords = L.GeoJSON.coordsToLatLngs(feat.geometry.coordinates) const tagsSource = this.allElements?.addOrGetElement(feat) ?? new UIEventSource(feat.properties); - const lineStyle = this._layerToShow.lineRendering[feat.lineRenderingIndex].GenerateLeafletStyle(tagsSource) - const offsettedLine = L.polyline(coords, lineStyle); - - this.postProcessFeature(feat, offsettedLine) - - offsettedLine.addTo(this.geoLayer) - }else{ + let offsettedLine; + tagsSource.map(tags => this._layerToShow.lineRendering[feat.lineRenderingIndex].GenerateLeafletStyle(tags)).addCallbackAndRunD(lineStyle => { + if (offsettedLine !== undefined) { + self.geoLayer.removeLayer(offsettedLine) + } + offsettedLine = L.polyline(coords, lineStyle); + this.postProcessFeature(feat, offsettedLine) + offsettedLine.addTo(this.geoLayer) + }) + } else { this.geoLayer.addData(feat); } } catch (e) { @@ -183,20 +187,20 @@ export default class ShowDataLayer { const tagsSource = this.allElements?.addOrGetElement(feature) ?? new UIEventSource(feature.properties); // Every object is tied to exactly one layer const layer = this._layerToShow - + const pointRenderingIndex = feature.pointRenderingIndex const lineRenderingIndex = feature.lineRenderingIndex - - if(pointRenderingIndex !== undefined){ + + if (pointRenderingIndex !== undefined) { return { icon: layer.mapRendering[pointRenderingIndex].GenerateLeafletStyle(tagsSource, this._enablePopups) } } - if(lineRenderingIndex !== undefined){ + if (lineRenderingIndex !== undefined) { return layer.lineRendering[lineRenderingIndex].GenerateLeafletStyle(tagsSource) } - throw "Neither lineRendering nor mapRendering defined for "+feature + throw "Neither lineRendering nor mapRendering defined for " + feature } private pointToLayer(feature, latLng): L.Layer { @@ -211,7 +215,7 @@ export default class ShowDataLayer { let tagSource = this.allElements?.getEventSourceById(feature.properties.id) ?? new UIEventSource(feature.properties) const clickable = !(layer.title === undefined && (layer.tagRenderings ?? []).length === 0) - let style : any = layer.mapRendering[feature.pointRenderingIndex].GenerateLeafletStyle(tagSource, clickable); + let style: any = layer.mapRendering[feature.pointRenderingIndex].GenerateLeafletStyle(tagSource, clickable); const baseElement = style.html; if (!this._enablePopups) { baseElement.SetStyle("cursor: initial !important") @@ -276,7 +280,7 @@ export default class ShowDataLayer { feature: feature, leafletlayer: leafletLayer }) - + } diff --git a/UI/i18n/Translations.ts b/UI/i18n/Translations.ts index b1513d74c6..ccf24f39b4 100644 --- a/UI/i18n/Translations.ts +++ b/UI/i18n/Translations.ts @@ -26,6 +26,9 @@ export default class Translations { if (t === undefined || t === null) { return undefined; } + if(typeof t === "number"){ + t = ""+t + } if (typeof t === "string") { return new Translation({"*": t}, context); } diff --git a/assets/themes/sidewalks/sidewalks.json b/assets/themes/sidewalks/sidewalks.json index 5248c97c0d..60a245ccc4 100644 --- a/assets/themes/sidewalks/sidewalks.json +++ b/assets/themes/sidewalks/sidewalks.json @@ -41,7 +41,7 @@ "tagRenderings": [], "mapRendering": [ { - "color": "#ddd", + "color": "#ffffff55", "width": 8 }, { @@ -49,11 +49,12 @@ "render": "#888" }, "width": { - "render": "8", + "render": 6, "mappings": [ { "if": { "or": [ + "sidewalk:left=", "sidewalk:left=no", "sidewalk:left=separate" ] @@ -62,12 +63,26 @@ } ] }, - "offset": -8 + "offset": -6 }, { "color": "#888", - "width": 8, - "offset": 8 + "width": { + "render": 6, + "mappings": [ + { + "if": { + "or": [ + "sidewalk:right=", + "sidewalk:right=no", + "sidewalk:right=separate" + ] + }, + "then": 0 + } + ] + }, + "offset": 6 } ], "allowSplit": true