From c6b38e83b1399e9c765e438a9ab539e7e0d775fb Mon Sep 17 00:00:00 2001
From: Dustin Carlino <dabreegster@gmail.com>
Date: Sat, 20 Apr 2024 19:18:00 +0100
Subject: [PATCH] Since #46 may not be possible, try visualizing shortcuts a
 different way

---
 backend/src/lib.rs                    | 12 ++++
 web/package-lock.json                 | 30 ++++++++++
 web/package.json                      |  2 +
 web/src/AnimatePaths.svelte           | 80 +++++++++++++++++++++++++++
 web/src/common/zorder.ts              |  2 +
 web/src/edit/NeighbourhoodMode.svelte |  5 ++
 6 files changed, 131 insertions(+)
 create mode 100644 web/src/AnimatePaths.svelte

diff --git a/backend/src/lib.rs b/backend/src/lib.rs
index a0118b6..eb79250 100644
--- a/backend/src/lib.rs
+++ b/backend/src/lib.rs
@@ -218,6 +218,18 @@ impl LTN {
         .map_err(err_to_js)?)
     }
 
+    #[wasm_bindgen(js_name = getAllShortcuts)]
+    pub fn get_all_shortcuts(&self) -> Result<String, JsValue> {
+        Ok(serde_json::to_string(&GeoJson::from(
+            Shortcuts::new(&self.map, self.neighbourhood.as_ref().unwrap())
+                .paths
+                .into_iter()
+                .map(|path| path.to_gj(&self.map))
+                .collect::<Vec<_>>(),
+        ))
+        .map_err(err_to_js)?)
+    }
+
     /// GJ with modal filters and named boundaries. This is meant for savefiles, so existing
     /// filters aren't included (and deletions of existing are included)
     #[wasm_bindgen(js_name = toSavefile)]
diff --git a/web/package-lock.json b/web/package-lock.json
index 9c06832..0fd0c99 100644
--- a/web/package-lock.json
+++ b/web/package-lock.json
@@ -10,6 +10,8 @@
       "dependencies": {
         "@maptiler/geocoding-control": "^1.2.2",
         "@picocss/pico": "^2.0.3",
+        "@turf/along": "^6.5.0",
+        "@turf/length": "^6.5.0",
         "maplibre-draw-polygon": "github:dabreegster/maplibre-draw-polygon",
         "route-snapper": "^0.4.0",
         "svelte-maplibre": "^0.8.3"
@@ -956,6 +958,21 @@
       "integrity": "sha512-BRbo1fOtyVbhfLyuCWw6wAWp+U8UQle+ZXu84MYYWzYSEB28dyfnRBIE99eoG+qdAC0po6L2ScIEivcT07UaMA==",
       "dev": true
     },
+    "node_modules/@turf/along": {
+      "version": "6.5.0",
+      "resolved": "https://registry.npmjs.org/@turf/along/-/along-6.5.0.tgz",
+      "integrity": "sha512-LLyWQ0AARqJCmMcIEAXF4GEu8usmd4Kbz3qk1Oy5HoRNpZX47+i5exQtmIWKdqJ1MMhW26fCTXgpsEs5zgJ5gw==",
+      "dependencies": {
+        "@turf/bearing": "^6.5.0",
+        "@turf/destination": "^6.5.0",
+        "@turf/distance": "^6.5.0",
+        "@turf/helpers": "^6.5.0",
+        "@turf/invariant": "^6.5.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/turf"
+      }
+    },
     "node_modules/@turf/bbox": {
       "version": "6.5.0",
       "resolved": "https://registry.npmjs.org/@turf/bbox/-/bbox-6.5.0.tgz",
@@ -1023,6 +1040,19 @@
         "url": "https://opencollective.com/turf"
       }
     },
