From 57ebefcb383b0639b7b4d4c3e2a74dd42980739d Mon Sep 17 00:00:00 2001 From: vcoppe Date: Mon, 13 May 2024 19:43:10 +0200 Subject: [PATCH] waypoint popup info --- gpx/src/gpx.ts | 8 +++ website/src/lib/components/WithUnits.svelte | 66 ++++++++++--------- .../src/lib/components/gpx-layer/GPXLayer.ts | 15 +++-- .../lib/components/gpx-layer/GPXLayers.svelte | 18 +---- .../components/gpx-layer/WaypointPopup.svelte | 40 +++++++++-- .../lib/components/gpx-layer/WaypointPopup.ts | 10 +++ 6 files changed, 97 insertions(+), 60 deletions(-) create mode 100644 website/src/lib/components/gpx-layer/WaypointPopup.ts diff --git a/gpx/src/gpx.ts b/gpx/src/gpx.ts index 66434f94..fee272c2 100644 --- a/gpx/src/gpx.ts +++ b/gpx/src/gpx.ts @@ -557,6 +557,14 @@ export class Waypoint { this.attributes = coordinates; } + getLatitude(): number { + return this.attributes.lat; + } + + getLongitude(): number { + return this.attributes.lon; + } + clone(): Waypoint { return new Waypoint({ attributes: cloneJSON(this.attributes), diff --git a/website/src/lib/components/WithUnits.svelte b/website/src/lib/components/WithUnits.svelte index 28973374..86845344 100644 --- a/website/src/lib/components/WithUnits.svelte +++ b/website/src/lib/components/WithUnits.svelte @@ -17,38 +17,40 @@ const { distanceUnits, velocityUnits, temperatureUnits } = settings; -{#if type === 'distance'} - {#if $distanceUnits === 'metric'} - {value.toFixed(2)} {showUnits ? $_('units.kilometers') : ''} - {:else} - {kilometersToMiles(value).toFixed(2)} {showUnits ? $_('units.miles') : ''} - {/if} -{:else if type === 'elevation'} - {#if $distanceUnits === 'metric'} - {value.toFixed(0)} {showUnits ? $_('units.meters') : ''} - {:else} - {metersToFeet(value).toFixed(0)} {showUnits ? $_('units.feet') : ''} - {/if} -{:else if type === 'speed'} - {#if $distanceUnits === 'metric'} - {#if $velocityUnits === 'speed'} - {value.toFixed(2)} {showUnits ? $_('units.kilometers_per_hour') : ''} + + {#if type === 'distance'} + {#if $distanceUnits === 'metric'} + {value.toFixed(2)} {showUnits ? $_('units.kilometers') : ''} {:else} - {secondsToHHMMSS(distancePerHourToSecondsPerDistance(value))} - {showUnits ? $_('units.minutes_per_kilometer') : ''} + {kilometersToMiles(value).toFixed(2)} {showUnits ? $_('units.miles') : ''} {/if} - {:else if $velocityUnits === 'speed'} - {kilometersToMiles(value).toFixed(2)} {showUnits ? $_('units.miles_per_hour') : ''} - {:else} - {secondsToHHMMSS(distancePerHourToSecondsPerDistance(kilometersToMiles(value)))} - {showUnits ? $_('units.minutes_per_mile') : ''} + {:else if type === 'elevation'} + {#if $distanceUnits === 'metric'} + {value.toFixed(0)} {showUnits ? $_('units.meters') : ''} + {:else} + {metersToFeet(value).toFixed(0)} {showUnits ? $_('units.feet') : ''} + {/if} + {:else if type === 'speed'} + {#if $distanceUnits === 'metric'} + {#if $velocityUnits === 'speed'} + {value.toFixed(2)} {showUnits ? $_('units.kilometers_per_hour') : ''} + {:else} + {secondsToHHMMSS(distancePerHourToSecondsPerDistance(value))} + {showUnits ? $_('units.minutes_per_kilometer') : ''} + {/if} + {:else if $velocityUnits === 'speed'} + {kilometersToMiles(value).toFixed(2)} {showUnits ? $_('units.miles_per_hour') : ''} + {:else} + {secondsToHHMMSS(distancePerHourToSecondsPerDistance(kilometersToMiles(value)))} + {showUnits ? $_('units.minutes_per_mile') : ''} + {/if} + {:else if type === 'temperature'} + {#if $temperatureUnits === 'celsius'} + {value} {showUnits ? $_('units.celsius') : ''} + {:else} + {celsiusToFahrenheit(value)} {showUnits ? $_('units.fahrenheit') : ''} + {/if} + {:else if type === 'time'} + {secondsToHHMMSS(value)} {/if} -{:else if type === 'temperature'} - {#if $temperatureUnits === 'celsius'} - {value} {showUnits ? $_('units.celsius') : ''} - {:else} - {celsiusToFahrenheit(value)} {showUnits ? $_('units.fahrenheit') : ''} - {/if} -{:else if type === 'time'} - {secondsToHHMMSS(value)} -{/if} + diff --git a/website/src/lib/components/gpx-layer/GPXLayer.ts b/website/src/lib/components/gpx-layer/GPXLayer.ts index 12c57e52..9e7e9f44 100644 --- a/website/src/lib/components/gpx-layer/GPXLayer.ts +++ b/website/src/lib/components/gpx-layer/GPXLayer.ts @@ -2,6 +2,7 @@ import { map, selectFiles, currentTool, Tool } from "$lib/stores"; import { settings, type GPXFileWithStatistics } from "$lib/db"; import { get, type Readable } from "svelte/store"; import mapboxgl from "mapbox-gl"; +import { currentWaypoint, waypointPopup } from "./WaypointPopup"; let defaultWeight = 6; let defaultOpacity = 1; @@ -43,21 +44,17 @@ export class GPXLayer { fileId: string; file: Readable; layerColor: string; - popup: mapboxgl.Popup; - popupElement: HTMLElement; markers: mapboxgl.Marker[] = []; unsubscribe: Function[] = []; updateBinded: () => void = this.update.bind(this); selectOnClickBinded: (e: any) => void = this.selectOnClick.bind(this); - constructor(map: mapboxgl.Map, fileId: string, file: Readable, popup: mapboxgl.Popup, popupElement: HTMLElement) { + constructor(map: mapboxgl.Map, fileId: string, file: Readable) { this.map = map; this.fileId = fileId; this.file = file; this.layerColor = getColor(); - this.popup = popup; - this.popupElement = popupElement; this.unsubscribe.push(file.subscribe(this.updateBinded)); this.unsubscribe.push(directionMarkers.subscribe(this.updateBinded)); this.unsubscribe.push(distanceMarkers.subscribe(this.updateBinded)); @@ -182,11 +179,15 @@ export class GPXLayer { this.markers[markerIndex].setLngLat(waypoint.getCoordinates()); } else { let marker = new mapboxgl.Marker().setLngLat(waypoint.getCoordinates()); - marker.getElement().addEventListener('click', (e) => { - marker.setPopup(this.popup); + marker.getElement().addEventListener('mouseover', (e) => { + currentWaypoint.set(waypoint); + marker.setPopup(waypointPopup); marker.togglePopup(); e.stopPropagation(); }); + marker.getElement().addEventListener('mouseout', () => { + marker.togglePopup(); + }); this.markers.push(marker); } diff --git a/website/src/lib/components/gpx-layer/GPXLayers.svelte b/website/src/lib/components/gpx-layer/GPXLayers.svelte index 69b49fd3..f6773fdf 100644 --- a/website/src/lib/components/gpx-layer/GPXLayers.svelte +++ b/website/src/lib/components/gpx-layer/GPXLayers.svelte @@ -2,14 +2,9 @@ import { map, selectedFiles, gpxLayers } from '$lib/stores'; import { GPXLayer } from './GPXLayer'; import { get } from 'svelte/store'; - import { onMount } from 'svelte'; - import mapboxgl from 'mapbox-gl'; import WaypointPopup from './WaypointPopup.svelte'; import { fileObservers } from '$lib/db'; - let popupElement: HTMLElement; - let popup: mapboxgl.Popup | null = null; - $: if ($map && $fileObservers) { gpxLayers.update(($layers) => { // remove layers for deleted files @@ -22,7 +17,7 @@ // add layers for new files $fileObservers.forEach((file, fileId) => { if (!$layers.has(fileId)) { - $layers.set(fileId, new GPXLayer(get(map), fileId, file, popup, popupElement)); + $layers.set(fileId, new GPXLayer(get(map), fileId, file)); } }); return $layers; @@ -34,15 +29,6 @@ $gpxLayers.get(fileId)?.moveToFront(); } }); - - onMount(() => { - popup = new mapboxgl.Popup({ - closeButton: false, - maxWidth: undefined - }); - popup.setDOMContent(popupElement); - popupElement.classList.remove('hidden'); - }); - + diff --git a/website/src/lib/components/gpx-layer/WaypointPopup.svelte b/website/src/lib/components/gpx-layer/WaypointPopup.svelte index 6b0bdba2..3ca03cfb 100644 --- a/website/src/lib/components/gpx-layer/WaypointPopup.svelte +++ b/website/src/lib/components/gpx-layer/WaypointPopup.svelte @@ -1,13 +1,43 @@ -