UX: tweaks to distance input: make button lose primary status when a first point is selected, use projected centerpoint instead of centerpoint

langs/en.json

@@ -674,6 +674,7 @@
     },
     "input_helpers": {
         "distance": {
+            "measureAgain": "Start new measurement from current location",
             "setFirst": "Measure from current location"
         }
     },

src/UI/InputElement/Helpers/DistanceInput.svelte

@@ -7,7 +7,7 @@
   import { UIEventSource, Store } from "../../../Logic/UIEventSource"
   import type { MapProperties } from "../../../Models/MapProperties"
   import ThemeViewState from "../../../Models/ThemeViewState"
-  import type { Feature } from "geojson"
+  import type { Feature, LineString } from "geojson"
   import type { RasterLayerPolygon } from "../../../Models/RasterLayers"
   import { RasterLayerUtils } from "../../../Models/RasterLayers"
   import { eliCategory } from "../../../Models/RasterLayerProperties"
@@ -22,13 +22,16 @@
   import Tr from "../../Base/Tr.svelte"
   import { onDestroy } from "svelte"
 
-  export let value: UIEventSource<number>
+  export let value: UIEventSource<string>
   export let feature: Feature
   export let args: { background?: string; zoom?: number }
   export let state: ThemeViewState = undefined
   export let map: UIEventSource<MlMap> = new UIEventSource<MlMap>(undefined)
 
   let center = GeoOperations.centerpointCoordinates(feature)
+  if (feature.geometry.type === "LineString") {
+    center = <[number, number]>GeoOperations.nearestPoint(<Feature<LineString>>feature, center).geometry.coordinates
+  }
   export let initialCoordinate: { lon: number; lat: number } = { lon: center[0], lat: center[1] }
   let mapLocation: UIEventSource<{ lon: number; lat: number }> = new UIEventSource(
     initialCoordinate
@@ -66,7 +69,7 @@
       // A bit of a double task: calculate the actual value _and_ the map rendering
       const end = mapLocation.data
       const distance = GeoOperations.distanceBetween([start.lon, start.lat], [end.lon, end.lat])
-      value.set(distance.toFixed(2))
+      value.set(distance.toFixed(1))
 
       return <Feature[]>[
         {
@@ -93,6 +96,7 @@
     layer: new LayerConfig(conflation),
     features: new StaticFeatureSource(lengthFeature),
   })
+  const t = Translations.t.input_helpers.distance
 </script>
 
 <div class="relative h-64 w-full">
@@ -102,6 +106,6 @@
   </div>
 </div>
 
-<button class="primary" on:click={() => selectStart()}>
-  <Tr t={Translations.t.input_helpers.distance.setFirst} />
+<button class:primary={$start === undefined} on:click={() => selectStart()}>
+  <Tr t={$start === undefined ? t.setFirst : t.measureAgain} />
 </button>