steven/gpx.studio
1
0
Fork 0
mirror of https://github.com/gpxstudio/gpx.studio.git synced 2025-08-31 23:53:25 +00:00
Code Issues Packages Projects Releases Wiki Activity

apply routing tool to selection

Browse Source
This commit is contained in:
vcoppe
2024-05-24 16:37:26 +02:00
parent 590bb9abf7
commit 19d3fd9316
8 changed files with 230 additions and 146 deletions
Download Patch File Download Diff File Expand all files Collapse all files

87
gpx/src/gpx.ts
View File

@@ -23,8 +23,7 @@ export abstract class GPXTreeElement<T extends GPXTreeElement<any>> {
abstract toGeoJSON(): GeoJSON.Feature | GeoJSON.Feature[] | GeoJSON.FeatureCollection | GeoJSON.FeatureCollection[]; abstract toGeoJSON(): GeoJSON.Feature | GeoJSON.Feature[] | GeoJSON.FeatureCollection | GeoJSON.FeatureCollection[];
// Producers // Producers
abstract replaceTrackPoints(segment: number, start: number, end: number, points: TrackPoint[]); abstract _reverse(originalNextTimestamp?: Date, newPreviousTimestamp?: Date);
abstract reverse(originalNextTimestamp?: Date, newPreviousTimestamp?: Date);
} }
export type AnyGPXTreeElement = GPXTreeElement<GPXTreeElement<any>>; export type AnyGPXTreeElement = GPXTreeElement<GPXTreeElement<any>>;
@@ -56,22 +55,7 @@ abstract class GPXTreeNode<T extends GPXTreeElement<any>> extends GPXTreeElement
} }
// Producers // Producers
replaceTrackPoints(segment: number, start: number, end: number, points: TrackPoint[]) { _reverse(originalNextTimestamp?: Date, newPreviousTimestamp?: Date) {
return produce(this, (draft: Draft<GPXTreeNode<T>>) => {
let og = getOriginal(draft);
let cumul = 0;
for (let i = 0; i < og.children.length; i++) {
let childSegments = og.children[i].getSegments();
if (segment < cumul + childSegments.length) {
draft.children[i] = draft.children[i].replaceTrackPoints(segment - cumul, start, end, points);
break;
}
cumul += childSegments.length;
}
});
}
reverse(originalNextTimestamp?: Date, newPreviousTimestamp?: Date) {
return produce(this, (draft: Draft<GPXTreeNode<T>>) => { return produce(this, (draft: Draft<GPXTreeNode<T>>) => {
let og = getOriginal(draft); let og = getOriginal(draft);
if (!originalNextTimestamp && !newPreviousTimestamp) { if (!originalNextTimestamp && !newPreviousTimestamp) {
@@ -84,7 +68,7 @@ abstract class GPXTreeNode<T extends GPXTreeElement<any>> extends GPXTreeElement
for (let i = 0; i < og.children.length; i++) { for (let i = 0; i < og.children.length; i++) {
let originalStartTimestamp = og.children[og.children.length - i - 1].getStartTimestamp(); let originalStartTimestamp = og.children[og.children.length - i - 1].getStartTimestamp();
draft.children[i] = draft.children[i].reverse(originalNextTimestamp, newPreviousTimestamp); draft.children[i] = draft.children[i]._reverse(originalNextTimestamp, newPreviousTimestamp);
originalNextTimestamp = originalStartTimestamp; originalNextTimestamp = originalStartTimestamp;
newPreviousTimestamp = draft.children[i].getEndTimestamp(); newPreviousTimestamp = draft.children[i].getEndTimestamp();
@@ -153,6 +137,18 @@ export class GPXFile extends GPXTreeNode<Track>{
return this.trk; return this.trk;
} }
getSegment(trackIndex: number, segmentIndex: number): TrackSegment {
return this.trk[trackIndex].children[segmentIndex];
}
forEachSegment(callback: (segment: TrackSegment, trackIndex: number, segmentIndex: number) => void) {
this.trk.forEach((track, trackIndex) => {
track.children.forEach((segment, segmentIndex) => {
callback(segment, trackIndex, segmentIndex);
});
});
}
clone(): GPXFile { clone(): GPXFile {
return new GPXFile({ return new GPXFile({
attributes: cloneJSON(this.attributes), attributes: cloneJSON(this.attributes),
@@ -198,6 +194,15 @@ export class GPXFile extends GPXTreeNode<Track>{
}); });
} }
replaceTrackPoints(trackIndex: number, segmentIndex: number, start: number, end: number, points: TrackPoint[]) {
return produce(this, (draft) => {
let og = getOriginal(draft); // Read as much as possible from the original object because it is faster
let trk = og.trk.slice();
trk[trackIndex] = trk[trackIndex].replaceTrackPoints(segmentIndex, start, end, points);
draft.trk = freeze(trk); // Pre-freeze the array, faster as well
});
}
replaceWaypoints(start: number, end: number, waypoints: Waypoint[]) { replaceWaypoints(start: number, end: number, waypoints: Waypoint[]) {
return produce(this, (draft) => { return produce(this, (draft) => {
let og = getOriginal(draft); // Read as much as possible from the original object because it is faster let og = getOriginal(draft); // Read as much as possible from the original object because it is faster
@@ -206,6 +211,28 @@ export class GPXFile extends GPXTreeNode<Track>{
draft.wpt = freeze(wpt); // Pre-freeze the array, faster as well draft.wpt = freeze(wpt); // Pre-freeze the array, faster as well
}); });
} }
reverse() {
return this._reverse();
}
reverseTrack(trackIndex: number) {
return produce(this, (draft) => {
let og = getOriginal(draft); // Read as much as possible from the original object because it is faster
let trk = og.trk.slice();
trk[trackIndex] = trk[trackIndex]._reverse();
draft.trk = freeze(trk); // Pre-freeze the array, faster as well
});
}
reverseTrackSegment(trackIndex: number, segmentIndex: number) {
return produce(this, (draft) => {
let og = getOriginal(draft); // Read as much as possible from the original object because it is faster
let trk = og.trk.slice();
trk[trackIndex] = trk[trackIndex].reverseTrackSegment(segmentIndex);
draft.trk = freeze(trk); // Pre-freeze the array, faster as well
});
}
}; };
// A class that represents a Track in a GPX file // A class that represents a Track in a GPX file
@@ -298,6 +325,24 @@ export class Track extends GPXTreeNode<TrackSegment> {
draft.trkseg = freeze(trkseg); // Pre-freeze the array, faster as well draft.trkseg = freeze(trkseg); // Pre-freeze the array, faster as well
}); });
} }
replaceTrackPoints(segmentIndex: number, start: number, end: number, points: TrackPoint[]) {
return produce(this, (draft) => {
let og = getOriginal(draft); // Read as much as possible from the original object because it is faster
let trkseg = og.trkseg.slice();
trkseg[segmentIndex] = trkseg[segmentIndex].replaceTrackPoints(start, end, points);
draft.trkseg = freeze(trkseg); // Pre-freeze the array, faster as well
});
}
reverseTrackSegment(segmentIndex: number) {
return produce(this, (draft) => {
let og = getOriginal(draft); // Read as much as possible from the original object because it is faster
let trkseg = og.trkseg.slice();
trkseg[segmentIndex] = trkseg[segmentIndex]._reverse();
draft.trkseg = freeze(trkseg); // Pre-freeze the array, faster as well
});
}
}; };
// A class that represents a TrackSegment in a GPX file // A class that represents a TrackSegment in a GPX file
@@ -448,7 +493,7 @@ export class TrackSegment extends GPXTreeLeaf {
} }
// Producers // Producers
replaceTrackPoints(segment: number, start: number, end: number, points: TrackPoint[]) { replaceTrackPoints(start: number, end: number, points: TrackPoint[]) {
return produce(this, (draft) => { return produce(this, (draft) => {
let og = getOriginal(draft); // Read as much as possible from the original object because it is faster let og = getOriginal(draft); // Read as much as possible from the original object because it is faster
let trkpt = og.trkpt.slice(); let trkpt = og.trkpt.slice();
@@ -457,7 +502,7 @@ export class TrackSegment extends GPXTreeLeaf {
}); });
} }
reverse(originalNextTimestamp?: Date, newPreviousTimestamp?: Date) { _reverse(originalNextTimestamp?: Date, newPreviousTimestamp?: Date) {
return produce(this, (draft) => { return produce(this, (draft) => {
if (originalNextTimestamp !== undefined && newPreviousTimestamp !== undefined) { if (originalNextTimestamp !== undefined && newPreviousTimestamp !== undefined) {
let og = getOriginal(draft); // Read as much as possible from the original object because it is faster let og = getOriginal(draft); // Read as much as possible from the original object because it is faster

33
website/src/lib/components/file-list/FileList.ts
View File

@@ -4,6 +4,7 @@ export class SelectionTreeType {
children: { children: {
[key: string | number]: SelectionTreeType [key: string | number]: SelectionTreeType
}; };
size: number = 0;
constructor(item: ListItem) { constructor(item: ListItem) {
this.item = item; this.item = item;
@@ -16,18 +17,25 @@ export class SelectionTreeType {
for (let key in this.children) { for (let key in this.children) {
this.children[key].clear(); this.children[key].clear();
} }
this.size = 0;
} }
_setOrToggle(item: ListItem, value?: boolean) { _setOrToggle(item: ListItem, value?: boolean) {
if (item.level === this.item.level) { if (item.level === this.item.level) {
this.selected = value === undefined ? !this.selected : value; let newSelected = value === undefined ? !this.selected : value;
if (this.selected !== newSelected) {
this.selected = newSelected;
this.size += this.selected ? 1 : -1;
}
} else { } else {
let id = item.getIdAtLevel(this.item.level); let id = item.getIdAtLevel(this.item.level);
if (id !== undefined) { if (id !== undefined) {
if (!this.children.hasOwnProperty(id)) { if (!this.children.hasOwnProperty(id)) {
this.children[id] = new SelectionTreeType(this.item.extend(id)); this.children[id] = new SelectionTreeType(this.item.extend(id));
} }
this.size -= this.children[id].size;
this.children[id]._setOrToggle(item, value); this.children[id]._setOrToggle(item, value);
this.size += this.children[id].size;
} }
} }
} }
@@ -67,19 +75,23 @@ export class SelectionTreeType {
return false; return false;
} }
hasAnyChildren(item: ListItem, self: boolean = true): boolean { hasAnyChildren(item: ListItem, self: boolean = true, ignoreIds?: (string | number)[]): boolean {
if (this.selected && this.item.level >= item.level && (self || this.item.level > item.level)) { if (this.selected && this.item.level >= item.level && (self || this.item.level > item.level)) {
return this.selected; return this.selected;
} }
let id = item.getIdAtLevel(this.item.level); let id = item.getIdAtLevel(this.item.level);
if (id !== undefined) { if (id !== undefined) {
if (this.children.hasOwnProperty(id)) { if (ignoreIds === undefined || ignoreIds.indexOf(id) === -1) {
return this.children[id].hasAnyChildren(item, self); if (this.children.hasOwnProperty(id)) {
return this.children[id].hasAnyChildren(item, self, ignoreIds);
}
} }
} else { } else {
for (let key in this.children) { for (let key in this.children) {
if (this.children[key].hasAnyChildren(item, self)) { if (ignoreIds === undefined || ignoreIds.indexOf(key) === -1) {
return true; if (this.children[key].hasAnyChildren(item, self, ignoreIds)) {
return true;
}
} }
} }
} }
@@ -113,16 +125,9 @@ export class SelectionTreeType {
} }
deleteChild(id: string | number) { deleteChild(id: string | number) {
this.size -= this.children[id].size;
delete this.children[id]; delete this.children[id];
} }
get size(): number {
let size = this.selected ? 1 : 0;
for (let key in this.children) {
size += this.children[key].size;
}
return size;
}
}; };
export enum ListLevel { export enum ListLevel {

4
website/src/lib/components/gpx-layer/GPXLayer.ts
View File

@@ -4,7 +4,7 @@ import { get, type Readable } from "svelte/store";
import mapboxgl from "mapbox-gl"; import mapboxgl from "mapbox-gl";
import { currentWaypoint, waypointPopup } from "./WaypointPopup"; import { currentWaypoint, waypointPopup } from "./WaypointPopup";
import { addSelectItem, selectItem, selection } from "$lib/components/file-list/Selection"; import { addSelectItem, selectItem, selection } from "$lib/components/file-list/Selection";
import { ListTrackSegmentItem, type ListItem, ListWaypointItem, ListWaypointsItem, ListTrackItem, ListFileItem } from "$lib/components/file-list/FileList"; import { ListTrackSegmentItem, type ListItem, ListWaypointItem, ListWaypointsItem, ListTrackItem, ListFileItem, ListRootItem } from "$lib/components/file-list/FileList";
import type { Waypoint } from "gpx"; import type { Waypoint } from "gpx";
let defaultWeight = 5; let defaultWeight = 5;
@@ -213,7 +213,7 @@ export class GPXLayer {
} }
selectOnClick(e: any) { selectOnClick(e: any) {
if (get(currentTool) === Tool.ROUTING) { if (get(currentTool) === Tool.ROUTING && get(selection).hasAnyChildren(new ListRootItem(), true, ['waypoints'])) {
return; return;
} }

49
website/src/lib/components/toolbar/tools/routing/Routing.svelte
View File

@@ -31,7 +31,7 @@
import { fileObservers } from '$lib/db'; import { fileObservers } from '$lib/db';
import { slide } from 'svelte/transition'; import { slide } from 'svelte/transition';
import { selection } from '$lib/components/file-list/Selection'; import { selection } from '$lib/components/file-list/Selection';
import type { ListItem } from '$lib/components/file-list/FileList'; import { ListRootItem, type ListItem } from '$lib/components/file-list/FileList';
let routingControls: Map<string, RoutingControls> = new Map(); let routingControls: Map<string, RoutingControls> = new Map();
let popupElement: HTMLElement; let popupElement: HTMLElement;
@@ -45,7 +45,7 @@
// remove controls for deleted files // remove controls for deleted files
routingControls.forEach((controls, fileId) => { routingControls.forEach((controls, fileId) => {
if (!$fileObservers.has(fileId)) { if (!$fileObservers.has(fileId)) {
controls.remove(); controls.destroy();
routingControls.delete(fileId); routingControls.delete(fileId);
if (selectedItem && selectedItem.getFileId() === fileId) { if (selectedItem && selectedItem.getFileId() === fileId) {
@@ -53,41 +53,19 @@
} }
} }
}); });
} // add controls for new files
$fileObservers.forEach((file, fileId) => {
$: if ($map && $selection) { if (!routingControls.has(fileId)) {
// update selected file
if ($selection.size == 0 || $selection.size > 1 || !active) {
if (selectedItem) {
routingControls.get(selectedItem.getFileId())?.remove();
}
selectedItem = null;
} else {
let newSelectedItem = get(selection).getSelected()[0];
if (selectedItem !== newSelectedItem) {
if (selectedItem) {
routingControls.get(selectedItem.getFileId())?.remove();
}
selectedItem = newSelectedItem;
}
}
}
$: if ($map && selectedItem) {
let fileId = selectedItem.getFileId();
if (!routingControls.has(fileId)) {
let selectedFileObserver = get(fileObservers).get(fileId);
if (selectedFileObserver) {
routingControls.set( routingControls.set(
fileId, fileId,
new RoutingControls(get(map), fileId, selectedFileObserver, popup, popupElement) new RoutingControls(get(map), fileId, file, popup, popupElement)
); );
} }
} else { });
routingControls.get(fileId)?.add();
}
} }
$: validSelection = $selection.hasAnyChildren(new ListRootItem(), true, ['waypoints']);
onMount(() => { onMount(() => {
popup = new mapboxgl.Popup({ popup = new mapboxgl.Popup({
closeButton: false, closeButton: false,
@@ -154,7 +132,8 @@
<Button <Button
slot="data" slot="data"
variant="outline" variant="outline"
on:click={() => dbUtils.applyToSelection((file) => file.reverse())} disabled={!validSelection}
on:click={dbUtils.reverseSelection}
> >
<ArrowRightLeft size="16" /> <ArrowRightLeft size="16" />
</Button> </Button>
@@ -164,7 +143,7 @@
<Button <Button
slot="data" slot="data"
variant="outline" variant="outline"
disabled={$selection.size != 1} disabled={$selection.size != 1 || !validSelection}
on:click={() => { on:click={() => {
const fileId = get(selection).getSelected()[0].getFileId(); const fileId = get(selection).getSelected()[0].getFileId();
routingControls.get(fileId)?.routeToStart(); routingControls.get(fileId)?.routeToStart();
@@ -178,7 +157,7 @@
<Button <Button
slot="data" slot="data"
variant="outline" variant="outline"
disabled={$selection.size != 1} disabled={$selection.size != 1 || !validSelection}
on:click={() => { on:click={() => {
const fileId = get(selection).getSelected()[0].getFileId(); const fileId = get(selection).getSelected()[0].getFileId();
routingControls.get(fileId)?.createRoundTrip(); routingControls.get(fileId)?.createRoundTrip();
@@ -192,7 +171,7 @@
<Help class="max-w-60"> <Help class="max-w-60">
{#if $selection.size > 1} {#if $selection.size > 1}
<div>{$_('toolbar.routing.help_multiple_files')}</div> <div>{$_('toolbar.routing.help_multiple_files')}</div>
{:else if $selection.size == 0} {:else if $selection.size == 0 || !validSelection}
<div>{$_('toolbar.routing.help_no_file')}</div> <div>{$_('toolbar.routing.help_no_file')}</div>
{:else} {:else}
<div>{$_('toolbar.routing.help')}</div> <div>{$_('toolbar.routing.help')}</div>

140
website/src/lib/components/toolbar/tools/routing/RoutingControls.ts
View File

@@ -8,8 +8,12 @@ import { toast } from "svelte-sonner";
import { _ } from "svelte-i18n"; import { _ } from "svelte-i18n";
import { dbUtils, type GPXFileWithStatistics } from "$lib/db"; import { dbUtils, type GPXFileWithStatistics } from "$lib/db";
import { selection } from "$lib/components/file-list/Selection";
import { ListFileItem, ListTrackSegmentItem } from "$lib/components/file-list/FileList";
import { currentTool, Tool } from "$lib/stores";
export class RoutingControls { export class RoutingControls {
active: boolean = false;
map: mapboxgl.Map; map: mapboxgl.Map;
fileId: string = ''; fileId: string = '';
file: Readable<GPXFileWithStatistics | undefined>; file: Readable<GPXFileWithStatistics | undefined>;
@@ -18,7 +22,8 @@ export class RoutingControls {
popup: mapboxgl.Popup; popup: mapboxgl.Popup;
popupElement: HTMLElement; popupElement: HTMLElement;
temporaryAnchor: AnchorWithMarker; temporaryAnchor: AnchorWithMarker;
unsubscribe: () => void = () => { }; fileUnsubscribe: () => void = () => { };
unsubscribes: Function[] = [];
toggleAnchorsForZoomLevelAndBoundsBinded: () => void = this.toggleAnchorsForZoomLevelAndBounds.bind(this); toggleAnchorsForZoomLevelAndBoundsBinded: () => void = this.toggleAnchorsForZoomLevelAndBounds.bind(this);
showTemporaryAnchorBinded: (e: any) => void = this.showTemporaryAnchor.bind(this); showTemporaryAnchorBinded: (e: any) => void = this.showTemporaryAnchor.bind(this);
@@ -38,19 +43,39 @@ export class RoutingControls {
lon: 0 lon: 0
} }
}); });
this.temporaryAnchor = this.createAnchor(point, new TrackSegment(), 0); this.temporaryAnchor = this.createAnchor(point, new TrackSegment(), 0, 0);
this.temporaryAnchor.marker.getElement().classList.remove('z-10'); // Show below the other markers this.temporaryAnchor.marker.getElement().classList.remove('z-10'); // Show below the other markers
this.add(); this.unsubscribes.push(selection.subscribe(this.addIfNeeded.bind(this)));
this.unsubscribes.push(currentTool.subscribe(this.addIfNeeded.bind(this)));
}
addIfNeeded() {
let routing = get(currentTool) === Tool.ROUTING;
if (!routing) {
if (this.active) {
this.remove();
}
return;
}
let selected = get(selection).hasAnyChildren(new ListFileItem(this.fileId), true, ['waypoints']);
if (selected) {
this.add();
} else if (!selected && this.active) {
this.remove();
}
} }
add() { add() {
this.active = true;
this.map.on('zoom', this.toggleAnchorsForZoomLevelAndBoundsBinded); this.map.on('zoom', this.toggleAnchorsForZoomLevelAndBoundsBinded);
this.map.on('move', this.toggleAnchorsForZoomLevelAndBoundsBinded); this.map.on('move', this.toggleAnchorsForZoomLevelAndBoundsBinded);
this.map.on('click', this.appendAnchorBinded); this.map.on('click', this.appendAnchorBinded);
this.map.on('mousemove', this.fileId, this.showTemporaryAnchorBinded); this.map.on('mousemove', this.fileId, this.showTemporaryAnchorBinded);
this.unsubscribe = this.file.subscribe(this.updateControls.bind(this)); this.fileUnsubscribe = this.file.subscribe(this.updateControls.bind(this));
} }
updateControls() { // Update the markers when the file changes updateControls() { // Update the markers when the file changes
@@ -59,25 +84,25 @@ export class RoutingControls {
return; return;
} }
let segments = file.getSegments();
let anchorIndex = 0; let anchorIndex = 0;
for (let segmentIndex = 0; segmentIndex < segments.length; segmentIndex++) { file.forEachSegment((segment, trackIndex, segmentIndex) => {
let segment = segments[segmentIndex]; if (get(selection).hasAnyParent(new ListTrackSegmentItem(this.fileId, trackIndex, segmentIndex))) {
for (let point of segment.trkpt) { // Update the existing anchors (could be improved by matching the existing anchors with the new ones?)
for (let point of segment.trkpt) { // Update the existing anchors (could be improved by matching the existing anchors with the new ones?) if (point._data.anchor) {
if (point._data.anchor) { if (anchorIndex < this.anchors.length) {
if (anchorIndex < this.anchors.length) { this.anchors[anchorIndex].point = point;
this.anchors[anchorIndex].point = point; this.anchors[anchorIndex].segment = segment;
this.anchors[anchorIndex].segment = segment; this.anchors[anchorIndex].trackIndex = trackIndex;
this.anchors[anchorIndex].marker.setLngLat(point.getCoordinates()); this.anchors[anchorIndex].segmentIndex = segmentIndex;
} else { this.anchors[anchorIndex].marker.setLngLat(point.getCoordinates());
this.anchors.push(this.createAnchor(point, segment, segmentIndex)); } else {
this.anchors.push(this.createAnchor(point, segment, trackIndex, segmentIndex));
}
anchorIndex++;
} }
anchorIndex++;
} }
} }
} });
while (anchorIndex < this.anchors.length) { // Remove the extra anchors while (anchorIndex < this.anchors.length) { // Remove the extra anchors
this.anchors.pop()?.marker.remove(); this.anchors.pop()?.marker.remove();
@@ -87,6 +112,8 @@ export class RoutingControls {
} }
remove() { remove() {
this.active = false;
for (let anchor of this.anchors) { for (let anchor of this.anchors) {
anchor.marker.remove(); anchor.marker.remove();
} }
@@ -96,10 +123,10 @@ export class RoutingControls {
this.map.off('mousemove', this.fileId, this.showTemporaryAnchorBinded); this.map.off('mousemove', this.fileId, this.showTemporaryAnchorBinded);
this.map.off('mousemove', this.updateTemporaryAnchorBinded); this.map.off('mousemove', this.updateTemporaryAnchorBinded);
this.unsubscribe(); this.fileUnsubscribe();
} }
createAnchor(point: TrackPoint, segment: TrackSegment, segmentIndex: number): AnchorWithMarker { createAnchor(point: TrackPoint, segment: TrackSegment, trackIndex: number, segmentIndex: number): AnchorWithMarker {
let element = document.createElement('div'); let element = document.createElement('div');
element.className = `h-3 w-3 rounded-full bg-white border-2 border-black cursor-pointer`; element.className = `h-3 w-3 rounded-full bg-white border-2 border-black cursor-pointer`;
@@ -112,6 +139,7 @@ export class RoutingControls {
let anchor = { let anchor = {
point, point,
segment, segment,
trackIndex,
segmentIndex, segmentIndex,
marker, marker,
inZoom: false inZoom: false
@@ -172,6 +200,10 @@ export class RoutingControls {
} }
showTemporaryAnchor(e: any) { showTemporaryAnchor(e: any) {
if (!get(selection).hasAnyParent(new ListTrackSegmentItem(this.fileId, e.features[0].properties.trackIndex, e.features[0].properties.segmentIndex))) {
return;
}
if (this.temporaryAnchorCloseToOtherAnchor(e)) { if (this.temporaryAnchorCloseToOtherAnchor(e)) {
return; return;
} }
@@ -250,23 +282,24 @@ export class RoutingControls {
let file = get(this.file)?.file; let file = get(this.file)?.file;
// Find the closest point closest to the temporary anchor // Find the closest point closest to the temporary anchor
let segments = file.getSegments();
let minDistance = Number.MAX_VALUE; let minDistance = Number.MAX_VALUE;
let minAnchor = this.temporaryAnchor as Anchor; let minAnchor = this.temporaryAnchor as Anchor;
for (let segmentIndex = 0; segmentIndex < segments.length; segmentIndex++) { file?.forEachSegment((segment, trackIndex, segmentIndex) => {
let segment = segments[segmentIndex]; if (get(selection).hasAnyParent(new ListTrackSegmentItem(this.fileId, trackIndex, segmentIndex))) {
for (let point of segment.trkpt) { for (let point of segment.trkpt) {
let dist = distance(point.getCoordinates(), this.temporaryAnchor.point.getCoordinates()); let dist = distance(point.getCoordinates(), this.temporaryAnchor.point.getCoordinates());
if (dist < minDistance) { if (dist < minDistance) {
minDistance = dist; minDistance = dist;
minAnchor = { minAnchor = {
point, point,
segment, segment,
segmentIndex, trackIndex,
}; segmentIndex,
};
}
} }
} }
} });
return minAnchor; return minAnchor;
} }
@@ -281,13 +314,13 @@ export class RoutingControls {
let [previousAnchor, nextAnchor] = this.getNeighbouringAnchors(anchor); let [previousAnchor, nextAnchor] = this.getNeighbouringAnchors(anchor);
if (previousAnchor === null && nextAnchor === null) { // Only one point, remove it if (previousAnchor === null && nextAnchor === null) { // Only one point, remove it
dbUtils.applyToFile(this.fileId, (file) => file.replaceTrackPoints(anchor.segmentIndex, 0, 0, [])); dbUtils.applyToFile(this.fileId, (file) => file.replaceTrackPoints(anchor.trackIndex, anchor.segmentIndex, 0, 0, []));
} else if (previousAnchor === null) { // First point, remove trackpoints until nextAnchor } else if (previousAnchor === null) { // First point, remove trackpoints until nextAnchor
dbUtils.applyToFile(this.fileId, (file) => file.replaceTrackPoints(anchor.segmentIndex, 0, nextAnchor.point._data.index - 1, [])); dbUtils.applyToFile(this.fileId, (file) => file.replaceTrackPoints(anchor.trackIndex, anchor.segmentIndex, 0, nextAnchor.point._data.index - 1, []));
} else if (nextAnchor === null) { // Last point, remove trackpoints from previousAnchor } else if (nextAnchor === null) { // Last point, remove trackpoints from previousAnchor
dbUtils.applyToFile(this.fileId, (file) => { dbUtils.applyToFile(this.fileId, (file) => {
let segment = file.getSegments()[anchor.segmentIndex]; let segment = file.getSegment(anchor.trackIndex, anchor.segmentIndex);
return file.replaceTrackPoints(anchor.segmentIndex, previousAnchor.point._data.index + 1, segment.trkpt.length - 1, []); return file.replaceTrackPoints(anchor.trackIndex, anchor.segmentIndex, previousAnchor.point._data.index + 1, segment.trkpt.length - 1, []);
}); });
} else { // Route between previousAnchor and nextAnchor } else { // Route between previousAnchor and nextAnchor
this.routeBetweenAnchors([previousAnchor, nextAnchor], [previousAnchor.point.getCoordinates(), nextAnchor.point.getCoordinates()]); this.routeBetweenAnchors([previousAnchor, nextAnchor], [previousAnchor.point.getCoordinates(), nextAnchor.point.getCoordinates()]);
@@ -312,14 +345,15 @@ export class RoutingControls {
if (!lastAnchor) { if (!lastAnchor) {
// TODO, create segment if it does not exist // TODO, create segment if it does not exist
dbUtils.applyToFile(this.fileId, (file) => file.replaceTrackPoints(0, 0, 0, [newPoint])); dbUtils.applyToFile(this.fileId, (file) => file.replaceTrackPoints(0, 0, 0, 0, [newPoint]));
return; return;
} }
newPoint._data.index = lastAnchor.segment.trkpt.length - 1; // Do as if the point was the last point in the segment newPoint._data.index = lastAnchor.segment.trkpt.length; // Do as if the point was the last point in the segment
let newAnchor = { let newAnchor = {
point: newPoint, point: newPoint,
segment: lastAnchor.segment, segment: lastAnchor.segment,
trackIndex: lastAnchor.trackIndex,
segmentIndex: lastAnchor.segmentIndex segmentIndex: lastAnchor.segmentIndex
}; };
@@ -332,13 +366,12 @@ export class RoutingControls {
return; return;
} }
let segments = file.getSegments(); if (this.anchors.length === 0) {
if (segments.length === 0) {
return; return;
} }
let segment = segments[segments.length - 1]; let lastAnchor = this.anchors[this.anchors.length - 1];
let firstAnchor = this.anchors.find((anchor) => anchor.segment === segment); let firstAnchor = this.anchors.find((anchor) => anchor.segment === lastAnchor.segment);
if (!firstAnchor) { if (!firstAnchor) {
return; return;
@@ -353,16 +386,17 @@ export class RoutingControls {
return; return;
} }
let segments = file.getSegments(); if (this.anchors.length === 0) {
if (segments.length === 0) {
return; return;
} }
let lastAnchor = this.anchors[this.anchors.length - 1];
dbUtils.applyToFile(this.fileId, (file) => { dbUtils.applyToFile(this.fileId, (file) => {
let segment = original(file).getSegments()[segments.length - 1]; let segment = original(file).getSegment(lastAnchor.trackIndex, lastAnchor.segmentIndex);
let newSegment = segment.clone(); let newSegment = segment.clone();
newSegment = newSegment.reverse(segment.getEndTimestamp(), segment.getEndTimestamp()); newSegment = newSegment.reverse(segment.getEndTimestamp(), segment.getEndTimestamp());
return file.replaceTrackPoints(segments.length - 1, segment.trkpt.length, segment.trkpt.length, newSegment.trkpt.map((point) => point)); return file.replaceTrackPoints(lastAnchor.trackIndex, lastAnchor.segmentIndex, segment.trkpt.length, segment.trkpt.length, newSegment.trkpt.map((point) => point));
}); });
} }
@@ -391,7 +425,7 @@ export class RoutingControls {
let segment = anchors[0].segment; let segment = anchors[0].segment;
if (anchors.length === 1) { // Only one anchor, update the point in the segment if (anchors.length === 1) { // Only one anchor, update the point in the segment
dbUtils.applyToFile(this.fileId, (file) => file.replaceTrackPoints(anchors[0].segmentIndex, 0, 0, [new TrackPoint({ dbUtils.applyToFile(this.fileId, (file) => file.replaceTrackPoints(anchors[0].trackIndex, anchors[0].segmentIndex, 0, 0, [new TrackPoint({
attributes: targetCoordinates[0], attributes: targetCoordinates[0],
})])); })]));
return true; return true;
@@ -451,14 +485,20 @@ export class RoutingControls {
anchor.point._data.zoom = 0; // Make these anchors permanent anchor.point._data.zoom = 0; // Make these anchors permanent
}); });
dbUtils.applyToFile(this.fileId, (file) => file.replaceTrackPoints(anchors[0].segmentIndex, anchors[0].point._data.index, anchors[anchors.length - 1].point._data.index, response)); dbUtils.applyToFile(this.fileId, (file) => file.replaceTrackPoints(anchors[0].trackIndex, anchors[0].segmentIndex, anchors[0].point._data.index, anchors[anchors.length - 1].point._data.index, response));
return true; return true;
} }
destroy() {
this.remove();
this.unsubscribes.forEach((unsubscribe) => unsubscribe());
}
} }
type Anchor = { type Anchor = {
segment: TrackSegment; segment: TrackSegment;
trackIndex: number;
segmentIndex: number; segmentIndex: number;
point: TrackPoint; point: TrackPoint;
}; };

4
website/src/lib/components/toolbar/tools/routing/Simplify.ts
View File

@@ -18,9 +18,7 @@ export function getZoomLevelForDistance(latitude: number, distance?: number): nu
export function updateAnchorPoints(file: GPXFile) { export function updateAnchorPoints(file: GPXFile) {
let segments = file.getSegments(); let segments = file.getSegments();
for (let segmentIndex = 0; segmentIndex < segments.length; segmentIndex++) { for (let segment of segments) {
let segment = segments[segmentIndex];
if (!segment._data.anchors) { // New segment, compute anchor points for it if (!segment._data.anchors) { // New segment, compute anchor points for it
computeAnchorPoints(segment); computeAnchorPoints(segment);
continue; continue;

55
website/src/lib/db.ts
View File

@@ -1,12 +1,12 @@
import Dexie, { liveQuery } from 'dexie'; import Dexie, { liveQuery } from 'dexie';
import { GPXFile, GPXStatistics, Track } from 'gpx'; import { GPXFile, GPXStatistics, Track, type AnyGPXTreeElement } from 'gpx';
import { enableMapSet, enablePatches, applyPatches, type Patch, type WritableDraft, castDraft, freeze, produceWithPatches, original } from 'immer'; import { enableMapSet, enablePatches, applyPatches, type Patch, type WritableDraft, castDraft, freeze, produceWithPatches, original, produce } from 'immer';
import { writable, get, derived, type Readable, type Writable } from 'svelte/store'; import { writable, get, derived, type Readable, type Writable } from 'svelte/store';
import { initTargetMapBounds, updateTargetMapBounds } from './stores'; import { initTargetMapBounds, updateTargetMapBounds } from './stores';
import { mode } from 'mode-watcher'; import { mode } from 'mode-watcher';
import { defaultBasemap, defaultBasemapTree, defaultOverlayTree, defaultOverlays } from './assets/layers'; import { defaultBasemap, defaultBasemapTree, defaultOverlayTree, defaultOverlays } from './assets/layers';
import { applyToOrderedSelectedItemsFromFile, selection } from '$lib/components/file-list/Selection'; import { applyToOrderedSelectedItemsFromFile, selection } from '$lib/components/file-list/Selection';
import { ListFileItem, ListItem, ListTrackItem, ListLevel, ListTrackSegmentItem, ListWaypointItem } from '$lib/components/file-list/FileList'; import { ListFileItem, ListItem, ListTrackItem, ListLevel, ListTrackSegmentItem, ListWaypointItem, ListRootItem } from '$lib/components/file-list/FileList';
import { updateAnchorPoints } from '$lib/components/toolbar/tools/routing/Simplify'; import { updateAnchorPoints } from '$lib/components/toolbar/tools/routing/Simplify';
enableMapSet(); enableMapSet();
@@ -359,39 +359,56 @@ export const dbUtils = {
applyToFile: (id: string, callback: (file: WritableDraft<GPXFile>) => GPXFile) => { applyToFile: (id: string, callback: (file: WritableDraft<GPXFile>) => GPXFile) => {
applyToFiles([id], callback); applyToFiles([id], callback);
}, },
applyToSelection: (callback: (file: WritableDraft<GPXFile>) => GPXFile) => { applyToSelection: (callback: (file: WritableDraft<AnyGPXTreeElement>) => AnyGPXTreeElement) => {
// TODO
applyToFiles(get(selection).forEach(fileId), callback);
},
duplicateSelection: () => {
if (get(selection).size === 0) { if (get(selection).size === 0) {
return; return;
} }
applyGlobal((draft) => { applyGlobal((draft) => {
let ids = getFileIds(get(settings.fileOrder).length); applyToOrderedSelectedItemsFromFile((fileId, level, items) => {
let index = 0; let file = draft.get(fileId);
if (file) {
for (let item of items) {
if (item instanceof ListFileItem) {
callback(castDraft(file));
} else if (item instanceof ListTrackItem) {
let trackIndex = item.getTrackIndex();
file = produce(file, (fileDraft) => {
callback(fileDraft.trk[trackIndex]);
});
} else if (item instanceof ListTrackSegmentItem) {
let trackIndex = item.getTrackIndex();
let segmentIndex = item.getSegmentIndex();
file = produce(file, (fileDraft) => {
callback(fileDraft.trk[trackIndex].trkseg[segmentIndex]);
});
}
}
draft.set(fileId, freeze(file));
}
});
});
},
reverseSelection: () => {
if (!get(selection).hasAnyChildren(new ListRootItem(), true, ['waypoints'])) {
return;
}
applyGlobal((draft) => {
applyToOrderedSelectedItemsFromFile((fileId, level, items) => { applyToOrderedSelectedItemsFromFile((fileId, level, items) => {
let file = original(draft)?.get(fileId); let file = original(draft)?.get(fileId);
if (file) { if (file) {
let newFile = file; let newFile = file;
if (level === ListLevel.FILE) { if (level === ListLevel.FILE) {
newFile = file.clone(); newFile = file.reverse();
newFile._data.id = ids[index++];
} else if (level === ListLevel.TRACK) { } else if (level === ListLevel.TRACK) {
for (let item of items) { for (let item of items) {
let trackIndex = (item as ListTrackItem).getTrackIndex(); let trackIndex = (item as ListTrackItem).getTrackIndex();
newFile = newFile.replaceTracks(trackIndex + 1, trackIndex, [file.trk[trackIndex].clone()]); newFile = newFile.reverseTrack(trackIndex);
} }
} else if (level === ListLevel.SEGMENT) { } else if (level === ListLevel.SEGMENT) {
for (let item of items) { for (let item of items) {
let trackIndex = (item as ListTrackSegmentItem).getTrackIndex(); let trackIndex = (item as ListTrackSegmentItem).getTrackIndex();
let segmentIndex = (item as ListTrackSegmentItem).getSegmentIndex(); let segmentIndex = (item as ListTrackSegmentItem).getSegmentIndex();
newFile = newFile.replaceTrackSegments(trackIndex, segmentIndex + 1, segmentIndex, [file.trk[trackIndex].trkseg[segmentIndex].clone()]); newFile = newFile.reverseTrackSegment(trackIndex, segmentIndex);
}
} else if (level === ListLevel.WAYPOINT) {
for (let item of items) {
let waypointIndex = (item as ListWaypointItem).getWaypointIndex();
newFile = newFile.replaceWaypoints(waypointIndex + 1, waypointIndex, [file.wpt[waypointIndex].clone()]);
} }
} }
draft.set(newFile._data.id, freeze(newFile)); draft.set(newFile._data.id, freeze(newFile));

4
website/src/locales/en.json
View File

@@ -50,8 +50,8 @@
"reverse_tooltip": "Reverse the direction", "reverse_tooltip": "Reverse the direction",
"route_back_to_start_tooltip": "Route back to start", "route_back_to_start_tooltip": "Route back to start",
"round_trip_tooltip": "Create round trip", "round_trip_tooltip": "Create round trip",
"help_no_file": "Select a file to use the routing tool, or create a new file from the menu", "help_no_file": "Select a file element to use the routing tool, or create a new file from the menu",
"help_multiple_files": "Select a single file to use the routing tool", "help_multiple_files": "Select a single file element to use the routing tool",
"help": "Click on the map to add a new point, or drag existing points to change the route", "help": "Click on the map to add a new point, or drag existing points to change the route",
"activities": { "activities": {
"bike": "Bike", "bike": "Bike",