881c8997-29c3-4d01-9ef1-22092f16cec2

Committed 03 Apr 2024 03:31AM UTC coverage: 90.404% (-0.2%) from 90.585%

Build # 881c8997-29c3-4d01-9ef1-22092f16cec2

Build Type

Pull #3062

circleci

Committed by

minlovehua

Commit Message

refactor(all): use the transform attribute of @input() instead of @InputBoolean() and @InputNumber()

Pull Request Pull Request #3062: refactor(all): use the transform attribute of @input() instead of @InputBoolean() and @InputNumber()

Run Details

5411 of 6635 branches covered (81.55%)

Branch coverage included in aggregate %.

217 of 223 new or added lines in 82 files covered. (97.31%)

201 existing lines in 53 files now uncovered.

13176 of 13925 relevant lines covered (94.62%)

980.1 hits per line

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

83.87

/src/image/image.directive.ts

import {
    Directive,
    ElementRef,
    InjectFlags,
    Input,
    OnChanges,
    OnInit,
    SimpleChanges,
    Injector,
    OnDestroy,
    AfterViewInit,
    booleanAttribute
} from '@angular/core';
import { ThyImageGroup } from './image-group.component';
import { ThyImageMeta } from './image.class';
import { ThyImageService } from './image.service';

/**
 * thyImage: 预览图片指令，只可绑定到 img 标签上
 * @name img[thyImage]
 * @order 10
 */
@Directive({
    selector: 'img[thyImage]',
    exportAs: 'thyImage',
    host: {
        '(click)': 'onPreview($event)',
        class: 'thy-image',
        '[class.thy-image-disabled]': 'thyDisablePreview'
    },
    standalone: true
})
export class ThyImageDirective implements OnInit, OnChanges, AfterViewInit, OnDestroy {
    /**
     * 图片地址
     */
    @Input() thySrc: string;

    /**
     * 预览图片地址
     */
    @Input() thyPreviewSrc: string;

    /**
     * 图片原图地址
     */
    @Input() thyOriginSrc: string;

    /**
     * 图片附加信息，包含 { name: string, size?: string | number; }
     */
    @Input() thyImageMeta: ThyImageMeta;

    /**
     * 是否禁止预览
     * @default false
     */
    @Input({ transform: booleanAttribute }) thyDisablePreview: boolean;

    /**
     * 是否自动计算图片资源大小
     */
    @Input({ transform: booleanAttribute }) thyResolveSize = false;

    get previewable(): boolean {
        return !this.thyDisablePreview;
    }

    private parentGroup: ThyImageGroup;

    constructor(private thyImageService: ThyImageService, private injector: Injector, private elementRef: ElementRef) {}

    ngOnInit(): void {
        this.getParentGroup();
    }

    ngAfterViewInit(): void {
        if (this.parentGroup) {
            this.addParentImage();
        }
    }

    getParentGroup() {
        while (true) {
            // 多层 thy-image-group 嵌套时，获取最外层 thy-image-group 下的所有图片
            const injector = this.parentGroup?.injector || this.injector;
            const parentGroup = injector.get(ThyImageGroup, null, InjectFlags.SkipSelf);
            if (!parentGroup) {
                break;
            }
            this.parentGroup = parentGroup;
        }
    }

    addParentImage() {
        setTimeout(() => {
            const parentElement: HTMLElement = this.parentGroup.element.nativeElement;
            const images = parentElement.querySelectorAll('img[thyImage]');
            const index = Array.prototype.indexOf.call(images, this.elementRef.nativeElement);
            if (index >= 0) {
                this.parentGroup.addImage(this, index);
            } else {
                this.parentGroup.addImage(this, this.parentGroup.images.length);
            }
        });
    }

    ngOnChanges(changes: SimpleChanges): void {
        const { thySrc } = changes;
        if (thySrc) {
            this.elementRef.nativeElement.src = thySrc.currentValue;
        }
    }

    onPreview(event: MouseEvent) {
        if (!this.previewable || event.button !== 0) {
            return;
        }
        if (this.parentGroup) {
            const previewAbleImages = this.parentGroup.images.filter(e => e.previewable);
            const previewImages = previewAbleImages.map(e => ({
                src: e.thyPreviewSrc || e.thySrc,
                ...e.thyImageMeta,
                origin: {
                    src: e.thyOriginSrc
                }
            }));
            const startIndex = previewAbleImages.findIndex(el => this === el);
            this.thyImageService.preview(previewImages, {
                startIndex,
                resolveSize: this.thyResolveSize
            });
        } else {
            const previewImages = [
                {
                    src: this.thyPreviewSrc || this.thySrc,
                    ...this.thyImageMeta,
                    origin: {
                        src: this.thyOriginSrc
                    }
                }
            ];
            this.thyImageService.preview(previewImages, { resolveSize: this.thyResolveSize });
        }
    }

    ngOnDestroy(): void {
        if (this.parentGroup) {
            const index = this.parentGroup.images.findIndex(item => item === this);
            this.parentGroup.removeImage(index);
        }
    }
}

