feat: Drop start and end points exactly where the cursor is (#2496)

This also removes the closestPosition function, since we also removed its only invocation.

assets/src/components/detours/detourMap.tsx

@@ -5,7 +5,6 @@ import Leaflet from "leaflet"
 import Map from "../map"
 import { CustomControl } from "../map/controls/customControl"
 import { ReactMarker } from "../map/utilities/reactMarker"
-import { closestPosition } from "../../util/math"
 import { ShapePoint, Stop } from "../../schedule"
 import {
   latLngLiteralToShapePoint,
@@ -215,13 +214,7 @@ export const DetourMap = ({
                 : ["c-detour_map--original-route-shape__unfinished"]
             }
             onClick={(e) => {
-              const { position } =
-                closestPosition(
-                  originalShape.map(shapePointToLatLngLiteral),
-                  e.latlng
-                ) ?? {}
-              position &&
-                onClickOriginalShape(latLngLiteralToShapePoint(position))
+              onClickOriginalShape(latLngLiteralToShapePoint(e.latlng))
             }}
           >
             {!startPoint && <MapTooltip>Click to start detour</MapTooltip>}

assets/src/util/math.ts

@@ -1,5 +1,3 @@
-import { LatLng, LatLngLiteral } from "leaflet"
-
 /**
  * A helper function to help clarify code when clamping a value between a range.
  * (Remove when tc39 implements `Math.clamp`)
@@ -9,46 +7,3 @@ import { LatLng, LatLngLiteral } from "leaflet"
  */
 export const clamp = (value: number, min: number, max: number): number =>
   Math.min(Math.max(min, value), max)
-
-interface ClosestPosition {
-  position: LatLngLiteral
-  index: number
-  distance: number
-}
-
-/**
- * Finds the element in {@link positions} that is closest to {@link point}
- * @param positions List of coordinates to search
- * @param point Point of reference to check distance to
- * @returns
- * if {@link positions} is empty, returns `undefined`
- *
- * Otherwise, returns a {@link ClosestPosition} object containing
- * - {@link ClosestPosition.position}: the closest element in {@link positions} to {@link point}
- * - {@link ClosestPosition.index}: the index of the element in {@link positions}
- * - {@link ClosestPosition.distance}: the distance to {@link point}
- */
-export const closestPosition = (
-  positions: LatLngLiteral[],
-  point: LatLng
-): ClosestPosition | undefined => {
-  const positionsByDistance = positions
-    .map((currentPosition, index) => ({
-      distance: point.distanceTo(currentPosition),
-      position: currentPosition,
-      index,
-    }))
-    .sort((lhs, rhs) => lhs.distance - rhs.distance)
-
-  return positionsByDistance[0] ?? undefined
-
-  /**
-   * In the future, we may want to be able to snap to the line _line_ formed
-   * by {@link positions}.
-   * (in the case of, e.g., a low resolution line formed by {@link positions}).
-   *
-   * Now that we have the sorted {@link positionsByDistance}, we can interpolate
-   * the two closest points with respect to {@link point} to find the closest
-   * point on the line.
-   */
-}

assets/tests/components/detours/detourMap.test.tsx

@@ -47,19 +47,15 @@ const DetourMapWithDefaults = (
 describe("DetourMap", () => {
   test("when `originalShape` is clicked, fires `onClickOriginalShape`", async () => {
     const onClickOriginalShape = jest.fn()
-    const shapePoint = { lat: 0, lon: 0 }
     const { container } = render(
-      <DetourMapWithDefaults
-        originalShape={[shapePoint]}
-        onClickOriginalShape={onClickOriginalShape}
-      />
+      <DetourMapWithDefaults onClickOriginalShape={onClickOriginalShape} />
     )
 
     fireEvent.click(
       container.querySelector(".c-detour_map--original-route-shape")!
     )
 
-    expect(onClickOriginalShape).toHaveBeenNthCalledWith(1, shapePoint)
+    expect(onClickOriginalShape).toHaveBeenCalled()
   })
 
   test("`originalShape` has unstarted class before being clicked", async () => {

assets/tests/util/math.test.ts

@@ -1,6 +1,5 @@
 import { describe, test, expect } from "@jest/globals"
-import { clamp, closestPosition } from "../../src/util/math"
-import { LatLngLiteral, latLng } from "leaflet"
+import { clamp } from "../../src/util/math"
 
 describe("clamp", () => {
   test("when value is below minimum, returns minimum value", () => {
@@ -15,32 +14,3 @@ describe("clamp", () => {
     expect(clamp(5, 0, 10)).toBe(5)
   })
 })
-
-describe("closestPosition", () => {
-  test("returns `undefined` if provided a empty list", () => {
-    expect(closestPosition([], latLng(0, 0))).toBeUndefined()
-  })
-
-  test("returns the closest point from the provided list", () => {
-    const point = latLng(0, 0)
-
-    const closestPoint: LatLngLiteral = {
-      lat: point.lat + 1,
-      lng: 0,
-    }
-    const index = 3
-
-    // Generate range and offset so all are farther than `closestPoint`
-    const positions: LatLngLiteral[] = Array(5).map((_, idx) => ({
-      lat: point.lat + closestPoint.lat + idx,
-      lng: 0,
-    }))
-
-    positions[index] = closestPoint
-
-    expect(closestPosition(positions, point)).toMatchObject({
-      index,
-      position: closestPoint,
-    })
-  })
-})