working file tree

website/src/lib/components/App.svelte

@@ -1,14 +1,13 @@
 <script lang="ts">
 	import GPXLayers from '$lib/components/gpx-layer/GPXLayers.svelte';
 	import ElevationProfile from '$lib/components/ElevationProfile.svelte';
-	import FileList from '$lib/components/FileList.svelte';
+	import FileList from '$lib/components/file-list/FileList.svelte';
 	import GPXStatistics from '$lib/components/GPXStatistics.svelte';
 	import Map from '$lib/components/Map.svelte';
 	import Menu from '$lib/components/Menu.svelte';
 	import Toolbar from '$lib/components/toolbar/Toolbar.svelte';
 	import LayerControl from '$lib/components/layer-control/LayerControl.svelte';
 	import { Toaster } from '$lib/components/ui/sonner';
-	import FileList2 from './file-list/FileList2.svelte';
 </script>
 
 <div class="flex flex-row w-screen h-screen">
@@ -26,7 +25,7 @@
 			<ElevationProfile />
 		</div>
 	</div>
-	<FileList2 />
+	<FileList />
 </div>
 
 <style lang="postcss">

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

@@ -3,10 +3,16 @@
 	import FileListNode from './FileListNode.svelte';
 
 	import { fileObservers } from '$lib/db';
+	import { setContext } from 'svelte';
+	import { writable } from 'svelte/store';
+
+	export let selected = writable(new Set<string>());
+
+	setContext('selected', selected);
 </script>
 
 <ScrollArea class="w-fit p-1 pr-4 border">
-	<div class="w-60 flex flex-col gap-1">
+	<div class="w-60 flex flex-col">
 		<FileListNode node={$fileObservers} id="root" />
 	</div>
 </ScrollArea>

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

@@ -5,6 +5,7 @@
 	import type { Readable } from 'svelte/store';
 	import FileListNodeContent from './FileListNodeContent.svelte';
 	import { createEventDispatcher } from 'svelte';
+	import FileListNodeLabel from './FileListNodeLabel.svelte';
 
 	export let node:
 		| Map<string, Readable<GPXFileWithStatistics | undefined>>
@@ -24,15 +25,17 @@
 	<FileListNodeContent {node} {id} />
 {:else}
 	<CollapsibleTreeNode {id} on:click={forwardId}>
-		<span slot="trigger" class="truncate">
+		<FileListNodeLabel
-			{#if node instanceof GPXFile}
+			{id}
-				{node.metadata.name}
+			label={node instanceof GPXFile
-			{:else if node instanceof Track}
+				? node.metadata.name
-				{node.name ?? `Track ${index + 1}`}
+				: node instanceof Track
-			{:else if Array.isArray(node) && node.length > 0 && node[0] instanceof Waypoint}
+					? node.name ?? `Track ${index + 1}`
-				Waypoints
+					: Array.isArray(node) && node.length > 0 && node[0] instanceof Waypoint
-			{/if}
+						? 'Waypoints'
-		</span>
+						: ''}
+			slot="trigger"
+		/>
 		<div slot="content">
 			<FileListNodeContent {node} {id} />
 		</div>

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

@@ -1,25 +1,30 @@
 <script lang="ts">
 	import { GPXFile, Track, Waypoint, type AnyGPXTreeElement, type GPXTreeElement } from 'gpx';
 	import { Button } from '$lib/components/ui/button';
-	import { onMount } from 'svelte';
+	import { getContext, onDestroy, onMount } from 'svelte';
 	import Sortable from 'sortablejs/Sortable';
 	import type { GPXFileWithStatistics } from '$lib/db';
-	import type { Readable } from 'svelte/store';
+	import type { Readable, Writable } from 'svelte/store';
 	import FileListNodeStore from './FileListNodeStore.svelte';
 	import FileListNode from './FileListNode.svelte';
+	import FileListNodeLabel from './FileListNodeLabel.svelte';
 
 	export let node:
 		| Map<string, Readable<GPXFileWithStatistics | undefined>>
 		| GPXTreeElement<AnyGPXTreeElement>
 		| ReadonlyArray<Readonly<Waypoint>>;
+	export let waypointRoot: boolean = false;
 	export let id: string;
 
 	let container: HTMLElement;
+	let items: { [id: string | number]: HTMLElement } = {};
 	let sortableLevel =
 		node instanceof Map
 			? 'file'
 			: node instanceof GPXFile
-				? 'track'
+				? waypointRoot
+					? 'waypoints'
+					: 'track'
 				: node instanceof Track
 					? 'segment'
 					: 'waypoint';
@@ -31,6 +36,20 @@
 	};
 	let sortable: Sortable;
 
