diff --git a/src/lib/components/NotificationToast.svelte b/src/lib/components/NotificationToast.svelte index b47a93eaf9..824a2b3e1d 100644 --- a/src/lib/components/NotificationToast.svelte +++ b/src/lib/components/NotificationToast.svelte @@ -12,6 +12,43 @@ export let title: string = 'HI'; export let content: string; + let startX = 0, + startY = 0; + let moved = false; + const DRAG_THRESHOLD_PX = 6; + + const clickHandler = () => { + onClick(); + dispatch('closeToast'); + }; + + function onPointerDown(e: PointerEvent) { + startX = e.clientX; + startY = e.clientY; + moved = false; + // Ensure we continue to get events even if the toast moves under the pointer. + (e.currentTarget as HTMLElement).setPointerCapture?.(e.pointerId); + } + + function onPointerMove(e: PointerEvent) { + if (moved) return; + const dx = e.clientX - startX; + const dy = e.clientY - startY; + if (dx * dx + dy * dy > DRAG_THRESHOLD_PX * DRAG_THRESHOLD_PX) { + moved = true; + } + } + + function onPointerUp(e: PointerEvent) { + // Release capture if taken + (e.currentTarget as HTMLElement).releasePointerCapture?.(e.pointerId); + + // Only treat as a click if there wasn't a drag + if (!moved) { + clickHandler(); + } + } + onMount(() => { if (!navigator.userActivation.hasBeenActive) { return; @@ -31,11 +68,20 @@ }); - +