From c8288439e0cad345986e486f57d616ac7a4c30c9 Mon Sep 17 00:00:00 2001
From: Alexander Goryushkin <aleotu@gmail.com>
Date: Sun, 2 Jun 2024 21:45:52 -0400
Subject: [PATCH] add elevation field

---
 .../modals/GeoModal/GeoModal.component.jsx    | 36 ++++++++++++-------
 1 file changed, 24 insertions(+), 12 deletions(-)

diff --git a/src/editor/components/modals/GeoModal/GeoModal.component.jsx b/src/editor/components/modals/GeoModal/GeoModal.component.jsx
index 0773b32db..f5ab6deab 100644
--- a/src/editor/components/modals/GeoModal/GeoModal.component.jsx
+++ b/src/editor/components/modals/GeoModal/GeoModal.component.jsx
@@ -21,10 +21,9 @@ const GeoModal = ({ isOpen, onClose }) => {
 
   const [markerPosition, setMarkerPosition] = useState({
     lat: 37.7637072, // lat: 37.76370724481858, lng: -122.41517686259827
-    lng: -122.4151768,
-    elevation: 10
+    lng: -122.4151768
   });
-
+  const [elevation, setElevation] = useState(10);
   const [autocomplete, setAutocomplete] = useState(null);
 
   const roundCoord = (num) => {
@@ -42,18 +41,20 @@ const GeoModal = ({ isOpen, onClose }) => {
         const elevation = parseFloat(coord.elevation) || 0;
 
         if (!isNaN(lat) && !isNaN(lng)) {
-          setMarkerPosition({ lat, lng, elevation });
+          setMarkerPosition({ lat, lng });
+        }
+        if (!isNaN(elevation)) {
+          setElevation(elevation);
         }
       }
     }
   }, [isOpen]);
 
   const onMapClick = useCallback((event) => {
-    setMarkerPosition((prev) => ({
-      ...prev,
+    setMarkerPosition({
       lat: roundCoord(event.latLng.lat()),
       lng: roundCoord(event.latLng.lng())
-    }));
+    });
   }, []);
 
   const handleCoordinateChange = (value) => {
@@ -64,12 +65,16 @@ const GeoModal = ({ isOpen, onClose }) => {
     if (!isNaN(newLat) && !isNaN(newLng)) {
       setMarkerPosition({
         lat: roundCoord(newLat),
-        lng: roundCoord(newLng),
-        height: markerPosition.height
+        lng: roundCoord(newLng)
       });
     }
   };
 
+  const handleElevationChange = (value) => {
+    const newElevation = parseFloat(value) || 0;
+    setElevation(newElevation);
+  };
+
   const onAutocompleteLoad = useCallback((autocompleteInstance) => {
     setAutocomplete(autocompleteInstance);
   }, []);
@@ -80,8 +85,7 @@ const GeoModal = ({ isOpen, onClose }) => {
       if (place && place.geometry) {
         const location = {
           lat: place.geometry.location.lat(),
-          lng: place.geometry.location.lng(),
-          height: 0
+          lng: place.geometry.location.lng()
         };
         setMarkerPosition(location);
       }
@@ -101,7 +105,6 @@ const GeoModal = ({ isOpen, onClose }) => {
   const onSaveHandler = () => {
     const latitude = markerPosition.lat;
     const longitude = markerPosition.lng;
-    const elevation = markerPosition.elevation;
     AFRAME.scenes[0].setAttribute('metadata', 'coord', {
       latitude: latitude,
       longitude: longitude,
@@ -172,6 +175,15 @@ const GeoModal = ({ isOpen, onClose }) => {
               onChange={handleCoordinateChange}
             ></Input>
           </div>
+          <div>
+            <p>Elevation</p>
+            <Input
+              leadingIcon={<p className={styles.iconGeo}>Height</p>}
+              value={elevation}
+              placeholder="None"
+              onChange={handleElevationChange}
+            ></Input>
+          </div>
         </div>
 
         <div className={styles.controlButtons}>