From cfbacc33561ba3aaac79d7d4f0dd9ae3cb6e8f58 Mon Sep 17 00:00:00 2001 From: VDawg Date: Tue, 14 Nov 2023 10:38:39 +0100 Subject: [PATCH] improve patternbackground mouse follow --- src/lib/Helper.mjs | 13 ------------- src/lib/PatternBackground.svelte | 33 +++++++++++++++++++++++++------- 2 files changed, 26 insertions(+), 20 deletions(-) diff --git a/src/lib/Helper.mjs b/src/lib/Helper.mjs index 782bea4..4dcecf8 100755 --- a/src/lib/Helper.mjs +++ b/src/lib/Helper.mjs @@ -101,16 +101,3 @@ export function getBlurredPath(path) { export function getRandom(array) { return array.at(Math.floor(Math.random() * array.length)) } - -const fps = 1000 / 60 // 60 frames per second -export const mousePosition$ = new Observable((subscriber) => { - // eslint-disable-next-line no-undef - if (globalThis.document === undefined) { - return - } - document.addEventListener('mousemove', nextPostion) - function nextPostion({ clientX, clientY }) { - subscriber.next({ clientX, clientY }) - } - return () => document?.removeEventListener('mousemove', nextPostion) -}).pipe(throttleTime(fps), share(), startWith({ clientX: 0, clientY: 0 })) diff --git a/src/lib/PatternBackground.svelte b/src/lib/PatternBackground.svelte index fc60e3d..bdfb665 100644 --- a/src/lib/PatternBackground.svelte +++ b/src/lib/PatternBackground.svelte @@ -1,6 +1,7 @@
isMouseOver$.next(false)} - on:mousemove={() => isMouseOver$.next(true)} + on:mouseenter={startTrackingMouse} + on:mouseleave={({ clientX, clientY, currentTarget }) => { + const { x, width, y, height } = currentTarget.getBoundingClientRect() + const isMouseStillOver = + x <= clientX && y <= clientY && x + width > clientX && y + height > clientY + isMouseOver$.next(isMouseStillOver) + }} aria-hidden bind:this={wrapperElement} >