midgard/mapcomplete
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Refactoring of AvailableBaseLayer

Browse source
This commit is contained in:
pietervdvn 2021-07-14 16:05:50 +02:00
parent 99512724e0
commit 7deb9b5d53
5 changed files with 90 additions and 79 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
InitUiElements.ts
View file

@ -341,7 +341,7 @@ export class InitUiElements {
private static InitBaseMap() {
State.state.availableBackgroundLayers = new AvailableBaseLayers(State.state.locationControl).availableEditorLayers;
State.state.availableBackgroundLayers = AvailableBaseLayers.AvailableLayersAt(State.state.locationControl);
State.state.backgroundLayer = State.state.backgroundLayerId
.map((selectedId: string) => {

95
Logic/Actors/AvailableBaseLayers.ts
View file

@ -7,7 +7,6 @@ import {UIEventSource} from "../UIEventSource";
import {GeoOperations} from "../GeoOperations";
import {Utils} from "../../Utils";
import Loc from "../../Models/Loc";
import {isBoolean} from "util";
/**
* Calculates which layers are available at the current location
@ -31,42 +30,82 @@ export default class AvailableBaseLayers {
category: "osmbasedmap"
}
public static layerOverview = AvailableBaseLayers.LoadRasterIndex().concat(AvailableBaseLayers.LoadProviderIndex());
public availableEditorLayers: UIEventSource<BaseLayer[]>;
constructor(location: UIEventSource<Loc>) {
const self = this;
this.availableEditorLayers =
location.map(
(currentLocation) => {
public static AvailableLayersAt(location: UIEventSource<Loc>): UIEventSource<BaseLayer[]> {
const source = location.map(
(currentLocation) => {
if (currentLocation === undefined) {
return AvailableBaseLayers.layerOverview;
}
if (currentLocation === undefined) {
return AvailableBaseLayers.layerOverview;
}
const currentLayers = self.availableEditorLayers?.data;
const newLayers = AvailableBaseLayers.AvailableLayersAt(currentLocation?.lon, currentLocation?.lat);
const currentLayers = source?.data; // A bit unorthodox - I know
const newLayers = AvailableBaseLayers.CalculateAvailableLayersAt(currentLocation?.lon, currentLocation?.lat);
if (currentLayers === undefined) {
if (currentLayers === undefined) {
return newLayers;
}
if (newLayers.length !== currentLayers.length) {
return newLayers;
}
for (let i = 0; i < newLayers.length; i++) {
if (newLayers[i].name !== currentLayers[i].name) {
return newLayers;
}
if (newLayers.length !== currentLayers.length) {
return newLayers;
}
for (let i = 0; i < newLayers.length; i++) {
if (newLayers[i].name !== currentLayers[i].name) {
return newLayers;
}
}
return currentLayers;
});
}
return currentLayers;
});
return source;
}
private static AvailableLayersAt(lon: number, lat: number): BaseLayer[] {
public static SelectBestLayerAccordingTo(location: UIEventSource<Loc>, preferedCategory: UIEventSource<string | string[]>): UIEventSource<BaseLayer> {
return AvailableBaseLayers.AvailableLayersAt(location).map(available => {
// First float all 'best layers' to the top
available.sort((a, b) => {
if (a.isBest && b.isBest) {
return 0;
}
if (!a.isBest) {
return 1
}
return -1;
}
)
if (preferedCategory.data === undefined) {
return available[0]
}
let prefered: string []
if (typeof preferedCategory.data === "string") {
prefered = [preferedCategory.data]
} else {
prefered = preferedCategory.data;
}
prefered.reverse();
for (const category of prefered) {
//Then sort all 'photo'-layers to the top. Stability of the sorting will force a 'best' photo layer on top
available.sort((a, b) => {
if (a.category === category && b.category === category) {
return 0;
}
if (a.category !== category) {
return 1
}
return -1;
}
)
}
return available[0]
})
}
private static CalculateAvailableLayersAt(lon: number, lat: number): BaseLayer[] {
const availableLayers = [AvailableBaseLayers.osmCarto]
const globalLayers = [];
for (const layerOverviewItem of AvailableBaseLayers.layerOverview) {
@ -146,7 +185,7 @@ export default class AvailableBaseLayers {
layer: leafletLayer,
feature: layer,
isBest: props.best ?? false,
category: props.category
category: props.category
});
}
return layers;

2
UI/Base/Minimap.ts
View file

@ -52,7 +52,7 @@ export default class Minimap extends BaseUIElement {
return wrapper;
}
private InitMap() {
if (this._constructedHtmlElement === undefined) {
// This element isn't initialized yet

22
UI/BigComponents/SimpleAddUI.ts
View file

@ -19,6 +19,7 @@ import {Translation} from "../i18n/Translation";
import LocationInput from "../Input/LocationInput";
import {InputElement} from "../Input/InputElement";
import Loc from "../../Models/Loc";
import AvailableBaseLayers from "../../Logic/Actors/AvailableBaseLayers";
/*
* The SimpleAddUI is a single panel, which can have multiple states:
@ -115,14 +116,21 @@ export default class SimpleAddUI extends Toggle {
let location = State.state.LastClickLocation;
let preciseInput: InputElement<Loc> = undefined
if (preset.preciseInput !== undefined) {
const locationSrc = new UIEventSource({
lat: location.data.lat,
lon: location.data.lon,
zoom: 19
});
let backgroundLayer = undefined;
if(preset.preciseInput.preferredBackground){
backgroundLayer= AvailableBaseLayers.SelectBestLayerAccordingTo(locationSrc, new UIEventSource<string | string[]>(preset.preciseInput.preferredBackground))
}
preciseInput = new LocationInput({
preferCategory: preset.preciseInput.preferredBackground ?? State.state.backgroundLayer,
centerLocation:
new UIEventSource({
lat: location.data.lat,
lon: location.data.lon,
zoom: 19
})
mapBackground: backgroundLayer,
centerLocation:locationSrc
})
preciseInput.SetClass("h-32 rounded-xl overflow-hidden border border-gray").SetStyle("height: 12rem;")
}

48
UI/Input/LocationInput.ts
View file

@ -2,30 +2,27 @@ import {InputElement} from "./InputElement";
import Loc from "../../Models/Loc";
import {UIEventSource} from "../../Logic/UIEventSource";
import Minimap from "../Base/Minimap";
import AvailableBaseLayers from "../../Logic/Actors/AvailableBaseLayers";
import BaseLayer from "../../Models/BaseLayer";
import Combine from "../Base/Combine";
import Svg from "../../Svg";
import State from "../../State";
export default class LocationInput extends InputElement<Loc> {
IsSelected: UIEventSource<boolean> = new UIEventSource<boolean>(false);
private _centerLocation: UIEventSource<Loc>;
private readonly preferCategory;
private readonly mapBackground : UIEventSource<BaseLayer>;
constructor(options?: {
mapBackground?: UIEventSource<BaseLayer>,
centerLocation?: UIEventSource<Loc>,
preferCategory?: string | UIEventSource<string>,
}) {
super();
options = options ?? {}
options.centerLocation = options.centerLocation ?? new UIEventSource<Loc>({lat: 0, lon: 0, zoom: 1})
this._centerLocation = options.centerLocation;
if(typeof options.preferCategory === "string"){
options.preferCategory = new UIEventSource<string>(options.preferCategory);
}
this.preferCategory = options.preferCategory ?? new UIEventSource<string>(undefined)
this.mapBackground = options.mapBackground ?? State.state.backgroundLayer
this.SetClass("block h-full")
}
@ -38,43 +35,10 @@ export default class LocationInput extends InputElement<Loc> {
}
protected InnerConstructElement(): HTMLElement {
const layer: UIEventSource<BaseLayer> = new AvailableBaseLayers(this._centerLocation).availableEditorLayers.map(allLayers => {
// First float all 'best layers' to the top
allLayers.sort((a, b) => {
if (a.isBest && b.isBest) {
return 0;
}
if (!a.isBest) {
return 1
}
return -1;
}
)
if (this.preferCategory) {
const self = this;
//Then sort all 'photo'-layers to the top. Stability of the sorting will force a 'best' photo layer on top
allLayers.sort((a, b) => {
const preferred = self.preferCategory.data
if (a.category === preferred && b.category === preferred) {
return 0;
}
if (a.category !== preferred) {
return 1
}
return -1;
}
)
}
return allLayers[0]
}, [this.preferCategory]
)
layer.addCallbackAndRunD(layer => console.log(layer))
const map = new Minimap(
{
location: this._centerLocation,
background: layer
background: this.mapBackground
}
)
map.leafletMap.addCallbackAndRunD(leaflet => {
@ -84,7 +48,7 @@ export default class LocationInput extends InputElement<Loc> {
)
})
layer.map(layer => {
this.mapBackground.map(layer => {
const leaflet = map.leafletMap.data
if (leaflet === undefined || layer === undefined) {