Refactoring: new background selector

UI/Map/RasterLayerPicker.svelte

@@ -1,18 +1,77 @@
 <script lang="ts">
-  import type { Readable, Writable } from "svelte/store";
-  import type { RasterLayerPolygon } from "../../Models/RasterLayers";
+    import type {RasterLayerPolygon} from "../../Models/RasterLayers";
+    import OverlayMap from "./OverlayMap.svelte";
+    import type {MapProperties} from "../../Models/MapProperties";
+    import {Store, UIEventSource} from "../../Logic/UIEventSource";
+    import {Map as MlMap} from "maplibre-gl"
+    import {createEventDispatcher, onDestroy} from "svelte";
 
-  /***
-   * Chooses a background-layer out of available options
-   */
-  export let availableLayers: Readable<RasterLayerPolygon[]>
-  export let value: Writable<RasterLayerPolygon>
+    /***
+     * Chooses a background-layer out of available options
+     */
+    export let availableLayers: Store<RasterLayerPolygon[]>
+    export let mapproperties: MapProperties
+    export let map: Store<MlMap>
+
+    export let visible: Store<boolean> = undefined
+    
+    let dispatch = createEventDispatcher<{appliedLayer}>()
+    
+    export let favourite : UIEventSource<string> = undefined
+    
+
+    let rasterLayer = new UIEventSource<RasterLayerPolygon>(availableLayers.data?.[0])
+    let hasLayers = true
+    onDestroy(availableLayers.addCallbackAndRun(layers => {
+        if (layers === undefined || layers.length === 0) {
+            hasLayers = false
+            return
+        }
+        hasLayers = true
+        rasterLayer.setData(layers[0])
+    }))
+    
+    if(favourite){
+        onDestroy(favourite.addCallbackAndRunD(favourite => {
+            const fav = availableLayers.data?.find(l => l.properties.id === favourite)
+            if(!fav){
+                return
+            }
+            rasterLayer.setData(fav)
+        }))
+    }
+    
+    onDestroy(rasterLayer.addCallbackAndRunD(selected => {
+        favourite?.setData(selected.properties.id)
+    }))
+
+    let rasterLayerOnMap = UIEventSource.feedFrom(rasterLayer)
+    
+    if (visible) {
+        onDestroy(visible?.addCallbackAndRunD(visible => {
+            if (visible) {
+                rasterLayerOnMap.setData(rasterLayer.data ?? availableLayers.data[0])
+            } else {
+                rasterLayerOnMap.setData(undefined)
+            }
+        }))
+    }
 </script>
 
-<select bind:value={$value}>
-  {#each $availableLayers as availableLayer }
-    <option value={availableLayer}>
-      {availableLayer.properties.name}
-    </option>
-  {/each}
-</select>
+{#if hasLayers}
+    <div class="h-full w-full flex flex-col">
+        <button on:click={() => {mapproperties.rasterLayer.setData(rasterLayer.data);
+            dispatch("appliedLayer")
+        }} class="w-full h-full m-0 p-0">
+            <OverlayMap rasterLayer={rasterLayerOnMap} placedOverMap={map} placedOverMapProperties={mapproperties}
+                        {visible}/>
+        </button>
+        <select bind:value={$rasterLayer} class="w-full">
+            {#each $availableLayers as availableLayer }
+                <option value={availableLayer}>
+                    {availableLayer.properties.name}
+                </option>
+            {/each}
+        </select>
+    </div>
+{/if}