d9ae709b-3c27-4b69-b125-b8b80b54f90b

import {
    Component,
    ElementRef,
    EventEmitter,
    HostBinding,
    Input,
    OnChanges,
    Output,
    Renderer2,
    SimpleChanges,
    ViewChild
} from '@angular/core';
import { ThyCoordinatesDirective } from '../../coordinates.directive';
import ThyColor from '../../helpers/color.class';

/**
 * @internal
 */
@Component({
    selector: 'thy-saturation',
    templateUrl: './saturation.component.html',
    standalone: true,
    imports: [ThyCoordinatesDirective]
})
export class ThySaturationComponent implements OnChanges {
    @HostBinding('class.thy-saturation') className = true;

    @ViewChild('panel', { static: true })
    public panel: ElementRef;

    @ViewChild('pointer', { static: true })
    public pointer: ElementRef;

    @Output()
    public colorChange = new EventEmitter<ThyColor>(false);

    @Input()
    public color: ThyColor;

    ngOnChanges(changes: SimpleChanges): void {
        if (changes.color && changes.color.previousValue !== changes.color.currentValue) {
            this.setBackground();
            this.changePointerPosition(this.color.saturation, this.color.value);
        }
    }

    constructor(private readonly renderer: Renderer2) {}

    setBackground() {
        this.renderer.setStyle(this.panel.nativeElement, 'background', `hsl(${this.color.hue},100%,50%)`);
    }

    changePointerPosition(s: number, v: number) {
        this.renderer.setStyle(this.pointer.nativeElement, 'left', `${s}%`);
        this.renderer.setStyle(this.pointer.nativeElement, 'top', `${100 - v}%`);
    }

    handleChange(event: {
        x: number;
        y: number;
        top: number;
        left: number;
        containerHeight: number;
        containerWidth: number;
        $event: Event;
    }) {
        let x = event.left,
            y = event.top;
        if (event.left < 0) {
            x = 0;
        } else if (event.left > event.containerWidth) {
            x = event.containerWidth;
        }
        if (event.top < 0) {
            y = 0;
        } else if (event.top > event.containerHeight) {
            y = event.containerHeight;
        }

        const s = x / event.containerWidth;
        let v = 1 - y / event.containerHeight;
        v = v > 0 ? v : 0;
        v = v > 1 ? 1 : v;

        this.changePointerPosition(s * 100, v * 100);

        this.colorChange.emit(new ThyColor({ h: this.color.hue, s: s * 100, v: v * 100, alpha: this.color.alpha }));
    }
}

1	import {
2	Component,
3	ElementRef,
4	EventEmitter,
5	HostBinding,
6	Input,
7	OnChanges,
8	Output,
9	Renderer2,	1✔
10	SimpleChanges,
11	ViewChild	×
12	} from '@angular/core';	×
13	import { ThyCoordinatesDirective } from '../../coordinates.directive';	×
14	import ThyColor from '../../helpers/color.class';
15
16	/**
17	* @internal	×
18	*/	×
19	@Component({	×
20	selector: 'thy-saturation',
21	templateUrl: './saturation.component.html',
22	standalone: true,	×
23	imports: [ThyCoordinatesDirective]
24	})
25	export class ThySaturationComponent implements OnChanges {	×
26	@HostBinding('class.thy-saturation') className = true;	×
27
28	@ViewChild('panel', { static: true })
29	public panel: ElementRef;	×
30		×
31	@ViewChild('pointer', { static: true })	×
32	public pointer: ElementRef;
33		×
34	@Output()	×
35	public colorChange = new EventEmitter<ThyColor>(false);
36		×
37	@Input()	×
38	public color: ThyColor;
39		×
40	ngOnChanges(changes: SimpleChanges): void {	×
41	if (changes.color && changes.color.previousValue !== changes.color.currentValue) {
42	this.setBackground();	×
43	this.changePointerPosition(this.color.saturation, this.color.value);	×
44	}	×
45	}	×
46		×
47	constructor(private readonly renderer: Renderer2) {}	×
48
49	setBackground() {	1✔
50	this.renderer.setStyle(this.panel.nativeElement, 'background', `hsl(${this.color.hue},100%,50%)`);
51	}
52		1✔
53	changePointerPosition(s: number, v: number) {
54	this.renderer.setStyle(this.pointer.nativeElement, 'left', `${s}%`);
55	this.renderer.setStyle(this.pointer.nativeElement, 'top', `${100 - v}%`);
56	}
57
58	handleChange(event: {
59	x: number;
60	y: number;	1✔
61	top: number;
62	left: number;
63	containerHeight: number;
64	containerWidth: number;
65	$event: Event;
66	}) {
67	let x = event.left,
68	y = event.top;
69	if (event.left < 0) {
70	x = 0;
71	} else if (event.left > event.containerWidth) {
72	x = event.containerWidth;
73	}
74	if (event.top < 0) {
75	y = 0;
76	} else if (event.top > event.containerHeight) {
77	y = event.containerHeight;
78	}
79
80	const s = x / event.containerWidth;
81	let v = 1 - y / event.containerHeight;
82	v = v > 0 ? v : 0;
83	v = v > 1 ? 1 : v;
84
85	this.changePointerPosition(s * 100, v * 100);
86
87	this.colorChange.emit(new ThyColor({ h: this.color.hue, s: s * 100, v: v * 100, alpha: this.color.alpha }));
88	}
89	}

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