From 7c927b71f337ea1abab6a2ace1eff00d9d7b6c54 Mon Sep 17 00:00:00 2001
From: Dlurak <84224239+Dlurak@users.noreply.github.com>
Date: Sat, 2 Mar 2024 09:30:50 +0100
Subject: [PATCH] Fix touch support

---
 package.json                                  |  1 +
 pnpm-lock.yaml                                | 30 +++++++--------
 src/lib/preferences/NavigationItems.svelte    | 23 ++++++++++-
 .../navigation/NavigationButton.svelte        | 38 ++++++++++++++++++-
 4 files changed, 74 insertions(+), 18 deletions(-)

diff --git a/package.json b/package.json
index 32381d5..4edcc81 100644
--- a/package.json
+++ b/package.json
@@ -36,6 +36,7 @@
 		"prettier-plugin-svelte": "^2.10.1",
 		"svelte": "^4.0.5",
 		"svelte-check": "^3.4.3",
+		"svelte-dnd-action": "^0.9.40",
 		"tailwindcss": "^3.3.3",
 		"tslib": "^2.4.1",
 		"typescript": "^5.0.0",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index fb24102..9f4d3a1 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -88,6 +88,9 @@ devDependencies:
   svelte-check:
     specifier: ^3.4.3
     version: 3.5.2(@babel/core@7.23.2)(postcss@8.4.31)(svelte@4.2.2)
+  svelte-dnd-action:
+    specifier: ^0.9.40
+    version: 0.9.40(svelte@4.2.2)
   tailwindcss:
     specifier: ^3.3.3
     version: 3.3.4
@@ -149,7 +152,7 @@ packages:
       '@arktype/fs': 0.0.10
       '@arktype/util': 0.0.16
       '@typescript/vfs': 1.5.0
-      arktype: 2.0.0-dev.4
+      arktype: 1.0.29-alpha
       typescript: 5.2.2
     transitivePeerDependencies:
       - supports-color
@@ -159,20 +162,10 @@ packages:
     resolution: {integrity: sha512-aPYLmcdS7eHUftTQOyPZRdoMWrvuk4m0LwO6dB9fwKqJTngnizWAeP0AS+tMincPhdZEahRyX0ju9Czvdm/zkQ==}
     dev: true
 
-  /@arktype/schema@0.0.6:
-    resolution: {integrity: sha512-Z+Y3Sy+xyRCNM2sbQtWvVZoJgdoaR/MUypWJHoc8wl47lxU0GH0J7QrkgYi5dVhRS97nfPIaDLWyoJXEOTiHzA==}
-    dependencies:
-      '@arktype/util': 0.0.23
-    dev: true
-
   /@arktype/util@0.0.16:
     resolution: {integrity: sha512-a10hhQ5E95tV0wfi8N9/74Uo6mRDHjeGWaHsyZriq4a9srZ9AbJ3UlYUQfIaQgsxLIuMw3kdClsE/H3tMdZKvw==}
     dev: true
 
-  /@arktype/util@0.0.23:
-    resolution: {integrity: sha512-MwtDGjbgfXWxlExjIL78HvPlWOma1XFEcDd3VWuCPMt/f+3TR7fXyiGFNlIYZGOYdOIU7qgjaE8dmbd6jdJa3Q==}
-    dev: true
-
   /@babel/code-frame@7.22.13:
     resolution: {integrity: sha512-XktuhWlJ5g+3TJXc5upd9Ks1HutSArik6jf2eAjYFyIOf4ej3RN+184cZbzDvbPnuTJIUhPKKJE3cIsYTiAT3w==}
     engines: {node: '>=6.9.0'}
@@ -2403,11 +2396,8 @@ packages:
     dependencies:
       dequal: 2.0.3
 
-  /arktype@2.0.0-dev.4:
-    resolution: {integrity: sha512-1AgVN3A2ngzp3cRuNF8WXZr85B38jrc7lnOkplB4iHbGxUNvI9IyuhzAJtqCjDAo05pXpY2CxLaeSHtANIpF7Q==}
-    dependencies:
-      '@arktype/schema': 0.0.6
-      '@arktype/util': 0.0.23
+  /arktype@1.0.29-alpha:
+    resolution: {integrity: sha512-glMLgVhIQRSkR3tymiS+POAcWVJH09sfrgic0jHnyFL8BlhHAJZX2BzdImU9zYr1y9NBqy+U93ZNrRTHXsKRDw==}
     dev: true
 
   /array-buffer-byte-length@1.0.0:
