edit metadata

gpx/src/io.ts

@@ -73,7 +73,7 @@ export function buildGPX(file: GPXFile): string {
         },
     });
 
-    gpx.attributes.creator = 'https://gpx.studio';
+    gpx.attributes.creator = gpx.attributes.creator ?? 'https://gpx.studio';
     gpx.attributes['version'] = '1.1';
     gpx.attributes['xmlns'] = 'http://www.topografix.com/GPX/1/1';
     gpx.attributes['xmlns:xsi'] = 'http://www.w3.org/2001/XMLSchema-instance';

website/src/lib/components/file-list/FileListNode.svelte

@@ -25,7 +25,8 @@
 	export let node:
 		| Map<string, Readable<GPXFileWithStatistics | undefined>>
 		| GPXTreeElement<AnyGPXTreeElement>
-		| ReadonlyArray<Readonly<Waypoint>>;
+		| ReadonlyArray<Readonly<Waypoint>>
+		| Readonly<Waypoint>;
 	export let item: ListItem;
 
 	let recursive = getContext<boolean>('recursive');
@@ -63,12 +64,12 @@
 {#if node instanceof Map}
 	<FileListNodeContent {node} {item} />
 {:else if node instanceof TrackSegment}
-	<FileListNodeLabel {item} {label} />
+	<FileListNodeLabel {node} {item} {label} />
 {:else if node instanceof Waypoint}
-	<FileListNodeLabel {item} {label} />
+	<FileListNodeLabel {node} {item} {label} />
 {:else if recursive}
 	<CollapsibleTreeNode id={item.getId()} bind:this={collapsible}>
-		<FileListNodeLabel {item} {label} slot="trigger" />
+		<FileListNodeLabel {node} {item} {label} slot="trigger" />
 		<div slot="content">
 			{#key node}
 				<FileListNodeContent {node} {item} />
@@ -76,5 +77,5 @@
 		</div>
 	</CollapsibleTreeNode>
 {:else}
-	<FileListNodeLabel {item} {label} />
+	<FileListNodeLabel {node} {item} {label} />
 {/if}

website/src/lib/components/file-list/FileListNodeContent.svelte

@@ -28,7 +28,8 @@
 	export let node:
 		| Map<string, Readable<GPXFileWithStatistics | undefined>>
 		| GPXTreeElement<AnyGPXTreeElement>
-		| ReadonlyArray<Readonly<Waypoint>>;
+		| ReadonlyArray<Readonly<Waypoint>>
+		| Readonly<Waypoint>;
 	export let item: ListItem;
 	export let waypointRoot: boolean = false;
 

website/src/lib/components/file-list/FileListNodeLabel.svelte

@@ -1,9 +1,13 @@
 <script lang="ts">
 	import { Button } from '$lib/components/ui/button';
+	import { Input } from '$lib/components/ui/input';
+	import { Textarea } from '$lib/components/ui/textarea';
+	import { Label } from '$lib/components/ui/label/index.js';
 	import * as ContextMenu from '$lib/components/ui/context-menu';
+	import * as Popover from '$lib/components/ui/popover';
 	import Shortcut from '$lib/components/Shortcut.svelte';
 	import { dbUtils, getFile, settings } from '$lib/db';
-	import { Copy, MapPin, Plus, Trash2, Waypoints } from 'lucide-svelte';
+	import { Copy, Info, MapPin, Plus, Save, Trash2, Waypoints } from 'lucide-svelte';
 	import {
 		ListFileItem,
 		ListLevel,
@@ -13,17 +17,44 @@
 	} from './FileList';
 	import { selectItem, selection } from './Selection';
 	import { _ } from 'svelte-i18n';
-	import { getContext } from 'svelte';
+	import { getContext, onMount } from 'svelte';
 	import { get } from 'svelte/store';
 	import { gpxLayers } from '$lib/stores';
-	import { Track, TrackSegment } from 'gpx';
+	import {
+		GPXTreeElement,
+		Track,
+		TrackSegment,
+		type AnyGPXTreeElement,
+		Waypoint,
+		GPXFile
+	} from 'gpx';
 
+	export let node:
+		| GPXTreeElement<AnyGPXTreeElement>
+		| ReadonlyArray<Readonly<Waypoint>>
+		| Readonly<Waypoint>;
 	export let item: ListItem;
 	export let label: string | undefined;
 
 	let orientation = getContext<'vertical' | 'horizontal'>('orientation');
 
 	const { verticalFileView } = settings;
+
+	$: singleSelection = $selection.size === 1;
+
+	let openEditMetadata: boolean = false;
+	let name: string =
+		node instanceof GPXFile
+			? node.metadata.name ?? ''
+			: node instanceof Track
+				? node.name ?? ''
+				: '';
+	let description: string =
+		node instanceof GPXFile
+			? node.metadata.desc ?? ''
+			: node instanceof Track
+				? node.desc ?? ''
+				: '';
 </script>
 
 <!-- svelte-ignore a11y-click-events-have-key-events -->
@@ -43,6 +74,36 @@
 				? 'h-fit'
 				: 'h-9 px-1.5 shadow-md'}"
 		>
+			{#if item instanceof ListFileItem || item instanceof ListTrackItem}
+				<Popover.Root bind:open={openEditMetadata}>
+					<Popover.Trigger />
+					<Popover.Content side="top" sideOffset={22} class="flex flex-col gap-3">
+						<Label for="name">{$_('menu.metadata.name')}</Label>
+						<Input bind:value={name} id="name" class="font-semibold h-8" />
+						<Label for="description">{$_('menu.metadata.description')}</Label>
+						<Textarea bind:value={description} id="description" />
+						<Button
+							variant="outline"
+							on:click={() => {
+								dbUtils.applyToFile(item.getFileId(), (file) => {
+									if (item instanceof ListFileItem && node instanceof GPXFile) {
+										file.metadata.name = name;
+										file.metadata.desc = description;
+									} else if (item instanceof ListTrackItem && node instanceof Track) {
+										file.trk[item.getTrackIndex()].name = name;
+										file.trk[item.getTrackIndex()].desc = description;
+									}
+									return file;
+								});
+								openEditMetadata = false;
+							}}
+						>
+							<Save size="16" class="mr-1" />
+							{$_('menu.metadata.save')}
+						</Button>
+					</Popover.Content>
+				</Popover.Root>
+			{/if}
 			<span
 				class="w-full text-left truncate py-1 flex flex-row items-center"
 				on:contextmenu={(e) => {
@@ -86,9 +147,10 @@
 		</Button>
 	</ContextMenu.Trigger>
 	<ContextMenu.Content>
-		{#if $verticalFileView && $selection.size === 1}
+		{#if $verticalFileView}
 			{#if item instanceof ListFileItem}
 				<ContextMenu.Item
+					disabled={!singleSelection}
 					on:click={() =>
 						dbUtils.applyToFile(
 							item.getFileId(),
@@ -98,9 +160,9 @@
 					<Plus size="16" class="mr-1" />
 					{$_('menu.new_track')}
 				</ContextMenu.Item>
-				<ContextMenu.Separator />
 			{:else if item instanceof ListTrackItem}
 				<ContextMenu.Item
+					disabled={!singleSelection}
 					on:click={() => {
 						let trackIndex = item.getTrackIndex();
 						dbUtils.applyToFile(
@@ -118,9 +180,15 @@
 					<Plus size="16" class="mr-1" />
 					{$_('menu.new_segment')}
 				</ContextMenu.Item>
-				<ContextMenu.Separator />
 			{/if}
 		{/if}
+		{#if item instanceof ListFileItem || item instanceof ListTrackItem}
+			<ContextMenu.Item disabled={!singleSelection} on:click={() => (openEditMetadata = true)}>
+				<Info size="16" class="mr-1" />
+				{$_('menu.metadata.button')}
+			</ContextMenu.Item>
+			<ContextMenu.Separator />
+		{/if}
 		{#if item.level !== ListLevel.WAYPOINTS}
 			<ContextMenu.Item on:click={dbUtils.duplicateSelection}>
 				<Copy size="16" class="mr-1" />

website/src/lib/components/toolbar/tools/Waypoint.svelte

@@ -19,7 +19,7 @@
 	import { onDestroy, onMount } from 'svelte';
 	import { map } from '$lib/stores';
 	import { resetCursor, setCrosshairCursor } from '$lib/utils';
-	import { CirclePlus, CircleX, RefreshCw } from 'lucide-svelte';
+	import { CirclePlus, CircleX, Save } from 'lucide-svelte';
 
 	let name: string;
 	let description: string;
@@ -168,9 +168,9 @@
 
 <div class="flex flex-col gap-3 w-96">
 	<fieldset class="flex flex-col gap-2">
-		<Label for="name">{$_('toolbar.waypoint.name')}</Label>
+		<Label for="name">{$_('menu.metadata.name')}</Label>
 		<Input bind:value={name} id="name" class="font-semibold h-8" />
-		<Label for="description">{$_('toolbar.waypoint.description')}</Label>
+		<Label for="description">{$_('menu.metadata.description')}</Label>
 		<Textarea bind:value={description} id="description" />
 		<div class="flex flex-row gap-2">
 			<div>
@@ -207,8 +207,8 @@
 			on:click={createOrUpdateWaypoint}
 		>
 			{#if $selectedWaypoint}
-				<RefreshCw size="16" class="mr-1" />
+				<Save size="16" class="mr-1" />
-				{$_('toolbar.waypoint.update')}
+				{$_('menu.metadata.save')}
 			{:else}
 				<CirclePlus size="16" class="mr-1" />
 				{$_('toolbar.waypoint.create')}

website/src/locales/en.json

@@ -4,6 +4,12 @@
         "new_filename": "new",
         "new_track": "New track",
         "new_segment": "New segment",
+        "metadata": {
+            "button": "Edit info",
+            "name": "Name",
+            "description": "Description",
+            "save": "Save"
+        },
         "load_desktop": "Load...",
         "load_drive": "Load from Google Drive...",
         "duplicate": "Duplicate",
@@ -149,12 +155,9 @@
         },
         "waypoint": {
             "tooltip": "Create and edit points of interest",
-            "name": "Name",
-            "description": "Description",
             "longitude": "Longitude",
             "latitude": "Latitude",
             "create": "Create point of interest",
-            "update": "Update point of interest",
             "help": "Fill in the form to create a new point of interest, or click on an existing one to edit it. Click on the map to fill the coordinates, or drag points of interest to move them.",
             "help_no_selection": "Select a file item to create or edit points of interest"
         },