adding back to center feature

jdanielnd · Dec 21, 2023 · 3a5b906 · 3a5b906
1 parent 381273e
commit 3a5b906
Show file tree

Hide file tree

Showing 2 changed files with 40 additions and 25 deletions.
diff --git a/src/app.tsx b/src/app.tsx
@@ -17,12 +17,13 @@ export default function App() {
   const [port, setPort] = useState(10747)
   const [connected, setConnected] = useState(false)
   const [connecting, setConnecting] = useState(false)
-  const [viewState, setViewState] = useState({
+  const [aircraftPosition, setAircraftPosition] = useState({
     bearing: 0,
     longitude: 0.051536548427520756,
     latitude: 51.50527121507392,
   });
 
+
   useEffect(() => {
     window.aerowinxApi.onConnected(() => {
       console.log('Connected to Aerowinx');
@@ -49,10 +50,10 @@ export default function App() {
     });
 
     window.aerowinxApi.onQs121((data: Qs121) => {
-      if(Object.values(data).some(v => Number.isNaN(v))) return;
-      setViewState({...viewState, longitude: data.lon, latitude: data.lat, bearing: data.heading})
+      if (Object.values(data).some(v => Number.isNaN(v))) return;
+      setAircraftPosition({ ...aircraftPosition, longitude: data.lon, latitude: data.lat, bearing: data.heading })
     });
-    
+
     connectAerowinx();
 
     return () => {
@@ -62,7 +63,7 @@ export default function App() {
   }, [])
 
   const connectAerowinx = () => {
-    window.aerowinxApi.connect({host, port})
+    window.aerowinxApi.connect({ host, port })
     setConnecting(true);
   }
 
@@ -74,8 +75,7 @@ export default function App() {
   return (
     <>
       <Map
-        viewState={viewState}
-        setViewState={setViewState}
+        aircraftPosition={aircraftPosition}
         defaultZoom={17}
         host={host}
         port={port}
@@ -86,7 +86,7 @@ export default function App() {
         connected={connected}
         connectAerowinx={connectAerowinx}
         disconnectAerowinx={disconnectAerowinx}
-        />
+      />
     </>
   )
 }
diff --git a/src/components/Map.tsx b/src/components/Map.tsx
@@ -1,4 +1,4 @@
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 import { Map, Marker, ScaleControl, NavigationControl, FullscreenControl, ViewState } from 'react-map-gl/maplibre';
 import { Button } from 'flowbite-react';
 import 'maplibre-gl/dist/maplibre-gl.css';
@@ -14,30 +14,42 @@ type AeromapViewState = {
 }
 
 export default function AeroMap(
-  { viewState, setViewState, defaultZoom, host, port, setHost, setPort, connecting, setConnecting, connected, connectAerowinx, disconnectAerowinx }:
-  { 
-    viewState: AeromapViewState,
-    setViewState: (viewState: React.SetStateAction<AeromapViewState>) => void,
-    defaultZoom: number,
-    host: string,
-    port: number,
-    setHost: (host: React.SetStateAction<string>) => void,
-    setPort: (port: React.SetStateAction<number>) => void,
-    connecting: boolean,
-    setConnecting: (isConnecting: React.SetStateAction<boolean>) => void,
-    connected: boolean,
-    connectAerowinx: () => void,
-    disconnectAerowinx: () => void
-  }
+  { aircraftPosition, defaultZoom, host, port, setHost, setPort, connecting, setConnecting, connected, connectAerowinx, disconnectAerowinx }:
+    {
+      aircraftPosition: AeromapViewState,
+      defaultZoom: number,
+      host: string,
+      port: number,
+      setHost: (host: React.SetStateAction<string>) => void,
+      setPort: (port: React.SetStateAction<number>) => void,
+      connecting: boolean,
+      setConnecting: (isConnecting: React.SetStateAction<boolean>) => void,
+      connected: boolean,
+      connectAerowinx: () => void,
+      disconnectAerowinx: () => void
+    }
 ) {
   const [mapStyle, setMapStyle] = useState('openstreetmap');
+  const [viewState, setViewState] = useState(aircraftPosition);
   const [zoom, setZoom] = useState(defaultZoom);
+  const [userControl, setUserControl] = useState(false);
+
+  useEffect(() => {
+    if (userControl) return;
+    setViewState(aircraftPosition);
+  }, [aircraftPosition]);
+
+  function backToCenter() {
+    setViewState(aircraftPosition);
+    setUserControl(false);
+  }
 
   return (
     <Map
       {...viewState}
       zoom={zoom}
       onMove={evt => {
+        setUserControl(true);
         setViewState((prevState: ViewState) => ({
           ...prevState,
           longitude: evt.viewState.longitude,
@@ -65,11 +77,14 @@ export default function AeroMap(
           connectAerowinx={connectAerowinx}
           disconnectAerowinx={disconnectAerowinx}
         />
+        {userControl && (
+          <Button className="focus:ring-0" color="gray" onClick={backToCenter}>Back to center</Button>
+        )}
       </nav>
       <NavigationControl showCompass={false} />
       <ScaleControl />
       <FullscreenControl />
-      <Marker {...viewState} anchor="bottom">
+      <Marker {...aircraftPosition} anchor="bottom">
         <Heading />
       </Marker>
     </Map>