refactoring

UI/Input/LengthInput.ts

@@ -1,31 +1,30 @@
 import { InputElement } from "./InputElement"
-import { UIEventSource } from "../../Logic/UIEventSource"
+import { ImmutableStore, Store, UIEventSource } from "../../Logic/UIEventSource"
 import Combine from "../Base/Combine"
 import Svg from "../../Svg"
-import { Utils } from "../../Utils"
 import Loc from "../../Models/Loc"
 import { GeoOperations } from "../../Logic/GeoOperations"
-import Minimap, { MinimapObj } from "../Base/Minimap"
 import BackgroundMapSwitch from "../BigComponents/BackgroundMapSwitch"
 import BaseUIElement from "../BaseUIElement"
+import { AvailableRasterLayers, RasterLayerPolygon } from "../../Models/RasterLayers"
 
 /**
  * Selects a length after clicking on the minimap, in meters
  */
 export default class LengthInput extends InputElement<string> {
-    private readonly _location: UIEventSource<Loc>
+    private readonly _location: Store<Loc>
     private readonly value: UIEventSource<string>
-    private readonly background: UIEventSource<any>
+    private readonly background: Store<RasterLayerPolygon>
 
     constructor(
-        mapBackground: UIEventSource<any>,
         location: UIEventSource<Loc>,
+        mapBackground?: UIEventSource<RasterLayerPolygon>,
         value?: UIEventSource<string>
     ) {
         super()
         this._location = location
         this.value = value ?? new UIEventSource<string>(undefined)
-        this.background = mapBackground
+        this.background = mapBackground ?? new ImmutableStore(AvailableRasterLayers.osmCarto)
         this.SetClass("block")
     }
 
@@ -41,28 +40,26 @@ export default class LengthInput extends InputElement<string> {
     protected InnerConstructElement(): HTMLElement {
         let map: BaseUIElement & MinimapObj = undefined
         let layerControl: BaseUIElement = undefined
-        if (!Utils.runningFromConsole) {
-            map = Minimap.createMiniMap({
-                background: this.background,
-                allowMoving: false,
-                location: this._location,
-                attribution: true,
-                leafletOptions: {
-                    tap: true,
-                },
-            })
+        map = Minimap.createMiniMap({
+            background: this.background,
+            allowMoving: false,
+            location: this._location,
+            attribution: true,
+            leafletOptions: {
+                tap: true,
+            },
+        })
 
-            layerControl = new BackgroundMapSwitch(
-                {
-                    locationControl: this._location,
-                    backgroundLayer: this.background,
-                },
-                this.background,
-                {
-                    allowedCategories: ["map", "photo"],
-                }
-            )
-        }
+        layerControl = new BackgroundMapSwitch(
+            {
+                locationControl: this._location,
+                backgroundLayer: this.background,
+            },
+            this.background,
+            {
+                allowedCategories: ["map", "photo"],
+            }
+        )
         const crosshair = new Combine([
             Svg.length_crosshair_svg().SetStyle(
                 `position: absolute;top: 0;left: 0;transform:rotate(${this.value.data ?? 0}deg);`

UI/Input/ValidatedTextField.ts

@@ -3,7 +3,7 @@ import * as EmailValidator from "email-validator"
 import { parsePhoneNumberFromString } from "libphonenumber-js"
 import { InputElement } from "./InputElement"
 import { TextField } from "./TextField"
-import { Store, UIEventSource } from "../../Logic/UIEventSource"
+import { ImmutableStore, Store, UIEventSource } from "../../Logic/UIEventSource"
 import CombinedInputElement from "./CombinedInputElement"
 import SimpleDatePicker from "./SimpleDatePicker"
 import OpeningHoursInput from "../OpeningHours/OpeningHoursInput"
@@ -25,6 +25,7 @@ import InputElementMap from "./InputElementMap"
 import Translations from "../i18n/Translations"
 import { Translation } from "../i18n/Translation"
 import Locale from "../i18n/Locale"
+import { RasterLayerPolygon } from "../../Models/RasterLayers"
 
 export class TextFieldDef {
     public readonly name: string
@@ -638,7 +639,7 @@ class LengthTextField extends TextFieldDef {
             location?: [number, number]
             args?: string[]
             feature?: any
-            mapBackgroundLayer?: Store<BaseLayer>
+            mapBackgroundLayer?: Store<RasterLayerPolygon>
         }
     ) => {
         options = options ?? {}
@@ -674,14 +675,18 @@ class LengthTextField extends TextFieldDef {
             zoom: zoom,
         })
         if (args[1]) {
-            // We have a prefered map!
+            // The arguments indicate the preferred background type
             options.mapBackgroundLayer = AvailableBaseLayers.SelectBestLayerAccordingTo(
                 location,
-                new UIEventSource<string[]>(args[1].split(","))
+                new ImmutableStore<string[]>(args[1].split(","))
             )
         }
         const background = options?.mapBackgroundLayer
-        const li = new LengthInput(new UIEventSource<BaseLayer>(background.data), location, value)
+        const li = new LengthInput(
+            new UIEventSource<RasterLayerPolygon>(background.data),
+            location,
+            value
+        )
         li.SetStyle("height: 20rem;")
         return li
     }