Prevent propagation on panel

src/routes/ControlPanel.svelte

@@ -14,12 +14,14 @@
     import { getForecast } from "$lib/prediction";
     import type { FlightParameters, ProfileName } from "$lib/types";
     import { PROFILE_MAP } from "$lib/types";
-    import { FlightParametersStore, writeLocalStorage } from '$lib/stores';
+    import { FlightParametersStore, writeLocalStorage } from "$lib/stores";
 
     let isCollapsed = false;
     let selectedProfile: ProfileName = "Normal";
     let startPoint = "Custom";
 
+    export let element: HTMLDivElement | null = null;
+
     const now = new Date();
     let startDate = now.toISOString().split("T")[0]; // YYYY-MM-DD
     let startTime = now.toISOString().split("T")[1].split(".")[0]; // HH:MM:SS
@@ -27,7 +29,10 @@
     let inputLat = $FlightParametersStore.launch_latitude.toString();
     let inputLng = $FlightParametersStore.launch_longitude.toString();
 
-    $: $FlightParametersStore.profile = PROFILE_MAP[selectedProfile];
+    $: $FlightParametersStore = {
+        ...$FlightParametersStore,
+        profile: PROFILE_MAP[selectedProfile],
+    };
 
     const handleGetPrediction = async () => {
         console.log("Fetching prediction with parameters:", $FlightParametersStore);
@@ -55,7 +60,11 @@
         if (!isNaN(lat) && !isNaN(lng)) {
             $FlightParametersStore.launch_latitude = lat;
             $FlightParametersStore.launch_longitude = lng;
-            console.log("Updated position:", $FlightParametersStore.launch_latitude, $FlightParametersStore.launch_longitude);
+            console.log(
+                "Updated position:",
+                $FlightParametersStore.launch_latitude,
+                $FlightParametersStore.launch_longitude,
+            );
         } else {
             console.error("Invalid coordinate input");
             // TODO: Show a validation error to the user.
@@ -74,12 +83,14 @@
         inputLat = lat.toString();
         inputLng = lng.toString();
     };
+
+    export const getElement = () => {
+        return element;
+    };
 </script>
 
-<Card
-    class="shadow-lg position-absolute bottom-0 end-0 m-3"
-    style="width: 23rem; max-height: 80vh; overflow-y: auto; z-index: 1000;"
->
+<div bind:this={element} style="width: 23rem; max-height: 80vh; overflow-y: auto; z-index: 1000;" class="position-absolute shadow-lg bottom-0 end-0 m-3">
+    <Card>
         <CardHeader
             class="bg-primary text-white d-flex justify-content-between align-items-center card-header"
             style="cursor:pointer;"
@@ -133,7 +144,12 @@
                                 <option value={profileName}>{profileName}</option>
                             {/each}
                         </Input>
-                    <Button color="secondary" size="sm" title="Edit profile" disabled={selectedProfile !== "Custom"}>
+                        <Button
+                            color="secondary"
+                            size="sm"
+                            title="Edit profile"
+                            disabled={selectedProfile !== "Custom"}
+                        >
                             <span>Редакт.</span>
                             <svg
                                 xmlns="http://www.w3.org/2000/svg"
@@ -268,4 +284,5 @@
                 </div>
             </CardBody>
         {/if}
-</Card>
+    </Card>
+</div>

src/routes/predict/+page.svelte

@@ -17,9 +17,14 @@
                 map?.clearMapLayers();
             }
         });
+        console.log('ControlPanel mounted');
+        console.log(panel);
 
-        L.DomEvent.disableClickPropagation(panel?.$element);
-        L.DomEvent.disableScrollPropagation(panel?.$element);
+        if (panel) {
+            let element = panel.getElement();
+            L.DomEvent.disableClickPropagation(element);
+            L.DomEvent.disableScrollPropagation(element);
+        }
     });
 </script>