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

fix mounting and destroying issues

Browse Source
This commit is contained in:
vcoppe
2024-07-13 11:42:21 +02:00
parent 46bafa9fff
commit b8e03cf947
8 changed files with 92 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
website/src/lib/components/gpx-layer/DistanceMarkers.ts
View File

@@ -9,13 +9,14 @@ const { distanceMarkers, distanceUnits, currentBasemap } = settings;
export class DistanceMarkers {
map: mapboxgl.Map;
updateBinded: () => void = this.update.bind(this);
unsubscribes: (() => void)[] = [];
constructor(map: mapboxgl.Map) {
this.map = map;
gpxStatistics.subscribe(this.updateBinded);
distanceMarkers.subscribe(this.updateBinded);
distanceUnits.subscribe(this.updateBinded);
this.unsubscribes.push(gpxStatistics.subscribe(this.updateBinded));
this.unsubscribes.push(distanceMarkers.subscribe(this.updateBinded));
this.unsubscribes.push(distanceUnits.subscribe(this.updateBinded));
this.map.on('style.load', this.updateBinded);
}
@@ -61,6 +62,10 @@ export class DistanceMarkers {
}
}
remove() {
this.unsubscribes.forEach(unsubscribe => unsubscribe());
}
getDistanceMarkersGeoJSON(): GeoJSON.FeatureCollection {
let statistics = get(gpxStatistics);

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

@@ -1,4 +1,4 @@
import { currentTool, Tool } from "$lib/stores";
import { currentTool, map, Tool } from "$lib/stores";
import { settings, type GPXFileWithStatistics, dbUtils } from "$lib/db";
import { get, type Readable } from "svelte/store";
import mapboxgl from "mapbox-gl";
@@ -259,20 +259,28 @@ export class GPXLayer {
});
}
remove() {
this.map.off('click', this.fileId, this.layerOnClickBinded);
this.map.off('mouseenter', this.fileId, this.layerOnMouseEnterBinded);
this.map.off('mouseleave', this.fileId, this.layerOnMouseLeaveBinded);
this.map.off('style.load', this.updateBinded);
updateMap(map: mapboxgl.Map) {
this.map = map;
this.map.on('style.load', this.updateBinded);
this.update();
}
if (this.map.getLayer(this.fileId + '-direction')) {
this.map.removeLayer(this.fileId + '-direction');
}
if (this.map.getLayer(this.fileId)) {
this.map.removeLayer(this.fileId);
}
if (this.map.getSource(this.fileId)) {
this.map.removeSource(this.fileId);
remove() {
if (get(map)) {
this.map.off('click', this.fileId, this.layerOnClickBinded);
this.map.off('mouseenter', this.fileId, this.layerOnMouseEnterBinded);
this.map.off('mouseleave', this.fileId, this.layerOnMouseLeaveBinded);
this.map.off('style.load', this.updateBinded);
if (this.map.getLayer(this.fileId + '-direction')) {
this.map.removeLayer(this.fileId + '-direction');
}
if (this.map.getLayer(this.fileId)) {
this.map.removeLayer(this.fileId);
}
if (this.map.getSource(this.fileId)) {
this.map.removeSource(this.fileId);
}
}
this.markers.forEach((marker) => {

28
website/src/lib/components/gpx-layer/GPXLayers.svelte
View File

@@ -5,9 +5,10 @@
import { fileObservers } from '$lib/db';
import { DistanceMarkers } from './DistanceMarkers';
import { StartEndMarkers } from './StartEndMarkers';
import { onDestroy } from 'svelte';
let distanceMarkers: DistanceMarkers;
let startEndMarkers: StartEndMarkers;
let distanceMarkers: DistanceMarkers | undefined = undefined;
let startEndMarkers: StartEndMarkers | undefined = undefined;
$: if ($map && $fileObservers) {
// remove layers for deleted files
@@ -15,6 +16,8 @@
if (!$fileObservers.has(fileId)) {
layer.remove();
gpxLayers.delete(fileId);
} else if ($map !== layer.map) {
layer.updateMap($map);
}
});
// add layers for new files
@@ -26,9 +29,30 @@
}
$: if ($map) {
if (distanceMarkers) {
distanceMarkers.remove();
}
if (startEndMarkers) {
startEndMarkers.remove();
}
distanceMarkers = new DistanceMarkers($map);
startEndMarkers = new StartEndMarkers($map);
}
onDestroy(() => {
gpxLayers.forEach((layer) => layer.remove());
gpxLayers.clear();
if (distanceMarkers) {
distanceMarkers.remove();
distanceMarkers = undefined;
}
if (startEndMarkers) {
startEndMarkers.remove();
startEndMarkers = undefined;
}
});
</script>
<WaypointPopup />

14
website/src/lib/components/gpx-layer/StartEndMarkers.ts
View File

@@ -7,6 +7,7 @@ export class StartEndMarkers {
start: mapboxgl.Marker;
end: mapboxgl.Marker;
updateBinded: () => void = this.update.bind(this);
unsubscribes: (() => void)[] = [];
constructor(map: mapboxgl.Map) {
this.map = map;
@@ -20,9 +21,9 @@ export class StartEndMarkers {
this.start = new mapboxgl.Marker({ element: startElement });
this.end = new mapboxgl.Marker({ element: endElement });
gpxStatistics.subscribe(this.updateBinded);
slicedGPXStatistics.subscribe(this.updateBinded);
currentTool.subscribe(this.updateBinded);
this.unsubscribes.push(gpxStatistics.subscribe(this.updateBinded));
this.unsubscribes.push(slicedGPXStatistics.subscribe(this.updateBinded));
this.unsubscribes.push(currentTool.subscribe(this.updateBinded));
}
update() {
@@ -36,4 +37,11 @@ export class StartEndMarkers {
this.end.remove();
}
}
remove() {
this.unsubscribes.forEach(unsubscribe => unsubscribe());
this.start.remove();
this.end.remove();
}
}