progress

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

@@ -4,24 +4,22 @@
 
 	import { fileObservers } from '$lib/db';
 	import { setContext } from 'svelte';
-	import { writable } from 'svelte/store';
+	import { ListRootItem } from './FileList';
 
 	export let orientation: 'vertical' | 'horizontal';
 	export let recursive = false;
-	export let selected = writable(new Set<string>());
 
 	setContext('orientation', orientation);
 	setContext('recursive', recursive);
-	setContext('selected', selected);
 </script>
 
 <ScrollArea
-	class={orientation === 'vertical' ? 'p-1 pr-3 border-l' : 'h-10 px-1'}
+	class={orientation === 'vertical' ? 'p-1 pr-3' : 'h-10 px-1'}
 	{orientation}
 	scrollbarXClasses={orientation === 'vertical' ? '' : 'mt-1 h-2'}
 	scrollbarYClasses={orientation === 'vertical' ? '' : ''}
 >
 	<div class="flex {orientation === 'vertical' ? 'flex-col' : 'flex-row'} {$$props.class ?? ''}">
-		<FileListNode node={$fileObservers} id="root" />
+		<FileListNode node={$fileObservers} item={new ListRootItem()} />
 	</div>
 </ScrollArea>

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

@@ -0,0 +1,301 @@
+export class SelectionTreeType {
+    item: ListItem;
+    selected: boolean;
+    children: {
+        [key: string | number]: SelectionTreeType
+    };
+
+    constructor(item: ListItem) {
+        this.item = item;
+        this.selected = false;
+        this.children = {};
+    }
+
+    clear() {
+        this.selected = false;
+        for (let key in this.children) {
+            this.children[key].clear();
+        }
+    }
+
+    _setOrToggle(item: ListItem, value?: boolean) {
+        if (item.level === this.item.level) {
+            this.selected = value === undefined ? !this.selected : value;
+        } else {
+            let id = item.getIdAtLevel(this.item.level);
+            if (id !== undefined) {
+                if (!this.children.hasOwnProperty(id)) {
+                    this.children[id] = new SelectionTreeType(this.item.extend(id));
+                }
+                this.children[id]._setOrToggle(item, value);
+            }
+        }
+    }
+
+    set(item: ListItem, value: boolean) {
+        this._setOrToggle(item, value);
+    }
+
+    toggle(item: ListItem) {
+        this._setOrToggle(item);
+    }
+
+    has(item: ListItem): boolean {
+        if (item.level === this.item.level) {
+            return this.selected;
+        } else {
+            let id = item.getIdAtLevel(this.item.level);
+            if (id !== undefined) {
+                if (this.children.hasOwnProperty(id)) {
+                    return this.children[id].has(item);
+                }
+            }
+        }
+        return false;
+    }
+
+    getSelected(selection?: ListItem[]): ListItem[] {
+        if (selection === undefined) {
+            selection = [];
+        }
+        if (this.selected) {
+            selection.push(this.item);
+        }
+        for (let key in this.children) {
+            this.children[key].getSelected(selection);
+        }
+        return selection;
+    }
+
+    forEach(callback: (item: ListItem) => void) {
+        if (this.selected) {
+            callback(this.item);
+        }
+        for (let key in this.children) {
+            this.children[key].forEach(callback);
+        }
+    }
+
+    getChild(id: string | number): SelectionTreeType | undefined {
+        return this.children[id];
+    }
+
+    get size(): number {
+        let size = this.selected ? 1 : 0;
+        for (let key in this.children) {
+            size += this.children[key].size;
+        }
+        return size;
+    }
+};
+
+export type ListLevel = 'root' | 'file' | 'track' | 'segment' | 'waypoints' | 'waypoint';
+
+export abstract class ListItem {
+    level: ListLevel;
+
+    constructor(level: ListLevel) {
+        this.level = level;
+    }
+
+    abstract getId(): string | number;
+    abstract getIdAtLevel(level: ListLevel): string | number | undefined;
+    abstract getFileId(): string;
+    abstract extend(id: string | number): ListItem;
+}
+
+export class ListRootItem extends ListItem {
+    constructor() {
+        super('root');
+    }
+
+    getId(): string {
+        return 'root';
+    }
+
+    getIdAtLevel(level: ListLevel): string | number | undefined {
+        return undefined;
+    }
+
+    getFileId(): string {
+        return '';
+    }
+
+    extend(id: string): ListFileItem {
+        return new ListFileItem(id);
+    }
+}
+
+export class ListFileItem extends ListItem {
+    fileId: string;
+
+    constructor(fileId: string) {
+        super('file');
+        this.fileId = fileId;
+    }
+
+    getId(): string {
+        return this.fileId;
+    }
+
+    getIdAtLevel(level: ListLevel): string | number | undefined {
+        switch (level) {
+            case 'root':
+                return this.fileId;
+            default:
+                return undefined;
+        }
+    }
+
+    getFileId(): string {
+        return this.fileId;
+    }
+
+    extend(id: number | 'waypoints'): ListTrackItem | ListWaypointsItem {
+        if (id === 'waypoints') {
+            return new ListWaypointsItem(this.fileId);
+        } else {
+            return new ListTrackItem(this.fileId, id);
+        }
+    }
+}
+
+export class ListTrackItem extends ListItem {
+    fileId: string;
+    trackIndex: number;
+
+    constructor(fileId: string, trackIndex: number) {
+        super('track');
+        this.fileId = fileId;
+        this.trackIndex = trackIndex;
+    }
+
+    getId(): number {
+        return this.trackIndex;
+    }
+
+    getIdAtLevel(level: ListLevel): string | number | undefined {
+        switch (level) {
+            case 'root':
+                return this.fileId;
+            case 'file':
+                return this.trackIndex;
+            default:
+                return undefined;
+        }
+    }
+
+    getFileId(): string {
+        return this.fileId;
+    }
+
+    extend(id: number): ListSegmentItem {
+        return new ListSegmentItem(this.fileId, this.trackIndex, id);
+    }
+}
+
+export class ListSegmentItem extends ListItem {
+    fileId: string;
+    trackIndex: number;
+    segmentIndex: number;
+
+    constructor(fileId: string, trackIndex: number, segmentIndex: number) {
+        super('segment');
+        this.fileId = fileId;
+        this.trackIndex = trackIndex;
+        this.segmentIndex = segmentIndex;
+    }
+
+    getId(): number {
+        return this.segmentIndex;
+    }
+
+    getIdAtLevel(level: ListLevel): string | number | undefined {
+        switch (level) {
+            case 'root':
+                return this.fileId;
+            case 'file':
+                return this.trackIndex;
+            case 'track':
+                return this.segmentIndex;
+            default:
+                return undefined;
+        }
+    }
+
+    getFileId(): string {
+        return this.fileId;
+    }
+
+    extend(): ListSegmentItem {
+        return this;
+    }
+}
+
+export class ListWaypointsItem extends ListItem {
+    fileId: string;
+
+    constructor(fileId: string) {
+        super('waypoints');
+        this.fileId = fileId;
+    }
+
+    getId(): string {
+        return 'waypoints';
+    }
+
+    getIdAtLevel(level: ListLevel): string | number | undefined {
+        switch (level) {
+            case 'root':
+                return this.fileId;
+            case 'file':
+                return 'waypoints';
+            default:
+                return undefined;
+        }
+    }
+
+    getFileId(): string {
+        return this.fileId;
+    }
+
+    extend(id: number): ListWaypointItem {
+        return new ListWaypointItem(this.fileId, id);
+    }
+}
+
+export class ListWaypointItem extends ListItem {
+    fileId: string;
+    waypointIndex: number;
+
+    constructor(fileId: string, waypointIndex: number) {
+        super('waypoint');
+        this.fileId = fileId;
+        this.waypointIndex = waypointIndex;
+    }
+
+    getId(): number {
+        return this.waypointIndex;
+    }
+
+    getIdAtLevel(level: ListLevel): string | number | undefined {
+        switch (level) {
+            case 'root':
+                return this.fileId;
+            case 'file':
+                return 'waypoints';
+            case 'waypoints':
+                return this.waypointIndex;
+            default:
+                return undefined;
+        }
+    }
+
+    getFileId(): string {
+        return this.fileId;
+    }
+
+    extend(): ListWaypointItem {
+        return this;
+    }
+}

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

