marcel/familienarchiv
1
0
Fork 0
Code Issues 107 Pull Requests 1 Actions Packages Projects Releases Wiki Activity

fix(touch): enable annotation drawing and hover on touch devices
Some checks failed
CI / Unit & Component Tests (push) Successful in 2m28s
Details
CI / Backend Unit Tests (push) Successful in 2m15s
Details
CI / E2E Tests (push) Failing after 29m24s
Details

Browse Source 
- Add touch-action:none to container when in annotate mode so the
  browser doesn't intercept touch gestures for scroll/pan
- Replace onmouseenter/onmouseleave with onpointerenter/onpointerleave
  so the highlight effect also fires on touch/stylus

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Marcel
2026-03-27 17:05:26 +01:00
parent 74bf49552b
commit 44f495ca8b
1 changed files with 3 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
frontend/src/lib/components/AnnotationLayer.svelte
View File

@@ -93,7 +93,7 @@ function handlePointerUp(event: PointerEvent) {
let hoveredId = $state<string | null>(null); let hoveredId = $state<string | null>(null);
const containerStyle = $derived( const containerStyle = $derived(
`position: absolute; top: 0; left: 0; width: 100%; height: 100%;${canAnnotate ? ' cursor: crosshair;' : ''}` `position: absolute; top: 0; left: 0; width: 100%; height: 100%;${canAnnotate ? ' cursor: crosshair; touch-action: none;' : ''}`
); );
</script> </script>
@@ -113,8 +113,8 @@ const containerStyle = $derived(
aria-label="Kommentare anzeigen" aria-label="Kommentare anzeigen"
onclick={() => onAnnotationClick?.(annotation.id)} onclick={() => onAnnotationClick?.(annotation.id)}
onkeydown={(e) => { if (e.key === 'Enter' || e.key === ' ') onAnnotationClick?.(annotation.id); }} onkeydown={(e) => { if (e.key === 'Enter' || e.key === ' ') onAnnotationClick?.(annotation.id); }}
onmouseenter={() => (hoveredId = annotation.id)} onpointerenter={() => (hoveredId = annotation.id)}
onmouseleave={() => (hoveredId = null)} onpointerleave={() => (hoveredId = null)}
style=" style="
position: absolute; position: absolute;
left: {annotation.x * 100}%; left: {annotation.x * 100}%;