Add ruler tool and fix types

src/routes/predict/+page.svelte

@@ -4,6 +4,7 @@
     import Navbar from "$lib/components/Navbar.svelte";
     import PanelContainer from "$lib/components/PanelContainer.svelte";
     import TelemetryPanel from '$lib/components/TelemetryPanel.svelte';
+    import ScenarioPanel from "$lib/components/ScenarioPanel.svelte";
     import TabComponent from "$lib/components/TabComponent.svelte";
     import { onMount } from "svelte";
     import { PredictionStore } from "$lib/stores";
@@ -13,9 +14,10 @@
     import L from "leaflet";
 
     let map: Map | null = null;
-    let panel: PanelContainer | null = null;
+    let panelContainer: PanelContainer | null = null;
+    let controlPanel: ControlPanel | null = null;
     let selectionToastId: string | null = null;
-    let activeTab: 'control' | 'telemetry' = 'control';
+    let activeTab: 'control' | 'scenario' | 'settings' | 'about' = 'scenario';
 
     onMount(() => {
         PredictionStore.subscribe((data) => {
@@ -24,10 +26,11 @@
             }
         });
         console.log("ControlPanel mounted");
-        console.log(panel);
+        console.log(panelContainer);
 
-        if (panel) {
-            let element = panel.getElement();
+        if (panelContainer) {
+            let element = panelContainer.getElement();
+            if (!element) return;
             L.DomEvent.disableClickPropagation(element);
             L.DomEvent.disableScrollPropagation(element);
         }
@@ -55,27 +58,23 @@
 
     function handleCoordinateSelection(event: CustomEvent<{ lat: number; lng: number }>) {
         const { lat, lng } = event.detail;
-        panel?.updateLaunchPosition(lat, lng);
+        controlPanel?.updateLaunchPosition(lat, lng);
         console.log(`Selected coordinates: ${lat}, ${lng}`);
         if (selectionToastId) {
             removeToast(selectionToastId);
             selectionToastId = null;
         }
     }
-
- 
 </script>
 
-
-
 <main>
     <Navbar />
     <Map bind:this={map} mode="prediction" bind:data={$PredictionStore} on:coordinatesSelected={handleCoordinateSelection}>
-        <PanelContainer bind:this={panel}>
+        <PanelContainer bind:this={panelContainer} >
             <TabComponent
                 tabs={[
-                    { id: 'control', icon: 'sliders', label: 'Прогноз' },
-                    { id: 'telemetry', icon: 'activity', label: 'Сценарий' },
+                    { id: 'scenario', icon: 'activity', label: 'Сценарий' },
+                    { id: 'control', icon: 'sliders', label: 'Условия' },
                     { id: 'settings', icon: 'gear', label: 'Настройки' },
                     { id: 'about', icon: 'info-circle', label: 'О проекте' }
                 ]}
@@ -84,9 +83,13 @@
             
             <div>
                 {#if activeTab === 'control'}
-                    <ControlPanel {handleClickSelectOnMap} />
-                {:else if activeTab === 'telemetry'}
-                    <TelemetryPanel />
+                    <ControlPanel {handleClickSelectOnMap} bind:this={controlPanel} />
+                {:else if activeTab === 'scenario'}
+                    <ScenarioPanel />
+                {:else if activeTab === 'settings'}
+                    <!-- <SettingsPanel /> -->
+                {:else if activeTab === 'about'}
+                    <!-- <AboutPanel />                       -->
                 {/if}
             </div>
         </PanelContainer>