From d7626540cefc19b25668672224373c6b30a4a09b Mon Sep 17 00:00:00 2001
From: ecyht2 <ecyht2@nottingham.edu.my>
Date: Tue, 5 Mar 2024 22:19:22 +0800
Subject: [PATCH 1/2] feat: Added path interpolation

---
 src/index.html            |  33 ++-------
 src/js/map/add_point.js   |  21 ++----
 src/js/map/interpolate.js | 144 ++++++++++++++++++++++++++++++++++----
 3 files changed, 142 insertions(+), 56 deletions(-)

diff --git a/src/index.html b/src/index.html
index 3edc891..0e155fc 100644
--- a/src/index.html
+++ b/src/index.html
@@ -48,8 +48,7 @@
                         class="opacity-0 h-0 min-h-0 max-h-0 w-0 min-w-0 max-w-0 m-0" type="file"
                         accept=".geojson,.json,application/geo+json">
                 </label>
-                <button
-                    id="export-path"
+                <button id="export-path"
                     class="justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 hover:bg-primary/90 h-10 px-4 py-2 bg-blue-500 text-white flex items-center ml-5">
                     <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
                         stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
@@ -76,8 +75,7 @@
                         accept="text/csv,.csv">
                     Import Data
                 </label>
-                <button
-                    id="export-data"
+                <button id="export-data"
                     class="justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 hover:bg-primary/90 h-10 px-4 py-2 bg-blue-500 text-white flex items-center">
                     <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
                         stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
@@ -98,30 +96,11 @@
                 </select>
             </section>
             <section class="space-y-4">
-                <div class="flex items-center justify-between space-x-1">
-                    <span dir="ltr" data-orientation="horizontal" aria-disabled="false"
-                        class="relative flex touch-none select-none items-center w-3/4" id="price"
-                        style="--radix-slider-thumb-transform: translateX(-50%);">
-                        <span data-orientation="horizontal"
-                            class="relative h-2 w-full grow overflow-hidden rounded-full bg-gray-200">
-                            <span data-orientation="horizontal" class="absolute h-full bg-black"
-                                style="left: 0%; right: 50%;"></span>
-                        </span>
-                        <span
-                            style="transform: var(--radix-slider-thumb-transform); position: absolute; left: calc(50% + 0px);">
-                            <span role="slider" aria-valuemin="0" aria-valuemax="1000" aria-orientation="horizontal"
-                                data-orientation="horizontal" tabindex="0"
-                                class="block h-5 w-5 rounded-full border-2 border-primary bg-white ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50"
-                                data-radix-collection-item="" aria-valuenow="500"></span>
-                        </span>
-                    </span>
-                    <input min="0" max="1000" class="w-1/4 text-center border-2 border-gray-300 rounded-md"
-                        type="number" value="500" />
+                <div class="flex items-center justify-between space-x-4">
+                    <label>Interpolate Distance: </label>
+                    <input min="3" max="10" class="w-1/4 text-center border-2 border-gray-300 rounded-md flex-1" type="number"
+                        value="3" id="interpolate-number" />
                 </div>
-                <button
-                    class="inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 bg-black text-white hover:bg-primary/90 h-10 px-4 py-2 w-full">
-                    Interpolate Path
-                </button>
             </section>
             <section class="flex justify-end">
                 <button
diff --git a/src/js/map/add_point.js b/src/js/map/add_point.js
index f0f8604..2b5e946 100644
--- a/src/js/map/add_point.js
+++ b/src/js/map/add_point.js
@@ -3,9 +3,9 @@
 
 import { map, fit_bounds } from "../map";
 import { Marker } from "maplibre-gl";
-import { interpolate_points as interpolate } from "./interpolate";
 import * as logging from "tauri-plugin-log-api";
 import { invoke } from "@tauri-apps/api";
+import { recalculate_points } from "./interpolate";
 
 /** PathData Geometry Type
  * @typedef{{
@@ -100,7 +100,7 @@ export const markers = [];
 /** MaplibreJS source of the GEOJSON data.
  *
  * @type{import("maplibre-gl/dist/maplibre-gl.js").GeoJSONSource} */
