From 685c2bb54150e455e6c14f57b3367995ba47fcd8 Mon Sep 17 00:00:00 2001
From: vcoppe <vianney.coppe@gmail.com>
Date: Wed, 17 Apr 2024 16:46:51 +0200
Subject: [PATCH] load and display gpx

---
 gpx/src/gpx.ts                               |  16 +-
 gpx/test-data/with_style.gpx                 |   4 +-
 website/src/lib/components/Data.svelte       | 266 +------------------
 website/src/lib/components/GPX.svelte        |  97 +++++--
 website/src/lib/components/Menu.svelte       |  18 +-
 website/src/lib/components/tools/Load.svelte |  38 +++
 website/src/lib/stores.ts                    |   4 +-
 7 files changed, 141 insertions(+), 302 deletions(-)
 create mode 100644 website/src/lib/components/tools/Load.svelte

diff --git a/gpx/src/gpx.ts b/gpx/src/gpx.ts
index a5f11199..ba9a9919 100644
--- a/gpx/src/gpx.ts
+++ b/gpx/src/gpx.ts
@@ -123,7 +123,21 @@ export class Track extends GPXTreeNode<TrackSegment> {
     }
 
     toGeoJSON(): any {
-        return this.getChildren().map((child) => child.toGeoJSON());
+        return this.getChildren().map((child) => {
+            let geoJSON = child.toGeoJSON();
+            if (this.extensions && this.extensions['gpx_style:line']) {
+                if (this.extensions['gpx_style:line'].color) {
+                    geoJSON.properties['color'] = this.extensions['gpx_style:line'].color;
+                }
+                if (this.extensions['gpx_style:line'].opacity) {
+                    geoJSON.properties['opacity'] = this.extensions['gpx_style:line'].opacity;
+                }
+                if (this.extensions['gpx_style:line'].weight) {
+                    geoJSON.properties['weight'] = this.extensions['gpx_style:line'].weight;
+                }
+            }
+            return geoJSON;
+        });
     }
 };
 
diff --git a/gpx/test-data/with_style.gpx b/gpx/test-data/with_style.gpx
index f34ebfdb..6422b44f 100644
--- a/gpx/test-data/with_style.gpx
+++ b/gpx/test-data/with_style.gpx
@@ -16,9 +16,9 @@
         <type>Cycling</type>
         <extensions>
             <gpx_style:line>
-                <color>2d3ee9</color>
+                <color>#2d3ee9</color>
                 <opacity>0.5</opacity>
-                <weight>5</weight>
+                <weight>6</weight>
             </gpx_style:line>
         </extensions>
         <trkseg>
diff --git a/website/src/lib/components/Data.svelte b/website/src/lib/components/Data.svelte
index d0a8e327..469bb33b 100644
--- a/website/src/lib/components/Data.svelte
+++ b/website/src/lib/components/Data.svelte
@@ -1,271 +1,9 @@
 <script lang="ts">
 	import GPX from './GPX.svelte';
-	import { GPXFile, parseGPX } from 'gpx';
 
