d9ae709b-3c27-4b69-b125-b8b80b54f90b

import {
    ChangeDetectionStrategy,
    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-hue',
    templateUrl: './hue.component.html',
    changeDetection: ChangeDetectionStrategy.OnPush,
    standalone: true,
    imports: [ThyCoordinatesDirective]
})
export class ThyHueComponent implements OnChanges {
    @HostBinding('class.thy-hue') className = true;

    @Input() color: ThyColor;

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

    constructor(private readonly renderer: Renderer2) {}

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

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

    private changePointerPosition(hue: number): void {
        const x = (hue / 360) * 100;
        this.renderer.setStyle(this.pointer.nativeElement, 'left', `${x}%`);
    }

    handleChange(event: {
        x: number;
        y: number;
        top: number;
        left: number;
        containerHeight: number;
        containerWidth: number;
        $event: Event;
    }) {
        let x;
        if (event.left < 0) {
            x = 0;
        } else if (event.left > event.containerWidth) {
            x = 1;
        } else {
            x = Math.round((event.left * 100) / event.containerWidth) / 100;
        }
        this.changePointerPosition(x * 360);
        this.colorChange.emit(new ThyColor({ h: x * 360, s: this.color.saturation, v: this.color.value, alpha: this.color.alpha }));
    }
}

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