Use more refactored helpers

web/package.json

@@ -30,7 +30,6 @@
     "vite-plugin-wasm-pack": "^0.1.12"
   },
   "dependencies": {
-    "@turf/bbox": "^6.5.0",
     "maplibre-draw-polygon": "github:dabreegster/maplibre-draw-polygon",
     "maplibre-gl": "^4.1.0",
     "svelte-maplibre": "^0.8.3",

web/src/common/LayerControls.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
   import type { GeoJSON } from "geojson";
-  import { downloadGeneratedFile } from "./utils";
+  import { downloadGeneratedFile } from "svelte-utils";
 
   export let gj: GeoJSON;
   export let name: string;

web/src/common/import/ImportControls.svelte

@@ -10,9 +10,8 @@
     network as networkStore,
     importCounter,
   } from "../store";
-  import { bbox, downloadGeneratedFile } from "../utils";
   import Osm2streetsSettings from "./Osm2streetsSettings.svelte";
-  import { Loading } from "svelte-utils";
+  import { bbox, downloadGeneratedFile, Loading } from "svelte-utils";
 
   // This component manages a state machine for importing OSM data (from
   // Overpass or built-in files) and letting the user change import settings. It

web/src/common/layers/DebugIDs.svelte

@@ -1,7 +1,8 @@
 <script lang="ts">
   import LayerControls from "../LayerControls.svelte";
   import { network } from "../store";
-  import { layerId, emptyGeojson } from "../utils";
+  import { layerId } from "../utils";
+  import { emptyGeojson } from "svelte-utils";
   import { SymbolLayer, GeoJSON } from "svelte-maplibre";
 
   let show = false;

web/src/common/layers/DynamicConnectedRoads.svelte

@@ -1,7 +1,8 @@
 <script lang="ts">
   import LayerControls from "../LayerControls.svelte";
   import { hoveredIntersection, network } from "../store";
-  import { layerId, emptyGeojson } from "../utils";
+  import { layerId } from "../utils";
+  import { emptyGeojson } from "svelte-utils";
   import { FillLayer, GeoJSON } from "svelte-maplibre";
 
   let show = false;

web/src/common/layers/DynamicMovementArrows.svelte

@@ -1,7 +1,8 @@
 <script lang="ts">
   import LayerControls from "../LayerControls.svelte";
   import { hoveredLane, network } from "../store";
-  import { layerId, emptyGeojson } from "../utils";
+  import { layerId } from "../utils";
+  import { emptyGeojson } from "svelte-utils";
   import { FillLayer, GeoJSON } from "svelte-maplibre";
 
   let show = true;

web/src/common/layers/RenderBoundary.svelte

@@ -1,7 +1,8 @@
 <script lang="ts">
   import LayerControls from "../LayerControls.svelte";
   import { boundaryGj, map } from "../store";
-  import { layerId, bbox, emptyGeojson } from "../utils";
+  import { layerId } from "../utils";
+  import { bbox, emptyGeojson } from "svelte-utils";
   import { LineLayer, GeoJSON } from "svelte-maplibre";
 
   let show = true;

web/src/common/layers/RenderIntersectionMarkings.svelte

@@ -1,7 +1,8 @@
 <script lang="ts">
   import LayerControls from "../LayerControls.svelte";
   import { network } from "../store";
-  import { layerId, emptyGeojson, caseHelper } from "../utils";
+  import { layerId, caseHelper } from "../utils";
+  import { emptyGeojson } from "svelte-utils";
   import { FillLayer, GeoJSON } from "svelte-maplibre";
 
   let show = true;

web/src/common/layers/RenderIntersectionPolygons.svelte

@@ -1,7 +1,8 @@
 <script lang="ts">
   import LayerControls from "../LayerControls.svelte";
   import { theme, hoveredIntersection, network } from "../store";
-  import { caseHelper, layerId, emptyGeojson } from "../utils";
+  import { caseHelper, layerId } from "../utils";
+  import { emptyGeojson } from "svelte-utils";
   import { hoverStateFilter, FillLayer, GeoJSON } from "svelte-maplibre";
 
   export let hoverCursor: string | undefined = undefined;

