Since #46 may not be possible, try visualizing shortcuts a different way

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)]

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"

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>

web/src/common/zorder.ts

@@ -91,6 +91,8 @@ const layerZorder = [
  // MapTiler basemap
  "Road labels",
 
+ "animate-shortcuts",
+
  "modal-filters",
 
  "boundary",

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>