From d32e14894baacc04cb3317270f2cd03f627f7037 Mon Sep 17 00:00:00 2001 From: "Patrik J. Braun" Date: Fri, 1 Sep 2023 23:54:36 +0200 Subject: [PATCH] Making multi layer gpx path render properly. Fixes #703 --- .../ui/gallery/blog/blog.gallery.component.ts | 8 ---- .../lightbox.map.gallery.component.ts | 37 ++++++++++--------- .../app/ui/gallery/map/map.service.ts | 21 ++++++++--- 3 files changed, 36 insertions(+), 30 deletions(-) diff --git a/src/frontend/app/ui/gallery/blog/blog.gallery.component.ts b/src/frontend/app/ui/gallery/blog/blog.gallery.component.ts index 9ddb6a4d..d44112c8 100644 --- a/src/frontend/app/ui/gallery/blog/blog.gallery.component.ts +++ b/src/frontend/app/ui/gallery/blog/blog.gallery.component.ts @@ -15,14 +15,6 @@ export class GalleryBlogComponent implements OnChanges { constructor(public blogService: BlogService) {} - get SampleText(): string { - if (!this.markdowns || this.markdowns.length < 1) { - return ''; - } - return this.markdowns[0].length < 203 - ? this.markdowns[0] - : this.markdowns[0].substring(0, 200) + '...'; - } ngOnChanges(): void { this.loadMarkdown().catch(console.error); diff --git a/src/frontend/app/ui/gallery/map/lightbox/lightbox.map.gallery.component.ts b/src/frontend/app/ui/gallery/map/lightbox/lightbox.map.gallery.component.ts index d951dba2..6d11656d 100644 --- a/src/frontend/app/ui/gallery/map/lightbox/lightbox.map.gallery.component.ts +++ b/src/frontend/app/ui/gallery/map/lightbox/lightbox.map.gallery.component.ts @@ -521,9 +521,9 @@ export class GalleryMapLightboxComponent implements OnChanges, OnDestroy { ); } - private addArchForLongDistancePaths(parsedGPX: { name: string, path: LatLngLiteral[]; markers: LatLngLiteral[] }) { + private addArchForLongDistancePaths(path: LatLngLiteral[]) { - for (let i = 0; i < parsedGPX.path.length - 1; ++i) { + for (let i = 0; i < path.length - 1; ++i) { const dst = (a: LatLngLiteral, b: LatLngLiteral) => { return Math.sqrt(Math.pow(a.lat - b.lat, 2) + Math.pow(a.lng - b.lng, 2)); @@ -550,9 +550,9 @@ export class GalleryMapLightboxComponent implements OnChanges, OnDestroy { return `${a.lat.toFixed(KEY_PRECISION)},${a.lng.toFixed(KEY_PRECISION)},${b.lat.toFixed(KEY_PRECISION)},${b.lng.toFixed(KEY_PRECISION)}`; }; - if (Math.abs(parsedGPX.path[i].lng - parsedGPX.path[i + 1].lng) > Config.Map.bendLongPathsTrigger) { - const s = parsedGPX.path[i]; - const e = parsedGPX.path[i + 1]; + if (Math.abs(path[i].lng - path[i + 1].lng) > Config.Map.bendLongPathsTrigger) { + const s = path[i]; + const e = path[i + 1]; const k = getKey(s, e); this.longPathSEPairs[k] = (this.longPathSEPairs[k] || 0) + 1; const occurrence = this.longPathSEPairs[k] - 1; @@ -590,7 +590,7 @@ export class GalleryMapLightboxComponent implements OnChanges, OnDestroy { // pathLayer.layer.addLayer(mkr); }); - parsedGPX.path.splice(i + 1, 0, ...newPoints); + path.splice(i + 1, 0, ...newPoints); i += newPoints.length; } } @@ -644,9 +644,9 @@ export class GalleryMapLightboxComponent implements OnChanges, OnDestroy { pathLayer = {layer: this.pathLayersConfigOrdered[0].layer, icon: MarkerFactory.defIcon}; } - if (parsedGPX.path.length !== 0) { + if (parsedGPX.path.length !== 0 && parsedGPX.path[0].length !== 0) { // render the beginning of the path with a marker - const mkr = marker(parsedGPX.path[0]); + const mkr = marker(parsedGPX.path[0][0]); pathLayer.layer.addLayer(mkr); mkr.setIcon(pathLayer.icon); @@ -655,16 +655,19 @@ export class GalleryMapLightboxComponent implements OnChanges, OnDestroy { mkr.bindPopup(file.name + ': ' + parsedGPX.name); //add arch for long paths - this.addArchForLongDistancePaths(parsedGPX); + parsedGPX.path.forEach(p => { + this.addArchForLongDistancePaths(p); + pathLayer.layer.addLayer( + polyline(p, { + smoothFactor: 3, + interactive: false, + color: pathLayer?.theme?.color, + dashArray: pathLayer?.theme?.dashArray + }) + ); + }); + - pathLayer.layer.addLayer( - polyline(parsedGPX.path, { - smoothFactor: 3, - interactive: false, - color: pathLayer?.theme?.color, - dashArray: pathLayer?.theme?.dashArray - }) - ); } parsedGPX.markers.forEach((mc) => { const mkr = marker(mc); diff --git a/src/frontend/app/ui/gallery/map/map.service.ts b/src/frontend/app/ui/gallery/map/map.service.ts index 177f078c..88771e9b 100644 --- a/src/frontend/app/ui/gallery/map/map.service.ts +++ b/src/frontend/app/ui/gallery/map/map.service.ts @@ -100,7 +100,7 @@ export class MapService { public async getMapCoordinates( file: FileDTO - ): Promise<{ name: string, path: LatLngLiteral[]; markers: LatLngLiteral[] }> { + ): Promise<{ name: string, path: LatLngLiteral[][]; markers: LatLngLiteral[] }> { const filePath = Utils.concatUrls( file.directory.path, file.directory.name, @@ -109,8 +109,8 @@ export class MapService { const gpx = await this.networkService.getXML( '/gallery/content/' + filePath + '/bestFit' ); - const getCoordinates = (tagName: string): LatLngLiteral[] => { - const elements = gpx.getElementsByTagName(tagName); + const getCoordinates = (inputElement: Document, tagName: string): LatLngLiteral[] => { + const elements = inputElement.getElementsByTagName(tagName); const ret: LatLngLiteral[] = []; // eslint-disable-next-line @typescript-eslint/prefer-for-of for (let i = 0; i < elements.length; i++) { @@ -121,10 +121,21 @@ export class MapService { } return ret; }; + const trksegs = gpx.getElementsByTagName('trkseg'); + if (!trksegs) { + + return { + name: gpx.getElementsByTagName('name')?.[0]?.textContent || '', + path: [getCoordinates(gpx, 'trkpt')], + markers: getCoordinates(gpx, 'wpt'), + }; + } + const trksegArr = [].slice.call(trksegs); return { name: gpx.getElementsByTagName('name')?.[0]?.textContent || '', - path: getCoordinates('trkpt'), - markers: getCoordinates('wpt'), + path: [...trksegArr].map(t => getCoordinates(t,'trkpt')), + markers: getCoordinates(gpx, 'wpt'), }; } } +