MRK-4890: Компоненты: Добавить возможность закрытия тултипа при скролле (v8)

projects/evo-ui-kit/src/lib/common/scroll/classes/evo-close-scroll-strategy.ts

@@ -0,0 +1,106 @@
+import {Injector, NgZone} from '@angular/core';
+import {DOCUMENT} from '@angular/common';
+import {OverlayRef, ScrollStrategy} from '@angular/cdk/overlay';
+import {EvoScrollStrategyParams} from '../interfaces/evo-scroll-strategy-params';
+import {filter, first, tap} from 'rxjs/operators';
+import {createScrollStream} from '../utils/create-scroll-stream';
+import {Subscription} from 'rxjs';
+import {ScrollPosition} from '../interfaces/scroll-position';
+
+export class EvoCloseScrollStrategy implements ScrollStrategy {
+    private readonly document: Document;
+    private readonly ngZone: NgZone;
+
+    private overlayRef: OverlayRef | null = null;
+    private scrollSubscription: Subscription | null = null;
+
+    private initialScrollPosition: ScrollPosition | null = null;
+
+    constructor(private readonly injector: Injector, private readonly params?: EvoScrollStrategyParams) {
+        this.document = this.injector.get(DOCUMENT);
+        this.ngZone = this.injector.get(NgZone);
+    }
+
+    attach(overlayRef: OverlayRef): void {
+        this.overlayRef = overlayRef;
+    }
+
+    detach(): void {
+        this.disable();
+        this.overlayRef = null;
+    }
+
+    disable(): void {
+        if (!this.scrollSubscription) {
+            return;
+        }
+
+        this.scrollSubscription.unsubscribe();
+        this.scrollSubscription = null;
+    }
+
+    enable(): void {
+        if (this.scrollSubscription || !this.overlayRef) {
+            return;
+        }
+
+        this.ngZone.runOutsideAngular(() => {
+            this.initialScrollPosition = this.getCurrentScrollPosition();
+
+            this.scrollSubscription = createScrollStream(this.document, this.overlayRef)
+                .pipe(
+                    filter(() => this.checkThreshold()),
+                    first(),
+                    tap(() => this.detachOverlay()),
+                )
+                .subscribe();
+        });
+    }
+
+    private detachOverlay(): void {
+        if (!this.overlayRef?.hasAttached()) {
+            return;
+        }
+
+        this.disable();
+        this.ngZone.run(() => this.overlayRef.detach());
+    }
+
+    private checkThreshold(): boolean {
+        const threshold = this.params?.threshold ?? 0;
+
+        if (!this.getOriginElement() || !this.initialScrollPosition) {
+            return true;
+        }
+
+        const scrollPosition = this.getCurrentScrollPosition();
+
+        if (!scrollPosition) {
+            return false;
+        }
+
+        const distanceY = Math.abs(scrollPosition.vertical - this.initialScrollPosition.vertical);
+        const distanceX = Math.abs(scrollPosition.horizontal - this.initialScrollPosition.horizontal);
+
+        return Math.max(distanceX, distanceY) > threshold;
+    }
+
+    private getCurrentScrollPosition(): ScrollPosition | null {
+        const element = this.getOriginElement();
+
+        if (!element) {
+            return null;
+        }
+
+        const rect = element.getBoundingClientRect();
+
+        return {
+            vertical: rect.top,
+            horizontal: rect.left,
+        };
+    }
+
+    private getOriginElement(): Element | null {
+        return this.params?.getOrigin?.() ?? null;
+    }
+}

projects/evo-ui-kit/src/lib/common/scroll/classes/evo-reposition-scroll-strategy.ts