@@ -6,13 +6,13 @@
 	import FileListNodeContent from './FileListNodeContent.svelte';
 	import FileListNodeLabel from './FileListNodeLabel.svelte';
 	import { getContext } from 'svelte';
+	import { type ListItem, type ListTrackItem } from './FileList';
 
 	export let node:
 		| Map<string, Readable<GPXFileWithStatistics | undefined>>
 		| GPXTreeElement<AnyGPXTreeElement>
 		| ReadonlyArray<Readonly<Waypoint>>;
-	export let id: string;
-	export let index: number = 0;
+	export let item: ListItem;
 
 	let recursive = getContext<boolean>('recursive');
 
@@ -20,21 +20,21 @@
 		node instanceof GPXFile
 			? node.metadata.name
 			: node instanceof Track
-				? node.name ?? `Track ${index + 1}`
+				? node.name ?? `Track ${(item as ListTrackItem).trackIndex + 1}`
 				: Array.isArray(node) && node.length > 0 && node[0] instanceof Waypoint
 					? 'Waypoints'
 					: '';
 </script>
 
 {#if node instanceof Map}
-	<FileListNodeContent {node} {id} />
+	<FileListNodeContent {node} {item} />
 {:else if recursive}
-	<CollapsibleTreeNode {id}>
-		<FileListNodeLabel {id} {label} slot="trigger" />
+	<CollapsibleTreeNode id={item.getId()}>
+		<FileListNodeLabel {item} {label} slot="trigger" />
 		<div slot="content">
-			<FileListNodeContent {node} {id} />
+			<FileListNodeContent {node} {item} />
 		</div>
 	</CollapsibleTreeNode>
 {:else}
-	<FileListNodeLabel {id} {label} />
+	<FileListNodeLabel {item} {label} />
 {/if}

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

@@ -3,20 +3,22 @@
 	import { afterUpdate, getContext, onDestroy, onMount } from 'svelte';
 	import Sortable from 'sortablejs/Sortable';
 	import { settings, type GPXFileWithStatistics } from '$lib/db';
-	import { get, type Readable, type Writable } from 'svelte/store';
+	import { get, type Readable } from 'svelte/store';
 	import FileListNodeStore from './FileListNodeStore.svelte';
 	import FileListNode from './FileListNode.svelte';
 	import FileListNodeLabel from './FileListNodeLabel.svelte';
+	import { type ListItem } from './FileList';
+	import { selection } from './Selection';
 
 	export let node:
 		| Map<string, Readable<GPXFileWithStatistics | undefined>>
 		| GPXTreeElement<AnyGPXTreeElement>
 		| ReadonlyArray<Readonly<Waypoint>>;
+	export let item: ListItem;
 	export let waypointRoot: boolean = false;
-	export let id: string;
 
 	let container: HTMLElement;
-	let items: { [id: string | number]: HTMLElement } = {};
+	let elements: { [id: string | number]: HTMLElement } = {};
 	let sortableLevel =
 		node instanceof Map
 			? 'file'
@@ -36,17 +38,15 @@
 	let sortable: Sortable;
 
 	let orientation = getContext<'vertical' | 'horizontal'>('orientation');
-	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);
-				}
+		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'));
 			});
