up (#348)

* Update deps

* Drop sponsor

Thanks Niviuk for the last 2 years!

* remove deprecated fns

* minor tweaks

Author: vicb

apps/fxc-front/src/app/components/2d/map-element.ts

@@ -99,7 +99,6 @@ export class MapElement extends connect(store)(LitElement) {
   private lockOnPilot = false;
   private lockPanBefore = 0;
   private subscriptions: UnsubscribeHandle[] = [];
-  private readonly adRatio = store.getState().browser.isSmallScreen ? 0.7 : 1;
 
   stateChanged(state: RootState): void {
     this.tracks = sel.tracks(state);
@@ -182,16 +181,6 @@ export class MapElement extends connect(store)(LitElement) {
       controls.map = this.map;
       this.map.controls[google.maps.ControlPosition.TOP_LEFT].push(controls);
 
-      if (!store.getState().browser.isFromFfvl) {
-        const ad = document.createElement('a');
-        ad.setAttribute('href', 'https://www.niviuk.com/');
-        ad.setAttribute('target', '_blank');
-        ad.innerHTML = `<img width="${Math.round(175 * this.adRatio)}" height="${Math.round(
-          32 * this.adRatio,
-        )}" src="/static/img/niviuk.svg">`;
-        this.map.controls[google.maps.ControlPosition.BOTTOM_CENTER].push(ad);
-      }
-
       this.map.addListener('click', (e: google.maps.MapMouseEvent) => {
         const latLng = e.latLng as google.maps.LatLng;
         const found = findClosestFix(this.tracks, latLng.lat(), latLng.lng());

apps/fxc-front/src/app/components/3d/airspace3d-element.ts

@@ -71,7 +71,7 @@ export class Airspace3dElement extends connect(store)(LitElement) {
       this.showTypes,
     );
     if (html) {
-      view.popup.open({
+      view.popup?.open({
         location: {
           latitude: latLon.lat,
           longitude: latLon.lon,

apps/fxc-front/src/app/components/3d/map3d-element.ts

@@ -7,6 +7,7 @@ import './tracking3d-element';
 
 import Basemap from '@arcgis/core/Basemap';
 import esriConfig from '@arcgis/core/config';
+import { watch } from '@arcgis/core/core/reactiveUtils.js';
 import Point from '@arcgis/core/geometry/Point';
 import BaseElevationLayer from '@arcgis/core/layers/BaseElevationLayer';
 import ElevationLayer from '@arcgis/core/layers/ElevationLayer';
@@ -77,7 +78,6 @@ export class Map3dElement extends connect(store)(LitElement) {
   private subscriptions: UnsubscribeHandle[] = [];
   private previousLookAt?: LatLonAlt;
   private updateCamera = false;
-  private readonly adRatio = store.getState().browser.isSmallScreen ? 0.7 : 1;
 
   stateChanged(state: RootState): void {
     this.tracks = sel.tracks(state);
@@ -99,9 +99,9 @@ export class Map3dElement extends connect(store)(LitElement) {
           const dLon = lookAt.lon - this.previousLookAt.lon;
           const dAlt = lookAt.alt - this.previousLookAt.alt;
           const camera = this.view.camera.clone();
-          camera.position.latitude += dLat;
-          camera.position.longitude += dLon;
-          camera.position.z += dAlt * this.multiplier;
+          camera.position.latitude = (camera.position.latitude ?? 0) + dLat;
+          camera.position.longitude = (camera.position.longitude ?? 0) + dLon;
+          camera.position.z = (camera.position.z ?? 0) + dAlt * this.multiplier;
           this.view.camera = camera;
         }
       }
@@ -200,28 +200,22 @@ export class Map3dElement extends connect(store)(LitElement) {
     this.view = view;
     this.createLighting();
 
-    view.watch('popup.visible', (visible) => {
-      if (visible == false) {
-        store.dispatch(setCurrentLiveId(undefined));
-      }
-    });
-    view.popup.viewModel.includeDefaultActions = false;
+    watch(
+      () => view.popup?.visible,
+      (visible) => {
+        if (visible == false) {
+          store.dispatch(setCurrentLiveId(undefined));
+        }
+      },
+    );
+    if (view.popup) {
+      view.popup.viewModel.includeDefaultActions = false;
+    }
     view.ui.remove('zoom');
 
     const controls = document.createElement('controls3d-element');
     view.ui.add(controls, 'top-left');
 
-    if (!store.getState().browser.isFromFfvl) {
-      const ad = document.createElement('a');
-      ad.setAttribute('href', 'https://www.niviuk.com/');
-      ad.setAttribute('target', '_blank');
-      ad.className = 'ad';
-      ad.innerHTML = `<img width="${Math.round(175 * this.adRatio)}" height="${Math.round(
-        40 * this.adRatio,
-      )}" src="/static/img/niviuk.svg">`;
-      view.ui.add(ad);
-    }
-
     const layerSwitcher = this.renderRoot.querySelector('#layers') as HTMLSelectElement;
     view.ui.add(layerSwitcher, 'top-right');
     view.ui.move([layerSwitcher, 'compass', 'navigation-toggle'], 'top-right');
@@ -254,7 +248,10 @@ export class Map3dElement extends connect(store)(LitElement) {
           this.center({ ...location, alt: 0 }, zoom);
         }
 
-        view.watch('center', (point: Point) => this.handleLocation({ lat: point.latitude, lon: point.longitude }));
+        watch(
+          () => view.center,
+          (point: Point) => this.handleLocation({ lat: point.latitude ?? 0, lon: point.longitude ?? 0 }),
+        );
       })
       .catch(async (e) => {
         store.dispatch(setApiLoading(false));
@@ -288,7 +285,7 @@ export class Map3dElement extends connect(store)(LitElement) {
             store.dispatch(setCurrentTrackId(trackId));
           }
         } else {
-          this.airspace?.handleClick({ lat: e.mapPoint.latitude, lon: e.mapPoint.longitude }, view);
+          this.airspace?.handleClick({ lat: e.mapPoint.latitude ?? 0, lon: e.mapPoint.longitude ?? 0 }, view);
         }
       });
     });
@@ -418,12 +415,6 @@ export class Map3dElement extends connect(store)(LitElement) {
         #layers {
           font: 18px Roboto, arial, sans-serif !important;
         }
-        .ad {
-          box-shadow: none;
-          bottom: 10px;
-          left: 50%;
-          transform: translate(-50%, 0);
-        }
       </style>
       <div id="map3d"></div>
       <select id="layers" @change=${(e: any) => this.map?.set('basemap', this.basemaps[e.target.value])}>

apps/fxc-front/src/app/components/3d/tracking3d-element.ts

@@ -298,18 +298,18 @@ export class Tracking3DElement extends connect(store)(LitElement) {
         point = this.sampler.queryElevation(point) as Point;
       }
       // The sampler sometimes return incorrect values (i.e. 3.40...e+37).
-      if (point.z > 20000) {
+      if ((point.z ?? 0) > 20000) {
         point.z = 0;
       }
-      point.z = Math.max(point.z, feature.geometry.coordinates[2] * this.multiplier);
+      point.z = Math.max(point.z!, feature.geometry.coordinates[2] * this.multiplier);
       graphic.set('geometry', point);
       graphic.set('attributes', { liveTrackId: pilotId, liveTrackIndex: pointProperties.index });
       markers.push(graphic);
 
       if (label) {
         const graphic = new Graphic();
         point = point.clone();
-        point.z += MSG_MARKER_HEIGHT;
+        point.z! += MSG_MARKER_HEIGHT;
         graphic.set('geometry', point);
         this.txtSymbol.symbolLayers[0].text = label;
         this.txtSymbol.symbolLayers[0].material.color = isActive ? '#BF1515' : 'black';
@@ -339,7 +339,7 @@ export class Tracking3DElement extends connect(store)(LitElement) {
 
         const track = liveTrackSelectors.selectById(store.getState(), attr.liveTrackId) as protos.LiveTrack;
 
-        view.popup.open({
+        view.popup?.open({
           location: new Point({
             latitude: track.lat[index],
             longitude: track.lon[index],