selection utilities

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

@@ -54,6 +54,38 @@ export class SelectionTreeType {
         return false;
     }
 
+    hasAnyParent(item: ListItem, self: boolean = true): boolean {
+        if (this.selected && this.item.level <= item.level && (self || this.item.level < item.level)) {
+            return this.selected;
+        }
+        let id = item.getIdAtLevel(this.item.level);
+        if (id !== undefined) {
+            if (this.children.hasOwnProperty(id)) {
+                return this.children[id].hasAnyParent(item, self);
+            }
+        }
+        return false;
+    }
+
+    hasAnyChildren(item: ListItem, self: boolean = true): boolean {
+        if (this.selected && this.item.level >= item.level && (self || this.item.level > item.level)) {
+            return this.selected;
+        }
+        let id = item.getIdAtLevel(this.item.level);
+        if (id !== undefined) {
+            if (this.children.hasOwnProperty(id)) {
+                return this.children[id].hasAnyChildren(item, self);
+            }
+        } else {
+            for (let key in this.children) {
+                if (this.children[key].hasAnyChildren(item, self)) {
+                    return true;
+                }
+            }
+        }
+        return false;
+    }
+
     getSelected(selection?: ListItem[]): ListItem[] {
         if (selection === undefined) {
             selection = [];
@@ -93,7 +125,14 @@ export class SelectionTreeType {
     }
 };
 
-export type ListLevel = 'root' | 'file' | 'track' | 'segment' | 'waypoints' | 'waypoint';
+export enum ListLevel {
+    ROOT,
+    FILE,
+    TRACK,
+    SEGMENT,
+    WAYPOINTS,
+    WAYPOINT
+}
 
 export abstract class ListItem {
     level: ListLevel;
@@ -110,7 +149,7 @@ export abstract class ListItem {
 
 export class ListRootItem extends ListItem {
     constructor() {
-        super('root');
+        super(ListLevel.ROOT);
     }
 
     getId(): string {
@@ -134,7 +173,7 @@ export class ListFileItem extends ListItem {
     fileId: string;
 
     constructor(fileId: string) {
-        super('file');
+        super(ListLevel.FILE);
         this.fileId = fileId;
     }
 
@@ -144,7 +183,7 @@ export class ListFileItem extends ListItem {
 
     getIdAtLevel(level: ListLevel): string | number | undefined {
         switch (level) {
-            case 'root':
+            case ListLevel.ROOT:
                 return this.fileId;
             default:
                 return undefined;
@@ -169,7 +208,7 @@ export class ListTrackItem extends ListItem {
     trackIndex: number;
 
     constructor(fileId: string, trackIndex: number) {
-        super('track');
+        super(ListLevel.TRACK);
         this.fileId = fileId;
         this.trackIndex = trackIndex;
     }
@@ -180,9 +219,9 @@ export class ListTrackItem extends ListItem {
 
     getIdAtLevel(level: ListLevel): string | number | undefined {
         switch (level) {
-            case 'root':
+            case ListLevel.ROOT:
                 return this.fileId;
-            case 'file':
+            case ListLevel.FILE:
                 return this.trackIndex;
             default:
                 return undefined;
@@ -208,7 +247,7 @@ export class ListTrackSegmentItem extends ListItem {
     segmentIndex: number;
 
     constructor(fileId: string, trackIndex: number, segmentIndex: number) {
-        super('segment');
+        super(ListLevel.SEGMENT);
         this.fileId = fileId;
         this.trackIndex = trackIndex;
         this.segmentIndex = segmentIndex;
@@ -220,11 +259,11 @@ export class ListTrackSegmentItem extends ListItem {
 
     getIdAtLevel(level: ListLevel): string | number | undefined {
         switch (level) {
-            case 'root':
+            case ListLevel.ROOT:
                 return this.fileId;
-            case 'file':
+            case ListLevel.FILE:
                 return this.trackIndex;
-            case 'track':
+            case ListLevel.TRACK:
                 return this.segmentIndex;
             default:
                 return undefined;
@@ -252,7 +291,7 @@ export class ListWaypointsItem extends ListItem {
     fileId: string;
 
     constructor(fileId: string) {
-        super('waypoints');
+        super(ListLevel.WAYPOINTS);
         this.fileId = fileId;
     }
 
@@ -262,9 +301,9 @@ export class ListWaypointsItem extends ListItem {
 
     getIdAtLevel(level: ListLevel): string | number | undefined {
         switch (level) {
-            case 'root':
+            case ListLevel.ROOT:
                 return this.fileId;
-            case 'file':
+            case ListLevel.FILE:
                 return 'waypoints';
             default:
                 return undefined;
@@ -285,7 +324,7 @@ export class ListWaypointItem extends ListItem {
     waypointIndex: number;
 
     constructor(fileId: string, waypointIndex: number) {
-        super('waypoint');
+        super(ListLevel.WAYPOINT);
         this.fileId = fileId;
         this.waypointIndex = waypointIndex;
     }
@@ -296,11 +335,11 @@ export class ListWaypointItem extends ListItem {
 
     getIdAtLevel(level: ListLevel): string | number | undefined {
         switch (level) {
-            case 'root':
+            case ListLevel.ROOT:
                 return this.fileId;
-            case 'file':
+            case ListLevel.FILE:
                 return 'waypoints';
-            case 'waypoints':
+            case ListLevel.WAYPOINTS:
                 return this.waypointIndex;
             default:
                 return undefined;

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

@@ -1,12 +1,14 @@
 <script lang="ts">
 	import { GPXFile, Track, Waypoint, type AnyGPXTreeElement, type GPXTreeElement } from 'gpx';
 	import { CollapsibleTreeNode } from '$lib/components/collapsible-tree/index';
-	import type { GPXFileWithStatistics } from '$lib/db';
-	import type { Readable } from 'svelte/store';
+	import { settings, type GPXFileWithStatistics } from '$lib/db';
+	import { get, type Readable } from 'svelte/store';
 	import FileListNodeContent from './FileListNodeContent.svelte';
 	import FileListNodeLabel from './FileListNodeLabel.svelte';
-	import { afterUpdate, getContext } from 'svelte';
+	import { getContext, onDestroy } from 'svelte';
 	import { type ListItem, type ListTrackItem } from './FileList';
+	import { _ } from 'svelte-i18n';
+	import { selection } from './Selection';
 
 	export let node:
 		| Map<string, Readable<GPXFileWithStatistics | undefined>>
@@ -16,20 +18,33 @@
 
 	let recursive = getContext<boolean>('recursive');
 
+	let collapsible: CollapsibleTreeNode;
+
 	$: label =
 		node instanceof GPXFile
 			? node.metadata.name
 			: node instanceof Track
-				? node.name ?? `Track ${(item as ListTrackItem).trackIndex + 1}`
+				? node.name ?? `${$_('gpx.track')} ${(item as ListTrackItem).trackIndex + 1}`
 				: Array.isArray(node) && node.length > 0 && node[0] instanceof Waypoint
-					? 'Waypoints'
+					? $_('gpx.waypoints')
 					: '';
+
+	const { verticalFileView } = settings;
+	const unsubscribe = selection.subscribe(($selection) => {
+		if (collapsible && get(verticalFileView) && $selection.hasAnyChildren(item, false)) {
+			collapsible.openNode();
+		}
+	});
+
+	onDestroy(() => {
+		unsubscribe();
+	});
 </script>
 
 {#if node instanceof Map}
 	<FileListNodeContent {node} {item} />
 {:else if recursive}
-	<CollapsibleTreeNode id={item.getId()}>
+	<CollapsibleTreeNode id={item.getId()} bind:this={collapsible}>
 		<FileListNodeLabel {item} {label} slot="trigger" />
 		<div slot="content">
 			<FileListNodeContent {node} {item} />

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

@@ -7,8 +7,9 @@
 	import FileListNodeStore from './FileListNodeStore.svelte';
 	import FileListNode from './FileListNode.svelte';
 	import FileListNodeLabel from './FileListNodeLabel.svelte';
-	import { type ListItem } from './FileList';
+	import { ListLevel, type ListItem } from './FileList';
 	import { selection } from './Selection';
+	import { _ } from 'svelte-i18n';
 
 	export let node:
 		| Map<string, Readable<GPXFileWithStatistics | undefined>>
@@ -19,16 +20,16 @@
 
 	let container: HTMLElement;
 	let elements: { [id: string | number]: HTMLElement } = {};
-	let sortableLevel =
+	let sortableLevel: ListLevel =
 		node instanceof Map
-			? 'file'
+			? ListLevel.FILE
 			: node instanceof GPXFile
 				? waypointRoot
-					? 'waypoints'
-					: 'track'
+					? ListLevel.WAYPOINTS
+					: ListLevel.TRACK
 				: node instanceof Track
-					? 'segment'
-					: 'waypoint';
+					? ListLevel.SEGMENT
+					: ListLevel.WAYPOINT;
 	let pull: Record<string, string[]> = {
 		file: ['file', 'track'],
 		track: ['file', 'track'],
@@ -36,23 +37,28 @@
 		waypoint: ['waypoint']
 	};
 	let sortable: Sortable;
-
 	let orientation = getContext<'vertical' | 'horizontal'>('orientation');
 
 	function onSelectChange() {
-		selection.update(($selection) => {
-			$selection.clear();
-			Object.entries(elements).forEach(([id, element]) => {
-				let realId = sortableLevel === 'file' || sortableLevel === 'waypoints' ? id : parseInt(id);
-				$selection.set(item.extend(realId), element.classList.contains('sortable-selected'));
+		let changed = getChangedIds();
+		if (changed.length > 0) {
+			selection.update(($selection) => {
+				$selection.clear();
+				Object.entries(elements).forEach(([id, element]) => {
+					let realId =
+						sortableLevel === ListLevel.FILE || sortableLevel === ListLevel.WAYPOINTS
+							? id
+							: parseInt(id);
+					$selection.set(item.extend(realId), element.classList.contains('sortable-selected'));
+				});
+				return $selection;
 			});
-			return $selection;
-		});
+		}
 	}
 
 	const { fileOrder } = settings;
 	function syncFileOrder() {
-		if (!sortable || sortableLevel !== 'file') {
+		if (!sortable || sortableLevel !== ListLevel.FILE) {
 			return;
 		}
 
@@ -100,9 +106,9 @@
 			avoidImplicitDeselect: true,
 			onSelect: onSelectChange,
 			onDeselect: onSelectChange,
-			sort: sortableLevel !== 'waypoint',
+			sort: sortableLevel !== ListLevel.WAYPOINT,
 			onSort: () => {
-				if (sortableLevel !== 'file') {
+				if (sortableLevel !== ListLevel.FILE) {
 					return;
 				}
 
@@ -120,6 +126,7 @@
 				}
 			}
 		});
+		selection.set(get(selection));
 	});
 
 	$: if ($fileOrder) {
@@ -128,13 +135,13 @@
 
 	afterUpdate(() => {
 		syncFileOrder();
-		if (sortableLevel === 'file') {
+		if (sortableLevel === ListLevel.FILE) {
 			Object.keys(elements).forEach((fileId) => {
 				if (!get(fileObservers).has(fileId)) {
 					delete elements[fileId];
 				}
 			});
-		} else if (sortableLevel === 'waypoints') {
+		} else if (sortableLevel === ListLevel.WAYPOINTS) {
 			if (node.wpt.length === 0) {
 				delete elements['waypoints'];
 			}
@@ -150,17 +157,39 @@
 	});
 
 	const unsubscribe = selection.subscribe(($selection) => {
+		let changed = getChangedIds();
+		for (let id of changed) {
+			let element = elements[id];
+			if (element) {
+				if ($selection.has(item.extend(id))) {
+					Sortable.utils.select(element);
+				} else {
+					Sortable.utils.deselect(element);
+				}
+			}
+		}
+	});
+
+	function getChangedIds() {
+		let changed: (string | number)[] = [];
 		Object.entries(elements).forEach(([id, element]) => {
-			let realId = sortableLevel === 'file' || sortableLevel === 'waypoints' ? id : parseInt(id);
-			let inSelection = $selection.has(item.extend(realId));
+			if (element === null) {
+				console.log('element is null', orientation, sortableLevel, id);
+				return;
+			}
+			let realId =
+				sortableLevel === ListLevel.FILE || sortableLevel === ListLevel.WAYPOINTS
+					? id
+					: parseInt(id);
+			let realItem = item.extend(realId);
+			let inSelection = get(selection).has(realItem);
 			let isSelected = element.classList.contains('sortable-selected');
-			if (inSelection && !isSelected) {
-				Sortable.utils.select(element);
-			} else if (!inSelection && isSelected) {
-				Sortable.utils.deselect(element);
+			if (inSelection !== isSelected) {
+				changed.push(realId);
 			}
 		});
-	});
+		return changed;
+	}
 
 	onDestroy(() => {
 		unsubscribe();
@@ -194,13 +223,16 @@
 	{:else if node instanceof Track}
 		{#each node.children as child, i}
 			<div bind:this={elements[i]} class="ml-1">
-				<FileListNodeLabel item={item.extend(i)} label={`Segment ${i + 1}`} />
+				<FileListNodeLabel item={item.extend(i)} label={`${$_('gpx.segment')} ${i + 1}`} />
 			</div>
 		{/each}
 	{:else if Array.isArray(node) && node.length > 0 && node[0] instanceof Waypoint}
 		{#each node as wpt, i}
 			<div bind:this={elements[i]} class="ml-1">
-				<FileListNodeLabel item={item.extend(i)} label={wpt.name ?? `Waypoint ${i + 1}`} />
+				<FileListNodeLabel
+					item={item.extend(i)}
+					label={wpt.name ?? `${$_('gpx.waypoint')} ${i + 1}`}
+				/>
 			</div>
 		{/each}
 	{/if}

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

@@ -2,13 +2,14 @@
 	import { Button } from '$lib/components/ui/button';
 	import * as ContextMenu from '$lib/components/ui/context-menu';
 	import Shortcut from '$lib/components/Shortcut.svelte';
-	import { dbUtils } from '$lib/db';
-	import { Copy, Trash2 } from 'lucide-svelte';
-	import { type ListItem } from './FileList';
+	import { dbUtils, fileObservers } from '$lib/db';
+	import { Copy, MapPin, Trash2, Waypoints } from 'lucide-svelte';
+	import { ListLevel, ListWaypointItem, type ListItem } from './FileList';
 	import { selectItem, selection } from './Selection';
 	import { _ } from 'svelte-i18n';
 	import { getContext } from 'svelte';
 	import { get } from 'svelte/store';
+	import { gpxLayers } from '$lib/stores';
 
 	export let item: ListItem;
 	export let label: string | undefined;
@@ -34,7 +35,7 @@
 				: 'h-9 px-1.5 shadow-md'}"
 		>
 			<span
-				class="w-full text-left truncate py-1"
+				class="w-full text-left truncate py-1 flex flex-row items-center"
 				on:click={(e) => {
 					e.stopPropagation(); // Avoid toggling the collapsible element
 				}}
@@ -46,13 +47,40 @@
 						$selection.toggle(item);
 					}
 				}}
+				on:mouseenter={() => {
+					if (item instanceof ListWaypointItem) {
+						let layer = get(gpxLayers).get(item.getFileId());
+						let fileStore = get(fileObservers).get(item.getFileId());
+						if (layer && fileStore) {
+							let waypoint = get(fileStore)?.file.wpt[item.getWaypointIndex()];
+							if (waypoint) {
+								layer.showWaypointPopup(waypoint);
+							}
+						}
+					}
+				}}
+				on:mouseleave={() => {
+					if (item instanceof ListWaypointItem) {
+						let layer = get(gpxLayers).get(item.getFileId());
+						if (layer) {
+							layer.hideWaypointPopup();
+						}
+					}
+				}}
 			>
-				{label}
+				{#if item.level === ListLevel.SEGMENT}
+					<Waypoints size="16" class="mr-1 shrink-0" />
+				{:else if item.level === ListLevel.WAYPOINT}
+					<MapPin size="16" class="mr-1 shrink-0" />
+				{/if}
+				<span class="grow truncate">
+					{label}
+				</span>
 			</span>
 		</Button>
 	</ContextMenu.Trigger>
 	<ContextMenu.Content>
-		{#if item.level !== 'waypoints'}
+		{#if item.level !== ListLevel.WAYPOINTS}
 			<ContextMenu.Item on:click={dbUtils.duplicateSelection}>
 				<Copy size="16" class="mr-1" />
 				{$_('menu.duplicate')}

website/src/lib/components/file-list/Selection.ts

@@ -16,13 +16,17 @@ export function selectFile(fileId: string) {
     selectItem(new ListFileItem(fileId));
 }
 
-export function addSelect(fileId: string) {
+export function addSelectItem(item: ListItem) {
     selection.update(($selection) => {
-        $selection.toggle(new ListFileItem(fileId));
+        $selection.toggle(item);
         return $selection;
     });
 }
 
+export function addSelectFile(fileId: string) {
+    addSelectItem(new ListFileItem(fileId));
+}
+
 export function selectAll() {
     selection.update(($selection) => {
         let item: ListItem = new ListRootItem();