@@ -0,0 +1,93 @@
+import {Injector, NgZone} from '@angular/core';
+import {DOCUMENT} from '@angular/common';
+import {OverlayRef, ScrollStrategy} from '@angular/cdk/overlay';
+import {Subscription} from 'rxjs';
+import {tap} from 'rxjs/operators';
+import {createScrollStream} from '../utils/create-scroll-stream';
+
+export class EvoRepositionScrollStrategy implements ScrollStrategy {
+    private readonly document: Document;
+    private readonly ngZone: NgZone;
+
+    private overlayRef: OverlayRef | null = null;
+
+    private scrollSubscription: Subscription | null = null;
+
+    constructor(private readonly injector: Injector) {
+        this.document = this.injector.get(DOCUMENT);
+        this.ngZone = this.injector.get(NgZone);
+    }
+
+    attach(overlayRef: OverlayRef): void {
+        this.overlayRef = overlayRef;
+    }
+
+    detach(): void {
+        this.disable();
+        this.overlayRef = null;
+    }
+
+    disable(): void {
+        if (!this.scrollSubscription) {
+            return;
+        }
+
+        this.scrollSubscription.unsubscribe();
+        this.scrollSubscription = null;
+    }
+
+    enable(): void {
+        if (this.scrollSubscription || !this.overlayRef) {
+            return;
+        }
+
+        this.ngZone.runOutsideAngular(() => {
+            this.scrollSubscription = createScrollStream(this.document, this.overlayRef)
+                .pipe(
+                    tap(() => {
+                        if (this.isOverlayScrolledOutsideView()) {
+                            this.detachOverlay();
+                            return;
+                        }
+
+                        this.updatePosition();
+                    }),
+                )
+                .subscribe();
+        });
+    }
+
+    private updatePosition(): void {
+        if (!this.overlayRef?.hasAttached()) {
+            return;
+        }
+
+        this.ngZone.run(() => this.overlayRef.updatePosition());
+    }
+
+    private detachOverlay(): void {
+        if (!this.overlayRef?.hasAttached()) {
+            return;
+        }
+
+        this.disable();
+        this.ngZone.run(() => this.overlayRef.detach());
+    }
+
+    private isOverlayScrolledOutsideView(): boolean {
+        if (!this.overlayRef?.hasAttached()) {
+            return true;
+        }
+
+        const overlayRect = this.overlayRef.overlayElement.getBoundingClientRect();
+        const pageHeight = this.document.documentElement.clientHeight;
+        const pageWidth = this.document.documentElement.clientWidth;
+
+        return (
+            overlayRect.bottom < 0 ||
+            overlayRect.top > pageHeight ||
+            overlayRect.right < 0 ||
+            overlayRect.left > pageWidth
+        );
+    }
+}

projects/evo-ui-kit/src/lib/common/scroll/classes/evo-scroll-strategy-options.ts

@@ -0,0 +1,38 @@
+import {NoopScrollStrategy, ScrollStrategy} from '@angular/cdk/overlay';
+import {Injectable, Injector} from '@angular/core';
+import {EvoCloseScrollStrategy} from './evo-close-scroll-strategy';
+import {EvoRepositionScrollStrategy} from './evo-reposition-scroll-strategy';
+import {EvoScrollStrategyParams} from '../interfaces/evo-scroll-strategy-params';
+import {EvoScrollStrategy} from '../types/evo-scroll-strategy';
+
+@Injectable({providedIn: 'root'})
+export class EvoScrollStrategyOptions {
+    constructor(private readonly injector: Injector) {}
+
+    create(strategy: EvoScrollStrategy, params?: EvoScrollStrategyParams): ScrollStrategy {
+        switch (strategy) {
+            case 'noop': {
+                return this.noop();
+            }
+            case 'reposition': {
+                return this.reposition();
+            }
+            case 'close':
+            default: {
+                return this.close(params);
+            }
+        }
+    }
+
+    noop(): ScrollStrategy {
+        return new NoopScrollStrategy();
+    };
+
+    reposition(): ScrollStrategy {
+        return new EvoRepositionScrollStrategy(this.injector);
+    };
+
+    close(params?: EvoScrollStrategyParams): ScrollStrategy {
+        return new EvoCloseScrollStrategy(this.injector, params);
+    };
+}

projects/evo-ui-kit/src/lib/common/scroll/index.ts

@@ -0,0 +1,5 @@
+export * from './types/evo-scroll-strategy';
+
+export * from './classes/evo-scroll-strategy-options';
+export * from './classes/evo-close-scroll-strategy';
+export * from './classes/evo-reposition-scroll-strategy';