-	let files: GPXFile[] = [
-		parseGPX(`<?xml version="1.0" encoding="UTF-8"?>
-<gpx xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
-    xmlns="http://www.topografix.com/GPX/1/1" xsi:schemaLocation="http://www.topografix.com/GPX/1/1 http://www.topografix.com/GPX/1/1/gpx.xsd http://www.garmin.com/xmlschemas/GpxExtensions/v3 http://www.garmin.com/xmlschemas/GpxExtensionsv3.xsd http://www.garmin.com/xmlschemas/TrackPointExtension/v1 http://www.garmin.com/xmlschemas/TrackPointExtensionv1.xsd http://www.topografix.com/GPX/gpx_style/0/2 http://www.topografix.com/GPX/gpx_style/0/2/gpx_style.xsd"
-    xmlns:gpxtpx="http://www.garmin.com/xmlschemas/TrackPointExtension/v1"
-    xmlns:gpxx="http://www.garmin.com/xmlschemas/GpxExtensions/v3"
-    xmlns:gpx_style="http://www.topografix.com/GPX/gpx_style/0/2" version="1.1" creator="https://gpx.studio">
-    <metadata>
-        <name>simple</name>
-        <author>
-            <name>gpx.studio</name>
-            <link href="https://gpx.studio"></link>
-        </author>
-    </metadata>
-    <trk>
-        <name>simple</name>
-        <type>Cycling</type>
-        <trkseg>
-            <trkpt lat="50.790867" lon="4.404968">
-                <ele>109.0</ele>
-            </trkpt>
-            <trkpt lat="50.790714" lon="4.405036">
-                <ele>110.8</ele>
-            </trkpt>
-            <trkpt lat="50.790336" lon="4.405259">
-                <ele>110.3</ele>
-            </trkpt>
-            <trkpt lat="50.790165" lon="4.405331">
-                <ele>110.0</ele>
-            </trkpt>
-            <trkpt lat="50.790008" lon="4.405359">
-                <ele>110.3</ele>
-            </trkpt>
-            <trkpt lat="50.789818" lon="4.405359">
-                <ele>109.3</ele>
-            </trkpt>
-            <trkpt lat="50.789409" lon="4.40534">
-                <ele>107.0</ele>
-            </trkpt>
-            <trkpt lat="50.789105" lon="4.405411">
-                <ele>106.0</ele>
-            </trkpt>
-            <trkpt lat="50.788799" lon="4.405527">
-                <ele>108.5</ele>
-            </trkpt>
-            <trkpt lat="50.788645" lon="4.405606">
-                <ele>109.8</ele>
-            </trkpt>
-            <trkpt lat="50.7885" lon="4.405711">
-                <ele>110.8</ele>
-            </trkpt>
-            <trkpt lat="50.78822" lon="4.405959">
-                <ele>112.0</ele>
-            </trkpt>
-            <trkpt lat="50.787956" lon="4.406092">
-                <ele>112.8</ele>
-            </trkpt>
-            <trkpt lat="50.787814" lon="4.406143">
-                <ele>113.5</ele>
-            </trkpt>
-            <trkpt lat="50.787674" lon="4.406177">
-                <ele>114.3</ele>
-            </trkpt>
-            <trkpt lat="50.787451" lon="4.406199">
-                <ele>115.3</ele>
-            </trkpt>
-            <trkpt lat="50.787297" lon="4.406177">
-                <ele>114.8</ele>
-            </trkpt>
-            <trkpt lat="50.78716" lon="4.406098">
-                <ele>114.3</ele>
-            </trkpt>
-            <trkpt lat="50.787045" lon="4.405984">
-                <ele>114.3</ele>
-            </trkpt>
-            <trkpt lat="50.786683" lon="4.405653">
-                <ele>114.5</ele>
-            </trkpt>
-            <trkpt lat="50.786538" lon="4.405543">
-                <ele>115.0</ele>
-            </trkpt>
-            <trkpt lat="50.78635" lon="4.405441">
-                <ele>115.8</ele>
-            </trkpt>
-            <trkpt lat="50.786275" lon="4.40542">
-                <ele>115.8</ele>
-            </trkpt>
-            <trkpt lat="50.786182" lon="4.405435">
-                <ele>116.0</ele>
-            </trkpt>
-            <trkpt lat="50.786121" lon="4.405475">
-                <ele>115.8</ele>
-            </trkpt>
-            <trkpt lat="50.786042" lon="4.405558">
-                <ele>115.5</ele>
-            </trkpt>
-            <trkpt lat="50.785821" lon="4.405925">
-                <ele>114.5</ele>
-            </trkpt>
-            <trkpt lat="50.785672" lon="4.406119">
-                <ele>112.5</ele>
-            </trkpt>
-            <trkpt lat="50.785516" lon="4.406256">
-                <ele>110.8</ele>
-            </trkpt>
-            <trkpt lat="50.785384" lon="4.406364">
-                <ele>109.0</ele>
-            </trkpt>
-            <trkpt lat="50.785126" lon="4.406475">
-                <ele>106.3</ele>
-            </trkpt>
-            <trkpt lat="50.784697" lon="4.406537">
-                <ele>104.3</ele>
-            </trkpt>
-            <trkpt lat="50.784591" lon="4.40657">
-                <ele>104.0</ele>
-            </trkpt>
-            <trkpt lat="50.784507" lon="4.406612">
-                <ele>103.8</ele>
-            </trkpt>
-            <trkpt lat="50.784435" lon="4.40669">
-                <ele>103.3</ele>
-            </trkpt>
-            <trkpt lat="50.784209" lon="4.407148">
-                <ele>103.5</ele>
-            </trkpt>
-            <trkpt lat="50.784162" lon="4.407257">
-                <ele>103.8</ele>
-            </trkpt>
-            <trkpt lat="50.784077" lon="4.407372">
-                <ele>104.8</ele>
-            </trkpt>
-            <trkpt lat="50.784006" lon="4.407435">
-                <ele>105.8</ele>
-            </trkpt>
-            <trkpt lat="50.783924" lon="4.407471">
-                <ele>106.8</ele>
-            </trkpt>
-            <trkpt lat="50.783837" lon="4.407486">
-                <ele>107.8</ele>
-            </trkpt>
-            <trkpt lat="50.783771" lon="4.407472">
-                <ele>108.5</ele>
-            </trkpt>
-            <trkpt lat="50.783697" lon="4.407428">
-                <ele>109.3</ele>
-            </trkpt>
-            <trkpt lat="50.783626" lon="4.407363">
-                <ele>110.0</ele>
-            </trkpt>
-            <trkpt lat="50.783548" lon="4.407274">
-                <ele>110.5</ele>
-            </trkpt>
-            <trkpt lat="50.783458" lon="4.407134">
-                <ele>110.8</ele>
-            </trkpt>
-            <trkpt lat="50.783123" lon="4.406435">
-                <ele>111.8</ele>
-            </trkpt>
-            <trkpt lat="50.782982" lon="4.406168">
-                <ele>112.8</ele>
-            </trkpt>
-            <trkpt lat="50.782871" lon="4.406044">
-                <ele>113.3</ele>
-            </trkpt>
-            <trkpt lat="50.78279" lon="4.406021">
-                <ele>113.5</ele>
-            </trkpt>
-            <trkpt lat="50.782714" lon="4.406018">
-                <ele>113.5</ele>
-            </trkpt>
-            <trkpt lat="50.782607" lon="4.406047">
-                <ele>113.8</ele>
-            </trkpt>
-            <trkpt lat="50.782405" lon="4.406194">
-                <ele>114.8</ele>
-            </trkpt>
-            <trkpt lat="50.782175" lon="4.406413">
-                <ele>115.8</ele>
-            </trkpt>
-            <trkpt lat="50.781749" lon="4.407018">
-                <ele>118.5</ele>
-            </trkpt>
-            <trkpt lat="50.781654" lon="4.407316">
-                <ele>119.5</ele>
-            </trkpt>
-            <trkpt lat="50.781563" lon="4.407764">
-                <ele>121.3</ele>
-            </trkpt>
-            <trkpt lat="50.781487" lon="4.407984">
-                <ele>122.0</ele>
-            </trkpt>
-            <trkpt lat="50.781422" lon="4.408216">
-                <ele>122.8</ele>
-            </trkpt>
-            <trkpt lat="50.781395" lon="4.408508">
-                <ele>123.5</ele>
-            </trkpt>
-            <trkpt lat="50.781399" lon="4.409114">
-                <ele>126.3</ele>
-            </trkpt>
-            <trkpt lat="50.781367" lon="4.409428">
-                <ele>128.0</ele>
-            </trkpt>
-            <trkpt lat="50.781286" lon="4.409607">
-                <ele>129.0</ele>
-            </trkpt>
-            <trkpt lat="50.78116" lon="4.409789">
-                <ele>130.0</ele>
-            </trkpt>
-            <trkpt lat="50.780804" lon="4.409993">
-                <ele>130.8</ele>
-            </trkpt>
-            <trkpt lat="50.780389" lon="4.410334">
-                <ele>131.8</ele>
-            </trkpt>
-            <trkpt lat="50.780232" lon="4.410563">
-                <ele>132.3</ele>
-            </trkpt>
-            <trkpt lat="50.780094" lon="4.410827">
-                <ele>132.8</ele>
-            </trkpt>
-            <trkpt lat="50.779723" lon="4.411582">
-                <ele>135.8</ele>
-            </trkpt>
-            <trkpt lat="50.779591" lon="4.411791">
-                <ele>135.5</ele>
-            </trkpt>
-            <trkpt lat="50.779125" lon="4.412435">
-                <ele>132.5</ele>
-            </trkpt>
-            <trkpt lat="50.778676" lon="4.412979">
-                <ele>134.0</ele>
-            </trkpt>
-            <trkpt lat="50.778194" lon="4.413466">
-                <ele>136.8</ele>
-            </trkpt>
-            <trkpt lat="50.777427" lon="4.414302">
-                <ele>137.5</ele>
-            </trkpt>
-            <trkpt lat="50.777165" lon="4.414736">
-                <ele>137.3</ele>
-            </trkpt>
-            <trkpt lat="50.776927" lon="4.415201">
-                <ele>137.5</ele>
-            </trkpt>
-            <trkpt lat="50.776778" lon="4.415613">
-                <ele>137.3</ele>
-            </trkpt>
-            <trkpt lat="50.776553" lon="4.416425">
-                <ele>134.8</ele>
-            </trkpt>
-            <trkpt lat="50.776326" lon="4.417304">
-                <ele>132.3</ele>
-            </trkpt>
-            <trkpt lat="50.776129" lon="4.418383">
-                <ele>129.5</ele>
-            </trkpt>
-        </trkseg>
-    </trk>
-</gpx>`)
-	];
+	import { files } from '$lib/stores';
 </script>
 
