forked from MapComplete/MapComplete
550 lines
21 KiB
TypeScript
550 lines
21 KiB
TypeScript
import {FixedUiElement} from "./UI/Base/FixedUiElement";
|
|
import Toggle from "./UI/Input/Toggle";
|
|
import State from "./State";
|
|
import {UIEventSource} from "./Logic/UIEventSource";
|
|
import {QueryParameters} from "./Logic/Web/QueryParameters";
|
|
import StrayClickHandler from "./Logic/Actors/StrayClickHandler";
|
|
import SimpleAddUI from "./UI/BigComponents/SimpleAddUI";
|
|
import CenterMessageBox from "./UI/CenterMessageBox";
|
|
import UserBadge from "./UI/BigComponents/UserBadge";
|
|
import SearchAndGo from "./UI/BigComponents/SearchAndGo";
|
|
import {LocalStorageSource} from "./Logic/Web/LocalStorageSource";
|
|
import {Utils} from "./Utils";
|
|
import Svg from "./Svg";
|
|
import Link from "./UI/Base/Link";
|
|
import * as personal from "./assets/themes/personal/personal.json";
|
|
import * as L from "leaflet";
|
|
import Img from "./UI/Base/Img";
|
|
import Attribution from "./UI/BigComponents/Attribution";
|
|
import BackgroundLayerResetter from "./Logic/Actors/BackgroundLayerResetter";
|
|
import FullWelcomePaneWithTabs from "./UI/BigComponents/FullWelcomePaneWithTabs";
|
|
import ShowDataLayer from "./UI/ShowDataLayer/ShowDataLayer";
|
|
import Hash from "./Logic/Web/Hash";
|
|
import FeaturePipeline from "./Logic/FeatureSource/FeaturePipeline";
|
|
import ScrollableFullScreen from "./UI/Base/ScrollableFullScreen";
|
|
import Translations from "./UI/i18n/Translations";
|
|
import MapControlButton from "./UI/MapControlButton";
|
|
import LZString from "lz-string";
|
|
import AvailableBaseLayers from "./Logic/Actors/AvailableBaseLayers";
|
|
import LeftControls from "./UI/BigComponents/LeftControls";
|
|
import RightControls from "./UI/BigComponents/RightControls";
|
|
import {LayoutConfigJson} from "./Models/ThemeConfig/Json/LayoutConfigJson";
|
|
import LayoutConfig from "./Models/ThemeConfig/LayoutConfig";
|
|
import Minimap from "./UI/Base/Minimap";
|
|
import SelectedFeatureHandler from "./Logic/Actors/SelectedFeatureHandler";
|
|
import Combine from "./UI/Base/Combine";
|
|
import {SubtleButton} from "./UI/Base/SubtleButton";
|
|
import ShowTileInfo from "./UI/ShowDataLayer/ShowTileInfo";
|
|
import {Tiles} from "./Models/TileRange";
|
|
import {TileHierarchyAggregator} from "./UI/ShowDataLayer/TileHierarchyAggregator";
|
|
import FilterConfig from "./Models/ThemeConfig/FilterConfig";
|
|
import FilteredLayer from "./Models/FilteredLayer";
|
|
import {BBox} from "./Logic/BBox";
|
|
import {AllKnownLayouts} from "./Customizations/AllKnownLayouts";
|
|
|
|
export class InitUiElements {
|
|
static InitAll(
|
|
layoutToUse: LayoutConfig,
|
|
layoutFromBase64: string,
|
|
testing: UIEventSource<string>,
|
|
layoutName: string,
|
|
layoutDefinition: string = ""
|
|
) {
|
|
if (layoutToUse === undefined) {
|
|
console.log("Incorrect layout");
|
|
new FixedUiElement(
|
|
`Error: incorrect layout <i>${layoutName}</i><br/><a href='https://${window.location.host}/'>Go back</a>`
|
|
)
|
|
.AttachTo("centermessage")
|
|
.onClick(() => {
|
|
});
|
|
throw "Incorrect layout";
|
|
}
|
|
|
|
console.log(
|
|
"Using layout: ",
|
|
layoutToUse.id,
|
|
"LayoutFromBase64 is ",
|
|
layoutFromBase64
|
|
);
|
|
|
|
if(layoutToUse.id === personal.id){
|
|
layoutToUse.layers = AllKnownLayouts.AllPublicLayers()
|
|
for (const layer of layoutToUse.layers) {
|
|
layer.minzoomVisible = Math.max(layer.minzoomVisible, layer.minzoom)
|
|
layer.minzoom = Math.max(16, layer.minzoom)
|
|
}
|
|
}
|
|
|
|
State.state = new State(layoutToUse);
|
|
|
|
if(layoutToUse.id === personal.id) {
|
|
// Disable overpass all together
|
|
State.state.overpassMaxZoom.setData(0)
|
|
|
|
}
|
|
|
|
// This 'leaks' the global state via the window object, useful for debugging
|
|
// @ts-ignore
|
|
window.mapcomplete_state = State.state;
|
|
|
|
if (layoutToUse.hideFromOverview) {
|
|
State.state.osmConnection
|
|
.GetPreference("hidden-theme-" + layoutToUse.id + "-enabled")
|
|
.setData("true");
|
|
}
|
|
|
|
if (layoutFromBase64 !== "false") {
|
|
State.state.layoutDefinition = layoutDefinition;
|
|
console.log(
|
|
"Layout definition:",
|
|
Utils.EllipsesAfter(State.state.layoutDefinition, 100)
|
|
);
|
|
if (testing.data !== "true") {
|
|
State.state.osmConnection.OnLoggedIn(() => {
|
|
State.state.osmConnection
|
|
.GetLongPreference("installed-theme-" + layoutToUse.id)
|
|
.setData(State.state.layoutDefinition);
|
|
});
|
|
} else {
|
|
console.warn(
|
|
"NOT saving custom layout to OSM as we are tesing -> probably in an iFrame"
|
|
);
|
|
}
|
|
}
|
|
|
|
if (layoutToUse.customCss !== undefined) {
|
|
Utils.LoadCustomCss(layoutToUse.customCss);
|
|
}
|
|
|
|
InitUiElements.InitBaseMap();
|
|
|
|
InitUiElements.OnlyIf(State.state.featureSwitchUserbadge, () => {
|
|
new UserBadge().AttachTo("userbadge");
|
|
});
|
|
|
|
InitUiElements.OnlyIf(State.state.featureSwitchSearch, () => {
|
|
new SearchAndGo().AttachTo("searchbox");
|
|
});
|
|
|
|
InitUiElements.OnlyIf(State.state.featureSwitchWelcomeMessage, () => {
|
|
InitUiElements.InitWelcomeMessage();
|
|
});
|
|
|
|
if (State.state.featureSwitchIframe.data) {
|
|
const currentLocation = State.state.locationControl;
|
|
const url = `${window.location.origin}${
|
|
window.location.pathname
|
|
}?z=${currentLocation.data.zoom ?? 0}&lat=${
|
|
currentLocation.data.lat ?? 0
|
|
}&lon=${currentLocation.data.lon ?? 0}`;
|
|
new MapControlButton(
|
|
new Link(Svg.pop_out_img, url, true).SetClass(
|
|
"block w-full h-full p-1.5"
|
|
)
|
|
).AttachTo("messagesbox");
|
|
}
|
|
|
|
function addHomeMarker() {
|
|
const userDetails = State.state.osmConnection.userDetails.data;
|
|
if (userDetails === undefined) {
|
|
return false;
|
|
}
|
|
const home = userDetails.home;
|
|
if (home === undefined) {
|
|
return userDetails.loggedIn; // If logged in, the home is not set and we unregister. If not logged in, we stay registered if a login still comes
|
|
}
|
|
const leaflet = State.state.leafletMap.data;
|
|
if (leaflet === undefined) {
|
|
return false;
|
|
}
|
|
const color = getComputedStyle(document.body).getPropertyValue(
|
|
"--subtle-detail-color"
|
|
);
|
|
const icon = L.icon({
|
|
iconUrl: Img.AsData(
|
|
Svg.home_white_bg.replace(/#ffffff/g, color)
|
|
),
|
|
iconSize: [30, 30],
|
|
iconAnchor: [15, 15],
|
|
});
|
|
const marker = L.marker([home.lat, home.lon], {icon: icon});
|
|
marker.addTo(leaflet);
|
|
return true;
|
|
}
|
|
|
|
State.state.osmConnection.userDetails
|
|
.addCallbackAndRunD(_ => addHomeMarker());
|
|
State.state.leafletMap.addCallbackAndRunD(_ => addHomeMarker())
|
|
|
|
|
|
InitUiElements.setupAllLayerElements();
|
|
State.state.locationControl.ping();
|
|
|
|
new SelectedFeatureHandler(Hash.hash, State.state)
|
|
|
|
// Reset the loading message once things are loaded
|
|
new CenterMessageBox().AttachTo("centermessage");
|
|
document
|
|
.getElementById("centermessage")
|
|
.classList.add("pointer-events-none");
|
|
}
|
|
|
|
static LoadLayoutFromHash(
|
|
userLayoutParam: UIEventSource<string>
|
|
): [LayoutConfig, string] {
|
|
let hash = location.hash.substr(1);
|
|
try {
|
|
const layoutFromBase64 = userLayoutParam.data;
|
|
// layoutFromBase64 contains the name of the theme. This is partly to do tracking with goat counter
|
|
|
|
const dedicatedHashFromLocalStorage = LocalStorageSource.Get(
|
|
"user-layout-" + layoutFromBase64.replace(" ", "_")
|
|
);
|
|
if (dedicatedHashFromLocalStorage.data?.length < 10) {
|
|
dedicatedHashFromLocalStorage.setData(undefined);
|
|
}
|
|
|
|
const hashFromLocalStorage = LocalStorageSource.Get(
|
|
"last-loaded-user-layout"
|
|
);
|
|
if (hash.length < 10) {
|
|
hash =
|
|
dedicatedHashFromLocalStorage.data ??
|
|
hashFromLocalStorage.data;
|
|
} else {
|
|
console.log("Saving hash to local storage");
|
|
hashFromLocalStorage.setData(hash);
|
|
dedicatedHashFromLocalStorage.setData(hash);
|
|
}
|
|
|
|
let json: {};
|
|
try {
|
|
json = JSON.parse(atob(hash));
|
|
} catch (e) {
|
|
// We try to decode with lz-string
|
|
json = JSON.parse(
|
|
Utils.UnMinify(LZString.decompressFromBase64(hash))
|
|
) as LayoutConfigJson;
|
|
}
|
|
|
|
// @ts-ignore
|
|
const layoutToUse = new LayoutConfig(json, false);
|
|
userLayoutParam.setData(layoutToUse.id);
|
|
return [layoutToUse, btoa(Utils.MinifyJSON(JSON.stringify(json)))];
|
|
} catch (e) {
|
|
|
|
if (hash === undefined || hash.length < 10) {
|
|
e = "Did you effectively add a theme? It seems no data could be found."
|
|
}
|
|
|
|
new Combine([
|
|
"Error: could not parse the custom layout:",
|
|
new FixedUiElement("" + e).SetClass("alert"),
|
|
new SubtleButton("./assets/svg/mapcomplete_logo.svg",
|
|
"Go back to the theme overview",
|
|
{url: window.location.protocol + "//" + window.location.hostname + "/index.html", newTab: false})
|
|
|
|
])
|
|
.SetClass("flex flex-col")
|
|
.AttachTo("centermessage");
|
|
throw e;
|
|
}
|
|
}
|
|
|
|
private static OnlyIf(
|
|
featureSwitch: UIEventSource<boolean>,
|
|
callback: () => void
|
|
) {
|
|
featureSwitch.addCallbackAndRun(() => {
|
|
if (featureSwitch.data) {
|
|
callback();
|
|
}
|
|
});
|
|
}
|
|
|
|
private static InitWelcomeMessage() {
|
|
const isOpened = new UIEventSource<boolean>(false);
|
|
const fullOptions = new FullWelcomePaneWithTabs(isOpened);
|
|
|
|
// ?-Button on Desktop, opens panel with close-X.
|
|
const help = new MapControlButton(Svg.help_svg());
|
|
help.onClick(() => isOpened.setData(true));
|
|
new Toggle(
|
|
fullOptions.SetClass("welcomeMessage pointer-events-auto"),
|
|
help.SetClass("pointer-events-auto"),
|
|
isOpened
|
|
)
|
|
.AttachTo("messagesbox");
|
|
const openedTime = new Date().getTime();
|
|
State.state.locationControl.addCallback(() => {
|
|
if (new Date().getTime() - openedTime < 15 * 1000) {
|
|
// Don't autoclose the first 15 secs when the map is moving
|
|
return;
|
|
}
|
|
isOpened.setData(false);
|
|
});
|
|
|
|
State.state.selectedElement.addCallbackAndRunD((_) => {
|
|
isOpened.setData(false);
|
|
});
|
|
isOpened.setData(
|
|
Hash.hash.data === undefined ||
|
|
Hash.hash.data === "" ||
|
|
Hash.hash.data == "welcome"
|
|
);
|
|
}
|
|
|
|
private static InitBaseMap() {
|
|
State.state.availableBackgroundLayers =
|
|
AvailableBaseLayers.AvailableLayersAt(State.state.locationControl);
|
|
State.state.backgroundLayer = State.state.backgroundLayerId.map(
|
|
(selectedId: string) => {
|
|
if (selectedId === undefined) {
|
|
return AvailableBaseLayers.osmCarto;
|
|
}
|
|
|
|
const available = State.state.availableBackgroundLayers.data;
|
|
for (const layer of available) {
|
|
if (layer.id === selectedId) {
|
|
return layer;
|
|
}
|
|
}
|
|
return AvailableBaseLayers.osmCarto;
|
|
},
|
|
[State.state.availableBackgroundLayers],
|
|
(layer) => layer.id
|
|
);
|
|
|
|
new BackgroundLayerResetter(
|
|
State.state.backgroundLayer,
|
|
State.state.locationControl,
|
|
State.state.availableBackgroundLayers,
|
|
State.state.layoutToUse.defaultBackgroundId
|
|
);
|
|
|
|
const attr = new Attribution(
|
|
State.state.locationControl,
|
|
State.state.osmConnection.userDetails,
|
|
State.state.layoutToUse,
|
|
State.state.currentBounds
|
|
);
|
|
|
|
Minimap.createMiniMap({
|
|
background: State.state.backgroundLayer,
|
|
location: State.state.locationControl,
|
|
leafletMap: State.state.leafletMap,
|
|
bounds: State.state.currentBounds,
|
|
attribution: attr,
|
|
lastClickLocation: State.state.LastClickLocation
|
|
}).SetClass("w-full h-full")
|
|
.AttachTo("leafletDiv")
|
|
|
|
const layout = State.state.layoutToUse;
|
|
if (layout.lockLocation) {
|
|
if (layout.lockLocation === true) {
|
|
const tile = Tiles.embedded_tile(
|
|
layout.startLat,
|
|
layout.startLon,
|
|
layout.startZoom - 1
|
|
);
|
|
const bounds = Tiles.tile_bounds(tile.z, tile.x, tile.y);
|
|
// We use the bounds to get a sense of distance for this zoom level
|
|
const latDiff = bounds[0][0] - bounds[1][0];
|
|
const lonDiff = bounds[0][1] - bounds[1][1];
|
|
layout.lockLocation = [
|
|
[layout.startLat - latDiff, layout.startLon - lonDiff],
|
|
[layout.startLat + latDiff, layout.startLon + lonDiff],
|
|
];
|
|
}
|
|
console.warn("Locking the bounds to ", layout.lockLocation);
|
|
State.state.leafletMap.addCallbackAndRunD(map => {
|
|
// @ts-ignore
|
|
map.setMaxBounds(layout.lockLocation);
|
|
map.setMinZoom(layout.startZoom);
|
|
})
|
|
}
|
|
}
|
|
|
|
private static InitLayers(): void {
|
|
const state = State.state;
|
|
const empty = []
|
|
|
|
const flayers: FilteredLayer[] = [];
|
|
|
|
for (const layer of state.layoutToUse.layers) {
|
|
let defaultShown = "true"
|
|
if(state.layoutToUse.id === personal.id){
|
|
defaultShown = "false"
|
|
}
|
|
|
|
let isDisplayed: UIEventSource<boolean>
|
|
if(state.layoutToUse.id === personal.id){
|
|
isDisplayed = State.state.osmConnection.GetPreference("personal-theme-layer-" + layer.id + "-enabled")
|
|
.map(value => value === "yes", [], enabled => {
|
|
return enabled ? "yes" : "";
|
|
})
|
|
isDisplayed.addCallbackAndRun(d =>console.log("IsDisplayed for layer", layer.id, "is currently", d) )
|
|
}else{
|
|
isDisplayed = QueryParameters.GetQueryParameter(
|
|
"layer-" + layer.id,
|
|
defaultShown,
|
|
"Wether or not layer " + layer.id + " is shown"
|
|
).map<boolean>(
|
|
(str) => str !== "false",
|
|
[],
|
|
(b) => b.toString()
|
|
);
|
|
}
|
|
const flayer = {
|
|
isDisplayed: isDisplayed,
|
|
layerDef: layer,
|
|
appliedFilters: new UIEventSource<{ filter: FilterConfig, selected: number }[]>([]),
|
|
};
|
|
|
|
if (layer.filters.length > 0) {
|
|
const filtersPerName = new Map<string, FilterConfig>()
|
|
layer.filters.forEach(f => filtersPerName.set(f.id, f))
|
|
const qp = QueryParameters.GetQueryParameter("filter-" + layer.id, "","Filtering state for a layer")
|
|
flayer.appliedFilters.map(filters => {
|
|
filters = filters ?? []
|
|
return filters.map(f => f.filter.id + "." + f.selected).join(",")
|
|
}, [], textual => {
|
|
if(textual.length === 0){
|
|
return empty
|
|
}
|
|
return textual.split(",").map(part => {
|
|
const [filterId, selected] = part.split(".");
|
|
return {filter: filtersPerName.get(filterId), selected: Number(selected)}
|
|
}).filter(f => f.filter !== undefined && !isNaN(f.selected))
|
|
}).syncWith(qp, true)
|
|
}
|
|
|
|
flayers.push(flayer);
|
|
}
|
|
state.filteredLayers = new UIEventSource<FilteredLayer[]>(flayers);
|
|
|
|
|
|
|
|
|
|
const clusterCounter = TileHierarchyAggregator.createHierarchy()
|
|
new ShowDataLayer({
|
|
features: clusterCounter.getCountsForZoom(State.state.locationControl, State.state.layoutToUse.clustering.minNeededElements),
|
|
leafletMap: State.state.leafletMap,
|
|
layerToShow: ShowTileInfo.styling,
|
|
enablePopups: false
|
|
})
|
|
|
|
State.state.featurePipeline = new FeaturePipeline(
|
|
source => {
|
|
|
|
clusterCounter.addTile(source)
|
|
|
|
const clustering = State.state.layoutToUse.clustering
|
|
const doShowFeatures = source.features.map(
|
|
f => {
|
|
const z = State.state.locationControl.data.zoom
|
|
|
|
if(!source.layer.isDisplayed.data){
|
|
return false;
|
|
}
|
|
|
|
if (z < source.layer.layerDef.minzoom) {
|
|
// Layer is always hidden for this zoom level
|
|
return false;
|
|
}
|
|
|
|
if (z >= clustering.maxZoom) {
|
|
return true
|
|
}
|
|
|
|
if (f.length > clustering.minNeededElements) {
|
|
// This tile alone already has too much features
|
|
return false
|
|
}
|
|
|
|
let [tileZ, tileX, tileY] = Tiles.tile_from_index(source.tileIndex);
|
|
if (tileZ >= z) {
|
|
|
|
while (tileZ > z) {
|
|
tileZ--
|
|
tileX = Math.floor(tileX / 2)
|
|
tileY = Math.floor(tileY / 2)
|
|
}
|
|
|
|
if (clusterCounter.getTile(Tiles.tile_index(tileZ, tileX, tileY))?.totalValue > clustering.minNeededElements) {
|
|
return false
|
|
}
|
|
}
|
|
|
|
|
|
const bounds = State.state.currentBounds.data
|
|
if(bounds === undefined){
|
|
// Map is not yet displayed
|
|
return false;
|
|
}
|
|
if (!source.bbox.overlapsWith(bounds)) {
|
|
// Not within range
|
|
return false
|
|
}
|
|
|
|
return true
|
|
}, [State.state.currentBounds]
|
|
)
|
|
|
|
new ShowDataLayer(
|
|
{
|
|
features: source,
|
|
leafletMap: State.state.leafletMap,
|
|
layerToShow: source.layer.layerDef,
|
|
doShowLayer: doShowFeatures
|
|
}
|
|
);
|
|
}, state
|
|
);
|
|
}
|
|
|
|
private static setupAllLayerElements() {
|
|
// ------------- Setup the layers -------------------------------
|
|
|
|
InitUiElements.InitLayers();
|
|
|
|
new LeftControls(State.state).AttachTo("bottom-left");
|
|
new RightControls().AttachTo("bottom-right");
|
|
|
|
// ------------------ Setup various other UI elements ------------
|
|
|
|
InitUiElements.OnlyIf(State.state.featureSwitchAddNew, () => {
|
|
let presetCount = 0;
|
|
for (const layer of State.state.filteredLayers.data) {
|
|
for (const preset of layer.layerDef.presets) {
|
|
presetCount++;
|
|
}
|
|
}
|
|
if (presetCount == 0) {
|
|
return;
|
|
}
|
|
|
|
const newPointDialogIsShown = new UIEventSource<boolean>(false);
|
|
const addNewPoint = new ScrollableFullScreen(
|
|
() => Translations.t.general.add.title.Clone(),
|
|
() => new SimpleAddUI(newPointDialogIsShown),
|
|
"new",
|
|
newPointDialogIsShown
|
|
);
|
|
addNewPoint.isShown.addCallback((isShown) => {
|
|
if (!isShown) {
|
|
State.state.LastClickLocation.setData(undefined);
|
|
}
|
|
});
|
|
|
|
new StrayClickHandler(
|
|
State.state.LastClickLocation,
|
|
State.state.selectedElement,
|
|
State.state.filteredLayers,
|
|
State.state.leafletMap,
|
|
addNewPoint
|
|
);
|
|
});
|
|
}
|
|
}
|