mirror of
https://github.com/gpxstudio/gpx.studio.git
synced 2025-09-04 01:22:32 +00:00
routing controls class
This commit is contained in:
vcoppe
@@ -7,153 +7,99 @@
|
||||
import * as Alert from '$lib/components/ui/alert';
|
||||
import { CircleHelp } from 'lucide-svelte';
|
||||
|
||||
import { map, selectedFiles, applyToFile } from '$lib/stores';
|
||||
import { AnchorPointHierarchy, route } from './Routing';
|
||||
import { onDestroy } from 'svelte';
|
||||
import mapboxgl from 'mapbox-gl';
|
||||
|
||||
import type { GPXFile } from 'gpx';
|
||||
import { currentTool, files, getFileStore, map, selectedFiles, Tool } from '$lib/stores';
|
||||
import { brouterProfiles, privateRoads, routing, routingProfile } from './Routing';
|
||||
|
||||
import { _ } from 'svelte-i18n';
|
||||
import { get, type Writable } from 'svelte/store';
|
||||
import type { GPXFile } from 'gpx';
|
||||
import { RoutingControls } from './RoutingControls';
|
||||
|
||||
let brouterProfiles: { [key: string]: string } = {
|
||||
bike: 'Trekking-dry',
|
||||
racing_bike: 'fastbike',
|
||||
mountain_bike: 'MTB',
|
||||
foot: 'Hiking-Alpine-SAC6',
|
||||
motorcycle: 'Car-FastEco',
|
||||
water: 'river',
|
||||
railway: 'rail'
|
||||
};
|
||||
let routingProfile = {
|
||||
value: 'bike',
|
||||
label: $_('toolbar.routing.activities.bike')
|
||||
};
|
||||
let routing = true;
|
||||
let privateRoads = false;
|
||||
let routingControls: Map<Writable<GPXFile>, RoutingControls> = new Map();
|
||||
let selectedFile: Writable<GPXFile> | null = null;
|
||||
let active = false;
|
||||
|
||||
let anchorPointHierarchy: AnchorPointHierarchy | null = null;
|
||||
let markers: mapboxgl.Marker[] = [];
|
||||
let file: GPXFile | null = null;
|
||||
|
||||
function toggleMarkersForZoomLevelAndBounds() {
|
||||
if ($map) {
|
||||
let zoom = $map.getZoom();
|
||||
markers.forEach((marker) => {
|
||||
if (marker._simplified.zoom <= zoom && $map.getBounds().contains(marker.getLngLat())) {
|
||||
marker.addTo($map);
|
||||
} else {
|
||||
marker.remove();
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
async function extendFile(e: mapboxgl.MapMouseEvent) {
|
||||
if (file && anchorPointHierarchy && anchorPointHierarchy.points.length > 0) {
|
||||
let lastPoint = anchorPointHierarchy.points[anchorPointHierarchy.points.length - 1];
|
||||
let newPoint = {
|
||||
lon: e.lngLat.lng,
|
||||
lat: e.lngLat.lat
|
||||
};
|
||||
let response = await route(
|
||||
[lastPoint.point.getCoordinates(), newPoint],
|
||||
brouterProfiles[routingProfile.value],
|
||||
privateRoads,
|
||||
routing
|
||||
);
|
||||
applyToFile(file, (f) => f.append(response), true);
|
||||
}
|
||||
}
|
||||
|
||||
function clean() {
|
||||
markers.forEach((marker) => {
|
||||
marker.remove();
|
||||
$: if ($map && $files) {
|
||||
// remove controls for deleted files
|
||||
routingControls.forEach((controls, file) => {
|
||||
if (!get(files).includes(file)) {
|
||||
controls.remove();
|
||||
routingControls.delete(file);
|
||||
}
|
||||
});
|
||||
markers = [];
|
||||
if ($map) {
|
||||
$map.off('zoom', toggleMarkersForZoomLevelAndBounds);
|
||||
$map.off('move', toggleMarkersForZoomLevelAndBounds);
|
||||
$map.off('click', extendFile);
|
||||
}
|
||||
}
|
||||
|
||||
$: if ($selectedFiles.size == 1) {
|
||||
let selectedFile = $selectedFiles.values().next().value;
|
||||
$: active = $currentTool === Tool.ROUTING;
|
||||
|
||||
if (selectedFile !== file) {
|
||||
clean();
|
||||
file = selectedFile;
|
||||
$: if ($map && $selectedFiles) {
|
||||
// update selected file
|
||||
if ($selectedFiles.size == 0 || $selectedFiles.size > 1 || !active) {
|
||||
if (selectedFile) {
|
||||
routingControls.get(selectedFile)?.remove();
|
||||
}
|
||||
selectedFile = null;
|
||||
} else {
|
||||
// update markers
|
||||
let newSelectedFile = get(selectedFiles).values().next().value;
|
||||
let newSelectedFileStore = getFileStore(newSelectedFile);
|
||||
if (selectedFile !== newSelectedFileStore) {
|
||||
if (selectedFile) {
|
||||
routingControls.get(selectedFile)?.remove();
|
||||
}
|
||||
selectedFile = newSelectedFileStore;
|
||||
}
|
||||
}
|
||||
} else {
|
||||
clean();
|
||||
file = null;
|
||||
}
|
||||
|
||||
$: if ($map && file) {
|
||||
// record time
|
||||
let start = performance.now();
|
||||
anchorPointHierarchy = AnchorPointHierarchy.create(file);
|
||||
// record time
|
||||
let end = performance.now();
|
||||
console.log('Time to create anchor points: ' + (end - start) + 'ms');
|
||||
|
||||
markers = anchorPointHierarchy.getMarkers();
|
||||
|
||||
toggleMarkersForZoomLevelAndBounds();
|
||||
$map.on('zoom', toggleMarkersForZoomLevelAndBounds);
|
||||
$map.on('move', toggleMarkersForZoomLevelAndBounds);
|
||||
$map.on('click', extendFile);
|
||||
|
||||
let points = file.getTrackPoints();
|
||||
$: if ($map && selectedFile) {
|
||||
if (!routingControls.has(selectedFile)) {
|
||||
routingControls.set(selectedFile, new RoutingControls(get(map), selectedFile));
|
||||
} else {
|
||||
routingControls.get(selectedFile)?.add();
|
||||
}
|
||||
}
|
||||
|
||||
onDestroy(() => {
|
||||
clean();
|
||||
});
|
||||
</script>
|
||||
|
||||
<ToolbarItemMenu>
|
||||
<Card.Root>
|
||||
<Card.Content class="p-4 flex flex-col gap-4">
|
||||
<div class="w-full flex flex-row justify-between items-center gap-2">
|
||||
<Label>{$_('toolbar.routing.activity')}</Label>
|
||||
<Select.Root bind:selected={routingProfile}>
|
||||
<Select.Trigger class="h-8 w-40">
|
||||
<Select.Value />
|
||||
</Select.Trigger>
|
||||
<Select.Content>
|
||||
{#each Object.keys(brouterProfiles) as profile}
|
||||
<Select.Item value={profile}
|
||||
>{$_(`toolbar.routing.activities.${profile}`)}</Select.Item
|
||||
>
|
||||
{/each}
|
||||
</Select.Content>
|
||||
</Select.Root>
|
||||
</div>
|
||||
<div class="w-full flex flex-row justify-between items-center gap-2">
|
||||
<Label for="routing">{$_('toolbar.routing.use_routing')}</Label>
|
||||
<Switch id="routing" class="scale-90" bind:checked={routing} />
|
||||
</div>
|
||||
<div class="w-full flex flex-row justify-between items-center gap-2">
|
||||
<Label for="private">{$_('toolbar.routing.allow_private')}</Label>
|
||||
<Switch id="private" class="scale-90" bind:checked={privateRoads} />
|
||||
</div>
|
||||
<Alert.Root class="max-w-64">
|
||||
<CircleHelp size="16" />
|
||||
<!-- <Alert.Title>Heads up!</Alert.Title> -->
|
||||
<Alert.Description>
|
||||
{#if $selectedFiles.size > 1}
|
||||
<div>{$_('toolbar.routing.help_multiple_files')}</div>
|
||||
{:else if $selectedFiles.size == 0}
|
||||
<div>{$_('toolbar.routing.help_no_file')}</div>
|
||||
{:else}
|
||||
<div>{$_('toolbar.routing.help')}</div>
|
||||
{/if}
|
||||
</Alert.Description>
|
||||
</Alert.Root>
|
||||
</Card.Content>
|
||||
</Card.Root>
|
||||
</ToolbarItemMenu>
|
||||
{#if active}
|
||||
<ToolbarItemMenu>
|
||||
<Card.Root>
|
||||
<Card.Content class="p-4 flex flex-col gap-4">
|
||||
<div class="w-full flex flex-row justify-between items-center gap-2">
|
||||
<Label>{$_('toolbar.routing.activity')}</Label>
|
||||
<Select.Root bind:selected={$routingProfile}>
|
||||
<Select.Trigger class="h-8 w-40">
|
||||
<Select.Value />
|
||||
</Select.Trigger>
|
||||
<Select.Content>
|
||||
{#each Object.keys(brouterProfiles) as profile}
|
||||
<Select.Item value={profile}
|
||||
>{$_(`toolbar.routing.activities.${profile}`)}</Select.Item
|
||||
>
|
||||
{/each}
|
||||
</Select.Content>
|
||||
</Select.Root>
|
||||
</div>
|
||||
<div class="w-full flex flex-row justify-between items-center gap-2">
|
||||
<Label for="routing">{$_('toolbar.routing.use_routing')}</Label>
|
||||
<Switch id="routing" class="scale-90" bind:checked={$routing} />
|
||||
</div>
|
||||
<div class="w-full flex flex-row justify-between items-center gap-2">
|
||||
<Label for="private">{$_('toolbar.routing.allow_private')}</Label>
|
||||
<Switch id="private" class="scale-90" bind:checked={$privateRoads} />
|
||||
</div>
|
||||
<Alert.Root class="max-w-64">
|
||||
<CircleHelp size="16" />
|
||||
<!-- <Alert.Title>Heads up!</Alert.Title> -->
|
||||
<Alert.Description>
|
||||
{#if $selectedFiles.size > 1}
|
||||
<div>{$_('toolbar.routing.help_multiple_files')}</div>
|
||||
{:else if $selectedFiles.size == 0}
|
||||
<div>{$_('toolbar.routing.help_no_file')}</div>
|
||||
{:else}
|
||||
<div>{$_('toolbar.routing.help')}</div>
|
||||
{/if}
|
||||
</Alert.Description>
|
||||
</Alert.Root>
|
||||
</Card.Content>
|
||||
</Card.Root>
|
||||
</ToolbarItemMenu>
|
||||
{/if}
|
||||
|
||||
Reference in New Issue
Block a user