From 1d0fbe701c1eecbdff5f1c6a77c7c6e8e4f4c61d Mon Sep 17 00:00:00 2001 From: pietervdvn Date: Thu, 18 Nov 2021 23:42:03 +0100 Subject: [PATCH] First steps for a layer switch --- .../AvailableBaseLayersImplementation.ts | 2 +- UI/BigComponents/BackgroundMapSwitch.ts | 53 ++++ assets/svg/generic_map.svg | 48 +++ assets/svg/license_info.json | 20 ++ assets/svg/satellite.svg | 285 ++++++++++++++++++ scripts/generateLayouts.ts | 2 + test.ts | 15 +- 7 files changed, 422 insertions(+), 3 deletions(-) create mode 100644 UI/BigComponents/BackgroundMapSwitch.ts create mode 100644 assets/svg/generic_map.svg create mode 100644 assets/svg/satellite.svg diff --git a/Logic/Actors/AvailableBaseLayersImplementation.ts b/Logic/Actors/AvailableBaseLayersImplementation.ts index 880311eb49..44ea0ba8f8 100644 --- a/Logic/Actors/AvailableBaseLayersImplementation.ts +++ b/Logic/Actors/AvailableBaseLayersImplementation.ts @@ -264,7 +264,7 @@ export default class AvailableBaseLayersImplementation implements AvailableBaseL ) } return available[0] - }) + }, [preferedCategory]) } private CalculateAvailableLayersAt(lon: number, lat: number): BaseLayer[] { diff --git a/UI/BigComponents/BackgroundMapSwitch.ts b/UI/BigComponents/BackgroundMapSwitch.ts new file mode 100644 index 0000000000..64aba12a54 --- /dev/null +++ b/UI/BigComponents/BackgroundMapSwitch.ts @@ -0,0 +1,53 @@ +import Combine from "../Base/Combine"; +import {UIEventSource} from "../../Logic/UIEventSource"; +import AvailableBaseLayers from "../../Logic/Actors/AvailableBaseLayers"; +import State from "../../State"; +import Loc from "../../Models/Loc"; +import Svg from "../../Svg"; +import {VariableUiElement} from "../Base/VariableUIElement"; +import Toggle from "../Input/Toggle"; + +class SingleLayerSelectionButton extends Toggle { + constructor(state: { + locationControl: UIEventSource + }, prefered: string) { + const layer = AvailableBaseLayers.SelectBestLayerAccordingTo(state.locationControl, new UIEventSource(prefered)) + const layerIsCorrectType = layer.map(bl => bl?.category === prefered) + + super( + SingleLayerSelectionButton.getIconFor(prefered).SetClass("rounded-full p-3 h-10 w-10"), + undefined, + layerIsCorrectType + ); + } + + private static getIconFor(type: string) { + switch (type) { + case "map": + return Svg.generic_map_svg() + case "photo": + return Svg.satellite_svg() + default: + return Svg.generic_map_svg() + } + } +} + +export default class BackgroundMapSwitch extends VariableUiElement { + + constructor( + state: { + locationControl: UIEventSource + }, + options?: { + allowedLayers?: UIEventSource + } + ) { + options = options ?? {} + options.allowedLayers = options.allowedLayers ?? new UIEventSource(["photo", "map"]) + + + super(options.allowedLayers.map(layers => new Combine(layers.map(prefered => new SingleLayerSelectionButton(state, prefered))))); + } + +} \ No newline at end of file diff --git a/assets/svg/generic_map.svg b/assets/svg/generic_map.svg new file mode 100644 index 0000000000..139020894f --- /dev/null +++ b/assets/svg/generic_map.svg @@ -0,0 +1,48 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/assets/svg/license_info.json b/assets/svg/license_info.json index 1adcb7e908..ae0b757cd7 100644 --- a/assets/svg/license_info.json +++ b/assets/svg/license_info.json @@ -617,6 +617,16 @@ "https://www.iconpacks.net/free-icon-pack/gender-107.html" ] }, + { + "path": "generic_map.svg", + "license": "CC0", + "authors": [ + "Svg Repo" + ], + "sources": [ + "https://www.svgrepo.com/svg/22182/map" + ] + }, { "path": "hand.svg", "license": "CC0", @@ -1115,6 +1125,16 @@ "authors": [], "sources": [] }, + { + "path": "satellite.svg", + "license": "CC0", + "authors": [ + "SVG Repo" + ], + "sources": [ + "https://www.svgrepo.com/svg/80960/satellite" + ] + }, { "path": "scissors.svg", "license": "CC-BY 3.0", diff --git a/assets/svg/satellite.svg b/assets/svg/satellite.svg new file mode 100644 index 0000000000..ca0c3e9e31 --- /dev/null +++ b/assets/svg/satellite.svg @@ -0,0 +1,285 @@ + + + +image/svg+xml + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/scripts/generateLayouts.ts b/scripts/generateLayouts.ts index 5335a7a39a..685afe4380 100644 --- a/scripts/generateLayouts.ts +++ b/scripts/generateLayouts.ts @@ -7,6 +7,7 @@ import Constants from "../Models/Constants"; import * as all_known_layouts from "../assets/generated/known_layers_and_themes.json" import {LayoutConfigJson} from "../Models/ThemeConfig/Json/LayoutConfigJson"; import LayoutConfig from "../Models/ThemeConfig/LayoutConfig"; +import PrivacyPolicy from "../UI/BigComponents/PrivacyPolicy"; // We HAVE to mark this while importing Utils.runningFromConsole = true; @@ -227,6 +228,7 @@ createManifest(new LayoutConfig({ writeFileSync("index.manifest", manif) }) + console.log("Counting all translations") Translations.CountTranslations(); console.log("All done!"); \ No newline at end of file diff --git a/test.ts b/test.ts index 32f6eeddc7..01a43f90f0 100644 --- a/test.ts +++ b/test.ts @@ -1,3 +1,14 @@ -import PrivacyPolicy from "./UI/BigComponents/PrivacyPolicy"; +import BackgroundMapSwitch from "./UI/BigComponents/BackgroundMapSwitch"; +import {UIEventSource} from "./Logic/UIEventSource"; +import Loc from "./Models/Loc"; +import AvailableBaseLayersImplementation from "./Logic/Actors/AvailableBaseLayersImplementation"; +import AvailableBaseLayers from "./Logic/Actors/AvailableBaseLayers"; +AvailableBaseLayers.implement(new AvailableBaseLayersImplementation()) -new PrivacyPolicy().AttachTo("maindiv") \ No newline at end of file +new BackgroundMapSwitch({ + locationControl: new UIEventSource({ + zoom: 19, + lat: 51.5, + lon: 4.1 + }) +}).AttachTo("maindiv") \ No newline at end of file