From f5d6441b70efb1797ddc4c13539599d9c4bbd4ad Mon Sep 17 00:00:00 2001 From: pietervdvn Date: Sat, 30 Oct 2021 02:34:16 +0200 Subject: [PATCH] Add layer icon to filter view --- Logic/Osm/Actions/CreateNewWayAction.ts | 1 + Logic/Tags/TagUtils.ts | 18 ++++++------ Models/ThemeConfig/PointRenderingConfig.ts | 11 ++++++-- UI/BigComponents/FilterView.ts | 29 +++++++++++++++----- assets/themes/ghostbikes/ghostbikes.json | 3 ++ css/index-tailwind-output.css | 32 ++++++++-------------- 6 files changed, 55 insertions(+), 39 deletions(-) diff --git a/Logic/Osm/Actions/CreateNewWayAction.ts b/Logic/Osm/Actions/CreateNewWayAction.ts index 0fa9d9912f..098115636e 100644 --- a/Logic/Osm/Actions/CreateNewWayAction.ts +++ b/Logic/Osm/Actions/CreateNewWayAction.ts @@ -39,6 +39,7 @@ export default class CreateNewWayAction extends OsmChangeAction { } const newPoint = new CreateNewNodeAction([], coordinate.lat, coordinate.lon, { + allowReuseOfPreviouslyCreatedPoints: true, changeType: null, theme: this._options.theme }) diff --git a/Logic/Tags/TagUtils.ts b/Logic/Tags/TagUtils.ts index 06949c570e..0ff6896bbe 100644 --- a/Logic/Tags/TagUtils.ts +++ b/Logic/Tags/TagUtils.ts @@ -19,16 +19,6 @@ export class TagUtils { [">", (a, b) => a > b], ] - static ApplyTemplate(template: string, tags: any): string { - for (const k in tags) { - while (template.indexOf("{" + k + "}") >= 0) { - const escaped = tags[k].replace(//g, '>'); - template = template.replace("{" + k + "}", escaped); - } - } - return template; - } - static KVtoProperties(tags: Tag[]): any { const properties = {}; for (const tag of tags) { @@ -37,6 +27,14 @@ export class TagUtils { return properties; } + static changeAsProperties(kvs : {k: string, v: string}[]): any { + const tags = {} + for (const kv of kvs) { + tags[kv.k] = kv.v + } + return tags + } + /** * Given two hashes of {key --> values[]}, makes sure that every neededTag is present in availableTags */ diff --git a/Models/ThemeConfig/PointRenderingConfig.ts b/Models/ThemeConfig/PointRenderingConfig.ts index 4eb6d2f46d..666f9d0479 100644 --- a/Models/ThemeConfig/PointRenderingConfig.ts +++ b/Models/ThemeConfig/PointRenderingConfig.ts @@ -187,7 +187,10 @@ export default class PointRenderingConfig extends WithContextLoader { public GenerateLeafletStyle( tags: UIEventSource, - clickable: boolean + clickable: boolean, + options?: { + noSize: false | boolean + } ): { html: BaseUIElement; @@ -237,9 +240,13 @@ export default class PointRenderingConfig extends WithContextLoader { const iconAndBadges = new Combine([this.GetSimpleIcon(tags), this.GetBadges(tags)]) - .SetStyle(`width: ${iconW}px; height: ${iconH}px`) .SetClass("block relative") + if(!options?.noSize){ + iconAndBadges.SetStyle(`width: ${iconW}px; height: ${iconH}px`) + }else{ + iconAndBadges.SetClass("w-full h-full") + } return { html: new Combine([iconAndBadges, this.GetLabel(tags)]).SetStyle("flex flex-col"), diff --git a/UI/BigComponents/FilterView.ts b/UI/BigComponents/FilterView.ts index 71506c398e..c44a61c70d 100644 --- a/UI/BigComponents/FilterView.ts +++ b/UI/BigComponents/FilterView.ts @@ -14,6 +14,7 @@ import FilteredLayer from "../../Models/FilteredLayer"; import BackgroundSelector from "./BackgroundSelector"; import FilterConfig from "../../Models/ThemeConfig/FilterConfig"; import TilesourceConfig from "../../Models/ThemeConfig/TilesourceConfig"; +import {TagUtils} from "../../Logic/Tags/TagUtils"; export default class FilterView extends VariableUiElement { constructor(filteredLayer: UIEventSource, tileLayers: { config: TilesourceConfig, isDisplayed: UIEventSource }[]) { @@ -42,9 +43,8 @@ export default class FilterView extends VariableUiElement { ); const name: Translation = config.config.name; - const styledNameChecked = name.Clone().SetStyle("font-size:large;padding-left:1.25rem"); - - const styledNameUnChecked = name.Clone().SetStyle("font-size:large;padding-left:1.25rem"); + const styledNameChecked = name.Clone().SetStyle("font-size:large").SetClass("ml-2"); + const styledNameUnChecked = name.Clone().SetStyle("font-size:large").SetClass("ml-2"); const zoomStatus = new Toggle( @@ -82,6 +82,8 @@ export default class FilterView extends VariableUiElement { const iconStyle = "width:1.5rem;height:1.5rem;margin-left:1.25rem;flex-shrink: 0;"; const icon = new Combine([Svg.checkbox_filled]).SetStyle(iconStyle); + const layer = filteredLayer.layerDef + const iconUnselected = new Combine([Svg.checkbox_empty]).SetStyle( iconStyle ); @@ -95,9 +97,9 @@ export default class FilterView extends VariableUiElement { filteredLayer.layerDef.name ); - const styledNameChecked = name.Clone().SetStyle("font-size:large;padding-left:1.25rem"); + const styledNameChecked = name.Clone().SetStyle("font-size:large").SetClass("ml-3"); - const styledNameUnChecked = name.Clone().SetStyle("font-size:large;padding-left:1.25rem"); + const styledNameUnChecked = name.Clone().SetStyle("font-size:large").SetClass("ml-3"); const zoomStatus = new Toggle( @@ -111,11 +113,24 @@ export default class FilterView extends VariableUiElement { const style = "display:flex;align-items:center;padding:0.5rem 0;"; - const layerChecked = new Combine([icon, styledNameChecked, zoomStatus]) + const mapRendering = layer.mapRendering.filter(r => r.location.has("point"))[0] + let layerIcon = undefined + let layerIconUnchecked = undefined + try { + if (mapRendering !== undefined) { + const defaultTags = new UIEventSource( TagUtils.changeAsProperties(layer.source.osmTags.asChange({id: "node/-1"}))) + layerIcon = mapRendering.GenerateLeafletStyle(defaultTags, false, {noSize: true}).html.SetClass("w-8 h-8 ml-2") + layerIconUnchecked = mapRendering.GenerateLeafletStyle(defaultTags, false, {noSize: true}).html.SetClass("opacity-50 w-8 h-8 ml-2") + } + } catch (e) { + console.error(e) + } + + const layerChecked = new Combine([icon, layerIcon, styledNameChecked, zoomStatus]) .SetStyle(style) .onClick(() => filteredLayer.isDisplayed.setData(false)); - const layerNotChecked = new Combine([iconUnselected, styledNameUnChecked]) + const layerNotChecked = new Combine([iconUnselected, layerIconUnchecked, styledNameUnChecked]) .SetStyle(style) .onClick(() => filteredLayer.isDisplayed.setData(true)); diff --git a/assets/themes/ghostbikes/ghostbikes.json b/assets/themes/ghostbikes/ghostbikes.json index 97c5806172..f163271cad 100644 --- a/assets/themes/ghostbikes/ghostbikes.json +++ b/assets/themes/ghostbikes/ghostbikes.json @@ -53,6 +53,9 @@ "startLat": 0, "startLon": 0, "widenFactor": 5, + "clustering": { + "maxZoom": 0 + }, "layers": [ "ghost_bike" ], diff --git a/css/index-tailwind-output.css b/css/index-tailwind-output.css index 0245a30f9c..658e977691 100644 --- a/css/index-tailwind-output.css +++ b/css/index-tailwind-output.css @@ -868,6 +868,14 @@ video { margin-right: 1rem; } +.mt-4 { + margin-top: 1rem; +} + +.ml-2 { + margin-left: 0.5rem; +} + .mt-3 { margin-top: 0.75rem; } @@ -892,18 +900,10 @@ video { margin-top: 0px; } -.ml-2 { - margin-left: 0.5rem; -} - .mb-4 { margin-bottom: 1rem; } -.mt-4 { - margin-top: 1rem; -} - .mb-8 { margin-bottom: 2rem; } @@ -1417,14 +1417,6 @@ video { padding-right: 0.25rem; } -.pt-6 { - padding-top: 1.5rem; -} - -.pb-3 { - padding-bottom: 0.75rem; -} - .pl-5 { padding-left: 1.25rem; } @@ -1593,14 +1585,14 @@ video { text-decoration: underline; } -.opacity-0 { - opacity: 0; -} - .opacity-50 { opacity: 0.5; } +.opacity-0 { + opacity: 0; +} + .opacity-40 { opacity: 0.4; }