projects/evo-ui-kit/src/lib/common/scroll/interfaces/evo-scroll-strategy-params.ts

@@ -0,0 +1,12 @@
+export interface EvoScrollStrategyParams {
+    /**
+     * Lazily resolves the overlay's anchor element. The close strategy measures the anchor's
+     * on-screen movement (getBoundingClientRect) to decide whether to close, so it reacts only
+     * when the anchor actually moves rather than on every page scroll.
+     * Resolved on `enable()` (when the overlay is attached), so callers can pass a getter over an
+     * input that is set after the strategy is created (e.g. the dropdown origin).
+     */
+    getOrigin?: () => Element | null;
+    /** Amount of pixels the anchor has to move before the overlay is closed (close strategy only). */
+    threshold?: number;
+}

projects/evo-ui-kit/src/lib/common/scroll/interfaces/scroll-position.ts

@@ -0,0 +1,4 @@
+export interface ScrollPosition {
+    vertical: number;
+    horizontal: number;
+}

projects/evo-ui-kit/src/lib/common/scroll/types/evo-scroll-strategy.ts

@@ -0,0 +1 @@
+export type EvoScrollStrategy = 'noop' | 'close' | 'reposition';

projects/evo-ui-kit/src/lib/common/scroll/utils/create-scroll-stream.ts

@@ -0,0 +1,40 @@
+import {animationFrameScheduler, fromEvent, Observable} from 'rxjs';
+import {filter, throttleTime} from 'rxjs/operators';
+import {OverlayRef} from '@angular/cdk/overlay';
+
+/**
+ * TODO(MRK-4890): revisit whether CDK's own scroll strategies can be reused here.
+ *
+ * Why a custom stream instead of CDK's strategies:
+ *
+ * The overlay must follow / close when ANY container that moves the anchor scrolls,
+ * including arbitrary `overflow: auto` blocks (modal bodies, sidebars, nested lists).
+ * As a reusable library we cannot require consumers to mark every such container.
+ *
+ * CDK's reposition/close strategies subscribe to `ScrollDispatcher.scrolled()`, which is
+ * a *bubble-phase* listener on `document` PLUS each element explicitly registered via the
+ * `cdkScrollable` directive. The `scroll` event does not bubble, so the bubble-phase
+ * listener only sees page scroll — an unmarked inner container's scroll is invisible to
+ * CDK and the overlay stays glued to its old position.
+ *
+ * The listener below uses `capture: true`: a capture-phase listener on `document` receives
+ * scroll from every element in the tree (the capture phase runs document -> target even for
+ * non-bubbling events), so it covers every container with zero registration.
+ *
+ * Related: EvoCloseScrollStrategy measures the threshold from the anchor's
+ * getBoundingClientRect() displacement (both axes), so it closes only when the anchor
+ * actually moves — regardless of which container produced the scroll event.
+ *
+ * Trade-off: this fires for every scroll on the page, not only relevant ones; mitigated by
+ * the animation-frame throttle and the `overlayElement.contains(target)` filter below.
+ */
+export function createScrollStream(document: Document, overlayRef: OverlayRef): Observable<Event> {
+    return fromEvent(document, 'scroll', {capture: true, passive: true}).pipe(
+        throttleTime(10, animationFrameScheduler, {leading: true, trailing: true}),
+        filter((event): boolean => {
+            const target = event.target as Node;
+
+            return !overlayRef.overlayElement.contains(target);
+        }),
+    );
+}

projects/evo-ui-kit/src/lib/components/evo-dropdown/evo-dropdown.component.html

@@ -3,6 +3,7 @@
     [cdkConnectedOverlayOpen]="isOpen"
     [cdkConnectedOverlayOrigin]="dropdownOrigin"
     [cdkConnectedOverlayPositions]="connectedPositions"
+    [cdkConnectedOverlayScrollStrategy]="connectedScrollStrategy"
     (detach)="close()"
     (overlayOutsideClick)="onOverlayOutsideClick($event)"
 >