improving usability on mobile devices

frontend/src/Components/LineEditor.svelte

@@ -15,6 +15,8 @@
     let editing   = $state(simple);
     let editValue = value;
     let start     = 0;
+    let x         = 0;
+    let y         = 0;
 
     async function applyEdit(){
         let success = await onSet(editValue);
@@ -22,6 +24,49 @@
         editing=false;
     }
 
+    function ignore(evt){
+        evt.preventDefault();
+        evt.stopPropagation();
+        return false;
+    }
+
+    function measured(evt,duration,d){
+        if (d > 100) return;
+        if (duration < 500){
+            onclick(evt);
+        } else {
+            startEdit();
+        }
+    }
+
+    function oncontextmenu(evt){
+         startEdit();
+         return ignore(evt);
+    }
+
+    function onmousedown(evt){
+        start = evt.timeStamp;
+        return ignore(evt);
+    }
+
+    function onmouseup(evt){
+        measured(evt, evt.timeStamp - start,0);
+        return ignore(evt);
+    }
+
+    function ontouchstart(evt){
+        start = evt.timeStamp;
+        x     = evt.touches[0].clientX;
+        y     = evt.touches[0].clientY;
+        return ignore(evt);
+    }
+
+    function ontouchend(evt){
+        let d = Math.abs(x - evt.changedTouches[0].clientX) + Math.abs(y - evt.changedTouches[0].clientY);
+        measured(evt, evt.timeStamp - start, d);
+        return ignore(evt);
+    }
+
     function resetEdit(){
         editing   = false;
         editValue = value;
@@ -37,40 +82,6 @@
         if (ev.keyCode == 27) resetEdit();
     }
 
-    function measured(evt,duration){
-        if (duration < 500){
-            onclick(evt);
-        } else {
-            startEdit();
-        }
-    }
-
-    function oncontextmenu(evt){
-         evt.preventDefault();
-         evt.stopPropagation();
-         return false;
-    }
-
-    function onmousedown(evt){
-        evt.preventDefault();
-        start = evt.timeStamp;
-    }
-
-    function onmouseup(evt){
-        evt.preventDefault();
-        measured(evt, evt.timeStamp - start);
-    }
-
-    function ontouchstart(evt){
-        evt.preventDefault();
-        start = evt.timeStamp;
-    }
-
-    function ontouchend(evt){
-        evt.preventDefault();
-        measured(evt, evt.timeStamp - start);
-    }
-
     activeField.subscribe((val) => resetEdit());
     if (simple) startEdit();
 </script>
@@ -92,5 +103,5 @@
 {#if editable && editing}
 <input bind:value={editValue} onkeyup={typed} autofocus />
 {:else}
-<svelte:element this={type} href={href} {onclick} {onmousedown} {onmouseup} {ontouchstart} {ontouchend} {oncontextmenu} class={{editable}} title={t('long_click_to_edit')} >{value}</svelte:element>
+<svelte:element this={type} href={href} onclick={ignore} {onmousedown} {onmouseup} {ontouchstart} {ontouchend} {oncontextmenu} class={{editable}} title={t('long_click_to_edit')} >{value}</svelte:element>
 {/if}