d9ae709b-3c27-4b69-b125-b8b80b54f90b

import { Directive, ElementRef, HostListener, OnDestroy, OnInit, Output } from '@angular/core';
import { Subject, Subscription } from 'rxjs';
import { distinctUntilChanged } from 'rxjs/operators';

/**
 * @internal
 */
@Directive({
    selector: '[thyColorCoordinates]',
    standalone: true
})
export class ThyCoordinatesDirective implements OnInit, OnDestroy {
    @Output()
    coordinatesChange = new Subject<{
        x: number;
        y: number;
        left: number;
        top: number;
        containerWidth: number;
        containerHeight: number;
        $event: any;
    }>();

    private mousechange = new Subject<{
        x: number;
        y: number;
        $event: any;
    }>();

    private mouseListening = false;

    private sub?: Subscription;

    @HostListener('mousedown', ['$event', '$event.pageX', '$event.pageY'])
    mousedown($event: Event, x: number, y: number) {
        $event.preventDefault();
        this.mouseListening = true;
        this.mousechange.next({ x, y, $event });
    }

    @HostListener('window:mousemove', ['$event', '$event.pageX', '$event.pageY'])
    mousemove($event: Event, x: number, y: number) {
        if (this.mouseListening) {
            $event.preventDefault();
            this.mousechange.next({ x, y, $event });
        }
    }

    @HostListener('window:mouseup')
    mouseup() {
        this.mouseListening = false;
    }

    constructor(public el: ElementRef) {}

    ngOnInit() {
        this.sub = this.mousechange
            .pipe(distinctUntilChanged((last, current) => last.x === current.x && last.y === current.y))
            .subscribe(n => this.handleChange(n.x, n.y, n.$event));
    }

    handleChange(x: number, y: number, $event: Event) {
        const containerWidth = this.el.nativeElement.clientWidth;
        const containerHeight = this.el.nativeElement.clientHeight;
        const left = x - (this.el.nativeElement.getBoundingClientRect().left + window.pageXOffset);
        const top = y - (this.el.nativeElement.getBoundingClientRect().top + window.pageYOffset);
        this.coordinatesChange.next({
            x,
            y,
            top,
            left,
            containerHeight,
            containerWidth,
            $event
        });
    }

    ngOnDestroy(): void {
        this.sub?.unsubscribe();
    }
}

1	import { Directive, ElementRef, HostListener, OnDestroy, OnInit, Output } from '@angular/core';
2	import { Subject, Subscription } from 'rxjs';
3	import { distinctUntilChanged } from 'rxjs/operators';
4
5	/**
6	* @internal
7	*/
8	@Directive({	1✔
9	selector: '[thyColorCoordinates]',
10	standalone: true	×
11	})	×
12	export class ThyCoordinatesDirective implements OnInit, OnDestroy {	×
13	@Output()
14	coordinatesChange = new Subject<{
15	x: number;	×
16	y: number;	×
17	left: number;	×
18	top: number;
19	containerWidth: number;
20	containerHeight: number;
21	$event: any;	×
22	}>();
23
24	private mousechange = new Subject<{	×
25	x: number;	×
26	y: number;	×
27	$event: any;	×
28	}>();
29
30	private mouseListening = false;	×
31		×
32	private sub?: Subscription;	×
33
34	@HostListener('mousedown', ['$event', '$event.pageX', '$event.pageY'])
35	mousedown($event: Event, x: number, y: number) {	×
36	$event.preventDefault();	×
37	this.mouseListening = true;	×
38	this.mousechange.next({ x, y, $event });	×
39	}	×
40
41	@HostListener('window:mousemove', ['$event', '$event.pageX', '$event.pageY'])
42	mousemove($event: Event, x: number, y: number) {
43	if (this.mouseListening) {
44	$event.preventDefault();
45	this.mousechange.next({ x, y, $event });
46	}
47	}
48
49	@HostListener('window:mouseup')
50	mouseup() {	×
51	this.mouseListening = false;
52	}	1✔
53
54	constructor(public el: ElementRef) {}
55		1✔
56	ngOnInit() {
57	this.sub = this.mousechange
58	.pipe(distinctUntilChanged((last, current) => last.x === current.x && last.y === current.y))
59	.subscribe(n => this.handleChange(n.x, n.y, n.$event));
60	}
61
62	handleChange(x: number, y: number, $event: Event) {	1✔
63	const containerWidth = this.el.nativeElement.clientWidth;
64	const containerHeight = this.el.nativeElement.clientHeight;
65	const left = x - (this.el.nativeElement.getBoundingClientRect().left + window.pageXOffset);
66	const top = y - (this.el.nativeElement.getBoundingClientRect().top + window.pageYOffset);
67	this.coordinatesChange.next({
68	x,
69	y,
70	top,
71	left,
72	containerHeight,
73	containerWidth,
74	$event
75	});
76	}
77
78	ngOnDestroy(): void {
79	this.sub?.unsubscribe();
80	}
81	}

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