d9ae709b-3c27-4b69-b125-b8b80b54f90b

import { DOCUMENT } from '@angular/common';
import { Inject, Injectable, NgZone, OnDestroy } from '@angular/core';
import { isTouchEvent } from 'ngx-tethys/util';
import { Subject } from 'rxjs';
import { ThyResizeHandleMouseDownEvent } from './resize-handle.component';

/**
 * @internal
 */
@Injectable()
export class ThyResizableService implements OnDestroy {
    private document: Document;
    private listeners = new Map<string, (event: MouseEvent | TouchEvent) => void>();

    /**
     * The `OutsideAngular` prefix means that the subject will emit events outside of the Angular zone,
     * so that becomes a bit more descriptive for those who'll maintain the code in the future:
     * ```ts
     * thyResizableService.handleMouseDownOutsideAngular$.subscribe(event => {
     *   console.log(Zone.current); // <root>
     *   console.log(NgZone.isInAngularZone()); // false
     * });
     * ```
     */

    handleMouseDownOutsideAngular$ = new Subject<ThyResizeHandleMouseDownEvent>();
    documentMouseUpOutsideAngular$ = new Subject<MouseEvent | TouchEvent>();
    documentMouseMoveOutsideAngular$ = new Subject<MouseEvent | TouchEvent>();
    mouseEnteredOutsideAngular$ = new Subject<boolean>();

    constructor(private ngZone: NgZone, @Inject(DOCUMENT) document: any) {
        this.document = document;
    }

    startResizing(event: MouseEvent | TouchEvent): void {
        const _isTouchEvent = isTouchEvent(event);
        this.clearListeners();
        const moveEvent = _isTouchEvent ? 'touchmove' : 'mousemove';
        const upEvent = _isTouchEvent ? 'touchend' : 'mouseup';
        const moveEventHandler = (e: MouseEvent | TouchEvent) => {
            this.documentMouseMoveOutsideAngular$.next(e);
        };
        const upEventHandler = (e: MouseEvent | TouchEvent) => {
            this.documentMouseUpOutsideAngular$.next(e);
            this.clearListeners();
        };

        this.listeners.set(moveEvent, moveEventHandler);
        this.listeners.set(upEvent, upEventHandler);
        this.ngZone.runOutsideAngular(() => {
            this.listeners.forEach((handler, name) => {
                this.document.addEventListener(name, handler as EventListener);
            });
        });
    }

    private clearListeners(): void {
        this.listeners.forEach((handler, name) => {
            this.document.removeEventListener(name, handler as EventListener);
        });
        this.listeners.clear();
    }

    ngOnDestroy(): void {
        this.handleMouseDownOutsideAngular$.complete();
        this.documentMouseUpOutsideAngular$.complete();
        this.documentMouseMoveOutsideAngular$.complete();
        this.mouseEnteredOutsideAngular$.complete();
        this.clearListeners();
    }
}

1	import { DOCUMENT } from '@angular/common';
2	import { Inject, Injectable, NgZone, OnDestroy } from '@angular/core';
3	import { isTouchEvent } from 'ngx-tethys/util';
4	import { Subject } from 'rxjs';
5	import { ThyResizeHandleMouseDownEvent } from './resize-handle.component';
6
7	/**
8	* @internal
9	*/	1✔
10	@Injectable()
11	export class ThyResizableService implements OnDestroy {	×
12	private document: Document;	×
13	private listeners = new Map<string, (event: MouseEvent \| TouchEvent) => void>();
14
15	/**
16	* The `OutsideAngular` prefix means that the subject will emit events outside of the Angular zone,
17	* so that becomes a bit more descriptive for those who'll maintain the code in the future:
18	* ```ts
19	* thyResizableService.handleMouseDownOutsideAngular$.subscribe(event => {
20	* console.log(Zone.current); // <root>
21	* console.log(NgZone.isInAngularZone()); // false
22	* });
23	* ```	×
24	*/	×
25		×
26	handleMouseDownOutsideAngular$ = new Subject<ThyResizeHandleMouseDownEvent>();	×
27	documentMouseUpOutsideAngular$ = new Subject<MouseEvent \| TouchEvent>();	×
28	documentMouseMoveOutsideAngular$ = new Subject<MouseEvent \| TouchEvent>();
29	mouseEnteredOutsideAngular$ = new Subject<boolean>();
30		×
31	constructor(private ngZone: NgZone, @Inject(DOCUMENT) document: any) {	×
32	this.document = document;	×
33	}	×
34		×
35	startResizing(event: MouseEvent \| TouchEvent): void {	×
36	const _isTouchEvent = isTouchEvent(event);
37	this.clearListeners();	×
38	const moveEvent = _isTouchEvent ? 'touchmove' : 'mousemove';	×
39	const upEvent = _isTouchEvent ? 'touchend' : 'mouseup';	×
40	const moveEventHandler = (e: MouseEvent \| TouchEvent) => {
41	this.documentMouseMoveOutsideAngular$.next(e);	×
42	};	×
43	const upEventHandler = (e: MouseEvent \| TouchEvent) => {	×
44	this.documentMouseUpOutsideAngular$.next(e);	×
45	this.clearListeners();	×
46	};
47
48	this.listeners.set(moveEvent, moveEventHandler);
49	this.listeners.set(upEvent, upEventHandler);
50	this.ngZone.runOutsideAngular(() => {	×
51	this.listeners.forEach((handler, name) => {	×
52	this.document.addEventListener(name, handler as EventListener);
53	});	×
54	});
55	}
56		×
57	private clearListeners(): void {	×
58	this.listeners.forEach((handler, name) => {	×
59	this.document.removeEventListener(name, handler as EventListener);	×
60	});	×
61	this.listeners.clear();
62	}	1✔
63
64	ngOnDestroy(): void {
65	this.handleMouseDownOutsideAngular$.complete();
66	this.documentMouseUpOutsideAngular$.complete();
67	this.documentMouseMoveOutsideAngular$.complete();	1✔
68	this.mouseEnteredOutsideAngular$.complete();
69	this.clearListeners();
70	}
71	}

atinc / ngx-tethys / d9ae709b-3c27-4b69-b125-b8b80b54f90b

Source File Press 'n' to go to next uncovered line, 'b' for previous

Source File
Press 'n' to go to next uncovered line, 'b' for previous