9ff6da08-8d6e-4588-9562-dfbbbe046337

Committed 14 Nov 2024 06:39AM UTC coverage: 90.352% (-0.05%) from 90.398%

Build # 9ff6da08-8d6e-4588-9562-dfbbbe046337

Build Type

push

circleci

Committed by

web-flow

Commit Message

feat: support dark theme for all components #TINFR-950 (#3238)

Run Details

5513 of 6748 branches covered (81.7%)

Branch coverage included in aggregate %.

26 of 30 new or added lines in 3 files covered. (86.67%)

3 existing lines in 1 file now uncovered.

13169 of 13929 relevant lines covered (94.54%)

998.11 hits per line

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

88.98

/src/watermark/watermark.directive.ts

import { Directive, Input, ElementRef, OnInit, SimpleChanges, OnChanges, inject, DestroyRef, effect } from '@angular/core';
import { Subject, Observable } from 'rxjs';
import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
import { DEFAULT_WATERMARK_CONFIG, DEFAULT_CANVAS_CONFIG } from './config';
import { MutationObserverFactory } from '@angular/cdk/observers';
import { coerceBooleanProperty } from 'ngx-tethys/util';
import { ThyThemeStore } from 'ngx-tethys/core';

/**
 * @public
 * 水印样式配置
 */
export interface ThyCanvasConfigType {
    /**
     * 偏移角度
     */
    degree?: number;
    /**
     * 字体颜色。如果传的是数组，第一个为默认主题的字体颜色，第二个为黑暗主题的字体颜色
     */
    color?: string | string[];
    /**
     * 字体大小
     */
    fontSize?: number | string;
    /**
     * 文本行高
     */
    textLineHeight?: number;
    /**
     * 横纵间距
     */
    gutter?: number[];
}

/**
 * 水印指令
 * @name thyWatermark
 */
@Directive({
    selector: '[thyWatermark]',
    standalone: true
})
export class ThyWatermarkDirective implements OnInit, OnChanges {
    private el = inject(ElementRef);

    /**
     * 是否禁用，默认为 false
     */
    @Input({ transform: coerceBooleanProperty })
    thyDisabled: boolean = false;