-			return $selected;
+			return $selection;
 		});
 	}
 
@@ -54,6 +54,13 @@
 		if (sortableLevel !== 'file') {
 			return;
 		}
+
+		/*Object.keys(buttons).forEach((fileId) => {
+			if (!get(fileObservers).has(fileId)) {
+				delete buttons[fileId];
+			}
+		});*/
+
 		const currentOrder = sortable.toArray();
 		if (currentOrder.length !== $fileOrder.length) {
 			sortable.sort($fileOrder);
@@ -108,14 +115,18 @@
 
 	afterUpdate(() => {
 		syncFileOrder();
+		// TODO: update selection if files are removed
 	});
 
-	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);
+	const unsubscribe = selection.subscribe(($selection) => {
+		Object.entries(elements).forEach(([id, element]) => {
+			let realId = sortableLevel === 'file' || sortableLevel === 'waypoints' ? id : parseInt(id);
+			let inSelection = $selection.has(item.extend(realId));
+			let isSelected = element.classList.contains('sortable-selected');
+			if (inSelection && !isSelected) {
+				Sortable.utils.select(element);
+			} else if (!inSelection && isSelected) {
+				Sortable.utils.deselect(element);
 			}
 		});
 	});
@@ -123,18 +134,6 @@
 	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
@@ -143,38 +142,34 @@
 >
 	{#if node instanceof Map}
 		{#each node as [fileId, file]}
-			<div bind:this={items[fileId]} data-id={fileId}>
+			<div bind:this={elements[fileId]} data-id={fileId}>
 				<FileListNodeStore {file} />
 			</div>
 		{/each}
 	{:else if node instanceof GPXFile}
 		{#if waypointRoot}
 			{#if node.wpt.length > 0}
-				<div bind:this={items[`${id}-wpt`]}>
-					<FileListNode node={node.wpt} id={`${id}-wpt`} />
+				<div bind:this={elements['waypoints']}>
+					<FileListNode node={node.wpt} item={item.extend('waypoints')} />
 				</div>
 			{/if}
 		{:else}
 			{#each node.children as child, i}
-				<div bind:this={items[getChildId(i)]}>
-					<FileListNode node={child} id={getChildId(i)} index={i} />
+				<div bind:this={elements[i]}>
+					<FileListNode node={child} item={item.extend(i)} />
 				</div>
 			{/each}
 		{/if}
 	{:else if node instanceof Track}
 		{#each node.children as child, i}
-			<div bind:this={items[getChildId(i)]} class="ml-1">
-				<div>
-					<FileListNodeLabel id={getChildId(i)} label={`Segment ${i + 1}`} />
-				</div>
+			<div bind:this={elements[i]} class="ml-1">
+				<FileListNodeLabel item={item.extend(i)} label={`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={items[getChildId(i)]} class="ml-1">
-				<div>
-					<FileListNodeLabel id={getChildId(i)} label={wpt.name ?? `Waypoint ${i + 1}`} />
-				</div>
+			<div bind:this={elements[i]} class="ml-1">
+				<FileListNodeLabel item={item.extend(i)} label={wpt.name ?? `Waypoint ${i + 1}`} />
 			</div>
 		{/each}
 	{/if}
@@ -182,7 +177,7 @@
 
 {#if node instanceof GPXFile}
 	{#if !waypointRoot}
-		<svelte:self {node} {id} waypointRoot={true} />
+		<svelte:self {node} {item} waypointRoot={true} />
 	{/if}
 {/if}
 

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

@@ -4,16 +4,14 @@
 	import Shortcut from '$lib/components/Shortcut.svelte';
 	import { dbUtils } from '$lib/db';
 	import { Copy, Trash2 } from 'lucide-svelte';
-
+	import { type ListItem } from './FileList';
+	import { selection } from './Selection';
 	import { _ } from 'svelte-i18n';
-
 	import { getContext } from 'svelte';
-	import { type Writable } from 'svelte/store';
 
-	export let id: string;
+	export let item: ListItem;
 	export let label: string | undefined;
 
-	let selected = getContext<Writable<Set<string>>>('selected');
 	let orientation = getContext<'vertical' | 'horizontal'>('orientation');
 </script>
 
@@ -38,14 +36,7 @@
 						// 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;
-						});
+						$selection.toggle(item);
 					}
 				}}
 			>
@@ -54,13 +45,13 @@
 		</Button>
 	</ContextMenu.Trigger>
 	<ContextMenu.Content>
-		<ContextMenu.Item on:click={dbUtils.duplicateSelectedFiles}>
+		<ContextMenu.Item on:click={dbUtils.duplicateSelection}>
 			<Copy size="16" class="mr-1" />
 			{$_('menu.duplicate')}
 			<Shortcut key="D" ctrl={true} /></ContextMenu.Item
 		>
 		<ContextMenu.Separator />
-		<ContextMenu.Item on:click={dbUtils.deleteSelectedFiles}
+		<ContextMenu.Item on:click={dbUtils.deleteSelection}
 			><Trash2 size="16" class="mr-1" />
 			{$_('menu.delete')}
 			<Shortcut key="⌫" ctrl={true} /></ContextMenu.Item

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

@@ -5,6 +5,7 @@
 	import type { GPXFileWithStatistics } from '$lib/db';
 	import { getContext } from 'svelte';
 	import type { Readable } from 'svelte/store';
+	import { ListFileItem } from './FileList';
 
 	export let file: Readable<GPXFileWithStatistics | undefined>;
 
@@ -14,9 +15,9 @@
 {#if $file}
 	{#if recursive}
 		<CollapsibleTree side="left" margin={4} defaultState="closed">
-			<FileListNode node={$file.file} id={$file.file._data.id} />
+			<FileListNode node={$file.file} item={new ListFileItem($file.file._data.id)} />
 		</CollapsibleTree>
 	{:else}
-		<FileListNode node={$file.file} id={$file.file._data.id} />
+		<FileListNode node={$file.file} item={new ListFileItem($file.file._data.id)} />
 	{/if}
 {/if}

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

@@ -0,0 +1,14 @@
+import { get, writable } from "svelte/store";
+import { ListFileItem, ListRootItem, SelectionTreeType } from "./FileList";
+import { fileObservers } from "$lib/db";
+
+export const selection = writable<SelectionTreeType>(new SelectionTreeType(new ListRootItem()));
+
+export function selectAll() {
+    selection.update(($selection) => {
+        get(fileObservers).forEach((_file, fileId) => {
+            $selection.set(new ListFileItem(fileId), true);
+        });
+        return $selection;
+    });
+}