@@ -4820,6 +4810,14 @@ packages:
       - sugarss
     dev: true
 
+  /svelte-dnd-action@0.9.40(svelte@4.2.2):
+    resolution: {integrity: sha512-nFRufbbIFVhrI82QKe80AtESLDyK+5wmODDVhenZEIwxi1XagJReO1iXjbTcgogV0pYwv2PM1+lpAjYk+k7x7g==}
+    peerDependencies:
+      svelte: '>=3.23.0'
+    dependencies:
+      svelte: 4.2.2
+    dev: true
+
   /svelte-eslint-parser@0.33.1(svelte@4.2.2):
     resolution: {integrity: sha512-vo7xPGTlKBGdLH8T5L64FipvTrqv3OQRx9d2z5X05KKZDlF4rQk8KViZO4flKERY+5BiVdOh7zZ7JGJWo5P0uA==}
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
diff --git a/src/lib/preferences/NavigationItems.svelte b/src/lib/preferences/NavigationItems.svelte
index 36fa48a..548c3d4 100644
--- a/src/lib/preferences/NavigationItems.svelte
+++ b/src/lib/preferences/NavigationItems.svelte
@@ -41,6 +41,9 @@
 		usedIdsSvocal.set(ids);
 	};
 
+	/** When this changes all items will reevualte their xoffset */
+	let reEvaluateEvent = 0;
+
 	$: {
 		// Todo: Fix that svocal bug
 		if (browser) saveToSvocal();
@@ -71,6 +74,21 @@
 						...it,
 						isDragged: false
 					}));
+					reEvaluateEvent++;
+					items = items.sort((a, b) => a.xOffset - b.xOffset);
+				}}
+				on:touch={(e) => {
+					e.preventDefault();
+
+					const draggedElement = items.find((i) => i.isDragged);
+					if (!draggedElement) return;
+
+					const { clientX } = e.detail.touch;
+
+					reEvaluateEvent++;
+					draggedElement.xOffset = clientX;
+
+					items = items.sort((a, b) => a.xOffset - b.xOffset);
 				}}
 				icon={item.boxIcon}
 				on:remove={() => {
@@ -79,15 +97,18 @@
 
 					items = items;
 					inactiveItems = [...inactiveItems, removed[0]];
+
+					reEvaluateEvent++;
 				}}
 				canBeRemoved={!!(items.length - 1)}
+				bind:reEvaluateEvent
 			/>
 		{/each}
 	</ul>
 	{#if inactiveItems.length}
 		<div>
 			<h5>
-			<I18n key="settings.nav.unused" />
+				<I18n key="settings.nav.unused" />
 			</h5>
 			<ul class="flex gap-2 flex-col">
 				{#each inactiveItems as item, index}
diff --git a/src/lib/preferences/navigation/NavigationButton.svelte b/src/lib/preferences/navigation/NavigationButton.svelte
index fe1d73c..20bc21e 100644
--- a/src/lib/preferences/navigation/NavigationButton.svelte
+++ b/src/lib/preferences/navigation/NavigationButton.svelte
@@ -1,10 +1,14 @@
 <script lang="ts">
 	import { createEventDispatcher, onMount } from 'svelte';
+	import { browser } from '$app/environment';
 
 	const dispatch = createEventDispatcher();
 
 	let thisEle: HTMLLIElement;
 
+	/** change this to reevaluate the xOffset */
+	export let reEvaluateEvent = 0;
+
 	export let icon: string;
 
 	export let isDragged = false;
@@ -16,7 +20,20 @@
 		xCoord = thisEle.getBoundingClientRect().x;
 	};
 
-	onMount(resetXCoord);
+	onMount(() => {
+		resetXCoord();
+		dispatch('mount', {
+			element: thisEle
+		});
+	});
+
+	$: {
+		if (browser && thisEle) {
+			resetXCoord();
+		}
+
+		reEvaluateEvent;
+	}
 </script>
 
 <svelte:window on:resize={resetXCoord} />
@@ -33,6 +50,25 @@
 		isDragged = false;
 		dispatch('dragend');
 	}}
+	on:touchstart={(e) => {
+		e.preventDefault();
+
+		isDragged = true;
+		dispatch('dragstart');
+	}}
+	on:touchmove={(e) => {
+		const touch = e.touches[0];
+
+		xCoord = touch.clientX;
+
+		dispatch('touch', { ...e, touch });
+	}}
+	on:touchend={(e) => {
+		e.preventDefault();
+
+		isDragged = false;
+		dispatch('dragend');
+	}}
 	bind:this={thisEle}
 >
 	{#if showRemove}