web/src/common/layers/RenderLaneMarkings.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
-  import { layerId, emptyGeojson, caseHelper } from "../utils";
+  import { layerId, caseHelper } from "../utils";
+  import { emptyGeojson } from "svelte-utils";
   import { FillLayer, GeoJSON } from "svelte-maplibre";
   import LayerControls from "../LayerControls.svelte";
   import { network } from "../store";

web/src/common/layers/RenderLanePolygons.svelte

@@ -1,7 +1,8 @@
 <script lang="ts">
   import LayerControls from "../LayerControls.svelte";
   import { hoveredLane, network } from "../store";
-  import { layerId, emptyGeojson, caseHelper } from "../utils";
+  import { layerId, caseHelper } from "../utils";
+  import { emptyGeojson } from "svelte-utils";
   import { hoverStateFilter, FillLayer, GeoJSON } from "svelte-maplibre";
 
   export let hoverCursor: string | undefined = undefined;

web/src/common/utils.ts

@@ -1,22 +1,8 @@
-import turfBbox from "@turf/bbox";
-import type { Feature, FeatureCollection, GeoJSON, Geometry } from "geojson";
+import type { Feature, Geometry } from "geojson";
 import { get } from "svelte/store";
 import type { ExpressionSpecification } from "maplibre-gl";
 import { map as mapStore } from "./store";
 
-// TODO Why can't I find an NPM package to do this?
-export function downloadGeneratedFile(filename: string, textInput: string) {
-  var element = document.createElement("a");
-  element.setAttribute(
-    "href",
-    "data:text/plain;charset=utf-8," + encodeURIComponent(textInput),
-  );
-  element.setAttribute("download", filename);
-  document.body.appendChild(element);
-  element.click();
-  document.body.removeChild(element);
-}
-
 // Helper for https://maplibre.org/maplibre-style-spec/expressions#case based on one property
 export function caseHelper(
   getKey: string,
@@ -45,18 +31,6 @@ export function featureStateToggle(
   ];
 }
 
-export function emptyGeojson(): FeatureCollection {
-  return {
-    type: "FeatureCollection",
-    features: [],
-  };
-}
-
-// 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];
-}
-
 // Properties are guaranteed to exist
 export type FeatureWithProps<G extends Geometry> = Feature<G> & {
   properties: { [name: string]: any };

web/src/lane-editor/AllEdits.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
   import { network, importCounter } from "../common";
-  import { downloadGeneratedFile } from "../common/utils";
+  import { downloadGeneratedFile } from "svelte-utils";
 
   let editedWays: Set<bigint> = new Set();
 

web/src/lane-editor/App.svelte

@@ -1,7 +1,8 @@
 <script lang="ts">
   import { map } from "../common/store";
   import { GeoJSON, FillLayer, type LayerClickInfo } from "svelte-maplibre";
-  import { emptyGeojson, layerId } from "../common/utils";
+  import { layerId } from "../common/utils";
+  import { emptyGeojson } from "svelte-utils";
   import { network, StreetView } from "../common";
   import init from "osm2streets-js";
   import { onMount } from "svelte";

web/src/street-explorer/RenderBlock.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { caseHelper, layerId, emptyGeojson } from "../common/utils";
+  import { caseHelper, layerId } from "../common/utils";
   import {
     hoverStateFilter,
     Popup,
@@ -9,7 +9,7 @@
   } from "svelte-maplibre";
   import { showingBundles, blockGj } from "./stores";
   import { network } from "../common";
-  import { Legend } from "svelte-utils";
+  import { emptyGeojson, Legend } from "svelte-utils";
 
   $: active = $blockGj.features.length > 0;
 

web/src/street-explorer/stores.ts

@@ -1,6 +1,6 @@
 import type { FeatureCollection } from "geojson";
 import { writable, type Writable } from "svelte/store";
-import { emptyGeojson } from "../common/utils";
+import { emptyGeojson } from "svelte-utils";
 import { network } from "../common";
 
 export const blockGj: Writable<FeatureCollection> = writable(emptyGeojson());