steven/gpx.studio
1
0
Fork 0
mirror of https://github.com/gpxstudio/gpx.studio.git synced 2026-10-07 06:14:07 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix popups

Browse Source
This commit is contained in:
vcoppe
2026-10-04 17:09:41 +02:00
parent 017d8521d6
commit 543fecadb8
25 changed files with 1242 additions and 225 deletions
Download Patch File Download Diff File Expand all files Collapse all files
website/src/lib/closest-point.test.ts
+29
View File
@@ -0,0 +1,29 @@
import { describe, it } from 'node:test';
import assert from 'node:assert/strict';
import { closestPointIndex } from './closest-point';
describe('closestPointIndex', () => {
const line = [0, 0, 1, 0, 2, 0, 2, 1];
it('has no point on an empty polyline', () => {
assert.equal(closestPointIndex([], { lng: 0, lat: 0 }), undefined);
});
it('is the only point of a polyline of one point', () => {
assert.equal(closestPointIndex([3, 4], { lng: 0, lat: 0 }), 0);
});
it('is the nearest end of the nearest segment', () => {
assert.equal(closestPointIndex(line, { lng: 0.2, lat: 0.1 }), 0);
assert.equal(closestPointIndex(line, { lng: 0.8, lat: 0.1 }), 1);
assert.equal(closestPointIndex(line, { lng: 1.6, lat: -0.1 }), 2);
assert.equal(closestPointIndex(line, { lng: 2.1, lat: 0.9 }), 3);
});
it('uses the distance to the segment, not to its ends', () => {
// far from every point but right next to the long segment
const coordinates = [0, 0, 10, 0, 10, 5];
assert.equal(closestPointIndex(coordinates, { lng: 7, lat: 0.01 }), 1);
assert.equal(closestPointIndex(coordinates, { lng: 3, lat: 0.01 }), 0);
});
});
website/src/lib/closest-point.ts
+38
View File
@@ -0,0 +1,38 @@
const metersPerDegree = 111320;
/**
* Index of the point of a polyline (flat `[lng, lat, ...]` coordinates) that is the closest to
* `point`, among the two ends of the segment of the polyline that passes the closest to it.
* `undefined` for an empty polyline. Planar approximation, like the one used to simplify tracks.
*/
export function closestPointIndex(
coordinates: ArrayLike<number>,
point: { lng: number; lat: number }
): number | undefined {
const count = Math.floor(coordinates.length / 2);
if (count === 0) {
return undefined;
}
const kx = Math.cos((point.lat * Math.PI) / 180) * metersPerDegree;
const ky = metersPerDegree;
const px = point.lng * kx;
const py = point.lat * ky;
const x = (i: number) => coordinates[2 * i] * kx - px;
const y = (i: number) => coordinates[2 * i + 1] * ky - py;
let best = 0;
let bestDistance = Number.MAX_VALUE;
for (let i = 0; i < count - 1; i++) {
const [ax, ay, bx, by] = [x(i), y(i), x(i + 1), y(i + 1)];
const [dx, dy] = [bx - ax, by - ay];
const length = dx * dx + dy * dy;
// the point is at the origin: the closest position on the segment, as a ratio
const t = length === 0 ? 0 : Math.max(0, Math.min(1, -(ax * dx + ay * dy) / length));
const distance = Math.hypot(ax + t * dx, ay + t * dy);
if (distance < bestDistance) {
bestDistance = distance;
best = t < 0.5 ? i : i + 1;
}
}
return best;
}
website/src/lib/components/file-list/FileListNodeLabel.svelte
+14 -23
View File
@@ -38,12 +38,8 @@
selectionSize,
type FileTreeNode,
} from '$lib/selection-helpers';
// TODO centering on the selection and the waypoint popup still work on the previous
// implementation
import { boundsManager } from '$lib/logic/bounds';
// import { gpxLayers } from '$lib/components/map/gpx-layer/gpx-layers';
// import { fileStateCollection } from '$lib/logic/file-state';
// import { waypointPopup } from '$lib/components/map/gpx-layer/gpx-layer-popup';
import { waypointPopup } from '$lib/components/map/gpx-layer/gpx-layer-popup';
let {
fileState,
@@ -165,26 +161,21 @@
}
}}
onmouseenter={() => {
// TODO waypoint popup: it needs the waypoint of the previous implementation
// if (node.type === 'waypoint') {
// let layer = gpxLayers.getLayer(node.fileId);
// let file = fileStateCollection.getFile(node.fileId);
// if (layer && file) {
// let waypoint = file.wpt[waypointIndex];
// if (waypoint && !waypoint._data.hidden) {
// waypointPopup?.setItem({ item: waypoint, fileId: node.fileId });
// }
// }
// }
if (node.type === 'waypoint' && !isHidden(fileState, node.waypointId)) {
const waypoint = engine.waypoint(node.fileId, node.waypointId);
if (waypoint) {
waypointPopup?.setItem({
item: waypoint,
kind: 'waypoint',
fileId: node.fileId,
});
}
}
}}
onmouseleave={() => {
// TODO waypoint popup
// if (node.type === 'waypoint') {
// let layer = gpxLayers.getLayer(node.fileId);
// if (layer) {
// waypointPopup?.setItem(null);
// }
// }
if (node.type === 'waypoint') {
waypointPopup?.setItem(null);
}
}}
>
{#if level === ListLevel.SEGMENT}
website/src/lib/components/map/CoordinatesPopup.svelte
+2 -7
View File
@@ -1,7 +1,6 @@
<script lang="ts">
import { map } from '$lib/components/map/map';
import { trackpointPopup } from '$lib/components/map/gpx-layer/gpx-layer-popup';
import { TrackPoint } from 'gpx';
map.onLoad((map_) => {
map_.on('contextmenu', (e) => {
@@ -16,12 +15,8 @@
return;
}
trackpointPopup?.setItem({
item: new TrackPoint({
attributes: {
lat: e.lngLat.lat,
lon: e.lngLat.lng,
},
}),
kind: 'trackpoint',
item: { lng: e.lngLat.lng, lat: e.lngLat.lat },
});
});
});
website/src/lib/components/map/MapPopup.svelte
+2 -3
View File
@@ -1,5 +1,4 @@
<script lang="ts">
import { TrackPoint, Waypoint } from 'gpx';
import WaypointPopup from '$lib/components/map/gpx-layer/WaypointPopup.svelte';
import TrackpointPopup from '$lib/components/map/gpx-layer/TrackpointPopup.svelte';
import OverpassPopup from '$lib/components/map/layer-control/OverpassPopup.svelte';
@@ -23,9 +22,9 @@
<div bind:this={container}>
{#if $item}
{#if $item.item instanceof Waypoint}
{#if $item.kind === 'waypoint'}
<WaypointPopup waypoint={$item} />
{:else if $item.item instanceof TrackPoint}
{:else if $item.kind === 'trackpoint'}
<TrackpointPopup trackpoint={$item} />
{:else}
<OverpassPopup poi={$item} />
website/src/lib/components/map/gpx-layer/CopyCoordinates.svelte
+2 -3
View File
@@ -2,14 +2,13 @@
import { Button } from '$lib/components/ui/button';
import { ClipboardCopy } from '@lucide/svelte';
import { i18n } from '$lib/i18n.svelte';
import type { Coordinates } from 'gpx';
let {
coordinates,
onCopy = () => {},
class: className = '',
}: {
coordinates: Coordinates;
coordinates: { lng: number; lat: number };
onCopy?: () => void;
class?: string;
} = $props();
@@ -20,7 +19,7 @@
variant="outline"
onclick={() => {
navigator.clipboard.writeText(
`${coordinates.lat.toFixed(6)}, ${coordinates.lon.toFixed(6)}`
`${coordinates.lat.toFixed(6)}, ${coordinates.lng.toFixed(6)}`
);
onCopy();
}}
website/src/lib/components/map/gpx-layer/TrackpointPopup.svelte
+7 -9
View File
@@ -1,5 +1,4 @@
<script lang="ts">
import type { TrackPoint } from 'gpx';
import { Button } from '$lib/components/ui/button';
import CopyCoordinates from '$lib/components/map/gpx-layer/CopyCoordinates.svelte';
import * as Card from '$lib/components/ui/card';
@@ -7,18 +6,17 @@
import { Compass, Earth, Mountain, Timer } from '@lucide/svelte';
import { i18n } from '$lib/i18n.svelte';
import type { PopupItem } from '$lib/components/map/map-popup';
import type { TrackpointDetails } from '$lib/engine';
import { map } from '$lib/components/map/map';
let { trackpoint }: { trackpoint: PopupItem<TrackPoint> } = $props();
let { trackpoint }: { trackpoint: PopupItem<Pick<TrackpointDetails, 'lng' | 'lat'> & Partial<TrackpointDetails>> } = $props();
</script>
<Card.Root class="border-none shadow-md text-base p-2">
<Card.Content class="flex flex-col p-0 text-xs gap-1">
<div class="flex flex-row items-center gap-1">
<Compass size="14" />
{trackpoint.item.getLatitude().toFixed(6)}&deg; {trackpoint.item
.getLongitude()
.toFixed(6)}&deg;
{trackpoint.item.lat.toFixed(6)}&deg; {trackpoint.item.lng.toFixed(6)}&deg;
</div>
{#if trackpoint.item.ele !== undefined}
<div class="flex flex-row items-center gap-1">
@@ -26,14 +24,14 @@
<WithUnits value={trackpoint.item.ele} type="elevation" />
</div>
{/if}
{#if trackpoint.item.time}
{#if trackpoint.item.time !== undefined}
<div class="flex flex-row items-center gap-1">
<Timer size="14" />
{i18n.df.format(trackpoint.item.time)}
{i18n.df.format(new Date(trackpoint.item.time))}
</div>
{/if}
<CopyCoordinates
coordinates={trackpoint.item.attributes}
coordinates={trackpoint.item}
onCopy={() => trackpoint.hide?.()}
class="mt-0.5"
/>
@@ -41,7 +39,7 @@
<Button
variant="outline"
class="justify-start"
href={`https://www.openstreetmap.org/edit?#map=${(($map?.getZoom() ?? 17) + 1).toFixed(0)}/${trackpoint.item.getLatitude().toFixed(5)}/${trackpoint.item.getLongitude().toFixed(5)}`}
href={`https://www.openstreetmap.org/edit?#map=${(($map?.getZoom() ?? 17) + 1).toFixed(0)}/${trackpoint.item.lat.toFixed(5)}/${trackpoint.item.lng.toFixed(5)}`}
target="_blank"
>
<Earth size="14" />
website/src/lib/components/map/gpx-layer/WaypointPopup.svelte
+16 -18
View File
@@ -9,21 +9,23 @@
import { getSymbolKey, symbols } from '$lib/assets/symbols';
import { i18n } from '$lib/i18n.svelte';
import sanitizeHtml from 'sanitize-html';
import type { Waypoint } from 'gpx';
import { ScrollArea } from '$lib/components/ui/scroll-area/index.js';
import { fileActions } from '$lib/logic/file-actions';
import type { PopupItem } from '$lib/components/map/map-popup';
import { selection } from '$lib/logic/selection';
import { ListFileItem } from '$lib/components/file-list/file-list';
import { engine, type WaypointDetails } from '$lib/engine';
import { hasSelectionWithin } from '$lib/selection-helpers';
let {
waypoint,
}: {
waypoint: PopupItem<Waypoint>;
waypoint: PopupItem<WaypointDetails>;
} = $props();
const { selection } = engine;
let selected = $derived(
waypoint.fileId ? $selection.hasAnyChildren(new ListFileItem(waypoint.fileId)) : false
waypoint.fileId
? hasSelectionWithin($selection, { type: 'file', fileId: waypoint.fileId })
: false
);
let symbolKey = $derived(waypoint ? getSymbolKey(waypoint.item.sym) : undefined);
@@ -44,9 +46,9 @@
<Card.Root class="border-none shadow-md text-base p-2 max-w-[50dvw] gap-0">
<Card.Header class="p-0 gap-0">
<Card.Title class="text-md">
{#if waypoint.item.link && waypoint.item.link.attributes && waypoint.item.link.attributes.href}
<a href={waypoint.item.link.attributes.href} target="_blank">
{waypoint.item.name ?? waypoint.item.link.attributes.href}
{#if waypoint.item.link?.href}
<a href={waypoint.item.link.href} target="_blank">
{waypoint.item.name ?? waypoint.item.link.href}
<ExternalLink size="12" class="inline-block mb-1.5" />
</a>
{:else}
@@ -68,13 +70,9 @@
</span>
<Dot size="16" />
{/if}
{waypoint.item.getLatitude().toFixed(6)}&deg; {waypoint.item
.getLongitude()
.toFixed(6)}&deg;
{#if waypoint.item.ele !== undefined}
<Dot size="16" />
<WithUnits value={waypoint.item.ele} type="elevation" />
{/if}
{waypoint.item.lat.toFixed(6)}&deg; {waypoint.item.lng.toFixed(6)}&deg;
<Dot size="16" />
<WithUnits value={waypoint.item.ele} type="elevation" />
</div>
<ScrollArea class="flex flex-col max-h-[30dvh]">
{#if waypoint.item.desc}
@@ -85,13 +83,13 @@
{/if}
</ScrollArea>
<div class="mt-2 flex flex-col gap-1">
<CopyCoordinates coordinates={waypoint.item.attributes} />
<CopyCoordinates coordinates={waypoint.item} />
{#if $currentTool === Tool.WAYPOINT && selected}
<Button
variant="outline"
onclick={() => {
if (waypoint.fileId) {
fileActions.deleteWaypoint(waypoint.fileId, waypoint.item._data.index);
engine.deleteWaypoint(waypoint.fileId, waypoint.item.id);
waypoint.hide?.();
}
}}
website/src/lib/components/map/gpx-layer/gpx-layer.ts
+40 -44
View File
@@ -8,7 +8,8 @@ import maplibregl, {
} from 'maplibre-gl';
import { map } from '$lib/components/map/map';
import { waypointPopup, trackpointPopup } from './gpx-layer-popup';
import { getClosestLinePoint, getElevation, loadSVGIcon } from '$lib/utils';
import { closestPointIndex } from '$lib/closest-point';
import { getElevation, loadSVGIcon } from '$lib/utils';
import { selectedWaypoint } from '$lib/components/toolbar/tools/waypoint/waypoint';
import { MapPin, Square } from 'lucide-static';
import { getSymbolKey, symbols } from '$lib/assets/symbols';
@@ -18,7 +19,6 @@ import { isCovered, hasSelectionWithin, type FileTreeNode } from '$lib/selection
import { isSegmentHidden, isWaypointHidden } from '$lib/file-visibility';
import { settings } from '$lib/logic/settings';
import { currentTool, Tool } from '$lib/components/toolbar/tools';
import { fileActionManager } from '$lib/logic/file-action-manager';
import { fileActions } from '$lib/logic/file-actions';
import { splitAs } from '$lib/components/toolbar/tools/scissors/scissors';
import { mapCursor, MapCursorState } from '$lib/logic/map-cursor';
@@ -398,18 +398,18 @@ export class GPXLayer {
layerOnMouseMove(e: any) {
if (e.originalEvent.shiftKey) {
let trackIndex = e.features[0].properties.trackIndex;
let segmentIndex = e.features[0].properties.segmentIndex;
// TODO needs the trackpoints of the previous implementation (see oldFile)
// const file = null;
// if (file) {
// const closest = getClosestLinePoint(
// file.trk[trackIndex].trkseg[segmentIndex].trkpt,
// { lat: e.lngLat.lat, lon: e.lngLat.lng }
// );
// trackpointPopup?.setItem({ item: closest, fileId: this.fileId });
// }
const { segmentId } = e.features[0].properties;
const lngLat = { lng: e.lngLat.lng, lat: e.lngLat.lat };
const index = closestPointIndex(engine.segmentCoordinates(segmentId), lngLat);
const trackpoint =
index === undefined ? undefined : engine.trackpoint(this.fileId, segmentId, index);
if (trackpoint) {
trackpointPopup?.setItem({
item: trackpoint,
kind: 'trackpoint',
fileId: this.fileId,
});
}
}
}
@@ -471,15 +471,18 @@ export class GPXLayer {
return;
}
// TODO the popup needs the waypoint of the previous implementation (see oldFile)
// let waypoint = this.oldFile?.wpt[e.features![0].properties!.waypointIndex];
// if (waypoint) {
// waypointPopup?.setItem({ item: waypoint, fileId: this.fileId });
// }
this.showWaypointPopup(e.features![0].properties!.waypointId);
mapCursor.notify(MapCursorState.WAYPOINT_HOVER, true);
}
showWaypointPopup(waypointId: string) {
const waypoint = engine.waypoint(this.fileId, waypointId);
if (waypoint) {
waypointPopup?.setItem({ item: waypoint, kind: 'waypoint', fileId: this.fileId });
}
}
waypointLayerOnMouseLeave() {
mapCursor.notify(MapCursorState.WAYPOINT_HOVER, false);
}
@@ -487,19 +490,14 @@ export class GPXLayer {
waypointLayerOnClick(e: MapLayerMouseEvent) {
e.preventDefault();
const { waypointIndex, waypointId } = e.features![0].properties!;
// TODO the popup and the waypoint tool need the waypoint of the previous implementation
const { waypointId } = e.features![0].properties!;
if (get(currentTool) === Tool.WAYPOINT) {
if (this.selected) {
if (e.originalEvent.shiftKey) {
// TODO
// fileActions.deleteWaypoint(this.fileId, waypointIndex);
engine.deleteWaypoint(this.fileId, waypointId);
} else {
engine.selectWaypoints(this.fileId, [waypointId]);
// TODO
// if (waypoint) {
// selectedWaypoint.set([waypoint, this.fileId]);
// }
selectedWaypoint.set({ fileId: this.fileId, id: waypointId });
}
} else {
if (get(treeFileView)) {
@@ -507,10 +505,7 @@ export class GPXLayer {
} else {
engine.select([this.fileId]);
}
// TODO
// if (waypoint) {
// selectedWaypoint.set([waypoint, this.fileId]);
// }
selectedWaypoint.set({ fileId: this.fileId, id: waypointId });
}
} else {
if (get(treeFileView)) {
@@ -524,10 +519,7 @@ export class GPXLayer {
if (!this.selected) {
engine.select([this.fileId]);
}
// TODO
// if (waypoint) {
// waypointPopup?.setItem({ item: waypoint, fileId: this.fileId });
// }
this.showWaypointPopup(waypointId);
}
}
}
@@ -622,23 +614,27 @@ export class GPXLayer {
return;
}
// the dragged waypoint, as it is in the features of the source
const waypointId =
this.currentWaypointData?.features[this.draggedWaypointIndex].properties?.waypointId;
getElevation([
{
lat: e.lngLat.lat,
lon: e.lngLat.lng,
},
]).then((ele) => {
]).then(async (ele) => {
if (this.draggedWaypointIndex === null) {
return;
}
fileActionManager.applyToFile(this.fileId, (file) => {
let wpt = file.wpt[this.draggedWaypointIndex!];
wpt.setCoordinates({
lat: e.lngLat.lat,
lon: e.lngLat.lng,
});
wpt.ele = ele[0];
});
if (waypointId) {
await engine.moveWaypoint(
this.fileId,
waypointId,
e.lngLat.lng,
e.lngLat.lat,
ele[0]
);
}
this.draggedWaypointIndex = null;
});
}
website/src/lib/components/map/layer-control/OverpassPopup.svelte
+18 -24
View File
@@ -4,10 +4,10 @@
import { PencilLine, MapPin } from '@lucide/svelte';
import { i18n } from '$lib/i18n.svelte';
import { ScrollArea } from '$lib/components/ui/scroll-area/index.js';
import type { WaypointType } from 'gpx';
import type { PopupItem } from '$lib/components/map/map-popup';
import { fileActions } from '$lib/logic/file-actions';
import { selection } from '$lib/logic/selection';
import { engine } from '$lib/engine';
import { selectionSize } from '$lib/selection-helpers';
import { getElevation } from '$lib/utils';
let {
poi,
@@ -27,28 +27,22 @@
return '';
});
function addToFile() {
const { selection } = engine;
async function addToFile() {
const desc = Object.entries(tags)
.map(([key, value]) => `${key}: ${value}`)
.join('\n');
let wpt: WaypointType = {
attributes: {
lat: poi.item.lat,
lon: poi.item.lon,
},
name: name,
desc: desc,
cmt: desc,
sym: poi.item.sym,
};
if (tags.website) {
wpt.link = {
attributes: {
href: tags.website,
},
};
}
fileActions.addOrUpdateWaypoint(wpt);
const [ele] = await getElevation([{ lat: poi.item.lat, lon: poi.item.lng }]);
await engine.newWaypoint({
lng: poi.item.lng,
lat: poi.item.lat,
ele,
name,
desc,
icon: poi.item.sym ?? '',
link: tags.website ?? '',
});
}
</script>
@@ -58,7 +52,7 @@
<div class="flex flex-col">
<p>{name}</p>
<div class="text-muted-foreground text-xs font-normal">
{poi.item.lat.toFixed(6)}&deg; {poi.item.lon.toFixed(6)}&deg;
{poi.item.lat.toFixed(6)}&deg; {poi.item.lng.toFixed(6)}&deg;
</div>
</div>
@@ -111,7 +105,7 @@
size="sm"
class="mt-1 justify-start"
variant="outline"
disabled={$selection.size === 0}
disabled={selectionSize($selection) === 0}
onclick={addToFile}
>
<MapPin size="14" />
website/src/lib/components/map/layer-control/overpass-layer.ts
+2 -1
View File
@@ -143,6 +143,7 @@ export class OverpassLayer {
onHover(e: any) {
this.popup.setItem({
kind: 'overpass',
item: {
...e.features[0].properties,
sym: overpassQueryData[e.features[0].properties.query].symbol ?? '',
@@ -235,7 +236,7 @@ export class OverpassLayer {
properties: {
id: element.id,
lat: element.center ? element.center.lat : element.lat,
lon: element.center ? element.center.lon : element.lon,
lng: element.center ? element.center.lon : element.lon,
query: query,
icon: `overpass-${query}`,
tags: element.tags,
website/src/lib/components/map/map-popup.ts
+5 -5
View File
@@ -1,11 +1,13 @@
import { TrackPoint, Waypoint } from 'gpx';
import maplibregl from 'maplibre-gl';
import { mount, tick, unmount } from 'svelte';
import { get, writable, type Writable } from 'svelte/store';
import MapPopupComponent from '$lib/components/map/MapPopup.svelte';
export type PopupItem<T = Waypoint | TrackPoint | any> = {
export type PopupItem<T = any> = {
/** Has a position (`lng` and `lat`). */
item: T;
/** What the item is: a `WaypointDetails`, a `TrackpointDetails` or an Overpass element. */
kind: 'waypoint' | 'trackpoint' | 'overpass';
fileId?: string;
hide?: () => void;
};
@@ -77,8 +79,6 @@ export class MapPopup {
if (item === null) {
return new maplibregl.LngLat(0, 0);
}
return item.item instanceof Waypoint || item.item instanceof TrackPoint
? item.item.getCoordinates()
: new maplibregl.LngLat(item.item.lon, item.item.lat);
return new maplibregl.LngLat(item.item.lng, item.item.lat);
}
}
website/src/lib/components/toolbar/tools/waypoint/Waypoint.svelte
+30 -25
View File
@@ -5,15 +5,15 @@
import { Button } from '$lib/components/ui/button';
import * as Select from '$lib/components/ui/select';
import { i18n } from '$lib/i18n.svelte';
import { ListWaypointItem } from '$lib/components/file-list/file-list';
import Help from '$lib/components/Help.svelte';
import { onDestroy, onMount, untrack } from 'svelte';
import { getURLForLanguage } from '$lib/utils';
import { MapPin, CircleX, Save } from '@lucide/svelte';
import { getSymbolKey, symbols } from '$lib/assets/symbols';
import { selection } from '$lib/logic/selection';
import { engine } from '$lib/engine';
import { selectionSize } from '$lib/selection-helpers';
import { getElevation } from '$lib/utils';
import { selectedWaypoint } from './waypoint';
import { fileActions } from '$lib/logic/file-actions';
import { map } from '$lib/components/map/map';
import { mapCursor, MapCursorState } from '$lib/logic/map-cursor';
import maplibregl from 'maplibre-gl';
@@ -31,7 +31,9 @@
let latitude = $state(0);
let symbolKey = $derived(getSymbolKey(sym));
let canCreate = $derived($selection.size > 0);
const { selection } = engine;
let canCreate = $derived(selectionSize($selection) > 0);
let sortedSymbols = $derived(
Object.entries(symbols).sort((a, b) => {
@@ -58,24 +60,24 @@
$effect(() => {
if ($selectedWaypoint) {
const wpt = $selectedWaypoint[0];
const wpt = $selectedWaypoint.waypoint;
untrack(() => {
name = wpt.name ?? '';
description = wpt.desc ?? '';
if (wpt.cmt !== undefined && wpt.cmt !== wpt.desc) {
description += '\n\n' + wpt.cmt;
}
link = wpt.link?.attributes?.href ?? '';
link = wpt.link?.href ?? '';
sym = wpt.sym ?? '';
longitude = parseFloat(wpt.getLongitude().toFixed(6));
latitude = parseFloat(wpt.getLatitude().toFixed(6));
longitude = parseFloat(wpt.lng.toFixed(6));
latitude = parseFloat(wpt.lat.toFixed(6));
});
} else {
untrack(reset);
}
});
function createOrUpdateWaypoint() {
async function createOrUpdateWaypoint() {
if (typeof latitude === 'string') {
latitude = parseFloat(latitude);
}
@@ -85,22 +87,25 @@
latitude = parseFloat(latitude.toFixed(6));
longitude = parseFloat(longitude.toFixed(6));
fileActions.addOrUpdateWaypoint(
{
attributes: {
lat: latitude,
lon: longitude,
},
name: name.length > 0 ? name : undefined,
desc: description.length > 0 ? description : undefined,
cmt: description.length > 0 ? description : undefined,
link: link.length > 0 ? { attributes: { href: link } } : undefined,
sym: sym.length > 0 ? sym : undefined,
},
selectedWaypoint.wpt && selectedWaypoint.fileId
? new ListWaypointItem(selectedWaypoint.fileId, selectedWaypoint.wpt._data.index)
: undefined
);
const target = $selectedWaypoint;
const [ele] = await getElevation([{ lat: latitude, lon: longitude }]);
const waypoint = {
lng: longitude,
lat: latitude,
ele,
name,
desc: description,
icon: sym,
link,
};
if (target) {
// the engine changes the selected waypoint
await engine.selectWaypoints(target.fileId, [target.id]);
await engine.updateWaypoint(waypoint);
} else {
// it goes in the selected files
await engine.newWaypoint(waypoint);
}
reset();
}
website/src/lib/components/toolbar/tools/waypoint/waypoint.ts
+80 -47
View File
@@ -1,74 +1,107 @@
import { ListWaypointItem } from '$lib/components/file-list/file-list';
import { fileStateCollection } from '$lib/logic/file-state';
import { selection } from '$lib/logic/selection';
import { get, writable } from 'svelte/store';
import { engine, type WaypointDetails } from '$lib/engine';
import { settings } from '$lib/logic/settings';
import type { Waypoint } from 'gpx';
import { get, writable, type Writable } from 'svelte/store';
export type SelectedWaypoint = {
fileId: string;
id: string;
/** The data of the waypoint, kept up to date with the file. */
waypoint: WaypointDetails;
};
/**
* The waypoint that the waypoint tool is about: the selected one when the file tree is shown and
* a single waypoint is selected, or the one that was set explicitly (clicking a waypoint of the
* map) until the selection changes to something else than its file or itself (that is what
* clicking it selects, depending on the view, and the selection may arrive after it is set).
*/
export class WaypointSelection {
private _selection: Writable<[Waypoint, string] | undefined>;
private _selection = writable<SelectedWaypoint | undefined>(undefined);
private _fileUnsubscribe: (() => void) | undefined;
private _explicit: { fileId: string; id: string } | undefined;
constructor() {
this._selection = writable(undefined);
settings.treeFileView.subscribe(() => {
this.update();
});
selection.subscribe(() => {
this.update();
});
settings.treeFileView.subscribe(() => this.updateFromSelection());
engine.selection.subscribe(() => this.updateFromSelection());
}
subscribe(
run: (value: [Waypoint, string] | undefined) => void,
invalidate?: (value?: [Waypoint, string] | undefined) => void
run: (value: SelectedWaypoint | undefined) => void,
invalidate?: (value?: SelectedWaypoint | undefined) => void
) {
return this._selection.subscribe(run, invalidate);
}
set(value: [Waypoint, string] | undefined) {
this._selection.set(value);
/** Sets the waypoint, whatever the selection is. */
set(target: { fileId: string; id: string } | undefined) {
this._explicit = target;
this.track(target);
}
update() {
if (this._fileUnsubscribe) {
this._fileUnsubscribe();
this._fileUnsubscribe = undefined;
updateFromSelection() {
const selection = get(engine.selection);
const explicit = this._explicit;
if (
explicit &&
((selection.type === 'file' &&
selection.fileIds.length === 1 &&
selection.fileIds[0] === explicit.fileId) ||
(selection.type === 'waypoint' &&
selection.fileId === explicit.fileId &&
selection.waypointIds.length === 1 &&
selection.waypointIds[0] === explicit.id))
) {
return;
}
this._explicit = undefined;
if (
get(settings.treeFileView) &&
selection.type === 'waypoint' &&
selection.waypointIds.length === 1
) {
this.track({ fileId: selection.fileId, id: selection.waypointIds[0] });
} else {
this.track(undefined);
}
this._selection.update(() => {
if (get(settings.treeFileView) && get(selection).size === 1) {
let item = get(selection).getSelected()[0];
if (item instanceof ListWaypointItem) {
let fileState = fileStateCollection.getFileState(item.getFileId());
if (fileState) {
let first = true;
this._fileUnsubscribe = fileState.subscribe(() => {
if (first) first = false;
else this.update();
});
let waypoint = fileState.file?.wpt[item.getWaypointIndex()];
if (waypoint) {
return [waypoint, item.getFileId()];
}
}
}
}
return undefined;
});
}
reset() {
this._selection.set(undefined);
this._explicit = undefined;
this.track(undefined);
}
get wpt(): Waypoint | undefined {
const selection = get(this._selection);
return selection ? selection[0] : undefined;
get waypoint(): WaypointDetails | undefined {
return get(this._selection)?.waypoint;
}
get fileId(): string | undefined {
const selection = get(this._selection);
return selection ? selection[1] : undefined;
return get(this._selection)?.fileId;
}
get id(): string | undefined {
return get(this._selection)?.id;
}
private track(target: { fileId: string; id: string } | undefined) {
this._fileUnsubscribe?.();
this._fileUnsubscribe = undefined;
if (!target) {
this._selection.set(undefined);
return;
}
// read again each time the file changes
const read = () => {
const waypoint = engine.waypoint(target.fileId, target.id);
this._selection.set(waypoint ? { ...target, waypoint } : undefined);
};
const file = get(engine.files).get(target.fileId);
if (file) {
this._fileUnsubscribe = file.subscribe(read);
} else {
read();
}
}
}
website/src/lib/engine.ts
+77 -1
View File
@@ -4,10 +4,20 @@ import { FileColorAllocator, normalizeColor } from '$lib/file-colors';
import { setHidden, type Visibility } from '$lib/file-visibility';
import { selectedElementIds, type FileTreeNode } from '$lib/selection-helpers';
import type { Feature, FeatureCollection, LineString, Point } from 'geojson';
import type { Clipboard, GlobalStatistics, FileStructure, MoveTarget, Selection } from 'gpx-rs';
import type {
Clipboard,
GlobalStatistics,
FileStructure,
MoveTarget,
Selection,
WaypointDetails,
TrackpointDetails,
} from 'gpx-rs';
export type {
Clipboard,
WaypointDetails,
TrackpointDetails,
MoveTarget,
GlobalStatistics,
FileStructure,
@@ -59,6 +69,17 @@ export type WaypointProperties = {
sym?: string;
};
/** The data of a waypoint to create or to change. Empty strings are fields it does not have. */
export type NewWaypoint = {
lng: number;
lat: number;
ele: number;
name: string;
desc: string;
icon: string;
link: string;
};
/** Everything the UI knows about one file. */
export type FileState = {
structure: FileStructure;
@@ -403,6 +424,61 @@ class Engine {
return this.run((w) => w.move_elements(what, to));
}
// Waypoints
/** All the data of a waypoint, `undefined` if it does not exist (or before the engine is loaded). */
waypoint(fileId: string, waypointId: string): WaypointDetails | undefined {
return this.wasm?.waypoint(fileId, waypointId);
}
/**
* Adds a waypoint to each selected file (or to the file of the selected elements). Empty
* strings are fields that the waypoint does not have.
*/
newWaypoint(waypoint: NewWaypoint) {
return this.run((w) =>
w.new_waypoint(
waypoint.lng,
waypoint.lat,
waypoint.ele,
waypoint.name,
waypoint.desc,
waypoint.icon,
waypoint.link
)
);
}
/** Changes the selected waypoints. Empty strings remove the field. */
updateWaypoint(waypoint: NewWaypoint) {
return this.run((w) =>
w.update_waypoint(
waypoint.lng,
waypoint.lat,
waypoint.ele,
waypoint.name,
waypoint.desc,
waypoint.icon,
waypoint.link
)
);
}
/** Moves a waypoint, selected or not: only its position and elevation change. */
moveWaypoint(fileId: string, waypointId: string, lng: number, lat: number, ele: number) {
return this.run((w) => w.move_waypoint(fileId, waypointId, lng, lat, ele));
}
/** Deletes a waypoint, selected or not. */
deleteWaypoint(fileId: string, waypointId: string) {
return this.run((w) => w.delete_waypoint(fileId, waypointId));
}
/** A trackpoint of a segment, `undefined` if it does not exist. */
trackpoint(fileId: string, segmentId: string, index: number): TrackpointDetails | undefined {
return this.wasm?.trackpoint(fileId, segmentId, index);
}
// Edits of the selection
newTrack() {