battle with sortable

website/src/lib/components/FileList.svelte

@@ -1,46 +1,96 @@
 <script lang="ts">
-	import { files, selectedFiles, addSelectFile, selectFile, removeSelectFile } from '$lib/stores';
+	import { files, selectedFiles, selectFiles } from '$lib/stores';
 
-	import { ScrollArea } from '$lib/components/ui/scroll-area/index.js';
+	import { ScrollArea } from '$lib/components/ui/scroll-area/index';
 
-	import { onMount } from 'svelte';
+	import Sortable from 'sortablejs/Sortable';
+
+	import { onMount, tick } from 'svelte';
+	import type { GPXFile } from 'gpx';
 
 	let tabs: HTMLDivElement;
+	let buttons: HTMLButtonElement[] = [];
+	let sortable: Sortable;
 
-	onMount(async () => {
-		const sortablejs = await import('sortablejs');
-		const Sortable = sortablejs.default;
-		const MultiDrag = sortablejs.MultiDrag;
+	function selectFile(file: GPXFile) {
+		selectedFiles.update((selectedFiles) => {
+			selectedFiles.clear();
+			selectedFiles.add(file);
+			return selectedFiles;
+		});
+	}
 
-		Sortable.mount(new MultiDrag());
+	function addSelectFile(file: GPXFile) {
+		selectedFiles.update((selectedFiles) => {
+			selectedFiles.add(file);
+			return selectedFiles;
+		});
+	}
 
-		Sortable.create(tabs, {
+	function deselectFile(file: GPXFile) {
+		selectedFiles.update((selectedFiles) => {
+			selectedFiles.delete(file);
+			return selectedFiles;
+		});
+	}
+
+	onMount(() => {
+		sortable = Sortable.create(tabs, {
 			forceAutoScrollFallback: true,
 			multiDrag: true,
-			multiDragKey: 'shift'
+			multiDragKey: 'shift',
+			selectedClass: 'sortable-selected',
+			avoidImplicitDeselect: true,
+			onSelect: (e) => {
+				console.log('onSelect', e);
+				const index = parseInt(e.item.getAttribute('data-id'));
+				addSelectFile($files[index]);
+			},
+			onDeselect: (e) => {
+				console.log('onDeselect');
+				const index = parseInt(e.item.getAttribute('data-id'));
+				deselectFile($files[index]);
+			}
 		});
 	});
+
+	selectFiles.update(() => {
+		return {
+			select: (file: GPXFile) => {
+				console.log('select');
+				buttons.forEach((button) => {
+					if (button) {
+						Sortable.utils.deselect(button);
+					}
+				});
+				const index = $files.indexOf(file);
+				Sortable.utils.select(buttons[index]);
+				selectFile(file);
+			},
+			addSelect: (file: GPXFile) => {
+				console.log('addSelect');
+				const index = $files.indexOf(file);
+				Sortable.utils.select(buttons[index]);
+				addSelectFile(file);
+			},
+			removeSelect: (file: GPXFile) => {
+				console.log('removeSelect');
+				const index = $files.indexOf(file);
+				Sortable.utils.deselect(buttons[index]);
+				deselectFile(file);
+			}
+		};
+	});
 </script>
 
 <div class="absolute h-10 -translate-y-10 w-fit max-w-full bg-secondary rounded-t">
 	<ScrollArea orientation="horizontal" class="w-full h-full" scrollbarXClasses="h-2">
 		<div bind:this={tabs} class="flex flex-row gap-1">
-			{#each $files as file}
+			{#each $files as file, index}
 				<button
-					class="my-1 px-1.5 py-1 rounded {$selectedFiles.has(file)
-						? 'bg-background shadow'
-						: 'bg-secondary hover:bg-gray-200'} first:ml-1 last:mr-1"
-					on:click={(e) => {
-						if (e.shiftKey) {
-							if ($selectedFiles.has(file)) {
-								removeSelectFile(file);
-							} else {
-								addSelectFile(file);
-							}
-						} else {
-							selectFile(file);
-						}
-					}}
+					bind:this={buttons[index]}
+					data-id={index}
+					class="my-1 px-1.5 py-1 rounded bg-secondary hover:bg-gray-200 shadow-none first:ml-1 last:mr-1"
 				>
 					{file.metadata.name}
 				</button>
@@ -48,3 +98,9 @@
 		</div>
 	</ScrollArea>
 </div>
+
+<style lang="postcss">
+	div :global(.sortable-selected) {
+		@apply bg-background shadow;
+	}
+</style>

website/src/lib/components/GPX.svelte

@@ -39,9 +39,10 @@
 </script>
 
 <script lang="ts">
-	import { GPXFile } from 'gpx';
-	import { map, selectedFiles, addSelectFile, selectFile } from '$lib/stores';
 	import { onDestroy } from 'svelte';
+	import { GPXFile } from 'gpx';
+	import { map, selectedFiles, selectFiles } from '$lib/stores';
+	import { get } from 'svelte/store';
 
 	export let file: GPXFile;
 
@@ -50,9 +51,9 @@
 
 	function selectOnClick(e: any) {
 		if (e.originalEvent.shiftKey) {
-			addSelectFile(file);
+			get(selectFiles).addSelect(file);
 		} else {
-			selectFile(file);
+			get(selectFiles).select(file);
 		}
 	}
 

website/src/lib/components/Map.svelte

@@ -22,7 +22,8 @@
 			hash: true,
 			language: 'auto',
 			attributionControl: false,
-			logoPosition: 'bottom-right'
+			logoPosition: 'bottom-right',
+			boxZoom: false
 		});
 
 		$map.addControl(

website/src/lib/stores.ts

@@ -6,6 +6,7 @@ import { GPXFile, buildGPX, parseGPX } from 'gpx';
 export const map = writable<mapboxgl.Map | null>(null);
 export const files = writable<GPXFile[]>([]);
 export const selectedFiles = writable<Set<GPXFile>>(new Set());
+export const selectFiles = writable<{ [key: string]: (file: GPXFile) => void }>({});
 
 export function triggerFileInput() {
     const input = document.createElement('input');
@@ -21,26 +22,32 @@ export function triggerFileInput() {
     input.click();
 }
 
-export function loadFiles(files: FileList) {
-    for (let i = 0; i < files.length; i++) {
-        loadFile(files[i]);
+export async function loadFiles(list: FileList) {
+    for (let i = 0; i < list.length; i++) {
+        await loadFile(list[i]);
+        if (i == 0) {
+            get(selectFiles).select(get(files)[get(files).length - 1]);
+        }
     }
 }
 
-export function loadFile(file: File) {
-    const reader = new FileReader();
-    reader.onload = () => {
-        let data = reader.result?.toString() ?? null;
-        if (data) {
-            let gpx = parseGPX(data);
-            if (gpx.metadata.name === undefined) {
-                gpx.metadata['name'] = file.name.split('.').slice(0, -1).join('.');
+export async function loadFile(file: File) {
+    let result = await new Promise<void>((resolve) => {
+        const reader = new FileReader();
+        reader.onload = () => {
+            let data = reader.result?.toString() ?? null;
+            if (data) {
+                let gpx = parseGPX(data);
+                if (gpx.metadata.name === undefined) {
+                    gpx.metadata['name'] = file.name.split('.').slice(0, -1).join('.');
+                }
+                files.update($files => [...$files, gpx]);
             }
-            files.update($files => [...$files, gpx]);
-            selectFile(gpx);
-        }
-    };
-    reader.readAsText(file);
+            resolve();
+        };
+        reader.readAsText(file);
+    });
+    return result;
 }
 
 export function duplicateSelectedFiles() {
@@ -52,7 +59,6 @@ export function duplicateSelectedFiles() {
 export function duplicateFile(file: GPXFile) {
     let clone = file.clone();
     files.update($files => [...$files, clone]);
-    selectFile(clone);
 }
 
 export function removeSelectedFiles() {
@@ -67,10 +73,7 @@ export function removeSelectedFiles() {
             index++;
         }
     }
-    selectedFiles.update($selectedFiles => {
-        $selectedFiles.clear();
-        return $selectedFiles;
-    });
+    get(selectedFiles).clear();
 }
 
 export function removeAllFiles() {
@@ -78,10 +81,7 @@ export function removeAllFiles() {
         $files.splice(0, $files.length);
         return $files;
     });
-    selectedFiles.update($selectedFiles => {
-        $selectedFiles.clear();
-        return $selectedFiles;
-    });
+    get(selectedFiles).clear();
 }
 
 export function exportSelectedFiles() {
@@ -107,26 +107,4 @@ export function exportFile(file: GPXFile) {
 
 export function reverseSelectedFiles() {
     get(selectedFiles).forEach(file => file.reverse());
-}
-
-export function selectFile(file: GPXFile) {
-    selectedFiles.update($selectedFiles => {
-        $selectedFiles.clear();
-        $selectedFiles.add(file);
-        return $selectedFiles;
-    });
-}
-
-export function addSelectFile(file: GPXFile) {
-    selectedFiles.update($selectedFiles => {
-        $selectedFiles.add(file);
-        return $selectedFiles;
-    });
-}
-
-export function removeSelectFile(file: GPXFile) {
-    selectedFiles.update($selectedFiles => {
-        $selectedFiles.delete(file);
-        return $selectedFiles;
-    });
 }