steven/gpx.studio
1
0
Fork 0
mirror of https://github.com/gpxstudio/gpx.studio.git synced 2025-09-05 18:02:55 +00:00
Code Issues Packages Projects Releases Wiki Activity

waypoint tool

Browse Source
This commit is contained in:
vcoppe
2024-06-12 18:48:03 +02:00
parent 7dd8855604
commit 71ff8ad727
11 changed files with 399 additions and 59 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -2,13 +2,14 @@ import { currentTool, Tool } from "$lib/stores";
import { settings, type GPXFileWithStatistics, dbUtils } from "$lib/db";
import { get, type Readable } from "svelte/store";
import mapboxgl from "mapbox-gl";
import { currentWaypoint, waypointPopup } from "./WaypointPopup";
import { currentPopupWaypoint, waypointPopup } from "./WaypointPopup";
import { addSelectItem, selectItem, selection } from "$lib/components/file-list/Selection";
import { ListTrackSegmentItem, ListWaypointItem, ListWaypointsItem, ListTrackItem, ListFileItem, ListRootItem } from "$lib/components/file-list/FileList";
import type { Waypoint } from "gpx";
import { produce } from "immer";
import { resetCursor, setCursor, setGrabbingCursor, setPointerCursor } from "$lib/utils";
import { font } from "$lib/assets/layers";
import { selectedWaypoint } from "$lib/components/toolbar/tools/Waypoint.svelte";
let defaultWeight = 5;
let defaultOpacity = 0.6;
@@ -190,13 +191,14 @@ export class GPXLayer {
return;
}
if ((e.shiftKey || e.ctrlKey || e.metaKey) && get(selection).hasAnyChildren(new ListWaypointsItem(this.fileId), false)) {
addSelectItem(new ListWaypointItem(this.fileId, marker._waypoint._data.index));
if (get(verticalFileView)) {
if ((e.shiftKey || e.ctrlKey || e.metaKey) && get(selection).hasAnyChildren(new ListWaypointsItem(this.fileId), false)) {
addSelectItem(new ListWaypointItem(this.fileId, marker._waypoint._data.index));
} else {
selectItem(new ListWaypointItem(this.fileId, marker._waypoint._data.index));
}
} else {
selectItem(new ListWaypointItem(this.fileId, marker._waypoint._data.index));
}
if (!get(verticalFileView) && !get(selection).has(new ListFileItem(this.fileId))) {
addSelectItem(new ListFileItem(this.fileId));
selectedWaypoint.set([marker._waypoint, this.fileId]);
}
e.stopPropagation();
});
@@ -318,14 +320,14 @@ export class GPXLayer {
showWaypointPopup(waypoint: Waypoint) {
let marker = this.markers[waypoint._data.index];
if (marker) {
currentWaypoint.set(waypoint);
currentPopupWaypoint.set(waypoint);
marker.setPopup(waypointPopup);
marker.togglePopup();
}
}
hideWaypointPopup() {
let waypoint = get(currentWaypoint);
let waypoint = get(currentPopupWaypoint);
if (waypoint) {
let marker = this.markers[waypoint._data.index];
marker?.getPopup()?.remove();

20
website/src/lib/components/gpx-layer/WaypointPopup.svelte
View File

@@ -1,6 +1,6 @@
<script lang="ts">
import * as Card from '$lib/components/ui/card';
import { waypointPopup, currentWaypoint } from './WaypointPopup';
import { waypointPopup, currentPopupWaypoint } from './WaypointPopup';
import WithUnits from '$lib/components/WithUnits.svelte';
import { Dot } from 'lucide-svelte';
import { onMount } from 'svelte';
@@ -16,26 +16,26 @@
</script>
<div bind:this={popupElement} class="hidden">
{#if $currentWaypoint}
{#if $currentPopupWaypoint}
<Card.Root class="border-none shadow-md text-base max-w-72 p-2">
<Card.Header class="p-0">
<Card.Title class="text-md">{$currentWaypoint.name}</Card.Title>
<Card.Title class="text-md">{$currentPopupWaypoint.name}</Card.Title>
</Card.Header>
<Card.Content class="flex flex-col p-0 text-sm">
<div class="flex flex-row items-center text-muted-foreground">
{$currentWaypoint.getLatitude().toFixed(6)}&deg; {$currentWaypoint
{$currentPopupWaypoint.getLatitude().toFixed(6)}&deg; {$currentPopupWaypoint
.getLongitude()
.toFixed(6)}&deg;
{#if $currentWaypoint.ele !== undefined}
{#if $currentPopupWaypoint.ele !== undefined}
<Dot size="16" />
<WithUnits value={$currentWaypoint.ele} type="elevation" />
<WithUnits value={$currentPopupWaypoint.ele} type="elevation" />
{/if}
</div>
{#if $currentWaypoint.desc}
<span>{$currentWaypoint.desc}</span>
{#if $currentPopupWaypoint.desc}
<span>{$currentPopupWaypoint.desc}</span>
{/if}
{#if $currentWaypoint.cmt}
<span>{$currentWaypoint.cmt}</span>
{#if $currentPopupWaypoint.cmt}
<span>{$currentPopupWaypoint.cmt}</span>
{/if}
</Card.Content>
</Card.Root>

2
website/src/lib/components/gpx-layer/WaypointPopup.ts
View File

@@ -2,7 +2,7 @@ import type { Waypoint } from "gpx";
import mapboxgl from "mapbox-gl";
import { writable } from "svelte/store";
export const currentWaypoint = writable<Waypoint | null>(null);
export const currentPopupWaypoint = writable<Waypoint | null>(null);
export const waypointPopup = new mapboxgl.Popup({
closeButton: false,