Merge branch 'components' of https://git.intra.yksa.space/mikhailov.aa/leaflet_svelte into components

src/routes/predict/+page.svelte

@@ -10,8 +10,8 @@
     import { PredictionStore } from "$lib/stores";
     import { addToast, removeToast } from "$lib/components/ui/Toast.svelte";
     import ToastContainer from '$lib/components/ui/Toast.svelte';
-    import L, { point } from "leaflet";
     import GenericPanel from "$lib/components/GenericPanel.svelte";
+    import TimeLine from "$lib/components/TimeLine.svelte";
 
     let map: Map | null = null;
     let panelContainer: PanelContainer | null = null;
@@ -32,8 +32,13 @@
         if (panelContainer) {
             let element = panelContainer.getElement();
             if (!element) return;
-            L.DomEvent.disableClickPropagation(element);
-            L.DomEvent.disableScrollPropagation(element);
+
+            // Disable click and scroll propagation to prevent map interaction
+            element.addEventListener('click', (e) => e.stopPropagation());
+            element.addEventListener('dblclick', (e) => e.stopPropagation());
+            element.addEventListener('mousedown', (e) => e.stopPropagation());
+            element.addEventListener('touchstart', (e) => e.stopPropagation());
+            element.addEventListener('wheel', (e) => e.stopPropagation());
         }
     });
 
@@ -67,7 +72,10 @@
         }
     }
 
-
+    function handleTimeUpdate(event: CustomEvent<{ index: number; lat: number; lng: number; alt: number; datetime: Date }>) {
+        const { lat, lng } = event.detail;
+        map?.updateAnimatedMarker(lat, lng);
+    }
 
 </script>
 
@@ -111,11 +119,12 @@
                     <GenericPanel />
                 {:else if activeTabRight === 'layers'}
                     <GenericPanel />
-                {:else if activeTabLeft === 'settings'}
-                    <!-- <SettingsPanel /> -->
                 {/if}
             </div>
         </PanelContainer>
         <ToastContainer />
+        {#if $PredictionStore}
+            <TimeLine prediction={$PredictionStore} on:timeUpdate={handleTimeUpdate} />
+        {/if}
     </Map>
 </main>