    content: string;
    /**
     * 水印内容
     */
    @Input()
    set thyWatermark(value: string) {
        value = value?.replace(/^\"|\"$/g, '');
        this.content = !!value ? value : '';
    }

    /**
     * 水印样式配置
     */
    @Input() thyCanvasConfig: ThyCanvasConfigType;

    private createWatermark$ = new Subject<string>();

    private observer: MutationObserver;

    private canvas: HTMLCanvasElement;

    private wmDiv: HTMLElement;

    private readonly destroyRef = inject(DestroyRef);

    private thyThemeStore = inject(ThyThemeStore);

    constructor() {
        effect(() => {
            if (!this.thyDisabled && this.thyThemeStore.theme()) {
                this.refreshWatermark();
            }
        });
    }

    ngOnInit() {
        if (!this.thyDisabled) {
            this.createWatermark$.pipe(takeUntilDestroyed(this.destroyRef)).subscribe(() => {
                this.observeAttributes()
                    .pipe(takeUntilDestroyed(this.destroyRef))
                    .subscribe(() => {});
            });

            this.createWatermark();
        }
    }

    ngOnChanges(changes: SimpleChanges): void {
        const { thyWatermark, thyDisabled } = changes;
        const thyWatermarkChange = () => {
            if (thyWatermark.firstChange) return;
            if (thyWatermark.currentValue) {
                this.refreshWatermark();
            }
        };
        const thyDisabledChange = () => {
            if (thyDisabled.firstChange) return;
            thyDisabled?.currentValue ? this.removeWatermark() : this.refreshWatermark();
        };
        thyWatermark && thyWatermarkChange();
        thyDisabled && thyDisabledChange();
    }

    private refreshWatermark() {
        this.removeWatermark();
        this.createWatermark();
    }

    private removeWatermark() {
        if (this.wmDiv) {
            this.wmDiv.remove();
            this.wmDiv = null;
        }
    }

    createCanvas() {
        let { gutter, fontSize, color, degree, textLineHeight } = {
            ...DEFAULT_CANVAS_CONFIG,
            ...(this.thyCanvasConfig || {})
        };
        color = this.thyThemeStore.normalizeColor(color);

        const [xGutter, yGutter] = gutter;
        const canvas = document.createElement('canvas');
        const ctx = canvas.getContext('2d');

        const getFakeSize = () => {
            const fakeBox = document.createElement('div');
            const fakeBoxStyle = {
                position: 'absolute',
                top: 0,
                left: 0,
                display: 'inline-block',
                'font-size': `${parseFloat('' + fontSize)}px`,
                'word-wrap': 'break-word',
                'font-family': 'inherit',
                'white-space': 'pre-line'
            };
            const styleStr = Object.keys(fakeBoxStyle).reduce((pre, next) => ((pre += `${next}:${fakeBoxStyle[next]};`), pre), '');
            fakeBox.setAttribute('style', styleStr);

            fakeBox.innerHTML = this.content.replace(/(\\n)/gm, '</br>');
            document.querySelector('body').insertBefore(fakeBox, document.querySelector('body').firstChild);
            const { width, height } = fakeBox.getBoundingClientRect();
            fakeBox.remove();
            return { width, height };
        };
        const { width: fakeBoxWidth, height: fakeBoxHeight } = getFakeSize();

        const angle = (degree * Math.PI) / 180;
        const contentArr = this.content.split('\\n');
        const canvasHeight = Math.sin(angle) * fakeBoxWidth + fakeBoxHeight;

        let start = Math.ceil(Math.sin(angle) * fakeBoxWidth * Math.sin(angle));
        const canvasWidth = start + fakeBoxWidth;
        canvas.setAttribute('width', '' + (canvasWidth + xGutter));
        canvas.setAttribute('height', '' + (canvasHeight + yGutter));

        ctx.font = `${parseFloat('' + fontSize)}px microsoft yahei`;
        ctx.textAlign = 'center';
        ctx.textBaseline = 'top';
        ctx.fillStyle = color;
        ctx.rotate(0 - (degree * Math.PI) / 180);
        contentArr.map((k, i) => {
            ctx.fillText(k, -start + Math.ceil(canvasWidth / 2), Math.sin(angle) * canvasWidth + textLineHeight * i);
            start += Math.sin(angle) * textLineHeight;
        });
        this.canvas = canvas;
        return canvas;
    }

    private createWatermark(isRefresh = true) {
        const watermarkDiv = this.wmDiv || document.createElement('div');

        const background = !isRefresh ? this.canvas.toDataURL() : this.createCanvas().toDataURL();
        const watermarkStyle = {
            ...DEFAULT_WATERMARK_CONFIG,
            'background-image': `url(${background})`
        };

        const styleStr = Object.keys(watermarkStyle).reduce((pre, next) => ((pre += `${next}:${watermarkStyle[next]};`), pre), '');
        watermarkDiv.setAttribute('style', styleStr);

        if (!this.wmDiv) {
            const parentNode = this.el.nativeElement;
            watermarkDiv.classList.add(`_vm`);
            this.wmDiv = watermarkDiv;
            parentNode.insertBefore(watermarkDiv, parentNode.firstChild);
        }
        this.createWatermark$.next('');
    }

    private observeAttributes() {
        this.observer?.disconnect();
        return new Observable(observe => {
            const stream = new Subject<MutationRecord[]>();
            this.observer = new MutationObserverFactory().create(mutations => stream.next(mutations));
            if (this.observer) {
                this.observer.observe(this.wmDiv, {
                    attributes: true
                });
            }
            stream.pipe(takeUntilDestroyed(this.destroyRef)).subscribe(() => {
                if (this.wmDiv) {
                    this?.observer?.disconnect();
                    this.createWatermark(false);
                }
            });
            observe.next(stream);
            return () => {
                this.observer?.disconnect();
            };
        });
    }
}

1	import { Directive, Input, ElementRef, OnInit, SimpleChanges, OnChanges, inject, DestroyRef, effect } from '@angular/core';
2	import { Subject, Observable } from 'rxjs';
3	import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
4	import { DEFAULT_WATERMARK_CONFIG, DEFAULT_CANVAS_CONFIG } from './config';
5	import { MutationObserverFactory } from '@angular/cdk/observers';
6	import { coerceBooleanProperty } from 'ngx-tethys/util';
7	import { ThyThemeStore } from 'ngx-tethys/core';
8
9	/**
10	* @public
11	* 水印样式配置
12	*/
13	export interface ThyCanvasConfigType {	1✔
14	/**
15	* 偏移角度	6✔
16	*/	6!
17	degree?: number;
18	/**
19	* 字体颜色。如果传的是数组，第一个为默认主题的字体颜色，第二个为黑暗主题的字体颜色	4✔
20	*/	4✔
21	color?: string \| string[];	4✔
22	/**	4✔
23	* 字体大小	4✔
24	*/	4✔
25	fontSize?: number \| string;	4!
26	/**	4✔
27	* 文本行高
28	*/
29	textLineHeight?: number;
30	/**
31	* 横纵间距	4!
32	*/	4✔
33	gutter?: number[];	10✔
34	}
35
36	/**
37	* 水印指令	4✔
38	* @name thyWatermark
39	*/
40	@Directive({
41	selector: '[thyWatermark]',	7✔
42	standalone: true	7✔
43	})	6✔
44	export class ThyWatermarkDirective implements OnInit, OnChanges {	4✔
45	private el = inject(ElementRef);	2!
46		2✔
47	/**
48	* 是否禁用，默认为 false
49	*/	7✔
50	@Input({ transform: coerceBooleanProperty })	5✔
51	thyDisabled: boolean = false;	4✔
52		1!
53	content: string;
54	/**	7✔
55	* 水印内容	7✔
56	*/
57	@Input()
58	set thyWatermark(value: string) {	6✔
59	value = value?.replace(/^\"\|\"$/g, '');	6✔
60	this.content = !!value ? value : '';
61	}
62		7!
63	/**	7✔
64	* 水印样式配置	7✔
65	*/
66	@Input() thyCanvasConfig: ThyCanvasConfigType;
67
68	private createWatermark$ = new Subject<string>();	11✔
69
70	private observer: MutationObserver;	22✔
71
72	private canvas: HTMLCanvasElement;	11✔
73		11✔
74	private wmDiv: HTMLElement;	11✔
75		11✔
76	private readonly destroyRef = inject(DestroyRef);	11✔
77		11✔
78	private thyThemeStore = inject(ThyThemeStore);	11✔
79
80	constructor() {
81	effect(() => {
82	if (!this.thyDisabled && this.thyThemeStore.theme()) {
83	this.refreshWatermark();
84	}
85	});
86	}
87
88	ngOnInit() {	88✔
89	if (!this.thyDisabled) {	11✔
90	this.createWatermark$.pipe(takeUntilDestroyed(this.destroyRef)).subscribe(() => {	11✔
91	this.observeAttributes()	11✔
92	.pipe(takeUntilDestroyed(this.destroyRef))	11✔
93	.subscribe(() => {});	11✔
94	});	11✔
95
96	this.createWatermark();	11✔
97	}	11✔
98	}	11✔
99		11✔
100	ngOnChanges(changes: SimpleChanges): void {	11✔
101	const { thyWatermark, thyDisabled } = changes;	11✔
102	const thyWatermarkChange = () => {	11✔
103	if (thyWatermark.firstChange) return;	11✔
104	if (thyWatermark.currentValue) {	11✔
105	this.refreshWatermark();	11✔
106	}	11✔
107	};	11✔
108	const thyDisabledChange = () => {	11✔
109	if (thyDisabled.firstChange) return;	11✔
110	thyDisabled?.currentValue ? this.removeWatermark() : this.refreshWatermark();	11✔
111	};	11✔
112	thyWatermark && thyWatermarkChange();
113	thyDisabled && thyDisabledChange();	11✔
114	}	11✔
115
116	private refreshWatermark() {	10✔
117	this.removeWatermark();	10✔
118	this.createWatermark();	10!
119	}	10✔
120
121	private removeWatermark() {
122	if (this.wmDiv) {
123	this.wmDiv.remove();	100✔
124	this.wmDiv = null;	10✔
125	}	10!
126	}	10✔
127		10✔
128	createCanvas() {	10✔
129	let { gutter, fontSize, color, degree, textLineHeight } = {	10✔
130	...DEFAULT_CANVAS_CONFIG,
131	...(this.thyCanvasConfig \|\| {})	10✔
132	};
133	color = this.thyThemeStore.normalizeColor(color);
134		10✔
135	const [xGutter, yGutter] = gutter;	10✔
136	const canvas = document.createElement('canvas');	10✔
137	const ctx = canvas.getContext('2d');	10✔
138		10!
139	const getFakeSize = () => {	10✔
140	const fakeBox = document.createElement('div');
141	const fakeBoxStyle = {
142	position: 'absolute',
143	top: 0,	10✔
UNCOV 144	left: 0,	×
UNCOV 145	display: 'inline-block',	×
UNCOV 146	'font-size': `${parseFloat('' + fontSize)}px`,	×
147	'word-wrap': 'break-word',
148	'font-family': 'inherit',
149	'white-space': 'pre-line'	10✔
150	};	10✔
151	const styleStr = Object.keys(fakeBoxStyle).reduce((pre, next) => ((pre += `${next}:${fakeBoxStyle[next]};`), pre), '');	10✔
152	fakeBox.setAttribute('style', styleStr);
153
154	fakeBox.innerHTML = this.content.replace(/(\\n)/gm, '</br>');
155	document.querySelector('body').insertBefore(fakeBox, document.querySelector('body').firstChild);	1✔
156	const { width, height } = fakeBox.getBoundingClientRect();	1✔
157	fakeBox.remove();
158	return { width, height };
159	};
160	const { width: fakeBoxWidth, height: fakeBoxHeight } = getFakeSize();
161
162	const angle = (degree * Math.PI) / 180;	1✔
163	const contentArr = this.content.split('\\n');
164	const canvasHeight = Math.sin(angle) * fakeBoxWidth + fakeBoxHeight;
165
166	let start = Math.ceil(Math.sin(angle) * fakeBoxWidth * Math.sin(angle));
167	const canvasWidth = start + fakeBoxWidth;
168	canvas.setAttribute('width', '' + (canvasWidth + xGutter));
169	canvas.setAttribute('height', '' + (canvasHeight + yGutter));
170
171	ctx.font = `${parseFloat('' + fontSize)}px microsoft yahei`;
172	ctx.textAlign = 'center';
173	ctx.textBaseline = 'top';
174	ctx.fillStyle = color;
175	ctx.rotate(0 - (degree * Math.PI) / 180);
176	contentArr.map((k, i) => {
177	ctx.fillText(k, -start + Math.ceil(canvasWidth / 2), Math.sin(angle) * canvasWidth + textLineHeight * i);
178	start += Math.sin(angle) * textLineHeight;
179	});
180	this.canvas = canvas;
181	return canvas;
182	}
183
184	private createWatermark(isRefresh = true) {
185	const watermarkDiv = this.wmDiv \|\| document.createElement('div');
186
187	const background = !isRefresh ? this.canvas.toDataURL() : this.createCanvas().toDataURL();
188	const watermarkStyle = {
189	...DEFAULT_WATERMARK_CONFIG,
190	'background-image': `url(${background})`
191	};
192
193	const styleStr = Object.keys(watermarkStyle).reduce((pre, next) => ((pre += `${next}:${watermarkStyle[next]};`), pre), '');
194	watermarkDiv.setAttribute('style', styleStr);
195
196	if (!this.wmDiv) {
197	const parentNode = this.el.nativeElement;
198	watermarkDiv.classList.add(`_vm`);
199	this.wmDiv = watermarkDiv;
200	parentNode.insertBefore(watermarkDiv, parentNode.firstChild);
201	}
202	this.createWatermark$.next('');
203	}
204
205	private observeAttributes() {
206	this.observer?.disconnect();
207	return new Observable(observe => {
208	const stream = new Subject<MutationRecord[]>();
209	this.observer = new MutationObserverFactory().create(mutations => stream.next(mutations));
210	if (this.observer) {
211	this.observer.observe(this.wmDiv, {
212	attributes: true
213	});
214	}
215	stream.pipe(takeUntilDestroyed(this.destroyRef)).subscribe(() => {
216	if (this.wmDiv) {
217	this?.observer?.disconnect();
218	this.createWatermark(false);
219	}
220	});
221	observe.next(stream);
222	return () => {
223	this.observer?.disconnect();
224	};
225	});
226	}
227	}

atinc / ngx-tethys / 9ff6da08-8d6e-4588-9562-dfbbbe046337

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