+	let selected = getContext<Writable<Set<string>>>('selected');
+
+	function onSelectChange() {
+		selected.update(($selected) => {
+			$selected.clear();
+			Object.entries(items).forEach(([id, item]) => {
+				if (item.classList.contains('sortable-selected')) {
+					$selected.add(id);
+				}
+			});
+			return $selected;
+		});
+	}
+
 	onMount(() => {
 		sortable = Sortable.create(container, {
 			group: {
@@ -39,67 +58,119 @@
 			forceAutoScrollFallback: true,
 			multiDrag: true,
 			multiDragKey: 'Meta',
-			selectedClass: 'sortable-selected',
+			avoidImplicitDeselect: true,
-			avoidImplicitDeselect: true
+			onSelect: onSelectChange,
+			onDeselect: onSelectChange,
+			sort: sortableLevel !== 'waypoint'
 		});
 	});
 
 	function handleClick(id: string) {
-		console.log('handle click for', id);
+		//console.log('handle click for', id);
+	}
+
+	const unsubscribe = selected.subscribe(($selected) => {
+		Object.entries(items).forEach(([id, item]) => {
+			if ($selected.has(id) && !item.classList.contains('sortable-selected')) {
+				Sortable.utils.select(item);
+			} else if (!$selected.has(id) && item.classList.contains('sortable-selected')) {
+				Sortable.utils.deselect(item);
+			}
+		});
+	});
+
+	onDestroy(() => {
+		unsubscribe();
+	});
+
+	function getChildId(i: number): string {
+		switch (sortableLevel) {
+			case 'track':
+				return `${id}-track-${i}`;
+			case 'segment':
+				return `${id}-seg-${i}`;
+			case 'waypoint':
+				return `${id}-${i}`;
+		}
+		return '';
 	}
 </script>
 
-<div bind:this={container} class="flex flex-col gap-0.5">
+<div bind:this={container} class="sortable flex flex-col">
 	{#if node instanceof Map}
-		{#each Array.from(node.values()) as file}
+		{#each node as [fileId, file]}
-			<div>
+			<div bind:this={items[fileId]}>
 				<FileListNodeStore {file} on:click={(e) => handleClick(e.detail.id)} />
 			</div>
 		{/each}
 	{:else if node instanceof GPXFile}
-		{#each node.children as child, i}
+		{#if waypointRoot}
-			<div>
+			{#if node.wpt.length > 0}
-				<FileListNode
+				<div bind:this={items[`${id}-wpt`]}>
-					node={child}
+					<FileListNode
-					id={`${id}-track-${i}`}
+						node={node.wpt}
-					index={i}
+						id={`${id}-wpt`}
-					on:click={(e) => handleClick(e.detail.id)}
+						on:click={(e) => handleClick(e.detail.id)}
-				/>
+					/>
-			</div>
+				</div>
-		{/each}
+			{/if}
-		{#if node.wpt.length > 0}
+		{:else}
-			<FileListNode node={node.wpt} id={`${id}-wpt`} on:click={(e) => handleClick(e.detail.id)} />
+			{#each node.children as child, i}
+				<div bind:this={items[getChildId(i)]}>
+					<FileListNode
+						node={child}
+						id={getChildId(i)}
+						index={i}
+						on:click={(e) => handleClick(e.detail.id)}
+					/>
+				</div>
+			{/each}
 		{/if}
 	{:else if node instanceof Track}
 		{#each node.children as child, i}
-			<div>
+			<div bind:this={items[getChildId(i)]}>
 				<div>
 					<Button
 						variant="ghost"
-						class="ml-1 truncate flex flex-row justify-start py-0 px-1 h-fit"
+						class="p-0 px-1 h-fit w-full"
-						on:click={() => handleClick(`${id}-seg-${i + 1}`)}>{`Segment ${i + 1}`}</Button
+						on:click={() => handleClick(getChildId(i))}
 					>
+						<FileListNodeLabel id={getChildId(i)} label={`Segment ${i + 1}`} />
+					</Button>
 				</div>
 			</div>
 		{/each}
 	{:else if Array.isArray(node) && node.length > 0 && node[0] instanceof Waypoint}
 		{#each node as wpt, i}
-			<div>
+			<div bind:this={items[getChildId(i)]}>
 				<div>
 					<Button
 						variant="ghost"
-						class="ml-1 flex flex-row justify-start py-0 px-1 h-fit"
+						class="p-0 px-1 h-fit w-full"
-						on:click={() => handleClick(`${id}-${i + 1}`)}
+						on:click={() => handleClick(getChildId(i))}
-						><span class="truncate">{wpt.name ?? `Waypoint ${i + 1}`}</span></Button
 					>
+						<FileListNodeLabel id={getChildId(i)} label={wpt.name ?? `Waypoint ${i + 1}`} />
+					</Button>
 				</div>
 			</div>
 		{/each}
 	{/if}
 </div>
 
+{#if node instanceof GPXFile}
+	{#if !waypointRoot}
+		<svelte:self {node} {id} waypointRoot={true} />
+	{/if}
+{/if}
+
 <style lang="postcss">
-	div :global(.sortable-selected > * > button) {
+	.sortable > div {
+		@apply rounded-md;
+		@apply h-fit;
+		@apply leading-none;
+	}
+
+	div :global(.sortable-selected) {
 		@apply bg-accent;
 	}
 </style>

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

@@ -0,0 +1,35 @@
+<script lang="ts">
+	import { getContext } from 'svelte';
+	import { type Writable } from 'svelte/store';
+
+	export let id: string;
+	export let label: string | undefined;
+
+	let selected = getContext<Writable<Set<string>>>('selected');
+</script>
+
+<!-- svelte-ignore a11y-click-events-have-key-events -->
+<!-- svelte-ignore a11y-no-static-element-interactions -->
+<span
+	class="w-full text-left truncate py-1"
+	on:click={(e) => {
+		e.stopPropagation(); // Avoid toggling the collapsible element
+	}}
+	on:contextmenu={(e) => {
+		if (e.ctrlKey) {
+			// Add to selection instead of opening context menu
+			e.preventDefault();
+			e.stopPropagation();
+			selected.update((value) => {
+				if (value.has(id)) {
+					value.delete(id);
+				} else {
+					value.add(id);
+				}
+				return value;
+			});
+		}
+	}}
+>
+	{label}
+</span>