From 3cb1547dcedaebd4d501f020436d269f67b8a947 Mon Sep 17 00:00:00 2001
From: vcoppe <vianney.coppe@gmail.com>
Date: Sat, 20 Apr 2024 15:38:17 +0200
Subject: [PATCH] sortable with multidrag

---
 website/src/lib/components/FileList.svelte | 24 +++++++++++++++-------
 website/src/lib/stores.ts                  |  7 +++++++
 2 files changed, 24 insertions(+), 7 deletions(-)

diff --git a/website/src/lib/components/FileList.svelte b/website/src/lib/components/FileList.svelte
index 82f7d221..20a5a581 100644
--- a/website/src/lib/components/FileList.svelte
+++ b/website/src/lib/components/FileList.svelte
@@ -1,17 +1,23 @@
 <script lang="ts">
-	import { files, selectedFiles, addSelectFile, selectFile } from '$lib/stores';
+	import { files, selectedFiles, addSelectFile, selectFile, removeSelectFile } from '$lib/stores';
 
 	import { ScrollArea } from '$lib/components/ui/scroll-area/index.js';
 
-	import Sortable from 'sortablejs';
-
 	import { onMount } from 'svelte';
 
 	let tabs: HTMLDivElement;
 
-	onMount(() => {
+	onMount(async () => {
+		const sortablejs = await import('sortablejs');
+		const Sortable = sortablejs.default;
+		const MultiDrag = sortablejs.MultiDrag;
+
+		Sortable.mount(new MultiDrag());
+
 		Sortable.create(tabs, {
-			forceAutoScrollFallback: true
+			forceAutoScrollFallback: true,
+			multiDrag: true,
+			multiDragKey: 'shift'
 		});
 	});
 </script>
@@ -23,10 +29,14 @@
 				<button
 					class="my-1 px-1.5 py-1 rounded {$selectedFiles.has(file)
 						? 'bg-background shadow'
-						: 'bg-secondary'} first:ml-1 last:mr-1"
+						: 'bg-secondary hover:bg-gray-200'} first:ml-1 last:mr-1"
 					on:click={(e) => {
 						if (e.shiftKey) {
-							addSelectFile(file);
+							if ($selectedFiles.has(file)) {
+								removeSelectFile(file);
+							} else {
+								addSelectFile(file);
+							}
 						} else {
 							selectFile(file);
 						}
diff --git a/website/src/lib/stores.ts b/website/src/lib/stores.ts
index 277ad327..f85954d9 100644
--- a/website/src/lib/stores.ts
+++ b/website/src/lib/stores.ts
@@ -122,4 +122,11 @@ export function addSelectFile(file: GPXFile) {
         $selectedFiles.add(file);
         return $selectedFiles;
     });
+}
+
+export function removeSelectFile(file: GPXFile) {
+    selectedFiles.update($selectedFiles => {
+        $selectedFiles.delete(file);
+        return $selectedFiles;
+    });
 }
\ No newline at end of file