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

show popup after content has been rendered, fixes popup placement, see #124

Browse Source
This commit is contained in:
vcoppe
2024-10-01 16:56:13 +02:00
parent 572d206c2c
commit 3262dec7d3
3 changed files with 20 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -10,6 +10,7 @@ import { getElevation, resetCursor, setGrabbingCursor, setPointerCursor, setScis
import { selectedWaypoint } from "$lib/components/toolbar/tools/Waypoint.svelte"; import { selectedWaypoint } from "$lib/components/toolbar/tools/Waypoint.svelte";
import { MapPin, Square } from "lucide-static"; import { MapPin, Square } from "lucide-static";
import { getSymbolKey, symbols } from "$lib/assets/symbols"; import { getSymbolKey, symbols } from "$lib/assets/symbols";
import { tick } from "svelte";
const colors = [ const colors = [
'#ff0000', '#ff0000',
@@ -394,13 +395,18 @@ export class GPXLayer {
showWaypointPopup(waypoint: Waypoint) { showWaypointPopup(waypoint: Waypoint) {
if (get(currentPopupWaypoint) !== null) { if (get(currentPopupWaypoint) !== null) {
this.hideWaypointPopup(); this.hideWaypointPopup();
} else if (waypoint === get(currentPopupWaypoint)?.[0]) {
return;
} }
let marker = this.markers[waypoint._data.index]; let marker = this.markers[waypoint._data.index];
if (marker) { if (marker) {
currentPopupWaypoint.set([waypoint, this.fileId]); currentPopupWaypoint.set([waypoint, this.fileId]);
marker.setPopup(waypointPopup); tick().then(() => {
marker.togglePopup(); // Show popup once the content component has been rendered
this.map.on('mousemove', this.maybeHideWaypointPopupBinded); marker.setPopup(waypointPopup);
marker.togglePopup();
this.map.on('mousemove', this.maybeHideWaypointPopupBinded);
});
} }
} }

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

@@ -7,6 +7,7 @@ export const currentPopupWaypoint = writable<[Waypoint, string] | null>(null);
export const waypointPopup = new mapboxgl.Popup({ export const waypointPopup = new mapboxgl.Popup({
closeButton: false, closeButton: false,
focusAfterOpen: false,
maxWidth: undefined, maxWidth: undefined,
offset: { offset: {
'top': [0, 0], 'top': [0, 0],
@@ -15,8 +16,8 @@ export const waypointPopup = new mapboxgl.Popup({
'bottom': [0, -30], 'bottom': [0, -30],
'bottom-left': [0, -30], 'bottom-left': [0, -30],
'bottom-right': [0, -30], 'bottom-right': [0, -30],
'left': [0, 0], 'left': [10, -15],
'right': [0, 0] 'right': [-10, -15],
}, },
}); });

11
website/src/lib/components/layer-control/OverpassLayer.ts
View File

@@ -5,6 +5,7 @@ import { get, writable } from "svelte/store";
import { liveQuery } from "dexie"; import { liveQuery } from "dexie";
import { db, settings } from "$lib/db"; import { db, settings } from "$lib/db";
import { overpassQueryData } from "$lib/assets/layers"; import { overpassQueryData } from "$lib/assets/layers";
import { tick } from "svelte";
const { const {
currentOverpassQueries currentOverpassQueries
@@ -18,6 +19,7 @@ export const overpassPopupPOI = writable<Record<string, any> | null>(null);
export const overpassPopup = new mapboxgl.Popup({ export const overpassPopup = new mapboxgl.Popup({
closeButton: false, closeButton: false,
focusAfterOpen: false,
maxWidth: undefined, maxWidth: undefined,
offset: 15, offset: 15,
}); });
@@ -129,9 +131,12 @@ export class OverpassLayer {
...e.features[0].properties, ...e.features[0].properties,
sym: overpassQueryData[e.features[0].properties.query].symbol ?? '' sym: overpassQueryData[e.features[0].properties.query].symbol ?? ''
}); });
overpassPopup.setLngLat(e.features[0].geometry.coordinates); tick().then(() => {
overpassPopup.addTo(this.map); // Show the popup once the content component has been rendered
this.map.on('mousemove', this.maybeHidePopupBinded); overpassPopup.setLngLat(e.features[0].geometry.coordinates);
overpassPopup.addTo(this.map);
this.map.on('mousemove', this.maybeHidePopupBinded);
});
} }
maybeHidePopup(e: any) { maybeHidePopup(e: any) {