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,22 +24,14 @@
         editing=false;
     }
 
-    function resetEdit(){
+    function ignore(evt){
-        editing   = false;
+        evt.preventDefault();
-        editValue = value;
+        evt.stopPropagation();
-    }
+        return false;
-
-    function startEdit(){
-        activeField.update((n) => n+1);
-        editing = editable;
-    }
-
-    function typed(ev){
-        if (ev.keyCode == 13) applyEdit();
-        if (ev.keyCode == 27) resetEdit();
     }
 
-    function measured(evt,duration){
+    function measured(evt,duration,d){
+        if (d > 100) return;
         if (duration < 500){
             onclick(evt);
         } else {
@@ -46,29 +40,46 @@
     }
 
     function oncontextmenu(evt){
-         evt.preventDefault();
+         startEdit();
-         evt.stopPropagation();
+         return ignore(evt);
-         return false;
     }
 
     function onmousedown(evt){
-        evt.preventDefault();
         start = evt.timeStamp;
+        return ignore(evt);
     }
 
     function onmouseup(evt){
-        evt.preventDefault();
+        measured(evt, evt.timeStamp - start,0);
-        measured(evt, evt.timeStamp - start);
+        return ignore(evt);
     }
 
     function ontouchstart(evt){
-        evt.preventDefault();
         start = evt.timeStamp;
+        x     = evt.touches[0].clientX;
+        y     = evt.touches[0].clientY;
+        return ignore(evt);
     }
 
     function ontouchend(evt){
-        evt.preventDefault();
+        let d = Math.abs(x - evt.changedTouches[0].clientX) + Math.abs(y - evt.changedTouches[0].clientY);
-        measured(evt, evt.timeStamp - start);
+        measured(evt, evt.timeStamp - start, d);
+        return ignore(evt);
+    }
+
+    function resetEdit(){
+        editing   = false;
+        editValue = value;
+    }
+
+    function startEdit(){
+        activeField.update((n) => n+1);
+        editing = editable;
+    }
+
+    function typed(ev){
+        if (ev.keyCode == 13) applyEdit();
+        if (ev.keyCode == 27) resetEdit();
     }
 
     activeField.subscribe((val) => resetEdit());
@@ -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}