68ef226c-f83e-44c1-b8ed-e420a83c5d84

Committed 28 May 2025 10:31AM UTC coverage: 10.352% (-80.0%) from 90.316%

Build # 68ef226c-f83e-44c1-b8ed-e420a83c5d84

Build Type

Pull #3460

circleci

Committed by

pubuzhixing8

Commit Message

chore: xxx

Pull Request Pull Request #3460: refactor(icon): migrate signal input #TINFR-1476

Run Details

132 of 6823 branches covered (1.93%)

Branch coverage included in aggregate %.

10 of 14 new or added lines in 1 file covered. (71.43%)

11648 existing lines in 344 files now uncovered.

2078 of 14525 relevant lines covered (14.31%)

6.69 hits per line

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

8.0

/src/color-picker/parts/saturation/saturation.component.ts

import { Component, ElementRef, HostBinding, Renderer2, effect, inject, input, output, viewChild } from '@angular/core';
import { ThyCoordinatesDirective } from '../../coordinates.directive';
import { ThyColor } from '../../helpers/color.class';

/**
 * @internal
 */
@Component({
    selector: 'thy-saturation',
    templateUrl: './saturation.component.html',
    imports: [ThyCoordinatesDirective]
})
export class ThySaturation {
    private readonly renderer = inject(Renderer2);

    @HostBinding('class.thy-saturation') className = true;

    readonly panel = viewChild<ElementRef>('panel');

    readonly pointer = viewChild<ElementRef>('pointer');

    readonly colorChange = output<ThyColor>();

    readonly color = input<ThyColor>();

    constructor() {
        effect(() => {
            this.setBackground();
            this.changePointerPosition();
        });
    }

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

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

    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 { Component, ElementRef, HostBinding, Renderer2, effect, inject, input, output, viewChild } from '@angular/core';
2	import { ThyCoordinatesDirective } from '../../coordinates.directive';
3	import { ThyColor } from '../../helpers/color.class';
4
5	/**
6	* @internal
7	*/
8	@Component({
9	selector: 'thy-saturation',
10	templateUrl: './saturation.component.html',	1✔
11	imports: [ThyCoordinatesDirective]
UNCOV 12	})	×
UNCOV 13	export class ThySaturation {	×
UNCOV 14	private readonly renderer = inject(Renderer2);	×
UNCOV 15		×
UNCOV 16	@HostBinding('class.thy-saturation') className = true;	×
UNCOV 17		×
UNCOV 18	readonly panel = viewChild<ElementRef>('panel');	×
UNCOV 19		×
UNCOV 20	readonly pointer = viewChild<ElementRef>('pointer');	×
21
22	readonly colorChange = output<ThyColor>();
23
UNCOV 24	readonly color = input<ThyColor>();	×
25
26	constructor() {
UNCOV 27	effect(() => {	×
UNCOV 28	this.setBackground();	×
UNCOV 29	this.changePointerPosition();	×
UNCOV 30	});	×
UNCOV 31	}	×
32
33	setBackground() {
UNCOV 34	this.renderer.setStyle(this.panel().nativeElement, 'background', `hsl(${this.color().hue},100%,50%)`);	×
UNCOV 35	}	×
UNCOV 36		×
37	changePointerPosition(s?: number, v?: number) {
UNCOV 38	const saturation = s ?? this.color().saturation;	×
UNCOV 39	const value = v ?? this.color().value;	×
40	const pointer = this.pointer();
UNCOV 41	this.renderer.setStyle(pointer.nativeElement, 'left', `${saturation}%`);	×
UNCOV 42	this.renderer.setStyle(pointer.nativeElement, 'top', `${100 - value}%`);	×
43	}
UNCOV 44		×
UNCOV 45	handleChange(event: {	×
46	x: number;
UNCOV 47	y: number;	×
UNCOV 48	top: number;	×
UNCOV 49	left: number;	×
UNCOV 50	containerHeight: number;	×
UNCOV 51	containerWidth: number;	×
UNCOV 52	$event: Event;	×
53	}) {
54	let x = event.left,	1✔
55	y = event.top;	1✔
56	if (event.left < 0) {
57	x = 0;
58	} else if (event.left > event.containerWidth) {
59	x = event.containerWidth;
60	}
61	if (event.top < 0) {
62	y = 0;
63	} else if (event.top > event.containerHeight) {	1✔
64	y = event.containerHeight;
65	}
66
67	const s = x / event.containerWidth;
68	let v = 1 - y / event.containerHeight;
69	v = v > 0 ? v : 0;
70	v = v > 1 ? 1 : v;
71
72	this.changePointerPosition(s * 100, v * 100);
73
74	this.colorChange.emit(new ThyColor({ h: this.color().hue, s: s * 100, v: v * 100, alpha: this.color().alpha }));
75	}
76	}

atinc / ngx-tethys / 68ef226c-f83e-44c1-b8ed-e420a83c5d84

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