-{#each files as file}
+{#each $files as file}
 	<GPX {file} />
 {/each}
diff --git a/website/src/lib/components/GPX.svelte b/website/src/lib/components/GPX.svelte
index 32cf32d4..e3f9cb64 100644
--- a/website/src/lib/components/GPX.svelte
+++ b/website/src/lib/components/GPX.svelte
@@ -1,32 +1,91 @@
+<script context="module" lang="ts">
+	let id = 0;
+	function getLayerId() {
+		return `gpx-${id++}`;
+	}
+
+	let defaultWeight = 6;
+	let defaultOpacity = 1;
+
+	const colors = [
+		'#ff0000',
+		'#0000ff',
+		'#46e646',
+		'#00ccff',
+		'#ff9900',
+		'#ff00ff',
+		'#ffff32',
+		'#288228',
+		'#9933ff',
+		'#50f0be',
+		'#8c645a'
+	];
+
+	const colorCount: { [key: string]: number } = {};
+	for (let color of colors) {
+		colorCount[color] = 0;
+	}
+
+	// Get the color with the least amount of uses
+	function getColor() {
+		let color = colors.reduce((a, b) => (colorCount[a] <= colorCount[b] ? a : b));
+		colorCount[color]++;
+		return color;
+	}
+</script>
+
 <script lang="ts">
 	import { GPXFile } from 'gpx';
-
 	import { map } from '$lib/stores';
 
 	export let file: GPXFile;
 
+	let layerId = getLayerId();
+	let layerColor = getColor();
+
 	function addGPXLayer() {
-		if (!$map.getSource('gpx')) {
-			$map.addSource('gpx', {
-				type: 'geojson',
-				data: file.toGeoJSON()
-			});
-		}
-		$map.addLayer({
-			id: 'gpx',
-			type: 'line',
-			source: 'gpx',
-			layout: {
-				'line-join': 'round',
-				'line-cap': 'round'
-			},
-			paint: {
-				'line-color': '#888',
-				'line-width': 8
+		if ($map) {
+			if (!$map.getSource(layerId)) {
+				let data = file.toGeoJSON();
+
+				for (let feature of data.features) {
+					if (!feature.properties.color) {
+						feature.properties.color = layerColor;
+					}
+					if (!feature.properties.weight) {
+						feature.properties.weight = defaultWeight;
+					}
+					if (!feature.properties.opacity) {
+						feature.properties.opacity = defaultOpacity;
+					}
+				}
+
+				$map.addSource(layerId, {
+					type: 'geojson',
+					data
+				});
 			}
-		});
+			if (!$map.getLayer(layerId)) {
+				$map.addLayer({
+					id: layerId,
+					type: 'line',
+					source: layerId,
+					layout: {
+						'line-join': 'round',
+						'line-cap': 'round'
+					},
+					paint: {
+						'line-color': ['get', 'color'],
+						'line-width': ['get', 'weight'],
+						'line-opacity': ['get', 'opacity']
+					}
+				});
+			}
+		}
 	}
 
+	addGPXLayer();
+
 	$: if ($map) {
 		$map.on('style.load', () => {
 			addGPXLayer();
diff --git a/website/src/lib/components/Menu.svelte b/website/src/lib/components/Menu.svelte
index 0f789807..101a207a 100644
--- a/website/src/lib/components/Menu.svelte
+++ b/website/src/lib/components/Menu.svelte
@@ -2,18 +2,10 @@
 	import * as Menubar from '$lib/components/ui/menubar/index.js';
 	import { Button } from '$lib/components/ui/button';
 	import Logo from './Logo.svelte';
-	import {
-		Plus,
-		Upload,
-		Copy,
-		Download,
-		Undo2,
-		Redo2,
-		Trash2,
-		HeartHandshake
-	} from 'lucide-svelte';
+	import { Plus, Copy, Download, Undo2, Redo2, Trash2, HeartHandshake } from 'lucide-svelte';
 	import Fa from 'svelte-fa';
 	import { faGoogleDrive } from '@fortawesome/free-brands-svg-icons';
+	import Load from '$lib/components/tools/Load.svelte';
 
 	let distanceUnits = 'metric';
 	let velocityUnits = 'speed';
@@ -33,11 +25,7 @@
 					<Menubar.Item>
 						<Plus size="16" class="mr-1" /> New <Menubar.Shortcut>⌘N</Menubar.Shortcut>
 					</Menubar.Item>
-					<Menubar.Item>
-						<Upload size="16" class="mr-1" /> Load from desktop... <Menubar.Shortcut
-							>⌘O</Menubar.Shortcut
-						>
-					</Menubar.Item>
+					<Load />
 					<Menubar.Item>
 						<Fa icon={faGoogleDrive} class="h-4 w-4 mr-1" />
 						Load from Google Drive...</Menubar.Item
diff --git a/website/src/lib/components/tools/Load.svelte b/website/src/lib/components/tools/Load.svelte
new file mode 100644
index 00000000..f2fec26a
--- /dev/null
+++ b/website/src/lib/components/tools/Load.svelte
@@ -0,0 +1,38 @@
+<script lang="ts">
+	import { parseGPX } from 'gpx';
+
+	import * as Menubar from '$lib/components/ui/menubar/index.js';
+
+	import { Upload } from 'lucide-svelte';
+
+	import { files } from '$lib/stores';
+
+	let input: HTMLInputElement;
+
+	$: if (input) {
+		input.onchange = () => {
+			if (input.files) {
+				for (let i = 0; i < input.files.length; i++) {
+					const file = input.files[i];
+					const reader = new FileReader();
+					reader.onload = () => {
+						$files = [...$files, parseGPX(reader.result?.toString() ?? '')];
+					};
+					reader.readAsText(file);
+				}
+			}
+		};
+	}
+</script>
+
+<Menubar.Item
+	on:click={() => {
+		if (input) {
+			input.click();
+		}
+	}}
+>
+	<Upload size="16" class="mr-1" /> Load from desktop... <Menubar.Shortcut>⌘O</Menubar.Shortcut>
+</Menubar.Item>
+
+<input bind:this={input} type="file" accept=".gpx" multiple class="hidden" />
diff --git a/website/src/lib/stores.ts b/website/src/lib/stores.ts
index 9b168917..6ac32010 100644
--- a/website/src/lib/stores.ts
+++ b/website/src/lib/stores.ts
@@ -1,5 +1,7 @@
 import { writable } from 'svelte/store';
 
 import mapboxgl from 'mapbox-gl';
+import { GPXFile } from 'gpx';
 
-export const map = writable<mapboxgl.Map | null>(null);
\ No newline at end of file
+export const map = writable<mapboxgl.Map | null>(null);
+export const files = writable<GPXFile[]>([]);
\ No newline at end of file