diff --git a/src/components/interactive-background/interactive-background.ts b/src/components/interactive-background/interactive-background.ts index c1143c9..2831d55 100644 --- a/src/components/interactive-background/interactive-background.ts +++ b/src/components/interactive-background/interactive-background.ts @@ -1,4 +1,5 @@ -import { AfterViewInit, Component, ElementRef, OnDestroy, ViewChild } from '@angular/core'; +import { AfterViewInit, Component, ElementRef, OnDestroy, ViewChild, inject } from '@angular/core'; +import { NavigationStart, Router } from '@angular/router'; type PointerState = { x: number; @@ -276,6 +277,7 @@ class ParticleEngine { }) export class InteractiveBackground implements AfterViewInit, OnDestroy { @ViewChild('canvas', { static: true }) private readonly canvasRef!: ElementRef; + private readonly router = inject(Router); isCursorVisible = InteractiveBackground.detectFinePointer(); isPointerDown = false; @@ -330,6 +332,11 @@ export class InteractiveBackground implements AfterViewInit, OnDestroy { const onTouchCancel = () => this.handlePointerLeave(); const onMotionChange = (event: MediaQueryListEvent) => this.handleMotionPreferenceChange(event.matches); + const routerSubscription = this.router.events.subscribe((event) => { + if (event instanceof NavigationStart) { + this.resetPointerInteraction(); + } + }); window.addEventListener('resize', onResize); @@ -368,6 +375,7 @@ export class InteractiveBackground implements AfterViewInit, OnDestroy { () => window.removeEventListener('touchend', onTouchEnd), () => window.removeEventListener('touchcancel', onTouchCancel), () => this.mediaQuery.removeEventListener('change', onMotionChange), + () => routerSubscription.unsubscribe(), ]; } @@ -452,11 +460,11 @@ export class InteractiveBackground implements AfterViewInit, OnDestroy { } this.activeTouchId = null; - this.pointerActive = false; + this.resetPointerInteraction(); return; } - this.updatePointer(event.clientX, event.clientY, true); + this.resetPointerInteraction(); } private handleMouseMove(event: MouseEvent): void { @@ -469,7 +477,7 @@ export class InteractiveBackground implements AfterViewInit, OnDestroy { } private handleMouseUp(): void { - this.isPointerDown = false; + this.resetPointerInteraction(); } private handleTouchStart(event: TouchEvent): void { @@ -507,11 +515,14 @@ export class InteractiveBackground implements AfterViewInit, OnDestroy { } this.isPointerDown = false; - this.activeTouchId = null; - this.pointerActive = false; + this.resetPointerInteraction(); } private handlePointerLeave(): void { + this.resetPointerInteraction(); + } + + private resetPointerInteraction(): void { this.pointerActive = false; this.isPointerDown = false; this.activeTouchId = null;