From 3dfe396a88e0713395107c3590c6e370777a6c76 Mon Sep 17 00:00:00 2001
From: Dustin Carlino <dabreegster@gmail.com>
Date: Sat, 30 Dec 2023 15:05:23 +0900
Subject: [PATCH] Whittle down TS errors

---
 web/src/App.svelte                      | 15 ++++------
 web/src/ManageSavefiles.svelte          |  6 ++--
 web/src/MapLoader.svelte                |  2 +-
 web/src/NeighbourhoodMode.svelte        | 38 +++++++++++++++----------
 web/src/RenderNeighbourhood.svelte      | 16 ++++++-----
 web/src/SetBoundaryMode.svelte          |  5 ++--
 web/src/ViewShortcutsMode.svelte        | 10 +++----
 web/src/common/OverpassSelector.svelte  |  1 +
 web/src/common/RouteSnapperLayer.svelte |  1 -
 web/src/common/index.ts                 |  7 +++++
 web/src/common/route_tool.ts            |  6 ++++
 web/src/stores.ts                       |  4 +--
 12 files changed, 66 insertions(+), 45 deletions(-)

diff --git a/web/src/App.svelte b/web/src/App.svelte
index 45e5d15..d22d023 100644
--- a/web/src/App.svelte
+++ b/web/src/App.svelte
@@ -1,10 +1,8 @@
 <script lang="ts">
-  import turfBbox from "@turf/bbox";
   import { LTN } from "backend";
-  import type { Feature, Polygon } from "geojson";
   import type { Map } from "maplibre-gl";
   import { MapLibre } from "svelte-maplibre";
-  import { Layout } from "./common";
+  import { bbox, Layout } from "./common";
   import { RouteTool } from "./common/route_tool";
   import MapLoader from "./MapLoader.svelte";
   import NeighbourhoodMode from "./NeighbourhoodMode.svelte";
@@ -17,7 +15,7 @@
   $: mapStyle = showBasemap
     ? "https://api.maptiler.com/maps/dataviz/style.json?key=MZEJTanw3WpxRvt7qDfo"
     : {
-        version: 8,
+        version: 8 as const,
         sources: {},
         layers: [],
       };
@@ -27,11 +25,10 @@
 
   function zoomToFit() {
     // TODO wasteful
-    let bbox = turfBbox(JSON.parse($app.render()));
-    map.fitBounds(bbox, { animate: false });
+    map.fitBounds(bbox(JSON.parse($app!.render())), { animate: false });
   }
 