+    "node_modules/@turf/length": {
+      "version": "6.5.0",
+      "resolved": "https://registry.npmjs.org/@turf/length/-/length-6.5.0.tgz",
+      "integrity": "sha512-5pL5/pnw52fck3oRsHDcSGrj9HibvtlrZ0QNy2OcW8qBFDNgZ4jtl6U7eATVoyWPKBHszW3dWETW+iLV7UARig==",
+      "dependencies": {
+        "@turf/distance": "^6.5.0",
+        "@turf/helpers": "^6.5.0",
+        "@turf/meta": "^6.5.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/turf"
+      }
+    },
     "node_modules/@turf/line-intersect": {
       "version": "6.5.0",
       "resolved": "https://registry.npmjs.org/@turf/line-intersect/-/line-intersect-6.5.0.tgz",
diff --git a/web/package.json b/web/package.json
index bf060e9..01417ed 100644
--- a/web/package.json
+++ b/web/package.json
@@ -30,6 +30,8 @@
   "dependencies": {
     "@maptiler/geocoding-control": "^1.2.2",
     "@picocss/pico": "^2.0.3",
+    "@turf/along": "^6.5.0",
+    "@turf/length": "^6.5.0",
     "maplibre-draw-polygon": "github:dabreegster/maplibre-draw-polygon",
     "route-snapper": "^0.4.0",
     "svelte-maplibre": "^0.8.3"
diff --git a/web/src/AnimatePaths.svelte b/web/src/AnimatePaths.svelte
new file mode 100644
index 0000000..25d486b
--- /dev/null
+++ b/web/src/AnimatePaths.svelte
@@ -0,0 +1,80 @@
+<script lang="ts">
+  import turfLength from "@turf/length";
+  import along from "@turf/along";
+  import { layerId } from "./common";
+  import type { FeatureCollection, LineString } from "geojson";
+  import { GeoJSON, CircleLayer } from "svelte-maplibre";
+  import { onDestroy } from "svelte";
+
+  export let paths: FeatureCollection<LineString>;
+
+  // TODO Decrease based on number of paths with high directness
+  let numDots = 50;
+  let redrawMs = 100;
+  let stepKm = 0.01;
+
+  interface Dot {
+    idx: number;
+    length: number;
+    distance: number;
+  }
+
+  let dots = makeDots();
+  let gj = redraw();
+
+  $: if (paths) {
+    dots = makeDots();
+  }
+
+  let intervalId = setInterval(animate, redrawMs);
+  onDestroy(() => clearInterval(intervalId));
+
+  function makeDots(): Dot[] {
+    if (paths.features.length == 0) {
+      return [];
+    }
+    return Array.from({ length: numDots }, startDot);
+  }
+
+  function startDot(): Dot {
+    let idx = Math.floor(Math.random() * paths.features.length);
+    return {
+      idx,
+      length: turfLength(paths.features[idx], { units: "kilometers" }),
+      distance: 0,
+    };
+  }
+
+  function redraw(): FeatureCollection {
+    return {
+      type: "FeatureCollection",
+      features: dots.map(({ idx, distance }) =>
+        along(paths.features[idx], distance, {
+          units: "kilometers",
+        }),
+      ),
+    };
+  }
+
+  function animate() {
+    for (let [idx, dot] of dots.entries()) {
+      dot.distance += stepKm;
+      if (dot.distance >= dot.length) {
+        dots[idx] = startDot();
+      }
+    }
+    gj = redraw();
+  }
+</script>
+
+<GeoJSON data={gj}>
+  <CircleLayer
+    {...layerId("animate-shortcuts")}
+    paint={{
+      "circle-radius": 10,
+      "circle-color": "purple",
+      "circle-stroke-color": "black",
+      "circle-stroke-width": 1,
+    }}
+  />
+</GeoJSON>
diff --git a/web/src/common/zorder.ts b/web/src/common/zorder.ts
index 09fc867..91100b4 100644
--- a/web/src/common/zorder.ts
+++ b/web/src/common/zorder.ts
@@ -91,6 +91,8 @@ const layerZorder = [
   // MapTiler basemap
   "Road labels",
 
+  "animate-shortcuts",
+
   "modal-filters",
 
   "boundary",
diff --git a/web/src/edit/NeighbourhoodMode.svelte b/web/src/edit/NeighbourhoodMode.svelte
index 926556e..be16cc0 100644
--- a/web/src/edit/NeighbourhoodMode.svelte
+++ b/web/src/edit/NeighbourhoodMode.svelte
@@ -18,6 +18,7 @@
   import ChangeModalFilter from "./ChangeModalFilter.svelte";
   import FreehandLine from "./FreehandLine.svelte";
   import ModalFilterLayer from "../ModalFilterLayer.svelte";
+  import AnimatePaths from "../AnimatePaths.svelte";
 
   // Caller is responsible for doing app.setCurrentNeighbourhood
 
@@ -36,6 +37,7 @@
   let boundary: Feature<Polygon, { name: string }> | null;
 
   let gjInput: RenderNeighbourhoodOutput;
+  let allShortcuts = JSON.parse($app!.getAllShortcuts());
   $: rerender($mutationCounter);
 
   $: numDisconnectedCells = gjInput.features.filter(
@@ -55,6 +57,8 @@
     undoLength = gjInput.undo_length;
     redoLength = gjInput.redo_length;
 
+    allShortcuts = JSON.parse($app!.getAllShortcuts());
+
     autosave();
   }
 
@@ -271,6 +275,7 @@
         </Popup>
       </div>
     </RenderNeighbourhood>
+    <AnimatePaths paths={allShortcuts} />
     <ModalFilterLayer on:click={deleteFilter}>
       <Popup openOn="hover">Click to delete</Popup>
     </ModalFilterLayer>