Enable userlayouts in personal theme and morescreen, various small fixes

Logic/LayerUpdater.ts

@@ -32,7 +32,7 @@ export class LayerUpdater {
         state.layoutToUse.addCallback(() => {
             self.update(state)
         });
-       
+
         self.update(state);
     }
 
@@ -41,11 +41,13 @@ export class LayerUpdater {
         state = state ?? State.state;
         for (const layer of state.layoutToUse.data.layers) {
             if (state.locationControl.data.zoom < layer.minzoom) {
-                return undefined;
+                console.log("Not loading layer ", layer.id, " as it needs at least ",layer.minzoom, "zoom")
+                continue;
             }
             filters.push(layer.overpassFilter);
         }
         if (filters.length === 0) {
+            console.log("No layers loaded at all")
             return undefined;
         }
         return new Or(filters);
@@ -103,7 +105,6 @@ export class LayerUpdater {
 
         this.sufficentlyZoomed.setData(filter !== undefined);
         if (filter === undefined) {
-            console.log("Zoom insufficient to run query")
             return;
         }
 
@@ -116,10 +117,10 @@ export class LayerUpdater {
 
         const diff = state.layoutToUse.data.widenFactor;
 
-        const n = bounds.getNorth() + diff;
-        const e = bounds.getEast() + diff;
-        const s = bounds.getSouth() - diff;
-        const w = bounds.getWest() - diff;
+        const n = Math.min(90, bounds.getNorth() + diff);
+        const e = Math.min( 180,bounds.getEast() + diff);
+        const s = Math.max(-90, bounds.getSouth() - diff);
+        const w = Math.max(-180, bounds.getWest() - diff);
 
         this.previousBounds = {north: n, east: e, south: s, west: w};
 

Logic/Leaflet/Basemap.ts

@@ -76,8 +76,8 @@ export class Basemap {
                 location: UIEventSource<{ zoom: number, lat: number, lon: number }>,
                 extraAttribution: UIElement) {
         this.map = L.map(leafletElementId, {
-            center: [location.data.lat, location.data.lon],
-            zoom: location.data.zoom,
+            center: [location.data.lat ?? 0, location.data.lon ?? 0],
+            zoom: location.data.zoom ?? 2,
             layers: [BaseLayers.defaultLayer.layer],
         });
 

Logic/Osm/OsmPreferences.ts

@@ -18,6 +18,8 @@ export class OsmPreferences {
         osmConnection.OnLoggedIn(() => self.UpdatePreferences());
     }
 
+    private longPreferences = {};
+
     /**
      * OSM preferences can be at most 255 chars
      * @param key
@@ -25,7 +27,15 @@ export class OsmPreferences {
      * @constructor
      */
     public GetLongPreference(key: string, prefix: string = "mapcomplete-"): UIEventSource<string> {
+
+        if (this.longPreferences[prefix + key] !== undefined) {
+            return this.longPreferences[prefix + key];
+        }
+
         const source = new UIEventSource<string>(undefined);
+        this.longPreferences[prefix + key] = source;
+
+        console.log("Loading long pref", prefix + key);
 
         const allStartWith = prefix + key + "-combined";
         // Gives the number of combined preferences
@@ -34,22 +44,23 @@ export class OsmPreferences {
         console.log("Getting long pref " + prefix + key);
         const self = this;
         source.addCallback(str => {
-            if (str === undefined) {
-                for (const prefKey in self.preferenceSources) {
-                    if (prefKey.startsWith(allStartWith)) {
-                        self.GetPreference(prefKey, "").setData(undefined);
-                    }
-                }
-                return;
+            if (str === undefined || str === "") {
+               return
             }
 
             let i = 0;
             while (str !== "") {
+                if (str === undefined || str === "undefined") {
+                    throw "Long pref became undefined?"
+                }
+                if (i > 100) {
+                    throw "This long preference is getting very long... "
+                }
                 self.GetPreference(allStartWith + "-" + i, "").setData(str.substr(0, 255));
                 str = str.substr(255);
                 i++;
             }
-            length.setData("" + i);
+            length.setData("" + i); // We use I, the number of preference fields used
         });
 
 
@@ -58,11 +69,17 @@ export class OsmPreferences {
                 source.setData(undefined);
                 return;
             }
-            const length = Number(l);
+            if (l > 25) {
+                throw "Length to long";
+                source.setData(undefined);
+                return;
+            }
+            const prefsCount = Number(l);
             let str = "";
-            for (let i = 0; i < length; i++) {
+            for (let i = 0; i < prefsCount; i++) {
                 str += self.GetPreference(allStartWith + "-" + i, "").data;
             }
+
             source.setData(str);
             source.ping();
             console.log("Long preference ", key, " has ", str.length, " chars");
@@ -135,10 +152,7 @@ export class OsmPreferences {
         }
         console.log("Updating preference", k, " to ", Utils.EllipsesAfter(v, 15));
 
-        this.preferences.data[k] = v;
-        this.preferences.ping();
-
-        if (v === "") {
+        if (v === undefined || v === "") {
             this.auth.xhr({
                 method: 'DELETE',
                 path: '/api/0.6/user/preferences/' + k,

Logic/PersonalLayersPanel.ts

@@ -10,29 +10,35 @@ import {VerticalCombine} from "../UI/Base/VerticalCombine";
 import {FixedUiElement} from "../UI/Base/FixedUiElement";
 import {SubtleButton} from "../UI/Base/SubtleButton";
 import {PersonalLayout} from "./PersonalLayout";
+import {All} from "../Customizations/Layouts/All";
+import {Layout} from "../Customizations/Layout";
+import {TagDependantUIElement} from "../Customizations/UIElementConstructor";
+import {TagRendering} from "../Customizations/TagRendering";
 
 export class PersonalLayersPanel extends UIElement {
     private checkboxes: UIElement[] = [];
 
-    private updateButton: UIElement;
-
     constructor() {
         super(State.state.favouriteLayers);
 
         this.ListenTo(State.state.osmConnection.userDetails);
-
-
         const t = Translations.t.favourite;
-        const favs = State.state.favouriteLayers.data ?? [];
-        
-        this.updateButton = new SubtleButton("./assets/reload.svg", t.reload)
-            .onClick(() => {
-                State.state.layerUpdater.ForceRefresh();
-                State.state.layoutToUse.ping();
-            })
 
+        this.UpdateView([]);
+        const self = this;
+        State.state.installedThemes.addCallback(extraThemes => {
+            self.UpdateView(extraThemes.map(layout => layout.layout));
+            self.Update();
+        })
+    }
+
+
+    private UpdateView(extraThemes: Layout[]) {
+        this.checkboxes = [];
+        const favs = State.state.favouriteLayers.data ?? [];
         const controls = new Map<string, UIEventSource<boolean>>();
-        for (const layout of AllKnownLayouts.layoutsList) {
+        const allLayouts = AllKnownLayouts.layoutsList.concat(extraThemes);
+        for (const layout of allLayouts) {
 
             if (layout.name === PersonalLayout.NAME) {
                 continue;
@@ -41,7 +47,7 @@ export class PersonalLayersPanel extends UIElement {
                 State.state.osmConnection.userDetails.data.name !== "Pieter Vander Vennet") {
                 continue
             }
-            
+
             const header =
                 new Combine([
                     `<div class="custom-layer-panel-header-img"><img src='${layout.icon}'></div>`,
@@ -54,14 +60,22 @@ export class PersonalLayersPanel extends UIElement {
             this.checkboxes.push(header);
 
             for (const layer of layout.layers) {
+
+                let icon = layer.icon;
+                if (icon !== undefined && typeof (icon) !== "string") {
+                    icon = icon.GetContent({"id": "node/-1"}) ?? "./assets/bug.svg";
+                }
                 const image = (layer.icon ? `<img src='${layer.icon}'>` : Img.checkmark);
                 const noimage = (layer.icon ? `<img src='${layer.icon}'>` : Img.no_checkmark);
 
-                let name = layer.name;
-                if(typeof (name) !== "string"){
+                let name = layer.name ?? layer.id;
+                if (name === undefined) {
+                    continue;
+                }
+                if (typeof (name) !== "string") {
                     name = name.InnerRender();
                 }
-                
+
                 const content = new Combine([
                     "<span>",
                     "<b>", name ?? "", "</b> ",
@@ -73,7 +87,7 @@ export class PersonalLayersPanel extends UIElement {
                     ]),
                     new Combine([
                         "<span style='opacity: 0.1'>",
-                        noimage, "</span>", 
+                        noimage, "</span>",
                         "<del>",
                         content,
                         "</del>"
@@ -115,7 +129,6 @@ export class PersonalLayersPanel extends UIElement {
 
         return new Combine([
             t.panelIntro,
-            this.updateButton,
             ...this.checkboxes
         ], "custom-layer-panel").Render();
     }

Logic/TagsFilter.ts

@@ -166,7 +166,6 @@ export class Tag extends TagsFilter {
                 `<a href='https://wiki.openstreetmap.org/wiki/Tag:${this.key}%3D${this.value}' target='_blank'>${v}</a>`
         }
 
-        console.log("Humanizing", this)
         if (typeof (this.value) === "string") {
             return this.key + (this.invertValue ? "!=": "=") + v;
         }else{