-  function gotApp(_x: LTN) {
+  function gotApp(_x: LTN | null) {
     if (!$app) {
       return;
     }
@@ -44,8 +41,8 @@
   }
   $: gotApp($app);
 
-  let sidebarDiv;
-  let mapDiv;
+  let sidebarDiv: HTMLDivElement;
+  let mapDiv: HTMLDivElement;
   $: if (sidebarDiv && $sidebarContents) {
     sidebarDiv.innerHTML = "";
     sidebarDiv.appendChild($sidebarContents);
diff --git a/web/src/ManageSavefiles.svelte b/web/src/ManageSavefiles.svelte
index 646d384..cf530a5 100644
--- a/web/src/ManageSavefiles.svelte
+++ b/web/src/ManageSavefiles.svelte
@@ -9,7 +9,7 @@
 
   // TODO Could split this stuff; it just cares about the example
   function saveGj() {
-    downloadGeneratedFile(filename, $app.toSavefile());
+    downloadGeneratedFile(filename, $app!.toSavefile());
   }
 
   let fileInput: HTMLInputElement;
@@ -25,7 +25,7 @@
   function loadEdits(gj: string) {
     msg = "Loading edits from file or local storage";
     // TODO If we're already in one of the states, nothing refreshes immediately...
-    if ($app.loadSavefile(JSON.parse(gj))) {
+    if ($app!.loadSavefile(JSON.parse(gj))) {
       $mode = { mode: "neighbourhood" };
     } else {
       $mode = { mode: "network" };
@@ -43,7 +43,7 @@
   }
 
   function saveLocalStorage() {
-    window.localStorage.setItem(filename, $app.toSavefile());
+    window.localStorage.setItem(filename, $app!.toSavefile());
   }
 </script>
 
diff --git a/web/src/MapLoader.svelte b/web/src/MapLoader.svelte
index 820862c..fa9c552 100644
--- a/web/src/MapLoader.svelte
+++ b/web/src/MapLoader.svelte
@@ -5,7 +5,7 @@
   import { onMount } from "svelte";
   import { Loading, OverpassSelector } from "./common";
   import ManageSavefiles from "./ManageSavefiles.svelte";
-  import { app, mode } from "./stores";
+  import { app } from "./stores";
 
   export let map: Map;
 
diff --git a/web/src/NeighbourhoodMode.svelte b/web/src/NeighbourhoodMode.svelte
index 906133c..bc14d29 100644
--- a/web/src/NeighbourhoodMode.svelte
+++ b/web/src/NeighbourhoodMode.svelte
@@ -1,6 +1,10 @@
 <script lang="ts">
-  import { LTN } from "backend";
-  import type { Feature, LineString, Polygon } from "geojson";
+  import type {
+    Feature,
+    FeatureCollection,
+    LineString,
+    Polygon,
+  } from "geojson";
   import type { Map, MapMouseEvent } from "maplibre-gl";
   import { onDestroy } from "svelte";
   import { Popup } from "svelte-maplibre";
@@ -21,39 +25,43 @@
   let redoLength = 0;
   let boundary: Feature<Polygon> | null;
 
-  let gjInput;
-  render($app.renderNeighbourhood());
+  let gjInput: FeatureCollection;
+  render($app!.renderNeighbourhood());
 
-  function render(gjString) {
+  function render(gjString: string) {
     gjInput = JSON.parse(gjString);
-    boundary = gjInput.features.find((f) => f.properties.kind == "boundary");
+    boundary = gjInput.features.find(
+      (f) => f.properties!.kind == "boundary"
+    )! as Feature<Polygon>;
 
+    // @ts-ignore These foreign members exist
     undoLength = gjInput.undo_length;
+    // @ts-ignore These foreign members exist
     redoLength = gjInput.redo_length;
   }
 
   $: if (addingFilter) {
     map.on("click", onClick);
-    map.style.cursor = "crosshair";
+    map.getCanvas().style.cursor = "crosshair";
   }
   onDestroy(() => {
     stopAddingFilter();
     // TODO Then we can't "nest" ViewShortcuts beneath this
-    //$app.unsetNeighbourhood();
+    //$app!.unsetNeighbourhood();
   });
   function onClick(e: MapMouseEvent) {
-    render($app.addModalFilter(e.lngLat));
+    render($app!.addModalFilter(e.lngLat));
     stopAddingFilter();
   }
   function stopAddingFilter() {
     addingFilter = false;
     map.off("click", onClick);
-    map.style.cursor = "inherit";
+    map.getCanvas().style.cursor = "inherit";
   }
 
   function deleteFilter(f: Feature) {
-    if (f.properties.kind == "modal_filter") {
-      render($app.deleteModalFilter(f.properties.road));
+    if (f.properties!.kind == "modal_filter") {
+      render($app!.deleteModalFilter(f.properties!.road));
     }
   }
 
@@ -69,10 +77,10 @@
     }
   }
   function undo() {
-    render($app.undo());
+    render($app!.undo());
   }
   function redo() {
-    render($app.redo());
+    render($app!.redo());
   }
 
   function reset() {
@@ -84,7 +92,7 @@
   function gotFreehandLine(e: CustomEvent<Feature<LineString> | null>) {
     let f = e.detail;
     if (f) {
-      render($app.addManyModalFilters(f));
+      render($app!.addManyModalFilters(f));
     }
 
     addingMultipleFilters = false;
diff --git a/web/src/RenderNeighbourhood.svelte b/web/src/RenderNeighbourhood.svelte
index cf61688..6f0779c 100644
--- a/web/src/RenderNeighbourhood.svelte
+++ b/web/src/RenderNeighbourhood.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+  import type { Feature, FeatureCollection } from "geojson";
   import {
     CircleLayer,
     FillLayer,
@@ -13,16 +14,16 @@
     isPolygon,
   } from "./common";
 
-  export let gjInput;
+  export let gjInput: FeatureCollection;
   export let showBasemap: boolean;
-  export let onClickLine = (f) => {};
-  export let onClickCircle = (f) => {};
+  export let onClickLine = (f: Feature) => {};
+  export let onClickCircle = (f: Feature) => {};
 
-  let gj;
-  let maxShortcuts;
+  let gj: FeatureCollection;
+  let maxShortcuts: number;
   $: render(gjInput, showBasemap);
 
-  function render(x, y) {
+  function render(x: FeatureCollection, y: boolean) {
     // A qualitative palette from colorbrewer2.org, skipping the red hue (used
     // for levels of shortcutting) and grey (too close to the basemap)
     let cell_colors = [
@@ -39,10 +40,11 @@
     ];
 
     maxShortcuts = Math.max(
-      ...gjInput.features.map((f) => f.properties.shortcuts ?? 0)
+      ...gjInput.features.map((f) => f.properties!.shortcuts ?? 0)
     );
 
     for (let f of gjInput.features) {
+      f.properties ??= {};
       if (f.properties.color == "disconnected") {
         f.properties.color = "red";
       } else if (Object.hasOwn(f.properties, "color")) {
diff --git a/web/src/SetBoundaryMode.svelte b/web/src/SetBoundaryMode.svelte
index 766efc4..8389adc 100644
--- a/web/src/SetBoundaryMode.svelte
+++ b/web/src/SetBoundaryMode.svelte
@@ -1,10 +1,11 @@
 <script lang="ts">
+  import type { Feature, Polygon } from "geojson";
   import { RouteTool } from "./common/route_tool";
   import RouteSnapperLayer from "./common/RouteSnapperLayer.svelte";
   import SplitComponent from "./SplitComponent.svelte";
   import { app, mode } from "./stores";
 
-  export let route_tool;
+  export let route_tool: RouteTool;
   export let existing: Feature<Polygon> | null;
 
   if (existing) {
@@ -14,7 +15,7 @@
   }
 
   route_tool.addEventListenerSuccess((feature) => {
-    $app.setNeighbourhood(feature);
+    $app!.setNeighbourhood(feature);
     $mode = {
       mode: "neighbourhood",
     };
diff --git a/web/src/ViewShortcutsMode.svelte b/web/src/ViewShortcutsMode.svelte
index 0fadd3e..8b5d2a1 100644
--- a/web/src/ViewShortcutsMode.svelte
+++ b/web/src/ViewShortcutsMode.svelte
@@ -1,11 +1,11 @@
 <script lang="ts">
-  import { LTN } from "backend";
+  import type { FeatureCollection } from "geojson";
   import type { Map } from "maplibre-gl";
   import { onDestroy, onMount } from "svelte";
   import { GeoJSON, LineLayer, Popup } from "svelte-maplibre";
   import RenderNeighbourhood from "./RenderNeighbourhood.svelte";
   import SplitComponent from "./SplitComponent.svelte";
-  import { app, mode } from "./stores";
+  import { app, mode, type Mode } from "./stores";
 
   export let prevMode: Mode;
   export let map: Map;
@@ -21,10 +21,10 @@
         gj: FeatureCollection;
         shortcutIndex: number | null;
       };
-  let state = { state: "neutral" };
+  let state: State = { state: "neutral" };
 
   function choseRoad(road: number) {
-    let gj = JSON.parse($app.getShortcutsCrossingRoad(road));
+    let gj = JSON.parse($app!.getShortcutsCrossingRoad(road));
     if (gj.features.length == 0) {
       window.alert("No shortcuts here");
       return;
@@ -47,7 +47,7 @@
 
   function onKeyDown(e: KeyboardEvent) {
     if (state.state == "chose-road") {
-      if (e.key == "ArrowLeft" && state.shortcutIndex != 0) {
+      if (e.key == "ArrowLeft" && state.shortcutIndex) {
         e.stopPropagation();
         state.shortcutIndex--;
       }
diff --git a/web/src/common/OverpassSelector.svelte b/web/src/common/OverpassSelector.svelte
index 3f811cb..a22386b 100644
--- a/web/src/common/OverpassSelector.svelte
+++ b/web/src/common/OverpassSelector.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+  // @ts-ignore No types
   import MapboxDraw from "@mapbox/mapbox-gl-draw";
   import type { Feature, Polygon } from "geojson";
   import type { IControl, LngLat, Map } from "maplibre-gl";
diff --git a/web/src/common/RouteSnapperLayer.svelte b/web/src/common/RouteSnapperLayer.svelte
index 7d264d7..8dc266c 100644
--- a/web/src/common/RouteSnapperLayer.svelte
+++ b/web/src/common/RouteSnapperLayer.svelte
@@ -1,5 +1,4 @@
 <script lang="ts">
-  import type { Feature } from "geojson";
   import { CircleLayer, FillLayer, GeoJSON, LineLayer } from "svelte-maplibre";
   import {
     constructMatchExpression,
diff --git a/web/src/common/index.ts b/web/src/common/index.ts
index 92111e4..f2fcb4b 100644
--- a/web/src/common/index.ts
+++ b/web/src/common/index.ts
@@ -1,3 +1,5 @@
+import turfBbox from "@turf/bbox";
+import type { GeoJSON } from "geojson";
 import type {
   DataDrivenPropertyValueSpecification,
   ExpressionSpecification,
@@ -68,3 +70,8 @@ export function downloadGeneratedFile(filename: string, textInput: string) {
   element.click();
   document.body.removeChild(element);
 }
+
+// Suitable for passing to map.fitBounds. Work around https://github.com/Turfjs/turf/issues/1807.
+export function bbox(gj: GeoJSON): [number, number, number, number] {
+  return turfBbox(gj) as [number, number, number, number];
+}
diff --git a/web/src/common/route_tool.ts b/web/src/common/route_tool.ts
index 18080d8..5f1c9b5 100644
--- a/web/src/common/route_tool.ts
+++ b/web/src/common/route_tool.ts
@@ -177,6 +177,9 @@ export class RouteTool {
   // the route was produced by a different tool, or an older version of this
   // tool), the edited line-string may differ from the input.
   editExistingRoute(feature: Feature<LineString>) {
+    // Pacify TS
+    feature.properties ??= {};
+
     if (this.active) {
       window.alert("Bug: editExistingRoute called when tool is already active");
     }
@@ -209,6 +212,9 @@ export class RouteTool {
 
   // This only handles features previously returned by this tool.
   editExistingArea(feature: Feature<Polygon>) {
+    // Pacify TS
+    feature.properties ??= {};
+
     if (this.active) {
       window.alert("Bug: editExistingArea called when tool is already active");
     }
diff --git a/web/src/stores.ts b/web/src/stores.ts
index f3050a5..52670e7 100644
--- a/web/src/stores.ts
+++ b/web/src/stores.ts
@@ -21,5 +21,5 @@ export type Mode =
 export let app: Writable<LTN | null> = writable(null);
 export let mode: Writable<Mode> = writable({ mode: "network" });
 
-export let sidebarContents = writable(null);
-export let mapContents = writable(null);
+export let sidebarContents: Writable<HTMLDivElement | null> = writable(null);
+export let mapContents: Writable<HTMLDivElement | null> = writable(null);