1	import {
2	Directive,
3	ElementRef,
4	InjectFlags,
5	Input,
6	OnChanges,
7	OnInit,
8	SimpleChanges,
9	Injector,
10	OnDestroy,	1✔
11	AfterViewInit,
12	booleanAttribute	4✔
13	} from '@angular/core';
14	import { ThyImageGroup } from './image-group.component';
15	import { ThyImageMeta } from './image.class';	7✔
16	import { ThyImageService } from './image.service';	7✔
17		7✔
18	/**	7✔
19	* thyImage: 预览图片指令，只可绑定到 img 标签上
20	* @name img[thyImage]
21	* @order 10	7✔
22	*/
23	@Directive({
24	selector: 'img[thyImage]',	7✔
25	exportAs: 'thyImage',	2✔
26	host: {
27	'(click)': 'onPreview($event)',
28	class: 'thy-image',
29	'[class.thy-image-disabled]': 'thyDisablePreview'	7✔
30	},
31	standalone: true	9✔
32	})	9✔
33	export class ThyImageDirective implements OnInit, OnChanges, AfterViewInit, OnDestroy {	9✔
34	/**	7✔
35	* 图片地址
36	*/	2✔
37	@Input() thySrc: string;
38
39	/**
40	* 预览图片地址	2✔
41	*/	2✔
42	@Input() thyPreviewSrc: string;	2✔
43		2✔
44	/**	2!
45	* 图片原图地址	2✔
46	*/
47	@Input() thyOriginSrc: string;
UNCOV 48		×
49	/**
50	* 图片附加信息，包含 { name: string, size?: string \| number; }
51	*/
52	@Input() thyImageMeta: ThyImageMeta;
53		12✔
54	/**	12!
55	* 是否禁止预览	12✔
56	* @default false
57	*/
58	@Input({ transform: booleanAttribute }) thyDisablePreview: boolean;
59		4✔
60	/**	1✔
61	* 是否自动计算图片资源大小
62	*/	3!
NEW 63	@Input({ transform: booleanAttribute }) thyResolveSize = false;	×
64		×
65	get previewable(): boolean {	×
66	return !this.thyDisablePreview;
67	}
68
69	private parentGroup: ThyImageGroup;
70
UNCOV 71	constructor(private thyImageService: ThyImageService, private injector: Injector, private elementRef: ElementRef) {}	×
72		×
73	ngOnInit(): void {
74	this.getParentGroup();
75	}
76
77	ngAfterViewInit(): void {
78	if (this.parentGroup) {	3✔
79	this.addParentImage();
80	}	6✔
81	}
82
83	getParentGroup() {
84	while (true) {
85	// 多层 thy-image-group 嵌套时，获取最外层 thy-image-group 下的所有图片
86	const injector = this.parentGroup?.injector \|\| this.injector;
87	const parentGroup = injector.get(ThyImageGroup, null, InjectFlags.SkipSelf);	3✔
88	if (!parentGroup) {
89	break;
90	}
91	this.parentGroup = parentGroup;	7✔
92	}	2✔
93	}	2✔
94
95	addParentImage() {
96	setTimeout(() => {	1✔
97	const parentElement: HTMLElement = this.parentGroup.element.nativeElement;
98	const images = parentElement.querySelectorAll('img[thyImage]');
99	const index = Array.prototype.indexOf.call(images, this.elementRef.nativeElement);
100	if (index >= 0) {
101	this.parentGroup.addImage(this, index);	1✔
102	} else {
103	this.parentGroup.addImage(this, this.parentGroup.images.length);
104	}
105	});
106	}
107
108	ngOnChanges(changes: SimpleChanges): void {
109	const { thySrc } = changes;
110	if (thySrc) {	1✔
111	this.elementRef.nativeElement.src = thySrc.currentValue;
112	}
113	}
114
115	onPreview(event: MouseEvent) {
116	if (!this.previewable \|\| event.button !== 0) {
117	return;
118	}
119	if (this.parentGroup) {
120	const previewAbleImages = this.parentGroup.images.filter(e => e.previewable);
121	const previewImages = previewAbleImages.map(e => ({
122	src: e.thyPreviewSrc \|\| e.thySrc,
123	...e.thyImageMeta,
124	origin: {
125	src: e.thyOriginSrc
126	}
127	}));
128	const startIndex = previewAbleImages.findIndex(el => this === el);
129	this.thyImageService.preview(previewImages, {
130	startIndex,
131	resolveSize: this.thyResolveSize
132	});
133	} else {
134	const previewImages = [
135	{
136	src: this.thyPreviewSrc \|\| this.thySrc,
137	...this.thyImageMeta,
138	origin: {
139	src: this.thyOriginSrc
140	}
141	}
142	];
143	this.thyImageService.preview(previewImages, { resolveSize: this.thyResolveSize });
144	}
145	}
146
147	ngOnDestroy(): void {
148	if (this.parentGroup) {
149	const index = this.parentGroup.images.findIndex(item => item === this);
150	this.parentGroup.removeImage(index);
151	}
152	}
153	}

atinc / ngx-tethys / 881c8997-29c3-4d01-9ef1-22092f16cec2

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