d9ae709b-3c27-4b69-b125-b8b80b54f90b

import {
    Directive,
    ElementRef,
    InjectFlags,
    Input,
    OnChanges,
    OnInit,
    SimpleChanges,
    Injector,
    OnDestroy,
    AfterViewInit
} from '@angular/core';
import { InputBoolean } from 'ngx-tethys/core';
import { ThyImageGroupComponent } 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'
    },
    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() @InputBoolean() thyDisablePreview: boolean;

    /**
     * 是否自动计算图片资源大小
     */
    @Input() @InputBoolean() thyResolveSize = false;

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

    private parentGroup: ThyImageGroupComponent;

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

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