Skip to content

Commit

Permalink
Merge pull request #19 from Babara-Fanclub/interpolate-path
Browse files Browse the repository at this point in the history 
Interpolate Path
  • Loading branch information
@ecyht2
ecyht2 authored Mar 12, 2024
2 parents 431da8f + 1acf30f commit 1734b6f
Show file tree
Hide file tree
Showing 4 changed files with 219 additions and 97 deletions.
37 changes: 10 additions & 27 deletions src/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand All @@ -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"
Expand All @@ -98,30 +96,15 @@
</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="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
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>
<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
Expand Down
1 change: 1 addition & 0 deletions src/js/main.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,4 +3,5 @@
import "./map";
import "./data";
import "./map/add_point";
import "./map/interpolate";
import "./import_export";
59 changes: 4 additions & 55 deletions src/js/map/add_point.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,6 @@

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";

Expand Down Expand Up @@ -100,7 +99,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();
Expand Down Expand Up @@ -147,50 +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);
source.setData(path_data);
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();
});
}

/** 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.
Expand Down Expand Up @@ -219,21 +185,6 @@ export function redraw_markers() {
})
.setLngLat(location)
.addTo(map);

markers[i].on("drag", marker_on_drag);
markers[i].on("dragend", () => save_path());
}
}

/** 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];
}
}

Expand All @@ -252,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);
}

Expand Down
Loading

0 comments on commit 1734b6f

Please sign in to comment.