-let source = undefined;
+export let source = undefined;
 
 map.once("load", async () => {
     await read_path();
@@ -155,7 +155,6 @@ function source_loaded() {
         // Adding data to geoJSON
         line_coords.push(location);
         point_coords.push(location);
-        source.setData(path_data);
 
         // Adding marker
         add_marker(location);
@@ -163,6 +162,9 @@ function source_loaded() {
 
         logging.debug(`New Path: ${path_data.toString()}`);
         save_path();
+
+        logging.info("Updating UI");
+        source.setData(path_data);
     });
 }
 
@@ -186,6 +188,7 @@ function marker_on_drag(event) {
 
     logging.debug(`Marker Moved to: ${new_coords.toString()}`);
 }
+
 /** Redraws the paths and collection points on the map. */
 export function redraw_path() {
     source.setData(path_data);
@@ -225,18 +228,6 @@ export function redraw_markers() {
     }
 }
 
-/** Recalculate all the collection points.
- *
- * This function will mutate the point_coords variable.
- * */
-function recalculate_points() {
-    const new_values = interpolate(line_coords, 5);
-    point_coords.length = new_values.length;
-    for (const i in new_values) {
-        point_coords[i] = new_values[i];
-    }
-}
-
 /** Addas a new marker to the map.
  *
  * @param {import("maplibre-gl/dist/maplibre-gl.js").LngLatLike} location The location of the new marker.
diff --git a/src/js/map/interpolate.js b/src/js/map/interpolate.js
index 16221ae..1fabaac 100644
--- a/src/js/map/interpolate.js
+++ b/src/js/map/interpolate.js
@@ -1,18 +1,43 @@
 /** Functions to interpolate points between two locations. */
+
+import * as maplibregl from "maplibre-gl";
+import * as logging from "tauri-plugin-log-api";
+import * as path_vars from "./add_point";
+
+export let current_distance = 3;
+
 /** Interates through elements pairwise.
  *
  * @see{https://stackoverflow.com/questions/31973278/iterate-an-array-as-a-pair-current-next-in-javascript}
  * */
 function* pairwise(iterable) {
-  const iterator = iterable[Symbol.iterator]();
-  let a = iterator.next();
-  if (a.done) return;
-  let b = iterator.next();
-  while (!b.done) {
-    yield [a.value, b.value];
-    a = b;
-    b = iterator.next();
-  }
+    const iterator = iterable[Symbol.iterator]();
+    let a = iterator.next();
+    if (a.done) return;
+    let b = iterator.next();
+    while (!b.done) {
+        yield [a.value, b.value];
+        a = b;
+        b = iterator.next();
+    }
+}
+
+/** Converts a number from degrees to radians.
+ *
+ * @param {Number} deg The angle in degrees.
+ * @returns{Number} The angle in radians.
+ */
+function deg_to_rad(deg) {
+    return deg * Math.PI / 180;
+}
+
+/** Converts a number from radians to degrees.
+ *
+ * @param {Number} rad The angle in radians.
+ * @returns{Number} The angle in degrees.
+ */
+function rad_to_deg(rad) {
+    return rad * 180 / Math.PI;
 }
 
 /** Fill in the points with fixed distance between them.
@@ -22,8 +47,70 @@ function* pairwise(iterable) {
  * @returns {Array<[number, number]>} An array with interpolated points.
  * */
 function interpolate(distance, points) {
-  // TODO: Add interpolation implementation
-  return [points[1]];
+    // Radius of Earth
+    logging.debug(`Interpolating points for: ${JSON.stringify(points)}`);
+    const points_mapped = points.map(maplibregl.LngLat.convert);
+    let from_point = points_mapped[0];
+
+    const lat1 = deg_to_rad(from_point.lat);
+    const lng1 = deg_to_rad(from_point.lng);
+
+    logging.info("Calculating Distance Between the Points");
+    const point_distance = points_mapped[0].distanceTo(points_mapped[1]);
+    logging.debug(`Point Distance: ${point_distance}`);
+
+    logging.info("Calculating Number of Points");
+    const count = Math.ceil(Math.floor(point_distance / distance) - 1, 0);
+    logging.debug(`Adding ${count} new points`);
+
+    const result = [];
+    result.length = count + 1;
+
+    for (const i of result.slice(0, count).keys()) {
+        logging.info(`Interpolating Point ${i}`);
+
+        // https://www.movable-type.co.uk/scripts/latlong.html
+        const lat2 = deg_to_rad(points_mapped[1].lat);
+        const lng2 = deg_to_rad(points_mapped[1].lng);
+
+        logging.info("Calculating Bearing");
+        const y = Math.sin(lng2 - lng1) * Math.cos(lat2);
+        const x = Math.cos(lat1) * Math.sin(lat2) -
+            Math.sin(lat1) * Math.cos(lat2) * Math.cos(lng2 - lng1);
+        const brng = Math.atan2(y, x);
+        logging.debug(`Bearing: ${brng}`);
+
+        result[i] = calculate_destination(from_point, brng, distance);
+        logging.debug(`Inerpolated Point ${i}: ${JSON.stringify(result[i])}`);
+        from_point = maplibregl.LngLat.convert(result[i]);
+    }
+    result[result.length - 1] = points[1];
+
+    logging.debug(`Interpolated Points: ${JSON.stringify(result)}`);
+    return result;
+}
+
+/** Calculate a destination point given distances and bearing from a starting point.
+ *
+ * @param {maplibregl.LngLatLike} from The starting point.
+ * @param {Number} brng The bearing from starting point to destination.
+ * @param {Number} distance The distance of the destination.
+ * @returns{maplibregl.LngLatLike} The destination point.
+ */
+function calculate_destination(from, brng, distance) {
+    const R = 6371e3;
+
+    const lat1 = deg_to_rad(from.lat);
+    const lng1 = deg_to_rad(from.lng);
+
+    // https://www.movable-type.co.uk/scripts/latlong.html
+    const new_lat = Math.asin(Math.sin(lat1) * Math.cos(distance / R) +
+        Math.cos(lat1) * Math.sin(distance / R) * Math.cos(brng));
+    let new_lng = lng1 + Math.atan2(Math.sin(brng) * Math.sin(distance / R) * Math.cos(lat1),
+        Math.cos(distance / R) - Math.sin(lat1) * Math.sin(new_lat));
+    new_lng = (new_lng + 3 * Math.PI) % (2 * Math.PI) - Math.PI;
+
+    return [new_lng, new_lat].map(rad_to_deg);
 }
 
 /** Fill in the points with fixed distance between them.
@@ -33,9 +120,38 @@ function interpolate(distance, points) {
  * @returns {Array<[number, number]>} An array with interpolated points.
  * */
 export function interpolate_points(points, distance) {
-  const array = Array.from(pairwise(points)).flatMap(interpolate.bind(null, distance));
-  array.unshift(points[0]);
-  return array;
+    logging.info("Interpolating Points");
+    const array = Array.from(pairwise(points)).flatMap(interpolate.bind(null, distance));
+    array.unshift(points[0]);
+    return array;
+}
+
+/** Input Number Element for Path Interpolation.
+ * @type{HTMLInputElement | null}
+ * */
+const number_input = document.getElementById("interpolate-number");
+
+if (number_input === null) {
+    logging.error("Unable to Find Interpolate Number Input");
+} else {
+    number_input.addEventListener("click", (event) => {
+        const value = event.target.value;
+        current_distance = value;
+        recalculate_points();
+        path_vars.source.setData(path_vars.path_data);
+    });
+}
+
+/** Recalculate all the collection points.
+ *
+ * This function will mutate the point_coords variable.
+ * */
+export function recalculate_points() {
+    const new_values = interpolate_points(path_vars.line_coords, current_distance);
+    path_vars.point_coords.length = new_values.length;
+    for (const i in new_values) {
+        path_vars.point_coords[i] = new_values[i];
+    }
 }
 
 export default interpolate_points;

From 1acf30f8113911958865c3b1974f9fa23bf0dfaa Mon Sep 17 00:00:00 2001
From: ecyht2 <ecyht2@nottingham.edu.my>
Date: Wed, 6 Mar 2024 22:04:56 +0800
Subject: [PATCH 2/2] feat: Added generate path button

---
 src/index.html            |  10 ++--
 src/js/main.js            |   1 +
 src/js/map/add_point.js   |  48 ++----------------
 src/js/map/interpolate.js | 101 ++++++++++++++++++++++++++++++++------
 4 files changed, 98 insertions(+), 62 deletions(-)

diff --git a/src/index.html b/src/index.html
index 0e155fc..91ff556 100644
--- a/src/index.html
+++ b/src/index.html
@@ -96,11 +96,15 @@
                 </select>
             </section>
             <section class="space-y-4">
-                <div class="flex items-center justify-between space-x-4">
-                    <label>Interpolate Distance: </label>
-                    <input min="3" max="10" class="w-1/4 text-center border-2 border-gray-300 rounded-md flex-1" type="number"
+                <div class="items-center justify-between space-x-4 flex">
+                    <input min="3" max="10" class="w-1/4 text-center border-2 border-gray-300 rounded-md flex-1"
+                        type="range" value="3" id="interpolate-range" />
+                    <input min="3" max="10" class="w-1/4 text-center border-2 border-gray-300 rounded-md" type="number"
                         value="3" id="interpolate-number" />
                 </div>
+                <button id="interpolate-button"
+                    class="whitespace-nowrap justify-center rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 hover:bg-primary/90 h-10 px-4 py-2 bg-black text-white flex items-center w-full">Generate
+                    Path</button>
             </section>
             <section class="flex justify-end">
                 <button
diff --git a/src/js/main.js b/src/js/main.js
index 4eef439..24fc4e9 100644
--- a/src/js/main.js
+++ b/src/js/main.js
@@ -3,4 +3,5 @@
 import "./map";
 import "./data";
 import "./map/add_point";
+import "./map/interpolate";
 import "./import_export";
diff --git a/src/js/map/add_point.js b/src/js/map/add_point.js
index 2b5e946..9c5e0a8 100644
--- a/src/js/map/add_point.js
+++ b/src/js/map/add_point.js
@@ -5,7 +5,6 @@ import { map, fit_bounds } from "../map";
 import { Marker } from "maplibre-gl";
 import * as logging from "tauri-plugin-log-api";
 import { invoke } from "@tauri-apps/api";
-import { recalculate_points } from "./interpolate";
 
 /** PathData Geometry Type
  * @typedef{{
@@ -147,53 +146,17 @@ function source_loaded() {
     // Adding new point
     map.on("click", (event) => {
         const location = event.lngLat.toArray();
-        logging.debug(`User Clicked: ${location.toString()}`);
+        logging.debug(`User Clicked: ${JSON.stringify(location)}`);
 
         const source = map.getSource("path");
-        logging.debug(`Source: ${source.toString()}`);
-
-        // Adding data to geoJSON
-        line_coords.push(location);
-        point_coords.push(location);
+        logging.debug(`Source: ${source.id}`);
 
         // Adding marker
+        logging.info("Adding new marker");
         add_marker(location);
-        recalculate_points();
-
-        logging.debug(`New Path: ${path_data.toString()}`);
-        save_path();
-
-        logging.info("Updating UI");
-        source.setData(path_data);
     });
 }
 
-/** Callback function when a marker is dragged.
- *
- * @param {import("maplibre-gl").MapLibreEvent} event The drag event emitted by the Marker.
- * */
-function marker_on_drag(event) {
-    /** @type{Marker} */
-    const marker = event.target;
-    // We should get a valid index here
-    const marker_index = markers.indexOf(marker);
-
-    logging.debug(`Marker Moved: ${marker}`);
-    logging.debug(`Marker Index: ${marker_index.toString()}`);
-
-    const new_coords = marker.getLngLat().toArray();
-    line_coords[marker_index] = new_coords;
-    recalculate_points();
-    source.setData(path_data);
-
-    logging.debug(`Marker Moved to: ${new_coords.toString()}`);
-}
-
-/** Redraws the paths and collection points on the map. */
-export function redraw_path() {
-    source.setData(path_data);
-}
-
 /** Redraws all the markers on the map.
  *
  * This function will mutate the markers variable.
@@ -222,9 +185,6 @@ export function redraw_markers() {
         })
             .setLngLat(location)
             .addTo(map);
-
-        markers[i].on("drag", marker_on_drag);
-        markers[i].on("dragend", () => save_path());
     }
 }
 
@@ -243,8 +203,6 @@ function add_marker(location) {
         .setLngLat(location)
         .addTo(map);
 
-    marker.on("drag", marker_on_drag);
-    marker.on("dragend", () => save_path());
     markers.push(marker);
 }
 
diff --git a/src/js/map/interpolate.js b/src/js/map/interpolate.js
index 1fabaac..bbb28da 100644
--- a/src/js/map/interpolate.js
+++ b/src/js/map/interpolate.js
@@ -4,6 +4,7 @@ import * as maplibregl from "maplibre-gl";
 import * as logging from "tauri-plugin-log-api";
 import * as path_vars from "./add_point";
 
+/** Current Distance for Path Interpolation. */
 export let current_distance = 3;
 
 /** Interates through elements pairwise.
@@ -120,38 +121,110 @@ function calculate_destination(from, brng, distance) {
  * @returns {Array<[number, number]>} An array with interpolated points.
  * */
 export function interpolate_points(points, distance) {
-    logging.info("Interpolating Points");
     const array = Array.from(pairwise(points)).flatMap(interpolate.bind(null, distance));
+    logging.info("Adding Back Initial Point");
     array.unshift(points[0]);
     return array;
 }
 
+/** Find the coordinate that is nearest to a target coordinate.
+ *
+ * @param {maplibregl.LngLat} target_point The reference point to measure the distance from .
+ * @param {Array<maplibregl.LngLat>} points The array of coordinates to compare to.
+ * @returns{Number} The index of the nearest coordinates.
+ */
+function find_closest(target_point, points) {
+    logging.info("Calculating Distances");
+    const distances = points.map((v) => target_point.distanceTo(v));
+
+    logging.info("Finding Index of Closet Point");
+    return distances.indexOf(Math.min(...distances));
+}
+
+/** Generates a path from an array of coordinates.
+ *
+ * The first coordinates in an array is used as the starting point.
+ *
+ * @param {Array<maplibregl.LngLat>} points The array of coordinates.
+ * @returns{Array<maplibregl.LngLat>} The generated path.
+ */
+function generate_path(points) {
+    if (points.length === 1) {
+        logging.info("Early Returning Last Point");
+        return points;
+    }
+
+    logging.info("Finding Closet Point");
+    // Adding one as we started from the second element
+    const closet_index = find_closest(points[0], points.slice(1)) + 1;
+
+    logging.info("Swapping Points");
+    const closest = points[closet_index];
+    points[closet_index] = points[1];
+    points[1] = closest;
+
+    logging.info("Recursing for all Points");
+    return [points[0]].concat(generate_path(points.slice(1)));
+}
+
 /** Input Number Element for Path Interpolation.
  * @type{HTMLInputElement | null}
  * */
 const number_input = document.getElementById("interpolate-number");
 
+/** Input Range Element for Path Interpolation.
+ * @type{HTMLInputElement | null}
+ * */
+const range_input = document.getElementById("interpolate-range");
+
 if (number_input === null) {
     logging.error("Unable to Find Interpolate Number Input");
 } else {
-    number_input.addEventListener("click", (event) => {
+    number_input.addEventListener("input", (event) => {
         const value = event.target.value;
         current_distance = value;
-        recalculate_points();
-        path_vars.source.setData(path_vars.path_data);
+        range_input.value = value;
     });
 }
 
-/** Recalculate all the collection points.
- *
- * This function will mutate the point_coords variable.
+if (range_input === null) {
+    logging.error("Unable to Find Interpolate Range Input");
+} else {
+    range_input.addEventListener("input", (event) => {
+        const value = event.target.value;
+        current_distance = value;
+        number_input.value = value;
+    });
+}
+
+/** Button Element to Generate Path.
+ * @type{HTMLButtonElement | null}
  * */
-export function recalculate_points() {
-    const new_values = interpolate_points(path_vars.line_coords, current_distance);
-    path_vars.point_coords.length = new_values.length;
-    for (const i in new_values) {
-        path_vars.point_coords[i] = new_values[i];
-    }
+const generate_button = document.getElementById("interpolate-button");
+
+if (generate_button === null) {
+    logging.error("Unable to Find Generate Path Button");
+} else {
+    generate_button.addEventListener("click", () => {
+        logging.info("Generating Path");
+        const points = path_vars.markers.map((v) => v.getLngLat());
+        const new_path = generate_path(points).map((v) => v.toArray());
+        logging.debug(`Generated Path: ${JSON.stringify(new_path)}`);
+        path_vars.line_coords.splice(0, path_vars.line_coords.length, ...new_path);
+
+        logging.info("Interpolating Points");
+        const new_values = interpolate_points(path_vars.line_coords, current_distance);
+        path_vars.point_coords.length = new_values.length;
+        for (const i in new_values) {
+            path_vars.point_coords[i] = new_values[i];
+        }
+
+        logging.info("Updating UI");
+        path_vars.source.setData(path_vars.path_data);
+
+        logging.info("Saving Path");
+        path_vars.save_path();
+    });
 }
 
-export default interpolate_points;
+export default { interpolate_points, generate_path };